/* Timgioh Party — App-Layer (Layout, Screens, Components) */

/* ── Base ─────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
}

body.is-host { overflow: hidden; }
body.is-phone { overflow-y: auto; -webkit-tap-highlight-color: transparent; }

button { font: inherit; }
input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  outline: none;
}

.u-hidden { display: none !important; }
.muted { color: var(--ink-3); }
.accent { color: var(--acc1); }

/* Modus-Akzent: Alle Screens uebernehmen die vom Modus gesetzte Akzent-Farbe.
   --mode-accent wird von host.js applyModeAccent() gesetzt (Standard: Purple).
   --acc1 wird global auf --mode-accent gebogen, damit Scoreboard, End-Screen und
   Phone-Screens automatisch in der Modus-Farbe erscheinen — statt immer Purple. */
:root {
  --mode-accent: oklch(0.68 0.28 300);
  --acc1: var(--mode-accent);
}

/* ── TV-Stage: fullscreen fluid (keine Letterbox-Balken) ──
   Das ursprüngliche Design war auf 1920×1080 gezeichnet, aber wir füllen
   stattdessen den Viewport und lassen Grid/Flex die Proportionen halten.
   Abstände haben einen min-clamp, damit das Layout bei weniger Höhe nicht platzt. */
.tv-stage {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  overflow: hidden;
}
.tv-stage .tv {
  width: 100%;
  height: 100%;
  transform: none;
}

/* ── Chrome Top ───────────────────────────────────────── */
.chrome-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: clamp(20px, 2.96vh, 40px) clamp(24px, 2.92vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.chrome-left { display: flex; align-items: center; gap: 24px; }
.chrome-right { display: flex; align-items: center; gap: 12px; }
.chrome-divider { width: 1px; height: 22px; background: var(--line); }
.logo {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo-dot {
  width: 14px; height: 14px;
  background: var(--acc1);
  box-shadow: 0 0 24px var(--acc1-glow);
  border-radius: 50%;
}
.subtitle-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: oklch(0.14 0.02 285 / 0.7);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
}
.pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
}
.pill.mono { letter-spacing: 0.1em; }

/* ── Chrome Bottom ────────────────────────────────────── */
.chrome-bottom {
  position: absolute;
  bottom: clamp(16px, 2.2vh, 32px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  height: clamp(56px, 6.7vh, 80px);
  padding: 0 clamp(16px, 1.67vw, 40px);
  border: 1px solid var(--line);
  background: oklch(0.10 0.02 285 / 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  border-radius: var(--r-pill);
  z-index: 10;
}
.chrome-bottom .hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-1);
  border-radius: 14px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.key.primary {
  background: var(--acc1);
  color: var(--bg-0);
  border-color: var(--acc1);
}

/* ── Lobby Grid (Host/TV) ─────────────────────────────── */
.lobby-grid {
  position: absolute;
  top: clamp(110px, 13vh, 160px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(20px, 2.1vw, 48px);
  transition: opacity 0.3s, filter 0.3s;
}
.lobby-grid.dimmed { opacity: 0.3; filter: blur(4px); pointer-events: none; }

/* Left column — Join box */
.lobby-left {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  padding: clamp(24px, 2.5vw, 56px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.kicker-lg {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--acc1);
  letter-spacing: 0.24em;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.display-heading {
  font-family: var(--font-display);
  font-size: clamp(44px, 3.8vw, 80px);
  line-height: 0.95;
  margin: 0 0 clamp(16px, 1.3vw, 28px);
  letter-spacing: -0.01em;
}
.display-heading.sm { font-size: clamp(36px, 3vw, 60px); margin: 0; }
.display-heading .accent { color: var(--acc1); }

.qr-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 1.67vw, 40px);
  align-items: center;
  margin-top: clamp(20px, 2vw, 40px);
}
.qr-block {
  width: clamp(220px, 16.7vw, 340px);
  aspect-ratio: 1 / 1;
  background: var(--ink-0);
  padding: clamp(14px, 1vw, 22px);
  border-radius: var(--r-lg);
  position: relative;
  display: grid;
  place-items: center;
}
.qr-block img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
.qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: var(--acc1);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 28px;
  display: grid;
  place-items: center;
  border: 4px solid var(--ink-0);
}
.qr-meta { min-width: 0; }
.mono-label {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.display-url {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.75vw, 36px);
  color: var(--ink-0);
  margin-bottom: clamp(16px, 1.3vw, 28px);
  line-height: 1;
  word-break: break-all;
}
.code-boxes {
  display: flex;
  gap: clamp(6px, 0.55vw, 12px);
  align-items: center;
}
.code-box {
  width: clamp(40px, 3.2vw, 64px);
  height: clamp(52px, 4.1vw, 80px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--acc1);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.3vw, 46px);
  display: grid;
  place-items: center;
  color: var(--ink-0);
  border-radius: clamp(14px, 1.2vw, 22px);
}
.code-sep {
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: clamp(24px, 1.9vw, 38px);
}

.info-box {
  margin-top: auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: oklch(0.14 0.02 285 / 0.6);
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: var(--r-md);
}
.info-icon {
  width: 44px; height: 44px;
  background: var(--acc2-soft);
  color: var(--acc2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 24px;
  border-radius: 50%;
}
.info-title { font-size: 18px; color: var(--ink-1); margin-bottom: 2px; }
.info-sub { font-size: 15px; color: var(--ink-3); }

/* Right column — Slots */
.lobby-right { display: flex; flex-direction: column; min-height: 0; }
.slots-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.slots-header .mono-label { margin-bottom: 0; font-size: 15px; }

.slots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 0.9vw, 20px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.player-slot {
  padding: clamp(12px, 1vw, 22px) clamp(14px, 1.2vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1vw, 20px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--acc1-soft);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  min-width: 0;
  animation: slot-in 0.35s cubic-bezier(0.22, 0.9, 0.32, 1.2);
}
.player-slot.empty {
  background: oklch(0.12 0.02 285 / 0.5);
  border: 1px dashed var(--line);
  animation: none;
}

.player-avatar {
  width: clamp(40px, 3vw, 64px);
  height: clamp(40px, 3vw, 64px);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 30px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.player-avatar.empty {
  background: transparent !important;
  color: var(--ink-3);
  border: 1px dashed var(--line);
}

.player-meta { flex: 1; min-width: 0; }
.player-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 28px);
  color: var(--ink-0);
  line-height: 1.1;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bot-badge {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 12px);
  color: var(--ink-2);
  background: oklch(0.22 0.03 285);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.16em;
}
.player-slot.is-bot .bot-badge {
  color: var(--acc2);
  border-color: var(--acc2);
}
.player-name.muted { color: var(--ink-3); font-size: clamp(16px, 1.2vw, 24px); }

.player-status {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--acc2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.player-status .dot { width: 8px; height: 8px; border-radius: 50%; }
.player-status .dot.ok { background: var(--good); box-shadow: 0 0 8px var(--good); }
.player-status .dot.off { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.player-status .dot.wait { background: var(--ink-3); }

.player-index {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}

.lobby-actions {
  margin-top: clamp(16px, 1.7vw, 32px);
  display: flex;
  gap: clamp(10px, 0.9vw, 20px);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(14px, 1.3vw, 26px) clamp(20px, 2vw, 40px);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 24px);
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  background: var(--acc1);
  color: var(--bg-0);
  text-transform: uppercase;
  box-shadow: 0 0 40px var(--acc1-glow);
  border-radius: var(--r-pill);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn.ghost {
  background: transparent;
  color: var(--ink-0);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn-icon { font-size: 20px; }
#btn-start { flex: 1; }

/* ── Phase Overlay (loading) ──────────────────────────── */
.phase-overlay {
  position: absolute;
  inset: 140px 56px 120px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: radial-gradient(ellipse at center, var(--bg-1), var(--bg-0));
  border: 1px solid var(--acc1);
  border-radius: var(--r-xl);
  box-shadow: 0 0 80px var(--acc1-glow);
  z-index: 5;
}
.phase-overlay .display-heading { font-size: 120px; }
.spinner {
  width: 96px;
  height: 96px;
  border: 6px solid var(--line-2);
  border-top-color: var(--acc1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes slot-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Phone / Player ───────────────────────────────────── */
.phone {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-body);
  position: relative;
  background-image:
    radial-gradient(ellipse at 50% 0%, var(--acc1-soft), transparent 60%),
    radial-gradient(ellipse at 50% 100%, var(--acc2-soft), transparent 60%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.phone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}
.phone > * { position: relative; z-index: 2; }

.home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: var(--ink-0);
  opacity: 0.35;
  border-radius: 3px;
  pointer-events: none;
}

/* NUR fuer Phone (nicht TV) — sonst kollidiert es mit .lobby-grid / .quiz-screen etc. */
.phone .screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Screen: Join ────────────────────────────────────── */
.screen-join { padding: 32px 24px 120px; gap: 24px; }
.phone-head .kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--acc1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.display-xl {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.01em;
}

.phone-body { display: flex; flex-direction: column; gap: 24px; }
.field .mono-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.field input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 22px;
  background: var(--bg-2);
  border: 1.5px solid var(--acc1);
  border-radius: 22px;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-0);
  box-shadow: 0 0 0 4px var(--acc1-soft);
  caret-color: var(--acc1);
}
.field input::placeholder { color: var(--ink-3); }

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.avatar-cell {
  aspect-ratio: 1 / 1;
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 28px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  opacity: 0.85;
}
.avatar-cell.selected {
  border-color: var(--acc1);
  box-shadow: 0 0 0 4px var(--acc1-soft), 0 0 24px var(--acc1-glow);
  opacity: 1;
  transform: scale(1.05);
}
.avatar-cell.taken { opacity: 0.25; cursor: not-allowed; }

.form-error {
  padding: 12px 16px;
  border: 1px solid var(--danger);
  background: oklch(0.18 0.08 25 / 0.3);
  color: var(--danger);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  animation: error-shake 0.4s ease-out;
}
@keyframes error-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.phone-foot {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  padding: 0 24px;
  z-index: 20;
  max-width: 480px;
  margin: 0 auto;
}
.mobile-btn {
  width: 100%;
  padding: 22px 24px;
  font-family: var(--font-display);
  font-size: 22px;
  border: none;
  background: var(--acc1);
  color: var(--bg-0);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 32px var(--acc1-glow);
  transition: transform 0.15s, box-shadow 0.2s;
}
.mobile-btn:active:not(:disabled) { transform: scale(0.98); }
.mobile-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.mobile-btn.ghost {
  background: transparent;
  color: var(--ink-0);
  border: 1.5px solid var(--line);
  box-shadow: none;
}

/* Screen: Wait ────────────────────────────────────── */
.screen-wait, .screen-loading { padding: 32px 28px 60px; }
.wait-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.wait-avatar {
  width: 130px;
  height: 130px;
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid var(--acc1);
  box-shadow: 0 0 60px var(--acc1-glow);
  margin-bottom: 8px;
  animation: avatar-breath 3s ease-in-out infinite;
}
@keyframes avatar-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.wait-dots { display: flex; gap: 10px; }
.wait-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--acc1);
  opacity: 0.35;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.wait-dots span:nth-child(2) { animation-delay: 0.2s; }
.wait-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); box-shadow: none; }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 16px var(--acc1-glow); }
}

.display-md {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.05;
  margin: 0;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
  max-width: 300px;
}
.muted { color: var(--ink-2); font-size: 16px; line-height: 1.4; max-width: 280px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.status-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 12px var(--good);
}

/* Screen: Loading (phone) */
.screen-loading .spinner { width: 72px; height: 72px; border-width: 4px; }

/* ── Mobile fine-tuning ───────────────────────────────── */
@media (max-width: 360px) {
  .display-xl { font-size: 40px; }
  .display-lg { font-size: 28px; }
  .avatar-cell { font-size: 24px; }
  .screen-join { padding: 24px 20px 120px; }
  .phone-foot { padding: 0 20px; }
}

/* ══════════════════════════════════════════════════════
   PHASE 3 — Quiz / Reveal / Scoreboard / End
   ══════════════════════════════════════════════════════ */

/* ── Helper ─────────────────────────────────────────── */
.accent-good { color: var(--good) !important; }
.display { font-family: var(--font-display); letter-spacing: -0.01em; }

/* ── Loading Countdown (TV) ─────────────────────────── */
.countdown {
  font-family: var(--font-display);
  font-size: clamp(120px, 15vw, 280px);
  line-height: 1;
  color: var(--acc1);
  text-shadow: 0 0 80px var(--acc1-glow);
  margin-top: clamp(16px, 1.5vw, 32px);
  animation: countdown-pop 1s ease-out;
}
@keyframes countdown-pop {
  from { opacity: 0; transform: scale(1.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Quiz-Screen Layout ─────────────────────────────── */
.quiz-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(14px, 1.3vw, 28px);
}

.round-bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 24px);
}
.round-strip {
  flex: 1;
  display: flex;
  gap: 6px;
}
.round-seg {
  flex: 1;
  height: 6px;
  background: var(--bg-3);
  opacity: 0.5;
  border-radius: 999px;
  transition: background 0.3s, opacity 0.3s;
}
.round-seg.active {
  background: var(--acc1);
  opacity: 1;
  box-shadow: 0 0 8px var(--acc1-glow);
}
.round-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(8px, 0.7vw, 14px) clamp(14px, 1.3vw, 26px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: clamp(16px, 1.3vw, 24px);
}
.round-pill.reveal-pill { border-color: var(--good); }

/* Question-Block */
.question-block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 2vw, 40px);
  align-items: center;
}
.question-text-wrap { min-width: 0; }
.question-text {
  font-size: clamp(36px, 4.2vw, 78px);
  line-height: 1.05;
  margin: 8px 0 0;
  letter-spacing: -0.01em;
}
.question-meta {
  margin-top: 12px;
  font-size: clamp(12px, 0.9vw, 16px);
}
.fun-fact {
  margin-top: clamp(16px, 1.3vw, 28px);
  padding: clamp(14px, 1vw, 22px) clamp(18px, 1.5vw, 28px);
  background: oklch(0.14 0.02 285 / 0.6);
  border: 1px solid var(--acc1-soft);
  border-left: 3px solid var(--acc1);
  border-radius: var(--r-md);
  color: var(--ink-1);
  font-size: clamp(15px, 1.1vw, 20px);
  line-height: 1.4;
  max-width: 80ch;
}

/* Timer-Ring */
.timer-ring {
  width: clamp(180px, 14vw, 280px);
  aspect-ratio: 1 / 1;
  position: relative;
  flex-shrink: 0;
}
.timer-svg { width: 100%; height: 100%; overflow: visible; }
.timer-track { stroke: var(--bg-3); stroke-width: 14; fill: none; }
.timer-progress {
  stroke: var(--acc1);
  stroke-width: 14;
  fill: none;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 20px var(--acc1-glow));
  transition: stroke-dashoffset 0.5s linear, stroke 0.2s;
}
.timer-progress.danger {
  stroke: var(--danger);
  filter: drop-shadow(0 0 20px var(--danger));
  animation: timer-urgent 0.8s ease-in-out infinite;
}
@keyframes timer-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
.timer-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.timer-sec {
  font-size: clamp(60px, 6.5vw, 120px);
  line-height: 1;
  color: var(--ink-0);
  font-family: var(--font-display);
}
.timer-sec.danger { color: var(--danger); animation: timer-urgent 0.8s ease-in-out infinite; }

/* Answer-Grid */
.answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1vw, 24px);
  min-height: 0;
}
.answer-card {
  --a-color: var(--acc1);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(16px, 1.5vw, 32px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
  position: relative;
  overflow: hidden;
  min-height: 0;
  animation: card-in 0.35s cubic-bezier(0.22, 0.9, 0.32, 1.2) both;
}
.answer-card:nth-child(1) { animation-delay: 0.05s; }
.answer-card:nth-child(2) { animation-delay: 0.10s; }
.answer-card:nth-child(3) { animation-delay: 0.15s; }
.answer-card:nth-child(4) { animation-delay: 0.20s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.answer-key {
  width: clamp(52px, 4.2vw, 84px);
  height: clamp(52px, 4.2vw, 84px);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 44px);
  display: grid;
  place-items: center;
  border-radius: clamp(16px, 1.5vw, 28px);
}
.answer-text {
  font-size: clamp(22px, 2.3vw, 44px);
  color: var(--ink-0);
  line-height: 1.1;
  overflow: hidden;
}
.answer-dot { display: none; }

/* Reveal-States */
.answer-card.reveal.correct {
  border: 2px solid var(--good);
  box-shadow: 0 0 0 2px var(--good), 0 20px 60px -10px var(--good);
  background: linear-gradient(180deg, oklch(0.28 0.1 150 / 0.5), var(--bg-1));
  animation: correct-pulse 1.2s ease-in-out infinite;
}
@keyframes correct-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--good), 0 20px 60px -10px var(--good); }
  50%      { box-shadow: 0 0 0 2px var(--good), 0 20px 80px 0 var(--good); }
}
.answer-card.reveal.dimmed {
  opacity: 0.35;
  filter: grayscale(0.6);
}
.answer-check {
  position: absolute;
  top: clamp(10px, 0.8vw, 18px);
  right: clamp(14px, 1.1vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 48px);
  color: var(--good);
  text-shadow: 0 0 20px var(--good);
}

/* Vote-Meter */
.vote-meter {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.3vw, 28px);
  padding: clamp(10px, 0.9vw, 20px) clamp(18px, 1.5vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  min-height: 56px;
}
.vote-avatars {
  display: flex;
  gap: clamp(6px, 0.5vw, 12px);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.vote-avatar {
  width: clamp(32px, 2.4vw, 48px);
  height: clamp(32px, 2.4vw, 48px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 20px);
  color: var(--bg-0);
  opacity: 0.35;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
}
.vote-avatar.voted {
  opacity: 1;
  filter: none;
  transform: scale(1.05);
  animation: voted-pop 0.4s ease-out;
}
@keyframes voted-pop {
  0%   { transform: scale(0.9); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1.05); }
}
.vote-count {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: clamp(18px, 1.6vw, 30px);
}

/* Reveal-Stats */
.reveal-stats {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.9vw, 18px);
  min-width: clamp(180px, 14vw, 260px);
}
.stat-card {
  padding: clamp(14px, 1.1vw, 22px) clamp(18px, 1.5vw, 28px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 48px);
  color: var(--ink-0);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.reveal-fastest-time {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.3vw, 24px);
  color: var(--ink-2);
  letter-spacing: 0.05em;
}

/* ── Scoreboard (TV) ────────────────────────────────── */
.scoreboard-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "podium list";
  gap: clamp(16px, 1.5vw, 32px);
  min-height: 0;
}
.sb-header { grid-area: header; }
.sb-podium { grid-area: podium; min-height: 0; }
.sb-list { grid-area: list; }
.sb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.sb-next {
  text-align: right;
}
.sb-countdown {
  font-size: clamp(36px, 3.5vw, 64px);
  color: var(--acc1);
  line-height: 1;
}
.sb-podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: clamp(16px, 1.4vw, 32px);
  align-items: end;
  min-height: 0;
}
.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}
.podium-avatar {
  width: clamp(80px, 7vw, 130px);
  height: clamp(80px, 7vw, 130px);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 64px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 14px;
}
.podium-col.winner .podium-avatar {
  border: 3px solid var(--acc1);
  box-shadow: 0 0 60px var(--acc1-glow);
}
.podium-name {
  font-size: clamp(20px, 1.9vw, 34px);
  margin-bottom: 4px;
}
.podium-block {
  width: 100%;
  padding: clamp(12px, 1vw, 22px) 0;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 32px 32px 0 0;
  text-align: center;
  margin-top: 12px;
}
.podium-col.sm .podium-block { min-height: clamp(120px, 18vh, 220px); }
.podium-col.md .podium-block { min-height: clamp(90px, 14vh, 170px); }
.podium-col.lg .podium-block {
  min-height: clamp(180px, 28vh, 340px);
  background: linear-gradient(180deg, var(--acc1), var(--acc1-soft));
  border-color: var(--acc1);
}
.podium-col.lg .podium-rank, .podium-col.lg .podium-score { color: var(--bg-0); }
.podium-rank { font-size: clamp(52px, 5vw, 100px); line-height: 0.9; }
.podium-score { font-size: clamp(20px, 1.9vw, 36px); margin-top: 4px; }

.sb-list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.5vw, 12px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding-right: 4px;
}
.sb-list::-webkit-scrollbar { display: none; }
.sb-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr auto;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  padding: clamp(8px, 0.7vw, 14px) clamp(14px, 1.2vw, 24px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
}
.sb-row.leader {
  background: var(--acc1-soft);
  border-color: var(--acc1);
}
.sb-row.leader .sb-rank, .sb-row.leader .sb-score { color: var(--acc1); }
.sb-rank { font-family: var(--font-display); font-size: clamp(20px, 1.6vw, 30px); color: var(--ink-3); z-index: 1; }
.sb-avatar {
  width: 40px; height: 40px;
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 1;
}
.sb-name {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 26px);
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}
.streak-badge {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.85vw, 15px);
  color: var(--warn);
  background: oklch(0.18 0.08 50 / 0.5);
  border: 1px solid var(--warn);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px var(--warn);
  white-space: nowrap;
}
.streak-badge.fof {
  font-size: clamp(11px, 0.9vw, 16px);
  color: var(--warn);
  background: linear-gradient(180deg, oklch(0.22 0.14 55 / 0.55), oklch(0.14 0.06 50 / 0.4));
  border-color: var(--warn);
  text-shadow: 0 0 10px color-mix(in oklch, var(--warn) 60%, transparent);
  box-shadow: 0 0 14px color-mix(in oklch, var(--warn) 20%, transparent);
  padding: 3px 12px;
}
.sb-score { font-family: var(--font-display); font-size: clamp(18px, 1.5vw, 30px); text-align: right; z-index: 1; }
.sb-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--acc1) 55%, transparent) 0%,
    color-mix(in oklch, var(--acc1) 25%, transparent) 70%,
    transparent 100%);
  opacity: 1;
  z-index: 0;
}
.sb-row.leader .sb-bar {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--acc1) 70%, transparent) 0%,
    color-mix(in oklch, var(--acc1) 30%, transparent) 80%,
    transparent 100%);
}

/* ── End (TV) ────────────────────────────────────────── */
.end-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 48px);
  align-items: center;
}
.end-winner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 0.7vw, 16px);
}
.end-avatar {
  width: clamp(160px, 14vw, 280px);
  height: clamp(160px, 14vw, 280px);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 140px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid var(--acc1);
  box-shadow: 0 0 120px var(--acc1-glow);
  animation: end-float 4s ease-in-out infinite;
}
@keyframes end-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.end-name {
  font-size: clamp(48px, 5vw, 92px);
  line-height: 1;
  margin: 0;
}
.end-score {
  font-size: clamp(36px, 4vw, 72px);
  color: var(--acc1);
  margin-top: 4px;
}
.end-runners {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 14px);
  overflow: hidden;
}
.runner-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr auto;
  align-items: center;
  gap: clamp(10px, 0.9vw, 18px);
  padding: clamp(10px, 0.9vw, 16px) clamp(14px, 1.2vw, 22px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.runner-rank { font-size: clamp(18px, 1.5vw, 28px); color: var(--ink-3); }
.runner-avatar { width: 40px; height: 40px; color: var(--bg-0); font-family: var(--font-display); font-size: 18px; display: grid; place-items: center; border-radius: 50%; }
.runner-name { font-size: clamp(16px, 1.3vw, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runner-score { font-size: clamp(18px, 1.5vw, 28px); text-align: right; color: var(--ink-1); }
.end-footer {
  position: absolute;
  bottom: clamp(-80px, -9vh, -60px);
  left: 0;
  right: 0;
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   PHASE 3 — Phone Screens
   ══════════════════════════════════════════════════════ */

.countdown-phone {
  font-size: clamp(100px, 40vw, 180px);
  color: var(--acc1);
  text-shadow: 0 0 40px var(--acc1-glow);
  line-height: 1;
  animation: countdown-pop 1s ease-out;
}

/* Answer-Screen */
.screen-answer {
  padding: 16px 18px 24px;
  gap: 14px;
  display: flex;
  flex-direction: column;
}
.answer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  gap: 12px;
}
.answer-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mini-timer {
  position: relative;
  width: 48px;
  height: 48px;
}
.mini-timer-svg { width: 100%; height: 100%; }
.mini-timer .timer-track { stroke: var(--bg-3); stroke-width: 3; fill: none; }
.mini-timer .timer-progress {
  stroke: var(--acc1);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 4px var(--acc1));
  transition: stroke-dashoffset 0.5s linear, stroke 0.2s;
}
.mini-timer .timer-progress.danger { stroke: var(--danger); filter: drop-shadow(0 0 4px var(--danger)); }
.mini-timer-sec {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-0);
}

.answer-question {
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  font-size: 17px;
  line-height: 1.3;
  color: #e8e4f0;
}
.answer-selected-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 8px;
  padding: 7px 14px;
  background: oklch(0.1 0.02 285 / 0.9);
  border: 1px solid var(--acc1);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  color: oklch(0.82 0.18 20);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.answer-selected-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: oklch(0.82 0.18 20);
  box-shadow: 0 0 8px oklch(0.82 0.18 20);
}

.answer-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}
.p-answer-btn {
  --a-color: var(--acc1);
  background: var(--bg-2);
  color: var(--ink-0);
  border: 2px solid var(--line);
  border-radius: 24px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  text-align: left;
}
.p-answer-btn:active:not(:disabled) { transform: scale(0.97); }
.p-answer-btn:disabled { cursor: default; opacity: 0.4; }
.p-answer-btn.selected {
  background: var(--a-color);
  color: var(--bg-0);
  border-color: var(--a-color);
  box-shadow: 0 10px 40px var(--a-color), 0 0 0 4px color-mix(in oklch, var(--a-color) 20%, transparent);
  transform: scale(1.02);
  opacity: 1 !important;
}
.p-answer-btn.selected .p-answer-key {
  background: var(--bg-0) !important;
  color: var(--a-color) !important;
}
.p-answer-key {
  width: 36px;
  height: 36px;
  font-family: var(--font-display);
  font-size: 18px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  flex-shrink: 0;
}
.p-answer-text {
  font-size: clamp(15px, 4.2vw, 20px);
  line-height: 1.15;
  max-width: 100%;
  word-break: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Feedback */
.screen-feedback {
  padding: 28px 24px 60px;
}
.feedback-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.feedback-icon {
  width: 140px;
  height: 140px;
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 8px;
  animation: feedback-pop 0.45s cubic-bezier(0.22, 0.9, 0.32, 1.2);
}
.feedback-icon.correct { background: var(--good); box-shadow: 0 0 80px var(--good), 0 0 30px var(--good); }
.feedback-icon.wrong { background: var(--danger); box-shadow: 0 0 80px var(--danger), 0 0 30px var(--danger); }
@keyframes feedback-pop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.mono-label.correct { color: var(--good); }
.mono-label.wrong { color: var(--danger); }
.feedback-points {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 28px;
  background: var(--bg-2);
  border: 1.5px solid var(--good);
  border-radius: 28px;
  margin-top: 8px;
}
.feedback-points .display:nth-child(1) { font-size: 20px; color: var(--ink-2); }
.feedback-points #fb-points { font-size: 52px; color: var(--good); }
.feedback-icon.wrong ~ * .feedback-points { border-color: var(--danger); }
.screen-feedback:has(.feedback-icon.wrong) .feedback-points { border-color: var(--danger); }
.screen-feedback:has(.feedback-icon.wrong) .feedback-points #fb-points { color: var(--danger); }

.feedback-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: oklch(0.14 0.02 285 / 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  margin-top: 4px;
}
.feedback-rank .display { font-size: 22px; }
.fb-sep { width: 1px; height: 20px; background: var(--line); }

/* Scoreboard (phone) */
.screen-scoreboard {
  padding: 32px 22px 40px;
}
.p-sb-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.p-sb-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.p-sb-row {
  display: grid;
  grid-template-columns: 40px 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.p-sb-row.me {
  background: var(--acc1-soft);
  border-color: var(--acc1);
}
.p-sb-rank { font-size: 18px; color: var(--ink-3); }
.p-sb-avatar { width: 32px; height: 32px; color: var(--bg-0); font-family: var(--font-display); font-size: 14px; display: grid; place-items: center; border-radius: 50%; }
.p-sb-name { font-family: var(--font-display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-sb-score { font-family: var(--font-display); font-size: 18px; }

/* End (phone) */
.screen-end {
  padding: 40px 24px;
}
.p-end-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}
.p-end-trophy {
  font-size: 96px;
  line-height: 1;
  animation: end-float 4s ease-in-out infinite;
}
.p-end-rank {
  font-size: 36px;
  color: var(--acc1);
}
#p-end-score { font-size: 64px; color: var(--ink-0); }

/* Expired (phone) — Raum wurde zurückgesetzt */
.screen-expired {
  padding: 40px 24px;
}
.p-expired-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.p-expired-icon {
  font-size: 72px;
  line-height: 1;
  color: var(--acc1);
  opacity: 0.85;
  animation: end-float 4s ease-in-out infinite;
}
#p-expired-reason {
  max-width: 32ch;
  line-height: 1.5;
}
#p-expired-rejoin {
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════
   PHASE 5 — Bonus-Runden + Reactions
   ══════════════════════════════════════════════════════ */

/* Bonus-Badge im Round-Bar */
.bonus-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: clamp(8px, 0.7vw, 14px) clamp(16px, 1.3vw, 26px);
  background: linear-gradient(135deg, var(--warn), oklch(0.8 0.2 35));
  color: var(--bg-0);
  border-radius: var(--r-pill);
  font-size: clamp(16px, 1.3vw, 24px);
  box-shadow: 0 0 32px var(--warn), 0 0 64px color-mix(in oklch, var(--warn) 30%, transparent);
  animation: bonus-pulse 1.5s ease-in-out infinite;
}
.bonus-badge .mono-label { color: var(--bg-0); margin: 0; font-weight: 700; }
@keyframes bonus-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 32px var(--warn), 0 0 64px color-mix(in oklch, var(--warn) 30%, transparent); }
  50%      { transform: scale(1.04); box-shadow: 0 0 48px var(--warn), 0 0 80px color-mix(in oklch, var(--warn) 50%, transparent); }
}

/* Bonus-Runde: dezenter goldener Halo von oben + Akzente, KEIN harter Rahmen
   Gilt für ALLE Modi (Quiz, SW, WBI, Timeline, FoF) — alle Screen-Container
   haben bereits position: absolute gesetzt, der ::before-Halo positioniert
   sich relativ dazu. */
.screen.bonus-round::before {
  content: '';
  position: absolute;
  top: calc(-1 * clamp(60px, 8vh, 120px));
  left: -5vw;
  right: -5vw;
  height: clamp(200px, 26vh, 360px);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in oklch, var(--warn) 55%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 10%, color-mix(in oklch, var(--warn) 30%, transparent), transparent 50%),
    radial-gradient(ellipse at 80% 15%, color-mix(in oklch, var(--warn) 25%, transparent), transparent 50%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  animation: bonus-glow 3s ease-in-out infinite;
}
.screen.bonus-round > * { position: relative; z-index: 1; }

@keyframes bonus-glow {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}

/* Dezenter Gold-Hauch auf Answer-Cards (nur Quiz-Modus hat die) */
.screen.bonus-round .answer-card {
  border-color: color-mix(in oklch, var(--warn) 22%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--warn) 15%, transparent);
}

/* Round-Strip: aktive Segmente golden */
.screen.bonus-round .round-seg.active {
  background: var(--warn);
  box-shadow: 0 0 12px color-mix(in oklch, var(--warn) 60%, transparent);
}

/* Kicker („◆ FRAGE N" etc.) golden bei Bonus — überschreibt Modus-Akzentfarben */
.screen.bonus-round .kicker-lg {
  color: var(--warn);
}

/* Timer-Ring bei Bonus — Stage-1 geht auf Gold statt Accent */
.screen.bonus-round .timer-progress.stage-1 {
  stroke: var(--warn);
  filter: drop-shadow(0 0 28px var(--warn));
}

/* Reactions-Layer: Emojis floaten von unten-rechts nach oben */
.reactions-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}
.reaction-float {
  position: absolute;
  bottom: clamp(90px, 11vh, 140px);
  right: var(--offset, 8%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: reaction-rise 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}
.reaction-emoji {
  font-size: clamp(48px, 5vw, 96px);
  line-height: 1;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
}
.reaction-name {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 18px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 10px;
  background: oklch(0.14 0.02 285 / 0.8);
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
@keyframes reaction-rise {
  0%   { opacity: 0; transform: translateY(40px) scale(0.5); }
  15%  { opacity: 1; transform: translateY(0) scale(1.1); }
  25%  { transform: translateY(-20px) scale(1); }
  100% { opacity: 0; transform: translateY(-380px) scale(0.8); }
}

/* ── Phone: Emoji-Bar ───────────────────────────────── */
.emoji-bar {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: oklch(0.14 0.02 285 / 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  justify-content: space-between;
  margin-top: auto;
}
.emoji-btn {
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 28px;
  padding: 8px 0;
  border-radius: 999px;
  transition: background 0.15s, transform 0.12s;
  line-height: 1;
}
.emoji-btn:active:not(:disabled) {
  transform: scale(1.3);
  background: oklch(0.25 0.05 285 / 0.6);
}
.emoji-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Phone-Feedback: Streak-Badge */
.fb-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border: 1px solid var(--warn);
  border-radius: 999px;
  margin-top: 6px;
  text-shadow: 0 0 8px var(--warn);
}

/* Phone-Bonus-Indicator im Answer-Head */
.answer-head-bonus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bg-0);
  background: var(--warn);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.14em;
  box-shadow: 0 0 12px var(--warn);
  animation: bonus-pulse 1.5s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   PHASE 6 — Main-Menu, Settings, End-Actions
   ══════════════════════════════════════════════════════ */

/* ── Main-Menu ─────────────────────────────────────── */
.main-menu {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(20px, 2.1vw, 48px);
  min-height: 0;
}

.mm-hero {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1) 60%);
  border: 1px solid var(--acc1);
  border-radius: var(--r-xl);
  padding: clamp(36px, 3.5vw, 72px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--acc1-soft), 0 40px 80px -20px var(--acc1-glow);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mm-hero-glyph {
  position: absolute;
  top: clamp(-60px, -5vw, -40px);
  right: clamp(-40px, -3vw, -20px);
  font-family: var(--font-display);
  font-size: clamp(300px, 38vw, 640px);
  color: var(--acc1);
  opacity: 0.12;
  line-height: 0.85;
  pointer-events: none;
  user-select: none;
  transition: color 0.3s;
}
.mm-hero-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 2.5vw, 44px);
  position: relative;
  z-index: 1;
}
.mm-hero-head .mm-hero-selected {
  color: var(--acc1);
  margin: 0;
  letter-spacing: 0.2em;
}
.mm-hero-sep {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--acc1), transparent);
}
.mm-hero-head .mono-label { margin: 0; }
.mm-hero-meta {
  color: var(--ink-3);
  letter-spacing: 0.14em;
  margin-bottom: clamp(12px, 1vw, 20px);
  position: relative;
  z-index: 1;
}
.mm-hero-title {
  font-size: clamp(72px, 8vw, 160px);
  line-height: 0.9;
  margin: 0 0 clamp(14px, 1.2vw, 26px);
  color: var(--ink-0);
  position: relative;
  z-index: 1;
}
.mm-hero-desc {
  font-size: clamp(18px, 1.8vw, 32px);
  color: var(--ink-1);
  line-height: 1.3;
  max-width: 60ch;
  margin: 0 0 clamp(36px, 3.5vw, 72px);
  position: relative;
  z-index: 1;
}
.mm-hero-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 24px);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.mm-hero-hint {
  color: var(--ink-3);
  letter-spacing: 0.14em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-hero-hint .key { min-width: 28px; height: 28px; font-size: 12px; }

.mm-list-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.9vw, 18px);
  min-width: 0;
  min-height: 0;
}
.mm-list-title { color: var(--ink-3); letter-spacing: 0.22em; margin: 0 0 4px; }
.mm-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 14px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  min-height: 0;
}
.mm-list::-webkit-scrollbar { display: none; }

.mode-card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(12px, 1vw, 20px) clamp(16px, 1.3vw, 26px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 1.2vw, 22px);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
  min-width: 0;
}
.mode-card:hover { border-color: var(--acc1-soft); transform: translateX(4px); }
.mode-card.active {
  border-color: var(--acc1);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 0 0 1px var(--acc1-soft);
}
.mode-card.unavailable { opacity: 0.45; cursor: not-allowed; }
.mode-icon {
  width: clamp(44px, 3.5vw, 60px);
  height: clamp(44px, 3.5vw, 60px);
  background: var(--bg-3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 34px);
  color: var(--acc1);
  border-radius: clamp(12px, 1vw, 18px);
  flex-shrink: 0;
}
.mode-card.unavailable .mode-icon { color: var(--ink-3); }
.mode-card-meta { min-width: 0; }
.mode-card-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.05;
  margin-bottom: 3px;
  color: var(--ink-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-card-desc {
  font-size: clamp(12px, 1vw, 16px);
  color: var(--ink-2);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mode-card-tag {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.75vw, 13px);
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mode-card-coming {
  font-family: var(--font-mono);
  font-size: clamp(9px, 0.7vw, 11px);
  color: var(--ink-3);
  background: var(--bg-3);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Lobby Settings ────────────────────────────────── */
.lobby-settings {
  margin-top: clamp(10px, 0.9vw, 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 14px);
  padding: clamp(12px, 1vw, 20px) clamp(16px, 1.3vw, 24px);
  background: oklch(0.14 0.02 285 / 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.setting-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 0.8vw, 18px);
  min-width: 0;
}
.setting-row .mono-label {
  min-width: clamp(90px, 7vw, 120px);
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(10px, 0.85vw, 14px);
}
.chip-group {
  display: flex;
  gap: clamp(6px, 0.5vw, 10px);
  flex-wrap: wrap;
  flex: 1;
}
.chip {
  padding: clamp(6px, 0.5vw, 10px) clamp(12px, 1vw, 18px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 14px);
  color: var(--ink-2);
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--acc1-soft); color: var(--ink-0); }
.chip.active {
  background: var(--acc1);
  color: var(--bg-0);
  border-color: var(--acc1);
  box-shadow: 0 0 20px var(--acc1-glow);
}

/* ── End-Screen: Stats + Actions ───────────────────── */
.end-stats {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 0.9vw, 18px);
  margin-bottom: clamp(16px, 1.5vw, 28px);
}
.end-stat {
  padding: clamp(14px, 1.2vw, 22px);
  background: oklch(0.14 0.02 285 / 0.5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.end-stat .mono-label { margin: 0; color: var(--ink-3); font-size: clamp(10px, 0.8vw, 13px); }
.end-stat .display { font-size: clamp(24px, 2vw, 38px); color: var(--ink-0); line-height: 1; }

.end-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(10px, 0.9vw, 18px);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(16px, 1.5vw, 28px);
}

/* End-Screen Grid neu (stats + actions integrieren) */
.end-screen {
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    "winner runners"
    "winner stats"
    "actions actions";
  align-items: center;
}
.end-winner { grid-area: winner; }
.end-runners { grid-area: runners; align-self: start; }
.end-stats { grid-area: stats; }
.end-actions { grid-area: actions; }

/* ══════════════════════════════════════════════════════
   PHASE 6 — Phone Meme-Picker
   ══════════════════════════════════════════════════════ */

.avatar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.avatar-head .mono-label { margin: 0; }
.avatar-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: oklch(0.14 0.02 285 / 0.6);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.avatar-tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.avatar-tab.active {
  background: var(--acc1);
  color: var(--bg-0);
}

.meme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.meme-cell {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  border: 3px solid transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s, box-shadow 0.2s;
}
.meme-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.meme-cell.selected {
  border-color: var(--acc1);
  box-shadow: 0 0 0 4px var(--acc1-soft), 0 0 24px var(--acc1-glow);
  transform: scale(1.05);
}
.meme-cell.taken {
  cursor: not-allowed;
  opacity: 0.25;
  filter: grayscale(0.8);
}
.meme-empty {
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  font-family: var(--font-mono);
}

/* Wait-Avatar als Meme */
.wait-avatar.has-meme {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
}

/* TV: Avatar als Meme (globales Pattern) */
.has-meme {
  background-size: cover !important;
  background-position: center !important;
  color: transparent !important;
  text-indent: -9999px;
}

.screen-menu {
  padding: 32px 24px 60px;
}
.menu-icon {
  width: 130px;
  height: 130px;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  color: var(--acc1);
  font-family: var(--font-display);
  font-size: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--acc1);
  box-shadow: 0 0 60px var(--acc1-glow);
  animation: avatar-breath 3s ease-in-out infinite;
  margin-bottom: 12px;
}
.screen-menu .kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--acc1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 8px 0;
}

/* ══════════════════════════════════════════════════════
   PHASE 7 — Timer 3-Stages + Mute-Toast
   ══════════════════════════════════════════════════════ */

/* 3-Stage Timer: Gold → Orange → Rot */
.timer-progress.stage-1 {
  stroke: var(--warn);
  filter: drop-shadow(0 0 20px var(--warn));
  animation: none;
}
.timer-progress.stage-2 {
  stroke: oklch(0.78 0.2 40); /* intensiveres Orange */
  filter: drop-shadow(0 0 24px oklch(0.78 0.2 40));
  animation: timer-pulse 1.3s ease-in-out infinite;
}
.timer-progress.stage-3 {
  stroke: var(--danger);
  filter: drop-shadow(0 0 28px var(--danger));
  animation: timer-urgent 0.6s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}
.timer-sec.danger { animation: timer-urgent 0.6s ease-in-out infinite; }

/* Mute-Toast */
.mute-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  padding: clamp(18px, 1.6vw, 32px) clamp(28px, 2.5vw, 52px);
  background: oklch(0.1 0.02 285 / 0.92);
  border: 1px solid var(--acc1);
  border-radius: var(--r-pill);
  box-shadow: 0 0 80px var(--acc1-glow);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 36px);
  color: var(--ink-0);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  z-index: 100;
  backdrop-filter: blur(10px);
}
.mute-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.mute-icon {
  font-size: 1.4em;
  filter: drop-shadow(0 0 12px var(--acc1-glow));
}

/* ══════════════════════════════════════════════════════
   PHASE 8 — Pause-Overlay, Foto-Modus, Spotify-Player
   ══════════════════════════════════════════════════════ */

.pause-overlay {
  position: fixed;
  inset: 0;
  background: oklch(0.08 0.02 285 / 0.85);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.pause-overlay.show { opacity: 1; pointer-events: auto; }
.pause-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: clamp(40px, 5vw, 80px) clamp(60px, 7vw, 120px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--acc1);
  border-radius: var(--r-xl);
  box-shadow: 0 0 120px var(--acc1-glow);
  animation: pause-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes pause-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Foto-Modus: Alles Chromes weg für saubere Screenshots ── */
.photo-mode .chrome-top,
.photo-mode .chrome-bottom,
.photo-mode .end-actions,
.photo-mode .end-footer,
.photo-mode .pill {
  opacity: 0 !important;
  transition: opacity 0.3s;
  pointer-events: none;
}
.photo-mode .logo {
  opacity: 0.35 !important;
}
.photo-mode .chrome-top {
  opacity: 0.2 !important;
}
/* Logo bleibt dezent, aber Clock/Room/Count verschwinden */
.photo-mode .chrome-top .chrome-right { display: none; }

/* ── Spotify Mini-Player ── */
.spotify-player {
  position: fixed;
  bottom: clamp(16px, 2vh, 28px);
  left: clamp(24px, 2.5vw, 60px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: oklch(0.14 0.02 285 / 0.85);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  z-index: 50;
  transition: opacity 0.3s, transform 0.3s;
  max-width: clamp(280px, 26vw, 480px);
  min-width: 0;
}
.spotify-player.collapsed {
  transform: translateY(calc(100% + 20px));
  opacity: 0;
  pointer-events: none;
}
.spotify-player.disconnected {
  border-color: var(--ink-3);
  opacity: 0.6;
}
.spotify-cover {
  width: 40px;
  height: 40px;
  background: var(--bg-3) center/cover no-repeat;
  border-radius: 10px;
  flex-shrink: 0;
}
.spotify-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.spotify-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotify-artist {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}
.spotify-controls { display: flex; gap: 6px; }
.spotify-btn {
  background: transparent;
  border: none;
  color: var(--ink-1);
  font-size: 18px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s;
}
.spotify-btn:hover { background: var(--bg-3); }
.spotify-btn.primary { color: oklch(0.75 0.22 145); }
.spotify-connect {
  background: oklch(0.75 0.22 145);
  color: var(--bg-0);
  border: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
}

/* Spotify Connect-Button (wenn noch nicht verbunden) */
.spotify-connect-btn {
  padding: 10px 20px !important;
  background: linear-gradient(135deg, oklch(0.75 0.22 145), oklch(0.65 0.2 145)) !important;
  color: var(--bg-0);
  border: none;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px oklch(0.65 0.22 145 / 0.4);
  transition: transform 0.15s, box-shadow 0.2s;
}
.spotify-connect-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px oklch(0.65 0.22 145 / 0.5);
}
.photo-mode .spotify-connect-btn,
.photo-mode .spotify-player { display: none !important; }

/* Spotify Playlist-Picker */
.spotify-picker {
  position: fixed;
  bottom: clamp(80px, 10vh, 120px);
  left: clamp(24px, 2.5vw, 60px);
  width: clamp(320px, 28vw, 480px);
  max-height: 60vh;
  background: oklch(0.1 0.02 285 / 0.95);
  border: 1px solid oklch(0.75 0.22 145);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px);
  z-index: 51;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: opacity 0.2s, transform 0.25s;
}
.spotify-picker.collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}
.sp-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.sp-picker-head .mono-label {
  margin: 0;
  color: oklch(0.75 0.22 145);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.sp-picker-list {
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.sp-picker-list::-webkit-scrollbar { width: 5px; }
.sp-picker-list::-webkit-scrollbar-thumb { background: oklch(0.65 0.2 145 / 0.5); border-radius: 3px; }
.sp-picker-empty {
  padding: 24px 18px;
  color: var(--ink-3);
  text-align: center;
  font-size: 13px;
  font-family: var(--font-mono);
}
.sp-playlist {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink-0);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s;
}
.sp-playlist:hover { background: oklch(0.75 0.22 145 / 0.15); }
.sp-playlist-cover {
  width: 44px;
  height: 44px;
  background: var(--bg-3) center/cover no-repeat;
  border-radius: 6px;
  flex-shrink: 0;
}
.sp-playlist-meta { min-width: 0; flex: 1; }
.sp-playlist-name {
  font-family: var(--font-display);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-playlist-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.photo-mode .spotify-picker { display: none !important; }

/* ══════════════════════════════════════════════════════
   PHASE 8b — Spotify-Positionen + Collapse
   ══════════════════════════════════════════════════════ */

/* Positions-Varianten */
.spotify-player.pos-bl, .spotify-picker.pos-bl, .spotify-mini.pos-bl { left: clamp(24px, 2.5vw, 60px); right: auto; bottom: clamp(16px, 2vh, 28px); top: auto; }
.spotify-player.pos-br, .spotify-picker.pos-br, .spotify-mini.pos-br { right: clamp(24px, 2.5vw, 60px); left: auto; bottom: clamp(16px, 2vh, 28px); top: auto; }
.spotify-player.pos-tl, .spotify-picker.pos-tl, .spotify-mini.pos-tl { left: clamp(24px, 2.5vw, 60px); right: auto; top: clamp(110px, 12vh, 140px); bottom: auto; }
.spotify-player.pos-tr, .spotify-picker.pos-tr, .spotify-mini.pos-tr { right: clamp(24px, 2.5vw, 60px); left: auto; top: clamp(110px, 12vh, 140px); bottom: auto; }

/* Picker oberhalb oder unterhalb des Players, je nach Position */
.spotify-picker.pos-bl, .spotify-picker.pos-br { bottom: clamp(82px, 10vh, 120px); top: auto; }
.spotify-picker.pos-tl, .spotify-picker.pos-tr { top: clamp(170px, 20vh, 220px); bottom: auto; }

/* Minimized: nur kleines Icon */
.spotify-player.minimized { display: none !important; }
.spotify-mini {
  position: fixed;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, oklch(0.75 0.22 145), oklch(0.55 0.2 145));
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4), 0 0 20px oklch(0.65 0.22 145 / 0.4);
  display: grid;
  place-items: center;
  transition: transform 0.15s, box-shadow 0.2s;
}
.spotify-mini:hover { transform: scale(1.1); }

/* Divider zwischen Controls und Aktions-Buttons */
.sp-divider { margin-left: 4px; border-left: 1px solid var(--line); padding-left: 10px !important; }

/* Connect-Button folgt ebenfalls der Position */
.spotify-connect-btn.pos-bl { left: clamp(24px, 2.5vw, 60px); right: auto; bottom: clamp(16px, 2vh, 28px); top: auto; }
.spotify-connect-btn.pos-br { right: clamp(24px, 2.5vw, 60px); left: auto; bottom: clamp(16px, 2vh, 28px); top: auto; }
.spotify-connect-btn.pos-tl { left: clamp(24px, 2.5vw, 60px); right: auto; top: clamp(110px, 12vh, 140px); bottom: auto; }
.spotify-connect-btn.pos-tr { right: clamp(24px, 2.5vw, 60px); left: auto; top: clamp(110px, 12vh, 140px); bottom: auto; }

/* Photo-Mode: auch Mini-Icon weg */
.photo-mode .spotify-mini { display: none !important; }

/* ══════════════════════════════════════════════════════
   Fixes — lange Fragen, Main-Menu-Titel, Handy-Text
   ══════════════════════════════════════════════════════ */

/* Quiz-Screen bei langen Fragen: Block scrollt intern, Antworten bleiben sichtbar */
.quiz-screen {
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr) auto;
}
.question-block {
  max-height: 42vh;
  min-height: 0;
}
.question-text {
  font-size: clamp(28px, 3.3vw, 62px);
}
.question-text-wrap {
  overflow-y: auto;
  max-height: 40vh;
  padding-right: 8px;
  scrollbar-width: thin;
}
.question-text-wrap::-webkit-scrollbar { width: 4px; }
.question-text-wrap::-webkit-scrollbar-thumb { background: var(--acc1-soft); border-radius: 3px; }

/* Answer-Cards: Text darf auch wrappen bei langen Antworten */
.answer-card .answer-text {
  word-break: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Main-Menu Titel — break-word und sanftere Skalierung */
.mm-hero-title {
  font-size: clamp(56px, 6.5vw, 128px);
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
  line-height: 0.92;
}

/* ══════════════════════════════════════════════════════
   Kategorien-Wahl — TV + Phone
   ══════════════════════════════════════════════════════ */

.category-picker-tv {
  grid-column: 1 / -1;
  margin-top: clamp(12px, 1.2vw, 24px);
  padding: clamp(14px, 1.3vw, 26px) clamp(18px, 1.6vw, 32px);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--acc1);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 1.6vw, 32px);
  align-items: center;
  animation: cat-slide-in 0.4s ease-out;
}
@keyframes cat-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.cat-leader { display: flex; align-items: center; gap: clamp(10px, 0.9vw, 18px); }
.cat-leader-avatar {
  width: clamp(52px, 4vw, 72px);
  height: clamp(52px, 4vw, 72px);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 32px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.cat-leader-meta { min-width: 0; }
.cat-leader-meta .mono-label { margin: 0 0 2px; font-size: clamp(10px, 0.8vw, 13px); color: var(--ink-3); }
.cat-leader-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 32px);
  color: var(--acc1);
  line-height: 1;
}

.cat-options { display: flex; flex-wrap: wrap; gap: clamp(6px, 0.55vw, 12px); }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(7px, 0.6vw, 12px) clamp(12px, 1vw, 20px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 14px);
  color: var(--ink-2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s;
}
.cat-chip-icon { font-size: 1.2em; color: var(--acc1); }
.cat-chip.selected {
  background: var(--acc1);
  color: var(--bg-0);
  border-color: var(--acc1);
  box-shadow: 0 0 20px var(--acc1-glow);
  transform: scale(1.05);
}
.cat-chip.selected .cat-chip-icon { color: var(--bg-0); }
.cat-chip.dimmed { opacity: 0.35; }

/* ── Phone Kategorie-Wahl ───────────────────────────── */
.p-category-wrap {
  width: 100%;
  margin-top: 18px;
  padding: 16px 14px;
  background: oklch(0.14 0.02 285 / 0.7);
  border: 1px solid var(--acc1);
  border-radius: 22px;
  animation: cat-slide-in 0.3s ease-out;
}
.p-category-wrap .kicker {
  margin: 0 0 12px;
  text-align: center;
}
.p-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.p-cat-chip {
  padding: 10px 8px;
  background: var(--bg-2);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}
.p-cat-chip:active:not(:disabled) { transform: scale(0.96); }
.p-cat-chip.selected {
  background: var(--acc1);
  color: var(--bg-0);
  border-color: var(--acc1);
  box-shadow: 0 0 20px var(--acc1-glow);
}
.p-cat-chip.dimmed { opacity: 0.3; }
.p-cat-icon { font-size: 16px; color: var(--acc1); }
.p-cat-chip.selected .p-cat-icon { color: var(--bg-0); }
.p-cat-wait {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
}

/* ══════════════════════════════════════════════════════
   FAKE ODER FAKT? — Orange-Accent
   ══════════════════════════════════════════════════════ */

.fof-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "roundbar roundbar"
    "body timer"
    "vote vote";
  gap: clamp(14px, 1.3vw, 28px);
}
.fof-screen .round-bar { grid-area: roundbar; }
.fof-screen .fof-body { grid-area: body; display: flex; flex-direction: column; gap: clamp(14px, 1.2vw, 24px); min-height: 0; }
.fof-screen .fof-timer-ring { grid-area: timer; align-self: start; }
.fof-screen .vote-meter { grid-area: vote; }

.fof-screen .kicker-lg {
  color: var(--warn);
}

.fof-statement-box {
  background: linear-gradient(180deg, oklch(0.18 0.06 50 / 0.4), oklch(0.12 0.02 285));
  border: 2px solid var(--warn);
  border-radius: var(--r-xl);
  padding: clamp(40px, 4.5vw, 80px) clamp(60px, 6vw, 120px);
  position: relative;
  box-shadow: 0 0 60px color-mix(in oklch, var(--warn) 30%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(160px, 16vh, 280px);
}
.fof-quote-open, .fof-quote-close {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 140px);
  color: var(--warn);
  opacity: 0.3;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.fof-quote-open { top: clamp(6px, 0.8vw, 14px); left: clamp(18px, 2vw, 36px); }
.fof-quote-close { bottom: clamp(-28px, -2vw, -14px); right: clamp(18px, 2vw, 36px); }
.fof-statement-text {
  font-size: clamp(26px, 2.6vw, 48px);
  line-height: 1.3;
  color: var(--ink-0);
  text-align: center;
  word-break: break-word;
  hyphens: auto;
  max-width: 72ch;
  margin: 0 auto;
}

.fof-meta { color: var(--ink-3); letter-spacing: 0.18em; margin: 0; text-align: center; }

.fof-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.5vw, 32px);
  margin-top: auto;
}
.fof-btn {
  padding: clamp(22px, 2.2vw, 44px);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  text-transform: uppercase;
  transition: all 0.3s;
  border: 3px solid;
}
.fof-btn-label { font-size: clamp(32px, 3.2vw, 64px); letter-spacing: 0.05em; }
.fof-btn-sub { font-size: clamp(11px, 1vw, 16px); color: currentColor; opacity: 0.75; }
.fof-btn.fof-fakt {
  background: linear-gradient(180deg, oklch(0.28 0.12 150 / 0.4), oklch(0.12 0.02 285));
  border-color: var(--good);
  color: var(--good);
  box-shadow: 0 0 40px color-mix(in oklch, var(--good) 20%, transparent);
}
.fof-btn.fof-fake {
  background: linear-gradient(180deg, oklch(0.28 0.15 25 / 0.4), oklch(0.12 0.02 285));
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 40px color-mix(in oklch, var(--danger) 20%, transparent);
}

/* Reveal: verdict + farbiger Border */
.fof-reveal-verdict {
  font-size: clamp(36px, 3.6vw, 68px);
  text-align: center;
  margin: 0;
  animation: fof-verdict-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  line-height: 1;
}
.fof-reveal-verdict.fakt { color: var(--good); text-shadow: 0 0 40px var(--good); }
.fof-reveal-verdict.fake { color: var(--danger); text-shadow: 0 0 40px var(--danger); }
@keyframes fof-verdict-pop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.fof-statement-box.reveal-box.fakt {
  border-color: var(--good);
  box-shadow: 0 0 60px var(--good);
}
.fof-statement-box.reveal-box.fake {
  border-color: var(--danger);
  box-shadow: 0 0 60px var(--danger);
}

/* Reveal-Screen: FunFact + Stats nebeneinander, alles passt ohne Scroll */
.fof-reveal-screen {
  grid-template-columns: 1fr;
  grid-template-areas:
    "roundbar"
    "body";
}
.fof-reveal-screen .fof-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1vw, 20px);
  min-height: 0;
  padding: clamp(10px, 0.8vw, 18px);
}
/* FunFact + Stats in einer Row — spart vertikal Platz */
.fof-reveal-screen .fof-body > .fun-fact {
  margin: 0;
}
.fof-reveal-screen .reveal-stats {
  flex-direction: row;
  gap: clamp(10px, 1vw, 20px);
  min-width: 0;
  margin-top: auto;
}
.fof-reveal-screen .stat-card {
  flex: 1;
  padding: clamp(10px, 0.9vw, 18px) clamp(14px, 1.2vw, 22px);
}
.fof-reveal-screen .stat-value {
  font-size: clamp(22px, 1.9vw, 36px);
}

/* ── Phone: FOF Answer ──────────────────────────────── */
.screen-fof { padding: 16px 18px 24px; gap: 14px; display: flex; flex-direction: column; }
.fof-statement-phone {
  padding: 18px 22px;
  background: linear-gradient(180deg, oklch(0.18 0.06 50 / 0.3), var(--bg-2));
  border: 2px solid var(--warn);
  border-radius: 22px;
  font-size: clamp(17px, 4.4vw, 22px);
  line-height: 1.3;
  color: var(--ink-0);
  text-align: center;
  box-shadow: 0 0 24px color-mix(in oklch, var(--warn) 20%, transparent);
  word-break: break-word;
  hyphens: auto;
  max-height: 38vh;
  overflow-y: auto;
}
.p-fof-grid {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.p-fof-btn {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border-radius: 28px;
  border: 3px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.p-fof-btn:active:not(:disabled) { transform: scale(0.97); }
.p-fof-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.p-fof-btn-fakt {
  border-color: var(--good);
  color: var(--good);
  box-shadow: 0 0 32px color-mix(in oklch, var(--good) 20%, transparent);
}
.p-fof-btn-fake {
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: 0 0 32px color-mix(in oklch, var(--danger) 20%, transparent);
}
.p-fof-btn.selected.p-fof-btn-fakt {
  background: var(--good);
  color: var(--bg-0);
  transform: scale(1.02);
  box-shadow: 0 10px 40px var(--good);
}
.p-fof-btn.selected.p-fof-btn-fake {
  background: var(--danger);
  color: var(--bg-0);
  transform: scale(1.02);
  box-shadow: 0 10px 40px var(--danger);
}
.p-fof-label { font-size: 44px; letter-spacing: 0.04em; }
.p-fof-sub { font-size: 11px; opacity: 0.7; }

/* Streak-Label für FOF */
.fof-streak-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: oklch(0.14 0.02 285 / 0.8);
  border: 1px solid var(--warn);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 16px);
  color: var(--warn);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 16px color-mix(in oklch, var(--warn) 30%, transparent);
}

/* ══════════════════════════════════════════════════════
   WER BIN ICH? — Pink-Accent
   ══════════════════════════════════════════════════════ */

:root { --wbi-accent: oklch(0.72 0.23 350); --wbi-accent-glow: oklch(0.72 0.23 350 / 0.45); }

.wbi-screen {
  position: absolute;
  top: clamp(80px, 10vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(80px, 9vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "roundbar roundbar"
    "body timer"
    "vote vote";
  gap: clamp(10px, 1vw, 28px);
}
.wbi-screen .round-bar { grid-area: roundbar; }
.wbi-screen .wbi-body { grid-area: body; display: flex; flex-direction: column; gap: clamp(6px, 0.7vw, 16px); min-height: 0; overflow: hidden; }
.wbi-screen .wbi-timer-ring { grid-area: timer; align-self: start; }
.wbi-screen .vote-meter { grid-area: vote; }

.wbi-screen .kicker-lg { color: var(--wbi-accent); }

/* WBI Hints als Indicator-Pills (kompakt) — eigentlicher Hint-Text kommt als Toast von unten rein */
.wbi-hints-indicator {
  display: flex;
  gap: clamp(8px, 0.9vw, 18px);
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.wbi-hint-pill {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.7vw, 12px);
  padding: clamp(5px, 0.6vw, 12px) clamp(14px, 1.3vw, 24px);
  border: 2px solid color-mix(in oklch, var(--wbi-accent) 35%, transparent);
  border-radius: var(--r-pill);
  color: color-mix(in oklch, var(--ink-0) 40%, transparent);
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.wbi-hint-pill-num {
  font-size: clamp(16px, 1.5vw, 28px);
  color: color-mix(in oklch, var(--wbi-accent) 50%, transparent);
}
.wbi-hint-pill.active {
  border-color: var(--wbi-accent);
  color: var(--ink-0);
  background: color-mix(in oklch, var(--wbi-accent) 18%, var(--bg-2));
  box-shadow: 0 0 20px var(--wbi-accent-glow);
}
.wbi-hint-pill.active .wbi-hint-pill-num { color: var(--wbi-accent); }

/* Hint-Toast: Inline im Body-Flow. Begrenzt (max-height) damit Toast bei sehr langem Text
   nicht die Options verdrängt. Längere Hinweise werden am unteren Rand sauber abgeschnitten. */
.wbi-hint-toast {
  position: relative;
  width: 100%;
  max-width: min(72vw, 880px);
  margin: 0 auto;
  padding: clamp(14px, 1.2vw, 24px) clamp(22px, 2vw, 42px);
  background: linear-gradient(180deg, oklch(0.22 0.12 350 / 0.7), oklch(0.14 0.05 350 / 0.55));
  border: 2px solid color-mix(in oklch, var(--wbi-accent) 35%, transparent);
  border-radius: var(--r-xl);
  box-shadow: 0 0 40px color-mix(in oklch, var(--wbi-accent) 18%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 12px);
  flex: 0 0 auto;
  min-height: clamp(64px, 8vh, 110px);
  max-height: clamp(110px, 16vh, 170px);
  box-sizing: border-box;
  overflow: hidden;
  transition: opacity 0.45s, border-color 0.4s, box-shadow 0.4s;
}
/* Text atmet auf natürlicher Höhe. Überlauf-Safeguard kommt vom Toast-Container (overflow:hidden + max-height).
   Kein -webkit-line-clamp hier — verursacht in Chromium Intrinsic-Sizing-Clipping auf ~13px. */
.wbi-hint-toast-text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 1.5vw, 30px);
  line-height: 1.2;
  color: var(--ink-0);
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
/* Options behalten ihre Größe — werden nicht geshrunkt wenn Toast zu gross wird */
.wbi-options { flex-shrink: 0; }
/* Kein show-state → Content ausgeblendet, Box bleibt als leerer Platzhalter stehen */
.wbi-hint-toast > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.wbi-hint-toast.show {
  border-color: var(--wbi-accent);
  box-shadow: 0 0 60px var(--wbi-accent-glow);
}
.wbi-hint-toast.show > * {
  opacity: 1;
  transform: translateY(0);
}
.wbi-hint-toast-label {
  color: var(--wbi-accent);
  letter-spacing: 0.2em;
  font-size: clamp(11px, 0.9vw, 15px);
}
.wbi-meta {
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-align: center;
  margin: 0;
  flex-shrink: 0;
  font-size: clamp(10px, 0.9vw, 14px);
}
.wbi-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1vw, 18px);
  margin-top: auto;
  flex-shrink: 0;
}
.wbi-option {
  padding: clamp(10px, 1.1vw, 20px) clamp(14px, 1.4vw, 24px);
  border-radius: var(--r-xl);
  border: 3px solid var(--a-color);
  background: linear-gradient(180deg, color-mix(in oklch, var(--a-color) 20%, oklch(0.14 0.02 285)), oklch(0.12 0.02 285));
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  color: var(--ink-0);
  font-family: var(--font-display);
  box-shadow: 0 0 24px color-mix(in oklch, var(--a-color) 18%, transparent);
  transition: transform 0.15s, box-shadow 0.2s;
  min-height: 0;
}
.wbi-option .answer-key {
  font-size: clamp(24px, 2.1vw, 38px);
  color: var(--a-color);
  min-width: clamp(36px, 2.8vw, 48px);
  text-align: center;
}
.wbi-option .answer-text {
  font-size: clamp(17px, 1.5vw, 26px);
  line-height: 1.2;
  flex: 1;
}
.wbi-option.correct {
  border-color: var(--good);
  box-shadow: 0 0 40px var(--good);
  animation: wbi-correct-pulse 1.4s ease-in-out;
}
.wbi-option.dimmed { opacity: 0.35; }
@keyframes wbi-correct-pulse {
  0%, 100% { box-shadow: 0 0 40px var(--good); }
  50% { box-shadow: 0 0 70px var(--good); }
}
.wbi-reveal-headline {
  font-size: clamp(28px, 3vw, 56px);
  text-align: center;
  color: var(--good);
  text-shadow: 0 0 30px var(--good);
  margin: 0;
  line-height: 1.05;
}
.wbi-reveal-screen {
  grid-template-columns: 1fr;
  grid-template-areas:
    "roundbar"
    "body";
}
.wbi-reveal-screen .wbi-body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.9vw, 18px);
  min-height: 0;
  padding: clamp(10px, 0.8vw, 18px);
}
.wbi-reveal-screen .fun-fact { margin: 0; }
.wbi-reveal-screen .reveal-stats {
  flex-direction: row;
  gap: clamp(10px, 1vw, 20px);
  min-width: 0;
  margin-top: auto;
}
.wbi-reveal-screen .stat-card {
  flex: 1;
  padding: clamp(10px, 0.9vw, 18px) clamp(14px, 1.2vw, 22px);
}
.wbi-reveal-screen .stat-value {
  font-size: clamp(22px, 1.9vw, 36px);
}

/* ── Phone: WBI Answer ──────────────────────────────── */
.screen-wbi { padding: 16px 18px 24px; gap: 14px; display: flex; flex-direction: column; }
/* WBI Phone Hints als kompakte Pills — Toast-Overlay übernimmt den Text */
.wbi-hints-indicator-phone {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 6px 0;
}
.wbi-hint-pill-phone {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid color-mix(in oklch, var(--wbi-accent) 35%, transparent);
  color: color-mix(in oklch, var(--wbi-accent) 50%, transparent);
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  transition: all 0.3s ease-out;
}
.wbi-hint-pill-phone.active {
  border-color: var(--wbi-accent);
  color: var(--wbi-accent);
  background: color-mix(in oklch, var(--wbi-accent) 18%, var(--bg-2));
  box-shadow: 0 0 12px var(--wbi-accent-glow);
}
.wbi-hint-toast-phone {
  position: relative;
  padding: 12px 16px;
  min-height: 68px;
  background: linear-gradient(180deg, oklch(0.22 0.12 350 / 0.55), oklch(0.14 0.05 350 / 0.4));
  border: 2px solid color-mix(in oklch, var(--wbi-accent) 35%, transparent);
  border-radius: 16px;
  box-shadow: 0 0 18px color-mix(in oklch, var(--wbi-accent) 18%, transparent);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.4s, box-shadow 0.4s;
}
.wbi-hint-toast-phone > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.wbi-hint-toast-phone.show {
  border-color: var(--wbi-accent);
  box-shadow: 0 0 24px var(--wbi-accent-glow);
}
.wbi-hint-toast-phone.show > * { opacity: 1; transform: translateY(0); }
.wbi-hint-toast-phone .wbi-hint-toast-label {
  color: var(--wbi-accent);
  letter-spacing: 0.16em;
  font-size: 10px;
  margin-bottom: 6px;
}
.wbi-hint-toast-phone .wbi-hint-toast-text {
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-0);
}
.p-wbi-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-wbi-btn {
  padding: 18px 20px;
  border-radius: 20px;
  border: 3px solid var(--a-color);
  background: linear-gradient(180deg, color-mix(in oklch, var(--a-color) 18%, var(--bg-3)), var(--bg-2));
  color: var(--ink-0);
  font-family: var(--font-display);
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.1s;
  touch-action: manipulation;
}
.p-wbi-btn:active { transform: scale(0.97); }
.p-wbi-btn.selected {
  border-color: var(--ink-0);
  box-shadow: 0 0 24px color-mix(in oklch, var(--a-color) 40%, transparent);
}
.p-wbi-btn[disabled] { opacity: 0.5; pointer-events: none; }
.p-wbi-key {
  font-size: 22px;
  color: var(--a-color);
  min-width: 28px;
}
.p-wbi-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.2;
}

/* ══════════════════════════════════════════════════════
   TIMELINE — Cyan-Accent
   ══════════════════════════════════════════════════════ */

:root { --tl-accent: oklch(0.82 0.18 200); --tl-accent-glow: oklch(0.82 0.18 200 / 0.35); --tl-gold: oklch(0.82 0.14 80); }

.tl-screen {
  position: absolute;
  top: clamp(80px, 10vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(80px, 9vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "roundbar roundbar"
    "body timer"
    "vote vote";
  gap: clamp(10px, 1vw, 28px);
}
.tl-screen .round-bar { grid-area: roundbar; }
.tl-screen .tl-body { grid-area: body; display: flex; flex-direction: column; gap: clamp(10px, 1vw, 20px); min-height: 0; }
.tl-screen .tl-timer-ring { grid-area: timer; align-self: start; }
.tl-screen .vote-meter { grid-area: vote; }
.tl-screen .kicker-lg { color: var(--tl-accent); }

.tl-title {
  font-size: clamp(26px, 2.6vw, 48px);
  margin: 0;
  color: var(--ink-0);
  text-shadow: 0 0 30px var(--tl-accent-glow);
  line-height: 1.1;
}
.tl-subtitle {
  color: var(--tl-accent);
  letter-spacing: 0.2em;
  margin-bottom: clamp(4px, 0.4vw, 8px);
  font-size: clamp(10px, 0.85vw, 14px);
}
/* Events-Liste füllt verfügbaren Platz, Pills teilen sich die Höhe gleichmäßig — kein Scrollbar */
.tl-events {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 12px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.tl-event-pill {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 22px);
  padding: clamp(6px, 0.8vw, 14px) clamp(14px, 1.5vw, 26px);
  background: linear-gradient(90deg, color-mix(in oklch, var(--tl-gold) 25%, oklch(0.14 0.02 285)), oklch(0.12 0.02 285));
  border: 2px solid var(--tl-gold);
  border-radius: var(--r-xl);
  box-shadow: 0 0 20px color-mix(in oklch, var(--tl-gold) 18%, transparent);
  flex: 1 1 0;
  min-height: 0;
}
.tl-event-badge {
  min-width: clamp(28px, 2vw, 40px);
  height: clamp(28px, 2vw, 40px);
  border-radius: 50%;
  background: var(--tl-gold);
  color: var(--bg-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 700;
  flex-shrink: 0;
}
.tl-event-text {
  font-size: clamp(14px, 1.3vw, 22px);
  line-height: 1.2;
  color: var(--ink-0);
  flex: 1;
}

/* Reveal: body ohne overflow-hidden (sonst cuttet Glow der Rows links/rechts), Stats als Row, kompakter */
.tl-reveal-screen {
  grid-template-columns: 1fr;
  grid-template-areas:
    "roundbar"
    "body";
}
.tl-reveal-screen .tl-body {
  grid-area: body;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker kicker"
    "title  title"
    "list   list"
    "fact   stats";
  gap: clamp(8px, 0.8vw, 16px) clamp(14px, 1.4vw, 28px);
  min-height: 0;
  padding: clamp(10px, 1vw, 20px) clamp(12px, 1.2vw, 24px);
  overflow: hidden;
}
.tl-reveal-screen .kicker-lg { grid-area: kicker; }
.tl-reveal-screen .tl-title { grid-area: title; }
.tl-reveal-screen .tl-reveal-list {
  grid-area: list;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.tl-reveal-screen .fun-fact {
  grid-area: fact;
  align-self: center;
}
.tl-reveal-screen .reveal-stats {
  grid-area: stats;
  margin: 0;
  align-self: center;
}
.tl-reveal-screen .fun-fact {
  margin: 0;
  flex-shrink: 0;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.35;
}
.tl-reveal-screen .reveal-stats {
  flex-direction: row;
  gap: clamp(10px, 1vw, 20px);
  min-width: 0;
  margin-top: auto;
  flex-shrink: 0;
}
.tl-reveal-screen .stat-card {
  flex: 1;
  padding: clamp(6px, 0.6vw, 12px) clamp(14px, 1.2vw, 22px);
}
.tl-reveal-screen .stat-value {
  font-size: clamp(18px, 1.5vw, 28px);
  line-height: 1.1;
}
.tl-reveal-screen .tl-title {
  font-size: clamp(20px, 1.9vw, 34px);
  margin: 0;
}

.tl-reveal-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.6vw, 14px);
  padding-left: clamp(28px, 2vw, 42px);
  margin: 0;
}
.tl-reveal-list::before {
  content: '';
  position: absolute;
  left: clamp(10px, 0.7vw, 16px);
  top: 10px; bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--tl-accent), color-mix(in oklch, var(--tl-accent) 30%, transparent));
}
.tl-reveal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1vw, 20px);
  padding: clamp(8px, 0.8vw, 16px) clamp(16px, 1.3vw, 24px);
  flex: 1 1 0;
  min-height: clamp(40px, 4.5vh, 72px);
  background: linear-gradient(90deg, color-mix(in oklch, var(--tl-accent) 20%, oklch(0.14 0.02 285)), oklch(0.12 0.02 285));
  border: 2px solid var(--tl-accent);
  border-radius: var(--r-xl);
  box-shadow: 0 0 22px var(--tl-accent-glow);
  opacity: 0;
  transform: translateX(-30px);
  animation: tl-reveal-slide 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
  position: relative;
}
.tl-reveal-row::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(20px, 1.4vw, 30px));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(10px, 0.9vw, 16px);
  height: clamp(10px, 0.9vw, 16px);
  border-radius: 50%;
  background: var(--tl-accent);
  box-shadow: 0 0 14px var(--tl-accent);
}
@keyframes tl-reveal-slide {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tl-reveal-slot {
  font-size: clamp(22px, 1.7vw, 32px);
  color: var(--tl-accent);
  min-width: clamp(26px, 1.7vw, 36px);
}
.tl-reveal-event {
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.3;
  color: var(--ink-0);
}
.tl-reveal-avatars {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tl-mini-avatar {
  width: clamp(22px, 1.6vw, 30px);
  height: clamp(22px, 1.6vw, 30px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 0.9vw, 14px);
  color: var(--ink-0);
}
.tl-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Phone: Timeline Sort ──────────────────────────── */
.screen-timeline { padding: 14px 16px 20px; gap: 10px; display: flex; flex-direction: column; }
.p-tl-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-0);
  text-align: center;
  margin: 0;
}
.p-tl-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--tl-accent);
  letter-spacing: 0.14em;
  text-align: center;
  margin-bottom: 4px;
}
.p-tl-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.p-tl-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--tl-gold) 25%, var(--bg-3)), var(--bg-2));
  border: 2px solid var(--tl-gold);
  color: var(--ink-0);
  font-family: var(--font-display);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  touch-action: manipulation;
  user-select: none;
}
.p-tl-card:active { transform: scale(0.97); }
.p-tl-card.selected {
  border-color: var(--tl-accent);
  box-shadow: 0 0 20px var(--tl-accent);
  transform: scale(1.02);
}
.p-tl-card.swapping {
  animation: tl-swap 0.3s ease-in-out;
}
@keyframes tl-swap {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1); }
}
.p-tl-card-number {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tl-gold);
  color: var(--bg-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.p-tl-card-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.25;
}
.p-tl-submit {
  padding: 14px;
  border-radius: 22px;
  background: var(--tl-gold);
  color: var(--bg-0);
  font-family: var(--font-display);
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.p-tl-submit:active:not(:disabled) { transform: scale(0.97); }
.p-tl-submit:disabled { opacity: 0.4; }
.p-tl-wait {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--tl-accent);
  padding: 12px;
  letter-spacing: 0.14em;
}

/* ═══════════════════════════════════════════════════════════════════
   ALLGEMEINWISSEN — Blau-Akzent + Kategorie-Picker + Question-Badge
   =================================================================== */
:root {
  --aw-accent: oklch(0.70 0.17 230);
  --aw-accent-glow: oklch(0.70 0.17 230 / 0.40);
}

/* ── Kategorie-Badge im Question-Screen (nur Allgemeinwissen) ── */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  margin-top: 10px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--mode-accent) 16%, var(--bg-2));
  border: 1.5px solid color-mix(in oklch, var(--mode-accent) 45%, transparent);
  box-shadow: 0 0 18px color-mix(in oklch, var(--mode-accent) 16%, transparent);
  width: fit-content;
}
.category-badge-icon {
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1;
}
.category-badge-name {
  color: var(--mode-accent);
  letter-spacing: 0.18em;
  font-size: clamp(11px, 0.85vw, 13px);
}

/* ── TV-Kategorie-Picker-Screen ── */
.aw-picker-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 36px);
  padding: clamp(24px, 3vh, 48px) clamp(40px, 5vw, 96px);
  width: 100%;
  height: 100%;
}
.aw-picker-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.aw-picker-verb {
  color: var(--ink-3);
}
.aw-picker-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  width: 100%;
  max-width: 1520px;
}
.aw-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
}
.aw-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(14px, 1.4vw, 22px) 10px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 2px solid color-mix(in oklch, var(--mode-accent) 25%, transparent);
  color: var(--ink-1);
  min-height: clamp(100px, 10vw, 140px);
  text-align: center;
  opacity: 0.6;
}
.aw-picker-card-icon {
  font-size: clamp(28px, 2.4vw, 42px);
  line-height: 1;
}
.aw-picker-card-name {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.10em;
}
.aw-picker-timer {
  width: clamp(140px, 12vw, 200px);
  height: clamp(140px, 12vw, 200px);
}
.aw-picker-chosen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  backdrop-filter: blur(16px);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  animation: aw-chosen-in 300ms ease forwards;
}
.aw-chosen-icon {
  font-size: clamp(64px, 8vw, 140px);
  color: var(--mode-accent);
  text-shadow: 0 0 60px var(--aw-accent-glow);
}
.aw-chosen-name {
  font-size: clamp(42px, 4.5vw, 82px);
  color: var(--mode-accent);
}
@keyframes aw-chosen-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Lobby-Chips für Allgemeinwissen-Settings (AN/AUS + REIHUM/LEADER) ── */
#setting-row-aw-select .chip,
#setting-row-aw-picker .chip {
  min-width: 80px;
}

/* ── Phone: Kategorie-Picker ── */
.screen-aw-picker {
  display: flex;
  flex-direction: column;
  padding: 18px 14px 20px;
  gap: 14px;
  height: 100%;
}
.aw-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.aw-phone-head .kicker { color: var(--mode-accent); }
.aw-phone-timer { flex-shrink: 0; }
.aw-phone-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.aw-phone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.aw-phone-cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 88px;
  padding: 12px 6px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 2px solid color-mix(in oklch, var(--mode-accent) 30%, transparent);
  color: var(--ink-1);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.aw-phone-cat-btn:active {
  transform: scale(0.96);
  background: color-mix(in oklch, var(--mode-accent) 22%, var(--bg-2));
  border-color: var(--mode-accent);
}
.aw-phone-cat-btn.selected {
  background: color-mix(in oklch, var(--mode-accent) 28%, var(--bg-2));
  border-color: var(--mode-accent);
  box-shadow: 0 0 18px var(--aw-accent-glow);
}
.aw-phone-cat-btn-icon {
  font-size: 26px;
  line-height: 1;
}
.aw-phone-cat-btn-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  line-height: 1.2;
}
.aw-phone-cat-btn.selected .aw-phone-cat-btn-name {
  color: var(--mode-accent);
}
.aw-phone-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  flex: 1;
}
.aw-phone-wait .display {
  color: var(--mode-accent);
}

/* ═══════════════════════════════════════════════════════════════════
   SCHÄTZEN & WETTEN — Gelb-Akzent + Zahlenstrahl + Phone-Input
   =================================================================== */
:root {
  --sw-accent: oklch(0.82 0.16 90);
  --sw-accent-glow: oklch(0.82 0.16 90 / 0.4);
}

/* ── TV — Question-Screen: 2-Spalten Grid mit prominentem Vote-Meter ── */
/* Absolute-positioniert zwischen Chrome-top und Chrome-bottom wie .quiz-screen */
.sw-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vh, 28px);
}
.sw-screen .kicker-lg {
  color: var(--mode-accent);
}
.sw-q-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 380px);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  padding: clamp(20px, 3vh, 60px) 0;
}
.sw-q-left {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
  min-width: 0;
}
.sw-q-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.sw-question {
  font-size: clamp(44px, 4.6vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  max-width: 22ch;
  margin: 0;
}
.sw-unit-display {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--mode-accent) 16%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--mode-accent) 55%, transparent);
  box-shadow: 0 0 32px color-mix(in oklch, var(--mode-accent) 22%, transparent);
  align-self: flex-start;
}
.sw-unit-display .mono-label {
  color: color-mix(in oklch, var(--mode-accent) 70%, var(--ink-2));
}
.sw-unit-display .display {
  font-size: clamp(24px, 2.2vw, 40px);
  color: var(--mode-accent);
  letter-spacing: -0.01em;
}
.sw-timer-ring {
  position: relative;
  width: clamp(200px, 18vw, 300px);
  height: clamp(200px, 18vw, 300px);
}
.sw-q-hint {
  color: var(--ink-3);
  letter-spacing: 0.15em;
  text-align: center;
  font-size: clamp(11px, 0.85vw, 13px);
  line-height: 1.4;
  white-space: nowrap;
}
/* ── TV — Reveal-Screen: Full-Width Grid mit dominierendem Zahlenstrahl ── */
.sw-reveal-screen {
  display: grid;
  /* round-bar | head | numberline | result-list (flex-shrink) | fun-fact */
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: clamp(10px, 1.2vh, 20px);
  min-height: 0;
  overflow: hidden;
}
/* Result-Liste darf bei vielen Spielern scrollen, damit Fun-Fact unten sichtbar bleibt. */
.sw-reveal-screen .sw-result-list {
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--ink-3) 50%, transparent) transparent;
}
.sw-reveal-screen .sw-result-list::-webkit-scrollbar { width: 6px; }
.sw-reveal-screen .sw-result-list::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--ink-3) 50%, transparent);
  border-radius: 3px;
}
/* Fun-Fact bleibt fixiert unten — niemals abgeschnitten. */
.sw-reveal-screen .sw-fun-fact-box {
  flex-shrink: 0;
}
.sw-reveal-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}
.sw-reveal-head-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.sw-reveal-head .kicker-lg {
  color: var(--good);
}
.sw-reveal-question {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 44px);
  color: var(--ink-1);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 42ch;
}
/* Answer-Box: vertikaler Stack — Zahl dominant, Unit als Sub-Label */
.sw-answer-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.4vh, 6px);
  padding: clamp(12px, 1.4vh, 20px) clamp(28px, 2.8vw, 48px);
  border-radius: 20px;
  background: color-mix(in oklch, var(--good) 22%, var(--bg-2));
  border: 3px solid var(--good);
  box-shadow: 0 0 48px color-mix(in oklch, var(--good) 35%, transparent);
  flex-shrink: 0;
  min-width: clamp(160px, 14vw, 240px);
}
.sw-answer-value {
  font-size: clamp(52px, 5.2vw, 96px);
  color: var(--good);
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.sw-answer-unit {
  color: color-mix(in oklch, var(--good) 75%, var(--ink-1));
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.18em;
  line-height: 1;
}

.sw-numberline-wrap {
  display: flex;
  justify-content: center;
  padding: clamp(8px, 1vh, 16px) 0;
}
.sw-numberline {
  position: relative;
  width: 100%;
  max-width: 1680px;
  height: clamp(200px, 22vh, 260px);
  padding: clamp(32px, 4vh, 56px) clamp(20px, 2vw, 40px) clamp(32px, 4vh, 56px);
}
.sw-track {
  position: absolute;
  top: 50%;
  left: clamp(20px, 2vw, 40px);
  right: clamp(20px, 2vw, 40px);
  height: 9px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--ink-3) 45%, transparent) 0%,
    color-mix(in oklch, var(--mode-accent) 75%, var(--ink-2)) 50%,
    color-mix(in oklch, var(--ink-3) 45%, transparent) 100%);
  border-radius: 5px;
  transform: translateY(-50%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 color-mix(in oklch, var(--ink-1) 8%, transparent),
    0 1px 0 color-mix(in oklch, var(--ink-0) 6%, transparent);
}
/* Zielzone: ±10% um den Korrekt-Marker, halbtransparente Banderole */
.sw-target-zone {
  position: absolute;
  top: 50%;
  height: clamp(36px, 4.5vh, 56px);
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--good) 0%, transparent) 0%,
    color-mix(in oklch, var(--good) 22%, transparent) 30%,
    color-mix(in oklch, var(--good) 32%, transparent) 50%,
    color-mix(in oklch, var(--good) 22%, transparent) 70%,
    color-mix(in oklch, var(--good) 0%, transparent) 100%);
  border-radius: 10px;
  pointer-events: none;
  /* left/width via JS gesetzt */
}
/* Community-Durchschnitt-Marker: dezenter als der Korrekt-Marker */
.sw-avg-marker {
  position: absolute;
  top: clamp(56px, 6.8vh, 86px);
  bottom: clamp(56px, 6.8vh, 86px);
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in oklch, var(--ink-2) 75%, transparent) 0,
    color-mix(in oklch, var(--ink-2) 75%, transparent) 5px,
    transparent 5px,
    transparent 10px
  );
  transform: translateX(-50%);
  z-index: 1;
  left: 50%;
}
/* Ø-Marker nur zeigen wenn genug Tipps (JS setzt data-show) */
.sw-avg-marker[data-show="0"] { display: none; }
.sw-avg-marker::before {
  /* Oberhalb des Markers platzieren — gleiche Ebene wie Korrekt-Marker-Label,
     damit es nicht mit Player-Dot-Labels unterhalb des Tracks kollidiert */
  content: attr(data-label);
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  color: var(--ink-2);
  font-size: clamp(10px, 0.85vw, 13px);
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 5px;
  background: color-mix(in oklch, var(--ink-2) 8%, var(--bg));
  border: 1px solid color-mix(in oklch, var(--ink-2) 40%, transparent);
  opacity: 0.85;
}
.sw-ticks {
  position: absolute;
  bottom: clamp(12px, 2vh, 22px);
  left: clamp(20px, 2vw, 40px);
  right: clamp(20px, 2vw, 40px);
  height: 20px;
  pointer-events: none;
}
.sw-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1vw, 15px);
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.sw-tick::before {
  content: "";
  display: block;
  width: 1px;
  height: 8px;
  background: color-mix(in oklch, var(--ink-3) 60%, transparent);
  margin: 0 auto 4px;
}
.sw-correct-marker {
  position: absolute;
  top: clamp(50px, 6vh, 80px);
  bottom: clamp(50px, 6vh, 80px);
  width: 5px;
  background: var(--good);
  box-shadow: 0 0 32px var(--good), 0 0 12px var(--good);
  transform: translateX(-50%);
  z-index: 1;
  border-radius: 3px;
  /* default position — wird per JS überschrieben */
  left: 50%;
}
.sw-correct-marker::before {
  content: attr(data-label);
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  color: var(--good);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.12em;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--good) 16%, var(--bg));
  border: 1px solid var(--good);
  font-weight: 700;
}
.sw-player-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sw-player-dot {
  --dot-stack-y: 0px;
  position: absolute;
  top: 50%;
  width: clamp(44px, 3.5vw, 56px);
  height: clamp(44px, 3.5vw, 56px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 700;
  color: var(--bg);
  transform: translate(-50%, calc(-50% + var(--dot-stack-y))) scale(1);
  border: 3px solid var(--bg);
  background-color: var(--dot-color, var(--mode-accent));
  background-image: var(--dot-img, none);
  background-size: cover;
  background-position: center;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.sw-player-dot.winner {
  width: clamp(60px, 4.5vw, 76px);
  height: clamp(60px, 4.5vw, 76px);
  box-shadow: 0 0 40px var(--mode-accent), 0 0 16px var(--sw-accent-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 3;
  border-color: var(--mode-accent);
}
/* Edge-Clamping: Labels bei Randposition nicht abschneiden */
.sw-player-dot.edge-left .sw-player-dot-label {
  left: 0;
  transform: none;
  text-align: left;
}
.sw-player-dot.edge-right .sw-player-dot-label {
  left: auto;
  right: 0;
  transform: none;
  text-align: right;
}
.sw-player-dot-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  white-space: nowrap;
  text-align: center;
}
.sw-player-dot.winner .sw-player-dot-label {
  color: var(--mode-accent);
  font-weight: 700;
}
.sw-player-dot-label .sw-label-name {
  display: block;
}
.sw-player-dot-label .sw-label-value {
  display: block;
  color: var(--ink-3);
  font-size: 0.9em;
}
.sw-player-dot.winner .sw-player-dot-label .sw-label-value {
  color: color-mix(in oklch, var(--mode-accent) 80%, var(--ink-1));
}

/* Fun-Fact: Full-width unter der Rangliste — prominenter „WUSSTEST DU?"-Kicker */
.sw-fun-fact-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 1.5vh, 22px) clamp(20px, 2.2vw, 32px);
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in oklch, var(--mode-accent) 8%, var(--bg-2)) 0%,
      var(--bg-2) 100%);
  border: 1.5px solid color-mix(in oklch, var(--mode-accent) 32%, transparent);
  box-shadow: 0 0 24px color-mix(in oklch, var(--mode-accent) 10%, transparent);
}
.sw-fun-fact-kicker {
  color: var(--mode-accent);
  letter-spacing: 0.16em;
  font-size: clamp(11px, 0.9vw, 14px);
}
.sw-fun-fact {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
  color: var(--ink-1);
  max-width: 78ch;
}
.sw-result-list {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vh, 7px);
  width: 100%;
}
.sw-result-row {
  display: grid;
  grid-template-columns: clamp(32px, 2.5vw, 40px) 1.3fr 1fr 1.1fr 0.8fr;
  gap: clamp(10px, 1.2vw, 16px);
  align-items: center;
  padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.3vw, 18px);
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid color-mix(in oklch, var(--ink-3) 25%, transparent);
  font-family: var(--font-mono);
  font-size: clamp(12px, 0.9vw, 14px);
}
.sw-result-row.winner {
  border-color: var(--mode-accent);
  background: color-mix(in oklch, var(--mode-accent) 12%, var(--bg-2));
  box-shadow: 0 0 20px color-mix(in oklch, var(--mode-accent) 18%, transparent);
}
.sw-result-avatar {
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: clamp(11px, 0.9vw, 14px);
  background-size: cover;
  background-position: center;
}
.sw-result-name {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: -0.01em;
}
.sw-result-estimate {
  color: var(--ink-2);
  font-family: var(--font-mono);
}
.sw-result-distance {
  color: var(--ink-3);
}
.sw-result-row.winner .sw-result-distance {
  color: var(--good);
  font-weight: 700;
}
.sw-result-points {
  color: var(--good);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 17px);
  text-align: right;
}
.sw-result-row.skipped {
  opacity: 0.4;
}
.sw-result-row.skipped .sw-result-estimate,
.sw-result-row.skipped .sw-result-distance {
  color: var(--ink-3);
  font-style: italic;
}

/* ── Phone — Schätzen-Input ── */
.screen-sw {
  display: flex;
  flex-direction: column;
  padding: 16px 14px 20px;
  gap: 16px;
  height: 100%;
}
.sw-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sw-phone-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.sw-phone-question {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 26px);
  line-height: 1.25;
  color: var(--ink-1);
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-2);
  border-left: 4px solid var(--mode-accent);
}
.sw-phone-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border-radius: 16px;
  background: var(--bg-2);
  border: 3px solid var(--mode-accent);
  box-shadow: 0 0 24px var(--sw-accent-glow);
}
.sw-phone-input-wrap input {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(48px, 14vw, 64px);
  font-weight: 700;
  background: transparent;
  border: none;
  color: var(--ink-1);
  outline: none;
  padding: 8px 0;
  -moz-appearance: textfield;
}
.sw-phone-input-wrap input::-webkit-outer-spin-button,
.sw-phone-input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sw-phone-unit {
  color: var(--mode-accent);
  font-size: 14px;
  letter-spacing: 0.15em;
}
#p-sw-submit {
  background: var(--mode-accent);
  color: var(--bg);
}
#p-sw-submit:disabled {
  opacity: 0.4;
  background: var(--ink-3);
}
.sw-phone-submitted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--mode-accent) 14%, var(--bg-2));
  border: 2px dashed var(--mode-accent);
  text-align: center;
}
.sw-phone-submitted-value {
  font-size: clamp(48px, 14vw, 64px);
  color: var(--mode-accent);
  line-height: 1;
}

/* ── ⭐ Insider-Badge (Custom-Questions) ── */
.is-insider {
  position: relative;
  color: #f5d76e;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px color-mix(in oklch, #f5d76e 40%, transparent);
}
h1.is-insider,
h2.is-insider,
.sw-question.is-insider {
  color: inherit;
}
h1.is-insider::before,
h2.is-insider::before,
.sw-question.is-insider::before {
  content: '⭐ INSIDER';
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.22em 0.72em;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5d76e 0%, #d4a53a 100%);
  color: #1a1410;
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0.12em;
  vertical-align: middle;
  box-shadow: 0 0 24px color-mix(in oklch, #f5d76e 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: insiderShimmer 2.4s ease-in-out infinite;
}
@keyframes insiderShimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* ═══════════════════════════════════════════════════════════════════
   WER WÜRDE EHER... — Grün-Akzent + Vote-Grid + Balken-Reveal
   =================================================================== */
:root {
  --wwe-accent: oklch(0.78 0.17 150);
  --wwe-accent-glow: oklch(0.78 0.17 150 / 0.45);
}

/* ── Generic Level-Chips (wiederverwendbar für 9f Wahrheit oder Pflicht) ── */
.level-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.level-chips .chip {
  cursor: pointer;
  user-select: none;
}
.level-chips .chip.is-active {
  color: var(--mode-accent);
  border-color: color-mix(in oklch, var(--mode-accent) 60%, transparent);
  background: color-mix(in oklch, var(--mode-accent) 12%, var(--bg-1));
}
.level-chip-hint {
  color: var(--ink-3);
  font-size: clamp(12px, 0.85vw, 15px);
  line-height: 1.35;
  margin-top: 8px;
  max-width: 42ch;
}

/* ── TV — Question-Screen (Frage groß + Timer + Vote-Counter) ── */
.wwe-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vh, 28px);
}
.wwe-screen .kicker-lg { color: var(--mode-accent); }
.wwe-q-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 380px);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
  padding: clamp(20px, 3vh, 60px) 0;
}
.wwe-q-left {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
  min-width: 0;
}
.wwe-q-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.wwe-question {
  font-size: clamp(44px, 4.4vw, 92px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  max-width: 26ch;
  margin: 0;
}
.wwe-level-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid color-mix(in oklch, var(--mode-accent) 55%, transparent);
  background: color-mix(in oklch, var(--mode-accent) 12%, var(--bg-1));
  color: color-mix(in oklch, var(--mode-accent) 80%, var(--ink-1));
  font-size: clamp(13px, 0.95vw, 16px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  align-self: flex-start;
}
.wwe-timer-ring {
  position: relative;
  width: clamp(200px, 18vw, 300px);
  height: clamp(200px, 18vw, 300px);
}
.wwe-vote-counter {
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(12px, 0.9vw, 14px);
}
.wwe-vote-counter strong {
  color: var(--mode-accent);
  font-size: clamp(22px, 2vw, 30px);
  display: block;
  margin-bottom: 4px;
}

/* ── TV — Vote-Meter: nutzt Standard-.vote-meter / .vote-avatars ─── */
.wwe-screen .vote-meter {
  margin-top: clamp(12px, 1.5vh, 20px);
}

/* ═══════════════════════════════════════════════════════════════════
   TV — WWE Reveal-Screen v4: Banner-Hero + Cascade-Row
   Horizontaler Banner mit Avatar + Statement. Frage constrained,
   kein Überlappen. Alle Votes als kompakte Cascade darunter.
   =================================================================== */
.wwe-reveal-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  row-gap: clamp(14px, 1.8vh, 22px);
  overflow: hidden;
}
.wwe-reveal-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-height: clamp(110px, 14vh, 170px);
  overflow: hidden;
}
.wwe-reveal-kicker {
  color: var(--mode-accent);
  flex-shrink: 0;
}
.wwe-reveal-q {
  font-size: clamp(18px, 1.7vw, 30px);
  line-height: 1.25;
  color: var(--ink-2);
  font-weight: 600;
  max-width: 65ch;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Main-Split: Hero links (60%) + Runners rechts (40%) ── */
.wwe-reveal-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: clamp(32px, 3.5vw, 64px);
  padding-top: clamp(12px, 1.5vh, 24px);
  min-height: 0;
  align-items: start;
}

/* ─── HERO-BANNER — horizontaler Statement-Block ───────── */
.wwe-hero-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 2.5vw, 56px);
  align-items: center;
  padding: clamp(18px, 2vh, 32px) clamp(22px, 2.2vw, 44px);
  border-radius: 24px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--mode-accent) 14%, var(--bg-2)) 0%,
    color-mix(in oklch, var(--mode-accent) 6%, var(--bg-2)) 100%);
  border: 1px solid color-mix(in oklch, var(--mode-accent) 32%, transparent);
  box-shadow: 0 0 56px color-mix(in oklch, var(--mode-accent) 18%, transparent);
  min-height: clamp(160px, 22vh, 260px);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  animation: wweBannerIn 0.55s cubic-bezier(.17, .67, .3, 1) 0.1s forwards;
}
@keyframes wweBannerIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wwe-hero-banner.is-none {
  background: color-mix(in oklch, var(--bg-2) 90%, transparent);
  border-color: color-mix(in oklch, var(--ink-3) 20%, transparent);
  box-shadow: none;
}

/* Avatar links — bei Tie mehrere Avatare übereinander */
.wwe-hero-avatars {
  display: flex;
  align-items: center;
  gap: clamp(-10px, -1vw, -16px);  /* Overlap bei mehreren */
}
.wwe-hero-avatar {
  position: relative;
  width: clamp(120px, 12vw, 200px);
  height: clamp(120px, 12vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  display: grid;
  place-items: center;
  border: clamp(4px, 0.5vw, 8px) solid var(--player-color, var(--mode-accent));
  box-shadow:
    0 0 0 clamp(3px, 0.3vw, 5px) color-mix(in oklch, var(--player-color, var(--mode-accent)) 30%, transparent),
    0 0 64px color-mix(in oklch, var(--player-color, var(--mode-accent)) 50%, transparent);
  transform: scale(0);
  animation: wweAvatarPop 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.4s forwards;
  flex-shrink: 0;
}
.wwe-hero-avatars > .wwe-hero-avatar:nth-child(2) {
  margin-left: clamp(-22px, -2.2vw, -44px);
  animation-delay: 0.52s;
  z-index: 2;
}
.wwe-hero-avatars > .wwe-hero-avatar:nth-child(3) {
  margin-left: clamp(-22px, -2.2vw, -44px);
  animation-delay: 0.64s;
  z-index: 1;
}
@keyframes wweAvatarPop {
  0%   { transform: scale(0) rotate(-8deg); }
  60%  { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.wwe-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-hero-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 88px);
  color: var(--ink-1);
}

/* Statement rechts — Surprise + Name + Count-Line */
.wwe-hero-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1vh, 16px);
  min-width: 0;
}
.wwe-hero-surprise {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--mode-accent);
  text-shadow: 0 0 40px color-mix(in oklch, var(--mode-accent) 55%, transparent);
  margin: 0;
  transform: rotate(-2deg);
  animation: wweSurpriseWobble 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.25s backwards;
}
@keyframes wweSurpriseWobble {
  0%   { opacity: 0; transform: rotate(-12deg) scale(0.5); }
  55%  { opacity: 1; transform: rotate(3deg) scale(1.08); }
  100% { transform: rotate(-2deg) scale(1); }
}
.wwe-hero-surprise.is-unanimous {
  background: linear-gradient(135deg, #f5d76e 0%, #ffffff 50%, #f5d76e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 48px rgba(245, 215, 110, 0.55);
  animation: wweSurpriseWobble 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.25s backwards,
             wweShimmer 2.4s ease-in-out 1s infinite;
}
@keyframes wweShimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

.wwe-hero-name {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
  opacity: 0;
  transform: translateX(-20px);
  animation: wweHeroNameIn 0.5s cubic-bezier(.17, .67, .3, 1) 0.6s forwards;
}
@keyframes wweHeroNameIn {
  to { opacity: 1; transform: translateX(0); }
}

.wwe-hero-meta {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1vw, 18px);
  font-size: clamp(16px, 1.4vw, 22px);
  color: color-mix(in oklch, var(--ink-2) 85%, transparent);
  font-weight: 500;
  opacity: 0;
  animation: wweHeroMetaIn 0.5s ease-out 0.9s forwards;
  flex-wrap: wrap;
}
@keyframes wweHeroMetaIn {
  to { opacity: 1; }
}
.wwe-hero-count {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 48px);
  color: var(--mode-accent);
  line-height: 1;
}
.wwe-hero-voters-inline {
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.4;
}
.wwe-hero-voters-inline strong {
  color: var(--ink-1);
  font-weight: 700;
}

/* ─── CASCADE-Wrap: alle Votes als kompakte Row ────────── */
.wwe-cascade-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 12px);
  min-height: 0;
  opacity: 0;
  animation: wweCascadeWrapIn 0.4s ease-out 0.7s forwards;
}
@keyframes wweCascadeWrapIn {
  to { opacity: 1; }
}
.wwe-cascade-head {
  color: color-mix(in oklch, var(--ink-2) 65%, transparent);
  padding-left: clamp(4px, 0.5vw, 8px);
}
.wwe-cascade {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.8vw, 14px);
  min-height: 0;
}
.wwe-cascade-row {
  flex: 1 1 auto;
  min-width: clamp(220px, 24vw, 360px);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(8px, 0.8vw, 14px);
  align-items: center;
  padding: clamp(8px, 0.9vh, 14px) clamp(12px, 1.1vw, 18px);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink-3) 14%, transparent);
  opacity: 0;
  transform: translateY(6px);
  animation: wweCascadeRowIn 0.35s ease-out forwards;
}
.wwe-cascade-row.is-for-winner {
  background: color-mix(in oklch, var(--mode-accent) 14%, var(--bg-2));
  border-color: color-mix(in oklch, var(--mode-accent) 45%, transparent);
}
.wwe-cascade-row.is-skipped {
  opacity: 0.5;
  border-style: dashed;
  background: transparent;
}
@keyframes wweCascadeRowIn {
  to { opacity: 1; transform: translateY(0); }
}

.wwe-cascade-avatar {
  width: clamp(34px, 2.6vw, 42px);
  height: clamp(34px, 2.6vw, 42px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--party-color, var(--ink-3)) 60%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wwe-cascade-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-cascade-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 17px);
  color: var(--ink-1);
}
.wwe-cascade-voter-name {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 20px);
  color: var(--ink-1);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wwe-cascade-arrow-target {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.6vw, 10px);
  min-width: 0;
  color: color-mix(in oklch, var(--ink-2) 75%, transparent);
  font-size: clamp(13px, 1.1vw, 18px);
  justify-self: end;
}
.wwe-cascade-row.is-for-winner .wwe-cascade-arrow-target {
  color: var(--mode-accent);
  font-weight: 700;
}
.wwe-cascade-arrow {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 22px);
  color: inherit;
  letter-spacing: -0.05em;
}
.wwe-cascade-target-name {
  font-family: var(--font-display);
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wwe-cascade-skipped-text {
  font-size: clamp(12px, 1vw, 15px);
  font-style: italic;
  color: color-mix(in oklch, var(--ink-3) 70%, transparent);
  justify-self: end;
}

/* ─── FOOTER: Hint + Nächste-Frage-Button ─────────────── */
.wwe-reveal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  flex: 0 0 auto;
  padding-top: clamp(8px, 1vh, 16px);
  border-top: 1px solid color-mix(in oklch, var(--ink-3) 12%, transparent);
}
.wwe-reveal-hint {
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
}
.wwe-reveal-hint .auto-timer {
  color: color-mix(in oklch, var(--mode-accent) 75%, transparent);
  font-variant-numeric: tabular-nums;
  margin-left: clamp(8px, 1vw, 16px);
}
.wwe-reveal-foot.is-counting .wwe-reveal-hint .auto-timer {
  color: var(--mode-accent);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: wweCountdownPulse 1s ease-in-out infinite;
}
@keyframes wweCountdownPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.wwe-reveal-next {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--mode-accent) 90%, transparent),
    color-mix(in oklch, var(--mode-accent) 65%, transparent));
  color: #0a1e14;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: clamp(10px, 1.2vh, 16px) clamp(20px, 2vw, 34px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 36px color-mix(in oklch, var(--mode-accent) 40%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
}
.wwe-reveal-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 42px color-mix(in oklch, var(--mode-accent) 60%, transparent);
}
.wwe-reveal-next:active { transform: translateY(0); }

/* ─── Responsive: unter 1100px Single-Column ──────────── */
@media (max-width: 1100px) {
  .wwe-reveal-main {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 2vh, 32px);
    align-items: start;
  }
}

/* ── Phone — Vote-Grid ── */
.wwe-phone-head {
  padding: 14px 16px 8px;
}
.wwe-phone-head .kicker {
  color: var(--wwe-accent);
  letter-spacing: 0.18em;
  font-size: 11px;
}
.wwe-phone-head .question {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.22;
  margin: 8px 0 4px;
  color: var(--ink-1);
}
.wwe-phone-head .level-line {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wwe-phone-timer-row {
  padding: 6px 16px 10px;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wwe-phone-timer-row .bar {
  height: 4px;
  background: color-mix(in oklch, var(--wwe-accent) 22%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.wwe-phone-timer-row .bar-fill {
  height: 100%;
  background: var(--wwe-accent);
  width: 100%;
  transition: width 0.4s linear;
}
.wwe-phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 14px 16px;
}
.wwe-phone-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid color-mix(in oklch, var(--ink-3) 16%, transparent);
  background: var(--bg-2);
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  min-height: 56px;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.wwe-phone-card:active { transform: scale(0.97); }
.wwe-phone-card.is-self {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(1);
}
.wwe-phone-card.is-selected {
  border-color: var(--wwe-accent);
  background: color-mix(in oklch, var(--wwe-accent) 16%, var(--bg-2));
  box-shadow: 0 0 22px color-mix(in oklch, var(--wwe-accent) 35%, transparent);
}
.wwe-phone-card.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.wwe-phone-card .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  flex-shrink: 0;
  display: grid; place-items: center;
}
.wwe-phone-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-phone-card .avatar .initial { font-size: 14px; font-weight: 800; color: var(--ink-1); }
.wwe-phone-card .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wwe-phone-confirm {
  padding: 12px 16px 18px;
  text-align: center;
  color: var(--wwe-accent);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: 0;
  transition: opacity .3s ease;
}
.wwe-phone-confirm.is-visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════
   WWE — Scoreboard (Zwischenstand, eigener Chart-Screen)
   Horizontaler Balken-Chart statt Podium.
   =================================================================== */
.wwe-sb-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vh, 32px);
  overflow: hidden;
}
.wwe-sb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(20px, 2vw, 40px);
  flex-wrap: wrap;
}
.wwe-sb-kicker { color: var(--mode-accent); }
.wwe-sb-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.wwe-sb-countdown {
  font-size: clamp(40px, 4vw, 72px);
  color: var(--mode-accent);
  line-height: 1;
}
.wwe-sb-chart {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.3vh, 20px);
  min-height: 0;
  align-content: flex-start;
}
.wwe-sb-row {
  display: grid;
  grid-template-columns: clamp(44px, 3.2vw, 64px) auto 1fr auto;
  gap: clamp(14px, 1.5vw, 26px);
  align-items: center;
  padding: clamp(10px, 1.2vh, 18px) clamp(14px, 1.4vw, 24px);
  border-radius: 16px;
  background: color-mix(in oklch, var(--bg-2) 75%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink-3) 14%, transparent);
  opacity: 0;
  transform: translateX(-14px);
  animation: wweSbRowIn 0.45s cubic-bezier(.17, .67, .3, 1) forwards;
}
.wwe-sb-row.is-leader {
  background: color-mix(in oklch, var(--mode-accent) 14%, var(--bg-2));
  border-color: color-mix(in oklch, var(--mode-accent) 45%, transparent);
  box-shadow: 0 0 32px color-mix(in oklch, var(--mode-accent) 18%, transparent);
}
@keyframes wweSbRowIn {
  to { opacity: 1; transform: translateX(0); }
}
.wwe-sb-rank {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 44px);
  color: color-mix(in oklch, var(--ink-3) 80%, transparent);
  line-height: 1;
}
.wwe-sb-row.is-leader .wwe-sb-rank { color: var(--mode-accent); }
.wwe-sb-avatar {
  width: clamp(54px, 4.2vw, 78px);
  height: clamp(54px, 4.2vw, 78px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 3px solid color-mix(in oklch, var(--player-color, var(--ink-3)) 65%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wwe-sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-sb-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.8vw, 30px);
  color: var(--ink-1);
}
.wwe-sb-bar-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.wwe-sb-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 30px);
  color: var(--ink-1);
  line-height: 1;
}
.wwe-sb-bar {
  position: relative;
  height: clamp(10px, 1.1vh, 16px);
  background: color-mix(in oklch, var(--ink-3) 12%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.wwe-sb-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--player-color, var(--mode-accent)) 85%, transparent),
    var(--player-color, var(--mode-accent)));
  border-radius: 999px;
  width: 0%;
  box-shadow: 0 0 18px color-mix(in oklch, var(--player-color, var(--mode-accent)) 40%, transparent);
  transition: width 0.9s cubic-bezier(.17, .67, .3, 1) 0.2s;
}
.wwe-sb-count {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 54px);
  color: var(--ink-1);
  line-height: 1;
  min-width: clamp(48px, 4vw, 72px);
  text-align: right;
}
.wwe-sb-row.is-leader .wwe-sb-count { color: var(--mode-accent); }
.wwe-sb-count-label {
  font-size: clamp(10px, 0.7vw, 12px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 55%, transparent);
  text-align: right;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   WWE — End-Screen (Finale, eigener Screen)
   Meist-Gewählter Hero + Ranking + Highlights.
   =================================================================== */
.wwe-end-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(20px, 2.5vh, 40px);
  overflow: hidden;
}
.wwe-end-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wwe-end-kicker { color: var(--mode-accent); }
.wwe-end-title {
  font-size: clamp(48px, 5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
}
.wwe-end-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  gap: clamp(32px, 3vw, 56px);
  min-height: 0;
  align-items: stretch;
}
.wwe-end-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vh, 28px);
  text-align: center;
  padding: clamp(24px, 3vh, 48px);
  border-radius: 28px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--mode-accent) 16%, var(--bg-2)) 0%,
    color-mix(in oklch, var(--mode-accent) 6%, var(--bg-2)) 100%);
  border: 1px solid color-mix(in oklch, var(--mode-accent) 32%, transparent);
  box-shadow: 0 0 64px color-mix(in oklch, var(--mode-accent) 20%, transparent);
}
.wwe-end-hero-label {
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  font-weight: 700;
}
.wwe-end-hero-avatar {
  width: clamp(140px, 12vw, 200px);
  height: clamp(140px, 12vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: clamp(4px, 0.45vw, 7px) solid var(--player-color, var(--mode-accent));
  box-shadow:
    0 0 0 clamp(3px, 0.3vw, 5px) color-mix(in oklch, var(--player-color, var(--mode-accent)) 30%, transparent),
    0 0 72px color-mix(in oklch, var(--player-color, var(--mode-accent)) 50%, transparent);
  display: grid;
  place-items: center;
  transform: scale(0);
  animation: wweEndAvatarPop 0.7s cubic-bezier(.34, 1.56, .64, 1) 0.3s forwards;
  flex-shrink: 0;
}
.wwe-end-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-end-hero-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(56px, 5.5vw, 104px);
  color: var(--ink-1);
}
@keyframes wweEndAvatarPop {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
.wwe-end-hero-name {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.2vw, 84px);
  line-height: 0.95;
  color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.02em;
}
.wwe-end-hero-count {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(8px, 1vh, 13px) clamp(20px, 2vw, 32px);
  border-radius: 999px;
  background: color-mix(in oklch, var(--mode-accent) 18%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--mode-accent) 55%, transparent);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 44px);
  color: var(--mode-accent);
  letter-spacing: -0.01em;
  text-shadow: 0 0 28px color-mix(in oklch, var(--mode-accent) 40%, transparent);
}
.wwe-end-hero-count .lbl {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--mode-accent) 70%, var(--ink-2));
  text-shadow: none;
}

/* Seite: Ranking + Highlights */
.wwe-end-side {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  min-height: 0;
  min-width: 0;
}
.wwe-end-ranking {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
  flex: 0 0 auto;
}
.wwe-end-ranking-label {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
  margin-bottom: clamp(4px, 0.6vh, 8px);
}
.wwe-end-ranking-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: clamp(10px, 1vw, 16px);
  align-items: center;
  padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.2vw, 18px);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent);
}
.wwe-end-ranking-rank {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  color: color-mix(in oklch, var(--ink-3) 80%, transparent);
  line-height: 1;
}
.wwe-end-ranking-avatar {
  width: clamp(34px, 2.6vw, 42px);
  height: clamp(34px, 2.6vw, 42px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--player-color, var(--ink-3)) 60%, transparent);
  display: grid;
  place-items: center;
}
.wwe-end-ranking-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wwe-end-ranking-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 17px);
  color: var(--ink-1);
}
.wwe-end-ranking-name {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--ink-1);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wwe-end-ranking-count {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  color: var(--ink-1);
  line-height: 1;
}

/* Highlights */
.wwe-end-highlights {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 10px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.wwe-end-highlights-label {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
  margin-bottom: clamp(4px, 0.6vh, 8px);
}
.wwe-end-highlight {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  align-items: flex-start;
  padding: clamp(8px, 1vh, 14px) clamp(12px, 1.2vw, 18px);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-2) 60%, transparent);
  border-left: 3px solid var(--mode-accent);
}
.wwe-end-highlight-icon {
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1;
  flex-shrink: 0;
}
.wwe-end-highlight-text {
  font-size: clamp(13px, 1.05vw, 17px);
  color: var(--ink-2);
  line-height: 1.35;
}
.wwe-end-highlight-text strong {
  color: var(--ink-1);
  font-weight: 700;
}

.wwe-end-actions {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 24px);
  padding-top: clamp(8px, 1.2vh, 18px);
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   WAHRHEIT ODER PFLICHT — Magenta-Akzent + eigene Screen-Reihe
   (Roulette · Choice · Task · Doing · End)
   =================================================================== */
:root {
  --wop-accent: oklch(0.72 0.25 340);
  --wop-accent-glow: oklch(0.72 0.25 340 / 0.45);
  --wop-truth: oklch(0.78 0.17 150);      /* Grün — Wahrheit */
  --wop-dare:  oklch(0.72 0.25 340);      /* Magenta — Pflicht */
  --wop-penalty: oklch(0.75 0.17 60);     /* Orange — Strafe */
}

/* ── Screen-Basis: alle WoP-Screens absolute zwischen Chrome ── */
.wop-screen,
.wop-roulette-screen,
.wop-choice-screen,
.wop-task-screen,
.wop-doing-screen,
.wop-end-screen {
  position: absolute;
  top: clamp(96px, 11vh, 132px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vh, 24px);
  overflow: hidden;
}
.wop-kicker { color: var(--mode-accent); }

/* ── ROULETTE ──────────────────────────────────────────────── */
.wop-roulette-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  text-align: center;
  align-items: center;
}
.wop-roulette-title {
  font-size: clamp(40px, 4vw, 84px);
  line-height: 1;
  color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.03em;
}
.wop-roulette-stage {
  flex: 1 1 auto;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  /* Radial-Spotlight hinter dem Roulette */
  background: radial-gradient(ellipse at 50% 55%,
    color-mix(in oklch, var(--mode-accent) 22%, transparent) 0%,
    transparent 60%);
}
.wop-roulette-pointer {
  position: absolute;
  top: clamp(-18px, -1.8vh, -6px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(64px, 6.2vw, 104px);
  height: clamp(80px, 8vw, 130px);
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, #f5d76e 0%, #c58f2a 100%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 28px rgba(245, 215, 110, 0.6));
  animation: wopPointerBob 1.1s ease-in-out infinite;
}
@keyframes wopPointerBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
/* Wheel-Wrapper: dreht sich mit allen Segmenten + Avataren */
.wop-roulette-circle {
  position: relative;
  width: min(clamp(460px, 58vh, 780px), 72vw);
  height: min(clamp(460px, 58vh, 780px), 72vw);
  border-radius: 50%;
  /* Dickerer Outer-Ring wie ein echtes Wheel of Fortune */
  border: clamp(6px, 0.7vw, 12px) solid #f5d76e;
  box-shadow:
    0 0 0 4px #8a6816,
    0 0 0 8px #3a2d0a,
    0 0 64px color-mix(in oklch, var(--mode-accent) 35%, transparent),
    inset 0 0 24px rgba(0, 0, 0, 0.5);
  transition: transform 3.5s cubic-bezier(.17, .67, .3, 1);
  /* Segments werden via JS als conic-gradient gesetzt */
  background: var(--wheel-gradient, #1a0a1a);
}
/* Innerer Glow-Ring um die Avatare */
.wop-roulette-circle::before {
  content: '';
  position: absolute;
  inset: clamp(12px, 1.2vw, 20px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
/* Zentrales Hub-Element — kompakter Knopf in der Mitte */
.wop-roulette-circle::after {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(90px, 10vw, 150px);
  height: clamp(90px, 10vw, 150px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    color-mix(in oklch, var(--mode-accent) 100%, transparent) 0%,
    color-mix(in oklch, var(--mode-accent) 55%, transparent) 60%,
    color-mix(in oklch, var(--mode-accent) 25%, var(--bg-1)) 100%);
  border: clamp(3px, 0.3vw, 5px) solid #f5d76e;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 72px);
  color: #1a0a1a;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.4);
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.6),
    0 0 32px color-mix(in oklch, var(--mode-accent) 70%, transparent);
  z-index: 3;
  animation: wopHubPulse 2s ease-in-out infinite;
}
@keyframes wopHubPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.06); }
}
/* Segment-Trennlinie — goldene Speichen vom Hub zum Rand */
.wop-roulette-divider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(3px, 0.3vw, 5px);
  height: 50%;
  background: linear-gradient(to bottom,
    rgba(245, 215, 110, 0.15) 0%,
    rgba(245, 215, 110, 0.55) 20%,
    rgba(245, 215, 110, 0.8) 100%);
  transform-origin: top center;
  transform: translate(-50%, 0) rotate(var(--divider-angle, 0deg));
  pointer-events: none;
  z-index: 2;
  border-radius: 2px;
}
/* Avatar-Slot = Wrapper der rotiert; Avatar + Name darin bleiben upright */
.wop-roulette-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* Positioning: am Radius auf Segment-Mitte */
  transform:
    translate(-50%, -50%)
    rotate(var(--angle, 0deg))
    translateY(calc(var(--radius, 300px) * -1));
  z-index: 4;
  pointer-events: none;
}
/* Inhalt counter-rotiert damit aufrecht */
.wop-roulette-slot-inner {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--angle, 0deg) * -1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.5vh, 8px);
}
.wop-roulette-avatar {
  width: clamp(86px, 7.5vw, 130px);
  height: clamp(86px, 7.5vw, 130px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: clamp(3px, 0.35vw, 6px) solid #fff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 0 clamp(2px, 0.2vw, 4px) var(--player-color, var(--mode-accent));
  display: grid;
  place-items: center;
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.wop-roulette-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-roulette-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 52px);
  color: var(--ink-1);
}
.wop-roulette-slot.is-picked .wop-roulette-avatar {
  border-color: #f5d76e;
  box-shadow:
    0 0 0 clamp(4px, 0.4vw, 7px) #f5d76e,
    0 0 48px rgba(245, 215, 110, 0.8),
    0 0 96px color-mix(in oklch, var(--mode-accent) 75%, transparent);
  transform: scale(1.2);
  animation: wopPickedBounce 0.9s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes wopPickedBounce {
  0%, 100% { transform: scale(1.2); }
  50%      { transform: scale(1.4); }
}

/* Spieler-Legende unter dem Rad — zeigt wer welcher Avatar ist */
.wop-roulette-legend {
  position: absolute;
  bottom: clamp(-12px, -1vh, 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px, 1vw, 18px);
  flex-wrap: wrap;
  justify-content: center;
  padding: clamp(10px, 1.2vh, 16px) clamp(16px, 1.6vw, 26px);
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-0) 85%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink-3) 20%, transparent);
  backdrop-filter: blur(8px);
  z-index: 8;
  opacity: 0;
  animation: wopLegendIn 0.5s ease-out 0.2s forwards;
}
@keyframes wopLegendIn {
  to { opacity: 1; }
}
.wop-roulette-legend-chip {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 12px);
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  border: 1.5px solid color-mix(in oklch, var(--player-color, var(--mode-accent)) 55%, transparent);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.1vw, 18px);
  color: var(--ink-1);
  transition: all .3s ease;
}
.wop-roulette-legend-chip.is-picked {
  background: linear-gradient(135deg, #f5d76e, #c58f2a);
  color: #1a0a1a;
  border-color: #f5d76e;
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(245, 215, 110, 0.6);
}
.wop-roulette-legend-avatar {
  width: clamp(28px, 2.2vw, 36px);
  height: clamp(28px, 2.2vw, 36px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid var(--player-color, var(--mode-accent));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wop-roulette-legend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-roulette-legend-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(12px, 1vw, 16px);
  color: var(--ink-1);
}
.wop-roulette-result {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  text-align: center;
  opacity: 0;
  animation: wopResultIn 0.7s cubic-bezier(.34, 1.56, .64, 1) forwards;
  z-index: 20;
  pointer-events: none;
  padding: clamp(20px, 3vh, 48px) clamp(32px, 4vw, 80px);
  border-radius: 24px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--bg-0) 85%, transparent),
    color-mix(in oklch, var(--mode-accent) 14%, var(--bg-0)));
  border: 2px solid color-mix(in oklch, var(--mode-accent) 55%, transparent);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px color-mix(in oklch, var(--mode-accent) 50%, transparent);
}
.wop-roulette-result .mono-label {
  display: block;
  color: #f5d76e;
  letter-spacing: 0.3em;
  margin-bottom: 10px;
  font-size: clamp(13px, 1vw, 17px);
}
@keyframes wopResultIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wop-roulette-result-name {
  font-size: clamp(56px, 5.2vw, 112px);
  color: var(--mode-accent);
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 0 48px color-mix(in oklch, var(--mode-accent) 80%, transparent);
}

/* ── CHOICE ─────────────────────────────────────────────────── */
.wop-choice-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.5vh, 40px);
  text-align: center;
  min-height: 0;
}
.wop-choice-picked {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
  padding: clamp(10px, 1.2vh, 16px) clamp(22px, 2vw, 36px);
  border-radius: 999px;
  background: color-mix(in oklch, var(--mode-accent) 12%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--mode-accent) 40%, transparent);
}
.wop-choice-picked .avatar {
  width: clamp(48px, 4vw, 72px);
  height: clamp(48px, 4vw, 72px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--player-color, var(--mode-accent)) 70%, transparent);
  display: grid;
  place-items: center;
}
.wop-choice-picked .avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-choice-picked .avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.6vw, 28px);
  color: var(--ink-1);
}
.wop-choice-picked .name {
  font-family: var(--font-display);
  font-size: clamp(32px, 2.8vw, 52px);
  color: var(--ink-1);
  line-height: 1;
}
.wop-choice-picked .label {
  font-size: clamp(11px, 0.85vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
}
.wop-choice-title {
  font-size: clamp(32px, 3vw, 56px);
  line-height: 1;
  color: var(--ink-1);
  margin: 0;
}
.wop-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.5vw, 48px);
  width: min(90%, 900px);
}
.wop-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vh, 14px);
  padding: clamp(28px, 3.5vh, 56px) clamp(24px, 2.5vw, 42px);
  border-radius: 24px;
  background: color-mix(in oklch, var(--choice-color, var(--mode-accent)) 12%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--choice-color, var(--mode-accent)) 40%, transparent);
  box-shadow: 0 0 40px color-mix(in oklch, var(--choice-color, var(--mode-accent)) 20%, transparent);
}
.wop-choice-truth { --choice-color: var(--wop-truth); }
.wop-choice-dare  { --choice-color: var(--wop-dare); }
.wop-choice-icon {
  font-family: var(--font-display);
  font-size: clamp(64px, 6vw, 112px);
  color: var(--choice-color);
  line-height: 1;
  text-shadow: 0 0 32px color-mix(in oklch, var(--choice-color) 60%, transparent);
}
.wop-choice-label {
  font-size: clamp(32px, 3vw, 56px);
  color: var(--ink-1);
  line-height: 1;
  letter-spacing: 0.05em;
}
.wop-choice-sub {
  color: color-mix(in oklch, var(--ink-2) 65%, transparent);
  font-size: clamp(11px, 0.9vw, 14px);
}
.wop-choice-hint {
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  font-size: clamp(13px, 1vw, 16px);
}
.wop-choice-hint span { color: var(--mode-accent); font-weight: 800; }

/* ── TASK ──────────────────────────────────────────────────── */
.wop-task-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  min-height: 0;
  justify-content: center;
}
.wop-task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
}
.wop-task-picked-pill,
.wop-doing-picked-pill,
.wop-choice-picked {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 20px);
}
.wop-task-picked-pill .avatar,
.wop-doing-picked-pill .avatar {
  width: clamp(44px, 3.4vw, 56px);
  height: clamp(44px, 3.4vw, 56px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--player-color, var(--mode-accent)) 70%, transparent);
  display: grid;
  place-items: center;
}
.wop-task-picked-pill .avatar img,
.wop-doing-picked-pill .avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-task-picked-pill .avatar .initial,
.wop-doing-picked-pill .avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--ink-1);
}
.wop-task-picked-pill .name,
.wop-doing-picked-pill .name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.3vw, 44px);
  color: var(--ink-1);
  line-height: 1;
}
.wop-task-choice-badge,
.wop-doing-outcome-badge {
  padding: clamp(8px, 1vh, 14px) clamp(18px, 1.8vw, 28px);
  border-radius: 999px;
  background: color-mix(in oklch, var(--choice-color, var(--mode-accent)) 90%, transparent);
  color: #0a1a0e;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 36px color-mix(in oklch, var(--choice-color, var(--mode-accent)) 45%, transparent);
}
.wop-task-choice-badge.is-truth,
.wop-doing-outcome-badge.is-truth { --choice-color: var(--wop-truth); }
.wop-task-choice-badge.is-dare,
.wop-doing-outcome-badge.is-dare { --choice-color: var(--wop-dare); }
.wop-task-choice-badge.is-penalty,
.wop-doing-outcome-badge.is-penalty { --choice-color: var(--wop-penalty); }

.wop-task-card {
  position: relative;
  padding: clamp(28px, 3.5vh, 56px) clamp(48px, 5vw, 96px);
  border-radius: 24px;
  background: color-mix(in oklch, var(--mode-accent) 10%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--mode-accent) 30%, transparent);
  box-shadow: 0 0 64px color-mix(in oklch, var(--mode-accent) 16%, transparent);
}
.wop-task-quote-open,
.wop-task-quote-close {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(80px, 8vw, 160px);
  color: color-mix(in oklch, var(--mode-accent) 40%, transparent);
  line-height: 0.5;
}
.wop-task-quote-open { top: 20px; left: 20px; }
.wop-task-quote-close { bottom: -30px; right: 20px; }
.wop-task-text {
  font-size: clamp(28px, 2.8vw, 52px);
  line-height: 1.15;
  color: var(--ink-1);
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 1;
}
.wop-task-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.2vw, 18px);
  color: color-mix(in oklch, var(--ink-2) 55%, transparent);
}
.wop-task-divider::before,
.wop-task-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in oklch, var(--ink-3) 20%, transparent);
}
.wop-task-penalty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1vw, 18px);
  padding: clamp(14px, 1.5vh, 22px) clamp(24px, 2vw, 40px);
  border-radius: 18px;
  border: 2px dashed color-mix(in oklch, var(--wop-penalty) 50%, transparent);
  background: color-mix(in oklch, var(--wop-penalty) 8%, transparent);
  text-align: center;
}
.wop-task-penalty-text {
  font-size: clamp(18px, 1.6vw, 28px);
  color: var(--wop-penalty);
  font-weight: 600;
  font-style: italic;
}
.wop-task-hint {
  text-align: center;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
}

/* ── DOING ─────────────────────────────────────────────────── */
.wop-doing-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 28px);
  min-height: 0;
  justify-content: center;
}
.wop-doing-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(16px, 1.5vw, 28px);
}
.wop-doing-card {
  padding: clamp(24px, 3vh, 44px) clamp(32px, 3vw, 56px);
  border-radius: 24px;
  background: color-mix(in oklch, var(--choice-color, var(--mode-accent)) 10%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--choice-color, var(--mode-accent)) 35%, transparent);
  box-shadow: 0 0 56px color-mix(in oklch, var(--choice-color, var(--mode-accent)) 18%, transparent);
  text-align: center;
}
.wop-doing-card.is-truth { --choice-color: var(--wop-truth); }
.wop-doing-card.is-dare  { --choice-color: var(--wop-dare); }
.wop-doing-card.is-penalty { --choice-color: var(--wop-penalty); }
.wop-doing-kicker {
  color: var(--choice-color, var(--mode-accent));
  margin-bottom: clamp(8px, 1vh, 12px);
}
.wop-doing-text {
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.2;
  color: var(--ink-1);
  margin: 0;
}
.wop-doing-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.8vw, 14px);
  justify-content: center;
  min-height: clamp(48px, 6vh, 80px);
}
.wop-doing-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  flex: 0 0 auto;
  padding-top: clamp(8px, 1vh, 16px);
  border-top: 1px solid color-mix(in oklch, var(--ink-3) 12%, transparent);
}
.wop-doing-next {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--mode-accent) 90%, transparent),
    color-mix(in oklch, var(--mode-accent) 65%, transparent));
  color: #1a0a1a;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: clamp(10px, 1.2vh, 16px) clamp(20px, 2vw, 34px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 36px color-mix(in oklch, var(--mode-accent) 40%, transparent);
}
.wop-doing-next:hover { transform: translateY(-2px); }

/* ── END — Highlights ─────────────────────────────────────── */
.wop-end-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(16px, 2vh, 28px);
}
.wop-end-head { display: flex; flex-direction: column; gap: 4px; }
.wop-end-kicker { color: var(--mode-accent); }
.wop-end-title {
  font-size: clamp(36px, 3.8vw, 72px);
  line-height: 0.95;
  color: var(--ink-1);
  margin: 0;
}
.wop-end-main {
  display: grid;
  grid-template-columns: minmax(320px, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 2.5vw, 48px);
  min-height: 0;
  align-items: stretch;
}

/* ─── Awards — der witzige Teil ───────────────────────── */
.wop-end-awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  min-height: 0;
  align-content: start;
}
.wop-end-award {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon winner";
  gap: 4px clamp(14px, 1.3vw, 22px);
  padding: clamp(16px, 1.8vh, 26px) clamp(18px, 1.8vw, 28px);
  border-radius: 18px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--award-color, var(--mode-accent)) 16%, var(--bg-2)) 0%,
    color-mix(in oklch, var(--award-color, var(--mode-accent)) 6%, var(--bg-2)) 100%);
  border: 1px solid color-mix(in oklch, var(--award-color, var(--mode-accent)) 40%, transparent);
  box-shadow: 0 0 40px color-mix(in oklch, var(--award-color, var(--mode-accent)) 18%, transparent);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  animation: wopAwardIn 0.5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.wop-end-award.is-truth   { --award-color: var(--wop-truth); }
.wop-end-award.is-dare    { --award-color: var(--wop-dare); }
.wop-end-award.is-penalty { --award-color: var(--wop-penalty); }
.wop-end-award.is-picked  { --award-color: var(--mode-accent); }
.wop-end-award.is-chicken { --award-color: oklch(0.75 0.15 70); }
@keyframes wopAwardIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wop-end-award-icon {
  grid-area: icon;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1;
  align-self: center;
}
.wop-end-award-title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--award-color, var(--mode-accent));
  line-height: 1;
  letter-spacing: 0.02em;
}
.wop-end-award-winner {
  grid-area: winner;
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 14px);
  min-width: 0;
}
.wop-end-award-avatar {
  width: clamp(30px, 2.4vw, 40px);
  height: clamp(30px, 2.4vw, 40px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--player-color, var(--ink-3)) 60%, transparent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.wop-end-award-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-end-award-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 17px);
  color: var(--ink-1);
}
.wop-end-award-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.7vw, 32px);
  color: var(--ink-1);
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wop-end-award-value {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.1vw, 18px);
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  margin-left: auto;
  flex-shrink: 0;
}

.wop-end-breakdown {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 16px);
  min-height: 0;
}
.wop-end-breakdown-label {
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
}
.wop-end-players {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  min-height: 0;
}
.wop-end-players-label {
  font-size: clamp(12px, 0.9vw, 15px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
  margin-bottom: clamp(4px, 0.6vh, 8px);
}
.wop-end-player-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: clamp(10px, 1.1vw, 18px);
  align-items: center;
  padding: clamp(10px, 1.2vh, 16px) clamp(14px, 1.2vw, 20px);
  border-radius: 14px;
  background: color-mix(in oklch, var(--bg-2) 70%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink-3) 14%, transparent);
}
.wop-end-player-row.is-leader {
  background: color-mix(in oklch, var(--mode-accent) 14%, var(--bg-2));
  border-color: color-mix(in oklch, var(--mode-accent) 40%, transparent);
}
.wop-end-player-avatar {
  width: clamp(44px, 3.4vw, 58px);
  height: clamp(44px, 3.4vw, 58px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid color-mix(in oklch, var(--player-color, var(--ink-3)) 60%, transparent);
  display: grid;
  place-items: center;
}
.wop-end-player-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wop-end-player-avatar .initial {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--ink-1);
}
.wop-end-player-name {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 26px);
  color: var(--ink-1);
  line-height: 1;
}
.wop-end-player-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(56px, 5vw, 72px);
}
.wop-end-player-stat .num {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 30px);
  color: var(--ink-1);
  line-height: 1;
}
.wop-end-player-stat .lbl {
  font-size: clamp(9px, 0.7vw, 11px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
}
.wop-end-player-stat.truth .num { color: var(--wop-truth); }
.wop-end-player-stat.dare  .num { color: var(--wop-dare); }
.wop-end-player-stat.penalty .num { color: var(--wop-penalty); }

.wop-end-actions {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 24px);
  padding-top: clamp(8px, 1vh, 16px);
}

/* ═══════════════════════════════════════════════════════════════════
   PHONE — WoP (Choice / Task / Doing)
   =================================================================== */
.wop-phone-head {
  padding: 14px 16px 8px;
}
.wop-phone-head .kicker {
  color: var(--wop-accent);
  letter-spacing: 0.18em;
  font-size: 11px;
}
.wop-phone-level {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}
.wop-phone-body {
  padding: 8px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wop-phone-picked-box {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink-1);
  text-align: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--wop-accent) 10%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--wop-accent) 30%, transparent);
}
.wop-phone-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wop-phone-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  border-radius: 18px;
  border: 2px solid color-mix(in oklch, var(--choice-color, var(--wop-accent)) 40%, transparent);
  background: color-mix(in oklch, var(--choice-color, var(--wop-accent)) 10%, var(--bg-2));
  color: var(--ink-1);
  cursor: pointer;
  user-select: none;
  min-height: 140px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.wop-phone-choice:active { transform: scale(0.97); }
.wop-phone-choice-truth { --choice-color: var(--wop-truth); }
.wop-phone-choice-dare  { --choice-color: var(--wop-dare); }
.wop-phone-choice-icon {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--choice-color);
  line-height: 1;
}
.wop-phone-choice-label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.wop-phone-choice-sub {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--ink-2) 65%, transparent);
}
.wop-phone-timer-row {
  color: var(--wop-accent);
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-align: center;
}
.wop-phone-timer-row .bar {
  height: 4px;
  background: color-mix(in oklch, var(--wop-accent) 20%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.wop-phone-timer-row .bar-fill {
  height: 100%;
  background: var(--wop-accent);
  width: 100%;
  transition: width 0.4s linear;
}
.wop-phone-wait {
  text-align: center;
  padding: 18px 16px;
  border: 1px dashed color-mix(in oklch, var(--ink-3) 30%, transparent);
  border-radius: 14px;
  color: var(--ink-2);
}
.wop-phone-wait .display {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-1);
  margin-top: 4px;
}
.wop-phone-task-card {
  padding: 18px 16px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--wop-accent) 10%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--wop-accent) 35%, transparent);
}
.wop-phone-task-text {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink-1);
  text-align: center;
}
.wop-phone-task-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Accept-Button: ruhiger Outline-Stil mit subtilem Tint, damit er NICHT
   aussieht als wäre er schon ausgewählt. Vorher: voll-gefüllter Gradient
   in --wop-truth → wirkte wie "Bestätigt". Jetzt: dezenter Hintergrund,
   sichtbarer Solid-Border. Aktiver State (:active) zeigt deutlich den Klick. */
.wop-phone-accept {
  background: color-mix(in oklch, var(--wop-truth) 10%, var(--bg-2));
  color: var(--wop-truth);
  font-weight: 700;
  border: 2px solid color-mix(in oklch, var(--wop-truth) 50%, transparent);
  border-radius: 14px;
  transition: background 140ms ease, transform 100ms ease, border-color 140ms ease;
}
.wop-phone-accept:hover {
  background: color-mix(in oklch, var(--wop-truth) 18%, var(--bg-2));
  border-color: color-mix(in oklch, var(--wop-truth) 70%, transparent);
}
.wop-phone-accept:active,
.wop-phone-accept.armed {
  background: linear-gradient(135deg, var(--wop-truth), color-mix(in oklch, var(--wop-truth) 70%, transparent));
  color: #0a1a0e;
  transform: scale(0.98);
  border-color: var(--wop-truth);
}
.wop-phone-accept:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wop-phone-penalty {
  background: color-mix(in oklch, var(--wop-penalty) 14%, var(--bg-2));
  color: var(--wop-penalty);
  border: 2px dashed color-mix(in oklch, var(--wop-penalty) 50%, transparent);
  font-weight: 700;
  border-radius: 14px;
  transition: background 140ms ease, transform 100ms ease;
}
.wop-phone-penalty:hover {
  background: color-mix(in oklch, var(--wop-penalty) 22%, var(--bg-2));
}
.wop-phone-penalty:active {
  transform: scale(0.98);
  background: color-mix(in oklch, var(--wop-penalty) 30%, var(--bg-2));
}
.wop-phone-penalty-preview {
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--wop-penalty) 8%, transparent);
  border: 1px dashed color-mix(in oklch, var(--wop-penalty) 40%, transparent);
}
.wop-phone-penalty-text {
  color: var(--wop-penalty);
  font-size: 13px;
  font-style: italic;
}
.wop-phone-doing-card {
  padding: 20px 16px;
  border-radius: 16px;
  background: color-mix(in oklch, var(--wop-accent) 10%, var(--bg-2));
  border: 2px solid color-mix(in oklch, var(--wop-accent) 30%, transparent);
}
.wop-phone-doing-text {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink-1);
  text-align: center;
}
.wop-phone-doing-hint {
  color: var(--ink-3);
  text-align: center;
  letter-spacing: 0.1em;
}
.wop-phone-done {
  margin-top: 12px;
}
.wop-phone-done .mobile-btn {
  background: var(--wop-accent);
  color: #1a0a1a;
  font-weight: 800;
}


/* ═══════════════════════════════════════════════════════════════════
   EVENING SUMMARY — Abend-Zusammenfassung (Intro · Zahlen · Awards ·
   Highlights · Foto-Modus)
   =================================================================== */
.evening-screen {
  position: absolute;
  top: clamp(96px, 11vh, 132px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.evening-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.evening-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vh, 32px);
  text-align: center;
  padding: clamp(20px, 3vh, 48px);
  animation: evSlideIn 0.5s cubic-bezier(.17, .67, .3, 1);
}
.evening-slide.u-hidden { display: none; }
@keyframes evSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* INTRO */
.ev-intro .ev-logo {
  font-size: clamp(32px, 3vw, 56px);
  letter-spacing: -0.02em;
}
.ev-intro .mono-label {
  color: var(--acc1);
  letter-spacing: 0.26em;
  font-size: clamp(14px, 1.2vw, 20px);
}
.ev-duration {
  font-size: clamp(64px, 7vw, 140px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  margin: 0;
  text-shadow: 0 0 48px color-mix(in oklch, var(--acc1) 40%, transparent);
}

/* ZAHLEN — 5er Stat-Grid */
.ev-numbers .mono-label {
  letter-spacing: 0.28em;
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
}
.ev-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: clamp(16px, 2vw, 32px);
  max-width: min(90vw, 1200px);
}
.ev-stat {
  padding: clamp(18px, 2vh, 32px) clamp(16px, 1.5vw, 28px);
  border-radius: 18px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--acc1) 10%, var(--bg-2)) 0%,
    color-mix(in oklch, var(--bg-2) 90%, transparent) 100%);
  border: 1px solid color-mix(in oklch, var(--ink-3) 16%, transparent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ev-count {
  font-size: clamp(40px, 4.4vw, 84px);
  color: var(--acc1);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ev-stat .mono-label {
  font-size: clamp(11px, 0.9vw, 14px);
  letter-spacing: 0.2em;
  color: color-mix(in oklch, var(--ink-2) 65%, transparent);
}

/* AWARDS — Zeremonie mit gestaffelter Einblendung */
.ev-awards > .mono-label {
  letter-spacing: 0.28em;
  color: var(--acc1);
}
.ev-award-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  max-width: min(92vw, 1300px);
}
.ev-award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vh, 14px);
  padding: clamp(18px, 2.2vh, 32px) clamp(18px, 1.8vw, 28px);
  border-radius: 20px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--acc1) 16%, var(--bg-2)) 0%,
    color-mix(in oklch, var(--acc1) 5%, var(--bg-2)) 100%);
  border: 1px solid color-mix(in oklch, var(--acc1) 36%, transparent);
  box-shadow: 0 0 48px color-mix(in oklch, var(--acc1) 18%, transparent);
  animation: evAwardIn 0.55s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes evAwardIn {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ev-award-icon {
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1;
}
.ev-award-title {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.14em;
  color: var(--acc1);
}
.ev-award-sub {
  letter-spacing: 0.14em;
  font-size: clamp(10px, 0.78vw, 13px);
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
}
.ev-award-player {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  margin-top: clamp(4px, 0.5vh, 8px);
}
.ev-award-avatar {
  width: clamp(36px, 3vw, 48px);
  height: clamp(36px, 3vw, 48px);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-1);
  border: 2px solid var(--acc1);
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center;
}
.ev-award-avatar.ev-award-avatar-fallback {
  font-family: var(--font-display);
  font-size: clamp(14px, 1vw, 18px);
  color: var(--ink-1);
}
.ev-award-name {
  font-size: clamp(20px, 1.8vw, 30px);
  color: var(--ink-1);
  line-height: 1;
}

/* MOMENTS — Highlight-Liste */
.ev-moments > .mono-label {
  letter-spacing: 0.28em;
  color: var(--acc1);
}
.ev-moments-list {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vh, 14px);
  max-width: min(92vw, 900px);
  width: 100%;
}
.ev-moment {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.3vw, 20px);
  padding: clamp(12px, 1.4vh, 20px) clamp(16px, 1.4vw, 24px);
  border-radius: 14px;
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  border-left: 3px solid var(--acc1);
  opacity: 0;
  animation: evMomentIn 0.4s ease-out forwards;
}
@keyframes evMomentIn {
  to { opacity: 1; }
}
.ev-moment-icon {
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
  flex-shrink: 0;
}
.ev-moment-text {
  font-size: clamp(14px, 1.2vw, 20px);
  color: var(--ink-1);
  text-align: left;
  line-height: 1.35;
}

/* RECAP — KI-generierter Fließtext zwischen Moments und Photo.
   Text kann 250-350 Wörter lang sein → Viewport-begrenzter Container mit
   smooth Auto-Scroll während TTS läuft. Scroll-Dauer wird via JS gesetzt. */
.ev-recap {
  padding: clamp(20px, 2.5vh, 40px) clamp(16px, 4vw, 64px);
  max-width: min(92vw, 1100px);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vh, 32px);
  align-items: center;
  /* Volle verfügbare Höhe nutzen, damit Text nicht am Screen-Rand hängt */
  height: min(78vh, 820px);
}
.ev-recap > .mono-label {
  opacity: 0.7;
  letter-spacing: 0.22em;
  flex: 0 0 auto;
}
.ev-recap-body {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0; /* wichtig: erlaubt dem Flex-Child zu schrumpfen */
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden; /* Overflow wird durch Auto-Scroll im inner scroller verwaltet */
  /* Nur Top-Fade — unten voller Kontrast, damit der letzte Satz sichtbar bleibt */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 100%);
}
.ev-recap-scroller {
  width: 100%;
  height: 100%;
  overflow-y: auto; /* Karaoke-Modus nutzt natives scrollTo; Classic-Modus translateY */
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  padding-block: clamp(16px, 3vh, 40px);
  scrollbar-width: none;    /* Firefox */
}
.ev-recap-scroller::-webkit-scrollbar { display: none; } /* WebKit */

.ev-recap-text {
  font-size: clamp(15px, 1.35vw, 22px);
  line-height: 1.65;
  color: var(--ink-1);
  max-width: 62ch;
  text-align: center;
  white-space: pre-wrap;
  animation: ev-recap-fade 0.9s ease-out both;
  font-family: var(--font-serif, Georgia, 'Times New Roman', serif);
  font-style: italic;
  margin: 0;
  /* GPU-Compositor-Layer fuer smooth translateY im Classic-Mode */
  will-change: transform;
  transform: translateY(0);
  align-self: flex-start;
}
.ev-recap-text.u-hidden { display: none; }

/* Karaoke-Modus: jedes Wort wird einzeln revealt */
.ev-recap-word {
  opacity: 0.18;
  transition: opacity 450ms ease-out, color 300ms ease-out, text-shadow 300ms ease-out;
  color: color-mix(in oklch, var(--ink-1) 60%, transparent);
}
.ev-recap-word.is-spoken {
  opacity: 1;
  color: var(--ink-1);
}
/* Sanfter Highlight-Pulse beim Uebergang, damit das Wort hervorsticht. */
.ev-recap-word.is-spoken:not(.is-past) {
  animation: ev-recap-word-pulse 640ms ease-out both;
}
@keyframes ev-recap-word-pulse {
  0%   { text-shadow: 0 0 0 transparent; }
  30%  { text-shadow: 0 0 18px color-mix(in oklch, var(--acc1) 65%, transparent); }
  100% { text-shadow: 0 0 0 transparent; }
}
/* Im Karaoke-Modus disabled der Text den translateY-transform */
.ev-recap-text.is-karaoke {
  transform: none !important;
  will-change: auto;
}
@keyframes ev-recap-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fallback-Button wenn Browser-Autoplay blockt */
.ev-recap-playhint {
  position: absolute;
  bottom: clamp(16px, 2vh, 24px);
  right: clamp(16px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--ink-1);
  font-size: 12px;
  letter-spacing: 0.08em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  animation: ev-recap-fade 0.5s ease-out both;
  z-index: 10;
}
.ev-recap-playhint:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}
.ev-recap-playhint span {
  font-size: 16px;
  color: var(--acc1);
}

/* Spinner: 3 pulsierende Dots */
.ev-recap-spinner {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  align-items: center;
  justify-content: center;
}
.ev-recap-spinner.u-hidden { display: none; }
.ev-recap-dot {
  width: clamp(10px, 0.8vw, 14px);
  height: clamp(10px, 0.8vw, 14px);
  border-radius: 50%;
  background: var(--accent, oklch(0.75 0.15 80));
  opacity: 0.4;
  animation: ev-recap-dot 1.1s ease-in-out infinite;
}
.ev-recap-dot:nth-child(2) { animation-delay: 0.18s; }
.ev-recap-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes ev-recap-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.9); }
  40%           { opacity: 1;   transform: scale(1.15); }
}

/* PHOTO-MODUS — statische Zusammenfassung mit Reset-Button */
.ev-photo {
  padding: clamp(24px, 3vh, 48px);
  max-width: min(90vw, 1200px);
  width: 100%;
}
.ev-photo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin-bottom: clamp(16px, 2vh, 32px);
}
.ev-photo-head .ev-logo {
  font-size: clamp(26px, 2.4vw, 42px);
}
.ev-photo-date {
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  letter-spacing: 0.22em;
}
.ev-photo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  width: 100%;
  margin-bottom: clamp(16px, 2vh, 28px);
}
.ev-stat.sm {
  padding: clamp(12px, 1.4vh, 20px) clamp(14px, 1.2vw, 20px);
  border-radius: 14px;
  align-items: center;
  text-align: center;
}
.ev-stat.sm .display {
  font-size: clamp(28px, 3vw, 52px);
  color: var(--acc1);
  line-height: 1;
}
.ev-photo-awards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  margin-bottom: clamp(16px, 2vh, 28px);
}
.ev-photo-award {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(10px, 1.2vh, 16px) clamp(12px, 1.2vw, 18px);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-2) 80%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink-3) 14%, transparent);
  text-align: left;
}
.ev-photo-award-icon {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  flex-shrink: 0;
}
.ev-photo-award-body { display: flex; flex-direction: column; gap: 2px; }
.ev-photo-award-body .mono-label {
  color: color-mix(in oklch, var(--ink-2) 60%, transparent);
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.2em;
}
.ev-photo-award-name {
  font-size: clamp(16px, 1.4vw, 22px);
  color: var(--ink-1);
  line-height: 1;
}
.ev-photo-actions {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
}

/* Empty-State: Keine Spiele, keine Awards — positive Meldung */
.ev-empty {
  text-align: center;
  padding: clamp(24px, 3vh, 40px);
  color: color-mix(in oklch, var(--ink-2) 70%, transparent);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  max-width: 60ch;
}
.ev-empty .display {
  font-size: clamp(28px, 2.8vw, 48px);
  color: var(--acc1);
  line-height: 1;
  margin-bottom: clamp(8px, 1vh, 16px);
  display: block;
}

/* Empty-Evening — sauberer Stand-alone State */
.ev-empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vh, 28px);
  max-width: 50ch;
  text-align: center;
}
.ev-empty-icon {
  font-family: var(--font-display);
  font-size: clamp(72px, 7vw, 128px);
  color: var(--acc1);
  line-height: 1;
  text-shadow: 0 0 48px color-mix(in oklch, var(--acc1) 50%, transparent);
  opacity: 0;
  animation: evEmptyIn 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.1s forwards;
}
.ev-empty-title {
  font-size: clamp(40px, 4.2vw, 72px);
  line-height: 1.1;
  color: var(--ink-1);
  margin: 0;
  letter-spacing: -0.02em;
  opacity: 0;
  animation: evEmptyIn 0.5s ease-out 0.25s forwards;
}
.ev-empty-text {
  font-size: clamp(16px, 1.3vw, 20px);
  color: color-mix(in oklch, var(--ink-2) 80%, transparent);
  line-height: 1.5;
  margin: 0;
  opacity: 0;
  animation: evEmptyIn 0.5s ease-out 0.4s forwards;
}
.ev-empty-wrap .btn {
  opacity: 0;
  animation: evEmptyIn 0.5s ease-out 0.55s forwards;
  cursor: pointer;
}
@keyframes evEmptyIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   DOWN THE RABBIT HOLE — Sub-Theme (scoped auf .mode-dtrh)
   Task 11 — Spec: docs/superpowers/specs/2026-04-23-down-the-rabbit-hole-design.md
   ================================================================ */

.mode-dtrh {
  --dtrh-bg: #0a0a0f;
  --dtrh-accent: #ff1744;
  --dtrh-accent-deep: #c62828;
  --dtrh-text-pale: #ff8a80;
  --dtrh-gold: #d4a574;
  --dtrh-ok: #00e67a;
  background: var(--dtrh-bg);
}

.mode-dtrh::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Dezentere Vignette als vorher (0.32 → 0.18) — die rote Halo erschlug
     den Inhalt, jetzt nur noch atmosphärisch im Rand. */
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(198, 40, 40, 0.18) 100%);
  z-index: 0;
}

/* DTRH-Screen-Container: respektiert chrome-top (~80px) und chrome-bottom (~112px),
   damit Header/Logo und untere Hint-Leiste den DTRH-Content nicht mehr überdecken.
   Pattern angelehnt an .sw-screen — fixes "Buttons werden verdeckt"-Bug auf End-Screen. */
.dtrh-screen {
  position: absolute;
  top: clamp(100px, 11.5vh, 140px);
  left: clamp(24px, 2.92vw, 72px);
  right: clamp(24px, 2.92vw, 72px);
  bottom: clamp(100px, 11vh, 140px);
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 2vh, 32px);
  min-height: 0;
  overflow: hidden;
}
/* DTRH-End-Screen — eigenes Layout: Grid kann scrollen, Actions bleiben unten gepinnt. */
#screen-dtrh-end {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(20px, 2.5vh, 36px);
}
#screen-dtrh-end .dtrh-end-grid {
  overflow-y: auto;
  min-height: 0;
  align-items: start;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--dtrh-text-pale) 55%, transparent) transparent;
}
#screen-dtrh-end .dtrh-end-grid::-webkit-scrollbar { width: 6px; }
#screen-dtrh-end .dtrh-end-grid::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--dtrh-text-pale) 55%, transparent);
  border-radius: 3px;
}
#screen-dtrh-end .dtrh-end-actions {
  flex-shrink: 0;
  display: flex;
  gap: clamp(10px, 1vw, 18px);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0;
}

/* ── Depth-Indikator (senkrechte Skala links) ─────────────────── */
.dtrh-depth {
  position: absolute;
  left: clamp(12px, 1.6vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.6vh, 8px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  z-index: 2;
  pointer-events: none;
}

.dtrh-depth-row {
  font-size: clamp(9px, 0.9vw, 13px);
  letter-spacing: 0.12em;
  color: var(--dtrh-text-pale);
  opacity: 0.35;
  white-space: nowrap;
}
.dtrh-depth-row.is-active {
  color: var(--dtrh-gold);
  opacity: 1;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(212, 165, 116, 0.45);
}
.dtrh-depth-row.is-past { opacity: 0.18; }

.dtrh-depth-flavor {
  margin-top: clamp(8px, 1vh, 14px);
  font-size: clamp(10px, 1vw, 14px);
  color: var(--dtrh-gold);
  font-style: italic;
  max-width: 200px;
  line-height: 1.3;
  opacity: 0.85;
}

/* ── Theorie-Karte + CLASSIFIED-Stempel ─────────────────────── */
.dtrh-card {
  position: relative;
  max-width: min(72ch, 70vw);
  margin: 0 auto;
  padding: clamp(28px, 4vh, 56px) clamp(32px, 5vw, 72px);
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid var(--dtrh-accent);
  border-radius: 18px;
  box-shadow:
    0 0 48px rgba(255, 23, 68, 0.28),
    inset 0 0 36px rgba(198, 40, 40, 0.14);
  /* Lange Theorien/Funfacts dürfen scrollen statt vom Card-Rand abgeschnitten
     zu werden. Container (.dtrh-screen) hat overflow:hidden, also brauchen
     wir den Scroll innerhalb der Card. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, var(--dtrh-text-pale) 50%, transparent) transparent;
}
.dtrh-card::-webkit-scrollbar { width: 6px; }
.dtrh-card::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--dtrh-text-pale) 50%, transparent);
  border-radius: 3px;
}

.dtrh-stamp {
  position: absolute;
  top: clamp(12px, 2vh, 22px);
  right: clamp(20px, 3vw, 40px);
  padding: clamp(5px, 0.7vh, 10px) clamp(12px, 1.4vw, 22px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(12px, 1.2vw, 18px);
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--dtrh-gold);
  border: 3px solid var(--dtrh-gold);
  transform: rotate(-8deg);
  opacity: 0.88;
  animation: dtrh-stamp-in 600ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
  pointer-events: none;
}
@keyframes dtrh-stamp-in {
  0%   { opacity: 0; transform: rotate(45deg) scale(2); }
  60%  { opacity: 0.9; transform: rotate(-12deg) scale(0.85); }
  100% { opacity: 0.88; transform: rotate(-8deg) scale(1); }
}

.dtrh-theory {
  font-family: var(--font-display, 'Archivo Black'), sans-serif;
  /* Min auf 18px gesenkt damit lange Theorien auf schmalen Devices noch
     komplett sichtbar sind, ohne abgeschnitten zu werden. */
  font-size: clamp(18px, 2.6vw, 42px);
  line-height: 1.32;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  /* Bei sehr langen Theorien: words break statt overflow */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.dtrh-brief-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(12px, 1.2vw, 18px);
  color: var(--dtrh-accent);
  letter-spacing: 0.32em;
  text-align: center;
  margin-bottom: clamp(20px, 2.5vh, 32px);
  text-shadow: 0 0 16px rgba(255, 23, 68, 0.45);
}

/* ── Vote-Screen-Head (Bonus + Timer) ───────────────────────── */
.dtrh-vote-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: 0 clamp(24px, 4vw, 48px);
  min-height: clamp(80px, 10vh, 120px);
}
.dtrh-bonus-badge {
  background: var(--dtrh-gold);
  color: #000;
  padding: clamp(8px, 1vh, 14px) clamp(16px, 2vw, 24px);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 900;
  font-size: clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.12em;
  animation: dtrh-pulse-gold 1.6s ease-in-out infinite;
}
@keyframes dtrh-pulse-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 165, 116, 0.4); }
  50%      { box-shadow: 0 0 32px rgba(212, 165, 116, 0.9); }
}
.dtrh-timer {
  width: clamp(64px, 8vw, 100px);
  height: clamp(64px, 8vw, 100px);
}
.dtrh-timer .timer-track {
  fill: none;
  stroke: rgba(255, 23, 68, 0.18);
  stroke-width: 6;
}
.dtrh-timer .timer-fill {
  fill: none;
  stroke: var(--dtrh-accent);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.25s linear, stroke 0.3s;
  filter: drop-shadow(0 0 8px rgba(255, 23, 68, 0.6));
}
.dtrh-timer.is-warn .timer-fill { stroke: var(--dtrh-gold); }
.dtrh-timer.is-urgent .timer-fill { stroke: var(--dtrh-accent); animation: dtrh-timer-urgent 0.6s ease-in-out infinite; }
@keyframes dtrh-timer-urgent {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.dtrh-timer .timer-label {
  font-family: var(--font-display);
  font-size: 34px;
  fill: #fff;
  font-weight: 900;
}

/* ── Vote-Meter mit Conviction-Pill ─────────────────────────── */
.dtrh-vote-meter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  flex-wrap: wrap;
  padding: 0 clamp(16px, 3vw, 32px);
}
.dtrh-conv-pill {
  padding: clamp(10px, 1.3vh, 16px) clamp(18px, 2vw, 28px);
  background: rgba(212, 165, 116, 0.12);
  border: 2px solid var(--dtrh-gold);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 18px);
  color: var(--dtrh-gold);
  letter-spacing: 0.15em;
  text-shadow: 0 0 8px rgba(212, 165, 116, 0.5);
}

/* ── Reveal-Karte mit Pop-In Verdict ────────────────────────── */
.dtrh-reveal-card {
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
.dtrh-reveal-card.is-real {
  border-color: var(--dtrh-ok);
  box-shadow:
    0 0 56px rgba(0, 230, 122, 0.45),
    inset 0 0 36px rgba(0, 230, 122, 0.12);
}
.dtrh-reveal-card.is-fake {
  border-color: var(--dtrh-accent);
  box-shadow:
    0 0 56px rgba(255, 23, 68, 0.55),
    inset 0 0 36px rgba(198, 40, 40, 0.18);
}

.dtrh-verdict-label {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 112px);
  text-align: center;
  margin-bottom: clamp(20px, 2.5vh, 36px);
  letter-spacing: 0.06em;
  animation: dtrh-verdict-pop 650ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.dtrh-verdict-label.is-real {
  color: var(--dtrh-ok);
  text-shadow: 0 0 36px rgba(0, 230, 122, 0.6);
}
.dtrh-verdict-label.is-fake {
  color: var(--dtrh-accent);
  text-shadow: 0 0 36px rgba(255, 23, 68, 0.7);
}
@keyframes dtrh-verdict-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-3deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── FallIn-Phase (Stack der Falsch-Voter) ──────────────────── */
.dtrh-fallin-head {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 80px);
  color: var(--dtrh-accent);
  letter-spacing: 0.22em;
  margin-bottom: clamp(28px, 4vh, 56px);
  text-shadow: 0 0 42px rgba(255, 23, 68, 0.65);
}
.dtrh-fallin-stack {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(14px, 2vw, 36px);
  flex-wrap: wrap;
  padding: 0 clamp(16px, 3vw, 48px);
}
.dtrh-fallin-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vh, 14px);
  opacity: 0;
  animation: dtrh-fallin-pop 500ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
.dtrh-fallin-item.is-conv-fool {
  filter: drop-shadow(0 0 16px var(--dtrh-gold));
}
.dtrh-fallin-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 1.1vw, 14px);
  color: var(--dtrh-text-pale);
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid var(--dtrh-accent);
  padding: clamp(6px, 0.8vh, 10px) clamp(12px, 1.4vw, 18px);
  border-radius: 12px;
  /* Multi-line wrap: Label darf umbrechen statt mit Ellipse abgeschnitten zu
     werden. Aktion-Verben wie "hat sich foppen lassen" passen sonst nie. */
  white-space: normal;
  max-width: 18ch;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.dtrh-fallin-item.is-conv-fool .dtrh-fallin-label {
  color: var(--dtrh-gold);
  border-color: var(--dtrh-gold);
}
.dtrh-fallin-avatar {
  width: clamp(56px, 7vw, 108px);
  height: clamp(56px, 7vw, 108px);
  border-radius: 50%;
  border: 3px solid var(--dtrh-accent);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 48px);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 23, 68, 0.5);
}
.dtrh-fallin-item.is-conv-fool .dtrh-fallin-avatar {
  border-color: var(--dtrh-gold);
  box-shadow: 0 0 28px rgba(212, 165, 116, 0.7);
}
.dtrh-fallin-more {
  align-self: center;
  padding: 10px 18px;
  border: 1px dashed var(--dtrh-text-pale);
  border-radius: 999px;
  color: var(--dtrh-text-pale);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 1.1vw, 14px);
}
@keyframes dtrh-fallin-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.6) rotate(-4deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ── Fact-Phase ────────────────────────────────────────────── */
.dtrh-fact-card .dtrh-fact-kicker {
  color: var(--dtrh-gold);
  letter-spacing: 0.3em;
  margin-bottom: clamp(16px, 2vh, 26px);
  text-align: center;
}
.dtrh-fact-text {
  font-family: var(--font-text, inherit);
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.55;
  color: #f5f5f5;
  text-align: center;
  max-width: 65ch;
  margin: 0 auto;
}
.dtrh-score-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.5vw, 20px);
  margin-top: clamp(20px, 3vh, 36px);
}
.dtrh-score-item {
  padding: clamp(8px, 1vh, 14px) clamp(14px, 1.6vw, 22px);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 22px);
  border: 2px solid;
  min-width: clamp(120px, 14vw, 180px);
  text-align: center;
}
.dtrh-score-item.is-plus {
  color: var(--dtrh-ok);
  border-color: var(--dtrh-ok);
  background: rgba(0, 230, 122, 0.12);
}
.dtrh-score-item.is-minus {
  color: var(--dtrh-accent);
  border-color: var(--dtrh-accent);
  background: rgba(255, 23, 68, 0.12);
}

/* ── End-Screen: Podium + Awards ────────────────────────────── */
.dtrh-end-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(24px, 4vh, 56px);
  max-width: min(1600px, 92vw);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .dtrh-end-grid { grid-template-columns: 1fr; }
}
.dtrh-end-kicker {
  color: var(--dtrh-gold);
  letter-spacing: 0.28em;
  font-size: clamp(13px, 1.2vw, 18px);
  margin-bottom: clamp(16px, 2vh, 28px);
}
.dtrh-end-winner-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: clamp(20px, 3vh, 36px);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.2), rgba(255, 23, 68, 0.1));
  border: 2px solid var(--dtrh-gold);
  border-radius: 18px;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.dtrh-end-winner-avatar {
  width: clamp(100px, 12vw, 200px);
  height: clamp(100px, 12vw, 200px);
  border-radius: 50%;
  border: 4px solid var(--dtrh-gold);
  box-shadow: 0 0 42px rgba(212, 165, 116, 0.7);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 64px);
  color: #fff;
}
.dtrh-end-winner-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 56px);
  color: #fff;
}
.dtrh-end-winner-score {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--dtrh-gold);
  font-size: clamp(14px, 1.4vw, 22px);
  letter-spacing: 0.15em;
  margin-top: 6px;
}
.dtrh-end-ranks {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vh, 12px);
  margin-bottom: clamp(16px, 2vh, 24px);
}
.dtrh-end-rank {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(8px, 1vh, 14px) clamp(14px, 1.6vw, 22px);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-left: 3px solid var(--dtrh-accent);
  font-family: var(--font-display);
  color: #fff;
}
.dtrh-end-rank-score {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--dtrh-text-pale);
  font-size: 0.85em;
}
.dtrh-end-summary {
  margin-top: clamp(16px, 2vh, 24px);
  padding: clamp(12px, 1.6vh, 20px);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(12px, 1.2vw, 16px);
  color: var(--dtrh-text-pale);
  letter-spacing: 0.1em;
  text-align: center;
}

.dtrh-end-awards {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vh, 20px);
}
.dtrh-award-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: center;
  padding: clamp(16px, 2vh, 28px);
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--dtrh-accent);
  border-radius: 14px;
  opacity: 0;
  animation: dtrh-award-in 500ms cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
.dtrh-award-card:nth-child(1) { animation-delay: 0ms; }
.dtrh-award-card:nth-child(2) { animation-delay: 220ms; }
.dtrh-award-card:nth-child(3) { animation-delay: 440ms; }
.dtrh-award-card.is-empty {
  opacity: 0.55;
  border-style: dashed;
  border-color: color-mix(in oklch, var(--dtrh-text-pale) 50%, transparent);
  background: rgba(0, 0, 0, 0.35);
  animation-delay: 0ms;
  animation-fill-mode: forwards;
}
/* Empty-Award-Icons werden monochrom-blass dargestellt — sonst wirken sie
   wie aktive Awards, was visuell verwirrt. */
.dtrh-award-card.is-empty .dtrh-award-icon {
  filter: grayscale(0.8) brightness(0.6);
  opacity: 0.6;
}
.dtrh-award-card.is-empty .dtrh-award-title {
  color: color-mix(in oklch, var(--dtrh-gold) 55%, var(--ink-3));
}
.dtrh-award-card.is-empty .dtrh-award-metric {
  font-style: italic;
  color: color-mix(in oklch, var(--dtrh-text-pale) 60%, transparent);
}
.dtrh-award-icon {
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
}
.dtrh-award-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--dtrh-gold);
  letter-spacing: 0.18em;
  font-size: clamp(11px, 1.1vw, 15px);
  margin-bottom: 4px;
}
.dtrh-award-winner-row {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 16px);
}
.dtrh-award-avatar {
  width: clamp(32px, 3.5vw, 48px);
  height: clamp(32px, 3.5vw, 48px);
  border-radius: 50%;
  border: 2px solid var(--dtrh-accent);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(14px, 1.3vw, 18px);
  flex-shrink: 0;
}
.dtrh-award-winner {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 28px);
  color: #fff;
}
.dtrh-award-metric {
  color: var(--dtrh-text-pale);
  font-size: clamp(12px, 1.1vw, 16px);
  margin-top: 4px;
}
@keyframes dtrh-award-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.dtrh-award-card.is-empty { opacity: 0.45; }

.dtrh-end-actions {
  margin-top: clamp(16px, 2vh, 28px);
}

/* ── Phone: Vote + Feedback ────────────────────────────────── */
.screen-dtrh, .screen-dtrh-feedback {
  background: var(--dtrh-bg, #0a0a0f);
  color: #fff;
  padding: clamp(16px, 4vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 18px);
  position: relative;
  min-height: 100%;
  /* Lange Theorien dürfen den Phone-Screen scrollen statt unter den Buttons
     abgeschnitten zu werden. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.screen-dtrh::before, .screen-dtrh-feedback::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(198, 40, 40, 0.2) 100%);
  pointer-events: none;
  z-index: 0;
}
.screen-dtrh > *, .screen-dtrh-feedback > * {
  position: relative;
  z-index: 1;
}

.p-dtrh-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 3.2vw, 14px);
  letter-spacing: 0.14em;
  color: #d4a574;
}
.p-dtrh-round, .p-dtrh-depth { white-space: nowrap; }
.p-dtrh-timer {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 32px);
  color: #ff1744;
  text-shadow: 0 0 12px rgba(255, 23, 68, 0.6);
  font-variant-numeric: tabular-nums;
}

.p-dtrh-theory {
  padding: clamp(18px, 4vw, 24px);
  background: rgba(0, 0, 0, 0.68);
  border: 2px solid #ff1744;
  border-radius: 14px;
  font-size: clamp(15px, 4.2vw, 22px);
  line-height: 1.42;
  box-shadow: 0 0 24px rgba(255, 23, 68, 0.3);
  /* Lange Theorien wrappen sauber, statt am Container-Rand abzubrechen. */
  overflow-wrap: anywhere;
  hyphens: auto;
}

.p-dtrh-buttons {
  display: grid;
  gap: clamp(10px, 2vw, 14px);
}
.p-dtrh-btn {
  padding: clamp(18px, 4vw, 24px);
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 32px);
  letter-spacing: 0.18em;
  border-radius: 14px;
  border: 2px solid #ff1744;
  cursor: pointer;
  transition: transform 120ms, background 200ms, box-shadow 200ms;
  -webkit-tap-highlight-color: transparent;
}
.p-dtrh-btn:active { transform: scale(0.97); }
.p-dtrh-btn-real {
  background: #ff1744;
  color: #fff;
  box-shadow: 0 4px 18px rgba(255, 23, 68, 0.35);
}
.p-dtrh-btn-real.is-selected {
  transform: scale(1.02);
  box-shadow: 0 0 28px rgba(255, 23, 68, 0.7), inset 0 0 18px rgba(255, 255, 255, 0.18);
}
.p-dtrh-btn-fake {
  background: transparent;
  color: #d4a574;
  border-color: #d4a574;
}
.p-dtrh-btn-fake.is-selected {
  background: rgba(212, 165, 116, 0.22);
  box-shadow: 0 0 24px rgba(212, 165, 116, 0.5), inset 0 0 18px rgba(212, 165, 116, 0.18);
}
.p-dtrh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.p-dtrh-conv {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.p-dtrh-conv input { display: none; }
.p-dtrh-conv-pill {
  flex: 1;
  padding: clamp(12px, 3vw, 16px) clamp(14px, 3.5vw, 18px);
  text-align: center;
  border: 2px dashed #d4a574;
  border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 0.14em;
  font-size: clamp(13px, 3.3vw, 16px);
  color: #d4a574;
  transition: background 200ms, color 200ms, box-shadow 200ms;
}
.p-dtrh-conv input:checked + .p-dtrh-conv-pill {
  background: #d4a574;
  color: #000;
  border-style: solid;
  animation: dtrh-conv-pulse 1.4s ease-in-out infinite;
}
.p-dtrh-conv input:disabled + .p-dtrh-conv-pill {
  opacity: 0.35;
  cursor: not-allowed;
  animation: none;
}
@keyframes dtrh-conv-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 165, 116, 0.4); }
  50%      { box-shadow: 0 0 28px rgba(212, 165, 116, 0.85); }
}

.p-dtrh-bonus-hint {
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #d4a574;
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.p-dtrh-submit {
  margin-top: auto;
  padding: clamp(16px, 3.5vw, 22px);
  background: #ff1744;
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: 0.15em;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 23, 68, 0.4);
  transition: transform 120ms, opacity 200ms;
}
.p-dtrh-submit:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.p-dtrh-submit:active:not(:disabled) { transform: scale(0.98); }

/* Feedback-Screen */
.p-dtrh-verdict {
  font-family: var(--font-display);
  font-size: clamp(36px, 9vw, 56px);
  text-align: center;
  margin-top: clamp(32px, 8vh, 64px);
  text-shadow: 0 0 24px currentColor;
}
.p-dtrh-verdict.is-correct { color: #00e67a; }
.p-dtrh-verdict.is-wrong   { color: #ff1744; }
.p-dtrh-conv-badge {
  align-self: center;
  padding: 10px 20px;
  border: 2px solid #d4a574;
  border-radius: 999px;
  color: #d4a574;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.15em;
  font-size: clamp(13px, 3.3vw, 16px);
}
.p-dtrh-score {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(44px, 11vw, 72px);
  color: #d4a574;
  text-shadow: 0 0 20px rgba(212, 165, 116, 0.6);
  font-variant-numeric: tabular-nums;
}
.p-dtrh-score.is-plus { color: #00e67a; }
.p-dtrh-score.is-minus { color: #ff1744; }
.p-dtrh-fact {
  padding: clamp(16px, 4vw, 22px);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #d4a574;
  border-radius: 12px;
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.55;
  color: #f5f5f5;
}

/* ================================================================
   DOWN THE RABBIT HOLE — Polish v2 (FOF-Pattern-Overrides)
   ================================================================ */

/* ── Briefing-Screen: eigenständiger dramatischer Slide ─────────── */
/* Kein Scroll — JS dtrhFitText() shrinkt font-size bis Theorie passt.
   position erbt von .dtrh-screen (absolute, chrome-respektierend). */
.dtrh-briefing-screen {
  display: grid;
  place-items: center;
  padding: clamp(24px, 3vh, 48px) clamp(24px, 4vw, 64px);
}
.dtrh-brief-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vh, 24px);
  max-width: min(80ch, 86vw);
  width: 100%;
  text-align: center;
  position: relative;
  /* min-height:0 ist wichtig damit grid place-items das Element schrumpfen kann */
  min-height: 0;
}
.dtrh-brief-center .dtrh-stamp {
  position: static;
  transform: rotate(-6deg);
  margin-bottom: clamp(4px, 0.8vh, 10px);
}
.dtrh-brief-kicker {
  color: var(--dtrh-accent, #ff1744);
  letter-spacing: 0.3em;
  text-shadow: 0 0 24px rgba(255, 23, 68, 0.55);
}
.dtrh-briefing-screen .dtrh-theory {
  font-family: var(--font-display, 'Archivo Black'), sans-serif;
  /* Initial-Range: clamp(20px, 3vw, 50px). JS dtrhFitText() shrinkt weiter
     (bis 14px) wenn nötig — somit ist JEDE Theorielänge garantiert sichtbar
     ohne Scroll und ohne aus dem Container zu laufen. */
  font-size: clamp(20px, 3vw, 50px);
  line-height: 1.22;
  color: #fff;
  text-wrap: balance;
  max-width: 30ch;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ── Reveal-Screen V2: Verdict-Stempel + Akte-Card (eigener DTRH-Look,
       kein FOF-Quote-Mark-Recycling mehr) ─────────────────────────── */
.dtrh-reveal-screen-v2 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 2vh, 28px);
  padding: clamp(20px, 2.5vh, 36px) clamp(24px, 3vw, 48px);
}
.dtrh-reveal-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.dtrh-reveal-head .round-strip {
  flex: 1;
  display: flex;
  gap: 4px;
}
.dtrh-reveal-body-v2 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 2vh, 28px);
  align-items: stretch;
  min-height: 0;
}
.dtrh-verdict-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 24px);
  padding: clamp(14px, 2vh, 24px) clamp(28px, 3.5vw, 56px);
  border: 4px solid var(--dtrh-accent);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  margin: 0 auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  transform: rotate(-2deg);
  animation: dtrh-stamp-in 600ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
  box-shadow: 0 0 48px rgba(255, 23, 68, 0.32);
}
.dtrh-verdict-stamp.is-real {
  border-color: var(--dtrh-ok);
  box-shadow: 0 0 48px rgba(0, 230, 122, 0.38);
}
.dtrh-verdict-stamp.is-fake {
  border-color: var(--dtrh-accent);
  box-shadow: 0 0 48px rgba(255, 23, 68, 0.4);
}
.dtrh-verdict-stamp-icon {
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 1;
  color: var(--dtrh-accent);
}
.dtrh-verdict-stamp.is-real .dtrh-verdict-stamp-icon { color: var(--dtrh-ok); }
.dtrh-verdict-stamp.is-fake .dtrh-verdict-stamp-icon { color: var(--dtrh-accent); }
.dtrh-verdict-stamp-label {
  font-family: var(--font-display, 'Archivo Black'), sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  font-weight: 900;
  color: var(--dtrh-accent);
  letter-spacing: 0.16em;
}
.dtrh-verdict-stamp.is-real .dtrh-verdict-stamp-label { color: var(--dtrh-ok); }
.dtrh-verdict-stamp.is-fake .dtrh-verdict-stamp-label { color: var(--dtrh-accent); }

.dtrh-akte-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
  gap: clamp(10px, 1.5vh, 18px);
  max-width: min(86ch, 86vw);
  width: 100%;
  margin: 0 auto;
  padding: clamp(20px, 2.5vh, 36px) clamp(24px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(20, 8, 12, 0.86));
  border: 2px solid var(--dtrh-accent);
  border-radius: 16px;
  box-shadow: 0 0 36px rgba(255, 23, 68, 0.22), inset 0 0 28px rgba(198, 40, 40, 0.1);
  min-height: 0;
}
.dtrh-akte-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px dashed color-mix(in oklch, var(--dtrh-accent) 50%, transparent);
}
.dtrh-akte-header .mono-label {
  color: var(--dtrh-text-pale);
  letter-spacing: 0.22em;
  font-size: clamp(11px, 1vw, 14px);
}
.dtrh-akte-status {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.22em;
  color: var(--dtrh-gold);
  padding: 4px 12px;
  border: 1px solid var(--dtrh-gold);
  border-radius: 999px;
}
.dtrh-akte-theory {
  font-family: var(--font-display, 'Archivo Black'), sans-serif;
  /* clamp Range: 16-30px. dtrhFitText() shrinkt weiter wenn Inhalt nicht passt. */
  font-size: clamp(16px, 2vw, 30px);
  line-height: 1.28;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.dtrh-akte-divider {
  height: 1px;
  background: color-mix(in oklch, var(--dtrh-accent) 35%, transparent);
}
.dtrh-akte-fact-label {
  color: var(--dtrh-gold);
  letter-spacing: 0.28em;
  font-size: clamp(12px, 1.1vw, 16px);
  text-align: center;
}
.dtrh-akte-fact {
  font-family: var(--font-text, inherit);
  /* clamp Range: 14-22px. dtrhFitText() shrinkt weiter wenn nötig. */
  font-size: clamp(14px, 1.5vw, 22px);
  line-height: 1.5;
  color: #f5f5f5;
  text-align: center;
  font-style: italic;
  max-width: 65ch;
  margin: 0 auto;
  overflow-wrap: anywhere;
  hyphens: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.dtrh-brief-depth {
  color: var(--dtrh-gold, #d4a574);
  letter-spacing: 0.24em;
  font-size: clamp(12px, 1.2vw, 16px);
  opacity: 0.9;
}

/* ── Vote-Screen: FOF-Grid-Layout wiederverwenden, DTRH-Färbung ── */
.mode-dtrh .fof-screen .kicker-lg {
  color: var(--dtrh-accent, #ff1744);
  text-shadow: 0 0 22px rgba(255, 23, 68, 0.5);
}
.mode-dtrh .round-bar .round-pill {
  border-color: var(--dtrh-accent, #ff1744);
}
.mode-dtrh .round-strip .round-dot.current {
  background: var(--dtrh-accent, #ff1744);
  box-shadow: 0 0 16px var(--dtrh-accent, #ff1744);
}
.mode-dtrh .round-strip .round-dot.past {
  background: rgba(255, 23, 68, 0.35);
}
.mode-dtrh .bonus-badge {
  background: var(--dtrh-gold, #d4a574);
  color: #000;
  border-color: var(--dtrh-gold, #d4a574);
}

/* Statement-Box in DTRH: blutrot + goldene Quote-Marks */
.mode-dtrh .fof-statement-box,
.dtrh-statement-box {
  border-color: var(--dtrh-accent, #ff1744);
  background: rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 48px rgba(255, 23, 68, 0.28),
    inset 0 0 32px rgba(198, 40, 40, 0.14);
}
.mode-dtrh .fof-quote-open,
.mode-dtrh .fof-quote-close,
.dtrh-statement-box .fof-quote-open,
.dtrh-statement-box .fof-quote-close {
  color: var(--dtrh-gold, #d4a574);
  opacity: 0.9;
}
.mode-dtrh .fof-statement-text {
  color: #fff;
}

/* Meta (KATEGORIE · SCHWIERIGKEIT) in DTRH */
.mode-dtrh .fof-meta {
  color: var(--dtrh-text-pale, #ff8a80);
  letter-spacing: 0.22em;
}

/* Pseudo-Buttons (TV-only, rein dekorativ) */
.mode-dtrh .fof-btn.dtrh-btn-real {
  background: linear-gradient(180deg, rgba(255, 23, 68, 0.32), rgba(198, 40, 40, 0.12));
  border-color: var(--dtrh-accent, #ff1744);
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 23, 68, 0.25);
}
.mode-dtrh .fof-btn.dtrh-btn-fake {
  background: linear-gradient(180deg, rgba(212, 165, 116, 0.22), rgba(212, 165, 116, 0.06));
  border-color: var(--dtrh-gold, #d4a574);
  color: var(--dtrh-gold, #d4a574);
}

/* Timer-Ring: DTRH-Akzent auf Progress */
.mode-dtrh .fof-timer-ring .timer-track {
  stroke: rgba(255, 23, 68, 0.18);
}
.mode-dtrh .fof-timer-ring .timer-progress {
  stroke: var(--dtrh-accent, #ff1744);
  filter: drop-shadow(0 0 10px rgba(255, 23, 68, 0.6));
}
.mode-dtrh .fof-timer-ring.is-warn .timer-progress {
  stroke: var(--dtrh-gold, #d4a574);
}
.mode-dtrh .fof-timer-ring.is-urgent .timer-progress {
  stroke: var(--dtrh-accent, #ff1744);
  animation: fof-timer-pulse 0.7s ease-in-out infinite;
}
@keyframes fof-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.mode-dtrh .fof-timer-ring .timer-sec {
  color: #fff;
}

/* Vote-Meter: DTRH-Akzent auf accent-Span + Conv-Count-Pill rechts */
.mode-dtrh .vote-meter {
  border-color: rgba(255, 23, 68, 0.4);
}
.mode-dtrh .vote-count .accent {
  color: var(--dtrh-accent, #ff1744);
}
.mode-dtrh .vote-count .muted {
  color: var(--dtrh-text-pale, #ff8a80);
  opacity: 0.7;
}
.dtrh-conv-count-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: clamp(16px, 2vw, 28px);
  padding: 4px 12px;
  border: 1px solid var(--dtrh-gold, #d4a574);
  border-radius: 999px;
  color: var(--dtrh-gold, #d4a574);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.mode-dtrh .vote-avatar.voted {
  border-color: var(--dtrh-accent, #ff1744) !important;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.55);
}

/* ── Reveal-Screen: FOF-Reveal-Pattern + DTRH-Sub-Theme ────────── */
.dtrh-reveal-screen {
  grid-template-rows: auto 1fr;
}
.dtrh-reveal-screen .fof-reveal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vh, 26px);
  padding: clamp(16px, 2vh, 32px) clamp(24px, 4vw, 64px);
  max-width: min(1200px, 92vw);
  margin: 0 auto;
  text-align: center;
}
.mode-dtrh .fof-reveal-verdict.fakt,
.dtrh-reveal-screen .fof-reveal-verdict.fakt {
  color: #00e67a;
  text-shadow: 0 0 36px rgba(0, 230, 122, 0.7);
}
.mode-dtrh .fof-reveal-verdict.fake,
.dtrh-reveal-screen .fof-reveal-verdict.fake {
  color: var(--dtrh-accent, #ff1744);
  text-shadow: 0 0 36px rgba(255, 23, 68, 0.7);
}
.dtrh-reveal-box.fakt {
  border-color: #00e67a !important;
  box-shadow:
    0 0 48px rgba(0, 230, 122, 0.5),
    inset 0 0 32px rgba(0, 230, 122, 0.12) !important;
}
.dtrh-reveal-box.fake {
  border-color: var(--dtrh-accent, #ff1744) !important;
  box-shadow:
    0 0 48px rgba(255, 23, 68, 0.5),
    inset 0 0 32px rgba(198, 40, 40, 0.16) !important;
}
.dtrh-reveal-fact {
  color: var(--dtrh-text-pale, #ff8a80);
  max-width: 70ch;
  margin: 0 auto;
}

/* ── Depth-Indikator: aus den umgebauten Screens entfernt, aber ── */
/* aktuell noch auf FallIn + Fact — behalten in kleinerer Form    ── */
.mode-dtrh .dtrh-depth-row { font-size: clamp(8px, 0.8vw, 12px); }
.mode-dtrh .dtrh-depth-flavor { font-size: clamp(9px, 0.9vw, 13px); }

/* ================================================================
   ACCESSIBILITY — Fokus-Styles (WCAG 2.4.7)
   Sichtbarer Fokus-Ring fuer Tastatur-Navigation. :focus-visible greift
   nur bei Tastatur-Fokus, nicht bei Maus-Klick — keine optische Regression.
   ================================================================ */

button:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.mobile-btn:focus-visible,
.avatar-cell:focus-visible,
.meme-cell:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--mode-accent, var(--acc1));
  outline-offset: 3px;
  border-radius: inherit;
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--mode-accent, var(--acc1)) 35%, transparent);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--mode-accent, var(--acc1));
  outline-offset: 1px;
}

/* Mode-DTRH: Rotes Fokus-Ring */
.mode-dtrh button:focus-visible,
.mode-dtrh .btn:focus-visible,
.mode-dtrh .chip:focus-visible,
.mode-dtrh .mobile-btn:focus-visible {
  outline-color: var(--dtrh-accent, #ff1744);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--dtrh-accent, #ff1744) 35%, transparent);
}

/* ── Connection-Toast (Phone) ─────────────────────────────────────────
   Body-level Toast wenn Antwort nicht beim Server ankam (kein ACK in 2s).
   Schwebt über allen Screens, fixed top-center, kein Pointer-Capture. */
.conn-toast {
  position: fixed;
  top: clamp(0.75rem, 4vh, 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: min(92vw, 28rem);
  padding: 0.75rem 1rem;
  background: oklch(0.32 0.18 30 / 0.96);
  color: oklch(0.98 0.02 60);
  border: 1px solid oklch(0.65 0.22 30 / 0.6);
  border-radius: 0.875rem;
  box-shadow: 0 10px 30px -8px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease;
}
.conn-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.conn-toast.success {
  background: oklch(0.32 0.16 145 / 0.96);
  border-color: oklch(0.65 0.18 145 / 0.6);
}
.conn-toast-icon { font-size: 1rem; line-height: 1; }
.conn-toast-text { line-height: 1.3; }

/* "Antwort kam nicht an"-State im Feedback-Screen — neutraler Look statt
   fakem "DANEBEN" wenn die Antwort verloren ging. */
.fb-icon.neutral-warn { color: oklch(0.78 0.16 70); }
.fb-kicker.neutral-warn { color: oklch(0.78 0.16 70); }
.fb-heading.neutral-warn { color: oklch(0.85 0.06 70); }

/* ── Timeline Reveal-Screen (Phone) ─────────────────────────────────────
   Zeigt die eigene abgegebene Reihenfolge mit Diff-Markern, damit der User
   sehen kann WO genau er falsch lag — nicht nur generischer "DANEBEN"-State. */
.screen-tl-reveal {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2.5vw, 1rem);
  padding: clamp(0.75rem, 3vw, 1.25rem);
  height: 100%;
  overflow: hidden;
}
.p-tlr-score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: color-mix(in oklch, var(--mode-accent, var(--acc1)) 18%, transparent);
  border: 1px solid color-mix(in oklch, var(--mode-accent, var(--acc1)) 45%, transparent);
  border-radius: 0.625rem;
  font-size: 0.85rem;
}
.p-tlr-score .display { font-size: 1.125rem; line-height: 1; }
.p-tlr-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.15;
  color: var(--ink-0);
  letter-spacing: 0.01em;
}
.p-tlr-sub {
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.p-tlr-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 2px;
}
.p-tlr-card {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  position: relative;
  transition: border-color 200ms ease, background 200ms ease;
}
.p-tlr-card.correct {
  background: color-mix(in oklch, oklch(0.5 0.18 145) 12%, var(--bg-1));
  border-color: oklch(0.55 0.18 145 / 0.6);
}
.p-tlr-card.wrong {
  background: color-mix(in oklch, oklch(0.55 0.2 25) 10%, var(--bg-1));
  border-color: oklch(0.6 0.2 25 / 0.55);
}
.p-tlr-card.lost {
  background: var(--bg-1);
  border-color: oklch(0.55 0.06 60 / 0.55);
  border-style: dashed;
}
.p-tlr-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-0);
  border: 1px solid var(--border);
}
.p-tlr-card.correct .p-tlr-num {
  background: oklch(0.55 0.18 145 / 0.25);
  border-color: oklch(0.55 0.18 145 / 0.6);
  color: oklch(0.85 0.18 145);
}
.p-tlr-card.wrong .p-tlr-num {
  background: oklch(0.55 0.2 25 / 0.2);
  border-color: oklch(0.6 0.2 25 / 0.55);
  color: oklch(0.82 0.2 25);
}
.p-tlr-text {
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink-0);
}
.p-tlr-marker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}
.p-tlr-card.correct .p-tlr-marker {
  background: oklch(0.55 0.18 145 / 0.18);
  color: oklch(0.85 0.18 145);
}
.p-tlr-card.wrong .p-tlr-marker {
  background: oklch(0.55 0.2 25 / 0.18);
  color: oklch(0.85 0.18 25);
}
.p-tlr-card.lost .p-tlr-marker {
  background: oklch(0.55 0.06 60 / 0.18);
  color: oklch(0.82 0.12 60);
}
.p-tlr-marker-icon { font-size: 0.95rem; line-height: 1; }
.p-tlr-funfact {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-2);
  font-style: italic;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}
.p-tlr-funfact:empty { display: none; }
.p-tlr-points {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.p-tlr-points .display { font-size: 1.125rem; line-height: 1; }
.p-tlr-points .display.accent { color: var(--mode-accent, var(--acc1)); margin-left: auto; }