:root{
  --paper:#F6F8FC; --grid:#DCE4F3; --margin:#F2B8B5;
  --ink:#1B2340; --ink-soft:#4A5577; --pen:#2342C8; --pen-soft:#E3E9FF;
  --red:#D2322D; --red-soft:#FDE7E6; --green:#16875A; --green-soft:#DDF4EA;
  --hl:#FFD84D; --hl-soft:#FFF4C2; --card:#FFFFFF; --line:#C9D3EA;
  --shadow:0 1px 0 rgba(27,35,64,.06),0 6px 18px -8px rgba(27,35,64,.18);
  --display:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;
  --body:"Readex Pro",system-ui,"Segoe UI",Tahoma,sans-serif;
  --ruqaa:"Aref Ruqaa","Readex Pro",serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121829; --grid:#1E2842; --margin:#5A2B33;
    --ink:#E7EBF7; --ink-soft:#A7B1CE; --pen:#8FA4FF; --pen-soft:#1F2A55;
    --red:#FF6F66; --red-soft:#3A1A1E; --green:#4FD49A; --green-soft:#143528;
    --hl:#E8C23A; --hl-soft:#3A3217; --card:#182039; --line:#2C3860;
    --shadow:0 1px 0 rgba(0,0,0,.3),0 8px 22px -10px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121829; --grid:#1E2842; --margin:#5A2B33;
  --ink:#E7EBF7; --ink-soft:#A7B1CE; --pen:#8FA4FF; --pen-soft:#1F2A55;
  --red:#FF6F66; --red-soft:#3A1A1E; --green:#4FD49A; --green-soft:#143528;
  --hl:#E8C23A; --hl-soft:#3A3217; --card:#182039; --line:#2C3860;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 8px 22px -10px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; direction:rtl; font-family:var(--body); color:var(--ink); font-size:16px; line-height:1.75;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;
  padding:0 16px 48px;
}
.wrap{max-width:760px;margin:0 auto}
.m{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);padding-block:12px 10px;border-bottom:2px solid var(--margin)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--ink-soft)}
.crumbs b{color:var(--ink);font-weight:600}
.tag{font-size:12px;padding:1px 8px;border-radius:999px;background:var(--hl-soft);color:var(--ink);border:1px dashed var(--hl)}
.rail{display:flex;gap:6px;margin-top:10px;align-items:center}
.rail button{flex:1;height:8px;border:0;border-radius:4px;background:var(--line);cursor:pointer;padding:0}
.rail button.done{background:var(--pen)}
.rail button.here{background:var(--hl);outline:2px solid var(--pen);outline-offset:1px}
.rail button:disabled{cursor:default}
.stats{display:flex;gap:14px;align-items:center;margin-inline-start:auto;font-size:13px;font-variant-numeric:tabular-nums}
.stats span{display:inline-flex;gap:4px;align-items:center}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{font:500 13px var(--body);border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 12px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--pen);background:var(--pen-soft);color:var(--pen)}
.stage{margin-top:22px}
.eyebrow{font-size:13px;color:var(--pen);font-weight:600;letter-spacing:.02em}
h1,h2{font-family:var(--display);line-height:1.25;text-wrap:balance;margin:.1em 0 .4em}
h1{font-size:clamp(28px,6vw,40px);font-weight:800}
h2{font-size:clamp(22px,4.6vw,30px);font-weight:700}
p{margin:.4em 0 .8em;max-width:65ch}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 18px 20px;position:relative}
.sheet+.sheet{margin-top:14px}
.hl{background:linear-gradient(transparent 55%,var(--hl) 55%,var(--hl) 90%,transparent 90%);padding-inline:2px}
.darija{display:none;margin-top:10px;padding:10px 14px;border-inline-start:4px solid var(--hl);background:var(--hl-soft);border-radius:8px;font-size:15px}
body.show-darija .darija{display:block}
.darija::before{content:"بالدارجة: ";font-weight:600;color:var(--ink-soft)}
.btn{font:600 16px var(--body);border:0;border-radius:12px;padding:11px 20px;cursor:pointer;background:var(--pen);color:#fff;transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--pen);border:1.5px solid var(--pen)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.chip:focus-visible,.opt:focus-visible,input:focus-visible,.line-pick:focus-visible,.rail button:focus-visible{outline:3px solid var(--hl);outline-offset:2px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
.red-note{font-family:var(--ruqaa);color:var(--red);font-size:20px;line-height:1.6;margin-top:10px;padding:6px 12px;border-inline-start:3px solid var(--red);background:var(--red-soft);border-radius:6px}
.green-note{font-family:var(--ruqaa);color:var(--green);font-size:20px;line-height:1.6;margin-top:10px;padding:6px 12px;border-inline-start:3px solid var(--green);background:var(--green-soft);border-radius:6px}
input.ans{font:600 20px var(--body);direction:ltr;text-align:center;width:120px;padding:8px 10px;border:2px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
input.ans.ok{border-color:var(--green)} input.ans.bad{border-color:var(--red)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}
.opt{font:600 20px var(--body);direction:ltr;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.opt.ok{border-color:var(--green);background:var(--green-soft)}
.opt.bad{border-color:var(--red);background:var(--red-soft);text-decoration:line-through;text-decoration-color:var(--red)}
.opt:disabled{cursor:default}
.steps{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.steps li{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line)}
.steps li .n{font-family:var(--display);font-weight:700;color:var(--pen);min-width:1.4em}
.steps li[hidden]{display:none}
.nl-wrap{overflow-x:auto;direction:ltr}
svg text{font-family:var(--body)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.twocol{grid-template-columns:1fr}}
.rule{padding:12px 14px;border-radius:12px;border:1.5px dashed var(--line);background:var(--paper)}
.rule h3{margin:0 0 4px;font:700 17px var(--display)}
.stepper{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:12px;padding:4px;background:var(--paper)}
.stepper button{width:36px;height:36px;border-radius:9px;border:0;background:var(--card);color:var(--ink);font:700 20px var(--body);cursor:pointer}
.stepper output{min-width:64px;text-align:center;font:700 20px var(--body);direction:ltr}
.classmate{display:flex;gap:12px;align-items:flex-start}
.avatar{flex:0 0 52px;height:52px;border-radius:50%;background:var(--hl);display:grid;place-items:center;font:800 22px var(--display);color:#1B2340}
.bubble{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:10px 14px}
.line-pick{display:block;width:100%;text-align:start;font:500 16px var(--body);color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px;cursor:pointer}
.line-pick.picked-bad{border-color:var(--red);background:var(--red-soft)}
.line-pick.picked-ok{border-color:var(--line);opacity:.7}
table.exam{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;margin:8px 0}
table.exam th,table.exam td{border:1px solid var(--line);padding:6px 8px;text-align:center}
table.exam th{background:var(--paper);font-weight:600}
.table-wrap{overflow-x:auto}
.score{font:800 42px var(--display);color:var(--pen);direction:ltr;display:inline-block}
.ring{width:150px;height:150px}
.done-grid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
@media (max-width:480px){.done-grid{grid-template-columns:1fr;justify-items:center;text-align:center}}
.small{font-size:13px;color:var(--ink-soft)}
.gate-dots{display:flex;gap:6px;margin:6px 0 2px}
.gate-dots i{width:14px;height:14px;border-radius:50%;background:var(--line);display:block}
.gate-dots i.ok{background:var(--green)} .gate-dots i.bad{background:var(--red)} .gate-dots i.cur{outline:2px solid var(--pen);outline-offset:1px}
.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* lesson widgets */

table.eu{border-collapse:collapse;direction:ltr;margin:8px auto;font-variant-numeric:tabular-nums;font-size:18px}
table.eu td{padding:6px 8px;text-align:center;border-bottom:1px dashed var(--line)}
table.eu td.r{font-weight:700;color:var(--pen)}
table.eu tr.last td.r{background:var(--hl-soft);border-radius:6px}
table.eu input.ans{width:72px;font-size:18px;padding:4px 6px}
.divs{display:flex;flex-wrap:wrap;gap:6px;direction:ltr;margin:6px 0}
.divs span{min-width:36px;text-align:center;padding:3px 8px;border-radius:8px;border:1.5px solid var(--line);font-variant-numeric:tabular-nums;font-weight:600}
.divs span.c{border-color:var(--pen);background:var(--pen-soft);color:var(--pen)}
.divs span.g{background:var(--hl);border-color:var(--hl);color:#1B2340}
.boxes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;min-height:40px}
.box{border:2px solid var(--pen);border-radius:8px;padding:2px 6px;font-size:12px;background:var(--pen-soft);color:var(--ink);direction:rtl}

/* hub */
.hub-t{margin-top:22px}
.unit{margin-top:14px}
.unit h3{font:700 18px var(--display);margin:0 0 6px}
.lesson-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);margin-top:8px;color:var(--ink);text-decoration:none}
a.lesson-row:hover{border-color:var(--pen)}
.lesson-row .st{font-size:12px;padding:2px 10px;border-radius:999px;white-space:nowrap}
.st.ready{background:var(--pen-soft);color:var(--pen)} .st.doneL{background:var(--green-soft);color:var(--green)} .st.soon{background:var(--paper);color:var(--ink-soft);border:1px dashed var(--line)}
.lesson-row.soon{opacity:.6}
.srcnote{font-size:12px;color:var(--ink-soft)}

/* اللغة العربية: إجابات نصية، اختيار الكلمات من النص، الإعراب */
.ans.ar{direction:rtl;text-align:right;width:auto;min-width:160px;max-width:100%}
select.ans{direction:rtl;text-align:right;width:auto;min-width:130px;font-size:17px;padding:6px 8px}
.tap{font-size:21px;line-height:2.4;padding:6px 4px;border-radius:12px;border:2px solid transparent}
.tap.ok{border-color:var(--green)}.tap.bad{border-color:var(--red)}
.tw{white-space:nowrap}
.tk{font:inherit;color:inherit;background:transparent;border:0;border-bottom:2px dotted var(--line);padding:0 1px;margin:0;cursor:pointer;border-radius:4px}
.tk:hover{background:var(--pen-soft)}
.tk.on{background:var(--hl-soft);border-bottom:2px solid var(--hl)}
.tk.good{background:var(--green-soft);border-bottom-color:var(--green)}
.tk.wrong{background:var(--red-soft);border-bottom-color:var(--red);text-decoration:line-through}
.passage{font-size:19px;line-height:2.1;text-align:justify}
.passage .ln{color:var(--ink-soft);font-size:12px;margin-inline-end:4px}
.irab{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.irab .w{font:700 20px var(--body);min-width:70px}
.ex{font-size:20px;line-height:2.1}
.ex u{text-decoration-color:var(--pen);text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- game layer ---------- */
.cmbw.hot{color:var(--hl);text-shadow:0 0 8px var(--hl)}
.stage{position:relative}
.floaty{position:absolute;top:40px;inset-inline-start:50%;transform:translateX(50%);font:800 24px var(--display);pointer-events:none;z-index:20;animation:floatUp 1.1s ease-out forwards;white-space:nowrap}
.floaty.g{color:var(--green)}.floaty.b{color:var(--red)}
@keyframes floatUp{0%{opacity:0;transform:translate(50%,10px) scale(.8)}20%{opacity:1;transform:translate(50%,0) scale(1.1)}100%{opacity:0;transform:translate(50%,-50px) scale(1)}}
.shake{animation:shake .38s}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.fadein{animation:fadein .4s}@keyframes fadein{from{opacity:0}to{opacity:1}}
.story .spanel{display:flex;gap:14px;align-items:flex-end;margin-top:8px}
.story .spanel.sb{flex-direction:row-reverse}
.story .char{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:84px}
.story .face{font-size:58px;line-height:1;width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:var(--pen-soft);border:3px solid var(--pen);animation:bob 2.4s ease-in-out infinite}
.story .sb .face{background:var(--red-soft);border-color:var(--red)}
.story .nm{font:700 13px var(--body);color:var(--ink-soft)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bubble.big{font-size:19px;line-height:1.9;padding:14px 16px;min-height:90px;flex:1}
.sdots{display:flex;gap:6px;justify-content:center;margin-top:12px}.sdots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.sdots i.on{background:var(--pen)}
.arena,.hunt{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.ahud{display:flex;justify-content:space-between;align-items:center;font-size:20px;margin-bottom:8px}
.acnt{font:700 16px var(--body);color:var(--ink-soft)}
.tbar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:12px}.tbar i{display:block;height:100%;background:var(--green);transition:width .1s linear}.tbar i.low{background:var(--red)}
.card-stage{min-height:150px;display:grid;place-items:center;perspective:600px}
.gcard{font:600 22px var(--body);line-height:1.9;text-align:center;background:var(--paper);border:3px solid var(--pen);border-radius:16px;padding:18px 20px;max-width:100%;box-shadow:0 10px 24px -12px var(--pen)}
.gcard u{text-decoration-color:var(--hl);text-decoration-thickness:3px;text-underline-offset:7px}
.gcard.deal{animation:deal .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes deal{from{opacity:0;transform:translateY(30px) rotate(-4deg) scale(.9)}to{opacity:1;transform:none}}
.gcard.fly{animation:fly .5s ease-in forwards;border-color:var(--green)}
@keyframes fly{to{opacity:0;transform:translateY(90px) scale(.6) rotate(6deg)}}
.gcard.nope{border-color:var(--red);animation:shake .38s}
.gcard.win,.gcard.lose{border-color:var(--hl);font-size:18px}
.bigstars{font-size:46px;color:var(--hl);letter-spacing:4px}
.bins{display:grid;gap:10px;margin-top:14px}
.bin{font:700 18px var(--body);padding:14px 10px;border-radius:14px;border:2px solid var(--pen);background:var(--pen-soft);color:var(--ink);cursor:pointer;transition:transform .1s}
.bin:active{transform:scale(.96)}.bin.right{background:var(--green-soft);border-color:var(--green)}
.hunt .tk.good{background:var(--green-soft);border-bottom:2px solid var(--green)}
.hunt .tk.wrong{background:var(--red-soft);animation:shake .38s}
.hunt .tk.reveal{background:var(--hl-soft);border-bottom:2px solid var(--hl)}
.pop{animation:popk .35s}@keyframes popk{50%{transform:scale(1.25)}}
.boss{display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--red);border-radius:16px;padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
.bface{font-size:44px;line-height:1}.bface.hurt{animation:hurt .4s}.bface.down{animation:down .8s forwards}
@keyframes hurt{30%{transform:scale(.8) rotate(-10deg);filter:brightness(2)}}
@keyframes down{50%{transform:scale(1.5)}100%{transform:scale(1.2)}}
.bname{font:700 14px var(--body);color:var(--ink-soft)}
.bhp{height:14px;border-radius:7px;background:var(--line);overflow:hidden;margin-top:4px}.bhp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#ff9a4d);transition:width .4s}
.bpts{font:800 20px var(--display);color:var(--red);min-width:40px;text-align:center}
.rulecard{margin:10px auto 14px;max-width:320px;border-radius:18px;padding:14px 16px;background:linear-gradient(160deg,var(--card),var(--paper));border:3px solid #b8773a;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);text-align:center;animation:deal .6s cubic-bezier(.2,1.4,.4,1)}
.rulecard.s2{border-color:#9aa6b8}.rulecard.s3{border-color:var(--hl);box-shadow:0 0 24px -4px var(--hl)}
.rc-top{display:flex;justify-content:space-between;font:700 12px var(--body);color:var(--ink-soft)}
.rc-icon{font-size:48px;margin:6px 0}.rc-title{font:800 20px var(--display)}.rc-body{font-size:15px;margin-top:6px}.rc-stars{font-size:26px;color:var(--hl);margin-top:6px}
.lesson-row .node{flex:none;min-width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--pen-soft);border:2px solid var(--pen);color:var(--hl)}
.lesson-row .node.done{background:var(--green-soft);border-color:var(--green)}.lesson-row .node.lock{background:var(--line);border-color:var(--line);font-size:16px}
.lesson-row{display:flex;align-items:center;gap:12px}
.unit .lesson-row:nth-of-type(2n){margin-inline-start:28px}
@media (max-width:480px){.unit .lesson-row:nth-of-type(2n){margin-inline-start:12px}.story .face{width:64px;height:64px;font-size:42px}.story .char{min-width:64px}}
@media (prefers-reduced-motion: reduce){.floaty,.gcard.deal,.gcard.fly,.story .face,.rulecard{animation:none!important}}

/* ================= حُرّاس الضاد: عالم الكتاب المصوّر (مظهر واحد مقصود) ================= */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
  --paper:#FFF6E6;--grid:#F2E3C8;--margin:#E8B04B;--ink:#2B2140;--ink-soft:#6E6188;--pen:#4263EB;--pen-soft:#E5EBFF;
  --red:#E03131;--red-soft:#FFE3E3;--green:#2B8A3E;--green-soft:#D3F9D8;--hl:#F59F00;--hl-soft:#FFF3BF;--card:#FFFFFF;--line:#EBDCC2;
  --shadow:0 2px 0 rgba(120,80,20,.08),0 10px 26px -12px rgba(120,80,20,.35);color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#FFF6E6;--grid:#F2E3C8;--margin:#E8B04B;--ink:#2B2140;--ink-soft:#6E6188;--pen:#4263EB;--pen-soft:#E5EBFF;--red:#E03131;--red-soft:#FFE3E3;--green:#2B8A3E;--green-soft:#D3F9D8;--hl:#F59F00;--hl-soft:#FFF3BF;--card:#FFFFFF;--line:#EBDCC2;color-scheme:light}}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 6 L47 22 L64 16 L58 33 L74 40 L58 47 L64 64 L47 58 L40 74 L33 58 L16 64 L22 47 L6 40 L22 33 L16 16 L33 22 Z' fill='none' stroke='%23EAD5AE' stroke-width='1.5'/%3E%3C/svg%3E");background-size:80px 80px}
.zwrap{position:sticky;top:0;z-index:6;line-height:0;margin:0 -16px}
header.top{background:rgba(255,246,230,.94);backdrop-filter:blur(4px);border-bottom:3px solid var(--margin);top:14px}
h1,h2{color:#3b1f70}
.eyebrow{color:#c2410c;font-weight:700}
.sheet{border:2px solid var(--line);border-radius:18px}
.btn{background:linear-gradient(180deg,#5c7cfa,#3b5bdb);box-shadow:0 4px 0 #2f44a8;border-radius:14px;color:#fff}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #2f44a8}
.btn.ghost{background:#fff;color:var(--pen);box-shadow:0 3px 0 var(--line);border:2px solid var(--line)}
.btn[disabled]{background:#d8cfbf;box-shadow:0 4px 0 #b9ae9a;color:#fff}
/* companion */
.buddy{position:fixed;inset-inline-start:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(80,40,160,.3))}
.buddy .btip{position:absolute;bottom:74px;inset-inline-start:40px;background:#fff;border:2px solid #6a3de8;color:#3b1f70;font:800 14px var(--display);padding:3px 10px;border-radius:12px;white-space:nowrap}
.buddy.jump{animation:bjump .6s}.buddy.droop{animation:bdroop .7s}
@keyframes bjump{30%{transform:translateY(-26px) rotate(-8deg)}60%{transform:translateY(0)}80%{transform:translateY(-8px)}}
@keyframes bdroop{30%{transform:translateX(-6px) rotate(6deg)}60%{transform:translateX(6px) rotate(-6deg)}}
.art.mascot{animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}
/* comic story */
.comic{position:relative;height:230px;border-radius:20px;overflow:hidden;border:3px solid #3b1f70;box-shadow:0 8px 0 #3b1f70}
.cscene,.cscene .scene{position:absolute;inset:0;width:100%;height:100%}
.cchar{position:absolute;bottom:-4px;inset-inline-start:18px}.cchar.cb{inset-inline-start:auto;inset-inline-end:18px}
.cchar.enter{animation:enter .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes enter{from{transform:translateY(60px) scale(.8);opacity:0}}
.cgems{position:absolute;top:14px;inset-inline-end:16px;display:flex;gap:6px}.cgems span{animation:gemfall 1.2s ease-in-out infinite alternate}
@keyframes gemfall{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(8px) rotate(6deg)}}
.cbubble{position:relative;margin-top:16px;background:#fff;border:3px solid #3b1f70;border-radius:18px;padding:12px 16px;font-size:19px;line-height:1.9;min-height:96px;box-shadow:0 5px 0 #3b1f70}
.cbubble::before{content:"";position:absolute;top:-16px;inset-inline-start:52px;border:8px solid transparent;border-bottom-color:#3b1f70;border-width:0 10px 16px}
.cbubble.cb::before{inset-inline-start:auto;inset-inline-end:52px}
.cbubble.cb{border-color:#862e9c;box-shadow:0 5px 0 #862e9c;background:#fbf0ff}
.cwho{font:800 14px var(--display);color:#c2410c;margin-bottom:2px}.cbubble.cb .cwho{color:#862e9c}
/* manuscript page */
.manuscript .sheet{background:linear-gradient(180deg,#fffaf0,#fff3dc);border:3px solid #d9a441;box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 8px #e8c47a,var(--shadow)}
.manuscript .rule{border-radius:14px;border:2px dashed #e8c47a;background:#fffdf7}
.manuscript .rule h3{color:#c2410c}
/* arena + bins */
.arena,.hunt{border:3px solid #3b1f70;box-shadow:0 6px 0 #3b1f70;background:#fff}
.gcard{background:linear-gradient(160deg,#fff,#f3f0ff);border:3px solid #6a3de8;box-shadow:0 8px 0 #6a3de8}
.bin{display:flex;align-items:center;justify-content:center;gap:8px;border-width:3px;box-shadow:0 4px 0 rgba(0,0,0,.18);color:#1d1442}
.bin.c0{background:#e7f5ff;border-color:#339af0}.bin.c1{background:#fff0f6;border-color:#f06595}.bin.c2{background:#ebfbee;border-color:#40c057}.bin.c3{background:#fff9db;border-color:#fab005}.bin.c4{background:#f8f0fc;border-color:#be4bdb}.bin.c5{background:#e6fcf5;border-color:#20c997}
.bin.g-damma{background:#e7f5ff;border-color:#1c7ed6}.bin.g-fatha{background:#fff5f5;border-color:#e03131}.bin.g-kasra{background:#ebfbee;border-color:#2f9e44}.bin.g-sukun{background:#fff9db;border-color:#f08c00}
.hearts{letter-spacing:2px}
.boss{border:3px solid #862e9c;box-shadow:0 6px 0 #862e9c;background:linear-gradient(90deg,#fbf0ff,#fff)}
.bface{width:74px;height:82px;display:grid;place-items:center}
.taunt{display:flex;align-items:center;gap:10px;margin:6px 0 10px}.tbub{background:#fbf0ff;border:2px solid #862e9c;border-radius:14px;padding:8px 12px;font:700 16px var(--body);color:#5f3dc4}
.victory{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:4px 0 6px}
.vgems{display:flex;gap:8px;padding-bottom:30px}.vgems span{animation:gemfall 1s ease-in-out infinite alternate}
.ubanner{position:relative;height:110px;border-radius:18px;overflow:hidden;border:3px solid #3b1f70;box-shadow:0 5px 0 #3b1f70;margin:18px 0 10px}
.ubanner .scene{position:absolute;inset:0;width:100%;height:100%}
.ulabel{position:absolute;bottom:8px;inset-inline-start:10px;background:#fff;border:2px solid #3b1f70;border-radius:12px;padding:2px 12px;font:800 17px var(--display);color:#3b1f70}
.lesson-row{background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--line);border-radius:16px}
.lesson-row .node{background:linear-gradient(180deg,#748ffc,#4c6ef5);border:3px solid #fff;box-shadow:0 0 0 2px #4c6ef5;color:#fff}
.lesson-row .node.done{background:linear-gradient(180deg,#ffd43b,#f59f00);box-shadow:0 0 0 2px #f59f00;color:#fff}
.lesson-row .node.lock{background:#e9e1d3;box-shadow:0 0 0 2px #d8cbb3}
.tk{border-bottom-color:#d9c9a8}
.red-note{border-radius:12px}.green-note{border-radius:12px}
@media (max-width:480px){.comic{height:190px}.cchar svg{width:88px;height:auto}}
@media (prefers-reduced-motion: reduce){.buddy,.cchar.enter,.cgems span,.vgems span,.art.mascot{animation:none!important}}
.floaty{position:fixed!important;top:36%!important}
/* بلاطات الرموز العروضية */
.rz-row{display:flex;flex-wrap:wrap;gap:6px;direction:rtl;margin:8px 0}
.rz{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:40px;padding:6px 4px;border-radius:12px;border:2px solid #6a3de8;background:#f3f0ff;cursor:pointer;font:inherit;color:#1d1442;box-shadow:0 3px 0 #6a3de8}
.rz span{font:700 22px var(--body)}.rz b{font:800 18px var(--display);color:#c2410c;direction:ltr}
.rz[data-v="/"]{background:#e7f5ff;border-color:#1c7ed6;box-shadow:0 3px 0 #1c7ed6}.rz[data-v="0"]{background:#fff9db;border-color:#f08c00;box-shadow:0 3px 0 #f08c00}
.rz-gap{width:14px}
.rz-word{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:rgba(106,61,232,.06);margin-inline-end:10px}
@media (max-width:600px){.buddy svg{width:46px;height:auto}.buddy .btip{bottom:52px;inset-inline-start:26px;font-size:12px}body{padding-bottom:84px}}

/* ---------- لوحة الحارس ---------- */
.dash{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:#fff;border:3px solid #3b1f70;border-radius:20px;padding:14px;box-shadow:0 6px 0 #3b1f70;margin:10px 0 18px}
.dring{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;max-width:120px}
.dside{flex:1;min-width:220px}.dstats{font-size:16px;margin-bottom:8px}
.dbtns{display:flex;flex-wrap:wrap;gap:8px}
.dbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:14px;border:2px solid;font:700 15px var(--body);color:#1d1442;text-decoration:none;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.dbtn i{font-style:normal;background:#e03131;color:#fff;border-radius:999px;padding:0 7px;font-size:12px}
.d1{background:#e7f5ff;border-color:#1c7ed6}.d2{background:#fff0f6;border-color:#d6336c}.d3{background:#fff9db;border-color:#f08c00}.d4{background:#ebfbee;border-color:#2f9e44}.d5{background:#f3f0ff;border-color:#7048e8}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.rulecard.mini{margin:0;max-width:none;text-decoration:none;color:inherit;padding:10px 12px}
.rulecard.mini .rc-icon{font-size:34px;margin:2px 0}.rulecard.mini .rc-title{font-size:16px}.rulecard.mini .rc-body{font-size:13px}
.rulecard.locked{border-color:#d8cbb3;background:#f1e9da;opacity:.75;box-shadow:none}
.report{white-space:pre-wrap;direction:rtl;font:15px/1.9 var(--body);background:#fff;border:2px dashed #2f9e44;border-radius:14px;padding:12px}
.code{width:100%;min-height:90px;direction:ltr;font:12px monospace;border:2px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.mist h3{margin:.2em 0;color:#c2255c}
/* ---------- الإنجليزية: نص من اليسار، والمترجم السحري ---------- */
.en{direction:ltr;text-align:left;unicode-bidi:isolate}
.entext{background:#fff;border:3px solid #1c7ed6;border-radius:18px;padding:12px 14px;box-shadow:0 5px 0 #1c7ed6;margin:8px 0}
.entitle{font:800 20px var(--display);color:#1864ab;margin-bottom:6px}
.entools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.enbody{font-size:19px;line-height:2}
.sent{cursor:pointer;border-radius:6px;padding:1px 2px;transition:background .15s}
.sent:hover{background:#e7f5ff}.sent.on{background:#fff3bf;box-shadow:0 0 0 2px #fab005}
.gw{font-weight:inherit;border-bottom:2px dotted #e8590c;cursor:help}
.trbox{margin-top:10px;background:#f3f7ff;border:2px dashed #1c7ed6;border-radius:14px;padding:10px 12px;animation:fadein .3s}
.trrow{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}
.en-s{font-weight:700;font-size:18px}.trbtns{display:flex;gap:4px}
.ar-s{margin-top:6px;font-size:18px;color:#2b2140}
.entext.all .sent{display:block;margin-bottom:4px}
.entext.all .sent::after{content:attr(data-ar);display:block;direction:rtl;text-align:right;color:#6e6188;font-size:15px;margin:2px 0 6px}
.gcard.en,.gcard .en{font-family:var(--body)}
/* مخطط البيت (النموذج 48) */
.hplan{display:grid;gap:4px;max-width:420px;margin:8px auto;border:3px solid #1c7ed6;border-radius:12px;padding:6px;background:#e7f5ff}
.hp{display:grid;gap:4px}.hp.r1{grid-template-columns:1fr 1fr 1fr}.hp.r2,.hp.r3{grid-template-columns:1fr 1fr}
.hp span{background:#fff;border:2px solid #74c0fc;border-radius:8px;padding:10px 4px;text-align:center;font:700 14px var(--body);color:#1864ab}
.d6{background:#e6fcf5;border-color:#0ca678}
.d7{background:#fff4e6;border-color:#e8590c}

/* ===== الكتاب المدرسي التفاعلي (#BOOK) ===== */
.tb-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;position:sticky;top:8px;z-index:5}
.tb-toolbar label{font:600 14px var(--body);display:flex;gap:6px;align-items:center}
.tb-toolbar select{font:inherit;padding:6px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper)}
.tb-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
.tb-paper{overflow:auto;background:#e2e7e3;padding:14px;border-radius:14px;max-height:86vh}
.tb-imgwrap{position:relative;max-width:100%}
.tb-imgwrap img{display:block;width:100%;height:auto;box-shadow:0 5px 25px #26382b22;border-radius:6px}
.tb-spot{position:absolute;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;background:radial-gradient(circle at 35% 35%,#ffd84d,#e8a013);color:#4a2c00;font-size:17px;box-shadow:0 3px 10px #00000044;transform:translate(50%,-50%);animation:tbpulse 2.4s infinite}
.tb-spot:hover,.tb-spot:focus-visible{transform:translate(50%,-50%) scale(1.18)}
@keyframes tbpulse{0%,100%{box-shadow:0 3px 10px #00000044,0 0 0 0 #ffd84d66}50%{box-shadow:0 3px 10px #00000044,0 0 0 9px #ffd84d00}}
.tb-side{background:var(--card);padding:20px;border:1px solid var(--line);border-radius:14px;display:grid;gap:14px}
.tb-spotinfo{border:1.5px dashed var(--line);border-radius:10px;padding:12px;background:var(--paper);font-size:15px;transition:.25s}
.tb-spotinfo.show{border-style:solid;border-color:var(--gold,#c48539);background:#fff8ea}
.tb-quiz{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--paper)}
.tb-question{font-size:18px;font-weight:700;margin:.3em 0 .7em}
.tb-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tb-opt{font:600 16px var(--body);padding:10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);cursor:pointer}
.tb-opt:hover{border-color:var(--pen)}
.tb-opt.ok{background:var(--green-soft);border-color:var(--green)}
.tb-opt.bad{background:var(--red-soft);border-color:var(--red)}
.tb-notewrap textarea{width:100%;min-height:90px;font:inherit;padding:10px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);resize:vertical}
@media(max-width:900px){.tb-workspace{grid-template-columns:1fr}.tb-paper{max-height:64vh}.tb-opts{grid-template-columns:1fr}}
.tb-solutions{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.tb-solutions>summary{cursor:pointer;font-weight:700;padding:10px 12px;color:var(--pen)}
.tb-solutions details{margin:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.tb-solutions details summary{cursor:pointer;padding:8px 10px;font-size:14px}
.tb-steps{margin:6px 0;padding-inline-start:26px;font:600 15px var(--body)}
.tb-steps li{margin:3px 0}
.tb-draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.tb-draw.on{pointer-events:auto;cursor:crosshair}
.tb-drawbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.tb-drawtools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tb-drawtools.hidden{display:none}
.tb-pen{width:26px;height:26px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;padding:0}
.tb-pen.sel{border-color:var(--ink);transform:scale(1.15)}
#tb-eraser.sel{background:var(--hl);border-color:var(--pen)}
.tb-imgwrap{position:relative}