:root{
  --bg:linear-gradient(135deg,#0f0a1e 0%,#1a0f3a 50%,#0d0a1f 100%);
  --surface:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.12);
  --gold:#ffd700;--orange:#ff8c00;--purple:#a78bfa;
  --cyan:#00d9ff;--pink:#ff1493;--green:#00ff88;--red:#ff4466;
  --text:#f0f4ff;--muted:rgba(240,244,255,0.5);
  --card-bg:rgba(20,10,40,0.45);--card-border:rgba(255,255,255,0.15);
}
body.light{
  --bg:linear-gradient(135deg,#f0f2ff 0%,#e8ecff 50%,#f5f0ff 100%);
  --surface:rgba(0,0,0,0.06);--border:rgba(80,80,180,0.18);
  --text:#1a1a3e;--muted:rgba(26,26,62,0.55);
  --card-bg:rgba(255,255,255,0.75);--card-border:rgba(100,100,220,0.2);
  --gold:#c9900a;--orange:#c06000;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;overflow-x:hidden}
body{font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;transition:background .4s,color .4s}


/* ══ SHOP ══ */
.shop-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.85);display:flex;align-items:flex-end;justify-content:center;padding:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s;touch-action:none}
.shop-overlay.show{opacity:1;pointer-events:all}
.shop-box{background:rgba(15,8,32,.98);border:1.5px solid rgba(167,139,250,.25);border-radius:28px 28px 0 0;padding:24px 18px 36px;width:100%;max-width:480px;max-height:88vh;display:flex;flex-direction:column;animation:slideUp .35s cubic-bezier(.34,1.56,.64,1) both;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
body.qz-no-scroll{overflow:hidden!important;position:fixed;width:100%;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.shop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;flex-shrink:0}
.shop-title{font-size:1.25rem;font-weight:900;color:var(--gold)}
.shop-balance{background:rgba(255,215,0,.12);border:1.5px solid rgba(255,215,0,.3);border-radius:50px;padding:6px 14px;font-size:.9rem;font-weight:900;color:var(--gold)}
.shop-close{background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;padding:4px 8px;border-radius:8px}
.shop-tabs{display:flex;gap:6px;margin-bottom:14px;flex-shrink:0}
.shop-tab{flex:1;padding:8px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.75rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s}
.shop-tab.active{background:rgba(255,215,0,.15);border-color:var(--gold);color:var(--gold)}
.shop-items{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.shop-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 14px;transition:all .2s}
@media (hover:hover) and (pointer:fine){.shop-item:hover{border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.05)}}
.shop-item-icon{font-size:2rem;width:44px;text-align:center;flex-shrink:0}
.shop-item-info{flex:1;min-width:0}
.shop-item-name{font-size:.92rem;font-weight:800;color:var(--text)}
.shop-item-desc{font-size:.72rem;color:var(--muted);margin-top:2px}
.shop-item-owned{font-size:.68rem;color:var(--green);margin-top:3px;font-weight:700}
.shop-buy-btn{background:linear-gradient(135deg,var(--gold),var(--orange));border:none;border-radius:12px;padding:9px 14px;font-size:.82rem;font-weight:900;font-family:inherit;color:#0f0a1e;cursor:pointer;transition:all .22s;white-space:nowrap;flex-shrink:0}
@media (hover:hover) and (pointer:fine){.shop-buy-btn:hover{transform:scale(1.06);box-shadow:0 4px 16px rgba(255,215,0,.4)}}
.shop-buy-btn:disabled{background:rgba(255,255,255,.1);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}
.shop-buy-btn.owned{background:rgba(0,255,136,.15);border:1.5px solid var(--green);color:var(--green)}
/* زر المتجر في اللعبة */
.shop-game-btn{background:rgba(255,215,0,.1);border:1.5px solid rgba(255,215,0,.3);color:var(--gold);border-radius:16px;padding:8px 18px;font-size:.95rem;font-family:inherit;font-weight:900;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:2px}
@media (hover:hover) and (pointer:fine){.shop-game-btn:hover{background:rgba(255,215,0,.2);transform:translateY(-2px)}}
.power-bar{display:flex;gap:6px;align-items:center}
.power-btn{background:rgba(167,139,250,.12);border:1.5px solid rgba(167,139,250,.35);border-radius:16px;padding:7px 14px;font-size:.9rem;font-family:inherit;font-weight:800;cursor:pointer;transition:all .2s;color:var(--purple);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
@media (hover:hover) and (pointer:fine){.power-btn:hover:not(.empty){background:rgba(167,139,250,.22);transform:translateY(-2px)}}
.power-btn.empty{opacity:.3;cursor:not-allowed}
.power-cnt{font-size:.65rem;background:rgba(167,139,250,.28);border-radius:50px;padding:1px 6px}

/* BG orbs */
.orb{position:fixed;border-radius:50%;filter:blur(110px);opacity:.14;pointer-events:none;z-index:0;will-change:transform;transform:translateZ(0)}
.orb1{width:620px;height:620px;background:#a78bfa;top:-220px;left:-220px;animation:od 16s ease-in-out infinite}
.orb2{width:520px;height:520px;background:#ff8c00;bottom:-180px;right:-180px;animation:od 20s ease-in-out infinite reverse}
.orb3{width:420px;height:420px;background:#00d9ff;top:40%;left:40%;animation:od 24s ease-in-out infinite .5s}
@keyframes od{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(55px,-55px) scale(1.1)}}
body.light .orb{opacity:.07}

.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:10px 12px 60px}

/* TOPBAR */
.topbar{width:100%;max-width:700px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 4px}
.topbar-side{display:flex;gap:6px;align-items:center}
.topbar-score{display:flex;align-items:center;gap:6px;background:rgba(255,215,0,.12);border:1.5px solid rgba(255,215,0,.3);border-radius:50px;padding:7px 14px;font-size:.85rem;font-weight:900;color:var(--gold);white-space:nowrap;transition:all .3s}
@media (hover:hover) and (pointer:fine){.topbar-score:hover{background:rgba(255,215,0,.2)}}
body.light .topbar-score{background:rgba(201,144,10,.1);border-color:rgba(201,144,10,.35)}
/* MAILBOX */
.mailbox-btn{position:relative;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);border-radius:50px;padding:7px 13px;font-size:.9rem;cursor:pointer;transition:all .22s;display:flex;align-items:center;gap:5px;color:var(--text);font-weight:900;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mailbox-btn:hover{background:rgba(167,139,250,.15);border-color:var(--purple);transform:scale(1.06)}}
.mailbox-badge{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:.6rem;font-weight:900;border-radius:50px;padding:2px 6px;min-width:18px;text-align:center;line-height:1.4;animation:mbPop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes mbPop{from{transform:scale(0)}to{transform:scale(1)}}
/* MAILBOX OVERLAY */
#mailboxOverlay{position:fixed;inset:0;z-index:9200;background:rgba(0,0,0,.80);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
#mailboxOverlay.show{opacity:1;pointer-events:all}
#mailboxBox{background:rgba(18,10,38,.97);border:1.5px solid rgba(167,139,250,.3);border-radius:28px;padding:28px 22px;width:100%;max-width:420px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:su .4s cubic-bezier(.34,1.56,.64,1) both}
body.light #mailboxBox{background:rgba(248,248,255,.97)}
.mb-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-shrink:0}
.mb-title{font-size:1.2rem;font-weight:900;color:var(--purple)}
.mb-close{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .2s}
@media (hover:hover) and (pointer:fine){.mb-close:hover{color:var(--text)}}
.mb-stats{display:flex;gap:10px;margin-bottom:16px;flex-shrink:0}
.mb-stat{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:10px 8px;text-align:center}
.mb-stat-val{font-size:1.3rem;font-weight:900;color:var(--gold)}
.mb-stat-lbl{font-size:.62rem;color:var(--muted);margin-top:2px}
.mb-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px}
.mb-item{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:12px 14px;animation:rowIn .3s ease both}
.mb-item-new{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.07)}
.mb-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.mb-item-title{font-size:.88rem;font-weight:800;color:var(--text);flex:1}
.mb-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mb-item-name{font-size:.88rem;font-weight:800;color:var(--text)}
.mb-item-stars{font-size:.82rem;letter-spacing:1px}
.mb-item-msg{font-size:.78rem;color:var(--muted);line-height:1.5}
.mb-item-date{font-size:.62rem;color:var(--muted);margin-top:4px}
.mb-empty{text-align:center;padding:30px 0;color:var(--muted);font-size:.88rem}
.mb-loading{text-align:center;padding:24px;color:var(--muted);font-size:.85rem}
.icon-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:50px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;transition:all .22s;color:var(--text)}
@media (hover:hover) and (pointer:fine){.icon-btn:hover{background:rgba(255,215,0,.15);border-color:var(--gold);transform:scale(1.08)}}

/* LANG DROPDOWN */
.lang-wrap{position:relative}
.lang-btn{background:var(--surface);border:1.5px solid var(--border);color:var(--text);padding:9px 14px;border-radius:50px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.lang-btn:hover{border-color:var(--purple);background:rgba(167,139,250,.12)}}
.lang-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;background:rgba(15,10,35,.97);border:1.5px solid var(--border);border-radius:16px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:170px;z-index:2000;box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden}
body.light .lang-menu{background:rgba(248,248,255,.97)}
.lang-menu.open{display:block;animation:dropIn .25s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.lang-item{display:flex;align-items:center;gap:8px;padding:11px 16px;cursor:pointer;transition:background .18s;color:var(--text);border:none;width:100%;background:transparent;font-family:inherit;font-size:.9rem;font-weight:600}
@media (hover:hover) and (pointer:fine){.lang-item:hover{background:rgba(255,215,0,.1)}}
.lang-item.active{background:rgba(255,215,0,.18);color:var(--gold);font-weight:800}
.lang-item .flag{font-size:1.2rem}

/* XP BAR */
.xp-bar{width:100%;max-width:700px;display:flex;align-items:center;gap:12px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:18px;padding:11px 16px;margin-bottom:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.xp-icon{font-size:1.5rem;animation:xpBounce 2.5s ease-in-out infinite}
@keyframes xpBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.xp-info{flex:1;min-width:0}
.xp-lvl-name{font-size:.72rem;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.xp-track{background:rgba(255,255,255,.1);border-radius:50px;height:7px;overflow:hidden}
body.light .xp-track{background:rgba(0,0,0,.1)}
.xp-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--gold),var(--orange));transition:width .9s cubic-bezier(.34,1.56,.64,1)}
.xp-nums{font-size:.66rem;color:var(--muted);margin-top:3px}
.xp-total{font-size:.9rem;font-weight:900;color:var(--gold);white-space:nowrap}

/* SCREENS */
.screen{display:none;width:100%;max-width:700px;animation:su .45s cubic-bezier(.34,1.56,.64,1) both;isolation:isolate}
.screen.active{display:block}
@keyframes su{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

/* CARD */
.card{position:relative;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:28px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);padding:38px 32px}
@media(max-width:540px){.card{padding:26px 18px;border-radius:22px}}

/* HOME */
.hero{text-align:center;margin-bottom:28px;animation:fadeScale .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes fadeScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.logo{font-size:76px;display:block;margin:0 auto 8px auto;filter:drop-shadow(0 0 30px rgba(255,215,0,.4));animation:logoBounce 3.5s ease-in-out infinite;width:120px;height:120px;object-fit:contain;}
@keyframes logoBounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(4deg)}}
.game-title{font-size:2.7rem;font-weight:900;background:linear-gradient(90deg,#ffd700,#ff8c00,#ff1493,#a78bfa,#00d9ff);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 5s linear infinite;line-height:1.1;margin-bottom:6px}
@keyframes shimmer{0%{background-position:0%}100%{background-position:300%}}
.game-sub{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.v-tag{display:inline-block;background:linear-gradient(135deg,rgba(167,139,250,.2),rgba(255,215,0,.15));border:1px solid rgba(167,139,250,.4);color:var(--purple);font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:50px}

/* CATS */
.cats{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:16px 0 20px}
.cat{background:var(--surface);border:1.5px solid var(--border);border-radius:50px;padding:7px 15px;font-size:.82rem;color:var(--muted);cursor:pointer;transition:all .22s;font-weight:600;user-select:none}
@media (hover:hover) and (pointer:fine){.cat:hover{transform:translateY(-2px)}}
.cat.selected{background:rgba(255,215,0,.18);border-color:var(--gold);color:var(--gold);box-shadow:0 0 18px rgba(255,215,0,.25)}

/* DIFFICULTY */
.diff-lbl{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;text-align:center;margin-bottom:10px}
.diff-row{display:flex;gap:10px;justify-content:center;margin-bottom:20px}
.diff-btn{padding:11px 26px;border-radius:50px;border:2px solid var(--border);background:transparent;color:var(--muted);font-size:.95rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.diff-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}}
@keyframes goldFlashBtn{
  0%,100%{box-shadow:0 6px 22px rgba(255,215,0,.5);border-color:rgba(255,215,0,1)}
  50%{box-shadow:0 2px 6px rgba(255,215,0,.1);border-color:rgba(255,215,0,.2)}
}
.diff-btn.sel{background:linear-gradient(135deg,var(--gold),var(--orange));border:2px solid var(--gold);color:#0f0a1e;font-weight:900;transform:scale(1.07);animation:goldFlashBtn 1.2s ease-in-out infinite}

/* NAME INPUT (kept for VS mode) */
.input-label{display:block;font-size:.75rem;color:var(--muted);text-align:center;margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em}
.name-input{width:100%;padding:13px 18px;border-radius:15px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;font-family:inherit;font-weight:700;text-align:center;outline:none;transition:all .24s;margin-bottom:16px}
.name-input:focus{border-color:var(--gold);background:rgba(255,215,0,.07);box-shadow:0 0 0 4px rgba(255,215,0,.12)}

/* PROFILE CARD */
.profile-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:13px 16px;margin-bottom:16px;cursor:pointer;transition:all .25s;position:relative}
@media (hover:hover) and (pointer:fine){.profile-card:hover{border-color:var(--gold);background:rgba(255,215,0,.07);transform:translateY(-2px)}}
.profile-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,rgba(255,215,0,.2),rgba(255,140,0,.15));border:2px solid rgba(255,215,0,.35);display:flex;align-items:center;justify-content:center;font-size:1.65rem;flex-shrink:0;transition:transform .25s}
@media (hover:hover) and (pointer:fine){.profile-card:hover .profile-avatar{transform:scale(1.1)}}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-label{font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.5px}
.profile-edit-hint{font-size:.7rem;color:var(--gold);opacity:.7;font-weight:700;display:flex;align-items:center;gap:4px}

/* PROFILE MODAL */
.profile-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:8000;display:flex;align-items:flex-start;justify-content:center;padding:16px;padding-top:40px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}
.profile-modal{background:rgba(18,10,38,.97);border:1.5px solid rgba(255,255,255,.15);border-radius:26px;padding:32px 24px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:translateZ(0);will-change:transform;overflow-y:auto;max-height:100%;overscroll-behavior:contain}
body.light .profile-modal{background:rgba(248,248,255,.97)}
.profile-modal-title{font-size:1.25rem;font-weight:900;color:var(--text);margin-bottom:6px;text-align:center}
.profile-modal-sub{font-size:.78rem;color:var(--muted);text-align:center;margin-bottom:22px}
.avatar-preview-wrap{display:flex;justify-content:center;margin-bottom:20px}
.avatar-preview{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,rgba(255,215,0,.22),rgba(255,140,0,.15));border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2.4rem;box-shadow:0 0 28px rgba(255,215,0,.3);transition:all .3s}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:20px;max-height:180px;overflow-y:auto}
.emoji-opt{background:var(--surface);border:2px solid transparent;border-radius:12px;padding:8px 4px;font-size:1.35rem;cursor:pointer;transition:all .2s;text-align:center;line-height:1}
@media (hover:hover) and (pointer:fine){.emoji-opt:hover{border-color:rgba(255,215,0,.5);background:rgba(255,215,0,.1);transform:scale(1.1)}}
.emoji-opt.sel{border-color:var(--gold);background:rgba(255,215,0,.18);box-shadow:0 0 14px rgba(255,215,0,.3)}
.profile-name-input{width:100%;padding:13px 16px;border-radius:14px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-size:16px;font-family:inherit;font-weight:700;text-align:center;outline:none;transition:border-color .24s,box-shadow .24s;margin-bottom:18px;transform:translateZ(0)}
.profile-name-input:focus{border-color:var(--gold);background:rgba(255,215,0,.07);box-shadow:0 0 0 4px rgba(255,215,0,.12)}
.profile-save-btn{width:100%;padding:15px;border-radius:15px;border:none;background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:1rem;font-weight:900;font-family:inherit;cursor:pointer;transition:all .22s;box-shadow:0 6px 22px rgba(255,215,0,.35)}
@media (hover:hover) and (pointer:fine){.profile-save-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,215,0,.48)}}
.profile-cancel-btn{width:100%;padding:12px;border-radius:13px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.9rem;font-family:inherit;cursor:pointer;transition:all .2s;margin-top:8px}
@media (hover:hover) and (pointer:fine){.profile-cancel-btn:hover{border-color:var(--text);color:var(--text)}}

/* ════════════ CUSTOM CONFIRM MODAL ════════════ */
.qz-confirm-bg{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:qzcFade .2s ease}
@keyframes qzcFade{from{opacity:0}to{opacity:1}}
.qz-confirm-box{background:rgba(18,10,38,.98);border:1.5px solid rgba(255,68,102,.35);border-radius:24px;padding:24px 22px 20px;width:100%;max-width:360px;box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);text-align:center;animation:qzcPop .32s cubic-bezier(.34,1.56,.64,1)}
.qz-confirm-title{font-size:.95rem;font-weight:900;color:var(--gold);letter-spacing:.03em;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:5px}
body.light .qz-confirm-box{background:rgba(248,248,255,.98)}
@keyframes qzcPop{from{transform:scale(.85) translateY(14px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.qz-confirm-icon{width:60px;height:60px;border-radius:50%;background:rgba(255,68,102,.12);border:2px solid rgba(255,68,102,.4);display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 16px;box-shadow:0 0 24px rgba(255,68,102,.2)}
.qz-confirm-msg{font-size:.98rem;font-weight:700;color:var(--text);line-height:1.65;margin-bottom:24px}
.qz-confirm-actions{display:flex;flex-direction:column;gap:10px}
.qz-confirm-ok{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--red),#ff1493);color:#fff;font-size:.95rem;font-weight:900;font-family:inherit;cursor:pointer;transition:all .2s;box-shadow:0 6px 22px rgba(255,68,102,.35)}
@media (hover:hover) and (pointer:fine){.qz-confirm-ok:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,68,102,.48)}}
.qz-confirm-cancel{width:100%;padding:13px;border-radius:13px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s}
@media (hover:hover) and (pointer:fine){.qz-confirm-cancel:hover{border-color:var(--text);color:var(--text)}}

/* AI TOGGLE */
.ai-wrap{display:flex;align-items:center;justify-content:space-between;background:rgba(167,139,250,.08);border:1.5px solid rgba(167,139,250,.22);border-radius:15px;padding:13px 16px;margin-bottom:20px;cursor:pointer;transition:all .22s}
@keyframes goldFlash{
  0%,100%{border-color:rgba(255,215,0,.9);box-shadow:0 0 8px rgba(255,215,0,.3)}
  50%{border-color:rgba(255,215,0,.2);box-shadow:0 0 2px rgba(255,215,0,.05)}
}
@keyframes dailyBorderFlash{
  0%,100%{border-color:rgba(255,215,0,.95);box-shadow:0 0 24px rgba(255,215,0,.5),0 0 8px rgba(255,215,0,.3)}
  50%{border-color:rgba(255,215,0,.15);box-shadow:0 0 6px rgba(255,215,0,.08)}
}
#dailyModeBtn{animation:dailyBorderFlash 1.4s ease-in-out infinite}
#quickStatsWrap{animation:goldFlash 1.2s ease-in-out infinite;border-width:1.5px;border-style:solid;}
@media (hover:hover) and (pointer:fine){.ai-wrap:hover{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.4)}}
.ai-left{display:flex;align-items:center;gap:11px}
.ai-icon{font-size:1.4rem}
.ai-lbl{font-size:.9rem;font-weight:700;color:var(--purple)}
.ai-sub{font-size:.73rem;color:var(--muted);margin-top:2px}
.toggle{width:48px;height:26px;background:rgba(255,255,255,.1);border-radius:50px;position:relative;transition:background .28s;flex-shrink:0}
.toggle.on{background:linear-gradient(135deg,var(--purple),var(--pink))}
.toggle-knob{width:22px;height:22px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .28s;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.toggle.on .toggle-knob{left:24px}

/* START BTN */
.start-btn{width:100%;padding:17px;border-radius:18px;border:none;background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:1.15rem;font-weight:900;font-family:inherit;cursor:pointer;transition:all .24s;box-shadow:0 8px 30px rgba(255,215,0,.38);position:relative;overflow:hidden}
.start-btn:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .22s}
@media (hover:hover) and (pointer:fine){.start-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,215,0,.5)}}
@media (hover:hover) and (pointer:fine){.start-btn:hover:before{opacity:1}}
.start-btn:active{transform:scale(.97)}

/* ACTION BTNS */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.act-btn{padding:11px 8px;border-radius:13px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.86rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .22s;text-align:center}
@media (hover:hover) and (pointer:fine){.act-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,215,0,.08);transform:translateY(-2px)}}

/* GAME HUD */
.quit-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.quit-game-btn{display:flex;align-items:center;gap:5px;background:rgba(255,68,102,.1);border:1.5px solid rgba(255,68,102,.4);color:var(--red);font-size:.78rem;font-weight:800;padding:7px 16px;border-radius:50px;cursor:pointer;transition:transform .15s,background .15s;font-family:inherit}
.quit-game-btn:hover{background:rgba(255,68,102,.2);transform:scale(1.04)}
.quit-game-btn:active{transform:scale(.96)}
.hud{display:flex;gap:8px;margin-bottom:14px}
.hud-box{flex:1;background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:10px 6px;text-align:center;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.hud-box:hover{transform:scale(1.04)}}
.hud-lbl{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.hud-val{font-size:1.25rem;font-weight:900;color:var(--gold)}
.timer-box .hud-val{color:var(--red)}
.timer-box.warn{background:rgba(255,68,102,.1);border-color:rgba(255,68,102,.4);animation:timerShake .3s infinite}
@keyframes timerShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* PROGRESS */
.prog-wrap{background:rgba(255,255,255,.08);border-radius:10px;height:7px;margin-bottom:14px;overflow:hidden}
body.light .prog-wrap{background:rgba(0,0,0,.08)}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--orange));border-radius:10px;transition:width .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 14px rgba(255,215,0,.35)}

/* STREAK */
.streak-row{text-align:center;min-height:22px;margin-bottom:10px;font-size:.82rem;font-weight:700;color:var(--muted)}
.streak-row.hot{color:var(--orange);text-shadow:0 0 12px rgba(255,140,0,.5);animation:sPop .35s ease}
@keyframes sPop{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* CAT BADGE */
.q-cat{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:3px 12px;border-radius:50px;margin-bottom:10px;animation:bPop .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.q-cat.math{background:rgba(255,215,0,.15);color:var(--gold);border:1px solid rgba(255,215,0,.3)}
.q-cat.trivia{background:rgba(167,139,250,.15);color:var(--purple);border:1px solid rgba(167,139,250,.3)}
.q-cat.fill{background:rgba(0,217,255,.12);color:var(--cyan);border:1px solid rgba(0,217,255,.3)}
.q-cat.ai{background:rgba(255,20,147,.12);color:var(--pink);border:1px solid rgba(255,20,147,.3)}
.q-cat.sports{background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.3)}
.q-cat.science{background:rgba(255,140,0,.12);color:var(--orange);border:1px solid rgba(255,140,0,.3)}
.q-cat.reverse{background:rgba(0,217,255,.12);color:var(--cyan);border:1px solid rgba(0,217,255,.3)}

/* REVERSE MODE OPTION BUTTONS */
.opt-btn.reverse-opt{font-size:.78rem;line-height:1.35;padding:12px 10px;min-height:64px;white-space:normal;text-align:center;word-break:break-word}

/* PHASE TRANSITION OVERLAY */
#phaseOverlay{position:fixed;inset:0;z-index:500;background:rgba(10,12,28,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
#phaseOverlay.visible{opacity:1;pointer-events:all}
#phaseOverlayName{font-size:2rem;font-weight:800;color:#fff;text-align:center;animation:phPop .45s cubic-bezier(.34,1.56,.64,1) both}
#phaseOverlayMult{font-size:1.05rem;color:var(--gold);font-weight:600;opacity:.9}
#phaseOverlayBtn{margin-top:12px;padding:14px 40px;border-radius:50px;border:none;background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 4px 18px rgba(0,217,255,.4)}
@keyframes phPop{from{transform:scale(.6) translateY(30px);opacity:0}to{transform:none;opacity:1}}

/* GAMBLE MODE — BET OVERLAY */
#gambleOverlay{position:fixed;inset:0;z-index:501;background:rgba(10,12,28,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .3s}
#gambleOverlay.visible{opacity:1;pointer-events:all}
#gamblePotBox{font-size:.9rem;color:var(--muted);font-weight:600;letter-spacing:.5px}
#gamblePotAmt{font-size:2rem;font-weight:900;color:var(--gold);text-shadow:0 0 18px rgba(255,215,0,.5)}
#gambleBetTitle{font-size:1.1rem;font-weight:700;color:#fff;margin-top:4px}
.gamble-bet-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gamble-btn{padding:13px 22px;border-radius:14px;border:2px solid rgba(255,215,0,.35);background:rgba(255,215,0,.08);color:var(--gold);font-size:1rem;font-weight:700;cursor:pointer;transition:all .18s}
@media (hover:hover) and (pointer:fine){.gamble-btn:hover{background:rgba(255,215,0,.18);transform:scale(1.06)}}
.gamble-btn.allin{border-color:rgba(255,80,80,.5);background:rgba(255,80,80,.1);color:#ff6677}
@media (hover:hover) and (pointer:fine){.gamble-btn.allin:hover{background:rgba(255,80,80,.22)}}
.gamble-custom-row{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px}
#gambleCustomInput::placeholder{color:rgba(255,215,0,.4)}
#gambleCustomInput:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.18)}
.gamble-q-preview{font-size:1.05rem;font-weight:700;color:var(--text);text-align:center;max-width:320px;line-height:1.5;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:16px;padding:16px 18px;margin-bottom:4px}
#gambleStakeInfo{font-size:.88rem;color:var(--muted);min-height:20px}
/* Gamble pot mini-display in HUD during answer phase */
.hud-val.gamble-bal{color:var(--gold);font-weight:900}

/* QUESTION CARD */
.q-card{background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:22px;padding:28px 22px;text-align:center;margin-bottom:16px;min-height:130px;display:flex;flex-direction:column;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.q-text{font-size:1.45rem;font-weight:700;line-height:1.65;color:var(--text);animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--gold);margin:0 4px;vertical-align:bottom;animation:blinkGold 1.2s ease-in-out infinite}
@keyframes blinkGold{0%,100%{border-color:var(--gold)}50%{border-color:var(--orange)}}
.ai-thinking{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-size:.88rem;padding:20px 0}
.ai-dots span{width:8px;height:8px;background:var(--purple);border-radius:50%;display:inline-block;margin:0 2px;animation:dotBounce .8s ease-in-out infinite}
.ai-dots span:nth-child(2){animation-delay:.15s}.ai-dots span:nth-child(3){animation-delay:.3s}
@keyframes dotBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ai-gen-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(255,20,147,.1);border:1px solid rgba(255,20,147,.25);color:var(--pink);font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:50px;margin-top:6px}

/* HINT */
.hint-row{display:flex;justify-content:flex-end;margin-bottom:8px}
.hint-btn{background:rgba(167,139,250,.12);border:1.5px solid rgba(167,139,250,.35);color:var(--purple);border-radius:16px;padding:7px 14px;font-size:.9rem;font-family:inherit;font-weight:800;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px}
@media (hover:hover) and (pointer:fine){.hint-btn:hover:not(:disabled){background:rgba(167,139,250,.22);transform:translateY(-2px)}}
.hint-btn:disabled{opacity:.3;cursor:not-allowed}
.hint-cnt{font-size:.65rem;background:rgba(167,139,250,.28);border-radius:50px;padding:1px 6px}

/* OPTIONS */
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.opt-btn{padding:15px 10px;border-radius:16px;border:2px solid var(--border);background:var(--surface);color:var(--text);font-size:.97rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .22s;line-height:1.3;word-break:break-word;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;outline:none}
.opt-btn:focus{outline:none;box-shadow:none}
@media (hover:hover) and (pointer:fine){.opt-btn:hover:not(:disabled){border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 22px rgba(255,215,0,.22)}}
.opt-btn.correct{background:rgba(0,255,136,.16);border-color:var(--green);color:var(--green);box-shadow:0 0 22px rgba(0,255,136,.28);animation:cPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes cPop{0%{transform:scale(.95)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.opt-btn.wrong{background:rgba(255,68,102,.14);border-color:var(--red);color:var(--red);animation:wShake .4s ease}
@keyframes wShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.opt-btn.hint-glow{box-shadow:0 0 0 3px rgba(255,215,0,.6),0 0 18px rgba(255,215,0,.4);border-color:var(--gold);animation:hGlow 1s ease-in-out infinite}
@keyframes hGlow{0%,100%{box-shadow:0 0 0 3px rgba(255,215,0,.5),0 0 12px rgba(255,215,0,.3)}50%{box-shadow:0 0 0 5px rgba(255,215,0,.8),0 0 24px rgba(255,215,0,.6)}}
.opt-btn:disabled{cursor:not-allowed}

/* FEEDBACK */
.feedback{text-align:center;font-size:.95rem;font-weight:700;min-height:24px}
.feedback.ok{color:var(--green)}
.feedback.bad{color:var(--red)}

/* RESULT */
.res-card{padding:42px 32px;text-align:center}
.res-emoji{font-size:80px;display:inline-block;animation:rBounce .6s cubic-bezier(.34,1.56,.64,1) both;margin-bottom:12px}
@keyframes rBounce{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:scale(1);opacity:1}}
.res-title{font-size:2rem;font-weight:900;background:linear-gradient(90deg,var(--gold),var(--orange),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px}
.res-sub{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.score-big{font-size:4rem;font-weight:900;color:var(--gold);animation:sPop2 .5s cubic-bezier(.34,1.56,.64,1) .3s both;margin-bottom:4px}
@keyframes sPop2{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.score-detail{color:var(--muted);font-size:.85rem;margin-bottom:18px}
.stats-pills{display:flex;gap:10px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.stat-pill{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:13px 10px;text-align:center;flex:1;min-width:70px;max-width:120px}
.stat-pill .num{font-size:1.35rem;font-weight:900;color:var(--gold)}
.stat-pill .lbl{font-size:.65rem;color:var(--muted);margin-top:2px}
.xp-earned{background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);border-radius:14px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.xp-earned-val{font-size:1.3rem;font-weight:900;color:var(--gold)}
.xp-earned-lbl{font-size:.7rem;color:var(--muted)}
.replay-btn{width:100%;padding:16px;border-radius:16px;border:none;background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:1.1rem;font-weight:900;font-family:inherit;cursor:pointer;transition:all .24s;box-shadow:0 5px 22px rgba(255,215,0,.35);margin-bottom:9px}
@media (hover:hover) and (pointer:fine){.replay-btn:hover{transform:translateY(-3px);box-shadow:0 9px 30px rgba(255,215,0,.48)}}
.home-btn{width:100%;padding:13px;border-radius:14px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.9rem;font-family:inherit;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.home-btn:hover{border-color:var(--text);color:var(--text)}}

/* FIREBASE TABS */
.lb-tabs{display:flex;gap:8px;margin-bottom:14px}
.lb-tab{flex:1;padding:9px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:.82rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .22s}
.lb-tab.active{background:rgba(255,215,0,.18);border-color:var(--gold);color:var(--gold)}
.lb-loading{text-align:center;padding:24px;color:var(--muted);font-size:.88rem}
.lb-online-badge{display:inline-block;background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.3);color:#00ff88;font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:50px;margin-right:6px;vertical-align:middle}
.lb-offline-badge{display:inline-block;background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);color:var(--gold);font-size:.65rem;font-weight:800;padding:2px 8px;border-radius:50px;margin-right:6px;vertical-align:middle}

/* LB */
.lb-list{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;max-height:420px;overflow-y:auto}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:13px 14px;transition:transform .2s;animation:rowIn .35s ease both}
@keyframes rowIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){.lb-row:hover{transform:translateX(-3px)}}
.lb-row.r1{border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.06)}
.lb-rank{font-size:1.3rem;min-width:30px;text-align:center;font-weight:900}
.lb-info{flex:1;text-align:right}
.lb-name{font-size:.95rem;font-weight:800}
.lb-meta{font-size:.7rem;color:var(--muted);margin-top:1px}
.lb-score{font-size:1.2rem;font-weight:900;color:var(--gold);min-width:60px;text-align:left}

/* COMBO */
.combo-badge{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:1.9rem;font-weight:900;padding:14px 30px;border-radius:20px;z-index:9000;box-shadow:0 8px 40px rgba(255,215,0,.55);pointer-events:none}
.combo-badge.show{display:block;animation:comboPop 1s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes comboPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}30%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-65%) scale(.85);opacity:0}}

/* TOASTS */
.ach-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:rgba(15,8,35,.97);border:1.5px solid rgba(255,215,0,.35);border-radius:18px;padding:13px 20px;display:flex;align-items:center;gap:12px;z-index:9999;box-shadow:0 8px 32px rgba(0,0,0,.5);transition:transform .4s cubic-bezier(.34,1.56,.64,1);min-width:280px;max-width:350px}
body.light .ach-toast{background:rgba(250,250,255,.97)}
.ach-toast.show{transform:translateX(-50%) translateY(0)}
.ach-toast-icon{font-size:1.8rem;flex-shrink:0}
.ach-lbl{font-size:.66rem;font-weight:800;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase}
.ach-name{font-size:.95rem;font-weight:800;color:var(--text)}
.ach-desc{font-size:.72rem;color:var(--muted)}

.lvl-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-120px);background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;border-radius:18px;padding:12px 26px;font-weight:900;font-size:.98rem;z-index:9999;box-shadow:0 8px 32px rgba(255,215,0,.45);transition:transform .5s cubic-bezier(.34,1.56,.64,1);text-align:center}
.lvl-toast.show{transform:translateX(-50%) translateY(0)}
.profile-warn-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-160px);background:linear-gradient(135deg,#ff4466,#c0002a);color:#fff;border-radius:18px;padding:13px 22px;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;z-index:10000;box-shadow:0 8px 32px rgba(255,40,80,.5);transition:transform .45s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:12px;min-width:260px;max-width:340px}
.profile-warn-toast.show{transform:translateX(-50%) translateY(0)}

/* PARTICLES */
.particle{position:fixed;pointer-events:none;border-radius:50%;animation:pFly var(--d) ease-out forwards}
@keyframes pFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}
.score-pop{position:fixed;font-size:1.3rem;font-weight:900;color:var(--gold);pointer-events:none;z-index:100;text-shadow:0 0 12px rgba(255,215,0,.7);animation:popUp .9s ease forwards}
@keyframes popUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-65px) scale(1.5)}}
.confetti-pc{position:fixed;pointer-events:none;z-index:999;border-radius:2px;animation:cFall linear forwards}
@keyframes cFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* MODE SCREEN */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.mode-opt{padding:22px 14px;border-radius:18px;border:2px solid var(--border);background:var(--surface);cursor:pointer;transition:all .24s;text-align:center;font-family:inherit}
@media (hover:hover) and (pointer:fine){.mode-opt:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(255,215,0,.18);border-color:var(--gold)}}
.mode-opt .m-icon{font-size:2.2rem;display:block;margin-bottom:7px}
.mode-opt .m-name{font-size:1rem;font-weight:900;color:var(--text);margin-bottom:3px}
.mode-opt .m-desc{font-size:.72rem;color:var(--muted)}

/* STATS GRID */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.s-tile{background:var(--surface);border:1.5px solid var(--border);border-radius:18px;padding:18px 12px;text-align:center;transition:transform .2s}
@media (hover:hover) and (pointer:fine){.s-tile:hover{transform:translateY(-2px)}}
.s-tile .t-val{font-size:1.6rem;font-weight:900;color:var(--gold)}
.s-tile .t-lbl{font-size:.68rem;color:var(--muted);margin-top:3px}

/* ACH GRID */
.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.ach-tile{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:12px 6px;text-align:center;opacity:.45;transition:all .24s;position:relative}
.ach-tile.unlocked{opacity:1;border-color:rgba(255,215,0,.3);background:rgba(255,215,0,.06)}
@media (hover:hover) and (pointer:fine){.ach-tile.unlocked:hover{transform:scale(1.06);box-shadow:0 4px 18px rgba(255,215,0,.18)}}
.ach-tile .a-icon{font-size:1.5rem;margin-bottom:3px;filter:grayscale(1) opacity(.3)}
.ach-tile.unlocked .a-icon{filter:none}
.ach-tile .a-name{font-size:.58rem;font-weight:700;color:var(--muted)}
.ach-tile.unlocked .a-name{color:var(--gold)}
.ach-tile.unlocked::after{content:'✓';position:absolute;top:3px;right:5px;font-size:.5rem;color:var(--gold);font-weight:900}

/* SECTION TITLE */
.section-title{font-size:1.7rem;font-weight:900;background:linear-gradient(90deg,var(--gold),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px;text-align:center}
.section-sub{color:var(--muted);font-size:.82rem;margin-bottom:20px;text-align:center}

/* BACK BTN */
.back-btn{width:100%;padding:13px;border-radius:14px;border:1.5px solid var(--border);background:transparent;color:var(--muted);font-size:.9rem;font-family:inherit;cursor:pointer;transition:all .22s;margin-top:4px}
@media (hover:hover) and (pointer:fine){.back-btn:hover{border-color:var(--text);color:var(--text)}}

/* SHARE BUTTONS ROW */
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.share-img-btn{padding:14px 8px;border-radius:16px;border:2px solid rgba(255,215,0,.4);background:rgba(255,215,0,.1);color:var(--gold);font-size:.93rem;font-family:inherit;font-weight:800;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.share-img-btn:hover{background:rgba(255,215,0,.22);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,215,0,.25)}}
.invite-btn{padding:14px 8px;border-radius:16px;border:2px solid rgba(0,217,255,.4);background:rgba(0,217,255,.1);color:var(--cyan);font-size:.93rem;font-family:inherit;font-weight:800;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.invite-btn:hover{background:rgba(0,217,255,.22);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,217,255,.2)}}
/* SHARE IMAGE OVERLAY */
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9500;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .25s ease}
.share-card-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:380px}
.share-canvas{border-radius:22px;box-shadow:0 16px 60px rgba(0,0,0,.6);max-width:100%}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.dl-btn{padding:13px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:.95rem;font-weight:900;font-family:inherit;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.dl-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,215,0,.4)}}
.cl-share-btn{padding:13px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font-size:.95rem;font-weight:800;font-family:inherit;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.cl-share-btn:hover{background:rgba(255,255,255,.15)}}
/* INVITE TOAST */
.invite-copied{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:linear-gradient(135deg,#00d9ff,#0099bb);color:#fff;border-radius:14px;padding:12px 24px;font-size:.95rem;font-weight:900;z-index:9999;transition:transform .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 8px 28px rgba(0,217,255,.4)}
.invite-copied.show{transform:translateX(-50%) translateY(0)}

/* PODIUM */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin-bottom:22px}
.p-slot{flex:1;display:flex;flex-direction:column;align-items:center;max-width:120px}
.p-avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:6px;position:relative;animation:avDrop .6s cubic-bezier(.34,1.56,.64,1) both}
.p-slot.p1 .p-avatar{width:64px;height:64px;font-size:1.8rem;background:linear-gradient(135deg,var(--gold),var(--orange));box-shadow:0 0 28px rgba(255,215,0,.5)}
.p-slot.p2 .p-avatar{width:52px;height:52px;background:linear-gradient(135deg,#c0c0c0,#909090)}
.p-slot.p3 .p-avatar{width:46px;height:46px;background:linear-gradient(135deg,#cd7f32,#a05028)}
@keyframes avDrop{from{transform:translateY(-28px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.p-crown{position:absolute;top:-18px;font-size:1.1rem;animation:crownF 2s ease-in-out infinite}
@keyframes crownF{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
.p-silver{position:absolute;top:-16px;font-size:1.05rem;animation:starPulse 1.6s ease-in-out infinite}
@keyframes starPulse{0%,100%{transform:scale(1) rotate(0deg);opacity:1;filter:drop-shadow(0 0 2px rgba(220,220,255,.3))}50%{transform:scale(1.25) rotate(15deg);opacity:.85;filter:drop-shadow(0 0 9px rgba(220,220,255,.95))}}
.p-bronze{position:absolute;top:-14px;font-size:1rem;animation:sparkleTwist 2.2s ease-in-out infinite}
@keyframes sparkleTwist{0%,100%{transform:rotate(-12deg) scale(1);filter:drop-shadow(0 0 2px rgba(255,200,150,.3))}50%{transform:rotate(12deg) scale(1.18);filter:drop-shadow(0 0 8px rgba(255,200,150,.9))}}
.p-name{font-size:.75rem;font-weight:800;color:var(--text);margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%}
.p-slot.p1 .p-name{color:var(--gold)}
.p-pts{font-size:.7rem;font-weight:700;color:var(--muted)}
.p-slot.p1 .p-pts{color:var(--gold)}
.p-base{width:100%;border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:900;color:rgba(255,255,255,.4);margin-top:6px;animation:baseR .6s cubic-bezier(.34,1.56,.64,1) both}
.p-slot.p1 .p-base{height:80px;background:linear-gradient(180deg,rgba(255,215,0,.22),rgba(255,215,0,.06));border:1px solid rgba(255,215,0,.28);color:var(--gold);font-size:1.5rem}
.p-slot.p2 .p-base{height:56px;background:linear-gradient(180deg,rgba(192,192,192,.16),rgba(192,192,192,.04));border:1px solid rgba(192,192,192,.25)}
.p-slot.p3 .p-base{height:38px;background:linear-gradient(180deg,rgba(205,127,50,.16),rgba(205,127,50,.04));border:1px solid rgba(205,127,50,.25)}
@keyframes baseR{from{transform:scaleY(0);transform-origin:bottom;opacity:0}to{transform:scaleY(1);transform-origin:bottom;opacity:1}}

@media(max-width:540px){
  .opts-grid{gap:8px}
  .opt-btn{padding:12px 8px;font-size:.88rem}
  .q-text{font-size:1.2rem}
  .logo{font-size:64px}
  .game-title{font-size:2.1rem}
  .ach-grid{grid-template-columns:repeat(4,1fr)}
}

/* RACE MODE */
.hud-box.race-t{border-color:rgba(0,255,136,.35)!important;background:rgba(0,255,136,.07)!important}
.hud-box.race-t .hud-lbl{color:var(--green)!important}
.hud-box.race-t .hud-val{color:var(--green)!important;font-size:.9rem}
/* DAILY CHALLENGE */
.daily-dot{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.07);border:2px solid var(--border);transition:all .3s;display:inline-block}
.daily-dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 10px rgba(0,255,136,.45)}
.daily-streak-row{display:flex;gap:6px;justify-content:center;margin:10px 0 4px}
/* TENSION TIMER */
@keyframes tPulse{0%,100%{transform:scale(1);color:var(--red)}50%{transform:scale(1.18);color:#ff8c00}}
.timer-box.warn .hud-val{animation:tPulse .4s ease-in-out infinite}
/* DAILY MODE BADGE in result */
.daily-res-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,255,136,.1);border:1.5px solid rgba(0,255,136,.3);color:var(--green);padding:8px 18px;border-radius:50px;font-weight:800;font-size:.85rem;margin-bottom:14px}

/* ═══ IMAGE QUIZ ═══ */
.q-img-wrap{width:100%;max-width:420px;margin:0 auto 14px;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(0,0,0,.45);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;transition:background .3s}

.q-img-lbl{font-size:.68rem;text-align:center;color:var(--muted);margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase}

#musicBtn.music-off{opacity:.38;filter:grayscale(1)}
#splashScreen{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f0a1e 0%,#1a0f3a 50%,#0d0a1f 100%);gap:18px}
#splashScreen{gap:0}
#splashScreen .splash-logo{font-size:80px;animation:xpBounce 2s ease-in-out infinite;margin-bottom:18px}
#splashScreen .splash-logo img{
  display:block;
  width:220px!important;height:220px!important;
  border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 4px rgba(255,215,0,.6),0 0 32px rgba(255,180,0,.4);
  animation:logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{box-shadow:0 0 0 4px rgba(255,215,0,.6),0 0 32px rgba(255,180,0,.4)}
  50%{box-shadow:0 0 0 6px rgba(255,215,0,.9),0 0 55px rgba(255,180,0,.7)}
}
#splashScreen .splash-title{
  font-size:2.4rem;font-weight:900;
  background:linear-gradient(90deg,#ffd700,#ff8c00,#ffe566);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:2px;margin-bottom:14px;
}
#splashScreen .splash-sub{display:none}
#splashScreen .splash-tagline{
  position:relative;
  display:inline-block;
  padding:9px 24px;
  font-size:.95rem;font-weight:700;
  color:rgba(255,245,220,0.92);
  text-align:center;
  background:rgba(15,10,30,0.7);
  border-radius:40px;
  margin-bottom:22px;
  z-index:0;
}
#splashScreen .splash-tagline::before{
  content:'';
  position:absolute;inset:-2px;
  border-radius:42px;
  background:linear-gradient(90deg,#ffd700,#ff8c00,#ffe566,#ffd700);
  background-size:250% 100%;
  animation:goldShimmer 2s linear infinite;
  z-index:-1;
}
#splashScreen .splash-tagline::after{
  content:'';
  position:absolute;inset:2px;
  border-radius:38px;
  background:rgba(15,10,30,0.85);
  z-index:-1;
}
@keyframes goldShimmer{0%{background-position:0% 50%}100%{background-position:250% 50%}}
#splashScreen .splash-btn{margin-top:16px;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#0f0a1e;border:none;padding:18px 60px;border-radius:18px;font-size:1.2rem;font-weight:900;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;box-shadow:0 8px 30px rgba(255,215,0,.4);transition:transform .18s,box-shadow .18s}
@media (hover:hover) and (pointer:fine){#splashScreen .splash-btn:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(255,215,0,.55)}}
#splashScreen .splash-note{font-size:.72rem;color:rgba(240,244,255,0.3);margin-top:4px}

/* ══ RATING POPUP ══ */
#ratingOverlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
#ratingOverlay.show{opacity:1;pointer-events:all}
#ratingBox{background:rgba(18,10,38,.97);border:1.5px solid rgba(255,215,0,.28);border-radius:28px;padding:32px 24px;width:100%;max-width:400px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:su .4s cubic-bezier(.34,1.56,.64,1) both}
body.light #ratingBox{background:rgba(248,248,255,.97)}
.rp-icon{font-size:3rem;display:block;margin-bottom:6px;animation:logoBounce 3s ease-in-out infinite}
.rp-title{font-size:1.3rem;font-weight:900;color:var(--gold);margin-bottom:6px}
.rp-msg{font-size:.87rem;color:var(--muted);margin-bottom:18px;line-height:1.6}
.stars-row{display:flex;justify-content:center;gap:8px;margin-bottom:18px}
.star-btn{background:none;border:none;font-size:2.1rem;cursor:pointer;transition:transform .18s,filter .18s;filter:grayscale(1) opacity(.35);line-height:1;padding:0}
.star-btn.lit{filter:grayscale(0) drop-shadow(0 0 8px rgba(255,215,0,.6));transform:scale(1.18)}
@media (hover:hover) and (pointer:fine){.star-btn:hover{transform:scale(1.28)}}
.rp-textarea{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;padding:13px 14px;color:var(--text);font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.9rem;resize:none;outline:none;height:88px;margin-bottom:14px;transition:border-color .22s}
.rp-textarea:focus{border-color:var(--gold)}
body.light .rp-textarea{background:rgba(0,0,0,.05);border-color:rgba(100,100,200,.2)}
.rp-submit{width:100%;padding:14px;border-radius:15px;border:none;background:linear-gradient(135deg,var(--gold),var(--orange));color:#0f0a1e;font-size:1rem;font-weight:900;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;transition:all .22s;box-shadow:0 6px 22px rgba(255,215,0,.35);margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.rp-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,215,0,.5)}}
.rp-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.rp-skip{background:none;border:none;color:var(--muted);font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.85rem;cursor:pointer;padding:6px;transition:color .2s}
@media (hover:hover) and (pointer:fine){.rp-skip:hover{color:var(--text)}}

/* ══ CONTACT DEVELOPER ══ */
.contact-dev-btn{width:100%;margin-top:10px;padding:12px 16px;border-radius:14px;border:1.5px solid rgba(167,139,250,.4);background:rgba(167,139,250,.1);color:#a78bfa;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.9rem;font-weight:800;cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;gap:8px}
@media (hover:hover) and (pointer:fine){.contact-dev-btn:hover{background:rgba(167,139,250,.22);border-color:rgba(167,139,250,.7);transform:translateY(-2px);box-shadow:0 6px 20px rgba(167,139,250,.25)}}
.donate-btn{width:100%;margin-top:8px;padding:13px 16px;border-radius:14px;border:none;background:linear-gradient(135deg,#a78bfa,#ffd700,#ff8c00);color:#0f0a1e;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.95rem;font-weight:900;cursor:pointer;transition:all .22s;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 22px rgba(167,139,250,.35);text-decoration:none}
@media (hover:hover) and (pointer:fine){.donate-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,215,0,.5);filter:brightness(1.1)}}
#contactOverlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
#contactOverlay.show{opacity:1;pointer-events:all}
#contactBox{background:rgba(18,10,38,.97);border:1.5px solid rgba(0,217,255,.25);border-radius:28px;padding:30px 24px;width:100%;max-width:400px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:su .4s cubic-bezier(.34,1.56,.64,1) both}
body.light #contactBox{background:rgba(248,248,255,.97)}
.ct-icon{font-size:2.6rem;display:block;margin-bottom:6px}
.ct-title{font-size:1.2rem;font-weight:900;color:#00d9ff;margin-bottom:4px}
.ct-sub{font-size:.85rem;color:var(--muted);margin-bottom:18px;line-height:1.55}
.ct-input{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:13px;padding:12px 14px;color:var(--text);font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.9rem;outline:none;margin-bottom:10px;transition:border-color .22s}
.ct-input:focus{border-color:#00d9ff}
body.light .ct-input{background:rgba(0,0,0,.05);border-color:rgba(100,100,200,.2)}
.ct-textarea{width:100%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14);border-radius:13px;padding:12px 14px;color:var(--text);font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.9rem;resize:none;outline:none;height:100px;margin-bottom:14px;transition:border-color .22s}
.ct-textarea:focus{border-color:#00d9ff}
body.light .ct-textarea{background:rgba(0,0,0,.05);border-color:rgba(100,100,200,.2)}
.ct-submit{width:100%;padding:14px;border-radius:14px;border:none;background:linear-gradient(135deg,#00d9ff,#a78bfa);color:#0f0a1e;font-size:1rem;font-weight:900;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;transition:all .22s;box-shadow:0 6px 22px rgba(0,217,255,.3);margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.ct-submit:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,217,255,.45)}}
.ct-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.ct-cancel{background:none;border:none;color:var(--muted);font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.85rem;cursor:pointer;padding:6px;transition:color .2s}
@media (hover:hover) and (pointer:fine){.ct-cancel:hover{color:var(--text)}}

/* ══ AUTH OVERLAY ══ */
#qzAuthOverlay{position:fixed;inset:0;z-index:999999;background:rgba(10,5,25,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:20px;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif}
/* AUTH LANG BTN */
.qza-lang-wrap{position:absolute;top:16px;left:16px}
.qza-lang-btn{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);color:rgba(240,244,255,.7);padding:6px 12px;border-radius:50px;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.qza-lang-btn:hover{border-color:var(--purple);background:rgba(167,139,250,.15);color:#f0f4ff}}
.qza-lang-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:rgba(15,10,35,.98);border:1.5px solid rgba(255,255,255,.15);border-radius:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:150px;z-index:10;box-shadow:0 10px 36px rgba(0,0,0,.6);overflow:hidden}
.qza-lang-menu.open{display:block;animation:dropIn .22s ease}
.qza-card{background:rgba(14,8,30,.97);border:1.5px solid rgba(167,139,250,.3);border-radius:28px;padding:30px 26px;width:100%;max-width:400px;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:qzaIn .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes qzaIn{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:none}}
.qza-title{font-size:1.5rem;font-weight:900;text-align:center;background:linear-gradient(90deg,#ffd700,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}
.qza-sub{font-size:.8rem;color:rgba(240,244,255,.45);text-align:center;margin-bottom:22px}
.qza-tabs{display:flex;background:rgba(255,255,255,.05);border-radius:14px;padding:4px;margin-bottom:22px}
.qza-tab{flex:1;padding:10px;border-radius:11px;border:none;background:none;color:rgba(240,244,255,.5);font-size:.9rem;font-weight:700;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;transition:all .22s}
.qza-tab.on{background:linear-gradient(135deg,rgba(167,139,250,.25),rgba(124,58,237,.3));color:#f0f4ff;border:1px solid rgba(167,139,250,.35)}
.qza-lbl{font-size:.78rem;font-weight:800;color:rgba(240,244,255,.45);display:block;margin-bottom:7px;text-transform:uppercase;letter-spacing:.07em}
.qza-inp{width:100%;padding:13px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f0f4ff;font-size:1rem;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;font-weight:700;outline:none;transition:all .22s;margin-bottom:18px;direction:rtl;text-align:right}
.qza-inp:focus{border-color:#a78bfa;background:rgba(167,139,250,.08);box-shadow:0 0 0 4px rgba(167,139,250,.15)}
.qza-inp::placeholder{color:rgba(240,244,255,.35);font-weight:500}
.qza-pin-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.qza-pins{display:flex;gap:8px;justify-content:center;margin-bottom:5px;direction:ltr}
.qza-p{width:47px;height:56px;border-radius:13px;border:2px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#f0f4ff;font-size:1.55rem;font-weight:900;text-align:center;outline:none;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;caret-color:transparent}
.qza-p:focus{border-color:#a78bfa;background:rgba(167,139,250,.1);box-shadow:0 0 0 3px rgba(167,139,250,.2)}
.qza-p.ok{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.08)}
.qza-p.bad{border-color:#ff4466;background:rgba(255,68,102,.1);animation:qzaShake .35s ease}
@keyframes qzaShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.qza-hint{font-size:.73rem;color:rgba(240,244,255,.38);text-align:center;margin-bottom:20px}
.qza-err{background:rgba(255,68,102,.1);border:1.5px solid rgba(255,68,102,.28);border-radius:12px;padding:10px 14px;font-size:.82rem;font-weight:700;color:#ff8899;text-align:center;margin-bottom:14px}
.qza-btn{width:100%;padding:15px;border-radius:16px;background:linear-gradient(135deg,#a78bfa,#7c3aed);border:none;color:#fff;font-size:1.05rem;font-weight:900;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;transition:transform .15s,box-shadow .2s,opacity .2s;box-shadow:0 4px 20px rgba(124,58,237,.45)}
@media (hover:hover) and (pointer:fine){.qza-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 26px rgba(124,58,237,.55)}}
.qza-btn:disabled{opacity:.6;cursor:not-allowed}
.qza-footer{text-align:center;margin-top:14px;font-size:.78rem;color:rgba(240,244,255,.45)}
.qza-link{color:#a78bfa;cursor:pointer;font-weight:800}
/* PIN Overlay */
#qzPinOverlay{position:fixed;inset:0;z-index:999998;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:20px;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif}
#qzPinOverlay .qza-card{animation:qzaIn .35s cubic-bezier(.34,1.56,.64,1) both}
/* Logout btn */
.auth-logout-btn{width:100%;margin-top:10px;padding:12px;border-radius:14px;background:rgba(255,68,102,.1);border:1.5px solid rgba(255,68,102,.28);color:#ff8899;font-size:.92rem;font-weight:800;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif;cursor:pointer;transition:all .2s}
@media (hover:hover) and (pointer:fine){.auth-logout-btn:hover{background:rgba(255,68,102,.2)}}

/* ══ DAILY REWARD BTN ══ */
.dr-btn{width:36px;height:36px;border-radius:50%;border:none;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;background:linear-gradient(135deg,#ffd700,#ff8c00);box-shadow:0 0 10px rgba(255,215,0,.45);flex-shrink:0}
.dr-btn.dr-available{animation:drPulse 1.8s ease-in-out infinite}
.dr-btn.dr-claimed{background:rgba(255,255,255,.08)!important;box-shadow:none!important;filter:grayscale(1);animation:none!important;cursor:default}
@keyframes drPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.7),0 0 10px rgba(255,215,0,.4)}60%{box-shadow:0 0 0 10px rgba(255,215,0,0),0 0 10px rgba(255,215,0,.4)}}
/* ══ DAILY REWARD MODAL ══ */
#drOverlay{position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
#drOverlay.show{opacity:1;pointer-events:all}
#drBox{background:rgba(18,10,38,.97);border:1.5px solid rgba(255,215,0,.3);border-radius:28px;padding:26px 20px 22px;width:100%;max-width:400px;box-shadow:0 24px 70px rgba(0,0,0,.7);animation:su .4s cubic-bezier(.34,1.56,.64,1) both;text-align:center}
body.light #drBox{background:rgba(248,248,255,.97)}
.dr-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.dr-title{font-size:1.15rem;font-weight:900;color:var(--gold)}
.dr-close{background:none;border:none;color:var(--muted);font-size:1.4rem;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .2s}
@media (hover:hover) and (pointer:fine){.dr-close:hover{color:var(--text)}}
.dr-week{display:flex;gap:4px;justify-content:center;margin-bottom:18px}
.dr-day{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);flex:1;min-width:0;transition:all .25s}
.dr-day.dr-today{border-color:var(--gold);background:rgba(255,215,0,.1);box-shadow:0 0 12px rgba(255,215,0,.2)}
.dr-day-emoji{font-size:1rem}
.dr-day-name{font-size:.48rem;color:var(--muted);font-weight:700;letter-spacing:.3px}
.dr-reward-box{background:rgba(255,215,0,.08);border:1.5px solid rgba(255,215,0,.3);border-radius:18px;padding:18px 14px;margin-bottom:14px}
.dr-reward-emoji{font-size:2.8rem;margin-bottom:6px;display:block}
.dr-reward-name{font-size:1.1rem;font-weight:900;color:var(--gold);margin-bottom:4px}
.dr-reward-desc{font-size:.78rem;color:var(--muted)}
.dr-streak{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem;color:var(--muted);margin-bottom:14px}
.dr-streak b{color:var(--orange);font-size:1rem}
.dr-claim-btn{width:100%;padding:14px;border-radius:16px;border:none;background:linear-gradient(135deg,#ffd700,#ff8c00);color:#1a0f3a;font-size:1rem;font-weight:900;cursor:pointer;transition:all .25s;font-family:'Tajawal','Segoe UI Emoji','Noto Color Emoji','Apple Color Emoji',sans-serif}
@media (hover:hover) and (pointer:fine){.dr-claim-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 8px 24px rgba(255,215,0,.4)}}
.dr-claim-btn:disabled{background:rgba(255,255,255,.1);color:var(--muted);cursor:default;transform:none;box-shadow:none}
.dr-claimed-msg{font-size:.8rem;color:var(--muted);margin-top:10px}


/* ══ PERFORMANCE FIXES ══ */

/* تقليل الـ Orbs على الموبايل — أثقل شيء على الـ GPU */
@media (max-width: 768px) {
  .orb { display: none; }
}

/* احترام تفضيلات المستخدم لتقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* تحسين الـ backdrop-filter — نستعمل GPU layer بشكل صحيح */
.card,
.xp-bar,
.q-card {
  transform: translateZ(0);
}

/* Online lockstep waiting banner */
.online-wait-dot{display:inline-block;animation:onlineWaitPulse 1s ease-in-out infinite}
@keyframes onlineWaitPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

/* Online: neutral lock-in frame (no reveal yet) */
.opt-btn.selected-neutral{border-color:#00d9ff;box-shadow:0 0 18px rgba(0,217,255,.35);background:rgba(0,217,255,.08)}

/* Online: question count buttons (separate from .diff-btn to avoid clashing with global setDiff) */
.qcnt-btn{padding:11px 26px;border-radius:50px;border:2px solid var(--border);background:transparent;color:var(--muted);font-size:.95rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .22s}
@media (hover:hover) and (pointer:fine){.qcnt-btn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}}
.qcnt-btn.sel{background:linear-gradient(135deg,var(--gold),var(--orange));border:2px solid var(--gold);color:#0f0a1e;font-weight:900;transform:scale(1.07);animation:goldFlashBtn 1.2s ease-in-out infinite}

/* ══ LUCKY BOXES ══ */
.lb-card{background:rgba(255,255,255,.04);border:1.5px solid;border-radius:18px;padding:14px 16px}
.lb-open-btn{flex-shrink:0;padding:10px 18px;border-radius:50px;border:none;background:linear-gradient(135deg,rgba(220,100,255,.85),rgba(130,80,220,.85));color:#fff;font-weight:900;font-size:.82rem;cursor:pointer;transition:.2s;white-space:nowrap}
.lb-open-btn:active{transform:scale(.93)}
.lb-btn-off{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.35)!important;cursor:not-allowed!important}
@keyframes lbShake{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg)}35%{transform:rotate(12deg)}55%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}90%{transform:rotate(-3deg)}}
@keyframes lbOpen{0%{transform:scale(1);opacity:1}60%{transform:scale(1.35);opacity:.8}100%{transform:scale(0);opacity:0}}
@keyframes lbRwdShow{0%{opacity:0;transform:scale(.4) translateY(20px)}70%{transform:scale(1.1) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ══ SKILL TREE ══ */
.skill-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(167,139,250,.2);border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:12px;transition:border-color .2s}
@media (hover:hover) and (pointer:fine){.skill-card:hover{border-color:rgba(167,139,250,.45)}}
.skill-card-icon{font-size:1.8rem;flex-shrink:0}
.skill-info{flex:1;min-width:0}
.skill-name{font-size:.9rem;font-weight:800;color:#fff;margin-bottom:2px}
.skill-desc{font-size:.71rem;color:var(--muted);margin-bottom:4px}
.skill-stars{font-size:.8rem;color:rgba(255,215,0,.9)}
.skill-buy-btn{flex-shrink:0;padding:10px 16px;border-radius:50px;border:none;background:linear-gradient(135deg,rgba(167,139,250,.85),rgba(99,102,241,.85));color:#fff;font-weight:900;font-size:.82rem;cursor:pointer;transition:.2s;white-space:nowrap}
.skill-buy-btn:active{transform:scale(.93)}
.skill-maxed{background:rgba(0,255,136,.14)!important;color:#00ff88!important;cursor:default!important}
.skill-disabled{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.3)!important;cursor:not-allowed!important}

/* ══ IMAGE CATEGORY PICKER ══ */
.img-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:380px;margin:0 auto}
.img-cat-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 10px;border-radius:18px;border:2px solid rgba(255,100,180,.35);background:rgba(255,100,180,.06);color:#fff;font-family:inherit;cursor:pointer;transition:all .22s;min-height:80px}
@media (hover:hover) and (pointer:fine){.img-cat-btn:hover{border-color:rgba(255,100,180,.7);background:rgba(255,100,180,.14);transform:translateY(-3px);box-shadow:0 6px 20px rgba(255,100,180,.2)}}
.img-cat-btn:active{transform:scale(.95)}
.img-cat-btn.all-cat{grid-column:1/-1;border-color:rgba(255,215,0,.5);background:rgba(255,215,0,.06);min-height:60px;flex-direction:row;gap:10px}
@media (hover:hover) and (pointer:fine){.img-cat-btn.all-cat:hover{border-color:rgba(255,215,0,.85);background:rgba(255,215,0,.12);box-shadow:0 6px 20px rgba(255,215,0,.2)}}
.img-cat-icon{font-size:1.8rem;line-height:1}
.img-cat-name{font-size:.82rem;font-weight:800;letter-spacing:.3px}

/* ══ DEVELOPER CARD ══ */
.dev-card{margin-top:18px;border-radius:16px;border:1.5px solid rgba(255,215,0,.25);background:linear-gradient(135deg,rgba(255,215,0,.07),rgba(255,140,0,.025));padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.dev-icon{width:42px;height:42px;border-radius:50%;background:rgba(255,215,0,.12);border:1.5px solid rgba(255,215,0,.35);display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.dev-info{min-width:0;text-align:right}
.dev-name-row{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:2px}
.dev-name-grad{font-size:.98rem;font-weight:900;color:var(--gold);white-space:nowrap}