/* =====================================================================
   ANIME · das eigene Kissen beim Hanami-Fest (data-welt="anime" — online.js liest sie an der Uhr „raeucheruhr" ab)
   Tobi, 02.11.2026: „Die Online-Pult-Leiste von Weltreise sieht wirklich gut aus, die von Sagenwelt, Erfinder, Weltall etc.
   aber echt langweilig und eigentlich fast immer gleich … auf das Niveau von Weltreise angleichen, alle Pulte.“
   Bis dahin: ein helles Manga-Panel mit rosa Versatz — Papier, flach, ohne Licht. Jetzt sitzt man abends beim Kirschblütenfest
   (Anime IDEE.md §2.7):
     · Hinten der Abend der Kulissen (Indigo), oben die Laternenschnur der Lobby.
     · Hinter dem Buddy hängt seine eigene LATERNE (Chōchin): rotes Papier mit Rippen, oben und unten die schwarzen Kappen,
       innen brennt das Licht; sie schwingt ganz leicht an ihrer Schnur. Er sitzt auf dem roten Filzkissen mit dem rosa Knoten.
     · Die ANZEIGE ist ein SHŌJI, von hinten beleuchtet: warmes Reispapier im Rahmen aus dunklem Holz, die Sprossen leise
       darauf. Dahinter fallen Kirschblüten — das lebende Motiv: Ihre Schatten treiben langsam schräg durch das Papier. Die
       Wahl steht darauf in Tusche, kräftig wie im Manga.
     · Die TASTE ist die kleine FESTTROMMEL (s. u.), mit dem Zeichen der Welt auf dem Fell: dem Tomoe.
     · Der Buddy spricht in SPRECHBLASEN — Papier mit kräftigem Tuscherand.
   Filz, Lack, Holz, Papier und Tusche sind Material; Licht, Schrift und Zustände aus den Rollen des Sets (acc Kirschblüte, acc2
   Matcha). Variablen tragen das Motiv im Namen (--qo-an-*). Bewegung nur transform und opacity (Laterne, Blüten, Schlegel,
   „Don!“), bei reduzierter Bewegung steht alles still. */
.qo-pult[data-welt="anime"] {
  --qo-an-papier: color-mix(in srgb, var(--t0) 94%, #fff3df);
  --qo-an-tusche: color-mix(in srgb, var(--g0) 70%, #000);
  --qo-an-holz: #3b2418;
  --qo-an-rot: color-mix(in srgb, var(--acc) 40%, #6a0f2a);   /* die Tusche der Auszeichnung: Kirschblüte, dunkel genug fürs Papier */
  /* Zwei Kacheln Blütenschatten (je 240 × 120): fünf Blätter um die Mitte, verschieden groß. */
  --qo-an-blueten-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(288)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23c2587a'%3E%3Cuse href='%23b' transform='translate(30 22) scale(1.9) rotate(12)'/%3E%3Cuse href='%23b' transform='translate(152 80) scale(1.4) rotate(40)'/%3E%3Cuse href='%23b' transform='translate(206 30) scale(1)'/%3E%3C/g%3E%3C/svg%3E");
  --qo-an-blueten-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cdefs%3E%3Cg id='b'%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(72)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(144)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(216)'/%3E%3Cellipse cx='0' cy='-5' rx='2.6' ry='3.8' transform='rotate(288)'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23c2587a'%3E%3Cuse href='%23b' transform='translate(92 46) scale(1.2) rotate(25)'/%3E%3Cuse href='%23b' transform='translate(212 100) scale(1.6) rotate(60)'/%3E%3Cuse href='%23b' transform='translate(40 96) scale(.9) rotate(5)'/%3E%3C/g%3E%3C/svg%3E");
  --pult-grund: radial-gradient(70% 140% at 50% -20%, color-mix(in srgb, #ffcf8f 20%, transparent), transparent 62%),
    radial-gradient(30% 120% at 7% 40%, color-mix(in srgb, #ff6a4a 16%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--acc) 10%, transparent) 0 .18cqmin, transparent .24cqmin) 0 0 / 2.2cqmin 2.2cqmin,
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 12%, #1b1532), color-mix(in srgb, var(--acc) 5%, #0b0917));
  --kante: radial-gradient(circle at 50% 62%, #fff4d8 0 .2cqmin, #ffcf8f .36cqmin, color-mix(in srgb, #ffcf8f 45%, transparent) .56cqmin, transparent .66cqmin) 1.2cqmin 0 / 4.4cqmin 100% repeat-x,
    linear-gradient(180deg, transparent 0 40%, color-mix(in srgb, var(--t0) 34%, transparent) 40% 52%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--acc) 14%, #221a3c), #120e22);
  --kante-h: 1.4cqmin;
  --sitz: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--acc) 72%, #fff) 0 .55cqmin, color-mix(in srgb, var(--acc) 50%, transparent) .7cqmin, transparent .8cqmin),
    linear-gradient(180deg, #c04650, #8a2633 58%, #5c1823);
  --sitz-naht: var(--acc);
  /* Das Shōji: Sprossen aus Holz (leise), das Reispapier von hinten beleuchtet — in der Mitte am hellsten. */
  --disp-grund: linear-gradient(90deg, transparent calc(33.3% - .12cqmin), color-mix(in srgb, var(--qo-an-holz) 32%, transparent) calc(33.3% - .12cqmin) calc(33.3% + .12cqmin), transparent calc(33.3% + .12cqmin)),
    linear-gradient(90deg, transparent calc(66.6% - .12cqmin), color-mix(in srgb, var(--qo-an-holz) 32%, transparent) calc(66.6% - .12cqmin) calc(66.6% + .12cqmin), transparent calc(66.6% + .12cqmin)),
    linear-gradient(180deg, transparent 1.6cqmin, color-mix(in srgb, var(--qo-an-holz) 30%, transparent) 1.6cqmin 1.84cqmin, transparent 1.84cqmin calc(100% - 1.84cqmin), color-mix(in srgb, var(--qo-an-holz) 30%, transparent) calc(100% - 1.84cqmin) calc(100% - 1.6cqmin), transparent calc(100% - 1.6cqmin)),
    repeating-linear-gradient(100deg, rgba(150, 110, 70, .035) 0 .1cqmin, transparent .1cqmin .7cqmin),
    radial-gradient(70% 120% at 42% 50%, #fffcf4 0, #fff1d8 38%, color-mix(in srgb, var(--qo-an-papier) 78%, #f2b56e) 78%, color-mix(in srgb, var(--qo-an-papier) 60%, #c98a4a) 100%);
  --disp-rahmen: inset 0 0 0 .7cqmin var(--qo-an-holz), inset 0 .14cqmin 0 .7cqmin color-mix(in srgb, var(--qo-an-holz) 60%, #c08a5a), inset 0 0 0 .84cqmin #1c0f09,
    inset 0 0 2.6cqmin .4cqmin color-mix(in srgb, #e0883a 46%, transparent),
    0 0 0 .14cqmin #1c0f09, 0 .9cqmin 2cqmin rgba(0, 0, 0, .55), 0 0 4cqmin color-mix(in srgb, #ffb060 24%, transparent);
  --disp-rund: .3cqmin; --disp-glas: none;
  --disp-leer: color-mix(in srgb, var(--qo-an-tusche) 58%, #a08a78); --disp-an: var(--qo-an-tusche); --disp-fest: var(--qo-an-tusche);
  --disp-neben: color-mix(in srgb, var(--qo-an-tusche) 76%, #a08a78); --disp-mittel: var(--qo-an-tusche);
  --disp-leucht: none; --disp-leucht-fest: none;
  --disp-trenn: color-mix(in srgb, var(--qo-an-tusche) 30%, transparent);
}
/* Auf dem Papier brauchen Urteil, Marke und Punkte dunkle Töne (vorher stand das Grün des Urteils hell auf hell). */
.qo-pult[data-welt="anime"] .qo-display { --jetzt: var(--qo-an-rot); --disp-urteil: color-mix(in srgb, var(--u) 46%, #121216); }
.qo-pult[data-welt="anime"] .qo-z-uwort { text-shadow: none; }
.qo-pult[data-welt="anime"] .qo-punkte b { color: var(--qo-an-tusche); }
.qo-pult[data-welt="anime"] .qo-a-t > b { font-weight: 900; letter-spacing: -.01em; }
.qo-pult[data-welt="anime"] .qo-a-stempel { background: var(--qo-an-rot); color: #fff; }
.qo-pult[data-welt="anime"] .qo-pt-wort b, .qo-pult[data-welt="anime"] .qo-pt-satz b { color: var(--qo-an-rot); text-shadow: none; }
.qo-pult[data-welt="anime"] .qo-pt-platz .qo-sprung.hoch { color: #2f6b12; }
/* Die Sprechblase: Papier mit kräftigem Tuscherand, die Schrift in Tusche. */
.qo-pult[data-welt="anime"] .qo-sagt { background: var(--qo-an-papier); border-radius: 2.4cqmin;
  box-shadow: inset 0 0 0 .36cqmin var(--qo-an-tusche), .45cqmin .45cqmin 0 color-mix(in srgb, var(--acc) 70%, transparent), 0 .8cqmin 2cqmin rgba(0, 0, 0, .5); }
.qo-pult[data-welt="anime"] .qo-sagt::before { background: var(--qo-an-papier); }
.qo-pult[data-welt="anime"] .qo-sagt-text { color: var(--qo-an-tusche); }

/* DIE LATERNE statt der Lehne: rotes Papier mit Rippen, schwarze Kappen, innen das Licht; sie schwingt leicht an der Schnur. */
.qo-pult[data-welt="anime"] .qo-buddy::before {
  left: 8%; right: 8%; top: -8%; bottom: 10%; border-radius: 50% / 46%;
  background: linear-gradient(180deg, #17100c 0 7%, transparent 7% 93%, #17100c 93%),
    repeating-linear-gradient(180deg, transparent 0 .95cqmin, rgba(70, 8, 10, .42) .95cqmin 1.12cqmin),
    radial-gradient(60% 52% at 50% 46%, #ffe9b8 0, #ff9a4a 28%, #e0402e 58%, #9c1c22 86%, #5e0e14 100%);
  box-shadow: 0 0 2.6cqmin color-mix(in srgb, #ff6a3a 55%, transparent), 0 .4cqmin 1cqmin rgba(0, 0, 0, .5);
  transform-origin: 50% -40%; animation: qo-an-laterne 6.4s ease-in-out infinite;
}
@keyframes qo-an-laterne { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
/* Das Kissen vorn: rund wie die Kissen der Lobby. */
.qo-pult[data-welt="anime"] .qo-buddy::after { border-radius: 46% 46% 30% 30% / 70% 70% 30% 30%; }

/* DAS LEBENDE MOTIV: Blütenschatten hinter dem Papier. Zwei Schichten Kacheln treiben verschieden schnell schräg nach unten —
   um genau eine Kachel je Umlauf, darum ohne Sprung (hinter der Schrift: z-index −1 im Glas der Anzeige).
   NICHT DURCH DIE SCHRIFT (Tobi, 02.11.2026, zur Gegenprobe artefakt-lobby/gegenprobe/: „ja, mach das“): Die Blüten trieben über die ganze
   Anzeige, hinter Wahl und „STARTKLAR“ durch. Jetzt stehen sie wie die Motive der anderen Welten (Kino, Weltreise) in einem Streifen rechts
   vor „eingeloggt“ (--qo-motiv-r), weich ausgeblendet an beiden Kanten; die Schrift endet davor (--qo-motiv-frei, online-pult.css). Damit der
   Streifen selbst stehen bleibt, wandert das Muster (background-position) statt der Fläche. */
.qo-pult[data-welt="anime"] .qo-d-glas::before, .qo-pult[data-welt="anime"] .qo-d-glas::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; left: auto; right: var(--qo-motiv-r); width: 17cqmin;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 75%, transparent);
}
.qo-pult[data-welt="anime"] .qo-d-glas::before { background: var(--qo-an-blueten-a) 0 0 / 24cqmin 12cqmin repeat; opacity: .3; animation: qo-an-blueten 21s linear infinite; }
.qo-pult[data-welt="anime"] .qo-d-glas::after { background: var(--qo-an-blueten-b) 0 0 / 24cqmin 12cqmin repeat; opacity: .2; animation: qo-an-blueten 31s linear -11s infinite; }
@keyframes qo-an-blueten { from { background-position: 0 0; } to { background-position: 24cqmin 12cqmin; } }
/* Wo der Streifen steht — wie beim Kino-Kratzer (pult/kino.css): in der Frage rechts vor „eingeloggt“, in der Lobby am rechten Rand; wo
   die Anzeige schmal ist (Lobby auf S, Abendende, Handy), tritt er ab. */
.qo-pult[data-welt="anime"] { --qo-motiv-r: 19.5cqmin; --qo-motiv-frei: calc(var(--qo-motiv-r) + 18cqmin); }
@container (max-width: 900px) { .qo-pult[data-welt="anime"] { --qo-motiv-r: 23.6cqmin; } }
.qo-pult.qla-pult[data-welt="anime"] { --qo-motiv-r: 2.6cqmin; }
.qo-pult.qo-pult-e[data-welt="anime"], .qo-pult.k1-pult[data-welt="anime"] { --qo-motiv-r: -40cqmin; }
@container (max-width: 900px) { .qo-pult.qla-pult[data-welt="anime"] { --qo-motiv-r: -40cqmin; } }

/* DIE TASTE IST DIE KLEINE FESTTROMMEL (IDEE §2.7; Prüfbefund 18.10.: vorher ein Lackrahmen mit „abschicken").
   Der Rahmen ist das Fass in rotem Lack mit den goldenen Nieten oben und unten, die Kappe das Fell aus hellem
   Pergament, die Schrift in Tusche, davor das Tomoe. Von rechts unten ragt der Schlegel herein (die Hand, die ihn hält,
   ist die eigene — sie liegt außerhalb des Schirms): Er liegt am Rand, hebt sich mit der Wahl und schlägt beim
   Abschicken zu; auf dem Fell springt einmal „Don!" auf. In der Auflösung stehen Platz und Punkte auf dem Fell. */
.qo-pult[data-welt="anime"] {
  --taste-rahmen: radial-gradient(circle, #ecca82 0 .26cqmin, #8a5a1e .3cqmin, transparent .36cqmin) 1.1cqmin .5cqmin / 2.3cqmin 1cqmin repeat-x,
    radial-gradient(circle, #ecca82 0 .26cqmin, #8a5a1e .3cqmin, transparent .36cqmin) 1.1cqmin calc(100% - .5cqmin) / 2.3cqmin 1cqmin repeat-x,
    linear-gradient(180deg, #cf5560, #8f2835 56%, #6f1d29 78%, #a8343f);
  --taste-rund: 5.4cqmin;
  --rang-grund: radial-gradient(70% 90% at 50% 40%, color-mix(in srgb, var(--qo-an-papier) 98%, #fff), color-mix(in srgb, var(--qo-an-papier) 84%, #c9a777) 100%);
  /* Das Zeichen der Welt auf dem Fell: das Tomoe (drei Kommas im Kreis) vor dem Wort. */
  --qo-an-tomoe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg%3E%3Cpath id='t' d='M0-10.5a5.25 5.25 0 0 1 0 10.5a5.25 5.25 0 0 0-7.4 3.6A10.5 10.5 0 0 1 0-10.5z'/%3E%3Cuse href='%23t' transform='rotate(120)'/%3E%3Cuse href='%23t' transform='rotate(240)'/%3E%3C/g%3E%3C/svg%3E");
}
.qo-pult[data-welt="anime"] .qo-los { padding: 1.3cqmin 1.3cqmin; }
.qo-pult[data-welt="anime"] .qo-los .qo-kappe, .qo-pult[data-welt="anime"] .qo-los[data-zustand] .qo-kappe {
  color: var(--qo-an-tusche);
  background: radial-gradient(70% 95% at 50% 38%, color-mix(in srgb, var(--qo-an-papier) 98%, #fff), color-mix(in srgb, var(--qo-an-papier) 84%, #c9a777) 100%);
  box-shadow: inset 0 0 0 .28cqmin color-mix(in srgb, var(--qo-an-tusche) 55%, transparent), inset 0 -.6cqmin 1cqmin color-mix(in srgb, #8a6242 32%, transparent);
}
.qo-pult[data-welt="anime"] .qo-los[data-zustand="leer"] .qo-kappe {
  color: color-mix(in srgb, var(--qo-an-tusche) 78%, var(--qo-an-papier));
  background: radial-gradient(70% 95% at 50% 38%, color-mix(in srgb, var(--qo-an-papier) 86%, #b9a58a), color-mix(in srgb, var(--qo-an-papier) 70%, #9c8566) 100%);
}
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gewaehlt"] .qo-kappe {
  box-shadow: inset 0 0 0 .28cqmin color-mix(in srgb, var(--qo-an-tusche) 55%, transparent), inset 0 -.6cqmin 1cqmin color-mix(in srgb, #8a6242 32%, transparent),
    0 0 3cqmin color-mix(in srgb, var(--acc) 55%, transparent);
}
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gesendet"] .qo-kappe {
  box-shadow: inset 0 0 0 .28cqmin color-mix(in srgb, var(--qo-an-tusche) 55%, transparent), inset 0 .8cqmin 1.4cqmin color-mix(in srgb, #8a6242 46%, transparent);
}
.qo-pult[data-welt="anime"] .qo-los .qo-kappe::before {
  content: ""; display: inline-block; flex: none; width: 2.6cqmin; height: 2.6cqmin; margin-right: .1cqmin; background: currentColor; opacity: .85;
  -webkit-mask: var(--qo-an-tomoe) center / contain no-repeat; mask: var(--qo-an-tomoe) center / contain no-repeat;
}
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gesendet"] .qo-kappe::before, .qo-pult[data-welt="anime"] .qo-los[data-zaehlt] .qo-kappe::before { display: none; }
/* Der Schlegel: helles Holz, er dreht um sein Ende außerhalb der Taste (unten rechts). Liegend und beim Schlag
   bleibt seine Spitze im unteren Rand des Fells, unter der Schrift (bei -38° deckte sie das Ende von „Erst
   aufhängen" zu); gehoben steht er rechts neben der Taste. */
.qo-pult[data-welt="anime"] .qo-los::before {
  content: ""; display: block; position: absolute; z-index: 3; left: auto; right: -1.4cqmin; top: auto; bottom: -1.8cqmin; width: 1.25cqmin; height: 8.6cqmin;
  border-radius: 99px; pointer-events: none; background: linear-gradient(90deg, #c9a777, #f2dfb6 50%, #b38c58);
  box-shadow: 0 .3cqmin .7cqmin rgba(0, 0, 0, .5), inset 0 0 0 .14cqmin color-mix(in srgb, #5a3c1c 40%, transparent);
  transform-origin: 50% 100%; transform: rotate(-54deg);
  transition: transform var(--d-mittel) var(--k-schnapp);
}
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gewaehlt"]::before { transform: rotate(-6deg); }
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gesendet"]::before { transform: rotate(-60deg); transition: transform 120ms cubic-bezier(.6, 0, .9, .4); }
/* „Don!" springt beim Abschicken einmal aus der Trommel auf — über ihrer oberen rechten Ecke, nicht auf dem
   Fell (dort deckte es „Abgeschickt" zu) — und vergeht. Es sitzt am ::after der Taste, nicht der Kappe: Die
   Kappe schneidet ab (overflow: hidden). Das ::after ist sonst die erweiterte Trefferfläche (online.css); nach
   dem Abschicken gibt es nichts mehr zu treffen. */
.qo-pult[data-welt="anime"] .qo-los[data-zustand="gesendet"]::after {
  content: "Don!"; position: absolute; z-index: 4; inset: auto; right: -.8cqmin; top: -.6cqmin; pointer-events: none; opacity: 0;
  font-family: var(--f-display); font-weight: 900; font-size: max(13px, 3.4cqmin); letter-spacing: .01em; text-transform: uppercase;
  color: var(--acc); -webkit-text-stroke: .07em var(--qo-an-tusche); paint-order: stroke fill;
  transform: translateY(-50%) rotate(-10deg); animation: qo-an-don 1.3s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes qo-an-don {
  0% { opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(.3); }
  16% { opacity: 1; transform: translateY(-50%) rotate(-10deg) scale(1.2); }
  70% { opacity: 1; transform: translateY(-50%) rotate(-10deg) scale(1); }
  100% { opacity: 0; transform: translateY(-62%) rotate(-10deg) scale(1.05); }
}
/* Die Kopie der Taste auf der Tafel (Übergang zur Auflösung) und das Tastenfeld des Abendendes tragen keinen Schlegel. */
.qo-pult[data-welt="anime"] .qo-rang .qo-los.qo-rang-alt::before, .qo-pult[data-welt="anime"] .qo-pe-feld::before { display: none; }
/* Platz und Punkte auf dem Fell: Tusche auf Pergament. */
.qo-pult[data-welt="anime"] .qo-rang { padding: 1.3cqmin; }
.qo-pult[data-welt="anime"] .qo-rang-in { box-shadow: inset 0 0 0 .28cqmin color-mix(in srgb, var(--qo-an-tusche) 55%, transparent), inset 0 -.6cqmin 1cqmin color-mix(in srgb, #8a6242 32%, transparent); }
.qo-pult[data-welt="anime"] .qo-rang em { color: color-mix(in srgb, var(--qo-an-tusche) 76%, var(--qo-an-papier)); }
.qo-pult[data-welt="anime"] .qo-rang :is(.qo-z-pzahl, .qo-summe, .qo-rolle-band b) { color: var(--qo-an-tusche); }
.qo-pult[data-welt="anime"] .qo-rang-s { border-left-color: color-mix(in srgb, var(--qo-an-tusche) 22%, transparent); }
.qo-pult[data-welt="anime"] .qo-rang .qo-sprung.hoch { color: #2f6b12; }
@media (prefers-reduced-motion: reduce) {
  .qo-pult[data-welt="anime"] .qo-buddy::before, .qo-pult[data-welt="anime"] .qo-d-glas::before, .qo-pult[data-welt="anime"] .qo-d-glas::after { animation: none; }
  .qo-pult[data-welt="anime"] .qo-los::before { transition: none; }
  .qo-pult[data-welt="anime"] .qo-los[data-zustand="gesendet"]::after { animation: none; opacity: 0; }
}