/* هوية سديف (landing). تجاوز المقاييس يوحّد Tajawal فيجلس النص على سطور الدفتر. */
@font-face{font-family:Tajawal;font-weight:400;font-display:swap;src:url(fonts/tajawal-400-arabic.woff2) format('woff2');ascent-override:64.3%;descent-override:35.7%;line-gap-override:0%;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700-arabic.woff2) format('woff2');ascent-override:64.3%;descent-override:35.7%;line-gap-override:0%;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:800;font-display:swap;src:url(fonts/tajawal-800-arabic.woff2) format('woff2');ascent-override:64.3%;descent-override:35.7%;line-gap-override:0%;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Tajawal;font-weight:700;font-display:swap;src:url(fonts/tajawal-700-latin.woff2) format('woff2');ascent-override:64.3%;descent-override:35.7%;line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --cream:#FCF3E3;--cream-2:#F6E9D2;--paper:#FFFFFF;
  --ink:#16382A;--ink-2:#1E4837;--green:#1F4A38;--green-2:#2B6349;
  --red:#DC2626;--red-2:#B91C1C;--ok:#128043;--amber:#B45309;
  --on-paper:#14251D;--on-paper-dim:#55665D;--on-ink:#F2EBDD;--on-ink-dim:#B2C3B8;
  --line-l:rgba(20,37,29,.13);--line-d:rgba(242,235,221,.15);--line-ctrl:rgba(20,37,29,.50);
  --focus:var(--red-2);--gut:16px;color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--cream);color:var(--on-paper);overflow-x:clip;
  font:400 1rem/1.7 Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none;touch-action:manipulation}
h1,h2,h3{margin:0;font-weight:800;line-height:1.15;letter-spacing:0;text-wrap:balance}
:where(a,button,input,[tabindex]):focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hdr{display:flex;align-items:center;max-width:34rem;height:62px;margin:0 auto;padding:0 var(--gut)}
body[data-screen=game] .hdr{display:none}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{width:30px;height:30px}
.brand b{display:block;font-weight:800;font-size:1.16rem;line-height:1}
.brand small{display:block;margin-top:3px;font-size:.6rem;font-weight:700;letter-spacing:.14em;line-height:1;color:var(--red-2)}
main{max-width:34rem;margin:0 auto;padding:0 var(--gut) calc(2.5rem + env(safe-area-inset-bottom))}
.scr{animation:rise .32s ease-out both}

.tag{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .7rem .46rem;border-radius:5px;
  background:var(--red);color:#fff;font-size:.815rem;font-weight:700;line-height:1}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:56px;padding:.8rem 1.4rem;
  border-radius:9px;font-weight:700;font-size:1.06rem;line-height:1.25;text-align:center;
  transition:background .18s,scale .18s,opacity .18s}
.btn:active{scale:.96}
.btn-block{width:100%}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-2)}
.btn-ghost{border:1.5px solid var(--line-ctrl);color:var(--on-paper)}
.btn-ghost:hover{border-color:var(--on-paper);background:rgba(20,37,29,.05)}
.lnk{min-height:44px;padding:.5rem .8rem;font-weight:700;color:var(--green-2);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.foot{display:flex;justify-content:center;margin-top:2.25rem;padding-top:.5rem;border-top:1px solid var(--line-l)}
.shot{position:relative;margin:0;padding:10px}
.shot::before,.shot::after{content:"";position:absolute;width:30px;height:30px;border:2.5px solid var(--red);pointer-events:none;z-index:3}
.shot::before{inset-block-start:0;inset-inline-start:0;border-inline-end:0;border-block-end:0;border-start-start-radius:6px}
.shot::after{inset-block-end:0;inset-inline-end:0;border-inline-start:0;border-block-start:0;border-end-end-radius:6px}
.bdg{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;background:var(--amber);color:#fff}
.bdg .i{width:15px;height:15px;stroke-width:2.4}

#s-start{padding-top:.5rem}
h1{margin:1rem 0 .4rem;font-size:clamp(2.35rem,10.5vw,3.3rem)}
h1 em{font-style:normal;color:var(--red)}
.hero-shot{margin:.6rem 0 1rem}
.scene{width:100%;height:auto;border-radius:8px}
.scene .bx{animation:pop .45s cubic-bezier(.2,.9,.3,1.25) .45s both;transform-box:fill-box;transform-origin:center}
.scene .bx+.bx{animation-delay:.6s}
.scene .bx+.bx+.bx{animation-delay:.75s}
.lead{margin-bottom:1.5rem;font-size:1.08rem;line-height:1.8}
.meta{margin-top:.7rem;text-align:center;font-size:.92rem;color:var(--on-paper-dim)}

.h{margin:1rem 0 1.25rem;font-size:1.85rem}
.list{display:grid;gap:1px;background:var(--line-l);border-block:1px solid var(--line-l)}
.row{display:flex;align-items:center;gap:.9rem;width:100%;min-height:76px;padding:.7rem .2rem;
  background:var(--cream);font-weight:700;font-size:1.1rem;line-height:1.4;text-align:start;transition:background .15s}
.row:hover,.row:active{background:var(--cream-2)}
.row .ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:9px;background:rgba(31,74,56,.10);color:var(--green)}
.row .ico .i{width:25px;height:25px;stroke-width:1.8}
.row .chev{margin-inline-start:auto;color:var(--on-paper-dim)}
.nm{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.sb{display:inline-flex;align-items:center;gap:.3rem;padding:.26rem .5rem .28rem;border-radius:5px;
  background:var(--amber);color:#fff;font-size:.78rem;line-height:1}
.sb .i{width:13px;height:13px;stroke-width:2.4}
.row.off .ico{background:rgba(20,37,29,.06);color:var(--on-paper-dim)}

/* ٣) الدفتر. --lh = ارتفاع السطر = مسافة التسطير. خط القاعدة عند L/2 + 0.143f
   (الصعود 0.643 والنزول 0.357)، فيُرسم السطر تحته بنقطة كما في الكتابة باليد. */
.sheet{--lh:2.25rem;--fs:1.0625rem;--mg:2.6rem;--rl:calc(var(--lh)/2 + var(--fs)*.143 + 1px);
  position:relative;margin:28px 0 1.4rem;padding-top:var(--lh);border-radius:3px 3px 6px 6px;
  background:var(--paper) linear-gradient(rgba(220,38,38,.55),rgba(220,38,38,.55)) no-repeat right var(--mg) top 0/1.5px 100%;
  box-shadow:0 1px 2px rgba(20,37,29,.08),0 22px 44px -26px rgba(22,56,42,.5)}
.sheet::after{content:"";position:absolute;inset:5px -4px -7px 3px;z-index:-1;border-radius:4px;
  background:#FBF6EC;box-shadow:0 10px 26px -16px rgba(22,56,42,.45);transform:rotate(1.4deg)}
/* حلقات التجليد: الفائض يلتفّ إلى سطرٍ مخفيّ */
.rings{position:absolute;top:-14px;inset-inline:10px;height:34px;display:flex;flex-wrap:wrap;justify-content:space-evenly;overflow:hidden;pointer-events:none}
.rings i{position:relative;flex:none;width:12px;height:34px;margin:0 6px}
.rings i::before{content:"";position:absolute;inset:0 0 6px;border:2.5px solid #858D94;border-bottom:0;border-radius:7px 7px 0 0;
  box-shadow:inset 1.5px 1px 0 rgba(255,255,255,.65),1px 1px 0 rgba(20,37,29,.12)}
.rings i::after{content:"";position:absolute;left:50%;bottom:0;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:var(--cream-2);box-shadow:inset 0 2px 2px rgba(20,37,29,.38)}
.page{padding:0 0 var(--lh) 1rem;overflow:hidden;overflow:clip;font-size:var(--fs);line-height:var(--lh);
  background:repeating-linear-gradient(transparent 0 var(--rl),rgba(59,110,165,.18) var(--rl) calc(var(--rl) + 1px),transparent calc(var(--rl) + 1px) var(--lh))}
.page>*,.page li{margin:0;line-height:var(--lh)}
.page :is(h2,h3,p,.award),.rl li{padding-inline-start:calc(var(--mg) + .75rem)}
.nb-t{font-size:1.4rem}
.nb-s{font-size:.95rem;color:var(--on-paper-dim)}
.nb-h{font-size:1.12rem}
.gap,.reqs{margin-top:var(--lh)!important}
.req{display:grid;grid-template-columns:var(--mg) auto 1fr;align-items:start;font-weight:700}
.num{text-align:center;font-size:.9rem;font-weight:400;color:var(--on-paper-dim)}
.cb{position:relative;width:17px;height:17px;margin-block-start:calc(var(--rl) - 16px);margin-inline:.75rem .6rem;
  border:2px solid var(--on-paper);border-radius:3px}
.req:nth-child(even) .cb{rotate:-2deg}
.cb svg{position:absolute;left:-4px;top:-11px;width:27px;height:27px;max-width:none;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.cb path{stroke-dasharray:1;animation:draw .38s ease-out var(--d) both}
.live .cb path{stroke:var(--ok)}
.soon .cb path{stroke:var(--amber)}
.stamp{display:inline-block;vertical-align:middle;margin-inline-start:.45rem;padding:.2rem .42rem .14rem;
  border:3px double var(--ok);border-radius:5px;color:var(--ok);font-size:.7rem;font-weight:800;line-height:1.15;
  white-space:nowrap;transform:rotate(-4deg);mix-blend-mode:multiply}
.pencil{display:inline-flex;align-items:center;gap:.25rem;vertical-align:middle;margin-inline-start:.45rem;padding:0 .55rem;
  border:1.5px solid rgba(180,83,9,.75);border-radius:55% 45% 52% 40%/62% 50% 48% 56%;color:var(--amber);
  font-size:.85rem;font-weight:700;line-height:1.45;white-space:nowrap;transform:rotate(-2.5deg)}
.pencil .i{width:13px;height:13px;stroke-width:2.2}
.page>p>.stamp,.page p>.pencil{margin-inline-start:0}
.req .stamp{animation:thump .3s cubic-bezier(.3,1.4,.5,1) calc(var(--d) + .3s) both}
.req .pencil{animation:write .5s ease-out calc(var(--d) + .25s) both}
.hint{margin-bottom:1rem;font-weight:700;line-height:1.65}
.pv #rp-s{color:var(--on-paper);font-weight:700}

/* التقرير بالشكل نفسه */
.award{display:flex;align-items:center;height:calc(var(--lh)*2)}
.stamp.big{margin:0;padding:.36rem .9rem .26rem;border-width:5px;font-size:clamp(1.05rem,5vw,1.35rem);
  transform:rotate(-7deg);animation:slam .5s cubic-bezier(.3,1.3,.5,1) .35s both}
.stamp[data-k=near]{color:var(--amber);border-color:var(--amber)}
.stamp[data-k=bad]{color:var(--red-2);border-color:var(--red-2)}
.rl li{font-weight:700}
.rl .ck,.rl .bdg{vertical-align:-4px;margin-inline-end:.5rem;width:20px;height:20px}
.rl .ck{display:inline-block;color:var(--ok);stroke-width:3}
.rl .bdg{display:inline-grid;border-radius:5px}
.rl .bdg .i{width:13px;height:13px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0 .55rem}
.rn{font-size:1.15rem;line-height:1.3}
.tm{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:99px;background:rgba(31,74,56,.08);
  color:var(--green);font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.tm .i{width:18px;height:18px}
.prog{display:flex;gap:4px;margin-bottom:.35rem}
.prog li{flex:1;height:4px;border-radius:2px;background:var(--line-l);transition:background .3s}
.prog .cur{background:var(--green-2)}
.prog .ok{background:var(--ok)}
.prog .near{background:var(--amber)}
.prog .bad{background:var(--red)}
.prog .skip{background:#A3AEA7}
.frame{position:relative;display:block;width:100%;aspect-ratio:var(--ar,1.5);overflow:hidden;border-radius:8px;
  background:var(--cream-2);cursor:zoom-in;box-shadow:0 18px 40px -26px rgba(22,56,42,.5)}
.frame img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.frame.ld img{opacity:0}
.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ov rect{fill:none}
.ov .v{stroke:var(--red)}
.ov .c{stroke:var(--ok)}
.ov .s{stroke:var(--amber)}
.ov .tg{stroke:none}
.ov .v .tg{fill:var(--red)}
.ov .s .tg{fill:var(--amber)}
.ov circle{fill:#fff;stroke:none}
.ov .ck{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.ov text{fill:#fff;stroke:none;font-family:Tajawal,system-ui,sans-serif;font-weight:700;text-anchor:middle}
.ov g{animation:pop .42s cubic-bezier(.2,.9,.3,1.25) var(--d,0s) both;transform-box:fill-box;transform-origin:center}
.ov.still g{animation:none}
.gen,.zi{position:absolute;inset-block-end:8px;background:rgba(20,37,29,.78);color:#fff}
.gen{inset-inline-start:8px;padding:.22rem .5rem .18rem;border-radius:5px;font-size:.72rem;font-weight:700;line-height:1.4}
.zi{inset-inline-end:8px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%}
.zi .i{width:18px;height:18px}
.look{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .55rem;margin-top:.65rem;font-weight:700;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .6rem .34rem;border:1.5px solid currentColor;border-radius:5px;
  color:var(--red-2);font-size:.85rem;line-height:1.2}
.chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.q{margin:1.1rem 0 .75rem;text-align:center;font-size:1.5rem;font-weight:800;line-height:1.3}
.ctr{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-bottom:1.1rem}
.stp{display:grid;place-items:center;width:64px;height:64px;border:1.5px solid var(--line-ctrl);border-radius:14px;
  background:var(--paper);color:var(--green);transition:scale .15s,opacity .15s}
.stp:active{scale:.93}
.stp .i{width:28px;height:28px;stroke-width:2.6}
.stp[aria-disabled=true]{opacity:.35;cursor:default}
#cnt{display:inline-block;min-width:2ch;font-size:48px;font-weight:800;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.bump{animation:bump .2s ease-out}
#skip{display:block;margin:.35rem auto 0}

.ans{animation:rise .3s ease-out both}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:.5rem;overflow:hidden;
  border:1px solid var(--line-l);border-radius:14px;background:var(--line-l)}
.cmp>div{padding:.85rem .6rem .8rem;background:var(--paper);text-align:center}
.who{display:inline-flex;align-items:center;gap:.4rem;color:var(--on-paper-dim);font-weight:700;font-size:.95rem}
.who img{width:20px;height:20px}
.cmp b{display:block;font-size:2.6rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.cmp small{display:block;font-size:.88rem;color:var(--on-paper-dim)}
.vd{display:flex;align-items:center;gap:.6rem;margin-top:.75rem;padding:.75rem .9rem;border:1.5px solid;border-radius:12px;
  font-size:1.2rem;font-weight:800;line-height:1.4}
.vd .i{width:26px;height:26px}
.vd[data-k=ok]{color:var(--ok);background:rgba(18,128,67,.07)}
.vd[data-k=near]{color:var(--amber);background:rgba(180,83,9,.07)}
.vd[data-k=bad]{color:var(--red-2);background:rgba(220,38,38,.06)}
.vd[data-k=skip]{color:var(--on-paper-dim);background:rgba(20,37,29,.04)}
#soon{display:flex;align-items:flex-start;gap:.55rem;margin-top:.75rem;color:var(--amber);font-weight:700;font-size:.95rem;line-height:1.6}
.disc{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line-l);font-weight:700;font-size:.95rem;line-height:1.7}
.disc2{margin:.25rem 0 1.15rem;font-size:.82rem;line-height:1.6;color:var(--on-paper-dim)}

.reg{--focus:var(--on-ink);margin-top:1.75rem;padding:1.5rem 1.1rem 1.25rem;border-radius:14px;background:var(--ink);color:var(--on-ink)}
.reg h2{margin-bottom:1rem;font-size:1.55rem}
.cs{position:relative;display:flex;align-items:center;gap:.85rem;min-height:64px;padding:.8rem .9rem;
  border:1.5px solid var(--line-d);border-radius:12px;font-weight:700;line-height:1.5;cursor:pointer;transition:border-color .2s}
.cs input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cs .bx{display:grid;place-items:center;flex:none;width:30px;height:30px;border:2px solid var(--on-ink);border-radius:7px}
.cs .bx .i{width:19px;height:19px;stroke-width:3;color:var(--ink);opacity:0}
.cs input:checked+.bx{background:var(--on-ink)}
.cs input:checked+.bx .i{opacity:1}
.cs input:focus-visible+.bx{outline:2.5px solid var(--focus);outline-offset:3px}
.cs.need{border-color:#F2B84B}
.shake{animation:shake .4s}
.warn{min-height:1.75rem;margin:.45rem 0 .2rem;color:#F2B84B;font-weight:700;font-size:.95rem}
.btn-wa{background:var(--on-ink);color:var(--ink)}
.btn-wa:hover{background:#fff}
.btn-wa[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.btn-wa .i{width:22px;height:22px}
.again{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.75rem;margin-top:1.25rem}

/* التكبير */
.zoom{--focus:var(--on-ink);position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 10px calc(16px + env(safe-area-inset-bottom));background:#09160F;touch-action:pinch-zoom}
.zx{position:absolute;top:12px;inset-inline-end:12px;display:inline-flex;align-items:center;gap:.5rem;min-height:56px;
  padding:0 1.25rem;border-radius:12px;background:var(--on-ink);color:var(--ink);font-weight:800;font-size:1.05rem}
.zx .i{width:22px;height:22px;stroke-width:2.6}
.zf{position:relative;width:min(100%,calc((100vh - 136px)*var(--ar)));width:min(100%,calc((100dvh - 136px)*var(--ar)));aspect-ratio:var(--ar)}
.zf img{width:100%;height:100%;border-radius:6px}
.zh{margin-top:.8rem;color:var(--on-ink-dim);font-size:.9rem}

.dlg{width:calc(100% - 2rem);max-width:30rem;max-height:calc(100% - 3rem);overflow:auto;padding:1.25rem 1.15rem;border:0;
  border-radius:14px;background:var(--paper);color:var(--on-paper);box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.dlg::backdrop{background:rgba(22,56,42,.55)}
.dlg h2{margin-bottom:.5rem;font-size:1.35rem}
.dlg li{padding:.8rem 0;border-bottom:1px solid var(--line-l)}
.dlg dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .75rem;margin:.35rem 0 0;font-size:.9rem;line-height:1.6}
.dlg dt{color:var(--on-paper-dim)}
.dlg dd{margin:0;min-width:0;overflow-wrap:anywhere}
.dlg .cu{text-align:end}
.note{margin:.9rem 0 1rem;font-size:.9rem;color:var(--on-paper-dim)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{opacity:0;transform:scale(1.14)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes thump{from{opacity:0;transform:rotate(-4deg) scale(1.6)}}
@keyframes slam{from{opacity:0;transform:rotate(-7deg) scale(1.8)}}
@keyframes write{from{clip-path:inset(0 0 0 100%)}}
@keyframes bump{50%{transform:scale(1.18)}}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
/* الحالة الأساسية هي النهائية، فيظهر الناتج فورًا */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}