/* Stammtisch – Grundstil der Plattform (Handy zuerst).
   Spielspezifische Optik kommt später aus den Themen-Sets. */
:root {
  --grund: #15110f;
  --flaeche: #211a16;
  --flaeche-hoch: #2b221d;
  --rand: #3d3029;
  --text: #f3ebe0;
  --text-leise: #b9ab98;
  --akzent: #e0a33a;
  --akzent-dunkel: #b57d1f;
  --auf-akzent: #1a120a;
  --gut: #7cc242;
  --warnung: #e8875f;
  --radius: 14px;
  --abstand: 16px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.45 var(--schrift);
  overflow-x: hidden;
}

/* Lichtkegel der Stammtisch-Lampe */
.lampe {
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(224, 163, 58, 0.22), rgba(224, 163, 58, 0.06) 55%, transparent 75%);
}

.lobby {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) var(--abstand) calc(env(safe-area-inset-bottom) + 24px);
}

.kopf { text-align: center; padding: 4px 0 8px; }
.kopf-zeile { display: flex; justify-content: space-between; align-items: center; min-height: 28px; }
.kopf h1 {
  margin: 18px 0 4px;
  font: 700 2.6rem/1.1 var(--schrift-titel);
  letter-spacing: 0.01em;
  color: var(--akzent);
  text-shadow: 0 2px 18px rgba(224, 163, 58, 0.35);
}
.untertitel { margin: 0; color: var(--text-leise); }

.umgebung {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: #4a2a5a;
  color: #f0dcff;
}
.verbindung {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-leise);
}
.verbindung .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text-leise); }
.verbindung[data-zustand="verbunden"] .punkt { background: var(--gut); box-shadow: 0 0 8px var(--gut); }
.verbindung[data-zustand="getrennt"] .punkt { background: var(--warnung); }

.block { margin-top: 22px; }
h2 {
  margin: 0 0 10px;
  font: 700 1.15rem/1.3 var(--schrift-titel);
  color: var(--text);
}
.feld-label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--text-leise); font-size: 0.95rem; }

.eingabe {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.eingabe::placeholder { color: #7d7064; }
.eingabe:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.eingabe-code { text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; }

.name-zeile { position: relative; }
.gemerkt {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 0.8rem; color: var(--gut);
}

.knopf {
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: 0;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.knopf-haupt {
  width: 100%;
  min-height: 58px;
  font-size: 1.15rem;
  background: linear-gradient(180deg, var(--akzent), var(--akzent-dunkel));
  color: var(--auf-akzent);
  box-shadow: 0 6px 20px rgba(224, 163, 58, 0.25);
}
.knopf-haupt:active { transform: translateY(1px); }
.knopf-zweit { background: var(--flaeche-hoch); color: var(--text); border: 1px solid var(--rand); white-space: nowrap; }

.hinweis { margin: 8px 2px 0; font-size: 0.9rem; color: var(--text-leise); }
.code-zeile { display: flex; gap: 10px; }
.meldung { min-height: 1.4em; margin: 8px 2px 0; font-size: 0.92rem; color: var(--warnung); }

.tischliste, .spielliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leer {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  color: var(--text-leise);
  text-align: center;
}
.leer[hidden] { display: none; }

.spielkarte {
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--rand);
}
.spielkarte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.spielkarte h3 { margin: 0; font: 700 1.1rem/1.3 var(--schrift-titel); }
.spielkarte p { margin: 6px 0 10px; color: var(--text-leise); font-size: 0.95rem; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marke {
  font-size: 0.8rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--flaeche-hoch);
  border: 1px solid var(--rand);
  color: var(--text-leise);
}
.status { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--akzent); white-space: nowrap; }

.fuss { margin-top: 28px; text-align: center; font-size: 0.8rem; color: #7d7064; }

@media (min-width: 720px) {
  .kopf h1 { font-size: 3.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Etappe 3: Partie gegen Bots */
.knopf-fortsetzen {
  display: flex; align-items: center; justify-content: center; width: 100%;
  text-decoration: none; background: #3a2a4a; color: #f0dcff; border: 1px solid #5a4470;
}
.spielkarte .knopf-bots { margin-top: 12px; width: 100%; }
.blatt {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  border: 1px solid var(--rand); border-radius: 18px; padding: 20px 18px;
  background: var(--flaeche); color: var(--text);
}
.blatt::backdrop { background: rgba(8, 6, 5, 0.72); }
.blatt h2 { margin: 0 0 4px; }
.blatt-spiel { margin: 0 0 14px; color: var(--text-leise); }
.blatt-unter { margin: 18px 0 8px; font: 700 1rem/1.3 var(--schrift-titel); }
.blatt .feld-label { margin-top: 14px; }
.blatt select.eingabe { appearance: auto; }
.zaehler { display: flex; align-items: center; gap: 12px; }
.zaehler-knopf { width: 52px; font-size: 1.4rem; }
.zaehler-wert { min-width: 3ch; text-align: center; font: 700 1.6rem/1 var(--schrift-titel); color: var(--akzent); }
.einstellungen { display: grid; gap: 10px; }
.einstellung-schalter { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.einstellung-schalter input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--akzent); flex: none; }
.einstellung-schalter small { display: block; color: var(--text-leise); }
.blatt-knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.blatt-knoepfe .knopf { flex: 1; min-height: 52px; }
.blatt-knoepfe .knopf-haupt { width: auto; font-size: 1.05rem; }