.player-page{display:flex;flex-direction:column;min-height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.player-page .screen{flex:1;display:flex;flex-direction:column;padding:18px;gap:16px}.player-page .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#00000047;border-bottom:1px solid var(--border)}.player-page .topbar .who{font-weight:800;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-page .topbar .stats{display:flex;gap:8px;flex:0 0 auto}.player-page .chip{padding:5px 11px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:.82rem;font-weight:700;white-space:nowrap}.player-page .join{justify-content:center;align-items:center;text-align:center;gap:22px}.player-page .join h1{margin:0;font-size:1.75rem;font-weight:800}.player-page .join p{margin:0;color:var(--muted);font-size:.98rem}.player-page .join-form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}.player-page input[type=text]{width:100%;padding:18px 20px;border-radius:var(--radius);border:2px solid var(--border);background:#ffffff0f;color:var(--text);font-family:inherit;font-size:1.2rem;font-weight:700;text-align:center;outline:none;transition:border-color .2s ease}.player-page input[type=text]:focus{border-color:var(--brand-2)}.player-page input[type=text]::placeholder{color:var(--muted);font-weight:500}.player-page .center{justify-content:center;align-items:center;text-align:center;gap:18px}.player-page .big-emoji{font-size:4.5rem;line-height:1;animation:bob 2.2s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.player-page .headline{font-size:1.6rem;font-weight:800;margin:0}.player-page .subline{color:var(--muted);margin:0;font-size:1rem;max-width:320px}.player-page .q-head{display:flex;align-items:center;gap:14px}.player-page .q-head .timer-ring{width:62px;height:62px}.player-page .q-head .timer-ring .value{font-size:1.35rem}.player-page .q-text{flex:1;font-size:1.05rem;font-weight:700;line-height:1.5}.player-page .options{flex:1;align-content:stretch}.player-page button.option{min-height:0;justify-content:center;text-align:center;flex-direction:column;gap:10px;font-size:1rem}.player-page button.option .shape{width:34px;height:34px}.player-page button.option .label{flex:0 0 auto}.player-page .verdict{width:100%;max-width:420px;padding:28px 22px;text-align:center}.player-page .verdict.good{background:#22c55e2e;border:2px solid var(--ok)}.player-page .verdict.bad{background:#ef44442e;border:2px solid var(--bad)}.player-page .verdict .icon{font-size:3.6rem;line-height:1}.player-page .verdict .title{font-size:1.6rem;font-weight:800;margin:10px 0 4px}.player-page .verdict .points{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}.player-page .rank-line{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.player-page .podium-me{font-size:5rem;line-height:1}.player-page .final-score{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold)}.player-page .lb-mini{width:100%;max-width:420px}@media (min-width: 620px){.player-page .screen{max-width:560px;margin:0 auto;width:100%}.player-page button.option{font-size:1.15rem}}.host-page{min-height:100vh}.host-page .wrap{max-width:980px;margin:0 auto;padding:24px 16px 60px;display:flex;flex-direction:column;gap:18px}.host-page h1{font-size:1.5rem;margin:0}.host-page .top-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.host-page .links{display:flex;gap:10px;flex-wrap:wrap}.host-page .links a{color:var(--brand-2);font-size:.9rem;text-decoration:none}.host-page .auth-card{max-width:380px;margin:10vh auto 0;padding:32px 26px;text-align:center;display:flex;flex-direction:column;gap:16px}.host-page .auth-card input{padding:16px;border-radius:var(--radius);border:2px solid var(--border);background:#ffffff0f;color:var(--text);font-size:1.3rem;text-align:center;letter-spacing:6px;font-weight:800}.host-page .status-card{padding:22px;display:flex;flex-direction:column;gap:16px}.host-page .status-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}.host-page .phase-badge{font-size:1.1rem;font-weight:800;padding:8px 16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}.host-page .q-preview{font-size:1.2rem;font-weight:700;line-height:1.5}.host-page .progress-track{height:8px;background:#ffffff1a;overflow:hidden}.host-page .progress-fill{height:100%;background:var(--brand);transition:width .3s ease}.host-page .action-row{display:flex;gap:12px;flex-wrap:wrap}.host-page .action-row .btn{flex:1;min-width:160px}.host-page .players-card{padding:18px 22px;display:flex;flex-direction:column;gap:12px}.host-page .players-list{display:flex;flex-wrap:wrap;gap:10px;max-height:260px;overflow-y:auto}.host-page .player-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:.92rem;font-weight:700}.host-page .player-row .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.host-page .player-row.answered .dot{background:var(--ok)}.host-page .player-row.offline{opacity:.45}.host-page .player-row button{background:transparent;color:var(--bad);font-size:.85rem;padding:0 4px}.host-page .section-title{font-weight:800;color:var(--muted);font-size:.95rem}.host-page .qm-card{padding:22px;display:flex;flex-direction:column;gap:16px}.host-page .qm-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.host-page .qm-title-input{width:100%;max-width:400px;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:#ffffff0d;color:var(--text);font-size:1rem;font-weight:700}.host-page .qm-list{display:flex;flex-direction:column;gap:12px;max-height:520px;overflow-y:auto;padding-left:4px}.host-page .qm-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:var(--radius);background:#ffffff0a;border:1px solid var(--border);transition:border-color .2s,transform .2s}.host-page .qm-item:hover{border-color:#ffffff47}.host-page .qm-item-main{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.host-page .qm-item-title{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-page .qm-item-meta{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);flex-wrap:wrap}.host-page .qm-item-actions{display:flex;align-items:center;gap:6px}.host-page .qm-btn-icon{padding:6px 10px;border-radius:var(--radius);background:#ffffff14;color:var(--text);font-size:.9rem;display:inline-flex;align-items:center;justify-content:center;transition:background .2s}.host-page .qm-btn-icon:hover{background:#ffffff29}.host-page .qm-btn-icon.delete:hover{background:#ef444440;color:#fca5a5}.host-page .modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080a18d1;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.host-page .modal-card{width:100%;max-width:650px;background:var(--surface-solid);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}.host-page .modal-card h2{margin:0;font-size:1.3rem}.host-page .form-group{display:flex;flex-direction:column;gap:8px}.host-page .form-label{font-size:.92rem;font-weight:700;color:var(--muted)}.host-page .form-input,.host-page .form-textarea,.host-page .form-select{padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:#ffffff0f;color:var(--text);font-family:inherit;font-size:1rem}.host-page .form-textarea{resize:vertical;min-height:70px}.host-page .opt-editor-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);background:#ffffff08;border:1px solid var(--border)}.host-page .opt-editor-row.opt-0{border-right:5px solid var(--opt-0)}.host-page .opt-editor-row.opt-1{border-right:5px solid var(--opt-1)}.host-page .opt-editor-row.opt-2{border-right:5px solid var(--opt-2)}.host-page .opt-editor-row.opt-3{border-right:5px solid var(--opt-3)}.host-page .opt-radio-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem;white-space:nowrap}.host-page .toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:12px 24px;border-radius:var(--radius);font-weight:700;font-size:1rem;z-index:1100;box-shadow:var(--shadow);animation:toastIn .3s ease}.host-page .toast.success{background:var(--ok);color:#000}.host-page .toast.error{background:var(--bad);color:#fff}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.display-page{min-height:100vh;display:flex;flex-direction:column}.display-page .stage{flex:1;display:flex;flex-direction:column;padding:4vh 5vw;gap:3vh}.display-page .center{justify-content:center;align-items:center;text-align:center;gap:22px}.display-page .join-hero{display:flex;align-items:center;gap:6vw;flex-wrap:wrap;justify-content:center}.display-page .join-hero h1{font-size:3.2rem;margin:0 0 10px;font-weight:900}.display-page .join-hero .url{font-size:1.6rem;font-weight:800;color:var(--brand-2);direction:ltr;display:inline-block}.display-page .qr-box{background:#fff;padding:14px;box-shadow:var(--shadow);line-height:0}.display-page .qr-box img{width:220px;height:220px;display:block}.display-page .players-grid{width:100%;max-width:1100px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.display-page .player-chip{padding:12px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:1.15rem;font-weight:700;animation:pop .35s ease backwards}@keyframes pop{0%{opacity:0;transform:scale(.7)}}.display-page .waiting-count{font-size:1.4rem;font-weight:800;color:var(--brand-2)}.display-page .q-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.display-page .q-progress{font-size:1.2rem;font-weight:800;color:var(--muted)}.display-page .q-answered{font-size:1.15rem;font-weight:700;color:var(--muted)}.display-page .q-title{text-align:center;font-size:clamp(1.8rem,3.6vw,3rem);font-weight:900;line-height:1.35;padding:0 2vw}.display-page .stage .options{flex:1;gap:22px}.display-page .stage .option{font-size:clamp(1.2rem,2vw,1.7rem);padding:30px;gap:20px}.display-page .stage .option .shape{width:40px;height:40px}.display-page .stage .option.correct:after{content:"✔";font-size:1.8rem;margin-inline-start:auto}.display-page .bar-wrap{position:relative;overflow:hidden}.display-page .bar-fill{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff38;width:0%;transition:width .9s cubic-bezier(.2,.8,.2,1);z-index:0}.display-page .bar-wrap>*{position:relative;z-index:1}.display-page .bar-count{margin-inline-start:auto;font-weight:800;font-size:1.4rem}.display-page .board-title{text-align:center;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;margin:0}.display-page .lb{max-width:900px;width:100%;margin:0 auto;gap:16px}.display-page .lb-row{padding:20px 26px}.display-page .lb-rank{width:58px;height:58px;font-size:1.4rem}.display-page .lb-name{font-size:1.5rem}.display-page .lb-score{font-size:1.7rem}.display-page .lb-gain{font-size:1.1rem;min-width:90px}.display-page .podium{display:flex;align-items:flex-end;justify-content:center;gap:3vw;width:100%;max-width:900px}.display-page .podium .stand{flex:1;max-width:260px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:18px 12px 22px;text-align:center;border:1px solid var(--border);border-bottom:none}.display-page .podium .medal{font-size:3rem}.display-page .podium .name{font-weight:800;font-size:1.3rem;margin-top:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.display-page .podium .score{font-weight:800;color:var(--muted);margin-top:4px}.display-page .podium .p1{height:260px;background:#fcd34d33;order:2}.display-page .podium .p2{height:200px;background:#d6dae82e;order:1}.display-page .podium .p3{height:160px;background:#d692552e;order:3}.display-page .rest-board{max-width:760px}:root{--bg-1: #12142b;--bg-2: #1e1b4b;--bg-3: #2d1b4e;--surface: rgba(255, 255, 255, .07);--surface-solid: #1c1e3d;--border: rgba(255, 255, 255, .14);--text: #f4f5ff;--muted: #a9adcf;--brand: #7c5cff;--brand-2: #b06cff;--ok: #22c55e;--bad: #ef4444;--warn: #f59e0b;--opt-0: #e21b3c;--opt-1: #1368ce;--opt-2: #d89e00;--opt-3: #26890c;--gold: #fcd34d;--silver: #d6dae8;--bronze: #d69255;--radius: 0;--shadow: 8px 8px 0 rgba(0, 0, 0, .55);--font: "Segoe UI", "Tahoma", "Noto Sans Arabic", "Cairo", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{font-family:var(--font);color:var(--text);background:var(--bg-1);direction:rtl;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none}button:disabled{cursor:not-allowed;opacity:.45}.hidden{display:none!important}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{border-radius:var(--radius);padding:14px 24px;font-size:1.05rem;font-weight:700;color:#fff;background:var(--brand);transition:transform .12s ease,filter .12s ease}.btn:hover:not(:disabled){filter:brightness(1.1)}.btn:active:not(:disabled){transform:scale(.97)}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}.btn-danger{background:var(--bad)}.btn-lg{padding:20px 34px;font-size:1.35rem}.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:.9rem;color:var(--muted)}.muted{color:var(--muted)}.conn{position:fixed;top:12px;left:12px;z-index:90;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius);background:#0006;border:1px solid var(--border);font-size:.8rem;color:var(--muted)}.conn .dot{width:9px;height:9px;border-radius:50%;background:var(--bad)}.conn.online .dot{background:var(--ok)}.shape{display:inline-block;width:26px;height:26px;flex:0 0 auto;background:#fff}.shape-0{clip-path:polygon(50% 0,100% 100%,0 100%)}.shape-1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.shape-2{border-radius:50%}.shape-3{border-radius:0}.opt-bg-0{background:var(--opt-0)}.opt-bg-1{background:var(--opt-1)}.opt-bg-2{background:var(--opt-2)}.opt-bg-3{background:var(--opt-3)}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.options.count-2,.options.count-3{grid-template-columns:repeat(2,1fr)}.option{display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--radius);color:#fff;font-weight:700;font-size:1.1rem;text-align:start;min-height:84px;border:3px solid transparent;transition:transform .12s ease,opacity .25s ease,border-color .25s ease}.option .label{flex:1;line-height:1.4}.option.dimmed{opacity:.28;filter:saturate(.5)}.option.correct{border-color:#fff;box-shadow:0 0 0 4px var(--ok)}.timer-ring{position:relative;width:96px;height:96px;flex:0 0 auto}.timer-ring svg{transform:rotate(-90deg);width:100%;height:100%}.timer-ring circle{fill:none;stroke-width:9;stroke-linecap:round}.timer-ring .track{stroke:#ffffff1f}.timer-ring .bar{stroke:var(--ok);transition:stroke-dashoffset .25s linear,stroke .4s ease}.timer-ring.warn .bar{stroke:var(--warn)}.timer-ring.danger .bar{stroke:var(--bad)}.timer-ring .value{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}.timer-ring.danger .value{animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.lb{display:flex;flex-direction:column;gap:10px}.lb-row{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);animation:slideIn .45s cubic-bezier(.2,.9,.3,1) backwards}@keyframes slideIn{0%{opacity:0;transform:translate(-28px)}}.lb-rank{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--radius);font-weight:800;font-size:1.15rem;background:#ffffff1a}.lb-name{flex:1;font-weight:700;font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums}.lb-gain{font-size:.9rem;font-weight:700;color:var(--ok);min-width:62px;text-align:start}.lb-row.top1{background:#fcd34d29;border-color:var(--gold)}.lb-row.top1 .lb-rank{background:var(--gold);color:#3a2a00}.lb-row.top2{background:#d6dae824;border-color:var(--silver)}.lb-row.top2 .lb-rank{background:var(--silver);color:#2b2f3d}.lb-row.top3{background:#d6925524;border-color:var(--bronze)}.lb-row.top3 .lb-rank{background:var(--bronze);color:#35200c}.lb-row.me{outline:2px solid var(--brand-2)}.alert{padding:12px 16px;border-radius:var(--radius);background:#ef444429;border:1px solid rgba(239,68,68,.5);color:#ffdada;font-size:.95rem}.brand-logo-img{height:64px;width:auto;object-fit:contain;transition:transform .3s ease}.brand-logo-img.lg{height:95px}.brand-logo-img.sm{height:42px}.mascot-avatar{width:130px;height:130px;object-fit:contain;animation:floatMascot 3.5s ease-in-out infinite}.mascot-avatar.lg{width:190px;height:190px}.mascot-avatar.sm{width:80px;height:80px}.mascot-avatar.celebrate{animation:celebrateMascot 1.2s ease-in-out infinite alternate}@keyframes floatMascot{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}@keyframes celebrateMascot{0%{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-8px)}}