/* =====================================================================
   جولة 56 — الجوال بالعرض: القائمة كلها تنشاف بشاشة وحدة بدون تمرير طويل،
   + شريط «يُفضّل تلعب بالعرض» بالعمودي، + شاشة «لفّ جوالك» للمخطّط والمباراة.
   القاعدة: (orientation:landscape) and (max-height:500px) = جوال بالعرض (كل المقاسات).
   ===================================================================== */
.menu-home { min-width: 0 }
@media (max-width: 700px) and (orientation: portrait) { .menu-home { order: -1 } }
.tile.sm > .t-ext { position: absolute; top: 6px; inset-inline-end: 6px; width: 12px; height: 12px; opacity: .55; color: var(--text); pointer-events: none }
.tile.sm > .t-ext svg { width: 12px !important; height: 12px !important; margin: 0 !important; color: inherit !important }

@media (orientation: landscape) and (max-height: 500px) {
  /* ---------- الشريط العلوي: سطر واحد نحيف ---------- */
  .topbar.tb2, .tb2 { flex-wrap: nowrap !important; align-items: center !important; padding: calc(var(--safe-t, 0px) + 6px) calc(12px + var(--safe-r, 0px)) 8px calc(12px + var(--safe-l, 0px)) !important; row-gap: 0 !important }
  .tb-id { flex: 0 1 auto !important; order: 0 !important; gap: 8px; min-width: 0 }
  .tb-user { width: min(230px, 30vw) !important; height: 46px; aspect-ratio: auto !important; flex: 0 0 auto !important }
  .tb-face { padding: 4px 10px 4px 4px; gap: 8px }
  .tb-user .avatar { width: 36px !important; height: 36px !important }
  .tb-name { font-size: .86rem } .tb-xp { font-size: .66rem; gap: 6px } .xp-mini { width: 54px !important }
  .scrap-chip { padding: 3px 9px 3px 4px !important; font-size: .8rem !important; gap: 6px !important }
  .scrap-chip > svg, .scrap-chip > img { width: 22px !important; height: 22px !important; padding: 3px !important }
  .tb-scrap { margin-inline-start: 0 !important }
  .tb-mid { position: absolute !important; inset-inline: 0 !important; top: calc(var(--safe-t, 0px) + 14px) !important; order: 0 !important; justify-content: center !important;
    padding-inline: calc(min(230px, 30vw) + 190px) 110px !important; pointer-events: none }
  .tb-season { flex-direction: row !important; gap: 6px !important } .sn-txt { font-size: .74rem !important; padding: 3px 12px !important } .sn-em { max-height: 20px !important; max-width: 48px !important }
  .tb2 .tb-right { order: 0 !important; flex: 0 0 auto !important; gap: 6px !important; margin-inline-start: auto }
  .ic-btn { width: 34px; height: 34px } .ic-btn svg { width: 17px; height: 17px }
  .tb-smoke { height: 38px !important; opacity: .6 !important }
  .tb2 { min-height: 0 }
  #scr-menu .topbar { position: absolute !important; top: 0 !important; inset-inline: 0 !important; width: auto !important; background: linear-gradient(#000d, #0000) !important }

  /* ---------- القائمة ---------- */
  #scr-menu { padding: calc(64px + var(--safe-t, 0px)) calc(12px + var(--safe-r, 0px)) calc(20px + var(--safe-b, 0px)) calc(12px + var(--safe-l, 0px)) !important; justify-content: safe flex-start !important }
  .menu-wrap { gap: 8px !important; width: min(1120px, 100%) }
  .announce:not(:empty) { padding: 5px 12px !important; font-size: .78rem !important }
  .menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 8px !important; align-items: start }
  .menu-col { display: flex !important; flex-direction: column !important; gap: 6px !important; grid-template-columns: none !important }
  .menu-home { order: 0 !important; gap: 8px }
  .m3 { gap: 7px }
  .menu-col .tile.sm { min-height: 38px !important; height: auto !important; grid-template-columns: 38px 1fr !important; padding: 0 !important }
  .menu-col .tile.sm > b { font-size: .8rem !important; padding: 6px 8px !important }
  .menu-col .tile.sm > .t-ic svg, .menu-col .tile.sm > .t-ic img { width: 17px !important; height: 17px !important }
  .buy-sep { margin: 0 !important; font-size: .64rem !important }
  .buy-sep svg { width: 11px; height: 11px }

  /* بطاقات الوسط الثلاث: تتقاسم الارتفاع المتبقي */
  .m3c { min-height: max(58px, calc((100dvh - 64px - 20px - 56px - 44px - 30px) / 3)); padding: 8px 14px; gap: 10px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) }
  .m3-ic { width: 40px; height: 40px } .m3-ic svg, .m3-ic img { width: 22px; height: 22px }
  .m3-t { font-size: 1.02rem } .m3-s { font-size: .7rem; -webkit-line-clamp: 1 }
  .m3-go { width: 28px; height: 28px } .m3-go svg { width: 15px; height: 15px }
  .m3-lock { padding: 4px 9px; font-size: .7rem } .m3-lock svg { width: 13px; height: 13px }
  .m3-rv.a, .m3-rv.b { top: 7px } .m3-rv.c, .m3-rv.d { bottom: 6px } .m3-rv { width: 5px; height: 5px }
  .m3-badge { top: 6px; font-size: .62rem }

  /* روابطنا: سطر نحيف */
  .menu-home > .brand-links, .menu-play > .brand-links { gap: 6px !important; flex-direction: row !important; flex-wrap: nowrap !important }
  .menu-home > .brand-links .brand { min-height: 34px !important; min-width: 0 !important }
  .menu-home > .brand-links .brand .b-ic { width: 28px }
  .menu-home > .brand-links .brand svg { width: 16px; height: 16px }
  .menu-home > .brand-links .brand b { font-size: .68rem !important; padding: 4px 5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; line-height: 26px }

  /* مرحلة اليوم: شريط نحيف */
  .mk-daily { max-width: 560px !important; margin: 0 auto !important; min-height: 0 }
  .mk-daily canvas { width: 78px !important; height: 44px !important }
  .mkd-in { padding: 4px 0 !important } .mkd-in b { font-size: .84rem !important } .mkd-in small { font-size: .66rem !important } .mkd-k { font-size: .64rem !important }
  .mkd-go { padding: 4px 10px !important; font-size: .74rem !important; margin-inline-end: 8px !important }

  .pwa-inst { padding: 6px 10px !important } .pwa-inst svg { width: 16px; height: 16px }
  .wip { font-size: .6rem !important; padding: 2px 10px !important }
  /* شارة «نسخة تجريبية»: مكان الموسم بنص الشريط العلوي (الموسم مخفي بالجوال) — ما تغطي شي */
  .ptb { --ptb-s: .7 !important; top: calc(var(--safe-t, 0px) + 16px) !important; bottom: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%); max-width: 26vw }

  /* ---------- لوحة المطاردة ---------- */
  .chase-ov { padding: 8px 14px }
  .chase-box { max-height: calc(100dvh - 16px); padding: 10px 14px 10px; width: min(760px, 100%) }
  .chase-head { padding-bottom: 8px; margin-bottom: 8px; gap: 10px }
  .chase-ic { width: 34px; height: 34px } .chase-ic svg { width: 19px; height: 19px }
  .chase-tt h3 { font-size: 1.05rem } .chase-tt p { font-size: .72rem }
  .chase-box .menu-play { gap: 8px }
  .chase-box .menu-play > .pcard { min-height: max(70px, calc((100dvh - 16px - 22px - 52px - 46px - 30px) / 2)) }
  .chase-box .pc-body { padding: 8px 12px !important }
  .chase-box .pc-title { font-size: 1rem !important } .chase-box .pcard.hero .pc-title { font-size: 1.1rem !important } .chase-box .pc-sub { font-size: .7rem !important }
  .chase-box .join-row { padding: 5px 10px !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px }
  .chase-box .join-row label { white-space: nowrap; margin: 0 !important; font-size: .8rem }
  .chase-box .join-row .row { flex: 1; margin: 0 !important }
  .chase-box .join-row input { padding: 6px 10px !important; font-size: .95rem !important }
}
/* الجوالات الضيقة بالعرض: روابطنا أيقونات بس (الاسم يطلع للقارئ) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .menu-home > .brand-links .brand b { display: none !important }
  .menu-home > .brand-links .brand { justify-content: center } .menu-home > .brand-links .brand .b-ic { width: 100%; border: 0 !important; background: none !important }
}
/* الجوالات القصيرة جدًا (مثل SE بالعرض) */
@media (orientation: landscape) and (max-height: 360px) {
  .mk-daily { display: none !important }
  .m3c { min-height: 54px }
}

/* =====================================================================
   العمودي على الجوال
   ===================================================================== */
/* شريط صغير ومريح: «يُفضّل تلعب بالعرض» (يتقفل ويرجع بعد ساعة) */
.orient-bar { position: fixed; inset-inline: 10px; bottom: calc(10px + var(--safe-b, 0px)); z-index: 160; display: none; align-items: center; gap: 10px; padding: 8px 10px 8px 12px;
  color: #e8e6df; font-size: .78rem; font-weight: 700; line-height: 1.5;
  background: linear-gradient(180deg, #1c1f29, #0d0f14); border: 1px solid #ffffff22; box-shadow: 0 10px 30px #000c;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: obIn .3s ease both }
.orient-bar::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: repeating-linear-gradient(-45deg, #c8141f 0 7px, #0a0b0f 7px 14px) }
body.orient-port .orient-bar:not(.off) { display: flex }
body.in-game .orient-bar { display: none !important }
.orient-bar .ob-ph { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: #ffd166 }
.orient-bar .ob-ph svg { width: 24px; height: 24px; animation: obTilt 2.6s ease-in-out infinite }
.orient-bar span { flex: 1 }
.orient-bar button { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: #ffffff10; border: 1px solid #ffffff22; cursor: pointer; font: inherit }
.orient-bar button svg { width: 14px; height: 14px }
@keyframes obIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes obTilt { 0%, 30% { transform: rotate(0) } 50%, 80% { transform: rotate(-90deg) } 100% { transform: rotate(0) } }

/* شاشة «لفّ جوالك» — للمخطّط والمباراة دايمًا، وللقوائم لو اخترت «شاشة كاملة» من المحرك */
.orient-full { position: fixed; inset: 0; z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; color: #e8e6df;
  background: radial-gradient(ellipse at 50% 38%, #2a0408 0%, #0b0507 46%, #040406 100%) }
.orient-full::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: repeating-linear-gradient(-45deg, #c8141f 0 10px, #0a0b0f 10px 20px) }
.orient-full::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px) }
body.orient-lock .orient-full { display: flex }
.of-dev { position: relative; width: 132px; height: 132px; display: grid; place-items: center }
.of-dev .of-ph { width: 54px; height: 96px; border: 3px solid #e8e6df; border-radius: 10px; position: relative; box-shadow: 0 0 24px #c8141f55; animation: ofRot 2.8s cubic-bezier(.6, 0, .3, 1) infinite; background: #0b0c11 }
.of-dev .of-ph::before { content: ''; position: absolute; top: 6px; left: 50%; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #e8e6df88 }
.of-dev .of-ph::after { content: ''; position: absolute; inset: 14px 5px; background: linear-gradient(135deg, #c8141f55, #0000 70%), repeating-linear-gradient(0deg, #ffffff10 0 2px, transparent 2px 6px) }
.of-dev .of-arc { position: absolute; inset: 0; border: 2px dashed #ffd16655; border-radius: 50%; border-right-color: transparent; border-bottom-color: transparent; animation: ofArc 2.8s ease-in-out infinite }
.of-dev .of-arr { position: absolute; top: 6px; right: 14px; width: 0; height: 0; border-left: 8px solid #ffd166; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(40deg); animation: ofArc 2.8s ease-in-out infinite }
.orient-full b { font-size: 1.35rem; font-weight: 900; letter-spacing: .2px; text-shadow: 0 0 18px #c8141f88 }
.orient-full small { font-size: .86rem; opacity: .7; max-width: 30ch; line-height: 1.7 }
.orient-full .of-tag { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem; letter-spacing: .32em; color: #c8141f; border: 1px solid #c8141f66; padding: 2px 10px; direction: ltr }
@keyframes ofRot { 0%, 22% { transform: rotate(0) } 48%, 78% { transform: rotate(-90deg) } 100% { transform: rotate(0) } }
@keyframes ofArc { 0%, 22% { opacity: 0 } 35%, 60% { opacity: 1 } 78%, 100% { opacity: 0 } }
/* القديمة (أيقونة كمبيوتر) ما عاد لها داعي */
.mk-rotate { display: none !important }
@media (prefers-reduced-motion: reduce) { .of-dev .of-ph, .of-dev .of-arc, .of-dev .of-arr, .orient-bar .ob-ph svg { animation: none } }

/* =====================================================================
   جولة 57 — كل الصفحات على الجوال بالعرض: مضغوطة ومريحة، والعنوان وزر الرجوع ثابتين فوق
   ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  html, body { font-size: calc(13.5px * var(--ui, 1)) }
  .screen:not(#scr-menu):not(.game) { padding: calc(6px + var(--safe-t, 0px)) calc(10px + var(--safe-r, 0px)) calc(18px + var(--safe-b, 0px)) calc(10px + var(--safe-l, 0px)) !important }
  .page { width: min(980px, 100%) !important; max-height: calc(100dvh - 26px) !important; padding: 0 14px 12px !important; gap: 9px !important; overscroll-behavior: contain }
  .page.narrow { width: min(640px, 100%) !important }
  /* رأس الصفحة: ثابت فوق وقت التمرير — الرجوع دايمًا بمتناول اليد */
  .page > .page-h { position: sticky; top: 0; z-index: 6; margin: 0 -14px; padding: 8px 14px 7px; gap: 10px; flex-wrap: nowrap;
    background: linear-gradient(180deg, #13151d 0%, #13151df2 80%, #13151d00 100%) }
  .page-h h2 { font-size: 1.08rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .page-h .back { min-height: 32px; padding: 4px 10px !important; font-size: .85rem }
  .page-h .back svg { width: 15px; height: 15px }
  .page-body { font-size: .9rem; line-height: 1.75 }

  /* الإعدادات: التبويبات سطر واحد صغير، والصفوف أنحف */
  .set-tabs { gap: 4px !important; padding: 4px !important }
  .set-tabs button { min-height: 36px !important; padding: 4px 6px !important; flex-direction: row !important; gap: 6px !important; font-size: .78rem !important }
  .set-tabs button svg { width: 15px !important; height: 15px !important }
  .set-group { gap: 5px } .set-group h3 { font-size: .74rem; margin-bottom: 2px }
  .set { padding: 7px 12px !important; gap: 10px; min-height: 40px } .set > span { font-size: .86rem }
  .set small { font-size: .7rem }
  .set .seg button { padding: 5px 10px; font-size: .78rem }
  input.tg { transform: scale(.85); transform-origin: center }

  /* البروفايل: بانر أقصر، والهوية جنبه، والأرقام صف واحد */
  .pf-banner { aspect-ratio: auto !important; height: min(24vh, 96px) !important; border-radius: 8px }
  .pf-hero { margin-bottom: 8px !important }
  .pf-id { margin-top: -26px !important; gap: 10px !important; padding-inline: 10px !important }
  .pf-av { width: 62px !important; height: 62px !important; border-radius: 10px }
  .pf-name b { font-size: 1rem } .pf-lvl { font-size: .74rem }
  .pf-btns .btn { min-height: 30px; padding: 4px 9px; font-size: .74rem }
  .pf-stats { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important; gap: 6px !important; margin-bottom: 8px !important }
  .pf-stats > * { padding: 6px 8px !important } .pf-stats b { font-size: 1rem !important } .pf-stats span, .pf-stats small { font-size: .66rem !important }
  .pf-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important }
  .pf-box { padding: 10px 12px !important } .pf-box h3 { font-size: .9rem !important; margin-bottom: 4px !important }

  /* أزرار وحقول عامة داخل الصفحات */
  .page .btn { min-height: 34px } .page .btn.big { min-height: 40px; font-size: .95rem }
  .page input:not([type=checkbox]):not([type=range]):not([type=color]), .page select, .page textarea { padding: 7px 10px; font-size: .9rem }
  .subtabs button, .seg button { min-height: 32px }
  .toast { font-size: .82rem; padding: 8px 14px }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* الدخول: عمودين — الهوية جنب، والنموذج جنب (بدل عمود طويل يحتاج تمرير) */
  #scr-login { align-items: center !important }
  .login-wrap { display: grid !important; width: min(900px, 100%) !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 1.15fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "logo box" "season box" "title box" "quote box"; column-gap: 26px; row-gap: 4px; align-items: center; text-align: center }
  .login-wrap > .logo { grid-area: logo; max-height: 22vh !important; width: auto; justify-self: center; align-self: end }
  .login-wrap > .season { grid-area: season } .login-wrap > .title { grid-area: title; font-size: clamp(1.4rem, 4vw, 2rem) !important; margin: 0 }
  .login-wrap > .quote { grid-area: quote; align-self: start; font-size: .84rem; margin: 0 }
  .login-wrap > .login-box { grid-area: box; max-height: calc(100dvh - 36px); overflow: auto; padding: 14px 16px !important; gap: 8px !important; overscroll-behavior: contain }
  .login-wrap > :not(.logo):not(.season):not(.title):not(.quote):not(.login-box) { grid-column: 1 / -1 }
  .login-box .btn.big { min-height: 40px; font-size: .95rem } .dc-btn { min-height: 40px !important; padding: 8px 14px !important }
  .auth-tabs button { min-height: 36px !important; padding: 6px !important }
  /* التخصيص: شريط علوي واحد (رجوع · العنوان · الجهة)، والتبويبات أنحف */
  .cz-top { flex-direction: row !important; flex-wrap: nowrap !important; padding: 2px 0 6px !important; gap: 10px !important }
  .cz-title h2 { font-size: 1.05rem !important } .cz-title .muted { display: none !important }
  .cz-role button { min-height: 32px !important; padding: 4px 12px !important; font-size: .8rem !important }
  .cz-back { min-height: 32px; padding: 4px 10px !important; font-size: .82rem }
  .cz-tabs { padding-top: 4px !important } .cz-tabs button { min-height: 34px !important; padding: 4px 6px !important; font-size: .8rem !important }
  .page.cz { max-height: calc(100dvh - 24px) !important }
}

/* ===== جولة 58 — الجوال بالعرض ===== */
@media (orientation: landscape) and (max-height: 500px) {
  /* شارة «نسخة تجريبية»: كانت بنص الشريط فوق عدّاد البطاقات — صارت يسار جنب الأزرار، وتختفي بالصفحات (كانت تغطي عناوينها) */
  .ptb { left: 116px !important; transform: none !important; max-width: min(26vw, 190px) }
  body[data-scr]:not([data-scr="scr-menu"]):not([data-scr="scr-game"]):not([data-scr="scr-lobby"]) .ptb { display: none !important }
  /* العد التنازلي: شريط واحد نحيف عشان القائمة كلها تبان بدون تمرير */
  .cdx { padding: 7px 12px 10px }
  .cdx .cd-run { gap: 4px } .cdx .cd-endv { min-height: 34px; gap: 8px }
  .cdx .cd-k { display: none }   /* بالجوال العنوان ياخذ السطر كله */
  .cdx .cd-run .cd-head { padding-inline-end: 6px }
  .cdx .cd-run .cd-t { font-size: .84rem; -webkit-line-clamp: 2; line-height: 1.3; text-align: center }
  /* القائمة كلها تبقى بالشاشة: البطاقات الثلاث تصغر شوي لما يطلع العد */
  .menu-home:has(> .cd-host:not([hidden])) .m3c { min-height: 50px; padding-block: 6px }
  .cdx .cd-u small { display: none }
  .cdx .cd-tube { width: 17px; height: 25px }
  .cdx .cd-ghost, .cdx .cd-tube b { font-size: 17px }
  .cdx .cd-sep { padding-top: 7px; gap: 5px }
  .cdx .cd-fuse { bottom: 4px }
  .cdx .cd-et { font-size: 1.05rem }
  .cdx .cd-btn { padding: 5px 10px; font-size: .74rem }
}
@media (orientation: landscape) and (max-height: 500px) {
  .m3c.m3-make > .m3-shade { background: linear-gradient(to left, color-mix(in srgb, var(--tint) 26%, #07080cf5) 0%, #07080cdd 40%, #07080c55 58%, transparent 72%) }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* نافذة قطعة القطار (من الباتل باس): كانت أطول من الشاشة */
  .tri-dlg { padding: 8px 12px }
  .tri-box { width: min(600px, 100%); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; padding: 10px 12px; gap: 6px }
  .tri-cv { width: auto; max-width: 100%; max-height: 54dvh; align-self: center }
  .tri-h .btn { min-height: 30px; padding: 4px 10px }
}

/* ===== جولة 84: الجوال بالعرض — أزرار الزاوية أيقونة كبيرة واضحة (بدون اسم) بمسافات ثابتة، وشارة «نسخة تجريبية» تنشال من القائمة (الشريط تحت يقول نفس الكلام) ===== */
@media (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (max-width: 900px) {
  .tb-tools { gap: 8px !important; }
  .tb-tools .ic-btn { min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 0 !important; grid-template-rows: 1fr !important; border-radius: 10px; }
  .tb-tools .ic-btn svg { width: 20px !important; height: 20px !important; }
  .tb-tools .ic-l { display: none; }
  .tb-tools .ic-btn .dot, .tb-tools #btnInbox.has-rw::after { top: 4px; inset-inline-end: 4px; }
  .tb-tools #btnInbox .ib-badge { top: -6px; inset-inline-start: -6px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body[data-scr="scr-menu"] .ptb { display: none !important; }
}