/* ═══════════════ live/shell — المصدر الوحيد لتخطيط الغرفة (live + voice) ═══════════════
   أربعة صفوف شبكة: الشريط العلوي / المسرح / الشات / الأدوات.

   قواعد صارمة يلتزم بها هذا الملف حرفيّاً:
     • لا position:absolute داخل ‎.room‎ إطلاقاً (اللوحات المنبثقة خارجه في ‎#modalRoot‎).
     • لا 100vh — الوحدة الوحيدة هي dvh.
     • لا height:auto ولا aspect-ratio على أي فيديو.
     • كل فيديو: width/height 100% + object-fit:cover داخل خليّته.

   المفتاح: التراكب يتمّ بـ*تكديس الشبكة* لا بالتموضع. عناصر تشترك في نفس خليّة الشبكة
   (‎grid-area:1/1‎) تتراكب فوق بعضها تماماً كما يفعل absolute — بلا إخراجها من التدفّق،
   فلا تنكسر حسابات الارتفاع ولا يُدفع شريط الكتابة خارج الشاشة.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* الغرفة تملأ الشاشة: يُلغى سقف 932px الذي يفرضه ‎.phone‎ على الشاشات الطويلة (iPad). */
.phone:has(.room) { max-height: none; }

.room {
  display: grid;
  /* عمود واحد صريح بعرض الغرفة. بدونه يبقى العمود ضمنيّاً بمقاس ‎auto‎ فيتقلّص إلى أعرض
     محتوى — وهو ما جعل مسرح pk 240px بدل 393 وصفَّي الداعمين 153px. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto var(--stage) minmax(0, 1fr) auto;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  --stage: 50dvh;
}
/* بلا هذا يفرض المحتوى حدّاً أدنى على الصفّ فيتجاوز المجموع الشاشة ⇒ يُقصّ آخر صفّ. */
.room > * { min-width: 0; min-height: 0; }

/* ── تثبيت الصفوف صراحةً ──
   ترتيب DOM صحيح (رأس→مسرح→شات→أدوات)، لكن ‎.adv-room .fs-header { order: 1 }‎ في
   premium.css كان يُزيح الرأس إلى آخر صفّ لأن التوزيع التلقائيّ يحترم order. النتيجة كانت
   انقلاب التخطيط رأساً على عقب في multi. تثبيت grid-row يُلغي أثر order نهائيّاً — ولا
   نعتمد على ترتيب DOM ولا على وزن محدِّد. */
/* العمود صريح للجميع: طبقة المؤثّرات تمتدّ على كل الصفوف في العمود ١، فلولا تثبيت العمود
   لبقيت بقيّة الصفوف بلا موضع صريح فتُوزَّع تلقائيّاً في عمود *ضمنيّ* ثانٍ — وهو ما جعل
   العمود الأوّل 0px وصفَّي داعمي pk بعرض 20px. */
.room > * { order: 0 !important; grid-column: 1; }
.room > .room-top    { grid-row: 1; }
.room > .room-stage  { grid-row: 2; }
.room > .room-chatrow { grid-row: 3; }
.room > .room-bottom { grid-row: 4; }
.room > .room-fx     { grid-row: 1 / -1; }

/* ═════════ الوضع solo: لا مقاعد ولا شبكة — الفيديو يملأ الشاشة والواجهة تطفو فوقه ═════════
   صفّان: 1fr للفيديو+الرأس+الشات، وauto لشريط الأدوات. المسرح يمتدّ على الصفّين معاً فيملأ
   الشاشة كاملةً، وشريط الأدوات يرسم فوقه لأنّه بعده في DOM.
   هكذا ينتهي الشات عند بداية الشريط **بالحساب لا بهامش مقدّر** — بلا رقم سحريّ ولا JS. */
.room[data-mode="solo"] { grid-template-rows: 1fr auto; }
.room[data-mode="solo"] > * { grid-column: 1; }
.room[data-mode="solo"] > .room-stage { grid-row: 1 / -1; z-index: 0; }
.room[data-mode="solo"] > .room-top {
  grid-row: 1; align-self: start; z-index: 6;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent) !important;
}
.room[data-mode="solo"] > .room-chatrow {
  grid-row: 1; align-self: end; z-index: 5; max-height: 34dvh;
  pointer-events: none;                 /* الفراغ فوق الشات لا يبتلع لمسات الفيديو */
}
.room[data-mode="solo"] > .room-chatrow > * { pointer-events: auto; }
.room[data-mode="solo"] > .room-bottom {
  grid-row: 2; z-index: 7;
  background: linear-gradient(0deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 55%, transparent);
}

/* طبقة المؤثّرات: تغطّي الغرفة كلّها بلا تموضع — تمتدّ على كل الصفوف والأعمدة. */
.room > .room-fx { grid-column: 1; z-index: 3; pointer-events: none; }

/* ═════════ المسرح: شبكة واحدة، لا شيء يطفو فوق خلاياها ═════════ */
.room-stage {
  display: grid; gap: 2px; overflow: hidden;
  background-color: #000; background-size: cover; background-position: center;
}
.room[data-mode="solo"] .room-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
.room-stage[data-cells="1"] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
.room-stage[data-cells="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.room-stage[data-cells="3"],
.room-stage[data-cells="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.room-stage[data-cells="5"],
.room-stage[data-cells="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
/* أعمدة = ceil(√n) حتى السعة القصوى 20: تقسيم متوازن يبقي الخلايا أقرب ما يمكن للمربّع. */
.room-stage[data-cells="7"],
.room-stage[data-cells="8"],
.room-stage[data-cells="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.room-stage[data-cells="10"],
.room-stage[data-cells="11"],
.room-stage[data-cells="12"],
.room-stage[data-cells="13"],
.room-stage[data-cells="14"],
.room-stage[data-cells="15"],
.room-stage[data-cells="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.room-stage[data-cells="17"],
.room-stage[data-cells="18"],
.room-stage[data-cells="19"],
.room-stage[data-cells="20"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; }

/* ═════════ الخليّة: الفيديو والشارة يتكدّسان بالشبكة ═════════ */
.cell {
  display: grid; overflow: hidden; min-width: 0; min-height: 0;
  /* الإطار بـoutline لا border: بنفس السماكة على كل خليّة (ممتلئة أم فارغة) فتتسق الشبكة،
     و**بلا أي أثر على الهندسة** — فيبقى الفيديو مالئاً خليّته 100% ولا تصغر البلاطة عن
     المقعد الفارغ. (border بـ1px كان يقضم بكسلاً من كل جانب.) */
  border: 0;
  outline: 1px solid rgba(255, 255, 255, .07);
  outline-offset: -1px;
  padding: 0; margin: 0; border-radius: 10px; background: #0d0722;
  box-sizing: border-box;
  font: inherit; color: inherit; text-align: inherit;
}
.room[data-mode="solo"] .cell { border-radius: 0; background: #000; }
.cell > * { grid-area: 1 / 1; }
.cell-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  min-width: 0; min-height: 0; background: #000;
}
.cell-name {
  align-self: end; justify-self: start;
  margin: 0 0 6px 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); font-size: 11.5px; font-weight: 700; color: #fff;
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.room[data-mode="solo"] .cell-name { display: none; }   /* اسم المضيف في الشريط العلوي */
.cell[data-state="empty"] {
  display: grid; place-content: center; gap: 4px; cursor: pointer;
  background: rgba(255, 255, 255, .045);
  outline-style: dashed; outline-color: rgba(255, 255, 255, .18);   /* نفس السماكة، نمط مختلف */
}
.cell[data-state="empty"] > * { grid-area: auto; justify-self: center; }
.cell[data-state="locked"] { cursor: default; }
.cell-plus {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .1); font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, .78);
}
.cell-label { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .62); text-align: center; }
/* مقعد مشغول بلا كاميرا: أفاتار متمركز — نفس الخليّة ونفس المقاس، بلا طبقة عائمة. */
.cell-av { place-self: center; width: 46%; max-width: 74px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.cell[data-state="avatar"] .cell-video, .cell[data-state="wait"] .cell-video { display: none; }
.cell[data-state="live"] .cell-av { display: none; }

/* ═════════ الوضع pk: مسرح 50dvh مقسوم نصفين عموديّين متساويين ═════════
   كل شيء بتكديس الشبكة — صفر position:absolute. الألوان متغيّرات لا قيَم مباشرة. */
.room[data-mode="pk"] {
  --stage: 50dvh;
  --pk-a: #ff2d6f;              /* فريق أ */
  --pk-b: #18d4e0;              /* فريق ب */
  --pk-bar-h: 34px;
  --pk-chip-bg: rgba(0, 0, 0, .5);
  --pk-chip-r: 10px;
  --pk-ring: rgba(255, 255, 255, .85);
  grid-template-rows: auto var(--stage) auto minmax(0, 1fr) auto;
}
.room[data-mode="pk"] > .room-chatrow { grid-row: 4; }
.room[data-mode="pk"] > .room-bottom { grid-row: 5; }
.room[data-mode="pk"] > .pk-support { grid-row: 3; grid-column: 1; }

/* المسرح: صفّ شريط النتيجة 34px ثمّ نصفان متساويان */
.room[data-mode="pk"] .room-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: var(--pk-bar-h) minmax(0, 1fr);
}
.room[data-mode="pk"] .room-stage > .cell { grid-row: 2; }
.room[data-mode="pk"] .room-stage > .cell:nth-of-type(1) { grid-column: 1; }
.room[data-mode="pk"] .room-stage > .cell:nth-of-type(2) { grid-column: 2; }

/* شريط النتيجة: لونان بنسبة النقاط، الرقم على كل طرف، وإيموجي الحالة في الوسط */
.pk-score {
  grid-row: 1; grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; padding-inline: 10px; height: var(--pk-bar-h);
  background: linear-gradient(90deg, var(--pk-a) 0 var(--pk-pct, 50%), var(--pk-b) var(--pk-pct, 50%) 100%);
}
.pk-score .pk-n { font-size: 13px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.pk-score .pk-emoji { justify-self: center; font-size: 15px; line-height: 1; }

/* عدّاد الوقت: وسط أعلى النصفين، مكدَّس بالشبكة لا بالتموضع */
.pk-timer {
  grid-row: 2; grid-column: 1 / -1; align-self: start; justify-self: center; z-index: 3;
  margin-block-start: 6px; padding: 3px 10px;
  background: var(--pk-chip-bg); border-radius: var(--pk-chip-r);
  font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
}

/* شارة LOSE / WIN×N في الزاوية العليا لكل نصف — داخل الخليّة، مكدَّسة بالشبكة */
.pk-tag {
  align-self: start; justify-self: start; z-index: 2;
  margin: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; color: #fff;
  background: var(--pk-chip-bg);
}
/* الشارتان في الزاويتين *الخارجيّتين* حتى لا تصطدما بالعدّاد المتمركز في المنتصف. */
.cell[data-team="b"] .pk-tag { justify-self: end; }
.cell[data-team="a"] .pk-tag.win { background: var(--pk-a); }
.cell[data-team="b"] .pk-tag.win { background: var(--pk-b); }

/* صفّا أفضل الداعمين أسفل المسرح: دوائر 34px متداخلة مع رقم الترتيب */
.pk-support {
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-self: stretch; width: 100%;
  gap: 4px; padding: 6px 10px;
}
.pk-row { display: flex; align-items: center; gap: 6px; min-height: 34px; width: 100%; }
.pk-row > .pk-lbl { font-size: 10px; font-weight: 800; color: #fff; opacity: .8; flex: none; }
.pk-fans { display: flex; align-items: center; }
.pk-fan {
  /* padding:0 صراحةً: الصنف العامّ ‎.empty‎ في styles.css يفرض 50px 20px، فسمّينا المعدِّل
     ‎.is-empty‎ ومنعنا أي حشو موروث — الدائرة 34px بالضبط. */
  position: static; box-sizing: border-box; padding: 0;
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  border: 1.5px solid var(--pk-ring); background: rgba(255, 255, 255, .08);
  margin-inline-start: -10px;                 /* التداخل */
}
.pk-fan:first-child { margin-inline-start: 0; }
.pk-fan > img, .pk-fan > .avatar, .pk-fan .avatar { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; }
.pk-fan > .pk-rank {
  grid-area: 1 / 1; align-self: end; justify-self: end;
  min-width: 14px; height: 14px; border-radius: 999px; padding: 0 3px;
  font-size: 9px; font-weight: 800; line-height: 14px; text-align: center; color: #fff;
}
.pk-row[data-team="a"] .pk-rank { background: var(--pk-a); }
.pk-row[data-team="b"] .pk-rank { background: var(--pk-b); }
.pk-row[data-team="a"] .pk-lbl { color: var(--pk-a); }
.pk-row[data-team="b"] .pk-lbl { color: var(--pk-b); }
.pk-fan.is-empty { border-style: dashed; border-color: rgba(255, 255, 255, .28); }

/* ═════════ الخليّة الصوتيّة: صورة دائريّة + مؤشّر تحدّث — بلا عنصر فيديو ═════════ */
.cell.cell-audio {
  display: grid; grid-auto-rows: min-content; align-content: center; justify-items: center;
  gap: 4px; padding: 6px 4px; min-height: 84px; background: rgba(255, 255, 255, .035);
}
.cell.cell-audio > * { grid-area: auto; }
.cell-audio .vp-seat-av, .cell-audio .cell-avwrap {
  position: relative; width: 56px; height: 56px; display: grid; place-items: center;
}
.cell-audio .avatar, .cell-audio .vipframe { width: 56px !important; height: 56px !important; border-radius: 50%; }
.cell-audio .vipframe > .avatar { width: 52px !important; height: 52px !important; }
.cell-audio .vp-seat-name, .cell-audio .cell-name {
  position: static; margin: 0; padding: 0; background: none;
  font-size: 11px; font-weight: 700; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* أيقونة المايك تجلس *داخل* حدود الأفاتار لا خارجها بـ‎-2px‎: في أضيق حالة (٩ مقاعد على
   360px ⇒ خليّة 86px) كان الفائض 2px يتجاوز حدّ الخليّة ويُقصّ. */
.cell-audio .vp-mic { inset-block-end: 0; inset-inline-end: 0; }
.cell-audio .host-tag { inset-block-start: 0; }

/* مؤشّر التحدّث الحقيقيّ (ActiveSpeakersChanged من LiveKit) */
.cell-audio.speaking .avatar, .cell-audio.speaking .vipframe {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .95), 0 0 14px rgba(52, 211, 153, .55);
}

/* ═════════ الشات: نصّ حرّ بلا حاوية ═════════ */
.room-chatrow {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0; overflow: hidden;
}

/* أرضيّة الشات في الغرف ذات المسرح المحسوب: لا ينزل تحت 22dvh مهما بلغ عدد المقاعد.
   ‎minmax(0, var(--stage))‎ يجعل المسرح هو من يتنازل عن المساحة، لا الشات. */
.room.vparty { grid-template-rows: auto minmax(0, var(--stage)) minmax(22dvh, 1fr) auto; }

/* ═════════ الأدوات: صفّ auto لا يُضغط أبداً ⇒ شريط الكتابة لا يخرج من الشاشة ═════════ */
.room-bottom { display: flex; flex-direction: column; }

/* ═════════ إبطال التموضع المطلق القديم داخل ‎.room‎ ═════════
   مصدر هذه القواعد يُحذف في commit الحذف المنفصل؛ حتى ذلك الحين نُبطلها هنا حتى تبقى
   القاعدة «لا absolute داخل .room» صحيحة فعليّاً لا على الورق. */
.room .fs-lowerleft { position: static; inset: auto; width: auto; max-width: none; }
.room .fs-chat { position: static; inset: auto; max-height: none; }
.room .tk-audiowrap { position: static; inset: auto; margin: 0 0 6px; }
.room .fs-contest,
.room .pkbar { position: static; inset: auto; margin: 0 8px 6px; }
/* طبقة المؤثّرات تُغطّي بالشبكة (grid-area أعلاه) لا بالتموضع.
   محدِّد بالمعرّف لأن ‎.fs-live #fxStage‎ يفرض absolute بوزن أعلى من أي محدِّد أصناف. */
.room #fxStage { position: static; inset: auto; z-index: 8; overflow: visible; }

/* شارة العدّاد على زرّ الطلبات: كانت absolute. تُكدَّس بالشبكة على الزرّ نفسه فتبقى القاعدة
   «صفر absolute داخل .room» صحيحة بلا استثناءات. */
.room .tk-circle, .room .circbtn { display: grid; place-items: center; }
.room .tk-circle > .badge, .room .circbtn > .badge {
  position: static; grid-area: 1 / 1;
  justify-self: end; align-self: start; margin: -4px -4px 0 0;
}