/* لعبة الذاكرة: الشكل. الواجهة من اليمين إلى اليسار، واللوحة وحدها من اليسار (الإحداثيات لا تُعكس، القسم ١٥).
   الألوان والسماء والمربعات والانقلاب من اللعبة القديمة كما هي، والأزرار بنمط «كنوز الجليد» (منسوخة من kunuz/style.css). */
:root{
  --cream:#FBF3DF;--cream-light:#FDF8EC;--green-dark:#23492F;--green-mid:#2E5B3E;--green-grass:#7FB069;
  --coral:#EE6C4D;--gold:#E8B84B;--shadow:0 6px 18px rgba(35,73,47,.18);
  --c1:#FFF177;--c2:#FC8383;--c3:#FFC745;--c4:#D7FF82;--c5:#C2D5FF;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:'Baloo Bhaijaan 2','Segoe UI',Tahoma,sans-serif;color:var(--green-dark);background:#8FC4F2}
button{font-family:inherit;touch-action:manipulation}
img{-webkit-user-drag:none;user-select:none}

/* ===== السماء الحية (اللعبة القديمة) ===== */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,#6BBBF3 0%,#6EBEF6 25%,#99D5FA 50%,#C7EAFC 75%,#CDEEFA 100%)}
#sun,#sunGlow{position:absolute;left:8%;top:9%;width:min(27vw,122px)}
#sun{display:block;animation:sunPulse 6s ease-in-out infinite}
#sunGlow{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,226,155,.6),rgba(255,226,155,0) 68%);animation:glowPulse 6s ease-in-out infinite}
@keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes glowPulse{0%,100%{transform:scale(1.85);opacity:.5}50%{transform:scale(2.2);opacity:.85}}
.cloud{position:absolute;left:100%;will-change:transform;animation:drift linear infinite;pointer-events:none}
.cloud img{width:100%;display:block}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 130%))}}

/* ===== الشاشات ===== */
#app{position:fixed;inset:0;z-index:1}
.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px calc(env(safe-area-inset-bottom,0px) + 12px)}
.screen.show{display:flex}
body.home #bg{visibility:hidden}

/* ===== الأزرار (نمط كنوز الجليد) ===== */
.btn{min-height:62px;border:0;border-radius:22px;padding:0 22px;font-size:24px;font-weight:800;line-height:1.15;color:#fff;cursor:pointer;
  position:relative;overflow:hidden;white-space:nowrap;box-shadow:0 5px 0 rgba(0,0,0,.28),0 8px 16px rgba(0,0,0,.2);transition:scale .45s cubic-bezier(.3,2,.55,1)}
.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));pointer-events:none}
.btn:active,.btn.down{scale:.9;transition:scale .08s ease}
.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}
.btn.cream{background:linear-gradient(#FFFDF6,#F3E7C6);color:var(--green-dark);font-size:19px;min-height:52px;box-shadow:0 4px 0 rgba(35,73,47,.22),0 6px 14px rgba(35,73,47,.16)}
.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 1 0;min-width:0;font-size:18px;padding:0 10px}

/* ===== شاشة البداية (كما في اللعبة القديمة) ===== */
#scrHome{padding:0;overflow:hidden}
#scrHome .homeArt{position:absolute;inset:0;background:#8FC4F2 url(start.webp) center top/cover no-repeat}
.homeTitle{position:absolute;left:0;right:0;top:max(4.6%,calc(env(safe-area-inset-top,0px) + 6px));margin:0;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))}
.homeTitle::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}
.homeBtns{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}
@media (min-aspect-ratio:1/2) and (max-aspect-ratio:3/5){#scrHome .homeArt{background-position:center 35%}.homeBtns{bottom:calc(env(safe-area-inset-bottom,0px) + 4%)}}

/* ===== شاشة المستويات (قرار محمد): شبكة مربعات مرقّمة على طريقة ألعاب الذاكرة، في أقسام برأس كل منها ميداليته، تُتصفح بالتمرير.
   في كل مربع رقمه ونجومه، والمقفل عليه قفل، ومستوى الميدالية بالنجمة الذهبية على زاوية مربعه ===== */
#scrLevels{padding:0}
.lvTop{position:absolute;left:0;right:0;top:calc(var(--safeT, env(safe-area-inset-top,0px)) + 10px);z-index:5;display:flex;align-items:center;gap:8px;
  padding-inline-start:12px;padding-inline-end:66px;pointer-events:none}
.lvTop>*{pointer-events:auto;flex:none}
#lvName{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;line-height:28px}
.pill{background:var(--cream);border-radius:999px;padding:8px 16px;font-size:19px;font-weight:800;color:var(--green-dark);box-shadow:0 4px 12px rgba(35,73,47,.18);
  display:flex;align-items:center;gap:7px;white-space:nowrap;min-height:44px}
.pill img{width:22px;height:22px}
/* --safeT و--safeB من mtak.css حين تُدار الصفحة في الوضع المستعرض، وإلا المنطقة الآمنة نفسها */
#lvScroll{position:absolute;left:0;right:0;top:calc(var(--safeT, env(safe-area-inset-top,0px)) + 64px);bottom:calc(var(--safeB, env(safe-area-inset-bottom,0px)) + 84px);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 12px 18px}
#lvScroll::-webkit-scrollbar{display:none}
.wSec{width:min(100%,460px);margin:0 auto 16px;border-radius:24px;padding:10px 10px 14px;border:3px solid rgba(255,255,255,.75);box-shadow:0 6px 18px rgba(35,73,47,.16)}
.wSec.w1{background:linear-gradient(180deg,rgba(142,208,247,.92),rgba(221,242,252,.92))}
.wSec.w2{background:linear-gradient(180deg,rgba(247,201,133,.94),rgba(253,239,208,.94))}
.wSec.w3{background:linear-gradient(180deg,rgba(43,52,110,.94),rgba(123,111,176,.94))}
/* رأس القسم (قرار محمد ١٨ تشرين الأول ٢٠٢٦): صورة ميداليته المنقوش عليها «يامهدي» في الوسط، والرابع (بعد ٤٥) medal-2 نفسها
   بتلوين أزرق جليدي بالفلتر، وتحتها عدّاد نجومه نصاً في شارة بلون معدن القسم وظل خفيف («١٥ من ٤٥»، و«٦٠ نجمة» في الرابع) */
.wHead{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.6vw,6px);margin:-2px 4px 12px}
.secMedal{width:clamp(62px,19vw,74px)}   /* الصورة والتلوين الجليدي في .medalImg */
.wStars{--a:#7a4213;--b:#E9B07A;--c:#FBE3C8;display:block;padding:clamp(5px,1.6vw,6px) clamp(16px,5vw,20px);border-radius:999px;
  background:linear-gradient(180deg,var(--c),var(--b));border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1.5px var(--a),0 3px 7px rgba(25,30,50,.25)}
.wStars em{display:block;font-style:normal;font-size:clamp(15px,4.6vw,17px);font-weight:800;line-height:1.15;color:#2f1a06;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.wSec.w2 .wStars{--a:#6f7a86;--b:#C9D2DC;--c:#F4F7FA}
.wSec.w3 .wStars{--a:#9a6a00;--b:#F2C640;--c:#FFF0B0}
.wSec.w4 .wStars{--a:#2f8fbf;--b:#9EE3F7;--c:#E6FAFF}
/* نص لقارئ الشاشة وحده */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lvGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lv{position:relative;aspect-ratio:1;border-radius:18px;border:3px solid var(--gold);background:var(--cream-light);padding:0;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--green-dark);box-shadow:0 4px 0 #b88b2a,0 6px 12px rgba(0,0,0,.14);min-width:0}
.lv .num{font-size:clamp(19px,6vw,27px);font-weight:800;line-height:1}
.lv .st{display:flex;gap:1px;height:14px}
.lv .st i{width:13px;height:13px;display:block;background:url(/icons/ui/star-glow.webp) no-repeat center/contain;filter:grayscale(1) opacity(.35)}
.lv .st i.on{filter:none}
.lv.played{background:#FFF7E0}
.lv.cur{border-color:#4E8E63;background:#fff;animation:curPulse 1.6s ease-in-out infinite}
@keyframes curPulse{0%,100%{box-shadow:0 4px 0 #2E5B3E,0 0 0 0 rgba(78,142,99,.75)}50%{box-shadow:0 4px 0 #2E5B3E,0 0 0 9px rgba(78,142,99,0)}}
.lv.locked{background:#E9E2CF;border-color:#B9AD8C;box-shadow:0 3px 0 #8f8466;color:#8f8466}
.lv.locked .num{font-size:clamp(13px,3.8vw,16px);opacity:.75}
.lv .lock{display:none;width:44%;height:44%;fill:#8f8466}
.lv.locked .lock{display:block}
.lv.locked .st{display:none}
.lv .tag{position:absolute;top:-9px;inset-inline-end:-9px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;pointer-events:none;z-index:1}
/* نجمة مستوى الميدالية: تكبر مع الشاشة (٢٠ في ٣٢٠ إلى ٢٤ من ٣٩٠) وتبتعد عن الزاوية قليلاً، فلا تمس رقم أي مستوى حتى ١٠٣٥
   (قيس تداخلها مع الرقم بالبكسل في كل مربعات الميدالية من ٣٢٠ إلى ٧٦٨ في Chromium وWebKit: صفر) */
.lv .tag.boss{--s:clamp(20px,calc(5.7vw + 1.8px),24px);--o:clamp(13px,calc(3.3vw + 2.5px),14px);background:none;width:var(--s);height:var(--s);top:calc(-1 * var(--o));inset-inline-end:calc(-1 * var(--o))}
.lv.locked .tag .lvStar{filter:grayscale(1) opacity(.6)}
.lv.shake{animation:nudge .35s ease-in-out}
.lv:active{transform:translateY(2px) scale(.95)}
.lv.want{border-color:var(--gold);background:#fff;animation:wantGlow 1.4s ease-in-out infinite;z-index:1}   /* المستوى الذي اختاره الطفل قبل تذكير الراحة: حلقة ذهبية لا تشبه المستوى الحالي */
@keyframes wantGlow{0%,100%{box-shadow:0 4px 0 #b88b2a,0 0 0 4px #fff,0 0 14px 6px rgba(255,200,60,.9)}50%{box-shadow:0 4px 0 #b88b2a,0 0 0 4px #fff,0 0 26px 12px rgba(255,214,90,1)}}
@media (max-width:300px){.lvGrid{grid-template-columns:repeat(4,1fr)}}
/* «رحلات النجوم» (المرحلة ٤): سماء ليل بنجوم صغيرة (CSS وحده)، والمربعات عشرة عشرة بلا عنوان ولا عدّاد (قرار محمد ١٨ تشرين الأول ٢٠٢٦) */
.wSec.w4{background:radial-gradient(circle at 12% 3%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 80% 2%,#FFF1A8 0 2px,transparent 3px),
  radial-gradient(circle at 46% 1.5%,#fff 0 1.2px,transparent 2px),radial-gradient(circle at 93% 6%,#fff 0 1.2px,transparent 2px),
  linear-gradient(180deg,rgba(16,22,58,.96),rgba(58,44,110,.96))}
.jBox+.jBox{margin-top:8px}
.lvBot{position:absolute;left:0;right:0;bottom:calc(var(--safeB, env(safe-area-inset-bottom,0px)) + 12px);z-index:5;display:flex;justify-content:center;padding:0 16px}
.lvBot .btn{min-height:58px;font-size:20px;width:min(86vw,360px)}

/* ===== اللعب ===== */
#scrPlay{gap:8px}
.playTop{display:flex;align-items:center;gap:10px;padding-inline-end:58px;min-height:48px}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(251,243,223,.75);box-shadow:inset 0 1px 3px rgba(35,73,47,.25);display:block;transition:background .3s ease}
.dots i.on{background:var(--gold);box-shadow:0 0 6px rgba(232,184,75,.9)}
.dots i.now{background:#fff;box-shadow:0 0 0 2px var(--gold)}
#boardWrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#board{display:grid;justify-content:center;align-content:center;direction:ltr;gap:var(--gap,8px)}
#board.locked{pointer-events:none}
.tile{width:var(--tile);height:var(--tile);position:relative;border-radius:calc(var(--tile) * .22);background:var(--cream-light);border:3px solid rgba(35,73,47,.16);
  box-shadow:0 4px 0 rgba(35,73,47,.14),0 6px 14px rgba(35,73,47,.14);overflow:hidden;transition:background-color .18s ease,border-color .18s ease;cursor:pointer}
.tile .sym{position:absolute;inset:0;background-size:cover;background-position:center;border-radius:inherit;opacity:0;transition:inset .18s ease,border-radius .18s ease}
.tile.reveal .sym{opacity:1}
.tile.correct{background:var(--green-grass);border-color:#5E9A4C}
.tile.correct .sym{inset:9%;border-radius:calc(var(--tile) * .15);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.tile.wrong{background:var(--coral);border-color:#D0523A}
.tile.missed{border:3px dashed var(--gold);background:#FFF7E0}
.tile.missed .sym{opacity:.85;inset:12%;border-radius:calc(var(--tile) * .15)}
.tile.guest,.tile.guestHit,.tile.guestShow{overflow:visible;border-color:transparent}
/* إطار الضيف خط متقطع طويل، وإطار الرمز الفائت (.missed، كما في العالم الأول) متقطع قصير ذهبي: يختلفان بالشكل لا باللون وحده،
   فيميّز بينهما من عنده عمى ألوان (قرار محمد على صور المرحلة ٣). رسم SVG لأن dashed في CSS لا يُطال طول خطه، وpathLength يوزّع
   الخطوط بالتساوي بأي حجم، ونصف الخط خارج حدود الصورة فيبقى المرئي نصف stroke-width في مكان الحد */
.tile.guest::before,.tile.guestHit::before,.tile.guestShow::before{content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='22%25' fill='none' stroke='%237d8fa3' stroke-width='6' stroke-dasharray='6 3' pathLength='100'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.tile.ask{box-shadow:0 0 0 4px #fff,0 0 18px 6px rgba(255,214,90,.95)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.14)}70%{transform:scale(.97)}100%{transform:scale(1)}}
.tile.pop{animation:pop .34s ease-out}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.tile.nudge{animation:nudge .22s ease-in-out}
@keyframes flipHide{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
@keyframes symFade{0%,49.9%{opacity:1}50%,100%{opacity:0}}
.tile.flip{animation:flipHide .44s ease-in-out forwards;animation-delay:var(--d,0ms)}
.tile.flip .sym{animation:symFade .44s linear forwards;animation-delay:var(--d,0ms)}
.playFoot{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-start}
#bmSkip{visibility:hidden;min-height:50px;font-size:18px;padding:0 22px}
#bmSkip.on{visibility:visible}
/* البومة في أسفل شاشة اللعب، وفقاعتها بجانبها: العبارة الوحيدة على الشاشة (قصيرة لأن الصغير لا يقرأ) */
/* ارتفاع ثابت: سطر واحد أو سطران في الفقاعة لا يغيّران مساحة اللوحة */
.owlRow{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;max-width:420px;height:96px;flex:none}
#owl{flex:none;width:90px;height:80px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
#owl img{width:100%;height:100%;object-fit:contain}
#owl.hop{transform:translateY(-10px) scale(1.06)}
#owlSay{flex:0 1 auto;margin-bottom:26px;background:#fff;border:3px solid var(--gold);border-radius:18px 18px 18px 4px;padding:6px 12px;font-size:18px;font-weight:800;
  line-height:1.45;color:var(--green-dark);box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .25s ease,transform .25s ease;
  display:flex;align-items:center;gap:6px;min-height:40px;max-height:70px;overflow:hidden}
#owlSay.on{opacity:1;transform:none}
#owlSay img{width:34px;height:34px;border-radius:8px;flex:none}
#hand{position:absolute;width:64px;height:64px;z-index:7;pointer-events:none;display:none;animation:handTap 1s ease-in-out infinite}
#hand.on{display:block}
@keyframes handTap{0%,100%{transform:translate(10px,14px)}50%{transform:translate(2px,4px) scale(.92)}}
/* مربع في النصف الأيمن: تنقلب اليد فيبقى الإصبع على المربع والكف داخل الشاشة */
#hand.flip{transform:scaleX(-1);animation-name:handTapFlip}
@keyframes handTapFlip{0%,100%{transform:translate(-10px,14px) scaleX(-1)}50%{transform:translate(-2px,4px) scaleX(-1) scale(.92)}}

/* ===== المرحلة ٣ ===== */
/* الضيوف: بطاقة فوق اللوحة قبل العرض، وكل ضيف في إطار رمادي منقّط (لا لون خطأ ولا علامة منع على صورة رمز) */
#guestCard{position:absolute;left:50%;top:50%;z-index:6;display:flex;gap:12px;align-items:center;justify-content:center;padding:14px 16px;
  background:var(--cream);border:4px solid var(--gold);border-radius:24px;box-shadow:0 10px 26px rgba(0,0,0,.25);
  opacity:0;transform:translate(-50%,-50%) scale(.88);transition:opacity .25s ease,transform .25s ease;pointer-events:none;visibility:hidden}
#guestCard.on{opacity:1;transform:translate(-50%,-50%);visibility:visible}
.gRing{display:block;width:min(21vw,88px);height:min(21vw,88px);border:4px solid transparent;border-radius:24%;padding:5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='24%25' fill='none' stroke='%237d8fa3' stroke-width='8' stroke-dasharray='6 3' pathLength='100'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat border-box}   /* ارتفاع صريح: سفاري لا يحسبه من aspect-ratio هنا فيقص الصورة */
.gRing img{width:100%;height:100%;display:block;border-radius:18%;object-fit:cover}
#owlSay img.g{width:30px;height:30px;border:2px solid transparent;border-radius:9px;padding:1px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='30%25' fill='none' stroke='%237d8fa3' stroke-width='4' stroke-dasharray='6 3' pathLength='100'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat border-box}
.tile.guestHit{background:#EEF1F5}
.tile.guestShow .sym{opacity:.5}
/* «أي رمز كان هنا؟»: المربع المسؤول عنه يضيء وعليه «؟»، والخيارات صور في مكان زر «حفظناها» */
.tile.q::after{content:"؟";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--tile) * .55);font-weight:800;color:#9a6a00;line-height:1}
.playFoot{position:relative}
#choices{position:absolute;top:0;left:0;right:0;height:50px;display:none;align-items:center;justify-content:center;gap:16px;z-index:3}
#choices.on{display:flex}
.playFoot.tall #bmSkip{min-height:72px}
.playFoot.tall #choices{height:72px}
.choice{width:50px;height:50px;padding:3px;border:3px solid var(--gold);border-radius:14px;background:var(--cream-light);cursor:pointer;flex:none;
  box-shadow:0 4px 0 #b88b2a,0 6px 12px rgba(0,0,0,.16);transition:opacity .2s ease}
.playFoot.tall .choice{width:72px;height:72px;border-radius:18px}
.choice img{width:100%;height:100%;display:block;border-radius:9px;object-fit:cover}
.choice:active{transform:translateY(2px) scale(.95)}
#choices.done .choice{pointer-events:none}
.choice.right{background:var(--green-grass);border-color:#5E9A4C;animation:pop .34s ease-out}
.choice.answer{box-shadow:0 0 0 3px #fff,0 0 16px 6px rgba(255,214,90,.95)}
.choice.dim{opacity:.55}   /* لا هزّ لصورة قد تكون رمزاً مقدساً (كما في لمس الضيف) */
@keyframes choiceHint{0%,100%{transform:none}50%{transform:translateY(-6px) scale(1.06)}}
#choices.hint .choice{animation:choiceHint .9s ease-in-out 3}
/* الترتيب: الرمز الذي يضيء الآن، ورقمه في زاوية المربع (اللوحة من اليسار، القسم ١٥) */
.tile.lit{border-color:var(--gold);box-shadow:0 0 0 4px #fff,0 0 18px 6px rgba(255,214,90,.95)}
.tile[data-o]{overflow:visible}   /* الرقم على زاوية المربع لا على الصورة (قد تكون رمزاً مقدساً)؛ و.sym تقص زواياها بنفسها */
.tile[data-o]::after{content:attr(data-o);position:absolute;top:calc(var(--tile) * -.1);right:calc(var(--tile) * -.1);z-index:2;min-width:calc(var(--tile) * .3);height:calc(var(--tile) * .3);padding:0 2px;
  display:grid;place-items:center;border-radius:999px;background:var(--gold);color:#3a2208;font-weight:800;font-size:max(13px,calc(var(--tile) * .22));line-height:1;
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
/* ===== مستويات الميدالية (قرار محمد ١٨ تشرين الأول ٢٠٢٦): النجمة الذهبية على مربعها وبجانب رقمه، وصورة ميدالية قسمه في نافذة نتيجته
   (.medalImg، ومعها رؤوس الأقسام): medal-1 و-2 و-3، والقسم الرابع medal-2 بتلوين أزرق جليدي ===== */
.medalImg{display:block;height:auto;aspect-ratio:1;filter:drop-shadow(0 3px 4px rgba(35,40,60,.3))}
.medalImg.m4{filter:grayscale(1) sepia(1) hue-rotate(155deg) saturate(2.4) brightness(1.18) contrast(.95) drop-shadow(0 0 6px rgba(150,230,255,.75)) drop-shadow(0 3px 4px rgba(10,20,50,.4))}
.sheet .medalImg.medalBig{width:84px;margin:-2px auto 6px}
.lvStar{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(90,60,0,.45))}
#lvPill .lvStar{display:inline-block;width:28px;height:28px;flex:none;vertical-align:middle}
/* ٣٢٠ نقطة: النقطة الخامسة لا تقع تحت زر الرجوع، ولو كان رقم مستوى الميدالية من أربعة أرقام (حتى ١٠٣٥) */
@media (max-width:340px){.playTop{gap:6px}.dots{gap:3px}.dots i{width:12px;height:12px} #lvPill{font-size:17px;padding:8px 11px;gap:5px} #lvPill .lvStar{width:22px;height:22px}}

/* ===== المرحلة ٤: وضع السرعة ===== */
.ico{display:inline-block;width:28px;height:28px;flex:none;vertical-align:middle}
.ico.speed path{fill:#5B9BE0;stroke:#2b5f99;stroke-width:.8}
.ico.speed .ln{fill:none;stroke:#5B9BE0;stroke-width:1.6;stroke-linecap:round}
/* شريط وضع السرعة: في مكان زر «حفظناها» فلا تتغير مساحة اللوحة، يمتلئ من اليمين ثم يبهت */
#speedBar{position:absolute;top:20px;left:50%;width:min(64vw,260px);height:10px;transform:translateX(-50%);z-index:2;display:none;border-radius:999px;overflow:hidden;
  background:rgba(251,243,223,.7);box-shadow:inset 0 1px 3px rgba(35,73,47,.25);transition:opacity .8s ease}
#speedBar.on{display:block}
#speedBar i{position:absolute;top:0;bottom:0;right:0;width:0;display:block;border-radius:inherit;background:linear-gradient(90deg,#F6D27A,#E8B84B);animation:barFill linear forwards}
#speedBar.held i{animation-play-state:paused}
#speedBar.full{opacity:0}
@keyframes barFill{to{width:100%}}
/* نافذة النتيجة: «ريشة سرعة!» و«+١» تحت النجوم */
.featherWon{display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px;font-weight:800;color:#2b5f99;margin:-2px 0 4px;opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .3s ease}
.featherWon.on{opacity:1;transform:none}
.featherWon .ico{width:34px;height:34px}
.featherWon span{background:var(--gold);color:#3a2208;border-radius:999px;padding:0 10px;font-size:16px}
/* أعلى الألبوم: «ريش السرعة» */
.featherLine{display:flex;align-items:center;justify-content:center;gap:6px;font-size:16px;margin:0 0 8px;color:#2b5f99}
.featherLine .ico{width:28px;height:28px}
/* تذكير الراحة: البومة النائمة أكبر، تتنفس ببطء */
.sheet .owlBig.rest{width:150px;height:130px;animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04) translateY(2px)}}

/* ===== النوافذ (.overlay.show تخفي زر الرجوع الموحد في mtak.css) ===== */
.overlay{position:fixed;inset:0;z-index:20;background:rgba(35,73,47,.45);display:none;align-items:center;justify-content:center;padding:18px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.overlay.show{display:flex}
/* في الوضع المستعرض تُدار الصفحة كلها (mtak.css)، فطول الصفحة هو عرض الشاشة */
html.mtak-rot90 .sheet,html.mtak-rot270 .sheet{max-height:88vw}
.sheet{background:var(--cream);border:4px solid var(--gold);border-radius:28px;padding:22px 18px 18px;width:min(92vw,400px);max-height:88vh;overflow-y:auto;
  text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.28);animation:rise .28s ease-out;position:relative}
@keyframes rise{from{transform:translateY(26px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-size:28px;margin-bottom:10px;color:var(--green-dark)}
.sheet .txt{font-size:18px;line-height:1.75;font-weight:600;margin:6px 0 14px}
.sheet .btns{display:flex;flex-direction:column;gap:10px;margin-top:14px;align-items:stretch}
.sheet .owlBig{width:110px;height:96px;object-fit:contain;margin:-6px auto 2px;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.steps{list-style:none;text-align:right;display:flex;flex-direction:column;gap:9px;margin:6px 0 4px}
.steps li{background:var(--cream-light);border-radius:16px;padding:10px 14px;font-size:18px;line-height:1.55;font-weight:700}
.bnList{list-style:none;margin:12px 0 2px;padding:0;display:flex;flex-direction:column;gap:10px;text-align:right}
.bnList li{display:flex;align-items:flex-start;gap:9px;font-size:16.5px;line-height:1.6;font-weight:700;color:#23492F}
.bnStar{flex:none;color:#E8B84B;text-shadow:0 0 6px rgba(232,184,75,.7);font-size:18px;padding-top:1px}
.bnTx{flex:1;min-width:0}
.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}
.stars-row{display:flex;justify-content:center;gap:12px;margin:6px 0 8px}
.star{width:60px;height:60px;fill:rgba(35,73,47,.14);transform:scale(.6);opacity:.55}
.star.on{fill:var(--gold);animation:starIn .45s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes starIn{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.2) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.owlLine{font-size:17px;font-weight:700;color:#5b4a1f;min-height:26px}

/* ===== البطاقات (قرار محمد ١٨ تشرين الأول ٢٠٢٦): إطار واحد ثابت للمفتوحة، ذهبي هادئ بلا ترقية، والمقفلة باهتة بقفل ===== */
.cardNext{font-size:16px;font-weight:800;color:#7a5410;margin:0 0 8px}
.cardGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 4px}
.cardTile{position:relative;background:var(--cream-light);border:4px solid #E3B53A;border-radius:16px;padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;color:var(--green-dark);font-family:inherit;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #B8860B,0 4px 10px rgba(122,84,16,.22)}
.cardTile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.cardTile b{font-size:13.5px;line-height:1.3;min-height:2.6em;display:flex;align-items:center}
.cardTile.locked{border:4px dashed #c9bc98;box-shadow:none;background:#efe8d6;cursor:default}
.cardTile.locked img{filter:grayscale(1) opacity(.22)}
.cardTile .lock{position:absolute;left:50%;top:38%;width:38%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);fill:#8f8466;filter:drop-shadow(0 1px 0 #fff)}
.cardTile.locked::after{content:'';display:block;min-height:2.6em}
.cardTile.shake{animation:nudge .35s ease-in-out}
.cardBig{perspective:900px;margin:4px auto 0;width:min(78vw,300px)}
.cardInner{position:relative;transition:transform .6s ease;transform-style:preserve-3d}
.cardBig.flipped .cardInner{transform:rotateY(180deg)}
.cardFace{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--cream-light);border:5px solid #E3B53A;border-radius:22px;padding:12px 12px 14px;
  box-shadow:0 0 0 2px #fff,0 0 0 4px #B8860B,0 0 16px rgba(245,197,24,.55)}
.cardBack{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#FFF7E0}
.cardFace img{width:46%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block;margin:0 auto 4px}
.cardFace h3{font-size:21px;margin-bottom:2px}
.cardFace p{font-size:15px;line-height:1.7;font-weight:600;text-align:right}
.sheet .btns.row{flex-direction:row;flex-wrap:wrap}
.sheet .btns.row .btn{flex:1 1 40%;min-width:0;font-size:19px;white-space:normal;padding:4px 10px}
/* ٣٢٠ نقطة: «المستوى التالي» و«إلى المستويات» كل منهما في سطر واحد (نافذة النتيجة ونافذة البطاقة) */
@media (max-width:340px){.sheet .btns.row{gap:8px}.sheet .btns.row .btn{font-size:16px;padding:4px 6px;white-space:nowrap}}
/* أزرار نافذة البطاقة تبقى ظاهرة أسفل النافذة مهما صغرت الشاشة */
.sheet .btnBar{position:sticky;bottom:-18px;margin:10px -18px -18px;padding:2px 18px 18px;background:linear-gradient(rgba(251,243,223,0),var(--cream) 14px);z-index:2}
.sheet .btnBar .btns{margin-top:10px}
/* قائمة أطول من النافذة («طريقة اللعب» في الشاشة الصغيرة): تلاشٍ أطول فوق الزر يُظهر نصف سطر، فيُعرف أن تحته المزيد */
.sheet .btnBar.more{padding-top:20px;background:linear-gradient(rgba(251,243,223,0),var(--cream) 32px)}
.cardBack h3{font-size:19px;color:#9a6a00}
.cardBack p{font-size:20px;line-height:1.7;font-weight:800;text-align:center;padding:0 6px}

/* ===== القصاصات والتنبيه ===== */
#confetti{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.cf{position:absolute;top:-24px;width:11px;height:17px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(760deg)}}
/* التنبيه أعلى الشاشة فلا يغطي أزرار النوافذ في أسفلها */
#toast{position:fixed;left:50%;top:calc(var(--safeT, env(safe-area-inset-top,0px)) + 70px);transform:translateX(-50%) translateY(-20px);z-index:25;width:max-content;opacity:0;pointer-events:none;
  background:var(--cream);border:3px solid var(--gold);border-radius:18px;padding:8px 16px;font-size:17px;font-weight:800;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  #sun,#sunGlow,.cloud,.lv.cur,#hand,#choices.hint .choice,.choice.right{animation:none}
  .lv.want,.sheet .owlBig.rest{animation:none}
  .lv.want{box-shadow:0 4px 0 #b88b2a,0 0 0 4px #fff,0 0 20px 9px rgba(255,214,90,.95)}   /* الحلقة الذهبية ثابتة بلا نبض */
  #speedBar i{animation-timing-function:steps(5,end)}   /* الشريط يمتلئ بخطوات */
  #speedBar,.featherWon{transition:none}
  #guestCard{transition:none}
  .cloud{left:auto;right:6%}
  .tile.flip,.tile.flip .sym{animation-duration:.01s}
}
@media (max-height:640px){
  .homeTitle{font-size:40px}
  .btn{font-size:22px;min-height:56px}
  .btn.big{min-height:66px;font-size:28px}
  .sheet h2{font-size:24px}
  .steps{gap:4px;margin:4px 0 2px}
  .steps li{font-size:16px;padding:5px 11px;line-height:1.35}
  #owlSay{font-size:16px}
  .owlRow{height:84px}
  #owl{width:78px;height:68px}
  #owlSay{margin-bottom:16px;max-height:64px}
}
@media (max-height:720px){
  .sheet{padding:16px 14px 14px}
  .sheet h2{font-size:22px;margin-bottom:6px}
  .sheet .btnBar{bottom:-14px;margin:8px -14px -14px;padding:2px 14px 14px}
  .cardFace{padding:8px 10px 10px}
  .cardFace img{width:32%}
  .cardFace h3{font-size:19px}
  .cardFace p{font-size:14px;line-height:1.6}
  .cardBack p{font-size:17px}
  .sheet .btns .btn{min-height:50px;font-size:18px}
}