/* ===== اللعبة على الجوال (بالعرض): اللوحة بتاخد أكبر مساحة ممكنة =====
   الشريط العلوي أنحف، شريط النقاط سطر واحد نحيف، والسؤال بخط أكبر. */
@media (orientation:landscape) and (max-height:520px){
  /* الشريط العلوي */
  html body #game #gh{min-height:0!important;height:38px!important;padding-top:0!important;padding-bottom:0!important}
  html body #game{--hh:38px!important}
  html body #game #gh .gb{font-size:.72rem!important}
  html body #game #gh .gcenter .wm,html body #game #gh .gcenter img{max-height:30px!important}

  /* شريط النقاط: سطر واحد (الاسم جنب النتيجة) */
  html body #game:not(.inq) .score{--fh:42px!important;height:42px!important;padding:3px 10px!important;min-height:0!important;box-shadow:none!important;align-items:center!important}
  html body #game#game:not(.inq) .score .team{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;height:32px!important;min-height:0!important;width:auto!important;padding:0!important}
  html body #game#game:not(.inq) .score .team .tn{width:auto!important;margin:0!important;height:28px!important;line-height:28px!important;padding:0 14px!important;font-size:.85rem!important;border-radius:999px!important;white-space:nowrap}
  html body #game#game:not(.inq) .score .team .sc{width:auto!important;height:28px!important;min-height:0!important;margin:0!important}
  html body #game:not(.inq) .score .team .sc b{font-size:1.1rem!important;line-height:28px!important}
  html body #game:not(.inq) .score .team .pm{width:22px!important;height:22px!important}

  /* اللوحة: مسافات أقل وخط أكبر */
  html body #game:not(.inq) #board{gap:6px 10px!important;padding:6px 8px 4px!important}
  html body #game:not(.inq) #board .tile{font-size:clamp(.9rem,5.2vh,1.35rem)!important}

  /* السؤال: الخط أكبر ليعبي المربع */
  html body #game#game #stage #qview #qtext,html body #game#game #stage #qview.qsq #qtext{font-size:clamp(1.15rem,7.4vh,2.1rem)!important;line-height:1.45!important}
  html body #game#game #stage #qview #atext:not([hidden]){font-size:clamp(1.05rem,6.4vh,1.8rem)!important}
}

/* صفحة «العب» على الجوال بالعرض: البنر ما بيطلع أطول من الشاشة */
@media (orientation:landscape) and (max-height:520px) and (min-width:701px){
  html.psb body #pickscreen #pick #phero.hero{height:min(clamp(260px,38vw,400px),72vh)!important}
  html.psb body #pickscreen #pick #phero.hero .phtitle{font-size:clamp(1.6rem,9vh,2.6rem)!important}
  html.psb body #pickscreen #pick #phero.hero .phsub{font-size:clamp(.8rem,4.2vh,1rem)!important}
}

/* زر الوضع الليلي: أيقونة + كلمة زي باقي أزرار الشريط (بدل الدائرة) */
html body #game#game #gh #themebtn{width:auto!important;height:auto!important;border-radius:0!important;background:none!important;padding:0!important;box-shadow:none!important;position:static!important;
  --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.6A8.5 8.5 0 0 1 9.4 3.5a8.5 8.5 0 1 0 11.1 11.1z'/%3E%3C/svg%3E")}
html body.dark #game#game #gh #themebtn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Cg stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 1.8v2.6M12 19.6v2.6M1.8 12h2.6M19.6 12h2.6M4.8 4.8l1.8 1.8M17.4 17.4l1.8 1.8M4.8 19.2l1.8-1.8M17.4 6.6l1.8-1.8'/%3E%3C/g%3E%3C/svg%3E")}
html body #game#game #gh #themebtn::before{content:''!important;position:static!important;transform:none!important;border-radius:0!important;top:auto!important;inset-inline-start:auto!important;font-size:0!important;
  -webkit-mask:var(--ic) center/contain no-repeat!important;mask:var(--ic) center/contain no-repeat!important}
html body #game#game #gh #themebtn span{display:inline!important}
html body #game#game #gh #themebtn span::after{content:'الوضع الليلي'}
html body.dark #game#game #gh #themebtn span::after{content:'الوضع النهاري'}

/* الجوال بالعرض: اللوحة وشريط النقاط من طرف الشاشة لطرفها */
@media (orientation:landscape) and (max-height:520px){
  html body #game#game:not(.inq) #stage,html body #game#game:not(.inq) #stage>.full{padding-left:0!important;padding-right:0!important;margin:0!important;max-width:none!important;width:100%!important}
  html body #game#game:not(.inq) #board{width:auto!important;max-width:none!important;margin:0!important;padding:6px max(6px,env(safe-area-inset-left)) 4px max(6px,env(safe-area-inset-right))!important;gap:6px 8px!important}
  html body #game#game:not(.inq) .score{width:auto!important;max-width:none!important;margin:0!important;border-radius:0!important;padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  html body #game#game #gh #themebtn span{display:none!important}
}

/* ===== تعديل 2: بدون فراغ على الأطراف وتحت، وخط الأسئلة الخاصة أكبر ===== */
@media (orientation:landscape) and (max-height:520px){
  /* الأطراف: مسافة صغيرة ثابتة بدل مساحة الكاميرا كاملة */
  html body #game#game:not(.inq) #board{padding:6px 8px 4px!important}
  html body #game#game #stage{padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
  html body #game#game #gh{padding-left:12px!important;padding-right:12px!important}
  /* تحت: شريط النقاط بيكمل لآخر الشاشة (تحت خط الآيفون) */
  html body #game#game:not(.inq) .score{height:auto!important;min-height:42px!important;padding-left:12px!important;padding-right:12px!important;padding-bottom:max(3px,env(safe-area-inset-bottom))!important}
  html body #game#game{height:100dvh!important}
  html:has(#game:not([hidden])),html:has(#game:not([hidden])) body{background:#f8bf4f!important}
  html:has(#game:not([hidden])) body.dark,html.dark:has(#game:not([hidden])){background:#454545!important}

  /* الأسئلة الخاصة (ترتيب، صور، أنواع جديدة): الخط والأسطر أكبر بدون ما يتغيّر الشكل */
  html body #game #qspec .ord,html body #game #qspec .it,html body #game #qspec .nt{--f:clamp(1rem,5.2vh,1.4rem)!important;--h:clamp(30px,8.4vh,42px)!important;width:100%!important;gap:8px!important}
  html body #game #qspec .ord .ocol{gap:8px!important}
  html body #game#game #stage #qview:has(#qspec:not([hidden]):not(:empty)){padding-top:8px!important;padding-bottom:8px!important}
  html body #game #qspec .ord .ohd{font-size:clamp(.9rem,4.4vh,1.15rem)!important}
  html body #game #qspec .ord .ocol>small{font-size:clamp(.8rem,3.8vh,1rem)!important}
  html body #game #qspec .cap{font-size:clamp(1rem,5vh,1.4rem)!important}
  html body #game #qspec .go{font-size:clamp(1rem,5vh,1.4rem)!important}
  /* لما يكون في سؤال خاص (ترتيب وغيره): عنوان السؤال متوسط، والمساحة للخيارات */
  html body #game#game #stage #qview:has(#qspec:not([hidden]):not(:empty)) #qtext{font-size:clamp(1.05rem,6.2vh,1.6rem)!important;line-height:1.35!important;margin-bottom:4px!important}
}

/* خيارات سؤال الترتيب: إطار رفيع بدل الظل */
html body #game #qspec .ord .oc{border:1.5px solid #efe3c8!important;background:#fff!important}
html body.dark #game #qspec .ord .oc{border-color:#4a423a!important;background:#2a2521!important}

/* ===== سؤال الترتيب على الجوال: نص طويل بيساع بسطرين جوّا الخيار بدون تكدّس ===== */
@media (orientation:landscape) and (max-height:520px){
  html body #game#game #qspec .ord{--f:clamp(.8rem,3.5vh,1rem)!important;--h:clamp(36px,10.6vh,46px)!important;gap:6px!important}
  html body #game#game #qspec .ord .ohd{display:none!important}
  html body #game#game #qspec .ord .ocol,html body #game#game #qspec .ord .oans{gap:6px!important}
  html body #game#game #qspec .ord .oc,html body #game#game #qspec .ord .oans .orow{font-size:var(--f)!important;line-height:1.2!important;padding-top:2px!important;padding-bottom:2px!important}
  html body #game#game #qspec .ord .oc span,html body #game#game #qspec .ord .oans .orow span{line-height:1.2!important;-webkit-line-clamp:2}
  html body #game#game #qspec .ord .osl .oph{font-size:calc(var(--f)*.9)!important}
}