/**
 * Was Düsterwald über den gemeinsamen Baukasten hinaus braucht.
 *
 * `styles.css` ist bewusst unverändert aus ASKademy/Onboarding übernommen – so
 * lässt es sich später noch abgleichen. Alles Spielspezifische steht hier.
 */

/* --- Mond als Wortmarke -------------------------------------------------- */

.mond {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fdf6d8, #e6d9a3 62%, #c9b982);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 14px rgba(230, 217, 163, .35);
}
.auth-brand .mond { width: 34px; height: 34px; }

/* --- Layout der Spielansicht --------------------------------------------- */

.spiel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.spiel-neben { position: sticky; top: 80px; }
.spiel-layout.ohne-chat { grid-template-columns: minmax(0, 1fr); }
.spiel-layout.ohne-chat .spiel-neben { display: none; }

@media (max-width: 1000px) {
  .spiel-layout { grid-template-columns: 1fr; }
  .spiel-neben { position: static; }
}

.gitter-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

/* --- Phasenkopf ---------------------------------------------------------- */

.phasen-kopf { border-left: 4px solid var(--brand); }
.phasen-kopf.ist-nacht {
  /* Nachts wird es dunkler – auch im hellen Design. Der Wechsel Nacht/Tag ist
     die wichtigste Information der Seite und soll ohne Lesen ankommen. */
  background: linear-gradient(135deg, #1b1830 0%, #232047 100%);
  color: #e8e6f5;
  border-left-color: #f2e9c4;
}
.phasen-kopf.ist-nacht .muted,
.phasen-kopf.ist-nacht .small { color: #b3aed4; }
.phasen-kopf.ist-tag { border-left-color: var(--warn); }

.pk-oben { display: flex; gap: 14px; align-items: flex-start; }
.pk-symbol {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
}
.phasen-kopf.ist-tag .pk-symbol {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
}
.pk-text { flex: 1; min-width: 0; }
.pk-text h1 { margin: 0 0 4px; font-size: 20px; }
.pk-text p { margin: 0; }
.pk-zahlen { text-align: right; flex: none; display: grid; gap: 2px; }

.warte {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .10);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.phasen-kopf.ist-tag .warte { background: var(--bg-accent); }

/* --- Die eigene Karte ---------------------------------------------------- */

.meine-karte { display: flex; gap: 16px; align-items: flex-start; }
.meine-karte h2 { margin: 2px 0 6px; }
.meine-karte p { margin: 0; }
.mk-symbol {
  width: 60px; height: 60px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card-2);
}
.meine-karte.t-woelfe {
  border-color: var(--bad-line);
  background: linear-gradient(180deg, var(--bad-soft), var(--card) 60%);
}
.meine-karte.t-woelfe .mk-symbol { color: var(--bad); border-color: var(--bad-line); }
.meine-karte.t-dorf .mk-symbol { color: var(--brand); border-color: var(--brand-line); }

/* --- Rollen-Chip --------------------------------------------------------- */

.rolle-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.rolle-chip svg { width: 14px; height: 14px; }
.rolle-chip.klein { font-size: 11.5px; padding: 2px 8px; }
.rolle-chip.t-woelfe { color: var(--bad-ink); border-color: var(--bad-line); background: var(--bad-soft); }
.rolle-chip.t-dorf { color: var(--brand); border-color: var(--brand-line); background: var(--brand-soft); }

/* --- Der Tisch ----------------------------------------------------------- */

.tisch {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.tisch-platz {
  position: relative;
  display: grid; gap: 5px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
  text-align: left;
  font: inherit;
  color: inherit;
}
.tisch-platz.ich { border-color: var(--brand-line); background: var(--brand-soft); }
.tisch-platz.tot { opacity: .6; }
.tisch-platz.waehlbar {
  cursor: pointer;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.tisch-platz.waehlbar:hover { border-color: var(--brand); transform: translateY(-1px); }
.tisch-platz.gewaehlt {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.tp-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tp-name svg { width: 13px; height: 13px; color: var(--muted); }
.tp-zeile { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; }
.tp-zeile .tot { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.tp-zeile .tot svg { width: 13px; height: 13px; }
.tp-stimmen {
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--warn-ink);
}
.tp-stimmen svg { width: 14px; height: 14px; }
.tisch-platz .icon-btn.winzig {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; min-width: 24px; min-height: 24px;
  opacity: 0; transition: opacity .16s var(--ease);
}
.tisch-platz:hover .icon-btn.winzig { opacity: .7; }
.tisch-platz .icon-btn.winzig:hover { opacity: 1; }

/* --- Aktionsbereiche ----------------------------------------------------- */

.aktion { border-left: 4px solid var(--brand); }
.aktion.woelfe { border-left-color: var(--bad); }
.aktion.seherin { border-left-color: #7c6ce0; }
.aktion.hexe { border-left-color: #1f9d55; }
.aktion.abstimmung { border-left-color: var(--warn); }
.aktion.amor { border-left-color: #d6336c; }
.aktion.beschuetzer { border-left-color: #2b8ac6; }
.aktion.jaeger { border-left-color: #b3271e; }
.aktion.schlaf, .aktion.tot-hinweis { border-left-color: var(--line); }
.aktion h2 { margin-top: 0; }
.aktion hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.aktion-fuss { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.tisch.auswahl { margin-top: 12px; }

/* Amor: die beiden Plätze des Paares, dazwischen ein Herz. */
.amor-stand {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 16px 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
}
.amor-stand svg { width: 22px; height: 22px; color: #d6336c; flex: none; }
.amor-platz {
  min-width: 110px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}
.amor-platz.voll { color: var(--ink); font-weight: 700; border-color: #d6336c; }

/* Das Liebesband an der eigenen Karte. */
.liebesband {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px !important;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: rgba(214, 51, 108, .10);
  border: 1px solid rgba(214, 51, 108, .30);
  font-size: 13.5px;
}
.liebesband svg { width: 15px; height: 15px; color: #d6336c; flex: none; }
.herz-marke { display: inline-flex; color: #d6336c; }
.herz-marke svg { width: 13px; height: 13px; }

.seher-buch { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.seher-buch h3 { margin: 0 0 8px; font-size: 14px; }
.seher-zeile {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.seher-zeile:last-child { border-bottom: none; }

/* --- Verlauf ------------------------------------------------------------- */

.chronik { display: grid; gap: 2px; }
.chronik-zeile {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.chronik-zeile:last-child { border-bottom: none; }
.chronik-marke {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-accent);
  color: var(--muted);
  font-size: 11.5px; font-weight: 700;
}
.chronik-zeile.a-morgen .chronik-marke,
.chronik-zeile.a-abstimmung .chronik-marke { background: var(--warn-soft); color: var(--warn-ink); }
.chronik-zeile.a-nacht_beginn .chronik-marke { background: #232047; color: #e8e6f5; }
.chronik-zeile.a-ende .chronik-marke { background: var(--ok-soft); color: var(--ok-ink); }
.chronik-zeile.geheim { color: var(--muted); font-style: italic; }
.chronik-zeile .pill.klein { margin-left: 7px; }

/* --- Ende ---------------------------------------------------------------- */

.ende-banner { display: flex; gap: 16px; align-items: center; border-left: 4px solid var(--line); }
.ende-banner h1 { margin: 0 0 3px; font-size: 22px; }
.ende-banner p { margin: 0; }
.ende-banner.dorf { border-left-color: var(--ok); background: linear-gradient(180deg, var(--ok-soft), var(--card) 65%); }
.ende-banner.woelfe { border-left-color: var(--bad); background: linear-gradient(180deg, var(--bad-soft), var(--card) 65%); }
.ende-banner.verliebte {
  border-left-color: #d6336c;
  background: linear-gradient(180deg, rgba(214, 51, 108, .12), var(--card) 65%);
}
.ende-banner.verliebte .eb-symbol { color: #d6336c; border-color: rgba(214, 51, 108, .35); }
.eb-symbol {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card-2);
}
.ende-banner.dorf .eb-symbol { color: var(--ok); border-color: var(--ok-line); }
.ende-banner.woelfe .eb-symbol { color: var(--bad); border-color: var(--bad-line); }

/* --- Chat ---------------------------------------------------------------- */

.chat-karte { display: flex; flex-direction: column; gap: 10px; }
.chat-karte h2 { margin: 0; }
.chat-reiter { display: flex; gap: 5px; flex-wrap: wrap; }
.chat-reiter-knopf {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.chat-reiter-knopf svg { width: 14px; height: 14px; }
.chat-reiter-knopf:hover { border-color: var(--brand); color: var(--brand); }
.chat-reiter-knopf.aktiv { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.chat-reiter-knopf.aktiv.k-woelfe { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); }
.chat-reiter-knopf.aktiv.k-friedhof { background: var(--bg-accent); border-color: var(--line); color: var(--ink); }
.chat-reiter-knopf.aktiv.k-verliebte {
  background: rgba(214, 51, 108, .12);
  border-color: rgba(214, 51, 108, .35);
  color: #d6336c;
}

.chat-verlauf {
  height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-accent);
}
.chat-zeile { max-width: 92%; }
.chat-zeile.ich { align-self: flex-end; text-align: right; }
.chat-kopf { display: flex; gap: 7px; align-items: baseline; font-size: 12px; }
.chat-zeile.ich .chat-kopf { justify-content: flex-end; }
.chat-text {
  margin-top: 2px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}
.chat-zeile.ich .chat-text { background: var(--brand-soft); border-color: var(--brand-line); }
.chat-fuss { display: flex; gap: 8px; align-items: flex-end; }
.chat-fuss textarea { flex: 1; resize: vertical; min-height: 44px; }
.chat-hinweis:empty { display: none; }

/* --- Rundenliste --------------------------------------------------------- */

.runden-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.runden-karte {
  display: grid; gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
  text-align: left; font: inherit; color: inherit;
  cursor: pointer;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.runden-karte:hover { border-color: var(--brand); transform: translateY(-1px); }
.runden-karte.offen { cursor: default; }
.runden-karte.offen:hover { transform: none; }
.runden-karte.laeuft { border-left: 3px solid var(--brand); }
.rk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.rk-zeilen { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.rk-zeilen span { display: inline-flex; align-items: center; gap: 4px; }
.rk-zeilen svg { width: 13px; height: 13px; }
.rk-fuss { margin: 0; }

.code-karte { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.code-gross {
  font-size: 30px; font-weight: 800; letter-spacing: 5px;
  color: var(--brand);
}

.zeile-form { display: flex; gap: 9px; align-items: stretch; margin: 12px 0; }
.zeile-form input { flex: 1; min-width: 0; }
.zeile-form input.gross { font-size: 18px; letter-spacing: 3px; text-transform: uppercase; }

.schalter-reihe { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.schalter { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.schalter input { margin-top: 3px; flex: none; }
.schalter.breit { padding: 10px 0; border-bottom: 1px solid var(--line); }
.schalter.breit:last-child { border-bottom: none; }
.schalter span span { display: block; }

/* --- Rollenverteilung im Warteraum --------------------------------------- */

.rollen-einstellung { display: grid; gap: 4px; }
.stufer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.stufer > div:first-child { display: flex; align-items: center; gap: 6px; }
.stufer svg { width: 17px; height: 17px; }
.stufer-knoepfe { display: flex; align-items: center; gap: 10px; }
.stufer-knoepfe .zahl { min-width: 28px; text-align: center; font-size: 18px; }
.verteilung { margin: 14px 0; }
.verteilung p { margin: 0 0 10px; }

/* Die mitrechnende Werwolf-Empfehlung unter dem Regler. */
.empfehlung {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0 13px;
  border-bottom: 1px solid var(--line);
}
.empfehlung:empty { display: none; }

.stufer > div:first-child b { display: inline-flex; align-items: center; }
.schalter b { display: inline-flex; align-items: center; gap: 6px; }
.schalter b svg { width: 15px; height: 15px; color: var(--muted); }

.aussteigen { margin-top: 6px; text-align: center; }

/* Bots sind eine Testhilfe – der Kasten soll erkennbar nicht zum Spiel gehören. */
.bot-kasten { border-left: 4px dashed var(--line); }
.bot-kasten .alert { margin-top: 12px; }

/* --- Regelseite ---------------------------------------------------------- */

.ablauf { display: grid; gap: 14px; }
.ablauf-schritt { display: flex; gap: 13px; align-items: flex-start; }
.ablauf-nr {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700; font-size: 13px;
}
.ablauf-schritt p { margin: 3px 0 0; }

.rollen-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.rollen-karte {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
}
.rollen-karte.t-woelfe { border-color: var(--bad-line); }
.rollen-karte h3 { margin: 10px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rollen-karte p { margin: 0 0 10px; }
.rk-symbol {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--brand);
}
.rollen-karte.t-woelfe .rk-symbol { color: var(--bad); border-color: var(--bad-line); }

.merkliste { margin: 0; }
.merkliste dt { font-weight: 700; margin-top: 14px; }
.merkliste dt:first-child { margin-top: 0; }
.merkliste dd { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.liste-schlicht { margin: 10px 0 0; padding-left: 20px; }
.liste-schlicht li { margin-bottom: 7px; }

/* --- Kennzahlen und Tabellen --------------------------------------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.kennzahl {
  display: grid; gap: 2px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card-2);
}
.kennzahl b { font-size: 25px; line-height: 1.1; }
.kennzahl span { font-size: 12.5px; color: var(--muted); }

.rollen-bilanz { display: grid; gap: 10px; margin-top: 10px; }
.rollen-bilanz-zeile {
  display: grid;
  grid-template-columns: 160px 1fr 120px;
  gap: 12px; align-items: center;
}
.rollen-bilanz-zeile .rb-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rollen-bilanz-zeile svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .rollen-bilanz-zeile { grid-template-columns: 1fr; gap: 4px; }
}

.tabelle-huelle { overflow-x: auto; margin-top: 12px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th, .tabelle td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.tabelle th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); font-weight: 700;
  background: var(--bg-accent);
}
.tabelle tbody tr:hover { background: var(--bg-accent); }
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.hervor { background: var(--brand-soft); }

.karten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.karten-kopf h2 { margin: 0; }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-klein { font-size: 12.5px; padding: 6px 11px; border-radius: var(--radius-sm); }
.pill.klein { font-size: 11px; padding: 1px 7px; }

/* --- Reiter der Verwaltung ----------------------------------------------- */

.reiter { display: flex; gap: 5px; flex-wrap: wrap; margin: 14px 0 18px; }
.reiter-knopf {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.reiter-knopf:hover { border-color: var(--brand); color: var(--brand); }
.reiter-knopf.aktiv { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* --- Fingerbedienung ------------------------------------------------------ */

@media (pointer: coarse), (max-width: 700px) {
  /* Zielgrößen wie im Onboarding: unter 44px muss man am Handy zielen. */
  .btn-klein { min-height: 40px; }
  .chat-reiter-knopf, .reiter-knopf { min-height: 40px; }
  .tisch-platz.waehlbar { min-height: 60px; }
  /* Der Herausnehmen-Knopf hat keinen Mauszeiger, der ihn einblenden könnte. */
  .tisch-platz .icon-btn.winzig { opacity: .7; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  /* Die Hauptnavigation kommt aus dem gemeinsamen Baukasten mit 35px. Am Handy
     ist sie der meistgenutzte Weg durch die Anwendung – das ist zu knapp. */
  .topnav a { min-height: 40px; display: inline-flex; align-items: center; }
  .chat-verlauf { height: 260px; }
  .code-gross { font-size: 26px; letter-spacing: 4px; }
}