@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Cairo:wght@400;600;700;800;900&family=Tajawal:wght@400;500;700&family=Playfair+Display:wght@600;700&display=swap');
:root{
  --paper:#F5EFE0;--card:#FFFDF6;--ink:#1c1509;--soft:#6a5f4b;--faint:#9a8e74;
  --gold:#C9A24B;--gold-deep:#A07C2B;--gold-light:#E0BE72;--night:#13100a;--line:rgba(160,124,43,.28);
  --ar:'Cairo','Tajawal',sans-serif;--head:'Aref Ruqaa','Cairo',serif;--serif:'Playfair Display',serif;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--ar);-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);direction:rtl;overflow-x:hidden}
.en{font-family:var(--serif);direction:ltr;unicode-bidi:isolate}
.num{font-family:var(--serif);direction:ltr;unicode-bidi:isolate}
#app{width:100%;max-width:480px;margin:0 auto;height:100%;display:flex;flex-direction:column;position:relative;background:var(--paper);overflow:hidden}
header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px}
header .brand{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:700;font-size:22px;color:var(--gold-deep)}
header .brand img{width:30px;height:30px}
.streak{background:rgba(201,162,75,.16);border:1px solid var(--line);border-radius:30px;padding:6px 13px;font-weight:800;font-size:14px;color:var(--gold-deep)}
main{flex:1;overflow-y:auto;padding:6px 16px 86px}
nav{position:absolute;left:0;right:0;bottom:0;height:66px;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
nav button{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--faint);font-weight:700;font-size:11px;cursor:pointer}
nav button.on{color:var(--gold-deep)}
nav .ic{width:22px;height:22px;border:2px solid currentColor}
nav .ic.feed{border-radius:6px}nav .ic.cards{border-radius:50%}nav .ic.games{transform:rotate(45deg);border-radius:4px}nav .ic.prog{border-radius:6px;border-style:double}
.daychip{display:inline-block;background:var(--night);color:var(--gold-light);font-weight:800;font-size:13px;padding:6px 14px;border-radius:30px}
.rulelbl{color:var(--gold-deep);font-weight:800;font-size:14px;margin-top:18px;display:flex;align-items:center;gap:8px}
.rulelbl::before{content:"";width:22px;height:2px;background:var(--gold-deep)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px;box-shadow:0 14px 30px -24px rgba(0,0,0,.4)}
.rule-en{font-family:var(--serif);direction:ltr;font-weight:700;font-size:26px;color:var(--ink);margin-top:8px;line-height:1.25}
.rule-ar{font-family:var(--head);font-weight:700;font-size:22px;color:var(--ink);margin-top:6px}
.detail{font-size:14.5px;color:var(--soft);margin-top:12px;line-height:1.7}
.formula{margin-top:14px;text-align:center;font-family:var(--serif);direction:ltr;color:var(--gold-deep);font-weight:700;font-size:15px;background:rgba(201,162,75,.10);border-radius:10px;padding:9px}
.prompt{margin-top:14px;background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--ink)}
.prompt b{color:var(--gold-deep)}
.navrow{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:12px;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer}
.btn.gold{background:linear-gradient(100deg,var(--gold-deep),var(--gold) 60%,var(--gold-light));color:#1c1206;border:none}
.btn:disabled{opacity:.4}
.h2{font-weight:800;font-size:18px;margin:6px 2px 12px}
.flashgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.flash{height:104px;border-radius:16px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;text-align:center;padding:8px}
.flash .w{font-family:var(--serif);direction:ltr;font-weight:700;font-size:21px;color:var(--ink)}
.flash.flip{background:var(--night)}
.flash.flip .w{font-family:var(--head);direction:rtl;color:var(--gold-light);font-size:20px}
.flash .pos{position:absolute;top:8px;right:10px;font-size:10px;color:var(--faint);font-weight:700}
.tilegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tile{height:64px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;cursor:pointer;background:linear-gradient(135deg,#1a140a,#2a2012);color:var(--gold-light)}
.tile.up{background:var(--card);color:var(--ink)}
.tile.up .en{font-size:14px}
.tile.match{background:rgba(47,109,63,.14);border-color:rgba(47,109,63,.5);color:#2f6d3f;cursor:default}
.ring{width:170px;height:170px;border-radius:50%;margin:16px auto 0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.ring .in{width:134px;height:134px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line)}
.ring .big{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--gold-deep)}
.ring .sm{font-size:12px;color:var(--soft);font-weight:700;margin-top:2px}
.statrow{display:flex;gap:10px;margin-top:16px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:center}
.stat .v{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink)}
.stat .k{font-size:11.5px;color:var(--soft);font-weight:700;margin-top:2px}
.gate{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:9px}
.gate .gic{width:38px;height:38px;border:2px solid var(--gold);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;border-radius:6px;flex:none}
.gate .gic span{transform:rotate(-45deg);font-weight:800;color:var(--gold-deep);font-size:12px}
.gate.done .gic{background:var(--gold)}.gate.done .gic span{color:#fff}
.gate.next{border-color:var(--gold);border-width:2px}
.gate .t{font-weight:800;font-size:14px}.gate .s{font-size:12px;color:var(--soft);font-weight:700}
.gate .st{margin-inline-start:auto;font-size:12px;font-weight:800;color:var(--faint)}
.gate.done .st{color:#2f6d3f}.gate.next .st{color:var(--gold-deep)}
.paywall{text-align:center;padding:24px 6px}
.paywall .lock{width:60px;height:60px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--gold-deep);font-size:26px}
.paywall h2{font-family:var(--head);font-size:24px;margin-bottom:8px}
.paywall p{color:var(--soft);font-size:14.5px;line-height:1.7;max-width:34ch;margin:0 auto}
.keyin{width:100%;margin-top:16px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;text-align:center;font-family:var(--serif);direction:ltr;background:#fff}
.msg{font-size:13px;font-weight:700;margin-top:8px;min-height:18px}
.trial{margin-top:14px;text-align:center;background:rgba(201,162,75,.14);border:1px solid var(--line);border-radius:30px;padding:9px;font-weight:800;color:var(--gold-deep);font-size:13px}

/* ---- install prompt bar ---- */
.installbar{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--night);color:#f3e9d2;padding:10px 14px;font-size:12.5px;line-height:1.5;border-top:1px solid var(--line)}
.installbar[hidden]{display:none}
.installbar .ibtns{display:flex;align-items:center;gap:8px;flex-shrink:0}
.installbar .btn.gold{padding:7px 14px;margin:0;white-space:nowrap;font-size:13px}
.installbar .x{background:none;border:none;color:#bdae8e;font-size:15px;cursor:pointer;padding:4px 6px;line-height:1}

/* ---- richer explanation (Arabic + structure + English) ---- */
.detail.ar{font-size:15.5px;color:var(--ink);line-height:1.95}
.detail.en{font-size:12.5px;color:var(--faint);direction:ltr;text-align:left;margin-top:8px}
.formula{text-align:start;line-height:1.95;font-size:14px;font-weight:600;padding:12px 14px}
.formula .flbl{font-family:var(--ar);direction:rtl;color:var(--gold-deep);font-weight:800;font-size:11.5px;letter-spacing:.5px;margin-bottom:6px;text-align:center}

/* ---- forms table (conjugation) + example sentences ---- */
.flbl{font-family:var(--ar);direction:rtl;color:var(--gold-deep);font-weight:800;font-size:11.5px;letter-spacing:.5px;margin-bottom:8px}
.forms{margin-top:14px;background:rgba(201,162,75,.08);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.frow:last-child{border-bottom:none}
.frow .en{font-family:var(--serif);direction:ltr;font-weight:700;font-size:15px;color:var(--ink)}
.frow .fa{font-size:13px;color:var(--soft);font-weight:600}
.examples{margin-top:14px}
.exrow{display:flex;align-items:flex-start;gap:8px;padding:7px 0}
.exrow .ok{color:#2f6d3f;font-weight:900;flex:none;margin-top:1px}
.exrow .ex{display:flex;flex-direction:column;gap:1px}
.exrow .en{font-family:var(--serif);direction:ltr;font-weight:600;font-size:15px;color:var(--ink)}
.exrow .exa{font-size:12.5px;color:var(--soft)}
.write{margin-top:16px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.write .wlbl{font-weight:800;font-size:13.5px;color:var(--gold-deep);margin-bottom:8px}
.wbox{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--serif);direction:ltr;font-size:15px;color:var(--ink);background:#fff;resize:vertical;line-height:1.5}
.wbox:focus{outline:none;border-color:var(--gold-deep)}
.btn.build{width:100%;margin-top:10px;background:var(--night);color:var(--gold-light);border:none}

/* ---- game mode tabs ---- */
.gmtabs{display:flex;gap:6px;margin-bottom:14px}
.gmt{flex:1;padding:9px 4px;border:1px solid var(--line);background:var(--card);border-radius:8px;font-family:var(--ar);font-weight:700;font-size:12.5px;color:var(--soft);cursor:pointer}
.gmt.on{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#3a2c08;border-color:var(--gold-deep)}

/* ---- cumulative review quiz ---- */
.qword{text-align:center;direction:ltr;font-family:var(--serif);font-size:30px;font-weight:700;color:var(--ink);margin:10px 0 18px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{padding:14px;border:1px solid var(--line);background:var(--card);border-radius:10px;font-family:var(--ar);font-size:16px;font-weight:700;color:var(--ink);cursor:pointer}
.opt:hover{border-color:var(--gold-deep)}
.opt.right{background:#e7f3e9;border-color:#2f6d3f;color:#2f6d3f}
.opt.wrong{background:#f6e4e0;border-color:#b54a3a;color:#b54a3a}

/* ---- sentence builder ---- */
.bhint{text-align:center;color:var(--soft);font-size:15px;margin:6px 0 16px}
.ansrow{min-height:54px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;border:2px dashed var(--line);border-radius:10px;padding:12px;background:rgba(201,162,75,.06)}
.bankrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px;min-height:44px}
.wtile{direction:ltr;font-family:var(--serif);font-size:16px;font-weight:700;padding:9px 14px;border:1px solid var(--gold-deep);background:var(--card);border-radius:8px;color:var(--ink);cursor:pointer}
.wtile.in{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:#3a2c08}
.ph{color:var(--faint);font-size:13px;font-family:var(--ar)}
.bstat{margin-top:16px;text-align:center;font-weight:800;border-radius:10px;padding:10px;font-size:14px}
.bstat.ok{background:#e7f3e9;color:#2f6d3f}
.bstat.no{background:#f6e4e0;color:#b54a3a}

/* ---- gate (milestone) day banner ---- */
.card.gate{display:block;border:1px solid var(--gold-deep);box-shadow:0 16px 44px -18px rgba(160,124,43,.55)}
.gatebanner{background:linear-gradient(160deg,var(--night),#2a2010);color:#f3e9d2;border-radius:12px;padding:16px 16px 18px;margin:8px 0 16px;text-align:center}
.gatebanner .gt{font-family:var(--head);font-size:19px;font-weight:800;color:var(--gold-light)}
.gatebanner .gt-en{direction:ltr;font-family:var(--serif);font-size:12.5px;color:#cdbb8e;margin-top:3px}
.gatebanner .gwis{margin-top:12px;border-top:1px solid rgba(201,162,75,.3);padding-top:12px}
.gatebanner .wa{font-size:14px;line-height:1.95;color:#efe6d2}
.gatebanner .we{direction:ltr;text-align:left;font-size:12px;line-height:1.7;color:#b9a87f;margin-top:8px}

/* ---- pronunciation button ---- */
.flash{position:relative}
.say{margin-inline-start:8px;background:rgba(201,162,75,.15);border:1px solid var(--line,rgba(160,124,43,.3));border-radius:8px;cursor:pointer;font-size:15px;padding:2px 9px;line-height:1.5;vertical-align:middle}
.say:active{background:rgba(201,162,75,.35)}
.flash .say{position:absolute;top:8px;inset-inline-start:8px;margin:0}
.qword .say{font-size:20px}

/* ---- name / reminder pop-up sheet ---- */
.ovl{position:fixed;inset:0;background:rgba(16,12,5,.55);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;transition:opacity .2s;padding:24px}
.ovl.show{opacity:1}
.sheet{background:var(--card,#FFFDF6);border-radius:16px;padding:26px 22px;max-width:340px;width:100%;text-align:center;box-shadow:0 24px 70px -20px rgba(0,0,0,.55)}
.sheet .brand{justify-content:center;margin-bottom:6px}
.sheet h3{font-family:var(--head,'Aref Ruqaa'),serif;font-size:22px;color:var(--gold-deep);margin-bottom:6px}
.sheet p{color:var(--soft);font-size:14.5px;line-height:1.75;margin-bottom:14px}
.sheet .keyin{width:100%;margin-bottom:4px}
.sheet .btn{width:100%;justify-content:center}

/* ---- sentence-building leveling (numeric levels + XP) ---- */
.lvlline{font-size:12.5px;font-weight:700;color:#2f6d3f;margin-top:6px}
.lvlcard{margin-top:18px;background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(201,162,75,.05));border:1px solid var(--line,rgba(160,124,43,.3));border-radius:14px;padding:16px}
.lvltop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.lvlbadge{display:inline-flex;align-items:center;gap:3px;font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-radius:11px;padding:4px 11px;box-shadow:0 2px 8px rgba(160,124,43,.35)}
.lvlname{font-family:var(--head,'Aref Ruqaa'),serif;font-size:22px;font-weight:800;color:var(--gold-deep);flex:1;text-align:center}
.lvlc{font-size:13px;font-weight:800;color:var(--soft);white-space:nowrap}
.lvlbar{height:12px;background:rgba(160,124,43,.18);border-radius:7px;overflow:hidden;margin:10px 0 8px;position:relative}
.lvlbar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--gold-deep));border-radius:7px;transition:width .6s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 8px rgba(201,162,75,.5) inset}
.lvlnext{font-size:13px;color:var(--ink);font-weight:700}
.lvlhint{font-size:12px;color:var(--faint);margin-top:6px}
/* level-up celebration */
.sheet.lvlup{text-align:center}
.lvlburst{font-size:46px;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.lvlupnum{font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:72px;line-height:1;color:transparent;background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-deep));-webkit-background-clip:text;background-clip:text;margin:2px 0;animation:pop .55s cubic-bezier(.2,1.4,.4,1) both}
.lvluptag{font-family:var(--head,'Aref Ruqaa'),serif;font-size:20px;color:var(--gold-deep);font-weight:800}
.lvlupxp{font-size:13px;font-weight:800;color:#2f6d3f;margin:8px 0 2px}
.lvlupsub{font-size:12.5px;color:var(--faint);font-weight:700}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
/* combo bonus */
.combochip{display:inline-block;font-size:12.5px;font-weight:800;color:#b8471a;background:linear-gradient(135deg,rgba(255,150,60,.18),rgba(255,90,40,.12));border:1px solid rgba(210,90,30,.35);border-radius:20px;padding:5px 12px;margin:2px 0 8px;animation:pop .4s ease both}
.bstat .bonus{display:inline-block;background:#b8471a;color:#fff;border-radius:8px;padding:1px 7px;font-weight:800;margin-right:3px}
.combobreak{color:#a23!important}
.comborow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.combonow,.combobest{font-size:12px;font-weight:800;border-radius:18px;padding:4px 11px}
.combonow{color:#b8471a;background:rgba(255,120,50,.14);border:1px solid rgba(210,90,30,.3)}
.combobest{color:var(--gold-deep);background:rgba(201,162,75,.14);border:1px solid rgba(160,124,43,.3)}
.bstat .bonus.perfect{background:#2f6d3f}
/* game call-to-action (play) button on the Today screen */
.gamecta{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:13px 15px;border:none;border-radius:16px;cursor:pointer;text-align:right;color:#fff;background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-deep));box-shadow:0 4px 16px rgba(160,124,43,.35);transition:transform .12s,box-shadow .12s}
.gamecta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(160,124,43,.45)}
.gamecta:active{transform:translateY(0)}
.gc-badge{flex:none;display:inline-flex;align-items:center;gap:2px;font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:16px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);border-radius:11px;padding:5px 10px}
.gc-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.gc-main{font-family:var(--body,'Cairo'),sans-serif;font-weight:800;font-size:15.5px;line-height:1.3}
.gc-sub{font-size:12px;font-weight:700;color:rgba(255,255,255,.9)}
.gc-arrow{flex:none;font-size:22px;font-weight:800;opacity:.85}

/* ============ GAME MODE (full-app block game) ============ */
.gamebtn{font-family:var(--body,'Cairo'),sans-serif;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep));border:none;border-radius:20px;padding:7px 14px;cursor:pointer;box-shadow:0 2px 8px rgba(160,124,43,.35)}
.gamebtn:active{transform:scale(.97)}
.game-on nav{display:none}
.game-on #view{padding:0}
.gscreen{display:flex;flex-direction:column;min-height:70vh;padding:0 4px 20px;animation:gfade .3s ease both}
@keyframes gfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ghud{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 4px 14px}
.gexit{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line,rgba(160,124,43,.3));background:var(--paper-card,#fffdf6);color:var(--soft);font-size:16px;font-weight:800;cursor:pointer}
.ghud-lv{font-family:var(--head,'Aref Ruqaa'),serif;font-weight:800;font-size:19px;color:var(--gold-deep)}
.ghud-xp{font-size:13px;font-weight:800;color:var(--ink)}
.ghud-xp b{color:var(--gold-deep)}
.gcard{background:var(--paper-card,#fffdf6);border:1px solid var(--line,rgba(160,124,43,.28));border-radius:20px;padding:22px 18px;text-align:center;box-shadow:0 6px 22px rgba(30,20,8,.06)}
.gcard h2{font-family:var(--head,'Aref Ruqaa'),serif;font-size:26px;color:var(--ink);margin:6px 0 10px}
.gbig{font-size:60px;line-height:1;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
/* greeting (grammar) */
.ggreet{background:linear-gradient(180deg,rgba(201,162,75,.14),var(--paper-card,#fffdf6))}
.glvlbadge{display:inline-block;font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep));border-radius:14px;padding:5px 16px;margin-bottom:14px}
.ggreet-lbl{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--gold-deep);opacity:.8;margin-bottom:6px}
.grule-en{font-family:var(--head,'Playfair Display'),serif;font-weight:700;font-size:24px;color:var(--ink);margin:2px 0}
.grule-ar{font-family:var(--head,'Aref Ruqaa'),serif;font-size:22px;color:var(--gold-deep);margin:4px 0 10px}
.gdetail{font-size:14px;line-height:1.9;color:var(--soft);text-align:right;background:rgba(160,124,43,.06);border-radius:12px;padding:12px 14px;margin:8px 0 4px}
/* word blocks */
.gprog{font-size:12.5px;font-weight:800;color:var(--faint);margin-bottom:8px}
.gword-clue{font-size:16px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:14px}
.gword-clue b{font-family:var(--head,'Aref Ruqaa'),serif;font-size:22px;color:var(--gold-deep)}
.lslot{min-height:52px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;border:2px dashed rgba(160,124,43,.4);border-radius:14px;padding:9px;margin-bottom:14px;background:rgba(255,253,246,.6)}
.lbank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:6px}
.lblock{font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:22px;min-width:42px;height:48px;padding:0 6px;border-radius:12px;border:none;cursor:pointer;color:var(--ink);background:linear-gradient(180deg,#fff,#f0e6cf);box-shadow:0 3px 0 rgba(160,124,43,.45),0 4px 8px rgba(30,20,8,.12);transition:transform .1s}
.lblock:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(160,124,43,.45)}
.lblock.in{color:#fff;background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));box-shadow:0 3px 0 rgba(120,90,20,.5),0 4px 8px rgba(30,20,8,.15)}
.lph{color:var(--faint);font-size:13px;font-weight:700}
.gstat{border-radius:12px;padding:10px 12px;font-weight:800;font-size:14px;margin:6px 0 2px}
.gstat.ok{background:rgba(47,109,63,.12);color:#2f6d3f}
.gstat.no{background:rgba(180,60,40,.1);color:#b8471a}
.gstat .gpts{display:inline-block;background:#2f6d3f;color:#fff;border-radius:8px;padding:1px 8px;margin-right:4px}
.grow{display:flex;gap:10px;margin-top:16px}
.gbtn{flex:1;font-family:var(--body,'Cairo'),sans-serif;font-weight:800;font-size:15px;padding:13px;border-radius:14px;border:1px solid var(--line,rgba(160,124,43,.3));background:var(--paper-2,#fbf7ec);color:var(--ink);cursor:pointer}
.gbtn.gold{border:none;color:#fff;background:linear-gradient(135deg,var(--gold),var(--gold-deep));box-shadow:0 4px 14px rgba(160,124,43,.35)}
.gbtn.gold:disabled{opacity:.45;box-shadow:none;cursor:default}
.gbtn.ghost{background:transparent}
.gbtn.big{width:100%;flex:none;font-size:16px;padding:15px;margin-top:16px}
.grow .gbtn.big{margin-top:0}
/* win screen */
.gwin{background:linear-gradient(180deg,rgba(201,162,75,.14),var(--paper-card,#fffdf6))}
.gwin-stats{display:flex;justify-content:center;gap:22px;margin:8px 0 12px;font-size:14px;color:var(--soft);font-weight:700}
.gwin-stats b{color:var(--gold-deep);font-size:17px}
.gwin-lv{font-family:var(--head,'Aref Ruqaa'),serif;font-size:18px;color:var(--gold-deep);margin:6px 0}
.gwin-combo{display:inline-block;font-size:13px;font-weight:800;color:#b8471a;background:rgba(255,120,50,.14);border-radius:16px;padding:4px 12px;margin:4px 0}
.glock p{color:var(--soft);font-size:14px;line-height:1.8;margin:4px 0 8px}
/* arcade word shooter */
.shootwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.shoothud{display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 2px}
.sh-lives{font-size:17px;letter-spacing:2px}
.sh-score{font-size:14px;font-weight:800;color:var(--ink)}
.sh-score b{color:var(--gold-deep)}
.shoottarget{font-size:16px;font-weight:700;color:var(--ink);text-align:center}
.shoottarget b{font-family:var(--head,'Playfair Display'),serif;font-size:26px;color:var(--gold-deep);margin:0 4px}
.sh-prog{font-size:12px;font-weight:800;color:var(--faint)}
canvas.shootcv{width:100%;border-radius:16px;border:1px solid var(--line,rgba(160,124,43,.28));background:radial-gradient(120% 90% at 50% 0%, rgba(201,162,75,.10), var(--paper-2,#fbf7ec));touch-action:none;box-shadow:inset 0 2px 10px rgba(30,20,8,.05)}
canvas.shootcv.hitflash{animation:shflash .35s ease}
@keyframes shflash{0%{box-shadow:inset 0 0 0 3px rgba(200,60,40,.7)}100%{box-shadow:inset 0 2px 10px rgba(30,20,8,.05)}}
.sh-tip{font-size:11.5px;color:var(--faint);text-align:center}
.sh-combo{font-size:12.5px;font-weight:800;color:#b8471a;min-height:16px;text-align:center;flex:1;transition:transform .12s}
.sh-mute{border:none;background:transparent;font-size:15px;cursor:pointer;padding:0 2px;vertical-align:middle}
.gbest{display:inline-block;font-size:13px;font-weight:800;color:var(--gold-deep);background:rgba(201,162,75,.16);border:1px solid rgba(160,124,43,.3);border-radius:16px;padding:5px 13px;margin:6px 0}
.hicard{margin-top:12px;background:linear-gradient(135deg,var(--night,#100c05),#2a2012);border-radius:14px;padding:15px 16px;color:#f5efe0}
.hitop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hilbl{font-family:var(--body,'Cairo'),sans-serif;font-weight:800;font-size:14px;color:var(--gold-light,#e0be72)}
.hitot{font-family:var(--head,'Playfair Display'),serif;font-weight:800;font-size:30px;color:#fff;line-height:1}
.hisub{font-size:12px;color:rgba(245,239,224,.7);margin-top:6px;line-height:1.7}
.hisub b{color:var(--gold-light,#e0be72)}

/* ---- auto-activation toast + screen ---- */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(20px);z-index:9999;
  background:linear-gradient(135deg,#2a2012,#16110a);color:#F5EFE0;font-family:var(--body,'Cairo'),sans-serif;
  font-weight:800;font-size:14px;padding:13px 20px;border-radius:30px;border:1px solid rgba(224,190,114,.5);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:86vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.activating{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:6px;animation:gfade .3s ease both}
.activating .lock{font-size:64px;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.activating h2{font-family:var(--head,'Aref Ruqaa'),serif;font-size:26px;color:var(--gold-deep)}
.activating p{color:var(--soft);font-size:14px}

/* ---- paywall that sells ---- */
.sellist{list-style:none;text-align:right;margin:16px auto 4px;max-width:32ch;display:flex;flex-direction:column;gap:9px}
.sellist li{font-size:14px;color:var(--ink);font-weight:600;line-height:1.6;padding-inline-start:4px}
.sellist li b{font-family:var(--serif);color:var(--gold-deep);font-size:16px}
.pricetag{margin-top:16px;background:linear-gradient(135deg,rgba(201,162,75,.18),rgba(201,162,75,.06));border:1px solid var(--line);border-radius:16px;padding:14px}
.pricetag .p{display:block;font-family:var(--serif);font-weight:700;font-size:38px;color:var(--gold-deep);line-height:1;direction:ltr}
.pricetag .t{display:block;font-size:12px;font-weight:800;color:var(--soft);margin-top:6px}
.linkbtn{display:block;margin:12px auto 0;background:none;border:none;color:var(--soft);font-family:var(--ar);font-weight:700;font-size:13px;text-decoration:underline;cursor:pointer}
#keybox[hidden]{display:none}