/* كنوز الجليد: الأنماط. الخط من /games/fonts.css، والواجهة من اليمين عدا اللوحة نفسها */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0b1626;overscroll-behavior:none}
body{font-family:"Baloo Bhaijaan 2","Segoe UI",system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
img{-webkit-user-drag:none;user-select:none;pointer-events:none}
button{font:inherit;-webkit-tap-highlight-color:transparent}
#game{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}
/* الاتجاه ثابت عمودياً: في الهاتف المائل تُدار الصفحة عكس دورانه (كما في mtak.js) */
html.rot90 #game{width:100vh;height:100vw;transform-origin:0 0;transform:translateY(100vh) rotate(-90deg)}
html.rot270 #game{width:100vh;height:100vw;transform-origin:0 0;transform:translateX(100vw) rotate(90deg)}
#bg{position:absolute;inset:-3%;background:#16263c center/cover no-repeat}
#dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
#bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,16,30,.28),rgba(8,16,30,.46))}
#board,#fx{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
#board{z-index:1;touch-action:none}
#fx{z-index:6;pointer-events:none}
#pixi{position:absolute;left:0;top:0;width:100%;height:100%;z-index:5;pointer-events:none;display:none}
html.pixi #pixi{display:block}
html.pixi #fx{display:none}
html.pixi #owl{visibility:hidden}
#cheer:has(.w){text-shadow:none;-webkit-text-stroke:0;filter:drop-shadow(0 4px 0 #1d2f55) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
/* الخط العربي المحدَّد: الحرف الداكن السميك تحت، ونسخة ملونة فوقه تغطي وصلات الحروف فلا يبدو ممزقاً (القسم ١٢) */
#cheer .w{display:inline-block;position:relative;padding:0 6px;color:#1d2f55;-webkit-text-stroke:5px #1d2f55;text-shadow:none}
#cheer .w::after{content:attr(data-text);position:absolute;left:0;right:0;top:0;padding:0 6px;background:linear-gradient(100deg,#fff 40%,#fff1a8 50%,#fff 60%);background-size:260% 100%;background-position:var(--sp,100%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0}
#scr-start .title::after{content:attr(data-text);position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,#FFF6C8 10%,#F5C518 45%,#D9901C 80%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0}
#hud{position:absolute;left:0;right:0;top:0;z-index:4;padding:calc(env(safe-area-inset-top,0px) + 6px) 6px 0;pointer-events:none}
#hud *{pointer-events:auto}
.row1{display:flex;align-items:flex-start;gap:4px}
.row2{display:flex;align-items:center;gap:8px;margin-top:6px;padding:0 4px}
#owl{flex:none;width:68px;height:59px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
#owl.pop{animation:op .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes op{0%{transform:scale(.8) rotate(-4deg)}60%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1)}}
.back{flex:none;width:60px;height:60px;border:0;background:none;display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.back img{width:46px;height:46px}
.back:active{transform:scale(.9)}
#goals{flex:1;display:flex;justify-content:center;gap:4px;padding-top:1px}
.goal{position:relative;width:56px;display:flex;flex-direction:column;align-items:center}
.goal .ring{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(10,24,44,.62);border:3px solid var(--c,#E8B84B);box-shadow:0 0 10px var(--c,#E8B84B) inset,0 3px 8px rgba(0,0,0,.35)}
.goal .ring img{width:38px;height:38px;object-fit:contain}
.goal b{margin-top:-9px;min-width:28px;padding:0 6px;border-radius:12px;background:#FBF3DF;color:#23492F;font-weight:800;font-size:16px;line-height:21px;text-align:center;box-shadow:0 2px 0 #c9a445;border:2px solid #E8B84B}
.goal.pulse .ring{animation:gp .2s ease-out}
.goal.done b{background:#2E5B3E;color:#fff;border-color:#7FB069}
@keyframes gp{50%{transform:scale(1.18)}}
#moves{flex:none;width:64px;height:60px;border-radius:17px;background:linear-gradient(#FDF8EC,#F3E3B8);border:3px solid #E8B84B;box-shadow:0 4px 0 #b88b2a,0 6px 12px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#23492F}
#moves .lbl{font-size:11px;font-weight:700;line-height:1;margin-top:3px}
#moves b{font-size:26px;line-height:1.05;font-weight:800}
#moves.low{animation:mv 1s ease-in-out infinite}
@keyframes mv{50%{transform:scale(1.08)}}
#lvl{flex:none;background:rgba(10,24,44,.7);border:2px solid #E8B84B;border-radius:14px;padding:0 10px;font-weight:800;font-size:15px;line-height:26px;color:#FBF3DF;white-space:nowrap}
/* شريط التقدم نحو الفوز: يمتلئ من اليمين كلما اقتربت الأهداف، وتسري فيه لمعة */
#bar{position:relative;flex:1;height:34px}
#bar .track{position:absolute;left:4px;right:4px;top:10px;height:14px;border-radius:7px;background:rgba(10,24,44,.72);border:2px solid rgba(232,184,75,.85);overflow:hidden}
#bar .fill{position:absolute;right:0;top:0;bottom:0;width:0;border-radius:7px;background:linear-gradient(270deg,#FFE58A,#F5C518 60%,#F29A1E);box-shadow:0 0 8px rgba(255,220,120,.8);transition:width .45s cubic-bezier(.2,.8,.3,1);overflow:hidden}
/* نجوم الخيط على طريقة كاندي كراش (قرار محمد ٣٠ أيلول ٢٠٢٦): الأولى قرب البداية، والثانية في المنتصف، والثالثة في الآخر؛ رمادية حتى يبلغها الخيط */
#barStars{position:absolute;left:4px;right:4px;top:0;bottom:0;pointer-events:none}
#barStars.off{display:none}
#barStars img{position:absolute;top:50%;width:30px;height:30px;margin:-15px -15px 0 0;filter:grayscale(1) brightness(.72);opacity:.95}
#barStars img:nth-child(1){right:25%}
#barStars img:nth-child(2){right:50%}
#barStars img:nth-child(3){right:auto;left:-6px;margin:-17px 0 0;width:34px;height:34px}
#barStars img.on{filter:drop-shadow(0 0 7px rgba(255,210,90,.95));opacity:1}
#bar .fill::after{content:"";position:absolute;top:0;bottom:0;width:40%;right:-45%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:shim 2.6s ease-in-out infinite}
@keyframes shim{0%{right:-45%}55%,100%{right:110%}}
@media (prefers-reduced-motion:reduce){#bar .fill::after{animation:none}}
/* شريط الأدوات: كل أداة في فقاعة لامعة */
#tools{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;gap:14px;padding:0 8px calc(env(safe-area-inset-bottom,0px) + 12px)}
.tool{position:relative;flex:none;width:64px;height:64px;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0,rgba(220,240,255,.6) 16%,rgba(130,185,240,.3) 52%,rgba(50,100,180,.45) 100%);box-shadow:inset 0 -7px 12px rgba(20,60,120,.4),inset 0 4px 8px rgba(255,255,255,.6),0 5px 12px rgba(0,0,0,.4);transition:transform .15s,box-shadow .2s}
.tool .ic{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.tool b{position:absolute;top:-5px;right:-5px;min-width:25px;height:25px;border-radius:13px;background:#E8344A;color:#fff;font-size:15px;font-weight:800;line-height:21px;border:2px solid #fff;text-align:center;padding:0 5px}
.tool b.zero{background:#7b8794}
.tool.locked .ic{filter:grayscale(1) brightness(.85);opacity:.5}
.tool .lock{position:absolute;inset:0;margin:auto;width:30px;height:30px}
.tool.armed{transform:scale(1.14);box-shadow:0 0 0 4px #FFD76A,0 0 24px 8px rgba(255,215,106,.75)}
.tool:active{transform:scale(.92)}
#toast{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);z-index:8;text-align:center;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#toast.on{opacity:1;transform:none}
#toast span{display:inline-block;max-width:100%;background:#FBF3DF;color:#23492F;border:3px solid #E8B84B;border-radius:18px;padding:6px 14px;font-weight:800;font-size:17px;line-height:1.5;box-shadow:0 4px 0 #b88b2a,0 8px 18px rgba(0,0,0,.35)}
#cheer{position:absolute;left:0;right:0;z-index:7;text-align:center;pointer-events:none;font-weight:800;color:#fff;font-size:46px;line-height:1.2;text-shadow:0 4px 0 #1d2f55,0 6px 16px rgba(0,0,0,.45);opacity:0}
#cheer.on{animation:ch 1.1s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes ch{0%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1.12)}30%{transform:scale(1)}75%{opacity:1;transform:translateY(-18px)}100%{opacity:0;transform:translateY(-48px)}}
#loader{position:absolute;inset:0;z-index:20;background:#FBF3DF;display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .45s}
#loader.on{display:flex}
#loader.fade{opacity:0}
.l313{position:relative;width:min(72vw,300px);aspect-ratio:1.8}
.l313 img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.15}
.l313 img.fill{opacity:1;clip-path:inset(0 0 0 100%)}
#lpct{font-size:30px;font-weight:800;color:#2E5B3E}
#probe{position:absolute;visibility:hidden;pointer-events:none;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* النوافذ: كريمية بإطار ذهبي، تكبر من ٨٠٪ إلى ١٠٥٪ ثم تستقر (القسمان ١٢ و١٣ من BRIEF.md) */
#modal{position:absolute;inset:0;z-index:12;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,16,30,.42)}
#modal.on{display:flex}
#modal.blur{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#modal .box{position:relative;width:min(92vw,380px);background:#FBF3DF;border:4px solid #E8B84B;border-radius:28px;box-shadow:0 6px 0 #b88b2a,0 18px 40px rgba(0,0,0,.45);padding:22px 18px 18px;text-align:center;color:#23492F}
#modal h2{font-size:30px;font-weight:800;color:#2E5B3E;line-height:1.3}
#modal .sub{font-size:18px;font-weight:700;margin-top:4px;color:#5b4a1f}
#modal .badge{display:inline-block;margin-bottom:6px;padding:2px 14px;border-radius:14px;background:linear-gradient(#FFE58A,#E8B84B);color:#5b3a00;font-weight:800;font-size:15px;box-shadow:0 2px 0 #b88b2a}
#modal .goals{display:flex;justify-content:center;gap:12px;margin:16px 0 8px;flex-wrap:wrap}
#modal .g{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:800;font-size:18px}
#modal .g .ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#16304f;border:4px solid var(--c,#E8B84B);box-shadow:0 0 12px var(--c,#E8B84B) inset}
#modal .g .ring img{width:48px;height:48px;object-fit:contain}
#modal .mv{font-size:17px;font-weight:700;margin:6px 0}
#modal .stars{display:flex;justify-content:center;gap:10px;margin:10px 0}
#modal .stars img{width:54px;height:54px;filter:grayscale(1) brightness(.75);opacity:.7}
#modal .stars img:nth-child(2){width:66px;height:66px;margin-top:-8px}
#modal .stars img.on{filter:drop-shadow(0 0 8px rgba(255,210,90,.9));opacity:1}
#modal .tip{display:flex;align-items:center;gap:8px;margin:12px 0 4px;padding:8px 10px;border-radius:16px;background:#fff7e0;border:2px dashed #E8B84B;font-weight:700;font-size:16px;text-align:right}
#modal .tip img{width:54px;height:47px;object-fit:contain;flex:none}
#modal .owlbig{width:120px;height:104px;object-fit:contain;margin:-70px auto 0;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
#modal .btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btn{min-height:62px;border:0;border-radius:22px;padding:0 22px;font-size:24px;font-weight:800;color:#fff;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 5px 0 rgba(0,0,0,.28),0 8px 16px rgba(0,0,0,.2)}
.btn::before{content:"";position:absolute;left:8%;right:8%;top:5px;height:40%;border-radius:18px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}
.btn.green{background:linear-gradient(#4E8E63,#2E5B3E)}
.btn.coral{background:linear-gradient(#F58E73,#EE6C4D)}
.btn.gold{background:linear-gradient(#F6D27A,#E8B84B);color:#5b3a00;font-size:20px;min-height:60px}
.prog{display:flex;justify-content:center;gap:14px;margin:12px 0;flex-wrap:wrap}
.prog .g b{font-size:16px}
/* الشاشات (القسم ١١): البداية والقصة والخريطة فوق طبقات اللعب */
.scr{position:absolute;inset:0;z-index:10;display:none;overflow:hidden}
.scr.on{display:block}
#scr-start{background:#10203a url(images/start.webp) center/cover no-repeat}
#scr-start .title{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 13%);text-align:center;font-size:clamp(46px,14vw,66px);font-weight:800;line-height:1.1;color:#3a2208;-webkit-text-stroke:7px #3a2208;filter:drop-shadow(0 5px 0 #3a2208) drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.stBtns{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 9%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px}
.btn.big{min-height:76px;font-size:32px;width:min(78vw,320px)}
.row2b{display:flex;gap:10px;width:min(90vw,380px)}
.row2b .btn{flex:1;font-size:18px;padding:0 10px}
#modal .txt{margin-top:10px;font-size:17px;line-height:1.8;font-weight:600;text-align:right;color:#23492F}
/* قائمة «تأثير اللعبة»: نجمة ذهبية وعبارة ومصطلح علمي في شارة خضراء، كما في شجرة آل محمد والفروقات */
#modal .bnList{list-style:none;margin:12px 0 2px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:right}
#modal .bnList li{display:flex;align-items:flex-start;gap:9px;font-size:16.5px;line-height:1.6;font-weight:700;color:#23492F}
#modal .bnStar{flex:none;color:#E8B84B;text-shadow:0 0 6px rgba(232,184,75,.7);font-size:18px;padding-top:1px}
#modal .bnTx{flex:1;min-width:0}
#modal .bnTerm{display:inline-block;direction:ltr;font-size:12px;font-weight:800;color:#2E5B3E;background:rgba(46,91,62,.10);border:1.5px solid rgba(46,91,62,.35);border-radius:999px;padding:1px 10px 2px;margin-inline-start:6px;vertical-align:middle;white-space:nowrap}
#scr-story{background:linear-gradient(rgba(8,16,30,.5),rgba(8,16,30,.78)),#10203a url(images/start.webp) center/cover no-repeat;cursor:pointer}
#scr-story .owlStory{position:absolute;left:50%;top:22%;width:170px;transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
#storyText{position:absolute;left:22px;right:22px;top:calc(22% + 170px);background:#FBF3DF;border:4px solid #E8B84B;border-radius:24px;padding:16px 18px;font-size:21px;font-weight:800;line-height:1.7;color:#23492F;text-align:center;box-shadow:0 6px 0 #b88b2a}
#scr-story .hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 7%);text-align:center;color:#FBF3DF;font-weight:700;font-size:16px;opacity:.85;animation:mv 1.6s ease-in-out infinite}
#scr-map{background:#0b1626}
#mapScroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
.mapInner{position:relative;width:100%}
.mapSec{position:absolute;left:0;width:100%;background-repeat:no-repeat;background-color:#16263c}
.mapPath{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mapPath polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mapPath .glow{stroke:rgba(255,226,120,.55);stroke-width:12;filter:blur(3px)}
.mapPath .run{stroke:#FFF3C4;stroke-width:4;stroke-dasharray:10 18;animation:runp 1.4s linear infinite}
@keyframes runp{to{stroke-dashoffset:-56}}
.mapCloud{position:absolute;left:50%;transform:translateX(-50%);width:140%;height:70px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(255,255,255,.96) 0,rgba(255,255,255,.85) 38%,rgba(255,255,255,0) 70%);pointer-events:none;z-index:1}
.mapCloud span{font-weight:800;font-size:20px;color:#2E5B3E;text-shadow:0 2px 0 #fff}
.node{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center;cursor:pointer;z-index:2;background:radial-gradient(circle at 35% 30%,#fff 0,#dfe6ee 40%,#9aa8b8 100%);box-shadow:0 5px 0 rgba(0,0,0,.3),0 8px 14px rgba(0,0,0,.35);padding:0}
.node .num{font-weight:800;font-size:21px;color:#23492F;line-height:1}
.node.done{background:radial-gradient(circle at 35% 30%,#FFF6C8 0,#F5C518 45%,#C98A16 100%);border-color:#FFF3C4}
.node.cur{background:radial-gradient(circle at 35% 30%,#fff 0,#f4f8ff 55%,#cfdcf0 100%);animation:ndp 1.3s ease-in-out infinite;box-shadow:0 0 0 6px rgba(255,255,255,.35),0 0 22px 6px rgba(255,255,255,.6)}
@keyframes ndp{50%{transform:scale(1.1)}}
.node.locked{background:radial-gradient(circle at 35% 30%,#c9cfd6 0,#8e98a4 60%,#66717e 100%);border-color:#b8c0c9;filter:saturate(.3)}
.node.locked .num{color:#3c4550;opacity:.6}
.node .lk{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;background:url(/icons/ui/p-lock.webp) center/contain no-repeat}
.node.treasure{border-color:#FFD76A;box-shadow:0 0 0 4px rgba(255,215,106,.55),0 5px 0 rgba(0,0,0,.3)}
.node.climax{width:70px;height:70px;margin:-35px 0 0 -35px}
.node .st{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);display:flex;gap:1px}
.node .st i{width:18px;height:18px;background:url(images/star.webp) center/contain no-repeat;filter:grayscale(1) brightness(.6)}
.node .st i:nth-child(2){margin-top:3px}
.node .st i.on{filter:none}
.mapOwl{position:absolute;left:0;top:0;width:62px;z-index:3;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.btn.small{min-height:48px;font-size:17px;background:#fff7e0;color:#23492F;border:2px solid #E8B84B;box-shadow:0 3px 0 #b88b2a}
.btn.small.coral{background:linear-gradient(#F58E73,#EE6C4D);color:#fff;border:0}
#modal .typed{margin:10px auto 4px;min-height:44px;width:140px;border-radius:14px;background:#fff;border:2px solid #E8B84B;font-size:28px;font-weight:800;letter-spacing:6px;line-height:40px}
#modal .wrong{color:#c24a2f;font-weight:700;font-size:15px}
#modal .pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px auto 0;width:min(76vw,260px);direction:ltr}
#modal .key{min-height:58px;border-radius:16px;border:2px solid #E8B84B;background:#fff;font-size:26px;font-weight:800;color:#23492F;cursor:pointer}
#modal .row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 4px;font-weight:800;font-size:17px}
#modal .row.col{flex-direction:column;align-items:stretch}
#modal .tog{width:62px;height:34px;border-radius:17px;border:0;background:#c9cfd6;position:relative;cursor:pointer}
#modal .tog i{position:absolute;top:3px;right:3px;width:28px;height:28px;border-radius:50%;background:#fff;transition:right .2s}
#modal .tog.on{background:#2E5B3E}
#modal .tog.on i{right:31px}
#modal .seg{display:flex;gap:6px}
#modal .seg button{flex:1;min-height:44px;border-radius:12px;border:2px solid #E8B84B;background:#fff;font-weight:800;font-size:14px;color:#23492F}
#modal .seg button.on{background:#2E5B3E;color:#fff;border-color:#2E5B3E}
#modal .facts{margin:12px 0;font-weight:700;font-size:16px;line-height:1.9;color:#5b4a1f}
/* دورات العوالم: كل دورة بوقت من اليوم يلوّنه الكود (القسم ٨) */
#bg::after,.mapSec::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
[data-time="sunset"]::after{background:linear-gradient(180deg,rgba(255,122,64,.42),rgba(150,52,120,.34));mix-blend-mode:multiply;opacity:1}
[data-time="night"]::after{background:linear-gradient(180deg,rgba(12,22,78,.66),rgba(26,12,60,.58));mix-blend-mode:multiply;opacity:1}
[data-time="dawn"]::after{background:linear-gradient(180deg,rgba(255,176,206,.42),rgba(160,128,230,.30));mix-blend-mode:soft-light;opacity:1}
/* ميزات الجذب (القسم ٩) */
.deco{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 56px);height:90px;pointer-events:none;z-index:3}
#scr-start .deco{top:env(safe-area-inset-top,0px)}
.deco svg{width:100%;height:100%;overflow:visible}
.deco .glowL{animation:glowL 1.8s ease-in-out infinite}
@keyframes glowL{50%{fill:#FFE58A;filter:drop-shadow(0 0 5px #FFD76A)}}
.deco .tw{animation:tw 1.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.2}}
#xArrow{position:absolute;z-index:13;display:none;pointer-events:none;animation:arw .7s ease-in-out infinite alternate;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
#xArrow.up svg{transform:rotate(180deg)}
@keyframes arw{to{margin-top:10px}}
#owlSay{position:absolute;z-index:6;right:78px;top:calc(env(safe-area-inset-top,0px) + 64px);max-width:62%;display:none;background:#FBF3DF;border:3px solid #E8B84B;border-radius:18px;padding:6px 12px;font-weight:800;font-size:16px;color:#23492F;box-shadow:0 4px 0 #b88b2a}
#owlSay.on{display:block}
#stSay{position:absolute;left:24px;right:24px;top:calc(env(safe-area-inset-top,0px) + 29%);text-align:center;font-weight:800;font-size:18px;color:#23492F;background:rgba(251,243,223,.92);border:3px solid #E8B84B;border-radius:18px;padding:6px 12px;display:none}
#stSay.on{display:block}
.stBack{position:absolute;left:10px;top:calc(env(safe-area-inset-top,0px) + 10px);z-index:4;border:0;background:none;padding:0;cursor:pointer}
#modal .owlLine{margin-top:6px;font-weight:700;font-size:16px;color:#5b4a1f}
#modal .occ{color:#9a6a00}
#modal .cab{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
#modal .cabItem{background:#fff7e0;border:2px solid #E8B84B;border-radius:16px;padding:8px 2px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:#23492F}
#modal .cabItem:last-child{grid-column:2}
#modal .cabItem .ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#16304f}
#modal .cabItem .ring img{width:44px;height:44px;object-fit:contain}
#modal .cabItem b{font-size:17px}
#modal .cabItem small{font-size:12px;font-weight:700;opacity:.8}
#modal .cabItem i{font-style:normal;font-size:12px;font-weight:800;color:#9a6a00}
.fr0{border:3px solid #9aa8b8}
.fr1{border:4px solid #CD7F32;box-shadow:0 0 0 2px #7a4213,0 0 10px rgba(205,127,50,.8)}
.fr2{border:4px solid #D5DCE4;box-shadow:0 0 0 2px #7c8591,0 0 12px rgba(220,228,236,.9)}
.fr3{border:4px solid #F5C518;box-shadow:0 0 0 2px #9a6a00,0 0 14px rgba(245,197,24,.95)}
.fr4{border:4px solid #BFF4FF;box-shadow:0 0 0 2px #3aa7d6,0 0 18px rgba(150,230,255,1);animation:dia 1.6s ease-in-out infinite}
@keyframes dia{50%{box-shadow:0 0 0 2px #fff,0 0 26px rgba(190,245,255,1)}}
#modal .trBig{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:#16304f;margin:0 auto 8px}
#modal .trBig img{width:86px;height:86px;object-fit:contain}
#modal .lampBig{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto 6px;filter:drop-shadow(0 0 14px rgba(255,210,90,.9))}
#modal .owlbig.dance{animation:dance .5s ease-in-out infinite alternate}
@keyframes dance{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(8deg) translateY(-6px)}}
.meteor{position:absolute;left:0;top:0;width:130px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff);transform-origin:right center;rotate:-28deg;z-index:3;pointer-events:none}
.fstar{position:absolute;left:0;top:0;width:18px;height:18px;background:url(images/star.webp) center/contain no-repeat;z-index:3;pointer-events:none}
/* شريط النجوم فوق الشريط العلوي أثناء احتفال الحركات الباقية */
#starbar{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:11;display:none;justify-content:center;gap:14px;pointer-events:none}
#starbar.on{display:flex}
#starbar img{width:70px;height:70px;filter:grayscale(1) brightness(.6);opacity:.75}
#starbar img:nth-child(2){width:86px;height:86px;margin-top:-10px}
#starbar img.on{filter:drop-shadow(0 0 10px rgba(255,210,90,.95));opacity:1}
/* التعليم: يد الإرشاد فوق اللوحة، والبومة وفقاعتها تحتها فلا تغطي اللوحة */
#tut{position:absolute;inset:0;z-index:9;display:none;pointer-events:none}
#tut.on{display:block}
#tut .hand{position:absolute;width:74px;height:74px;left:0;top:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
#tut .owlrow{position:absolute;left:10px;right:10px;display:flex;align-items:center;gap:8px;direction:rtl}
#tut .owlrow img{width:74px;height:64px;object-fit:contain;flex:none}
#tut .owlrow p{flex:1;background:#FBF3DF;border:3px solid #E8B84B;border-radius:18px;padding:8px 12px;font-weight:800;font-size:17px;color:#23492F;box-shadow:0 4px 0 #b88b2a}
@media (prefers-reduced-motion:reduce){#moves.low{animation:none}}

/* شريطا الخريطة على طريقة كاندي كراش بطابع اللعبة (قرار محمد ٢٧ أيلول ٢٠٢٦): يتمددان مع عرض الشاشة وزواياهما ثابتة
   (تُقسم صورتاهما إلى طرفين ثابتين ووسط يتمدد)، داخل المنطقتين الآمنتين أعلى الشاشة وأسفلها. --sat و--sab لتجربة الهواتف ذات الثلمة */
.kzTop,.kzBot{position:absolute;z-index:4;left:6px;right:6px;display:flex;align-items:center;box-sizing:border-box;pointer-events:none}
.kzTop>*,.kzBot>*{pointer-events:auto}
.kzTop::before,.kzBot::before{content:'';position:absolute;inset:0;z-index:-1;border-style:solid;filter:drop-shadow(0 4px 6px rgba(10,40,80,.35))}
.kzTop{top:calc(max(env(safe-area-inset-top,0px),var(--sat,0px)) + 4px);height:76px;gap:6px;padding:15px 18px 9px}
.kzTop::before{border-width:0 calc(76px*225/222) 0 calc(76px*130/222);border-image:url(images/ui/bar-top.webp) 0 225 0 130 fill stretch}
.kzBot{bottom:calc(max(env(safe-area-inset-bottom,0px),var(--sab,0px)) + 4px);height:68px;justify-content:space-evenly;padding:11px 22px 7px}
.kzBot::before{border-width:0 calc(68px*110/166) 0 calc(68px*110/166);border-image:url(images/ui/bar-bottom.webp) 0 110 0 110 fill stretch}
.kzBot.empty{display:none}
.rbtn{flex:none;width:50px;height:50px;border:0;padding:0;background:url(images/ui/round.webp) center/contain no-repeat;display:grid;place-items:center;cursor:pointer;filter:drop-shadow(0 2px 3px rgba(10,40,80,.35))}
.rbtn img{width:25px;height:auto;margin-inline-end:2px}
.rbtn:active,.tabc:active{transform:scale(.93)}
.cap{display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;height:34px;min-width:58px;justify-content:center;padding:0 4px;border-style:solid;border-width:0 17px;border-image:url(images/ui/capsule.webp) 0 61 0 61 fill stretch;font-weight:800;font-size:16px;color:#1B4F7E;white-space:nowrap}
.kidC{position:absolute;left:50%;top:7px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;max-width:calc(100% - 240px)}
.kzTop .namebox{display:flex;flex-direction:column;align-items:center;margin-top:var(--kzNameY,3px);left:var(--kzNameX,0px);max-width:100%;position:relative}
.kzTop .namebox .cap{display:block;height:24px;line-height:24px;border-width:0 12px;padding:0 3px;font-size:var(--kzNameSize,13.5px);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mtitle{font-size:12px;font-weight:800;color:#FFE58A;text-shadow:0 1px 2px rgba(0,0,0,.75);padding:0 6px;white-space:nowrap}
.kzTop .rbtn.snd{margin-inline-start:auto}   /* زر الرجوع أعلى اليسار وبجانبه زر الأصوات، وعداد الأدوات على اليمين (قاعدة التطبيق، طلب محمد ٣٠ أيلول ٢٠٢٦) */
.kzTop .tools img{width:24px;height:24px;object-fit:contain}
.kidPic{position:relative;flex:none;width:var(--kzPicSize,54px);height:var(--kzPicSize,54px);border-radius:15px;overflow:hidden;background:linear-gradient(#EAF7FF,#BFE5FF);box-shadow:0 0 0 3px #6CC6F5,0 0 0 5px #1F5E9E,0 5px 10px rgba(10,30,60,.45);pointer-events:none}
.kidPic img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:translate(var(--kzPicX,2%),var(--kzPicY,0%)) scale(var(--kzPicZoom,0.82));transform-origin:50% 50%}   /* الصورة في إطارها بقيم محمد من ورشة الشريط (٣٠ أيلول ٢٠٢٦): تصغير ٠٫٨٢ وإزاحة ٢٪ */
.kidPic.photo img{object-position:50% 30%}
.tabc{position:relative;flex:none;width:96px;height:56px;border:0;padding:0;background:url(images/ui/tab.webp) center/100% 100% no-repeat;display:grid;place-items:center;cursor:pointer}
.tabc.on{background-image:url(images/ui/tab-on.webp);background-size:104% 116%}
.tabc img{position:relative;width:40px;height:40px;object-fit:contain;margin-top:-2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.lampW{--fill:0}
.lampW .glow{position:absolute;left:24px;right:24px;top:4px;bottom:10px;border-radius:40%;background:radial-gradient(circle at 50% 55%,rgba(255,236,150,.95),rgba(255,190,60,.5) 45%,rgba(255,160,40,0) 72%);opacity:calc(.12 + var(--fill)*.88);pointer-events:none}
.lampW b{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);height:24px;min-width:0;font-size:12.5px;border-width:0 12px;padding:0 2px}
.rbtn.snd svg{display:block}
.rbtn.snd .off,.rbtn.snd.off .on{display:none}
.rbtn.snd.off .off{display:block}
.tabc.home{display:none}
.tabc.home.show{display:grid}
.tabc.home svg{position:relative;margin-top:-6px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .25s}
.tabc.home.up svg{transform:rotate(180deg)}
.tabc.home b{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);height:24px;min-width:0;font-size:12.5px;border-width:0 12px;padding:0 2px}