/* Fernseher: Galeriewand (Bild), das gerahmte Gemeinschaftswerk links, Museumsschild rechts,
   Besucher (Figuren) unten auf dem Parkett. Alle Größen in vh, damit es auf jedem Fernseher gleich sitzt. */
body.tv { overflow: hidden; font-size: 2.4vh; }
.saal { position: fixed; inset: 0; background: url(/bilder/wand.webp) center / cover no-repeat; }
.saal::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 45%, transparent 40%, #0a1a1b99 100%); }

.signatur { position: fixed; top: 1.6vh; left: 2.6vh; font-size: 7vh; transform: rotate(-6deg); z-index: 2; }
.raumecke { position: fixed; top: 3vh; right: 3.5vh; font: 700 2.6vh var(--schrift); letter-spacing: .2em; color: var(--gold-hell); opacity: .8; z-index: 2; }

.buehne { position: fixed; inset: 0; display: grid; grid-template-columns: auto min(42vw, 64vh); justify-content: center; align-items: center; gap: 5vh; padding: 6vh 0 15vh 6vh; z-index: 1; }

/* ---------- Das Gemälde */
.gemaelde { position: relative; margin: 0; height: min(70vh, 48vw); aspect-ratio: var(--rahmen-ar, 1); filter: drop-shadow(0 2.4vh 2.2vh #000a); }
.rahmen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.papier { position: absolute; left: var(--fl, 11%); top: var(--fo, 11%); right: var(--fr, 11%); bottom: var(--fu, 11%);
  background: var(--papier); container-type: size; display: grid; place-items: center;
  box-shadow: inset 0 0 3vh #c9b99366; }
.papier canvas { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.papier-inhalt { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinte); text-align: center; }
.zeit { position: absolute; left: 18%; right: 18%; bottom: -3.4vh; height: 1vh; border-radius: 1vh; background: #0005; overflow: hidden; }
.zeit div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hell)); transform-origin: left; transform: scaleX(0); }
.zeit.knapp div { background: var(--pflaume); }

/* Lobby im Bild: QR-Code und Raumcode */
.einladung { display: grid; justify-items: center; gap: 1.6vh; }
.einladung .qr { width: 30vh; height: 30vh; }
.einladung .code { font: 700 7vh var(--schrift); letter-spacing: .25em; padding-left: .25em; line-height: 1; }
.einladung .hinweis { font-size: 2.2vh; opacity: .75; }
.einladung .adresse { font: 700 2vh var(--schrift); opacity: .55; }
.papier-inhalt .zeigen { font-size: 14vh; animation: atmen 1.6s ease-in-out infinite; }
.papier-inhalt .enthuellt { width: 70%; height: 70%; object-fit: contain; display: grid; place-items: center; font-size: 30vh; animation: rein .7s cubic-bezier(.3, 1.5, .5, 1) both; filter: drop-shadow(0 .5vh 1vh #0003); }
.papier.aufgedeckt canvas { opacity: .25; transition: opacity .8s; }

/* ---------- Museumsschild */
.schild { background: var(--papier); color: var(--tinte); border-radius: .4vh; padding: 3.4vh 3.6vh 3.8vh; display: grid; gap: 2.2vh;
  box-shadow: 0 1.4vh 3vh #0009; max-height: 74vh; align-content: start; position: relative; }
.schild::before, .schild::after { content: ''; position: absolute; top: 1.4vh; width: 1.2vh; height: 1.2vh; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-hell), var(--gold-dunkel)); }
.schild::before { left: 1.4vh; } .schild::after { right: 1.4vh; }
.schild .kopf { display: flex; align-items: center; gap: 1.6vh; border-bottom: .15vh solid #26221d22; padding-bottom: 1.6vh; }
.schild .kat-icon { font-size: 6vh; line-height: 1; }
.schild .kat-icon .motiv-bild { width: 8vh; height: 8vh; object-fit: contain; display: block; }
.schild .titel { font: italic 400 4.2vh/1.15 var(--schild-schrift); margin: 0; }
body.lobby .schild .titel { font-size: 3.4vh; }
.schild .unter { font: 400 2.2vh var(--schild-schrift); color: #26221d99; margin: .4vh 0 0; }
.schild .ansage { font: 700 3.6vh/1.25 var(--schrift); margin: 0; }
.schild .klein { font-size: 2.4vh; color: #26221daa; margin: 0; }

.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8vh; counter-reset: s; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 4.2vh 1fr; gap: 1.4vh; align-items: start; font-size: 2.7vh; line-height: 1.3; }
.schritte li::before { content: counter(s); width: 4.2vh; height: 4.2vh; border-radius: 50%; display: grid; place-items: center;
  font: 700 2.4vh var(--schild-schrift); background: var(--wand); color: var(--gold-hell); }

.reihe { display: flex; align-items: center; gap: 1.4vh; flex-wrap: wrap; }
.schild .figur.gross { width: 14vh; border-width: .7vh; animation: rein .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.schild .figur.mittel { width: 7vh; border-width: .45vh; }
.schild .figur.klein { width: 5vh; border-width: .35vh; }
.schild .figur.wartend { opacity: .35; }
.warteschlange { display: flex; gap: .8vh; align-items: center; }
.warteschlange::before { content: '→'; font-size: 3vh; opacity: .4; margin-right: .4vh; }

.verdacht { display: grid; gap: 1.2vh; }
.verdacht .zeile { display: flex; align-items: center; gap: 1.4vh; }
.verdacht .stimmen { display: flex; gap: .5vh; }
.verdacht .stimmen .figur { animation: rein .3s both; }
.verdacht .zeile.ist .figur.mittel { box-shadow: 0 0 0 .5vh var(--papier), 0 0 0 1vh var(--pflaume); transition: box-shadow .4s; transition-delay: var(--verz); }
/* Maske auf der Figur des Fälschers, sobald er aufgedeckt ist */
.verdacht .zeile.ist, .entlarvt { position: relative; }
.verdacht .zeile.ist::before, .entlarvt::before { content: '🎭'; position: absolute; left: 4.4vh; top: -1.4vh; font-size: 4.6vh; z-index: 1;
  animation: rein .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--verz, 0s); }
.urteil { font: italic 700 6vh var(--schild-schrift); margin: 0; animation: rein .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--verz); }
.urteil.ertappt { color: var(--blau); } .urteil.entkommen { color: var(--pflaume); }

.optionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vh; }
.optionen .motiv-bild { width: 80%; height: auto; aspect-ratio: 1; object-fit: contain; display: grid; place-items: center; }
.optionen span { aspect-ratio: 1; display: grid; place-items: center; font-size: 6vh; background: var(--karton); border-radius: 1vh; }
.optionen span.richtig { background: #3c8a4f33; box-shadow: inset 0 0 0 .5vh var(--gut); }
.optionen span.falsch { background: #8c2f4b22; box-shadow: inset 0 0 0 .5vh var(--pflaume); }
.gewinn { display: flex; flex-wrap: wrap; gap: 1.4vh 2.4vh; }
.gewinn .eintrag { display: flex; align-items: center; gap: .8vh; font: 700 3.4vh var(--schrift); color: var(--gold-dunkel); animation: rein .4s both; }

/* ---------- Besucher auf dem Parkett */
.besucher { position: fixed; left: 0; right: 0; bottom: 2.6vh; margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 3vh; z-index: 2; }
.besucher li { position: relative; display: grid; justify-items: center; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.besucher .figur { width: 11vh; border-width: .6vh; }
.besucher .punkte { margin-top: -1.6vh; min-width: 4.4vh; padding: .2vh 1vh; border-radius: 2vh; background: var(--tinte); color: var(--gold-hell);
  font: 700 2.4vh var(--schrift); text-align: center; position: relative; }
.besucher li.dran { transform: translateY(-2.4vh) scale(1.18); }
.besucher li.dran .figur { box-shadow: 0 0 0 .5vh var(--papier), 0 0 3vh var(--f); }
.besucher li.dran::after { content: '✏️'; position: absolute; right: -1.6vh; top: -1.4vh; font-size: 4.4vh; animation: wackeln .6s infinite; }
.besucher li.hat::after { content: '✔'; position: absolute; right: -.6vh; top: -.6vh; width: 4vh; height: 4vh; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.6vh; background: var(--gut); color: #fff; animation: rein .3s both; }
.besucher li.leer .figur { background: transparent; border: .5vh dashed #f0d58a55; box-shadow: none; }
.besucher li.vip::before { content: '▶'; position: absolute; left: -1.2vh; top: -1vh; width: 3.8vh; height: 3.8vh; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.8vh; padding-left: .3vh; background: var(--gold); color: var(--tinte); z-index: 1; }

/* ---------- Große Figuren: Fälscher und Wächterin treten bei der Auflösung auf */
.figur-gross { position: fixed; bottom: 0; height: 62vh; z-index: 3; pointer-events: none; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); filter: drop-shadow(0 2vh 3vh #000a); }
.figur-gross.faelscher { left: -2vh; transform: translateX(-120%); }
.figur-gross.waechterin { right: 2vh; transform: translateX(130%); }
body.faelscher-da .figur-gross.faelscher { transform: translateX(0); }
body.faelscher-flieht .figur-gross.faelscher { transform: translateX(-120%) rotate(-8deg); transition-delay: .2s; }
body.waechterin-da .figur-gross.waechterin { transform: translateX(0); }
body.lobby .figur-gross.faelscher { transform: translateX(-38%) rotate(4deg); height: 52vh; }

/* ---------- Ende: Porträts auf Sockeln */
.ehrung { display: flex; align-items: flex-end; gap: 2vh; justify-content: center; }
.ehrung .platz { display: grid; justify-items: center; gap: 1vh; animation: rein .6s both cubic-bezier(.3, 1.5, .5, 1); }
.ehrung .figur { width: 12vh; border-width: .6vh; }
.ehrung .sockel { width: 14vh; border-radius: .6vh .6vh 0 0; background: linear-gradient(var(--karton), #d8ccb2); color: var(--tinte);
  display: grid; place-items: start center; padding-top: 1vh; font: 700 3.4vh var(--schrift); }
.ehrung .medaille { font-size: 4vh; line-height: 1; }

/* ---------- Sprachwahl (nur Lobby) */
.sprachen { position: fixed; right: 3vh; bottom: 2vh; display: flex; gap: .6vh; z-index: 4; }
.sprachen button { font: 700 1.8vh var(--schrift); color: var(--gold-hell); background: #0006; border: .2vh solid transparent; border-radius: 1vh; padding: .5vh .9vh; cursor: pointer; text-transform: uppercase; }
.sprachen button[aria-pressed="true"] { border-color: var(--gold); background: #000a; }

/* ---------- Eingang */
.eingang { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 3vh;
  background: radial-gradient(ellipse at 50% 40%, #1d4140ee, #10282afa 70%), url(/bilder/wand.webp) center / cover; }
.eingang .signatur { position: static; font-size: 24vh; transform: rotate(-6deg); }
.eingang-text { font: italic 400 3.4vh var(--schild-schrift); color: var(--papier); margin: 0; max-width: 60vh; text-align: center; opacity: .9; }
.eingang .knopf { font-size: 9vh; }
.eingang-faelscher { position: absolute; left: 0; bottom: 0; height: 60vh; transform: translateX(-30%); filter: drop-shadow(0 2vh 3vh #000a); }
.heimweg { position: absolute; top: 2.4vh; left: 3vh; color: var(--papier); opacity: .55; text-decoration: none; font-size: 2.2vh; }