:root{--bg: #15151a;--surface: #1f1f25;--card: #26262d;--nested: #2f2f37;--raise: #3a3a43;--text: #ffffff;--text2: #a2a2ac;--text3: #6c6c77;--accent: #d4af37;--accent-2: #e9c75a;--on-accent: #1a1505;--label: #c9a84a;--divider: #2b2b32;--green: #4caf50;--red: #e5544a;--coin: #ffb300;--gem: #36c5f0;--shadow: 0 8px 28px rgba(0, 0, 0, .45);--r-card: 16px;--r-pill: 22px;--r-sm: 10px}[data-theme=light]{--bg: #f1e6cc;--surface: #fbf4e3;--card: #fffdf6;--nested: #f3e9d2;--raise: #ffffff;--text: #3b2e18;--text2: #856f4c;--text3: #ac9468;--accent: #78350f;--accent-2: #9a4d17;--on-accent: #fff8ec;--label: #9a6b2f;--divider: #e8dabb;--green: #3e8e41;--red: #c0392b;--coin: #c9881a;--gem: #1e88c7;--shadow: 0 8px 24px rgba(120, 90, 30, .18)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{font-family:Tajawal,system-ui,-apple-system,sans-serif;background:#0c0c10;color:var(--text);display:flex;justify-content:center;align-items:stretch}[data-theme=light] body{background:#e2d3b0}button{font-family:inherit;cursor:pointer}.app{position:relative;width:100%;max-width:430px;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px #00000080}.app-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}.app-icon svg{display:block}.topbar{position:sticky;top:0;z-index:40;height:58px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;background:var(--bg);border-bottom:1px solid var(--divider)}.topbar .side{display:flex;align-items:center;gap:6px;min-width:64px}.topbar .side.left{justify-content:flex-start}.topbar .side.right{justify-content:flex-end}.topbar .title{font-weight:800;font-size:18px;letter-spacing:.3px}.avatar{width:38px;height:38px;border-radius:50%;background:var(--nested);display:grid;place-items:center;font-size:20px;position:relative;flex:none;overflow:hidden;border:2px solid transparent;background-clip:padding-box}.avatar.ring{border-color:var(--accent)}.dot-online{position:absolute;left:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--bg)}.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--text);background:transparent;border:none;cursor:pointer;transition:background .15s}.iconbtn:active{background:var(--card)}.screens{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.screens::-webkit-scrollbar{width:0}.screen{padding:14px 14px 96px;animation:fade .25s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.toptabs{display:flex;gap:22px;padding:0 4px;margin-bottom:16px;border-bottom:1px solid var(--divider)}.toptab{position:relative;padding:12px 2px;font-weight:700;font-size:15px;color:var(--text3);cursor:pointer;background:none;border:none}.toptab.active{color:var(--text)}.toptab.active:after{content:"";position:absolute;bottom:-1px;right:0;left:0;height:3px;border-radius:3px;background:var(--accent)}.toptab .badge{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-inline-start:5px;vertical-align:middle}.sec{display:flex;align-items:center;justify-content:space-between;margin:18px 2px 10px}.sec:first-child{margin-top:4px}.sec h3{font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--label);text-transform:uppercase}.sec .more{color:var(--text3);display:flex;align-items:center;gap:2px;font-size:12px;background:none;border:none;cursor:pointer}.card{background:var(--card);border-radius:var(--r-card);padding:14px}.frow{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 6px}.frow::-webkit-scrollbar{height:0}.fitem{display:flex;flex-direction:column;align-items:center;gap:6px;width:60px;flex:none}.fitem .avatar{width:56px;height:56px;font-size:28px}.fitem span{font-size:11px;color:var(--text2);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.add-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--nested);color:var(--accent);border:2px dashed var(--accent)}.hscroll{display:flex;gap:12px;overflow-x:auto;padding:2px;scroll-snap-type:x mandatory}.hscroll::-webkit-scrollbar{height:0}.shortcut{position:relative;flex:none;width:172px;height:108px;border-radius:14px;overflow:hidden;scroll-snap-align:start;display:flex;align-items:flex-end;padding:12px;color:#fff;cursor:pointer}.gemoji{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;opacity:.95;color:#fff}.shortcut:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%)}.shortcut .nm{position:relative;z-index:2;font-weight:800;font-size:16px;text-shadow:0 1px 4px rgba(0,0,0,.5)}.shortcut .play{position:absolute;z-index:2;bottom:12px;left:12px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12px;padding:6px 14px;border-radius:var(--r-pill);border:none;cursor:pointer}.quest .qhead{display:flex;align-items:center;gap:12px;margin-bottom:10px}.qico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#c026d3);display:grid;place-items:center;flex:none;color:#fff}.qhead .qt{flex:1}.qhead .qt b{font-size:16px}.qhead .qt .timer{font-size:12px;color:var(--text3)}.bar{height:6px;border-radius:6px;background:var(--nested);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:6px}.reward{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:14px}.reward .coin{color:var(--coin)}.btn{background:var(--accent);color:var(--on-accent);font-family:inherit;font-weight:800;font-size:14px;border:none;border-radius:var(--r-pill);padding:10px 20px;cursor:pointer;transition:transform .1s,filter .15s}.btn:active{transform:scale(.96)}.btn.ghost{background:var(--nested);color:var(--text)}.btn.block{width:100%;padding:14px;font-size:15px}.btn.sm{padding:7px 16px;font-size:13px}.btn.row{display:flex;align-items:center;justify-content:center;gap:8px}.act{display:flex;gap:12px;padding:14px 2px;border-bottom:1px solid var(--divider)}.act .avatar{width:44px;height:44px;font-size:22px}.act .body{flex:1}.act .body .nm{font-weight:700;font-size:14px}.act .body .tx{color:var(--text2);font-size:14px;margin-top:2px}.act .time{color:var(--text3);font-size:11px}.chips{display:flex;gap:8px;overflow-x:auto;padding:2px;margin-bottom:14px}.chips::-webkit-scrollbar{height:0}.chip{flex:none;display:flex;align-items:center;gap:6px;background:var(--card);color:var(--text2);border:none;font-family:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:var(--r-pill);cursor:pointer}.chip.active{background:var(--accent);color:var(--on-accent)}.featured{position:relative;height:150px;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;padding:16px;margin-bottom:12px;color:#fff;cursor:pointer}.featured:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.65),transparent 55%)}.featured .meta{position:relative;z-index:2}.featured .meta .nm{font-weight:900;font-size:24px;text-shadow:0 2px 6px rgba(0,0,0,.5)}.featured .meta .tg{font-size:13px;opacity:.95}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.gcard{position:relative;height:128px;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:12px;color:#fff;cursor:pointer;transition:transform .12s}.gcard:active{transform:scale(.97)}.gcard:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 58%)}.gcard .nm{position:relative;z-index:2;font-weight:800;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.5)}.gcard .players{position:absolute;z-index:2;top:9px;right:9px;background:#00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}.lrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--divider)}.lrow .avatar{width:46px;height:46px;font-size:24px}.lrow .info{flex:1}.lrow .info .nm{font-weight:700;font-size:15px}.lrow .info .sub{font-size:12px;color:var(--text3)}.lrow .info .sub.on{color:var(--green)}.room{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px;margin-bottom:10px;cursor:pointer}.room .ric{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;flex:none;color:#fff}.room .rinfo{flex:1}.room .rinfo .nm{font-weight:800;font-size:15px}.room .rinfo .desc{font-size:12px;color:var(--text2);margin-top:2px}.room .rmeta{text-align:center}.tag-open{background:#4caf5026;color:var(--green);font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}.tag-full{background:#e5544a26;color:var(--red);font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px}.room .rmeta .pc{font-size:12px;color:var(--text3);margin-top:5px}.wallet{display:flex;gap:10px;margin-bottom:8px}.wallet .w{flex:1;background:var(--card);border-radius:14px;padding:12px;display:flex;align-items:center;gap:8px;justify-content:center;font-weight:800;border:none;font-family:inherit;color:var(--text)}.coin-c{color:var(--coin)}.gem-c{color:var(--gem)}.promo{position:relative;border-radius:16px;padding:18px;margin-bottom:8px;overflow:hidden;color:#fff;background:linear-gradient(120deg,#7c3aed,#d4af37)}.promo h2{font-size:20px;font-weight:900}.promo p{font-size:13px;opacity:.95;margin:4px 0 12px}.promo .crown{position:absolute;left:-6px;top:-10px;opacity:.18}.bundle{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px}.bundle .b-ic{width:50px;height:50px;border-radius:12px;background:var(--nested);display:grid;place-items:center;flex:none;color:var(--accent)}.bundle .b-info{flex:1}.bundle .b-info .nm{font-weight:800}.bundle .b-info .sub{font-size:12px;color:var(--text2)}.price{display:flex;align-items:center;gap:4px;font-weight:800;color:var(--text)}.cover{height:140px;margin:-14px -14px 0;background:repeating-linear-gradient(135deg,var(--nested) 0 18px,var(--card) 18px 36px);position:relative}.cover .editc{position:absolute;left:12px;bottom:12px;background:var(--card)}.pavatar{width:96px;height:96px;border-radius:50%;background:var(--nested);display:grid;place-items:center;font-size:48px;margin:-48px auto 0;border:4px solid var(--bg);position:relative;z-index:2}.pavatar .cam{position:absolute;left:2px;bottom:2px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;border:3px solid var(--bg)}.pname{text-align:center;font-weight:900;font-size:22px;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px}.bio{margin:14px 0;text-align:center;color:var(--text3);background:var(--nested);border-radius:14px;padding:16px;font-weight:600;cursor:pointer}.stats{display:flex;background:var(--card);border-radius:14px;overflow:hidden}.stats .st{flex:1;text-align:center;padding:16px}.stats .st .v{font-weight:900;font-size:22px}.stats .st .k{font-size:11px;color:var(--text3);letter-spacing:1px;margin-top:2px;text-transform:uppercase}.stats .sep{width:1px;background:var(--divider);margin:14px 0}.pstat{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--divider)}.pstat .g{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#fff}.pstat .pn{flex:1;font-weight:700}.pstat .lv{font-weight:800;color:var(--accent)}.bottomnav{position:absolute;bottom:0;right:0;left:0;height:68px;z-index:50;background:var(--surface);border-top:1px solid var(--divider);display:flex;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}.nav-b{background:none;border:none;color:var(--text3);cursor:pointer;display:grid;place-items:center;width:56px;height:56px;transition:color .15s}.nav-b.active{color:var(--accent)}.nav-b{position:relative}.nav-dot{position:absolute;top:11px;right:13px;width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--surface)}.fab{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;transform:translateY(-14px);box-shadow:0 6px 18px #d4af3773;border:4px solid var(--surface)}.fab.active{filter:brightness(1.05);color:var(--on-accent)}.scrim{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;background:#0000008c;opacity:0;pointer-events:none;transition:opacity .25s}.scrim.show{opacity:1;pointer-events:auto}.sheet{position:absolute;right:0;left:0;bottom:0;z-index:61;background:var(--surface);border-radius:22px 22px 0 0;padding:8px 18px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-height:80%;overflow-y:auto}.sheet.show{transform:none}.grab{width:42px;height:5px;border-radius:5px;background:var(--divider);margin:8px auto 16px}.sheet h2{font-size:20px;font-weight:900;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.sheet h2 .app-icon{color:var(--accent)}.sheet .sub{color:var(--text2);text-align:center;margin:4px 0 18px;font-size:14px}.opt{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;border:none;width:100%;font-family:inherit;color:var(--text);text-align:start}.opt .oe{width:40px;height:40px;border-radius:11px;background:var(--nested);display:grid;place-items:center;flex:none;color:var(--accent)}.opt .ot{flex:1}.opt .ot b{font-size:15px;display:block}.opt .ot span{font-size:12px;color:var(--text3)}.toast{position:absolute;bottom:84px;right:50%;transform:translate(50%) translateY(20px);z-index:80;background:var(--raise);color:var(--text);font-weight:700;font-size:14px;padding:12px 20px;border-radius:30px;box-shadow:var(--shadow);opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translate(50%) translateY(0)}.auth-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--card);color:var(--text);border:1px solid var(--divider);border-radius:var(--r-pill);padding:13px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:border-color .2s,transform .1s}.auth-google:active{transform:scale(.98)}.auth-google:hover{border-color:var(--accent)}.auth-google .g-logo{width:22px;height:22px;border-radius:50%;background:#fff;color:#4285f4;font-weight:900;display:grid;place-items:center;font-size:14px}.auth-or{display:flex;align-items:center;gap:12px;color:var(--text3);font-size:13px;margin:14px 2px}.auth-or:before,.auth-or:after{content:"";flex:1;height:1px;background:var(--divider)}.auth-input{width:100%;background:var(--card);border:1px solid var(--divider);border-radius:12px;padding:13px 14px;margin-bottom:10px;font-family:inherit;font-size:15px;color:var(--text);outline:none;transition:border-color .2s}.auth-input:focus{border-color:var(--accent)}.auth-input::placeholder{color:var(--text3)}.auth-msg{font-size:13px;font-weight:600;padding:10px 12px;border-radius:10px;margin-bottom:4px}.auth-msg.err{background:#e5544a1f;color:var(--red)}.auth-msg.info{background:#4caf501f;color:var(--green)}.auth-toggle{width:100%;background:none;border:none;color:var(--accent);font-family:inherit;font-weight:700;font-size:14px;padding:14px 0 4px;cursor:pointer}.signin-prompt{text-align:center;padding:40px 20px}.signin-prompt .big{font-size:60px;margin-bottom:8px}.signin-prompt h3{font-size:20px;font-weight:900;margin-bottom:6px}.signin-prompt p{color:var(--text2);font-size:14px;margin-bottom:20px;line-height:1.7}.pavatar img,.avatar img{width:100%;height:100%;object-fit:cover}.signout-row{margin-top:18px}