:root {
  --bg: #0f1220;
  --panel: #1a1f36;
  --panel-2: #232a4d;
  --text: #e8ebf5;
  --muted: #9aa3c7;
  --accent: #6c8cff;
  --accent-2: #4a6bff;
  --error: #ff6b7a;
  --border: #2c3357;
  --gold: #c8aa6e;   /* LoL-Akzent (Wer bin ich?) */
  --good: #3fd0c9;   /* "Ja"/richtig */
}

* { box-sizing: border-box; }

/* hidden-Attribut immer durchsetzen – sonst gewinnt display:flex/grid einer
   Klasse (z. B. .setting) gegen die Browser-Default-Regel [hidden]{display:none} */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

h1 { margin: 0 0 .25rem; }
h2 { margin: 1.5rem 0 .5rem; font-size: 1.1rem; color: var(--muted); }

.subtitle { color: var(--muted); margin-top: 0; }

.back { color: var(--muted); text-decoration: none; }
.back:hover { color: var(--text); }

/* Übersichtsseite */
.game-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.game-list li { margin-bottom: .75rem; }
.game-card {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.game-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.game-name { display: block; font-weight: 600; font-size: 1.1rem; }
.game-desc { display: block; color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.loading { color: var(--muted); }

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.field input {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.field input:focus { outline: none; border-color: var(--accent); }

.actions { display: flex; gap: .5rem; }

.btn {
  flex: 1;
  padding: .7rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); }
.btn.primary:hover:not(:disabled) { background: var(--accent); }
.btn.danger { background: var(--error); border-color: var(--error); color: #2a0509; }
.btn.danger:hover:not(:disabled) { background: #ff8591; border-color: #ff8591; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Gemeinsames Bestätigungs-Modal der Lobby (Zurück zur Lobby / Spieler entfernen) */
.lobby-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 8, 18, .8);
}
.lobby-modal-box {
  width: 100%;
  max-width: 400px;
  padding: 1.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lobby-modal-box h2 { margin: 0 0 .5rem; color: var(--text); font-size: 1.3rem; }
.lobby-modal-box .hint { margin-top: 0; }
.lobby-modal-box .actions { margin-top: 1.5rem; }

.divider { text-align: center; color: var(--muted); margin: 1.25rem 0; position: relative; }
.divider span { background: var(--panel); padding: 0 .75rem; position: relative; z-index: 1; }
.divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border);
}

.error { color: var(--error); margin: .75rem 0 0; }

/* Raum / Lobby */
.room-code-label { color: var(--muted); font-size: .85rem; margin: 0 0 .25rem; }
.room-code {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .3rem;
  margin: 0 0 1rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.player-list { list-style: none; padding: 0; margin: 0; }
.player-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .5rem;
}
/* Host: „Spieler entfernen"-Button in der Spielerliste */
.player-kick {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.player-kick:hover { border-color: var(--error); color: var(--error); background: rgba(255, 107, 122, .12); }
.status { color: var(--muted); min-height: 1.5rem; margin: 1rem 0; }
.hint { color: var(--muted); font-size: .85rem; margin-top: 1rem; }

/* Tic-Tac-Toe-Brett */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  max-width: 300px;
  margin: 1rem 0;
}
.cell {
  aspect-ratio: 1 / 1;
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cell:hover { border-color: var(--accent); }
.game-status { min-height: 1.5rem; margin: .5rem 0 1rem; font-weight: 600; }

.qrcode img { display: block; background: #fff; padding: 10px; border-radius: 10px; }

/* Abstand über "Zurück zur Lobby" im Spiel-Screen */
#game-slot + .actions { margin-top: .75rem; }

/* Auflösen im Vanishing-XO-Modus: nur der Stein fadet aus, das Feld bleibt. */
.stone { display: inline-block; line-height: 1; }
.stone.vanishing { animation: stone-vanish .6s ease forwards; }
@keyframes stone-vanish {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.3); }
}

/* Einstellungen im Warteraum */
.settings { margin: 1.25rem 0; }
.setting {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .5rem 0;
  cursor: pointer;
}
.setting input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; }
.setting input:disabled { cursor: not-allowed; }
.setting small { color: var(--muted); }

/* "Raum beitreten" auf der Übersicht */
.join-box h2 { margin-top: 0; }
.join-row { display: flex; gap: .5rem; }
.join-row input {
  flex: 1;
  min-width: 0;
  padding: .7rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.join-row input:focus { outline: none; border-color: var(--accent); }
.join-row .btn { flex: 0 0 auto; }

/* =========================================================================
   Wer bin ich? (LoL-Edition)
   ========================================================================= */

/* Etwas mehr Breite fürs Spielfeld als der Standard-Container. */
.container-wide { max-width: 760px; }

/* Inline-Textbutton (z. B. "Abbrechen" in Hinweisleisten). */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Einstellungen: Auswahlkarten (Spielfeldgröße / Regel) --- */
.wb-setting-group { margin-bottom: 1.1rem; }
.wb-setting-label {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .4rem;
}
.wb-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.wb-choice label { display: block; cursor: pointer; }
.wb-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.wb-choice span {
  display: block;
  padding: .6rem .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
  color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.wb-choice strong { display: block; font-size: 1.05rem; color: var(--text); }
.wb-choice small {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: .15rem;
}
.wb-choice input:checked + span {
  border-color: var(--accent);
  background: var(--panel-2);
  color: var(--text);
}
.wb-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wb-choice input:disabled + span { opacity: .5; cursor: not-allowed; }

/* --- Kopfzeile: Champion des Gegners + "noch offen"-Zähler --- */
.wb-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.wb-opp {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wb-opp img { width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--border); display: block; }
.wb-opp-text { display: flex; flex-direction: column; line-height: 1.25; }
.wb-opp-label { font-size: .75rem; color: var(--muted); }
.wb-opp-name { font-weight: 700; color: var(--gold); }

/* "Noch offen"-Zähler beider Spieler */
.wb-stats {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.wb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  padding: .3rem .55rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1.1;
}
.wb-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--gold); }
.wb-stat-label { font-size: .68rem; color: var(--muted); max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-stats-caption {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  flex-basis: 100%;
  text-align: right;
}

/* --- Zug-/Warte-Status (prominent) --- */
.wb-turn {
  margin: 1rem 0 .25rem;
  font-weight: 700;
  font-size: 1.05rem;
  min-height: 1.4rem;
}
.wb-turn.active { color: var(--gold); }
.wb-turn.active::before {
  content: "";
  display: inline-block;
  width: .6rem;
  height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  animation: wb-pulse 1.2s ease-in-out infinite;
}
.wb-turn.waiting { color: var(--muted); font-weight: 500; }
@keyframes wb-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}

/* --- Ratemodus-Hinweis --- */
.wb-guess-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin: .75rem 0;
  padding: .5rem .75rem;
  background: rgba(108, 140, 255, .12);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: .9rem;
  color: var(--accent);
}

/* --- Gegner offline (Wiederverbinden läuft) --- */
.wb-offline {
  margin: .5rem 0;
  padding: .5rem .75rem;
  background: rgba(255, 107, 122, .1);
  border: 1px solid rgba(255, 107, 122, .5);
  border-radius: 8px;
  font-size: .9rem;
  color: var(--error);
}

/* Offline-Spieler in der Warteraum-Liste */
.player-offline { opacity: .55; }

/* --- Konfetti beim Sieg --- */
.wb-confetti {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

/* --- Spielfeld --- */
.wb-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .4rem;
  margin: 1rem 0;
}
.champ-card {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.champ-card:hover { border-color: var(--accent); }
.champ-card:active { transform: scale(.97); }
.champ-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.champ-name {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .1rem .25rem;
  background: rgba(15, 18, 32, .85);
  font-size: .62rem;
  font-weight: 600;
  text-align: center;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Umgeklappt = privat ausgeschlossen: abdunkeln + Kreuz. */
.champ-card.flipped img { filter: grayscale(1) brightness(.32); }
.champ-card.flipped .champ-name { opacity: .4; }
.champ-card.flipped::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--muted);
  pointer-events: none;
}
.champ-card.guessable { cursor: crosshair; }
.champ-card.guessable:hover { border-color: var(--gold); }
.champ-card.selected { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }

/* --- Aktions-Modals: Frage stellen / beantworten --- */
/* Badge oben im Modal, das die aktuelle Aktion unübersehbar macht. */
.wb-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wb-badge-turn { background: var(--gold); color: #1a1405; }
.wb-badge-answer { background: var(--accent); color: #fff; }

.wb-guess-btn { width: 100%; margin-top: .5rem; border-color: var(--gold); color: var(--gold); }
.wb-guess-btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(200, 170, 110, .12); }
.wb-warn { color: var(--error); text-align: center; }
.wb-min { display: inline-block; margin-top: 1rem; color: var(--muted); font-size: .85rem; }
.wb-min:hover { color: var(--text); }

.wb-q-label { margin: 0 0 .25rem; color: var(--muted); font-size: .9rem; }
.wb-q-label span { font-weight: 600; color: var(--gold); }
.wb-q-text { margin: 0 0 1rem; font-weight: 700; font-size: 1.1rem; }
.wb-answer-btns .btn { font-weight: 700; }
.wb-yes { border-color: var(--good); color: var(--good); }
.wb-yes:hover:not(:disabled) { border-color: var(--good); background: rgba(63, 208, 201, .12); }
.wb-maybe { border-color: var(--gold); color: var(--gold); }
.wb-maybe:hover:not(:disabled) { border-color: var(--gold); background: rgba(200, 170, 110, .12); }
.wb-no { border-color: var(--error); color: var(--error); }
.wb-no:hover:not(:disabled) { border-color: var(--error); background: rgba(255, 107, 122, .12); }

/* Freitext-Antwort (z. B. "Hybrid") */
.wb-answer-text-form { margin-top: 1rem; }
.wb-or { position: relative; text-align: center; margin: .25rem 0 .75rem; }
.wb-or span { position: relative; z-index: 1; padding: 0 .6rem; background: var(--panel); color: var(--muted); font-size: .8rem; }
.wb-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.wb-text-row { display: flex; gap: .5rem; }
.wb-text-row input {
  flex: 1;
  min-width: 0;
  padding: .6rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
}
.wb-text-row input:focus { outline: none; border-color: var(--accent); }
.wb-text-row .btn { flex: 0 0 auto; }

/* --- Schwebender Button: minimiertes Aktions-Modal wieder öffnen --- */
.wb-fab {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 40;
  padding: .8rem 1.4rem;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: wb-fab-bob 1.6s ease-in-out infinite;
}
.wb-fab-turn { background: var(--gold); color: #1a1405; }
.wb-fab-answer { background: var(--accent); color: #fff; }
@keyframes wb-fab-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* --- Verlauf --- */
.wb-history { margin-top: 1.5rem; }
.wb-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.wb-history-list li {
  padding: .4rem .6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
}
.wb-history-empty { color: var(--muted); }
.wb-h-who { font-weight: 600; color: var(--gold); }
.wb-h-yes { font-weight: 700; color: var(--good); }
.wb-h-no { font-weight: 700; color: var(--error); }
.wb-h-maybe { font-weight: 700; color: var(--gold); }
.wb-h-text { font-weight: 700; color: var(--accent); }

/* --- Modals (Rate-Bestätigung + Endscreen) --- */
.wb-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 8, 18, .8);
}
.wb-modal-box {
  width: 100%;
  max-width: 440px;
  padding: 1.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.wb-modal-box .actions { margin-top: 1.25rem; }
.wb-confirm-img {
  width: 96px;
  height: 96px;
  margin: 0 auto .75rem;
  border-radius: 10px;
  border: 2px solid var(--gold);
  object-fit: cover;
  display: block;
}
.wb-win { margin: 0; font-size: 1.9rem; color: var(--gold); }
.wb-lose { margin: 0; font-size: 1.9rem; color: var(--error); }

/* Antwort-Ergebnis (poppt beim Fragensteller auf) – über den Aktions-Modals. */
#wb-result { z-index: 60; }
.wb-result-answer { margin: .75rem 0 1.25rem; font-size: 2.4rem; font-weight: 800; }
.wb-result-answer.yes { color: var(--good); }
.wb-result-answer.no { color: var(--error); }
.wb-result-answer.maybe { color: var(--gold); }
.wb-result-answer.text { color: var(--accent); font-size: 1.8rem; }

/* --- Endscreen: Auflösung beider Champions (Splash-Art) --- */
.wb-reveal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0 0;
}
.wb-reveal-card {
  position: relative;
  height: 165px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.wb-reveal-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wb-reveal-info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: .5rem .6rem;
  text-align: left;
  background: linear-gradient(to top, rgba(6, 8, 18, .95), transparent);
}
.wb-reveal-who { margin: 0; font-size: .8rem; color: var(--muted); }
.wb-reveal-name { margin: 0; font-weight: 700; color: var(--gold); }

/* =========================================================================
   Qwixx (digitaler Spielblock)
   ========================================================================= */

/* Farbdefinitionen: setzen --qx (Kernfarbe) + --qx-tint (dezenter Hintergrund).
   Custom Properties vererben sich, daher genügt die Klasse am Zeilen-/Chip-Element. */
.qx-red    { --qx: #e5484d; --qx-tint: rgba(229, 72, 77, .15); }
.qx-yellow { --qx: #e0b32a; --qx-tint: rgba(224, 179, 42, .16); }
.qx-green  { --qx: #46a758; --qx-tint: rgba(70, 167, 88, .16); }
.qx-blue   { --qx: #4f8cff; --qx-tint: rgba(79, 140, 255, .16); }

/* --- Umschalter zwischen den Zetteln --- */
.qx-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.qx-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.qx-tab:hover:not(.qx-tab-locked) { border-color: var(--accent); }
.qx-tab.active { border-color: var(--accent); background: rgba(108, 140, 255, .18); font-weight: 600; }
.qx-tab-locked { cursor: default; opacity: .6; }
.qx-tab-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.qx-tab-dot.online { background: var(--good); }
.qx-tab-offline .qx-tab-name { opacity: .6; }
.qx-tab-locks { display: inline-flex; gap: 2px; }
.qx-tab-lock { width: .5rem; height: .5rem; border-radius: 2px; background: var(--qx); }
.qx-tab-pen { color: var(--error); font-weight: 700; font-size: .78rem; }

/* --- Hinweis beim Ansehen fremder Zettel --- */
.qx-peek-banner {
  margin: .25rem 0 .75rem;
  padding: .5rem .75rem;
  background: rgba(108, 140, 255, .12);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--accent);
  text-align: center;
}

/* --- Der Spielblock --- */
.qx-sheet { display: flex; flex-direction: column; gap: .35rem; margin: .5rem 0 1rem; }
.qx-row {
  display: flex;
  align-items: stretch;
  gap: .25rem;
  padding: .25rem;
  background: var(--qx-tint);
  border: 1px solid var(--border);
  border-left: 4px solid var(--qx);
  border-radius: 10px;
}
.qx-row-closed { opacity: .8; }
.qx-cap {
  flex: 0 0 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--qx);
}
.qx-cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .18rem;
}
.qx-cell {
  min-height: clamp(1.9rem, 7.5vw, 2.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: clamp(.62rem, 2.6vw, .95rem);
  font-weight: 600;
  line-height: 1;
  cursor: default;
}
.qx-cell.qx-lock { font-size: clamp(.7rem, 2.8vw, 1rem); }
/* Tappbar (nur zur Orientierung – der Server entscheidet). */
.qx-cell.qx-open { cursor: pointer; border-color: var(--qx); color: var(--qx); box-shadow: inset 0 0 0 1px var(--qx); }
.qx-cell.qx-open:hover { background: var(--qx-tint); }
/* Gesperrt (übersprungen / Reihe zu / Schloss noch nicht erlaubt). */
.qx-cell.qx-dim { opacity: .3; }
/* Angekreuzt: mit der Farbe ausgefüllt. */
.qx-cell.qx-crossed {
  background: var(--qx);
  border-color: var(--qx);
  color: #12152a;
  font-weight: 800;
}

/* --- Fehlwürfe --- */
.qx-penalty { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.qx-penalty-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.qx-penalty-boxes { display: flex; gap: .35rem; }
.qx-penalty-box {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  cursor: default;
}
.qx-penalty-box.qx-open { cursor: pointer; border-color: var(--error); color: var(--error); }
.qx-penalty-box.qx-open:hover { background: rgba(255, 107, 122, .12); }
.qx-penalty-box.qx-crossed { background: var(--error); border-color: var(--error); color: #1a0508; }
.qx-penalty-sum { color: var(--error); font-weight: 700; }

/* --- Wertung (live) --- */
.qx-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin: 0 0 1rem; }
.qx-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .4rem .2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
}
.qx-score-cap { font-size: .58rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.qx-score.qx-red .qx-score-cap,
.qx-score.qx-yellow .qx-score-cap,
.qx-score.qx-green .qx-score-cap,
.qx-score.qx-blue .qx-score-cap { color: var(--qx); }
.qx-score > span:last-child { font-size: 1.1rem; font-weight: 700; }
.qx-penalty-score > span:last-child { color: var(--error); }
.qx-total { background: var(--bg); border-color: var(--accent); }
.qx-total > span:last-child { color: var(--accent); }

/* --- Aktionen --- */
.qx-actions { justify-content: center; margin-top: 0; }
.qx-actions .btn { flex: 0 0 auto; min-width: 12rem; }
.qx-end-note { text-align: center; color: var(--gold); font-weight: 600; }

/* --- Benachrichtigungen (Toasts) --- */
.qx-toasts {
  position: fixed;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  width: max-content;
  max-width: 92vw;
  pointer-events: none;
}
.qx-toast {
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  animation: qx-toast-in .25s ease;
}
.qx-toast-red { border-left-color: #e5484d; }
.qx-toast-yellow { border-left-color: #e0b32a; }
.qx-toast-green { border-left-color: #46a758; }
.qx-toast-blue { border-left-color: #4f8cff; }
.qx-toast-penalty { border-left-color: var(--error); }
.qx-toast-out { opacity: 0; transition: opacity .3s; }
@keyframes qx-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }

/* --- Endscreen: Siegertabelle --- */
.qx-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(6, 8, 18, .8);
}
.qx-modal-box {
  width: 100%;
  max-width: 560px;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  text-align: center;
}
.qx-end-title { margin: 0; font-size: 1.6rem; }
.qx-end-title.qx-win { color: var(--gold); }
.qx-table-wrap { overflow-x: auto; margin: 1rem 0; }
.qx-result-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.qx-result-table th,
.qx-result-table td { padding: .4rem .3rem; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.qx-result-table th { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; }
.qx-result-name { text-align: left; font-weight: 600; }
.qx-result-total { font-weight: 800; color: var(--accent); }
.qx-result-winner { background: rgba(200, 170, 110, .14); }
.qx-result-winner .qx-result-total { color: var(--gold); }
.qx-end-actions { margin-top: 1.25rem; }

/* --- Endphase: „Abgeben" / Warten --- */
.qx-finish-title { margin: 0 0 .25rem; font-size: 1.4rem; }
.qx-finish-note { margin: 1rem 0; font-weight: 600; }
.qx-waitlist { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.qx-wait-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
}
.qx-wait-item.done { color: var(--muted); }
.qx-wait-item.done .qx-wait-icon { color: var(--good); }
.qx-wait-icon { width: 1.2rem; text-align: center; }

/* Schwebender „Abgeben"-Button (Endphase, wenn das Modal weggeklickt wurde). */
.qx-fab {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 40;
  padding: .8rem 1.4rem;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: #12152a;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: qx-fab-bob 1.6s ease-in-out infinite;
}
@keyframes qx-fab-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* --- Konfetti beim Sieg --- */
.qx-confetti { position: fixed; inset: 0; z-index: 70; pointer-events: none; }

/* =========================================================================
   Codenames
   ========================================================================= */

/* Team-/Kartenfarben: setzen --cn-col (Kernfarbe) + --cn-tint (dezent). */
.cn-red      { --cn-col: #e5484d; --cn-tint: rgba(229, 72, 77, .18); }
.cn-blue     { --cn-col: #4f8cff; --cn-tint: rgba(79, 140, 255, .18); }
.cn-neutral  { --cn-col: #c9b483; --cn-tint: rgba(201, 180, 131, .16); }
.cn-assassin { --cn-col: #12152a; --cn-tint: rgba(18, 21, 42, .55); }

/* --- Warteraum: Einstellungen --- */
.cn-setting-group { margin-bottom: 1.1rem; }
.cn-setting-label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }

/* Auswahlkarten (Modus / Offline-Hinweise) – wie bei „Wer bin ich?". */
.cn-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cn-choice label { display: block; cursor: pointer; }
.cn-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cn-choice span {
  display: block;
  padding: .6rem .5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
  color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.cn-choice strong { display: block; font-size: 1.05rem; color: var(--text); }
.cn-choice small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .15rem; }
.cn-choice input:checked + span { border-color: var(--accent); background: var(--panel-2); color: var(--text); }
.cn-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.cn-choice input:disabled + span { opacity: .5; cursor: not-allowed; }

.cn-select {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.cn-select:focus { outline: none; border-color: var(--accent); }

/* --- Wortset-Mehrfachauswahl (Suche + Liste + Zufall) --- */
.cn-ws { display: flex; flex-direction: column; gap: .5rem; }
.cn-ws-bar { display: flex; gap: .5rem; }
.cn-ws-search {
  flex: 1;
  min-width: 0;
  padding: .6rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.cn-ws-search:focus { outline: none; border-color: var(--accent); }
.cn-ws-random {
  flex: 0 0 auto;
  width: 2.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.cn-ws-random:hover:not(:disabled) { border-color: var(--accent); background: rgba(108, 140, 255, .14); }
.cn-ws-random:active:not(:disabled) { transform: rotate(-18deg); }
.cn-ws-random:disabled { opacity: .5; cursor: not-allowed; }
.cn-ws-list {
  max-height: 12rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.cn-ws-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel-2);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cn-ws-item:hover { border-color: var(--accent); }
.cn-ws-item.selected { border-color: var(--accent); background: rgba(108, 140, 255, .16); }
.cn-ws-item input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.cn-ws-item input:disabled { cursor: not-allowed; }
.cn-ws-name { flex: 1; font-weight: 600; }
.cn-ws-count { flex: 0 0 auto; font-size: .75rem; color: var(--muted); }
.cn-ws-custom .cn-ws-name::before { content: "✎ "; color: var(--gold); }
.cn-ws-empty { color: var(--muted); margin: .3rem; text-align: center; }
.cn-ws-summary { margin: 0; font-size: .82rem; color: var(--muted); }
.cn-ws-summary.cn-ws-warn { color: var(--error); }

/* Undercover-Schalter hervorheben, wenn aktiv */
.cn-undercover-on strong { color: var(--gold); }

.cn-settings textarea {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
}
.cn-settings textarea:focus { outline: none; border-color: var(--accent); }

/* --- Warteraum: Team-/Rollenwahl --- */
.cn-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cn-team-col {
  padding: .7rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cn-team-red { border-top-color: #e5484d; }
.cn-team-blue { border-top-color: #4f8cff; }
.cn-team-head { font-weight: 700; }
.cn-team-red .cn-team-head { color: #e5484d; }
.cn-team-blue .cn-team-head { color: #4f8cff; }
.cn-team-members { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; min-height: 2rem; }
.cn-team-members li { font-size: .9rem; }
.cn-team-empty { color: var(--muted); font-style: italic; }
.cn-team-members .cn-off { opacity: .5; }
.cn-join-btn { flex: 0 0 auto; }
.cn-spy-toggle { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
.cn-spy-toggle input { width: 1.1rem; height: 1.1rem; }

/* Offline: Rollenkarten (Chef / Ermittler) */
.cn-teams { display: grid; gap: .5rem; }
.cn-role-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cn-role-card:hover { border-color: var(--accent); }
.cn-role-card.active { border-color: var(--accent); background: var(--panel-2); }
.cn-role-title { font-weight: 700; }
.cn-role-sub { font-size: .78rem; color: var(--muted); }
.cn-role-who { font-size: .85rem; color: var(--accent); margin-top: .2rem; }

/* --- Spiel: Kopfzeile --- */
.cn-status-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cn-scoreboard { display: flex; gap: .5rem; }
.cn-score {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-2);
}
.cn-score-count { font-variant-numeric: tabular-nums; }
.cn-score-count b { font-size: 1.4rem; font-weight: 800; }
.cn-score-total { font-size: .95rem; font-weight: 700; color: var(--muted); }
.cn-score small { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cn-score-red b { color: #e5484d; }
.cn-score-blue b { color: #4f8cff; }
.cn-score.current { box-shadow: 0 0 0 2px var(--accent); }
.cn-score-caption { align-self: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.cn-role-badge {
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.cn-badge-red { background: #e5484d; color: #fff; border-color: #e5484d; }
.cn-badge-blue { background: #4f8cff; color: #fff; border-color: #4f8cff; }

/* --- Zug-/Warte-Status --- */
.cn-turn { margin: 1rem 0 .5rem; font-weight: 700; font-size: 1.05rem; min-height: 1.4rem; }
.cn-turn-red { color: #e5484d; }
.cn-turn-blue { color: #4f8cff; }
.cn-turn.active::before {
  content: "";
  display: inline-block;
  width: .6rem; height: .6rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: cn-pulse 1.2s ease-in-out infinite;
}
@keyframes cn-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* --- Aktiver Hinweis --- */
.cn-clue-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .5rem 0 1rem;
  padding: .6rem .9rem;
  border: 1px solid var(--cn-col, var(--border));
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--cn-tint, var(--panel-2));
}
.cn-clue-caption { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cn-clue-word { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.cn-clue-number {
  min-width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cn-col, var(--accent));
  color: #fff; font-weight: 800;
}
.cn-clue-left { margin-left: auto; font-size: .85rem; color: var(--muted); }

/* --- Banner (Offline-Ansichtshinweis) --- */
.cn-banner {
  margin: .5rem 0 1rem;
  padding: .5rem .75rem;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(108, 140, 255, .12);
  color: var(--accent);
  font-size: .88rem;
}

/* --- Brett --- */
.cn-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  margin: 1rem 0;
}
.cn-card {
  aspect-ratio: 5 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: default;
  transition: border-color .12s, transform .08s, background .12s;
}
.cn-card-word {
  font-size: clamp(.5rem, 1.9vw, .92rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.05;
  /* Lange Begriffe korrekt trennen (mit Bindestrich, dank lang="de"),
     nur zur Not an beliebiger Stelle umbrechen. */
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
/* Chef-/Zuschauer-Hinweis auf die Farbe (noch nicht aufgedeckt). */
.cn-card.cn-key { background: var(--cn-tint); border-color: var(--cn-col); }
.cn-card.cn-key.cn-assassin { background: var(--cn-tint); border-color: #f2f3f8; }
/* Anklickbar (Ermittler am Zug). */
.cn-card.cn-clickable { cursor: pointer; }
.cn-card.cn-clickable:hover { border-color: var(--accent); transform: translateY(-1px); }
.cn-card.cn-clickable:active { transform: scale(.98); }
/* Vom Team markiert (Vorschlag, noch nicht aufgedeckt). */
.cn-card.cn-marked {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent);
  animation: cn-mark-pulse 1.2s ease-in-out infinite;
}
@keyframes cn-mark-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent); }
  50% { box-shadow: 0 0 0 5px rgba(108, 140, 255, .45); }
}
/* Aufgedeckt: mit der Farbe gefüllt. */
.cn-card.cn-revealed { background: var(--cn-col); border-color: var(--cn-col); }
.cn-card.cn-revealed .cn-card-word { color: #fff; }
.cn-card.cn-revealed.cn-neutral .cn-card-word { color: #2a2410; }
.cn-card.cn-revealed.cn-assassin { background: #12152a; border-color: #000; }
.cn-card.cn-revealed.cn-assassin .cn-card-word { color: var(--error); }
.cn-card.cn-revealed.cn-assassin .cn-card-word::after { content: " ☠"; }
.cn-card:disabled { opacity: 1; } /* eigenes Dimmen via Farbe, kein Standard-Grau */

/* --- Chef-Eingabe --- */
.cn-clue-form-wrap { margin: .5rem 0 1rem; }
.cn-clue-form { display: flex; gap: .5rem; }
.cn-clue-form input[type="text"] {
  flex: 1; min-width: 0;
  padding: .7rem .8rem;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.cn-clue-form input[type="number"] {
  width: 4rem; flex: 0 0 auto;
  padding: .7rem .5rem;
  font-size: 1rem; text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.cn-clue-form input:focus { outline: none; border-color: var(--accent); }
.cn-clue-form .btn { flex: 0 0 auto; }
.cn-guess-controls { justify-content: flex-start; margin: .5rem 0 1rem; }
.cn-guess-controls .btn { flex: 0 0 auto; min-width: 10rem; }

/* --- Verlauf --- */
.cn-log-wrap { margin-top: 1.5rem; }
.cn-log {
  list-style: none; padding: 0; margin: 0;
  max-height: 16rem; overflow-y: auto;
  display: flex; flex-direction: column; gap: .35rem;
}
.cn-log-item {
  padding: .4rem .6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 8px;
  font-size: .88rem;
}
.cn-log-red { border-left-color: #e5484d; }
.cn-log-blue { border-left-color: #4f8cff; }
.cn-log-empty { color: var(--muted); border-left-color: var(--border); }
.cn-log-reveal-assassin { font-weight: 700; color: var(--error); }

/* --- Endscreen --- */
.cn-modal {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(6, 8, 18, .8);
}
.cn-modal-box {
  width: 100%; max-width: 440px;
  padding: 1.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.cn-end-title { margin: 0; font-size: 1.9rem; padding: .3rem .9rem; border-radius: 10px; display: inline-block; }
.cn-end-actions { margin-top: 1.25rem; justify-content: center; }
.cn-end-actions .btn { flex: 0 0 auto; min-width: 12rem; }

/* --- Benachrichtigung (Server-Hinweis) --- */
.cn-toast {
  position: fixed;
  top: .9rem; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 80;
  max-width: 92vw;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.cn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Feedback beim Aufdecken: kurzer Rahmen-Blitz am Bildschirmrand --- */
.cn-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; }
.cn-flash.show { animation: cn-flash-anim .9s ease-out; }
.cn-flash-good { box-shadow: inset 0 0 55px 14px rgba(63, 208, 201, .75); }   /* richtig */
.cn-flash-bad { box-shadow: inset 0 0 55px 14px rgba(255, 107, 122, .8); }    /* falsch (Zug endet) */
.cn-flash-strong.cn-flash-bad { box-shadow: inset 0 0 95px 24px rgba(255, 40, 60, .92); } /* Attentäter */
.cn-flash-strong.show { animation-duration: 1.3s; }
@keyframes cn-flash-anim { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* --- Ansage: das andere Team ist jetzt am Zug --- */
.cn-turn-banner {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-14px) scale(.96);
  z-index: 92;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.cn-turn-banner.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.cn-turn-banner-red { background: #e5484d; }
.cn-turn-banner-blue { background: #4f8cff; }

/* =======================================================================
   Tempel des Schreckens (tp-…)
   Konzept: Tablet = Vollbild-Tisch (Karten an den Sitzplätzen, Aufdecken per
   Antippen). Handy = geheime Rolle + eigene Kammern. Thema: sandiger Tempel.
   Nur auf der Tempel-Seite aktiv (Klasse .tp-page am <main>).
   ======================================================================= */

.tp-page {
  --tp-sand: #c8a86a;
  --tp-sand-d: #a2803f;
  --tp-sand-l: #ecd6a3;
  --tp-ink: #3a2c15;
  --tp-stone: #6d5836;
  --tp-edge: #8a6d3f;
  --tp-parch: #f0e2c2;
  --tp-gold: #e0ab3f;
  --tp-gold-l: #ffd671;
  --tp-fire: #e0542c;
  --tp-fire-l: #ff8a4c;
  --tp-jade: #47b98a;
  --tp-crimson: #c74450;
  --tp-cardback: #1f3a4d;
  --tp-cardback-2: #14262f;
}

/* Warmes Glimmen auf den Warteraum-/Handy-Screens (dunkel gehalten). */
.tp-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% -8%, rgba(224, 171, 63, .14), transparent 70%),
    radial-gradient(55% 45% at 92% 96%, rgba(200, 90, 44, .08), transparent 70%);
}
.tp-page .panel { background: linear-gradient(160deg, #262019, #1c1712); border-color: var(--tp-edge); }
.tp-page h1 { color: var(--tp-parch); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }

/* --- Warteraum: Sitzplatzwahl (Tisch von oben) --- */
.tp-setup-hint { margin-top: 0; }
.tp-seatpick-wrap { margin: 1.2rem 0; }
.tp-seatpick {
  position: relative;
  width: 100%; max-width: 440px; aspect-ratio: 3 / 2;
  margin: .6rem auto;
}
.tp-seatpick-table {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; height: 52%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  background: radial-gradient(circle at 50% 35%, var(--tp-sand-l), var(--tp-sand-d));
  border: 2px solid var(--tp-edge);
  border-radius: 44% / 40%;
  box-shadow: inset 0 0 22px rgba(90, 60, 20, .5), 0 6px 18px rgba(0, 0, 0, .45);
  color: #2c2410;
}
.tp-chair {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 62px; max-width: 92px;
  padding: .35rem .4rem;
  border-radius: 10px;
  font-size: .74rem; line-height: 1.15; text-align: center;
  border: 1px solid var(--tp-edge);
  background: #262019; color: var(--tp-parch);
  cursor: pointer;
}
button.tp-chair:disabled { cursor: not-allowed; }
.tp-chair-free { border-style: dashed; color: var(--tp-parch); opacity: .8; }
button.tp-chair-free:hover { border-color: var(--tp-gold); color: var(--tp-gold-l); opacity: 1; }
.tp-chair-taken { background: var(--tp-stone); border-color: var(--tp-gold); font-weight: 700; }
.tp-chair-mine { background: var(--tp-gold); color: #241a06; border-color: var(--tp-gold-l); box-shadow: 0 0 14px rgba(224, 171, 63, .5); }
.tp-chair.tp-off { opacity: .5; }
.tp-seatpick-readonly .tp-chair { cursor: default; }
.tp-chair-name { display: block; overflow: hidden; text-overflow: ellipsis; }

/* --- Verteilungs-Vorschau + Chips (auch im Endscreen) --- */
.tp-preview { margin-top: 1rem; }
.tp-preview-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.tp-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: #262019; border: 1px solid var(--tp-edge); color: var(--tp-parch);
  font-size: .9rem;
}
.tp-chip b { font-size: 1rem; color: #fff; }
.tp-chip-adv { border-color: var(--tp-jade); }
.tp-chip-wae { border-color: var(--tp-crimson); }
.tp-chip-gold { border-color: var(--tp-gold); }
.tp-chip-fire { border-color: var(--tp-fire); }

/* =======================================================================
   Karten – überall gleich, sehen aus wie echte Karten
   ======================================================================= */
.tp-tcard {
  --w: 46px;
  position: relative;
  width: var(--w); aspect-ratio: 5 / 7;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--w) * .5);
  padding: 0; color: var(--tp-ink);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .25) inset;
  background: #efe4c8;
}
.tp-tcard-face { line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.tp-tcard-crest { line-height: 1; font-size: calc(var(--w) * .42); opacity: .85; }
/* dekorativer Innenrahmen wie bei einer Spielkarte */
.tp-tcard::after {
  content: ""; position: absolute; inset: 3px; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .18); pointer-events: none;
}

/* Rückseite = verzierte Tempel-Karte */
.tp-tcard-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, var(--tp-cardback), var(--tp-cardback-2));
  color: var(--tp-gold-l);
}
.tp-tcard-back::after { border-color: rgba(224, 171, 63, .55); inset: 3px; }
.tp-tcard-back::before {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  border: 1px solid rgba(224, 171, 63, .25);
}

/* Gold = Pergament mit Schatz */
.tp-tcard-gold {
  background: radial-gradient(circle at 50% 34%, #ffe9a8, #d7a63f 78%);
  color: #4a3406;
  box-shadow: 0 0 16px rgba(224, 171, 63, .5), 0 3px 8px rgba(0, 0, 0, .5);
}
.tp-tcard-gold::after { border-color: rgba(120, 80, 10, .4); }
/* Feuerfalle = dunkle Karte, glühend */
.tp-tcard-falle {
  background: radial-gradient(circle at 50% 60%, #ff7a45, #7a1e12 80%);
  color: #fff;
  box-shadow: 0 0 18px rgba(224, 84, 44, .6), 0 3px 8px rgba(0, 0, 0, .5);
}
.tp-tcard-falle::after { border-color: rgba(255, 180, 120, .4); }
/* Leer = staubiger Stein */
.tp-tcard-leer {
  background: linear-gradient(160deg, #d8caa6, #b6a577);
  color: #5a4a28;
}
.tp-tcard-open { filter: saturate(1.05); }
.tp-tcard-open::before {
  content: ""; position: absolute; inset: 0; border-radius: 7px;
  box-shadow: 0 0 0 100px rgba(0, 0, 0, .06) inset;
}

/* Antippbare (verdeckte) Kammer beim Schlüssel-Halter-Gegenüber */
button.tp-tcard-open-able { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.tp-tcard-open-able::before {
  content: ""; position: absolute; inset: -2px; border-radius: 9px;
  box-shadow: 0 0 0 2px rgba(224, 171, 63, .5);
  animation: tp-invite 1.8s ease-in-out infinite;
}
button.tp-tcard-open-able:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 0 20px rgba(255, 214, 113, .7), 0 10px 18px rgba(0, 0, 0, .5); }
@keyframes tp-invite { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }

/* frisch geöffnete Kammer poppt einmal auf */
.tp-just-open { animation: tp-pop .55s ease; z-index: 3; }
@keyframes tp-pop {
  0% { transform: scale(.5) rotate(-8deg); opacity: .2; }
  60% { transform: scale(1.22) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* =======================================================================
   TABLET: Vollbild-Tisch
   ======================================================================= */
body.tp-stage-on { overflow: hidden; }
.tp-stage {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column;
  color: var(--tp-ink);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 240, 200, .35), transparent 60%),
    radial-gradient(60% 50% at 50% 55%, rgba(120, 80, 30, .18), transparent 70%),
    repeating-radial-gradient(circle at 30% 20%, rgba(120, 90, 40, .05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--tp-sand-l), var(--tp-sand) 55%, var(--tp-sand-d));
}

.tp-stage-hud {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .8rem;
  background: linear-gradient(180deg, rgba(40, 28, 12, .5), rgba(40, 28, 12, .15));
  backdrop-filter: blur(2px);
}
.tp-hud-stats { display: flex; flex-wrap: wrap; gap: .4rem; }
.tp-hud-stat {
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(30, 20, 8, .55); color: var(--tp-parch);
  border: 1px solid rgba(255, 220, 150, .25);
  font-size: .9rem;
}
.tp-hud-stat b { color: #fff; }
.tp-hud-gold { border-color: var(--tp-gold); color: var(--tp-gold-l); }
.tp-hud-fire { border-color: var(--tp-fire); color: var(--tp-fire-l); }
.tp-hud-menu { display: flex; align-items: center; gap: .4rem; }
.tp-spectator { font-size: .8rem; color: var(--tp-parch); opacity: .8; }
.btn.tp-hud-btn { flex: 0 0 auto; padding: .4rem .8rem; font-size: .85rem; background: rgba(30, 20, 8, .6); color: var(--tp-parch); border-color: rgba(255, 220, 150, .3); }
.btn.tp-hud-btn:hover:not(:disabled) { border-color: var(--tp-gold); }

/* PixiJS-Canvas als Tischfläche (füllt den Platz unter dem HUD) */
.tp-pixi { position: relative; flex: 1; min-height: 0; }
.tp-pixi canvas { display: block; width: 100%; height: 100%; }

/* Tischplatte + Sitzplätze (DOM-Fallback-Stile; Tisch rendert jetzt Pixi) */
.tp-felt { position: relative; flex: 1; margin: .4rem; }
.tp-felt::before {
  content: ""; position: absolute; inset: 9% 7%;
  border-radius: 46% / 42%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 240, 200, .5), transparent 60%),
    linear-gradient(160deg, #b8935220, #6d4f2340), var(--tp-sand-d);
  border: 3px solid var(--tp-edge);
  box-shadow: inset 0 0 60px rgba(80, 50, 15, .55), 0 10px 30px rgba(0, 0, 0, .4);
}
.tp-felt-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(46%, 520px); text-align: center; pointer-events: none;
}
.tp-center-turn {
  margin: 0; font-size: clamp(.85rem, 1.9vw, 1.15rem); font-weight: 700;
  color: #2f2410; text-shadow: 0 1px 0 rgba(255, 245, 220, .5);
}
.tp-center-turn.tp-role-adv { color: #1c6b4c; }
.tp-center-turn.tp-role-wae { color: #8f2730; }

.tp-seats { position: absolute; inset: 0; }
.tp-seat-stack {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  transition: box-shadow .3s ease;
}
.tp-seat-plate {
  display: inline-flex; align-items: center; gap: .25rem;
  max-width: 150px; padding: .18rem .6rem; border-radius: 999px;
  background: rgba(30, 20, 8, .72); color: var(--tp-parch);
  border: 1px solid rgba(255, 220, 150, .3);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.tp-seat-name { overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.tp-seat-cards { display: flex; gap: 3px; }
.tp-seat-cards .tp-tcard { --w: clamp(24px, 3.4vw, 46px); }
.tp-seat-key .tp-seat-plate { background: var(--tp-gold); color: #241a06; border-color: var(--tp-gold-l); }
.tp-seat-key { filter: drop-shadow(0 0 14px rgba(255, 200, 90, .6)); animation: tp-torch 2.4s ease-in-out infinite; }
@keyframes tp-torch {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 200, 90, .45)); }
  50% { filter: drop-shadow(0 0 20px rgba(255, 214, 113, .8)); }
}
.tp-key-badge { font-size: .9rem; }
.tp-seat-stack.tp-off { opacity: .55; }
.tp-role-reveal { font-size: .8rem; }
.tp-panel-hit { animation: tp-hit .6s ease; }
@keyframes tp-hit { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }

/* Verlauf unten links auf dem Tisch */
.tp-stage-log {
  position: absolute; left: .8rem; bottom: .6rem; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .2rem; max-width: 42%;
}
.tp-stage-log li {
  font-size: .74rem; padding: .18rem .5rem; border-radius: 6px;
  background: rgba(30, 20, 8, .6); color: var(--tp-parch);
  border-left: 3px solid var(--tp-edge);
}
.tp-stage-log .tp-log-gold { border-left-color: var(--tp-gold); }
.tp-stage-log .tp-log-falle { border-left-color: var(--tp-fire); }
.tp-stage-log .tp-log-leer { border-left-color: var(--tp-stone); }

/* =======================================================================
   HANDY: Rolle + eigene Karten
   ======================================================================= */
.tp-phone-status { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tp-stat {
  padding: .45rem .9rem; border-radius: 8px;
  background: linear-gradient(180deg, #2a2118, #1e1811);
  border: 1px solid var(--tp-edge); color: var(--tp-parch); font-size: .95rem;
}
.tp-stat b { color: #fff; }
.tp-stat-gold { border-color: var(--tp-gold); color: var(--tp-gold-l); }
.tp-stat-gold b { color: var(--tp-gold-l); }
.tp-stat-fire { border-color: var(--tp-fire); color: var(--tp-fire-l); }
.tp-stat-fire b { color: var(--tp-fire-l); }

.tp-role-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.5rem 1.2rem; border-radius: 16px; margin-bottom: 1.1rem;
  border: 2px solid var(--tp-edge); text-align: center; color: var(--tp-parch);
}
.tp-role-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% -10%, rgba(255, 255, 255, .1), transparent 60%); pointer-events: none; }
.tp-role-card.tp-role-adv { border-color: var(--tp-jade); background: linear-gradient(165deg, rgba(71, 185, 138, .22), #201a12 72%); box-shadow: 0 0 26px rgba(71, 185, 138, .18); }
.tp-role-card.tp-role-wae { border-color: var(--tp-crimson); background: linear-gradient(165deg, rgba(199, 68, 80, .26), #201a12 72%); box-shadow: 0 0 26px rgba(199, 68, 80, .2); }
.tp-role-emoji { font-size: 3rem; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.tp-role-name { font-size: 1.6rem; font-weight: 800; color: #fff; }
.tp-role-adv .tp-role-name { color: #7fe0b9; }
.tp-role-wae .tp-role-name { color: #f39aa2; }
.tp-role-goal { font-size: .92rem; opacity: .88; max-width: 34ch; }

.tp-key-hint {
  padding: .9rem 1rem; border-radius: 12px; margin-bottom: .8rem;
  background: radial-gradient(120% 80% at 50% 0%, rgba(224, 171, 63, .2), transparent 70%), #241c10;
  border: 1px solid var(--tp-gold); color: var(--tp-gold-l); font-weight: 700; text-align: center;
  animation: tp-glow 2.2s ease-in-out infinite;
}
@keyframes tp-glow { 0%, 100% { box-shadow: 0 0 0 rgba(224, 171, 63, 0); } 50% { box-shadow: 0 0 22px rgba(224, 171, 63, .4); } }
.tp-turn-hint { text-align: center; color: var(--tp-parch); opacity: .85; margin: 0 0 1rem; }

.tp-hand-wrap { margin-bottom: 1rem; }
.tp-hand {
  display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .5rem; padding: .8rem;
  border-radius: 12px; border: 1px solid var(--tp-edge);
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent);
}
.tp-hand .tp-tcard { --w: 54px; }
.tp-phone .cn-setting-label { color: var(--tp-parch); }

/* =======================================================================
   Endscreen, Blitz, Ansage
   ======================================================================= */
.tp-page .cn-modal-box { background: linear-gradient(160deg, #2a2118, #1c1610); border-color: var(--tp-edge); }
.tp-end-box { max-width: 480px; }
.tp-end-title { margin: 0 0 .3rem; font-size: 1.7rem; }
.tp-end-title.tp-role-adv { color: #7fe0b9; text-shadow: 0 0 22px rgba(71, 185, 138, .5); }
.tp-end-title.tp-role-wae { color: #f39aa2; text-shadow: 0 0 22px rgba(199, 68, 80, .5); }
.tp-end-roles { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: 1.1rem 0; }

.tp-flash { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; }
.tp-flash.show { animation: tp-flash-anim 1s ease-out; }
.tp-flash-gold { box-shadow: inset 0 0 90px 20px rgba(255, 205, 100, .55); }
.tp-flash-falle { box-shadow: inset 0 0 110px 26px rgba(255, 80, 45, .7); }
.tp-flash-leer { box-shadow: inset 0 0 70px 16px rgba(150, 120, 70, .4); }
@keyframes tp-flash-anim { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.tp-open-banner {
  position: fixed; top: 4.5rem; left: 50%;
  transform: translateX(-50%) translateY(-14px) scale(.96);
  z-index: 92; padding: .75rem 1.7rem; border-radius: 999px;
  font-size: 1.15rem; font-weight: 800; color: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  pointer-events: none; opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.tp-open-banner.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.tp-open-banner-gold { background: linear-gradient(180deg, #f0c258, #b9832a); color: #1c1405; }
.tp-open-banner-falle { background: linear-gradient(180deg, #ff7a49, #c22f22); }
.tp-open-banner-leer { background: linear-gradient(180deg, #8a6f4a, #4a3722); }

/* Querformat-Hinweis? Der Tisch funktioniert in jeder Ausrichtung, ist aber
   fürs quer liegende Tablet optimiert. Auf sehr schmalen Screens Karten kleiner. */
@media (max-width: 720px) and (orientation: portrait) {
  .tp-seat-cards .tp-tcard { --w: clamp(20px, 6.5vw, 34px); }
  .tp-seat-plate { font-size: .72rem; max-width: 120px; }
}

/* --- Handy: kompakte Rollenkarte, Hinweis, Pixi-Hand, Ansage-Eingabe --- */
.tp-role-card-compact { flex-direction: row; align-items: center; justify-content: center; gap: .6rem; padding: .7rem 1rem; margin-bottom: .8rem; }
.tp-role-card-compact .tp-role-emoji { font-size: 1.8rem; }
.tp-role-card-compact .tp-role-name { font-size: 1.25rem; }

.tp-phone-hint {
  text-align: center; padding: .7rem .9rem; margin-bottom: .9rem;
  border-radius: 10px; border: 1px solid var(--tp-edge);
  background: linear-gradient(180deg, #2a2118, #1e1811); color: var(--tp-parch); font-weight: 600;
}

.tp-hand-pixi { width: 100%; height: 130px; margin: .3rem 0 1rem; }
.tp-hand-pixi canvas { display: block; width: 100%; height: 100%; }

.tp-declare { padding: 1rem; border-radius: 12px; border: 1px solid var(--tp-gold); background: #241c10; margin-bottom: 1rem; }
.tp-declare-rows { display: flex; flex-direction: column; gap: .7rem; margin: .7rem 0; }
.tp-declare-row { display: flex; align-items: center; gap: .7rem; }
.tp-declare-key { min-width: 6rem; color: var(--tp-parch); font-weight: 600; }
.tp-declare-row b { min-width: 1.6rem; text-align: center; font-size: 1.4rem; color: #fff; }
.tp-step {
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: 8px;
  border: 1px solid var(--tp-edge); background: #33281a; color: var(--tp-parch);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.tp-step:hover { border-color: var(--tp-gold); color: var(--tp-gold-l); }
.tp-declared { text-align: center; padding: .9rem; border-radius: 10px; border: 1px solid var(--tp-edge); background: #241c10; color: var(--tp-parch); }

/* --- Rundenende-Zusammenfassung (Chips) --- */
.tp-roundend-reveals { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin: .8rem 0; }
.tp-re-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .6rem; border-radius: 10px;
  background: var(--tp-stone-3, #382a1d); border: 1px solid var(--tp-edge); color: var(--tp-parch);
  font-size: 1.2rem;
}
.tp-re-chip small { font-size: .75rem; color: var(--tp-parch); opacity: .8; }
.tp-re-gold { border-color: var(--tp-gold); }
.tp-re-falle { border-color: var(--tp-fire); }
.tp-re-leer { border-color: var(--tp-edge); }

/* =========================================================================
   Slots – einarmiger Bandit (Singleplayer, PixiJS). Eigene Klassen: sl-…
   ========================================================================= */
.sl-settings .sl-start-field { margin-bottom: .5rem; }
.sl-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.sl-chip { flex: 0 0 auto; padding: .45rem .8rem; }

/* --- Automat ------------------------------------------------------------ */
.sl-machine {
  background: linear-gradient(180deg, #20264a, #171b33);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}

.sl-topbar { display: flex; gap: .75rem; margin-bottom: .75rem; align-items: stretch; }
.sl-mute {
  flex: 0 0 auto;
  width: 3rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: border-color .15s;
}
.sl-mute:hover { border-color: var(--accent); }
.sl-stat {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .75rem;
  text-align: center;
}
.sl-stat-cap { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sl-stat-val { display: block; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sl-stat-balance .sl-stat-val { color: var(--gold); }
.sl-stat-win .sl-stat-val { color: var(--muted); }
.sl-stat-win .sl-stat-val.sl-win-hit { color: var(--good); animation: sl-pop .5s ease; }
@keyframes sl-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Pixi-Bühne (Walzen). Feste, responsive Höhe – die Breite füllt den Automaten. */
.sl-reels {
  position: relative;
  width: 100%;
  height: clamp(220px, 42vh, 360px);
  border-radius: 12px;
  overflow: hidden;
}
.sl-reels canvas { display: block; width: 100%; height: 100%; }

/* --- Steuerung --------------------------------------------------------- */
.sl-controls { display: flex; align-items: flex-end; gap: .75rem; margin-top: .9rem; }
.sl-bet { flex: 1; }
.sl-bet-cap { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: .25rem; }
.sl-bet-row { display: flex; align-items: center; gap: .4rem; }
.sl-bet-btn { flex: 0 0 auto; width: 2.6rem; padding: .5rem 0; font-size: 1.2rem; font-weight: 700; }
.sl-bet-val {
  flex: 1; min-width: 3rem; text-align: center;
  font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .4rem 0;
}
.sl-bet-max { flex: 0 0 auto; padding: .5rem .8rem; }
.sl-spin {
  flex: 0 0 auto;
  min-width: 8rem;
  padding: .9rem 1.2rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .03em;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
}
.sl-spin:disabled { opacity: .5; }

.sl-session {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; font-size: .85rem; color: var(--muted);
}
.sl-session b { color: var(--text); }
.sl-keyhint { text-align: center; margin-top: .5rem; font-size: .8rem; }
/* Auf reinen Touch-Geräten gibt es keine Tastatur -> Hinweis ausblenden. */
@media (pointer: coarse) { .sl-keyhint { display: none; } }

/* --- Auszahlungstabelle ------------------------------------------------ */
.sl-paytable { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.sl-paytable summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.sl-paytable-list { list-style: none; padding: 0; margin: .75rem 0 .25rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem; }
.sl-paytable-list li { display: flex; justify-content: space-between; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .35rem .6rem; }
.sl-pt-sym { font-size: 1.1rem; letter-spacing: -.1em; }
.sl-pt-mult { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

/* --- Pleite-Overlay (nutzt die Modal-Optik der Lobby) ------------------ */
.sl-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6, 8, 18, .8);
}
.sl-modal-box {
  width: 100%; max-width: 400px; padding: 1.75rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.sl-modal-box h2 { margin: 0 0 .5rem; color: var(--text); font-size: 1.5rem; }
.sl-modal-box .actions { margin-top: 1.5rem; }