html { font-size: min(1.25vw, 2.22vh); }
body { overflow: hidden; cursor: default; }

#stage { position: fixed; inset: 0; }
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 2.2rem 3rem;
}
.scene.enter { animation: sceneIn 0.7s cubic-bezier(.2, .9, .3, 1.2) both; }
.scene.leave { animation: sceneOut 0.45s ease-in both; pointer-events: none; }
@keyframes sceneIn { from { opacity: 0; transform: scale(1.08) translateY(2rem); filter: blur(8px); } }
@keyframes sceneOut { to { opacity: 0; transform: scale(0.92); filter: blur(6px); } }

/* ---------- Overlays ---------- */
.unlock {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: rgba(10, 4, 25, 0.85); backdrop-filter: blur(8px); cursor: pointer;
}
.unlock-card { text-align: center; animation: float 3s ease-in-out infinite; }
.unlock-emoji { font-size: 6rem; }
.unlock h1 { font-size: 3rem; }
.unlock p { font-size: 1.3rem; color: var(--muted); }
.unlock .hint { font-size: 0.9rem; }
kbd { background: var(--panel-strong); padding: 0.1em 0.5em; border-radius: 6px; font-family: var(--font); }
.offline { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); background: var(--red); padding: 0.4rem 1rem; border-radius: 99px; font-weight: 800; z-index: 1500; }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 900; }
.flash.go { animation: flash 0.6s ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 15% { opacity: 0.1; } 25% { opacity: 0.7; } 100% { opacity: 0; } }

.corner {
  position: fixed; right: 1.2rem; bottom: 1rem; z-index: 50;
  background: rgba(0, 0, 0, 0.35); padding: 0.35rem 0.8rem; border-radius: 99px;
  font-weight: 800; font-size: 0.8rem; color: var(--muted);
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6rem); } }
@keyframes popIn { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes slideUp { from { transform: translateY(3rem); opacity: 0; } }
@keyframes slideDown { from { transform: translateY(-3rem); opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- Lobby ---------- */
.lobby { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: center; }
.lobby-left { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.logo-title {
  font-family: var(--font-display); font-size: 4.6rem; line-height: 0.95;
  text-shadow: 0 0.35rem 0 #000a, 0 0 2rem rgba(255, 77, 141, 0.5);
}
.logo-title .ch { display: inline-block; animation: bounceChar 2.4s ease-in-out infinite; }
@keyframes bounceChar { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-0.6rem) rotate(-4deg); } }
.lobby-sub { font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.join-box {
  display: flex; gap: 1.6rem; align-items: center; background: var(--panel);
  border: 2px solid var(--line); border-radius: 1.6rem; padding: 1.2rem 1.6rem 1.2rem 1.2rem;
  animation: slideUp 0.8s 0.2s both;
}
.join-box img { width: 13rem; height: 13rem; border-radius: 1rem; background: #fff; padding: 0.5rem; box-shadow: 0 0 0 0.4rem var(--accent), 0 0 3rem rgba(255, 204, 51, 0.5); animation: pulse 2.6s ease-in-out infinite; }
.join-box .step { font-size: 1.2rem; color: var(--muted); font-weight: 800; }
.join-box .url { font-family: var(--font-display); font-size: 2.2rem; color: #fff; word-break: break-all; }
.lobby-right { height: 100%; display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.lobby-right h2 { font-size: 2rem; display: flex; align-items: center; gap: 0.8rem; }
.count-badge { background: var(--pink); border-radius: 99px; padding: 0 0.8rem; font-size: 1.6rem; min-width: 2.6rem; text-align: center; }
.team-cloud { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.8rem; overflow: hidden; }
.team-chip {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  border-radius: 99px; background: var(--team, #555); font-weight: 900; font-size: 1.35rem;
  box-shadow: 0 0.3rem 0 rgba(0, 0, 0, 0.35); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  animation: popIn 0.6s cubic-bezier(.3, 1.6, .5, 1) both;
}
.team-chip .av { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: grid; place-items: center; font-size: 1.5rem; }
.team-chip.offline { opacity: 0.4; filter: grayscale(0.8); }
.team-chip.idle { animation: popIn 0.6s cubic-bezier(.3, 1.6, .5, 1) both, wiggle 3s ease-in-out infinite 0.6s; }
.waiting-dots { color: var(--muted); font-size: 1.3rem; font-weight: 800; }
.waiting-dots span { animation: blink 1.4s infinite both; }
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
.floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.floaters span { position: absolute; bottom: -4rem; font-size: 2.6rem; opacity: 0.25; animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-115vh) rotate(360deg); } }

/* ---------- Rundenintro ---------- */
.round-intro { align-items: center; justify-content: center; text-align: center; gap: 1.2rem; overflow: hidden; }
.sunburst {
  position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 8deg, transparent 8deg 20deg);
  animation: spin 40s linear infinite;
  mask-image: radial-gradient(circle, #000 0%, transparent 45%);
}
.round-no {
  font-family: var(--font-display); font-size: 2.2rem; background: var(--pink); padding: 0.3rem 1.6rem;
  border-radius: 99px; transform: rotate(-3deg); box-shadow: 0 0.35rem 0 #0008;
  animation: slam 0.6s 0.15s cubic-bezier(.2, 1.8, .4, 1) both;
}
@keyframes slam { from { transform: scale(4) rotate(-20deg); opacity: 0; } }
.round-icon { font-size: 7rem; animation: iconIn 1s 0.3s cubic-bezier(.2, 1.5, .4, 1) both, float 3s 1.3s ease-in-out infinite; filter: drop-shadow(0 0.5rem 1rem #0008); }
@keyframes iconIn { from { transform: scale(0) rotate(-360deg); opacity: 0; } }
.round-title { font-size: 6rem; line-height: 1; text-shadow: 0 0.4rem 0 #000a; }
.round-title .ch { display: inline-block; animation: dropChar 0.6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes dropChar { from { transform: translateY(-60vh) rotate(-30deg); opacity: 0; } }
.round-desc { font-size: 1.7rem; color: var(--muted); font-weight: 800; max-width: 60rem; animation: slideUp 0.8s 1.2s both; }
.round-meta { font-size: 1.2rem; color: var(--accent); font-weight: 900; animation: slideUp 0.8s 1.4s both; }

/* ---------- Frage ---------- */
.q-top { display: flex; align-items: center; gap: 1rem; animation: slideDown 0.6s both; }
.q-pill { background: var(--panel-strong); padding: 0.4rem 1.1rem; border-radius: 99px; font-weight: 900; font-size: 1.1rem; }
.q-pill.accent { background: var(--accent); color: #2a1600; }
.q-pill.pink { background: var(--pink); }
.q-top .spacer { flex: 1; }
.q-main { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2rem; min-height: 0; padding: 1.2rem 0; }
.q-body { display: flex; flex-direction: column; justify-content: center; gap: 1.4rem; min-height: 0; }
.q-text {
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1.1; text-shadow: 0 0.3rem 0 #0008;
  animation: qTextIn 0.8s cubic-bezier(.2, 1.4, .4, 1) both;
}
.q-text.long { font-size: 2.5rem; }
@keyframes qTextIn { from { transform: scale(0.6); opacity: 0; filter: blur(10px); } }
.q-media { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; }
.q-media img, .q-media video {
  height: 100%; width: auto; max-width: 100%; max-height: 100%; min-height: 0; border-radius: 1.2rem; object-fit: contain; background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 0.4rem #fff, 0 1.5rem 3rem #000a; animation: photoIn 1s 0.3s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes photoIn { from { transform: scale(0.3) rotate(-15deg); opacity: 0; } 70% { transform: rotate(2deg); } }

.equalizer { display: flex; align-items: flex-end; gap: 0.5rem; height: 12rem; }
.equalizer i { width: 1.6rem; border-radius: 0.5rem 0.5rem 0.2rem 0.2rem; background: linear-gradient(to top, var(--pink), var(--accent)); height: 20%; animation: eq 0.8s ease-in-out infinite alternate; }
.equalizer.paused i { animation-play-state: paused; opacity: 0.4; }
@keyframes eq { to { height: 100%; } }
.music-note { font-size: 5rem; animation: float 1.5s ease-in-out infinite; }

.timer { position: relative; width: 12rem; height: 12rem; align-self: center; animation: popIn 0.6s 0.4s both; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.timer .track { stroke: rgba(255, 255, 255, 0.12); }
.timer .bar { stroke: var(--green); stroke-linecap: round; transition: stroke 0.3s; filter: drop-shadow(0 0 0.6rem currentColor); }
.timer .num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 4.2rem; }
.timer.warn .bar { stroke: var(--accent); }
.timer.danger .bar { stroke: var(--red); }
.timer.danger .num { animation: heartbeat 1s infinite; color: var(--red); }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.timer.infinite .num { font-size: 3rem; }
.timer.hidden-timer { visibility: hidden; }

.answer-strip { display: flex; align-items: center; gap: 1rem; animation: slideUp 0.6s 0.5s both; }
.answer-count { font-family: var(--font-display); font-size: 2.2rem; min-width: 7rem; }
.answer-count small { font-family: var(--font); font-size: 1rem; color: var(--muted); display: block; font-weight: 800; }
.answer-avatars { flex: 1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.answer-av {
  width: 3rem; height: 3rem; border-radius: 50%; background: var(--panel); display: grid; place-items: center;
  font-size: 1.6rem; position: relative; filter: grayscale(1); opacity: 0.35; transition: all 0.3s;
}
.answer-av.done { background: var(--team); filter: none; opacity: 1; animation: popIn 0.5s cubic-bezier(.3, 1.8, .5, 1); box-shadow: 0 0 1rem var(--team); }
.answer-av.done::after { content: '✓'; position: absolute; right: -0.3rem; bottom: -0.3rem; background: var(--green); color: #00301e; border-radius: 50%; width: 1.3rem; height: 1.3rem; font-size: 0.9rem; font-weight: 900; display: grid; place-items: center; }

/* Multiple Choice */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 1rem;
  font-size: 1.9rem; font-weight: 900; box-shadow: 0 0.35rem 0 rgba(0, 0, 0, 0.35); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  animation: slideUp 0.6s cubic-bezier(.2, 1.4, .4, 1) both; position: relative; overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, filter 0.5s;
}
.choice .shape { font-size: 2.2rem; width: 2.6rem; text-align: center; }
.choice .votes { margin-left: auto; font-family: var(--font-display); font-size: 2rem; }
.choice .fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.18); transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2, .9, .3, 1); }
.choice.wrong { opacity: 0.3; filter: grayscale(0.7); transform: scale(0.95); }
.choice.right { animation: rightPulse 1s ease-in-out infinite; box-shadow: 0 0 0 0.3rem #fff, 0 0 2.5rem rgba(255, 255, 255, 0.6); }
.choice.right::before { content: '✔'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; }
.choice.right .votes { margin-right: 3rem; }
@keyframes rightPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.bg-c0 { background: var(--c0); } .bg-c1 { background: var(--c1); } .bg-c2 { background: var(--c2); }
.bg-c3 { background: var(--c3); } .bg-c4 { background: var(--c4); } .bg-c5 { background: var(--c5); }

/* Anagramm */
.letters { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; perspective: 40rem; }
.tile {
  width: 5.5rem; height: 6rem; border-radius: 0.9rem; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 3.6rem; color: #3a2400;
  background: linear-gradient(#ffe08a, #ffc233); box-shadow: 0 0.45rem 0 #b07800, 0 1rem 1.5rem #0006;
  animation: tileIn 0.7s cubic-bezier(.2, 1.6, .4, 1) both; transition: transform 0.6s cubic-bezier(.4, 1.6, .5, 1);
}
.tile.solution { background: linear-gradient(#a8ffd9, #2ee59d); box-shadow: 0 0.45rem 0 #0b8a59, 0 1rem 1.5rem #0006; color: #00301e; }
@keyframes tileIn { from { transform: translateY(-80vh) rotate(180deg); opacity: 0; } }

/* Wer bin ich */
.hints { display: flex; flex-direction: column; gap: 0.8rem; perspective: 60rem; }
.hint-card {
  display: flex; gap: 1rem; align-items: center; background: var(--panel-strong); border-radius: 1rem;
  padding: 0.9rem 1.3rem; font-size: 1.7rem; font-weight: 800; transition: opacity 0.4s, font-size 0.4s;
  animation: flipIn 0.8s cubic-bezier(.2, 1.3, .4, 1) both; transform-origin: top;
}
.hint-card .no { font-family: var(--font-display); background: var(--cyan); color: #00313b; border-radius: 0.6rem; min-width: 2.6rem; text-align: center; padding: 0.1rem 0.4rem; font-size: 1.5rem; }
.hint-card.old { opacity: 0.55; font-size: 1.3rem; }
.hint-card.locked { background: rgba(255, 255, 255, 0.04); color: transparent; border: 2px dashed var(--line); animation: none; }
.hint-card.locked .no { background: var(--panel-strong); color: var(--muted); }
@keyframes flipIn { from { transform: rotateX(-90deg); opacity: 0; } }
.pot { text-align: center; align-self: center; }
.pot .val { font-family: var(--font-display); font-size: 5rem; color: var(--accent); line-height: 1; text-shadow: 0 0 2rem rgba(255, 204, 51, 0.6); }
.pot .val.drop { animation: potDrop 0.8s ease-out; }
@keyframes potDrop { 0% { transform: scale(1.6); color: var(--red); } 100% { transform: scale(1); } }
.pot .lbl { font-weight: 900; color: var(--muted); }

/* Blitz */
.blitz-banner {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none;
  font-family: var(--font-display); font-size: 12rem; color: var(--accent);
  text-shadow: 0 0 3rem #fff, 0 0.6rem 0 #b07800; animation: blitz 1.4s ease-out both;
}
@keyframes blitz { 0% { transform: scale(3) rotate(-10deg); opacity: 0; } 20% { transform: scale(1) rotate(-6deg); opacity: 1; } 75% { opacity: 1; transform: scale(1.1) rotate(-6deg); } 100% { opacity: 0; transform: scale(0.5) rotate(-6deg); } }
.estimate-unit { font-size: 1.6rem; color: var(--muted); font-weight: 800; }

/* Zeit um */
.stamp {
  position: absolute; left: 50%; top: 45%; z-index: 30; pointer-events: none;
  font-family: var(--font-display); font-size: 7rem; color: var(--red); white-space: nowrap;
  border: 0.6rem solid var(--red); border-radius: 1.5rem; padding: 0.5rem 2.5rem; background: rgba(20, 8, 43, 0.85);
  transform: translate(-50%, -50%) rotate(-8deg); animation: stamp 0.5s cubic-bezier(.2, 1.6, .4, 1) both;
  box-shadow: 0 0 4rem rgba(255, 77, 109, 0.6);
}
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-8deg) scale(4); opacity: 0; } }
.stamp.fade { animation: stamp 0.5s cubic-bezier(.2, 1.6, .4, 1) both, stampAway 0.6s 1.8s ease-in forwards; }
@keyframes stampAway { to { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(0.6); } }
.grading { position: absolute; left: 50%; bottom: 7rem; transform: translateX(-50%); font-size: 1.5rem; font-weight: 900; color: var(--muted); animation: slideUp 0.6s 2s both; }

/* ---------- Auflösung ---------- */
.reveal-q { font-size: 1.6rem; font-weight: 800; color: var(--muted); animation: slideDown 0.6s both; }
.reveal-img { height: 38vh; max-width: 60vw; object-fit: contain; border-radius: 1.2rem; box-shadow: 0 0 0 0.3rem #fff, 0 1.5rem 3rem #000a; animation: photoIn .8s both; }
.answer-card-wrap { perspective: 80rem; display: flex; justify-content: center; margin: 1rem 0 0.6rem; }
.answer-card {
  background: linear-gradient(135deg, #2ee59d, #10b981); color: #00301e; border-radius: 1.4rem;
  padding: 1rem 3rem; text-align: center; box-shadow: 0 0.5rem 0 #0b8a59, 0 0 4rem rgba(46, 229, 157, 0.45);
  animation: cardFlip 1s 0.3s cubic-bezier(.2, 1.3, .4, 1) both; max-width: 90%;
}
.answer-card .lbl { font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.8; }
.answer-card .val { font-family: var(--font-display); font-size: 4rem; line-height: 1.05; }
@keyframes cardFlip { from { transform: rotateY(90deg) scale(0.6); opacity: 0; } }
.explanation { text-align: center; font-size: 1.4rem; font-weight: 700; color: var(--muted); animation: slideUp 0.6s 1s both; margin-bottom: 0.6rem; }
.reveal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; }
.reveal-body .choices .choice { animation-delay: 0s !important; }

.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.7rem; align-content: start; perspective: 60rem; overflow: hidden; flex: 1; }
.results-grid.dense { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); font-size: 0.82em; }
.res {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 0.9rem;
  background: var(--panel); border-left: 0.45rem solid var(--team); position: relative;
  animation: flipIn 0.6s cubic-bezier(.2, 1.3, .4, 1) both;
}
.res .av { font-size: 1.8rem; }
.res .info { min-width: 0; flex: 1; }
.res .tn { font-weight: 900; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .ta { font-size: 1.2rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .pts { font-family: var(--font-display); font-size: 1.7rem; }
.res.ok { background: rgba(46, 229, 157, 0.18); }
.res.ok .pts { color: var(--green); }
.res.no .pts { color: var(--red); opacity: 0.8; }
.res.none { opacity: 0.45; }
.res .plus { position: absolute; right: 0.6rem; top: -0.4rem; font-family: var(--font-display); color: var(--accent); font-size: 1.6rem; animation: plusFly 1.6s ease-out both; pointer-events: none; }
@keyframes plusFly { 0% { transform: translateY(1rem) scale(0.5); opacity: 0; } 30% { transform: translateY(-1rem) scale(1.3); opacity: 1; } 100% { transform: translateY(-3rem); opacity: 0; } }

/* Zahlenstrahl (Blitz) */
.numline { position: relative; height: 9rem; margin: 2rem 3rem 1rem; }
.numline .axis { position: absolute; left: 0; right: 0; top: 4.5rem; height: 0.4rem; background: rgba(255, 255, 255, 0.25); border-radius: 1rem; }
.numline .target {
  position: absolute; top: 2rem; transform: translateX(-50%); text-align: center; z-index: 2;
  animation: popIn 0.6s 0.6s both;
}
.numline .target .flag { width: 0.4rem; height: 5rem; background: var(--green); margin: 0 auto; border-radius: 1rem; box-shadow: 0 0 1.2rem var(--green); }
.numline .target .lbl { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--green); color: #00301e; font-family: var(--font-display); font-size: 1.8rem; border-radius: 0.6rem; padding: 0 0.7rem; white-space: nowrap; }
.numline .mark {
  position: absolute; top: 3.1rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  transition: left 1.6s cubic-bezier(.2, .9, .3, 1); left: 50%;
}
.numline .mark .dot { width: 3rem; height: 3rem; border-radius: 50%; background: var(--team); display: grid; place-items: center; font-size: 1.6rem; border: 3px solid #fff; }
.numline .mark .v { font-weight: 900; font-size: 1rem; margin-top: 0.2rem; background: rgba(0, 0, 0, 0.5); padding: 0 0.4rem; border-radius: 0.4rem; white-space: nowrap; }
.numline .mark.win .dot { box-shadow: 0 0 0 0.3rem var(--accent), 0 0 2rem var(--accent); animation: pulse 0.8s infinite; }

/* ---------- Rangliste ---------- */
.board-title { text-align: center; font-size: 3.6rem; text-shadow: 0 0.35rem 0 #000a; animation: slam 0.6s cubic-bezier(.2, 1.8, .4, 1) both; }
.board-sub { text-align: center; color: var(--muted); font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; animation: slideUp 0.5s 0.3s both; }
.board { position: relative; flex: 1; margin: 0 auto; width: min(100%, 70rem); }
.row {
  position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.2rem; border-radius: 1rem; background: var(--panel); overflow: hidden;
  transition: top 1.1s cubic-bezier(.5, -0.3, .3, 1.4), background 0.5s;
}
.row .barfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--team), transparent); opacity: 0.45; width: 0; transition: width 1.4s cubic-bezier(.2, .9, .3, 1); }
.row > *:not(.barfill) { position: relative; }
.row .rk { font-family: var(--font-display); font-size: 1.9em; width: 2.6em; text-align: center; }
.row .av { font-size: 1.8em; }
.row .nm { font-weight: 900; font-size: 1.5em; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .delta { font-family: var(--font-display); color: var(--green); font-size: 1.4em; opacity: 0; transition: opacity 0.4s; }
.row .delta.show { opacity: 1; animation: popIn 0.5s both; }
.row .sc { font-family: var(--font-display); font-size: 2.1em; min-width: 3.2em; text-align: right; }
.row .arrow { font-size: 1.4em; color: var(--green); animation: popIn 0.4s both; }
.row.top1 { background: linear-gradient(90deg, rgba(255, 204, 51, 0.35), var(--panel)); box-shadow: inset 0 0 0 3px rgba(255, 204, 51, 0.7); }
.row.top2 { box-shadow: inset 0 0 0 3px rgba(200, 210, 230, 0.55); }
.row.top3 { box-shadow: inset 0 0 0 3px rgba(205, 127, 50, 0.6); }
.row.enter { animation: slideUp 0.5s both; }

/* ---------- Siegerehrung ---------- */
.final { align-items: center; overflow: hidden; }
.final h1 { font-size: 4rem; text-shadow: 0 0.4rem 0 #000a; animation: slam 0.7s cubic-bezier(.2, 1.8, .4, 1) both; }
.spotlights { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.spotlights i { position: absolute; top: -10vh; width: 30vw; height: 130vh; background: linear-gradient(to bottom, rgba(255, 255, 220, 0.35), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: top center; animation: sweep 5s ease-in-out infinite alternate; }
.spotlights i:nth-child(1) { left: 5vw; }
.spotlights i:nth-child(2) { right: 5vw; animation-delay: -2.5s; }
@keyframes sweep { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
.podium { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem; width: 100%; padding-top: 2rem; }
.pod { width: 19rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.pod .who { text-align: center; opacity: 0; transform: translateY(-40vh) scale(0.5); }
.pod .who .av { font-size: 5rem; display: block; filter: drop-shadow(0 0.5rem 1rem #000a); }
.pod .who .nm { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.1; margin: 0.3rem 0; text-shadow: 0 0.25rem 0 #000a; }
.pod .who .sc { font-weight: 900; font-size: 1.4rem; color: var(--accent); }
.pod .crown { font-size: 5rem; display: block; opacity: 0; margin-bottom: -1.4rem; position: relative; z-index: 2; }
.pod .block {
  width: 100%; height: 0; border-radius: 1rem 1rem 0 0; display: grid; place-items: start center; padding-top: 1rem;
  font-family: var(--font-display); font-size: 5rem; color: rgba(0, 0, 0, 0.35); overflow: hidden;
  transition: height 1.2s cubic-bezier(.2, 1.2, .4, 1);
  box-shadow: inset 0 0.5rem 0 rgba(255, 255, 255, 0.35), 0 0 3rem rgba(0, 0, 0, 0.5);
}
.pod.p1 .block { background: linear-gradient(#ffe27a, #e0a800); }
.pod.p2 .block { background: linear-gradient(#eef2f8, #9aa7bb); }
.pod.p3 .block { background: linear-gradient(#f0b27a, #b0652b); }
.pod.up.p1 .block { height: 15rem; }
.pod.up.p2 .block { height: 11rem; }
.pod.up.p3 .block { height: 7.5rem; }
.pod .who, .pod .block { flex-shrink: 0; }
.pod.show .who { animation: landWho 0.9s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.pod.show .crown { animation: crownIn 1s 0.6s cubic-bezier(.3, 1.8, .5, 1) forwards, float 2s 1.6s ease-in-out infinite; }
@keyframes landWho { to { opacity: 1; transform: none; } }
@keyframes crownIn { from { opacity: 0; transform: translateY(-20rem) rotate(-40deg); } to { opacity: 1; transform: none; } }
.pod.p1.show .who .av { animation: wiggle 0.6s 1s ease-in-out 4; }
.rest { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; max-width: 90%; }
.rest .team-chip { font-size: 1rem; }
.drum-text { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 3rem; color: var(--accent); animation: pulse 0.4s ease-in-out infinite; }

/* Spannung nach Einsendeschluss: Licht dimmt, pulsierende Vignette */
.scene.suspense::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 25;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(5, 0, 20, 0.75) 100%);
  animation: suspense 0.9s ease-in-out infinite alternate;
}
@keyframes suspense { from { opacity: 0.55; } to { opacity: 1; } }
.scene.suspense .q-body, .scene.suspense .q-side { filter: saturate(0.6) brightness(0.8); transition: filter 1s; }

/* Vorschau im Quizmaster-Pult */
.preview .unlock { display: none; }

/* Papier-Modus (nur Presenter) */
.lobby.paper { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6rem; }
.lobby.paper .logo-title { font-size: 3.6rem; max-width: 90%; }
.paper-icon { font-size: 8rem; animation: float 2.4s ease-in-out infinite; }
.lobby.paper .lobby-sub { font-size: 2.6rem; }
.paper-hint { font-size: 1.5rem; font-weight: 800; color: var(--muted); }
.paper-answer { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex: 1; min-height: 0; perspective: 80rem; margin: 1rem 0; }
.paper-answer .reveal-img { height: auto; max-height: 100%; max-width: 50vw; }
.paper-answer .answer-card .val { font-size: 5.5rem; }
.paper-reveal .reveal-body { flex: none; }
.paper-final { justify-content: center; gap: 1.5rem; text-align: center; }
.paper-final h1 { font-size: 6rem; }
.paper-final .round-desc { max-width: 50rem; }
.entry-wait .dots span { animation: blink 1.4s infinite both; }
.entry-wait .dots span:nth-child(2) { animation-delay: 0.2s; }
.entry-wait .dots span:nth-child(3) { animation-delay: 0.4s; }

/* Papier-Modus: Rundenauflösung */
.rr-question { font-family: var(--font-display); font-size: 2.6rem; line-height: 1.15; text-align: center; margin-top: 1rem; text-shadow: 0 0.3rem 0 #0008; animation: qTextIn 0.8s cubic-bezier(.2, 1.4, .4, 1) both; }
.rr-step .answer-card.rr-hidden { visibility: hidden; }
.rr-step .answer-card.rr-show { visibility: visible; animation: flipIn 0.8s cubic-bezier(.2, 1.4, .4, 1) both; }
.rr-step .explanation.rr-hidden { visibility: hidden; animation: none; }
.rr-step .explanation.rr-show { visibility: visible; animation: slideUp 0.6s 0.4s both; }
.rr-drum { animation-delay: 0.3s; }
.rr-overview { gap: 1rem; }
.rr-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; overflow: hidden; }
.rr-grid.dense { gap: 0.6rem; }
.rr-item { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 1.2rem; background: var(--panel-strong); animation: popIn 0.5s both; }
.rr-item .no { flex: none; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #2a1600; font-family: var(--font-display); font-size: 1.6rem; }
.rr-item .info { display: flex; flex-direction: column; min-width: 0; }
.rr-item .qq { font-size: 1.15rem; font-weight: 700; color: var(--muted); }
.rr-item .aa { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--green); }
.rr-grid.dense .rr-item .aa { font-size: 1.6rem; }