/* Fernseher: skaliert mit der Bildschirmhöhe (1080p ≈ 20px) */
html { font-size: min(calc(100vh / 54), calc(100vw / 96)); }
body.tv { height: 100vh; overflow: hidden; }
#root { height: 100vh; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

.center-msg { height: 100vh; display: grid; place-items: center; text-align: center; font-size: 2rem; padding: 2rem; }

.tv-tools { position: fixed; right: 1rem; bottom: 1rem; display: flex; gap: .5rem; opacity: .35; transition: opacity .2s; z-index: 50; }
.tv-tools:hover { opacity: 1; }
.tv-tools button { background: var(--panel-strong); border-radius: 12px; width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.tv-tools button.off { opacity: .45; text-decoration: line-through; }

.avatar.sm { font-size: .8em; width: 1.9em; height: 1.9em; border-width: 2px; vertical-align: middle; }
.avatar.xs { font-size: .65em; width: 1.8em; height: 1.8em; border-width: 2px; }
.avatar.xl { font-size: 2.6rem; border-width: 5px; }

/* ───────────── Lobby ───────────── */
.tv-lobby { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; height: 100vh; padding: 3rem 4rem; align-items: center; }
.brand { font-size: 3.6rem; margin: 0 0 1rem; }
.brand span, .qp-logo span { color: var(--accent); }
.join-card { display: flex; gap: 2rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 28px; padding: 2rem; }
.qr { width: 12.5rem; height: 12.5rem; background: #fff; border-radius: 16px; padding: .5rem; }
.join-url { font-size: 1.6rem; font-weight: 700; word-break: break-all; margin-top: .3rem; }
.room-code { font-size: 5.5rem; font-weight: 700; letter-spacing: .25em; color: var(--accent); line-height: 1; }
.game-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.game-tile { border-radius: 24px; padding: 1.1rem 1.3rem; color: #fff; transition: transform .35s, opacity .35s, filter .35s; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.game-tile.sel { transform: scale(1.02); box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 16px 50px rgba(0,0,0,.45); }
.game-tile.dim { opacity: .45; filter: saturate(.5); transform: scale(.96); }
.game-tile.g-quizparty { background: linear-gradient(135deg, #5f3dc4, #1c7ed6 70%, #15aabf); }
.game-tile.g-drawing { background: linear-gradient(135deg, #e64980, #f76707 70%, #fab005); }
.gt-head { display: flex; align-items: center; gap: .9rem; }
.gt-icon { font-size: 3.2rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.gt-tag { font-size: .85rem; text-transform: uppercase; letter-spacing: .16em; opacity: .85; }
.gt-name { font-size: 2.1rem; font-weight: 700; line-height: 1.05; }
.gt-badge { margin-left: auto; background: rgba(255,255,255,.25); border-radius: 999px; padding: .2rem .8rem; font-weight: 700; font-size: .95rem; white-space: nowrap; }
.gt-desc { margin-top: .6rem; font-size: 1.05rem; opacity: .92; line-height: 1.35; }
.game-tile .chips .chip { background: rgba(0,0,0,.22); }
.game-card { display: flex; gap: 1.4rem; align-items: center; background: linear-gradient(135deg, rgba(255,212,59,.18), rgba(168,85,247,.18)); border: 1px solid var(--line); border-radius: 24px; padding: 1.4rem 1.8rem; }
.game-icon { font-size: 4.4rem; }
.game-name { font-size: 2.3rem; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; font-size: 1rem; }
.lobby-right h2 { font-size: 1.8rem; margin: 2rem 0 1rem; }
.player-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pslot { display: flex; flex-direction: column; align-items: center; gap: .5rem; background: var(--panel); border-radius: 20px; padding: 1.1rem .5rem; font-size: 1.5rem; }
.pslot .avatar { font-size: 2rem; }
.player-grid.many { gap: .6rem; }
.player-grid.many .pslot { padding: .6rem .4rem; gap: .3rem; }
.player-grid.many .pslot .avatar { font-size: 1.5rem; }
.player-grid.many .pname { font-size: 1rem; }
.player-grid.many .pleague { font-size: .75rem; }
.pslot.empty .avatar { background: transparent; border-style: dashed; border-color: var(--line); color: var(--muted); }
.pname { font-size: 1.15rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pleague { font-size: .85rem; color: var(--muted); }
.league-box { margin-top: 1.4rem; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 1rem 1.3rem; }
.lg-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .5rem; }
.lg-title.small { font-size: 1rem; }
.lg-title small { font-size: .9rem; font-weight: 400; margin-left: .5rem; }
.lg-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; }
.lg-row { display: grid; grid-template-columns: 1.8rem auto 1fr auto auto; gap: .5rem; align-items: center; font-size: 1.05rem; }
.lg-rank { color: var(--muted); font-weight: 700; text-align: right; }
.lg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pts { font-weight: 700; color: var(--accent); }
.lg-sub { color: var(--muted); font-size: .9rem; }
.lg-evening { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.lg-chip { background: var(--panel-strong); border-radius: 999px; padding: .15rem .7rem; font-size: .95rem; }
.lobby-hint { margin-top: 1.8rem; font-size: 1.5rem; text-align: center; }
.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ───────────── Spiel-Layout ───────────── */
.qp { height: 100vh; display: grid; grid-template-rows: auto 1fr; position: relative; }
.qp-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem 2rem; font-size: 1.5rem; }
.qp-logo { font-weight: 700; font-size: 1.9rem; }
.qp-round { display: flex; align-items: center; gap: .6rem; }
.finale-badge { background: linear-gradient(90deg, #ff6b00, #ff2d55); padding: .15em .7em; border-radius: 999px; font-weight: 700; animation: pulse 1.2s infinite; }
.qp-code { color: var(--muted); }
.qp-code b { color: var(--text); letter-spacing: .12em; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pulse { 50% { opacity: .55; transform: scale(1.08); } }

/* Bestätigen: wer hat schon getippt */
.ready-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.4rem; }
.ready-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; background: var(--panel); font-weight: 700; opacity: .55; font-size: 1.2rem; }
.ready-pill.ok { opacity: 1; background: rgba(61,220,132,.28); }
.ready-hint { margin-top: .9rem; color: #ffe9a3; font-size: 1.35rem; text-align: center; }
.intro-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .5rem .9rem; margin: .4rem 0 1rem; text-align: left; }
.intro-field { display: flex; align-items: center; gap: .7rem; font-size: 1.25rem; }
.intro-field .dot { width: 2.6rem; height: 2.6rem; flex: none; font-size: 1.1rem; }

/* Seitenleiste */
.qp-side { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 1.2rem; overflow: hidden; display: flex; flex-direction: column; gap: .5rem; }
.side-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.score-row { display: grid; grid-template-columns: 1.4rem auto 1fr auto auto auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 14px; font-size: 1.15rem; transition: background .3s; }
.score-row .avatar { font-size: .95rem; }
.many .score-row { padding: .2rem .5rem; font-size: 1rem; gap: .45rem; }
.many .score-row .avatar { font-size: .8rem; }
.podium-wrap .res-table { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.res-table.two { grid-template-columns: 1fr 1fr; gap: .4rem .8rem; }
.res-table.two .res-row { padding: .35rem .7rem; font-size: .95em; }
.race.many .race-row { margin: .15rem 0; }
.race.many .race-track { height: 1.1rem; }
.score-row.turn { background: rgba(255,212,59,.18); box-shadow: inset 0 0 0 2px rgba(255,212,59,.5); }
.place { font-weight: 700; color: var(--muted); text-align: center; }
.sname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sval { font-weight: 700; font-variant-numeric: tabular-nums; }
.sval.star { color: #ffe066; }
.sval.sip { color: #fde68a; font-size: .95rem; }
.legend { display: grid; gap: .35rem; font-size: .95rem; color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: .5rem; }
.dot { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; border: 2px solid rgba(255,255,255,.8); }
.dot.star { background: transparent; border: none; font-size: 1.1rem; }

/* Banner */
.qp-banner { position: absolute; left: 50%; bottom: 2rem; transform: translate(-50%, 150%); background: rgba(14,18,48,.92); border: 2px solid rgba(255,212,59,.6);
  border-radius: 999px; padding: .7rem 1.8rem .7rem .8rem; font-size: 1.7rem; display: flex; align-items: center; gap: .8rem; transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .25s; box-shadow: 0 10px 40px rgba(0,0,0,.5); z-index: 5; margin-left: -12rem; opacity: 0; }
.qp-banner.show { transform: translate(-50%, 0); opacity: 1; }
.qp-banner .avatar { font-size: 1.4rem; }

/* Overlay */
.qp-overlay { position: absolute; inset: 0; display: none; place-items: center; z-index: 10; background: rgba(5,7,25,.62); backdrop-filter: blur(3px); }
.qp-overlay.show { display: grid; }
.qp-overlay.light { background: rgba(5,7,25,.25); backdrop-filter: none; }
.ov-inner { animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.card { background: linear-gradient(160deg, #20296b, #171a45); border: 2px solid rgba(255,255,255,.16); border-radius: 32px; padding: 2.2rem 2.8rem; width: min(64rem, 82vw); max-height: 92vh; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); text-align: center; }
.card.wide { width: min(76rem, 90vw); }
.title { font-size: 2.8rem; margin: .2em 0 .3em; }
.subtitle { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-top: 1.5rem; }
.lead { font-size: 1.6rem; line-height: 1.4; margin: .5em 0; }
.lead .avatar { font-size: 1.1rem; vertical-align: middle; }
.lead.warn { color: #fde68a; }
.big-good { font-size: 2.2rem; color: #ffe066; font-weight: 700; }
.order { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.6rem; margin-top: 1rem; font-size: 1.5rem; }
.order-item { display: flex; align-items: center; gap: .5rem; }
.order-n { color: var(--muted); font-weight: 700; }

.round-big { font-size: 9rem; font-weight: 700; text-shadow: 0 8px 40px rgba(0,0,0,.6); text-align: center; }
.round-big small { font-size: .35em; color: var(--muted); }
.finale-note { font-size: 2.2rem; font-weight: 700; text-align: center; background: linear-gradient(90deg, #ff6b00, #ff2d55); padding: .5em 1.2em; border-radius: 999px; margin-top: 1rem; }

.dice-wrap { display: grid; justify-items: center; gap: 1rem; }
.dice-name { font-size: 2rem; font-weight: 700; display: flex; align-items: center; gap: .6rem; background: rgba(14,18,48,.9); padding: .4rem 1.4rem .4rem .5rem; border-radius: 999px; }
.dice { width: 12rem; height: 12rem; border-radius: 2.4rem; background: #fff; color: #1d1458; display: grid; place-items: center; font-size: 7rem; font-weight: 700;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 -10px 0 #dcdcf0; animation: shake .18s infinite; }
.dice.done { animation: pop .4s cubic-bezier(.3,1.6,.5,1); background: var(--accent); }
@keyframes shake { 25% { transform: rotate(-8deg) scale(1.03); } 75% { transform: rotate(8deg) scale(.97); } }

.star-big { font-size: 6rem; animation: bob 1.4s ease-in-out infinite; }
.field-badge { width: 5.5rem; height: 5.5rem; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; font-size: 2.8rem; color: #fff; font-weight: 700; border: 4px solid #fff; }
.who-line { margin-top: .8rem; font-size: 1.5rem; display: flex; gap: .5rem; align-items: center; justify-content: center; }
.fx { display: grid; justify-content: center; gap: .6rem; margin-top: 1rem; }
.fx-row { display: flex; align-items: center; gap: .6rem; font-size: 1.4rem; }
.cands { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 1.4rem 0; }
.cand { display: grid; justify-items: center; gap: .4rem; font-size: 1.3rem; }
.cand .avatar { font-size: 1.8rem; }

.quiz-intro .qi-label { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .3em; color: var(--accent); }
.qi-part { background: rgba(255,212,59,.2); border-radius: 999px; padding: .1em .6em; margin-left: .4em; letter-spacing: .05em; }
.quiz-intro .qi-icon { font-size: 6rem; margin-top: .5rem; }

/* Fragen */
.question-card { width: min(84rem, 92vw); text-align: left; }
.q-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.15rem; }
.q-mode { margin-left: auto; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.q-mode b { color: var(--text); }
.q-emoji { font-size: 6rem; text-align: center; margin: 1rem 0 0; letter-spacing: .15em; }
.q-text { font-size: 2.6rem; font-weight: 600; line-height: 1.25; margin: 1.2rem 0 1.4rem; text-align: center; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.opts.who { grid-template-columns: repeat(4, 1fr); }
.opt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; background: var(--c); border-radius: 20px; padding: 1rem 1.3rem; font-size: 1.75rem; font-weight: 600; min-height: 5rem; transition: opacity .4s, transform .4s; }
.opts.who .opt { font-size: 1.4rem; background: color-mix(in srgb, var(--c) 55%, #1b2060); }
.opt-letter { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: rgba(0,0,0,.25); display: grid; place-items: center; font-weight: 700; }
.opt-label { position: relative; flex: 1; display: flex; align-items: center; gap: .5rem; }
.opt.dim { opacity: .28; transform: scale(.97); }
.opt.right { box-shadow: 0 0 0 5px #fff, 0 0 40px rgba(255,255,255,.4); transform: scale(1.02); }
.opt-bar { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.22); transition: width .8s; }
.opt-count { position: relative; font-size: 1.6rem; font-weight: 700; }
.opt-pickers { position: relative; display: flex; gap: .2rem; }
.estimate-hint { text-align: center; font-size: 1.8rem; background: var(--panel); border-radius: 20px; padding: 1.2rem; }
.sort-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 1.2rem; margin-bottom: .4rem; }
.sort-items { display: grid; gap: .6rem; }
.sort-item { display: flex; align-items: center; gap: 1rem; background: color-mix(in srgb, var(--c, #3b4190) 60%, #1b2060); border-radius: 16px; padding: .7rem 1.2rem; font-size: 1.6rem; font-weight: 600; }
.sort-items.solved .sort-item { background: rgba(61,220,132,.18); }
.sort-val { margin-left: auto; color: var(--muted); font-size: 1.3rem; }

.timer { position: relative; height: 2.2rem; background: rgba(255,255,255,.08); border-radius: 999px; margin-top: 1.5rem; overflow: hidden; }
.timer-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #3ddc84, #ffd43b); border-radius: 999px; }
.timer-fill.hurry { background: linear-gradient(90deg, #ff5c7a, #ff922b); }
.timer-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.3rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.answered { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.2rem; }
.ans-pill { display: flex; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .3rem; border-radius: 999px; background: var(--panel); font-size: 1.2rem; font-weight: 700; opacity: .55; }
.ans-pill.done { opacity: 1; background: rgba(61,220,132,.25); }
.ans-pill.miss { opacity: .8; background: rgba(255,92,122,.18); }

.big-answer { font-size: 4.5rem; font-weight: 700; color: var(--accent); text-align: center; margin: .2rem 0 1rem; }
.res-table { display: grid; gap: .5rem; margin-top: 1rem; text-align: left; }
.res-row { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 1rem; align-items: center; background: var(--panel); border-radius: 16px; padding: .55rem 1rem; font-size: 1.45rem; }
.reveal .res-row { grid-template-columns: auto 1fr auto auto; }
.res-row.win { background: rgba(255,212,59,.2); box-shadow: inset 0 0 0 2px rgba(255,212,59,.6); }
.res-row .pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.res-row .guess { font-weight: 700; font-size: 1.7rem; }
.info { text-align: center; font-size: 1.4rem; color: #c4cbff; margin-top: 1rem; }
.verdict { text-align: center; font-size: 2.4rem; font-weight: 700; margin-top: 1.2rem; }
.verdict.win { color: #7dffb2; }
.verdict.lose { color: #ff9db0; }

/* Bilder, Karten, Zeitstrahl */
.question-card:has(.q-split) { width: min(90rem, 94vw); }
.q-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.2rem; align-items: center; margin-top: 1rem; }
.q-split.map { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.q-split .q-text { font-size: 2.2rem; text-align: left; margin: 0 0 1.2rem; }
.q-split .opts { grid-template-columns: 1fr; gap: .7rem; }
.q-split .opt { min-height: 4rem; font-size: 1.55rem; padding: .7rem 1.1rem; }
.q-split .res-table { margin-top: 0; }
.q-split .res-row { grid-template-columns: auto 1fr auto auto; font-size: 1.3rem; padding: .45rem .8rem; }
.q-vis { display: grid; place-items: center; min-height: 0; }
.vis-flag { width: 100%; max-width: 34rem; }
.q-vis .sil-svg { width: min(100%, 52vh); }
.q-vis .zoom-frame { width: min(100%, 50vh); font-size: 28vh; }
.map-slot { width: 100%; height: 62vh; border-radius: 22px; overflow: hidden; background: #0f1d45; border: 2px solid var(--line); display: grid; place-items: center; }
.map-slot .geo-map { height: 62vh; }
.pulse-target { animation: pulse 1.2s infinite; transform-box: fill-box; transform-origin: center; }
.melody-vis { display: grid; justify-items: center; gap: 1.5rem; }
.melody-note { font-size: 10rem; animation: bob 1.2s ease-in-out infinite; }
.eq.big { font-size: 6rem; }
.eq.big i { width: .18em; }
.eq.still i { animation: none; height: 40%; }
.melody-warn { font-size: 1.3rem; color: #fde68a; text-align: center; max-width: 30rem; }
.tl-axis { position: relative; height: 5.5rem; margin: 2.5rem 2rem 1rem; }
.tl-axis.reveal { height: 10rem; margin-top: 1rem; }
.tl-line { position: absolute; left: 0; right: 0; bottom: 2rem; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, #4dabff, #cc5de8, #ffd43b); }
.tl-tick { position: absolute; bottom: 1rem; width: 2px; height: 2.4rem; background: rgba(255,255,255,.35); }
.tl-tick span { position: absolute; top: 2.5rem; left: 50%; transform: translateX(-50%); font-size: 1rem; color: var(--muted); }
.tl-mark { position: absolute; bottom: calc(3rem + var(--lvl) * 2.6rem); transform: translateX(-50%); display: flex; align-items: center; gap: .3rem; font-size: 1.1rem;
  background: rgba(14,18,48,.9); border-radius: 999px; padding: .15rem .6rem .15rem .15rem; white-space: nowrap; }
.tl-correct { position: absolute; bottom: .9rem; width: 4px; height: 3rem; background: #ffd43b; transform: translateX(-50%); box-shadow: 0 0 20px #ffd43b; }
.tl-correct span { position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%); font-weight: 700; color: #1d1458; background: #ffd43b; border-radius: 8px; padding: 0 .4rem; font-size: 1.3rem; z-index: 2; }
.sound-hint { position: fixed; left: 50%; top: .8rem; transform: translateX(-50%); background: rgba(14,18,48,.92); border: 1px solid rgba(255,212,59,.6); color: #ffe58a;
  padding: .5rem 1.2rem; border-radius: 999px; font-size: 1.1rem; z-index: 60; transition: opacity .3s; }
.sound-hint.hide { display: none; }

/* Russische Untertitel */
.ru-sub { display: block; font-size: .62em; font-weight: 500; color: #b9c3ff; margin-top: .2em; line-height: 1.25; }
.opt-label .ru-sub, .sort-item .ru-sub { font-size: .7em; margin-top: .05em; color: rgba(255,255,255,.85); }
.opts:not(.who) .opt-label { flex-direction: column; align-items: flex-start; gap: 0; }
.sort-item > span:nth-child(2) { display: flex; flex-direction: column; }
.ru-inline { font-size: .5em; color: #b9c3ff; font-weight: 500; }
.qp-banner .ru-sub { font-size: .7em; }

/* Minispiele */
.mini-card { width: min(70rem, 90vw); }
.mini-phone { font-size: 2.2rem; font-weight: 700; margin: 1.5rem 0; animation: bob 1.4s ease-in-out infinite; }
.race { display: grid; gap: .7rem; margin: 1.2rem 0; text-align: left; }
.race-row { display: grid; grid-template-columns: auto 1fr 4rem; gap: .8rem; align-items: center; font-size: 1.6rem; }
.race-track { height: 2rem; background: var(--panel); border-radius: 999px; overflow: hidden; }
.race-fill { height: 100%; border-radius: 999px; transition: width .25s ease-out; min-width: 2px; }

/* Bonus & Siegerehrung */
.award { background: var(--panel); border-radius: 22px; padding: 1.1rem 1.4rem; margin-top: 1rem; }
.award.hidden { opacity: .4; }
.award-title { font-size: 2rem; font-weight: 700; }
.award-who { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: .6rem; font-size: 1.5rem; flex-wrap: wrap; }
.podium-wrap { width: min(80rem, 94vw); text-align: center; }
.title.winner { font-size: 3.6rem; color: var(--accent); text-shadow: 0 0 30px rgba(255,212,59,.5); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 1.5rem; margin: 2rem 0 1rem; }
.pod { display: grid; justify-items: center; gap: .4rem; width: 16rem; }
.pod-name { font-size: 1.8rem; font-weight: 700; }
.pod-stats { font-size: 1.3rem; color: var(--muted); }
.pod-league { font-size: 1.1rem; color: #ffe58a; background: rgba(255,212,59,.12); border-radius: 999px; padding: .15rem .8rem; white-space: nowrap; }
.res-row .pod-league { display: inline-block; margin-left: .6rem; font-size: 1rem; }
.lg-up { color: #7dffb2; font-weight: 700; }
.lg-down { color: #ff9db0; font-weight: 700; }
.lg-new { color: #9ad7ff; font-weight: 700; }
.pod-block { width: 100%; border-radius: 18px 18px 0 0; display: grid; place-items: center; font-size: 4rem; font-weight: 700; color: rgba(0,0,0,.45); }
.pod.p1 .pod-block { height: 14rem; background: linear-gradient(#ffe066, #e0a800); }
.pod.p2 .pod-block { height: 10rem; background: linear-gradient(#e9ecef, #adb5bd); }
.pod.p3 .pod-block { height: 7rem; background: linear-gradient(#f4a261, #b5651d); }
.pod.p1 .pod-avatar { animation: bob 1.4s ease-in-out infinite; }
.podium-wrap .res-table { max-width: 44rem; margin: 1rem auto; }
.podium-wrap .res-row { grid-template-columns: auto auto 1fr auto; }

/* ── Wer bin ich? ── */
.clues { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; text-align: left; }
.clue { display: flex; gap: .9rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: .8rem 1.1rem; font-size: 1.45rem; line-height: 1.3;
  animation: clue-in .7s ease-out both; }
.clue-n { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #1d1458; font-weight: 700; font-size: 1.1rem; }
@keyframes clue-in {
  from { opacity: .25; filter: blur(9px); transform: scale(.97); background: rgba(255,255,255,.03); }
  to { opacity: 1; filter: none; transform: none; }
}
.q-split.whoami { align-items: start; }

/* ── Buchstabensalat ── */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.4rem 0 .6rem; }
.tile { width: 4.2rem; height: 4.8rem; display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; border-radius: 14px;
  background: linear-gradient(180deg, #fff3bf, #ffd43b); color: #1d1458; box-shadow: 0 6px 0 #c99a00, 0 10px 18px rgba(0,0,0,.3);
  animation: tile-in .45s cubic-bezier(.3,1.6,.6,1) both; animation-delay: calc(var(--i) * 60ms); }
.tiles.ru .tile { width: 3rem; height: 3.4rem; font-size: 1.7rem; background: linear-gradient(180deg, #e7f5ff, #a5d8ff); box-shadow: 0 4px 0 #4dabf7; }
.tiles.solved .tile { background: linear-gradient(180deg, #d3f9d8, #69db7c); box-shadow: 0 6px 0 #2f9e44; }
@keyframes tile-in { from { transform: translateY(-30px) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.app-url { color: var(--accent); white-space: nowrap; }

/* ── Pause ── */
.tv-pause { display: none; }
.tv-pause.show { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 30, .84); backdrop-filter: blur(8px); }
.tv-pause-card { text-align: center; }
.tv-pause-icon { font-size: 8rem; line-height: 1; animation: pausePulse 2s ease-in-out infinite; }
.tv-pause-card h1 { font-size: 5rem; margin: .2rem 0 0; }
.tv-pause-card p { font-size: 1.6rem; color: var(--muted); }
@keyframes pausePulse { 50% { transform: scale(1.08); opacity: .8; } }
.tv-pause.note { display: block; position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 200; }
.tv-pause-note { background: rgba(255,212,59,.95); color: #1d1458; padding: .6rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1.3rem; }

/* ── Teams ── */
.team-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .45rem .7rem; border-radius: 14px; margin-bottom: .35rem;
  background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: inset 4px 0 0 var(--tc); font-size: 1.15rem; font-weight: 700; }
.teams-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: .4rem 0 1rem; text-align: left; }
.team-card { border-radius: 16px; padding: .8rem 1rem; background: color-mix(in srgb, var(--tc) 18%, transparent); box-shadow: inset 0 0 0 2px var(--tc); line-height: 1.7; }
.team-card b { display: block; font-size: 1.3rem; margin-bottom: .2rem; }
.team-scores { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .2rem 0 .8rem; }
.team-chip { padding: .35rem .9rem; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--tc) 22%, transparent); box-shadow: inset 0 0 0 2px var(--tc); }
.team-chip.best { background: var(--tc); color: #1d1458; }
.pod-team { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem; max-width: 12rem; margin: 0 auto .4rem; }
.pod[style*="--tc"] .pod-block { background: var(--tc); }

/* ── Turbo: alle würfeln ── */
.ra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-top: 1rem; }
.ra-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: 14px; background: var(--panel); font-size: 1.2rem; opacity: .65; transition: opacity .3s, background .3s; }
.ra-item .sname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-item.done { opacity: 1; background: rgba(61,220,132,.2); }

/* ───── Quizshow: Bühne mit Punkterennen ───── */
.qp.show-mode { background: radial-gradient(ellipse at 50% -10%, rgba(255,212,59,.18), transparent 55%), radial-gradient(ellipse at 10% 110%, rgba(155,81,224,.25), transparent 50%); }
.qp-stage { min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: .5rem 2.5rem 1.5rem; transition: padding-right .4s ease; }
.qp.split .qp-stage { padding-right: calc(min(46rem, 46vw) + 3rem); }
.lanes { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.lane { display: grid; grid-template-columns: 2.6rem 11rem 1fr 6rem; align-items: center; gap: 1rem; padding: .55rem 1rem; border-radius: 20px;
  background: rgba(255,255,255,.05); box-shadow: inset 5px 0 0 var(--tc, transparent); transition: background .3s; }
.lane.lead { background: rgba(255,212,59,.12); }
.lane-place { font-size: 1.6rem; font-weight: 800; color: var(--muted); text-align: center; }
.lane.lead .lane-place { color: var(--accent); }
.lane-name { font-size: 1.45rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane-track { position: relative; height: 1.1rem; border-radius: 999px; background: rgba(255,255,255,.08); margin: 0 1.6rem; }
.lane-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 35%, transparent), var(--pc)); transition: width 1.4s cubic-bezier(.3,1.2,.5,1); }
.lane-runner { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left 1.4s cubic-bezier(.3,1.2,.5,1); }
.lane-runner .avatar { font-size: 1.7rem; box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 6px 14px rgba(0,0,0,.45); }
.lane.lead .lane-runner .avatar { box-shadow: 0 0 0 4px var(--accent), 0 0 24px rgba(255,212,59,.6); }
.gain-pop { position: absolute; left: 50%; bottom: 105%; transform: translateX(-50%); font-size: 1.6rem; font-weight: 800; color: #3ddc84; text-shadow: 0 2px 8px rgba(0,0,0,.6);
  animation: gainpop 3.5s ease-out forwards; white-space: nowrap; }
@keyframes gainpop { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.25); } 75% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px); } }
.lane-pts { font-size: 2.1rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1; }
.lane-pts small { font-size: .9rem; color: #fde68a; font-weight: 600; margin-top: .2rem; }
.lanes.many { gap: .3rem; }
.lanes.many .lane { padding: .25rem .9rem; }
.lanes.many .lane-name { font-size: 1.15rem; }
.lanes.many .lane-pts { font-size: 1.5rem; }
.lanes.many .lane-runner .avatar { font-size: 1.25rem; }
.qp.split .lane { grid-template-columns: 2.2rem 8rem 1fr 4.5rem; }
.team-bar { display: flex; justify-content: center; gap: 1rem; font-size: 1.3rem; }
.plan { display: flex; justify-content: center; align-items: center; gap: .6rem; font-size: 1.6rem; }
.plan-step { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; border-radius: 999px; background: rgba(255,255,255,.06); opacity: .65; }
.plan-step small { font-size: .9rem; }
.plan-step.done { opacity: .35; }
.plan-step.now { opacity: 1; background: rgba(255,212,59,.22); box-shadow: inset 0 0 0 2px var(--accent); }
.plan-arrow { color: var(--muted); }
.rs-plan { display: flex; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.rs-step { display: flex; flex-direction: column; align-items: center; font-size: 3rem; background: rgba(14,18,48,.85); border-radius: 22px; padding: .7rem 1.2rem; }
.rs-step small { font-size: 1rem; font-weight: 700; }
.points-rule { margin-top: 1rem; font-size: 1.3rem; color: #ffe9a3; }
.x2 { color: #ff8a3d; }
.duel-line { font-size: 1.8rem; }
.duel-line .vs { color: var(--accent); font-weight: 800; margin: 0 .6rem; }
.intro-field .dot { background: rgba(255,255,255,.08); border: none; font-size: 1.5rem; }
.cand small { display: block; color: var(--muted); font-size: .85rem; }
/* Ergebnis rechts neben dem Punkterennen */
.qp-overlay.aside { background: transparent; backdrop-filter: none; place-items: center end; padding-right: 2rem; }
.results-card { width: min(46rem, 46vw); padding: 1.8rem 2rem; text-align: left; }
.results-card .title { text-align: center; }
.win-list { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.win-row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: .7rem; padding: .5rem .8rem; border-radius: 16px; background: rgba(61,220,132,.14); font-size: 1.25rem; }
.win-row .why { color: var(--muted); font-size: 1rem; }
.gain { font-size: 1.7rem; font-weight: 800; color: #3ddc84; }
.losers { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; opacity: .8; }
.loser { display: inline-flex; align-items: center; gap: .3rem; }
.gains { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.gain-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: rgba(61,220,132,.2); font-size: 1.2rem; }
.gain-pill b { color: #3ddc84; }
.gain-pill small { color: var(--muted); }