:root{
  --yellow:#FFD83A;
  --yellow-deep:#F2B705;
  --yellow-soft:#FFE680;
  --ink:#16130d;
  --ink-2:#241f15;
  --white:#fff;
  --green:#34d27b;
  --red:#ff5a5a;
  --muted:#9a9486;
  --radius:26px;
  --radius-sm:16px;
  --shadow:0 18px 50px rgba(0,0,0,.42);
  --shadow-sm:0 8px 22px rgba(0,0,0,.28);
  --ring:0 0 0 4px rgba(255,216,58,.30);
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);
  background:#14110b;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:24px 14px 80px;overflow-x:hidden;position:relative;
}

/* ---------- Animated background ---------- */
#bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1200px 800px at 50% -10%, #4a3e26 0%, #211c12 55%, #14110b 100%);}
.bg-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen}
.bg-glow.g1{width:520px;height:520px;background:radial-gradient(circle,#FFD83A,transparent 70%);top:-160px;left:50%;transform:translateX(-50%);animation:drift1 16s var(--ease) infinite alternate}
.bg-glow.g2{width:420px;height:420px;background:radial-gradient(circle,#ff9f43,transparent 70%);bottom:-120px;left:-80px;animation:drift2 20s var(--ease) infinite alternate}
.bg-glow.g3{width:380px;height:380px;background:radial-gradient(circle,#ffe680,transparent 70%);bottom:40px;right:-100px;animation:drift3 18s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(-40%,40px) scale(1.15)}}
@keyframes drift2{to{transform:translate(60px,-50px) scale(1.2)}}
@keyframes drift3{to{transform:translate(-50px,30px) scale(1.1)}}
.bg-grain{position:absolute;inset:0;opacity:.05;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:4px 4px}
#bgParticles{position:absolute;inset:0}
.particle{position:absolute;bottom:-40px;font-size:22px;opacity:0;will-change:transform,opacity;animation:rise linear infinite;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translateY(-105vh) rotate(220deg);opacity:0}
}

button{font-family:inherit;cursor:pointer;border:none}
input{font-family:inherit}

/* ---------- Brand ---------- */
.brand{width:248px;max-width:64vw;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));margin:8px 0 6px;animation:floaty 5s ease-in-out infinite}
.brand-sm{width:132px;animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-9px) rotate(-1deg)}}
.tagline{color:#fff;opacity:.92;font-weight:600;font-size:15.5px;margin-bottom:24px;text-align:center;max-width:430px;text-shadow:0 2px 10px rgba(0,0,0,.4);line-height:1.45}

/* ---------- Cards / screens ---------- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 24px;width:100%;max-width:460px}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.93));backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7)}
.screen{width:100%;display:flex;flex-direction:column;align-items:center}
.screen.in{animation:screenIn .5s var(--ease) both}
.screen.out{animation:screenOut .28s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:translateY(-16px) scale(.98)}}
.stagger>*{opacity:0;animation:fadeUp .5s var(--ease) forwards}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}
.stagger>*:nth-child(4){animation-delay:.22s}
.stagger>*:nth-child(5){animation-delay:.28s}
.stagger>*:nth-child(6){animation-delay:.34s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Inputs / buttons ---------- */
label{font-weight:700;font-size:13.5px;display:block;margin:16px 0 7px;color:#555;letter-spacing:.2px}
.field{width:100%;padding:15px 16px;font-size:17px;font-weight:700;border:2.5px solid #ececec;border-radius:var(--radius-sm);outline:none;background:#fafafa;transition:border-color .18s,box-shadow .18s,background .18s}
.field:focus{border-color:var(--yellow);background:#fff;box-shadow:var(--ring)}
.field.mini{width:88px;text-align:center;padding:10px}
.btn{position:relative;overflow:hidden;width:100%;padding:16px;font-size:18px;font-weight:800;border-radius:var(--radius-sm);background:linear-gradient(180deg,#FFE269,var(--yellow));color:var(--ink);box-shadow:0 6px 0 var(--yellow-deep),0 12px 24px rgba(242,183,5,.32);transition:transform .1s var(--spring),box-shadow .1s,filter .12s;margin-top:12px;letter-spacing:.2px}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--yellow-deep)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}80%{left:130%}100%{left:130%}}
.btn.dark{background:linear-gradient(180deg,#2c2519,var(--ink));color:#fff;box-shadow:0 6px 0 #000,0 12px 24px rgba(0,0,0,.4)}
.btn.dark:active{box-shadow:0 1px 0 #000}
.btn.ghost{background:#f1f1f1;color:#555;box-shadow:0 5px 0 #dcdcdc}
.btn.ghost::after{display:none}
.btn.ghost:active{box-shadow:0 1px 0 #dcdcdc}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);pointer-events:none;animation:ripple .6s ease-out}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}
.row{display:flex;gap:12px;width:100%;align-items:stretch}
.row .btn{margin-top:0}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;margin:22px 0 14px}
.divider::before,.divider::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,#e9e9e9,transparent)}

/* ---------- Avatars ---------- */
.avatars{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.avatars button{font-size:25px;width:46px;height:46px;border-radius:14px;background:#f4f4f4;transition:transform .18s var(--spring),background .15s,box-shadow .15s}
.avatars button:hover{background:#ececec;transform:translateY(-2px)}
.avatars button.sel{background:linear-gradient(180deg,#FFE269,var(--yellow));transform:scale(1.18) rotate(-4deg);box-shadow:0 5px 0 var(--yellow-deep)}

/* ---------- Lobby ---------- */
.code-box{text-align:center;margin:2px 0 18px}
.code-box .lbl{font-size:11.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.code{font-size:48px;font-weight:800;letter-spacing:8px;color:var(--ink);background:linear-gradient(180deg,#FFE269,var(--yellow));border-radius:18px;padding:8px 22px 8px 30px;display:inline-block;margin-top:6px;cursor:pointer;box-shadow:0 6px 0 var(--yellow-deep);transition:transform .12s var(--spring);position:relative}
.code:hover{transform:translateY(-2px)}
.code:active{transform:translateY(3px)}
.code::after{content:"📋";font-size:18px;position:absolute;right:8px;top:8px;opacity:.5}
.players{display:flex;flex-direction:column;gap:9px;width:100%;margin:6px 0 16px}
.player{display:flex;align-items:center;gap:11px;background:#f7f7f5;border-radius:15px;padding:11px 14px;font-weight:700;animation:playerIn .4s var(--spring) both}
@keyframes playerIn{from{opacity:0;transform:translateX(-16px) scale(.96)}to{opacity:1;transform:none}}
.player .av{font-size:25px;transition:transform .2s}
.player:hover .av{transform:scale(1.15) rotate(-6deg)}
.player .pn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .crown{font-size:17px;animation:crownWobble 2.5s ease-in-out infinite}
@keyframes crownWobble{50%{transform:rotate(12deg)}}
.player .sc{font-weight:800;color:var(--yellow-deep);font-size:19px;font-variant-numeric:tabular-nums}
.player.off{opacity:.4}
.player.lead{background:linear-gradient(90deg,#FFF7DB,#fff);box-shadow:inset 0 0 0 2px var(--yellow)}
.settings{width:100%;background:#fafafa;border-radius:var(--radius-sm);padding:8px 16px;margin-bottom:14px;border:1px solid #f0f0f0}
.set-row{display:flex;align-items:center;justify-content:space-between;margin:11px 0;font-weight:700;color:#444}
.hint{color:var(--muted);font-size:14px;text-align:center;margin-top:12px;font-weight:600}
.pulse-soft{animation:pulseSoft 1.8s ease-in-out infinite}
@keyframes pulseSoft{50%{opacity:.45}}

/* ---------- Top bar + circular timer ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:560px;margin-bottom:14px;gap:12px}
.bar .round{color:#fff;font-weight:800;font-size:16px;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.timer-ring{position:relative;width:58px;height:58px;flex:0 0 58px}
.timer-ring svg{width:58px;height:58px;transform:rotate(-90deg)}
.timer-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-width:5}
.timer-ring .ring-fg{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;stroke-dasharray:125.6;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear,stroke .3s}
.timer-ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.timer-ring.warn .ring-fg{stroke:var(--red)}
.timer-ring.warn .num{color:var(--red);animation:pulse .55s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}

/* ---------- Meme ---------- */
.meme{position:relative;width:100%;max-width:460px;aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:#0c0c0c;margin-bottom:14px;animation:memePop .5s var(--spring) both}
@keyframes memePop{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:none}}
.meme::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.18));z-index:1;pointer-events:none}
.meme img{width:100%;height:100%;display:block;object-fit:cover;user-select:none}
.meme .cap{position:absolute;left:0;right:0;text-align:center;padding:0 12px;font-family:'Anton',Impact,sans-serif;color:#fff;-webkit-text-stroke:2.5px #000;paint-order:stroke;text-transform:uppercase;line-height:1.04;word-break:break-word;font-size:clamp(24px,7.5vw,42px);letter-spacing:1px;z-index:2;text-shadow:0 3px 8px rgba(0,0,0,.5)}
.meme .cap.top{top:14px}
.meme .cap.bottom{bottom:16px}

/* ---------- Template chooser ---------- */
.choice-label{color:#fff;font-weight:700;font-size:13px;opacity:.85;margin-bottom:8px;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.choice-row{display:flex;gap:10px;width:100%;max-width:460px;margin-bottom:14px;justify-content:center}
.choice{position:relative;flex:1;max-width:120px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#222;padding:0;border:3px solid transparent;opacity:.55;transition:transform .2s var(--spring),opacity .2s,border-color .2s,box-shadow .2s;animation:fadeUp .4s var(--ease) both}
.choice img{width:100%;height:100%;object-fit:cover}
.choice:hover{opacity:.85;transform:translateY(-3px)}
.choice.sel{opacity:1;border-color:var(--yellow);transform:scale(1.06);box-shadow:0 8px 20px rgba(0,0,0,.4),var(--ring)}
.choice.sel::after{content:"✓";position:absolute;top:5px;right:6px;background:var(--yellow);color:var(--ink);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.4);animation:popIn .25s var(--spring)}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.choice:disabled{cursor:default}

.cap-inputs{width:100%;max-width:460px;display:flex;flex-direction:column;gap:11px}
.cap-inputs .field{text-align:center;text-transform:uppercase;font-family:'Anton',sans-serif;letter-spacing:1px}
.waiting{color:#fff;font-weight:700;margin-top:16px;text-align:center;min-height:26px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.progress-pill{background:rgba(255,255,255,.96);border-radius:22px;padding:8px 18px;font-weight:800;color:var(--ink);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow-sm);animation:popIn .3s var(--spring)}
.progress-pill.big{font-size:16px;padding:13px 20px;margin-top:8px}

/* ---------- Voting ---------- */
.vote-by{color:#fff;font-weight:700;margin-bottom:10px;text-shadow:0 2px 6px rgba(0,0,0,.4);font-size:16px}
.vote-by b{color:var(--yellow)}
.react-hint{color:#fff;font-weight:700;margin:8px 0 10px;opacity:.92;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.react-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:11px;width:100%;max-width:480px}
.react{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#fff;padding:0;box-shadow:0 5px 0 rgba(0,0,0,.28),0 8px 18px rgba(0,0,0,.25);transition:transform .15s var(--spring);animation:reactIn .45s var(--spring) both}
@keyframes reactIn{from{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:none}}
.react img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.react .re{position:absolute;bottom:4px;right:5px;font-size:19px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.react:hover{transform:translateY(-5px) scale(1.04)}
.react:hover img{transform:scale(1.08)}
.react:active{transform:translateY(2px) scale(.97)}
.react.picked{outline:4px solid var(--yellow);transform:scale(1.1);box-shadow:0 8px 22px rgba(242,183,5,.55);z-index:2}
.react:disabled{opacity:.45;filter:saturate(.5)}
.react.picked{opacity:1;filter:none}

/* flying reactions + bursts */
.fly-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.fly{position:absolute;bottom:0;width:78px;height:78px;animation:flyUp 2.3s var(--ease) forwards;transform:rotate(var(--rot,0))}
.fly img{width:100%;height:100%;object-fit:contain;border-radius:12px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
@keyframes flyUp{
  0%{bottom:-12%;opacity:0;transform:scale(.4) rotate(var(--rot))}
  18%{opacity:1;transform:scale(1.15) rotate(var(--rot))}
  35%{transform:scale(.95) rotate(calc(var(--rot) * -1))}
  100%{bottom:100%;opacity:0;transform:scale(.85) rotate(var(--rot))}
}
.burst{position:fixed;pointer-events:none;font-size:26px;z-index:70;animation:burst .8s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(.4)}}

/* ---------- Results ---------- */
.res-list{display:flex;flex-direction:column;gap:13px;width:100%;max-width:540px}
.res-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;gap:13px;padding:13px;align-items:center;animation:slideIn .5s var(--ease) both}
@keyframes slideIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
.res-card.win{border:none;background:linear-gradient(120deg,#FFF6D6,#fff);box-shadow:0 12px 34px rgba(242,183,5,.4);position:relative;overflow:hidden}
.res-card.win::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,216,58,.4),transparent);transform:translateX(-100%);animation:winShine 2.2s ease-in-out infinite}
@keyframes winShine{0%,55%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.res-thumb{position:relative;width:104px;height:104px;flex:0 0 104px;border-radius:13px;overflow:hidden;background:#111;z-index:1}
.res-thumb img{width:100%;height:100%;object-fit:cover}
.res-thumb .cap{position:absolute;left:0;right:0;text-align:center;font-family:'Anton',sans-serif;color:#fff;-webkit-text-stroke:1px #000;font-size:11px;text-transform:uppercase;padding:0 2px;line-height:1}
.res-thumb .cap.top{top:3px}.res-thumb .cap.bottom{bottom:3px}
.res-info{flex:1;min-width:0;z-index:1}
.res-info .nm{font-weight:800;display:flex;align-items:center;gap:6px;font-size:16px}
.res-info .vs{color:#777;font-weight:700;font-size:18px;margin-top:4px;word-break:break-word;letter-spacing:1px}
.res-pts{font-weight:800;font-size:24px;color:var(--green);font-variant-numeric:tabular-nums;z-index:1}
.res-pts.neg{color:var(--red)}
.board{margin-top:16px;display:flex;flex-direction:column;gap:9px;width:100%;max-width:460px}

/* ---------- Podium / gameover ---------- */
.win-title{color:#fff;margin:10px 0 4px;text-align:center;text-shadow:0 4px 14px rgba(0,0,0,.5);font-size:24px;font-weight:800;animation:popIn .6s var(--spring) both}
.win-sub{color:var(--yellow);font-weight:800;margin-bottom:6px;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:11px;margin:18px 0;width:100%;max-width:460px}
.pod{background:#fff;border-radius:16px 16px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:12px 6px;box-shadow:var(--shadow);flex:1;transform-origin:bottom;animation:rise .6s var(--spring) both}
.pod.p1{animation-delay:.5s}.pod.p2{animation-delay:.15s}.pod.p3{animation-delay:.3s}
@keyframes rise{from{transform:scaleY(.05);opacity:0}60%{opacity:1}to{transform:scaleY(1);opacity:1}}
.pod>*{animation:fadeUp .4s ease .6s both}
.pod .av{font-size:34px;animation:avBounce .5s var(--spring) .7s both}
@keyframes avBounce{from{transform:scale(0)}to{transform:scale(1)}}
.pod .nm{font-weight:800;font-size:14px;margin:5px 0;text-align:center;word-break:break-word}
.pod .pts{font-weight:800;color:var(--yellow-deep);font-variant-numeric:tabular-nums}
.pod.p1{height:188px;background:linear-gradient(#FFF1C2,#fff)}
.pod.p2{height:144px}.pod.p3{height:122px}
.pod .medal{font-size:26px}
.pod.p1 .medal{animation:medalSpin 1s var(--spring) .9s both,floaty 3s ease-in-out 2s infinite}
@keyframes medalSpin{from{transform:rotateY(540deg) scale(0)}to{transform:rotateY(0) scale(1)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:40}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:13px 22px;border-radius:15px;font-weight:700;box-shadow:var(--shadow);z-index:80;animation:toastIn .35s var(--spring)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
.footer{color:#fff;opacity:.5;font-size:12px;margin-top:32px;text-align:center}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important}
}

/* Punkte-Badge auf Reaktions-Buttons */
.react .rpts{position:absolute;top:3px;left:4px;font-size:11px;font-weight:800;padding:1px 6px;border-radius:9px;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.45);letter-spacing:.2px}
.react .rpts.pos{background:var(--green)}
.react .rpts.neg{background:var(--red)}