:root{--bg:#090b10;--panel:#121622;--panel2:#181e2d;--text:#f7f8fb;--muted:#929bad;--line:#252d3d;--accent:#7c5cff;--accent2:#23c7ff;--pink:#ff5da2;--green:#32d583;--red:#ff5d73;--yellow:#ffbd4a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}body{background:radial-gradient(900px 600px at 50% -150px,#27204d 0,transparent 65%),var(--bg)}button,input{font:inherit}button{cursor:pointer;color:inherit}main{width:min(920px,100%);margin:auto;padding:22px 16px 70px}.screen{display:none}.screen.active{display:block}.hidden{display:none!important}.hero{padding:8vh 4px 24px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.18em;color:#aeb7c8}.hero h1{font-size:clamp(44px,12vw,82px);line-height:.92;margin:12px 0 20px;letter-spacing:-.055em}.hero h1 span{background:linear-gradient(90deg,#9d87ff,#48d7ff);-webkit-background-clip:text;color:transparent}.hero p{max-width:560px;color:var(--muted);font-size:18px;line-height:1.5}.panel{background:linear-gradient(180deg,rgba(25,30,45,.96),rgba(16,20,30,.96));border:1px solid var(--line);border-radius:24px;padding:20px;margin:14px 0;box-shadow:0 20px 70px #0005}.join-panel{max-width:560px}input{width:100%;border:1px solid #30394c;background:#0c1018;color:white;padding:15px 16px;border-radius:14px;margin:6px 0;outline:none;font-size:17px}input:focus{border-color:#7c5cff;box-shadow:0 0 0 3px #7c5cff22}#code{text-transform:uppercase;letter-spacing:.18em;font-weight:900}button{border:0;border-radius:14px;padding:14px 16px;font-weight:850;background:#202738}.primary{width:100%;background:linear-gradient(135deg,var(--accent),#5f8cff);margin-top:7px}.ghost{width:100%;background:#1b2130;border:1px solid #30394c}.danger{color:#ff8698}.divider{text-align:center;color:#687286;font-size:12px;margin:12px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 3px 0}.room-code{font-size:38px;letter-spacing:.18em;font-weight:950}.badge{display:inline-block;padding:7px 10px;border-radius:999px;background:#262d3e;font-size:12px;font-weight:900}.tiny{font-size:11px;color:var(--green);margin-top:8px;text-align:right}.host-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#241d45,#13253b)}.host-hero h2{font-size:32px;margin:6px 0}.qr{width:120px;height:120px;display:grid;place-items:center;text-align:center;background:white;color:#111;border-radius:18px;font-size:35px}.qr small{display:block;font-size:10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}.stat{background:#111622;border:1px solid var(--line);border-radius:18px;padding:14px;text-align:center}.stat b{font-size:27px;display:block}.stat span{font-size:11px;color:var(--muted)}h2{margin:0 0 14px}.section-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.muted{color:var(--muted)}.center{text-align:center}.players{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px}.player{background:#0d111a;border:1px solid #242c3c;border-radius:15px;padding:11px 12px;display:flex;justify-content:space-between;align-items:center}.player.offline{opacity:.45}.player .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}.player small{color:var(--muted)}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.team-btn.a{background:linear-gradient(135deg,#4757d8,#6c84ff)}.team-btn.b{background:linear-gradient(135deg,#b83474,#ff5da2)}.mini{padding:8px 10px;font-size:12px}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.game-card{text-align:left;background:#0e131e;border:1px solid #273044;min-height:122px;padding:15px}.game-card span{font-size:30px;display:block;margin-bottom:8px}.game-card b{display:block;font-size:16px}.game-card small{display:block;color:var(--muted);margin-top:5px}.settings summary{font-weight:900;cursor:pointer}.settings label{display:block;color:var(--muted);font-size:13px;margin-top:12px}.switchrow{display:flex!important;align-items:center;justify-content:space-between}.switchrow input{width:auto}.stage{min-height:78vh;display:grid;align-content:center}.game-title{text-align:center}.game-title .icon{font-size:54px}.game-title h1{font-size:clamp(34px,8vw,58px);margin:8px 0}.timer{height:8px;background:#252c39;border-radius:999px;overflow:hidden;margin:18px 0}.timer>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transform-origin:left}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer{min-height:90px;font-size:17px;background:#1a2130;border:1px solid #30394c}.answer:disabled{opacity:.55}.feedback{min-height:34px;text-align:center;font-weight:900;margin:14px}.feedback.good{color:var(--green)}.feedback.bad{color:var(--red)}.tap-btn,.buzz-btn,.reaction-btn{width:100%;height:min(52vh,420px);border-radius:36px;font-size:clamp(40px,12vw,80px);background:linear-gradient(145deg,#5f46e8,#347cff);box-shadow:inset 0 -12px 30px #0003}.tap-count{font-size:64px;font-weight:950;text-align:center}
.stopclock{font-size:clamp(56px,18vw,110px);font-weight:950;text-align:center;font-variant-numeric:tabular-nums;margin:20px 0;color:var(--accent2)}.estimate-wrap input{font-size:34px;text-align:center}.vote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.vote-grid button{background:#181f2e;border:1px solid #2b3549}.host-wait{font-size:22px;text-align:center;color:var(--muted);padding:25px}.result-card h1{text-align:center;font-size:42px}.podium{display:grid;gap:8px;margin:16px 0}.rank{display:grid;grid-template-columns:42px 1fr auto;align-items:center;background:#0d121b;border:1px solid #273044;border-radius:15px;padding:12px}.rank:first-child{border-color:#8e7b38;background:#1e1b10}.rank .pos{font-size:20px;font-weight:950}.rank .pts{font-weight:950}.round-detail{margin:18px 0;padding-top:12px;border-top:1px solid var(--line)}.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #222a38}.big-answer{text-align:center;font-size:26px;font-weight:900;color:var(--yellow);margin:14px}.host-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.buzzer-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.good-btn{background:#16794a}.bad-btn{background:#982c42}@media(max-width:560px){.game-grid,.answers,.two,.vote-grid{grid-template-columns:1fr}.host-hero{display:block}.qr{width:92px;height:92px;font-size:26px;margin-top:10px}.qr img{width:92px;height:92px}.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:10px 5px}.stat b{font-size:22px}}

.sound-toggle{position:fixed;top:12px;right:12px;z-index:60;background:var(--panel2);border:1px solid var(--line);color:var(--text);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer}
#toast{position:fixed;z-index:70;left:50%;top:18px;transform:translateX(-50%) translateY(-14px);background:#20283a;color:white;padding:11px 18px;border-radius:12px;box-shadow:0 10px 40px #0008;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:88vw;text-align:center;font-weight:800;font-size:14px}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
textarea#customQuizInput{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px;font:inherit;resize:vertical;margin:8px 0}
.settings code{background:var(--panel2);padding:2px 6px;border-radius:6px;font-size:.85em}
.qr img{border-radius:10px;background:#fff;padding:6px;display:block;margin:0 auto 6px}
.qr small{display:block;text-align:center;word-break:break-all;color:var(--muted)}
.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:80}
.confetti-layer i{position:absolute;top:-20px;width:9px;height:14px;opacity:.9;border-radius:2px;animation:confetti-fall linear forwards}
@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(540deg);opacity:.9}}

/* ---- Erweiterungen: Finale, Missionen, Foto-Challenge, Shop ---- */
.finale-banner{background:linear-gradient(135deg,#3a1030,#611f1f);border:1px solid #ff5da2;color:#ffd7e6;text-align:center;font-weight:900;padding:12px;border-radius:16px;margin:12px 0;animation:pulseGlow 1.6s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0px #ff5da200}50%{box-shadow:0 0 22px #ff5da266}}
.mission-card{background:linear-gradient(135deg,#241d45,#3a1e3e);border:1px solid #7c5cff}
.mission-card p{margin:8px 0 0;font-weight:800;font-size:16px}
.toolbar{display:flex;gap:10px;padding:12px}
.toolbar button{flex:1}
.coin-badge{display:inline-block;background:#3a2f10;color:var(--yellow);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:900;margin-left:6px}
.modal{position:fixed;inset:0;background:#000b;z-index:90;display:grid;place-items:center;padding:16px}
.modal.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:20px;max-width:640px;width:100%;max-height:86vh;overflow:auto;box-shadow:0 30px 90px #000a}
.photo-tasks{display:grid;gap:8px}
.photo-task{background:#0d111a;border:1px solid #242c3c;border-radius:14px;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.photo-task span{flex:1;font-size:14px}
.photo-task label{background:#202738;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
.photo-task input[type=file]{display:none}
.photo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:8px}
.photo-wall figure{margin:0;background:#0d111a;border:1px solid #242c3c;border-radius:12px;overflow:hidden}
.photo-wall img{width:100%;height:100px;object-fit:cover;display:block}
.photo-wall figcaption{font-size:10px;color:var(--muted);padding:5px 6px;line-height:1.3}
.shop-items{display:grid;gap:10px;margin-top:10px}
.shop-item{background:#0d111a;border:1px solid #242c3c;border-radius:16px;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.shop-item b{display:block;font-size:15px}
.shop-item small{color:var(--muted)}
.shop-item button{background:linear-gradient(135deg,var(--accent),#5f8cff);white-space:nowrap;padding:10px 14px}
.shop-item button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:560px){.toolbar{flex-direction:column}}