/* ════════════════════════════════════════════════════════════════════
   البلوت (Baloot) — الهوية البصرية DTSG
   كحلي زليج × ذهب دكاء × نحاسي — كلاسات معزولة bl-
   تعمل داخل المنصة (#gamePageBody) ومستقلة (index.html)
   ════════════════════════════════════════════════════════════════════ */

.bl-stage {
  --bl-bg: #0b1526;
  --bl-bg2: #101d31;
  --bl-bg3: #16263c;
  --bl-card: #111c30;
  --bl-bd: #24354f;
  --bl-bd2: #3c5075;
  --bl-gold: #d9b45c;
  --bl-gold2: #f2d489;
  --bl-copper: #b8892f;
  --bl-copper2: #8c6a2a;
  --bl-silver: #a6aab4;
  --bl-ink: #e9e2cf;
  --bl-t2: #9aa5b8;
  --bl-t3: #66708a;
  --bl-red: #b32536;
  --bl-ivory: #f8f2e2;
  --bl-ivory2: #f4ecd8;
  --bl-green: #34d399;
  --bl-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  --bl-shadow-gold: 0 0 22px rgba(217, 180, 92, 0.35);
  --bl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bl-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bl-font: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --bl-font-display: 'Orbitron', 'Cairo', sans-serif;
  --bl-cw: clamp(44px, min(11.5vw, 17vh), 88px);      /* عرض ورقة اليد */
  --bl-tw: clamp(42px, min(11vw, 15vh), 80px);        /* عرض ورقة الأكلة */
  --bl-fan-step: clamp(24px, 7.6vw, 52px);
  --bl-obw: var(--bl-cw);                 /* [Fans-2] ورقة الخصم = حجم ورقة اليد الرئيسية */
  --bl-ostat: var(--bl-fan-step);         /* [Fans-2] خطوة قوس سلاسل الخصوم */

  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% 40%, rgba(28, 58, 99, 0.5) 0%, rgba(13, 30, 54, 0.72) 45%, rgba(7, 15, 28, 0.96) 100%),
    #0a1626;
  color: var(--bl-ink);
  font-family: var(--bl-font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#gamePageBody .bl-stage { height: 100%; }

.bl-stage .bl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bl-stage * { box-sizing: border-box; }

/* ═══════════ الشاشات ═══════════ */
.bl-scene { position: absolute; inset: 0; }
.bl-screen { display: none; position: absolute; inset: 0; overflow: hidden; }
.bl-screen.bl-screen-active { display: block; }

/* ═══════════════════════════════════════════════
   شاشة القائمة
   ═══════════════════════════════════════════════ */
.bl-menu-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 34% at 50% 0%, rgba(217, 180, 92, 0.13), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9b45c' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M32 8 L38 26 L56 32 L38 38 L32 56 L26 38 L8 32 L26 26 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.bl-menuwrap {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  scrollbar-width: thin; scrollbar-color: rgba(217, 180, 92, 0.3) transparent;
}
.bl-menuwrap::-webkit-scrollbar { width: 5px; }
.bl-menuwrap::-webkit-scrollbar-thumb { background: rgba(217, 180, 92, 0.3); border-radius: 4px; }

.bl-menuhead { text-align: center; margin: 4px 0 14px; }
.bl-menucards { display: flex; justify-content: center; gap: 7px; margin-bottom: 8px; }
.bl-mcard {
  width: 34px; height: 52px; border-radius: 7px; position: relative;
  background: linear-gradient(165deg, #1c3a63, #0e2240);
  border: 1px solid rgba(217, 180, 92, 0.55);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(217, 180, 92, 0.15);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-9deg);
}
.bl-mcard svg { width: 20px; height: 20px; }
.bl-mcard.m1 svg { fill: var(--bl-gold); }
.bl-mcard.m2 { transform: rotate(0deg) translateY(3px); }
.bl-mcard.m2 svg { fill: var(--bl-red); }
.bl-mcard.m3 { transform: rotate(9deg); }
.bl-mcard.m3 svg { fill: var(--bl-gold2); }
.bl-menutitle {
  font-size: clamp(30px, 7vw, 42px); font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #f2d489, #d9b45c 55%, #b8892f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 12px rgba(217, 180, 92, 0.35));
}
.bl-menutag { color: var(--bl-t2); font-size: 12.5px; margin-top: 2px; }

/* بطاقة الإعدادات */
.bl-menucard {
  position: relative; width: 100%; max-width: 420px;
  padding: 18px 18px 20px;
  background: linear-gradient(165deg, #13223a 0%, #0d1830 100%);
  border: 1px solid rgba(217, 180, 92, 0.4);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(242, 212, 137, 0.07), var(--bl-shadow);
}
.bl-field { margin: 13px 0; }
.bl-flabel {
  font-size: 12px; font-weight: 800; color: var(--bl-gold2);
  margin-bottom: 6px; letter-spacing: 0.3px;
}
.bl-mdesc { font-size: 11.5px; color: var(--bl-t3); margin-top: 5px; }
.bl-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-segbtn {
  flex: 1 1 auto; min-width: 64px; padding: 9px 8px; cursor: pointer;
  background: rgba(9, 17, 31, 0.72); color: var(--bl-t2);
  border: 1px solid rgba(217, 180, 92, 0.28); border-radius: 9px;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  transition: all 0.16s var(--bl-ease);
}
.bl-segbtn:hover { border-color: rgba(217, 180, 92, 0.6); color: var(--bl-ink); }
.bl-segbtn.selected {
  background: linear-gradient(150deg, rgba(217, 180, 92, 0.26), rgba(163, 116, 42, 0.16));
  border-color: var(--bl-gold); color: var(--bl-gold2);
  box-shadow: 0 0 12px rgba(217, 180, 92, 0.22), inset 0 0 0 1px rgba(242, 212, 137, 0.18);
}

/* الرهان */

/* طي إعدادات الطاولة */
.bl-foldhead { cursor: pointer; }
.bl-foldhead.open { color: var(--bl-ink); }
.bl-foldbody {
  padding: 10px 12px 4px; margin-top: 8px;
  background: rgba(9, 17, 31, 0.5); border: 1px solid rgba(36, 53, 79, 0.8);
  border-radius: 10px;
}
.bl-checkrow {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 10px;
  cursor: pointer; font-size: 12px; color: var(--bl-t2); line-height: 1.45;
}
.bl-checkrow input { position: absolute; opacity: 0; pointer-events: none; }
.bl-checkmark {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 5px;
  border: 1.5px solid rgba(217, 180, 92, 0.5); background: rgba(9, 17, 31, 0.8);
  position: relative; transition: all 0.15s;
}
.bl-checkrow input:checked + .bl-checkmark {
  background: linear-gradient(135deg, #f2d489, #b8892f); border-color: var(--bl-gold);
}
.bl-checkrow input:checked + .bl-checkmark::after {
  content: ''; position: absolute; inset: 3px 4px 5px;
  border-left: 2.4px solid #1a1206; border-bottom: 2.4px solid #1a1206;
  transform: rotate(-48deg) translateY(-1px);
}
.bl-checkrow small { color: var(--bl-t3); font-size: 10.5px; }

/* زر البدء */
.bl-go {
  width: 100%; margin-top: 16px; padding: 13px 18px; cursor: pointer;
  background: linear-gradient(135deg, #f2d489 0%, #d9b45c 45%, #b8892f 100%);
  color: #211503; border: none; border-radius: 11px;
  font-family: inherit; font-size: 16px; font-weight: 900; letter-spacing: 0.4px;
  box-shadow: 0 6px 20px rgba(217, 180, 92, 0.35);
  transition: transform 0.14s var(--bl-ease), box-shadow 0.2s;
}
.bl-go:hover { box-shadow: 0 8px 26px rgba(217, 180, 92, 0.5); }
.bl-go:active { transform: scale(0.985); }
.bl-go2 {
  width: 100%; margin-top: 8px; padding: 11px 18px; cursor: pointer;
  background: rgba(9, 17, 31, 0.7); color: var(--bl-t2);
  border: 1px solid rgba(217, 180, 92, 0.35); border-radius: 11px;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  transition: all 0.15s;
}
.bl-go2:hover { color: var(--bl-ink); border-color: rgba(217, 180, 92, 0.65); }

/* ═══════════════════════════════════════════════
   الطاولة
   ═══════════════════════════════════════════════ */
.bl-table { position: absolute; inset: 0; }
/* [R13] طلب المالك: إزالة الشريط الذهبي المحيط — أرضية اللعبة تملأ الشاشة بلا إطار */
.bl-table::after { display: none !important; }
.bl-table.bl-shake { animation: blShake 0.5s var(--bl-ease); }
@keyframes blShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(calc(var(--bl-shake-px, 8px) * -0.6), calc(var(--bl-shake-px, 8px) * 0.4)); }
  30% { transform: translate(var(--bl-shake-px, 8px), calc(var(--bl-shake-px, 8px) * -0.5)); }
  45% { transform: translate(calc(var(--bl-shake-px, 8px) * -0.7), calc(var(--bl-shake-px, 8px) * 0.3)); }
  60% { transform: translate(calc(var(--bl-shake-px, 8px) * 0.5), calc(var(--bl-shake-px, 8px) * 0.5)); }
  80% { transform: translate(calc(var(--bl-shake-px, 8px) * -0.25), 0); }
}

.bl-felt {
  position: absolute; inset: 0; pointer-events: none;
  /* [R10] طلب المالك: أرضية زرقاء معتمة نظيفة — كان القماش شبه شفاف
     فتظهر الخلفية البنية للمسرح من خلاله؛ الآن أزرق صافٍ بلا تشوه */
  background:
    radial-gradient(52% 40% at 50% 46%, rgba(58, 106, 176, 0.22) 0%, transparent 62%),
    radial-gradient(105% 75% at 50% 42%, rgba(30, 64, 112, 0.4) 0%, rgba(14, 32, 58, 0.1) 48%, rgba(6, 13, 25, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9b45c' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M32 8 L38 26 L56 32 L38 38 L32 56 L26 38 L8 32 L26 26 Z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(165deg, #103055 0%, #0a2140 55%, #081a33 100%);
}
.bl-emblem {
  position: absolute; left: 50%; top: 44%;
  width: min(58vw, 340px); height: min(58vw, 340px);
  transform: translate(-50%, -50%);
  opacity: 0.5; pointer-events: none;
}
.bl-emblem svg { width: 100%; height: 100%; }
.bl-emblem path { stroke: rgba(217, 180, 92, 0.16); fill: none; }

/* ── لوغو المنصة في منتصف الطاولة (خامة خفيفة لا تحجب اللعب) ── */
.bl-tablelogo {
  position: absolute; left: 50%; top: 44%;
  width: min(44vw, 220px); height: min(44vw, 220px);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.20; pointer-events: none; z-index: 12;
  filter: drop-shadow(0 0 26px rgba(217, 180, 92, 0.14));
}
.bl-tablelogo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.5));
}

/* ── لوحة النتائج ── */
.bl-hud {
  position: absolute; top: 0; inset-inline: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: calc(8px + env(safe-area-inset-top)) 10px 0;
  gap: 6px;
}
.bl-hudside {
  padding: 5px 10px 7px; min-width: 74px; text-align: center;
  border: none; background: transparent; box-shadow: none;
}
.bl-hud-us { border: none; }
.bl-hud-them { border: none; }
.bl-hudlabel { font-size: 10px; font-weight: 800; color: var(--bl-t3); letter-spacing: 0.4px; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.bl-hudscore {
  font-family: var(--bl-font-display); font-size: clamp(17px, 4.6vw, 24px);
  font-weight: 900; color: var(--bl-ink); line-height: 1.15;
  text-shadow: 0 2px 7px rgba(0,0,0,0.9);
}
.bl-hud-us .bl-hudscore { color: var(--bl-gold2); }
.bl-hudsub { font-size: 9.5px; color: var(--bl-t3); font-family: var(--bl-font-display); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.bl-hudcenter {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px;
}
.bl-hudround {
  font-size: 13px; font-weight: 900; color: var(--bl-gold2);
  background: transparent; border: none; padding: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}
.bl-hudtrump {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 800; color: var(--bl-gold);
  background: transparent; border: none; padding: 0;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.bl-hudtrump svg { width: 13px; height: 13px; fill: currentColor; }

/* ── المقاعد [Fans-2] ──
   سلسلة كل خصم مقوّسة بنفس انحناء وحجم أوراق اللاعب الرئيسي،
   والقوس البارز (الطويل) موجّه نحو حافة الشاشة التي يجلس عندها،
   بلا حاوية خلفية — الاسم والعدّاد مباشرة على الطاولة. */
.bl-seat { position: absolute; z-index: 12; display: flex; align-items: center; gap: 8px; }
.bl-seat-top { top: 64px; left: 50%; transform: translateX(-50%); flex-direction: column; gap: 4px; }
.bl-seat-right { right: 10px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 9px; }
.bl-seat-left { left: 10px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 9px; }

/* حلقة هوكم على ورقة الصورة (نمط SVG) */
img.bl-cimg.bl-cimgtrump { box-shadow: 0 0 0 2.5px var(--bl-gold), 0 0 16px rgba(217, 180, 92, 0.55) !important; }

.bl-stack { position: relative; }
.bl-stack svg, .bl-stack img.bl-cimg {
  position: absolute; left: 50%; top: 50%;
  --bl-d: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
  width: var(--bl-obw); height: calc(var(--bl-obw) * 1.4);
  border-radius: 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 250, 235, 0.14);
  transition: filter 0.25s var(--bl-ease);
}
.bl-stack img.bl-cimg { object-fit: cover; display: block; }
/* أعلى: قوس بارز نحو أعلى الشاشة (يواجه قوس اللاعب السفلي) */
.bl-seat-top .bl-stack { width: calc(var(--bl-obw) + 7 * var(--bl-ostat)); height: calc(var(--bl-obw) * 1.4 + 32px); }
.bl-seat-top .bl-stack svg, .bl-seat-top .bl-stack img.bl-cimg {
  transform: translate(-50%, -50%)
    translateX(calc(var(--bl-d) * var(--bl-ostat)))
    translateY(calc(var(--bl-d) * var(--bl-d) * 2.6px))
    rotate(calc(var(--bl-d) * 4.6deg));
}
/* يسار: أوراق عمودية (تدوير 90)، القوس بارز لليمين (شكل >) */
.bl-seat-left .bl-stack { width: calc(var(--bl-obw) * 1.4 + 32px); height: calc(var(--bl-obw) + 7 * var(--bl-ostat)); }
.bl-seat-left .bl-stack svg, .bl-seat-left .bl-stack img.bl-cimg {
  transform: translate(-50%, -50%)
    translateY(calc(var(--bl-d) * var(--bl-ostat)))
    translateX(calc(var(--bl-d) * var(--bl-d) * 2.6px))
    rotate(calc(90deg + var(--bl-d) * -4.6deg));
}
/* يمين: أوراق عمودية (تدوير -90)، القوس بارز لليسار (شكل <) */
.bl-seat-right .bl-stack { width: calc(var(--bl-obw) * 1.4 + 32px); height: calc(var(--bl-obw) + 7 * var(--bl-ostat)); }
.bl-seat-right .bl-stack svg, .bl-seat-right .bl-stack img.bl-cimg {
  transform: translate(-50%, -50%)
    translateY(calc(var(--bl-d) * var(--bl-ostat)))
    translateX(calc(var(--bl-d) * var(--bl-d) * -2.6px))
    rotate(calc(-90deg + var(--bl-d) * 4.6deg));
}
.bl-stack.bl-turn { filter: drop-shadow(0 0 12px rgba(217, 180, 92, 0.6)); }

/* [Fans-2] بلا حاوية خلفية قاتمة: الاسم والعدّاد والصفة مباشرة على الطاولة */
.bl-plate {
  position: relative; min-width: 70px; max-width: 150px;
  padding: 1px 8px 3px; text-align: center;
  background: transparent; border: none; box-shadow: none;
}
.bl-plate.bl-off { opacity: 0.5; filter: saturate(0.35); }
.bl-plate.bl-off .bl-platecount { opacity: 0.6; }
.bl-om-wait { font-size: 12px; color: var(--bl-t3); margin: 10px 0 0; text-align: center; }
.bl-m-roomact { margin: 12px 0 2px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bl-m-note { font-size: 12px; color: var(--bl-t3); margin-top: 6px; }
.bl-roommenu-wrap { margin-top: 14px; }
.bl-roommenu {
  background: linear-gradient(165deg, rgba(19, 34, 58, 0.95), rgba(13, 24, 44, 0.95));
  border: 1px solid rgba(217, 180, 92, 0.5); border-radius: 13px;
  padding: 14px 16px; text-align: center;
  box-shadow: 0 0 18px rgba(217, 180, 92, 0.14);
}
.bl-roommenu .bl-oh-title { font-size: 22px; letter-spacing: 6px; color: var(--bl-gold2); margin: 4px 0 6px; }
.bl-rm-players { font-size: 12.5px; color: var(--bl-t2); margin: 2px 0; }
.bl-rm-bet { font-size: 12.5px; color: var(--bl-t2); margin: 2px 0 8px; }
/* [Fans-2] نبض الدور على الاسم بدل إطار الحاوية */
.bl-plate.bl-turn .bl-av {
  color: var(--bl-gold2); border-color: var(--bl-gold2);
  animation: blNamePulse 1.7s ease-in-out infinite;
}
@keyframes blNamePulse {
  0%, 100% { box-shadow: 0 0 5px rgba(217, 180, 92, 0.35); filter: drop-shadow(0 0 2px rgba(217,180,92,0.4)); }
  50% { box-shadow: 0 0 14px rgba(217, 180, 92, 0.85); filter: drop-shadow(0 0 8px rgba(217,180,92,0.9)); }
}
.bl-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(13, 24, 44, 0.75); border: 1px solid rgba(217, 180, 92, 0.4);
  font-size: 13px; font-weight: 800; color: var(--bl-ink); line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.85);
}
.bl-platecount {
  position: static;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(135deg, #f2d489, #b8892f); color: #211503;
  font-family: var(--bl-font-display); font-size: 11px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.blt-ptimer {
  position: absolute;
  top: -8px;
  right: -8px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 10px;
  border: 1px solid var(--bl-gold2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.blt-ptimer.blt-time-low { color: #ff5252; animation: bltPulseTimer 1s infinite alternate; }
@keyframes bltPulseTimer { from { transform: scale(1); } to { transform: scale(1.1); } }
.bl-platesub { font-size: 9.5px; color: #7fa8e0; margin-top: 1px; font-weight: 700; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); }
.bl-platebadge { position: static; margin-inline-end: 6px; }
.bl-dchip {
  display: inline-block; font-size: 8.5px; font-weight: 800; color: #211503;
  background: linear-gradient(135deg, #f2d489, #d9b45c);
  padding: 1.5px 7px; border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.bl-platebadge.active::after {
  content: '\2026'; display: block; text-align: center;
  font-size: 12px; font-weight: 900; color: var(--bl-gold2); line-height: 1;
  animation: blDots 1.1s infinite;
}
@keyframes blDots { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── منطقة الأكلة ── */
.bl-trickzone {
  position: absolute; left: 50%; top: 44%;
  width: min(78vw, 420px); height: min(46vw, 260px);
  transform: translate(-50%, -50%);
  z-index: 20;
}
.bl-trick { position: absolute; inset: 0; }
.bl-trickcard {
  position: absolute; left: 50%; top: 50%;
  width: var(--bl-tw); height: calc(var(--bl-tw) * 1.4);
  transform: translate(calc(-50% + var(--tx, 0%)), calc(-50% + var(--ty, 0px))) rotate(var(--tr, 0deg));
}
.bl-trickcard svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); }
.bl-trickcard img.bl-cimg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5)); }
.bl-trickcard.bl-snap { animation: blSnap 0.34s var(--bl-bounce); }
@keyframes blSnap {
  0% { margin-top: -26px; scale: 1.25; opacity: 0.4; }
  100% { margin-top: 0; scale: 1; opacity: 1; }
}
.bl-trickwin {
  position: absolute; inset: -3px; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--bl-gold2);
  box-shadow: 0 0 18px rgba(242, 212, 137, 0.75), inset 0 0 12px rgba(242, 212, 137, 0.3);
  animation: blWinGlow 0.9s ease-in-out infinite alternate;
}
@keyframes blWinGlow {
  from { box-shadow: 0 0 10px rgba(242, 212, 137, 0.5), inset 0 0 8px rgba(242, 212, 137, 0.2); }
  to { box-shadow: 0 0 24px rgba(242, 212, 137, 0.9), inset 0 0 16px rgba(242, 212, 137, 0.4); }
}
.bl-trick.bl-resolved .bl-trickcard:not([data-seat]) { }
.bl-trick.bl-resolved .bl-trickcard { opacity: 0.62; transition: opacity 0.4s; }
.bl-trick.bl-resolved .bl-trickcard .bl-trickwin { display: block; }
/* [v2.74·نوكيا] :has() ← صنف يضيفه المحرك نفسه على الورقة الفائزة
   (baloot-app: bl-won) — محدد :has() يسقط في WebView القديمة */
.bl-trick.bl-resolved .bl-trickcard.bl-won { opacity: 1; }

.bl-ashurchip {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 800; color: var(--bl-gold2);
  background: rgba(13, 24, 44, 0.9); border: 1px solid rgba(217, 180, 92, 0.4);
  padding: 3px 14px; border-radius: 12px; white-space: nowrap;
}

/* ── بانر الأحداث ── */
.bl-banner {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 40; pointer-events: none; opacity: 0;
  transition: opacity 0.25s, transform 0.3s var(--bl-bounce);
  white-space: nowrap;
}
.bl-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bl-bannerinner {
  padding: 8px 26px; border-radius: 14px;
  background: linear-gradient(165deg, rgba(13, 24, 44, 0.92), rgba(9, 17, 31, 0.92));
  border: 1px solid rgba(217, 180, 92, 0.55);
  box-shadow: 0 0 30px rgba(217, 180, 92, 0.25), var(--bl-shadow);
  font-size: clamp(15px, 4.2vw, 21px); font-weight: 900; color: var(--bl-ink);
}
.bl-bannerinner b { color: var(--bl-gold2); }
.bl-bannerinner.gold { border-color: var(--bl-gold); }
.bl-bannerinner.kabot {
  border-color: var(--bl-gold2);
  box-shadow: 0 0 44px rgba(242, 212, 137, 0.5), var(--bl-shadow);
}
.bl-bannerinner.kabot b {
  background: linear-gradient(135deg, #f2d489, #b8892f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 1.25em;
}
.bl-bannerpts {
  font-family: var(--bl-font-display); font-size: 0.8em; color: var(--bl-gold2);
}

/* ── أزرار الإجراءات ── */
.bl-actions {
  position: absolute; inset-inline: 8px; bottom: calc(var(--bl-cw) * 1.4 + 86px);
  z-index: 32; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s var(--bl-bounce);
  transform: translateY(10px);
}
.bl-actions.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bl-actions-title {
  text-align: center; font-size: 13px; font-weight: 800; color: var(--bl-ink);
  margin-bottom: 10px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}
.bl-actions-title b { color: var(--bl-gold2); font-size: 14.5px; font-weight: 900; text-transform: uppercase; }
.bl-actions-title span { display: block; font-size: 11px; color: var(--bl-gold); margin-top: 2px; font-weight: 700; opacity: 0.9; }
.bl-actions-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bl-abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; cursor: pointer;
  background: rgba(12, 22, 40, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--bl-ink); border: 1.5px solid rgba(217, 180, 92, 0.3);
  border-radius: 30px; font-family: inherit; font-size: 13.5px; font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  transition: all 0.2s var(--bl-bounce);
}
.bl-abtn:hover { border-color: var(--bl-gold); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(217, 180, 92, 0.4); }
.bl-abtn-gold {
  background: linear-gradient(135deg, rgba(217, 180, 92, 0.2), rgba(163, 116, 42, 0.15));
  color: var(--bl-gold2); border-color: var(--bl-gold);
}
.bl-suitpick { flex-direction: column; gap: 2px; min-width: 62px; }
.bl-suitpick .bl-npip { width: 20px; height: 20px; }
.bl-sunpick { border-color: var(--bl-bd2); }
.bl-passpick { color: var(--bl-t2); border-color: rgba(166, 170, 180, 0.4); }
.bl-hint { pointer-events: none; }
.bl-hint b { color: var(--bl-gold2); font-size: 13px; }

/* ── يد اللاعب ── */
.bl-handwrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  height: calc(var(--bl-cw) * 1.4 + 44px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.bl-hand { position: absolute; inset: 0; }
.bl-handcard {
  position: absolute; bottom: 18px; left: 50%;
  width: var(--bl-cw); height: calc(var(--bl-cw) * 1.4);
  --bl-d: calc(var(--i) - (var(--n) - 1) / 2);
  /* [Fans-2] قوس يد كلاسيكي: الطرفين لأسفل والوسط لأعلى (قوس ⌒) */
  transform:
    translateX(calc(-50% + var(--bl-d) * var(--bl-fan-step)))
    translateY(calc(var(--bl-d) * var(--bl-d) * 2.6px))
    rotate(calc(var(--bl-d) * 4.6deg));
  cursor: pointer;
  transition: transform 0.22s var(--bl-bounce), filter 0.2s;
}
.bl-handcard svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
.bl-handcard img.bl-cimg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
.bl-handcard:hover { transform:
    translateX(calc(-50% + var(--bl-d) * var(--bl-fan-step)))
    translateY(calc(var(--bl-d) * var(--bl-d) * 2.6px - 16px))
    rotate(calc(var(--bl-d) * 3deg)) scale(1.06); z-index: 40 !important; }
.bl-handcard.bl-legal { filter: drop-shadow(0 0 9px rgba(217, 180, 92, 0.65)); }
.bl-handcard.bl-legal svg rect:first-child { stroke: rgba(217, 180, 92, 0.9); stroke-width: 1.6; }
.bl-handcard.bl-legal img.bl-cimg { box-shadow: 0 0 0 2px rgba(217, 180, 92, 0.95), 0 0 16px rgba(217, 180, 92, 0.55); }
.bl-handcard.bl-dim { filter: brightness(0.6) saturate(0.55); }
.bl-handcard.bl-dealin { animation: blDeal 0.5s var(--bl-bounce) backwards; }
@keyframes blDeal {
  0% { transform: translateX(calc(-50% + var(--bl-d) * var(--bl-fan-step))) translateY(130%) rotate(14deg); opacity: 0; }
  100% { opacity: 1; }
}
.bl-handcard.bl-shakecard { animation: blCardShake 0.4s var(--bl-ease); }
@keyframes blCardShake {
  0%, 100% { margin-right: 0; }
  25% { margin-right: -7px; }
  50% { margin-right: 7px; }
  75% { margin-right: -4px; }
}
/* [Fans-2] بلا حاوية: الاسم والعدّاد مباشرة أعلى اليد */
.bl-handplate {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%) translateY(-100%);
  z-index: 2;
  display: flex; align-items: center; gap: 7px;
  padding: 2px 8px;
  background: transparent; border: none; box-shadow: none;
}
.bl-handplate .bl-av { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.85); }
.bl-handplate .bl-platename { font-size: 11.5px; }
.bl-handplate .bl-platecount { position: static; min-width: 19px; height: 19px; font-size: 10px; }

/* ── أرقام عائمة ── */
.bl-floats { position: absolute; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.bl-float {
  position: absolute; left: 50%; top: 38%;
  transform: translateX(-50%);
  text-align: center;
  animation: blFloatUp 1.1s ease-out forwards;
}
@keyframes blFloatUp {
  0% { transform: translate(-50%, 12px) scale(0.7); opacity: 0; }
  18% { transform: translate(-50%, -6px) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -74px) scale(1); opacity: 0; }
}
.bl-floatmain {
  font-family: var(--bl-font-display); font-size: clamp(30px, 9vw, 46px); font-weight: 900;
  color: var(--bl-gold2);
  text-shadow: 0 3px 0 rgba(8, 18, 52, 0.9), 0 0 24px rgba(217, 180, 92, 0.65);
}
.bl-floatsub { font-size: 12px; font-weight: 800; color: var(--bl-ink); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); }
.bl-floatred .bl-floatmain { color: #f87171; text-shadow: 0 3px 0 rgba(8, 18, 52, 0.9), 0 0 22px rgba(239, 68, 68, 0.55); }
.bl-floatblue .bl-floatmain { color: #93c5fd; }

/* ── الجزيئات ── */
.bl-fxcv { position: absolute; inset: 0; z-index: 42; pointer-events: none; width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════
   المودالات
   ═══════════════════════════════════════════════ */
.bl-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(4, 9, 18, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
  overflow-y: auto;
}
.bl-overlay.show { opacity: 1; pointer-events: auto; }
.bl-modal {
  width: 100%; max-width: 400px;
  background: linear-gradient(165deg, #13223a 0%, #0d1830 100%);
  border: 1px solid rgba(217, 180, 92, 0.45);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: inset 0 0 0 1px rgba(242, 212, 137, 0.07), 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: blModalIn 0.3s var(--bl-bounce);
  margin: auto;
}
@keyframes blModalIn {
  0% { transform: translateY(22px) scale(0.94); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.bl-om-eyebrow { text-align: center; font-size: 11px; font-weight: 800; color: var(--bl-t3); letter-spacing: 0.5px; margin-bottom: 4px; }
.bl-oh-title {
  text-align: center; font-size: clamp(19px, 5.4vw, 25px); font-weight: 900; margin-bottom: 14px;
  background: linear-gradient(135deg, #f2d489, #d9b45c 60%, #b8892f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bl-handover { text-align: center; }
.bl-handover .bl-go { margin-top: 14px; }

/* جدول نتيجة الدور */
.bl-rt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bl-rt th {
  font-size: 11px; font-weight: 800; color: var(--bl-t2);
  padding: 5px 8px; border-bottom: 1px solid rgba(217, 180, 92, 0.3);
}
.bl-rt td { padding: 6px 8px; border-bottom: 1px solid rgba(36, 53, 79, 0.6); text-align: center; }
.bl-rt td:first-child { text-align: start; color: var(--bl-t2); font-weight: 700; font-size: 11.5px; }
.bl-rt-us { color: var(--bl-gold2); font-weight: 800; }
.bl-rt-them { color: var(--bl-silver2, #c9cbd2); font-weight: 800; }
.bl-rt-total td {
  border-top: 2px solid rgba(217, 180, 92, 0.5); border-bottom: none;
  font-family: var(--bl-font-display); font-size: 15px; font-weight: 900; color: var(--bl-ink);
  padding: 8px;
}
.bl-cutx { font-style: normal; font-size: 9px; color: var(--bl-red2, #f87171); margin-inline-start: 2px; }
.bl-om-team { text-align: center; font-size: 12px; color: var(--bl-t2); margin: 10px 0 4px; }
.bl-om-team b { font-family: var(--bl-font-display); }
.bl-gold { color: var(--bl-gold2) !important; }
.bl-om-kabot {
  text-align: center; font-weight: 900; color: var(--bl-gold2); margin: 6px 0;
  font-size: 14px; text-shadow: 0 0 14px rgba(217, 180, 92, 0.5);
}

/* نهاية المباراة */
.bl-m-final {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--bl-font-display); font-size: clamp(30px, 9vw, 42px); font-weight: 900;
  margin: 6px 0 10px;
}
.bl-m-final i { font-style: normal; color: var(--bl-t3); font-size: 0.6em; }
.bl-m-final b:first-child { color: var(--bl-gold2); }
/* [v2.72·فردي] قائمة نقاط كل لاعب بدل ثنائية 0—1 */
.bl-m-final-solo { font-size: clamp(20px, 6vw, 28px); gap: 10px; flex-wrap: wrap; }
.bl-m-solo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bl-m-solo small { font-size: 11px; font-weight: 700; color: var(--bl-t3); letter-spacing: 0.3px; }
.bl-m-solo b.bl-gold { color: var(--bl-gold2); }
.bl-m-payout { text-align: center; font-size: 14px; color: var(--bl-t2); margin-bottom: 8px; }
.bl-m-payout b { font-family: var(--bl-font-display); font-size: 17px; }
.bl-m-payout small { color: var(--bl-t3); }
.bl-m-lost { text-align: center; font-size: 12.5px; color: var(--bl-t3); margin-bottom: 8px; }
.bl-m-btns { display: flex; gap: 8px; margin-top: 12px; }
.bl-m-btns.col { flex-direction: column; gap: 7px; }
.bl-matchmodal.bl-won { border-color: var(--bl-gold); box-shadow: 0 0 44px rgba(217, 180, 92, 0.3), 0 18px 50px rgba(0, 0, 0, 0.6); }

/* القواعد */
.bl-rulesmodal { max-width: 440px; max-height: 86vh; display: flex; flex-direction: column; }
.bl-rdoc { overflow-y: auto; margin: 0 -6px; padding: 0 10px; scrollbar-width: thin; scrollbar-color: rgba(217, 180, 92, 0.3) transparent; }
.bl-rdoc::-webkit-scrollbar { width: 5px; }
.bl-rdoc::-webkit-scrollbar-thumb { background: rgba(217, 180, 92, 0.3); border-radius: 4px; }
.bl-rsec { margin-bottom: 12px; }
.bl-rsec h3 {
  font-size: 13px; font-weight: 900; color: var(--bl-gold2); margin-bottom: 3px;
  display: flex; align-items: center; gap: 7px;
}
.bl-rsec h3::before {
  content: ''; width: 7px; height: 7px; flex: 0 0 auto;
  background: linear-gradient(135deg, #f2d489, #b8892f);
  transform: rotate(45deg);
}
.bl-rsec p { font-size: 12px; line-height: 1.75; color: var(--bl-t2); }
.bl-rulesmodal .bl-go2 { margin-top: 12px; flex: 0 0 auto; }

/* ── توست ── */
.bl-toast {
  position: absolute; bottom: calc(var(--bl-cw) * 1.4 + 110px); left: 50%;
  transform: translate(-50%, 14px);
  z-index: 60; pointer-events: none;
  background: rgba(13, 24, 44, 0.96); color: var(--bl-ink);
  border: 1px solid rgba(217, 180, 92, 0.5); border-radius: 11px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 800;
  box-shadow: var(--bl-shadow);
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}
.bl-toast.show { opacity: 1; transform: translate(-50%, 0); }
.bl-toast.err { border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }

/* ═══════════ SVG نص الأوراق ═══════════ */
.bl-rank { font-family: var(--bl-font-display); font-size: 15px; font-weight: 700; }
.bl-facemono { font-family: var(--bl-font-display); font-size: 30px; font-weight: 900; }

/* ═══════════ شاشات صغيرة / عرض عريض ═══════════ */
@media (max-width: 360px) {
  .bl-plate { min-width: 72px; }
  .bl-seat-right { right: 4px; }
  .bl-seat-left { left: 4px; }
}
@media (min-width: 900px) {
  .bl-stage { --bl-cw: clamp(52px, 8.2vh, 96px); --bl-tw: clamp(50px, 7.4vh, 88px); --bl-bw: clamp(26px, 4.2vh, 42px); --bl-fan-step: clamp(30px, 4.6vh, 58px); }
  .bl-trickzone { width: min(52vh, 460px); height: min(34vh, 280px); }
  .bl-actions { bottom: calc(var(--bl-cw) * 1.4 + 86px); }
  .bl-toast { bottom: calc(var(--bl-cw) * 1.4 + 110px); }
}
@media (max-height: 430px) {
  .bl-stage { --bl-cw: clamp(38px, 13vh, 64px); --bl-tw: clamp(36px, 11.5vh, 58px); --bl-bw: clamp(17px, 3.4vh, 27px); --bl-fan-step: clamp(20px, 5vh, 40px); }
  .bl-seat-top { top: 56px; }
  .bl-actions { bottom: calc(var(--bl-cw) * 1.4 + 80px); }
  .bl-toast { bottom: calc(var(--bl-cw) * 1.4 + 105px); }
}

/* [R13] بورتريه: نقل round + trump لوسط الطاولة فوق الأوراق المرمية */
@media (orientation: portrait) {
  .bl-stage .bl-hud {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    justify-content: center;
    z-index: 25;
    pointer-events: none;
  }
  /* [R14] بورتريه: مطابقة عرض hudcenter مع trickzone ليكونا فوق الورق المرمي */
  .bl-stage .bl-hudcenter {
    width: min(78vw, 420px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* [R13] بورتريه: إزاحة أوراق اللاعبين لمحاذاة حدود الشاشة */
  .bl-stage .bl-seat-top { top: -15px !important; }
  .bl-stage .bl-seat-right { right: -15px !important; }
  .bl-stage .bl-seat-left { left: -15px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   [R11] طلب المالك — تحسينات اللاندسكيب فقط للبلوت
   (البورتريه يبقى كما هو دون أي تغيير)
   • إخفاء لوحتي us/them من الأعلى ونقل مجموع نقاط الفريق لجوار أيقونة كل لاعب
   • نقل عبارتي round/trump لوسط الطاولة: round يسار الأوراق المرمية، trump يمينها
   • رفع أوراق اللاعب العلوي لالتصاق الحد الأعلى للشاشة، وأيقونته ليمين أوراقه
   • نقل أيقونة اللاعب السفلي لليمين بمحاذاة أوراقه (ليست في الزاوية)
   • مقاعد اليمين واليسار تبقى كما هي دون أي تغيير
   • أزرار الخروج/تصغير الشاشة: قرص ذهبي ممتلئ برمز أسود (ليست حلقة فقط)
   ════════════════════════════════════════════════════════════════════ */

/* شارة مجموع نقاط الفريق — مخفية افتراضياً، تظهر في اللاندسكيب فقط */
.bl-teamscore {
  display: none !important;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: linear-gradient(135deg, #f2d489, #d9b45c 55%, #b8892f);
  color: #211503;
  font-family: var(--bl-font-display);
  font-size: 11.5px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(247, 232, 200, 0.6);
}

/* [R12] إخفاء لوحتي us/them من الأعلى في الوضعين (بورتريه + لاندسكيب) */
.bl-stage .bl-hudside { display: none !important; }
.bl-stage .bl-teamscore { display: inline-flex !important; }

@media (orientation: landscape) {

  /* ── 3) نقل round + trump لوسط الطاولة، يحيطان بمنطقة الأوراق المرمية ── */
  .bl-stage .bl-hud {
    position: absolute;
    top: 44%;            /* محاذاة مركز منطقة الأكلة */
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: none;
    z-index: 25;
    grid-template-columns: none;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .bl-stage .bl-hudcenter {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    /* [R14] طلب المالك: إزاحة لليمين ~85px لتصبح round+trump فوق الورق
       المرمي وسط الطاولة. trickzone width=min(78vw,420px) centered،
       وحاويتنا كانت width=min(96vw,560px) wider. تقليل العرض + إزاحة
       يمين يضع العنصرين فوق trickzone بدقة. */
    width: min(78vw, 420px);   /* مطابق لعرض trickzone */
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    gap: 0;
  }
  .bl-stage .bl-hudround {
    font-size: 15px;
    text-shadow: 0 2px 7px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
  }
  .bl-stage .bl-hudtrump {
    font-size: 13px;
    text-shadow: 0 2px 7px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
  }

  /* ── 4) اللاعب العلوي: قوس الأوراق يلامس الحد الأعلى للشاشة ── */
  .bl-stage .bl-seat-top {
    top: -15px;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  /* الأوراق (stack) تبقى متمحورة أفقياً عبر مركزية المقعد نفسه */
  /* الأيقونة (plate) تُنقل تماماً لليمين عبر الإخراج من تدفق flex */
  .bl-stage .bl-seat-top .bl-plate {
    position: absolute;
    top: 15px;
    /* [R12] إزاحة لليسار 25px كما طلب المالك */
    left: calc(100% - 15px);
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* ── 5) اللاعب السفلي: أيقونته بجانب أوراقه ومتعامدة رأسياً مع أيقونة اللاعب العلوي ── */
  /* [R14] محاذاة دقيقة: نفس الصيغة المستخدمة لأيقونة اللاعب العلوي
     (50% + نصف عرض السلسلة - 15px) لضمان التعامد التام */
  .bl-stage .bl-handplate {
    position: absolute;
    bottom: 4px;
    left: calc(50% + (var(--bl-cw) + 7 * var(--bl-fan-step)) / 2 - 15px);
    right: auto;
    top: auto;
    transform: none;
  }
}


/* [R13] ضمان خلفية كاملة للشاشة بلا شريط بني
   [v2.74·نوكيا] :has() ← سمة data-game على <body> يضبطها openGame —
   محددات :has() تسقط كاملةً في WebView القديمة (Chrome<105، هواتف نوكيا
   الاقتصادية) فتبقى الخلفية البنية الافتراضية = «تشوه العرض» */
body[data-game="bl"],
body[data-game="bl"] #pg-game,
body[data-game="bl"] #gamePageBody {
  background: #0b1526 !important;
}