:root{color-scheme:light;--bg1:#E7EDFF;--bg2:#FFF1E6;--bg:#FBFCFF;--panel:#FFFFFF;--soft:#EEF1FB;--line:#E7EAF5;--line2:#D6DCEE;--ink:#22284A;--mut:#63698C;--dim:#A0A5C4;--coral:#FF6B5E;--sky:#3BB6F0;--mint:#25C98A;--gold:#FFB020;--accent:#FFB25E;--accentInk:#E8892E;--coralInk:#E8503F;--mintInk:#12A874;--spark:#2A4BF0;--spark2:#5B7BFF;--card:#FFFFFF;--disp:"SF Arabic Rounded","SF Pro Rounded","Baloo Bhaijaan 2",ui-rounded,"Segoe UI","Tajawal",Tahoma,system-ui,sans-serif;--sans:"SF Arabic","Segoe UI","Tajawal",Tahoma,system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;--shadow:0 24px 50px -26px rgba(80,70,130,.45);--sfx:0 12px 30px -16px rgba(80,70,130,.28)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(1000px 600px at 85% -6%,var(--bg1),transparent 55%),radial-gradient(900px 520px at 4% 0%,var(--bg2),transparent 52%),var(--bg);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{max-width:440px;margin:0 auto;height:100dvh;position:relative;overflow:hidden}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.screen.active{display:flex}.btn{font-family:var(--disp);font-weight:800;border:none;border-radius:16px;padding:15px 18px;font-size:16px;cursor:pointer;transition:transform .1s,box-shadow .15s}.btn:active{transform:scale(.97)}.btn.primary{background:linear-gradient(96deg,var(--spark),var(--spark2));color:#fff;box-shadow:0 14px 30px -12px var(--spark)}.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--sfx)}.btn.text{background:none;color:var(--mut);box-shadow:none;font-size:14px}.btn:disabled{opacity:.5;cursor:default}.field{font-family:var(--sans);font-weight:700;font-size:16px;text-align:center;border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--panel);color:var(--ink);width:100%;box-shadow:var(--sfx)}.field:focus{outline:none;border-color:var(--spark)}.home-inner{margin:auto;width:100%;max-width:360px;padding:24px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}.home-avatar{cursor:pointer}.brand{font-family:var(--disp);font-weight:800;font-size:34px;margin-top:-4px}.tagline{color:var(--mut);font-size:14px;margin-top:-8px}.picker{width:100%;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--sfx)}.pickrow{display:flex;align-items:center;gap:10px}.picklbl{font-weight:800;font-size:13px;color:var(--mut);width:52px;text-align:start}.pickopts{display:flex;gap:8px;flex-wrap:wrap;flex:1}.pickopts .opt{width:46px;height:46px;border-radius:12px;border:2px solid var(--line2);background:var(--panel);display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;font-size:12px;color:var(--mut)}.pickopts .opt.on{border-color:var(--spark);box-shadow:0 0 0 3px #ff4fa326}#createBtn{width:100%;margin-top:4px}#publicBtn,#soloBtn{width:100%}.joinrow{display:flex;gap:8px;width:100%}.joinrow .code{flex:1;letter-spacing:.3em;text-transform:uppercase}.joinrow .btn{flex:none}.conn{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:2px}.conn.ok{color:var(--mintInk)}.lobby-inner{margin:auto;width:100%;max-width:400px;padding:24px;display:flex;flex-direction:column;gap:18px}.lobby-head{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}.lobby-title{font-family:var(--disp);font-weight:800;font-size:22px}.code-chip{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:.22em;color:var(--spark);background:var(--panel);border:2px dashed var(--line2);border-radius:16px;padding:8px 22px;cursor:pointer}.lobby-sub{color:var(--mut);font-size:13px}.slots{display:grid;grid-template-columns:1fr 1fr;gap:12px}.slot{aspect-ratio:1/1.05;border-radius:20px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative;box-shadow:var(--sfx)}.slot.empty{border-style:dashed;box-shadow:none;background:transparent;color:var(--dim)}.slot .sn{font-weight:800;font-size:14px}.slot .rdy{font-weight:800;font-size:10px;padding:3px 10px;border-radius:100px}.slot .rdy.y{color:var(--mintInk);background:#25c98a24}.slot .rdy.n{color:var(--dim);background:var(--soft)}.slot .host{position:absolute;top:9px;inset-inline-end:9px;font-size:14px}.slot .off{position:absolute;top:9px;inset-inline-start:9px;font-size:11px;color:var(--dim)}.lobby-actions{display:flex;flex-direction:column;gap:10px}.start-hint{font-size:12.5px;font-weight:700;color:var(--mut);text-align:center;min-height:16px;margin-top:-2px}#startBtn:disabled+.start-hint{color:var(--coralInk)}.readyBtn.on{background:linear-gradient(96deg,var(--mint),#5fe0b0);color:#04382a;border:none}#game{background:linear-gradient(180deg,var(--bg1) 0%,var(--bg) 42%)}.finalvig{position:absolute;inset:0;box-shadow:inset 0 0 60px 10px #ff6b5e00;pointer-events:none;z-index:20;transition:box-shadow .5s}.hud{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 2px;font-size:11px;color:var(--mut);z-index:2}.hud-brand{font-family:var(--disp);font-weight:800;color:var(--ink)}.sndbtn{border:1px solid var(--line2);background:var(--panel);border-radius:100px;width:32px;height:32px;font-size:15px;cursor:pointer;box-shadow:var(--sfx)}.rail{display:flex;gap:7px;padding:6px 12px;z-index:2}.opp{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:5px 3px 6px;text-align:center;position:relative;min-width:0;box-shadow:var(--sfx);transition:transform .18s,box-shadow .18s}.opp.lead{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),var(--sfx)}.opp.win{transform:translateY(-4px) scale(1.06)}.opp.off{opacity:.45}.opp .oname{font-weight:800;font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.opp .osc{font-family:var(--disp);font-weight:800;font-size:17px;line-height:1;color:var(--ink)}.opp .crown{position:absolute;top:-9px;inset-inline-start:50%;transform:translate(50%);font-size:13px}[dir=rtl] .opp .crown{transform:translate(-50%)}.opp .fl{position:absolute;top:-7px;inset-inline-end:0;font-size:12px}.opp .rb{position:absolute;top:-16px;inset-inline-end:-6px;font-size:17px;opacity:0}.opp .rb.show{animation:pop 1.2s ease-out}@keyframes pop{0%{opacity:0;transform:scale(.4) translateY(6px)}25%{opacity:1;transform:scale(1.15)}80%{opacity:1}to{opacity:0;transform:translateY(-8px)}}.pulsebar{display:flex;align-items:center;gap:8px;padding:2px 16px 0;z-index:2}.pulsebar .rt{font-family:var(--mono);font-size:10px;color:var(--mut);font-weight:700;white-space:nowrap}.pulsebar .bar{flex:1;height:5px;border-radius:5px;background:var(--soft);overflow:hidden;display:flex;justify-content:flex-start}.pulsebar .bar i{display:block;height:100%;border-radius:5px;width:100%;background:linear-gradient(90deg,var(--mint),var(--sky));transition:width .3s}.board{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:6px 16px 8px;position:relative;z-index:1}.card{background:var(--card);border-radius:24px;position:relative;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:1/1}.card.center{width:66%}.card.mine{width:100%;box-shadow:0 0 0 3px var(--me,var(--coral)),0 0 24px -6px var(--me,var(--coral)),var(--shadow)}.card .lbl{position:absolute;top:9px;inset-inline-end:12px;font-weight:800;font-size:9px;color:var(--dim);z-index:4}.card.mine .lbl{color:var(--me,var(--coralInk))}.card .you{position:absolute;bottom:9px;inset-inline-start:12px;font-family:var(--disp);font-weight:800;font-size:13px;color:var(--me,var(--coralInk));z-index:4}.sym{position:absolute;transform:translate(50%,-50%);cursor:pointer;transition:transform .12s;z-index:2;line-height:0}.sym:active{transform:translate(50%,-50%) scale(.9)}.sym.hit{animation:hit .5s cubic-bezier(.34,1.6,.5,1)}@keyframes hit{0%{transform:translate(50%,-50%) scale(1)}35%{transform:translate(50%,-50%) scale(1.5)}to{transform:translate(50%,-50%) scale(1)}}.sym.hit .glow{filter:drop-shadow(0 0 10px currentColor)}.symfloat{display:inline-block;will-change:transform;animation:floaty 3.4s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1.6deg)}}.sym svg{filter:drop-shadow(0 3px 3px rgba(80,70,130,.18))}.sym.dim{opacity:.5}.plus{position:absolute;font-family:var(--disp);font-weight:800;font-size:34px;color:var(--mintInk);z-index:40;pointer-events:none;opacity:0}.plus.go{animation:plusgo 1s cubic-bezier(.3,1.4,.5,1)}@keyframes plusgo{0%{opacity:0;transform:translateY(10px) scale(.6)}25%{opacity:1;transform:translateY(0) scale(1.2)}to{opacity:0;transform:translateY(-60px) scale(.9)}}.lock{position:absolute;inset:0;border-radius:24px;background:#ff6b5e24;z-index:30;display:none;align-items:center;justify-content:center;pointer-events:none}.lock.on{display:flex}.lock .ring{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,107,94,.3);border-top-color:var(--coral);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.myreact{position:absolute;bottom:74px;inset-inline-start:50%;font-size:30px;z-index:45;pointer-events:none;opacity:0}.myreact.go{animation:myr 1.1s ease-out}@keyframes myr{0%{opacity:0;transform:translate(-50%,10px) scale(.5)}25%{opacity:1;transform:translate(-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-50px)}}.reactdock{display:flex;gap:8px;justify-content:center;padding:4px 10px 10px;z-index:2}.reactdock button{width:36px;height:36px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:18px;cursor:pointer;box-shadow:var(--sfx);transition:transform .1s}.reactdock button:active{transform:scale(.85)}.overlay{position:absolute;inset:0;z-index:50;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center;background:linear-gradient(180deg,#eaf4ffe6,#fdfbf7f7);backdrop-filter:blur(3px)}.overlay.on{display:flex}.count{font-family:var(--disp);font-weight:800;font-size:130px;line-height:1;color:var(--spark);text-shadow:0 12px 30px rgba(255,79,163,.3)}.count.tick{animation:ct .6s ease-out}@keyframes ct{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}to{opacity:1}}.count-sub{font-weight:800;color:var(--mut);font-size:14px}.overlay h2{font-family:var(--disp);font-weight:800;font-size:26px;margin:0}.overlay p{color:var(--mut);font-size:14px;margin:0}.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-top:8px}.pod{display:flex;flex-direction:column;align-items:center;gap:5px}.pod .bar{width:56px;border-radius:12px 12px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;font-family:var(--disp);font-weight:800;color:#fff;font-size:15px}.pod .nm{font-size:12px;font-weight:800}.pod .sc{font-family:var(--mono);font-size:11px;color:var(--mut);font-weight:700}#toast{position:absolute;top:14px;inset-inline:0;display:flex;justify-content:center;z-index:100;pointer-events:none}#toast .t{background:var(--ink);color:#fff;font-weight:700;font-size:13px;padding:10px 16px;border-radius:100px;opacity:0;transform:translateY(-10px);transition:.25s;box-shadow:var(--shadow)}#toast .t.show{opacity:1;transform:translateY(0)}#toast .t.nudge{background:linear-gradient(96deg,var(--spark),var(--spark2));pointer-events:auto;cursor:pointer}#toast .t.nudge b{text-decoration:underline}.acct{font-family:var(--disp);font-weight:800;font-size:13px;border:1px solid var(--line2);background:var(--panel);color:var(--mut);border-radius:100px;padding:8px 14px;cursor:pointer;box-shadow:var(--sfx);display:flex;align-items:center;gap:8px;max-width:100%}.acct .who{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}.acct .act{color:var(--spark)}.acct.in{border-color:var(--mint)}.acctrow{display:flex;gap:8px;width:100%}.acctrow[hidden]{display:none}.btn.sm{padding:11px 12px;font-size:14px;flex:1;position:relative}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:100px;background:var(--spark);color:#fff;font-size:11px;font-weight:800;margin-inline-start:4px}.badge[hidden]{display:none}.lobby-name{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--spark)}.lobby-name[hidden]{display:none}.invite-panel{display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--sfx)}.invite-panel[hidden]{display:none}.invite-row{display:flex;gap:8px}.invite-row .field{flex:1}.invite-row .btn{flex:none}.invite-row2{display:flex;gap:8px;justify-content:space-between}.invite-row2 .btn{flex:1}.slot .pdot{position:absolute;top:9px;inset-inline-end:9px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--panel)}.slot .pdot.online{background:var(--mint)}.slot .pdot.busy{background:var(--gold)}.slot .pdot.offline{background:var(--dim)}.slot .host{inset-inline-end:24px}.sheet-h{font-family:var(--disp);font-weight:800;font-size:20px;text-align:center;margin:2px 0 14px}.list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto}.list .empty{color:var(--dim);text-align:center;font-weight:700;font-size:14px;padding:20px 0}.litem{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.litem .li-main{flex:1;min-width:0}.litem .li-name{font-family:var(--disp);font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.litem .li-sub{color:var(--mut);font-size:12px;font-weight:700}.litem .li-act{display:flex;gap:6px;flex:none}.litem .li-act .btn{padding:9px 14px;font-size:13px}.chip-sm{font-family:var(--mono);font-weight:800;font-size:12px;color:var(--spark);background:var(--panel);border:1px dashed var(--line2);border-radius:8px;padding:2px 7px}.sheet{position:absolute;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center;background:#2a254752;backdrop-filter:blur(3px)}.sheet.on{display:flex;animation:sheetbg .2s ease-out}@keyframes sheetbg{0%{opacity:0}to{opacity:1}}.sheet-card{width:100%;max-width:440px;background:var(--panel);border-radius:26px 26px 0 0;padding:22px 22px calc(26px + env(safe-area-inset-bottom));position:relative;box-shadow:0 -20px 50px -24px #50468280;animation:sheetup .28s cubic-bezier(.2,1,.3,1)}@keyframes sheetup{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-x{position:absolute;top:14px;inset-inline-end:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);background:var(--panel);color:var(--mut);font-size:13px;cursor:pointer}.auth-stage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.auth-stage[hidden]{display:none}.auth-emoji{font-size:40px;margin-top:6px}.auth-stage h3{font-family:var(--disp);font-weight:800;font-size:22px;margin:0}.auth-stage p{color:var(--mut);font-size:14px;margin:0 0 4px;line-height:1.5}.auth-stage .btn{width:100%;max-width:320px}.auth-stage .field{max-width:320px}.btn.google{background:#fff;color:#2a2547;border:1px solid var(--line2);box-shadow:var(--sfx);display:flex;align-items:center;justify-content:center;gap:10px}.btn.google .g{font-family:Arial,sans-serif;font-weight:900;color:#4285f4;font-size:18px;line-height:1}.btn.apple{background:#000;color:#fff;border:none;box-shadow:var(--sfx);display:flex;align-items:center;justify-content:center;gap:10px}.btn.apple[hidden]{display:none}.btn.apple .a{font-size:18px;line-height:1;margin-top:-2px}.auth-or{display:flex;align-items:center;gap:10px;width:100%;max-width:320px;color:var(--dim);font-size:12px;font-weight:700}.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--line2)}.auth-msg{font-size:13px;font-weight:700;min-height:16px}.auth-msg.ok{color:var(--mintInk)}.auth-msg.err{color:var(--coralInk)}.auth-fine{color:var(--dim);font-size:11px;line-height:1.5;margin-top:2px}.welcome-inner{margin:auto;width:100%;max-width:340px;padding:24px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}.welcome-inner .btn{width:100%}.welcome-inner .brand{margin-top:6px}.id-title{font-family:var(--disp);font-weight:800;font-size:22px;margin-top:2px}.id-sub{color:var(--mut);font-size:13px;margin-top:-8px}#identity .btn{width:100%}.home-top{width:100%;display:flex;justify-content:flex-end;margin-bottom:-8px}.iconbtn{border:1px solid var(--line2);background:var(--panel);border-radius:100px;width:40px;height:40px;font-size:18px;cursor:pointer;box-shadow:var(--sfx)}.iconbtn:active{transform:scale(.94)}.pickopts .opt.col{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,0,0,.06)}.pickopts .opt.col.on{border-color:#fff;box-shadow:0 0 0 3px var(--spark)}.myscore{position:absolute;bottom:8px;inset-inline-start:10px;display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:100px;background:var(--panel);border:1.5px solid var(--me,var(--line2));box-shadow:var(--sfx);z-index:6}.myscore .mstar{font-size:15px;line-height:1;color:var(--me,var(--gold))}.myscore b{font-family:var(--disp);font-weight:800;font-size:24px;line-height:1;color:var(--me,var(--coralInk));font-variant-numeric:tabular-nums;min-width:14px;text-align:center}.myscore .msu{font-size:11px;font-weight:800;color:var(--mut)}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important}}