:root{--mz-blue:#1e88e5;--mz-blue-d:#1565c0;--mz-blue-soft:#eff6ff;--mz-blue-border:#bfdbfe;--mz-orange:#ff6f00;--mz-orange-d:#e65100;--mz-orange-soft:#fff7ed;--mz-orange-border:#ffd8a8;--mz-green:#16a34a;--mz-green-d:#15803d;--mz-green-soft:#f0fdf4;--mz-green-border:#bbf7d0;--mz-red:#dc2626;--mz-red-soft:#fef2f2;--mz-red-border:#fecaca;--mz-purple:#7c3aed;--mz-purple-soft:#f5f3ff;--mz-yellow:#d97706;--mz-yellow-soft:#fffbeb;--mz-yellow-border:#fde68a;--mz-bg:#f8f9fa;--mz-card:#fff;--mz-border:#e9ecef;--mz-border-strong:#dee2e6;--mz-text:#212529;--mz-text-muted:#6c757d;--mz-text-faint:#adb5bd;--mz-sidebar-bg:#fff;--mz-sidebar-w:280px;--mz-shadow-sm:0 1px 4px #0000000f, 0 2px 8px #0000000a;--mz-shadow-md:0 4px 16px #00000014, 0 1px 4px #0000000a;--mz-gradient-blue:linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%);--mz-gradient-orange:linear-gradient(135deg, #ff6f00 0%, #ff8f00 100%);--mz-radius-sm:8px;--mz-radius:12px;--mz-radius-lg:16px;--mz-radius-xl:20px}*,:before,:after{box-sizing:border-box}html,body{height:100%;color:var(--mz-text);background:var(--mz-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5}.hidden{display:none!important}button{font:inherit}.shell{min-height:100vh;display:flex}.sidebar{width:var(--mz-sidebar-w);background:var(--mz-sidebar-bg);border-right:1px solid var(--mz-border);z-index:10;flex-direction:column;flex-shrink:0;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto;box-shadow:2px 0 8px #0000000a}.sidebar-brand{border-bottom:1px solid var(--mz-border);align-items:center;gap:12px;padding:20px 18px 16px;display:flex}.brand-logo{background:var(--mz-blue-soft);border:1px solid var(--mz-blue-border);width:42px;height:42px;box-shadow:var(--mz-shadow-sm);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;font-size:1.35rem;line-height:1;display:flex}.brand-name{letter-spacing:-.02em;color:var(--mz-text);font-size:15px;font-weight:800}.brand-sub{color:var(--mz-text-muted);font-size:11px;font-weight:500}.sidebar-badges{border-bottom:1px solid var(--mz-border);flex-wrap:wrap;gap:6px;padding:12px 18px;display:flex}.badge{letter-spacing:.02em;border-radius:999px;align-items:center;padding:3px 8px;font-size:11px;font-weight:700;display:inline-flex}.badge-blue{background:var(--mz-blue-soft);color:var(--mz-blue-d)}.badge-orange{background:var(--mz-orange-soft);color:#9a3412}.badge-green{background:var(--mz-green-soft);color:var(--mz-green-d)}.badge-purple{background:var(--mz-purple-soft);color:var(--mz-purple)}.badge-muted{color:#475569;background:#f1f5f9}.phase-pill{text-transform:uppercase;letter-spacing:.04em;border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex}.phase-pill:before{content:"";background:currentColor;border-radius:999px;width:8px;height:8px}.phase-settings{background:var(--mz-orange-soft);color:var(--mz-orange-d)}.phase-synchronizing{background:var(--mz-yellow-soft);color:var(--mz-yellow)}.phase-playing{background:var(--mz-green-soft);color:var(--mz-green-d)}.phase-finished{color:#475569;background:#f1f5f9}.sidebar-nav{flex:1;padding:16px 12px 8px}.nav-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--mz-text-faint);margin-bottom:6px;padding:0 8px;font-size:10px;font-weight:700}.nav-btn{border-radius:var(--mz-radius-sm);width:100%;color:var(--mz-text-muted);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;margin-bottom:2px;padding:10px 12px;font-size:13.5px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-btn:hover{background:var(--mz-bg);color:var(--mz-text)}.nav-btn.active{background:var(--mz-blue);color:#fff;box-shadow:0 4px 12px #1e88e540}.nav-separator{background:var(--mz-border);height:1px;margin:10px 8px 8px}.nav-btn-cta{color:var(--mz-blue-d);font-weight:700}.nav-btn-cta:hover{background:var(--mz-blue-soft);color:var(--mz-blue-d)}.sidebar-section{border-top:1px solid var(--mz-border);padding:12px 18px}.sidebar-section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--mz-text-faint);margin-bottom:6px;font-size:10px;font-weight:700}.sidebar-section .kv{justify-content:space-between;margin-bottom:3px;font-size:12.5px;display:flex}.sidebar-section .kv .k{color:var(--mz-text-muted)}.sidebar-section .kv .v{color:var(--mz-text);font-weight:600}.sidebar-footer-link{color:var(--mz-text-muted);padding:10px 18px 14px;font-size:11px;text-decoration:none;transition:color .15s;display:block}.sidebar-footer-link:hover{color:var(--mz-blue)}.main-wrapper{flex-direction:column;flex:1;min-width:0;display:flex}.main-content{background:var(--mz-bg);flex-direction:column;flex:1;gap:20px;padding:24px;display:flex}.card{background:var(--mz-card);border:1px solid var(--mz-border);border-radius:var(--mz-radius-lg);box-shadow:var(--mz-shadow-sm);padding:20px}.card-accent{border-color:var(--mz-blue-border);border-top:3px solid var(--mz-blue)}.card-accent-orange{border-color:var(--mz-orange-border);border-top:3px solid var(--mz-orange)}.card-accent-green{border-color:var(--mz-green-border);border-top:3px solid var(--mz-green)}.card-section-label{text-transform:uppercase;letter-spacing:.07em;color:var(--mz-text-muted);margin-bottom:12px;font-size:11px;font-weight:800;display:block}.card-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;display:flex}.card-header .card-section-label{margin-bottom:0}.card-header-actions{flex-wrap:wrap;gap:8px;display:flex}.btn{border-radius:var(--mz-radius-sm);cursor:pointer;background:var(--mz-card);color:var(--mz-text);border:1.5px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:transform .1s,background .15s,box-shadow .15s,border-color .15s;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}.btn:not(:disabled):hover{box-shadow:var(--mz-shadow-sm);transform:translateY(-1px)}.btn:not(:disabled):active{transform:translateY(0)}.btn-primary{background:var(--mz-gradient-blue);color:#fff;border-color:#0000}.btn-primary:not(:disabled):hover{box-shadow:0 6px 14px #1e88e547}.btn-orange{background:var(--mz-gradient-orange);color:#fff}.btn-success{background:var(--mz-green);color:#fff}.btn-danger{background:var(--mz-red);color:#fff}.btn-secondary{background:var(--mz-bg);color:var(--mz-text);border-color:var(--mz-border-strong)}.btn-ghost{color:var(--mz-text-muted);background:0 0;border-color:#0000}.btn-ghost:hover{color:var(--mz-text);background:var(--mz-bg)}.btn-sm{border-radius:6px;padding:6px 10px;font-size:12.5px}.btn-lg{border-radius:var(--mz-radius);padding:14px 22px;font-size:16px}.btn-full{width:100%}.form-group{flex-direction:column;gap:4px;display:flex}.form-group+.form-group{margin-top:12px}.form-label{color:var(--mz-text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:12px;font-weight:700}.form-help{color:var(--mz-text-muted);margin-top:4px;font-size:12px}.form-input,.form-select,.form-textarea{border:1px solid var(--mz-border-strong);border-radius:var(--mz-radius-sm);background:var(--mz-card);font:inherit;color:var(--mz-text);padding:10px 12px;font-size:14px;transition:border-color .15s,box-shadow .15s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--mz-blue);outline:none;box-shadow:0 0 0 3px #1e88e52e}.form-row{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.form-row .form-group{flex:1;min-width:180px}.form-toggle{cursor:pointer;align-items:center;gap:10px;display:flex}.form-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--mz-blue)}.sandbox{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}@media (width>=1100px){.sandbox-split{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}}.sandbox-toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.sandbox-toolbar .sep{background:var(--mz-border-strong);width:1px;height:26px;margin:0 4px}.screen{background:var(--mz-card);border:1px solid var(--mz-border);border-radius:var(--mz-radius-lg);box-shadow:var(--mz-shadow-sm);flex-direction:column;min-height:340px;display:flex;overflow:hidden}.screen-head{border-bottom:1px solid var(--mz-border);background:var(--mz-bg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.screen-title{letter-spacing:-.01em;color:var(--mz-text);align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.screen-title .emoji{font-size:16px}.screen-head-actions{gap:6px;display:flex}.screen-body{flex-direction:column;flex:1;gap:14px;padding:18px;display:flex;overflow:auto}.screen-empty{color:var(--mz-text-muted);text-align:center;padding:28px 16px;font-size:14px}.screen-host{background:radial-gradient(circle at top right, #1e88e50f, transparent 55%), radial-gradient(circle at bottom left, #ff6f000f, transparent 55%), var(--mz-card)}.screen-host .screen-body{padding:22px}.players-stack{flex-direction:column;gap:16px;display:flex}.screen-player{border-radius:var(--mz-radius-lg)}.screen-player.disconnected{opacity:.55;filter:grayscale(.4)}.qa-head{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.pill{letter-spacing:.02em;border-radius:999px;align-items:center;padding:3px 9px;font-size:11px;font-weight:700;display:inline-flex}.pill-mcq{color:#1e40af;background:#dbeafe}.pill-tf{color:#92400e;background:#fef3c7}.pill-sa{color:#3730a3;background:#e0e7ff}.pill-muted{color:#475569;background:#f1f5f9}.timer{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--mz-text);margin-left:auto;font-weight:800}.timer.low{color:var(--mz-red)}.q-prompt{letter-spacing:-.01em;color:var(--mz-text);font-size:clamp(1.2rem,2.3vw,1.6rem);font-weight:800;line-height:1.35}.q-options{grid-template-columns:1fr;gap:10px;display:grid}@media (width>=520px){.q-options.mcq{grid-template-columns:1fr 1fr}}.q-option{border:1.5px solid var(--mz-border);border-radius:var(--mz-radius);background:var(--mz-card);cursor:pointer;text-align:left;color:var(--mz-text);align-items:center;gap:12px;padding:14px 16px;font-size:15px;font-weight:600;transition:all .15s;display:flex}.q-option:not(:disabled):hover{border-color:var(--mz-blue);background:var(--mz-blue-soft);box-shadow:var(--mz-shadow-sm);transform:translateY(-1px)}.q-option .q-letter{background:var(--mz-bg);border:1.5px solid var(--mz-border-strong);width:28px;height:28px;color:var(--mz-text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.q-option.selected{border-color:var(--mz-blue);background:var(--mz-blue-soft)}.q-option.selected .q-letter{background:var(--mz-blue);color:#fff;border-color:var(--mz-blue)}.q-option.correct{border-color:var(--mz-green);background:var(--mz-green-soft);color:var(--mz-green-d)}.q-option.correct .q-letter{background:var(--mz-green);color:#fff;border-color:var(--mz-green)}.q-option.wrong{border-color:var(--mz-red);background:var(--mz-red-soft);color:#7f1d1d}.q-option.wrong .q-letter{background:var(--mz-red);color:#fff;border-color:var(--mz-red)}.q-option:disabled{cursor:not-allowed}.q-explanation{background:var(--mz-green-soft);border:1px solid var(--mz-green-border);border-radius:var(--mz-radius);color:var(--mz-green-d);padding:14px 16px;font-size:14px;animation:.2s ease-out fade-up}.q-sa-row{flex-wrap:wrap;gap:10px;display:flex}.q-sa-row .form-input{flex:1;min-width:220px}.scoreboard{flex-direction:column;gap:6px;display:flex}.scoreboard-row{border-radius:var(--mz-radius-sm);background:var(--mz-bg);border:1px solid var(--mz-border);grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:8px 12px;font-size:14px;transition:background .2s;display:grid}.scoreboard-row.you{background:var(--mz-blue-soft);border-color:var(--mz-blue-border)}.scoreboard-row.gold{background:#fffbeb;border-color:#fcd34d}.scoreboard-rank{background:var(--mz-card);width:24px;height:24px;color:var(--mz-text-muted);border:1px solid var(--mz-border);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:800;display:flex}.scoreboard-row.gold .scoreboard-rank{color:#78350f;background:#fcd34d;border-color:#f59e0b}.scoreboard-name{align-items:center;gap:6px;font-weight:700;display:flex}.scoreboard-team{background:var(--mz-bg);color:var(--mz-text-muted);border:1px solid var(--mz-border);border-radius:999px;padding:2px 7px;font-size:11px;font-weight:700;display:inline-flex}.scoreboard-status{color:var(--mz-text-muted);background:#f1f5f9;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:700}.scoreboard-status.ok{background:var(--mz-green-soft);color:var(--mz-green-d)}.scoreboard-status.bad{background:var(--mz-red-soft);color:#7f1d1d}.scoreboard-score{font-variant-numeric:tabular-nums;color:var(--mz-text);text-align:right;min-width:36px;font-weight:800}.team-row{border-radius:var(--mz-radius-sm);background:var(--mz-bg);border:1px solid var(--mz-border);grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 12px;display:grid}.team-swatch{border-radius:4px;flex-shrink:0;width:14px;height:14px}.team-name{font-weight:700}.team-score{font-variant-numeric:tabular-nums;font-weight:800}.roster{grid-template-columns:1fr;gap:6px;display:grid}.roster-row{border-radius:var(--mz-radius-sm);background:var(--mz-bg);border:1px solid var(--mz-border);grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:8px 12px;font-size:14px;display:grid}.roster-avatar{background:var(--mz-blue-soft);width:28px;height:28px;color:var(--mz-blue-d);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.log-panel{color:#e2e8f0;border-radius:var(--mz-radius-sm);white-space:pre-wrap;word-break:break-word;background:#0f172a;max-height:200px;padding:12px 14px;font-family:ui-monospace,JetBrains Mono,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;overflow-y:auto}.log-panel .l-ts{color:#94a3b8;margin-right:6px}.log-panel .l-host{color:#60a5fa;margin-right:6px}.log-panel .l-player{color:#fbbf24;margin-right:6px}.log-panel .l-hub{color:#a78bfa;margin-right:6px}.log-panel .l-err{color:#f87171}.log-panel .l-ok{color:#34d399}.toast{color:#fff;border-radius:var(--mz-radius);box-shadow:var(--mz-shadow-md);z-index:100;background:#111827;max-width:min(320px,100vw - 48px);padding:12px 18px;font-size:14px;font-weight:600;animation:.2s ease-out toast-in;position:fixed;bottom:24px;right:24px}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.fade-in{animation:.2s ease-out fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.finished-hero{text-align:center;padding:18px 0 8px}.finished-hero .trophy{font-size:48px;line-height:1}.finished-hero h2{letter-spacing:-.01em;margin:8px 0 4px;font-size:1.6rem;font-weight:900}.finished-hero p{color:var(--mz-text-muted);margin:0}.confetti-layer{pointer-events:none;z-index:90;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;width:10px;height:14px;animation:1.8s linear forwards confetti-fall;position:absolute;top:-20px}@keyframes confetti-fall{to{opacity:0;transform:translateY(110vh)rotate(540deg)}}.settings-grid{grid-template-columns:1fr;gap:14px;display:grid}@media (width>=720px){.settings-grid{grid-template-columns:1fr 1fr}}.settings-summary{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:14px;display:grid}.summary-tile{background:var(--mz-bg);border-radius:var(--mz-radius-sm);border:1px solid var(--mz-border);padding:10px 12px}.summary-tile .k{text-transform:uppercase;color:var(--mz-text-muted);letter-spacing:.05em;font-size:11px;font-weight:700}.summary-tile .v{color:var(--mz-text);margin-top:2px;font-size:15px;font-weight:800}.countdown-bar-track{background:var(--mz-bg);border:1px solid var(--mz-border);border-radius:999px;width:100%;height:8px;overflow:hidden}.countdown-bar-fill{background:var(--mz-gradient-blue);height:100%;transition:width .2s linear}.text-muted{color:var(--mz-text-muted)}.text-center{text-align:center}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.gap-sm{gap:6px}.gap-md{gap:12px}.gap-lg{gap:20px}.mt-sm{margin-top:6px}.mt-md{margin-top:12px}.mt-lg{margin-top:20px}