/* Übernommen aus mocks/fire-alle-screens.html (Farben, Schrift, Abstände).
   Ergänzt nur, was die Mocks als Bild zeigen und hier bedienbar sein muss:
   Eingabefelder, Fehlerzeile, Teilnehmerliste. */
/* Space Grotesk, selbst ausgeliefert — kein Aufruf eines externen Dienstes (Lizenz: fonts/OFL.txt) */
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight:300 700;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#0a0908;overflow:hidden}
body{font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;color:#E9E2D8;
  display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
#buehne{flex:1;position:relative;overflow:hidden;background:#171310;width:100%;max-width:480px;margin:0 auto}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;
  padding:14px 20px calc(12px + env(safe-area-inset-bottom))}
.screen.an{display:flex}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none}
.eyebrow{font-size:10px;letter-spacing:.28em;color:#8C8073}
/* Kleiner und ruhiger als die Wortmarke darüber (z.B. „Spielcode eingeben“). */
.eyebrow.klein{font-size:8.5px;letter-spacing:.3em;color:#5E564B;text-transform:uppercase}
.unter{font-size:13px;color:#9A8E7E;line-height:1.55;margin-top:6px}
.mitte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:0}
.fuss{margin-top:auto;flex:none}
.knopf{width:100%;padding:14px;border-radius:999px;border:1px solid rgba(233,226,216,.18);
  background:transparent;color:#5E564B;font-family:inherit;font-size:12.5px;letter-spacing:.22em;cursor:pointer}
.knopf.bereit{background:#D9B36C;color:#171310;border-color:#D9B36C;font-weight:700}
.knopf.leise{color:#C9BEAE;margin-top:8px}
.knopf.warn{border-color:rgba(232,145,107,.6);color:#E8916B;margin-top:8px}
.knopf:disabled{opacity:.5;cursor:default}
.still{text-align:center;font-size:11px;color:#7A7062;margin-top:8px;line-height:1.5}
.raster{display:grid;gap:7px;margin-top:10px}
.r2{grid-template-columns:repeat(2,1fr)}
.chip{padding:11px 3px;border-radius:12px;text-align:center;font-size:14px;color:#C9BEAE;
  background:rgba(233,226,216,.045);border:1px solid rgba(233,226,216,.14);cursor:pointer;font-family:inherit}
.chip.an{background:#D9B36C;color:#171310;font-weight:700;border-color:#D9B36C}
.regie{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}
.rbox{padding:11px 13px;border-radius:12px;background:rgba(233,226,216,.035);
  border:1px solid rgba(233,226,216,.09);font-size:12.5px;line-height:1.5}
.rbox .lab{font-size:9.5px;letter-spacing:.24em;color:#8C8073;margin-bottom:5px}
.rbox.warn{border-color:rgba(232,145,107,.45)}
.rbox .gelb{color:#E8916B}

/* Eingabe — Optik wie das Namensfeld im Beitritts-Mock */
.feld{width:100%;max-width:270px;padding:12px;border-radius:12px;background:rgba(233,226,216,.05);
  border:1px solid rgba(233,226,216,.14);font-size:16px;color:#E9E2D8;font-family:inherit;text-align:center;outline:none}
.feld:focus{border-color:rgba(217,179,108,.6)}
.feld::placeholder{color:#5E564B}
.feld.code{font-size:38px;font-weight:700;letter-spacing:.2em;color:#D9B36C;background:transparent;border:none;
  border-bottom:1px solid rgba(217,179,108,.35);border-radius:0;padding:4px 0 8px;max-width:220px}
.code-gross{font-size:38px;font-weight:700;letter-spacing:.2em;color:#D9B36C}
.fehler{min-height:1.5em;font-size:12px;color:#E8916B;text-align:center}
.namen{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.namen span{padding:6px 11px;border-radius:999px;background:rgba(233,226,216,.05);
  border:1px solid rgba(233,226,216,.14);font-size:13px;color:#E9E2D8}
.namen .punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}
.namen .leer{color:#7A7062;font-size:12px;border:none;background:none;padding:6px 0}
.versteckt{display:none!important}

/* Runde, Schritte 1 und 2 — aus dem Mock übernommen */
.chip.voll{grid-column:1/-1}
.chip.weit{grid-column:1/-1;font-size:11.5px;letter-spacing:.16em;padding:10px}
.eigen{font-size:11.5px;color:#8C8073;text-align:center;margin-top:8px}
.eigen b{color:#E9E2D8;font-weight:600;font-size:14px}
.frage{text-align:center;font-size:17px;font-weight:500;margin-top:10px}
.zeile-stille{font-size:13px;color:#B8AC9C;text-align:center}
/* Echo (Auftrag 23): stille Zeile ohne Namen, z. B. „Dreimal dasselbe Wort: Wäsche" */
.echo{margin-top:14px}
.echo div{font-size:13px;color:#9A8E7E;text-align:center;line-height:1.55}

/* Die Bahn des Weges: eine Linie von Start- zu Zielwort, drei Stationen darauf
   (Nachbau des Canvas-Bildes aus Mock-Screen „Weg legen", mit echten Eingabefeldern). */
.weg-bahn{position:relative;justify-content:space-between;gap:0;padding:6px 0}
/* Die leuchtenden Anker über Start- und unter Zielwort (Zeichnung aus wegbild.js); die Linie
   verbindet ihre Mittelpunkte: Rand 6 px + halbe Ankerhöhe 22 px = 28 px. */
canvas.anker{width:44px;height:44px;flex:none;display:block}
/* Ruhiger Eingabe-Screen (Auftrag 29): eine durchgehende, zarte Linie in Bone von Start bis Ziel;
   Gold nur für das aktive Feld und den Knopf. */
.weg-bahn::before{content:"";position:absolute;left:50%;top:28px;bottom:28px;width:1px;
  background:rgba(233,226,216,.10);transform:translateX(-50%)}
.rahmenwort{position:relative;font-size:12px;font-weight:500;letter-spacing:.5em;padding-left:.5em;color:#E9E2D8;
  background:#171310;padding:4px 6px 4px calc(6px + .5em)}
/* Die Linie setzt nur hinter dem Text aus: eine Lücke so breit wie Wort bzw. Platzhalter plus
   wenig Luft (Breite und Höhe setzt runde.js). */
.luecke{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#171310;pointer-events:none}
.feld.station{position:relative;max-width:220px;background:transparent;border:none;border-radius:0;
  border-bottom:1px solid rgba(233,226,216,.14);font-size:19px;font-weight:600;padding:8px 4px;caret-color:#D9B36C}
.feld.station:focus{border-bottom:1.4px dashed rgba(217,179,108,.85)}
.feld.station::placeholder{color:rgba(233,226,216,.32);font-weight:400;font-size:15px}
.gelegt{position:relative;font-size:19px;font-weight:600;color:rgba(255,244,224,.98);padding:6px 16px;
  background:radial-gradient(ellipse,rgba(232,150,90,.32) 0,rgba(232,150,90,0) 70%),#171310}

/* Steuerleiste des mitspielenden Hosts (Stil aus dem Mock) */
#steuer{display:flex;align-items:center;gap:10px;padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  background:#0a0908;border-top:1px solid rgba(233,226,216,.08);width:100%;max-width:480px;margin:0 auto}
#steuer .lage{flex:1;font-size:9.5px;letter-spacing:.18em;line-height:1.6;color:#8C8073;white-space:nowrap}
#steuer button{padding:9px 14px;border-radius:999px;border:1px solid rgba(233,226,216,.16);background:transparent;
  color:#5E564B;font-family:inherit;font-size:10.5px;letter-spacing:.16em}
#steuer button.bereit{background:#D9B36C;color:#171310;border-color:#D9B36C;font-weight:700}

/* Regie: Namen mit Notbremse */
.fehlt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.fehlt button{padding:6px 10px;border-radius:10px;font-size:10px;letter-spacing:.12em;
  border:1px solid rgba(233,226,216,.14);color:#9A8E7E;background:transparent;font-family:inherit}
.fehlt button.sicher{border-color:rgba(232,145,107,.6);color:#E8916B}
.knopf.sicher{border-color:rgba(232,145,107,.6);color:#E8916B}
#steuer{flex-wrap:wrap}
#steuer button.leise{order:-1;flex-basis:100%;border:none;color:#7A7062;padding:2px 6px 4px;font-size:9.5px}
#notbremse{position:fixed;left:12px;right:12px;bottom:64px;max-width:456px;margin:0 auto;background:#171310;z-index:5}
/* Regie-Feld des mitspielenden Hosts (Auftrag 39): wie das Aussetzen-Feld, darüber kleine Knöpfe */
#steuer-feld{position:fixed;left:12px;right:12px;bottom:64px;max-width:456px;margin:0 auto;background:#171310;z-index:5}
#steuer button.klein{padding:9px 10px;font-size:9.5px}
/* Auftrag 39: kein Knopf bricht um — Knöpfe einzeilig und fest, nur die Lage links schrumpft */
#steuer button:not(.leise){white-space:nowrap;flex:none}
#steuer .lage{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Schritte 3–5 — aus dem Mock übernommen */
/* Wegbild (Auftrag 28): füllt den freien Platz des Screens statt klein oben zu sitzen */
canvas.weg{width:100%;flex:1 1 0;min-height:160px;display:block;margin:0 auto}
.feuer-nr{color:#D9B36C}
.name-hinweis{font-size:12px;color:#E8916B;margin-top:-6px}
.feld.abendplan{max-width:290px;resize:none;font:inherit;font-size:15px;line-height:1.5;text-align:left}
/* „Ein Wort." direkt unter dem Feld, ohne die Abstände der Bahn zu verschieben */
.station-feld{position:relative;width:100%;display:flex;justify-content:center}
.ein-wort{position:absolute;top:100%;left:0;right:0;margin-top:4px;font-size:12px;color:#E8916B;text-align:center}
canvas.voll{width:100%;height:100%;aspect-ratio:auto}
.woerter{font-size:20px;font-weight:700;text-align:center}
.woerter .p{color:#D9B36C;padding:0 6px;font-weight:400}
.kette{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px}
.kette .w{font-size:9px;letter-spacing:.18em;color:#7A7062}
.kette .s{width:13px;height:1px;background:rgba(217,179,108,.28)}
.kette .pkt{width:7px;height:7px;border-radius:50%;background:rgba(233,226,216,.14);border:1px solid rgba(233,226,216,.2)}
.kette .pkt.hier{background:#E8916B;border-color:#E8916B;box-shadow:0 0 10px rgba(232,145,107,.8)}
.r3{grid-template-columns:repeat(3,1fr)}
.chip.aus{opacity:.34}
.gross{font-size:24px;font-weight:700}
.gross .amp,.weg-zeile .amp{color:#E8916B;font-weight:400;padding:0 5px}
.liste{width:100%;display:flex;flex-direction:column;gap:9px}
.fz{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:13px;
  background:rgba(233,226,216,.035);border:1px solid rgba(233,226,216,.09)}
.fz canvas{flex:none;border-radius:50%}
.fz .txt{flex:1;text-align:left;min-width:0}
.fz .wo{font-size:14px;font-weight:600}
.fz .wo em{color:#D9B36C;font-style:normal;font-weight:400;padding:0 3px}
.fz .st{font-size:10.5px;color:#8C8073;margin-top:3px;line-height:1.4}
.fz .st.erk{color:#E8916B}
.ringe{display:flex;gap:4px;margin-top:4px}
.ringe i{width:6px;height:6px;border-radius:50%;border:1px solid rgba(233,226,216,.34);display:block}

/* Der Schluss — aus dem Mock übernommen */
.sammlung{display:flex;flex-wrap:wrap;gap:14px 16px;justify-content:center}
.fe{display:flex;flex-direction:column;align-items:center;gap:5px;width:82px}
.fe .nm{font-size:9.5px;color:#9A8E7E;text-align:center;line-height:1.3}
.erz{font-size:15px;line-height:1.62;text-align:left}
.erz .zit{color:#D9B36C}
.weg-zeile{padding:10px 13px;border-radius:12px;background:rgba(233,226,216,.035);border:1px solid rgba(233,226,216,.09);text-align:left}
.weg-zeile .rahmen{font-size:9.5px;letter-spacing:.22em;color:#8C8073}
.weg-zeile .ws{font-size:15px;font-weight:600;margin-top:4px}
.weg-zeile .ws em{color:#D9B36C;font-style:normal;font-weight:400;padding:0 4px}
#steuer button.bereit.warn{background:transparent;color:#E8916B;border-color:rgba(232,145,107,.5)}
/* Feuerfinale: die ganze Fläche, keine Ränder, keine Kopfleiste; nichts reagiert auf Tipps */
#s-finale.an{position:fixed;inset:0;z-index:40;background:#000;padding:0;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:none}
#h-dunkel.an{position:fixed;inset:0;z-index:40;background:#000;cursor:none}
#h-dunkel .knopf{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:auto;padding:10px 22px;
  background:transparent;color:#5a1a0c;border:1px solid #3a1208;font-size:11px;letter-spacing:.2em}
#steuer.ueber-finale{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#000;border-top-color:#1e0a05}
#steuer.ueber-finale .lage{color:#6b2410}
#steuer.ueber-finale button,#steuer.ueber-finale button.bereit,#steuer.ueber-finale button.bereit.warn{
  color:#8a2e12;border-color:#3a1208;background:transparent;font-weight:400}
/* QR-Code beim Raum eröffnen: dunkle Module auf Weiß mit Ruhezone, eingebettet in den dunklen
   Screen — groß genug, dass man ihn vom Tisch aus scannt. Das Siegel sitzt klein in der Mitte
   (höchste Fehlerkorrektur, gut 16 % der Breite). */
.qr-feld{position:relative;background:#fff;border-radius:14px;padding:6px;width:min(78vw,300px);
  aspect-ratio:1;flex:none;margin-bottom:10px}
.qr-feld svg{display:block;width:100%;height:100%}
.qr-siegel{position:absolute;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);
  border-radius:50%;box-shadow:0 0 0 4px #fff}

/* Impressum, Datenschutz: normale scrollbare Lesetextseite statt Bildschirm-Bühne */
html.recht,html.recht body{height:auto;overflow:auto}
.recht-seite{max-width:560px;margin:0 auto;padding:24px 20px calc(48px + env(safe-area-inset-bottom));
  font-size:15px;line-height:1.6;color:#C9BEAE}
.recht-seite h1{font-size:24px;color:#E9E2D8;margin:18px 0 10px}
.recht-seite h2{font-size:15px;color:#D9B36C;margin:24px 0 6px}
.recht-seite p{margin-top:8px}
.recht-seite a,.recht-links a{color:inherit;text-decoration:none}
.recht-zurueck{font-size:12px;letter-spacing:.22em;color:#8C8073}