/* ════════════════════════════════════════════════════════════════════
   أونو (un) — هوية المنصة (كحلي زليج × ذهب دكاء) + طاولة أونو زرقاء
   كل الكلاسات معزولة ببادئة un- — بلا أي تعديل على ملفات المنصة.
   ════════════════════════════════════════════════════════════════════ */
.un-stage {
  --un-bg: #0b1526;
  /* [R13] ضمان خلفية كاملة بلا شريط بني في الأسفل */
  --un-gold: #d9b45c;
  --un-gold2: #f2d489;
  --un-t1: #e9e2cf;
  --un-t2: #9aa5b8;
  --un-t3: #6b7484;
  --un-bd: rgba(217, 180, 92, 0.4);
  --un-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  --un-cw: clamp(44px, 7.4vw, 66px);
  --un-bw: clamp(26px, 4.6vw, 40px);
  --un-ease: cubic-bezier(0.34, 1.4, 0.44, 1);
  /* [Fans-2] مقاس سلسلة الخصوم = مقاس أوراق اللاعب، والخطوة = خطوة مروحة اليد */
  --un-obw: var(--un-cw);
  --un-ostat: 34px;
  /* [v2.97·ملاءمة اليد] الخطوة الأساسية للمروحة (تُخفض عبر استعلامات العرض) —
     اليد تركّب سقف الملاءمة --un-fan-fit الذي يحسبه التطبيق من العرض الفعلي */
  --un-fan-base: 34px;
  position: absolute; inset: 0;
  font-family: var(--font, 'Cairo', 'Segoe UI', sans-serif);
  background: radial-gradient(120% 90% at 50% 8%, #14213a 0%, var(--un-bg) 58%);
  color: var(--un-t1);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.un-stage * { box-sizing: border-box; }

/* ── الشاشات ── */
.un-screen { position: absolute; inset: 0; display: none; }
.un-screen.un-screen-active { display: block; }

/* ═══════════ القائمة ═══════════ */
.un-menuwrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* [v2.98·بلاغ المالك] قياس حي كشف أن قوس القائمة في اللاندسكيب/الشاشات
     القصيرة يفيض فالمحاذاة المركزية تقصّ رأس القائمة (عبارة أونو) فوق
     حافة الشاشة بلا وصول (top سالب) — safe center تُبقيه داخل الشاشة
     عند الفيضان وتسلك سلوك center تماماً حين يتّسع (بلا أي تغيير بصري).
     المتصفحات القديمة (<115) تُسقط السطر الثاني وتُبقي center كما كان. */
  justify-content: safe center;
  gap: 14px; padding: 18px; overflow-y: auto;
}
.un-menuhead { text-align: center; }
.un-menutitle {
  font-size: clamp(30px, 6vw, 44px); font-weight: 900; letter-spacing: 1px;
  background: linear-gradient(180deg, var(--un-gold2), #b8892f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 24px rgba(217, 180, 92, 0.25);
}
.un-menutag { color: var(--un-t2); font-size: 13.5px; margin-top: 4px; }
.un-menucard {
  position: relative; width: 100%; max-width: 420px;
  padding: 18px 18px 20px;
  background: linear-gradient(165deg, #13223a 0%, #0d1830 100%);
  border: 1px solid var(--un-bd);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(242, 212, 137, 0.07), var(--un-shadow);
}
.un-field { margin: 13px 0; }
.un-flabel { font-size: 12.5px; font-weight: 700; color: var(--un-t2); margin-bottom: 7px; }
.un-seg { display: flex; gap: 7px; }
.un-segbtn {
  flex: 1; padding: 9px 6px; font-size: 13px; font-weight: 700;
  color: var(--un-t2); background: rgba(20, 36, 61, 0.7);
  border: 1px solid rgba(120, 130, 150, 0.3); border-radius: 10px;
  cursor: pointer; transition: all 0.18s;
  font-family: inherit;
}
.un-segbtn:hover { border-color: var(--un-gold); color: var(--un-t1); }
.un-segbtn.on {
  color: var(--un-gold2); border-color: var(--un-gold);
  background: linear-gradient(150deg, rgba(217, 180, 92, 0.22), rgba(163, 116, 42, 0.14));
  box-shadow: 0 0 12px rgba(217, 180, 92, 0.22), inset 0 0 8px rgba(217, 180, 92, 0.12);
}
.un-mode-desc { font-size: 11.5px; color: var(--un-t3); margin-top: 8px; line-height: 1.5; }
.un-go {
  width: 100%; max-width: 420px; padding: 15px;
  font-size: 18px; font-weight: 900; font-family: inherit;
  color: #241a05; cursor: pointer; border: none; border-radius: 14px;
  background: linear-gradient(160deg, var(--un-gold2) 0%, #c79a3a 55%, #a97e26 100%);
  box-shadow: 0 8px 22px rgba(217, 180, 92, 0.35), inset 0 1px 0 rgba(255, 250, 230, 0.7);
  transition: transform 0.15s, box-shadow 0.15s;
}
.un-go:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(217, 180, 92, 0.45); }
.un-go2 {
  padding: 9px 18px; font-size: 13.5px; font-weight: 700; font-family: inherit;
  color: var(--un-t1); background: rgba(20, 36, 61, 0.8);
  border: 1px solid var(--un-bd); border-radius: 10px; cursor: pointer;
  transition: border-color 0.15s;
}
.un-go2:hover { border-color: var(--un-gold); }

/* ═══════════ الطاولة ═══════════ */
/* [R10] أرضية زرقاء معتمة خلف القماش المدوّر: الهامش العشرة بكسل الذي كان
   يُظهر الخلفية البنية للمسرح يصبح امتداداً أزرق من لون القماش نفسه */
.un-table {
  position: absolute; inset: 0;
  background: linear-gradient(165deg, #103055 0%, #0a2140 55%, #081a33 100%);
}
/* [R13] طلب المالك: إزالة الشريط الذهبي المحيط — أرضية اللعبة تملأ الشاشة بلا إطار */
.un-table::after { display: none !important; }
.un-felt {
  position: absolute; inset: 0; border-radius: 0;
  background:
    radial-gradient(90% 70% at 50% 42%, rgba(52, 132, 190, 0.5) 0%, rgba(20, 62, 108, 0.35) 46%, rgba(8, 24, 46, 0.55) 100%),
    linear-gradient(165deg, #103055 0%, #0a2140 55%, #081a33 100%);
  box-shadow: inset 0 2px 18px rgba(120, 180, 240, 0.14), inset 0 -22px 44px rgba(0, 0, 0, 0.4);
}
.un-felt::before {
  content: ''; position: absolute; inset: 14px; border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(217, 180, 92, 0.028) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(217, 180, 92, 0.028) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.un-tablelogo {
  position: absolute; left: 50%; top: 44%;
  width: min(46vw, 230px); height: min(46vw, 230px);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.16; pointer-events: none; z-index: 5;
}
.un-tablelogo img { width: 100%; height: 100%; object-fit: contain; }

/* ── [v2.98·بلاغ المالك] بورتريه: عبارة اسم اللعبة (أونو) كانت محشورة قرب
     قمة الشاشة فوق منطقة اللاعب الجالس في الأعلى — تُزاح 35px لأسفل في
     البورتريه حصراً (اللاندسكيب ومركز القائمة والتنسيق العام كما هي بتمامها) ── */
@media (orientation: portrait) {
  .un-stage .un-menuhead { padding-top: 35px; }
}

/* ── HUD ── */
.un-hud {
  position: absolute; top: 14px; left: 16px; right: 16px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
.un-hudside {
  display: flex; flex-direction: column; align-items: center;
  background: transparent; border: none; box-shadow: none;
  padding: 5px 12px; min-width: 86px;
}
.un-hudlabel { font-size: 11px; color: var(--un-t2); font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.un-hudscore { font-size: 19px; font-weight: 900; color: var(--un-gold2); line-height: 1.1; text-shadow: 0 2px 7px rgba(0,0,0,0.9); }
.un-hudsub { font-size: 10px; color: var(--un-t3); text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.un-hudcenter { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.un-hudround {
  font-size: 14px; font-weight: 900; color: var(--un-gold2);
  background: transparent; border: none; padding: 0; text-shadow: 0 2px 6px rgba(0,0,0,0.85);
}
.un-hudcolor { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--un-t1); font-weight: 800; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
.un-color-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  background: #888;
}

/* ═══════════ [Fans-2] مقاعد مقوّسة: سلسلة كاملة بحجم أوراق اللاعب ═══════════
   البروز نحو حافة الشاشة الخاصة بكل مقعد، والمحتوى بلا حاوية مظلمة:
   أعلى: قوس برزه لأعلى (نحو حافة الشاشة) · يمين/يسار: قوس عمودي */
.un-seat { position: absolute; z-index: 15; display: flex; align-items: center; }
.un-seat-top { top: 58px; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 5px; }
.un-seat-right { right: 12px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 9px; }
.un-seat-left { left: 12px; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; gap: 9px; }
.un-stack { position: relative; }
.un-stack svg, .un-stack img.un-cimg {
  position: absolute; left: 50%; top: 50%;
  --un-d: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
  width: var(--un-obw); height: calc(var(--un-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(--un-ease);
}
.un-stack img.un-cimg { object-fit: cover; display: block; }
.un-seat-top .un-stack { width: calc(var(--un-obw) + 7 * var(--un-ostat)); height: calc(var(--un-obw) * 1.4 + 30px); }
.un-seat-top .un-stack svg, .un-seat-top .un-stack img.un-cimg {
  transform: translate(-50%, -50%)
    translateX(calc(var(--un-d) * var(--un-ostat)))
    translateY(calc(var(--un-d) * var(--un-d) * 2.4px))
    rotate(calc(var(--un-d) * 3.6deg));
}
/* يسار: أوراق عمودية (تدوير 90)، القوس بارز لليمين (شكل >) */
.un-seat-left .un-stack { width: calc(var(--un-obw) * 1.4 + 30px); height: calc(var(--un-obw) + 7 * var(--un-ostat)); }
.un-seat-left .un-stack svg, .un-seat-left .un-stack img.un-cimg {
  transform: translate(-50%, -50%)
    translateY(calc(var(--un-d) * var(--un-ostat)))
    translateX(calc(var(--un-d) * var(--un-d) * 2.4px))
    rotate(calc(90deg + var(--un-d) * -3.6deg));
}
/* يمين: أوراق عمودية (تدوير -90)، القوس بارز لليسار (شكل <) */
.un-seat-right .un-stack { width: calc(var(--un-obw) * 1.4 + 30px); height: calc(var(--un-obw) + 7 * var(--un-ostat)); }
.un-seat-right .un-stack svg, .un-seat-right .un-stack img.un-cimg {
  transform: translate(-50%, -50%)
    translateY(calc(var(--un-d) * var(--un-ostat)))
    translateX(calc(var(--un-d) * var(--un-d) * -2.4px))
    rotate(calc(-90deg + var(--un-d) * 3.6deg));
}
.un-stack.un-turn { filter: drop-shadow(0 0 12px rgba(217, 180, 92, 0.65)); }
/* [Fans-2] اللوح بلا خلفية: الاسم + عدّاد ذهبي، التوهج على الاسم والسلسلة */
.un-plate {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-width: 60px; max-width: 140px; padding: 1px 8px 2px;
  background: transparent; border: none; box-shadow: none;
}
.un-plate.un-turn-seat .un-av {
  color: var(--un-gold2); border-color: var(--un-gold2);
  animation: unNamePulse 1.7s ease-in-out infinite;
}
@keyframes unNamePulse {
  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)); }
}
.un-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(12, 22, 40, 0.75); border: 1px solid rgba(217, 180, 92, 0.4);
  font-size: 13px; font-weight: 800; color: var(--un-t1); line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.85);
}
.un-platecount {
  position: static;
  min-width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-size: 11px; font-weight: 900; color: #241a05;
  background: linear-gradient(160deg, var(--un-gold2), #c79a3a);
  border-radius: 50%; border: 1.5px solid #8a6a25;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.un-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(--un-gold2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.un-ptimer.un-time-low { color: #ff5252; animation: unPulseTimer 1s infinite alternate; }
@keyframes unPulseTimer { from { transform: scale(1); } to { transform: scale(1.1); } }

.un-platebadge { font-size: 10px; font-weight: 800; color: var(--un-gold2); }

/* ── الوسط: طاقم + رمية ── */
.un-center {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  z-index: 20;
  display: flex; align-items: center; gap: 16px;
}
.un-pile {
  position: relative;
  width: calc(var(--un-cw) * 0.82); height: calc(var(--un-cw) * 0.82 * 1.4);
  cursor: default;
}
.un-pile svg, .un-pile img.un-cimg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 8px; object-fit: cover; display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.un-pile svg:nth-child(2), .un-pile img.un-cimg:nth-child(2) { transform: translate(1.5px, -1.5px) rotate(1.2deg); }
.un-pile svg:nth-child(3), .un-pile img.un-cimg:nth-child(3) { transform: translate(-1.5px, 1.5px) rotate(-1.2deg); }
.un-pilecount {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  min-width: 22px; height: 20px; line-height: 18px; text-align: center;
  font-size: 11px; font-weight: 900; color: var(--un-t1);
  background: rgba(12, 22, 40, 0.95); border: 1px solid var(--un-bd); border-radius: 10px;
  z-index: 3;
}
.un-pile.un-can-draw { cursor: pointer; }
.un-pile.un-can-draw svg, .un-pile.un-can-draw img.un-cimg { filter: drop-shadow(0 0 10px rgba(217, 180, 92, 0.6)); }
.un-pile.un-can-draw:hover svg, .un-pile.un-can-draw:hover img.un-cimg { filter: drop-shadow(0 0 14px rgba(217, 180, 92, 0.85)); }
.un-pile-discard { cursor: default; }
.un-topcard { position: absolute; inset: 0; transform: rotate(-4deg); }
.un-topcard svg, .un-topcard img.un-cimg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.55); object-fit: cover; display: block; }
.un-dir {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
  color: rgba(233, 226, 207, 0.75);
  width: 30px; height: 30px;
  transition: transform 0.4s var(--un-ease);
}
.un-dir svg { width: 100%; height: 100%; }

/* ── يد اللاعب ── */
.un-handwrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 25;
  height: calc(var(--un-cw) * 1.4 + 46px);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.un-hand { position: absolute; inset: 0; }
.un-handcard {
  /* [Owner 2026-09-28] إزاحة سلسلة أوراق اللاعب الرئيسي (الجالس أسفل) للأعلى 15px
     في الوضعين (لاندسكيب + بورتريه): bottom: 20px → 35px.
     القاعدة أساسية فتشمل الوضعين معاً، وبلا أي تغيير في الشكل أو الحجم
     (مقاس الورقة --un-cw · قوس المروحة transform · الخطوة --un-fan-step كلها كما هي)،
     ولا يتحرك معها أي عنصر آخر (اللوحة · زر UNO · شريط الأفعال · الخصوم). */
  position: absolute; bottom: 35px; left: 50%;
  width: var(--un-cw); height: calc(var(--un-cw) * 1.4);
  --un-d: calc(var(--i) - (var(--n) - 1) / 2);
  /* [v2.97·ملاءمة اليد — بلاغ المالك 2026-10-12] خطوة مطاطية: الأساس (--un-fan-base)
     مع سقف ملاءمة يشتقه التطبيق من العرض الفعلي (--un-fan-fit). الخطوة الثابتة
     كانت تجعل سلسلة الأوراق تفيض أفقياً عند كثرتها (+2/+4) فتُقص أوراق طرفي
     السلسلة خارج المسرح (overflow:hidden) وتختفي — بورتريه ولاندسكيب معاً. */
  --un-fan-step: min(var(--un-fan-base, 34px), var(--un-fan-fit, 999px));
  /* [Fans-2] قوس يد كلاسيكي: الطرفين لأسفل والوسط لأعلى (قوس ⌒)
     [v2.97] سقف هبوط القوس 30px وسقف ميلان الطرف ‎±22deg: القوس التربيعي
     المفتوح كان يهبط بأوراق الأطراف تحت حد الشاشة عند الأعداد الكبيرة */
  transform:
    translateX(calc(-50% + var(--un-d) * var(--un-fan-step)))
    translateY(min(calc(var(--un-d) * var(--un-d) * 2.4px), 30px))
    rotate(clamp(-22deg, calc(var(--un-d) * 3.6deg), 22deg));
  cursor: pointer;
  transition: transform 0.22s var(--un-ease), filter 0.2s;
  z-index: 10;
}
.un-handcard svg, .un-handcard img.un-cimg { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 7px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)); }
.un-handcard:hover { transform:
    translateX(calc(-50% + var(--un-d) * var(--un-fan-step)))
    translateY(calc(min(calc(var(--un-d) * var(--un-d) * 2.4px), 30px) - 18px))
    rotate(clamp(-22deg, calc(var(--un-d) * 2deg), 22deg)) scale(1.07);
    z-index: 40 !important; }
.un-handcard.un-legal { filter: drop-shadow(0 0 10px rgba(217, 180, 92, 0.7)); }
.un-handcard.un-legal svg, .un-handcard.un-legal img.un-cimg { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 8px rgba(217, 180, 92, 0.5)); }
.un-handcard.un-dim { filter: brightness(0.55) saturate(0.5); cursor: not-allowed; }
.un-handcard.un-dim:hover { transform: none; }
.un-handcard.un-drawn { animation: unPulse 0.9s ease-in-out infinite; }
@keyframes unPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(217, 180, 92, 0.5)); }
  50% { filter: drop-shadow(0 0 16px rgba(217, 180, 92, 0.9)); }
}
.un-handcard.un-dealin { animation: unDeal 0.5s var(--un-ease) backwards; }
@keyframes unDeal {
  0% { transform: translateX(calc(-50% + var(--un-d) * var(--un-fan-step))) translateY(130%) rotate(12deg); opacity: 0; }
  100% { opacity: 1; }
}
.un-handcard.un-shakecard { animation: unShake 0.4s; }
@keyframes unShake {
  0%, 100% { margin-right: 0; }
  25% { margin-right: -7px; }
  50% { margin-right: 7px; }
  75% { margin-right: -4px; }
}
/* [Fans-2] بلا حاوية: الاسم والعدّاد مباشرة تحت اليد */
.un-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;
}
.un-handplate .un-av { box-shadow: 0 2px 7px rgba(0, 0, 0, 0.85); }
.un-handplate .un-platename { font-size: 11.5px; }
.un-handplate .un-platecount { position: static; min-width: 19px; height: 19px; font-size: 10px; }
.un-handplate .un-platebadge { position: static; min-height: 0; }

/* ── زر UNO ── */
.un-unobtn {
  position: absolute; bottom: 120px; inset-inline-end: 18px; z-index: 35;
  width: 66px; height: 66px; border-radius: 50%;
  font-family: 'Orbitron', 'Cairo', sans-serif;
  font-size: 15px; font-weight: 900; letter-spacing: 1px;
  color: #fff; cursor: pointer;
  background: radial-gradient(circle at 32% 30%, #ff5b63, #c1121f 70%);
  border: 3px solid rgba(255, 244, 230, 0.95);
  box-shadow: 0 0 18px rgba(255, 60, 70, 0.65), 0 6px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s;
}
.un-unobtn:hover { transform: scale(1.06); }
.un-unobtn:active { transform: scale(0.94); }
.un-unobtn.armed { animation: unoGlow 0.8s ease-in-out infinite; }
@keyframes unoGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 60, 70, 0.55), 0 6px 16px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 0 30px rgba(255, 60, 70, 0.95), 0 6px 16px rgba(0, 0, 0, 0.5); }
}

/* ── شريط الأفعال ── */
.un-actions {
  position: absolute; left: 50%; bottom: calc(var(--un-cw) * 1.4 + 86px);
  transform: translateX(-50%); z-index: 34;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  min-width: 180px;
}
.un-actions.show { display: flex; }
.un-actions-title { font-size: 13px; font-weight: 800; color: var(--un-t1); text-align: center; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); }
.un-actions-title b { color: var(--un-gold2); font-size: 14.5px; font-weight: 900; text-transform: uppercase; }
.un-actions-row { display: flex; gap: 10px; }
.un-abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; font-size: 13.5px; font-weight: 900; font-family: inherit;
  color: var(--un-t1); background: rgba(12, 22, 40, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(217, 180, 92, 0.3); border-radius: 30px; cursor: pointer;
  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(--un-ease);
}
.un-abtn:hover { border-color: var(--un-gold); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 20px rgba(217, 180, 92, 0.4); }
.un-abtn-gold { background: linear-gradient(135deg, rgba(217, 180, 92, 0.2), rgba(163, 116, 42, 0.15)); color: var(--un-gold2); border-color: var(--un-gold); }

/* ── الطبقات ── */
.un-overlay {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
.un-overlay.show { display: flex; }
.un-modal {
  width: 100%; max-width: 380px;
  background: linear-gradient(165deg, #16233c 0%, #0d1830 100%);
  border: 1px solid var(--un-bd); border-radius: 18px;
  box-shadow: var(--un-shadow), inset 0 0 0 1px rgba(242, 212, 137, 0.07);
  padding: 22px 20px; text-align: center;
  animation: unPop 0.28s var(--un-ease);
}
@keyframes unPop { 0% { transform: scale(0.86); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.un-modal-title { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.un-om-eyebrow { font-size: 11.5px; letter-spacing: 2px; color: var(--un-t3); text-transform: uppercase; margin-bottom: 4px; }
.un-om-title { font-size: 22px; font-weight: 900; color: var(--un-gold2); margin-bottom: 12px; }
.un-om-wait { font-size: 12px; color: var(--un-t3); margin: 10px 0 0; }
.un-m-scores {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 26px; font-weight: 900; margin: 10px 0 4px;
}
.un-m-scores b:first-child { color: var(--un-gold2); }
.un-m-scores i { font-style: normal; color: var(--un-t3); font-size: 18px; }
.un-m-scores .un-m-target { font-size: 13px; color: var(--un-t3); font-weight: 700; }
.un-m-note { font-size: 12px; color: var(--un-t3); margin: 8px 0; }
.un-m-btns { display: flex; gap: 9px; margin-top: 16px; }
.un-m-btns .un-go { max-width: none; flex: 1; padding: 12px; font-size: 15px; }
.un-m-roomact { margin: 10px 0 0; }
.un-m-final { font-size: 30px; }

/* اختيار اللون */
.un-colormodal-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.un-colorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.un-colorchoice {
  width: 74px; height: 74px; border-radius: 14px; cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s;
  position: relative;
}
.un-colorchoice::after {
  content: ''; position: absolute; inset: 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(45deg) scale(0.62);
}
.un-colorchoice:hover { transform: scale(1.08); }
.un-c-R { background: #e23b47; }
.un-c-B { background: #1668b3; }
.un-c-G { background: #1f9d55; }
.un-c-Y { background: #f2c230; }

/* تسليم الجهاز */
.un-handover .un-go { margin-top: 14px; }

/* إشعارات */
.un-toast {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 80; pointer-events: none;
  padding: 8px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 800;
  background: rgba(12, 22, 40, 0.95); border: 1px solid var(--un-bd);
  color: var(--un-t1);
  opacity: 0; transition: opacity 0.25s;
}
.un-toast.show { opacity: 1; }
.un-toast.gold { border-color: var(--un-gold); color: var(--un-gold2); }

/* [v2.100·بلاغ المالك 2026-10-15 الثالث] إشعار «أونو!» (un-toast) عند الضغط
   على زر أونو (ورقتان بيد اللاعب) كان محشوراً فوق أيقونة اللاعب الجالس في
   الأعلى في البورتريه: موضعه الثابت top:64px سابقٌ لعهد R13 التي رفعت مقعد
   الخصم العلوي ليلامس حد الشاشة (قوس الأوراق عند -15px ثم لوحته بأيقونتها
   الدائرية .un-av) — فصار الإشعار يغطي الأيقونة تغطية شبه تامة (قياساً على
   360×800: تداخل 31.8px من ارتفاعها البالغ 32px، وعمق 32.8px على اللوحة
   كاملة) — والعلاج الجذري: موضع الإشعار يُشتق من هندسة المقعد نفسه لا من
   رقم سحري: قاع اللوحة = -15 + ارتفاع السلسلة(obw×1.4+30) + فجوة 5 + لوحة
   35 = obw×1.4+55 — والموضع المريح obw×1.4+70 = قاع اللوحة +15px على كل
   العروض (يتكيف تلقائياً مع أي مقاس أوراق قادم عبر نقاط انكسار obw الثلاثة
   66/clamp≤700/38≤380). ثم قياس الحافة كشف حالة ثانوية: على الشاشات
   القصيرة يقف HUD البورتريهي عند مرساة top:30% (ناقص نصف ارتفاعه 26px)
   فيصعد قاعُ الإشعار المريح فوقه (قياساً بلا شبه: 360×640 تداخل 11.2px و
   320×568 تداخل 32.8px) — فأُضيف مشبنان رياضيان لا رقمان ساحران جديدان:
   سقف HUD مشتق من مرساة HUD نفسها (30% − 26 نصف HUD − 42 ارتفاع الإشعار
   − 10 نَفَس = 30%−78) يُأخذ الأصغر بينه وبين المريح، وأرضية حد اللوحة
   (obw×1.4+57 = قاع اللوحة+2px) تُأخذ الأكبر — فالنتيجة: الأيقونة محمية
   على كل جهاز (أرضية اللوحة)، وHUD محمي على كل جهاز ارتفاعه ≥640px،
   والتقاطع عند ارتفاع المسرح 680px متصل بلا قفزة، وأضيق الأجهزة الحقيقية
   (320×568) يقبل قاعُ إشعارِه العابر (1.8ث) على هامش HUD العلوي الفارغ
   بعمق ≤20px وهو أسوأ حالة موثقة مقيسة. اللاندسكيب بلا أي مساس (قياساً:
   لا تداخل مع اللوحة — الأيقونة هناك أعلى اليمين والإشعار ممركز؛ إنما
   يلامس أسفل ظهري ورقتي الخصم الوسطيتين وهو سلوك قديم غير مُبلَّغ عنه
   قُيِس ووُثِّق ولم يُمسّ). */
@media (orientation: portrait) {
  .un-stage .un-toast {
    top: max(calc(var(--un-obw) * 1.4 + 57px),
             min(calc(var(--un-obw) * 1.4 + 70px), calc(30% - 78px)));
  }
}

/* ── استجابة ── */
@media (max-width: 700px) {
  .un-stage { --un-cw: clamp(40px, 8.6vw, 56px); --un-bw: clamp(22px, 5.4vw, 34px); --un-fan-base: 30px; }
  .un-hudside { min-width: 72px; padding: 4px 9px; }
  .un-hudscore { font-size: 16px; }
  .un-center { gap: 10px; }
  .un-unobtn { width: 58px; height: 58px; font-size: 13px; bottom: 108px; inset-inline-end: 12px; }
  .un-seat-right { right: 8px; }
  .un-seat-left { left: 8px; }
  .un-plate { min-width: 70px; }
}
@media (max-width: 380px) {
  .un-stage { --un-cw: 38px; --un-bw: 21px; --un-fan-base: 26px; }
}

/* ── Typography للبطاقات (SVG) ── */
.un-csvg .un-num { font-family: 'Arial Black', 'Segoe UI', sans-serif; font-size: 58px; font-weight: 900; }
.un-csvg .un-num2 { font-family: 'Arial Black', 'Segoe UI', sans-serif; font-size: 42px; font-weight: 900; }
.un-csvg .un-corner { font-family: 'Arial Black', 'Segoe UI', sans-serif; font-size: 15px; font-weight: 900; }

/* [R13] بورتريه: نقل round + color لوسط الطاولة فوق الأوراق المرمية */
@media (orientation: portrait) {
  .un-stage .un-hud {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    justify-content: center;
    z-index: 25;
    pointer-events: none;
  }
}

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

/* شارة مجموع نقاط الفريق — مخفية افتراضياً، تظهر في اللاندسكيب فقط */
.un-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: 'Orbitron', 'Cairo', sans-serif;
  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);
}

/* [R13] بورتريه: إزاحة أوراق اللاعبين لمحاذاة حدود الشاشة */
@media (orientation: portrait) {
  /* اللاعب العلوي: قوس الأوراق يلامس الحد الأعلى */
  .un-stage .un-seat-top { top: -15px !important; }
  /* اللاعب الأيمن: قوس الأوراق يلامس الحد الأيمن */
  .un-stage .un-seat-right { right: -15px !important; }
  /* اللاعب الأيسر: قوس الأوراق يلامس الحد الأيسر */
  .un-stage .un-seat-left { left: -15px !important; }
}

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

@media (orientation: landscape) {

  /* ── 3) نقل round + color لوسط الطاولة، يحيطان بمنطقة الطاقم+الرمية ── */
  .un-stage .un-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;
    gap: 0;
  }
  .un-stage .un-hudcenter {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    width: min(96vw, 560px);   /* أعرض من منطقة الطاقم ليحيطا بها */
    gap: 0;
  }
  .un-stage .un-hudround {
    font-size: 16px;
    text-shadow: 0 2px 7px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
  }
  .un-stage .un-hudcolor {
    font-size: 13px;
    text-shadow: 0 2px 7px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7);
  }

  /* ── 4) اللاعب العلوي: قوس الأوراق يلامس الحد الأعلى للشاشة ── */
  .un-stage .un-seat-top {
    top: -15px;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  /* الأوراق (stack) تبقى متمحورة أفقياً عبر مركزية المقعد نفسه */
  /* الأيقونة (plate) تُنقل تماماً لليمين عبر الإخراج من تدفق flex */
  .un-stage .un-seat-top .un-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) اللاعب السفلي: أيقونته بجانب أوراقه وبمحاذاة الحد الأسفل للشاشة ── */
  .un-stage .un-handplate {
    position: absolute;
    bottom: 4px;
    /* الأيقونة بجانب أوراق اللاعب ومتعامدة مع أيقونة اللاعب العلوي */
    left: calc(50% + 135px);
    right: auto;
    top: auto;
    transform: none;
  }
}


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