:root {
  --pink: #ff4fa3;
  --pink-dark: #c42a78;
  --purple: #7b2ff7;
  --gold: #ffc83d;
  --mint: #22c993;
  --mint-dark: #13906a;
  --red: #ff5c5c;
  --red-dark: #c23434;
  --ink: #2a1240;
  --card: #ffffff;
  --bg1: #ff9ad5;
  --bg2: #a77bff;
  --bg3: #ffb36b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  background-size: 300% 300%;
  animation: bgshift 20s ease infinite;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
@keyframes bgshift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* schwebende Emojis im Hintergrund */
#bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#bg span {
  position: absolute; bottom: -80px; font-size: var(--s); opacity: .35;
  animation: floatUp var(--d) linear infinite; animation-delay: var(--delay);
}
@keyframes floatUp {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-125vh) rotate(var(--rot)); }
}
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; width: 100%; height: 100%; }

/* Kopfzeile */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px;
}
.progress { display: flex; gap: 6px; flex-wrap: wrap; }
.progress i {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.4); border: 2px solid #fff; transition: all .3s;
}
.progress i.cur { background: var(--gold); transform: scale(1.25); animation: pulse 1s ease-in-out infinite; }
.progress i.yes { background: var(--mint); }
.progress i.no  { background: var(--red); }
@keyframes pulse { 50% { transform: scale(1.5); } }

.tools { display: flex; gap: 8px; align-items: center; }
.score {
  background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700;
  box-shadow: 0 4px 0 rgba(42,18,64,.15);
}
.score.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.4) rotate(-6deg); } }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.85); font-size: 1.2rem; box-shadow: 0 4px 0 rgba(42,18,64,.15);
}
.icon-btn:active { transform: translateY(2px); }

/* Layout */
main {
  height: 100vh; height: 100dvh; overflow-y: auto;
  display: grid; place-items: center;
  padding: 76px 16px 28px; position: relative; z-index: 2;
}
.screen { display: none; width: 100%; max-width: 920px; }
.screen.active {
  display: flex; flex-direction: column; align-items: center;
  animation: enter .55s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes enter { from { opacity: 0; transform: scale(.8) translateY(30px); } }

.card {
  background: var(--card); border-radius: 30px; padding: clamp(22px, 4vw, 40px);
  box-shadow: 0 10px 0 rgba(42,18,64,.14), 0 24px 60px rgba(42,18,64,.25);
  text-align: center; width: 100%;
}
.title {
  font-family: 'Pacifico', cursive; font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 3.8rem); line-height: 1.25; color: var(--pink);
}
.subtitle { font-size: clamp(1.05rem, 2.5vw, 1.35rem); margin-top: 12px; opacity: .85; }

/* Buttons */
.btn {
  font: inherit; font-weight: 700; font-size: 1.2rem; color: #fff;
  border: 0; border-radius: 999px; padding: 14px 28px; cursor: pointer;
  background: var(--pink); box-shadow: 0 6px 0 var(--pink-dark);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-dark); }
.btn.big { font-size: clamp(1.25rem, 3vw, 1.7rem); padding: 18px 38px; margin-top: 26px; }
.btn.ghost {
  background: transparent; color: var(--pink); box-shadow: none;
  border: 3px dashed var(--pink); margin-top: 14px; font-size: 1rem;
}
.btn.yes { background: var(--mint); box-shadow: 0 6px 0 var(--mint-dark); }
.btn.yes:active { box-shadow: 0 2px 0 var(--mint-dark); }
.btn.no  { background: var(--red); box-shadow: 0 6px 0 var(--red-dark); }
.btn.no:active { box-shadow: 0 2px 0 var(--red-dark); }
.btn.wiggle { animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(-4deg) scale(1.06); } 80% { transform: rotate(4deg) scale(1.06); } 90% { transform: rotate(-2deg); } }

/* Start */
.start-card { max-width: 640px; }
.ring-hero { font-size: clamp(4rem, 12vw, 6.5rem); animation: spinBounce 2.4s ease-in-out infinite; display: inline-block; }
@keyframes spinBounce {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(8deg) scale(1.08); }
}
.rules { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.rule {
  background: #fff1f8; border-radius: 18px; padding: 12px 16px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px;
}
.rule span { font-size: 1.8rem; }

/* Frage */
.q-badge {
  background: var(--gold); color: var(--ink); font-weight: 700; font-size: 1.2rem;
  padding: 8px 22px; border-radius: 999px; margin-bottom: -18px; z-index: 1;
  box-shadow: 0 5px 0 #d49b10; transform: rotate(-3deg);
}
.q-card { padding-top: 40px; animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg) translateY(-4px); } }
.q-card h2 { font-size: clamp(1.6rem, 4.6vw, 2.8rem); line-height: 1.25; font-weight: 700; }
.q-card h2 .w {
  display: inline-block; opacity: 0; transform: translateY(20px) scale(.6);
  animation: wordIn .45s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

.thinker { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 60px); margin-top: 26px; }
.timer { position: relative; width: 110px; height: 110px; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 12; }
.timer .track { stroke: rgba(255,255,255,.45); }
.timer .bar { stroke: #fff; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.timer.hurry .bar { stroke: var(--gold); }
.timer.hurry { animation: shake .4s infinite; }
.timer.over .bar { stroke: var(--red); }
.timer span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 700; color: #fff; text-shadow: 0 3px 0 rgba(42,18,64,.25);
}
@keyframes shake { 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }

.think-wrap { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.think-emoji { font-size: 5rem; animation: bob 1.4s ease-in-out infinite; }
.think-emoji.pop { animation: popIn .4s cubic-bezier(.2, 1.8, .4, 1), bob 1.4s ease-in-out .4s infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes popIn { from { transform: scale(.2) rotate(-40deg); } }
.bubble { position: absolute; font-size: 1.6rem; opacity: 0; animation: bubble 3s ease-in-out infinite; }
.bubble.b1 { top: -6px; left: 8px; }
.bubble.b2 { top: -18px; left: 50px; animation-delay: 1s; }
.bubble.b3 { top: -4px; right: 2px; animation-delay: 2s; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(10px) scale(.5); } 30%,60% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.1); } }

.quip {
  margin-top: 18px; font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 600; color: #fff;
  text-shadow: 0 2px 0 rgba(42,18,64,.25); min-height: 2em; text-align: center;
}
.quip.in { animation: quipIn .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes quipIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }

/* Trommelwirbel */
.drum { text-align: center; color: #fff; }
.drum-emoji { font-size: clamp(6rem, 18vw, 10rem); animation: drum .12s infinite alternate; display: inline-block; }
@keyframes drum { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.08); } }
.drum-title { font-family: 'Pacifico', cursive; font-weight: 400; font-size: clamp(2.2rem, 7vw, 4rem); text-shadow: 0 4px 0 rgba(42,18,64,.25); }
.drum-sub { font-size: 1.4rem; margin-top: 8px; font-weight: 600; }

/* Video */
.q-mini {
  background: rgba(255,255,255,.92); border-radius: 18px; padding: 10px 20px;
  font-weight: 700; font-size: clamp(1rem, 2.5vw, 1.3rem); text-align: center;
  margin-bottom: 14px; box-shadow: 0 5px 0 rgba(42,18,64,.12);
}
.video-frame {
  position: relative; width: 100%; border-radius: 26px; overflow: hidden; background: #000;
  border: 6px solid #fff; box-shadow: 0 10px 0 rgba(42,18,64,.14), 0 24px 60px rgba(42,18,64,.3);
  display: grid; place-items: center; min-height: 260px;
}
.video-frame video { width: 100%; max-height: 58vh; max-height: 58dvh; display: block; background: #000; }
.video-missing { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; background: var(--ink); min-height: 240px; }
.video-missing[hidden] { display: none; }
.video-missing div { font-size: 4rem; }
.video-missing small { opacity: .6; margin-top: 6px; display: block; }
.judge-label { margin-top: 20px; color: #fff; font-size: 1.4rem; font-weight: 700; text-shadow: 0 2px 0 rgba(42,18,64,.25); }
.judge { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

/* Ende */
.end-card { max-width: 640px; }
.trophy { font-size: clamp(5rem, 14vw, 7rem); animation: spinBounce 2s ease-in-out infinite; display: inline-block; }
.big-score { font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; color: var(--purple); line-height: 1; margin-top: 10px; }
.big-score small { font-size: .45em; opacity: .6; }

@media (max-width: 560px) {
  .thinker { gap: 16px; }
  .timer { width: 84px; height: 84px; }
  .timer span { font-size: 1.7rem; }
  .think-emoji { font-size: 3.8rem; }
  .judge .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}