:root {
  --text: #fff;
  --muted: rgba(255,255,255,.68);
  --host: #58d26f;
  --heart: #ff6077;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: #090c10;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.obs-overlay { background: transparent; }
.stage { position: fixed; inset: 0; overflow: hidden; background: #090c10; }
body.obs-overlay .stage { background: transparent; }
body.obs-overlay.browser-host-overlay .stage { background: #181814; }
body.group-host-overlay .camera-tile.host { visibility: hidden; }
.native-camera-cut { position: fixed; inset: 0; z-index: 200; background: #181814; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.native-camera-cut.visible { opacity: 1; transition: none; }
.stage-topbar {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  pointer-events: none;
}
.stage-chip {
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(10,13,17,.9);
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.camera-layer { position: absolute; inset: 0; z-index: 10; }
.camera-tile {
  position: absolute;
  display: grid;
  grid-template-rows: 34px auto;
  gap: 8px;
  min-width: 0;
  transition: left .18s ease, top .18s ease, width .18s ease;
}
.camera-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0 3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.camera-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(16px, 1.12vw, 21px);
  font-weight: 850;
}
.hearts { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.heart { color: var(--heart); font-size: clamp(17px, 1.15vw, 22px); line-height: 1; }
.heart.dead { color: rgba(255,255,255,.28); }
.video-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 14px;
  background: #05070a;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
}
.camera-tile.host .video-shell { border-color: var(--host); border-width: 3px; }
.video-viewport,
.video-viewport iframe,
.publisher-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  background: #05070a;
}
.video-viewport { overflow: hidden; border-radius: 11px; }
.camera-tile.host.native-host-hole .video-shell,
.camera-tile.host.native-host-hole .video-viewport { background: transparent; }
.camera-tile.host.native-host-hole .video-viewport { opacity: 0; }
.question-card {
  position: absolute;
  z-index: 50;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 420px));
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px 30px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(9,12,16,.96);
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease, top .18s ease, width .18s ease;
}
.question-card.visible { opacity: 1; visibility: visible; }
.question-category {
  color: #9aa6b7;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.question-text {
  font-size: clamp(23px, 2vw, 37px);
  line-height: 1.17;
  font-weight: 900;
  letter-spacing: -.025em;
}
.stage-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.4);
  font-size: 15px;
  font-weight: 700;
  z-index: 5;
}
@media (max-aspect-ratio: 4/3) {
  .question-card { width: min(680px, calc(100vw - 120px)); }
}

/* VDO-Publisher der Teilnehmer laeuft unsichtbar; das sichtbare Bild kommt aus den Viewer-Kacheln. */
.publisher-rack {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.publisher-rack iframe,
.publisher-frame-hidden {
  width: 2px;
  height: 2px;
  border: 0;
}

/* Normale Browser-Vorschau soll nicht wie eine weisse transparente OBS-Flaeche aussehen. */
body.obs-overlay.preview-overlay,
body.obs-overlay.preview-overlay .stage {
  background: #090c10;
}

/* v7 layout polish ------------------------------------------------------- */
/* The VDO iframe gets a tiny overscan and no scrolling. This hides the
   1-2px right-edge/scrollbar artefact visible on some embedded VDO views. */
.video-viewport iframe {
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: hidden;
  pointer-events: none;
}

/* Solo host: genuine fullscreen camera. No border, no rounded-corner mask,
   no shadow and no name bar consuming canvas space. */
.stage.layout-one .camera-tile {
  display: block;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
}
.stage.layout-one .camera-meta { display: none; }
.stage.layout-one .video-shell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #05070a;
}
.stage.layout-one .video-viewport {
  border-radius: 0 !important;
}
.stage.layout-one .camera-tile.host.native-host-hole .video-shell,
.stage.layout-one .camera-tile.host.native-host-hole .video-viewport {
  background: transparent;
}

/* Broadcast graphics. Transparent OBS canvas and native host cutout stay intact. */
:root { --text: #f3f0e5; --heart: #ff5545; }
[hidden] { display: none !important; }
.stage { --stage-scale: 1; background: #181814; font-family: 'Segoe UI', Arial, sans-serif; }
body.obs-overlay.preview-overlay, body.obs-overlay.preview-overlay .stage { background: #181814; }
.stage-topbar { top: 20px; left: 24px; right: 24px; transform: none; display: flex; justify-content: space-between; align-items: start; }
.stage-chip { border: 0; border-radius: 0; background: #eeeade; color: #27271f; box-shadow: none; font: 11px ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; }
.camera-layer { transform-origin: top left; }
.camera-tile { transition: left .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1); }
body.obs-overlay:not(.browser-host-overlay) .camera-tile.host { transition: none; }
.camera-meta { position: relative; min-height: 34px; background: #24251f; color: #f3f0e5; padding: 5px 12px; border-radius: 3px; text-shadow: none; border-left: 3px solid #e44837; }
.camera-tile.host .camera-meta { border-left-color: var(--host); }
.camera-name { font-size: clamp(12px, 1.05vw, 19px); font-weight: 750; letter-spacing: -.03em; }
.heart { font-family: Arial, sans-serif; font-size: 20px; }
.heart.dead { color: #a39d8e; }
.heart { display: inline-flex; width: 24px; height: 24px; }
.heart svg { width: 100%; height: 100%; overflow: visible; fill: #fa5269; stroke: #ba2c48; stroke-width: .8; filter: drop-shadow(0 2px 1px #60223630); }
.heart .heart-shine { fill: none; stroke: #ffd3dd; stroke-width: 1.5; stroke-linecap: round; }
.heart.dead svg { fill: #d7d2c6; stroke: #a29d90; filter: none; }
.heart.dead .heart-shine { display: none; }
.hearts { gap: 5px; }
.stage .stage-topbar { top: 8px; left: 50%; right: auto; transform: translateX(-50%); }
.video-shell { border-radius: 14px; border: 2px solid #eeebdf; background: #24241e; box-shadow: 5px 5px 0 #0c0c0a80; }
.camera-tile.host .video-shell { border-width: 2px; }
.question-card { color: #28261e; background: #eeeade; border: 0; border-radius: 2px; box-shadow: 7px 7px 0 #e44837; padding: calc(24px * var(--stage-scale)) calc(30px * var(--stage-scale)); min-height: calc(140px * var(--stage-scale)); gap: calc(14px * var(--stage-scale)); text-align: left; transition: opacity .25s ease, visibility .25s ease, top .4s ease, width .4s ease; }
body.obs-overlay:not(.preview-overlay):not(.browser-host-overlay) .question-card { transition: opacity .25s ease, visibility .25s ease; }
.question-card::before { content: 'LIVE / FRAGE'; position: absolute; top: calc(-24px * var(--stage-scale)); left: 0; background: #e44837; color: #fff3e6; font: 700 calc(10px * var(--stage-scale)) ui-monospace, Consolas, monospace; letter-spacing: .1em; padding: calc(6px * var(--stage-scale)) calc(10px * var(--stage-scale)); }
.question-category { font: 700 calc(11px * var(--stage-scale)) ui-monospace, Consolas, monospace; letter-spacing: .1em; color: #8c3c2e; border-bottom: 1px solid #c9c3b3; padding-bottom: calc(10px * var(--stage-scale)); }
.question-text { font-size: calc(clamp(22px, 2vw, 36px) * var(--stage-scale)); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; overflow-wrap: anywhere; white-space: pre-wrap; }
.question-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: top; }
.question-card.long-question .question-text { font-size: calc(clamp(17px, 1.5vw, 25px) * var(--stage-scale)); }
.question-enter.visible { animation: question-wipe .6s cubic-bezier(.22,1,.36,1) both; }
.question-enter.visible .question-word { animation: word-arrive .45s cubic-bezier(.22,1,.36,1) calc(150ms + var(--word-delay)) both; }
@keyframes question-wipe { from { clip-path: inset(0 100% -12px -12px); opacity: 0; } to { clip-path: inset(-30px -12px -12px -12px); opacity: 1; } }
@keyframes word-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.stage-empty { color: #a7a18f; font: 11px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .14em; }
.show-effect-layer { position: absolute; inset: 0; z-index: 80; pointer-events: none; display: grid; place-items: center; }
.show-effect { position: relative; min-width: min(350px,80vw); max-width: 85vw; text-align: center; padding: 22px 40px; background: #e44837; color: #fff0df; box-shadow: 10px 10px 0 #211e17; transform: rotate(-4deg); animation: penalty-in .32s cubic-bezier(.16,1,.3,1) both, penalty-out .25s ease 1.6s forwards; }
.effect-kicker { font: 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .13em; border-bottom: 1px solid #fff0df60; padding-bottom: 12px; }
.effect-score { font: clamp(70px,12vw,155px)/1 Impact, 'Arial Narrow', sans-serif; letter-spacing: -.05em; }
.effect-name { font-size: clamp(18px,2.5vw,34px); font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; max-width: 550px; }
.effect-detail { font: 11px ui-monospace, Consolas, monospace; margin-top: 12px; }
.show-effect.elimination { border: 4px double #fff0df; animation-duration: .4s,.3s; animation-delay: 0s,2.2s; }
.show-effect.restored { background: #e8f279; color: #282b1b; }
.show-effect.restored .effect-kicker { border-color: #282b1b50; }
.life-hit .video-shell::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: 5px solid #e44837; background: #e4483733; animation: hit-fade .85s ease both; }
.life-restored .video-shell::after { content: ''; position: absolute; inset: 0; border: 5px solid #e8f279; pointer-events: none; animation: hit-fade .85s ease both; }
.heart-break { animation: heart-break .8s cubic-bezier(.22,1,.36,1); }
@keyframes penalty-in { from { opacity: 0; transform: scale(1.3) rotate(-9deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes penalty-out { to { opacity: 0; transform: translateY(20px) rotate(-4deg); } }
@keyframes hit-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes heart-break { 0% { color: #ff5545; transform: scale(1.5) rotate(-15deg); } 45% { transform: translateY(6px) rotate(15deg); } 100% { color: #a39d8e; transform: none; } }
.layout-mobile .camera-name { font-size: 12px; }
.layout-mobile .hearts { gap: 1px; }
.layout-mobile .heart { font-size: 14px; }
.layout-mobile .heart { width: 16px; height: 16px; }
.layout-mobile .camera-meta { gap: 4px; padding: 0 5px; }
.layout-mobile .camera-tile { grid-template-rows: 24px auto; gap: 6px; }
.layout-mobile .camera-meta { min-height: 24px; border-left-width: 2px; }
.layout-mobile .question-text { font-size: 21px; }
.layout-mobile .question-card { padding: 18px; min-height: 120px; }
@media (max-width: 999px) { .obs-overlay .question-text { font-size: calc(36px * var(--stage-scale)); } .obs-overlay .stage-topbar { top: 10px; left: 12px; right: 12px; } .obs-overlay .stage-chip { padding: 5px 8px; font-size: 8px; } .obs-overlay .show-effect { min-width: 0; padding: 12px 24px; } .obs-overlay .effect-score { font-size: 15vw; } .obs-overlay .effect-name { font-size: 4vw; } .obs-overlay .effect-kicker, .obs-overlay .effect-detail { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .camera-tile, .question-card { transition: none !important; } .question-enter.visible, .question-enter.visible .question-word, .show-effect, .heart-break, .life-hit .video-shell::after, .life-restored .video-shell::after { animation: none !important; } }
@media (max-width: 999px) {
  .obs-overlay .stage-topbar { top: calc(20px * var(--stage-scale)); left: calc(24px * var(--stage-scale)); right: calc(24px * var(--stage-scale)); }
  .obs-overlay .stage-chip { font-size: calc(11px * var(--stage-scale)); padding: calc(10px * var(--stage-scale)) calc(14px * var(--stage-scale)); }
}
.stage-topbar { justify-content: flex-end; }
.phase-solo .stage-topbar { display: none; }
.stage .stage-topbar { top: calc(10px * var(--stage-scale)); left: 50%; right: auto; transform: translateX(-50%); justify-content: center; }
.stage .stage-chip { min-width: calc(150px * var(--stage-scale)); text-align: center; padding: calc(10px * var(--stage-scale)) calc(24px * var(--stage-scale)); font: 800 calc(20px * var(--stage-scale))/1.2 'Segoe UI', Arial, sans-serif; letter-spacing: .06em; color: #181814; background: #e8f279; border-radius: calc(4px * var(--stage-scale)); box-shadow: 0 calc(3px * var(--stage-scale)) 0 #0c0c0a80; }
.result-card { position: absolute; z-index: 55; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(740px,calc(100vw - 80px)); padding: calc(22px * var(--stage-scale)) calc(28px * var(--stage-scale)); color: #e8f279; background: #191a16; border-top: calc(3px * var(--stage-scale)) solid #e8f279; animation: result-arrive .5s cubic-bezier(.22,1,.36,1) both; }
.result-label { font: 10px ui-monospace, Consolas, monospace; font-size: calc(10px * var(--stage-scale)); letter-spacing: .16em; margin-bottom: calc(12px * var(--stage-scale)); }
.result-title { font-size: calc(clamp(26px,3vw,48px) * var(--stage-scale)); line-height: 1.05; font-weight: 800; letter-spacing: -.05em; overflow-wrap: anywhere; }
.result-scores { display: grid; gap: calc(8px * var(--stage-scale)); margin-top: calc(18px * var(--stage-scale)); color: #eeeade; }
.result-scores > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #45473c; padding-top: calc(8px * var(--stage-scale)); font-size: calc(14px * var(--stage-scale)); }
.result-scores strong { white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
@keyframes result-arrive { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .result-card { animation: none; } }
.answer-layer { z-index: 90; }
.answer-feedback { animation: answer-impact .4s cubic-bezier(.2,1,.3,1) both; transform: rotate(-3deg); }
.answer-feedback.answer-correct { background: #e8f279; color: #252b15; }
.answer-feedback.answer-wrong { background: #e44837; color: #fff0df; }
.answer-title { font: clamp(35px,6vw,90px)/1.15 Impact, 'Arial Narrow', sans-serif; margin: 18px 0 8px; }
@keyframes answer-impact { from { opacity: 0; transform: scale(1.15) rotate(-7deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .answer-feedback { animation: none; } }