/* ═══════════════════════════════════════════════════════════════════════════
   DTSG — [v2.48-LOOK] المرحلة 2: مطابقة تصميم الضومنة والطاولة للمراجع
   ───────────────────────────────────────────────────────────────────────────
   يُحمَّل بعد css/21-classic.css (نفس التخصيص ⇒ يفوز بالترتيب) ولا يلمس منطق اللعب.

   الأولويات المنفّذة هنا (من مواصفة v2.45-LOOK + ملاحظات المالك 2026-09-20):
   الضومنة:
     1) القطع: ارتفاع محدود بميزانية الشاشة + عرض ثابت بنسبة 0.54 ⇒ النقاط داخل
        القطعة دائماً (كانت تُرسم خارجها فتبدو «ناقصة/مقصوصة»).
     2) اليد على الحافة السفلية بلا تمرير أفقي ولا قصّ (`overflow:visible`، القطع تنكمش).
     3) الطاولة جوخ أخضر مُشعّ في الوضعين (لا خشب بنّي ولا رفّ منفصل).
     4) البنك صندوق على الحافة اليسرى · رزمة الخصم عمود رأسي على الحافة اليمنى.
     5) المسار متمركز في وسط الطاولة · القطعة القابلة للّعب صفراء متوهّجة (لوح/يد).
   الطاولة (Backgammon):
     6) بطاقة اللاعب ثلاثة أسطر: الاسم · Score (ذهبي كبير) · Pips (فاتح).
     7) تلميحات الحركة القانونية خضراء نابضة على المصادر والوجهات + حلقة ذهبية للمختار.
     8) اللاندسكيب: البطاقات يساراً واللوحة يميناً بكامل الارتفاع · البورتريه: بطاقتان
        جنباً إلى جنب ثم اللوحة ثم شريط النرد.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════ 1) الضومنة — القطع ═══════════════════ */

/* ميزانية ارتفاع القطعة: حدّ من ارتفاع الشاشة + حدّ من العرض (ديناميكي حسب عدد قطع اليد لمنع القصّ)
   ⇒ لا تتجاوز اليد عرض الشاشة ولا تُقتطع من الأسفل حتى عند سحب 14 قطعة. */
#dmStage {
  --dm-hand-count: 7;
  /* [v2.70·نوكيا] قيمة vh أساسية + ترقية dvh داخل @supports (لا تسلسل
     مباشراً للخصائص المخصصة — انفجار عند الاستخدام في WebView القديمة) */
  --dm-tile-h: clamp(30px, min(23vh, calc(((100vw - 32px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 100px);
  --dm-hand-h: 34%;
}
@supports (height: 100dvh) {
  #dmStage { --dm-tile-h: clamp(30px, min(23dvh, calc(((100vw - 32px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 100px); }
}
#dmStage .dm-hand .dm-htile,
#dmStage .dm-opprow .dm-htile {
  height: var(--dm-tile-h) !important;
  width: calc(var(--dm-tile-h) * 0.54) !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border-radius: 9px !important;
  overflow: hidden !important;              /* النقاط داخل القطعة — لا تسرّب للجوخ */
}
/* في «لاعبان — جهاز واحد» يعرض .dm-opprow يد اللاعب الثاني: حجم صغير صريح
   (لا نتركه auto فينهار العرض إلى الصفر) */
#dmStage .dm-opprow .dm-htile { width: 24px !important; height: 46px !important; }
#dmStage .dm-opprow .dm-htile .dp-cell { border-radius: 50%; }
/* النقاط: نسبية للقطعة (كانت تُرسم بمقاس ثابت فتفيض عند تصغير القطعة) */
#dmStage .dm-hand .dm-htile .dm-face,
#dmStage .dm-htile .dm-face { position: absolute; inset: 0; width: auto; height: auto; }
#dmStage .dm-htile .dm-half { padding: 9%; gap: 4%; }
#dmStage .dm-htile .dm-sep { margin: 0 11%; }

/* اليد: كاملة الظهور دائماً — لا تمرير ولا قصّ (كان overflow-y يُحسب auto فيقصّ القطع) */
#dmStage .dm-hand {
  overflow: visible !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: var(--dm-hand-gap, 6px) !important;
  padding: 12px var(--dm-hand-pad-x, 6px) 10px !important;       /* حشو علوي يستوعب بروز القطعة المختارة */
  background: none !important; border: 0 !important; box-shadow: none !important;
}
/* القطع غير القابلة للّعب تبقى عاجية واضحة (كانت شبه شفافة فتبدو «ناقصة») */
#dmStage .dm-hand .dm-htile:disabled,
#dmStage .dm-hand .dm-htile[disabled] { opacity: 1 !important; filter: none !important; }
#dmStage .dm-hand .dm-htile:disabled .dp-cell.on { background: radial-gradient(circle at 36% 30%, #59401f, #4a3418) !important; }
/* القطعة القابلة للّعب: صفراء متوهّجة وبارزة (كما في المرجع) */
#dmStage .dm-hand .dm-htile.can,
#dmStage .dm-chain .dm-dtile.can,
#dmStage .dm-chain .dm-tile.can {
  background: linear-gradient(165deg, #ffe873, #e9c62f) !important;
  border-color: #c9a326 !important;
  box-shadow: 0 0 20px rgba(255, 219, 74, .6), 0 8px 20px rgba(0, 0, 0, .5) !important;
}
#dmStage .dm-hand .dm-htile.can { transform: translateY(-5px); }
#dmStage .dm-hand .dm-htile.can:disabled { opacity: 1 !important; }

/* شاشة اللعب: طاولة + يد، بلا فراغات */
#dmStage #dmPlay.dm-screen-active { padding: 0 !important; gap: 0 !important; }

/* ═══════════════════ 2) الضومنة — الطاولة والعناصر ═══════════════════ */

/* الجوخ: أخضر مُشعّ في الوضعين (حتى اللاندسكيب — لا خشب بنّي) */
#dmStage .dm-table { border-radius: 0 !important; background: none !important; }
#dmStage .dm-felt {
  background:
    radial-gradient(130% 105% at 50% 38%, #2d6b50 0%, #17402e 58%, #0d281c 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 11px) !important;
  border-radius: 0 !important;
}
#dmStage .dm-felt::after { inset: 10px !important; border-color: rgba(242, 212, 137, .18) !important; border-radius: 14px !important; }

/* المسار: متمركز تماماً في وسط الطاولة */
#dmStage .dm-chain { inset: 12% 22% !important; }

/* البنك: صندوق مربّع على الحافة اليسرى (فيزيائي — لا يُقلب مع RTL) */
#dmStage .dm-boneyard {
  top: 50% !important; left: 8px !important; right: auto !important;
  transform: translateY(-50%);
  width: 64px !important; height: 88px !important;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(28, 46, 36, .92), rgba(10, 22, 16, .95)) !important;
  border: 1px solid rgba(242, 212, 137, .4) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
  justify-content: center;
}
#dmStage .dm-by-count { font-size: 20px !important; color: #ffe9a8 !important; }
#dmStage .dm-by-label { font-size: 10px !important; color: #cfd8c2 !important; letter-spacing: .5px; }
#dmStage .dm-by-stack { width: 26px; height: 40px; margin-bottom: 2px; }
#dmStage .dm-by-stack span { background: linear-gradient(160deg, #2f4a3a, #16281e) !important; border-color: rgba(242, 212, 137, .5) !important; }

/* رزمة الخصم: عمود رأسي على الحافة اليمنى بلا خلفية (لا صندوق داكن) */
#dmStage .dm-opprow {
  left: auto !important; right: 0 !important; width: auto !important;
  top: 50% !important; transform: translateY(-50%) !important;
  flex-direction: column !important; align-items: flex-end !important;
  justify-content: center !important;
  gap: 4px !important; padding: 0 6px !important;
  background: none !important; border: 0 !important;
  max-height: 52% !important;
}
#dmStage .dm-opprow > .dm-back { width: 20px !important; height: 38px !important; }
#dmStage .dm-opprow .dm-back {
  background: linear-gradient(160deg, #f3ead3, #ddcfae) !important;   /* ظهر عاجي كما في المرجع */
  border: 1px solid rgba(90, 66, 30, .5) !important;
}

/* المقاعد: بورتريه الخصم يساراً وأنا يميناً · لاندسكيب الخصم أعلى-يمين وأنا أسفل-يسار */
#dmStage .dm-hud { padding: 8px 10px 0 !important; }
#dmStage .dm-seat { padding: 5px 11px 5px 5px !important; background: rgba(8, 22, 16, .5) !important; }
#dmStage .dm-seat.me { padding: 5px 5px 5px 11px !important; }
#dmStage .dm-seatname { max-width: min(34vw, 132px) !important; }
#dmStage .dm-seatscore { font-size: 17px !important; }
#dmStage .dm-hudmid { max-width: 46vw; }

/* أدوات اللعب: أقراص دائرية فوق اليد على اليسار (لا تتقاطع مع القطع) */
#dmStage .dm-handwrap {
  flex-direction: column !important; align-items: stretch !important;
  gap: 4px !important;
  padding: 4px 10px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, rgba(10, 26, 19, .18), rgba(8, 20, 15, .55)) !important;
  border: 0 !important;
}
#dmStage .dm-tools { position: static !important; order: 1; flex-direction: row !important; gap: 8px !important; padding: 0 2px !important; }
#dmStage .dm-hand { order: 2; }
#dmStage .dm-tool {
  width: 40px !important; height: 40px !important; min-width: 40px;
  border-radius: 999px !important; padding: 0 !important; font-size: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: rgba(8, 22, 16, .78) !important;
  border: 1px solid rgba(242, 212, 137, .35) !important;
  color: #ffe9a8;
}
#dmStage .dm-tool i { font-size: 15px !important; }
#dmStage .dm-tool[hidden] { display: none !important; }

/* ═══════════════════ 3) الطاولة (bg) — البطاقات ═══════════════════ */

/* بطاقة اللاعب: الاسم · Score ذهبي كبير · Pips فاتح — كلٌّ في سطر */
#bwStage .bw-seat { padding: 8px 12px !important; border-radius: 14px !important; }
#bwStage .bw-seatmeta {
  display: flex !important; flex-direction: column !important;
  align-items: flex-start; gap: 0; line-height: 1.15;
}
#bwStage .bw-seatmeta.end { align-items: flex-end; }
#bwStage .bw-seat .bw-seatname { order: 1; font-size: 12.5px !important; font-weight: 800 !important; }
#bwStage .bw-seat .bw-seatrow {
  order: 2; display: flex !important; flex-direction: column !important;
  align-items: flex-start; gap: 0;
}
#bwStage .bw-seat .bw-seatrow.end { align-items: flex-end; }
#bwStage .bw-seat .bw-seatrow::before { order: 1; }
#bwStage .bw-seat .bw-seatscore { order: 2; font-size: 26px !important; font-weight: 900 !important; }
#bwStage .bw-seat .bw-seatpip { order: 3; font-size: 14px !important; font-weight: 700 !important; color: #f3ead6 !important; display: inline-block !important; }
/* [v2.48.1] سطر Pips كان مخفياً على الهواتف: في backgammon.css
   @media (max-width:640px){ .bw-seatpip{display:none} } ⇒ كانت البطاقة سطرين فقط
   والمرجع يطلب ثلاثة (الاسم · Score · Pips). الـ!important هنا يعيده في طبقة التصميم. */
#bwStage .bw-seatrow::before { font-size: 12.5px !important; }
#bwStage .bw-seatpip::before { font-size: 12.5px !important; }

/* تلميحات الحركة: المصادر والوجهات خضراء نابضة (كما في المرجع) */
#bwStage .bw-col.src::after {
  content: ''; position: absolute; inset: 2px; border-radius: 6px; pointer-events: none;
  border: 2px solid rgba(67, 199, 143, .85) !important;
  box-shadow: 0 0 12px rgba(67, 199, 143, .45) !important;
  animation: bwSrcPulse 1.1s infinite !important;
}
@keyframes bwSrcPulse { 50% { border-color: rgba(67, 199, 143, .35); box-shadow: 0 0 4px rgba(67, 199, 143, .2); } }
#bwStage .bw-col.selc::after {
  border: 2px solid #ffd75e !important;
  box-shadow: 0 0 16px rgba(255, 215, 94, .6) !important;
}
#bwStage .bw-bar.src { border-color: rgba(67, 199, 143, .9) !important; box-shadow: 0 0 14px rgba(67, 199, 143, .5) !important; }
#bwStage .bw-tray.dst { border: 2px dashed rgba(67, 199, 143, .9) !important; }

/* النرد: عاجي كبير بنقاط داكنة واضحة */
#bwStage .bw-die {
  width: 56px !important; height: 56px !important; border-radius: 12px !important;
  background: linear-gradient(165deg, #fffdf7, #ece2cd) !important;
  border: 1px solid rgba(90, 66, 30, .45) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}
#bwStage .bw-die.used { opacity: .45 !important; }
#bwStage .bw-rollbtn {
  background: linear-gradient(180deg, #ffe08a, #e0b23c) !important;
  color: #20180a !important; font-weight: 900 !important;
  border: 0 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .45) !important;
}

/* اللوحة: بلا تمرير داخل الشاشة، والبطاقات في عمودها */
#bwStage .bw-board { overflow: hidden !important; }
#bwStage #bwPlay.bw-screen-active { overflow: hidden !important; }

/* ── لاندسكيب: البطاقات يساراً واللوحة يميناً بكامل الارتفاع ── */
@media (orientation: landscape) {
  #bwStage #bwPlay.bw-screen-active {
    display: grid !important;
    grid-template-columns: minmax(170px, 26%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 4px !important;
    padding: 0 !important;
  }
  #bwStage .bw-hud {
    grid-column: 1; grid-row: 1;
    display: flex !important; flex-direction: column !important;
    justify-content: space-between; align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
    background: none !important; border: 0 !important;
  }
  #bwStage .bw-hudmid { order: 2; }
  #bwStage .bw-board { grid-column: 2; grid-row: 1 / -1; height: 100%; border-radius: 0 !important; }
  #bwStage .bw-dicebar {
    grid-column: 1; grid-row: 2;
    flex-direction: column !important; gap: 8px !important;
    padding: 6px 8px 10px !important;
    background: none !important; border: 0 !important;
  }
  #bwStage .bw-die { width: 46px !important; height: 46px !important; }
  #bwStage .bw-rollbtn { width: 100% !important; }
}

/* ── بورتريه: بطاقتان جنباً إلى جنب ثم اللوحة ثم شريط النرد ── */
@media (orientation: portrait) {
  #bwStage .bw-hud { padding: 6px 8px !important; gap: 6px !important; }
  #bwStage .bw-seat { padding: 6px 9px !important; }
  #bwStage .bw-seat .bw-avatar { width: 34px !important; height: 34px !important; }
  #bwStage .bw-seat .bw-seatscore { font-size: 21px !important; }
  #bwStage .bw-seat .bw-seatpip { font-size: 12.5px !important; }
  #bwStage .bw-seatname { font-size: 11.5px !important; }
  /* [v2.48.1] البطاقة ثلاثة أسطر في البورتريه أيضاً (اسم · Score · Pips):
     عنصر Pips موجودة داخل .bw-seatrow في الماركب، وكان الصف أفقياً (من 21-classic)
     ⇒ يتقلّص عرضه إلى 0 فيختفي. نجعل الصف عموداً كما في اللاندسكيب فلا يُقصّ ولا يختفي. */
  #bwStage .bw-seat .bw-seatrow { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
  #bwStage .bw-seat .bw-seatrow.end { align-items: flex-end !important; }
  #bwStage .bw-seat .bw-seatrow::before { order: 1; }
  #bwStage .bw-seat .bw-seatrow .bw-seatscore { order: 2; }
  #bwStage .bw-seat .bw-seatrow .bw-seatpip { order: 3; flex: 0 0 auto !important; white-space: nowrap; }
  #bwStage .bw-board { flex: 1 1 auto; min-height: 0; }
  #bwStage .bw-dicebar { flex: 0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v2.48-SEATS] المرحلة 3 — توزيع اللاعبين في الزوايا (لا حشر في الأعلى)
   ───────────────────────────────────────────────────────────────────────────
   العطل المُثبت: ترتيب DOM يضع الخصم أولاً و«أنا» ثانياً، وداخل حاوية RTL يصبح
   الأول في **اليمين** ⇒ الخصم يميناً وأنا يساراً (معكوس عن المرجع: الخصم يساراً).
   الإصلاح بالـ`order` فقط (لا تغيير DOM ⇒ لا كسر لأي منطق):
     بورتريه  ⇒ الخصم أعلى-يسار · شريط الحالة في الوسط · أنا أعلى-يمين (متباعدان)
     لاندسكيب ⇒ الخصم أعلى-يسار الطاولة · أنا أسفل-يمين فوق اليد
   ═══════════════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) {
  #dmStage .dm-hud {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px 0 !important;
  }
  #dmStage #dmSeatMe { order: 1; }                      /* RTL: الأول = اليمين = أنا */
  #dmStage .dm-hudmid { order: 2; flex: 0 1 auto !important; max-width: 46vw; }
  #dmStage #dmSeatOpp { order: 3; }                     /* الخصم: اليسار */
  #dmStage .dm-hudround { font-size: 9.5px !important; }
  #dmStage .dm-hudstatus { font-size: 11.5px !important; }
  /* بطاقة لاعب أفقية مضغوطة: أفاتار دائري + (الاسم فوق النقاط) */
  #dmStage .dm-seat { padding: 4px 10px 4px 4px !important; }
  #dmStage .dm-seat.me { padding: 4px 4px 4px 10px !important; }
  #dmStage .dm-seat .dm-avatar { width: 34px !important; height: 34px !important; font-size: 15px !important; }
  #dmStage .dm-seatname { font-size: 11px !important; }

  /* الطاولة الخضراء: تلميحا الطرفين لا يغطيان اليد */
  #dmStage .dm-endhint { height: 28px !important; min-width: 30px !important; font-size: 13px !important; }
}

@media (orientation: landscape) {
  /* تثبيت صريح للزوايا (كانا معكوسين بسبب ترتيب DOM في RTL) */
  #dmStage #dmSeatOpp { position: absolute !important; top: 8px; left: 12px !important; right: auto !important; }
}

/* ═══ الطاولة (bg): بطاقات اللاعبين في البورتريه — الخصم يساراً وأنا يميناً ═══ */
@media (orientation: portrait) {
  #bwStage .bw-hud { display: grid !important; grid-template-columns: 1fr 1fr !important; align-items: start !important; }
  #bwStage #bwSeatBot { order: 1; }        /* RTL: العمود الأول = اليمين = أنا */
  #bwStage #bwSeatTop { order: 2; }        /* الخصم: اليسار */
  #bwStage .bw-hudmid { order: 3; grid-column: 1 / -1; }
  #bwStage .bw-seat .bw-seatmeta { align-items: flex-start !important; }
  #bwStage #bwSeatBot .bw-seatmeta.end { align-items: flex-end !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v2.49-TAWLA] إصلاحات الطاولة (أمر المالك 2026-09-21)
   1) الفاصل الأوسط كان «خشبياً رفيعاً» (6px عرضاً ونصف ارتفاع اللوحة) في البورتريه
      واللاندسكيب ⇒ صار فاصلاً كاملاً: يمتد على كامل ارتفاع اللوحة بعرض ثابت محترم،
      بخشب متدرّج ومفصلتين نحاسيتين أعلى/أسفل (كطاولات الطاولة الحقيقية).
   2) النرد المضاعف: تكديس 4 نردات كان يفيض/يتشوّه ⇒ شبكة مرنة تلتف بانتظام مع
      إبقاء النقاط واضحة في كل الأوضاع (الداكن/المشع) وشارة ×2 خلفية.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) الفاصل الأوسط: كامل الارتفاع وواضح ── */
#bwStage .bw-points {
  grid-template-columns: repeat(6, 1fr) clamp(22px, 3.4vw, 34px) repeat(6, 1fr) !important;
}
#bwStage .bw-bar {
  grid-row: 1 / -1 !important;      /* يمتد على الصفّين — كان في صف واحد = نصف الارتفاع */
  grid-column: 7 !important;        /* عمود الفاصل بين النصفين */
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 2px !important;
  border-radius: 7px !important;
  border: 1px solid rgba(255, 226, 168, .34) !important;
  background:
    linear-gradient(90deg, rgba(255, 226, 168, .10), rgba(255, 226, 168, 0) 42%),
    linear-gradient(180deg, #7a4d27 0%, #5a3517 38%, #3a2410 72%, #291706 100%) !important;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, .55),
    inset 1px 0 0 rgba(255, 226, 168, .12),
    0 0 0 1px rgba(0, 0, 0, .35) !important;
}
/* مفصلات نحاسية: أعلى · وسط · أسفل ⇒ الفاصل يبدو قطعة واحدة مكتملة */
#bwStage .bw-bar::before, #bwStage .bw-bar::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 66%; height: 7px; border-radius: 3px;
  background: linear-gradient(180deg, #f7e0a6, #b8892f 55%, #6f4a12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
  pointer-events: none; z-index: 3;
}
#bwStage .bw-bar::before { top: 7%; }
#bwStage .bw-bar::after { bottom: 7%; }
/* المفصلة الوسطى (عنصر زخرفي في المنتصف) */
#bwStage .bw-bar .bw-bar-cnt { position: relative; z-index: 4; }
#bwStage .bw-bar .bw-chk { width: 84% !important; }
/* يفصل نصفَي اللوحة بصرياً: خط ظل على جانبَي الفاصل */
#bwStage .bw-col:nth-child(6) .bw-tri { box-shadow: 1px 0 6px rgba(0, 0, 0, .25); }
#bwStage .bw-col:nth-child(8) .bw-tri { box-shadow: -1px 0 6px rgba(0, 0, 0, .25); }

/* ── 2) النرد: النقاط واضحة دائماً (بما فيها المضاعف) ──
   [الجذر المُشخَّص حيّاً 2026-09-21] كان `padding: 15%` على النرد يُحسب من عرض
   الحاوية الأب (.bw-dice ≈ 100px) لا من النرد نفسه (46px) ⇒ 15px حشواً من كل جهة
   ⇒ محتوى الشبكة 16px ⇒ كل نقطة 4px فقط = «نرد أبيض بلا نقاط» تماماً كما في الشاشة.
   الحل: صفر حشو/فراغ، وكل نقطة دائرة 64% من خليّتها (≈21% من وجه النرد) —
   قياس داخلي لا يتأثر بحجم النرد ولا بأي حشو نسبي. */
#bwStage .bw-dice {
  display: flex !important; flex-wrap: wrap !important;
  justify-content: center !important; gap: 8px !important;
}
#bwStage .bw-die {
  padding: 0 !important; gap: 0 !important;
  place-items: center !important;
}
#bwStage .bw-die i {
  width: 64% !important; height: 64% !important; margin: auto !important;
  border-radius: 50% !important;
  background: rgba(70, 45, 20, .12) !important;              /* وجه النرد: نقطة خفيفة غير مُفعّلة */
}
#bwStage .bw-die i.on {
  background: radial-gradient(circle at 36% 30%, #4a3a22, #2b1d0c 78%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .32), 0 1px 1px rgba(0, 0, 0, .25) !important;
}
/* المضاعف: النردات الأربعة أصغر قليلاً كي لا تفيض، والنقاط تبقى ظاهرة */
/* [v2.74·نوكيا] صنف bw-dice-3 بدل :has() في الملف الحي — اللعبة مُزالة من الكتالوج (القواعد تبقى محفوظة للتواصل) */
#bwStage .bw-dice.bw-dice-3 {
  display: grid !important; grid-template-columns: repeat(2, auto) !important;  /* المضاعف 2×2 */
}
#bwStage .bw-dice.bw-dice-3 .bw-die {
  width: 44px !important; height: 44px !important; border-radius: 10px !important;
}
#bwStage .bw-die.dbl { outline: 2px solid rgba(242, 212, 137, .75) !important; outline-offset: 1px; }
@media (min-width: 700px) {
  #bwStage .bw-dice.bw-dice-3 .bw-die { width: 52px !important; height: 52px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v2.49-DOMINO] الضومنة (أمر المالك 2026-09-21)
   1) البساط الأخضر يملأ الشاشة 100% وكل عناصر اللعبة فوقه.
   2) قطع يد اللاعب أسفل الشاشة على البساط مباشرة — بلا حاوية ولا تدرّج قاتم.
   3) قطع الخصم أعلى الشاشة في الجهة المقابلة للاعب الرئيسي (لا على يمينه).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) الجوخ يملأ الشاشة: الطاولة طبقة خلفية تغطي المسرح كله ── */
/* ملاحظة: position:absolute إلزامي (من .dm-screen) — جعله relative يُخرج الشاشة من
   التموضع فينهار الارتفاع في اللاندسكيب (تجربة حيّة: h=0). */
/* التموضع للشاشة فقط — أمّا display فلا يُفرض إلا عند التفعيل، وإلا غطّت شاشة
   اللعب (كونها لاحقة في DOM) القائمة ومنعت النقر على «ابدأ المباراة». */
#dmStage #dmPlay { position: absolute !important; inset: 0 !important; }
#dmStage #dmPlay.dm-screen-active { display: flex !important; flex-direction: column !important; }
#dmStage .dm-table {
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  min-height: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; overflow: hidden !important;
}
#dmStage .dm-felt { inset: 0 !important; border-radius: 0 !important; }
#dmStage .dm-felt::after { display: none !important; }   /* لا إطار داخلي يقطع ملء الشاشة */
/* المسار في النطاق الأوسط: بين شريط الحالة وقطع اليد */
#dmStage .dm-chain { inset: 13% 20% 24% !important; }
@media (orientation: landscape) { #dmStage .dm-chain { inset: 17% 22% 35% !important; } }

/* ── 2) اليد على البساط مباشرة: بلا حاوية ولا خلفية قاتمة ── */
#dmStage .dm-handwrap {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 7 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 4px 2px !important;
  flex-direction: column !important; align-items: center !important; gap: 0 !important;
  pointer-events: none;   /* لا يحجب النقر عن الجوخ… */
}
#dmStage .dm-handwrap > * { pointer-events: auto; }   /* …إلا القطع والأدوات */
#dmStage .dm-hand {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; overflow: visible !important;
}
#dmStage .dm-hand.myturn { box-shadow: none !important; }

/* ── 3) قطع الخصم: أعلى الشاشة مقابل اللاعب (كانت رزمة رأسية على اليمين) ── */
#dmStage .dm-opprow {
  position: absolute !important;
  top: 62px !important; bottom: auto !important;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important; max-width: 94vw !important; max-height: none !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center !important;
  gap: 3px !important; padding: 4px 8px !important;
  background: none !important; border: 0 !important;
  overflow: visible !important; z-index: 8 !important;
}
#dmStage .dm-opprow > .dm-back { width: 24px !important; height: 46px !important; margin: 0 !important; }
/* «لاعبان — جهاز واحد»: يد اللاعب الثاني تُعرض هنا وتحتاج النقر ⇒ حجم صغير صريح */
#dmStage .dm-opprow > .dm-htile { width: 24px !important; height: 46px !important; }
@media (orientation: landscape) { #dmStage .dm-opprow { top: 58px !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   [v2.49-ART] جودة القطع: رسم واقعي متعدد الطبقات (أمر المالك: «عالية الجودة
   مرسومة بدقة واحترافية وواقعية»). كل القطع CSS خالص — بلا أصول جديدة،
   فتتناسق مع كل الثيمات والأحجام. الطبقات: سماكة حقيقية (حافة مضيئة أعلى +
   ظل داخلي أسفل)، لمعان زجاجي قطري، ظلّان خارجيان للعمق، ونقاط محفورة فعلية
   (حلقة داكنة + قاع متدرّج + لمعة صغيرة).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) قطعة الضومنة: عاج بسمك ولمعان ── */
#dmStage .dm-tile, #dmStage .dm-htile, #dmStage .dm-opprow .dm-htile {
  background:
    linear-gradient(158deg, rgba(255, 253, 244, .95) 0%, rgba(250, 243, 224, .92) 38%, rgba(232, 220, 191, .95) 100%) !important;
  border: 1px solid rgba(84, 60, 26, .62) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset,                        /* حافة مضيئة أعلى */
    0 -1px 0 rgba(150, 120, 66, .35) inset,                        /* حافة داكنة أسفل */
    0 0 0 1px rgba(255, 255, 255, .35) inset,                      /* هالة داخلية */
    -2px -3px 6px rgba(120, 90, 40, .22) inset,                    /* سماكة داخلية */
    0 2px 3px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .38) !important;  /* ظلّان */
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
/* لمعان زجاجي قُطري (لا يلتقط النقر) */
#dmStage .dm-tile::after, #dmStage .dm-htile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 26%,
              rgba(255, 255, 255, 0) 48%, rgba(120, 90, 40, .10) 100%);
  border-radius: inherit;
}
#dmStage .dm-tile.k-turn, #dmStage .dm-tile.k-dbl {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .95) inset, 0 0 0 1px rgba(255, 255, 255, .35) inset,
    -2px -3px 6px rgba(120, 90, 40, .22) inset,
    0 3px 5px rgba(0, 0, 0, .4), 0 8px 18px rgba(0, 0, 0, .42) !important;
}
/* الخط الفاصل بين نصفَي القطعة: محفور لا مرسوم */
#dmStage .dm-sep {
  border-top: 0 !important;
  height: 2px !important;
  background: linear-gradient(180deg, rgba(90, 66, 30, .55), rgba(255, 255, 255, .5)) !important;
  border-radius: 1px;
}
/* النقاط: حفرة حقيقية — حلقة داكنة + قاع متدرّج + لمعة صغيرة */
#dmStage .dp-cell.on,
#dmStage .dm-hand .dm-htile:disabled .dp-cell.on,
#dmStage .dm-tile .dp-cell.on {
  background:
    radial-gradient(circle at 38% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 52%, #4a3a22 0%, #2b1d0c 62%, #140d04 100%) !important;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, .55) inset,
    0 -1px 1px rgba(255, 236, 200, .22) inset,
    0 1px 0 rgba(255, 255, 255, .45) !important;
}
#dmStage .dp-cell:not(.on) {
  background: radial-gradient(circle at 42% 36%, rgba(90, 66, 30, .13), rgba(90, 66, 30, .05)) !important;
  box-shadow: inset 0 1px 1px rgba(120, 92, 44, .18) !important;
}

/* ── 2) ظهر قطعة الخصم: نفس سماكة العاج ── */
#dmStage .dm-opprow .dm-back {
  background: linear-gradient(156deg, #fdf8ea 0%, #f0e6cd 46%, #d8c9a5 100%) !important;
  border: 1px solid rgba(84, 60, 26, .5) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset, 0 -1px 0 rgba(150, 120, 66, .3) inset,
    0 2px 4px rgba(0, 0, 0, .38), 0 5px 12px rgba(0, 0, 0, .3) !important;
  border-radius: 5px !important;
  overflow: hidden;
}
#dmStage .dm-opprow .dm-back::after {
  content: ''; position: absolute; inset: 3px; border-radius: 3px;
  border: 1px solid rgba(150, 120, 66, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ── 3) أحجار الطاولة: حلقة داخلية ولمعة أعلى-يسار وظلّان ── */
#bwStage .bw-chk.w {
  background:
    radial-gradient(circle at 32% 26%, #ffffff 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 36% 30%, #fffdf4 0%, #f3ead6 42%, #d6c8a6 76%, #b3a077 100%) !important;
  border: 1px solid rgba(90, 66, 30, .55) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .5) inset,
    0 -3px 6px rgba(130, 100, 50, .3) inset,
    0 3px 6px rgba(0, 0, 0, .45), 0 7px 16px rgba(0, 0, 0, .4) !important;
  color: #4a3213 !important;
}
#bwStage .bw-chk.b {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 245, 220, .35) 0%, rgba(255, 245, 220, 0) 38%),
    radial-gradient(circle at 36% 30%, #574838 0%, #3a3026 46%, #171208 80%, #070503 100%) !important;
  border: 1px solid rgba(200, 154, 78, .5) !important;
  box-shadow:
    0 0 0 2px rgba(242, 212, 137, .22) inset,
    0 -3px 6px rgba(0, 0, 0, .55) inset,
    0 3px 6px rgba(0, 0, 0, .5), 0 7px 16px rgba(0, 0, 0, .45) !important;
}

/* النقاط بحجم محسوس: كان الحشو/الفراغ النسبي (11% / 5% من عرض النصف) يحصر
   النقطة في ~5px على قطعة بعرض 24px فتبدو النقوش باهتة بلا تفاصيل. */
#dmStage .dm-half { padding: 7% !important; gap: 3.5% !important; }
#dmStage .dm-tile .dm-sep, #dmStage .dm-htile .dm-sep { margin: 0 10% !important; }

/* ═══════════════════ 4) الضومنة — تصميم v2.52 الاحترافي متعدد اللاعبين ═══════════════════
   مطابق تماماً لمتطلبات المالك والنماذج المرجعية (بورتريه ولاندسكيب):
   • توزيع اللاعبين على منتصفات هوامش الشاشة الأربعة:
     - المقعد الرئيسي (أنت) في منتصف الأسفل
     - الخصم 1 في منتصف الضلع الأيسر
     - الخصم 2 في منتصف الضلع العلوي
     - الخصم 3 في منتصف الضلع الأيمن
   • إظهار القطع المقلوبة لكل خصم بجانبه (صف عاجي فاخر).
   • تدفق السلسلة طولياً (رأسياً) في البورتريه وعرضياً (أفقياً) في اللاندسكيب (الاتجاه الأطول).
   • بطاقة المباراة R1 T100 في الزاوية العلوية والبنك في الزاوية السفلية دون أي تداخل.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ── 1) الطاولة والجوخ والسلسلة ── */
#dmStage .dm-table {
  position: absolute !important; inset: 0 !important; z-index: 1 !important;
  background: none !important; border: 0 !important; overflow: hidden !important;
}
#dmStage .dm-felt {
  position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(130% 105% at 50% 50%, #2a684b 0%, #1a4a34 50%, #0f3022 100%) !important;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55) !important;
}
#dmStage .dm-chain {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}
@media (orientation: portrait) {
  #dmStage .dm-chain {
    top: 72px !important; bottom: 170px !important; left: 36px !important; right: 36px !important;
  }
}
@media (orientation: landscape) {
  #dmStage .dm-chain {
    top: 48px !important; bottom: 76px !important; left: 55px !important; right: 55px !important;
  }
}

/* قطع السلسلة: تموضع مطلق إلزامي متراص */
#dmStage .dm-chain .dm-tile {
  position: absolute !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 5px !important;
  pointer-events: none !important;
}
#dmStage .dm-chain .dm-tile.can {
  background: linear-gradient(150deg, #ffe873, #e8c531) !important;
  border-color: #c9a326 !important;
  box-shadow: 0 0 18px rgba(255, 220, 80, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* ── 2) شارات اللاعبين الدائرية والتوهج الأخضر ── */
#dmStage .dm-seat {
  position: absolute !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#dmStage .dm-seatname { display: none !important; }
#dmStage .dm-seat .dm-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
  color: #f1f5f9 !important;
  transition: all 0.25s ease !important;
}
#dmStage #dmSeatOpp .dm-avatar {
  background: linear-gradient(145deg, #1e3a5f, #0f2338) !important;
  color: #93c5fd !important;
}
#dmStage #dmSeat2 .dm-avatar {
  background: linear-gradient(145deg, #4c1d95, #2e1065) !important;
  color: #c4b5fd !important;
}
#dmStage #dmSeat3 .dm-avatar {
  background: linear-gradient(145deg, #78350f, #451a03) !important;
  color: #fde68a !important;
}
#dmStage #dmSeatMe .dm-avatar {
  background: linear-gradient(145deg, #064e3b, #022c22) !important;
  color: #6ee7b7 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* التوهج الأخضر الناصع = دور اللاعب النشط */
#dmStage .dm-seat.myturn .dm-avatar {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3.5px #22c55e, 0 0 18px rgba(34, 197, 94, 0.9) !important;
  transform: scale(1.08) !important;
}

/* شارة النقاط تحت الأيقونة */
#dmStage .dm-seatscore {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #fef08a !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
  border-radius: 9px !important;
  padding: 1px 7px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45) !important;
  line-height: 1.3 !important;
}

#dmStage .dm-ptimer {
  display: inline-block;
  margin-inline-start: 4px;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 9px !important;
  padding: 1px 5px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
#dmStage .dm-ptimer.dm-time-low { color: #ff5252 !important; animation: dmPulseTime 1s infinite alternate; }
@keyframes dmPulseTime { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ── 3) قطع الخصوم المقلوبة (العاج الفاخر) ── */
#dmStage .dm-opprow, #dmStage .dm-opptiles {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: none !important;
  border: 0 !important;
  margin-top: 3px !important;
  pointer-events: none !important;
}
#dmStage .dm-opprow {
  flex-direction: row !important;
}
#dmStage .dm-opptiles-v {
  flex-direction: column !important;
}
#dmStage .dm-opprow > .dm-back {
  width: 20px !important;
  height: 36px !important;
  flex: 0 0 auto !important;
  border-radius: 4px !important;
  background: linear-gradient(155deg, #ffffff 0%, #f4ede0 45%, #e2d4b5 100%) !important;
  border: 1px solid rgba(84, 60, 26, 0.6) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative !important;
}
#dmStage .dm-opprow > .dm-back::after {
  content: ''; position: absolute; inset: 2.5px; border-radius: 2px;
  border: 1px solid rgba(150, 120, 66, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#dmStage .dm-opptiles-v > .dm-back {
  width: 28px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  border-radius: 3px !important;
  background: linear-gradient(155deg, #ffffff 0%, #f4ede0 45%, #e2d4b5 100%) !important;
  border: 1px solid rgba(84, 60, 26, 0.6) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  position: relative !important;
}
#dmStage .dm-opptiles-v > .dm-back::after {
  content: ''; position: absolute; inset: 2px; border-radius: 1.5px;
  border: 1px solid rgba(150, 120, 66, 0.35);
}

/* ── 4) بطاقة المباراة (R1 T100) والبنك ── */
#dmStage .dm-matchcard {
  position: absolute !important;
  z-index: 10 !important;
  top: 10px !important;
  left: 10px !important;
  display: flex !important;
  align-items: center !important;
}
#dmStage .dm-rt {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #15803d 0%, #166534 50%, #14532d 100%) !important;
  border: 1px solid rgba(250, 204, 21, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  padding: 4px 10px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  white-space: nowrap !important;
}

#dmStage .dm-boneyard {
  position: absolute !important;
  z-index: 10 !important;
  top: 186px !important;
  left: 10px !important;
  bottom: auto !important;
  right: auto !important;
  padding: 5px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  background: linear-gradient(145deg, rgba(20, 30, 24, 0.94), rgba(10, 16, 12, 0.96)) !important;
  border: 1.5px solid rgba(200, 154, 78, 0.55) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
}
#dmStage .dm-by-stack {
  position: relative !important;
  width: 20px !important;
  height: 28px !important;
}
#dmStage .dm-by-count {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--dm-goldtext) !important;
}
#dmStage .dm-by-label {
  display: block !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #fde68a !important;
}

/* زر التمرير الذهبي المستقل المشع — أسفل اليسار بعيداً تماماً عن الأفاتارات واليد */
#dmStage #dmPassBtn {
  position: absolute !important;
  left: 12px !important;
  bottom: 12px !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 15px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #241703 !important;
  background: linear-gradient(135deg, #fce08a 0%, #e5b94c 50%, #b88a2a 100%) !important;
  border: 1.5px solid rgba(255, 240, 180, 0.9) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 16px rgba(229, 185, 76, 0.8), 0 3px 8px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  animation: dmPassGlow 1.4s infinite !important;
}
#dmStage #dmPassBtn[hidden] {
  display: none !important;
}
#dmStage .dm-seat[hidden],
#dmStage #dmSeat2[hidden],
#dmStage #dmSeat3[hidden] {
  display: none !important;
}
@keyframes dmPassGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(229, 185, 76, 0.7), 0 3px 8px rgba(0, 0, 0, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 24px rgba(255, 220, 80, 0.95), 0 4px 12px rgba(0, 0, 0, 0.6); transform: scale(1.05); }
}

/* زر الخروج الذهبي العائم — زاوية 90° علوية يمنى بدقة */
body.app-fs-on .game-fs-exit {
  top: 10px !important;
  right: 10px !important;
  z-index: 5100 !important;
}

/* ── 5) توزيع اللاعبين على منتصفات هوامش الشاشة (أمر المالك) ── */
/* وضع البورتريه (العمودي) */
@media (orientation: portrait) {
  #dmStage .dm-chain {
    top: 72px !important; bottom: 170px !important; left: 36px !important; right: 36px !important;
  }
  #dmStage .dm-boneyard {
    top: 186px !important; left: 10px !important; bottom: auto !important; right: auto !important;
  }

  /* اللاعب الرئيسي: في الوسط فوق أوراق يده مباشرة بارتفاع متناسق (+25px) */
  #dmStage #dmSeatMe {
    bottom: 109px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 !important;
    pointer-events: auto !important;
    order: 0 !important;
  }
  #dmStage .dm-handwrap {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }
  #dmStage .dm-handwrap > * {
    pointer-events: auto !important;
  }
  #dmStage .dm-hand {
    order: 2 !important;
  }

  /* الخصم 1 (اليسار): قطعه بمحاذاة الضلع الأيسر للشاشة والأيقونة في يمين قطعه متجهة نحو الطاولة */
  #dmStage #dmSeatOpp.seat-left {
    left: 4px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important;
    align-items: center !important; justify-items: center !important; direction: ltr !important; gap: 3px 8px !important;
  }
  #dmStage #dmSeatOpp.seat-left .dm-opptiles { grid-column: 1 !important; grid-row: 1 / span 3 !important; margin: 0 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-avatar { grid-column: 2 !important; grid-row: 1 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-seatmeta { grid-column: 2 !important; grid-row: 2 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-tilebadge { grid-column: 2 !important; grid-row: 3 !important; }

  /* في وضع لاعبَين: الخصم في منتصف الأعلى والقطع فوق الأفاتار */
  #dmStage #dmSeatOpp.seat-2p-top {
    top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important;
  }
  #dmStage #dmSeatOpp.seat-2p-top .dm-opptiles { order: 1 !important; flex-direction: row !important; margin: 0 0 2px 0 !important; }
  #dmStage #dmSeatOpp.seat-2p-top .dm-opptiles > .dm-back {
    width: 20px !important;
    height: 36px !important;
  }
  #dmStage #dmSeatOpp.seat-2p-top .dm-opptiles > .dm-back::after {
    inset: 1px !important;
  }
  #dmStage #dmSeatOpp.seat-2p-top .dm-avatar { order: 2 !important; }
  #dmStage #dmSeatOpp.seat-2p-top .dm-seatmeta { order: 3 !important; }
  #dmStage #dmSeatOpp.seat-2p-top .dm-tilebadge { order: 4 !important; }

  /* الخصم 2: منتصف الضلع العلوي — الأفاتار تحت قطعه */
  #dmStage #dmSeat2 {
    top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important;
  }
  #dmStage #dmSeat2 .dm-opprow { order: 1 !important; margin: 0 0 2px 0 !important; position: static !important; transform: none !important; }
  #dmStage #dmSeat2 .dm-avatar { order: 2 !important; }
  #dmStage #dmSeat2 .dm-seatmeta { order: 3 !important; }
  #dmStage #dmSeat2 .dm-tilebadge { order: 4 !important; }

  /* الخصم 3 (اليمين): منتصف الضلع الأيمن — الأفاتار يسار قطعه وقطعه بمحاذاة الضلع الأيمن للشاشة */
  #dmStage #dmSeat3 {
    right: 4px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: grid !important; grid-template-columns: auto auto !important; grid-template-rows: auto auto !important;
    align-items: center !important; justify-items: center !important; direction: ltr !important; gap: 3px 8px !important;
  }
  #dmStage #dmSeat3 .dm-avatar { grid-column: 1 !important; grid-row: 1 !important; }
  #dmStage #dmSeat3 .dm-seatmeta { grid-column: 1 !important; grid-row: 2 !important; }
  #dmStage #dmSeat3 .dm-tilebadge { grid-column: 1 !important; grid-row: 3 !important; }
  #dmStage #dmSeat3 .dm-opptiles { grid-column: 2 !important; grid-row: 1 / span 3 !important; margin: 0 !important; }
}

/* وضع اللاندسكيب (الأفقي): إبعاد الشارات والأوراق إلى الحواف لتفريغ طاولة اللعب
   [v2.70·نوكيا] بدائل vh ثم dvh بـ@supports */
@media (orientation: landscape) {
  #dmStage {
    --dm-tile-h: clamp(30px, min(24vh, calc(((100vw - 180px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 88px);
  }
  @supports (height: 100dvh) {
    #dmStage { --dm-tile-h: clamp(30px, min(24dvh, calc(((100vw - 180px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 88px); }
  }
  #dmStage .dm-chain {
    top: 48px !important; bottom: 76px !important; left: 55px !important; right: 55px !important;
  }
  /* البنك: زاوية الشاشة 90 درجة في الأسفل على اليسار */
  #dmStage .dm-boneyard {
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
  }
  /* زر التمرير الذهبي: مباشرة فوق البنك عند ظهوره في اللاندسكيب */
  #dmStage #dmPassBtn {
    left: 12px !important;
    bottom: 84px !important;
  }

  /* اللاعب الرئيسي: الأفاتار في صف أفقي بجوار قطعه في الأسفل تماماً كالخصم العلوي */
  #dmStage .dm-handwrap {
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 0 16px max(4px, env(safe-area-inset-bottom, 4px)) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    direction: ltr !important;
    pointer-events: none !important;
  }
  #dmStage .dm-handwrap > * {
    pointer-events: auto !important;
  }
  #dmStage #dmSeatMe {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    direction: ltr !important;
    flex-shrink: 0 !important;
    order: 2 !important;
  }
  #dmStage #dmSeatMe .dm-avatar {
    order: 1 !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }
  #dmStage #dmSeatMe .dm-seatmeta {
    order: 2 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
  }
  #dmStage .dm-hand {
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  #dmStage .dm-tools {
    order: 3 !important;
  }

  /* الخصم الأيمن (الخصم 3): بمحاذاة الضلع الأيمن والأفاتار تحت قطعه */
  #dmStage #dmSeat3 {
    right: 6px !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
  }
  #dmStage #dmSeat3 .dm-opptiles { order: 1 !important; margin: 0 0 3px 0 !important; }
  #dmStage #dmSeat3 .dm-avatar { order: 2 !important; }
  #dmStage #dmSeat3 .dm-seatmeta { order: 3 !important; }
  #dmStage #dmSeat3 .dm-tilebadge { order: 4 !important; }

  /* الخصم الأيسر (الخصم 1): بمحاذاة الضلع الأيسر والأفاتار تحت قطعه */
  #dmStage #dmSeatOpp.seat-left {
    left: 6px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
  }
  #dmStage #dmSeatOpp.seat-left .dm-opptiles { order: 1 !important; margin: 0 0 3px 0 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-avatar { order: 2 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-seatmeta { order: 3 !important; }
  #dmStage #dmSeatOpp.seat-left .dm-tilebadge { order: 4 !important; }

  /* الخصم العلوي (الخصم 2 أو لاعبين): بمحاذاة الضلع العلوي والأفاتار على يمين القطع */
  #dmStage #dmSeat2,
  #dmStage #dmSeatOpp.seat-2p-top {
    top: 6px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    direction: ltr !important;
    gap: 8px !important;
  }
  #dmStage #dmSeat2 .dm-opprow,
  #dmStage #dmSeatOpp.seat-2p-top .dm-opptiles {
    order: 1 !important;
    margin: 0 !important;
    flex-direction: row !important;
    position: static !important;
    transform: none !important;
  }
  #dmStage #dmSeat2 .dm-avatar,
  #dmStage #dmSeatOpp.seat-2p-top .dm-avatar {
    order: 2 !important;
  }
  #dmStage #dmSeat2 .dm-seatmeta,
  #dmStage #dmSeatOpp.seat-2p-top .dm-seatmeta {
    order: 3 !important;
  }
  #dmStage #dmSeat2 .dm-tilebadge,
  #dmStage #dmSeatOpp.seat-2p-top .dm-tilebadge {
    order: 4 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [v2.57-DOMINO] لاندسكيب فقط
   البورتريه يعود إلى توزيعه السابق؛ التعديلان المطلوبان هنا محصوران في الشاشة
   الأفقية: البنك في الركن السفلي الأيسر، وشارة اللاعب ملاصقة لليد.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) {
  #dmStage {
    /* [v2.70·نوكيا] بدائل vh ثم dvh بـ@supports */
    --dm-tile-h: clamp(30px, min(24vh, calc(((100vw - 180px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 88px);
  }
  @supports (height: 100dvh) {
    #dmStage { --dm-tile-h: clamp(30px, min(24dvh, calc(((100vw - 180px) / var(--dm-hand-count, 7) - 6px) * 1.85)), 88px); }
  }
  /* البنك داخل الطاولة التي تملأ #dmPlay، لذلك هذه إحداثيات الركن الحقيقي للشاشة. */
  #dmStage #dmTable > #dmBoneyard,
  #dmStage .dm-boneyard {
    top: auto !important;
    right: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    transform: none !important;
    z-index: 40 !important;
  }
  /* زر المرور فوق البنك عند ظهوره، من دون تحريك البنك نفسه. */
  #dmStage #dmPlay #dmPassBtn {
    bottom: 84px !important;
    left: 12px !important;
  }

  /* لا نترك #dmHand يتمدد بعرض الشريط؛ عندها تهرب شارة «أنا» إلى الطرف الآخر. */
  #dmStage #dmPlay > .dm-handwrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important;
    direction: ltr !important;
  }
  #dmStage #dmPlay > .dm-handwrap > #dmHand {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 76px) !important;
    justify-content: flex-end !important;
    overflow: visible !important;
  }
  #dmStage #dmPlay > .dm-handwrap > #dmSeatMe {
    position: static !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    direction: ltr !important;
  }
  #dmStage #dmPlay > .dm-handwrap > #dmSeatMe .dm-avatar {
    width: 38px !important;
    height: 38px !important;
  }
  #dmStage #dmPlay > .dm-handwrap > .dm-tools {
    order: 3 !important;
    flex: 0 0 auto !important;
  }
}