:root{
  --sand:#FBF4E7; --sand-2:#F4E7D2; --paper:#FFFFFF;
  --sea:#12A0AC; --sea-2:#0B7C87; --sea-pale:#DFF3F4;
  --coral:#F27059; --coral-pale:#FDE7E1;
  --palm:#4C9C62; --palm-pale:#E3F2E6;
  --gold:#E9A63C; --gold-pale:#FCEFD7;
  --ink:#22333D; --ink-2:#5C7180; --line:#E3D9C6;
   
  --lug:#0B7C87; --lug-pale:#DFF3F4;
  --math:#8A5F14; --math-pale:#FCEFD7;
  --sci:#2F6B41; --sci-pale:#E3F2E6;
   
  --map-1:#EAF7F8; --map-2:#F7F0E1; --map-3:#FBF4E7;
  --wv-c:#CFEBEE; --dune-c:#F0E4CC; --sky:#DFF3F4;
  --r:20px; --fs:1;
  --disp:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",sans-serif;
  --body:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --read:"Noto Naskh Arabic",serif;
}

 
html[data-stage="s2"]{             
  --sea:#C4881E; --sea-2:#8A5A12; --sea-pale:#FBEEDA;
  --coral:#C25A3A; --coral-pale:#FBE6DD;
  --sand:#FDF7EC; --sand-2:#F2E3C7; --line:#E6D5B4;
  --map-1:#FAEFD6; --map-2:#F6E8CB; --map-3:#FDF7EC;
  --wv-c:#F0DFB8; --dune-c:#E9DCBE; --sky:#FBEEDA;
}
html[data-stage="s3"]{             
  --sea:#6A5AE0; --sea-2:#3E3496; --sea-pale:#EAE7FC;
  --coral:#E0568C; --coral-pale:#FBE4EE;
  --sand:#F6F5FE; --sand-2:#E6E3F8; --line:#DBD7F1;
  --map-1:#E4E0FA; --map-2:#EFEDFC; --map-3:#F6F5FE;
  --wv-c:#D6D0F6; --dune-c:#E3DFF7; --sky:#EAE7FC;
}
html[data-stage="s4"]{             
  --sea:#DD5539; --sea-2:#A33322; --sea-pale:#FCE6E0;
  --coral:#0E8F8C; --coral-pale:#DDF1F0;
  --sand:#FFF6F2; --sand-2:#F8DED4; --line:#EFD2C6;
  --map-1:#DCEFEF; --map-2:#FBE7E0; --map-3:#FFF6F2;
  --wv-c:#B9E2E1; --dune-c:#F6D8CB; --sky:#DCEFEF;
}
html[data-stage="s5"]{             
  --sea:#2E8B57; --sea-2:#1D5C39; --sea-pale:#E1F3E7;
  --coral:#C98A16; --coral-pale:#FBEFD8;
  --sand:#F7FBF7; --sand-2:#DFEFE4; --line:#CDE4D5;
  --map-1:#DFF0E5; --map-2:#EFF7F0; --map-3:#F7FBF7;
  --wv-c:#C7E7D3; --dune-c:#E6F1E4; --sky:#E1F3E7;
}
*{box-sizing:border-box}
body{margin:0; direction:rtl; text-align:right; font-family:var(--body); color:var(--ink);
  background:var(--sand); font-size:calc(15px*var(--fs)); -webkit-text-size-adjust:100%}
body::before{content:""; position:fixed; inset:0 0 auto; height:260px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,var(--sky),transparent)}
.wrap{position:relative; z-index:1; max-width:560px; margin:0 auto; padding:14px 14px 92px}
.sg{color:var(--gold)} .ss{color:#A9B7C1} .sn{color:#C6B79C}
 
svg .sg{fill:var(--gold)} svg .ss{fill:#A9B7C1} svg .sn{fill:#C6B79C}

.top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:2px 0 14px}
.brand h1{font-family:var(--disp); font-size:calc(27px*var(--fs)); margin:0 0 3px; color:var(--sea-2);
  font-weight:800; line-height:1.35; letter-spacing:.2px}
.brand p{margin:0; font-size:calc(11px*var(--fs)); color:var(--sea-2); font-weight:700;
  background:var(--sea-pale); border:1px solid color-mix(in srgb, var(--sea) 26%, transparent);
  display:inline-block; padding:3px 10px; border-radius:999px; line-height:1.7}
.brand p:empty{display:none}
.brand .stg{display:inline-block; font-family:var(--body); font-weight:700;
  font-size:calc(14px*var(--fs)); color:var(--sea); line-height:1.6; white-space:normal}
.pills{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.pill{display:flex; align-items:center; gap:5px; background:var(--paper); border:1.5px solid var(--line);
  border-radius:999px; padding:6px 11px; font-size:calc(13px*var(--fs)); font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.pill.star{border-color:#F0D9A8; background:var(--gold-pale); color:#8A5F14}
.pill.pt{border-color:#BFE6EA; background:var(--sea-pale); color:var(--sea-2)}
.pill.ok{border-color:#BCE3C6; background:var(--palm-pale); color:#2F6B41}
.pill.warn{border-color:#F5CDA0; background:#FDF1E0; color:#8A5F14}
.gsel{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.gch{flex:1 1 54px;min-width:54px;max-width:80px;border:2px solid var(--sea-pale);background:#FDFCF9;
     border-radius:14px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;
     color:var(--sea-2);opacity:.65;text-decoration:none;cursor:pointer;transition:transform .12s,opacity .12s;font-family:inherit}
.gch b{font-size:1.35em;line-height:1}
.gch span{font-size:.74em;font-weight:700}
.gch.on{background:var(--sea);border-color:var(--sea-2);color:#fff;opacity:1;box-shadow:0 4px 10px rgba(0,0,0,.18);transform:scale(1.06)}
.gch:not(.on):hover,.gch:not(.on):focus{opacity:1;transform:translateY(-2px)}
.ssel{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:2px 0 10px}
.ssel:empty{margin:0}
.sch{border:1.5px solid var(--line);background:var(--paper);border-radius:10px;min-width:30px;height:28px;padding:0 6px;
     display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);opacity:.7;
     cursor:pointer;font:700 12.5px var(--body);transition:transform .12s,opacity .12s}
.sch.on{background:var(--sea);border-color:var(--sea-2);color:#fff;opacity:1;transform:scale(1.08)}
.sch.lock{opacity:.32;cursor:not-allowed}
.sch:not(.on):not(.lock):hover{opacity:1;transform:translateY(-1px)}

 
.map{background:linear-gradient(180deg,var(--map-1) 0%,var(--map-2) 34%,var(--map-3) 100%);
  border:1.5px solid var(--line); border-radius:var(--r); padding:6px 4px 4px; margin-bottom:14px;
  box-shadow:0 2px 0 var(--sand-2), 0 10px 26px -18px rgba(34,51,61,.5); overflow:hidden}
.map svg{display:block; width:100%; height:auto}
.rd{stroke:color-mix(in srgb, var(--sea) 26%, #C9BCA2); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:1 8; fill:none; opacity:.75}
.rd.on{stroke:var(--sea); stroke-dasharray:none; stroke-width:4; opacity:1}
.stop{cursor:pointer}
.stop .cup{fill:#FFF; stroke:#DCCFB6; stroke-width:2}
.stop.s3 .cup{fill:var(--gold-pale); stroke:var(--gold); stroke-width:3}
.stop.s2 .cup{fill:var(--sea-pale); stroke:var(--sea); stroke-width:2.6}
.stop.s1 .cup{fill:var(--coral-pale); stroke:var(--coral); stroke-width:2.5}
.stop.s0 .cup{fill:#EFE7D6; stroke:#B9AB90; stroke-width:2.5}
.stop.s3 .badge{fill:var(--gold)} .stop.s2 .badge{fill:var(--sea)}
.stop.s1 .badge{fill:var(--coral)} .stop.s0 .badge{fill:#B9AB90}
.stop.now .cup{fill:#FFF; stroke:var(--coral); stroke-width:3.4; filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}
.stop.lock .cup{fill:#F2EADB; stroke:#E0D5BE}
.stop .ic{font-size:19px; text-anchor:middle; dominant-baseline:central}
.stop.lock .ic{opacity:.4}
.stop .nm{font:700 9.5px var(--body); fill:var(--sea-2); text-anchor:middle; paint-order:stroke;
  stroke:rgba(255,255,255,.9); stroke-width:2.6px; stroke-linejoin:round}
.stop.lock .nm{fill:#A79C86}
.stop .st{font:700 11px var(--body); text-anchor:middle; letter-spacing:1px}
.stop .no{font:700 8px var(--body); fill:#fff; text-anchor:middle; dominant-baseline:central}
.stop{cursor:pointer} .stop:focus{outline:none}
.stop:focus-visible .cup{stroke:var(--sea-2); stroke-width:3}    
.stop .badge{fill:var(--sea-2)}
.stop.now .badge{fill:var(--coral)} .stop.lock .badge{fill:#BBAF97}
.stop.now .pulse{fill:none; stroke:var(--coral); stroke-width:2; animation:pl 2.2s ease-out infinite}
@keyframes pl{0%{r:17;opacity:.6}100%{r:27;opacity:0}}
.wv{fill:var(--wv-c); opacity:.75}
.dune{fill:var(--dune-c)}
.deco{font-size:15px; opacity:.55}
.key{display:flex; justify-content:center; flex-wrap:wrap; gap:9px; padding:6px 4px 2px; font-size:calc(10.5px*var(--fs)); color:var(--ink-2)}
.key i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:4px; vertical-align:-1px; border:2px solid}
.key .k3{background:var(--gold-pale); border-color:var(--gold)}
.key .k2{background:var(--sea-pale); border-color:var(--sea)}
.key .k1{background:var(--coral-pale); border-color:var(--coral)}
.key .k0{background:#EFE7D6; border-color:#B9AB90}
.key .kn{background:#fff; border-color:var(--coral)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stn{position:relative; overflow:hidden; text-align:right; font-family:var(--body); color:var(--ink); cursor:pointer;
  background:var(--paper); border:1.5px solid var(--line); border-radius:18px; padding:12px 13px;
  display:flex; flex-direction:column; gap:5px;
  box-shadow:0 2px 0 var(--sand-2), 0 10px 22px -20px rgba(34,51,61,.6);
  transition:transform .14s, box-shadow .14s, border-color .14s}
.stn::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--sea); opacity:.22}
.stn.done::before{background:var(--gold); opacity:1}
.stn:hover:not(:disabled){transform:translateY(-3px); border-color:var(--sea);
  box-shadow:0 3px 0 var(--sand-2), 0 16px 26px -20px rgba(34,51,61,.75)}
.stn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
.stn .n{font-size:calc(10.5px*var(--fs)); color:var(--ink-2); font-weight:600}
.stn .t{font-family:var(--disp); font-size:calc(17.5px*var(--fs)); color:var(--sea-2); font-weight:700; line-height:1.5}
.stn .d{font-size:calc(11px*var(--fs)); color:var(--ink-2); font-variant-numeric:tabular-nums}
.stn .s{font-size:calc(16px*var(--fs)); letter-spacing:1px}
.stn.done{border-color:#F0D9A8; background:linear-gradient(180deg,#fff,var(--gold-pale))}

.card{background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r); padding:17px 16px;
  margin-bottom:12px; box-shadow:0 2px 0 var(--sand-2), 0 12px 28px -22px rgba(34,51,61,.55)}
h2{font-family:var(--disp); font-size:calc(22px*var(--fs)); margin:0 0 6px; color:var(--sea-2); font-weight:700; line-height:1.5; text-wrap:balance}
.sub{font-size:calc(13.5px*var(--fs)); color:var(--ink-2); line-height:1.85; margin:0 0 14px}
.btn{font-family:var(--disp); font-weight:700; font-size:calc(16.5px*var(--fs)); width:100%;
  border-radius:16px; padding:14px 16px; cursor:pointer; border:2px solid transparent;
  background:linear-gradient(180deg, color-mix(in srgb, var(--sea) 88%, #fff), var(--sea));
  color:#fff; box-shadow:0 3px 0 var(--sea-2), 0 10px 20px -14px var(--sea-2);
  transition:transform .1s, box-shadow .1s, filter .15s}
.btn:hover:not(:disabled){filter:saturate(1.06) brightness(1.03)}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--sea-2)}
.btn.sun{background:linear-gradient(180deg,#F2BC63,var(--gold)); box-shadow:0 3px 0 #C88A22, 0 10px 20px -14px #C88A22}
.btn.plain{background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:0 3px 0 var(--sand-2)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn:focus-visible,.stn:focus-visible,.opt:focus-visible,select:focus-visible,.stop:focus-visible{outline:3px solid var(--coral); outline-offset:2px}
select,input[type=text]{width:100%; font-family:var(--body); font-size:calc(16px*var(--fs)); padding:12px 13px;
  border-radius:13px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink)}
input[type=text]:focus-visible{outline:3px solid var(--coral); outline-offset:2px}
.linkish{background:none; border:0; padding:0; font:inherit; color:var(--sea-2);
  font-weight:700; text-decoration:underline; cursor:pointer}
label{display:block; font-size:calc(12.5px*var(--fs)); color:var(--ink-2); margin:0 0 6px; font-weight:600}
.field{margin-bottom:12px}

.qtop{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.tag{font-size:calc(12px*var(--fs)); font-weight:700; padding:5px 11px; border-radius:999px}
.tag.lug{background:var(--lug-pale); color:var(--lug)}
.tag.math{background:var(--math-pale); color:var(--math)}
.tag.sci{background:var(--sci-pale); color:var(--sci)}
.where{font-size:calc(11.5px*var(--fs)); color:var(--ink-2)}
.read{font-family:var(--read); font-size:calc(16px*var(--fs)); line-height:2.2; color:#2C3A44;
  background:linear-gradient(180deg,#fff,var(--sand)); border:1.5px solid var(--line); border-radius:16px;
  padding:14px 15px; margin-bottom:13px; max-height:212px; overflow-y:auto;
  box-shadow:inset 0 -14px 16px -16px rgba(34,51,61,.35)}
.read::-webkit-scrollbar{width:7px}
.read::-webkit-scrollbar-thumb{background:var(--sand-2); border-radius:999px}
.read h3{font-family:var(--disp); font-size:calc(17px*var(--fs)); color:var(--sea-2); margin:0 0 6px; text-align:center}
.read p{margin:0 0 8px}
.qt{font-size:calc(17.5px*var(--fs)); font-weight:600; line-height:1.9; margin:0 0 12px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{text-align:right; font-family:var(--body); font-size:calc(15.5px*var(--fs)); line-height:1.7;
  background:var(--paper); border:2px solid var(--line); border-radius:15px; padding:13px 14px;
  color:var(--ink); cursor:pointer; display:flex; gap:10px; align-items:flex-start;
  box-shadow:0 2px 0 var(--sand-2); transition:border-color .13s, transform .13s, background .13s}
.opt:hover:not(:disabled){border-color:var(--sea); background:color-mix(in srgb, var(--sea-pale) 55%, #fff); transform:translateX(-3px)}
.opt .l{transition:background .13s, color .13s}
.opt:hover:not(:disabled) .l{background:var(--sea); color:#fff}
.opt .l{flex:none; width:26px; height:26px; border-radius:9px; background:var(--sand-2); color:var(--ink-2);
  font-weight:800; font-size:calc(13px*var(--fs)); display:grid; place-items:center}
.opt.yes{border-color:var(--palm); background:var(--palm-pale)} .opt.yes .l{background:var(--palm); color:#fff}
.opt.no{border-color:var(--coral); background:var(--coral-pale)} .opt.no .l{background:var(--coral); color:#fff}
.opt.gone{opacity:.32; text-decoration:line-through}
.opt:disabled{cursor:default}
.msg{margin-top:12px; border-radius:14px; padding:12px 13px; font-size:calc(14px*var(--fs)); line-height:1.85; border:2px solid}
.msg.win{border-color:var(--palm); background:var(--palm-pale)}
.msg.lose{border-color:var(--coral); background:var(--coral-pale)}
.msg.tip{border-color:var(--gold); background:var(--gold-pale)}
.msg b{display:block; font-size:calc(15px*var(--fs)); margin-bottom:2px}
.msg .oc{display:block; margin-top:6px; font-size:calc(12px*var(--fs)); color:var(--ink-2)}
.tools{display:flex; gap:7px; margin-top:11px}
.tool{flex:1; font-family:var(--body); font-size:calc(12px*var(--fs)); font-weight:600; cursor:pointer;
  background:var(--sand); border:1.5px solid var(--line); border-radius:12px; padding:9px 4px; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.4}
.tool:disabled{opacity:.4; cursor:not-allowed}
.tool.low{opacity:.55; border-style:dashed}           
.tool em{font-style:normal; font-size:calc(17px*var(--fs))}
.tool span{font-size:calc(10.5px*var(--fs)); color:var(--ink-2); font-variant-numeric:tabular-nums}

.end{text-align:center; padding:22px 14px}
.stars{font-size:calc(42px*var(--fs)); letter-spacing:6px; margin:4px 0 10px; line-height:1.2}
.stars span{display:inline-block; opacity:0; transform:scale(.4)}
.stars span.go{animation:pop .5s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes pop{to{opacity:1;transform:scale(1)}}
.split{display:flex; justify-content:center; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.split span{font-size:calc(12.5px*var(--fs)); padding:6px 10px; border-radius:999px; background:var(--sand); border:1.5px solid var(--line); font-weight:600}
.gift{background:var(--sea-pale); border:2px dashed var(--sea); border-radius:16px; padding:14px; margin-bottom:12px}
.gift .big{font-size:calc(38px*var(--fs)); line-height:1.3}
.gift .nm{font-family:var(--disp); font-size:calc(16px*var(--fs)); color:var(--sea-2); font-weight:700}
.gift .ds{font-size:calc(12.5px*var(--fs)); color:var(--ink-2); line-height:1.8; margin-top:4px}
.wise{background:var(--gold-pale); border:2px solid #F0D9A8; border-radius:16px; padding:14px; margin-bottom:14px}
.wise .lab{font-size:calc(11px*var(--fs)); color:#8A5F14; font-weight:700; margin-bottom:5px}
.wise .txt{font-family:var(--read); font-size:calc(18px*var(--fs)); line-height:2; color:#5C4310; font-weight:700}
.wise .src{font-size:calc(11.5px*var(--fs)); color:#8A5F14; margin-top:5px}

.coll{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.coll div{aspect-ratio:1; border-radius:14px; background:var(--sand); border:1.5px solid var(--line);
  display:grid; place-items:center; font-size:calc(24px*var(--fs))}
.coll div.off{opacity:.28}
.badges{display:flex; flex-direction:column; gap:8px}
.badge{display:flex; gap:11px; align-items:center; background:var(--sand); border:1.5px solid var(--line); border-radius:14px; padding:10px 12px}
.badge.on{background:var(--palm-pale); border-color:var(--palm)}
.shop .badge{background:var(--sand); border-style:dashed}       
.shop .badge.on{background:var(--sea-pale); border-color:#BFE6EA; border-style:dashed}
.badge em{font-style:normal; font-size:calc(24px*var(--fs)); filter:grayscale(1); opacity:.4}
.badge.on em{filter:none; opacity:1}
.badge b{display:block; font-size:calc(14px*var(--fs))}
.badge small{font-size:calc(11.5px*var(--fs)); color:var(--ink-2); line-height:1.6}

.kpi{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px}
.kpi div{background:var(--sand); border:1.5px solid var(--line); border-radius:14px; padding:11px 6px; text-align:center}
.kpi b{display:block; font-size:calc(22px*var(--fs)); color:var(--sea-2); font-variant-numeric:tabular-nums; line-height:1.4}
.kpi small{font-size:calc(11px*var(--fs)); color:var(--ink-2)}
.gaps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.gaps li{background:var(--coral-pale); border:1.5px solid #F7C9BE; border-radius:13px; padding:9px 11px; font-size:calc(13px*var(--fs)); line-height:1.7}
.gaps li i{display:block; font-style:normal; font-size:calc(11px*var(--fs)); color:#A8442F; font-weight:700; margin-bottom:2px}
.code{font-size:calc(22px*var(--fs)); letter-spacing:3px; font-weight:800; font-variant-numeric:tabular-nums;
  background:var(--sea-pale); border:2px dashed var(--sea); border-radius:14px; padding:14px; text-align:center; color:var(--sea-2)}

.nav{position:fixed; bottom:0; right:0; left:0; z-index:5; background:rgba(255,255,255,.96);
  border-top:1.5px solid var(--line); display:flex; justify-content:center; gap:4px;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom)); backdrop-filter:blur(8px)}
.nav button{flex:1; max-width:150px; background:none; border:none; font-family:var(--body); font-weight:600;
  font-size:calc(11.5px*var(--fs)); color:var(--ink-2); cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:2px; padding:5px 2px; border-radius:11px}
.nav button em{font-style:normal; font-size:calc(19px*var(--fs))}
.nav button.on{color:var(--sea-2); background:var(--sea-pale); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--sea) 30%, transparent)}
.foot{margin-top:16px; font-size:calc(11px*var(--fs)); color:#8D9AA4; text-align:center; line-height:2}
.foot button{background:none;border:none;color:#8D9AA4;font-family:var(--body);font-size:calc(11px*var(--fs));text-decoration:underline;cursor:pointer;padding:0}
/* زر تثبيت اللعبة على الجهاز */
.inst{margin:0 auto 12px; max-width:340px}
.inst[hidden], .inst-tip[hidden]{display:none}
.foot .inst-btn{display:block; width:100%; background:var(--sea); color:#fff; border-radius:14px; padding:11px 14px;
  font:700 calc(14.5px*var(--fs))/1.4 var(--body); text-decoration:none; box-shadow:0 4px 12px color-mix(in srgb, var(--sea) 30%, transparent)}
.inst-tip{margin:8px 0 0; background:var(--sea-pale); color:var(--ink); border-radius:12px; padding:9px 12px;
  font-size:calc(13px*var(--fs)); line-height:1.85}
.toast{position:fixed; left:50%; transform:translateX(-50%) translateY(14px); bottom:78px; z-index:60;
  max-width:min(340px,88vw); background:var(--ink); color:#fff; border-radius:14px; padding:11px 15px;
  font:600 calc(13.5px*var(--fs))/1.7 var(--body); text-align:center; box-shadow:0 8px 22px rgba(34,51,61,.28);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.seenq{border:1.5px solid var(--line); background:var(--sand); border-radius:14px; padding:11px 13px; margin-bottom:10px}
.rightans{background:var(--palm-pale); border:1.5px solid var(--palm); border-radius:10px;
  padding:8px 11px; font-size:calc(13.5px*var(--fs)); line-height:1.8; margin-top:6px}
.sizer{display:inline-flex; gap:4px; vertical-align:middle}
.sizer button{border:1.5px solid var(--line); background:var(--paper); border-radius:8px; width:26px; height:24px; text-decoration:none; color:var(--ink)}
.sizer button.on{background:var(--sea); color:#fff; border-color:var(--sea)}
#view>*{animation:rise .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}
@media (max-width:350px){.grid{grid-template-columns:1fr}}

/* ═══════ الاختبار: شريط التقدّم ومؤقّت السؤال ═══════ */
.xp-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.xp-lab { display: block; font-size: .72rem; color: var(--ink-2); margin-bottom: 3px; text-align: center; }
.xp-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.xp-cells i { font-style: normal; font-size: .68rem; text-align: center; line-height: 1.7; border-radius: 6px; background: var(--sand-2); color: var(--ink-2); border: 1.5px solid transparent; }
.xp-grp.lang i.ok { background: #1D4E89; color: #fff; }
.xp-grp.math i.ok { background: #8E2F3A; color: #fff; }
.xp-grp.sci  i.ok { background: #1F6B33; color: #fff; }
.xp-cells i.skip { background: #fff; border-color: var(--coral); color: #9C3721; }
.xp-cells i.now { background: var(--gold-pale); border-color: var(--gold); color: #8A5A00; font-weight: 800; animation: xpulse 1.2s ease-in-out infinite; }
@keyframes xpulse { 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .xp-cells i.now { animation: none; } }
.xt { height: 8px; border-radius: 99px; background: var(--sand-2); overflow: hidden; }
.xt-fill { height: 100%; width: 100%; background: var(--sea); border-radius: 99px; transition: width 1s linear, background .3s; margin-inline-start: auto; }
.xt-fill.amber { background: var(--gold); }
.xt-fill.red { background: var(--coral); }
.xt-row { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--ink-2); margin: 6px 0 12px; }
.xt-num { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--sea-2); }
/* الخيار المختار في الاختبار: لا صواب ولا خطأ يُكشف — اختيارٌ فقط */
.opt.exo.on{border-color:var(--sea); background:var(--sea-pale); font-weight:700}
.opt.exo.on .l{background:var(--sea); color:#fff}
.xexam .read{max-height:none}
/* الشريط والمؤقّت يبقيان ظاهرين والطالب يقرأ نصًّا طويلًا على الجوال */
.xhead{position:sticky; top:0; z-index:5; background:var(--paper); padding-top:6px; margin-top:-6px}
.xhead .xt-row{margin-bottom:8px}
.xnote{border-color:var(--gold); background:var(--gold-pale); margin-bottom:12px}
.xnote p{margin:6px 0 10px; line-height:1.9}

/* رسائل معلمي المواد عند الدخول */
.mail{position:fixed; inset:0; z-index:80; background:rgba(34,51,61,.5); display:flex; align-items:center; justify-content:center; padding:16px}
.mail .card{width:100%; max-width:420px; margin:0; max-height:86vh; overflow:auto; animation:mailIn .35s ease-out}
@keyframes mailIn{from{transform:translateY(18px) scale(.97); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){.mail .card{animation:none}}
.mail h2{text-align:center; margin-bottom:10px}
.mail-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.mail-row{display:flex; gap:10px; align-items:flex-start; background:var(--sand); border:1.5px solid var(--line); border-radius:14px; padding:10px 12px}
.mail-row em{font-style:normal; font-size:calc(26px*var(--fs)); line-height:1}
.mail-row b{display:block; font-size:calc(15px*var(--fs)); line-height:1.6; color:var(--ink)}
.mail-row small{display:block; color:#6F818C; font-size:calc(12px*var(--fs))}
.mail-row p{margin:4px 0 0; font-size:calc(13.5px*var(--fs))}
.mail-row.k-badge{background:var(--gold-pale, #FCEFD7); border-color:var(--gold, #E9A63C)}
.mail-row.k-points{background:var(--sea-pale); border-color:var(--sea)}

/* معاينة حساب الطالب من لوحة المدرسة */
.pvbar{position:sticky; top:0; z-index:50; background:#5b4a8b; color:#fff; text-align:center; padding:8px 12px; font-size:.9rem; font-weight:700}

/* الحقوق والتواصل — لا تُطبع */
.foot .rights{margin-top:10px; font-size:calc(11px*var(--fs)); color:#8D9AA4; line-height:1.9}
.foot .rights a{color:var(--sea-2); text-decoration:none; font-weight:700}
@media print{.rights{display:none!important}}

/* أيقونة واتساب في سطر الحقوق */
.rights .wa{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:30px;height:30px;border-radius:50%;background:#25D366;margin-inline-start:10px;box-shadow:0 3px 8px rgba(37,211,102,.35)}.rights .wa svg{width:17px;height:17px;fill:#fff}