/* واجهة لعبة البلوت — موبايل أولاً */
/* مخفي بصرياً بس مقروء لقارئ الشاشة (نمط visually-hidden القياسي — ليس display:none) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:root {
  /* تكبير خامس — المستخدم أكّد إن التكبيرات السابقة لسا ما وصلت للمطلوب. رفع جذري هالمرة
     (كان 64/20vw/104) بدل تدرّج تدريجي. */
  --card-w: clamp(80px, 27vw, 135px);
  /* نسبة الورقة الحقيقية من ملفات SVG (viewBox 240×334، الصورة الطبيعية 108×150 ≈ 1:1.389).
     كانت 1.45 غلط: الصندوق يطلع أطول من الرسمة فتنحط بحواف فاضية والهيتبوكس يصير أكبر من
     المرئي. الأهم: .card صار يستعمل aspect-ratio (تحت) فارتفاعه يتبع عرضه دايم مهما تغيّر
     --card-w بأي نطاق — و--card-h هنا باقٍ فقط لحسابات التخطيط (min-height/transform-origin). */
  --card-h: calc(var(--card-w) * 1.389);
  /* ارتفاع الفوتر الثابت (بند 38) — يُحجز أسفل الطاولة عشان اليد تبان كاملة فوقه (مو مقصوصة
     خلفه). قيمته احتياطية فقط: ui.js (syncFooterHeight) يضبطه على الارتفاع الفعلي للشريط
     الظاهر (فوتر اللعب القصير أو حوار المزايدة الأطول) فتُحجَز المساحة الصحيحة بالضبط لكل طور. */
  --footer-h: calc(96px + env(safe-area-inset-bottom));
  /* أدنى ارتفاع ثابت للشريط السفلي — منفصل عن --footer-h عشان قياس الارتفاع الفعلي بالـJS
     ما يدخل بحلقة تغذية راجعة (لو ربطنا min-height بـ--footer-h يتضخّم مع كل قياس). */
  --footer-min: calc(52px + env(safe-area-inset-bottom));
}

/* تثبيت كامل للصفحة على الجوال: بلا تمرير ولا ارتداد (rubber-band) —
   100dvh بدل 100% عشان شريط المتصفح المتحرك، وoverscroll-behavior يمنع سحب الصفحة */
html {
  height: 100dvh;
  overscroll-behavior: none;
}
html, body.game-body {
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-sans);
}
body.game-body {
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
}
/* اللوحات القابلة للتمرير تظل تتمرر داخلياً بدون ما تجر الصفحة معها */
.overlay .panel, #setup-screen, #online-screen, #lobby-screen, #menu-panel {
  overscroll-behavior: contain;
}

body.game-body {
  /* نسيج خفيف (لمسة سدو) فوق خلفية البيج/البني (بند 52) */
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.045) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at center, var(--felt-outer-from) 0%, var(--felt-outer-to) 100%);
  color: var(--felt-ink);
  display: flex;
  flex-direction: column;
}

/* ===== شاشة الإعداد ===== */
#setup-screen, #online-screen, #lobby-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--felt-outer-from) 0%, var(--felt-outer-to) 100%);
  z-index: 50;
  overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#online-screen, #lobby-screen { display: none; }

/* أزرار وعناصر الأونلاين */
.online-cta {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.85rem;
  font-size: 1.15rem;
  font-weight: bold;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-sans);
  cursor: pointer;
}
.online-cta:active { transform: scale(0.98); }
.or-sep { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0.3rem; color: var(--felt-hint); font-size: 0.85rem; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.2); }
.online-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.online-tabs button {
  flex: 1; padding: 0.6rem; border-radius: 10px; border: 2px solid transparent;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1rem; cursor: pointer;
}
.online-tabs button.sel { border-color: var(--felt-trim); background: rgba(216,181,99,.22); }
.online-hint { font-size: 0.85rem; color: var(--felt-hint); margin-top: 0.6rem; }
.online-error { color: #ff9d9d; font-size: 0.9rem; margin-top: 0.6rem; min-height: 1.2em; text-align: center; }

.room-code-box {
  text-align: center; font-size: 1.1rem; margin-bottom: 1rem;
  background: rgba(0,0,0,0.3); border: 1px solid var(--felt-trim); border-radius: var(--radius-lg); padding: 0.6rem;
}
.room-code-box #lobby-code { font-size: 2rem; font-weight: 800; letter-spacing: 4px; color: var(--felt-trim); font-variant-numeric: tabular-nums; }
.room-code-box button { background: none; border: none; font-size: 1.2rem; cursor: pointer; }

#lobby-seats { display: flex; flex-direction: column; gap: 0.5rem; }
.lobby-seat {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 0.6rem 0.8rem;
}
.lobby-seat .ls-av { font-size: 1.4rem; }
.lobby-seat .ls-name { flex: 1; font-size: 1rem; }
.lobby-seat .ls-tag { font-size: 0.75rem; color: #ffe9a8; }
.lobby-seat.empty { opacity: 0.5; }
.lobby-seat.me { border: 1px solid var(--felt-trim); }
.lobby-seat.pickable { cursor: pointer; opacity: 0.75; border: 1px dashed rgba(216,181,99,.6); }
.lobby-seat.pickable:active { transform: scale(0.97); }

.setup-box {
  width: 100%;
  max-width: 420px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(216,181,99,.5);
  border-radius: var(--radius-xl);
  padding: 1.2rem;
  margin-top: 1rem;
}

.setup-box h1 { text-align: center; margin: 0 0 1rem; font-size: 1.6rem; }
.setup-box label, .setup-box .field-group-label { display: block; margin: 0.8rem 0 0.3rem; font-size: 0.95rem; color: var(--felt-label); }

.setup-box input[type="text"] {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  border: none;
  font-size: 1.1rem;
  text-align: center;
  box-sizing: border-box;
}

.mode-row { display: flex; gap: 0.5rem; }
.mode-row button {
  flex: 1;
  padding: 0.7rem 0.4rem;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
}
.mode-row button.sel { border-color: var(--felt-trim); background: rgba(216,181,99,.22); }
.mode-hint { font-size: 0.8rem; color: var(--felt-hint); margin-top: 0.3rem; min-height: 1.2em; }

.bot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bot-row span, .bot-row label { font-size: 0.95rem; margin: 0; color: inherit; }
.bot-row select {
  padding: 0.5rem;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  background: #fff;
}

#start-match {
  width: 100%;
  margin-top: 1.4rem;
  padding: 0.9rem;
  font-size: 1.25rem;
  font-weight: bold;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
#start-match:active { transform: scale(0.98); }

.setup-stats {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--felt-hint);
  text-align: center;
}
.setup-links { margin-top: 0.8rem; text-align: center; }
.setup-links a { color: var(--felt-label); margin: 0 0.5rem; font-size: 0.9rem; }

/* ===== ثيم داكن (بني/ذهبي) لشاشة الإعداد — يطابق القائمة الرئيسية. مقصور على #setup-screen
   فطاولة اللعبة الخضراء ما تتأثر. ===== */
#setup-screen {
  --felt-outer-from: #2a2415;
  --felt-outer-to: #0c0a07;
  --felt-trim: #6b5426;
  --felt-label: #d8c79e;
  --felt-hint: #9c9078;
  --color-accent: #e6b23e;
  --color-on-accent: #1a1206;
}
#setup-screen .setup-box {
  background: linear-gradient(#241d10, #15100a);
  border-color: #4a3c1e;
}
#setup-screen .setup-box input[type="text"] { background: #0d0a06; color: #f3ead6; border: 1px solid #4a3c1e; }
#setup-screen .bot-row select { background: #efe6cf; color: #1a1206; }
/* فوتر ممتد على عرض الصفحة كامل (يتوافق مع الشاشات الكبيرة/البيسي).
   align-self:stretch يملأ عرض الحاوية بلا تجاوز أفقي (تفادي شريط تمرير أفقي). */
.setup-footer {
  align-self: stretch;
  width: auto;
  margin: auto 0 0;
  padding: 14px 1rem calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(#1c160d, #0e0b06);
  border-top: 1px solid #3a2f18;
}
.setup-footer a { color: #d8c79e; text-decoration: none; font-size: 0.92rem; margin: 0; }

/* ===== شريط علوي ===== */
/* بند مراجعة (5): شبكة 3 أعمدة (بداية/وسط/نهاية) — عمود الوسط يتوسّط الشريط بالضبط لأن
   العمودين الجانبيين بنفس العرض (1fr لكل واحد)، بغض النظر عن عرض محتوى أي جهة فعلياً. */
#topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(0.4rem + env(safe-area-inset-top)) 0.7rem 0.4rem;
  background: linear-gradient(180deg, var(--felt-chrome-from), var(--felt-chrome-to));
  border-bottom: 1px solid rgba(216,181,99,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.9rem;
  z-index: 10;
}
.topbar-side { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.topbar-start { justify-content: flex-start; }
.topbar-end { justify-content: flex-end; }
.topbar-center { display: flex; justify-content: center; }
/* بند 51 (تدقيق شامل): نفس خلل [hidden]/display المكتشف ببند 56 — author display:flex
   يبطل UA [hidden]{display:none} بغض النظر عن الخصوصية. مقنّع حالياً بشاشة الإعداد المعتّمة
   (z-index أعلى)، بس نصلحه دفاعياً بدل ما نعتمد على التغطية. */
#topbar[hidden] { display: none; }
.score-pill {
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28));
  border: 1px solid var(--felt-trim);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.8rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--felt-label);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.35);
}
.score-pill .us { color: var(--felt-success); }
.score-pill .them { color: #ff9d9d; }
#buyer-badge {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--felt-label);
  /* نفس فرشة وحد وحواف حبّة النتيجة عشان يبان الشريط العلوي كطقم واحد متناسق */
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.28));
  border: 1px solid var(--felt-trim);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.8rem;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.08), 0 1px 4px rgba(0,0,0,.35);
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#turn-timer {
  font-size: 0.85rem;
  font-weight: bold;
  color: #fff;
  background: var(--felt-danger);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  font-variant-numeric: tabular-nums;
  animation: turnTimerPulse 1s infinite;
}
@keyframes turnTimerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
#menu-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

#menu-panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0.5rem;
  background: var(--felt-panel);
  border: 1px solid rgba(216,181,99,.6);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 190px;
  box-shadow: var(--elev-floating);
}
#menu-panel.open { display: flex; }
#menu-panel button {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: start;
  cursor: pointer;
}
#menu-panel button:active { background: rgba(255,255,255,0.2); }

/* ===== الطاولة ===== */
#table-area {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
  /* بند 38: نحجز مكان الفوتر الثابت أسفل الطاولة حتى يد اللاعب (المكبّرة ببند 35) ما تختفي خلفه */
  padding-bottom: var(--footer-h);
}
#table-area[hidden] { display: none; } /* بند 51: نفس إصلاح [hidden] أعلاه */

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  position: relative;
  transition: filter var(--anim-fast);
}
.seat .avatar {
  /* بند 46: حجم متجاوب (كان ثابت 46px) — يتكيف مع عرض الشاشة بدل رقم واحد لكل المقاسات */
  width: clamp(38px, 11vw, 50px); height: clamp(38px, 11vw, 50px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a6338, #4a3018 72%);
  border: 2px solid rgba(216,181,99,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
}
.avatar-wrap { position: relative; display: inline-flex; }
/* بند مراجعة (مؤشر الحكم): أُلغيت شارة الشرا اللي كانت تتكرر بجانب أفاتار كل لاعب (مربكة —
   4 نسخ من نفس المعلومة بأماكن مختلفة). بدّلناها بمؤشر واحد فقط، مكانه محايد بالشريط العلوي
   (.trump-pill تحت)، يبين نوع اللعبة/الحكم مرة وحدة طول الصكة — مين اشترى فعلاً يتوضّح
   بالحلقة الذهبية الثابتة حول أفاتاره (.seat.buyer أدناه) بلا نص ولا أيقونة إضافية. */
.trump-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-inline-start: 0.4rem;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(216,181,99,.4);
  color: var(--felt-label);
  font-size: 0.72rem;
  line-height: 1.6;
}
.trump-pill[hidden] { display: none; }
.trump-pill.shraa-pop { animation: shraaPop 0.45s ease-out; }
@keyframes shraaPop {
  0% { transform: scale(0.2); opacity: 0; }
  55% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* عد تنازلي 5 ثواني نهاية الصكة: أسفل يسار دائرة أفاتار كل لاعب ثاني (بند 20-21) —
   الشكل الدائري بحلقة تقدّم من .ring-timer (بند 38) */
.hand-timer-seat {
  position: absolute;
  bottom: -4px;
  left: -4px;
  width: 22px; height: 22px;
  font-size: 0.66rem;
  z-index: 3;
}
/* نفس التايمر بس لي أنا — فوق الفوتر (بند 38) أسفل يسار الشاشة */
#hand-timer-self {
  position: fixed;
  bottom: calc(var(--footer-h) + 0.5rem);
  left: calc(0.7rem + env(safe-area-inset-left));
  width: 38px; height: 38px;
  font-size: 1rem;
  z-index: 55;
}

/* مؤقّت الدور (أونلاين): حلقة عد تنازلي ملتصقة بأسفل يسار دائرة اللاعب صاحب الدور — انتقل من
   الشريط العلوي إلى حافة الأفاتار (بند: نقل المؤقّت لحافة دائرة اللاعب النشط). ring-timer يرسم
   الحلقة من --frac اللي تكتبها JS (renderTurnTimer). النبض يلفت النظر إنه وقت ينفد. */
.turn-timer-seat {
  position: absolute;
  bottom: -4px; left: -4px;
  width: 22px; height: 22px;
  font-size: 0.66rem;
  z-index: 6;
  animation: turnTimerPulse 1s infinite;
}
/* شارة الحكم/الصن ملتصقة بأسفل يمين دائرة المشتري (بند: ربط المؤشر بدائرة المشتري) — نص المحتوى
   يكتبه JS (renderSeats): لون الحكم/☀️/🔄. display:inline-flex يبطل [hidden] فنعيد إخفاءه صراحة. */
.hukum-badge {
  position: absolute;
  /* أسفل يمين الدائرة فعلياً (right فيزيائي، مو inset-inline-end اللي يصير يسار بصفحة RTL) —
     الجهة المقابلة لمؤقّت الدور (أسفل يسار) عمداً فما يتصادمان لو المشتري نفسه صاحب الدور. */
  bottom: -5px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--felt-panel);
  border: 1.5px solid var(--felt-trim);
  border-radius: var(--radius-pill);
  color: var(--felt-label);
  font-size: 0.82rem; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.55);
  z-index: 7;
}
.hukum-badge.red { color: #ff7a7a; }
.hukum-badge[hidden] { display: none; }

/* اللي عليه الدور: هالة ذهبية تنبض حول أفاتاره + اسمه يصير ذهبي */
.seat.turn .avatar {
  border-color: var(--felt-trim);
  animation: turnGlow 1.15s ease-in-out infinite;
}
.seat.turn .pname { color: var(--felt-label); font-weight: 700; }
@keyframes turnGlow {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(216,181,99,.55), 0 2px 8px rgba(0,0,0,.4); }
  50% { box-shadow: 0 0 18px 7px rgba(216,181,99,.95), 0 2px 8px rgba(0,0,0,.4); }
}
/* بند مراجعة: اللي حسم الشرا (المشتري) — حلقة ذهبية ثابتة (بلا نبض) حول أفاتاره طول الصكة،
   مميّزة عن هالة الدور المتحركة .seat.turn فوق (تلك تنبض وتختفي بدوره التالي، وهذي ثابتة
   وتبقى طول الصكة). حد رفيع نظيف بلا نص/أيقونة إضافية — علامة هوية بصرية بس. */
.seat.buyer .avatar {
  outline: 2px solid var(--felt-trim);
  outline-offset: 3px;
}
/* اللاعب نفسه (تحت): أفاتار أكبر وأوضح */
#human-row .avatar { width: clamp(46px, 13vw, 62px); height: clamp(46px, 13vw, 62px); font-size: 1.8rem; border-width: 3px; }
.seat .pname { font-size: var(--type-label); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .plevel { font-size: var(--type-label); color: var(--felt-label); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* بند 55: تسمية «الموزع» أعلى يسار منطقة اللاعب — left صريحة (بدل inset-inline-end المعتمدة
   على اتجاه الصفحة) عشان تبقى يسار فعلاً بغض النظر عن أي تغيير مستقبلي بـdir */
.seat .dealer-chip {
  position: absolute; top: -6px; left: -10px;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: 0.6rem; font-weight: bold;
  border-radius: var(--radius-pill); padding: 1px 5px;
  display: none;
}
.seat.dealer .dealer-chip { display: block; }
/* seat-3 دايمًا يسار الشاشة فعليًا (المعرّفات view-relative لللاعب) — الشارة بـleft:-10px
   تطلع خارج حدود الشاشة وتنقص هناك، فنعكسها لداخل الشاشة بس لهالمقعد. */
#seat-3 .dealer-chip { left: auto; right: -10px; }

/* ظهر ورق الخصوم — بند مراجعة (فان بنمط «كملنا»): تصميم قديم كان يحط الظهر تحت الاسم بتكديس
   عمودي للمقاعد الجانبية. صار كل المقاعد الثلاثة (فوق ويمين ويسار) تعرض ظهر ورقها فوق الأفاتار
   مباشرة، بفان مقوّس خفيف (شريحة بيتزا) يعكس نفس منطق قوس يد اللاعب — كل ورق يبان تابع فعلاً
   لصاحبه لأنه فوق أفاتاره بالضبط. --n/--i من ui.js (renderSeats). */
.backs { display: flex; justify-content: center; height: 30px; margin-bottom: 2px; }
.cardback {
  /* بند 46: مشتقة من --card-w (نفس نظام تحجيم الورق) بدل بكسلات ثابتة — تتكبّر مع الشاشة */
  width: calc(var(--card-w) * 0.3); height: calc(var(--card-w) * 0.435);
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, #7a1f2b 0 4px, #5d1620 4px 8px);
  border: 1px solid rgba(255,255,255,0.55);
  margin-inline-start: calc(var(--card-w) * -0.16);
  transform-origin: 50% 135%;
  /* بند فان: ميلان متدرّج من الوسط للطرفين (بدون abs() — دعم متصفحات محدود لهالدالة CSS بعد) */
  transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 5deg));
}
.cardback:first-child { margin-inline-start: 0; }
/* منتقي ظهر الورق (الإعدادات) — data-card-back على <html>. يشمل ظهر الخصوم + كومة التوزيع
   + الورق الطائر (.deal-fly كلها .cardback). الأحمر = الافتراضي. */
html[data-card-back="blue"] .cardback { background: repeating-linear-gradient(45deg, #1f3a7a 0 4px, #16265d 4px 8px); }
html[data-card-back="classic"] .cardback { background: repeating-linear-gradient(45deg, #8a5a12 0 4px, #6b4410 4px 8px); }
html[data-card-back="rassah"] .cardback { background: #0e281c url("assets/logo.jpg") center/cover; }
/* المقاعد الجانبية: مساحة العمود أضيق — ظهر أصغر شوي عشان الفان ما يفيض بشكل مبالغ فيه */
#seat-1 .cardback, #seat-3 .cardback {
  width: calc(var(--card-w) * 0.24); height: calc(var(--card-w) * 0.348);
}

#mid-row {
  display: grid;
  /* بند مراجعة UI: كانت أعمدة ثابتة (56px) بينما أفاتار المقعد متجاوب (clamp أعلاه) — على
     التابلت/الشاشة العريضة الأفاتار يكبر ويقرب من حافة عمود ثابت فتنقص شارة الموزّع/الشرا،
     وعلى الجوال الصغير جداً العمود الثابت يفيض عن العرض المتاح. صارت clamp تتبع نفس مقياس
     .seat .avatar مع هامش بسيط يكفي شارات الحواف (dealer-chip/hukum-badge). */
  grid-template-columns: clamp(46px, 13vw, 58px) 1fr clamp(46px, 13vw, 58px);
  align-items: center;
  min-height: 0;
}
/* بند فان: الأعمدة الجانبية ضيقة لكن .seat نفسه ما عنده overflow:hidden — الفان يفيض بحرية
   فوق حافة العمود الضيقة بدون ما ينقص من عرض الطاولة المتاح لمنطقة الوسط (grid 1fr). */
#seat-3, #seat-1 { justify-self: center; overflow: visible; }
/* بند مراجعة (اتجاه فان يد الخصم): الفان (margin-inline-start سالب + دوران متماثل) ينمو
   دايماً لجهة start (يمين بصفحة RTL) — صحيح لمقعد-1 (يمين الشاشة فعلياً: الفان ينفتح يسار
   أي نحو الوسط) لكن معكوس لمقعد-3 (يسار الشاشة فعلياً: نفس الاتجاه يطلّع الفان بعيد عن
   الوسط لا نحوه). نعكس .backs كاملة أفقياً لمقعد-3 بس (ترتيب الورق + ميل كل ورقة سوا)
   فيصير فانه ينفتح يمين= نحو الوسط، مطابق تماماً لمقعد-1 بصرياً. */
#seat-3 .backs { transform: scaleX(-1); }
/* بند Phase 4: الخصم العلوي (مقعد-2) — نعكس القوس عمودياً عشان يتقوّس نحو مركز الطاولة
   (للأسفل) بدل ما ينقلب بعيد عنه. نفس منطق قلب مقعد-3 أفقياً، بس على المحور العمودي. */
#seat-2 .backs { transform: scaleY(-1); }

/* منطقة الوسط */
#center {
  position: relative;
  height: 100%;
  min-height: 232px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* الفرشة — بند 54: فرشة مربعة/شبكية (تخطيط مربع للسوق) بدل الدائرة السابقة */
#mat {
  position: absolute;
  inset: 6% 8%;
  border-radius: var(--radius-xl);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px calc(100% / 3)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px calc(100% / 3)),
    radial-gradient(ellipse at 50% 36%, rgba(255,255,255,0.07) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px),
    radial-gradient(ellipse at center, var(--felt-mat-from) 0%, var(--felt-mat-to) 100%);
  border: 4px double var(--felt-trim);
  box-shadow:
    var(--elev-felt-inset),
    0 0 0 2px rgba(216,181,99,.28),
    0 0 24px rgba(216,181,99,.16),
    0 6px 18px rgba(0,0,0,0.35);
}
#mat::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(216,181,99,.4);
}
/* إطار زخرفة مستطيل حول حافة الفرشة (بند 54: كانت حلقة دائرية) — يختفي بأمان لو المتصفح ما يدعم الأقنعة */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #mat::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--radius-xl);
    padding: 3px;
    background: repeating-linear-gradient(45deg, var(--felt-trim) 0 4px, transparent 4px 12px);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
  }
}

#trick-zone { position: absolute; inset: 0; perspective: 900px; }
/* كل ورقة أساسها نص الطاولة، وتتفنّن لجهة صاحبها */
.tcard {
  position: absolute;
  left: 50%; top: 50%;
  transition: transform 0.42s ease, opacity var(--anim-med) ease;
  /* بند 37: اتجاه رأس الورقة نحو صاحبها (--rot، بند 4) + ميلان عشوائي بسيط شكلي (--jit) */
  transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) rotate(calc(var(--rot, 0deg) + var(--jit, 0deg)));
  /* بند تحسين تكديس الورق: --z تكتبها JS بترتيب اللعب (الأحدث فوق الأقدم دايماً) */
  z-index: var(--z, 1);
}
/* رأس كل ورقة باتجاه صاحبها: تحت 0° (متل ما حطها قدامه)، يمين -90°، فوق 180°، يسار +90°.
   بند تحسين تكديس الورق: قرّبنا الإزاحات أكثر (كانت ±46/58px) عشان الأربع أوراق تتراكب بوضوح
   بنص الطاولة (تكديس طبيعي متل كملنا) بدل تباعد شكل الماسة الواسع. */
.tcard[data-seat="0"] { --ox: 0px; --oy: 26px; --rot: 0deg; }
.tcard[data-seat="1"] { --ox: 30px; --oy: 3px; --rot: -90deg; }
.tcard[data-seat="2"] { --ox: 0px; --oy: -26px; --rot: 180deg; }
.tcard[data-seat="3"] { --ox: -30px; --oy: 3px; --rot: 90deg; }

/* الورقة الجديدة تطير من جهة صاحبها الفعلية (على الكرت الداخلي) — --fx/--fy تكتبها JS ديناميكياً
   من موضع أفاتار/شارة اللاعب الحقيقي على الشاشة وقت اللعب (renderTrick)، مو قيمة ثابتة بالـCSS —
   فاتجاه الطيران يطابق مقعد اللاعب الفعلي دائماً (فوق/تحت/يمين/يسار) بدل اتجاه تقريبي عام. */
.tcard .card { animation: flyIn var(--anim-fast) ease-out both; transform-style: preserve-3d; }
/* بند 26: ظل تلامس أوضح للورق المرمي عالطاولة عشان يبين مرفوع عن الفرشة، لا لاصق فيها */
.tcard .card { box-shadow: 0 6px 14px rgba(0,0,0,0.4), var(--elev-raised); }
.tcard.settled .card { animation: none; }
@keyframes flyIn {
  from { transform: translate(var(--fx, 0px), var(--fy, 120px)) rotateX(22deg) scale(1.12); opacity: 0.55; }
  to { transform: translate(0, 0) rotateX(0deg) scale(1); opacity: 1; }
}
/* حجم ورق الأكلة بنص الطاولة: أكبر شوي بعد ما قرّبنا التكديس (كان clamp(40,11vw,60)) — يبقى
   أصغر بوضوح من ورق اليد فما يتطابقان، بس يبان أوضح وأقرأ فوق الفرشة. */
/* حجم موحّد لورق الطاولة: الورق الملعوب + الموزّع الطائر + ورقة السوق كلها بنفس الحجم ~62px
   (بند توحيد الأحجام). أصغر بوضوح من ورق اليد فما يتطابقان، بس أوضح وأقرأ فوق الفرشة. */
.tcard .card.mini { --card-w: clamp(46px, 13vw, 62px); }

/* المرحلة 1 (بند 36): الورق يتجمّع كحزمة مرتبة بنص الطاولة — ميلان بسيط متدرّج حسب الترتيب
   (بدل ما ينطبق فوق بعض دفعة وحدة فيبان تصادم/تراكب فوضوي). أطراف الحزمة مرتبة كورق ممسوك. */
#trick-zone.gather .tcard {
  transform: translate(-50%, -50%) rotate(var(--gr, 0deg)) !important;
  transition: transform 0.34s ease;
  z-index: 6;
}
#trick-zone.gather .tcard:nth-child(1) { --gr: -7deg; }
#trick-zone.gather .tcard:nth-child(2) { --gr: -2deg; }
#trick-zone.gather .tcard:nth-child(3) { --gr: 3deg; }
#trick-zone.gather .tcard:nth-child(4) { --gr: 8deg; }
/* المرحلة 2 (بند 36): الحزمة كلها تنزلق لجهة الفائز كوحدة واحدة (نحتفظ بميلان --gr عشان
   تتحرك متماسكة مرتبة)، وتصغّر وتختفي بانتقال أنعم — بلا "رطسة". */
#trick-zone.collect .tcard {
  transform: translate(-50%, -50%) translate(var(--cx, 0px), var(--cy, 0px)) rotate(var(--gr, 0deg)) scale(0.34) !important;
  transition: transform var(--anim-slow) var(--anim-spring), opacity var(--anim-slow) ease;
  opacity: 0;
}

/* بانر الوسط: مين اشترى / المشاريع */
#center-banner {
  position: absolute;
  top: 50%;
  inset-inline: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--felt-label);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  pointer-events: none;
  opacity: 0;
  z-index: 15;
}
#center-banner.show { animation: bannerPop 1.6s ease-out both; }
@keyframes bannerPop {
  0% { opacity: 0; transform: translateY(-50%) scale(0.6); }
  15% { opacity: 1; transform: translateY(-50%) scale(1.08); }
  25% { transform: translateY(-50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-58%) scale(0.95); }
}

/* ورق المشروع ينزل بجانب مقعد صاحبه (~5 ثواني) بدون ما يوقف اللعب */
.proj-reveal-float {
  position: absolute;
  display: flex;
  gap: 3px;
  z-index: 16;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--anim-fast);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.proj-reveal-float.show { opacity: 1; }

/* ورقة السوق تطير لمقعد اللي أخذها فعلياً (بند 27، أوضح وأبطأ ببند 42) —
   تبقى مرئية طول المسار وما تتلاشى إلا بآخره. النسخة عنصر .card (نسخة من ورقة السوق)، و.card
   تعرّف position:relative بعد هالقاعدة بنفس الأولوية فتغلبها — لازم خصوصية أعلى (.card.market-
   take-float) عشان تبقى absolute. لو صارت relative تدخل تدفّق الـgrid كصف رابع بـ#table-area
   وتاكل مساحة صف الوسط (1fr) فما توصل اليد لأسفل الطاولة (تطفو فوق الفوتر). */
.card.market-take-float {
  position: absolute;
}
.market-take-float {
  z-index: 40;
  pointer-events: none;
  transition: left 0.72s cubic-bezier(.35, .1, .25, 1), top 0.72s cubic-bezier(.35, .1, .25, 1), opacity 0.32s ease-in 0.5s, transform 0.72s cubic-bezier(.35, .1, .25, 1);
  box-shadow: var(--elev-floating);
}

/* بند 8: أنيميشن التوزيع — مجموعة ورق مقلوبة بنص الطاولة (#deal-deck) وورق يطير منها للاعبين
   (.deal-fly). أثناء التوزيع نخفي الورق الحقيقي (backs/يد) فما «يظهر فجأة» — يبان لما يوصل. */
#deal-deck { position: absolute; z-index: 38; pointer-events: none; }
#deal-deck .cardback { position: absolute; margin: 0; box-shadow: 0 2px 5px rgba(0,0,0,.4); }
.deal-fly { position: absolute; z-index: 41; margin: 0; box-shadow: var(--elev-floating); will-change: left, top, transform; }
#table-area.dealing .backs { opacity: 0 !important; }
#table-area.dealing #hand .card { opacity: 0 !important; }
/* كشف تدريجي أثناء التوزيع: كل ورقة توصل يد اللاعب تُكشف فوراً (تاخذها بيدك وتشوفها)،
   بدل ما تنكشف كل الأوراق دفعة وحدة بالنهاية. ui.js يضيف .deal-shown لما توصل الورقة. */
#table-area.dealing #hand .card.deal-shown { opacity: 1 !important; }

#bid-center {
  text-align: center;
  /* بند مراجعة (تراكب نص المزايدة): صندوق المزايدة (ورقة السوق + سطر «الجولة الأولى… ولا صن؟»)
     كان سطره السفلي يقع داخل المنطقة المحجوزة لليد (#hand بـz-index:1) فيتغطّى النص. نرفع
     الصندوق كامل فوق اليد أثناء المزايدة فقط (بيد الأصل مخفي #bid-center طول اللعب فما يمس
     تكديس أطوار اللعب). */
  position: relative;
  z-index: 3;
}
/* ورقة السوق أثناء المزايدة تبان بارزة وواضحة (مركز انتباه اللاعبين)، لكن أصغر بوضوح من ورق
   اليد — لا تطابقه أبداً (طلب المستخدم). عرضها أقل من الحد الأدنى لعرض ورقة اليد بكل المقاسات. */
/* بند مراجعة (تراجع متعمّد عن قرار سابق): طلب صريح سابق كان يفرض ورقة السوق أصغر من ورق اليد
   عمداً ("لا تتطابق أبداً"). التعليمة الأخيرة تطلب العكس — نفس مقاس الورق القياسي بالضبط — لذا
   حذفنا الـoverride هنا فترث --card-w القياسي من :root (clamp(80px,27vw,135px)) بدل قيمة أصغر
   مخصّصة. ملاحظة: هذا يلغي طلب "ما يتطابقان أبداً" من صكة سابقة عمداً بناءً على آخر تعليمة. */
/* بند Phase 4: يُحذف نصّ إشعار الوسط («الجولة الأولى: حكم على المكشوفة ولا صن؟») عشان
   وسط الطاولة يبقى فاضي للورق. ui.js لا يزال يكتب النص لكن العنصر مخفي (بلا خطر منطقي). */
#bid-center .hint { display: none; }
/* ورقة السوق (أول ورقة مزايدة) بنفس الحجم الموحّد لورق الطاولة (~62px) — نضبط --card-w
   مباشرة بدل transform:scale عشان تتطابق تماماً مع الورق الملعوب والموزّع. */
#top-card-slot .card { --card-w: clamp(46px, 13vw, 62px); }

/* بطاقة — ورق SVG حقيقي (deck: Kaggle complete-52-card-deck) */
.card {
  width: var(--card-w);
  /* الارتفاع يتبع العرض بنسبة الرسمة الحقيقية (108:150) — يضمن الهيتبوكس = المرئي بالضبط
     (object-fit: contain على صندوق بنفس نسبة الرسمة = بلا أي حواف فاضية) ويشيل اعتماد
     الارتفاع على --card-h المشتقة مرة وحدة بجذر الصفحة. */
  aspect-ratio: 108 / 150;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-raised);
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  background: transparent;
}
.card .card-face {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
}
/* بند مراجعة UI: كانت مقاسات ثابتة (56/81px) بغض النظر عن حجم الشاشة — صارت مشتقة من نفس
   نسبة الورق الأساسية (1:1.45، مطابقة لـ--card-h:calc(--card-w*1.45) بالجذر) عشان تتكبّر/
   تصغّر مع باقي نظام التحجيم المتجاوب بدل رقم واحد على كل الأجهزة. تُستخدم بعرض المشاريع
   وشريط آخر أكلة ودليل القيد. */
.card.mini { --card-w: clamp(40px, 11vw, 60px); } /* العرض + aspect-ratio من .card يكفيان — الارتفاع يتبع تلقائياً */

/* يد اللاعب — بند 47: مساحة محجوزة 40% من ارتفاع الشاشة من الأسفل (فوق الفوتر مباشرة،
   بدون ما يقصها)، وعرضياً مقيّدة بـ80% من عرض الشاشة كحد أقصى (هامش فاضي على كل جنب) */
#hand-wrap {
  /* بند مراجعة (1، إعادة تصميم): هامش علوي أوضح (رفعناه أكثر) + مساحة محجوزة أقل (كانت 40dvh
     أكبر بكثير من الحاجة الفعلية لليد فتاكل مساحة الطاولة فوقها بلا داعٍ) — اليد نفسها تبقى
     بنفس حجم ورقها (--card-w ما تغيّر)، بس تنزل أوطى وتغرق أعمق خلف الفوتر (--hand-bottom تحت)
     فالمساحة المحجوزة الفعلية تقل والطاولة (مساحة #mid-row) تكبر بالمقابل. */
  padding: 1.7rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: 30dvh;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
/* بند مراجعة (2): عمود متمركز (متل بقية المقاعد) بدل صف أفقي — كان اسم اللاعب يبين مزاح
   عن مركز أفاتاره (avatar+name جنب بعض بدل تحته)، فرق قسناه فعلياً بـ45px بأدوات الفحص. */
/* بند 5 (واجهة اللعب): أفاتار اللاعب المحلي متوسّط أسفل الطاولة (فوق الفوتر) واسمه يمينه — لا
   تحته. الصفحة RTL فـrow-reverse يخلي أول عنصر (الأفاتار) يسار والاسم يمينه بصرياً. */
#human-row { display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 0.5rem; max-width: 80vw; }
#human-row .pname, #human-row .projs { text-align: start; }
#human-row .pname { max-width: 40vw; }
/* بند مراجعة (تصحيح): شارة اللاعب المحلي تتوسّط أفقياً فوق الفوتر بالكامل — بدون أي تراكب أو
   جزء داخل الفوتر (كانت تنزل تركب على الحافة نص-نص). bottom بمسافة واضحة فوق حافة الفوتر
   العلوية (0 بإحداثيات #hand-wrap relative = حافة الفوتر بالضبط، فنرفعها فوقها بهامش صريح).
   نثبّت #seat-0 نفسه (ابن #hand-wrap المباشر) لأن #human-row حاويته #seat-0 وهو relative. */
/* بند: محاذاة دائرة اللاعب — مركز الأفاتار العمودي يقع على حافة الفرشة السفلية الذهبية (أعلى
   #hand-wrap ≈ أسفل الطاولة). كان الأفاتار غاطساً وسط ورق اليد (bottom:14px) فيتراكب مع الورق
   بشكل مربك. الحين فوق اليد مباشرة عند حافة الطاولة، فيبان واضحاً وما يتراكب مع الورق المقوّس تحته.
   z-index أعلى من ورق اليد (--z ≤ عدد الورق) فيبقى الأفاتار ظاهراً فوقها دايماً بلا خلل تراكب. */
/* بند Phase 4: شارة اللاعب المحلي مركّبة على الحافة العلوية الوسطى لشريط الفوتر الثابت
   (#footer-bar الآن الأب الموضعي بعد نقل #seat-0 داخله). top:0 + translateY(-50%) يخلّي
   مركزها يقع على حافة الفوتر العليا (نصّها فوق الفوتر)، z-index أعلى من الفوتر (24). */
#footer-bar > #seat-0 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 26;
  align-items: center;
  pointer-events: none;
}
#footer-bar > #seat-0 .avatar-wrap { pointer-events: auto; }
#hand {
  /* اليد صارت طبقة إحداثيات: كل ورقة absolute وموضعها/دورانها يحسبهم JS (fanLayout في ui.js)
     على شكل قوس محسوب رياضياً (spline) بدل تراكب هوامش + محور دوران بعيد. الحاوية relative
     عشان تصير مرجع الإحداثيات، وwidth:100% عشان clientWidth يعطي العرض المتاح للتوزيع. */
  position: relative;
  width: 100%;
  /* بند مراجعة: تكبير طفيف (كان 104/36vw/158) — يبقى أكبر بوضوح من ورقة السوق
     (clamp 92/30vw/130) فما يتطابقان أبداً. */
  --card-w: clamp(110px, 37.5vw, 166px);
  --card-h: calc(var(--card-w) * 1.389);
  /* ارتفاع يكفي القوس (رفع الوسط ≈ 13% من طول الورقة) + رفعة التمرير/التحديد. الورق absolute
     فما يعطي ارتفاعاً بنفسه، وهالـ min-height هو اللي يحجز مكانه فوق الفوتر. */
  min-height: calc(var(--card-h) + 44px);
  max-width: 98vw;
  margin-inline: auto;
}
/* موضع كل ورقة يتركّب من متغيّرات يكتبها JS (--tx/--ty/--rot لموضع القوس، و--z للترتيب)
   مع متغيّرات حالة يكتبها CSS فقط (--lift للرفع عند التمرير/التحديد، --pop للتكبير،
   --dscale لتكبير دخول التوزيع). فصلهم يخلّي التمرير يتركّب فوق موضع القوس بدون ما يلغيه،
   وانتقال transform ينعّم إعادة ترتيب اليد لما تنلعب ورقة (تنزلق الورق لمواضعها الجديدة). */
#hand .card {
  position: absolute;
  left: 50%;
  /* نمط «كملنا»: اليد ترتكز أوطى بكثير فتغرق حافتها السفلى خلف الفوتر الثابت (الفوتر أعلى بالـ
     z-index وخلفيته صلدة فيبتلع أسفل الورق فعلياً) — يبان الجزء المفيد بالأعلى (الأرقام والرموز)
     وتحس إنك «ماسك» الورق داخل اللعبة. الجزء الظاهر فوق الفوتر يبقى كبير وقابل للنقر/السحب.
     نفس النزول يبعد رأس القوس عن ورقة السوق بالمزايدة. */
  /* بند Phase 4 (نمط كملنا): اليد تغرق أعمق خلف الفوتر الصلد — يبان بس النصف العلوي (الأرقام
     والرموز) فوق الفوتر الرمادي. كان -88px (يبان ~63% من الورقة) → -140px (~النصف). */
  bottom: var(--hand-bottom, -140px);
  transform:
    translate(calc(-50% + var(--tx, 0px)), calc(var(--ty, 0px) + var(--lift, 0px)))
    rotate(var(--rot, 0deg))
    scale(calc(var(--pop, 1) * var(--dscale, 1)));
  transform-origin: 50% 100%;
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease-out;
  cursor: pointer;
  z-index: var(--z, 1);
  will-change: transform;
}
/* أثناء السحب: الورقة تتبع الإصبع مباشرة بدون transition. بند تفاعل اليد: نحافظ على ترتيب
   التكديس الطبيعي (--z) ولا نقفزها فوق جاراتها — لا تغطّي أرقام/رموز الورق المجاور. الرفع
   الفيزيائي (تتبع الإصبع للأعلى) + الظل يكفيان كإشارة «ماسك الورقة»، والورقة تخرج فوق صف
   اليد بحركتها فتبان كاملة بدون أي تلاعب بالـ z-index. */
#hand .card.dragging {
  transition: none;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}
/* مؤشر تركيز للتنقّل بلوحة المفاتيح (Tab/Enter/Space) — استثناء وصول فقط: نرفع z-index عشان
   يبين إطار التركيز كامل لمستخدم الكيبورد (مو مسار اللمس/الماوس اللي يخص بند التكديس). */
#hand .card:focus-visible { outline: 3px solid var(--felt-trim); outline-offset: 3px; z-index: 61; }
/* Module 2: أنيميشن التوزيع (موجة 3، وقفة، موجة 2، ثم ورقة السوق) صار مسؤولية GSAP بالكامل
   (js/ui.js: dealWaveAnimate/dealBacksAnimate/dealKoutAnimate) بدل CSS keyframes، لتحكم أدق
   بالـ easing ولانتقالات أنعم. الكلاسات dealing/deal-kout باقية كإشارة تفعيل فقط (JS يقرأها)
   بدون أي تنسيق CSS مرتبط فيها الآن. */
#hand .card.disabled { filter: brightness(0.55); pointer-events: none; }
/* تحديد الورقة بدون حركة عمودية مزعجة: على اللمس (جوال) الضغطة تنوّر الورقة فقط ثم تنلعب —
   بلا القفزة-وترجع اللي كانت تحصل مع :active/translateY. اللمعان والحد الذهبي (legal-hint)
   يوصّلان التحديد بوضوح بمكان الورقة نفسه. */
#hand .card.playable:active { filter: brightness(1.12); }
/* الرفعة اللطيفة تبقى فقط لمؤشر فعلي (ماوس على سطح المكتب) — ما تنطبق على اللمس إطلاقاً.
   ترفع وتكبّر الورقة عبر --lift/--pop فتتركّب فوق موضع القوس (--tx/--ty/--rot) بدل ما تلغيه. */
/* بند مراجعة (رؤية الورق المجاور): كان --pop:1.06 يكبّر الورقة من مركزها الأفقي (transform-
   origin:50% 100%) فتتمدّد يمين ويسار قليلاً فوق الورق المجاور المتراكب معها — قد يغطي حرف/رمز
   ركن ورقة جنبها كان ظاهراً. الرفع (--lift) وحده كافٍ كإشارة تحديد واضحة بدون تكبير العرض. */
@media (hover: hover) and (pointer: fine) {
  /* بند تفاعل اليد: التمرير يرفع الورقة عمودياً فقط (--lift) — بلا أي تغيير للـ z-index،
     فتبقى بترتيبها الطبيعي تحت جارتها اليمنى ولا تغطّي قيمتها. */
  #hand .card.playable:hover { --lift: -22px; }
}
/* بند 30: الشارة الذهبية تعبّر فقط عن مطابقة قوانين اللحاق الإجباري بالشكل (legal-hint) —
   بالوضعين العادي والآمن، بدون أي علاقة بالقدرة على اللعب (playable) نفسها ولا أي إيحاء بأمان */
#hand.my-turn .card.legal-hint { box-shadow: 0 0 0 2px var(--felt-trim), 0 2px 6px rgba(0,0,0,0.35); }

/* Module 5: قائمة انتظار الحركة — ورقة محدّدة مقدماً (قبل دورك) تتوهّج وتاخذ علامة صح،
   تتنفّذ تلقائياً أول ما يجي دورك بدون ضغطة إضافية */
#hand .card.queued {
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--color-accent, #d8b563), 0 0 16px 4px rgba(216,181,99,.65);
  /* بند تفاعل اليد: التحديد المسبق يرفع الورقة عمودياً فقط (--lift) بلا رفع z-index —
     يبقى ترتيب التكديس طبيعي فلا تقفز أمام جارتها اليمنى. التوهّج/علامة الصح داخل حدودها. */
  --lift: -16px;
}
/* بند مراجعة: كانت الشارة تبرز 6-8px برا حدود الورقة نفسها (تجاه الورقة المجاورة المتراكبة)،
   فتغطي أحياناً رمز الركن العلوي للورقة جنبها. صارت بالكامل داخل حدود الورقة صاحبتها. */
#hand .card.queued::after {
  content: "✓";
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent, #d8b563);
  color: #2b1d12;
  font-weight: bold;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  z-index: 62;
}

/* ورق الحكم (الطرنيب): بدون أي إطار/outline — طلب المستخدم إزالته (الورق يبقى نظيف متل كملنا).
   الكلاس .trump باقٍ (يُضاف من ui.js) بدون أي تنسيق بصري، حتى ما نلمس منطق الرسم. */

/* فقاعة كلام */
.bubble {
  position: absolute;
  inset-inline: 0;
  width: fit-content;
  max-width: min(65vw, 240px);
  margin-inline: auto;
  background: #fff;
  color: #222;
  font-weight: bold;
  font-size: 1.05rem;
  padding: 0.4rem 0.9rem;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  z-index: 20;
  text-align: center;
  overflow-wrap: break-word;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateY(4px);
  pointer-events: none;
}
.bubble.show { opacity: 1; transform: translateY(0); }

/* حوارات الأزرار الثلاثة (مزايدة/دبل/إعلان مشاريع) — كلها مصمّمة كـ«فوتر» بنفس مكان وشكل
   الشريط السفلي الثابت (بند 38)، فتبان كفوتر واحد دائم تتبدّل محتوياته حسب الطور (متل كملنا):
   عرض كامل، ملتصقة بالأسفل، حد ذهبي علوي، بلا حركة ظهور عائمة كبيرة. أزرارها بلا خلفية (بند 3). */
#bid-dialog, #double-dialog, #declare-dialog, #gablak-dialog {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  margin: 0;
  max-width: none;
  min-height: var(--footer-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  background: linear-gradient(180deg, var(--felt-chrome-from), var(--felt-chrome-to));
  border: none;
  border-top: 1px solid var(--felt-trim);
  border-radius: 0;
  padding: 0.35rem 0.8rem calc(0.4rem + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: transform 0.18s ease-out, opacity 0.18s;
  z-index: 30;
  box-shadow: 0 -4px 16px rgba(0,0,0,.45);
}
#declare-dialog { z-index: 31; }
#bid-dialog.open, #double-dialog.open, #declare-dialog.open, #gablak-dialog.open {
  transform: translateY(0); opacity: 1; pointer-events: auto;
}
/* بند مراجعة (تبسيط النوافذ): ما فيه أي نص وصفي بالحوارات — بس الأزرار (العنصر التفاعلي
   الوحيد اللازم). نخفي كل عناوين h3 بدل ما نمسحها من الـDOM (JS بعضها لسا يكتب لها نص
   ديناميكي بأماكن ثانية — التبسيط هنا بصري بحت، بدون لمس منطق JS). */
#bid-dialog h3, #double-dialog h3, #declare-dialog h3, #gablak-dialog h3 {
  display: none;
}
/* على الشاشات العريضة نمنع تمدّد المحتوى لكامل العرض ونخليه بالوسط */
#bid-dialog > *, #double-dialog > *, #declare-dialog > * {
  width: 100%; max-width: 460px; margin-inline: auto;
}
#declare-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 0.7rem; }
/* أزرار المشاريع: نصية شفافة — نص ذهبي وحد رفيع، بدون خلفية */
.declare-chip {
  background: none;
  border: 1px solid rgba(216,181,99,.55);
  color: var(--felt-label);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  min-height: var(--touch-min);
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}
.declare-chip:active { transform: scale(0.95); }
/* Module 4: زر مشروع محدَّد (ادّعيته، بانتظار «تم») — تعبئة ذهبية بدل الحد الشفاف فقط */
.declare-chip.selected {
  background: linear-gradient(180deg, #ecd08a 0%, #c89b3c 100%);
  color: #2b1d12;
  border-color: transparent;
}
/* بند حكم: زر 400 يختفي بصرياً وقت الحكم (المشروع مو متاح بهالطور بالواجهة) */
.declare-chip:disabled { opacity: 0.35; pointer-events: none; }
.bid-btns { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap; }
/* بند 49: أزرار الشراء (صن/حكم/أشكل/بس) — فرشة ذهبية مصمتة موحّدة بنمط «كملنا» بالضبط
   (كانت نصية شفافة بألوان متفرقة لكل نوع — الترتيب اليمين-يسار كان مطابق أصلاً، التصميم فقط تغيّر) */
.bid-btns button {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--touch-min);
  padding: 0.55rem 0.3rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: linear-gradient(180deg, #ecd08a 0%, #c89b3c 100%);
  color: #2b1d12;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.bid-btns button:not(:disabled):active { transform: scale(0.95); }
.bid-btns button:disabled { opacity: 0.4; box-shadow: none; }
/* كاشو: إعلان خاص (يد ميّتة) — تلوين متميّز عن أزرار الشراء الذهبية عشان يبين إنه مسار مختلف */
.bid-btns .b-kasho { background: linear-gradient(180deg, #8fd3c8 0%, #3f9d8c 100%); color: #08221d; }
#suit-pick { display: none; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; }
#suit-pick.open { display: flex; }
#suit-pick button {
  font-size: 1.6rem;
  width: clamp(48px, 14vw, 60px); height: clamp(48px, 14vw, 60px);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.2);
  background: linear-gradient(155deg, #ffffff 0%, #f7f5ee 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
  cursor: pointer;
}
#suit-pick button:active { transform: scale(0.93); }
/* بند مراجعة (نظام ألوان موحّد): كان الأسود لون افتراضي غير مقصود من المتصفح (color:buttontext)
   بينما الأحمر يستعير --color-destructive (لون تحذير/حذف دلالي، مو لون ورق) — يعطي تناقض
   بصري خفيف عن ورق اللعبة الفعلي (السلاح الأحمر بملفات SVG الورق هو أحمر نقي/قاني، مو الأحمر
   الباهت لـdestructive). صار كل الأزرار تصريح لون صريح يطابق نفس أحمر/أسود الورق نفسه بالضبط. */
#suit-pick button { color: #111; }
#suit-pick button.red { color: #d40000; }

/* نهاية الصكة / المباراة */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 1rem;
}
.overlay.open { display: flex; }
.overlay .panel {
  background: var(--felt-panel);
  border: 1px solid var(--felt-trim);
  border-radius: var(--radius-xl);
  padding: 1.2rem;
  width: 100%;
  max-width: 420px;
  max-height: 88dvh;
  overflow-y: auto;
  text-align: center;
}
.panel h2 { margin: 0 0 0.8rem; color: var(--felt-label); }
/* ===== شاشة نهاية الصكة بنمط «كملنا» (بند 40) ===== */
.he-head {
  font-size: 1rem; color: var(--felt-hint); margin-bottom: 0.5rem;
}
.he-head b { color: var(--felt-label); }
.he-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-bottom: 0.6rem; }
.he-pill { font-size: 0.82rem; font-weight: 700; border-radius: 999px; padding: 0.28rem 0.75rem; }
.he-pill.pill-good { color: var(--felt-success); border: 1px solid color-mix(in srgb, var(--felt-success) 55%, transparent); background: color-mix(in srgb, var(--felt-success) 12%, transparent); }
.he-pill.pill-bad { color: #ff9d9d; border: 1px solid color-mix(in srgb, #ff9d9d 50%, transparent); background: color-mix(in srgb, #ff9d9d 10%, transparent); }
.he-scoreboard { display: flex; gap: 0.6rem; margin: 0.2rem 0 0.7rem; }
.he-col {
  flex: 1; border-radius: var(--radius-lg); padding: 0.55rem 0.4rem; border: 1px solid;
}
.he-col.us { border-color: color-mix(in srgb, var(--felt-success) 55%, transparent); background: color-mix(in srgb, var(--felt-success) 12%, transparent); }
.he-col.them { border-color: color-mix(in srgb, #ff9d9d 45%, transparent); background: color-mix(in srgb, #ff9d9d 9%, transparent); }
.he-col .lbl { font-size: 0.82rem; color: var(--felt-hint); }
.he-col .big { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.he-col.us .big { color: var(--felt-success); }
.he-col.them .big { color: #ff9d9d; }
.he-col .sub { font-size: 0.74rem; color: var(--felt-hint); }

.res-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0.3rem 0; }
.res-table th, .res-table td { padding: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
.res-table th { color: #ffe9a8; font-weight: normal; }
.last-trick-strip { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.panel .big-btn {
  margin-top: 1rem;
  padding: 0.8rem 1.6rem;
  font-size: 1.15rem;
  font-weight: bold;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
.panel .sec-btn {
  margin-top: 0.6rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  background: none;
  color: #fff;
  cursor: pointer;
}
.tag-lost { color: #ff9d9d; font-weight: bold; }
.tag-capot { color: #7fe3a8; font-weight: bold; }
.qaid-evidence { margin-top: 0.5rem; padding: 0.5rem; border: 1px dashed rgba(255,157,157,0.5); border-radius: var(--radius-lg); background: rgba(255,157,157,0.06); }
.qaid-evidence-card { outline: 2px solid #ff5d5d; outline-offset: 1px; border-radius: 8px; }

/* التقدير */
#grade-circle {
  width: 110px; height: 110px;
  margin: 0.5rem auto;
  border-radius: 50%;
  border: 5px solid var(--felt-trim);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: bold;
  color: var(--felt-trim);
  background: rgba(216,181,99,.1);
  animation: pop var(--anim-slow) ease-out;
}
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.analysis { text-align: start; margin-top: 0.8rem; font-size: 0.95rem; }
.analysis .row {
  display: flex; justify-content: space-between;
  padding: 0.45rem 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.analysis .row b { color: #ffe9a8; }
#grade-comment { margin-top: 0.8rem; font-size: 1.05rem; color: var(--felt-hint); }

/* المشاريع chips */
.proj-chip {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 999px;
  padding: 2px 8px;
  margin: 1px;
}
/* معلَن بالاسم (أكلة 1) ولسا ما نزل ورقه (أكلة 2) */
.proj-chip.ghost {
  background: transparent;
  color: var(--felt-label);
  border: 1px dashed rgba(216,181,99,.6);
  opacity: 0.85;
}

/* لافتة التثبيت */
#install-banner {
  position: fixed;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
  inset-inline: 0.8rem;
  background: var(--felt-panel);
  color: #fff;
  border: 1px solid var(--felt-trim);
  border-radius: var(--radius-xl);
  padding: 0.8rem;
  display: none;
  align-items: center;
  gap: 0.6rem;
  z-index: 60;
  box-shadow: var(--elev-floating);
  font-size: 0.9rem;
}
#install-banner.show { display: flex; }
#install-banner .grow { flex: 1; }
#install-banner button {
  border: none; border-radius: 8px; padding: 0.5rem 0.9rem; cursor: pointer; font-weight: bold;
}
#install-banner .ok { background: var(--color-accent); color: var(--color-on-accent); }
#install-banner .no { background: rgba(255,255,255,0.15); color: #fff; }

/* ===== شريط الفوتر السفلي الثابت (بند 38) — نمط «كملنا» ===== */
#footer-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  min-height: var(--footer-min);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem calc(0.35rem + env(safe-area-inset-bottom));
  background: var(--footer-bg);
  border-top: 1px solid var(--felt-trim);
  box-shadow: 0 -4px 16px rgba(0,0,0,.42);
  z-index: 24;
}
#footer-bar[hidden] { display: none; }
.footer-spacer { flex: 1; }

/* أزرار قيد/سوا: صف داخل الفوتر — نصية شفافة بلا خلفية (تأكيد بند 3)، نص + حد رفيع بلونه */
#action-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
#qaid-btn, #sawa-btn {
  background: none;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--radius-lg);
  padding: 0.5rem 0.95rem;
  min-height: var(--touch-min);
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  cursor: pointer;
}
#qaid-btn { color: #ff9d9d; }
#sawa-btn { color: var(--felt-label); animation: turnTimerPulse 1.4s infinite; }
#qaid-btn:active, #sawa-btn:active { transform: scale(0.95); }

/* حلقة مؤقت دائرية بنمط «كملنا» (بند 38): قرص داكن داخلي + حلقة تقدّم ذهبية حسب --frac */
.ring-timer {
  --frac: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(closest-side, #1c1209 70%, transparent 72%),
    conic-gradient(var(--felt-trim) calc(var(--frac) * 360deg), rgba(0,0,0,.45) 0);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* بند 56: نفس إصلاح [hidden] المطبّق على .hukum-badge — `display:flex` أعلاه كان يبطل
   خاصية hidden على مؤقتات نهاية الصكة (hand-timer-seat/hand-timer-self) */
.ring-timer[hidden] { display: none; }

/* منتقي نوع القيد */
#qaid-pick {
  position: fixed;
  /* بند 38: يطلع فوق الفوتر (متل قائمة تنفتح من زر «قيّده») بدل أعلى الشاشة */
  bottom: calc(var(--footer-h) + 0.5rem);
  inset-inline: 0.7rem;
  margin: 0 auto;
  max-width: 400px;
  background: var(--felt-panel);
  border: 2px solid var(--felt-danger);
  border-radius: var(--radius-xl);
  padding: 0.7rem 0.9rem 0.9rem;
  display: none;
  z-index: 35;
  box-shadow: var(--elev-floating);
}
#qaid-pick.open { display: block; }
/* بند مراجعة (تبسيط النوافذ): بقي بس التحذير (نتيجة مالية فعلية لو غلط) — بدون سؤال وصفي فوقه */
#qaid-pick .qaid-warn { display: block; margin: 0 0 0.5rem; font-size: 0.78rem; text-align: center; color: #ff9d9d; }
#qaid-pick-list { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 0.6rem; }
#qaid-pick-list button {
  background: none;
  border: 1px solid rgba(255,157,157,.6);
  color: #ff9d9d;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}
#qaid-pick-list button:active { transform: scale(0.95); }
#qaid-cancel {
  display: block;
  margin: 0 auto;
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  color: #d7e2da;
  border-radius: 10px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}

#menu-btn, #copy-code {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}

@media (min-width: 700px) {
  :root { --card-w: 112px; }
  #center { min-height: 320px; }
}

/* Module 1: مقاس الورق الغامر على الجوال (شاشات صغيرة فقط) — اليد تنزل واطية وتنكسر جزئياً
   خلف الفوتر الثابت (بدل ما تحجز مساحته كاملة زي قبل)، فتحس إنك "داخل اللعبة" مو بس تتفرج
   عليها. الفوتر أعلى منها بالـ z-index (24 مقابل 1) وخلفيته صلدة، فيبتلع الجزء السفلي من
   الورق فعلياً بدل ما يكون تراكب بصري فاضي. حذفنا الحواف/الهوامش الجانبية اللي كانت تضيّق اليد. */
@media (max-width: 480px) {
  /* نحجز ارتفاع الفوتر كامل (بدون خصم) عشان اليد تبان كاملة فوقه بدل ما يُقص أسفلها */
  #hand-wrap { padding-inline: 0.1rem; }
}

/* بند مراجعة UI: جوال بوضعية أفقية (landscape) — الارتفاع المتاح قصير جداً (عادة <420px).
   #hand-wrap يحجز min-height:40dvh (بند 47) و#center يحجز 232px، وفوقهم شريط علوي + فوتر
   ثابتين — المجموع يفيض عن الارتفاع، ومنطقة الوسط (#mid-row) هي الوحيدة اللي تقدر تنكمش
   (grid 1fr) فتنعصر لقرب الصفر بينما اليد تاخذ حجمها كامل — يعني تراكب/قص فعلي على منطقة
   اللعب الأهم (الطاولة). نقلّل المحجوزات الثابتة بس بهالحالة، مع إبقاء نفس نسبة الورق. */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --card-w: clamp(48px, 10vw, 80px);
    --footer-h: calc(42px + env(safe-area-inset-bottom));
  }
  #hand-wrap { min-height: 28dvh; padding-top: 0.15rem; }
  /* المنظر الأفقي ضيق والورق صغير — نقلّل الغطس خلف الفوتر عشان ما نخفي جزء كبير من الورقة */
  #hand { --card-w: clamp(60px, 14vw, 92px); --card-h: calc(var(--card-w) * 1.389); --hand-bottom: -8px; padding-top: 8px; }
  #center { min-height: 150px; }
}