/* Bildschirm-Modus (M4, ui/tv.js; Vorlagen art/mockups/m4/tv_warten.png, tv_arena.png): Querformat über die ganze Breite (body.tv), Wartebild über dem
   unscharfen Dorfplatz (Holzschild mit Logo, Karte mit QR-Code und Code, Spieler-Liste mit Farb-Stickern, „Los“), Anzeige während des Spiels
   (Code + kleiner QR links oben, Spieler rechts oben, „… wählt“ in der Mitte), Pause-Tafel. Titel-Knopf „Auf dem Bildschirm spielen“. */
body.tv #app { max-width: none; }
.title-btns { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tv-titlebtn { display: flex; align-items: center; gap: 10px; }
.tv-titlebtn::before { content: ''; width: 34px; height: 34px; margin: -6px 0; flex: none; background: url('../img/ui/tv.png') center / contain no-repeat; } /* Symbol: Higgsfield nano_banana_pro, freigestellt mit tools/cutout.py */
.wood.green { background: linear-gradient(#ffffff40, #0000 50%, #00000018), linear-gradient(#7ed957, #3fae2a); border-color: #2c6e1c; color: #fff;
  text-shadow: 0 2px 0 #2c6e1c, 0 -1px 0 #2c6e1c, 2px 0 0 #2c6e1c, -2px 0 0 #2c6e1c; box-shadow: inset 0 2px 0 #ffffff66, 0 4px 0 #24561a, 0 8px 14px #0005; }

/* ---------- Wartebild ---------- */
.screen.tvwait { display: flex; gap: 3vw; padding: 4vh 4vw; background: #2a1c1240; backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); }
.tw-back { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
.tw-left { flex: 1.45; display: flex; flex-direction: column; gap: 3vh; min-width: 0; }
.tw-sign { align-self: flex-start; padding: 2vh 2.4vw; border-radius: 22px; border: 5px solid #5e3a19; box-shadow: inset 0 3px 0 #ffffff40, 0 6px 0 #4a2c12, 0 14px 30px #0007;
  background: linear-gradient(#ffffff26, #0000 45%, #0000002a), url('../img/tex/wood.jpg') 0 36% / 150% auto; background-color: #b27a44; }
.tw-logo { display: block; height: 22vh; max-width: 40vw; object-fit: contain; filter: drop-shadow(0 4px 6px #0006); }
.tw-card { flex: 1; min-height: 0; display: flex; align-items: center; gap: 3vw; padding: 3vh 3vw; border-radius: 28px; background: var(--karte); border: 6px solid var(--rand);
  box-shadow: inset 0 0 0 3px #fff8, var(--schatten); }
.tw-qr { flex: none; height: min(46vh, 30vw); aspect-ratio: 1; padding: 1.4vh; border-radius: 20px; background: #fff8ea; border: 4px solid #e2c99a; box-shadow: inset 0 2px 6px #b07a4533; }
.tw-qr svg { display: block; width: 100%; height: 100%; }
.tw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.4vh; }
.tw-code { font: 700 min(15vh, 7.4vw)/1 'Fredoka'; color: #5e3a19; letter-spacing: .06em; text-shadow: 0 3px 0 #fff; }
.tw-scan { font-size: min(4.6vh, 3vw); font-weight: 700; color: #6d4520; line-height: 1.15; }
.tw-link { font-size: min(2.4vh, 1.6vw); color: #8a6a48; word-break: break-all; }
.tw-right { flex: 1; display: flex; flex-direction: column; gap: 2vh; padding: 2.4vh 1.6vw; border-radius: 28px; background: var(--karte); border: 6px solid var(--rand); box-shadow: var(--schatten); min-width: 0; }
.tw-list { flex: 1; display: flex; flex-direction: column; gap: 1.6vh; min-height: 0; }
.tw-slot { position: relative; flex: 1; display: flex; align-items: center; gap: 1.4vw; padding: 0 1.4vw; border-radius: 18px; background: #fffaf0; border: 3px solid #e2c99a; box-shadow: 0 3px 0 #d9bd8a; min-height: 0; }
.tw-face { flex: none; height: 80%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tw-face img { width: 112%; height: 112%; object-fit: contain; filter: drop-shadow(0 2px 3px #0004); }
.tw-slot.free .tw-face { border: 4px dashed var(--pc); height: 66%; }
.tw-name { flex: 1; font-size: min(5vh, 2.6vw); font-weight: 700; color: #6d4520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-slot.free .tw-name { color: var(--pc); font-size: min(4vh, 2.2vw); }
.tw-dot { flex: none; width: 2.4vh; height: 2.4vh; border-radius: 50%; background: #2fb52a; box-shadow: 0 0 0 3px #fff, 0 1px 3px #0004; }
.tw-dot.off { background: #bbb; }
.tw-crown, .tv-crown { position: absolute; width: 4vh; height: 3.4vh; background: url('../img/ui/crown.png') center / contain no-repeat; filter: drop-shadow(0 1px 2px #0006); }
.tw-crown { left: 1.8vw; top: -2.6vh; width: 7vh; height: 6vh; }
.tw-go { align-self: stretch; font-size: min(7vh, 4vw) !important; padding: 2vh 1vw 2.4vh !important; }
.tw-note, .tv-note { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); background: #fff3cf; color: #7a4a14; border: 3px solid #e0b25c; border-radius: 16px;
  padding: 1vh 2vw; font-size: min(3vh, 2vw); font-weight: 600; box-shadow: 0 6px 14px #0005; z-index: 3; white-space: nowrap; }
.tw-sound { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); background: #000a; color: #fff; padding: .6vh 1.4vw; border-radius: 12px; font-size: min(2.4vh, 1.6vw); }

/* ---------- Anzeige während des Spiels ---------- */
.tv-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.tv-join { position: absolute; left: 1.4vw; top: 2vh; display: flex; align-items: center; gap: 1vw; padding: 1vh 1.4vw 1vh 1vh; border-radius: 18px; background: #fffaf0ee; border: 4px solid #8a5a2b; box-shadow: 0 4px 0 #5e3a19, 0 8px 16px #0005; }
.tv-miniqr { width: 12vh; height: 12vh; }
.tv-miniqr svg { display: block; width: 100%; height: 100%; border-radius: 8px; }
.tv-jt { display: flex; flex-direction: column; color: #5e3a19; }
.tv-jt b { font-size: 6vh; line-height: 1; letter-spacing: .05em; }
.tv-jt small { font-size: 2.4vh; font-weight: 600; }
.tv-players { position: absolute; right: 1.4vw; top: 2vh; display: flex; gap: .8vw; }
.tv-pl { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3vh; width: 10vh; padding: .8vh .4vh .6vh; border-radius: 16px; background: #fffaf0ee; border: 4px solid var(--pc); box-shadow: 0 4px 10px #0004; }
.tv-pl img { width: 7.4vh; height: 7.4vh; object-fit: contain; }
.tv-pl span { font-size: 2vh; font-weight: 700; color: #6d4520; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-pl.off { filter: grayscale(1); opacity: .6; }
.tv-crown { left: 50%; top: -2.6vh; margin-left: -2vh; }
.tv-banner { position: absolute; left: 50%; top: 2.4vh; transform: translateX(-50%); padding: 1.4vh 2.4vw; border-radius: 18px; font-size: 3.6vh; font-weight: 700; color: #fff4dd; white-space: nowrap;
  background: linear-gradient(#ffffff26, #0000 45%, #0000002a), url('../img/tex/wood.jpg') 0 36% / 150% auto; background-color: #b27a44; border: 4px solid #5e3a19; box-shadow: 0 5px 0 #4a2c12, 0 10px 18px #0005;
  text-shadow: 0 2px 0 #5e3a19, 0 -1px 0 #5e3a19, 2px 0 0 #5e3a19, -2px 0 0 #5e3a19; }
.tv-pause { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #1a0e0699; }
.tv-pcard { min-width: 36vw; padding: 4vh 3vw; border-radius: 28px; background: var(--karte); border: 6px solid var(--rand); box-shadow: var(--schatten); text-align: center; color: #6d4520; }
.tv-pcard h2 { margin: 0 0 1vh; font-size: 8vh; }
.tv-pcard p { margin: 0 0 3vh; font-size: 3.2vh; }
.tv-prow { display: flex; gap: 1.4vw; justify-content: center; }

/* ---------- Party-Brett am Bildschirm: Fragen und Items sind privat (Handy), unten keine Bedienung ---------- */
body.tv .bh-bottom, body.tv .bh-mini, body.tv .bh-panel { display: none !important; }