/* Adventskalender 2026 – gemeinsames Design der Mockups */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --night: #0f2747;
  --night2: #1d4a7c;
  --snow: #f4f9ff;
  --red: #e0344a;
  --green: #2f9e63;
  --gold: #ffcf3d;
  --pink: #ff8fb1;
  --ink: #1d1d26;
  --paper: #ffffff;
  --muted: #5d6b82;
  --shadow: 0 6px 0 rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  color: var(--snow);
  background: linear-gradient(var(--night), var(--night2)) fixed;
  padding-bottom: 64px;
  padding-top: 18px;
}
a { color: inherit; }
h1, h2, h3 { margin: 0 0 8px; line-height: 1.15; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); }

.wrap { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 14px 16px 24px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.on-dark-muted { color: #b9cdea; }

/* --- Schneefall --- */
.snowfall { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.snowfall i { position: absolute; top: -20px; color: #fff; opacity: .75; font-style: normal; animation: fall linear infinite; }
@keyframes fall { to { transform: translate(var(--dx, 30px), 105vh) rotate(360deg); } }

/* --- Kopfleiste --- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 14px; flex-wrap: wrap; }
.logo { font-weight: 700; font-size: 1.35rem; color: var(--gold); text-decoration: none; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.logo span { color: #fff; }
.rules-link { margin-left: auto; margin-right: 4px; text-decoration: none; font-weight: 600; background: #ffffff22; border: 2px solid #ffffff55; border-radius: 999px; padding: 4px 12px; color: #fff; }
.rules-link:hover { background: var(--gold); color: var(--ink); }
.me { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px 4px 4px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); font-weight: 600; }
.flakes { color: #1b7bd6; }
.headshot { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: #cfe6ff; border: 3px solid var(--ink); }
.headshot > div { position: absolute; width: 150px; left: -52px; top: -58px; }
.headshot .avatar, .headshot .avatar * { animation: none !important; }

/* --- Karten und Knöpfe --- */
.card { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow); padding: 16px; }
.card.dark { background: #ffffff1c; color: var(--snow); border-color: #ffffff55; box-shadow: none; }
.grid { display: grid; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.center { justify-content: center; }

.btn {
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; display: inline-block; text-align: center;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 18px;
  box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.green { background: var(--green); color: #fff; }
.btn.ghost { background: #fff; }
.btn.small { font-size: .9rem; padding: 6px 12px; box-shadow: 0 3px 0 var(--ink); }
.btn[disabled], .btn.off { background: #c9d2de; color: #7b8799; cursor: not-allowed; box-shadow: 0 3px 0 #8d98a8; border-color: #8d98a8; transform: none; }

.badge { display: inline-block; font-weight: 700; font-size: .85rem; padding: 3px 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); }
.badge.green { background: var(--green); color: #fff; }
.badge.red { background: var(--red); color: #fff; }
.badge.grey { background: #dfe6f0; }

input, select { font: inherit; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); }
input:focus, select:focus { outline: 3px solid var(--gold); }

/* --- Laufende Figuren im Hintergrund --- */
/* --- Winterszene im Hintergrund: Himmel, Dorf, Bäume, Figuren, Rentier, Weihnachtsmann --- */
:root { --scene-bottom: 36px; } /* Platz für die Mockup-Leiste, in der echten App 0 */
.scene { position: fixed; inset: 0 0 var(--scene-bottom) 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene .sky { position: absolute; inset: 0; }
.scene .star { position: absolute; border-radius: 50%; background: #fff; animation: twinkle-s 3s ease-in-out infinite; }
@keyframes twinkle-s { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.3); } }
.scene .moon { position: absolute; top: 9%; right: 8%; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe6, #ffe9a8 70%); box-shadow: 0 0 40px 12px #ffe9a855; }
.scene .moon::after { content: ''; position: absolute; left: 44px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: #e8d48c; box-shadow: -22px 26px 0 -3px #e8d48c; }
.scene .aurora { position: absolute; left: -10%; right: -10%; top: -4%; height: 38%; filter: blur(34px); opacity: .38; animation: aurora 16s ease-in-out infinite alternate; background: linear-gradient(100deg, transparent 5%, #36e6a0 25%, #5b8dff 50%, #c25bff 70%, transparent 95%); }
.scene .aurora.b { top: 6%; height: 26%; opacity: .25; animation-duration: 23s; animation-direction: alternate-reverse; background: linear-gradient(80deg, transparent 10%, #7affc2 35%, #4ad0ff 60%, transparent 90%); }
@keyframes aurora { from { transform: translateX(-6%) skewX(-8deg); } to { transform: translateX(6%) skewX(8deg); } }
.scene .shoot { position: absolute; width: 140px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(28deg); opacity: 0; animation: shoot 1.2s ease-out forwards; filter: drop-shadow(0 0 4px #fff); }
@keyframes shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(28deg); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(420px, 230px) rotate(28deg); } }
.scene .sleigh { position: absolute; top: 12%; left: 0; width: 260px; animation: sleigh 46s linear infinite; animation-delay: -34s; }
.scene .sleigh svg { display: block; animation: sleigh-bob 1.4s ease-in-out infinite; }
.scene .sleigh::before { content: ''; position: absolute; right: 250px; top: 36px; width: 260px; height: 5px; border-radius: 4px; background: linear-gradient(270deg, #ffe48aaa, transparent); }
@keyframes sleigh { 0% { transform: translate(-320px, 30px); } 28% { transform: translate(calc(100vw + 60px), -50px); } 100% { transform: translate(calc(100vw + 60px), -50px); } }
@keyframes sleigh-bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.scene .hills { position: absolute; left: 0; right: 0; bottom: 46px; height: 120px; background:
  radial-gradient(ellipse 34% 100% at 12% 100%, #9fc0e6 98%, transparent 100%),
  radial-gradient(ellipse 40% 80% at 45% 100%, #aecbec 98%, transparent 100%),
  radial-gradient(ellipse 36% 95% at 82% 100%, #9fc0e6 98%, transparent 100%); opacity: .55; }
.scene .lay { position: absolute; left: 0; right: 0; overflow: hidden; }
.scene .lay .track { display: flex; width: max-content; height: 100%; animation: slide var(--t, 60s) linear infinite; }
.scene .lay .tile { position: relative; flex: none; width: 1400px; height: 100%; }
.scene .lay .it { position: absolute; display: block; line-height: 0; }
.scene .lay.far { bottom: 46px; height: 110px; opacity: .6; --t: 150s; }
.scene .lay.mid { bottom: 42px; height: 150px; --t: 75s; }
.scene .lay.near { bottom: 0; height: 130px; --t: 34s; z-index: 3; }
@keyframes slide { to { transform: translateX(-1400px); } }
.scene .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(#f4f9ff, #dcecff); border-top: 3px solid #b9d6f5; z-index: 0; }
.scene .glint { position: absolute; width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 6px 2px #fff; animation: twinkle-s 2.4s ease-in-out infinite; z-index: 4; }
.walker { position: absolute; bottom: 12px; width: 84px; z-index: 2; animation: cross linear infinite; }
@keyframes cross { from { left: -110px; } to { left: 100%; } }
.scene .deer { position: absolute; bottom: 16px; width: 70px; z-index: 2; right: -90px; animation: deer 30s linear infinite; animation-delay: -12s; }
@keyframes deer { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(calc(-100vw - 140px)); } }
.scene .deer .leg-a { transform-origin: 30px 38px; animation: leg-run .35s ease-in-out infinite alternate; }
.scene .deer .leg-b { transform-origin: 56px 38px; animation: leg-run .35s ease-in-out infinite alternate-reverse; }
@keyframes leg-run { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
/* Bausteine */
.bulb { animation: bulb 1.6s ease-in-out infinite; }
.bulb:nth-child(2n) { animation-delay: .5s; } .bulb:nth-child(3n) { animation-delay: 1s; }
@keyframes bulb { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.win { animation: flicker 4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .75; } 50% { opacity: 1; } 80% { opacity: .85; } }
.smoke { animation: smoke 3.5s ease-out infinite; opacity: 0; }
.smoke.s2 { animation-delay: 1.2s; } .smoke.s3 { animation-delay: 2.4s; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.5); opacity: .7; } 100% { transform: translate(10px, -34px) scale(1.5); opacity: 0; } }
.snowman { pointer-events: auto; cursor: pointer; }
.snowman .arm { transform-origin: 46px 42px; animation: wave-arm 1.6s ease-in-out infinite; }
@keyframes wave-arm { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-35deg); } }
.snowman:hover svg { animation: wiggle .4s 2; }
@keyframes wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.say { position: absolute; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 3px 9px; font-weight: 700; font-size: .85rem; white-space: nowrap; animation: pop .25s; z-index: 6; }
.garland { position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 5; pointer-events: none; display: flex; }
.garland span { flex: 1; position: relative; border-bottom: 2px solid #2a2a33; border-radius: 0 0 50% 50% / 0 0 100% 100%; height: 14px; }
.garland span::after { content: ''; position: absolute; left: 50%; bottom: -9px; width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: var(--c, #ffcf3d); box-shadow: 0 0 10px 3px var(--c, #ffcf3d); transform: translateX(-50%); animation: bulb 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* --- Mockup-Leiste (gehört nicht zur App) --- */
.mockbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #0b1220f2; color: #cbd5e5; font-size: .8rem; padding: 6px 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; border-top: 2px dashed #ffcf3d; }
.mockbar b { color: var(--gold); margin-right: 4px; }
.mockbar a { text-decoration: none; padding: 3px 9px; border-radius: 999px; background: #ffffff18; }
.mockbar a.cur { background: var(--gold); color: var(--ink); font-weight: 700; }
.mockbar select { padding: 2px 6px; border-width: 2px; font-size: .8rem; border-radius: 8px; }

/* --- Dialog --- */
.modal { position: fixed; inset: 0; z-index: 60; background: #0a1424cc; display: none; align-items: center; justify-content: center; padding: 16px; }
.modal.show { display: flex; }
.modal .card { max-width: 420px; width: 100%; animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

/* --- Schwierigkeitsbalken, Countdown --- */
.bar { height: 14px; background: #dfe6f0; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--gold), var(--red)); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.pill { display: inline-flex; gap: 6px; align-items: center; background: #ffffff22; border: 2px solid #ffffff55; border-radius: 999px; padding: 4px 12px; font-weight: 600; }

/* --- Podest --- */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 1vw, 10px); padding: 14px 4px 0; border-bottom: 6px solid #eaf4ff; overflow: hidden; }
.podium .spot { display: flex; flex-direction: column; align-items: center; width: clamp(56px, 18vw, 150px); }
.podium .name { font-weight: 700; font-size: clamp(.8rem, 3.2vw, 1.05rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.podium .score { font-weight: 700; font-size: .85rem; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; margin: 2px 0 4px; white-space: nowrap; }
.podium .fig { width: 100%; margin-bottom: -8.5%; }
.podium .block { width: 100%; border: 3px solid var(--ink); border-bottom: 0; border-radius: 14px 14px 0 0; display: grid; place-items: start center; padding-top: 4px; font-weight: 700; font-size: 2.2rem; color: var(--ink); transform-origin: bottom; animation: grow .6s ease-out both; animation-delay: var(--bd, 0s); }
.podium.big .block { font-size: 3rem; }
.block.r1 { height: clamp(50px, 20vh, 170px); background: linear-gradient(#ffe27a, #ffbf1f); }
.block.r2 { height: clamp(40px, 14.5vh, 125px); background: linear-gradient(#eef2f8, #b8c4d4); }
.block.r3 { height: clamp(32px, 10.5vh, 92px); background: linear-gradient(#f4cba3, #cf8a4c); }
.block.r4 { height: clamp(26px, 7vh, 60px); background: linear-gradient(#d6e6f7, #9db8d8); }
.block.r5 { height: clamp(20px, 5vh, 42px); background: linear-gradient(#d6e6f7, #9db8d8); }
.podium.big .block.r1 { height: clamp(60px, 24vh, 220px); } .podium.big .block.r2 { height: clamp(48px, 17.5vh, 160px); } .podium.big .block.r3 { height: clamp(38px, 12.5vh, 115px); } .podium.big .block.r4 { height: clamp(30px, 8.5vh, 76px); } .podium.big .block.r5 { height: clamp(24px, 6vh, 56px); }
@keyframes grow { from { transform: scaleY(0); } }
.podium .fig { animation-delay: var(--d, 0s); animation-fill-mode: both; }
.podium.anim-drop .fig { animation: drop .85s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: var(--d); }
@keyframes drop { from { transform: translateY(-520px) scale(.6); opacity: 0; } 30% { opacity: 1; } }
.podium.anim-walk .fig { animation: walkin 2.6s linear both; animation-delay: var(--d); }
@keyframes walkin { from { transform: translateX(var(--from)); } to { transform: translateX(0); } }
.podium.anim-spin .fig { animation: spin 1s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d); }
@keyframes spin { from { transform: scale(0) rotate(-900deg); opacity: 0; } 20% { opacity: 1; } }
.podium .spot > * { visibility: visible; }
.hidden-until { visibility: hidden; }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti b { position: absolute; top: -20px; width: 10px; height: 16px; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.shake { animation: shake .35s 2; }

@media (prefers-reduced-motion: reduce) {
  .snowfall i, .walker { animation: none; }
}

/* ===== Studio-Look (angelehnt an «1 gegen 100», mit Weihnachts-Touch) ===== */
body { background: radial-gradient(ellipse 130% 75% at 50% -12%, #3d5ae0 0%, #1a2a7a 36%, #0a1040 68%, #050824 100%) fixed; }
.scene .beams { position: absolute; inset: 0 0 35% 0; overflow: hidden; }
.scene .beams i { position: absolute; top: -6%; width: 36vw; height: 120%; transform-origin: 50% 0; background: linear-gradient(180deg, #c3d8ff66, transparent 80%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(5px); animation: beam 9s ease-in-out infinite alternate; }
.scene .beams i:nth-child(1) { left: -4%; --a: -16deg; --b: 8deg; }
.scene .beams i:nth-child(2) { left: 32%; --a: 12deg; --b: -12deg; animation-duration: 12s; background: linear-gradient(180deg, #ffd98a66, transparent 80%); }
.scene .beams i:nth-child(3) { right: -4%; --a: 16deg; --b: -8deg; animation-duration: 14s; }
@keyframes beam { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }

.logo { text-transform: uppercase; letter-spacing: .07em; font-size: 1.05rem; background: linear-gradient(#fff3b0, #ffb100); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #0009); text-shadow: none; }
.logo span { color: transparent; }
.me { background: linear-gradient(#2749c9, #0f1c66); color: #fff; border-color: #9fc1ff; box-shadow: 0 0 0 3px #0a1040, 0 0 16px #3b6dff88; }
.flakes { color: #ffb347; font-family: 'Courier New', monospace; font-weight: 700; text-shadow: 0 0 8px #ff8a00; background: #120a00; border: 2px solid #5a3b00; border-radius: 8px; padding: 0 8px; }
.btn { background-image: linear-gradient(180deg, #ffffff66, #ffffff00 55%); }
.btn.ghost, .btn[disabled], .btn.off { background-image: none; }

.show-title { text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 3px 0 #0009, 0 0 18px #6d9bff; }

.panel { position: relative; color: #fff; border-radius: 22px; padding: 18px; background: linear-gradient(180deg, #2749c9 0%, #14267f 55%, #0c1a5c 100%); box-shadow: 0 0 0 3px #0a1040, 0 0 0 6px #9fc1ff, 0 0 30px 6px #3b6dff66, inset 0 -18px 30px #0006; }
.panel::before { content: ''; position: absolute; inset: 0 0 55% 0; border-radius: 22px 22px 60% 60% / 22px 22px 18px 18px; background: linear-gradient(#ffffff30, transparent); pointer-events: none; }
.panel > * { position: relative; }
.panel .muted { color: #b9cdea; }
.tag { display: inline-block; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .8rem; padding: 3px 12px; border-radius: 999px; background: linear-gradient(#ffb347, #ff7a00); color: #3a1a00; box-shadow: 0 0 0 2px #0a1040; }

.ans { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; font: inherit; font-weight: 700; font-size: 1.15rem; color: #fff; padding: 8px 20px 8px 10px; border: 0; border-radius: 999px; cursor: pointer; overflow: hidden; background: linear-gradient(180deg, #3d63e6, #1b2f99 60%, #122070); box-shadow: 0 0 0 3px #0a1040, 0 0 0 5px #9fc1ff, 0 6px 14px #0008; transition: transform .12s, filter .12s; }
.ans::before { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(#ffffff3a, transparent); pointer-events: none; }
.ans:hover { filter: brightness(1.2); transform: translateX(4px); }
.ans .l { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; transform: rotate(45deg); background: linear-gradient(#ffc36a, #ff7a00); color: #3a1a00; box-shadow: 0 0 0 3px #0a1040; }
.ans .l b { transform: rotate(-45deg); font-size: 1.1rem; }
.ans.sel { background: linear-gradient(#fff0a0, #ffb100); color: #2a1800; box-shadow: 0 0 0 3px #0a1040, 0 0 0 5px #fff, 0 0 26px 6px #ffcf3d; transform: translateX(8px); }
.ans.correct { background: linear-gradient(#6fe3a0, #1f9d55); color: #052b15; }
.ans.wrong { background: linear-gradient(#ff8a98, #d0213a); }

.lifeline { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; color: #fff; font: inherit; font-weight: 700; font-size: .75rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #86a8ff, #1b2f99 60%, #0c1450); box-shadow: 0 0 0 3px #0a1040, 0 0 0 6px #9fc1ff, 0 0 20px #3b6dff88; transition: transform .12s; }
.lifeline:hover { transform: scale(1.07) rotate(-4deg); }
.lifeline .ic { font-size: 1.9rem; line-height: 1; }
.lifeline .cnt { position: absolute; top: -4px; right: -4px; min-width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(#ffc36a, #ff7a00); color: #3a1a00; font-size: .85rem; box-shadow: 0 0 0 2px #0a1040; }
.lifeline.on { background: radial-gradient(circle at 35% 30%, #fff3a8, #ffb100 60%, #b87400); color: #2a1800; box-shadow: 0 0 0 3px #0a1040, 0 0 0 6px #fff, 0 0 26px 8px #ffcf3d; }
.lifeline.used { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.lifeline.used::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; color: #ff5470; text-shadow: 0 0 6px #000; }

.ring { --p: 0; position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: conic-gradient(#ffcf3d calc(var(--p) * 1%), #ffffff22 0); box-shadow: 0 0 0 3px #0a1040, 0 0 22px #3b6dff88; }
.ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #2749c9, #0a1250); }
.ring > * { position: relative; }
.ring .t { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; display: block; }
.ring small { color: #b9cdea; font-size: .7rem; }

.lights { display: inline-flex; gap: 5px; }
.lights i { width: 14px; height: 14px; border-radius: 50%; background: #2a3470; box-shadow: inset 0 0 0 2px #0a1040; }
.lights i.on { background: #35e08a; box-shadow: 0 0 10px 3px #35e08a, inset 0 0 0 2px #0a1040; }

.snd { position: fixed; left: 10px; bottom: 50px; z-index: 55; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold); font-size: 1.2rem; cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.snd:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.snd.inbar { position: static; flex: none; width: 38px; height: 38px; font-size: 1rem; box-shadow: 0 3px 0 var(--ink); }

/* ===== Handy und Desktop ===== */
html { -webkit-text-size-adjust: 100%; }
button, a, .btn { touch-action: manipulation; }
.btn { min-height: 44px; }
.btn.small { min-height: 36px; }
@media (max-width: 600px) {
  .wrap { padding-left: 12px; padding-right: 12px; }
  .panel { padding: 14px; }
  .ans { font-size: 1.02rem; }
  .lifeline { width: 74px; height: 74px; }
  .topbar { gap: 8px; }
  .rules-link { margin-left: 0; }
  .mockbar { font-size: .7rem; padding: 4px 6px; gap: 4px; }
  .mockbar a { padding: 2px 7px; }
  .snd { bottom: 76px; width: 40px; height: 40px; }
  :root { --scene-bottom: 64px; }
}
@supports (padding: max(0px)) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

/* ===== Ein-Bildschirm-Layout: kein Scrollen auf Handy und Desktop =====
   Gilt für Seiten mit <body class="fit">. Regeln und Admin dürfen scrollen. */
body.fit { height: 100vh; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
body.fit .wrap { height: calc(100vh - var(--scene-bottom)); height: calc(100dvh - var(--scene-bottom)); display: flex; flex-direction: column; padding-top: 22px; padding-bottom: 6px; overflow: hidden; }
body.fit .topbar { flex: none; padding: 2px 0 8px; flex-wrap: nowrap; }
body.fit .topbar .logo { white-space: nowrap; }
body.fit .main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.snd { bottom: calc(var(--scene-bottom) + 8px); }
/* Figur, die den freien Platz füllt */
.fitfig { flex: 1 1 0; min-height: 0; display: flex; justify-content: center; }
.fitfig > .avatar { width: auto; height: 100%; max-width: 100%; }
.fitfig > .avatar, .fitfig > svg { display: block; }

/* mehrere Bildschirme in einer Seite */
.screens { flex: 1 1 0; min-height: 0; position: relative; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s; }
.screen.show { visibility: visible; opacity: 1; pointer-events: auto; }
.pager { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 2px; }
.pager .pg { display: flex; gap: 8px; }
.pager .pg i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff44; transition: all .2s; }
.pager .pg i.on { background: var(--gold); box-shadow: 0 0 8px var(--gold); transform: scale(1.25); }
.pager .btn { min-height: 38px; padding: 6px 14px; font-size: .95rem; box-shadow: 0 3px 0 var(--ink); }
.pager .btn[hidden] { display: none; }

@media (max-width: 600px) {
  body.fit .wrap { padding-left: 10px; padding-right: 10px; }
  body.fit .topbar { gap: 6px; padding-bottom: 6px; }
  body.fit .topbar .logo { font-size: .72rem; letter-spacing: .03em; }
  body.fit .rules-link { margin: 0 0 0 auto; padding: 3px 9px; font-size: .85rem; }
  body.fit .me { padding: 3px 10px 3px 3px; gap: 6px; font-size: .9rem; }
  body.fit .me .headshot { width: 34px; height: 34px; }
  body.fit .flakes { padding: 0 5px; font-size: .85rem; }
}
@media (max-width: 420px) { body.fit .rules-link .rl, body.fit .logo .lg { display: none; } body.fit .snd.inbar { width: 34px; height: 34px; } }
@media (max-height: 640px) { body.fit .wrap { padding-top: 20px; } body.fit .main { gap: 6px; } }

/* In der echten App gibt es keine Mockup-Leiste */
:root { --scene-bottom: 0px !important; }

/* Zeitring der Frage und Countdown 3-2-1 */
.countdown-big { position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: #050824dd; }
.countdown-big.show { display: flex; }
.countdown-big span { font-size: min(46vw, 46vh, 18rem); font-weight: 700; color: var(--gold); text-shadow: 0 8px 0 #5a2a00, 0 0 60px #ffb100; animation: cdpop 1s ease-out both; }
@keyframes cdpop { 0% { transform: scale(2.4); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.flakes { white-space: nowrap; }