/* =========================================================================
   Drunken Donut – Stylesheet
   1 Grundlagen  2 Bausteine  3 Startseite  4 Raum  5 Lobby
   6 Kniffel     7 Busfahrer  8 Responsive
   ========================================================================= */

/* --- 1 Grundlagen -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Neutrale Graustufen ohne Blaustich - die Farbe im Raum kommt vom Spiel. */
  --bg: #0f0f11;
  --surface: #161618;
  --surface-2: #1c1c1f;
  --surface-3: #252529;
  --line: #2e2e33;
  --line-soft: #232326;
  --text: #e9e9eb;
  --muted: #9a9aa2;
  --muted-2: #6d6d75;
  /* Standardakzent ist bewusst unbunt: die Startseite bleibt einfarbig. */
  --accent: #e9e9eb;
  /* Direkt aus dem Logo entnommen, damit Wortmarke und Bild zusammengehoeren. */
  --logo-pink: #de7298;
  --logo-cream: #efe3c3;
  --cyan: #7fb2c8;
  --good: #4ba97a;
  --warn: #c99a3e;
  --bad: #c65f5f;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --game: var(--accent);
}

/* Die helle Variante der Spielfarbe. Sie muss ueberall dort deklariert werden,
   wo auch --game gesetzt wird: eine Custom Property loest ihre var()-Verweise
   im eigenen Element auf und wird erst danach vererbt. Sonst bliebe hier der
   Standardwert stehen, waehrend --game laengst gruen ist. */
:root,
#screen-room,
.game-card { --game-soft: color-mix(in srgb, var(--game) 62%, #fff); }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.011em; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

:focus-visible {
  outline: 2px solid var(--game-soft);
  outline-offset: 2px;
}

.screen { min-height: 100dvh; }
.hidden { display: none !important; }
.only-mobile { display: none; }

/* --- 2 Bausteine --------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .62em 1.15em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
  user-select: none;
}
/* filter statt background: wirkt auf jede Knopfvariante, ohne deren
   eigene Fuellfarbe zu ueberschreiben. */
.btn:hover:not(:disabled) { filter: brightness(1.12); border-color: var(--muted-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

/* Flach gefuellt, dunkle Schrift: der Akzent traegt sich selbst, ohne Leuchten. */
.btn-primary {
  --btn-bg: var(--game);
  --btn-fg: #101012;
  border-color: transparent;
  font-weight: 600;
}
.btn-ghost { --btn-bg: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.btn-good { --btn-bg: color-mix(in srgb, var(--good) 20%, var(--surface-2)); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.btn-bad  { --btn-bg: color-mix(in srgb, var(--bad) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--bad) 38%, transparent); }
.btn-sm { padding: .42em .8em; font-size: .85rem; }
.btn-lg { padding: .8em 1.6em; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* 44 px ist die empfohlene Mindestgroesse fuer Tippziele. */
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 1.05rem;
  transition: background .15s ease;
}
.icon-btn:hover { background: var(--surface-3); }

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
input::placeholder { color: var(--muted-2); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--game);
  background: var(--surface-2);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .18em .6em;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}
.pill-live { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--good); }
.pill-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.pill-accent { background: color-mix(in srgb, var(--game) 24%, transparent); color: var(--game-soft); }
.pill-stake { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }

.muted { color: var(--muted); }
.tiny { font-size: .8rem; }
.center { text-align: center; }
.stack { display: grid; gap: .75rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }

/* Toasts */
.toasts {
  position: fixed;
  left: 50%;
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: .5rem;
  z-index: 90;
  pointer-events: none;
  width: min(92vw, 460px);
}
.toast {
  padding: .7em 1.1em;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: .92rem;
  animation: toastIn .22s ease both;
}
.toast.bad { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

.conn-lost {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: .5em;
  text-align: center;
  background: var(--warn);
  color: #1a1400;
  font-weight: 700;
  font-size: .9rem;
  z-index: 100;
}

/* --- 3 Startseite -------------------------------------------------------- */
#screen-home {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2.5rem, 9vh, 5rem) 1.3rem 3rem;
}

/* Linksbuendig statt mittig: liest sich wie ein Werkzeug, nicht wie eine
   Werbeseite. Das Logo steht neben dem Namen, nicht als Banner darueber. */
.hero { display: grid; gap: .7rem; justify-items: start; }
.hero-top { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.6rem); }
.hero-logo {
  width: clamp(76px, 15vw, 104px);
  height: auto;
  flex: none;
  /* Das Logo bringt eine dunkle Kontur mit; auf dunklem Grund braucht es
     etwas Luft, damit es nicht am Untergrund klebt. */
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, .5));
}
.hero-text { display: grid; gap: .45rem; }
.hero-badge {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .3em;
  font-size: clamp(2rem, 5.6vw, 2.9rem);
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--text);
}
.hero-title span { color: var(--logo-pink); }
.hero-sub { max-width: 52ch; color: var(--muted); font-size: 1rem; }

.name-row {
  display: grid;
  gap: .35rem;
  width: 100%;
  margin-top: 1.6rem;
}
.name-row label,
.join-row-label { font-size: .78rem; color: var(--muted-2); font-weight: 600; letter-spacing: .02em; }

.join-block { display: grid; gap: .35rem; width: 100%; margin-top: .9rem; }
.join-row { display: flex; gap: .5rem; width: 100%; }

.section-label {
  margin-top: clamp(2.4rem, 7vh, 3.5rem);
  margin-bottom: .7rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.section-label + .games { margin-top: 0; }
#joinCode {
  width: 8ch;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.join-row .btn { flex: 1; }

/* Liste statt Kachelfeld: eine Zeile je Spiel, durch feine Linien getrennt. */
.games {
  display: grid;
  gap: 0;
  margin-top: clamp(2.4rem, 7vh, 3.5rem);
  border-top: 1px solid var(--line-soft);
}

.game-card {
  --game: var(--accent);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 1rem;
  padding: 1.1rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background .13s ease;
}
.game-card:hover { background: var(--surface); }
.game-card .gc-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--game);
}
.game-card .gc-icon svg { width: 22px; height: 22px; display: block; }
.game-card h2 { font-size: 1.05rem; font-weight: 600; }
.game-card p { grid-column: 2; color: var(--muted); font-size: .88rem; }
.game-card .gc-meta { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: .5rem; align-items: center; }
.game-card .gc-go { display: none; }

.home-foot { margin-top: 2.5rem; display: grid; gap: .5rem; }
.stat { color: var(--muted-2); font-size: .82rem; }
.fineprint { color: var(--muted-2); font-size: .78rem; max-width: 56ch; }

/* --- 4 Raum -------------------------------------------------------------- */
#screen-room { display: flex; flex-direction: column; height: 100dvh; }

.topbar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem clamp(.7rem, 2vw, 1.2rem);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  /* kein Weichzeichner: flache Flaeche liest sich ruhiger */
  flex: none;
  padding-top: max(.6rem, env(safe-area-inset-top));
}
.topbar-title { display: flex; align-items: center; gap: .7rem; min-width: 0; flex: 1; }
.tb-icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--game);
  flex: none;
}
/* Lange Spielnamen ("Up and Down the River") duerfen nicht unter die
   Knoepfe rutschen - der Titelblock kuerzt stattdessen ab. */
.topbar-title > div { min-width: 0; }
.tb-name { font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-code {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .12em;
  cursor: pointer;
}
.tb-code:hover { color: var(--game-soft); }
.topbar-actions { display: flex; gap: .5rem; align-items: center; }

/* Marke in der Kopfleiste - auf schmalen Schirmen weicht sie den Knoepfen. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted-2);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-brand img { width: 17px; height: auto; display: block; }

.room-body { flex: 1; display: flex; min-height: 0; }
.game-root { flex: 1; overflow-y: auto; padding: clamp(.9rem, 2.2vw, 1.6rem); min-width: 0; }

.sidebar {
  width: 290px;
  flex: none;
  border-left: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-block { padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); }
.side-block h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); margin-bottom: .6rem; }
.side-block .count { color: var(--muted-2); font-weight: 600; }
.chat-block { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 0; }

.players { display: grid; gap: .3rem; max-height: 34vh; overflow-y: auto; }
.player {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .34rem .45rem;
  border-radius: 9px;
  font-size: .92rem;
}
.player.is-you { background: color-mix(in srgb, var(--game) 15%, transparent); }
.player .pv-avatar { font-size: 1.15rem; }
.player .pv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player.off { opacity: .45; }
.player .pv-tag { font-size: .72rem; color: var(--muted-2); font-weight: 700; }
.player .pv-kick { opacity: 0; border: 0; background: none; color: var(--bad); cursor: pointer; padding: 0 .2rem; }
.player:hover .pv-kick { opacity: .8; }

.chat-log { flex: 1; overflow-y: auto; display: grid; gap: .4rem; align-content: start; margin-bottom: .6rem; font-size: .88rem; }
.chat-msg { line-height: 1.4; word-break: break-word; }
.chat-msg .cm-name { font-weight: 700; color: var(--game-soft); }
.chat-msg.sys { color: var(--muted-2); font-style: italic; font-size: .82rem; }

/* --- 5 Lobby ------------------------------------------------------------- */
.lobby { max-width: 640px; margin: 0 auto; display: grid; gap: 1.1rem; }
.lobby-hero { text-align: center; display: grid; gap: .5rem; justify-items: center; padding: 1rem 0 .3rem; }
.lobby-hero .lh-icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--game);
}
.lobby-hero h2 { font-size: 1.6rem; }
.lobby-hero p { color: var(--muted); max-width: 44ch; }

.code-box {
  display: grid;
  gap: .3rem;
  justify-items: center;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.code-box .cb-label { font-size: .74rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .12em; }
.code-box .cb-code {
  font-family: var(--mono);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--text);
  cursor: pointer;
  line-height: 1.1;
}
/* Kopieren, Teilen, QR nebeneinander - auf schmalen Schirmen umbrechend. */
.cb-aktionen { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.cb-teilen { display: inline-flex; align-items: center; gap: .35rem; }
.cb-qr { padding-left: .55rem; padding-right: .55rem; display: inline-grid; place-items: center; }

/* QR-Schirm: immer heller Grund, damit ein Lesegeraet den Kontrast findet -
   unabhaengig davon, wie dunkel die Seite drumherum ist. */
.qr-modal { max-width: min(92vw, 24rem); display: grid; gap: .7rem; justify-items: center; text-align: center; }
.qr-raumcode {
  font-family: var(--mono); font-size: 1.8rem; font-weight: 600;
  letter-spacing: .3em; text-indent: .3em;
}
.qr-bild {
  padding: .5rem; border-radius: var(--radius);
  background: #fff;
}
/* Eigene Ebene, damit die Prozentbreite des Logos sich auf den Code bezieht
   und nicht auf den weissen Rahmen drumherum. */
.qr-flaeche { position: relative; display: block; line-height: 0; }
.qr-flaeche canvas { display: block; width: 100%; height: auto; }
/* Das Logo sitzt in einer Luecke, die schon im Code freigelassen wurde -
   deshalb braucht es hier keinen eigenen weissen Ring mehr. */
.qr-flaeche .qr-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: auto; border-radius: 18%;
}
.qr-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }

/* Spielwechsel in der Lobby */
.wechsler summary { cursor: pointer; font-weight: 600; }
.wechsler-liste { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); margin-top: .5rem; }
.wechsler-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; min-width: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.wechsler-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--game) 60%, transparent); }
.wechsler-btn .wb-icon { color: var(--game); display: grid; place-items: center; }
.wechsler-btn .wb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wechsler-btn .wb-zahl { font-size: .72rem; color: var(--muted-2); white-space: nowrap; }
.wechsler-btn.an { border-color: var(--game); background: color-mix(in srgb, var(--game) 14%, var(--surface-2)); }
.wechsler-btn:disabled:not(.an) { opacity: .45; cursor: not-allowed; }

/* Host-Werkzeug in der Seitenleiste */
.host-side { margin-top: .6rem; }
.host-side:empty { margin: 0; }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.opt { display: grid; gap: .3rem; align-content: start; }
.opt-wide { grid-column: 1 / -1; }
/* Zwei Einstellungen, die in derselben Spalte untereinander stehen sollen. */
.opt-paar { display: grid; gap: .8rem; align-content: start; }
/* Block aus mehreren solchen Paaren - eigenes Raster, damit die Paare nicht
   mit kurzen Feldern in derselben Zeile landen und Loecher hinterlassen. */
.opt-schalter { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
/* Ein Feld ueber die volle Breite, dessen Eingabe trotzdem kurz bleibt. */
.opt-schmal select, .opt-schmal input { max-width: 15rem; }
.opt label { font-size: .82rem; color: var(--muted); font-weight: 600; }
/* Erklaerung zur gewaehlten Variante, direkt unter dem Auswahlfeld. */
.opt-hint {
  display: grid;
  gap: .3rem;
  margin-top: .1rem;
  padding: .6rem .8rem .6rem 1.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  list-style: disc;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--muted);
}
.opt-hint li::marker { color: var(--game); }
/* Hoehere Spezifitaet als `.opt label`, damit die Beschriftung neben der
   Checkbox normal gesetzt bleibt statt wie ein Feldtitel. */
.opt label.check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .55em .7em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 400;
  font-size: .85rem;
  line-height: 1.35;
  cursor: pointer;
}
.opt label.check:hover { border-color: color-mix(in srgb, var(--game) 50%, transparent); }
.opt label.check input {
  width: auto;
  flex: none;
  margin: .2rem 0 0;
  accent-color: var(--game);
}
.opt label.check:has(input:checked) {
  border-color: color-mix(in srgb, var(--game) 55%, transparent);
  background: color-mix(in srgb, var(--game) 12%, var(--surface));
  color: var(--text);
}

.rules { display: grid; gap: .5rem; }
.rules summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.rules summary:hover { color: var(--text); }
.rules ol, .rules ul { padding-left: 1.2rem; display: grid; gap: .3rem; color: var(--muted); font-size: .9rem; }
.rules li::marker { color: var(--game); }
.rules b { color: var(--text); }

/* --- Gemeinsame Spiel-Bausteine ------------------------------------------ */
.game-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.game-head h2 { font-size: 1.3rem; }
.turn-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  background: #131316;
  border: 1px solid var(--line-soft);
  font-weight: 600;
}
.turn-banner.mine {
  background: color-mix(in srgb, var(--game) 18%, transparent);
  border-color: color-mix(in srgb, var(--game) 45%, transparent);
}
/* Phasenanzeige: erledigt / laeuft / kommt noch. Vorher sahen alle drei
   Stufen gleich aus, nur die aktive war eingefaerbt. */
.stepper { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.step-pill {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .18em .7em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted-2);
}
.step-pill.done { color: var(--muted); border-color: transparent; background: transparent; }
.step-pill.done .sp-tick { color: var(--good); }
.step-pill.now {
  background: color-mix(in srgb, var(--game) 24%, transparent);
  border-color: color-mix(in srgb, var(--game) 45%, transparent);
  color: var(--game-soft);
}
.step-pill .sp-sub { font-weight: 400; opacity: .85; }

/* Verlauf: der Server liefert zu jeder Zeile eine Art, daher ein Symbol
   davor und die Uhrzeit dahinter statt zehn grauer Zeilen. */
.event-log { display: grid; gap: .5rem; }
.event-log h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); }
.log-lines { display: grid; gap: .1rem; max-height: 15rem; overflow-y: auto; }
.log-line {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: baseline;
  padding: .25rem .4rem;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: var(--muted);
}
.log-line.fresh {
  border-left-color: var(--game);
  background: color-mix(in srgb, var(--game) 9%, transparent);
  color: var(--text);
}
.log-ico {
  display: grid;
  place-items: center;
  color: var(--muted-2);
}
.log-ico.ico-drink { color: var(--warn); }
.log-ico.ico-bus { color: var(--game); }
.log-line.fresh .log-ico { color: var(--game); }
.log-text { min-width: 0; overflow-wrap: anywhere; }
.log-time { font-size: .72rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.overlay-done {
  display: grid;
  gap: .8rem;
  justify-items: center;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--game) 40%, var(--line));
  border: 1px solid color-mix(in srgb, var(--game) 40%, transparent);
  text-align: center;
}
.overlay-done h2 { font-size: 1.6rem; }
.done-flag { display: grid; place-items: center; color: var(--game); }

/* Abschlusstabelle. Bewusst ohne Platzziffern - nach Schluecken sortiert
   waere "Platz 1" der mit dem groessten Kater, nicht der Sieger. */
.tally-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); }
.tally { display: grid; gap: .3rem; width: 100%; max-width: 420px; }
/* Flex statt Grid: die "meiste Schluecke"-Pille gibt es nicht in jeder Zeile,
   feste Spalten wuerden die Zeilen dadurch gegeneinander verschieben. */
.tally-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  text-align: left;
}
.tally-row.top { background: color-mix(in srgb, var(--warn) 14%, var(--surface-2)); }
.tally-row .pill { flex: none; }
.tally-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally-n { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tally-sub { white-space: nowrap; }

/* Zweispaltiges Spielbrett: Buehne links, Tisch und Verlauf rechts. Teilen
   sich Up and Down the River und Wer würde eher. */
.game-wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 1rem; }
.game-cols { display: grid; gap: 1rem; min-width: 0; }
.game-main, .game-side { min-width: 0; display: grid; gap: 1rem; align-content: start; }

@media (min-width: 1000px) {
  .game-cols { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* Spielerzeile im Seitenbereich. */
.player-boards { display: grid; gap: .45rem; }
.player-board {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .35rem .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.player-board.me { border-color: color-mix(in srgb, var(--game) 45%, transparent); }
/* Wer die zuletzt aufgedeckte Karte liegen hat, faellt sofort auf. */
.player-board.hit { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.player-board.off { opacity: .5; }
.player-board .rb-hand { grid-column: 1 / -1; display: flex; gap: .3rem; flex-wrap: wrap; }

/* --- 6 Kniffel ----------------------------------------------------------- */
.kniffel { display: grid; gap: 1.1rem; max-width: 1000px; margin: 0 auto; }

.dice-area { display: grid; gap: .9rem; justify-items: center; padding: 1.1rem; }
.dice-row { display: flex; gap: clamp(.4rem, 1.6vw, .8rem); flex-wrap: wrap; justify-content: center; }
.die {
  /* Innenabstand und Abstände aus der eigenen Kantenlänge ableiten: Prozente
     würden sich auf die Breite der Zeile beziehen und den Würfel sprengen. */
  --size: clamp(52px, 13vw, 74px);
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) * .22);
  background: #f1f1f3;
  border: 2px solid transparent;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: calc(var(--size) * .15);
  gap: calc(var(--size) * .06);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.die:disabled { cursor: default; }
.die .pip { border-radius: 50%; background: #23262f; }
.die.held {
  border-color: var(--game);
  transform: translateY(-7px) scale(.94);
  box-shadow: var(--shadow-sm);
}
.die.rolling { animation: dieRoll .38s ease; }
@keyframes dieRoll {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-16deg) scale(1.1); }
  100% { transform: rotate(0) scale(1); }
}
.die-hint { color: var(--muted); font-size: .85rem; min-height: 1.4em; }
.rolls-left { display: flex; gap: .3rem; }
.rolls-left i { width: 26px; height: 5px; border-radius: 3px; background: var(--surface-3); }
.rolls-left i.used { background: var(--game); }

.sheet-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); }
table.sheet { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--surface); }
table.sheet th, table.sheet td { padding: .42rem .55rem; border-bottom: 1px solid var(--line-soft); text-align: center; }
table.sheet thead th { background: var(--surface-2); font-size: .8rem; position: sticky; top: 0; z-index: 2; }
table.sheet th.cat { text-align: left; min-width: 132px; font-weight: 600; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.sheet thead th.cat { z-index: 3; background: var(--surface-2); }
table.sheet tr.sum td, table.sheet tr.sum th { background: var(--surface-2); font-weight: 700; }
table.sheet tr.total td { font-size: 1.05rem; color: var(--game-soft); }
table.sheet td.filled { color: var(--text); font-weight: 600; }
table.sheet td.zero { color: var(--muted-2); }
table.sheet td.empty { color: var(--muted-2); }
table.sheet th.me { color: var(--game-soft); }
table.sheet col.me-col, table.sheet td.me { background: color-mix(in srgb, var(--game) 9%, transparent); }
.cat-hint { display: block; font-weight: 400; font-size: .74rem; color: var(--muted-2); }

/* Bewusst an die Tabelle gebunden - sonst faerbt die Regel jeden anderen
   Button mit der Klasse "pick" mit ein. */
table.sheet button.pick {
  width: 100%;
  border: 1px dashed color-mix(in srgb, var(--game) 50%, transparent);
  background: color-mix(in srgb, var(--game) 12%, transparent);
  color: var(--game-soft);
  border-radius: 7px;
  padding: .18em .3em;
  font-weight: 700;
  cursor: pointer;
  transition: background .13s ease;
}
table.sheet button.pick:hover { background: color-mix(in srgb, var(--game) 28%, transparent); }
table.sheet button.pick.zero { color: var(--muted); border-style: dotted; }

/* --- 7 Busfahrer --------------------------------------------------------- */
.bus { max-width: 1240px; margin: 0 auto; display: grid; gap: 1rem; }
.bus-cols { display: grid; gap: 1rem; min-width: 0; }
.bus-main, .bus-side { min-width: 0; display: grid; gap: 1rem; align-content: start; }

/* Ab hier passen Buehne und Tisch nebeneinander - vorher lag der Tisch immer
   unter dem Spielzug und war in der Pyramidenrunde nur per Scrollen zu sehen. */
@media (min-width: 1000px) {
  .bus-cols { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* "Am Tisch" zeigt jetzt Avatar, Name, HOST/WEG und das Rauswerfen - damit ist
   die Spielerliste der Seitenleiste doppelt, sobald beide zugleich sichtbar
   sind. Unterhalb von 821 px ist die Leiste eine Schublade, da bleibt sie. */
@media (min-width: 821px) {
  #screen-room.bus-mode .sidebar .side-block:first-child { display: none; }
}

/* Tischflaeche: gibt Pyramide, Hand und Route einen Ort, statt sie frei auf
   dem Seitenhintergrund liegen zu lassen. */
/* Die Ablageflaeche liegt tiefer als die Umgebung - so stehen die Karten
   darauf, ohne dass es dafuer einen Schatten braucht. */
.felt {
  position: relative;
  padding: .9rem .7rem;
  border-radius: var(--radius);
  background: #121215;
  border: 1px solid var(--line-soft);
}
.hand-felt, .route-felt { padding: .8rem .6rem; }

.playing-card {
  --c-fg: #1b1e27;
  position: relative;
  width: var(--cw, 62px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: #f4f4f5;
  color: var(--c-fg);
  display: grid;
  place-items: center;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
  flex: none;
  border: 1px solid rgba(0, 0, 0, .16);
}
/* Animationen laufen nur ueber eine Extraklasse. Der Kartenbaum wird bei jedem
   Serverzustand neu aufgebaut - lag die Animation auf .playing-card, huepfte
   bei jedem fremden Klick der ganze Tisch. Welche Karte neu ist, entscheidet
   der Client (firstView), nicht das Stylesheet. */
.playing-card.fresh { animation: cardIn .22s ease; }
@keyframes cardIn { from { transform: translateY(-7px) rotate(-3deg); } }
/* Zweite Haelfte eines Kartendrehs: die Vorderseite steht schon im DOM, sie
   klappt nur noch herunter. Reicht, um das Aufdecken als Bewegung zu lesen. */
.playing-card.flip { animation: cardFlip .34s cubic-bezier(.2, .8, .3, 1); }
@keyframes cardFlip {
  from { transform: rotateY(-88deg) scale(1.05); }
  to { transform: rotateY(0) scale(1); }
}
.playing-card.rot { --c-fg: #d3263a; }

/* Was frueher nur als title dranhing und auf Touchgeraeten nie erschien. */
.pc-badge {
  position: absolute;
  top: -7px; right: -7px;
  padding: .05em .4em;
  border-radius: 999px;
  background: var(--warn);
  color: #241a00;
  font-size: .68rem;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.pc-eye {
  position: absolute;
  bottom: -7px; left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bad);
  color: #16090b;
}
.playing-card.exposed { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad); }

/* Noch nicht ausgeteilter Platz - eine Rueckseite wuerde behaupten, da laege
   schon eine Karte. */
.card-slot.empty {
  border: 2px dashed var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
}
.card-slot.empty.next {
  border-color: color-mix(in srgb, var(--game) 60%, transparent);
  background: color-mix(in srgb, var(--game) 8%, transparent);
}
.playing-card .pc-mid { font-size: calc(var(--cw, 62px) * .42); line-height: 1; }
.playing-card .pc-corner {
  position: absolute;
  top: 3px; left: 4px;
  font-size: calc(var(--cw, 62px) * .2);
  line-height: 1.05;
  text-align: center;
}
.playing-card .pc-corner.br { top: auto; left: auto; bottom: 3px; right: 4px; transform: rotate(180deg); }
.playing-card.back {
  background: #3f3f49;
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .07) 5px 10px);
  border-color: rgba(255, 255, 255, .18);
}
.playing-card.back::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 5px;
}
.playing-card.current { outline: 3px solid var(--warn); outline-offset: 2px; }
.playing-card.match { outline: 3px solid var(--good); outline-offset: 2px; }
/* Auswahl fuers verdeckte Ablegen. Bewusst kein outline: "passt zum Wert" und
   "laesst sich anklicken" sind zwei Aussagen, und eine Karte kann beides sein -
   mit zweimal outline bliebe nur eine davon uebrig. */
.playing-card.waehlbar {
  box-shadow: 0 0 0 2px var(--game);
}

/* Schwarzfahrer: verdeckt abgelegte Karten. Neutral statt rot - verdeckt
   ablegen ist ein regulaerer Zug, kein Fehler. Rot bleibt dem Anfechten. */
.facedown-zone {
  display: grid;
  gap: .6rem;
  padding: .8rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.facedown-list { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.facedown-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.fd-name { font-weight: 600; font-size: .9rem; }
/* Anklickbare Karten sind <button>; die Browser-Voreinstellungen muessen weg,
   touch-action verhindert die Tap-Verzoegerung auf Touchgeraeten. */
button.playing-card {
  padding: 0;
  font: inherit;
  color: var(--c-fg);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.playing-card.clickable {
  cursor: pointer;
  transition: transform .12s ease;
  touch-action: manipulation;
}
.playing-card.clickable:hover { transform: translateY(-6px); }
.playing-card.clickable:active { transform: translateY(-2px) scale(.97); }
.card-slot.quer .playing-card.clickable:active { transform: translate(-50%, -50%) rotate(90deg) scale(.97); }

/* Quer liegende Karte: der Platzhalter hat vertauschte Kanten, damit die
   gedrehte Karte ihre Nachbarn nicht ueberlappt. */
.card-slot {
  position: relative;
  flex: none;
  width: var(--cw, 62px);
  height: calc(var(--cw, 62px) * 1.4);
}
.card-slot.quer { width: calc(var(--cw, 62px) * 1.4); height: var(--cw, 62px); }
.card-slot .playing-card { position: absolute; top: 50%; left: 50%; animation: none; }
.card-slot.quer .playing-card { transform: translate(-50%, -50%) rotate(90deg); }
.card-slot.quer .playing-card.clickable:hover { transform: translate(-50%, -50%) rotate(90deg) scale(1.07); }

.card-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.hand-row { justify-content: center; }
.pyramid { display: grid; gap: .5rem; justify-items: center; }
.pyramid-row { display: flex; gap: .5rem; align-items: center; }

/* Nur beim Aufdecken: die Nachbarn treten zurueck, damit die aktuelle Karte
   nicht allein von einem 3-px-Rahmen leben muss. In der Drehphase waehlt man
   frei aus allen Karten - da darf nichts abgedunkelt sein. */
.pyramid.focus .pyramid-row > * {
  opacity: .42;
  transition: opacity .2s ease, transform .2s ease;
}
.pyramid.focus .pyramid-row > .current { opacity: 1; transform: translateY(-5px); }

/* --- Raterunde ---------------------------------------------------------- */
.guess-panel { display: grid; gap: .9rem; justify-items: center; padding: 1.2rem; }
.guess-head { display: flex; gap: .6rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.guess-q { font-size: 1.25rem; font-weight: 700; text-align: center; }
.guess-opts { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; width: 100%; }

/* Die Antwort ist die zentrale Handlung der Runde: grosse Flaeche, eigenes
   Zeichen, eigene Farbe. Vorher unterschieden sich die Knoepfe nur in der
   Schriftfarbe - bei hoeher/tiefer gar nicht. */
.guess-btn {
  flex: 1 1 132px;
  max-width: 190px;
  flex-direction: column;
  gap: .15em;
  padding: .7em 1em;
  min-height: 76px;
}
.guess-btn .gb-glyph { font-size: 1.5rem; line-height: 1.1; letter-spacing: .04em; }
.guess-btn .gb-label { font-size: .95rem; }
.guess-btn.g-rot {
  --btn-bg: #b8353f;
  --btn-fg: #fff;
  border-color: color-mix(in srgb, #e0334a 60%, transparent);
}
.guess-btn.g-schwarz {
  --btn-bg: #212127;
  --btn-fg: #e9ebf3;
  border-color: #3a4253;
}
.guess-btn.g-up .gb-glyph { color: var(--good); }
.guess-btn.g-down .gb-glyph { color: var(--cyan); }
.guess-btn.g-in .gb-glyph, .guess-btn.g-out .gb-glyph { font-size: 1.2rem; color: var(--game-soft); }

/* Host-Werkzeuge abgesetzt: "Spieler ueberspringen" klebte vorher direkt
   unter den Antwortknoepfen. */
.host-tools {
  display: flex;
  gap: .5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin-top: .3rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--line-soft);
}
.host-tools .ht-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Bereitschaftsanzeige in Dreh- und Pyramidenphase */
.ready-grid { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.ready-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25em .7em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: .84rem;
}
.ready-chip.done {
  background: color-mix(in srgb, var(--good) 18%, transparent);
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
}

/* Schlücke verteilen - deckt den Bildschirm ab, bis bestätigt wurde */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Ohne die Safe Area liegt "Bestaetigen" auf dem iPhone unter dem
     Home-Indicator - die Toasts machen es eine Etage hoeher genauso. */
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-top: max(1rem, env(safe-area-inset-top));
  overflow-y: auto;
  background: rgba(6, 8, 14, .74);

  animation: backdropIn .18s ease;
}
@keyframes backdropIn { from { opacity: 0; } }
.modal {
  width: min(100%, 460px);
  margin: auto;               /* zentriert, bleibt aber scrollbar wenn zu hoch */
  padding: 1.4rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: .9rem;
  animation: modalIn .2s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }

.give-head { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.give-big {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--game);
  /* Aus der Spielfarbe abgeleitet statt hart gesetzt - sonst passt der Wert
     nur zufaellig zum Gruen von Busfahrer. */
  color: color-mix(in srgb, var(--game) 20%, #000);
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.give-head h2 { font-size: 1.22rem; }

/* Bei acht Mitspielern und vier Schluecken war das viel Getippe. */
.give-quick { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* Flex-Spalte statt Grid: ein Grid-Track wuerde sich am Max-Content der
   Zeilen ausrichten und lange Namen aus der Liste schieben. */
.give-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 46vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.give-row {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .4rem;
  padding: .35rem .5rem .35rem .3rem;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
  user-select: none;
  transition: background .12s ease, border-color .12s ease;
}
.give-row:hover { border-color: color-mix(in srgb, var(--game) 50%, transparent); }
.give-row.has {
  background: color-mix(in srgb, var(--game) 17%, var(--surface-2));
  border-color: color-mix(in srgb, var(--game) 45%, transparent);
}
/* Die eigene Zeile bleibt bedienbar, tritt aber zurueck: sich selbst zu
   bedienen ist erlaubt, aber nicht der Normalfall. */
.give-row.me { opacity: .82; }

/* Eigener Button statt onclick auf dem <li>: so ist die Tippflaeche auch per
   Tastatur erreichbar, und Buttons duerfen nicht ineinander liegen. */
.give-hit {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .35rem .45rem;
  border: 0;
  border-radius: 9px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.give-av { font-size: 1.2rem; flex: none; }
.give-name { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Wer schon wie viel abbekommen hat, entscheidet mit - stand vorher nirgends. */
.give-stand { flex: none; font-size: .8rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.give-stepper { display: flex; align-items: center; gap: .25rem; flex: none; }
.give-btn {
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-3);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.give-btn:hover:not(:disabled) { background: var(--line); }
.give-btn:disabled { opacity: .28; cursor: not-allowed; }
.give-n { min-width: 1.7ch; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.give-rest { text-align: center; font-size: .92rem; font-weight: 600; color: var(--warn); }
.give-rest.done { color: var(--good); }

/* Einblendung, wenn man selbst Schluecke abbekommt. Sie blockiert das Spiel
   bewusst NICHT mehr: waehrend der Pyramidenrunde bekommt man Schluecke ab,
   waehrend man selbst noch ablegen will - fuer eine reine Benachrichtigung
   waren fuenf gesperrte Sekunden zu viel. Nur die Karte faengt Klicks. */
.drink-alert {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  pointer-events: none;
  animation: backdropIn .2s ease;
}
.drink-card {
  cursor: pointer;
  pointer-events: auto;
  width: min(100%, 330px);
  padding: 1.3rem 1.4rem 1.1rem;
  border-radius: 20px;
  display: grid;
  gap: .35rem;
  justify-items: center;
  text-align: center;
  background: var(--surface);
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  box-shadow: var(--shadow);
  animation: drinkIn .3s cubic-bezier(.2, 1.25, .4, 1);
}
@keyframes drinkIn { from { opacity: 0; transform: scale(.82) translateY(16px); } }
.drink-emoji { display: grid; place-items: center; color: var(--warn); }
.drink-num {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--warn);
  color: #241a00;
  font-size: 2.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.drink-title { font-size: 1.3rem; font-weight: 800; }
.drink-from { font-size: .88rem; color: var(--muted); }
.drink-bar {
  width: 100%;
  height: 5px;
  margin-top: .55rem;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.drink-bar i {
  display: block;
  height: 100%;
  background: var(--warn);
  transform-origin: left;
  /* Dauer kommt aus dem Client, damit Balken und Timer nicht auseinanderlaufen. */
  animation: drinkCountdown var(--drink-ms, 3000ms) linear forwards;
}
.drink-ok { margin-top: .6rem; }
@keyframes drinkCountdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.bus-players { display: grid; gap: .45rem; }
.bus-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .35rem .6rem;
  padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.bus-player.active { border-color: color-mix(in srgb, var(--game) 55%, transparent); background: color-mix(in srgb, var(--game) 10%, var(--surface)); }
.bus-player.driver { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.bus-player.off { opacity: .5; }
/* Die Spielerzeile teilen sich Busfahrer und Up and Down the River, deshalb
   haengen diese Teile nicht mehr am Spiel, sondern nur an ihrer eigenen Klasse. */
.bp-av { font-size: 1.15rem; }
.bp-name { font-weight: 600; min-width: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.bp-tag { font-size: .66rem; color: var(--muted-2); font-weight: 700; letter-spacing: .06em; }
.bp-tag.off { color: var(--bad); }
.bp-role { font-size: .7rem; }
.bp-drinks { font-weight: 700; color: var(--warn); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-kick {
  border: 0; background: none; color: var(--bad); cursor: pointer;
  opacity: 0; padding: 0 .2rem; font-size: .9rem;
}
.bus-player:hover .bp-kick, .player-board:hover .bp-kick, .bp-kick:focus-visible { opacity: .8; }
.bus-player .bp-hand { grid-column: 1 / -1; display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; }
/* Die Kartenzahl entscheidet, wer Busfahrer wird - vorher musste man dafuer
   Mini-Karten abzaehlen. */
.bp-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted-2);
  white-space: nowrap;
  margin-right: .15rem;
}

/* Wertchip statt Mini-Karte: bei 40 px war die Kartenecke rund 8 px gross. */
.hand-chip {
  display: inline-flex;
  align-items: center;
  gap: .1em;
  min-width: 2.2em;
  justify-content: center;
  padding: .1em .35em;
  border-radius: 6px;
  background: #f1f1f3;
  color: #1b1e27;
  border: 1px solid rgba(0, 0, 0, .18);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.35;
}
.hand-chip.rot { color: #c8203a; }
.hand-chip.verdeckt {
  background: #3f3f49;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, .08) 4px 8px);
  color: rgba(255, 255, 255, .85);
  border-color: rgba(255, 255, 255, .2);
}
.hand-chip.exposed { box-shadow: 0 0 0 1.5px var(--bad); }

.progress {
  width: min(100%, 420px);
  height: 7px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--game);
  transition: width .25s ease;
}

.final-head { width: 100%; text-align: left; }
.route { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.route .step { display: grid; gap: .3rem; justify-items: center; position: relative; }
.route .step-no { font-size: .72rem; color: var(--muted-2); font-weight: 700; }
.route .step.now .step-no { color: var(--warn); }
/* Bis hierher kam der Busfahrer schon einmal. Ohne die Marke faengt jeder
   Versuch optisch bei null an, obwohl genau das die Spannung ausmacht. */
.route .step.record::after {
  content: "★";
  position: absolute;
  bottom: -1.1rem;
  font-size: .8rem;
  color: var(--warn);
}
.route .step.record { margin-bottom: 1.1rem; }
.record-line {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15em .7em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn);
  font-size: .8rem;
  font-weight: 600;
}
.record-line .rl-star { font-size: .9em; }

/* --- 8 Up and Down the River --------------------------------------------- */
/* Beide Runden liegen untereinander auf einer Flaeche: so sieht man, was schon
   gelaufen ist, ohne dass die fertige Runde verschwindet. */
.river-felt { display: grid; gap: .9rem; }
.river-run { display: grid; gap: .4rem; opacity: .55; }
.river-run.aktiv { opacity: 1; }
.river-label { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.river-label .rl-nr { font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.river-cards { justify-content: center; gap: .55rem; }

.river-slot { display: grid; gap: .25rem; justify-items: center; }
/* Der Einsatz gehoert unter den Platz, nicht auf die Karte - sonst verdeckt er
   bei kleinen Karten den Wert. */
.river-slot .rs-stake {
  font-size: .72rem; font-weight: 700; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.river-run.aktiv .river-slot.now .rs-stake { color: var(--warn); }
.river-slot.now .card-slot.empty { border-color: color-mix(in srgb, var(--game) 60%, transparent); }


/* --- 9 Fragen-Bausteine --------------------------------------------------- */
/* Fragenkarte, Antwortknoepfe und Ergebnisliste - von Fragenhagel benutzt. */
/* Fragen einreichen */
.frage-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.frage-form input { flex: 1 1 16rem; min-width: 0; }
.frage-list { list-style: none; display: grid; gap: .35rem; }
.frage-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.frage-row .fr-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Der Satzanfang steht schon in der Ueberschrift - hier reicht der Punkt. */
.frage-row .fr-text::before { content: '… '; color: var(--muted-2); }
.frage-row .fr-del { border: 0; background: none; color: var(--bad); cursor: pointer; padding: 0 .2rem; }

/* Die Frage selbst: das Einzige, worauf am Tisch geschaut wird. */
.frage-karte {
  display: grid; gap: .4rem; justify-items: center; text-align: center;
  padding: 1.4rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.frage-karte .fk-lead { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
/* Eingereichte Fragen koennen alles Moegliche enthalten - auch ein einzelnes
   sehr langes Wort darf die Karte nicht sprengen. */
.frage-karte .fk-text { font-size: 1.5rem; font-weight: 700; line-height: 1.25; max-width: 30ch; overflow-wrap: anywhere; }
.frage-karte .fk-tag { font-size: .68rem; }

/* Abstimmen */
.vote-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.vote-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font: inherit; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.vote-btn:hover { border-color: color-mix(in srgb, var(--game) 55%, transparent); }
.vote-btn.picked { background: color-mix(in srgb, var(--game) 16%, var(--surface-2)); border-color: var(--game); }
.vote-btn .vb-av { font-size: 1.2rem; }
.vote-btn .vb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vote-btn .vb-tick { color: var(--game); font-weight: 800; }

/* Wie viele haben schon abgestimmt - ohne zu verraten, wofuer. */
.vote-bar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.vote-bar i { display: block; height: 100%; background: var(--game); transition: width .25s ease; }

/* Auflösung */
.ergebnis { display: grid; gap: .35rem; }
.erg-row {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) auto auto;
  align-items: center; gap: .6rem;
  padding: .45rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.erg-row.top { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.erg-row.leer { opacity: .55; }
.erg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Plaketten wie ZEICHNER brauchen Luft zum Namen. */
.erg-name .bp-tag { margin-left: .4rem; }
.erg-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.erg-bar i { display: block; height: 100%; background: var(--warn); }
.erg-n { font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
.erg-waehler { font-size: .9rem; letter-spacing: .05em; }
/* „Wer würde eher“ zählt Stimmen statt Antworten: Name, Balken, Wähler, Schlücke. */
.erg-row.wuerde .erg-bar i { background: var(--warn); }

.bp-tag.done { color: var(--good); }

/* --- 10 Fragenhagel ------------------------------------------------------- */
/* Die Fragenkarte kommt aus dem Abschnitt darueber; hier nur die Zusaetze. */
.frage-karte .fk-hint { font-weight: 400; letter-spacing: normal; text-transform: none; }
.frage-karte.hagel-schaetz { border-color: color-mix(in srgb, var(--game) 40%, transparent); }
.frage-karte.hagel-quiz { border-color: color-mix(in srgb, var(--good) 32%, transparent); }
.frage-karte.hagel-umfrage { border-color: color-mix(in srgb, var(--muted) 32%, transparent); }

/* Antwortknoepfe bekommen einen Buchstaben - „B war richtig“ liest sich
   schneller als der ganze Antworttext. */
.vote-btn .vb-key {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: .8rem; font-weight: 800;
}
.vote-btn.picked .vb-key { background: var(--game); color: #101012; }
/* Antworttexte duerfen umbrechen: „Quecksilber“ abzuschneiden waere bei einer
   Quizfrage fatal. In der Umfrage stehen nur kurze Woerter, dort faellt es
   nicht auf. */
.hagel .vote-btn { align-items: flex-start; }
.hagel .vote-btn .vb-name { white-space: normal; overflow: visible; overflow-wrap: break-word; }

.loesung {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; justify-content: center;
  padding: .6rem .8rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--good) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
  text-align: center;
}
.loesung.umfrage { background: var(--surface-2); border-color: var(--line-soft); }
.loesung .lo-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.loesung .lo-wert { font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }

/* Wie hat sich die Runde auf die Antworten verteilt? */
.verteilung { display: grid; gap: .3rem; }
.vt-row {
  display: grid; grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr) auto;
  align-items: center; gap: .6rem;
  padding: .35rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.vt-row.richtig { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.vt-row.leer { opacity: .5; }
.vt-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-tick { color: var(--good); }
.vt-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.vt-bar i { display: block; height: 100%; background: var(--game); }
.vt-row.richtig .vt-bar i { background: var(--good); }
.vt-n { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ergebniszeile mit Antwort statt Balken. */
.erg-row .erg-antwort {
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted);
}
.erg-row.richtig .erg-antwort { color: var(--good); font-weight: 600; }
.hagel .erg-row { grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) auto auto; }
/* Hier steht „top“ fuer „muss trinken“ - nicht fuer den Sieger. */
.hagel .erg-row.top { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }

.check-row { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; }

/* --- 10 Stadt Land Fluss -------------------------------------------------- */
/* Der gezogene Buchstabe - das Erste, worauf alle schauen. */
.slf-letter {
  display: grid; justify-items: center; gap: .1rem;
  padding: .8rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.slf-letter .sl-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.slf-letter .sl-big { font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--game); }

/* Eigener Zettel */
.slf-zettel { display: grid; gap: .5rem; }
.slf-feld { display: grid; gap: .2rem; }
.slf-feld .sf-kat { font-size: .78rem; font-weight: 700; color: var(--muted); }
.slf-feld input { width: 100%; }

/* Alle Antworten je Kategorie - Spalten pro Spieler passen auf kein Handy. */
.slf-kat { display: grid; gap: .25rem; }
.slf-kat .sk-titel {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-2); margin-top: .3rem;
}
.slf-zeile {
  display: grid;
  grid-template-columns: auto minmax(3.5rem, 7rem) minmax(0, 1fr) auto auto auto;
  align-items: center; gap: .3rem .5rem;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.slf-zeile.einzeln { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.slf-zeile.raus { opacity: .55; }
.slf-zeile.strittig { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.slf-zeile .sz-av { font-size: 1rem; }
.slf-zeile .sz-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slf-zeile .sz-wert { font-weight: 600; overflow-wrap: anywhere; }
.slf-zeile.raus .sz-wert { text-decoration: line-through; }
.slf-zeile .sz-tag { font-size: .68rem; }
.slf-zeile .sz-strittig { color: var(--warn); }

/* Streichen, Zulassen, Anfechten - kleine Schaltflaechen in der Zeile. */
.slf-tag {
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 999px;
  padding: .15rem .55rem;
  font: inherit; font-size: .72rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.slf-tag:hover { color: var(--text); border-color: var(--muted-2); }
.slf-tag.streichen:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.slf-tag.wieder { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.slf-tag:disabled { opacity: .5; cursor: default; }

/* Countdown - die Zahl gross, der Balken darunter als Gefuehl fuer den Rest. */
.slf-uhr { display: grid; gap: .3rem; justify-items: center; }
.slf-uhr .su-zeit { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.slf-uhr .su-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.slf-uhr .su-bar i { display: block; height: 100%; background: var(--game); transition: width .2s linear; }
.slf-uhr.knapp .su-zeit { color: var(--bad); }
.slf-uhr.knapp .su-bar i { background: var(--bad); }

.slf-stopp {
  text-align: center; font-weight: 700;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}

/* --- 11 Kritzelkasten ----------------------------------------------------- */
.mal-kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; justify-content: space-between; }
.mal-kopf .mk-wer { font-weight: 700; }
/* Das maskierte Wort: gleichmaessige Abstaende, damit man Buchstaben zaehlen kann. */
.mal-kopf .mk-wort {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem; font-weight: 700; letter-spacing: .28em;
  overflow-wrap: anywhere;
}

/* Uhr wie bei Stadt Land Fluss, nur kompakter. */
.mal-uhr { display: grid; gap: .25rem; justify-items: center; }
.mal-uhr .mu-zeit { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mal-uhr .mu-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.mal-uhr .mu-bar i { display: block; height: 100%; background: var(--game); transition: width .2s linear; }
.mal-uhr.knapp .mu-zeit { color: var(--bad); }
.mal-uhr.knapp .mu-bar i { background: var(--bad); }

/* Das Blatt selbst - immer 4:3, damit alle dasselbe Bild sehen. */
.mal-blatt { width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #f4f4f5; }
.mal-canvas { display: block; width: 100%; height: auto; touch-action: none; }
.mal-canvas.aktiv { cursor: crosshair; }

.mal-wahl { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.mal-wort { justify-content: center; }

/* Werkzeugleiste */
.mal-werkzeug { display: grid; gap: .5rem; }
.mal-farben { display: flex; gap: .35rem; flex-wrap: wrap; }
.mal-farbe {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line); cursor: pointer; padding: 0;
}
.mal-farbe.an { border-color: var(--text); transform: scale(1.12); }
.mal-staerken { display: flex; gap: .35rem; align-items: center; }
.mal-staerke {
  width: 36px; height: 28px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; padding: 0;
}
.mal-staerke.an { border-color: var(--game); background: color-mix(in srgb, var(--game) 18%, var(--surface-2)); }
.mal-staerke i { display: block; border-radius: 50%; background: var(--text); }
.mal-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Frist im Verteil-Overlay */
.give-frist { display: grid; gap: .3rem; margin-top: .6rem; }
.give-frist .gf-text { font-size: .78rem; color: var(--muted); text-align: center; }
.give-frist .gf-bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.give-frist .gf-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--warn); transform-origin: left;
  animation: drinkCountdown var(--frist-ms, 15000ms) linear forwards;
}

/* Schluck-Schirm zwischen zwei Bildern */
.trink-schirm { display: grid; gap: .8rem; justify-items: center; text-align: center; padding: 1.4rem .8rem; }
.trink-schirm .ts-zahl {
  width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 3rem; font-weight: 800; line-height: 1;
  background: color-mix(in srgb, var(--warn) 22%, var(--surface-2));
  border: 2px solid color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--warn);
}
.trink-schirm .ts-zahl.frei { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.trink-schirm .ts-titel { font-size: 1.3rem; font-weight: 800; }
.trink-liste { display: grid; gap: .3rem; width: 100%; max-width: 420px; }
.trink-zeile {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.trink-zeile.ich { border-color: color-mix(in srgb, var(--game) 45%, transparent); }
.trink-zeile.null { opacity: .55; }
.trink-zeile .tz-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trink-zeile .tz-n { font-weight: 800; color: var(--warn); font-variant-numeric: tabular-nums; }
.trink-zeile .tz-gesamt { white-space: nowrap; }
/* Punktewertung: keine Warnfarbe, hier ist nichts zu befürchten. */
.trink-schirm.punkte .ts-zahl {
  background: color-mix(in srgb, var(--good) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
  color: var(--good);
}
.trink-schirm.punkte .trink-zeile .tz-n { color: var(--good); }
.tally-platz { min-width: 1.4rem; }

/* Rateversuche - geteilt mit dem Emojiraetsel, deshalb neutral benannt. */
.rate-versuche { display: grid; gap: .25rem; max-height: 14rem; overflow-y: auto; }
.rate-versuch {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .3rem .55rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.rate-versuch .rv-name { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.rate-versuch .rv-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rate-versuch .rv-nah { color: var(--warn); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.rate-versuch.nah { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rate-versuch.treffer { border-color: color-mix(in srgb, var(--good) 50%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.rate-versuch.treffer .rv-text { color: var(--good); font-weight: 700; }
.mal-geschafft { color: var(--good); font-weight: 700; }

/* --- 12 Emojify ------------------------------------------------------- */
/* Uhr fuer neue Spiele: eine Umsetzung fuer alle, gespeist aus lib/uhr.js.
   Kritzelkasten und Stadt Land Fluss haben noch ihre eigene. */
.spiel-uhr { display: grid; gap: .25rem; justify-items: center; }
.spiel-uhr .su-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); }
.spiel-uhr .su-zeit { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spiel-uhr .su-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.spiel-uhr .su-bar i { display: block; height: 100%; background: var(--game); transition: width .2s linear; }
.spiel-uhr.knapp .su-zeit { color: var(--bad); }
.spiel-uhr.knapp .su-bar i { background: var(--bad); }

/* Art und Wortzahl - die einzigen Hinweise neben den Emojis. */
.emo-kopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; justify-content: space-between; }
.emo-kopf .ek-art { font-size: 1.1rem; font-weight: 800; color: var(--game); }
.emo-kopf .ek-woerter { color: var(--muted); font-size: .9rem; }

/* Die drei Stufen als Leiste: was war, was laeuft, was noch kommt. */
.emo-stufen { display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.emo-stufe {
  display: grid; gap: .1rem; justify-items: center; text-align: center;
  padding: .4rem .3rem;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line-soft);
  font-size: .72rem; color: var(--muted);
}
.emo-stufe.an {
  border-color: var(--game);
  background: color-mix(in srgb, var(--game) 14%, var(--surface-2));
  color: var(--text);
}
.emo-stufe.durch { opacity: .5; }
.emo-stufe .es-nr { font-weight: 700; }
.emo-stufe .es-wert { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Die Buehne: nur Emojis, so gross wie es der Platz erlaubt. */
.emo-buehne {
  display: flex; flex-wrap: wrap; gap: .4rem .8rem;
  align-items: center; justify-content: center;
  min-height: 5.5rem; padding: .8rem;
  border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.emo-buehne .eb-zeichen { font-size: 3rem; line-height: 1.1; }
.emo-buehne.gross .eb-zeichen { font-size: 2.4rem; }
.emo-buehne .eb-leer { color: var(--muted); font-size: .95rem; }

/* Auswahl des Meisters */
.emo-entwurf { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.6rem; }
.emo-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: 1.6rem; line-height: 1;
  padding: .2rem .4rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--game);
  cursor: pointer;
}
.emo-chip .ec-x { font-size: .9rem; color: var(--muted); }
/* Suchzeile ueber den Gruppen. Das Loeschkreuz sitzt im Feld, damit die Zeile
   auf schmalen Schirmen nicht umbricht. */
.emo-suche { position: relative; display: flex; }
.emo-suchfeld { width: 100%; padding-right: 2.2rem; }
.emo-suche-x {
  position: absolute; right: .15rem; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: .9rem; line-height: 1;
}
.emo-suche-x:hover { color: var(--text); }
.emo-hinweis { min-height: 1rem; margin: 0; }

.emo-reiter { display: flex; gap: .3rem; flex-wrap: wrap; }
.emo-reiter-btn {
  font-size: .75rem; padding: .25rem .5rem;
  border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer;
}
.emo-reiter-btn.an { border-color: var(--game); color: var(--text); }
.emo-gitter {
  display: grid; gap: .25rem;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  max-height: 13rem; overflow-y: auto;
  padding: .3rem;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line-soft);
}
.emo-taste {
  font-size: 1.5rem; line-height: 1; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: none; cursor: pointer; padding: 0;
}
.emo-taste:hover { background: var(--surface-3); }
.emo-taste:disabled { opacity: .35; cursor: default; }
.emo-frei { width: 100%; }

/* Titelwahl: die Art steht klein ueber dem Titel. Titel sind ganze Saetze -
   der Knopf muss also umbrechen duerfen, anders als sonst (.btn ist nowrap). */
.emo-wahl { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.emo-wahl-btn {
  display: grid; gap: .2rem; justify-items: center; align-content: center;
  white-space: normal; text-align: center; min-width: 0;
  padding: .9rem .8rem; min-height: 4.5rem;
}
.emo-wahl-btn .ew-art { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2); }
.emo-wahl-btn .ew-titel { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }

/* --- 13 Stories -------------------------------------------- */
/* Der Satz davor - das Einzige, was der Schreiber sehen darf. */
.story-vorlage {
  display: grid; gap: .3rem;
  padding: .8rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--game);
}
.story-vorlage .sv-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.story-vorlage .sv-text { font-size: 1.15rem; line-height: 1.45; overflow-wrap: anywhere; }
.story-feld { width: 100%; min-height: 5.5rem; resize: vertical; font: inherit; line-height: 1.5; }

/* Pflichtwort beim Schreiben. Der Streifen wechselt die Farbe, sobald das
   Wort im Satz steht - so muss niemand raten, ob die Endung durchgeht. */
.story-pflicht {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 10%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.story-pflicht .sp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-2); }
.story-pflicht .sp-wort { font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.story-pflicht .sp-stand { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--warn); white-space: nowrap; }
.story-pflicht.erfuellt {
  background: color-mix(in srgb, var(--good) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
}
.story-pflicht.erfuellt .sp-stand { color: var(--good); }

.story-fortschritt { display: grid; gap: .25rem; justify-items: center; }
.story-fortschritt .sf-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.story-fortschritt .sf-bar i { display: block; height: 100%; background: var(--game); transition: width .3s ease; }

.story-anfang {
  font-style: italic; color: var(--muted);
  padding-left: .7rem; border-left: 2px solid var(--line);
  overflow-wrap: anywhere;
}
.story-liste { display: grid; gap: .4rem; }
/* Ein Satz: als Knopf in der Abstimmung, als Zeile in der Aufloesung. */
.story-satz {
  display: grid; gap: .1rem .6rem; align-items: baseline;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  text-align: left; width: 100%;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  color: inherit; font: inherit; cursor: pointer;
}
.story-satz:hover:not(:disabled) { border-color: color-mix(in srgb, var(--game) 55%, transparent); }
.story-satz.gewaehlt { border-color: var(--game); background: color-mix(in srgb, var(--game) 14%, var(--surface-2)); }
.story-satz.eigen { opacity: .6; cursor: default; }
.story-satz.offen { cursor: default; }
.story-satz.verloren {
  border-color: color-mix(in srgb, var(--bad) 60%, transparent);
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
}
.story-satz .ss-nr { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.story-satz .ss-text { line-height: 1.45; overflow-wrap: anywhere; }
.story-satz .ss-wer { font-size: .78rem; color: var(--muted); white-space: nowrap; }
/* Das Pflichtwort gehoert unter den Satz: in der Zeile waere daneben kein
   Platz mehr, und es liest sich ohnehin wie eine Fussnote. */
.story-satz .ss-wort {
  grid-column: 2 / -1; justify-self: start;
  font-size: .72rem; color: var(--muted);
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.story-satz .ss-wort::before { content: 'Pflichtwort: '; color: var(--muted-2); }
.story-satz .ss-stimmen { font-size: .8rem; font-weight: 700; color: var(--warn); white-space: nowrap; }
.story-satz .ss-tick { color: var(--game); font-weight: 800; }

/* Das Urteil: gross, damit am Tisch keine Diskussion aufkommt. */
.story-urteil {
  display: grid; gap: .4rem; justify-items: center; text-align: center;
  padding: 1.2rem .8rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}
.story-urteil .su-gross {
  font-size: 2.4rem; font-weight: 900; letter-spacing: .1em;
  color: var(--warn);
}
.story-urteil.ich { border-color: var(--bad); }
.story-urteil.ich .su-gross { color: var(--bad); }
.story-urteil .su-du { font-weight: 800; color: var(--bad); }

/* --- 14 Rechtliche Seiten -------------------------------------------------- */
/* Impressum und Datenschutz sind eigenstaendige Seiten ohne Anwendung - hier
   zaehlt Lesbarkeit, nicht Spielgefuehl. */
.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.1rem 4rem;
  line-height: 1.65;
}
.legal h1 { font-size: 1.9rem; margin-bottom: .4rem; }
.legal h2 {
  font-size: 1.05rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}
.legal p, .legal ul { margin-top: .7rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .25rem; }
.legal li { list-style: disc; }
.legal code {
  font-size: .9em;
  padding: .1rem .3rem;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.legal a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.legal a:hover { color: var(--logo-pink); }
.legal-lead { color: var(--muted); font-size: 1.02rem; }
.legal-back { display: inline-block; margin-bottom: 1.6rem; color: var(--muted); font-size: .9rem; }
.legal-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); }

/* Verweise aus der Anwendung heraus */
.rechtliches { font-size: .8rem; color: var(--muted-2); }
.rechtliches a { color: var(--muted-2); text-decoration: underline; text-underline-offset: .2em; }
.rechtliches a:hover { color: var(--text); }

/* Interne Verlinkung zu den Spielregel-Seiten (Startseiten-Fuss) */
.home-games { font-size: .8rem; color: var(--muted-2); line-height: 1.9; }
.home-games a { color: var(--muted-2); text-decoration: underline; text-underline-offset: .2em; }
.home-games a:hover { color: var(--text); }
/* Verweis auf die Uebersichtsseite, eine Stufe leiser als die Spielregeln. */
.tiny-nav { font-size: .8rem; color: var(--muted-2); margin: .2rem 0 0; }
.tiny-nav a { color: var(--muted-2); text-decoration: underline; text-underline-offset: .2em; }
.tiny-nav a:hover { color: var(--text); }
.side-recht { margin-top: .6rem; text-align: center; }

/* --- 15 Responsive ------------------------------------------------------ */
@media (max-width: 820px) {
  .only-mobile { display: grid; }
  .topbar-brand { display: none; }
  /* overflow verhindert, dass die ausgefahrene Seitenleiste die ganze Seite
     seitlich scrollbar macht - .game-root scrollt weiterhin selbst. */
  .room-body { position: relative; overflow: hidden; }
  .sidebar {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(88vw, 320px);
    background: var(--surface);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .5);
    transform: translateX(101%);
    transition: transform .22s ease;
    z-index: 40;
  }
  .sidebar.open { transform: none; }
  .players { max-height: 40vh; }
  #screen-home { padding-top: 2rem; }
  .games { grid-template-columns: 1fr; }
  table.sheet { font-size: .82rem; }
  table.sheet th.cat { min-width: 110px; }
}

/* Auf schmalen Schirmen bekommt die Beschreibung eine eigene Zeile ueber die
   volle Breite - sonst quetscht sie sich zwischen Symbol und Spielerzahl. */
@media (max-width: 560px) {
  .game-card { gap: .2rem .75rem; padding: .95rem .2rem; }
  .game-card .gc-icon { grid-row: 1; width: 36px; height: 36px; }
  .game-card h2 { grid-row: 1; grid-column: 2; }
  .game-card .gc-meta { grid-row: 1; grid-column: 3; }
  .game-card p { grid-row: 2; grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero-sub { font-size: .96rem; }
  .code-box .cb-code { font-size: 2rem; }

  /* Zwei Knoepfe pro Zeile, auch bei der Symbolfrage mit vieren. */
  .guess-opts { gap: .5rem; }
  .guess-btn { flex: 1 1 calc(50% - .25rem); max-width: none; min-height: 68px; }
  .guess-panel { padding: .9rem .7rem; gap: .75rem; }
  .guess-q { font-size: 1.1rem; }

  /* --cw setzt der Client als Inline-Stil auf die Karte; eine Regel kommt
     nur mit !important dagegen an. Ohne das sprengt die untere Pyramidenreihe
     schmale Displays. */
  .pyramid .playing-card, .pyramid .card-slot { --cw: 44px !important; }
  .hand-row .playing-card, .hand-row .card-slot { --cw: 54px !important; }
  .route .playing-card { --cw: 50px !important; }
  .pyramid, .pyramid-row { gap: .35rem; }
  .route { gap: .4rem; }
  .felt { padding: .7rem .5rem; }

  .river-cards .playing-card, .river-cards .card-slot { --cw: 48px !important; }
  .rb-hand .playing-card { --cw: 40px !important; }
  .river-cards { gap: .35rem; }
  .game-wrap, .game-cols { gap: .8rem; }
  .player-board { padding: .5rem .6rem; }

  .bus { gap: .8rem; }
  .bus-cols { gap: .8rem; }
  .bus-player { padding: .5rem .6rem; }
  .log-lines { max-height: 11rem; }

  .vt-row { grid-template-columns: minmax(4.5rem, 8rem) minmax(0, 1fr) auto; }
  .hagel .erg-row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: .15rem; }
  .hagel .erg-row .erg-ab { grid-column: 1 / -1; }
  /* Auf schmalen Schirmen sagen die Avatare schon genug - der Balken fliegt
     raus, und die Waehler bekommen eine eigene Zeile. Sonst quetscht sich die
     Schluckzahl auf die Breite eines Bierkrugs zusammen. */
  .hagel .erg-row.wuerde { grid-template-columns: minmax(0, 1fr) auto; }
  .hagel .erg-row.wuerde .erg-bar { display: none; }
  /* Die Schlucke gehoeren neben den Namen, die Waehler in die Zeile darunter -
     dafuer muessen die beiden ihre Reihenfolge tauschen. */
  .hagel .erg-row.wuerde .erg-n { order: 1; }
  .hagel .erg-row.wuerde .erg-waehler { order: 2; grid-column: 1 / -1; }

  /* Eine Zeile pro Antwort - bei sechs Kategorien mal drei Spielern waeren
     mehrzeilige Bloecke eine endlose Scrollstrecke. */
  .slf-zeile { grid-template-columns: auto minmax(2.5rem, 4.5rem) minmax(0, 1fr) auto; gap: .25rem .4rem; padding: .4rem .45rem; }
  .slf-zeile .sz-name { font-size: .8rem; }
  .slf-zeile .sz-tag { justify-self: end; }
  .slf-tag { padding: .15rem .45rem; font-size: .68rem; }
  .slf-letter .sl-big { font-size: 2.6rem; }

  .mal-farbe { width: 32px; height: 32px; }
  .mal-kopf .mk-wort { font-size: 1.05rem; letter-spacing: .22em; }
  .rate-versuche { max-height: 11rem; }

  /* Emojiraetsel: die Buehne bleibt gross, der Rest schrumpft. */
  .emo-buehne .eb-zeichen { font-size: 2.4rem; }
  .emo-buehne.gross .eb-zeichen { font-size: 1.9rem; }
  .emo-stufe { font-size: .65rem; padding: .35rem .2rem; }
  .emo-gitter { grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr)); max-height: 10rem; }
  .emo-taste { font-size: 1.3rem; }

  /* Geschichte: Nummer und Text nebeneinander, Name und Stimmen darunter. */
  .story-satz { grid-template-columns: auto minmax(0, 1fr) auto; }
  .story-satz .ss-wer { grid-column: 2; }
  .story-vorlage .sv-text { font-size: 1.05rem; }

  .frage-karte { padding: 1.1rem .8rem; }
  .frage-karte .fk-text { font-size: 1.25rem; }
  .vote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Quiz- und Umfrageantworten koennen lange Woerter sein - auf schmalen
     Schirmen bekommt jede Antwort deshalb die volle Breite. */
  .hagel .vote-grid { grid-template-columns: minmax(0, 1fr); }
  .erg-row { grid-template-columns: minmax(4rem, 6rem) minmax(0, 1fr) auto; row-gap: .2rem; }
  .erg-waehler { grid-column: 2 / -1; }

  .modal { padding: 1rem .9rem; }
  .give-list { max-height: 42vh; }
  .give-stand { display: none; }
  .drink-num { width: 72px; height: 72px; font-size: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}