:root{
  --bg:#0a1430; --bg2:#12204a; --panel:#17295c; --line:#2a3f7a;
  --ink:#ffffff; --muted:#a9b6dc;
  --red:#e3263a; --yellow:#ffc928; --signal:#ff3b30;
  --a0:#e21b3c; --a1:#1368ce; --a2:#d89e00; --a3:#26890c;
  --ok:#2fbf55; --bad:#e3263a;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, #1d3a8a55, transparent 60%),
    radial-gradient(900px 500px at 110% 110%, #e3263a33, transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 46px, #ffffff05 46px 92px);
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
.hidden{display:none!important}

/* Warnmarkierung (Rettungswagen-Streifen) */
.stripe{height:10px;background:repeating-linear-gradient(135deg,var(--red) 0 22px,var(--yellow) 22px 44px)}

.logo{font-weight:900;letter-spacing:-.02em;line-height:.95}
.logo .super{color:var(--yellow);text-shadow:0 4px 0 #a36b00, 0 8px 24px #ffc92855}
.logo .pal{color:#fff;text-shadow:0 4px 0 var(--red)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--yellow);color:#1a1300;font-weight:900;
  padding:.8em 1.4em;border-radius:14px;box-shadow:0 6px 0 #a36b00;
  transition:transform .08s, box-shadow .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a36b00}
.btn.ghost{background:#ffffff14;color:#fff;box-shadow:0 6px 0 #00000055}
.btn.red{background:var(--red);color:#fff;box-shadow:0 6px 0 #8a0f1d}
.btn:disabled{opacity:.45;cursor:default}

/* Antwortfarben */
.c0{background:var(--a0)} .c1{background:var(--a1)} .c2{background:var(--a2)} .c3{background:var(--a3)}
.shape{display:inline-block;width:1.1em;height:1.1em;flex:none;background:#fff}
.s0{clip-path:polygon(50% 5%,95% 92%,5% 92%)}
.s1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.s2{border-radius:50%}
.s3{border-radius:3px;transform:scale(.88)}

.chip{display:inline-flex;align-items:center;gap:.4em;background:#ffffff14;border:1px solid #ffffff22;padding:.35em .8em;border-radius:999px;font-weight:700}

@keyframes pop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fly{0%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(6deg)}100%{transform:translateY(0) rotate(-8deg)}}
.pop{animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
.rise{animation:rise .5s ease-out both}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}