:root{--bg:#0b1f3a;--bg2:#12305a;--card:#173a6b;--ink:#fff;--mute:#a9bcd8;--acc:#f5a623;--ok:#2ecc71;--bad:#e74c3c;
--c0:#e74c3c;--c1:#3498db;--c2:#f1c40f;--c3:#2ecc71}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(1200px 700px at 50% -10%,var(--bg2),var(--bg));color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{min-height:100vh}
h1,h2,h3,p{margin:0}
.brand{font-weight:800;letter-spacing:.08em;color:var(--acc);text-transform:uppercase;font-size:.9rem}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:.9em 1.4em;font-weight:700;color:#1b1b1b;background:var(--acc)}
button:disabled{opacity:.4;cursor:default}
button.ghost{background:transparent;color:var(--mute);border:1px solid #ffffff33}
input{font:inherit;width:100%;padding:1em;border-radius:14px;border:2px solid #ffffff33;background:#ffffff14;color:#fff;font-size:1.1rem}
input:focus{outline:none;border-color:var(--acc)}
.bar{height:10px;border-radius:99px;background:#ffffff22;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc);width:100%}
.board{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.board li{display:flex;justify-content:space-between;gap:1rem;background:#ffffff14;border-radius:12px;padding:.7em 1em;font-weight:600}
.board li b{color:var(--acc)}
.shape{display:inline-block;width:1.4em;text-align:center}
.opt0{background:var(--c0)}.opt1{background:var(--c1)}.opt2{background:var(--c2);color:#1b1b1b}.opt3{background:var(--c3);color:#1b1b1b}

/* Moderator */
.host{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;padding:2vw 4vw;gap:2vh}
.host header{display:flex;justify-content:space-between;align-items:center}
.host main{display:flex;flex-direction:column;justify-content:center;gap:3vh}
.host .title{font-size:clamp(2rem,4.4vw,4rem);font-weight:800;line-height:1.1}
.lobby{display:grid;grid-template-columns:auto 1fr;gap:5vw;align-items:center}
.qr{background:#fff;padding:18px;border-radius:24px;line-height:0}
.qr svg,.qr img{width:min(32vw,420px);height:auto}
.url{font-size:1.2rem;color:var(--mute);margin-top:.8rem;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.chips span{background:#ffffff1a;padding:.5em 1em;border-radius:99px;font-weight:600;animation:pop .3s}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.qtext{font-size:clamp(1.6rem,3.4vw,3rem);font-weight:800;line-height:1.2}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:1.2vw}
.opts div{border-radius:18px;padding:1.2em 1.4em;font-size:clamp(1.1rem,2vw,1.9rem);font-weight:700;position:relative}
.opts div.dim{opacity:.25}
.opts div small{position:absolute;right:1em;top:50%;transform:translateY(-50%);font-size:1.4em}
.meta{display:flex;justify-content:space-between;color:var(--mute);font-size:1.2rem}
.cols{display:grid;grid-template-columns:1.3fr 1fr;gap:3vw}
.explain{color:var(--mute);font-size:1.3rem;margin-top:1rem}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:2vw;height:38vh}
.podium div{width:16vw;border-radius:16px 16px 0 0;text-align:center;padding-top:1rem;font-weight:800;background:var(--card)}
.podium .p1{height:100%;background:var(--acc);color:#1b1b1b}.podium .p2{height:70%}.podium .p3{height:50%}
.podium small{display:block;font-weight:600;opacity:.8}
.host footer{display:flex;gap:1rem;justify-content:flex-end;align-items:center}

/* Teilnehmer */
.play{max-width:520px;margin:0 auto;min-height:100vh;padding:20px 16px;display:flex;flex-direction:column;gap:16px}
.play .center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;text-align:center}
.play .big{font-size:1.8rem;font-weight:800}
.play .sub{color:var(--mute)}
.pbtns{display:grid;gap:12px;flex:1}
.pbtns button{font-size:1.25rem;text-align:left;padding:1em 1.1em;border-radius:18px;color:#fff;min-height:74px;display:flex;align-items:center;gap:.6em}
.pbtns button.opt2,.pbtns button.opt3{color:#1b1b1b}
.pbtns button:active{transform:scale(.98)}
.pq{font-weight:700;font-size:1.1rem}
.res{font-size:2.4rem;font-weight:900}
.res.ok{color:var(--ok)}.res.bad{color:var(--bad)}
.pts{font-size:1.6rem;font-weight:800;color:var(--acc)}
.err{color:#ff8f8f;min-height:1.4em}
.stat{display:flex;justify-content:space-around;background:#ffffff14;border-radius:16px;padding:14px}
.stat div{display:grid;gap:2px}.stat b{font-size:1.6rem}.stat span{color:var(--mute);font-size:.85rem}