:root {
  /* Munchkin-eigene Identität (Kerker/Fackel-Palette), aber im gleichen
     "Look & Feel" wie die Geschwister-Projekte (Wizard: Magie-Lila,
     Tempel des Schreckens: Tempel-Gold/Braun) aufgebaut: dunkler
     Radial-Verlauf-Hintergrund, warme Akzentfarbe, gemeinsame
     Gold-/Erfolgs-/Radius-Werte. */
  --bg: #10160f;
  --bg-alt: #172016;
  --panel: #1c2519;
  --panel-alt: #232f1e;
  --border: #3a4a30;
  --text: #eef1e8;
  --text-dim: #a6b39a;
  --gold: #f4c95d;
  --gold-bright: #ffdf8e;
  --door: #e07a3f;
  --door-bright: #f5985e;
  --danger: #d9534f;
  --success: #3ecf8e;
  --radius: 14px;

  --c-monster: #a1443f;
  --c-curse: #7d4fa8;
  --c-race: #4a8c5c;
  --c-class: #4a72a8;
  --c-item: #b8923a;
  --c-treasure_other: #2c8a8a;
  --c-door_other: #6c7358;

  /* Kartengesicht: helles Pergament (wie bei echten Spielkarten), Text
     in dunkler Tinte statt weiß - die Kacheln nutzen images/_card-bg.webp
     als Hintergrund und werden vom Spiel mit Bild/Text zusammengesetzt. */
  --card-face: #f1e7cd;
  --ink: #3b2f1c;
  --ink-dim: #7a6a4d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(circle at top, #202c1c 0%, var(--bg) 62%);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 { margin: 0 0 8px 0; }
h1 .sub { font-weight: 400; color: var(--text-dim); font-size: 0.6em; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.hidden { display: none !important; }
.hint { color: var(--text-dim); font-size: 0.9em; }
/* Werte-Zeile in der Kartengrossansicht (Stufe, Slot, Bonus, Gold, "Gross") */
.cardvalues {
  background: var(--panel-alt); border-radius: 8px; padding: 6px 10px;
  font-size: 0.92em; margin: 6px 0;
}
.error { color: var(--danger); min-height: 1.2em; }
.code, .room-code {
  font-family: monospace; letter-spacing: 0.12em; background: var(--panel-alt);
  padding: 2px 10px; border-radius: 8px; color: var(--gold-bright); font-weight: 700;
}

.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.row.wrap { flex-wrap: wrap; }

input {
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: 10px; font-size: 1em; width: 100%;
}
input:focus { outline: 2px solid var(--door-bright); }
label { display: block; margin: 10px 0 4px 0; color: var(--text-dim); font-size: 0.85em; }

button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 0.95em; font-weight: 600;
  transition: transform 0.05s ease, filter 0.15s ease;
}
button:hover { filter: brightness(1.14); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { background: linear-gradient(135deg, var(--door), #b0501f); border-color: var(--door); color: white; }
button.secondary { background: linear-gradient(135deg, var(--gold), #d9a53a); border-color: var(--gold); color: #241a05; }
button.ghost { background: transparent; }
button.danger { background: var(--danger); border-color: var(--danger); color: white; }
button.small { padding: 5px 10px; font-size: 0.8em; }
button.wide { width: 100%; }

/* Wie button.*, aber für <a>-Elemente (z. B. den Zurück-zur-Spielauswahl-Link) -
   button {} greift nur auf echte <button>-Tags, .btn deckt beide ab. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--panel-alt); border: 1px solid var(--border); color: var(--text);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 0.95em; font-weight: 600;
  text-decoration: none; transition: transform 0.05s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.14); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 0.8em; }
.back-hub-home { margin-top: 14px; }

.tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.tab-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-alt); color: var(--text-dim); cursor: pointer; font-weight: 600;
}
.tab-btn.active { background: var(--door); color: white; border-color: var(--door); }

.eyebrow { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lobby-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.code.big { font-size: 1.5rem; padding: 4px 14px; }

.screen { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; }
#screen-start, #screen-lobby { align-items: center; }
#screen-start { flex-direction: column; gap: 14px; }
#screen-game { display: block; padding: 0; min-height: 100vh; }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 100%; max-width: 760px; box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.panel.narrow { max-width: 440px; margin-top: 6vh; text-align: center; }
.panel.narrow h1 { font-size: 2rem; text-shadow: 0 0 18px rgba(224,122,63,0.55); }
.panel.small { padding: 12px 16px; box-shadow: none; }

.playerlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
/* Haelt die Fluch-Vorschau (.prow-curses) und die eigentliche Spielerzeile
   (.prow) nebeneinander, ohne .prow selbst (Hintergrund/Rahmen/Klick-Handler)
   anzufassen. */
.prow-wrap { display: flex; align-items: flex-start; gap: 6px; }
.prow-wrap .prow { flex: 1 1 auto; min-width: 0; }
/* Anhaltende Flueche (z.B. HUNGRIGER RUCKSACK) - eigene Spalte LINKS von der
   Spielerzeile, mit Kartenbild statt nur einer Anzahl, damit auf einen Blick
   klar ist, WELCHER Fluch gerade wirkt (Tooltip/Klick zeigen den Rest). */
.prow-curses { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; padding-top: 2px; }
.prow-curses .curseicon {
  width: 28px; height: 28px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--c-curse); cursor: pointer; transition: transform 0.12s ease;
}
.prow-curses .curseicon:hover { transform: scale(1.18); z-index: 1; }
.playerlist li, .playerlist .prow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--bg-alt); border: 1px solid var(--border); padding: 9px 12px; border-radius: 10px;
}
.playerlist .prow.active-turn, .playerlist li.active-turn { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.playerlist.compact .prow { font-size: 0.85em; padding: 7px 10px; }
.playerlist .prow.clickable { cursor: pointer; transition: border-color 0.12s ease; }
.playerlist .prow.clickable:hover { border-color: var(--door-bright); }
.playerlist .prow > button { flex: 1 0 100%; }
/* Kleine Ausruestungs-Icons je Spieler:in in der Seitenleiste - macht auf
   einen Blick sichtbar, WAS jemand traegt, statt nur eine Anzahl ("🎒 2"),
   und nutzt die vorher meist leere Flaeche unter der Spielerliste. Eigener
   Klick pro Icon (Grossansicht der Karte) - die Zeile selbst bleibt
   zusaetzlich als Ganzes klickbar (oeffnet alle Slots inkl. leerer, siehe
   openPlayerModal). */
/* Rasse/Klasse-Marken ueber der Ausruestungsreihe (siehe .prow-equip) - exakt
   dieselbe Zeilenlogik, nur mit den Marken aus renderMyPanel/#myBadges statt
   Icons. */
.prow-badges { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.prow-equip { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.prow-equip .eqicon {
  width: 30px; height: 30px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--border); cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.prow-equip .eqicon:hover { transform: scale(1.18); border-color: var(--door-bright); z-index: 1; }
.prow-equip .eqicon-none { color: var(--text-dim); font-size: 0.78em; }
.tag { font-size: 0.7em; padding: 2px 8px; border-radius: 999px; background: var(--panel-alt); color: var(--text-dim); }
.tag.you { background: var(--door); color: white; }
.tag.off { background: var(--danger); color: white; }
.tag.turn { background: var(--gold); color: #241a05; font-weight: 700; }

.gamebar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px; background: var(--bg-alt); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
}
.turnbanner { font-weight: 700; color: var(--gold-bright); }

.layout {
  display: grid; grid-template-columns: 260px 1fr 300px; gap: 20px;
  padding: 20px 28px; align-items: start;
  /* --dock-h wird per JS (setupDockHeightTracking in client.js) auf die
     tatsaechliche Hoehe von #bottomDock gesetzt, damit das Spielfeld beim
     Runterscrollen nie unter der fixierten Leiste verschwindet - der
     400px-Wert ist nur ein Fallback, bis JS geladen/gemessen hat. */
  padding-bottom: var(--dock-h, 400px);
  max-width: 1900px; margin: 0 auto;
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px 1fr; }
  .logpane { grid-column: 1 / -1; order: 3; position: static; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 14px; padding-bottom: var(--dock-h, 460px); }
  .sidebar, .logpane { order: 2; position: static; }
}

.sidebar, .logpane { position: sticky; top: 70px; }
.logfeed { max-height: 60vh; overflow-y: auto; font-size: 0.82em; color: var(--text-dim); display: flex; flex-direction: column; }
.logline {
  padding: 8px 4px; line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.logline:last-child { border-bottom: none; }
.logline-latest {
  color: var(--text); font-weight: 600;
  background: rgba(224,122,63,0.12);
  border-bottom-color: rgba(224,122,63,0.25);
  border-radius: 6px; padding-left: 9px;
  border-left: 3px solid var(--door);
}
.logcardlink {
  color: var(--door-bright); text-decoration: none; font-weight: 600; cursor: pointer;
}
.logcardlink:hover { text-decoration: underline; }

/* Kein festes min-height mehr: wenn gerade nur Zug-Aktionen + "Meine Figur"
   sichtbar sind (kein Kampf/Aufdecken/Konsequenz), blieb sonst eine grosse,
   funktionslose Leerflaeche zwischen den Ausruestungs-Slots und der
   Handkarten-Leiste stehen. Der Inhalt bestimmt jetzt selbst seine Hoehe;
   .layout hat ohnehin schon padding-bottom fuer die fixierte Handleiste. */
.table { min-height: 0; }

/* Die Haupt-Zugaktion (Tuer eintreten, Raum pluendern, Zug beenden, ...) ist
   der wichtigste Knopf auf dem Bildschirm, wenn man am Zug ist - deshalb
   deutlich groesser als normale Knoepfe, mittig in der freien Flaeche, und
   mit einem dezenten Puls, der die Aufmerksamkeit dorthin lenkt, ohne zu
   nerven (pausiert bei Hover, respektiert prefers-reduced-motion). */
#phaseActions { justify-content: center; padding: 28px 0; }
#phaseActions button.phase-btn {
  font-size: 1.35em; padding: 20px 38px; border-radius: 18px;
  box-shadow: 0 10px 28px rgba(224,122,63,0.4);
  animation: phasePulse 2.4s ease-in-out infinite;
}
#phaseActions button.phase-btn:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.03); }
@keyframes phasePulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(224,122,63,0.4); transform: scale(1); }
  50% { box-shadow: 0 14px 38px rgba(224,122,63,0.62); transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  #phaseActions button.phase-btn { animation: none; }
}
@media (max-width: 640px) {
  #phaseActions button.phase-btn { font-size: 1.1em; padding: 16px 28px; }
}

.tradebox {
  background: var(--panel); border: 1px solid var(--gold); border-radius: var(--radius); padding: 16px 18px;
  margin-bottom: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.tradebox h3 { color: var(--gold-bright); }
.tradegrid { max-height: 220px; overflow-y: auto; padding: 2px; }
.tradepick {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px 5px 8px; font-size: 0.85em; cursor: pointer;
}
.tradepick input { width: auto; }
.tradepick.picked { border-color: var(--gold); background: rgba(244,201,93,0.14); color: var(--gold-bright); }
.banner {
  background: linear-gradient(135deg, var(--gold), #d9a53a); color: #241a05;
  padding: 12px 16px; border-radius: var(--radius); font-weight: 700; margin-bottom: 12px;
}

.cardgrid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px 0; }

/* -------- Karten-Kacheln: helles Pergament-Kartengesicht (images/_card-bg.webp)
   als Basis, darauf setzt das Spiel Bild + Name + Werte zusammen - keine
   fertig gebackenen Kartenbilder, sondern echte HTML/CSS-Komposition. -------- */
.cardtile {
  width: 148px; border-radius: 12px; cursor: pointer; overflow: hidden; position: relative;
  background: var(--card-face) url('images/_card-bg.webp') center / cover no-repeat;
  border: 1px solid rgba(59,47,28,0.35); border-left: 5px solid var(--tile-accent, var(--border));
  box-shadow: 0 3px 10px rgba(0,0,0,0.35); color: var(--ink); font-size: 0.78em;
  display: flex; flex-direction: column;
}
.cardtile.slim { width: 128px; }
.cardtile .ctimgwrap { position: relative; width: 100%; height: 118px; background: transparent; overflow: hidden; flex-shrink: 0; margin: 6px 6px 0; border-radius: 8px; width: calc(100% - 12px); }
.cardtile .ctimg { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cardtile .ctimgwrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(59,47,28,0) 70%, rgba(59,47,28,0.18) 100%);
}
.cardtile .cttype {
  position: absolute; top: 9px; right: 9px; z-index: 1; font-size: 0.68em; padding: 1px 7px;
  border-radius: 999px; background: var(--tile-accent, rgba(59,47,28,0.7)); color: white;
  text-transform: uppercase; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.cardtile.noimg .cttype { position: static; align-self: flex-start; margin: 8px 8px 0; }
/* Untot-Abzeichen (siehe renderCombat/cardTile): oben links, damit es sich
   nicht mit dem Kategorie-Etikett (.cttype, oben rechts) beisst. */
.undead-badge {
  position: absolute; top: 9px; left: 9px; z-index: 1; font-size: 0.68em; padding: 1px 7px;
  border-radius: 999px; background: rgba(94, 30, 30, 0.85); color: white;
  text-transform: uppercase; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.cardtile.noimg .undead-badge { position: static; align-self: flex-start; margin: 8px 8px 0; display: inline-block; }
.cardtile .ctbody { padding: 6px 10px 9px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
/* Kartennamen sind sehr unterschiedlich lang (Rekord im Datensatz: "DING MIT
   EINEM ÜBERLANGEN NAMEN, DESSEN BILD NICHT AUF DIE KARTE PASST", 70 Zeichen).
   Ohne Begrenzung zog so ein Name die Kachel in die Hoehe und - weil .cardgrid
   ein flex-wrap-Container ist - gleich die ganze Zeile mit: das Layout sprang
   bei jedem Neuaufbau. Deshalb: hoechstens zwei Zeilen, danach Ellipse, und
   per min-height sind auch Kacheln mit einzeiligem Namen exakt gleich hoch.
   Der volle Name bleibt im Karten-Modal (Klick auf die Kachel) und im
   title-Tooltip lesbar. overflow-wrap: anywhere bricht zusaetzlich
   Einzelwoerter um, die breiter als die Kachel sind. */
.cardtile .ctname {
  font-weight: 700; line-height: 1.15; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; min-height: 2.3em;
}
.cardtile .ctmeta { color: var(--ink-dim); font-size: 0.9em; }

.cat-monster { --tile-accent: var(--c-monster); }
.cat-curse { --tile-accent: var(--c-curse); }
.cat-race { --tile-accent: var(--c-race); }
.cat-class { --tile-accent: var(--c-class); }
.cat-item { --tile-accent: var(--c-item); }
.cat-treasure_other { --tile-accent: var(--c-treasure_other); }
.cat-door_other { --tile-accent: var(--c-door_other); }

/* "Meine Figur" laut Screenshot-Markierung (blaues Rechteck) NICHT in der
   Spielfeld-Spalte, sondern als eigene, volle Bildschirmbreite einnehmende
   Leiste direkt UEBER der Handkarten-Leiste - und wie diese dauerhaft
   fixiert ("soll immer im Vordergrund bleiben"), damit die eigene Figur
   auch waehrend eines langen Kampfs/Aufdeckens sichtbar bleibt, ohne separat
   sticky positioniert werden zu muessen. Beides zusammen steckt im
   gemeinsamen Flex-Dock #bottomDock (siehe dort), das die eigentliche
   Fixierung uebernimmt - .mypanel.floating selbst ist nur noch ein normales
   Flex-Kind darin. */
#bottomDock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-direction: column;
}
.mypanel.floating {
  background: var(--panel); border-top: 1px solid var(--border);
  border-radius: 0; margin: 0; max-width: none; padding: 10px 24px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.3);
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
}
.mypanel.floating h3 { margin: 0; text-align: left; white-space: nowrap; font-size: 1em; flex-shrink: 0; }
.mypanel.floating .mypanel-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
}
.mypanel.floating #myBadges { flex-shrink: 0; }
.mypanel.floating .row.gap.wrap { justify-content: flex-start; }
/* Anhaltende Flueche (siehe curseTags/#myCurses): eigene, volle Zeile unter
   dem Titel/Rasse/Klasse-Kopf statt mit ihm zu verschmelzen - vorher liefen
   teils satzlange Fluch-Hinweise mit der Stufe/Klasse in einer
   flex-wrap-Zeile durcheinander und liefen optisch aus dem Panel heraus.
   Der rote Ton markiert die Zeile klar als Warnung. */
.mypanel.floating .curses-row {
  flex-basis: 100%; align-items: center;
  background: rgba(217, 83, 79, 0.16); border: 1px solid rgba(217, 83, 79, 0.4);
  border-radius: 8px; padding: 6px 10px; margin-top: 2px;
}
.mypanel.floating .curses-row .hint { color: var(--text); font-size: 0.88em; }
/* Die Ausruestungs-Slots duerfen (anders als Titel/Abzeichen) nie umbrechen -
   sonst waechst die Leiste bei 6 Slots + langen Kartennamen unkontrolliert in
   die Hoehe. Stattdessen scrollt diese eine Reihe bei Bedarf seitlich, die
   Leistenhoehe bleibt so immer vorhersehbar (wichtig, weil #layout dafuer
   unten feststehenden Platz reserviert, siehe padding-bottom). */
#myEquip { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; justify-content: center; }
/* Ein-/Ausklapp-Knopf für die Ausrüstungsslots: eingeklappt bleiben nur Stufe,
   Kampfwert und Rasse/Klasse sichtbar (.mypanel-head) - praktisch, wenn
   gerade nur die Handkarten/Zugaktionen wichtig sind und die Leiste möglichst
   wenig Platz beanspruchen soll. Der Zustand wird pro Gerät gemerkt. */
.mypanel-toggle { margin-left: auto; flex-shrink: 0; font-size: 1.1em; padding: 4px 10px; }
.mypanel.floating.collapsed #myEquip { display: none; }
.mypanel.floating.collapsed .mypanel-toggle { transform: rotate(-90deg); }
@media (max-width: 900px) {
  /* Auf schmalen Screens reicht die Breite nicht fuer eine Zeile - Titel und
     Abzeichen duerfen dann umbrechen, die Ausruestungsreihe bekommt ihre
     eigene volle Zeile (bleibt aber weiterhin seitlich scrollbar). */
  .mypanel.floating { padding: 10px 14px; gap: 8px 16px; }
  #myEquip { flex-basis: 100%; }
}

/* -------- Handkarten-Leiste (unten fixiert, wie bei Wizard) -------- */
/* max-height + überall überlaufsicher (overflow-y: auto statt hidden) -
   Munchkin-Karten haben (anders als Wizards reine Bildkarten) unterschiedlich
   viel Inhalt (Bild+Name+Meta+Aktionsknöpfe), darum werden sie zusätzlich per
   clamp() an die Fensterhöhe angepasst, damit auf niedrigen/kleinen Screens
   nichts mehr aus der Leiste rausklippt - im äußersten Fall bleibt die Hand
   selbst vertikal scrollbar statt Inhalte unsichtbar abzuschneiden.
   Die Fixierung am Bildschirmrand uebernimmt jetzt #bottomDock (der
   gemeinsame Container mit "Meine Figur" darueber) - hier nur noch der
   optische Rest (Hintergrund, Rahmen, Schatten, max-Hoehe). */
.hand-bar {
  background: var(--bg-alt); border-top: 1px solid var(--border);
  padding: 10px 16px 14px; box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  max-height: 46vh; display: flex; flex-direction: column;
}
.hand-bar-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
/* Handkraefte, die nicht an eine einzelne Karte gebunden sind (z.B. PRIESTER
   "Auferstehung"): eigene Leiste ÜBER den Kartenkacheln statt einer Kachel
   dazwischen - sonst wirkt der Button wie eine kaputte/zu kleine Karte neben
   den echten Kacheln. Gold-Akzent wie .banner, damit klar ist: hier ist
   gerade eine Sonderkraft nutzbar, unabhaengig von der Hand darunter. */
.hand-powers {
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
  background: rgba(244, 201, 93, 0.1); border: 1px solid var(--gold);
  border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
}
.hand-powers button { width: 100%; justify-content: flex-start; text-align: left; }
.hand-bar-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.hand-list {
  /* align-items: stretch (statt flex-start): die Karten haben je nach Typ
     unterschiedlich viele Aktionsknöpfe (Ablegen, Anlegen, Sonderkraft
     nutzen, Fluch spielen gegen..., Verkaufs-Checkbox, ...) - mit flex-start
     ragten Karten mit mehr Knöpfen unten heraus und die Handreihe wirkte
     uneinheitlich hoch. Mit stretch bekommen alle Karten in der Reihe
     dieselbe Höhe (die der höchsten Karte), der Rest der Kachel (.ctbody hat
     flex:1) füllt den Freiraum einfach nach unten auf. */
  display: flex; align-items: stretch; gap: 12px; overflow-x: auto; overflow-y: auto; padding: 6px 4px 8px;
  justify-content: safe center; scrollbar-width: thin; flex: 1 1 auto; min-height: 0;
}
.hand-list .cardtile {
  width: clamp(122px, 17vw, 190px); flex-shrink: 0; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.hand-list .cardtile:hover { transform: translateY(-6px); box-shadow: 0 10px 26px rgba(0,0,0,0.5); }
.hand-list .cardtile .ctimgwrap { height: clamp(88px, 15vh, 150px); }
.hand-list .cardtile .ctbody { gap: 4px; font-size: 0.94em; }
@media (max-width: 640px) {
  .hand-list .cardtile { width: clamp(112px, 34vw, 148px); }
  .hand-list .cardtile .ctimgwrap { height: clamp(78px, 13vh, 116px); }
}

.combatbox, .consequencebox, .revealbox {
  background: var(--panel); border: 1px solid var(--door); border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.combatbox h3, .consequencebox h3, .revealbox h3 { color: var(--door-bright); }
.autoconsequence { background: rgba(52, 199, 89, 0.12); border: 1px solid rgba(52, 199, 89, 0.4); border-radius: 8px; padding: 8px 12px; }
.strengthrow { display: flex; gap: 24px; align-items: center; font-size: 1.15em; margin: 10px 0; }
.strengthrow .vs { color: var(--text-dim); }
.strengthbad { color: var(--danger); font-weight: 700; }
.strengthgood { color: var(--success); font-weight: 700; }

.modal {
  position: fixed; inset: 0; background: rgba(6, 8, 5, 0.75); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px;
}
.modalbox {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; max-width: 520px; width: 100%; max-height: 86vh; overflow: auto;
}
.modalbox .modalimg { width: 100%; max-width: 260px; display: block; margin: 0 auto 14px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }

.equipslot {
  background: var(--bg-alt); border: 1px dashed var(--border); border-radius: 10px;
  padding: 6px 10px; font-size: 0.8em; min-width: 108px; width: 108px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  /* Leer und belegt sollen gleich gross wirken - sonst "springt" die Reihe je
     nachdem, ob gerade Bild+Name+Ablegen-Knopf drinstehen oder nur "leer".
     min-height statt height: ein sehr langer Kartenname darf die Kachel noch
     wachsen lassen, schrumpft sie aber nie unter diese gemeinsame Basisgroesse. */
  min-height: 128px;
}
.equipslot.filled { border-style: solid; border-color: var(--gold); }
.equipslot .eqimg { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Getragene Karten sind anklickbar (Grossansicht) - der Ablegen-Knopf darin
   bleibt ein eigener Klick, siehe stopPropagation im Client. */
.equipslot.clickable { cursor: pointer; transition: border-color 0.12s ease; }
.equipslot.clickable:hover { border-color: var(--door-bright); }

select { background: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 7px; }

@media (max-width: 640px) {
  .cardtile { width: 128px; }
  .cardtile .ctimgwrap { height: 100px; }
}

/* -------- Aufdeck-Animation beim Tür eintreten: die gezogene Karte dreht
   sich einmal groß in die Bildmitte und verschwindet wieder. Reine
   Deko-Ebene (pointer-events: none), das Spiel ist währenddessen normal
   bedienbar. -------- */
.reveal-anim {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.reveal-anim .cardtile { width: 230px; font-size: 1.05em; cursor: default; }
.reveal-anim .cardtile .ctimgwrap { height: 190px; }
/* Hier ist Platz genug: die grosse Aufdeck-Karte darf den Namen ueber vier
   Zeilen zeigen, statt ihn wie in der kleinen Kachel nach zwei zu kuerzen. */
.reveal-anim .cardtile .ctname { -webkit-line-clamp: 4; line-clamp: 4; }
.reveal-anim.play { animation: revealGlow 1.5s ease-out forwards; }
.reveal-anim.play .cardtile { animation: revealFlip 1.5s ease-out forwards; }

@keyframes revealGlow {
  0%, 75% { background: radial-gradient(closest-side, rgba(224,122,63,0.22), rgba(6,8,5,0.55) 70%, rgba(6,8,5,0) 100%); }
  100% { background: rgba(6,8,5,0); }
}
@keyframes revealFlip {
  0%   { transform: perspective(900px) rotateY(-95deg) scale(0.65); opacity: 0; }
  35%  { transform: perspective(900px) rotateY(0deg) scale(1.1); opacity: 1; }
  75%  { transform: perspective(900px) rotateY(0deg) scale(1.1); opacity: 1; }
  100% { transform: perspective(900px) rotateY(0deg) scale(0.8) translateY(-36px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-anim.play, .reveal-anim.play .cardtile { animation: revealFadeOnly 1.5s ease-out forwards; }
  @keyframes revealFadeOnly { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
}

/* -------- Wuerfel-Animation beim Weglaufen: der Wuerfel rollt kurz und
   bleibt dann sichtbar auf dem echten Ergebnis stehen. Wie .reveal-anim eine
   reine Deko-Ebene (pointer-events: none). Alle am Tisch sehen sie, deshalb
   steht der Name der wuerfelnden Person darueber. -------- */
.die-anim {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.die-box {
  background: rgba(6, 8, 5, 0.92); border: 2px solid var(--gold); border-radius: var(--radius);
  padding: 18px 32px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.die-who { color: var(--text-dim); font-size: 0.95em; margin-bottom: 6px; }

/* -------- Gespielte Kampfkarte: dieselbe Buehne wie beim Aufdecken
   (.reveal-anim), aber mit Namenszeile darueber - alle am Tisch sollen sehen,
   WER die Karte spielt. Ebenfalls reine Deko (pointer-events: none). -------- */
.cardplay-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cardplay-who {
  background: rgba(6, 8, 5, 0.92); border: 2px solid var(--gold); border-radius: var(--radius);
  padding: 6px 16px; color: var(--text); font-weight: 700; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.cardplay-note { color: var(--text-dim); font-size: 0.95em; }

/* -------- Aktivierte Sonderkraft: dieselbe Buehne wie .cardplay-box, aber
   mit "glaenzendem" Spezialeffekt (goldener Rahmen + diagonaler Lichtstreif,
   der einmal ueber die Karte laeuft) statt der schlichten Anzeige - macht
   sichtbar, DASS gerade eine Sonderkraft (kein reiner Kampfkarten-Einsatz)
   ausgeloest wurde. -------- */
.cardplay-box.shiny .cardplay-who {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 18px rgba(244, 201, 93, 0.55);
}
.shiny-card {
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 2px var(--gold), 0 0 28px 6px rgba(244, 201, 93, 0.65);
  animation: shinyPulse 1.8s ease-in-out infinite;
}
.shiny-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.75) 48%, rgba(244,201,93,0.85) 52%, transparent 70%);
  background-size: 250% 250%;
  animation: shinySweep 1.8s ease-in-out infinite;
}
@keyframes shinyPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px 4px rgba(244, 201, 93, 0.55); }
  50% { box-shadow: 0 0 0 2px var(--gold), 0 0 34px 10px rgba(244, 201, 93, 0.85); }
}
@keyframes shinySweep {
  0% { background-position: 140% 0%; }
  100% { background-position: -40% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .shiny-card, .shiny-card::after { animation: none; }
}
.die-face { font-size: 5em; line-height: 1.05; color: var(--text); }
.die-sum { font-size: 1.3em; font-weight: 700; color: var(--gold); margin-top: 4px; }
.die-result { font-size: 1.15em; font-weight: 700; margin-top: 6px; }
.die-result.good { color: var(--success); }
.die-result.bad { color: var(--danger); }

.die-anim.play { animation: dieFade 2.6s ease-out forwards; }
.die-anim.play .die-face { animation: dieShake 0.9s linear; }
.die-anim.play .die-sum, .die-anim.play .die-result { animation: dieResultIn 0.45s ease-out 0.9s backwards; }

@keyframes dieFade {
  0% { opacity: 0; }
  6%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dieShake {
  0%   { transform: rotate(-18deg) scale(0.85); }
  25%  { transform: rotate(16deg) scale(1.1); }
  50%  { transform: rotate(-12deg) scale(0.95); }
  75%  { transform: rotate(10deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes dieResultIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Rollen, kein Wackeln - das Ergebnis wird einfach eingeblendet. */
  .die-anim.play .die-face, .die-anim.play .die-sum, .die-anim.play .die-result { animation: none; }
}

/* -------- Beute-Animation nach einem Kampfsieg: die gezogenen Schatzkarten
   fliegen nacheinander ein. Sieht nur die/der Siegende (die Karten sind
   Handkarten und damit geheim). Wie die anderen Animationen eine reine
   Deko-Ebene mit pointer-events: none. -------- */
.reward-anim {
  position: fixed; inset: 0; z-index: 150; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.reward-box {
  background: rgba(6, 8, 5, 0.93); border: 2px solid var(--gold); border-radius: var(--radius);
  padding: 20px 28px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  max-width: 100%; max-height: 100%; overflow: hidden;
}
.reward-head { color: var(--text-dim); font-size: 0.95em; }
.reward-level { color: var(--gold-bright); font-size: 2.1em; font-weight: 800; line-height: 1.2; }
.reward-label { color: var(--text); font-size: 0.95em; margin: 6px 0 10px; }
.reward-cards { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.reward-cards .cardtile { cursor: default; }

.reward-anim.play { animation: rewardFade 3.4s ease-out forwards; }
/* Beute fliegt in die Hand: Rahmen und Texte verblassen, die Karten ziehen
   per Inline-transform (siehe flyRewardCardsToHand) zur Handleiste. */
.reward-anim.fly { animation-duration: 2.4s; }
.reward-anim.fly .reward-box {
  background: transparent; border-color: transparent; box-shadow: none;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.reward-anim.fly .reward-head, .reward-anim.fly .reward-level, .reward-anim.fly .reward-label {
  opacity: 0; transition: opacity 0.35s ease;
}
.reward-anim.play .reward-level { animation: rewardPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) backwards; }
.reward-anim.play .cardtile { animation: rewardCardIn 0.5s ease-out backwards; }

@keyframes rewardFade {
  0% { opacity: 0; }
  5%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rewardPop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes rewardCardIn {
  from { transform: translateY(26px) rotate(-6deg) scale(0.8); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Einfliegen - Beute wird einfach angezeigt. */
  .reward-anim.play .reward-level, .reward-anim.play .cardtile { animation: none; }
}

/* Begründung des Weglaufen-Modifikators unter dem Würfelergebnis. */
.die-note { color: var(--text-dim); font-size: 0.85em; margin-top: 8px; max-width: 260px; }

/* Bereit-Check vor der Kampfauswertung. */
.readyrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.readytag { font-size: 0.85em; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.readytag.yes { color: var(--success); border-color: rgba(62, 207, 142, 0.5); }
.readytag.no { color: var(--text-dim); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* -------- Schiebeschalter (Handkarten sortieren). Bewusst mit einer echten
   Checkbox darunter statt mit einem <button>: nur optisch versteckt, nicht
   per display:none - so bleiben Tastaturbedienung und Screenreader
   unverändert, und die Beschriftung schaltet durch das umschließende
   <label> ebenfalls. -------- */
.switch {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; cursor: pointer;
  font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.06em; user-select: none; white-space: nowrap;
}
.switch:hover { color: var(--text); }
.switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
  pointer-events: none;
}
.switch-track {
  position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-dim); box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: transform 0.18s ease, background 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--door); border-color: var(--door-bright); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(18px); background: #fff; }
.switch input:checked ~ .switch-text,
.switch:has(input:checked) .switch-text { color: var(--door-bright); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--door-bright); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-knob { transition: none; }
}

/* Verkaufen sitzt unter den Karten rechts, damit oben rechts der Schalter
   allein steht. */
.hand-bar-bottom { display: flex; justify-content: flex-end; flex-shrink: 0; margin-top: 8px; }

/* --- Regeln, Einladungslink --- */
.rules-box { max-width: 640px; }
.rules-text h3 { color: var(--gold-bright, #f4d27a); margin-top: 16px; }
.rules-text p { line-height: 1.5; }
#btnShareLink { margin-top: 6px; }