:root{
  --cream:#FBF3DF; --cream2:#FDF8EC; --deep:#23492F; --btn:#2E5B3E;
  --meadow:#7FB069; --track:#D6EBC9; --sun:#FCE8B8; --gold:#E8B84B; --coral:#EE6C4D;
  --naskh:'Noto Naskh Arabic','Noto Naskh Arabic UI',serif;
  --card1:#FFF177; --card2:#FC8383; --card3:#FFC745; --card4:#D7FF82; --card5:#C2D5FF;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* منع سحب الصور: هو وحده سبب ظهور أيقونة برنامج التحرير تحت المؤشر.
   لا يمسّ أحداث المؤشر ولا اللمس، فالرسم بالإصبع يعتمد عليها كلياً. */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
/* لا صورة تستقبل المؤشر إطلاقاً: المتصفح لا يعرض قائمة الصورة ولا أيقونة برنامجها
   إلا فوق صورة يمرّ عليها المؤشر. اللمس كله على الأغلفة، لا على الصور. */
.mframe img, .frame img{pointer-events:none !important}

.mframe, .mframe *, .frame, .frame *{
  -webkit-user-drag:none;user-drag:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{height:100%;margin:0}
body{background:var(--cream);color:var(--deep);font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;
  overscroll-behavior:none;overflow:hidden}
.screen{height:100dvh;display:flex;flex-direction:column;padding:14px;gap:11px;overflow:auto}
.screen[hidden]{display:none}

.bar{display:flex;align-items:center;gap:10px;min-height:54px;flex:0 0 auto}
.bar h1{font-size:22px;font-weight:800;margin:0;flex:1}
.back{background:var(--track);border:0;border-radius:16px;padding:0 18px;height:48px;font:inherit;font-weight:600;color:var(--deep);cursor:pointer}
.lock{width:48px;height:48px;border:0;border-radius:50%;background:var(--track);position:relative;cursor:pointer}
.lock span{position:absolute;inset:0;border-radius:50%;border:3px solid var(--btn);clip-path:inset(0 100% 0 0)}
.lock.holding span{clip-path:inset(0 0 0 0);transition:clip-path 3s linear}

.sky{background:linear-gradient(180deg,#2E5B3E,#23492F);border-radius:26px;padding:16px;color:#fff;flex:0 0 auto}
.sky-stars{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.sky-stars i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.16)}
.sky-stars i.on{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.sky-count{text-align:center;margin:11px 0 0;font-size:15px;opacity:.9}
.fams{display:flex;flex-direction:column;gap:10px}
.fam{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center;
  text-align:right;background:var(--cream2);border:2px solid var(--track);border-radius:22px;padding:13px 15px;font:inherit;color:var(--deep);cursor:pointer}
.fam-let{grid-row:1/3;font-family:var(--naskh);font-size:21px;font-weight:800;letter-spacing:2px;color:var(--btn)}
.fam-name{font-weight:600;font-size:17px}
.fam-num{grid-row:1/3;font-size:14px;opacity:.7}
.fam-bar{height:8px;border-radius:8px;background:var(--track);overflow:hidden}
.fam-bar b{display:block;height:100%;background:var(--meadow)}
.fam.locked{opacity:.45}

.hint{margin:0;font-size:15px;opacity:.75}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:11px}
.card{position:relative;background:var(--c);border:0;border-radius:24px;padding:13px 8px;display:flex;flex-direction:column;
  align-items:center;gap:5px;font:inherit;color:var(--deep);cursor:pointer;box-shadow:0 3px 0 rgba(35,73,47,.12)}
.card-c{font-family:var(--naskh);font-size:40px;font-weight:800;line-height:1}
.card-n{font-size:14px;font-weight:600}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(35,73,47,.22)}
.dots i.on{background:var(--deep)}
.card.locked{background:var(--track);opacity:.5}
.card.won{box-shadow:0 0 0 3px var(--gold),0 3px 0 rgba(35,73,47,.12)}
.again{font-size:11px;background:rgba(35,73,47,.14);border-radius:9px;padding:2px 8px}

/* ===== شاشة الحرف: التصميم المعتمد كخلفية، والعناصر الحيّة فوق مواضعها ===== */
.letter{padding:0;display:flex;align-items:center;justify-content:center;background:var(--cream);overflow:hidden}
.frame{
  --fh:min(100dvh, 100vw / 1.79167);
  --u:calc(var(--fh) * 0.01);              /* الوحدة: واحد بالمئة من ارتفاع الإطار */
  height:var(--fh); width:calc(var(--fh) * 1.79167);
  position:relative;
  background:url('art/stage.webp?v=3') center/100% 100% no-repeat;
}

/* ورقة الكتابة */
#pad{position:absolute;left:14.426%;top:17.318%;width:79.251%;height:72.656%;
  display:block;touch-action:none;border-radius:calc(var(--u)*2.6);background:transparent}

/* الأزرار: مناطق لمس شفافة فوق الأزرار المرسومة */
.hit{position:absolute;background:none;border:0;padding:0;cursor:pointer;
  border-radius:calc(var(--u)*2);-webkit-tap-highlight-color:transparent}
.hit:active{filter:brightness(.94)}
#toFam    {left:94.913%;top:1.302%; width:4.651%;height:5.599%}
/* حاوية واحدة: الفراغ بين كل زرين من gap وحده، ولا هامش على أي زر بعينه،
   فيتساوى التباعد سواء ظهرت ثلاثة أزرار أم أربعة. --u = ١٪ من ارتفاع الإطار */
.sidebtns{position:absolute;left:0.654%;top:8.333%;width:7.340%;
  display:flex;flex-direction:column;align-items:stretch;
  gap:calc(var(--u)*4.59);pointer-events:none}
.sidebtns > *{position:static;width:100%;margin:0;pointer-events:auto;flex:0 0 auto}
#btnWatch {height:calc(var(--u)*6.641)}
#btnRestart{height:calc(var(--u)*5.273)}
#btnHear  {height:calc(var(--u)*5.469)}
#btnClear {height:calc(var(--u)*5.469);
  background:var(--track);color:var(--deep);font:inherit;font-weight:600;
  font-size:calc(var(--u)*2.1);box-shadow:0 calc(var(--u)*.3) 0 rgba(35,73,47,.12)}
#btnClear[hidden]{display:none}

/* النصوص الحيّة فوق مواضع النص الممسوح */
.ov{position:absolute;transform:translate(-50%,-50%);margin:0;color:var(--deep);white-space:nowrap;
  pointer-events:none}
#lChar {left:93.968%;top:3.678%;font-family:var(--naskh);font-weight:700;font-size:calc(var(--u)*4.0);color:var(--btn)}
#lBadge{left:89.081%;top:4.069%;background:var(--sun);border-radius:calc(var(--u)*1.7);
  padding:calc(var(--u)*.6) calc(var(--u)*1.25);font-weight:600;font-size:calc(var(--u)*1.95)}
#lBadge[hidden]{display:none}
#lSteps{left:82.904%;top:4.069%;display:flex;gap:calc(var(--u)*.65)}
#lSteps i{width:calc(var(--u)*2.35);height:calc(var(--u)*2.35);background:var(--track);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
#lSteps i.done{background:var(--gold)} #lSteps i.now{background:var(--coral)}
#lHelp {left:4.288%;top:93.2%;width:8.4%;white-space:normal;text-align:center;
  font-size:calc(var(--u)*1.55);line-height:1.55;opacity:.5}

/* البومة والنجوم: مقصوصة من التصميم نفسه */
.spr{position:absolute;pointer-events:none}
.spr img{width:100%;height:100%;display:block}
#owl{left:19.186%;top:3.125%;width:7.413%;height:15.885%;
  transform-origin:50% 94%;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:-4deg} 50%{rotate:4deg}}
#owl .owlShut{position:absolute;inset:0;opacity:0;transition:opacity .13s ease}
#owl.blink .owlShut{opacity:1}
.st{animation:spin 26s linear infinite}
@keyframes spin{from{rotate:0deg} to{rotate:360deg}}
#st0{left:95.530%;top:92.708%;width:1.962%;height:3.581%;animation-duration:30s}
#st1{left:10.865%;top:11.133%;width:1.781%;height:3.125%;animation-duration:24s}
#st2{left:95.530%;top:12.044%;width:1.744%;height:3.125%;animation-duration:28s}
#st3{left:11.519%;top:92.904%;width:1.490%;height:2.604%;animation-duration:22s}
#st4{left:10.792%;top:88.281%;width:1.308%;height:2.409%;animation-duration:34s}
#st5{left:96.402%;top:19.010%;width:1.235%;height:2.148%;animation-duration:26s}

/* غيوم تنساب داخل حدود اللوحة */
.panel{position:absolute;left:8.576%;top:8.203%;width:90.807%;height:91.146%;
  border-radius:calc(var(--u)*3.2);overflow:hidden;pointer-events:none}
.cloudstrip{position:absolute;top:0;left:0;height:12%;width:200%;display:flex;
  animation:drift 190s linear infinite}
.cloudstrip svg{width:50%;height:100%}
@keyframes drift{from{transform:translateX(0)} to{transform:translateX(50%)}}

.watchhint{position:absolute;bottom:calc(var(--u)*1.6);inset-inline:0;text-align:center;margin:0;
  font-size:calc(var(--u)*1.9);color:var(--deep);opacity:.42;pointer-events:none;
  animation:hintin .4s ease-out}
.watchhint[hidden]{display:none}
@keyframes hintin{from{opacity:0}to{opacity:.42}}
.guide{position:absolute;bottom:calc(var(--u)*2);inset-inline:0;text-align:center;margin:0;
  font-size:calc(var(--u)*2.2);font-weight:600;color:var(--btn);opacity:0;transition:opacity .25s;pointer-events:none}
.guide.on{opacity:1}

.burst{position:absolute;inset:0;pointer-events:none;display:none}
.burst.on{display:block}
.burst i{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:3px;background:var(--gold);
  transform:rotate(var(--a)) translateY(0);animation:fly 1.3s var(--d) ease-out forwards}
@keyframes fly{to{transform:rotate(var(--a)) translateY(-40vh) scale(.3);opacity:0}}

.pop{position:fixed;inset-inline:0;margin-inline:auto;width:min(440px,86vw);top:14dvh;background:var(--cream2);
  border:3px solid var(--gold);border-radius:26px;padding:20px;text-align:center;box-shadow:0 14px 40px rgba(35,73,47,.22);z-index:9}
.pop[hidden]{display:none}
.pop p{margin:5px 0;font-size:17px}
.pop strong{font-size:27px;color:var(--btn)}
.pop-char{font-family:var(--naskh);font-size:54px;font-weight:800;color:var(--gold);display:block}
.pop-btns{display:flex;gap:10px;justify-content:center;margin-top:12px}
.pop-btns button{border:0;border-radius:18px;padding:12px 18px;font:inherit;font-weight:600;background:var(--track);color:var(--deep);cursor:pointer}
.primary{background:var(--btn);color:#fff}

.privacy{background:var(--sun);border-radius:18px;padding:11px 13px;margin:0;font-size:14px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{background:var(--cream2);border:2px solid var(--track);border-radius:22px;padding:13px;text-align:center}
.stats b{display:block;font-size:26px;color:var(--btn)}
.stats span{font-size:13px;opacity:.75}
.lbl{margin:8px 0 0;font-weight:600;font-size:15px;opacity:.8}
.letters{font-family:var(--naskh);font-size:24px;letter-spacing:4px;margin:0;color:var(--btn)}
.set{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--cream2);
  border:2px solid var(--track);border-radius:20px;padding:11px 15px;font-size:16px}
.set select,.set button{font:inherit;border:0;border-radius:14px;padding:10px 14px;background:var(--track);color:var(--deep)}
.set input{width:26px;height:26px;accent-color:var(--btn)}


/* طلب إدارة الهاتف: يظهر فقط في شاشة الكتابة وفي الوضع العمودي */
.rotate{display:none;position:fixed;inset:0;background:var(--cream);z-index:20;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.rotate p{margin:0;font-size:20px;font-weight:600}
@media (orientation:portrait){ body.on-letter .rotate{display:flex} }


/* ===== خريطة حروف اللغة العربية: سماء خلفية وكل شيء آخر عنصر مستقل ===== */
.mapscreen{padding:0;display:flex;align-items:center;justify-content:center;background:var(--cream);overflow:hidden}
.mframe{--fh:min(100dvh, 100vw / 1.79167); --u:calc(var(--fh)*0.01);
  height:var(--fh); width:calc(var(--fh)*1.79167); position:relative;
  background:url('art/sky.webp?v=3') center/100% 100% no-repeat}

/* المسار المنقط تحت الغيوم دائماً */
.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
/* شمس الخريطة: زينة غير تفاعلية، فوق خلفية السماء وفوق المسار وتحت الغيوم والقلادة.
   عرضها يأتي من map.js عبر ‎--sunw كي يبقى مصدر الرقم واحداً مع اقتطاع المسار. */
.msun{position:absolute;left:96%;top:88%;transform:translate(-50%,-50%);
  width:calc(var(--sunw, 5.85) * 1%);height:auto;pointer-events:none;user-select:none;z-index:1}
/* نقاط ذهبية مستديرة: شرطة بطول صفر مع نهاية مستديرة، والفجوة نحو مثلَي القطر ونصف */
.trail path{fill:none;stroke:#E8B84B;stroke-width:.985;stroke-linecap:round;
  stroke-dasharray:0.1 2.36;opacity:.95}

@keyframes twinkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
/* عدّاد الحروف: لوحة كريمية تحت العنوان مباشرة */
#mCount{left:92%;top:6.4%;transform:translate(-50%,-50%);margin:0;z-index:5;white-space:nowrap;
  background:var(--cream2);border:calc(var(--u)*.18) solid var(--btn);border-radius:calc(var(--u)*1.4);
  padding:calc(var(--u)*.28) calc(var(--u)*1.1);color:var(--deep);font-weight:700;
  font-size:calc(var(--u)*1.55);transition:opacity .28s}
#mCount.bump{animation:cbump .6s ease-out}
@keyframes cbump{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#mTitle{left:92%;top:2.0%;transform:translate(-50%,-50%);margin:0;color:var(--btn);z-index:5;
  font-weight:800;font-size:calc(var(--u)*2.8);white-space:nowrap}
.mback{position:absolute;left:1.6%;top:0.5%;width:4.4%;height:7.9%;z-index:6;cursor:pointer;
  border:calc(var(--u)*.35) solid #5E8C4A;border-radius:50%;background:var(--meadow);
  display:grid;place-items:center;box-shadow:0 calc(var(--u)*.4) 0 rgba(35,73,47,.3)}
.mback svg{width:55%;height:55%;fill:none;stroke:#F4FBEE;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mback:active{transform:translateY(2px);box-shadow:none}
#mParent{position:absolute;left:88%;top:0.6%;width:4.2%;height:7.6%;border-radius:50%;z-index:6;
  background:none;border:0;cursor:pointer}
#mParent.holding{background:rgba(35,73,47,.12)}


/* ===== قلادة النجوم المعلّقة ===== */
.garland{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.garland path{stroke:#E8B84B;stroke-width:.63;stroke-linecap:round;fill:none}
.garland.ripple path{animation:ropewave .9s ease-out}
@keyframes ropewave{0%,100%{stroke-width:.63}35%{stroke-width:.92}}
#gItems{position:absolute;inset:0;z-index:1;pointer-events:none}
#gItems img{width:100%;height:auto;display:block;pointer-events:none}

.gstar{position:absolute;transform-origin:50.2% 12.8%;   /* الدوران حول العقدة لا المركز */
  animation:gsway var(--gd,4.3s) ease-in-out var(--gdl,0s) infinite;will-change:rotate}
.gstar img{filter:none;transition:filter .3s;
  animation:ggust 11s ease-in-out var(--gg,0s) infinite;transform-origin:50.2% 12.8%}
.gstar.gold{scale:1.08}
.gstar.gold img{filter:drop-shadow(0 0 calc(var(--u)*.9) rgba(232,184,75,.9));
  animation:gglow 3.4s ease-in-out var(--glw,0s) infinite, ggust 11s ease-in-out var(--gg,0s) infinite}
.gstar.cur{scale:1.15}
.gstar.cur::after{content:'';position:absolute;left:50.2%;top:56%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,184,75,.55),rgba(232,184,75,0) 70%);
  animation:gpulse 1.9s ease-in-out infinite}
.gstar.land img{animation:gland .52s ease-out}
.gstar.land{scale:1.08}
.gburst{position:absolute;left:50.2%;top:58%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,240,180,.95),rgba(255,240,180,0) 68%);
  animation:gburst .9s ease-out forwards}
@keyframes gsway{0%,100%{rotate:calc(var(--ga,4deg)*-1)}50%{rotate:var(--ga,4deg)}}
/* هبّة ريح تسري على طول الحبل كل ١١ ثانية: سعة مضاعفة تهدأ خلال ثانيتين */
@keyframes ggust{
  0%,82%,100%{rotate:0deg}
  86%{rotate:calc(var(--ga,4deg)*0.95)}
  90%{rotate:calc(var(--ga,4deg)*-0.7)}
  94%{rotate:calc(var(--ga,4deg)*0.35)}
  97%{rotate:calc(var(--ga,4deg)*-0.12)}
}
@keyframes gglow{0%,100%{filter:drop-shadow(0 0 calc(var(--u)*.7) rgba(232,184,75,.65))}
  50%{filter:drop-shadow(0 0 calc(var(--u)*1.5) rgba(232,184,75,1))}}
@keyframes gpulse{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes gland{0%{transform:scale(1)}45%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes gburst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

.gcap{position:absolute;animation:gfloat 7.5s ease-in-out var(--sdel,0s) infinite}
/* الغيوم الفاصلة تتمايل بسعة أصغر فلا تبدو مسمّرة بين نجوم متحركة */
.gsep{position:absolute;transform-origin:50% 8%;
  animation:gfloat 8.5s ease-in-out var(--sdel,0s) infinite,
            gsway 6.2s ease-in-out var(--sdel,0s) infinite;
  --ga:var(--sa,2deg)}
.gsep img{margin-bottom:-58%}          /* يُخفى ذيل الغيمة الفاصلة بالقص لا بتعديل الملف */
@keyframes gfloat{0%,100%{translate:0 0}50%{translate:0 -1.1%}}

/* دخول الصفحة: تنزل القلادة مع ارتداد ناعم واحد */
#gItems.enter .gstar{
  animation:gdrop .62s cubic-bezier(.34,1.5,.55,1) backwards var(--drop,0s),
            gsway var(--gd,4.3s) ease-in-out calc(.62s + var(--gdl,0s)) infinite}
#gItems.enter .gcap, #gItems.enter .gsep{
  animation:gdrop .62s cubic-bezier(.34,1.5,.55,1) backwards var(--drop,0s),
            gfloat 8s ease-in-out .62s infinite}
@keyframes gdrop{from{translate:0 -220%;opacity:0}to{translate:0 0;opacity:1}}

/* دفعة اللمس: طبقة وسيطة بين غلاف التمايل وصورة الهبّة، تدور حول العقدة نفسها،
   تنطلق نحو ١٤ درجة وتخبو على أرجحات متناقصة مرسومة في الإطارات نفسها */
.gmid{transform-origin:50.2% 12.8%}
.gsep .gmid{transform-origin:50% 8%;overflow:hidden}
.gmid.gpush{animation:gpushK 1.5s ease-out}
.gmid.gpushN{animation:gpushNK 1.5s ease-out .07s}
.gmid.gpushC{animation:gpushCK 1.5s ease-out}
@keyframes gpushK{0%{rotate:0deg}12%{rotate:14deg}34%{rotate:-9deg}56%{rotate:5deg}76%{rotate:-2.4deg}90%{rotate:1deg}100%{rotate:0deg}}
@keyframes gpushNK{0%{rotate:0deg}12%{rotate:7deg}34%{rotate:-4.5deg}56%{rotate:2.5deg}76%{rotate:-1.2deg}90%{rotate:.5deg}100%{rotate:0deg}}
@keyframes gpushCK{0%{rotate:0deg}12%{rotate:8.4deg}34%{rotate:-5.4deg}56%{rotate:3deg}76%{rotate:-1.4deg}90%{rotate:.6deg}100%{rotate:0deg}}

/* الغيمة حاوية وأبناؤها بمواضع نسبية منها */
#mIslands{position:absolute;inset:0;z-index:2}
.isle{position:absolute}
/* الغيمة المستيقظة تطفو في نسيم؛ والنائمة ساكنة تماماً ليتضح الفرق.
   الحاوية موضوعة بـ left/top لا بتحويل، فالحركة لا تلغي تمركزها. */
.isle.open{animation:cloudsway var(--cdur,6s) ease-in-out var(--cdel,0s) infinite}
@keyframes cloudsway{
  0%,100%{transform:translateX(calc(var(--u)*-1.25)) rotate(-0.4deg)}
  50%    {transform:translateX(calc(var(--u)*1.25))  rotate(0.4deg)}
}
.isle.shake{animation:sleepshake .7s ease-in-out}
@keyframes sleepshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.4%)}75%{transform:translateX(1.4%)}}
.isle.bob{animation:bob .6s ease-in-out}
@keyframes bob{0%,100%{transform:translateY(0)}45%{transform:translateY(-3%)}}
.isle.woke .cimg{animation:woke 1.5s ease-out}
@keyframes woke{0%{filter:brightness(1.9) saturate(.5)}100%{filter:none}}
.cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  pointer-events:none;transition:opacity .38s}
.cimg.fading{opacity:0}
.chit{position:absolute;inset:0;border:0;background:none;padding:0;cursor:pointer}
.clock{position:absolute;object-fit:contain;transform-origin:50% 6%;pointer-events:none}
.clock[hidden]{display:none}
.clock.swing{animation:swing .72s ease-in-out}
@keyframes swing{0%,100%{rotate:0deg}25%{rotate:-14deg}75%{rotate:14deg}}
.clock.falling{animation:lockfall .9s ease-in forwards}
@keyframes lockfall{0%{rotate:0}25%{rotate:-17deg}45%{rotate:17deg}100%{rotate:44deg;translate:0 130%;opacity:0}}
.icount{font-weight:800;color:var(--btn);opacity:.85}
/* علامة النوم: ثلاثة أحرف z تصعد من يمين الغيمة النائمة، ابنٌ داخل الحاوية */
.zzz{position:absolute;left:87%;top:32%;width:0;height:0;pointer-events:none}
.isle.open .zzz{display:none}
.zzz i{position:absolute;left:0;top:0;font-style:normal;font-weight:800;
  color:rgba(107,124,102,.58);white-space:nowrap;opacity:0;
  font-size:calc(var(--u)*(2.375 + var(--zi)*0.90));
  animation:zrise 6.2s ease-out infinite;
  animation-delay:calc(var(--zdel,0s) + var(--zi)*0.6s)}
@keyframes zrise{
  0%   {opacity:0;   translate:0 0;                                    scale:.7}
  12%  {opacity:.58; translate:calc(var(--u)*.8) calc(var(--u)*-1.0);  scale:.9}
  34%  {opacity:.5;  translate:calc(var(--u)*2.0) calc(var(--u)*-2.5); scale:1.1}
  48%  {opacity:0;   translate:calc(var(--u)*2.8) calc(var(--u)*-3.6); scale:1.22}
  100% {opacity:0;   translate:calc(var(--u)*2.8) calc(var(--u)*-3.6); scale:1.22}
}
.iname{position:absolute;left:50%;top:100%;transform:translate(calc(-50% + var(--pdx,0px)),14%);white-space:nowrap;
  background:var(--cream2);border:calc(var(--u)*.22) solid var(--btn);border-radius:calc(var(--u)*1.5);
  padding:calc(var(--u)*.35) calc(var(--u)*1.1);color:var(--deep);font-weight:600;
  font-size:calc(var(--u)*1.55);pointer-events:none}

/* النجوم داخل حدود الغيمة */
.star{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1;border:0;background:none;padding:0;
  cursor:pointer;display:grid;place-items:center}
.star img{grid-area:1/1;width:100%;height:100%;object-fit:contain;pointer-events:none}
.star b{grid-area:1/1;color:var(--deep);font-weight:800;pointer-events:none;
  font-size:calc(var(--u)*var(--lt));transform:translateY(-7%)}
.star.gold b{color:#6A3F12}
.star.cur{z-index:3;animation:curpulse 2s ease-in-out infinite}
.star.cur img{filter:drop-shadow(0 0 calc(var(--u)*1.2) rgba(35,73,47,.42))}
/* الحالية أكبر ١٥٪ مع نبض من 1 إلى 1.06 */
@keyframes curpulse{0%,100%{transform:translate(-50%,-50%) scale(1.15)}
  50%{transform:translate(-50%,-50%) scale(1.219)}}
.star.hop{animation:hop .42s ease-out}
@keyframes hop{0%,100%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-64%) scale(1.16)}}
.star.pop img{animation:goldpop .8s ease-out}
@keyframes goldpop{0%{transform:scale(.7) rotate(-22deg)}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1)}}
.glint{position:absolute;inset:-45%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,238,175,.95),rgba(255,238,175,0) 70%);
  animation:glintout 1.2s ease-out forwards}
@keyframes glintout{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.flyer{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:7;
  transition:left 1s cubic-bezier(.4,0,.2,1),top 1s cubic-bezier(.4,0,.2,1),width 1s,height 1s,opacity 1s}
#mOwl{position:absolute;transform:translate(-50%,-50%);pointer-events:none;z-index:3;
  animation:floaty 4.4s ease-in-out infinite;transition:left .9s ease,top .9s ease,width .5s ease}
#mOwl[hidden]{display:none}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8%}}

@media (prefers-reduced-motion:reduce){
  .gstar,.gcap,.gsep,#gItems.enter .gstar,#gItems.enter .gcap,#gItems.enter .gsep{animation:none!important}
  .gstar img{animation:none!important}
  .isle.open{animation:none!important}
  .zzz i{animation:none!important;opacity:.5;translate:calc(var(--u)*1.2) calc(var(--u)*-1.5)}
  .gstar.gold img{animation:none!important}
  .gstar.cur::after{animation:none!important;opacity:.6}*{animation:none!important;transition:none!important}
  #owl .owlShut{opacity:0!important}}


/* ===== زر «إلى السماء»: يظهر بعد نجاح المرحلة الأخيرة، والضغط اختياري ===== */
.skybtn{position:absolute;left:50%;bottom:calc(var(--u)*.5);transform:translateX(-50%);
  /* سقف صريح مضاعف: بالوحدة النسبية وبقيمة قصوى بالبكسل، فلا ينفلت الحجم بحال */
  height:min(calc(var(--u,7px)*9.4), calc(var(--fh,700px)*.14), 96px);
  display:flex;flex-direction:row-reverse;align-items:center;gap:calc(var(--u)*1);
  background:#FFF8E6;border:calc(var(--u)*.24) solid var(--gold);
  border-radius:calc(var(--u)*2.2);padding:0 calc(var(--u)*1.9);cursor:pointer;z-index:40;
  box-shadow:0 calc(var(--u)*.4) calc(var(--u)*1.2) rgba(35,73,47,.18);
  -webkit-user-select:none;user-select:none;animation:skyIn .34s ease-out}
.skybtn[hidden]{display:none!important}
.skybtn img{height:70%;max-height:68px;width:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 0 calc(var(--u)*1.1) rgba(232,184,75,.95));
  animation:skyPulse 1.5s ease-in-out infinite}
.skybtn span{font-size:min(calc(var(--u,7px)*2.0), 20px);font-weight:700;color:#7a5510;line-height:1}
@keyframes skyIn{from{opacity:0;transform:translate(-50%,70%)}to{opacity:1;transform:translateX(-50%)}}
@keyframes skyPulse{0%,100%{scale:1;rotate:-4deg}50%{scale:1.1;rotate:4deg}}
body.hasSky .guide{opacity:0!important}

/* يد التوجيه: تؤشر إلى نجمة الزر ليعرف الطفل أن يضغط.
   عنصر داخل الزر نفسه فيتبع موضعه ومقاسه على كل شاشة، ولا يستقبل لمساً. */
.skybtn .skyhint{position:absolute;right:100%;top:50%;height:160%;width:auto;max-height:none;
  opacity:0;visibility:hidden;pointer-events:none;
  /* محور التحويل هو رأس الإصبع نفسه، فتبقى ملامسته للحافة مهما تغيّرت الزاوية أو الحجم */
  transform-origin:89.9% 35.7%;transform:translate(31%,-66%) rotate(8deg);
  filter:none;
  animation:hintCycle 13s ease-in-out infinite}
.skybtn .skyhint.still{display:none}
/* ظهور بتلاشٍ ٤٥٠ ملّي، بقاء ٧ ثوانٍ، اختفاء بتلاشٍ ٥٥٠ ملّي، ثم غياب ٥ ثوانٍ.
   نُخفيها بـvisibility في فترة الغياب فيتوقف المتصفح عن رسم إطاراتها ولا يتقطّع العرض. */
@keyframes hintCycle{
  0%{opacity:0;visibility:hidden}
  .4%{opacity:0;visibility:visible}
  3.5%{opacity:1}
  57.3%{opacity:1}
  61.5%{opacity:0;visibility:visible}
  61.9%{visibility:hidden}
  100%{opacity:0;visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .skybtn img{animation:none!important}
  .skybtn .skyhint.anim{display:none}
  .skybtn .skyhint.still{display:block;opacity:.96;visibility:visible}
}

/* ===== انتقال الغيوم: من زر السماء وحده. ثلاث طبقات من الخلف: صلبة ثم ستارة ثم ضباب ===== */
.trans{position:fixed;inset:0;z-index:900;overflow:hidden;display:none;pointer-events:none}
.trans[hidden]{display:none!important}
.trans.on{display:block;pointer-events:auto}
.tveil{position:absolute;inset:0;background:#FDF8EC;opacity:0}  /* ضمانة التغطية */
.tcw{position:absolute;top:0;left:0;width:130%;height:100%;pointer-events:none;
  transform:translate3d(-100%,0,0) scale(1.06);transform-origin:100% 50%}
.tcloud{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;
  pointer-events:none;-webkit-touch-callout:none;user-select:none}
.tfog{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95) 0%,rgba(255,255,255,.72) 46%,rgba(255,255,255,0) 78%)}
.tfog i{position:absolute;width:clamp(14px,3vmin,26px);aspect-ratio:1;opacity:0;
  background:radial-gradient(closest-side,#FFE9A8,#EFBF4E 58%,rgba(239,191,78,0) 75%);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.tfog i:nth-child(1){left:44%;top:41%}
.tfog i:nth-child(2){left:55%;top:56%}

/* الإغلاق: الستارة تدخل من اليسار وتفيض يميناً، والصلبة تكتمل عند ٧٦٪ من الزمن */
.trans.on.close .tveil{animation:tveilIn .42s linear forwards}
.trans.on.close .tcw{animation:tcwIn .42s cubic-bezier(.22,1,.36,1) forwards}
.trans.on.close .tcloud{animation:tdip .42s ease-in-out forwards}
.trans.on.close .tfog{animation:tfogIn .34s ease-in .08s forwards}
.trans.on .tfog i{animation:tstar .22s ease-out .34s both}
.trans.on .tfog i:nth-child(2){animation-delay:.38s}

/* الفتح: الصلبة تتلاشى في أول ١٥٠ ملّي والستارة ترجع إلى اليسار طوال الخمسمئة */
.trans.on.open .tveil{opacity:1;animation:tveilOut .15s linear forwards}
.trans.on.open .tcw{transform:translate3d(0,0,0) scale(1);animation:tcwOut .5s cubic-bezier(.65,0,.35,1) forwards}
.trans.on.open .tcloud{animation:tdip .5s ease-in-out forwards}
.trans.on.open .tfog{opacity:1;animation:tfogOut .2s ease-out forwards}

@keyframes tveilIn{0%{opacity:0}76%{opacity:1}100%{opacity:1}}
@keyframes tveilOut{from{opacity:1}to{opacity:0}}
@keyframes tcwIn{to{transform:translate3d(0,0,0) scale(1)}}
@keyframes tcwOut{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-100%,0,0) scale(1.04)}}
@keyframes tdip{0%{transform:translateY(0)}50%{transform:translateY(1%)}100%{transform:translateY(0)}}
@keyframes tfogIn{from{opacity:0}to{opacity:1}}
@keyframes tfogOut{from{opacity:1}to{opacity:0}}
@keyframes tstar{0%{opacity:0;transform:scale(.5) rotate(-8deg)}45%{opacity:1;transform:scale(1.05) rotate(6deg)}100%{opacity:0;transform:scale(1.28) rotate(14deg)}}

/* تعذّر المورد أو تفضيل تقليل الحركة: تلاشٍ كريمي بسيط بلا انزلاق ولا تكبير */
.trans.plain .tcw,.trans.plain .tfog{display:none}
.trans.plain.on.close .tveil{animation:tplainIn .24s ease forwards}
.trans.plain.on.open .tveil{opacity:1;animation:tveilOut .24s ease forwards}
@keyframes tplainIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .trans .tcw,.trans .tfog{display:none} }

/* ===== دوران أفقي تلقائي حين تكون الشاشة عمودية ولا يمكن قفلها ===== */
html.force-landscape, html.force-landscape body{overflow:hidden}
html.force-landscape body{position:absolute;top:0;left:0;width:100vh;height:100vw;
  transform:rotate(90deg) translateY(-100%);transform-origin:top left}
html.force-landscape .screen{height:100vw}
html.force-landscape .frame, html.force-landscape .mframe{--fh:min(100vw, 100vh / 1.79167)}
html.force-landscape .rotate{display:none !important}