html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; }
body { background: transparent; }
#viewport { width: 100vw; height: 100vh; overflow: hidden; background: #0c0910; }
#stage {
  position: relative; width: 1920px; height: 1080px; transform-origin: top left; overflow: hidden;
  background: radial-gradient(circle at 17% 35%, rgba(138,69,164,.14), transparent 28%), radial-gradient(circle at 79% 46%, rgba(255,163,114,.11), transparent 31%), linear-gradient(145deg,#0d0911 0%,#120d17 48%,#1b1018 100%);
}
#stage::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; background-image:radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1.3px),radial-gradient(circle,rgba(255,189,136,.17) 0 1px,transparent 1.4px); background-position:0 0,32px 24px; background-size:74px 74px,96px 96px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 72%); }
.topbar { position:absolute; left:18px; top:18px; right:18px; height:118px; display:grid; grid-template-columns:300px 1fr 118px 154px 128px; gap:12px; }
.overlay-card { position:relative; overflow:hidden; border:1px solid rgba(255,188,139,.20); border-radius:22px; background:linear-gradient(145deg,rgba(46,30,51,.92),rgba(25,18,31,.94)); box-shadow:0 18px 55px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.025); }
.brand-card { padding:21px 24px; }
.brand-card .kicker { font-size:11px; margin-bottom:5px; }
.brand-title { margin:0; font-size:30px; line-height:.95; font-weight:1000; letter-spacing:-.02em; background:linear-gradient(90deg,var(--cream),var(--peach),#efaddf); color:transparent; background-clip:text; }
.brand-sub { margin-top:8px; font-size:11px; color:#aa95aa; font-weight:800; letter-spacing:.08em; }
.question-card { padding:17px 28px 20px; display:grid; align-content:center; text-align:center; }
.question-card::after { content:""; position:absolute; left:12%; right:12%; bottom:-30px; height:55px; background:radial-gradient(ellipse,rgba(215,139,228,.18),transparent 70%); }
.question-label { color:#d79bdd; font-size:11px; font-weight:1000; letter-spacing:.17em; text-transform:uppercase; }
#questionText { margin:7px 0 0; font-size:29px; line-height:1.1; font-weight:1000; text-wrap:balance; }
.stat-card { display:grid; place-items:center; text-align:center; padding:10px; }
.stat-label { font-size:9px; letter-spacing:.14em; color:#ab96ab; text-transform:uppercase; font-weight:1000; }
.stat-value { margin-top:5px; font-size:26px; font-weight:1000; color:var(--peach); }
.stat-card.turn { border-color:rgba(215,139,228,.28); }
.stat-card.turn .stat-value { color:#efb4ed; }
.main-zone { position:absolute; left:66px; right:66px; top:164px; height:610px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr); align-items:center; gap:34px; }
.camera-shell,.active-shell { position:relative; border-radius:26px; border:1px solid rgba(255,184,126,.34); background:linear-gradient(145deg,rgba(45,27,46,.93),rgba(18,14,23,.96)); box-shadow:0 30px 70px rgba(0,0,0,.32),0 0 45px rgba(215,139,228,.10); }
.camera-shell { width:100%; aspect-ratio:16/9; overflow:visible; padding:9px; }
.camera-shell::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 5px rgba(255,189,136,.045); }
.camera-chip { position:absolute; top:-18px; left:50%; transform:translateX(-50%); z-index:5; min-width:170px; text-align:center; padding:8px 18px; border-radius:999px; border:1px solid rgba(255,189,136,.35); background:linear-gradient(180deg,#573527,#2e1f27); color:#f7d8ba; font-size:11px; font-weight:1000; letter-spacing:.08em; }
.hero-media,.active-media { position:relative; width:100%; height:100%; overflow:hidden; border-radius:19px; background:#08070b; }
.hero-media video,.hero-media img,.active-media video,.active-media img,.player-video-wrap video,.player-video-wrap img { width:100%; height:100%; object-fit:cover; display:block; background:#08070b; }
.media-placeholder { position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; border-radius:inherit; background:radial-gradient(circle at 50% 42%,rgba(215,139,228,.08),transparent 34%),#0a0810; color:#4f4352; font-size:13px; font-weight:1000; letter-spacing:.13em; }
.active-shell { height:500px; padding:10px; display:grid; grid-template-rows:auto 1fr auto; overflow:visible; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease; }
.active-shell.has-active { transform:scale(1.035); border-color:rgba(255,184,111,.62); box-shadow:0 34px 80px rgba(0,0,0,.34),0 0 55px rgba(215,139,228,.17); }
.active-headline { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:78px; padding:4px 8px 9px; }
.active-kicker { color:var(--peach); font-size:10px; letter-spacing:.15em; font-weight:1000; text-transform:uppercase; }
#activeName { margin-top:4px; max-width:390px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:38px; line-height:1; font-weight:1000; color:#ffc18d; }
.turn-ring { position:relative; flex:0 0 auto; width:68px; height:68px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--lavender) var(--progress,0%),rgba(255,255,255,.07) 0); box-shadow:0 0 28px rgba(215,139,228,.16); }
.turn-ring::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#18111e; border:1px solid rgba(255,255,255,.08); }
#turnRingValue { position:relative; z-index:2; font-size:22px; font-weight:1000; }
.active-media { border:1px solid rgba(255,255,255,.06); }
.active-foot { padding:10px 8px 1px; text-align:center; font-size:11px; color:#a58fa4; }
.players-zone { position:absolute; left:16px; right:16px; bottom:16px; height:264px; }
.players-head { height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 6px; color:#aa95a8; font-size:10px; font-weight:1000; letter-spacing:.13em; text-transform:uppercase; }
#playerGrid { height:232px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.player-card { position:relative; min-width:0; border:1px solid rgba(255,255,255,.12); border-radius:17px; background:linear-gradient(160deg,rgba(55,37,60,.92),rgba(31,23,38,.95)); padding:8px; box-shadow:0 14px 36px rgba(0,0,0,.22); transition:border-color .28s ease,box-shadow .28s ease,transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s ease; }
.player-card.active { z-index:5; border-color:rgba(255,184,111,.78); box-shadow:0 0 0 1px rgba(215,139,228,.28),0 0 34px rgba(215,139,228,.20),0 16px 38px rgba(0,0,0,.32); transform:translateY(-12px) scale(1.11); }
.player-card.eliminated { opacity:.52; filter:saturate(.7); }
.player-card.player-offline { opacity:.58; }
.player-head { height:35px; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 5px; }
.player-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:16px; font-weight:1000; }
.player-live { font-size:10px; color:#f1a6b6; font-weight:1000; letter-spacing:.04em; }
.player-video-wrap { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:11px; background:#09070d; border:1px solid rgba(255,255,255,.05); }
.overlay-bubble { position:absolute; left:50%; top:2px; transform:translate(-50%,-100%) scale(.92); z-index:15; width:max-content; max-width:88%; padding:9px 12px; border-radius:16px 16px 16px 5px; background:#fff4e7; color:#2b202b; font-size:12px; line-height:1.22; font-weight:1000; box-shadow:0 12px 32px rgba(0,0,0,.32); animation:bubblePop .28s cubic-bezier(.2,.9,.2,1) forwards; }
.overlay-bubble::after { content:""; position:absolute; left:17px; bottom:-7px; width:13px; height:13px; background:inherit; transform:rotate(45deg); border-radius:2px; }
.hero-bubble { left:45%; top:122px; max-width:310px; font-size:14px; }
@keyframes bubblePop { to { transform:translate(-50%,-100%) scale(1); } }
#overlayToast { position:absolute; left:50%; top:148px; transform:translate(-50%,-10px); z-index:30; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(20,14,25,.94); box-shadow:0 14px 40px rgba(0,0,0,.3); font-size:13px; font-weight:1000; opacity:0; transition:.25s ease; }
#overlayToast.show { opacity:1; transform:translate(-50%,0); }

/* V2.1 media reset: Hostcam bleibt dauerhaft links, Fragebilder leben rechts. */
#hostVideo { width:100%; height:100%; object-fit:cover; display:block; visibility:hidden; background:#08070b; }
#hostPlaceholder[hidden] { display:none !important; }
.active-shell.question-image-mode { border-color:rgba(215,139,228,.55); box-shadow:0 34px 80px rgba(0,0,0,.34),0 0 58px rgba(215,139,228,.18); }
.active-shell.question-image-mode .active-media { background:radial-gradient(circle at 50% 45%,rgba(215,139,228,.08),transparent 35%),#08070b; }
.active-shell.question-image-mode .active-media img { object-fit:contain !important; padding:10px; }