/* Hauptbildschirm – lesbar aus 3 m Entfernung */
body.host{overflow:hidden;font-size:clamp(15px,1.15vw,22px)}
#app{position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:auto 1fr auto;padding:1.2vw 2vw}
.top{display:flex;align-items:center;gap:1em;min-height:3.2em}
.brand{font-weight:900;letter-spacing:.02em;color:var(--sand);font-size:1.25em;white-space:nowrap}
.top-mid{flex:1;display:flex;gap:.6em;justify-content:center;flex-wrap:wrap}
.stage-pill.s1{background:#5b3fa8}.stage-pill.s2{background:#7a3fa8}.stage-pill.s3{background:#a83f86}.stage-pill.s4{background:var(--accent)}
.top-right{width:5em;display:flex;justify-content:flex-end}
.timer{position:relative;width:4.2em;height:4.2em}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.tr-bg{fill:none;stroke:var(--card2);stroke-width:4}.tr-fg{fill:none;stroke:var(--sand);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.timer span{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:1.4em}
.timer.urgent .tr-fg{stroke:var(--bad)}.timer.urgent span{color:var(--bad)}
main{min-height:0;display:flex;flex-direction:column;justify-content:center}
.center{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em}
.big-in{animation:bigin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes bigin{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.lead{color:var(--muted);font-size:1.25em;margin:.3em 0}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2em 1.4em}
h2{margin:0 0 .6em;font-size:1.3em}

/* Lobby */
.lobby{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:2vw;align-items:stretch;height:100%;padding-top:.5em}
.join{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.title{font-size:2.8em;margin:0;line-height:1;background:linear-gradient(180deg,#ffe3a3,#f4a948);-webkit-background-clip:text;background-clip:text;color:transparent}
.qr{width:min(24vw,38vh);aspect-ratio:1;background:#fff;border-radius:16px;padding:10px;margin:.8em 0}
.url{font-size:1.3em;font-weight:800;color:var(--accent2);word-break:break-all}
.right{display:flex;flex-direction:column;gap:1vw;min-height:0}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.pgrid:has(.pcard:nth-child(5):not(.empty)){grid-template-columns:repeat(5,1fr)}
.pgrid:has(.pcard:nth-child(6):not(.empty)){grid-template-columns:repeat(4,1fr)}
.pcard{position:relative;background:var(--card);border-radius:14px;padding:.6em;text-align:center;animation:bigin .4s}
.pcard.off{opacity:.5}
.pav{width:52%;margin:0 auto}
.pav svg{width:100%;height:auto;display:block}
.pav.ghost{aspect-ratio:1;border:3px dashed var(--line);border-radius:50%;display:grid;place-items:center;font-size:2em;color:var(--line)}
.pn{font-weight:800;margin-top:.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstate{font-size:.8em;color:var(--muted)}
.pcard.empty{background:transparent;border:2px dashed var(--line)}
.kick{position:absolute;top:4px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.35);opacity:.5}
.kick:hover{opacity:1;background:var(--bad)}
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em}
.tchk{display:flex;align-items:center;gap:.35em;background:var(--card);border-radius:10px;padding:.35em .5em;font-size:.85em;cursor:pointer}
.tchk input{width:1.1em;height:1.1em;accent-color:var(--accent)}
.row{display:flex;align-items:center;gap:1em;margin-top:.8em;flex-wrap:wrap}
.row select{margin-left:.4em;padding:.35em .5em;border-radius:8px;background:#fff;color:#1b1035;border:0;max-width:22em}
.btn.small{min-height:40px;padding:.4em .9em;font-size:.9em}
.btn.start{font-size:1.5em;min-height:2.3em;flex:none;width:100%;margin-top:.8em}
.hint{text-align:center;margin:.5em 0 0}

/* Status-Leiste */
.status{display:flex;justify-content:center;gap:1.1vw;min-height:5.5em;padding-top:.6em}
.st{width:6.2em;text-align:center;position:relative;transition:transform .2s}
.st-av{position:relative;width:3.6em;margin:0 auto}
.st-av svg{width:100%;display:block}
.st.done .st-av svg{filter:drop-shadow(0 0 8px var(--ok))}
.chk{position:absolute;right:-.3em;top:-.2em;background:var(--ok);color:#06331b;border-radius:50%;width:1.5em;height:1.5em;display:grid;place-items:center;font-weight:900;animation:bigin .3s}
.chk.art{background:var(--sand)}
.st-n{font-weight:800;font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-s{font-size:.8em;color:var(--sand);font-weight:800}
.st.off{opacity:.45}.st-off{font-size:.7em;color:var(--bad)}

/* Challenge */
.ch-head{display:flex;align-items:center;justify-content:center;gap:.7em;margin-bottom:.6em}
.ch-type{font-weight:900;font-size:1.2em;color:var(--sand)}
.ch-sub{color:var(--muted);font-size:1.1em}
.pill.fin{background:var(--accent)}
.type-icon{font-size:6em;line-height:1}
.type-name,.stage-name{font-size:4em;margin:.1em 0}
.stage-no{font-weight:900;letter-spacing:.3em;color:var(--sand);font-size:1.6em}
.play,.reveal{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:0}
.q{font-size:2.6em;text-align:center;margin:.2em auto .5em;max-width:28em;line-height:1.15}
.q.small{font-size:1.7em;margin-bottom:.4em}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:1em;max-width:60em;margin:0 auto;width:100%}
.opt{display:flex;align-items:center;gap:.7em;padding:.9em 1.1em;border-radius:16px;font-size:1.6em;font-weight:800;background:var(--card2)}
.opt b{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:10px;background:rgba(0,0,0,.25);flex:none}
.opt.o0{background:#e2475f}.opt.o1{background:#2f8fdc}.opt.o2{background:#e3a01b}.opt.o3{background:#2fb06a}
.opt.wrong{opacity:.35}.opt.right{outline:5px solid #fff;transform:scale(1.03)}
.opt .who{margin-left:auto;display:flex}.opt .who svg{width:1.6em;height:auto;margin-left:-.3em}
.scr{display:flex;justify-content:center;gap:.4em;flex-wrap:wrap;margin:.6em 0}
.scr span{display:grid;place-items:center;width:1.7em;height:2em;background:var(--sand);color:#3a2408;border-radius:12px;font-size:3em;font-weight:900;box-shadow:0 6px 0 var(--sand3)}
.sortlist{display:flex;flex-direction:column;gap:.6em;max-width:36em;margin:0 auto;width:100%}
.si{background:var(--card2);border-radius:14px;padding:.7em 1em;font-size:1.5em;font-weight:800}
.sortlist.right .si{background:rgba(61,220,132,.2)}
.react{width:min(60vw,60vh);aspect-ratio:2/1;margin:0 auto;border-radius:24px;background:#c23b4f;display:grid;place-items:center;transition:background .05s}
.react.go{background:var(--ok)}
.react-txt{font-size:4em;font-weight:900}
.vote-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:1.5em}
.vg{display:flex;flex-direction:column;align-items:center;width:7em;font-weight:800}
.vg svg{width:5em}.vg.top{transform:scale(1.15)}.vg.top span{color:var(--sand)}
.gap{display:inline-block;padding:0 .3em;border-bottom:4px solid var(--sand);color:var(--sand)}
.bopts{display:grid;grid-template-columns:1fr 1fr;gap:.8em;max-width:60em;margin:0 auto;width:100%}
.bo{background:var(--card2);border-radius:14px;padding:.8em 1em;font-size:1.4em;font-weight:800}
.bo.truth{background:rgba(61,220,132,.3);outline:3px solid var(--ok)}
.bo-meta{font-size:.65em;color:var(--muted);font-weight:600;margin-top:.3em}
.emo{font-size:9em;text-align:center;line-height:1.1;margin:.1em 0}
.emo.sm{font-size:5em}
.sol{font-size:3.6em;font-weight:900;color:var(--sand);text-align:center;margin:.2em 0}
.draw-show{display:flex;gap:2vw;align-items:center;justify-content:center;min-height:0;flex:1}
#drawCv{height:min(62vh,52vw);width:auto;aspect-ratio:1;background:#fff;border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.draw-side{display:flex;flex-direction:column;gap:.6em;min-width:16em}
.artist{display:flex;align-items:center;gap:.6em;font-weight:800}.artist svg{width:3em}
.gopts{display:grid;gap:.5em}.go{background:var(--card2);border-radius:12px;padding:.6em .9em;font-size:1.4em;font-weight:800}
.gallery{display:flex;flex-wrap:wrap;gap:1em;justify-content:center}
.gallery figure{margin:0;text-align:center}.gallery canvas{width:13em;height:13em;background:#fff;border-radius:12px}
.gallery figcaption{font-size:.9em;margin-top:.3em}

/* Auflösung */
.rev-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2vw;align-items:center;min-height:0}
.rev-list{display:flex;flex-direction:column;gap:.45em}
.rrow{display:grid;grid-template-columns:2.6em 1fr 1.4fr 3em;align-items:center;gap:.6em;background:var(--card);border-radius:12px;padding:.35em .7em;animation:bigin .4s backwards}
.rrow:nth-child(2){animation-delay:.1s}.rrow:nth-child(3){animation-delay:.2s}.rrow:nth-child(4){animation-delay:.3s}.rrow:nth-child(5){animation-delay:.4s}
.rrow.ok{background:rgba(61,220,132,.18)}
.rav svg{width:100%;display:block}.rn{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp{font-weight:900;color:var(--sand);font-size:1.3em;text-align:right}

/* Pyramide */
.climb{height:100%;display:flex;align-items:flex-end}
.pyr{position:relative;width:min(100%,150vh);margin:0 auto;aspect-ratio:1000/600}
.pyr.small{width:min(70vw,90vh);margin-top:1em}
.pyr > svg{position:absolute;inset:0;width:100%;height:100%}
.tier{stroke:rgba(0,0,0,.18);stroke-width:2}
.tier.t1{fill:#d9a04c}.tier.t2{fill:#e8b45e}.tier.t3{fill:#f6cd7a}
.pyr-lbl{fill:rgba(0,0,0,.35);font-weight:900;font-size:22px;letter-spacing:.3em}
.figs{position:absolute;inset:0}
.fig{position:absolute;width:6.5%;z-index:1;transform:translateX(-50%);transition:bottom 2.2s cubic-bezier(.3,1.25,.5,1),left 2.2s ease;text-align:center}
.fig svg{width:100%;display:block;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.fname{display:block;max-width:10em;overflow:hidden;text-overflow:ellipsis;margin-left:50%;transform:translateX(-50%);width:max-content;font-size:.72em;font-weight:800;background:rgba(27,16,53,.75);border-radius:8px;padding:0 .3em;white-space:nowrap;margin-top:-.2em}
.plus{position:absolute;top:-1.4em;left:50%;transform:translateX(-50%);color:var(--ok);font-weight:900;font-size:1.3em;animation:float 2.5s ease-out forwards}
@keyframes float{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-30px)}}

/* Siegerehrung */
.ph-podium + .status,.ph-lobby + .status{display:none}
main.ph-lobby{overflow:auto}
.podium{display:grid;grid-template-columns:1.3fr 1fr;gap:2vw;align-items:center;height:100%;position:relative}
.pod-right{text-align:center;max-height:100%}
.pod-right .lead{margin:.1em 0}
.crown{font-size:2.8em;line-height:1}
.win{font-size:2.6em;margin:0;color:var(--sand);line-height:1.1}
.rank{list-style:none;padding:0;margin:.7em 0;display:grid;grid-template-columns:1fr;gap:.35em;text-align:left}
.rank.two{grid-template-columns:1fr 1fr}
.rank li{display:flex;align-items:center;gap:.6em;background:var(--card);border-radius:12px;padding:.1em .8em}
.rank li.w{background:rgba(244,194,107,.25)}
.rank svg{width:1.6em}.rank .rn{flex:1;font-weight:800}.rank b{color:var(--sand);font-size:1.2em}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall 3.5s linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* Steuerung */
.ctrl{position:fixed;right:1.2vw;bottom:1.2vw;display:flex;gap:.5em;z-index:5;opacity:.35;transition:opacity .2s}
.ctrl:hover{opacity:1}
.cbtn{background:var(--card2);border-radius:12px;padding:.5em .8em;font-weight:800}
.menu{position:fixed;right:1.2vw;bottom:4.5em;display:flex;flex-direction:column;gap:.5em;z-index:6;background:var(--bg2);padding:1em;border-radius:16px;box-shadow:0 10px 40px #0008}
.conn{position:fixed;top:0;left:0;right:0;background:var(--bad);color:#fff;text-align:center;padding:.5em;font-weight:800;z-index:9}
.unlock{position:fixed;left:50%;top:1em;transform:translateX(-50%);background:var(--sand);color:#3a2408;font-weight:900;padding:.6em 1.2em;border-radius:999px;z-index:8;box-shadow:0 6px 20px #0006}

.seg-l{display:inline-flex;background:var(--card);border-radius:10px;padding:3px;gap:3px}
.seg-l button{padding:.3em .7em;border-radius:8px;font-weight:800}
.seg-l button.on{background:var(--accent)}
#btnLang b{color:var(--sand)}