/* Die Bühne des Fantasy Board.
 *
 * Die Datei gehört zum Board-Paket, die Seite drumherum ist eine gewöhnliche
 * Next-Seite der Website (`web/app/board/page.tsx`). Deshalb steht hier kein
 * Reset, keine Schrifteinbindung und keine Regel ohne `.board-stage`: alles
 * darunter gehört der Bühne, alles darüber der Website. Was hier global
 * stünde, fiele der Navigation und der Fußzeile in den Rücken.
 */

/* Die Palette kommt aus `web/app/globals.css`, der einzigen Token-Quelle des
   Monorepos: die Seite liefert sie als `--color-*` aus, hier bekommen sie nur
   die kurzen Namen, unter denen die Bühne sie kennt. Eigene Farbwerte stehen
   allein für das eine dunkle Möbel im Raum. */
.board-stage {
  --surface: var(--color-surface); --surface-muted: var(--color-surface-muted); --surface-sunken: var(--color-surface-sunken);
  --ink: var(--color-ink); --ink-muted: var(--color-ink-muted); --ink-subtle: var(--color-ink-subtle);
  --brand: var(--color-brand); --brand-light: var(--color-brand-light); --brand-dark: var(--color-brand-dark);
  --anchor: var(--color-anchor); --anchor-light: var(--color-anchor-light); --anchor-dark: var(--color-anchor-dark);
  --border: var(--color-border); --border-strong: var(--color-border-strong); --ok: var(--color-success);
  --brand-tint: color-mix(in oklab, var(--brand) 12%, var(--surface));
  --anchor-tint: color-mix(in oklab, var(--anchor) 12%, var(--surface));

  /* Der Tisch: dunkles, warmes Holz, das einzige schwere Möbelstück im Raum. */
  --wood-hi: #4A4137; --wood: #2A241D; --wood-lo: #14110D; --wood-edge: #0B0907;
  --ivory: #F3EEE1;
  --display: var(--font-display); --body: var(--font-sans); --mono: var(--font-mono);
  --r: var(--radius-card); --shadow: 0 1px 2px rgba(30,26,22,.04), 0 5px 16px -12px rgba(30,26,22,.15);

  /* Höhe der Kopfzeile der Website: `h-24` (6rem) plus die Trennlinie darunter
     (`components/layout/Navigation.tsx`). Sie klebt oben (`sticky top-0`) und
     liegt mit `z-40` über der Bühne, belegt also auf jeder Scrollhöhe dieselben
     obersten Pixel. Alles, was hier fest im Bild steht, fängt darunter an. */
  --site-header: calc(6rem + 1px);

  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
}

.board-stage *, .board-stage *::before, .board-stage *::after { box-sizing: border-box; }
.board-stage button { cursor: pointer; }

/* Die Breite gibt der Seitenrahmen vor, nicht mehr die Bühne. */
.board-stage .room { display: flex; flex-direction: column; }

/* ---------- Werkzeugleiste über dem Tisch */
/* Die Kopfzeile der Bühne. Als freistehende Pillen saßen Archiv und Protokoll
   zwischen den Brotkrümeln und der Überschrift und lasen sich wie ein dort
   vergessenes Bedienelement; die Hairline bindet sie an die Bühne und gibt dem
   Auftakt eine Kante. Sie erscheint nur, wenn auch ein Knopf da ist. */
.board-stage .stage-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.board-stage .stage-bar:has(.tab:not([hidden])) { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.board-stage .tab { background: none; border: 0; border-radius: 0; padding: 8px 11px; color: var(--ink-muted); font-size: 13.5px; line-height: 1.3; }
.board-stage .tab:hover { color: var(--ink); }
.board-stage .tab.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
/* Die Zählung ist eine Angabe zum Reiter, kein Teil seines Namens. */
.board-stage .tab > span + span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-subtle); margin-left: 5px; }
.board-stage .tab:hover > span + span { color: var(--ink-muted); }
/* Der Neustart öffnet keine Schublade, er verwirft die Sitzung: als Knopf
   abgesetzt, damit er nicht wie ein dritter Reiter gelesen wird. */
.board-stage #new-session { margin-left: 12px; padding: 5px 13px; border: 1px solid var(--border); border-radius: 999px; }
.board-stage #new-session:hover { border-color: var(--border-strong); }

/* ---------- Hero */
.board-stage .hero { text-align: center; margin: 18px auto 12px; max-width: 780px; min-height: 0; transition: opacity .45s ease, margin .5s ease, max-height .5s ease; overflow: hidden; max-height: 260px; }
.board-stage .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.05vw, 38px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 9px; }
.board-stage .hero .sub { font-family: var(--display); font-style: italic; color: var(--ink-muted); font-size: 16px; line-height: 1.45; margin: 0 auto; max-width: 640px; }
.board-stage .room.session .hero { max-height: 0; opacity: 0; margin: 8px 0 0; }

.board-stage .topic-line { text-align: center; margin: 12px auto 32px; max-width: 900px; animation: rise .5s ease both; }
.board-stage .topic-line .label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 5px; }
.board-stage .topic-line #stage-topic { font-family: var(--display); font-size: 21px; line-height: 1.3; }
.board-stage .cast-why { max-width: 700px; margin: 8px auto 0; font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.45; color: var(--ink-subtle); }
.board-stage .cast-why-label { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }

/* ================= Der Tisch ================= */
.board-stage .table-wrap { position: relative; width: 100%; height: 424px; margin: 0 auto; flex: none; transition: height .6s cubic-bezier(.4,0,.2,1); }
/* `display: block` steht hier gegen Tailwind: die Website schreibt aus dem
   Klassennamen `table` im Markup der Bühne eine Utility `.table { display:
   table }`, und ein absolut positionierter Tisch mit `display: table` schrumpft
   auf seinen Inhalt zusammen, also auf nichts. */
.board-stage .table {
  display: block;
  position: absolute; left: 6%; right: 6%; top: 10%; bottom: 10%; border-radius: 50%;
  background:
    radial-gradient(120% 150% at 50% 12%, var(--wood-hi) 0%, var(--wood) 42%, var(--wood-lo) 78%, var(--wood-edge) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(243,238,225,.13),
    inset 0 3px 26px rgba(0,0,0,.55),
    0 44px 72px -46px rgba(30,26,22,.75), 0 4px 14px -8px rgba(30,26,22,.3);
  transition: left .8s cubic-bezier(.3,.9,.25,1), right .8s cubic-bezier(.3,.9,.25,1), top .8s cubic-bezier(.3,.9,.25,1), bottom .8s cubic-bezier(.3,.9,.25,1);
  animation: table-in 1s cubic-bezier(.2,.8,.2,1) both;
}
/* Weniger Mitglieder, engerer Tisch. */
.board-stage .room.session .table { left: 11%; right: 11%; top: 8%; bottom: 8%; }
.board-stage .room.ended .table { top: 11%; bottom: 11%; }
/* Eingravierte Intarsie im Rand */
.board-stage .table::before { content: ""; position: absolute; inset: 26px 34px; border-radius: 50%; border: 1px solid rgba(243,238,225,.09); }
.board-stage .table::after { content: ""; position: absolute; inset: 32px 42px; border-radius: 50%; border: 1px solid rgba(243,238,225,.05); }
/* Eingraviertes Messingschild am unteren Tischrand */
/* Erscheint erst, wenn der Tisch leer genug dafür ist, also in der Sitzung. */
.board-stage .plate { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(243,238,225,.34); pointer-events: none; text-shadow: 0 1px 0 rgba(0,0,0,.55); opacity: 0; transition: opacity .6s ease; }

.board-stage .table-center {
  position: absolute; left: 22%; right: 22%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  /* Auf dunklem Holz aus zwei Metern Abstand: groß genug, hell genug. */
  font-family: var(--display); font-style: italic; color: rgba(243,238,225,.88); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.board-stage .table-center.show { opacity: 1; }
.board-stage .table-center .think { display: none; }
.board-stage .table-center.busy .think { display: inline-flex; }
.board-stage .table-center .think i { background: rgba(243,238,225,.5); }

/* ---------- Das Papier in der Mitte: hier liegt die Frage */
.board-stage .paper {
  position: absolute; left: 50%; top: 50%; width: min(600px, 62%); transform: translate(-50%, -50%) rotate(-.35deg);
  background: linear-gradient(#FEFCF6, #F6F2E6); border-radius: 3px;
  padding: 12px 18px 12px; display: flex; flex-direction: column;
  box-shadow: 0 26px 44px -20px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition: opacity .4s ease, transform .55s cubic-bezier(.5,0,.75,0);
  animation: paper-in .7s .55s cubic-bezier(.2,.8,.2,1) both;
}
.board-stage .paper:focus-within { box-shadow: 0 30px 50px -20px rgba(0,0,0,.75), 0 0 0 2px var(--brand-light), inset 0 1px 0 rgba(255,255,255,.9); }
.board-stage .paper-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle); padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.board-stage .paper textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--display); font-size: 20px; line-height: 1.35; padding: 11px 0 9px; min-height: 64px; }
.board-stage .paper textarea::placeholder { color: var(--ink-subtle); font-style: italic; }
.board-stage .paper-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.board-stage .paper-foot .kbd { margin-left: auto; }
.board-stage .linkbtn { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--ink-muted); border-bottom: 1px solid var(--border-strong); line-height: 1.3; }
.board-stage .linkbtn:hover { color: var(--brand); border-color: var(--brand-light); }
.board-stage .room.session .paper { opacity: 0; transform: translate(-50%, 40px) rotate(-.35deg) scale(.97); pointer-events: none; animation: none; }

/* ---------- Sitze */
.board-stage .seat { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); z-index: 2; }
.board-stage .medal {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; padding: 0;
  border: 0; border-radius: 50%; background: linear-gradient(160deg, #FBF7EC, #E7E0CE);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(30,26,22,.55), 0 6px 14px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; scale: .4;
  transition: scale .35s cubic-bezier(.2,.9,.3,1.5), opacity .35s ease, box-shadow .25s ease, filter .35s ease;
}
.board-stage .seat.in .medal { opacity: 1; scale: 1; }
.board-stage .medal .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board-stage .medal .ring .r1 { fill: none; stroke: rgba(30,26,22,.30); stroke-width: 1; }
.board-stage .medal .ring .r2 { fill: none; stroke: rgba(30,26,22,.14); stroke-width: .6; }
.board-stage .medal .ring .teeth { stroke: rgba(30,26,22,.22); stroke-width: 1.1; }
.board-stage .medal .ring .arc { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; opacity: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
/* Porträt im Medaillon: Duotone in Ink/Creme, damit Fotos aus vier Jahrhunderten
   als ein System lesen, der geprägte Rändelrand liegt darüber. */
.board-stage .medal .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: grayscale(1) contrast(1.14) sepia(.42) saturate(.75) brightness(1.04); mix-blend-mode: multiply;
  user-select: none; -webkit-user-drag: none; }
.board-stage .medal.has-photo .face { display: none; }
.board-stage .medal .face { font-family: var(--display); font-size: 19px; letter-spacing: .01em; color: var(--ink); line-height: 1; padding-bottom: 1px; }
.board-stage .medal .face.long { font-size: 15px; }
.board-stage .seat.chair .medal { background: linear-gradient(160deg, #2E2721, #14110D); box-shadow: 0 0 0 1px rgba(243,238,225,.5), 0 6px 16px -6px rgba(0,0,0,.8); }
.board-stage .seat.chair .face { color: var(--ivory); }
.board-stage .seat.chair .ring .r1, .board-stage .seat.chair .ring .teeth { stroke: rgba(243,238,225,.35); }
.board-stage .seat.chair .ring .r2 { stroke: rgba(243,238,225,.16); }

.board-stage .seat-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--lx, 0), var(--ly, 22px)); white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-muted); transition: color .2s, opacity .3s; pointer-events: none; }

/* Hover: Ressort und Herkunft */
.board-stage .seat-card { position: absolute; left: 50%; transform: translate(-50%, 4px); top: 34px; width: 210px; padding: 8px 11px; background: #fff; border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: 0 14px 28px -14px rgba(30,26,22,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 6; text-align: center; }
.board-stage .seat.up .seat-card { top: auto; bottom: 34px; transform: translate(-50%, -4px); }
.board-stage .seat-card b { display: block; font-family: var(--display); font-weight: 400; font-size: 15px; }
.board-stage .seat-card span { display: block; font-size: 11.5px; color: var(--ink-muted); line-height: 1.35; margin-top: 2px; }
.board-stage .seat-card em { display: block; font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-top: 4px; }
.board-stage .seat:hover .seat-card { opacity: 1; transform: translate(-50%, 0); }
.board-stage .seat:hover .seat-name { opacity: 0; }
.board-stage .seat:hover .medal { box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px rgba(169,87,58,.18), 0 8px 18px -6px rgba(0,0,0,.7); }

/* Stimmprobe / aktiver Sprecher */
.board-stage .medal.playing, .board-stage .seat.speaking .medal { box-shadow: 0 0 0 2px var(--brand), 0 0 0 9px rgba(169,87,58,.16), 0 10px 22px -6px rgba(0,0,0,.7); scale: 1.12; }
.board-stage .medal.playing .ring .arc { opacity: 1; }
.board-stage .seat.murmur .medal { box-shadow: 0 0 0 1px var(--anchor), 0 0 0 7px rgba(82,116,136,.16), 0 8px 18px -6px rgba(0,0,0,.6); scale: 1.07; }
.board-stage .seat.speaking .seat-name, .board-stage .seat.murmur .seat-name { opacity: 0; }

.board-stage .bars { position: absolute; left: 50%; transform: translateX(-50%); top: 30px; display: none; gap: 3px; align-items: flex-end; height: 11px; }
.board-stage .seat.up .bars { top: auto; bottom: 30px; align-items: flex-start; }
.board-stage .seat.speaking .bars, .board-stage .seat .medal.playing ~ .bars { display: flex; }
.board-stage .bars i { width: 3px; background: var(--brand); border-radius: 2px; animation: bar .7s ease-in-out infinite; }
.board-stage .bars i:nth-child(1) { height: 5px; } .board-stage .bars i:nth-child(2) { height: 11px; animation-delay: .15s; } .board-stage .bars i:nth-child(3) { height: 7px; animation-delay: .3s; }

.board-stage .badge { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--surface); scale: 0; transition: scale .3s cubic-bezier(.2,.9,.3,1.4); }
.board-stage .badge.yes { background: var(--ok); color: #fff; display: flex; scale: 1; }
.board-stage .badge.no { background: var(--brand); color: #fff; display: flex; scale: 1; }
.board-stage .badge.abstain { background: var(--border-strong); color: var(--ink); display: flex; scale: 1; }

/* Manuelle Besetzung: nicht gewählte Mitglieder treten zurück */
.board-stage .room.picking .seat:not(.picked):not(.chair) .medal { filter: grayscale(1); opacity: .38; }
.board-stage .seat.picked .medal { box-shadow: 0 0 0 2px var(--ink), 0 6px 14px -6px rgba(0,0,0,.7); }

/* Sitzung: alle, die nicht besetzt sind, verlassen den Tisch */
.board-stage .seat.off { pointer-events: none; }
.board-stage .seat.off .medal { opacity: 0; scale: .5; }
.board-stage .seat.off .seat-name { opacity: 0; }
.board-stage .room.session .seat { transition: left .9s cubic-bezier(.3,.9,.25,1), top .9s cubic-bezier(.3,.9,.25,1); }
.board-stage .room.session .medal { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.board-stage .room.session .medal .face { font-size: 25px; }
.board-stage .room.session .medal .face.long { font-size: 19px; }
.board-stage .room.session .seat-name { font-size: 11.5px; }
.board-stage .room.session .seat.up .bars { bottom: 40px; }
.board-stage .room.session .bars { top: 40px; }
.board-stage .room.session #seats.live .seat:not(.speaking):not(.off) .medal { filter: saturate(.4) brightness(.9); }

/* ---------- Untertitel / Zitatzeile, dieselbe Zeile für alles Gesprochene */
.board-stage .caption { max-width: 940px; margin: 22px auto 0; min-height: 88px; text-align: center; }
.board-stage .caption-who { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 16px; }
.board-stage .caption-who span:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.board-stage .phase-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .phase-tag:empty, .board-stage .caption-who span:first-child:empty { display: none; }
.board-stage .caption-text { margin: 5px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.35; color: var(--ink); }
.board-stage .caption-text.quiet { font-style: italic; color: var(--ink-subtle); font-size: 17px; }
.board-stage .caption-text.quote { font-style: italic; color: var(--ink-muted); font-size: 20px; }
.board-stage .caption.swap .caption-text { animation: swap .35s ease both; }

.board-stage .transport { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px auto 0; }
.board-stage .transport button { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.board-stage .transport button:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .transport button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Abbrechen ist die einzige Taste mit Folgen, sie steht abgesetzt und in der Hausfarbe. */
.board-stage .transport button.stop { margin-left: 6px; color: var(--brand-dark); border-color: var(--brand-light); }
.board-stage .transport button.stop:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.board-stage .transport .kbd { margin-left: 4px; }
.board-stage .room.ended .transport { display: none; }

.board-stage .phases { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 10px auto 0; padding: 0; }
.board-stage .phases li { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; transition: all .25s; }
.board-stage .phases li.done { color: var(--ink-muted); }
.board-stage .phases li.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- Unter dem Tisch: Beispiele, Optionen, Status */
.board-stage .deck { max-width: 1000px; margin: 10px auto 0; width: 100%; transition: opacity .35s ease; }
.board-stage .room.session .deck { display: none; }
.board-stage .deck-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.board-stage .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-muted); }
.board-stage .chip:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .options { margin-top: 14px; padding: 14px 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r); animation: rise .3s ease both; }
.board-stage .opt-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.board-stage .segn { display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.board-stage .segn button { border: 0; background: none; border-radius: 7px; padding: 5px 11px; color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; }
.board-stage .segn button.on { background: var(--ink); color: var(--surface); }
.board-stage .ctx { display: block; margin-top: 12px; }
.board-stage .ctx .lbl { display: block; margin-bottom: 5px; text-transform: none; letter-spacing: .02em; font-family: var(--body); font-size: 12.5px; color: var(--ink-muted); }
.board-stage .ctx .lbl i { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .ctx textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: #fff; font-size: 14px; resize: vertical; }
.board-stage .ctx textarea:focus { outline: 0; border-color: var(--anchor); box-shadow: 0 0 0 3px var(--anchor-tint); }
.board-stage .hint { color: var(--ink-subtle); font-size: 12.5px; margin: 10px 0 0; text-align: center; }
.board-stage .statusline { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-subtle); margin-top: 12px; }
.board-stage .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.board-stage .dot.ok { background: var(--ok); } .board-stage .dot.bad { background: var(--brand); }
.board-stage .statusline .sep { color: var(--border-strong); }
.board-stage .error { color: var(--brand-dark); background: var(--brand-tint); border: 1px solid var(--brand-light); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; margin: 12px auto 0; max-width: 560px; text-align: center; }

/* ---------- Beschluss */
.board-stage .card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.board-stage .btn { border: 1px solid var(--ink); border-radius: var(--radius-btn); background: var(--ink); color: var(--surface); padding: 7px 14px; font-size: 13.5px; white-space: nowrap; line-height: 1.3; }
.board-stage .btn.ghost { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.board-stage .btn.ghost:hover { background: var(--surface-muted); }
.board-stage .btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; padding: 9px 20px; font-size: 14.5px; }
.board-stage .btn.brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.board-stage .btn:disabled { opacity: .4; cursor: default; }
.board-stage .kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); }
.board-stage .h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.board-stage .think { display: inline-flex; gap: 5px; align-items: center; }
.board-stage .think i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-subtle); animation: tb 1.2s ease-in-out infinite; }
.board-stage .think i:nth-child(2) { animation-delay: .15s; } .board-stage .think i:nth-child(3) { animation-delay: .3s; }

.board-stage .decision { max-width: 900px; margin: 26px auto 0; width: 100%; border-left: 3px solid var(--brand); animation: rise .45s ease both; }
.board-stage .decision-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.board-stage .decision > p { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.35; }
.board-stage .tally { display: flex; gap: 14px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-subtle); }
.board-stage .tally b { color: var(--ink); font-weight: 400; }
.board-stage .resolution { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.board-stage .res-block { font-size: 13.5px; line-height: 1.5; }
.board-stage .res-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.board-stage .res-block ol, .board-stage .res-block ul { margin: 0; padding-left: 18px; }
.board-stage .res-block li { margin-bottom: 4px; }
.board-stage .res-block p { margin: 0; font-size: 13.5px; }
.board-stage .res-hint { color: var(--ink-subtle); font-size: 11.5px; margin-top: 8px !important; }
.board-stage .followup { display: flex; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); align-items: center; }
.board-stage .followup input { flex: 1; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: #fff; font-size: 14.5px; }
.board-stage .followup input:focus { outline: 0; border-color: var(--anchor); box-shadow: 0 0 0 3px var(--anchor-tint); }
.board-stage .send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--surface); display: grid; place-items: center; flex: none; }
.board-stage .send svg { width: 17px; height: 17px; }
.board-stage .send:disabled { opacity: .35; }

/* ---------- Protokoll */
/* Die Schublade beginnt unter der Kopfzeile der Website, nicht am Bildrand:
   sonst liegen ihre Überschrift und der Schließen-Knopf dahinter, und wer sie
   geöffnet hat, bekommt sie nicht wieder zu. */
.board-stage .protocol { position: fixed; top: var(--site-header); right: 0; bottom: 0; width: min(460px, 92vw); padding: 18px 20px; background: var(--surface); border-left: 1px solid var(--border-strong); overflow: hidden; z-index: 30; box-shadow: -16px 0 40px -24px rgba(30,26,22,.4); animation: slide .25s ease both; display: flex; flex-direction: column; }
.board-stage .protocol-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex: none; }
.board-stage .protocol-actions { display: flex; gap: 6px; }
/* Nur die Liste scrollt, Kopf und Fußleiste bleiben stehen. */
.board-stage .protocol ol { list-style: none; padding: 0 6px 0 0; margin: 0 -6px 0 0; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.board-stage .protocol li { padding: 9px 12px; border-radius: 9px; margin-bottom: 6px; background: #fff; border: 1px solid var(--border); }
.board-stage .protocol li.playing { border-color: var(--brand-light); background: var(--brand-tint); }
.board-stage .protocol li.you { border-color: var(--anchor-light); background: var(--anchor-tint); }
/* Der Beschluss einer Runde, dort wo die Nachfrage ihn abgelöst hat. */
.board-stage .protocol li.decided { border-color: var(--brand-light); background: var(--brand-tint); }
.board-stage .protocol li.decided .who { color: var(--brand); }
.board-stage .protocol li.decided .what { font-family: var(--display); }
.board-stage .protocol li .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
.board-stage .protocol li .what { font-size: 14px; color: var(--ink); line-height: 1.45; }

/* ---------- Dokumente zur Sitzung */
.board-stage .doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.board-stage .doc-actions .btn { text-decoration: none; display: inline-block; }
.board-stage .doc-saved { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-subtle); }

/* ---------- Archiv, dieselbe Schublade wie das Protokoll */
.board-stage .archive-note { flex: none; margin: 0 0 12px; font-family: var(--display); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink-subtle); }
.board-stage .arc-empty { font-size: 13.5px; color: var(--ink-subtle); }
.board-stage li.arc { padding: 12px 14px; }
.board-stage li.arc:hover { border-color: var(--border-strong); }
.board-stage .arc-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .arc-marks { text-align: right; }
.board-stage .arc-topic { font-family: var(--display); font-size: 15.5px; line-height: 1.32; margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.board-stage .arc-decision { font-size: 13px; line-height: 1.45; color: var(--ink-muted); margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.board-stage .arc-faces { display: flex; margin-top: 9px; }
/* Die Besetzung als Reihe überlappender Medaillons, der Tisch im Kleinen. */
.board-stage .arc-face { width: 26px; height: 26px; border-radius: 50%; margin-right: -7px; flex: none; background: var(--surface-muted); border: 1px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-size: 9.5px; color: var(--ink-muted); }
.board-stage .arc-face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.32) contrast(1.04); mix-blend-mode: multiply; }
/* Die drei Knöpfe sind der Fuß der Karte, nicht eine vierte Zeile Inhalt: eine
   Haarlinie setzt sie ab, dieselbe Trennung wie unter dem Beschluss. */
.board-stage .arc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.board-stage .arc-actions .chip { text-decoration: none; font-size: 12px; line-height: 1.35; padding: 6px 13px; }
/* „Nachspielen“ führt zurück in die Sitzung, „Ergebnis“ und „Protokoll“ öffnen
   nur eine Datei. Der erste Knopf trägt deshalb die Markenfarbe, die beiden
   Verweise bleiben still: drei gleich laute Knöpfe nennen keine Reihenfolge. */
.board-stage .arc-actions button.chip { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .arc-actions button.chip:hover { border-color: var(--brand); }

/* Fuß der Protokoll-Schublade: die Sitzung liegt auch als Datei vor */
.board-stage .protocol-foot { flex: none; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--ink-subtle); }
.board-stage .protocol-foot-links { display: flex; gap: 6px; }
.board-stage .protocol-foot a { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; letter-spacing: 0; font-family: var(--body); color: var(--ink-muted); text-decoration: none; }
.board-stage .protocol-foot a:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }

.board-stage .arc-actions .chip:disabled { opacity: .4; cursor: default; }
.board-stage .arc-actions .chip:disabled:hover { border-color: var(--border); color: var(--ink-muted); background: #fff; }

/* ---------- Ende der Sitzung: der Tisch tritt zurück */
.board-stage .room.ended .table-wrap { height: 330px; }
.board-stage .room.ended .decision { margin-top: 34px; }
.board-stage .room.session .plate, .board-stage .room.ended .plate { opacity: 1; }
.board-stage .room.session .table-center.show ~ .plate { opacity: 0; }
.board-stage .room.ended .medal { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.board-stage .room.ended .medal .face { font-size: 18px; }
.board-stage .room.ended .medal .face.long { font-size: 14px; }
.board-stage .room.ended .caption { display: none; }
.board-stage .room.ended .phases { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swap { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes table-in { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes paper-in { from { opacity: 0; transform: translate(-50%, -46%) rotate(-2deg) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-.35deg); } }
@keyframes tb { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .board-stage .bars i, .board-stage .think i { animation: none; }
  .board-stage .table, .board-stage .paper { animation: none; }
  .board-stage .room.session .seat { transition: none; }
}

@media (max-width: 1080px) {
  .board-stage .table-wrap { height: 400px; }
  .board-stage .medal { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .board-stage .medal .face { font-size: 16px; }
  .board-stage .paper { width: min(520px, 70%); }
  .board-stage .paper textarea { font-size: 18px; min-height: 66px; }
}
@media (max-width: 780px) {
  .board-stage .table-wrap { height: 330px; }
  .board-stage .medal { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .board-stage .medal .face { font-size: 13px; } .board-stage .medal .face.long { font-size: 10px; }
  .board-stage .seat-name { display: none; }
  .board-stage .seat-card { display: none; }
  .board-stage .paper { width: 74%; padding: 9px 12px; }
  .board-stage .paper textarea { font-size: 15px; min-height: 48px; }
  .board-stage .paper-head { font-size: 8.5px; }
  .board-stage .caption-text { font-size: 18px; }
  .board-stage .room.session .medal { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .board-stage .room.session .medal .face { font-size: 18px; }
}

/* ================= Telefon =================
   Auf 375 px ist die Tischmitte kein Platz für das Papier: 22 Medaillons
   brauchen den ganzen Umfang. Der Tisch stellt sich hochkant, das Papier
   legt sich darunter. */
@media (max-width: 620px) {
  /* In der Sitzung stehen hier drei Schalter, sie müssen umbrechen dürfen,
     sonst schiebt die Reihe die Seite nach links aus dem Bild. */
  .board-stage .stage-bar { flex-wrap: wrap; row-gap: 2px; }
  .board-stage .tab { padding: 7px 9px; font-size: 12.5px; }
  .board-stage #new-session { margin-left: 8px; padding: 4px 11px; }

  /* Der Kopf gibt Höhe ab, damit die Frage nicht ganz unter die Falz rutscht. */
  .board-stage .hero { margin: 10px auto 4px; }
  .board-stage .hero h1 { font-size: 24px; margin-bottom: 7px; }
  .board-stage .hero .sub { font-size: 14px; line-height: 1.4; }

  /* Hochkant statt quer, der Umfang entscheidet, nicht die Breite. */
  .board-stage .table-wrap { height: 470px; margin-bottom: 172px; }
  .board-stage .table { left: 12%; right: 12%; top: 6%; bottom: 6%; }
  .board-stage .table::before { inset: 16px 14px; }
  .board-stage .table::after { inset: 21px 19px; }
  .board-stage .room.session .table { left: 17%; right: 17%; top: 13%; bottom: 13%; }
  .board-stage .room.ended .table { top: 15%; bottom: 15%; }
  .board-stage .room.session .table-wrap { height: 400px; margin-bottom: 0; }
  .board-stage .room.ended .table-wrap { height: 340px; }

  /* Das Papier verlässt die Mitte und legt sich unter den Tisch. */
  .board-stage .paper { top: 100%; left: 0; right: 0; width: auto; padding: 11px 15px;
    transform: rotate(-.3deg); margin-top: 18px;
    animation: paper-flat .7s .55s cubic-bezier(.2,.8,.2,1) both; }
  .board-stage .paper textarea { font-size: 17px; min-height: 58px; }
  .board-stage .paper-foot { gap: 9px; }
  .board-stage .paper-foot .kbd { display: none; }
  .board-stage .room.session .paper { transform: translateY(36px) rotate(-.3deg) scale(.97); }

  .board-stage .table-center { left: 10%; right: 10%; font-size: 16px; }
  /* Hochkant ist der Tisch schmal: das Messingschild bricht sonst dreizeilig um. */
  .board-stage .plate { font-size: 9px; letter-spacing: .14em; }

  /* Vier Phasennamen passen nicht in eine Zeile. */
  .board-stage .phases { flex-wrap: wrap; row-gap: 4px; }
  .board-stage .phases li { padding: 3px 9px; font-size: 9.5px; }
  .board-stage .caption { min-height: 76px; }
  .board-stage .decision { margin-top: 20px; }
  .board-stage .doc-actions .btn { flex: 1 1 auto; text-align: center; }
  .board-stage .arc-actions .chip { flex: 1 1 auto; text-align: center; }
}

@keyframes paper-flat { from { opacity: 0; transform: rotate(-2deg) scale(.94); } to { opacity: 1; transform: rotate(-.3deg); } }

/* ---------- Herkunft der Wortmeldungen, direkt unter dem Tisch */
.board-stage .disclosure { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--border); max-width: 72ch; font-size: 12.5px; line-height: 1.5; color: var(--ink-subtle); }

/* Der Hinweis auf die Anmeldung steht unter dem Formular, nicht als Sperre
   davor: zuhören darf man ohne Konto. */
.board-stage #auth-gate a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.board-stage #auth-gate a:hover { color: var(--brand); }