/* ================================================================ Modus „Wer wird Millionär?“ (Solo-Show mit Live-Moderator)
   Look: Nachtblaues TV-Studio mit Lichtkegeln, Gold und Orange. Gilt für Host (body.host) und Handy (body.play), sobald
   body[data-mode="wwm"]. Die Bühne selbst (Phase „solo“) steht in wwm.css. Quizzly trägt ein Stabmikro. */

body[data-mode="wwm"] {
  --ink: #050a2e;
  --ink-soft: #24306b;
  --bg1: #03021a;
  --bg2: #101a6a;
  --paper: #f4f6ff;
  --paper-2: #e3e8ff;
  --pink: #ff6fa5;
  --blue: #3b5bdb;
  --yellow: #f7c548;
  --green: #2fd152;
  --orange: #f59a1b;
  --teal: #22b8cf;
  --purple: #7950f2;
  --red: #ff4d4d;
  --gold: #f7c548;
  --opt-0: #f59a1b;
  --opt-1: #3b5bdb;
  --opt-2: #f7c548;
  --opt-3: #2fd152;
  --accent: #f7c548;
}

/* ------------------------------------------------------------ Hintergrund: Studio mit Lichtkegeln */
body[data-mode="wwm"] .bg {
  background:
    radial-gradient(ellipse 60% 45% at 50% 18%, rgba(40, 60, 200, 0.55), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 115%, rgba(80, 20, 150, 0.6), transparent 65%),
    linear-gradient(180deg, #050430 0%, #010010 100%);
}
body[data-mode="wwm"] .bg::before {
  /* Lichtkegel als weiche Fächer von oben – ohne harte Kanten, passen zu jedem Seitenverhältnis */
  inset: -10% 0 0;
  opacity: 1;
  animation: none;
  background:
    conic-gradient(from 158deg at 20% -6%, transparent 0deg, rgba(150, 175, 255, 0.15) 9deg, rgba(150, 175, 255, 0.15) 15deg, transparent 24deg, transparent 360deg),
    conic-gradient(from 171deg at 50% -6%, transparent 0deg, rgba(150, 175, 255, 0.11) 7deg, rgba(150, 175, 255, 0.11) 11deg, transparent 18deg, transparent 360deg),
    conic-gradient(from 178deg at 80% -6%, transparent 0deg, rgba(150, 175, 255, 0.15) 9deg, rgba(150, 175, 255, 0.15) 15deg, transparent 24deg, transparent 360deg);
  -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
  mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 88%);
}
body[data-mode="wwm"] .bg .blob { opacity: 0.12; }
body[data-mode="wwm"] .bg .blob.b1 { background: #3b5bdb; }
body[data-mode="wwm"] .bg .blob.b2 { background: #4c6ef5; }
body[data-mode="wwm"] .bg .blob.b3 { background: #7950f2; }

/* ------------------------------------------------------------ Grundbausteine */
body[data-mode="wwm"] .logo { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
body[data-mode="wwm"] .logo span { color: #f7c548 !important; text-shadow: 0 0 0.4em rgba(120, 160, 255, 0.7), 0 0.06em 0 #0b1050; }
body[data-mode="wwm"] .logo-sub, body[data-mode="wwm"] .editionbadge { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; color: #f7c548; }
body[data-mode="wwm"] .insertcoin { font-family: 'Oswald', sans-serif; text-transform: none; letter-spacing: 0.04em; color: #f7c548; animation: none; }
body[data-mode="wwm"] :is(.lobby, .votescreen) { --lacc: #f7c548; --lacc-ink: #1b0f00; --lpanel: rgba(4, 8, 44, 0.66); --lline: rgba(143, 166, 232, 0.28); }
body[data-mode="wwm"] .quizzly .qz-mic { display: inline; }
body[data-mode="wwm"] .quizzly .qz-cap { display: none; }

/* ------------------------------------------------------------ Lobby der Solo-Show: Moderatoren statt Spielplan */
.sololobby .planbar, .sololobby .pgroups, .sololobby .lfoot .setgrp, .sololobby .plsum { display: none !important; }
.sololobby .lfoot { justify-content: flex-end; }
.sololobby .plcard .pcic { font-size: 2.2em; }
.sololobby .plcard .pcdesc { -webkit-line-clamp: 3; }
.sololobby .plcard .pcbar, .sololobby .plcard .pcmeta { display: none; }
.extras .wwmrow { gap: 0.5em 0.9em; }
.extras .wwmcand { font: 600 1.25em 'Oswald', sans-serif; letter-spacing: 0.02em; color: var(--lacc); }
.extras .wwmmode button.on { background: var(--lacc); color: var(--lacc-ink); }

/* ------------------------------------------------------------ Handy während der Solo-Show */
body.play[data-mode="wwm"] .soloview .lock { font-size: 64px; }
body.play[data-mode="wwm"] .soloview h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; color: #f7c548; }
.extras .wwminfo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; margin-top: 0.3em; padding-top: 0.6em; border-top: 2px dashed var(--lline); font-size: 0.85em; }
.extras .wwminfo b { font-size: 0.85em; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; margin-right: 0.3em; }
.extras .wwminfo span { padding: 0.25em 0.75em; border-radius: 99px; background: rgba(247, 197, 72, 0.1); border: 1px solid rgba(247, 197, 72, 0.35); font-weight: 800; }

/* ================================================================ Millionenjagd (Mehrspieler auf Zeit)
   Lobby-Variante, Rundenintro, die Rangliste in der Show (.mj, wwm-host.js) und die eigene Sendung am Handy und am
   PC (.wr, wwm-run.js). Lauter eigene Präfixe: In der Show sind die Stylesheets aller Shows geladen. */

/* ------------------------------------------------------------ Lobby: Spielart Mehrspieler */
.wwmmulti :is(.presets, .planbar, .pgroups, .plsum) { display: none !important; }
.wwmmulti .lfoot .setgrp { display: none !important; }
.wwmmulti .lfoot { justify-content: flex-end; }
.extras [data-set="wwmMinutes"] button.on { background: var(--lacc); color: var(--lacc-ink); }

/* ------------------------------------------------------------ Rundenintro: Emblem und die Uhr */

/* ------------------------------------------------------------ Show: Rangliste und Uhr */
.mj { flex: 1; min-height: 0; width: 100%; display: grid; gap: clamp(0.6rem, 2cqw, 1.6rem); container-type: size; }
.mj.watch { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); }
.mj.mine { grid-template-columns: minmax(0, 1fr) clamp(13rem, 27%, 24rem); }
.mj-side { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 2cqh; padding-bottom: clamp(5rem, 16cqh, 10rem); /* unten links steht Quizzly */ }
.mj-brand { display: flex; flex-direction: column; align-items: center; gap: 1cqh; }
.mj-brand .wemblem { --s: min(24cqh, 16cqw); }
.mj-brand > b { font: 600 min(5cqh, 2.9cqw) 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; color: #f7c548; }
.mj-clock { display: flex; flex-direction: column; align-items: center; padding: 1cqh 4cqh; border-radius: 99px; background: linear-gradient(180deg, #13227d, #070c3c); border: 0.18rem solid rgba(143, 166, 232, 0.6); box-shadow: 0 0 2rem rgba(40, 60, 200, 0.4); font-family: 'Oswald', sans-serif; }
.mj-clock small { font-size: clamp(0.7rem, 2.4cqh, 1.2rem); letter-spacing: 0.2em; text-transform: uppercase; color: #c8d3ff; }
.mj-clock b { font-size: min(12cqh, 6.5cqw); line-height: 1; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.mj-clock.urgent { border-color: #ff7b5c; animation: mjPulse 1s ease-in-out infinite; }
.mj-clock.urgent b { color: #ffb4a0; }
@keyframes mjPulse { 50% { box-shadow: 0 0 2.6rem rgba(255, 90, 60, 0.6); } }
.mj-feed { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 0.8cqh; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.mj-ev { display: flex; align-items: center; gap: 0.6em; padding: 0.35em 0.8em; border-radius: 99px; background: rgba(4, 8, 44, 0.7); border: 1px solid rgba(143, 166, 232, 0.3); font-size: max(0.7rem, min(2.7cqh, 1.45cqw)); font-weight: 700; animation: mjFeedIn 0.45s var(--ease-back) both; }
.mj-ev .avatar { --size: 1.7em !important; flex: none; }
.mj-ev b { color: #f7c548; }
.mj-ev.mj-won { border-color: #f7c548; background: linear-gradient(90deg, rgba(247, 197, 72, 0.3), rgba(4, 8, 44, 0.7)); }
.mj-ev.mj-wrong { border-color: rgba(255, 100, 100, 0.45); }
@keyframes mjFeedIn { from { opacity: 0; transform: translateX(-1.5rem) scale(0.9); } }

.mj-board { --rh: min(calc(100cqh / var(--n, 6) - 0.5cqh), 13cqh); min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5cqh; }
.mj-row {
  height: var(--rh); flex: none; display: grid; grid-template-columns: 1.4em calc(var(--rh) * 0.8) minmax(0, 1fr) minmax(0, 30%) auto; align-items: center; gap: 0.7em;
  padding: 0 1.4em 0 0.8em; font-size: min(calc(var(--rh) * 0.3), 2.3cqw); border-radius: 99px;
  background: linear-gradient(180deg, #0d1a66, #020623 48%, #020623 52%, #0d1a66); border: 0.12em solid rgba(143, 166, 232, 0.45);
}
.mj-row.lead { border-color: #f7c548; box-shadow: 0 0 1.2em rgba(247, 197, 72, 0.35); }
.mj-row.me { background: linear-gradient(180deg, #1a3aa8, #08104a 48%, #08104a 52%, #1a3aa8); }
.mj-rk { font: 600 1.15em 'Oswald', sans-serif; color: #f7c548; text-align: center; }
.mj-av .avatar { --size: calc(var(--rh) * 0.8) !important; }
.mj-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.mj-who b { font-size: 1.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-who small { font-size: 0.72em; color: #c8d3ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-row[data-step="locked"] .mj-who small { color: #ffbe4a; }
.mj-row[data-step="correct"] .mj-who small { color: #5ef07c; }
.mj-row[data-step="wrong"] .mj-who small { color: #ff8a8a; }
.mj-row[data-step="won"] .mj-who small, .mj-row[data-step="walked"] .mj-who small { color: #f7c548; }
.mj-lad { display: flex; gap: 0.18em; height: 0.75em; }
.mj-lad i { flex: 1; border-radius: 0.2em; background: rgba(143, 166, 232, 0.2); }
.mj-lad i.mark { box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.55); }
.mj-lad i.done { background: #f59a1b; }
.mj-lad i.top.done { background: #fff3c2; }
.mj-lad i.cur { background: #f7c548; animation: mjBlink 1.1s ease-in-out infinite; }
.mj-row[data-step="locked"] .mj-lad i.cur { background: #ffbe4a; animation-duration: 0.45s; }
@keyframes mjBlink { 50% { opacity: 0.35; } }
.mj-bank { font: 600 1.2em 'Oswald', sans-serif; text-align: right; color: #f7c548; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mj-bank.bump { animation: mjBump 0.6s var(--ease-back); }
@keyframes mjBump { 40% { transform: scale(1.35); color: #fff; } }
/* Schmal (am PC neben der eigenen Sendung, kleine Fenster): ohne Leiter */
@container (max-width: 620px) { .mj-row { grid-template-columns: 1.4em calc(var(--rh) * 0.8) minmax(0, 1fr) auto; } .mj-lad { display: none; } }
.mj.mine .mj-board { --rh: min(calc(100cqh / var(--n, 6) - 0.5cqh), 9cqh); justify-content: flex-start; }
.mj.mine .mj-row { grid-template-columns: 1.3em calc(var(--rh) * 0.8) minmax(0, 1fr) auto; padding-right: 1em; }
.mj.mine .mj-lad { display: none; }
.mj-slot { min-height: 0; container-type: size; display: flex; }
.mj-slot > .wr { flex: 1; font-size: clamp(10px, 2.5cqh, 24px); }

/* ------------------------------------------------------------ Show: Endstand */
.mj-end { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 2cqh; container-type: size; }
.mj-endhead { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4em 1em; font-family: 'Oswald', sans-serif; font-size: clamp(1rem, 5cqh, 2.4rem); text-transform: uppercase; }
.mj-endhead b { color: #f7c548; letter-spacing: 0.05em; }
.mj-endhead span { font-size: 0.6em; text-transform: none; font-family: 'Nunito', sans-serif; font-weight: 800; color: #c8d3ff; }
.mj-endlist { --rh: min(calc(84cqh / var(--n, 6) - 0.6cqh), 14cqh); flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6cqh; }
.mj-erow {
  height: var(--rh); flex: none; display: grid; grid-template-columns: 1.4em calc(var(--rh) * 0.82) minmax(0, 1fr) minmax(0, 30%) auto; align-items: center; gap: 0.7em;
  padding: 0 1.4em 0 0.8em; font-size: min(calc(var(--rh) * 0.3), 2.6cqw); border-radius: 99px;
  background: linear-gradient(180deg, #0d1a66, #020623 48%, #020623 52%, #0d1a66); border: 0.12em solid rgba(143, 166, 232, 0.45);
  animation: mjRowIn 0.6s var(--ease-back) both;
}
.mj-erow.win { border-color: #fff3c2; background: linear-gradient(180deg, #ffd76a, #f0a81c 48%, #e08f0c 52%, #ffd76a); color: #1b0f00; }
.mj-erow.win :is(.mj-rk, .mj-bank) { color: #1b0f00; }
.mj-erow.win .mj-who small { color: #3a2400; }
.mj-erow .mj-av .avatar { --size: calc(var(--rh) * 0.82) !important; }
.mj-coins { display: flex; flex-wrap: wrap; gap: 0.15em; align-content: center; overflow: hidden; max-height: 100%; }
.mj-c { width: 0.75em; height: 0.75em; border-radius: 50%; background: #f59a1b; box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.3); font-style: normal; font-size: 1em; line-height: 0.75em; }
.mj-c.wrong { background: rgba(255, 120, 120, 0.55); }
.mj-c.walked { background: #f7c548; }
.mj-c.won { background: none; width: auto; }
.mj-c.gong { background: #c8d3ff; }
@keyframes mjRowIn { from { opacity: 0; transform: translateX(3rem); } }
@container (max-width: 700px) { .mj-erow { grid-template-columns: 1.4em calc(var(--rh) * 0.82) minmax(0, 1fr) auto; } .mj-coins { display: none; } }

/* ------------------------------------------------------------ Die eigene Sendung (Handy und PC) */
.wr { --w-gold: #f7c548; --w-amber: #f59a1b; --w-line: #8fa6e8; position: relative; display: flex; flex-direction: column; gap: 0.55em; width: 100%; font-size: 16px; color: #fff; text-align: left; }
.wr.wr-compact { font-size: 14px; gap: 0.45em; }
.wr [hidden] { display: none !important; }
.wr-top { display: grid; grid-template-columns: auto 1fr auto auto; align-items: stretch; gap: 0.4em; }
.wr-top > span { display: flex; flex-direction: column; justify-content: center; padding: 0.25em 0.75em; border-radius: 0.7em; background: rgba(4, 8, 44, 0.75); border: 1px solid rgba(143, 166, 232, 0.35); line-height: 1.1; }
.wr-top small { font-size: 0.62em; letter-spacing: 0.14em; text-transform: uppercase; color: #c8d3ff; }
.wr-top b { font: 600 1.15em 'Oswald', sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wr-clock { flex-direction: row !important; align-items: center; gap: 0.3em; font-size: 1.05em; }
.wr-clock.urgent { border-color: #ff7b5c !important; color: #ffb4a0; animation: mjPulse 1s ease-in-out infinite; }
.wr-bank { align-items: flex-end; }
.wr-bank b { color: var(--w-gold); font-size: 1.3em; }
.wr-ladder { display: flex; gap: 0.2em; height: 0.55em; }
.wr-ladder i { flex: 1; border-radius: 0.2em; background: rgba(143, 166, 232, 0.2); }
.wr-ladder i.mark { box-shadow: inset 0 0 0 0.1em rgba(255, 255, 255, 0.6); }
.wr-ladder i.done { background: var(--w-amber); }
.wr-ladder i.cur { background: var(--w-gold); animation: mjBlink 1.1s ease-in-out infinite; }
.wr-stake { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.8em; font-size: 0.9em; font-weight: 800; color: #c8d3ff; text-align: center; min-height: 1.3em; }
.wr-stake b { color: var(--w-gold); }
.wr-stake span { font-weight: 700; opacity: 0.85; }
.wr-stake.wr-good { color: #5ef07c; }
.wr-main { display: flex; flex-direction: column; gap: 0.5em; }
.wr-main.wr-dim { display: none; }
/* Rauten wie im Fernsehen: Rand (--b) + Füllung (--f1/--f2) */
.wr-q, .wr-a {
  --e: 1.1em; --b: var(--w-line); --f1: #0d1a66; --f2: #020623;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.5em; box-sizing: border-box;
  clip-path: polygon(var(--e) 0, calc(100% - var(--e)) 0, 100% 50%, calc(100% - var(--e)) 100%, var(--e) 100%, 0 50%);
  background: var(--b); color: #fff; border: 0; font: inherit;
}
.wr-q::before, .wr-a::before {
  content: ''; position: absolute; inset: 0.12em; z-index: -1;
  clip-path: polygon(calc(var(--e) - 0.06em) 0, calc(100% - var(--e) + 0.06em) 0, 100% 50%, calc(100% - var(--e) + 0.06em) 100%, calc(var(--e) - 0.06em) 100%, 0 50%);
  background: linear-gradient(180deg, var(--f1) 0%, var(--f2) 48%, var(--f2) 52%, var(--f1) 100%);
}
.wr-q { --e: 1.4em; flex-direction: column; justify-content: center; min-height: 5.2em; padding: 0.55em calc(var(--e) + 0.4em); text-align: center; }
.wr-cat { font-size: 0.66em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--w-gold); }
.wr-qt { font-size: 1.08em; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.wr-ans { display: grid; grid-template-columns: 1fr; gap: 0.38em; }
.wr-a { min-height: 2.9em; padding: 0.35em calc(var(--e) + 0.5em); cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
.wr-al { flex: none; font: 600 1.05em 'Oswald', sans-serif; color: var(--w-amber); }
.wr-at { font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.wr-a:disabled { cursor: default; }
@media (hover: hover) { .wr-a:not(:disabled):hover { --b: #dfe8ff; } }
.wr-a.wr-sel { --b: var(--w-gold); --f1: #1a3aa8; --f2: #08104a; }
.wr-a.wr-locked, .wr-a.wr-locking { --b: #ffe0a6; --f1: #ffbe4a; --f2: #e37a00; color: #1a0c00; }
.wr-a.wr-locked .wr-al, .wr-a.wr-locking .wr-al { color: #3a1d00; }
.wr-a.wr-locking { animation: wrHold 0.9s ease-in-out infinite; }
.wr-a.wr-right { --b: #cfffd6; --f1: #5ef07c; --f2: #11962c; color: #011a06; animation: wrBlink 0.3s steps(1) 5; }
.wr-a.wr-right .wr-al { color: #013d10; }
.wr-a.wr-wrong { --b: #ffd0d0; --f1: #ff6b6b; --f2: #a01515; color: #fff; }
.wr-a.wr-gone { --b: rgba(143, 166, 232, 0.3); }
.wr-a.wr-gone :is(.wr-al, .wr-at) { visibility: hidden; }
@keyframes wrHold { 50% { filter: brightness(1.25); } }
@keyframes wrBlink { 50% { filter: brightness(1.6); } }
.wr-main.wr-in .wr-q { animation: wrSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wr-main.wr-in .wr-a { animation: wrSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wr-main.wr-in .wr-a:nth-child(2) { animation-delay: 0.08s; }
.wr-main.wr-in .wr-a:nth-child(3) { animation-delay: 0.16s; }
.wr-main.wr-in .wr-a:nth-child(4) { animation-delay: 0.24s; }
@keyframes wrSlide { from { opacity: 0; transform: translateY(0.6em); } }
.wr-help { display: flex; flex-direction: column; gap: 0.4em; }
.wr-aud { display: flex; justify-content: center; gap: 0.9em; height: 4.6em; padding: 0.3em 0.8em; border-radius: 0.8em; background: rgba(4, 8, 44, 0.75); border: 1px solid rgba(143, 166, 232, 0.35); }
.wr-aud span { position: relative; width: 2.2em; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.wr-aud span.off { opacity: 0.3; }
.wr-aud i { width: 100%; background: linear-gradient(180deg, #f7c548, #f59a1b); border-radius: 0.2em 0.2em 0 0; animation: wrGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom; max-height: calc(100% - 2.2em); }
.wr-aud b { font-size: 0.72em; }
.wr-aud em { font: 600 0.85em 'Oswald', sans-serif; font-style: normal; color: var(--w-amber); }
@keyframes wrGrow { from { transform: scaleY(0); } }
.wr-phone { padding: 0.45em 0.9em; border-radius: 0.8em; background: rgba(4, 8, 44, 0.75); border: 1px solid rgba(247, 197, 72, 0.5); font-weight: 700; font-size: 0.92em; animation: wrSlide 0.4s both; }
.wr-phone b { color: var(--w-gold); }
.wr-bar { display: grid; grid-template-columns: auto 1fr; gap: 0.45em; margin-top: auto; }
.wr-jokers { display: flex; gap: 0.35em; }
.wr-j, .wr-walk, .wr-lock, .wr-next {
  border-radius: 99px; border: 0.14em solid var(--w-line); background: linear-gradient(180deg, #13227d, #070c3c); color: #fff;
  font: 800 0.95em/1.1 'Nunito', sans-serif; cursor: pointer; padding: 0.55em 0.9em; min-height: 2.7em; -webkit-tap-highlight-color: transparent;
}
.wr-j { width: 3.4em; padding: 0; font-family: 'Oswald', sans-serif; font-weight: 600; }
.wr-j.used { opacity: 0.3; text-decoration: line-through; }
.wr-walk { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-walk.wr-arm { border-color: #ff7b5c; background: linear-gradient(180deg, #7a1d12, #3c0a05); }
.wr-lock, .wr-next { grid-column: 1 / -1; min-height: 3.1em; font-size: 1.1em; background: linear-gradient(180deg, #ffd76a, #f0a81c); color: #1b0f00; border-color: #fff3c2; }
.wr-lock:disabled { background: rgba(4, 8, 44, 0.7); color: #c8d3ff; border-color: rgba(143, 166, 232, 0.4); }
.wr button:disabled { cursor: default; }
.wr-j:disabled:not(.used), .wr-walk:disabled { opacity: 0.5; }
.wr-over { display: flex; }
.wr-oc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 1.1em 1em; border-radius: 1.1em; text-align: center; background: linear-gradient(180deg, #13227d, #050a2e); border: 0.15em solid var(--w-line); animation: popIn 0.5s var(--ease-back, ease-out) both; }
.wr-ot { font: 600 1.7em/1.1 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; }
.wr-oa { font: 600 2.2em/1 'Oswald', sans-serif; color: var(--w-gold); }
.wr-wrong .wr-ot { color: #ff9a9a; }
.wr-won { border-color: #fff3c2; background: linear-gradient(180deg, #ffd76a, #e08f0c); color: #1b0f00; }
.wr-won .wr-oa, .wr-won .wr-ob b { color: #1b0f00; }
.wr-ok { font-weight: 700; color: #c8d3ff; }
.wr-ok b { color: #5ef07c; }
.wr-fact { font-size: 0.85em; line-height: 1.35; opacity: 0.9; max-width: 32em; }
.wr-ob { font-weight: 800; }
.wr-ob b { color: var(--w-gold); font-family: 'Oswald', sans-serif; font-size: 1.2em; }
.wr-otm { width: 70%; height: 0.3em; border-radius: 99px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.wr-otm i { display: block; height: 100%; background: var(--w-gold); transform-origin: left; transform: scaleX(0); }
.wr-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6em; text-align: center; min-height: 12em; font-size: 1.2em; }
.wr-wic { font-size: 3em; animation: bounce 2s ease-in-out infinite; }
/* Am PC: Antworten zweispaltig wie im Fernsehen, mehr Luft */
.mj-slot .wr-ans { grid-template-columns: 1fr 1fr; gap: 0.6em 1em; }
.mj-slot .wr-a { min-height: 3.4em; }
.mj-slot .wr-q { min-height: 6em; }
.mj-slot .wr-qt { font-size: 1.3em; }
.mj-slot .wr-bar { grid-template-columns: auto 1fr auto; align-items: center; }
.mj-slot .wr-lock, .mj-slot .wr-next { grid-column: auto; min-width: 12em; }
/* Am PC in der eigenen Sendung tritt Quizzly ab: Seine Sprechblase läge sonst über der Knopfleiste */
body.mj-mine #mascot { transform: translateY(130%); }

/* Handy: Kopfzeile ohne Punktestand (es zählt das Konto), Ansicht füllt den Platz */
body.play.wr-on .phead .score { visibility: hidden; }
body.play .wr-phone-wrap { display: flex; flex: 1; min-height: 0; width: 100%; max-width: 34rem; margin: 0 auto; }
body.play .wr-phone-wrap > .wr { min-height: 100%; }
@media (max-height: 640px) { body.play .wr { font-size: 13.5px; } body.play .wr-q { min-height: 4.4em; } }
.card.wr-runs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35em; padding: 0.7em; }
.card.wr-runs small { width: 100%; text-align: center; font-weight: 800; opacity: 0.8; }
.wr-rr { display: inline-flex; align-items: baseline; gap: 0.3em; padding: 0.2em 0.6em; border-radius: 99px; background: rgba(4, 8, 44, 0.5); font-size: 0.85em; }
.wr-rr em { font-style: normal; opacity: 0.6; }
.wr-rr i { font-style: normal; font-size: 0.85em; opacity: 0.8; }
.wr-rr.wr-won { background: #f7c548; color: #1b0f00; }

/* ------------------------------------------------ Rundenintro: Requisit (intro-props.js) */
.rp-wwm { display: grid; justify-items: center; gap: 3em; }
.rp-wwm .wemblem.big { --s: 34em; }
.rp-wwm .clock { display: flex; flex-direction: column; align-items: center; font-family: 'Oswald', sans-serif; text-transform: uppercase; }
.rp-wwm .clock small { font-size: 2.6em; letter-spacing: 0.18em; color: #c8d3ff; }
.rp-wwm .clock b { font-size: 12em; font-weight: 600; line-height: 1; color: #f7c548; text-shadow: 0 0 0.35em rgba(247, 197, 72, 0.45), 0 0.05em 0 #0b1050; font-variant-numeric: tabular-nums; }