/* Runde am Fernseher: große Schrift, aus 3 m Entfernung lesbar. Maße skalieren mit der Bildschirmhöhe. */
/* Farben wie auf der Website: Locker hell oder dunkel (System oder Schalter, data-theme),
   Wild und Spicy per data-mood. --ink ist die stärkste Fläche (Knöpfe, Fortschritt, Platz 1). */
:root {
  color-scheme: light;
  --bg: #F5F5F7;
  --glow: rgba(151, 117, 250, 0.16);
  --surface: #FFFFFF;
  --surface-2: #E8E8ED;
  --text: #1D1D1F;
  --text-2: #6E6E73;          /* 4.66:1 auf --bg */
  --line: rgba(0, 0, 0, 0.12);
  --ink: #1D1D1F;
  --on-ink: #FFFFFF;
  --accent: #C2255C;
  --a: #F06595;               /* Option links */
  --b: #4DABF7;               /* Option rechts */
  --dot-1: #F06595; --dot-2: #9775FA; --dot-3: #20C9B7; --dot-4: #FF922B; --dot-5: #FF6B6B; --dot-6: #4DABF7;
  --u: min(1vh, 0.5625vw);     /* 1 % der Höhe eines 16:9-Bildes */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0612; --glow: #2A1450; --surface: #1A1224; --surface-2: #261B33;
    --text: #F5F5F7; --text-2: #B9AFC8; /* 8.9:1 auf --bg */
    --line: rgba(255, 255, 255, 0.12); --ink: #FFFFFF; --on-ink: #1D1D1F;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0612; --glow: #2A1450; --surface: #1A1224; --surface-2: #261B33;
  --text: #F5F5F7; --text-2: #B9AFC8;
  --line: rgba(255, 255, 255, 0.12); --ink: #FFFFFF; --on-ink: #1D1D1F;
}
:root[data-mood="wild"] {
  color-scheme: dark;
  --bg: #140A2E; --glow: rgba(255, 46, 147, 0.34); --surface: #22124A; --surface-2: #2E1A5C;
  --text: #FFFFFF; --text-2: #C9B8F0; /* 10.42:1 auf --bg */
  --line: rgba(201, 184, 240, 0.22); --ink: #FF2E93; --on-ink: #140A2E; /* 5.45:1 */
}
:root[data-mood="spicy"] {
  color-scheme: dark;
  --bg: #1A0807; --glow: rgba(255, 90, 31, 0.34); --surface: #2E0F0B; --surface-2: #3D1611;
  --text: #FFF4EC; --text-2: #E8B9A6; /* 11.02:1 auf --bg */
  --line: rgba(232, 185, 166, 0.2); --ink: #FF5A1F; --on-ink: #1A0807; /* 6.23:1 */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; color: var(--text); font: calc(var(--u) * 2.6)/1.35 var(--font);
  background: radial-gradient(120% 90% at 50% -10%, var(--glow) 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
:focus-visible { outline: calc(var(--u) * .5) solid var(--ink); outline-offset: calc(var(--u) * .5); }

#screen { height: 100%; padding: calc(var(--u) * 5) calc(var(--u) * 7); display: flex; flex-direction: column; gap: calc(var(--u) * 4); }

/* Kopfzeile */
.top { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4); font: 800 calc(var(--u) * 3.4) var(--round); }
.brand svg { width: calc(var(--u) * 5); height: calc(var(--u) * 5); }
.top .right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 2); color: var(--text-2); }
.pill { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .9) calc(var(--u) * 2.2); border-radius: 999px; background: var(--surface); font-weight: 600; }
.pill b { color: var(--text); font-family: var(--round); letter-spacing: .08em; }
.ghost { border: 0; background: transparent; color: var(--text-2); padding: calc(var(--u) * .9) calc(var(--u) * 1.6); border-radius: 999px; cursor: pointer; }
.ghost:hover { background: var(--surface); color: var(--text); }
.back { display: inline-flex; align-items: center; gap: calc(var(--u) * .4); margin-left: calc(var(--u) * -1.6); text-decoration: none; }
.back svg { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.2);
  min-height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 5); border: 0; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: calc(var(--u) * 3); cursor: pointer;
}
.btn:disabled { opacity: .35; cursor: default; }
.btn.quiet { background: var(--surface-2); color: var(--text); }

/* Lobby */
.lobby { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: calc(var(--u) * 7); align-items: center; min-height: 0; }
.invite { display: grid; justify-items: start; gap: calc(var(--u) * 2.4); }
.invite h1 { margin: 0; font: 800 calc(var(--u) * 6.4)/1.05 var(--round); letter-spacing: -.01em; }
.invite p { margin: 0; color: var(--text-2); font-size: calc(var(--u) * 2.8); max-width: 30ch; }
.join-row { display: flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 1); }
.qr { width: calc(var(--u) * 30); aspect-ratio: 1; padding: calc(var(--u) * 1.4); background: #fff; border-radius: calc(var(--u) * 2.4); box-shadow: 0 0 0 calc(var(--u) * .2) var(--line); }
.qr svg { display: block; width: 100%; height: 100%; }
.code-box { display: grid; gap: calc(var(--u) * .6); }
.code-box span { color: var(--text-2); font-size: calc(var(--u) * 2.2); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.code { font: 800 calc(var(--u) * 11)/1 var(--round); letter-spacing: .12em; }
.url { color: var(--text-2); font-size: calc(var(--u) * 2); word-break: break-all; }

.side { display: grid; gap: calc(var(--u) * 3); align-content: center; }
.side h2 { margin: 0; font-size: calc(var(--u) * 3); color: var(--text-2); font-weight: 600; }
.seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.seat { display: flex; align-items: center; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 2); border-radius: calc(var(--u) * 2); background: var(--surface); font-size: calc(var(--u) * 3); font-weight: 650; }
.seat.empty { background: transparent; border: calc(var(--u) * .25) dashed var(--line); color: var(--text-2); font-weight: 500; font-size: calc(var(--u) * 2.4); }
.seat.off { opacity: .45; }
.seat .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av { flex: none; display: grid; place-items: center; width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; background: var(--c); color: #1D1D1F; font: 800 calc(var(--u) * 2.6) var(--round); }
.pop { animation: pop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

.controls { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 2.4); }
.seg { display: inline-flex; padding: calc(var(--u) * .6); border-radius: 999px; background: var(--surface); }
.seg button { border: 0; background: transparent; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 999px; font-weight: 650; color: var(--text-2); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--surface-2); color: var(--text); box-shadow: 0 0 0 calc(var(--u) * .2) var(--line); }
.hint { color: var(--text-2); font-size: calc(var(--u) * 2.2); margin: 0; }

/* Frage und Auflösung */
.status { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.status .round { font: 700 calc(var(--u) * 2.6) var(--round); color: var(--text-2); }
.bar { flex: 1; height: calc(var(--u) * 1.2); border-radius: 999px; background: var(--surface); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.secs { font: 800 calc(var(--u) * 4) var(--round); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

.versus { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: calc(var(--u) * 3); min-height: 0; }
.opt {
  position: relative; display: grid; align-content: center; justify-items: center; gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 4); background: var(--c); color: #fff; text-align: center; overflow: hidden;
}
.opt.a { --c: linear-gradient(160deg, #C2255C, #7A1640); }
.opt.b { --c: linear-gradient(160deg, #1D4ED8, #0F2A78); }
.opt .text { font: 800 calc(var(--u) * 6)/1.12 var(--round); text-wrap: balance; }
.opt .text.mid { font-size: calc(var(--u) * 4.6); }
.or { align-self: center; font: 800 calc(var(--u) * 3.4) var(--round); color: var(--text-2); }
.opt .tally { font: 800 calc(var(--u) * 9) var(--round); line-height: 1; }
.opt .who { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1); font-size: calc(var(--u) * 2.4); font-weight: 650; }
.opt .who span { padding: calc(var(--u) * .5) calc(var(--u) * 1.6); border-radius: 999px; background: rgba(255, 255, 255, .2); }
.opt .flag { position: absolute; top: calc(var(--u) * 2.4); left: 50%; translate: -50% 0; padding: calc(var(--u) * .7) calc(var(--u) * 2); border-radius: 999px; background: #fff; color: #1D1D1F; font-weight: 800; font-size: calc(var(--u) * 2.2); white-space: nowrap; }
.opt.dim { filter: saturate(.5) brightness(.6); }
.reveal .opt { animation: lift .5s ease; }
@keyframes lift { from { transform: translateY(calc(var(--u) * 2)); opacity: .6; } }

.votes { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1.4); }
.chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) calc(var(--u) * 1.8) calc(var(--u) * .7) calc(var(--u) * .7); border-radius: 999px; background: var(--surface); font-weight: 650; }
.chip .av { width: calc(var(--u) * 4); height: calc(var(--u) * 4); font-size: calc(var(--u) * 2); }
.chip.done { background: var(--ink); color: var(--on-ink); }
.chip.off { opacity: .4; }
.foot { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }

/* Ende */
.end { flex: 1; display: grid; justify-items: center; align-content: center; gap: calc(var(--u) * 4); text-align: center; }
.end h1 { margin: 0; font: 800 calc(var(--u) * 7) var(--round); }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.4); width: min(100%, calc(var(--u) * 90)); }
.rank li { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 2); background: var(--surface); font-size: calc(var(--u) * 3); font-weight: 650; }
.rank li:first-child { background: var(--ink); color: var(--on-ink); font-size: calc(var(--u) * 3.8); }
.rank .pos { width: 2ch; font-family: var(--round); font-weight: 800; color: var(--text-2); }
.rank li:first-child .pos { color: var(--on-ink); }
.rank .pts { margin-left: auto; font-family: var(--round); font-weight: 800; }

/* Meldungen */
.center { flex: 1; display: grid; place-content: center; justify-items: center; gap: calc(var(--u) * 3); text-align: center; }
.center h1 { margin: 0; font: 800 calc(var(--u) * 5.4) var(--round); }
.center p { margin: 0; color: var(--text-2); max-width: 40ch; }
.conn { position: fixed; left: 50%; bottom: calc(var(--u) * 4); translate: -50% 0; padding: calc(var(--u) * 1.4) calc(var(--u) * 3); border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 700; }

@media (max-aspect-ratio: 1/1) {
  .lobby { grid-template-columns: 1fr; align-content: start; gap: calc(var(--u) * 4); }
  .versus { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pop, .reveal .opt { animation: none; }
  .bar i { animation: none; }
}