/* =====================================================================
   Quiznight 2 — DER QUIZBUDDY: das lebendige Monster (monster/leben.js)

   Das Rig ist ein Stapel HTML-Hüllen mit je einem kleinen SVG, das sich
   nie ändert. Bewegt wird nur die Hülle — transform und opacity, sonst
   nichts. Dauern und Kurven aus den Tokens (qn.css :root), Farben nur als
   Rollen (Symbole) oder aus der Zeichnung der Figur.

   Ebenen: Nur in der Stufe voll bekommen die Teile, die sich jedes Bild
   bewegen, eine eigene Ebene (will-change). In mittel lebt die ganze
   Figur auf einer (das Atmen an .qmr-atem), in bild ist sie ein Bild,
   in still auf keiner.
   ===================================================================== */

.qmr {
  position: relative; display: block; width: 100%; height: 100%;
  contain: layout style;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qmr i { font-style: normal; }
.qmr-rahmen, .qmr-lage, .qmr-geste, .qmr-atem { position: absolute; inset: 0; display: block; pointer-events: none; }
/* Jedes Teil hat seinen eigenen, engen Kasten (left/top/width/height am
   Element, gerechnet in leben.js) — eine Ebene ist so groß wie ihr Element. */
.qmr-t, .qmr-gesicht, .qmr-auge, .qmr-mund { position: absolute; display: block; pointer-events: none; }
.qmr-augen { position: absolute; inset: 0; display: block; pointer-events: none; }
.qmr-t > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* Die alten Ruhe-Animationen aus qn.css (Atmen, Blinzeln, Blick im SVG)
   greifen am Rig nicht — sie malten die Figur jedes Bild neu. */
.qmr [data-part] { animation: none !important; translate: none !important; transition: none; }

/* Wer antippen darf, trifft auch eine kleine Figur: mindestens 48 px. */
.qmr[data-reiz="an"] { cursor: pointer; touch-action: none; }
.qmr[data-reiz="an"]::before { content: ''; position: absolute; inset: min(0px, calc(50% - 24px)); }

/* Der Boden: derselbe Schatten wie im Standbild (monster.js boden). */
.qmr-schatten { position: absolute; display: block; border-radius: 50%; background: rgba(0, 0, 0, .28); pointer-events: none; }

/* ---- Formen: nur die gewählte ist sichtbar ------------------------- */
/* Außerhalb der Stufe voll schneiden die Formen (kein Übergang): Jeder
   Übergang wäre eine eigene Ebene — 24 Figuren im Gruppenmoment machten
   daraus gemessen 537 Ebenen und Bilder bis 76 ms. */
.qmr-augen, .qmr-form, .qmr-mf { opacity: 0; }
.qmr-augen.an, .qmr-form.an, .qmr-mf.an { opacity: 1; }
.qmr[data-lauf="voll"] .qmr-mf { transition: opacity var(--d-kurz) var(--k-ein); }
.qmr.qmr-plappert .qmr-mf { transition: none; }
.qmr[data-lauf="voll"] .qmr-form.qmr-drehen.an { animation: qmr-drehen calc(var(--d-xl) * 1.1) linear infinite; }
@keyframes qmr-drehen { to { transform: rotate(360deg); } }
.qmr-lid, .qmr-unterlid { opacity: 0; transform: scaleY(.02); }
.qmr-arm, .qmr-prop, .qmr-sig { opacity: 0; }
.qmr-schein {
  position: absolute; display: block; opacity: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--jetzt, #e879f9) 55%, transparent), transparent);
}

/* ---- Stufe voll: was jedes Bild bewegt wird, bekommt eine Ebene ----- */
.qmr[data-lauf="voll"] :is(.qmr-lage, .qmr-gesicht, .qmr-extra, .qmr-pupille, .qmr-lid, .qmr-mund, .qmr-schatten) { will-change: transform; }
.qmr[data-lauf="voll"] .qmr-arm.an { will-change: transform, opacity; }

/* ---- Der Bauplan (design/handy/monster/STIL.md, monster.js TEILE) ------ */
/* Der Boden ist ein weicher Schatten statt einer harten Scheibe. */
.qmr-schatten.weich { background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3) 55%, transparent); }
/* Arme in drei Gliedern: Hand und Unterarm drehen um ihr Gelenk; die
   Handformen wechseln wie Münder (nur die gewählte ist sichtbar). */
.qmr-hf { opacity: 0; }
.qmr-hf.an { opacity: 1; }
.qmr[data-lauf="voll"] .qmr-arm.an :is(.qmr-unterarm, .qmr-hand) { will-change: transform; }
/* Eigene Ebene nur, wo jedes Bild bewegt wird: Blubbis Propeller-Blatt. Auge und Wangen
   bewegen sich selten (Blinzeln, Nachschwingen) und malen dann im Gesicht mit. */
.qmr[data-lauf="voll"][data-monster="blobby"] .qmr-x { will-change: transform; }
/* Münder wechseln im Zusammenziehen (leben.js, mundZwischen) — kurz überblenden. */
.qmr[data-lauf="voll"] .qmr-mf { transition-duration: 70ms; }
/* Augenformen wechseln hinter geschlossenen Lidern (leben.js augenFormFluss): Der Tausch
   ist ein Schnitt, keine Überblendung — sonst stünden kurz zwei Paar Augen übereinander
   (Befund B3). Das geschlossene Auge ist derselbe Bogen wie die Form „zu". */
/* Die Lider gleiten in einem Fach genau in der Form des Auges (leben.js lidFach), UNTER
   dessen Rand: Das Fach steht und schneidet, die Lider bewegen sich nur per translate —
   nichts wird gestaucht, die Lidkante liegt nie als Kreis auf der Haut.
   Geschnitten wird nur, solange ein Lid zu sehen ist (leben.js fachSchneiden): Ein runder
   Schnitt kostet bei jedem Neumalen. */
.qmr-lidfach.schneidet { overflow: hidden; border-radius: 50%; }
.qmr-augzu { opacity: 0; }
/* Sternies Strahlen tragen ihren Schein selbst. */
.qmr-schein.qmr-strahlen { background: none; }
.qmr-strahlen > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- Die zweiten zwölf (2026-10-06) --------------------------------- */
/* Anhängsel mit mehreren Formen (Zipfel, Schnur, Knospe): nur die gewählte ist sichtbar — ein Schnitt. */
.qmr-xf { opacity: 0; }
.qmr-xf.an { opacity: 1; }
/* Verschränkte Arme als eigene Zeichnung (Brudi in Ruhe; Zipfel und Quassel im Ärger). */
.qmr-kreuz { opacity: 0; }
.qmr-kreuz.an { opacity: 1; }
/* Schickis Rad: neun Federn — bis 64 px Kantenlänge fünf breite (leben.js setzt .qmr-klein nach der Größe). */
.qmr-fset[data-fset="klein"] { display: none; }
.qmr.qmr-klein .qmr-fset[data-fset="klein"] { display: block; }
.qmr.qmr-klein .qmr-fset[data-fset="gross"] { display: none; }

/* ---- Stufe mittel: die ganze Figur atmet auf EINER Ebene ------------ */
.qmr[data-lauf="mittel"] .qmr-atem { animation: qmr-atmen var(--atem, 3.4s) ease-in-out var(--atemzu, 0s) infinite; }
.qmr[data-lauf="mittel"][data-bewegung="schwebt"] .qmr-atem { animation-name: qmr-schweben; }
.qmr.qmr-weg .qmr-atem, .qmr.qmr-weg .qmr-bild { animation-play-state: paused; }
@keyframes qmr-atmen { 0%, 100% { transform: none; } 50% { transform: scale(1.022, .978); } }
@keyframes qmr-schweben { 0%, 100% { transform: none; } 50% { transform: translateY(-2.2%) scale(1.01, .99); } }

/* ---- Stufe bild: ein vorgerendertes Bild, das wiegt ----------------- */
.qmr-bild { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 88%; }
.qmr[data-lauf="bild"] > .qmr-rahmen { display: none; }
.qmr[data-lauf="bild"] > .qmr-bild { display: block; animation: qmr-wiegen calc(var(--atem, 3.4s) * 1.3) ease-in-out var(--atemzu, 0s) infinite; }
@keyframes qmr-wiegen { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg) translateY(-1%); } }

/* In den ruhigen Stufen gleiten die Teile zum neuen Gesicht (ein Übergang,
   Compositor) — nur für den Moment des Wechsels. */
/* In den ruhigen Stufen gleiten nur Haltung und Gesicht zum neuen Gefühl
   (zwei Übergänge je Figur); die Gesichtsteile schneiden. */
.qmr.qmr-gleit :is(.qmr-lage, .qmr-gesicht, .qmr-schatten) { transition: transform var(--d-mittel) var(--k-ein); }

/* Beleidigt aus dem Bild gehen: der eigene Platz wird zum Fenster. */
.qmr.qmr-klemmt .qmr-rahmen { overflow: hidden; }

/* ---- Kostüme hängen an Ankern (M.kostuem) --------------------------- */
.qmr-kostuem { position: absolute; display: block; transform: translate(-50%, -50%); pointer-events: none; }
.qmr-kostuem[data-anker="kopf"] { transform: translate(-50%, -88%); }
.qmr-kostuem > * { display: block; width: 100%; height: auto; }

/* ---- Requisiten und Zeichen über dem Kopf --------------------------- */
.qmr-prop.an { opacity: 1; }
/* Die Requisiten leben nur in der Stufe voll; sonst stehen sie (keine Ebene je Zeichen). */
.qmr:not([data-lauf="voll"]) .qmr-prop.an { animation: none !important; }
.qmr-prop.an[data-prop="schweiss"] { animation: qmr-rinnen calc(var(--d-xl) * 1.6) var(--k-ein) infinite; }
.qmr-prop.an[data-prop="traene"] { animation: qmr-rinnen calc(var(--d-xl) * 2.2) var(--k-ein) infinite; }
.qmr-prop.an[data-prop="tropfen"] { animation: qmr-fallen calc(var(--d-xl) * 1.3) var(--k-aus) infinite; }
.qmr-prop.an[data-prop="regen"] { animation: qmr-fallen calc(var(--d-xl) * .8) linear infinite; }
.qmr-prop.an[data-prop="herz"] { animation: qmr-steigen calc(var(--d-xl) * 1.8) var(--k-ein) infinite; }
.qmr-prop.an:is([data-prop="zzz"], [data-prop="noten"]) { animation: qmr-steigen calc(var(--d-xl) * 2.6) linear infinite; }
.qmr-prop.an[data-prop="funken"] { animation: qmr-funkeln calc(var(--d-xl) * .9) var(--k-ein) infinite alternate; }
.qmr-prop.an:is([data-prop="frage"], [data-prop="punkte"]) { animation: qmr-wippen calc(var(--d-xl) * 1.4) ease-in-out infinite; }
.qmr-prop.an[data-prop="ausruf"] { animation: qmr-knall var(--d-lang) var(--k-schnapp) both; }
.qmr-prop.an[data-prop="regenbogen"] { animation: qmr-knall var(--d-xl) var(--k-ein) both; }
.qmr-prop.an:is([data-prop="wickelnL"], [data-prop="wickelnR"]) { animation: qmr-wickeln var(--d-mittel) var(--k-ein) both; }
.qmr-prop.an[data-prop="staub"] { animation: qmr-staub calc(var(--d-lang) * 1.4) var(--k-aus) both; }
@keyframes qmr-rinnen { 0% { transform: translateY(-3%) scale(.5); opacity: 0; } 18% { transform: translateY(0) scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: translateY(8%) scale(.85); opacity: 0; } }
@keyframes qmr-fallen { 0% { transform: translateY(-2%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(10%); opacity: 0; } }
@keyframes qmr-steigen { 0% { transform: translate(0, 4%) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(3%, -12%) scale(1.08); opacity: 0; } }
@keyframes qmr-funkeln { 0% { transform: scale(.7) rotate(-8deg); opacity: .35; } 100% { transform: scale(1.08) rotate(8deg); opacity: 1; } }
@keyframes qmr-wippen { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3%) rotate(6deg); } }
@keyframes qmr-knall { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes qmr-wickeln { 0% { transform: scaleX(.15); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes qmr-staub { 0% { transform: scale(.4); opacity: 0; } 30% { opacity: .75; } 100% { transform: scale(1.5) translateY(-3%); opacity: 0; } }

/* ---- Spruch und Ausruf (Sprechblase) -------------------------------- */
.qmr-spruch {
  position: absolute; z-index: 5; left: var(--sx, 70%); bottom: var(--sy, 60%);
  display: block; width: max-content; max-width: 12.5em;
  padding: .45em .72em .5em; border-radius: .9em;
  background: var(--t0, #f5f1ff); color: var(--g0, #07060f);
  font-family: var(--f-display, system-ui); font-weight: 700; line-height: 1.16; letter-spacing: .005em;
  text-align: left; text-wrap: balance; white-space: normal;
  box-shadow: 0 .25em .9em rgba(0, 0, 0, .35);
  transform-origin: 0 100%; pointer-events: auto; cursor: pointer;
}
.qmr-spruch[data-seite="l"] { left: auto; right: var(--sx, 70%); transform-origin: 100% 100%; }
.qmr-spruch[data-seite="o"] { left: 50%; transform: translateX(-50%); transform-origin: 50% 100%; text-align: center; }
.qmr-spruch::after {
  content: ''; position: absolute; left: .55em; bottom: -.5em; width: .95em; height: .65em;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%);
}
.qmr-spruch[data-seite="l"]::after { left: auto; right: .55em; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.qmr-spruch[data-seite="o"]::after { left: calc(50% - .45em); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.qmr-spruch.qmr-ausruf { font-weight: 800; padding: .32em .6em .38em; }
/* Am Fernseher: Bühnengröße, höchstens 45 Zeichen je Zeile (Konzept 8.13). */
.qmr-spruch.qmr-buehne { max-width: 45ch; }
/* Die Wörter erscheinen nacheinander — gesteuert von der Uhr des Rigs (leben.js). */
.qmr-w { opacity: 0; transition: opacity var(--d-kurz) var(--k-ein); }
.qmr-w.da { opacity: 1; }

/* ---- Reduzierte Bewegung: steht still, sagt dasselbe --------------- */
@media (prefers-reduced-motion: reduce) {
  .qmr .qmr-atem, .qmr .qmr-prop.an, .qmr .qmr-bild, .qmr .qmr-form.an { animation: none !important; }
  .qmr .qmr-w { transition: none; opacity: 1; }
  .qmr .qmr-form { transition: none; }
}
html.qmr-ruhig .qmr .qmr-atem, html.qmr-ruhig .qmr .qmr-prop.an, html.qmr-ruhig .qmr .qmr-bild, html.qmr-ruhig .qmr .qmr-form.an { animation: none !important; }
html.qmr-ruhig .qmr .qmr-w { transition: none; opacity: 1; }
html.qmr-ruhig .qmr .qmr-form { transition: none; }
html.qmr-pause .qmr, html.qmr-pause .qmr * { animation-play-state: paused !important; }