/* =====================================================================
   Quiznight 2 — DAS BUDDY-FELD (quizbuddy/feld.js): EIN Feld für den
   eigenen Quizbuddy am Handy — Frage, Warten, Auflösung, Rundenvorschau
   (und später die Lobby).

   Ein Raster: links die Figur auf ihrem Podest, rechts die Rede. In der
   Rede liegen die stille Anzeige (.qbf-status) und seine Blase
   (.qbf-sprech) in DERSELBEN Zelle übereinander — spricht er, tritt der
   Status zurück, ohne dass sich etwas verschiebt.

   Maße in cqmin der Handbühne (390 breit: 3,9 px). --qbf-gr ist die Figur
   (Vorgabe 22cqmin ≈ 86 px, das Feld also ~100 px hoch — Tobi, 2026-09-27
   „abends"); wer Platz hat, darf sie größer stellen. Nur Rollenfarben, nur
   transform und opacity bewegen sich. Die Figur ist ≥ 48 px (Antippen).
   ===================================================================== */
.qbf {
  --qbf-gr: 22cqmin;
  position: relative; display: grid;
  grid-template-columns: var(--qbf-gr) minmax(0, 1fr);
  grid-template-areas: "figur rede";
  align-items: center; column-gap: 3.2cqmin;
}
.qbf > .qbf-figur { grid-area: figur; }
.qbf > .qbf-status, .qbf > .qbf-sprech { grid-area: rede; min-width: 0; }

/* ---- Die Figur ------------------------------------------------------------ */
.qbf-figur { position: relative; display: block; width: var(--qbf-gr); height: var(--qbf-gr); flex: none; }
.qbf-huelle { position: absolute; inset: 0 1% 5%; z-index: 1; display: block; }
.qbf-huelle > .qmr, .qbf-huelle > .qn-av { position: absolute; inset: 0; width: 100%; height: 100%; }
.qbf-huelle > .qn-av { --gr: calc(var(--qbf-gr) * .84); display: grid; place-items: center; }
/* Das Podest: ein Lichtfleck mit Ring in --du — das „du" dieses Feldes. */
.qbf-podest {
  position: absolute; left: 10%; right: 10%; bottom: 0; height: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--du) 30%, transparent), transparent 82%);
  box-shadow: inset 0 0 0 .45cqmin color-mix(in srgb, var(--du) 56%, transparent);
}
/* Das Kostüm des Sets (feld.js, KOSTUEM): Rollenfarben, Strich im Dunkel. */
.qmr-kostuem.qbf-kostuem > svg { overflow: visible; }
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-headset) { transform: translate(-50%, -46%); }
/* Die 3D-Brille (Kino) sitzt auf die Stirn geschoben: ihre Unterkante über den Brauen — die Augen bleiben frei. */
.qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-brille) { transform: translate(-50%, -94%) rotate(-4deg); }
/* Die Schnecke hat keine Stirn — ihre Augen sitzen auf Stielen. Dort schwebte die Brille darüber (Prüfung);
   sie setzt sie darum AUF: die Gläser auf den Stielaugen. */
.qmr[data-monster="slime"] .qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-brille) { transform: translate(-50%, -22%) rotate(-3deg); }
/* Das Stirnband (Anime) liegt über den Brauen, ein wenig schräg; die Enden am Knoten wehen leise. */
.qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-stirnband) { transform: translate(-50%, -88%) rotate(-3deg); }
.qmr[data-monster="slime"] .qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-stirnband) { transform: translate(-50%, -10%) rotate(-3deg); }
/* Die Kochmütze (Küche) sitzt oben auf dem Kopf, ein wenig schief nach rechts — der Hut steht, das Band liegt auf. */
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-kochmuetze) { transform: translate(-46%, -82%) rotate(7deg); }
/* Die Drachenhörnchen (Sagenwelt) sitzen als Reif oben auf dem Kopf, gerade — die Hörner stehen über dem Scheitel. */
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-hoernchen) { transform: translate(-50%, -74%); }
/* Der Raumhelm (Weltall) sitzt über dem Kopf: Die klare Kugel umschließt ihn, die Augen sieht man durch das Glas. */
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-raumhelm) { transform: translate(-50%, -30%); }
/* Der Lorbeerkranz (Geschichte) liegt auf dem Scheitel: über den Augen, die Zweige an den Schläfen. */
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-lorbeer) { transform: translate(-50%, -58%); }
/* Der Buschhut (Tierwelt) sitzt auf dem Scheitel: die Krempe über der Stirn, die Augen frei. */
.qmr-kostuem.qbf-kostuem[data-anker="kopf"]:has(.qbf-k-buschhut) { transform: translate(-50%, -66%); }
/* Der Fanschal (Fußball) liegt um den Hals, unter dem Mund; das herabhängende Ende wiegt sich leise. */
.qmr-kostuem.qbf-kostuem[data-anker="hals"]:has(.qbf-k-fanschal) { transform: translate(-50%, -34%); }
.qbf-k-fanschal-ende { transform-origin: 24px 22px; transform-box: view-box; animation: qbf-k-fanschal-wehen 3.2s ease-in-out infinite; }
@keyframes qbf-k-fanschal-wehen { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .qbf-k-fanschal-ende { animation: none; } }
.qbf-k-enden { transform-origin: 64px 15px; transform-box: view-box; animation: qbf-k-wehen 2.8s ease-in-out infinite; }
@keyframes qbf-k-wehen { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .qbf-k-enden { animation: none; } }
.qh-ruhig-an .qbf-k-enden { animation: none; }
.qbf-k-visier { transform-origin: 30px 24px; transform-box: view-box; }
.qbf-k-zipfel { transform-origin: 16px 44px; transform-box: view-box; }

/* ---- Der Status: still, mit Zipfel zur Figur (die eigene Wahl) --------------- */
.qbf-status { position: relative; transition: opacity var(--d-mittel) var(--k-ein); }
.qbf-status::before {
  content: ""; position: absolute; left: -1.5cqmin; top: calc(50% - 1.7cqmin); width: 3.4cqmin; height: 3.4cqmin;
  background: inherit; box-shadow: inherit; border-radius: .5cqmin; transform: rotate(45deg);
  clip-path: polygon(0 0, 0 100%, 100% 100%); pointer-events: none;
}
.qbf[data-qbf-spricht] > .qbf-status { opacity: 0; transition-duration: var(--d-kurz); }

/* ---- Die Rede: seine Blase (die des Rigs, hier zu Hause statt über dem Kopf) --- */
.qbf-sprech { position: relative; z-index: 3; display: flex; align-items: center; min-height: 0; pointer-events: none; }
.qbf-sprech > .qmr-spruch {
  position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
  max-width: calc(100% - .5em) !important; width: fit-content; min-width: 0; margin-left: .5em;
  font-size: calc(5cqmin * min(var(--schrift, 1), 1.3)) !important; line-height: 1.14;
  padding: .48em .72em .54em; border-radius: .8em;
  /* Nie mitten im Wort trennen (ein Satz hat höchstens 8 Wörter; die Spalte fasst das längste). */
  overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance;
  transform-origin: 0 50%; pointer-events: auto;
}
.qbf-sprech > .qmr-spruch.qmr-ausruf { font-size: calc(5.6cqmin * min(var(--schrift, 1), 1.3)) !important; }
/* Der Zipfel zeigt nach links, zur Figur. */
.qbf-sprech > .qmr-spruch::after {
  left: -.42em; right: auto; bottom: auto; top: calc(50% - .36em); width: .5em; height: .72em;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
/* Ein fester Satz (Rundenvorschau: spulbar, ohne Zeitplan des Rigs) — dieselbe Blase. */
.qbf-sprech > .qbf-satz { cursor: default; }

/* Reduzierte Bewegung: steht, sagt dasselbe. */
@media (prefers-reduced-motion: reduce) {
  .qbf-sprech .qmr-w { transition: none; opacity: 1; }
  .qbf-status { transition: none; }
}
html.qmr-ruhig .qbf-sprech .qmr-w { transition: none; opacity: 1; }
/* ERFINDER-BLOCK · Die Stirnlampe (Erfinder) sitzt auf der Stirn; ihr Birnchen glüht im Glühfaden-Licht. In der Lobby
   glimmt es nur und geht bei „Hebel um!" an (die Bühne trägt dann data-zustand="los"); bei einem Treffer leuchtet es
   kurz auf (das Feld trägt die Wertung). */
/* Das Band liegt ÜBER den Brauen wie bei Brille und Stirnband (Fund 11: bei -30 % lief es quer über die Augen, an allen Figuren). */
.qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-stirnlampe) { transform: translate(-50%, -84%); }
/* Schnecki hat keine Stirn (Stielaugen, ihr Stirn-Anker liegt über den Augen): die Lampe sitzt wie das Stirnband auf den Stielaugen. */
.qmr[data-monster="slime"] .qmr-kostuem.qbf-kostuem[data-anker="stirn"]:has(.qbf-k-stirnlampe) { transform: translate(-50%, -10%); }
.qla-platz .qbf-k-sl-glas { fill: color-mix(in srgb, var(--acc2) 40%, #5a4a2a); }
[data-zustand="los"] .qla-platz .qbf-k-sl-glas { fill: var(--acc2); transition: fill .3s ease-out .36s; }