/* =====================================================================
   Quiznight 2 · DIE BÜHNE DES FINALES — Treppchen, Schaufenster, Kopfzeile und
   Pult als EIN Bild (Tobi, 2026-10-05: „generell den Finalscreen richtig
   aufpimpen, gerade was die Hintergründe angeht, das muss alles perfekt
   zueinander passen").

   Die Kulisse ist die WELT DES GESPIELTEN SETS, dieselbe wie in seiner Lobby
   (finale-kulisse.js: das Bild der Lobby, der Grund ihrer Gestalt) — im Licht
   einer Siegerehrung. Vorher lag hinter dem Treppchen ein eigenes, fast
   schwarzes Nachtbild. Hier steht, was Welt, Treppchen, Schaufenster, Kopf und
   Pult zu EINEM Bild bindet — nur Flächen und Verläufe, nichts davon bewegt sich:
     0  Die Welt: das Bild hell gestellt und so angeschnitten, dass sein Boden
        unter dem Treppchen liegt; darauf der Grund der Lobby-Gestalt.
     1  Der Schleier tritt nur dort vor die Welt, wo Schrift direkt auf ihr
        steht: hinter der Kopfzeile, hinter den Namen und Zahlen des
        Treppchens, hinter den Überschriften der rechten Spalte, am Fuß.
     2  Das Licht der Siegerehrung: ein warmer Kegel von oben links auf das
        Treppchen — dieselbe Richtung, aus der die Karten ihr Kantenlicht und
        ihren Schatten haben (setkarte.css).
     3  Das Treppchen steht IN der Welt: Die Sockel haben oben links eine helle
        Kante und werfen ihren Schatten nach unten rechts auf den Boden; die
        Schrift darüber trägt einen weichen Schatten in der Farbe der Bühne.
     4  Das Schaufenster: Hinter den drei Karten liegt ein weicher Lichthof in
        der Farbe der Bühne — sie hängen nicht im Dunkeln, sondern in ihrem Licht.
   Gilt für das Finale in drei Akten (.fn-an); ?finale=alt bleibt, wie es war.
   ===================================================================== */

/* 0 · DIE WELT (finale-kulisse.js). Das Bild sitzt in einem Kasten 16 : 9, der die Bühne deckt
   (.fk-welt) — so liegt alles, was IM Bild lebt (finale-leben.css), in Prozent des Bildes richtig,
   egal wie die Bühne geschnitten ist. Verankert wie vorher über x/y (--fk-xn/--fk-yn, Vorgabe unten).
   DIE KAMERA (.fk-fahrt; Tobi, 2026-10-06: der Hintergrund soll nicht still wirken) fährt sehr langsam
   auf das Treppchen zu. Ihr Drehpunkt ist der Fuß des Treppchens: Der Boden unter ihm wandert nicht.
   Bewegt wird nur transform; der Filter liegt auf dem ruhenden Bild darin. Der Grund der Gestalt steht. */
.qn-szene > .fk { inset: 0; overflow: hidden; }
.fk > * { position: absolute; inset: 0; pointer-events: none; }
.fk > .fk-welt {
  --fk-w: max(100cqw, 100cqh * 16 / 9); --fk-h: max(100cqh, 100cqw * 9 / 16);
  inset: auto; width: var(--fk-w); height: var(--fk-h);
  left: calc((100cqw - var(--fk-w)) * var(--fk-xn, .5)); top: calc((100cqh - var(--fk-h)) * var(--fk-yn, 1));
  transform-origin: calc(var(--fk-xn, .5) * 100%) calc(var(--fk-yn, 1) * 100%); transform: scale(var(--fk-zoom, 1));
}
/* Gespiegelt werden Bild und Leben zusammen, nie der Grund der Gestalt (er kann Schrift tragen). */
.fk.fk-spiegel > .fk-welt { transform: scale(calc(var(--fk-zoom, 1) * -1), var(--fk-zoom, 1)); }
.fk-fahrt { position: absolute; inset: 0; transform-origin: 28% 86%; animation: fk-fahrt 28s ease-in-out infinite alternate; will-change: transform; }
@keyframes fk-fahrt { from { transform: scale(1); } to { transform: scale(1.09); } }
.fk-bild {
  position: absolute; inset: 0; display: block;
  background: var(--fk-bild, none) 50% 50% / cover no-repeat, var(--g0);
  filter: brightness(var(--fk-hell, 1)) saturate(var(--fk-satt, 1)) hue-rotate(var(--fk-dreh, 0deg));
}
.fk-grund { container-type: size; }
.fk-grund-teil { position: absolute; inset: 0; }
/* Was über der Welt lebt (die Schichten der Szene, qn.js), muss in ihr logisch sein: Im Kinosaal
   schwenken keine Suchscheinwerfer über den Nachthimmel, und das Haus wird nicht verdunkelt; im
   Zimmer stehen keine Sterne und fällt kein Schnee; nirgends wandert ein Lichtstreif über die
   Fläche (Tobi, 05.10.). */
.qsz-mit-welt[data-gestalt="premiere"] :is(.qsz-kino-sucher, .qsz-kino-foyer, .qsz-kino-abend) { display: none !important; }
.qsz-mit-welt[data-gestalt="arcade"] :is(.qsz-strahl, .qsz-sterne) { display: none; }
/* Das Bild der Würfelwelt trägt Boden und Horizont selbst — der gezeichnete Gitterboden der Szene läge als
   zweiter Horizont darüber (2026-10-06). Pixel und Zeilen der Röhre bleiben. */
.qsz-mit-welt[data-gestalt="arcade"]:has(.fk[data-welt=""]) :is(.qsz-boden, .qsz-horizont) { display: none; }
.qsz-mit-welt:has(.fk[data-innen]) :is(.qsz-schnee, .qsz-schnuppe, .qsz-sternregen .flocke) { display: none; }
/* Die Flutlicht-Lampen der Szene „rennen" standen als weiße Punkte genau hinter dem Setnamen im Kopf
   (gemessen 1,2 : 1) — das Flutlicht selbst (der Schein oben links) bleibt. */
.qsz-mit-welt[data-gestalt="rennen"] .qsz-lampen { display: none; }
/* … und sein Schein rückt aus der Kopfzeile heraus nach links unten (der Setname hatte davor 2,5 : 1). */
.qsz-mit-welt[data-gestalt="rennen"] .qsz-flut { left: -18%; top: -2%; }
/* savanne (Tierwelt): Das Bild der Siegerehrung trägt seine Sonne, seinen Staub und seine Glühwürmchen selbst (finale-leben.js,
   an ihrem Platz im Bild) — die Schichten der Szene lägen doppelt darüber. */
.qsz-mit-welt[data-gestalt="savanne"] :is(.qsz-tw-sonne, .qsz-tw-staub, .qsz-tw-gluehen) { display: none; }
/* stadion (Fußball): Das Bild der Siegerehrung trägt seine Glut, seine Lampen und seinen Tau selbst (finale-leben.js, an ihrem Platz
   im Bild), und das Konfetti des Finales sind schon Papierschnipsel — die Schichten der Szene lägen doppelt darüber. */
.qsz-mit-welt[data-gestalt="stadion"] :is(.qsz-fb-glut, .qsz-fb-tau, .qsz-fb-schnipsel) { display: none; }

/* 1 · Der Schleier — gezielt, nicht flächig. In der Szene liegt nur, was an festen Stellen steht:
   Kopfzeile, die Überschriften der rechten Spalte, Fuß — und ein leichter Hof unter dem Treppchen.
   Hinter Namen und Zahlen des Treppchens liegt er AM TREPPCHEN selbst (unten, 3): dort, wo die
   Schrift an jeder Größe wirklich steht. Dazwischen bleibt die Welt hell. */
.sp-ende.fn-an > .qn-szene .qsz-schleier {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--g0) 86%, transparent) 0, color-mix(in srgb, var(--g0) 50%, transparent) 9%, transparent 18%),
    radial-gradient(46% 50% at 27% 70%, color-mix(in srgb, var(--g0) 46%, transparent), color-mix(in srgb, var(--g0) 30%, transparent) 55%, transparent 100%),
    radial-gradient(36% 60% at 78% 48%, color-mix(in srgb, var(--g0) 62%, transparent), color-mix(in srgb, var(--g0) 40%, transparent) 60%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--g0) 62%, transparent) 0, transparent 18%);
}
/* Akt 2 — die Verleihung steht groß in der Mitte, direkt auf der Welt: Für sie wird es in der Mitte
   dunkel (wie im Saal, wenn ein Preis verliehen wird), die Ecken oben und der Boden unten bleiben. Nur
   Deckkraft. Die Dunkelheit liegt ÜBER der ganzen Szene (::after ihres Kastens), nicht im Schleier
   darunter: Was in der Szene lebt — Lichtbögen, Lichtspuren, Flutlicht, Funken —, liegt über dem
   Schleier und kreuzte sonst die Enden des Titels. So breit wie die Bühne: Am Fernseher reicht der
   Titel über sieben Zehntel der Breite (gemessen 2026-10-06 mit den Bildern der Siegerehrung:
   2,1–2,8 : 1 statt 3 : 1, solange die Dunkelheit schmaler war und unter der Szene lag). */
.sp-ende.fn-an > .qn-szene::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 600ms var(--k-ein);
  background: radial-gradient(96% 68% at 50% 50%, color-mix(in srgb, var(--g0) 94%, transparent), color-mix(in srgb, var(--g0) 90%, transparent) 58%, transparent 100%);
}
.sp-ende.fn-an:has(.fn-ehr) > .qn-szene::after { opacity: 1; }

/* 2 · Das Licht. Die Schicht .sp-e-licht gibt es schon (spiel.css: ein Kegel aus der Mitte oben, ein
   Schein von unten) — im Finale in drei Akten kommt das Licht von oben LINKS, und über dem Boden der
   Welt liegt ein flacher Schein in den Farben des Sets. */
.sp-ende.fn-an .sp-e-licht {
  background:
    /* der Kegel der Siegerehrung: von oben links auf das Treppchen */
    radial-gradient(58% 92% at 24% -14%, color-mix(in srgb, #fff 16%, color-mix(in srgb, var(--jetzt) 22%, transparent)), color-mix(in srgb, var(--acc) 9%, transparent) 46%, transparent 72%),
    /* der Boden: ein flacher heller Streifen, der nach oben ausläuft */
    linear-gradient(0deg, color-mix(in srgb, var(--acc) 15%, transparent) 0, color-mix(in srgb, var(--acc2) 7%, transparent) 9%, transparent 21%),
    radial-gradient(70% 26% at 30% 100%, color-mix(in srgb, var(--acc2) 20%, transparent), transparent 72%);
}
/* Licht aus (farben.kulisse.welt.licht: 'aus', finale-kulisse.js): Eine Welt ohne Bühne hat keine Scheinwerfer — auf dem Mond
   bleibt der schwarze Himmel schwarz. Weg sind die Kegel und der Staub der Szene und der Kegel der Siegerehrung. */
.qn-szene:has(> .fk[data-licht="aus"]) :is(.qsz-kegel, .qsz-staub),
.sp-ende:has(.fk[data-licht="aus"]) .sp-e-licht { display: none; }

/* 4 · Das Schaufenster in seinem Licht. Der Lichthof liegt hinter den Karten (z-index −1 in der Spalte,
   die dafür eine eigene Ebene bildet) und ragt über sie hinaus; unter den Karten fällt ihr Schein auf den
   Boden. Er kommt mit Akt 3 (die Spalte blendet ein). */
.fn-rechts { position: relative; isolation: isolate; }
.fn-rechts::before {
  content: ''; position: absolute; z-index: -1; inset: -5cqmin -4cqmin -4cqmin -6cqmin; pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 44%, color-mix(in srgb, var(--acc) 20%, transparent), color-mix(in srgb, var(--jetzt) 8%, transparent) 52%, transparent 76%),
    radial-gradient(52% 16% at 50% 96%, color-mix(in srgb, #fff 9%, color-mix(in srgb, var(--acc2) 14%, transparent)), transparent 74%);
}

/* 3 · Das Treppchen steht in der Welt. Die Sockel: helle Kante oben links (dort steht das Licht),
   Schatten nach unten rechts auf den Boden — er wächst mit dem Sockel (dieselbe Verwandlung). */
.sp-ende.fn-an .sp-f-sockel {
  box-shadow:
    inset .3cqmin .35cqmin 0 color-mix(in srgb, #fff 30%, transparent),
    inset -.5cqmin 0 1.2cqmin color-mix(in srgb, var(--g0) 46%, transparent),
    1.6cqmin .6cqmin 3.2cqmin color-mix(in srgb, #000 58%, transparent),
    0 1.8cqmin 2.6cqmin -.8cqmin color-mix(in srgb, #000 70%, transparent);
}
/* Hinter Name, Titel, Zahl und Zeile jedes Platzes tritt die Welt zurück: ein weicher dunkler Hof in
   der Farbe der Bühne, so groß wie der Textblock über dem Sockel (er kommt mit dem Platz). Die Zahl
   des Siegers trägt die Farbe des Sets (oft ein sattes Rot oder Blau) — vor hellem Boden hatte sie
   1,4 : 1 (gemessen). */
.sp-ende.fn-an .sp-f-platz { position: relative; isolation: isolate; }
.sp-ende.fn-an .sp-f-platz::before {
  content: ''; position: absolute; z-index: -1; left: -9%; right: -9%; top: 32%; bottom: calc(var(--sockel, 8cqmin) - 1cqmin); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g0) 76%, transparent), color-mix(in srgb, var(--g0) 62%, transparent) 60%, transparent 100%);
  opacity: 0; transition: opacity var(--d-lang) var(--k-ein);
}
/* Der Sieger braucht den dichtesten Hof (seine Zahl ist farbig, nicht weiß); Platz 2 und 3 lassen mehr Boden sehen. */
.sp-ende.fn-an .sp-f-platz.s1::before {
  top: 40%; left: -14%; right: -14%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g0) 92%, transparent), color-mix(in srgb, var(--g0) 82%, transparent) 60%, transparent 100%);
}
.sp-ende.fn-an .sp-f-platz.da::before { opacity: 1; }
/* Die Schrift über den Sockeln steht direkt auf der Welt: ein weicher Schatten in der Farbe der
   Bühne hält jede Zeile lesbar, auch wo das Bild hell ist. Die Zahl des Siegers ist ein Verlauf
   (background-clip) — sie bekommt den Schatten als Filter, sonst schiene er durch die Ziffern. */
.sp-ende.fn-an .sp-f-platz :is(.sp-f-name, .sp-f-titel, .sp-f-wort, .sp-f-stat),
.sp-ende.fn-an .sp-f-platz:not(.s1) .sp-f-punkte,
.sp-ende.fn-an :is(.sp-f-ab, .fn-kopf, .fn-wer, .sp-e-hinweis, .sp-e-recht) {
  text-shadow: 0 .12cqmin .5cqmin color-mix(in srgb, var(--g0) 96%, transparent), 0 0 1.5cqmin color-mix(in srgb, var(--g0) 88%, transparent), 0 0 3cqmin color-mix(in srgb, var(--g0) 70%, transparent);
}
.sp-ende.fn-an .sp-f-platz.s1 .sp-f-punkte { filter: drop-shadow(0 .3cqmin .9cqmin color-mix(in srgb, var(--g0) 92%, transparent)); }
.sp-ende.fn-an .sp-f-stat svg { filter: drop-shadow(0 0 .5cqmin color-mix(in srgb, var(--g0) 90%, transparent)); }
/* Die leisen Zeilen („Punkte", die Überschriften der rechten Spalte) stehen auf heller Welt eine
   Stufe heller — in der Farbe bleiben sie, was sie sind. */
.sp-ende.fn-an .sp-f-platz .sp-f-wort { color: var(--t1); }
.sp-ende.fn-an .sp-f-platz .sp-f-titel { color: color-mix(in srgb, var(--t1) 55%, var(--t0)); }
.sp-ende.fn-an .sp-f-ab { color: color-mix(in srgb, var(--acc) 38%, var(--t0)); }
/* Die Überschriften der rechten Spalte stehen direkt auf der Welt — und die Welt lebt jetzt (Kamera, Lichter):
   Mal liegt die helle Zimmerdecke dahinter, mal ein Stern (gemessen 2026-10-06: 2,6 : 1 statt 4,5 : 1). Sie
   bekommen einen eigenen Grund in der Farbe der Bühne, der nach rechts ausläuft — er sitzt an der Zeile, nicht
   an einer Stelle der Bühne. Polster und Gegenrand heben sich auf: Der Aufbau bleibt, wie er ist. */
.sp-ende.fn-an :is(.sp-f-ab, .fn-kopf) {
  padding: .55cqmin 1cqmin; margin: -.55cqmin -1cqmin; border-radius: 1cqmin;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g0) 82%, transparent) 0, color-mix(in srgb, var(--g0) 66%, transparent) 60%, color-mix(in srgb, var(--g0) 30%, transparent) 100%);
}
/* Die Kopfzeile steht über dem hellsten Licht der Welt (oben links): ein dichter Hof in der Farbe der
   Bühne unter jeder Zeile; die leisen Zahlen rechts („6 Fragen", „Punkte") eine Stufe heller
   (gemessen: der Setname 1,6–2,3 : 1, „Punkte" 3,4 : 1). Der Ruf über dem Sieger („Großes Kino!")
   behält seinen eigenen Schein und bekommt den Hof als Filter darunter. */
.sp-ende.fn-an .sp-e-kopf {
  text-shadow: 0 0 .45cqmin var(--g0), 0 0 .9cqmin var(--g0), 0 .1cqmin 1.6cqmin var(--g0), 0 .2cqmin 3cqmin color-mix(in srgb, var(--g0) 92%, transparent);
}
/* DER SCHATTEN VON OBEN — für JEDES Set gleich (Tobi, 26.10.: „Oben der Schriftzug beim Finale ist bei den Sets oft abgedunkelt, bei Anime nicht —
   warum?"). Acht Sets hatten ihn je als eigene Kopie in spiel.css, Anime, Weltreise und die älteren nicht. Wie das Treppchen (Fund 17) gehört er
   dem gemeinsamen Finale; ein Set baut am Kopf nichts selbst (finale-pruefen.mjs, Teil css). */
.sp-ende .sp-e-kopf { position: relative; isolation: isolate; }
.sp-ende .sp-e-kopf::before {
  content: ""; position: absolute; z-index: -1; left: -6cqmin; right: -6cqmin; top: -4cqmin; bottom: -3.4cqmin; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g0) 94%, transparent), color-mix(in srgb, var(--g0) 80%, transparent) 62%, transparent);
}
.sp-ende.fn-an .sp-e-abendzahlen i { color: var(--t1); }
/* Am Fernseher stehen unten die Zeile des Hosts und die Rechtszeile direkt auf dem Boden der Welt
   (gemessen: die Rechtszeile 3,3–4,2 : 1, „… wählt, wie es weitergeht" 3,0–3,9 : 1). Hinter dem Fuß
   liegt darum ein dunkler Streifen wie die Kante der Bühne — nur dort, wo der Fuß steht (online ist
   er leer) —, und die Rechtszeile steht eine Stufe heller. */
.sp-ende.fn-an .sp-e-fuss { position: relative; isolation: isolate; }
.sp-ende.fn-an .sp-e-fuss:not(:empty)::before {
  content: ''; position: absolute; z-index: -1; left: -6cqmin; right: -6cqmin; top: -1.4cqmin; bottom: -4cqmin; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--g0) 90%, transparent) 0, color-mix(in srgb, var(--g0) 78%, transparent) 62%, transparent 100%);
}
.sp-ende.fn-an .sp-e-recht { color: var(--t1); }
.sp-ende.fn-an .sp-f-ruf { filter: drop-shadow(0 0 .35cqmin var(--g0)) drop-shadow(0 0 1.1cqmin var(--g0)); }
/* Gaming: „Neuer Highscore!" steht vor der hellen Zimmerwand (gemessen 2,0 : 1) — er bekommt sein
   Feld wie die Einblendung eines Automaten: dunkel, kantig, mit dem Rand in seiner Farbe. */
[data-motiv="pixel"] .sp-ende.fn-an .sp-f-ruf {
  filter: none; padding: .7cqmin 1.2cqmin .6cqmin; background: color-mix(in srgb, var(--g0) 86%, transparent);
  box-shadow: 0 0 0 .22cqmin color-mix(in srgb, var(--jetzt) 70%, transparent);
}