:root{--bg:#0f172a;--surface:#1e293b;--surface-2:#273449;--border:#3b4a63;--text:#f8fafc;--muted:#cbd5e1;--accent:#fbbf24;--accent-text:#111827;--primary:#2563eb;--primary-text:#fff;--danger:#dc2626;--success:#15803d;--success-soft:#14532d;--danger-soft:#7f1d1d;--me:#3730a3;--opt-1:#1d4ed8;--opt-2:#b91c1c;--opt-3:#047857;--opt-4:#92400e;--radius:14px;--font:"Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, "Geeza Pro", "Arial", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0;padding:0;font-size:18px;line-height:1.6}body{min-height:100dvh}#root{flex-direction:column;min-height:100dvh;display:flex}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent)}.num,.timer{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}.page{flex-direction:column;flex:1;gap:16px;width:100%;max-width:560px;margin:0 auto;padding:16px;display:flex}.page.wide{max-width:1200px}.center{text-align:center;justify-content:center}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.stack{flex-direction:column;gap:12px;display:flex}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.spread{justify-content:space-between}h1,h2,h3{margin:0;line-height:1.3}h1{font-size:1.6rem}h2{font-size:1.3rem}h3{font-size:1.1rem}.muted{color:var(--muted)}.big{font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800}.huge{letter-spacing:.08em;font-size:clamp(2.4rem,12vw,6rem);font-weight:900}label.field{flex-direction:column;gap:6px;font-weight:600;display:flex}input[type=text],input[type=password],input[type=number],input[type=search],select,textarea{border:2px solid var(--border);background:var(--bg);width:100%;min-height:52px;color:var(--text);border-radius:12px;padding:10px 14px}textarea{resize:vertical;min-height:90px}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.code-input{text-align:center;letter-spacing:.3em;font-variant-numeric:tabular-nums;direction:ltr;font-size:1.8rem}.error{color:#fecaca;background:var(--danger-soft);border-radius:10px;padding:10px 12px;font-weight:600}.success{color:#dcfce7;background:var(--success-soft);border-radius:10px;padding:10px 12px;font-weight:600}.btn{background:var(--surface-2);min-height:52px;color:var(--text);cursor:pointer;text-align:center;border:0;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-weight:700;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--accent-text)}.btn.blue{background:var(--primary);color:var(--primary-text)}.btn.danger{background:var(--danger);color:#fff}.btn.block{width:100%}.btn.small{min-height:40px;padding:6px 14px;font-size:.95rem}.btn.large{min-height:64px;font-size:1.3rem}.question-text{text-align:center;overflow-wrap:anywhere;font-size:clamp(1.25rem,5vw,2rem);font-weight:800;line-height:1.45}.answers{flex-direction:column;gap:12px;display:flex}.answer{color:#fff;text-align:start;cursor:pointer;overflow-wrap:anywhere;border:3px solid #0000;border-radius:14px;width:100%;min-height:64px;padding:12px 16px;font-size:1.15rem;font-weight:700}.answer:first-child{background:var(--opt-1)}.answer:nth-child(2){background:var(--opt-2)}.answer:nth-child(3){background:var(--opt-3)}.answer:nth-child(4){background:var(--opt-4)}.answer:disabled{cursor:default;opacity:.45}.answer.chosen{opacity:1;box-shadow:0 0 0 3px var(--accent);border-color:#fff}.timer{text-align:center;font-size:clamp(2.2rem,10vw,4rem);font-weight:900;line-height:1}.timer.low{color:#fca5a5}.timebar{background:var(--surface-2);border-radius:8px;height:8px;overflow:hidden}.timebar>div{background:var(--accent);height:100%;transition:width .1s linear}.result-banner{border-radius:var(--radius);text-align:center;padding:20px 16px;font-size:clamp(1.4rem,6vw,2.2rem);font-weight:900}.result-banner.good{background:var(--success)}.result-banner.bad{background:var(--danger-soft)}.result-banner.neutral{background:var(--surface-2)}.ranking{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.ranking li{background:var(--surface-2);border-radius:10px;grid-template-columns:3rem 1fr auto;align-items:center;gap:8px;padding:8px 12px;display:grid}.ranking li.me{background:var(--me);outline:2px solid var(--accent)}.ranking .rank{text-align:center;font-variant-numeric:tabular-nums;font-size:1.3rem}.ranking .name{overflow-wrap:anywhere;font-weight:600}.ranking .score{font-variant-numeric:tabular-nums;font-weight:800}.banner{z-index:20;background:var(--accent);color:var(--accent-text);text-align:center;padding:8px;font-weight:800;position:sticky;top:0}.pill{background:var(--surface-2);border-radius:999px;padding:2px 10px;font-size:.9rem;font-weight:600;display:inline-block}.pill.ok{background:var(--success)}.pill.off{background:var(--danger-soft)}.names{flex-wrap:wrap;gap:8px;display:flex}.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;display:grid}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--border);text-align:start;padding:8px 10px}th{color:var(--muted);font-weight:700}.dialog-backdrop{z-index:50;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{width:100%;max-width:420px}.option-line{align-items:center;gap:8px;display:flex}.option-line.correct{color:#86efac;font-weight:700}.check{cursor:pointer;align-items:center;gap:10px;min-height:44px;display:flex}.check input{width:22px;height:22px}.hidden-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.fade-in{animation:.25s ease-out fade}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.fade-in{animation:none}.timebar>div{transition:none}}@media (width>=1000px){.host-live .question-text{font-size:2.4rem}.host-live .timer{font-size:5rem}}