/* الطبقة المشتركة لتحسينات الألعاب. تُحقن في صفحات الألعاب عند التقديم (انظر src/server.ts)
   فتُعدّل الألعاب من هنا ومن mtak.js دون لمس ملفاتها الكبيرة. عند كل تعديل يُرفع ?v= في server.ts. */

/* لا تحديد ولا نسخ لأي نص في الألعاب، ولا قائمة الضغط المطوّل */
html, body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* الاتجاه ثابت عمودياً: حين يُدار الهاتف ولا يمكن قفل الشاشة (آيفون) تُدار الصفحة كلها
   عكس دوران الجهاز فتبقى كما هي في يده. الصنفان يضعهما mtak.js حسب زاوية الجهاز. */
html.mtak-rot90, html.mtak-rot270{overflow:hidden}
html.mtak-rot90 body, html.mtak-rot270 body{
  position:absolute;top:0;left:0;width:100vh;height:100vw;width:100dvh;height:100dvw;
  transform-origin:top left;overflow:hidden}
html.mtak-rot90 body{transform:rotate(-90deg) translateX(-100%)}
html.mtak-rot270 body{transform:rotate(90deg) translateY(-100%)}
/* المنطقة الآمنة في الإدارة: أعلى الصفحة المُدارة هو جانب الشاشة الفعلي (يسارها في rot90 ويمينها في rot270)
   وأسفلها الجانب المقابل، ويسارها أسفل الشاشة أو أعلاها. النتوء وشريط المؤشر يقعان على الجوانب الفعلية،
   فتُؤخذ الحواف منها لئلا تقع الكبسولة والأشرطة العلوية تحت النتوء. الطريق: عبر ‎--safeT/--safeB،
   وشجرة آل محمد ولعبة الذاكرة: حوافهما مخبوزة بالقيم الرأسية فتُبدَّل هنا بعينها. */
html.mtak-rot90 body{--safeT:env(safe-area-inset-left,0px);--safeB:env(safe-area-inset-right,0px)}
html.mtak-rot270 body{--safeT:env(safe-area-inset-right,0px);--safeB:env(safe-area-inset-left,0px)}
html.mtak-rot90 #mtak-back{top:calc(env(safe-area-inset-left,0px) + 10px) !important;left:calc(env(safe-area-inset-bottom,0px) + 10px) !important}
html.mtak-rot270 #mtak-back{top:calc(env(safe-area-inset-right,0px) + 10px) !important;left:calc(env(safe-area-inset-top,0px) + 10px) !important}
html.mtak-shajara.mtak-rot90 .screen, html.mtak-buma.mtak-rot90 .screen{
  padding-top:calc(env(safe-area-inset-left,0px) + 10px) !important;padding-bottom:calc(env(safe-area-inset-right,0px) + 12px) !important}
html.mtak-shajara.mtak-rot270 .screen, html.mtak-buma.mtak-rot270 .screen{
  padding-top:calc(env(safe-area-inset-right,0px) + 10px) !important;padding-bottom:calc(env(safe-area-inset-left,0px) + 12px) !important}
html.mtak-shajara.mtak-rot90 .mini{top:calc(env(safe-area-inset-left,0px) + 12px) !important}
html.mtak-shajara.mtak-rot270 .mini{top:calc(env(safe-area-inset-right,0px) + 12px) !important}
html.mtak-shajara.mtak-rot90 body.vidok #scr-start{padding-bottom:calc(env(safe-area-inset-right,0px) + 26px) !important}
html.mtak-shajara.mtak-rot270 body.vidok #scr-start{padding-bottom:calc(env(safe-area-inset-left,0px) + 26px) !important}

/* لا زر تشغيل من المتصفح فوق أي فيديو (آيفون يُظهره حين يمنع وضع توفير الطاقة التشغيل التلقائي) */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button{display:none !important;-webkit-appearance:none;opacity:0;pointer-events:none}

/* ===== زر رجوع واحد بشكل واحد في كل الألعاب: الكبسولة الخضراء أعلى اليسار (#mtak-back في الصفحات).
   في الشاشة الرئيسية للعبة يعود إلى قائمة الألعاب، وداخل اللعبة يعود خطوة إلى الوراء بمنطق اللعبة
   نفسها (mtak.js). أزرار اللعبة الأصلية في الزوايا تُخفى، وتُزاح العناصر التي كانت تحت الكبسولة. ===== */
/* لعبة الذاكرة: البيت في شريط اللعب وزر «رجوع» في شاشة المستويات */
#screen-play #btnBack, #btnLayersBack{display:none !important}
#screen-play .topbar{padding-left:62px}
/* شجرة آل محمد: علامة ✕ في شريط اللعب وزر «رجوع» الصغير في شاشة التعلّم */
#btn-exit, #btn-lback{display:none !important}
#hud{padding-left:58px !important}
/* الطريق إلى صاحب الزمان: بيت الخريطة وزر الرجوع داخل المحطة */
#map #btnHome, #game #btnBack{display:none !important}
#map .mapTop, #game .hudTop{padding-left:66px !important}
/* حين يكون الرجوع «لا شيء» (فيديو الختام وشاشة السلام والحوارات المنبثقة) تختفي الكبسولة بدل أن تبتلع
   لمسة تتخطّى الفيديو أو تبدو زراً لا يستجيب؛ الحوارات لها أزرارها */
body:has(#finale.on) #mtak-back, body:has(#salamWrap.on) #mtak-back,
body:has(.ov.on) #mtak-back, body:has(.overlay.show) #mtak-back{opacity:0 !important;pointer-events:none !important}

/* ===== الطريق إلى صاحب الزمان: لا شاشة تحميل؛ الرئيسية وزر «لبّيك يا مهدي» فوراً.
   الضغط قبل اكتمال التجهيز يُظهر شريط تقدّم صغيراً على الزر ثم يدخل وحده حين يكتمل ===== */
#loading{display:none !important}
#home.mtak-wait #btnMuteHome{visibility:hidden}
/* فيديو الرئيسية مخفي حتى يعمل فعلاً (آيفون في وضع توفير الطاقة يرسم زر تشغيل فوق الفيديو المتوقف) */
#home #homeVid{opacity:0;pointer-events:none;transition:opacity .6s ease}
#home.mtak-vid #homeVid{opacity:1}
#home #btnStart.mtak-loading{pointer-events:none}
#home #btnStart.mtak-loading::after{content:"";position:absolute;left:14%;right:14%;bottom:7px;height:4px;border-radius:2px;background:rgba(255,255,255,.28)}
#home #btnStart.mtak-loading::before{content:"";position:absolute;left:14%;bottom:7px;height:4px;width:calc(var(--p,0) * 72%);border-radius:2px;background:#FFF8E6;transition:width .25s;z-index:1}
/* العنوان والسطر الذي تحته كلٌ في سطر واحد مهما ضاقت الشاشة */
#home .ttl{white-space:nowrap !important;font-size:min(8.8vw, 42px) !important;max-width:96vw !important}
#home .sub{white-space:nowrap !important;font-size:min(3.7vw, 16.5px) !important;max-width:97vw !important}

/* ===== شجرة آل محمد: بومة لعبة الحروف في شاشة «تعلم الترتيب» (تُبدّل في server.ts)، مع رمشة ===== */
.mtak-owl{position:relative;display:block;width:66px;flex:0 0 auto}
.mtak-owl img{width:100%;height:auto;display:block}
.mtak-owl img.shut{position:absolute;inset:0;opacity:0;animation:mtakBlink 5.4s ease-in-out infinite}
@keyframes mtakBlink{0%,92%,100%{opacity:0}94%,97%{opacity:1}}

/* ===== لعبة الذاكرة: زر تخطي طور الحفظ، يظهر أثناء الحفظ فقط ===== */
#btnSkip{display:none;font-size:17px;padding:9px 22px;border-radius:18px}
#btnSkip.on{display:inline-block}