/* ===== تحسينات الجوال (آخر ملف بيتحمّل): الجوال بالعرض والشاشات القصيرة =====
   كل القواعد هون محصورة بمقاسات الجوال، وما بتغيّر شكل الكمبيوتر. */

/* 1) الشريط العلوي: على الشاشات الضيقة بنشيل «تواصل معنا» (موجود بالفوتر) وبنقصّر زر الشراء، عشان ما يطلع شي برّا الشاشة */
@media (max-width:960px){
  html body header nav a.nl[data-wa]{display:none!important}
  html body header .buyb .bl{font-size:0!important;line-height:0}
  html body header .buyb .bl::after{content:'اشترِ ألعاب';font-size:clamp(.82rem,1.6vw,.95rem);line-height:1.2}
}
@media (max-width:760px){
  html body header nav .fachip{gap:6px!important}
  html body header nav a.nl{margin-inline-start:10px!important}
}

/* 2) وسائل المساعدة بالرئيسية: 3 فوق و2 تحت بالنص بدل 4 وبطاقة لحالها */
@media (max-width:960px) and (min-width:560px){
  html body #help .hc{display:flex!important;flex-wrap:wrap;justify-content:center}
  html body #help .hcard{flex:0 1 calc((100% - 2 * clamp(10px,1.4vw,18px)) / 3);min-width:0}
}

/* 3) شاشة الفوز: مسافة واضحة بين البطاقات والأزرار */
@media (max-height:520px){
  html body .wbox{gap:12px!important}
  html body #win .wact{margin-top:6px}
}

/* 4) نوافذ الدخول/التسجيل: إذا أطول من الشاشة بتنزل وبتتمرّر من أولها (بدل ما ينقص راسها أو زر الدخول) */
html body #faov.on{align-items:flex-start}
html body #faov>*{margin-block:auto}

/* 5) اختيار الفئات على الجوال بالعرض: شريط واحد تحت بدل شريطين (كانوا ياخدوا تقريباً نص الشاشة).
      الفئات المختارة بتنعرض بنص الشريط، والعدد يمين، وزر «كمّل» يسار */
@media (max-height:520px) and (orientation:landscape){
  html body #pickscreen #bar{min-height:54px;padding:6px 14px!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important;font-size:.95rem!important}
  html body #pickscreen #tray{top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;left:50%!important;right:auto!important;inset-inline-start:auto;translate:-50% 0;width:auto!important;height:auto!important;
    display:flex!important;gap:6px!important;padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
  html body #pickscreen #tray .tcount{display:none!important}
  html body #pickscreen #tray .slot{width:36px!important;height:36px!important;font-size:.8rem!important}
  html body #pickscreen #tray .x{width:17px!important;height:17px!important;font-size:.75rem!important;top:-4px!important;inset-inline-start:-4px!important;border-width:1.5px!important}
}

/* 6) خط أصفر زايد كان ظاهر جنب عنوان «إنشاء لعبة» (بقايا تنسيق عام للعناوين) */
html body #pickscreen #phero .phtitle{border:0!important}

/* 7) كيدز/ستيودنت: زر «اختر / تم الاختيار» بالبطاقة الضيقة ما بينكسر لسطرين */
@media (max-width:960px){
  html body.edu #secs .card::before{white-space:nowrap;padding-inline:clamp(10px,2.2vw,28px)!important;max-width:calc(100% - 8px);box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}
}

/* ===== جيم مافيا على الجوال بالعرض ===== */
/* 8) الشريط العلوي بسطر واحد: أزرار الأدوات أيقونات بس (بدل 3 أسطر كانت تاخد ثلث الشاشة) */
@media (max-height:520px){
  html body[data-edition="mafia"] .wrap{padding-top:8px!important;padding-bottom:28px!important}
  html body[data-edition="mafia"] .bar{flex-wrap:nowrap!important;gap:6px!important}
  html body[data-edition="mafia"] .bar img{height:34px!important}
  html body[data-edition="mafia"] .homeb{padding:4px 12px!important;font-size:.82rem!important;box-shadow:0 2px 0 #8a6414!important}
  html body[data-edition="mafia"] .bar .ph{font-size:.78rem!important;padding:2px 10px!important;white-space:nowrap}
  html body[data-edition="mafia"] .bar .tools{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;justify-content:flex-end;gap:6px!important;overflow-x:auto;overflow-y:visible;scrollbar-width:none;padding:2px 0 6px}
  html body[data-edition="mafia"] .bar .tools::-webkit-scrollbar{display:none}
  html body[data-edition="mafia"] .bar .tools>*{flex:none}
  html body[data-edition="mafia"] .ib{padding:5px 10px!important;font-size:.75rem!important;border-radius:10px!important}
  html body[data-edition="mafia"] .ib:has(.ic){font-size:0!important;gap:0!important;padding:6px 9px!important}
  html body[data-edition="mafia"] .ib:has(.ic) .ic{width:18px!important;height:18px!important;margin:0!important}
  html body[data-edition="mafia"] .mbuy{padding:5px 12px 5px 10px!important;font-size:.8rem!important;box-shadow:0 3px 0 #d9a400!important}
  html body[data-edition="mafia"] .mbuy i{width:18px!important;height:18px!important}
  html body[data-edition="mafia"] .bar .fabal{font-size:.78rem!important;padding:1px 9px!important}
  /* العناوين أصغر عشان تبين اللعبة نفسها */
  html body[data-edition="mafia"] .hero{padding:1vh 0 0!important}
  html body[data-edition="mafia"] .hero h1{font-size:clamp(2rem,13vh,3.6rem)!important}
  html body[data-edition="mafia"] .hero.sm h1{font-size:clamp(1.7rem,10vh,3rem)!important}
  html body[data-edition="mafia"] .hero p{font-size:clamp(.85rem,4vh,1.05rem)!important;margin-top:2px!important}
  html body[data-edition="mafia"] .stage{gap:12px!important;margin-top:1vh!important}
  html body[data-edition="mafia"] .card{padding:12px 14px!important;border-radius:18px!important}
  html body[data-edition="mafia"] .btn.big{font-size:1.1rem!important;padding:12px!important}
  html body[data-edition="mafia"] .room-code{font-size:clamp(2rem,11vh,3.2rem)!important}
  html body[data-edition="mafia"] .qr{max-width:min(210px,52vh)!important;padding:8px!important;border-radius:14px!important}
}
/* 9) عمودين على الجوال بالعرض (الباركود يمين واللاعبين وزر البدء يسار) بدل عمود طويل */
@media (max-height:520px) and (orientation:landscape) and (min-width:600px){
  html body[data-edition="mafia"] .stage.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  html body[data-edition="mafia"] .stage.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  html body[data-edition="mafia"] .stage .hero{grid-column:1/-1}
}
/* 10) تفاصيل المافيا على الشاشة القصيرة: اسم المرحلة موجود بالعنوان الكبير فبنخفيه من الشريط، وبطاقات اللاعبين أصغر، وأزرار البدء بعرض الصفحة */
@media (max-height:520px){
  html body[data-edition="mafia"] .bar .ph{display:none!important}
  html body[data-edition="mafia"] .names.pj{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important;gap:8px!important}
  html body[data-edition="mafia"] .pj-i{padding:6px 4px!important;border-radius:12px!important;font-size:.85rem}
  html body[data-edition="mafia"] .pj-i svg{width:30px!important;height:36px!important}
  html body[data-edition="mafia"] .names{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;gap:8px!important}
  html body[data-edition="mafia"] .row{margin-top:10px!important}
  html body[data-edition="mafia"] .card .sub b{white-space:nowrap}
}
@media (max-height:520px) and (max-width:760px){
  html body[data-edition="mafia"] .bar>a:not(.homeb){display:none!important}
}
@media (max-height:520px) and (orientation:landscape) and (min-width:600px){
  html body[data-edition="mafia"] .stage.cols>.row{grid-column:1/-1}
  html body[data-edition="mafia"] .stage.cols>.hint{grid-column:1/-1}
}
@media (max-height:520px){
  html body[data-edition="mafia"] .stage .grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important;gap:8px!important}
  html body[data-edition="mafia"] .pl{padding:6px 4px!important;border-radius:12px!important;font-size:.85rem}
  html body[data-edition="mafia"] .pl svg{width:30px!important;height:36px!important}
}

/* كيدز وستيودنت: بخطوات اختيار العمر/الصف/الفصل ما في اختيار فئات، فشريط العدّ والصواني مخفية */
body.edu.edstep #pickscreen #bar,body.edu.edstep #pickscreen #tray{display:none!important}
/* شاشة الإصدارات على جوال عرضي: شارة «قريباً» على البلاطة البنفسجية بتظهر مثل شارة «جديد» */
@media (max-width:700px) and (orientation:landscape){
  html body #pickscreen #phero .tiles .t-hid .soon{display:block!important;right:auto!important;left:50%!important;translate:-50% 0;white-space:nowrap}
}
/* السؤال اللي فيه صورة أو فيديو على جوال عرضي: الصورة بعمود لحالها وبتاخد كل ارتفاع البطاقة،
   والسؤال والجواب وأزرار الفرق بالعمود الثاني. هيك الصورة ما بتصغر لما يظهر الجواب */
@media (orientation:landscape) and (max-height:520px){
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;grid-template-rows:minmax(0,1fr) auto auto auto auto minmax(0,1fr)!important;column-gap:clamp(12px,2.4vw,22px)!important;row-gap:clamp(6px,1.8vh,10px)!important;align-items:center!important;justify-items:stretch!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > :is(#qtext,#qspec,#atext,#qrow,#who,.tolui){grid-column:1!important;margin:0!important;justify-self:center!important;max-width:100%}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #qtext{grid-row:2!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #qspec{grid-row:3!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #atext{grid-row:4!important;width:100%!important;box-sizing:border-box}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > :is(#qrow,#who){grid-row:5!important;flex-wrap:wrap;justify-content:center}
  html body #game #qview:has(#atext):has(#qtext) #qmedia:not([hidden]):not([data-t="audio"]){grid-column:2!important;grid-row:1/-1!important;align-self:stretch!important;justify-self:stretch!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;zoom:1!important}
}
@media (orientation:landscape) and (max-height:520px){
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])):has(#atext:not([hidden])) > #qtext{font-size:clamp(13px,4.6vh,19px)!important;line-height:1.35!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #who{gap:6px!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #who button{padding-block:clamp(4px,1.4vh,8px)!important}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:780px){
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])):has(#atext:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(0,.8fr)!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #who button{padding-inline:clamp(10px,2vw,16px)!important}
}
@media (orientation:landscape) and (max-height:520px){
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])):has(#atext:not([hidden])) > #qtext{font-size:clamp(12px,3.9vh,16px)!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #atext{padding-block:clamp(2px,1vh,6px)!important;font-size:clamp(15px,5.4vh,22px)!important}
  html body #game #qview:has(> #qmedia:not([hidden]):not([data-t="audio"])) > #who button{font-size:clamp(12px,3.7vh,15px)!important;padding:clamp(5px,1.6vh,8px) clamp(12px,1.8vw,16px)!important;min-height:30px!important}
}