/*
 * صفحة الريموت — أخفّ ما يمكن أن تكون.
 *
 * كل ما هنا مبني على أن الجهاز هاتفٌ في يدٍ واحدة: لا تحويم، ولا قوائم منسدلة،
 * ولا شيء يعتمد على مؤشر. والألوان من هوية المتجر (بنفسجي على أسود).
 */
:root {
  --rm-bg: #08060d;
  --rm-panel: #120e1c;
  --rm-line: #241a3a;
  --rm-ink: #efeaf8;
  --rm-dim: #9b8fb5;
  --rm-brand: #7c4dff;
  --rm-brand-2: #a17bff;
  --rm-ok: #27c07a;
  --rm-warn: #f0a83c;
  --rm-bad: #e2544a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--rm-bg);
  color: var(--rm-ink);
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  /* الصفحة لا تُمرَّر: كل تمرير هنا كان يُقصد به المحتوى البعيد. */
  overflow: hidden;
  overscroll-behavior: none;
}

/* ------------------------------------------------------------------ */
/* بوابة: خدمة متوقفة أو حساب غير موثّق                                */
/* ------------------------------------------------------------------ */
.rm-gate {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.rm-gate h1 { margin: 0; font-size: 26px; color: var(--rm-brand-2); }
.rm-gate p { margin: 0; color: var(--rm-dim); }
.rm-link {
  margin-top: 8px;
  padding: 18px 34px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  background: var(--rm-brand);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* التخطيط                                                            */
/* ------------------------------------------------------------------ */
.rm-app {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* أطراف الشاشة المنحنية والشريط السفلي على iOS. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.rm-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--rm-panel);
  border-bottom: 1px solid var(--rm-line);
  font-size: 13px;
}
.rm-spacer { flex: 1; }
.rm-state { color: var(--rm-dim); }
.rm-metric { color: var(--rm-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.rm-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4a3f63;
  flex: 0 0 auto;
}
.rm-dot[data-state="live"] { background: var(--rm-ok); box-shadow: 0 0 8px var(--rm-ok); }
.rm-dot[data-state="wait"] { background: var(--rm-warn); }
.rm-dot[data-state="bad"]  { background: var(--rm-bad); }

/* ------------------------------------------------------------------ */
/* المسرح                                                             */
/* ------------------------------------------------------------------ */
.rm-stage {
  flex: 1 1 auto;
  position: relative;
  min-height: 0;
  background: #000;
  /*
   * لا إيماءات للمتصفح على هذا العنصر.
   *
   * `touch-action: none` هو ما يمنع المتصفح من ابتلاع اللمسة تمريراً أو
   * تكبيراً قبل أن تصل إلى المستمع. وبدونه تصل الحركةُ الأولى ثم يستولي
   * المتصفح على البقية، فيبدو السحب مقطوعاً في منتصفه بلا سبب ظاهر.
   */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#rm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain لا cover: القصّ هنا يعني نقرةً تقع خارج ما يراه المتحكّم. */
  object-fit: contain;
  background: #000;
  display: block;
}

/* ------------------------------------------------------------------ */
/* الغطاء                                                             */
/* ------------------------------------------------------------------ */
/*
 * الخلفية لا تستقبل لمساً - غير مشروط.
 *
 * غطاءٌ يمتد على المسرح ويبقى ظاهراً بعد الاتصال يبتلع كل لمسة، فتصير الشاشة
 * ميتة تماماً بلا رسالة ولا سبيل إلى شيء. وقع هذا في صفحة المشاهدة، وثمنه
 * جلسات كاملة. والبطاقة وحدها هي ما يستقبل، وأي شرط ذكي هنا يعيد فتح الباب
 * عند أول مسار يُغفَل.
 */
.rm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 6, 13, 0.86);
  pointer-events: none;
  z-index: 5;
}
.rm-overlay[hidden] { display: none; }

.rm-card {
  pointer-events: auto;
  max-width: 340px;
  width: 100%;
  background: var(--rm-panel);
  border: 1px solid var(--rm-line);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
}
.rm-card h2 { margin: 0 0 10px; font-size: 19px; color: var(--rm-brand-2); }
.rm-card p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--rm-dim); }

/* ------------------------------------------------------------------ */
/* الأزرار ولوح البثّ                                                  */
/* ------------------------------------------------------------------ */
/*
 * أهداف الضغط مقاسة على ليزر لا على إصبع.
 *
 * الإبهام يستقرّ حيث يلمس؛ وليزر الكنترولر يرتجف مع يد صاحبها ومع دقّة تتبّع
 * النظّارة، فتزيح النقطةُ عدة بكسلات في اللحظة التي يُضغط فيها الزناد. فهدفُ
 * 44 بكسلاً - وهو حدّ اللمس المعروف - يُخطأ في VR بانتظام، والمستخدم لا يرى
 * سبباً: ليزره كان «على الزر» في نظره.
 *
 * فالحدّ هنا 56 للأزرار العادية و64 للفعل الرئيسي، والحشو أفقياً واسع كذلك -
 * فالارتفاع وحده لا يكفي حين يهتزّ الليزر في المحورين.
 */
.rm-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: 16px 24px;
  background: var(--rm-brand);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  min-height: 56px;
  touch-action: manipulation;
  /*
   * الانتقال على الحوم وحده، لا على الضغط.
   *
   * المستخدم في VR لا يشعر بالزر تحت إصبعه؛ التغيّر البصري هو إحساسه الوحيد
   * بأن الضغطة سُجّلت. وانتقالٌ مدته 120 مث على حالة `:active` يعني أن أثر
   * الضغطة يبدأ بعد أن يرفع الزناد - فيبدو الزر كأنه لم يستجب.
   */
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

/* الحوم: أوضح ما يكون. هو ما يقول «ليزرك على الزر الصحيح». */
.rm-btn:hover {
  background: var(--rm-brand-2);
  box-shadow: 0 0 0 3px rgba(161, 123, 255, 0.35);
}

/* الضغط: فوري بلا انتقال، ومحسوس بالحجم واللون معاً. */
.rm-btn:active {
  transition: none;
  transform: scale(0.97);
  background: #5b34d6;
  box-shadow: 0 0 0 5px rgba(161, 123, 255, 0.5);
}

/* حلقة تركيز للوحة المفاتيح على الحاسوب — لا تظهر للفأرة ولا لليزر. */
.rm-btn:focus-visible {
  outline: 3px solid var(--rm-brand-2);
  outline-offset: 2px;
}

.rm-btn:disabled { opacity: 0.5; cursor: default; }
.rm-btn:disabled:hover { background: var(--rm-brand); box-shadow: none; }
.rm-btn:disabled:active { transform: none; }

.rm-btn--ghost {
  background: transparent;
  border: 1px solid var(--rm-line);
  color: var(--rm-dim);
  padding: 12px 20px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  /* رابط العودة يحمل نفس الصنف: هذه الثلاثة تجعله يبدو زراً لا نصاً. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.rm-btn--ghost:hover {
  background: #1b1b27;
  border-color: var(--rm-brand-2);
  color: var(--rm-ink);
  box-shadow: none;
}
.rm-btn--ghost:active {
  transition: none;
  transform: scale(0.97);
  background: #241a3a;
  box-shadow: none;
}

.rm-btn--copy { padding: 16px 22px; font-size: 15px; min-height: 56px; }

/* الزرّ الوحيد: هدفٌ لا يُخطئه ليزر، ولا شيء بجواره ينافسه على النظر. */
.rm-btn--big {
  width: 100%;
  min-height: 64px;
  font-size: 18px;
}
.rm-btn--big:disabled { opacity: 0.55; }

/* سطر الخطوة الجارية: يقول أين وصل المسار، فلا يبدو الزرّ معلّقاً بلا سبب. */
.rm-step {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--rm-dim);
  min-height: 18px;
}
.rm-step[hidden] { display: none; }
.rm-step[data-tone="bad"] { color: var(--rm-bad); }

.rm-deck {
  flex: 0 0 auto;
  background: var(--rm-panel);
  border-top: 1px solid var(--rm-line);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rm-deck[hidden] { display: none; }

.rm-deck-row {
  display: flex;
  align-items: center;
  /* فجوة أوسع: هدفان متلاصقان يجعلان اهتزاز الليزر يضغط الخطأ منهما. */
  gap: 12px;
}
.rm-deck-row--link[hidden] { display: none; }

.rm-vr-state { font-size: 13px; color: var(--rm-dim); }
.rm-vr-state[data-on="1"] { color: var(--rm-ok); }
.rm-vr-state[data-on="bad"] { color: var(--rm-bad); }

/*
 * حقل الرابط: هدفٌ بحجم زرّ، لا شريطٌ رفيع.
 *
 * وهو `readonly` عمداً - يعرض رابطاً مولَّداً ولا يُكتب فيه - فلا يستدعي لوحة
 * مفاتيح النظّارة، وهذا هو الصواب: لا شيء يُكتب هنا. لكنه يجب أن يُنقر ويُحدَّد
 * بالليزر لمن أراد النسخ يدوياً، فيبقى قابلاً للتحديد والتركيز.
 */
#rm-url {
  flex: 1;
  min-width: 0;
  background: #0b0813;
  border: 1px solid var(--rm-line);
  border-radius: 8px;
  color: var(--rm-ink);
  padding: 16px 14px;
  min-height: 56px;
  font-size: 14px;
  font-family: ui-monospace, Consolas, monospace;
  cursor: text;
  /* `user-select` صريح: المسرح يمنعه، وهذا الحقل يجب أن يُحدَّد. */
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#rm-url:hover { border-color: var(--rm-brand-2); }
#rm-url:focus {
  outline: none;
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.35);
}

.rm-hint { margin: 0; font-size: 12px; color: var(--rm-dim); text-align: center; }
/* انتهاء صلاحية الرمز: خبرٌ يجب أن يُرى، لا سطرٌ رمادي بين أسطر رمادية. */
.rm-hint[data-tone="bad"] { color: var(--rm-bad); }

/* ------------------------------------------------------------------ */
/* لوحة التحكّم                                                        */
/* ------------------------------------------------------------------ */
/*
 * تطفو فوق الصورة في زاويةٍ واحدة، ولا تزيحها.
 *
 * لوحةٌ تحت الشاشة كانت ستقصّ الصورة كلما ظهرت وتمدّها كلما اختفت، وكل تغيير
 * في المقاس يعني إعادة حساب الإحداثيات - أي هدفاً يتحرّك تحت ليزرٍ يصوّب إليه.
 * وهنا الصورة ثابتة، واللوحة تعلوها.
 *
 * والأزرار داخلها تستعيد `touch-action` الذي منعه المسرح: منعُه هناك ضروري كي
 * لا يبتلع المتصفحُ السحب، ولا معنى له على زرٍّ يُنقر.
 */
/*
 * مفتاح اللوحة: طافٍ في أسفل الشاشة.
 *
 * وليس من أزرار الشريط العلوي - تلك 48 بكسلاً وتُقصد مرةً في الجلسة، وهذا
 * يُقصد كلما احتيج إلى تمريرٍ دقيق. فمقاسه مقاسُ ما يُلمس كثيراً.
 */
.rm-pad-fab {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-end: 12px;
  z-index: 5;
  min-height: 56px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  background: rgba(27, 19, 48, 0.94);
  border: 1px solid var(--rm-line);
  border-radius: 12px;
  color: var(--rm-ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rm-pad-fab:hover {
  border-color: var(--rm-brand-2);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.28), 0 6px 24px rgba(0, 0, 0, 0.5);
}
.rm-pad-fab:focus-visible { outline: 3px solid var(--rm-brand-2); outline-offset: 2px; }
.rm-pad-fab[aria-expanded="true"] { background: var(--rm-brand); border-color: var(--rm-brand-2); }
.rm-pad-fab:active { transition: none; transform: scale(0.97); }

.rm-pad {
  position: absolute;
  inset-inline-start: 12px;
  /* فوق المفتاح لا تحته: المفتاح يبقى ظاهراً ليُغلقها من حيث فُتحت. */
  inset-block-end: 80px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  max-width: min(640px, calc(100% - 24px));
  /* شاشةٌ قصيرة (هاتفٌ عرضاً): تُقصّ اللوحة داخل نفسها ولا تتجاوز الصورة. */
  max-height: calc(100% - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(18, 14, 28, 0.94);
  border: 1px solid var(--rm-line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  /*
   * `pan-y` لا `manipulation`: المسرح حوله يمنع كل إيماءة، وهذه اللوحة قد
   * تُقصّ في شاشةٍ قصيرة فتحتاج أن تُمرَّر داخل نفسها. والتمرير هنا محلّي
   * بالكامل - `overscroll-behavior: contain` يمنعه من التسرّب إلى ما تحته.
   */
  touch-action: pan-y;
}
.rm-pad[hidden] { display: none; }

/*
 * ثلاثة أعمدة ما اتّسع العرض، وإلا التفّت.
 *
 * والالتفاف هو الاحتياط لا القاعدة: يعيد الارتفاع الذي هربنا منه، لكنه أهون
 * من هدفٍ مسحوقٍ دون المقاس الذي يُصاب بالليزر.
 */
.rm-pad-cols {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.rm-pad-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.rm-pad-label {
  font-size: 12px;
  color: var(--rm-dim);
  letter-spacing: 0.04em;
}

/*
 * صليب الاتجاهات.
 *
 * `direction: ltr` صريح داخل صفحة عربية: الأسهم رسومٌ لا حروف، ويمينُ السهم
 * يعني اليمين. وقلبُ الشبكة مع اتجاه الصفحة كان سيجعل زرّ «يمين» على اليسار.
 */
.rm-pad-dpad {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
}
.rm-pad-key--u { grid-area: 1 / 2; }
.rm-pad-key--l { grid-area: 2 / 1; }
.rm-pad-key--r { grid-area: 2 / 3; }
.rm-pad-key--d { grid-area: 3 / 2; }

/* عمود الأوامر: ستّة أزرار في ثلاثة صفوف، بارتفاع الصليب نفسه. */
.rm-pad-cmds {
  display: grid;
  grid-template-columns: repeat(2, minmax(78px, 1fr));
  grid-auto-rows: 56px;
  gap: 6px;
}

/*
 * مفتاح اللوحة: 56 بكسلاً هدفاً أدنى.
 *
 * وهو نفس المقاس الذي فُرض على بقية أزرار الصفحة، وسببه واحد: ليزر النظّارة
 * يرتعش بمقدار بضعة بكسلات، وهدفٌ أصغر منه يُخطأ أكثر مما يُصاب.
 */
.rm-pad-key {
  min-width: 56px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1b1330;
  border: 1px solid var(--rm-line);
  border-radius: 10px;
  color: var(--rm-ink);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rm-pad-key--wide { flex: 1; min-width: 0; padding: 0 12px; font-size: 14px; }

.rm-pad-key:hover {
  border-color: var(--rm-brand-2);
  background: #241a3f;
  /* هالةٌ حول الهدف: في النظّارة لا مؤشّر يُرى، فالحدّ وحده يقول «أنت هنا». */
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.28);
}
.rm-pad-key:focus-visible {
  outline: 3px solid var(--rm-brand-2);
  outline-offset: 2px;
}
.rm-pad-key:active {
  /* بلا انتقال: تأكيدٌ متأخّرٌ عشر إطارات يُقرأ ضغطةً ضائعة، فتُكرَّر. */
  transition: none;
  background: var(--rm-brand);
  border-color: var(--rm-brand-2);
  transform: scale(0.96);
}

.rm-pad-type {
  display: flex;
  gap: 10px;
  align-items: center;
}

/*
 * حقل الكتابة: هدفٌ بحجم زرّ، ويقبل التركيز بلمسة المستخدم وحدها.
 *
 * لا `focus()` من الشيفرة: لوحة مفاتيح النظّارة لا تُفتح إلا استجابةً للمس،
 * واستدعاؤها برمجياً يُهمَل صامتاً فيبدو الحقل ميتاً.
 */
#rm-pad-text {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  background: #0b0813;
  border: 1px solid var(--rm-line);
  border-radius: 10px;
  color: var(--rm-ink);
  padding: 14px;
  font: inherit;
  font-size: 16px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#rm-pad-text::placeholder { color: var(--rm-dim); }
#rm-pad-text:hover { border-color: var(--rm-brand-2); }
#rm-pad-text:focus {
  outline: none;
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.35);
}

/* ------------------------------------------------------------------ */
/* شارة الملف الشخصي                                                   */
/* ------------------------------------------------------------------ */
/*
 * صورةٌ واسم، بارتفاع 48 بكسلاً كبقية أزرار الشريط.
 *
 * والاسم يُقصّ ولا يلتفّ: اسمٌ من ثلاثين محرفاً كان سيمدّ الشريط فيدفع بقيّة
 * أزراره خارج الشاشة على هاتف - وهو ما مُنع في لوحة الشرف بالبنية، ويُمنع
 * هنا بالقصّ لأن الشارة في التدفّق لا فوقه.
 */
.rm-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 180px;
  min-height: 48px;
  padding: 6px 12px 6px 6px;
  background: transparent;
  border: 1px solid var(--rm-line);
  border-radius: 999px;
  color: var(--rm-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.rm-me[hidden] { display: none; }
.rm-me:hover {
  border-color: var(--rm-brand-2);
  background: #1c1428;
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.28);
}
.rm-me:focus-visible { outline: 3px solid var(--rm-brand-2); outline-offset: 2px; }
.rm-me:active { transition: none; transform: scale(0.97); }
.rm-me > * { pointer-events: none; }

.rm-me-pic {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #241a3f center / cover no-repeat;
  border: 1px solid var(--rm-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--rm-brand-2);
}
.rm-me-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* لوحة الشرف                                                          */
/* ------------------------------------------------------------------ */
/*
 * مطلقةٌ داخل الشاشة، على الطرف المقابل للوحة التحكّم.
 *
 * والإطلاق هنا شرطٌ لا زينة: هذه القائمة تنمو - عشرة أسماء وبطاقة مركز وشريط
 * بحث - وأي عنصر ينمو في تدفّق المستند يدفع ما بعده. وما بعده هنا زرّ «إنشاء
 * الرابط»، وهو الغرض الوحيد من الصفحة. فالقائمة تقصّ نفسها وتمرّر نفسها داخل
 * حدودها، ولا تملك أن تزيح بكسلاً واحداً مما حولها.
 */
.rm-board-fab {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-end: 12px;
  z-index: 5;
  min-height: 56px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  background: rgba(27, 19, 48, 0.94);
  border: 1px solid var(--rm-line);
  border-radius: 12px;
  color: var(--rm-ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.rm-board-fab:hover {
  border-color: var(--rm-brand-2);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.28), 0 6px 24px rgba(0, 0, 0, 0.5);
}
.rm-board-fab:focus-visible { outline: 3px solid var(--rm-brand-2); outline-offset: 2px; }
.rm-board-fab[aria-expanded="true"] { background: var(--rm-brand); border-color: var(--rm-brand-2); }
.rm-board-fab:active { transition: none; transform: scale(0.97); }

.rm-board {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-end: 80px;
  z-index: 4;
  width: min(340px, calc(100% - 24px));
  max-height: calc(100% - 92px);
  display: flex;
  flex-direction: column;
  background: rgba(18, 14, 28, 0.96);
  border: 1px solid var(--rm-line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  touch-action: pan-y;
}
.rm-board[hidden] { display: none; }

.rm-board-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rm-line);
}
.rm-board-head h3 {
  margin: 0;
  flex: 1;
  font-size: 15px;
  color: var(--rm-brand-2);
}
.rm-board-x {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--rm-dim);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.rm-board-x:hover { color: var(--rm-ink); background: #241a3f; }
.rm-board-x:active { transition: none; transform: scale(0.94); }

.rm-board-search { flex: 0 0 auto; padding: 10px 14px; }
#rm-board-q {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  background: #0b0813;
  border: 1px solid var(--rm-line);
  border-radius: 10px;
  color: var(--rm-ink);
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#rm-board-q::placeholder { color: var(--rm-dim); }
#rm-board-q:hover { border-color: var(--rm-brand-2); }
#rm-board-q:focus {
  outline: none;
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 3px rgba(124, 77, 255, 0.35);
}

/* القائمة وحدها تُمرَّر: الرأس والبحث وبطاقة المركز ثابتة على أطرافها. */
.rm-board-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rm-board-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 48px;
  background: #1b1330;
  border: 1px solid transparent;
  border-radius: 10px;
}
/* صفّ صاحب الصفحة داخل العشرة: يُميَّز كي يجد نفسه بلا قراءة الأسماء. */
.rm-board-row[data-me="1"] {
  border-color: var(--rm-brand-2);
  background: #241a3f;
}

.rm-board-rank {
  flex: 0 0 30px;
  font-size: 14px;
  font-weight: 700;
  color: var(--rm-dim);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* الثلاثة الأوائل بلون العلامة: ترتيبٌ يُقرأ بلمحة، لا بعدّ الصفوف. */
.rm-board-row[data-top="1"] .rm-board-rank { color: #ffd166; }
.rm-board-row[data-top="2"] .rm-board-rank { color: #d8d8e4; }
.rm-board-row[data-top="3"] .rm-board-rank { color: #d9a06a; }

.rm-board-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  /* الاسم يُقصّ ولا يلتفّ: سطران لاسمٍ واحد يهدمان انتظام الصفوف. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}
.rm-board-hours {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--rm-brand-2);
  font-variant-numeric: tabular-nums;
}

.rm-board-empty {
  margin: 0;
  padding: 14px 2px;
  font-size: 13px;
  color: var(--rm-dim);
  text-align: center;
}

/*
 * بطاقة المركز: مثبّتة في أسفل اللوحة، لا في ذيل القائمة.
 *
 * من كان مركزه 42 لا يجده بالتمرير - القائمة عشرة لا أكثر. وتثبيتُها هنا
 * يجعلها مرئيةً دائماً، ومرئيةً أيضاً وهو يبحث عن اسم غيره.
 */
.rm-board-me {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--rm-line);
  background: #16102a;
  font-size: 13px;
}
.rm-board-me[hidden] { display: none; }
.rm-board-me b { color: var(--rm-brand-2); font-variant-numeric: tabular-nums; }
.rm-board-me .rm-board-name { color: var(--rm-ink); }

/* شاشةٌ ضيّقة: العمودان يصيران عموداً، واللوحة تمتدّ عرض الشاشة. */
@media (max-width: 560px) {
  .rm-pad {
    inset-inline: 12px;
    max-width: none;
  }
  .rm-pad-cols { gap: 12px; justify-content: center; }
  .rm-board { inset-inline: 12px; width: auto; }
}

/*
 * شاشةٌ قصيرة: اللوحتان لا تُفتحان معاً أصلاً (يُغلق أحدُهما الآخر في
 * السكربت)، لكن مفتاحيهما يتجاوران في الأسفل. عند الضيق الشديد يُقصّ حشوهما
 * دون المساس بالارتفاع الأدنى - وهو الحدّ الذي يصيبه الليزر.
 */
@media (max-width: 400px) {
  .rm-pad-fab, .rm-board-fab { padding: 0 12px; font-size: 14px; }
}

/* =====================================================================
   طبقةُ السلاسة — تُضاف فوق ما سبق ولا تحذف منه شيئاً.

   ثلاث قواعد حكمت ما دخل هنا وما لم يدخل:

   1. **لا حركةَ على مسار الإدخال.** الشاشة والفيديو والطبقة التي تلتقط
      الإصبع لا تُحرَّك ولا تُنعَّم: أيُّ انتقالٍ هناك يضيف زمناً بين اللمسة
      وما تراه، وهو نقيضُ المطلوب. السلاسةُ للأزرار واللوحات وحدها.

   2. **`transform` و`opacity` فقط.** هما الخاصيتان اللتان يحرّكهما المُركِّب
      على المعالج الرسومي بلا إعادة تخطيط. وتحريكُ `width` أو `top` يجبر
      المتصفح على إعادة حساب الصفحة في كل إطار - وهو الفرق بين نعومةٍ وتقطيع.

   3. **من طلب سكوناً يُعطَه.** `prefers-reduced-motion` يُلغيها كلها.
   ===================================================================== */

.rm-btn,
.rm-btn--ghost,
.rm-key,
.rm-pad button,
.rm-chip {
  transition: transform .13s cubic-bezier(.2, .8, .3, 1),
              opacity .13s ease,
              background-color .16s ease,
              border-color .16s ease,
              box-shadow .16s ease;
}

/* `will-change` عند اللمس وحده، لا دائماً.
 *
 * وضعُه على كل زرّ يطلب من المتصفح طبقةً مركَّبة لكل واحد منها ويحتفظ بها
 * ما دامت الصفحة مفتوحة. ولوحةُ المفاتيح هنا عشراتُ الأزرار: عشراتُ الطبقات
 * في ذاكرة المعالج الرسومي، وهو ثمنٌ يُدفع طوال الوقت مقابل تسريعٍ يُحتاج
 * جزءاً من الثانية. فيُطلب عند بداية اللمسة ويُترك بعدها. */
.rm-btn:active,
.rm-btn--ghost:active,
.rm-key:active,
.rm-pad button:active {
  will-change: transform;
}

/* ارتدادُ الضغطة: يُقرأ باليد قبل أن يُقرأ بالعين، وهو ما يجعل الزرّ
   يبدو «مستجيباً» حتى قبل أن يصل أمرُه إلى الطرف الآخر. */
.rm-btn:active,
.rm-btn--ghost:active,
.rm-key:active,
.rm-pad button:active {
  transform: scale(.955);
  transition-duration: .06s;
}

/* اللوحات تدخل وتخرج بانزلاقةٍ قصيرة بدل أن تَقفز. */
/* الشفافية بالانتقال، والإزاحة بالحركة أدناه: تحريكُ نفس الخاصية بالاثنين
   معاً يجعلهما يتنازعان، فتتقطّع اللوحة عند أول ظهور. */
.rm-board,
.rm-panel,
.rm-sheet {
  transition: opacity .18s ease;
}
.rm-board[hidden],
.rm-panel[hidden],
.rm-sheet[hidden] {
  /* `hidden` يبقى مسؤولاً عن الإخفاء الفعلي؛ هذه للحظة الانتقال وحدها. */
  opacity: 0;
}

@keyframes rm-rise {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.rm-board:not([hidden]),
.rm-panel:not([hidden]),
.rm-sheet:not([hidden]) {
  animation: rm-rise .2s cubic-bezier(.2, .8, .3, 1) both;
}

/* نبضةٌ خفيفة على الحالة الحيّة: تُقرأ بطرف العين ولا تسرق الانتباه. */
@keyframes rm-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.rm-dot[data-live="1"],
.rm-chip[data-live="1"]::before {
  animation: rm-breathe 2s ease-in-out infinite;
}

/* الرسائل تظهر بانزلاقة بدل أن تومض. */
.rm-hint,
.rm-ok {
  transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .3, 1);
}

/* التمرير باللمس: زخمٌ طبيعي على الأجهزة التي تدعمه. */
.rm-board,
.rm-panel {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* والشاشةُ نفسها مستثناةٌ صراحةً: لا انتقال، ولا تنعيم، ولا تسارع مركَّب
   يزيد زمن العرض. ما بين الإصبع والصورة يبقى أقصر ما يمكن. */
.rm-stage,
.rm-stage *,
.rm-video,
.rm-surface {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .rm-btn, .rm-btn--ghost, .rm-key, .rm-pad button, .rm-chip,
  .rm-board, .rm-panel, .rm-sheet, .rm-hint, .rm-ok {
    transition: none !important;
    animation: none !important;
  }
  .rm-board, .rm-panel { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ */
/* المدخل الحيّ: زرّ المشاركة ولوح المعاينة                            */
/* ------------------------------------------------------------------ */
/*
 * زرٌّ ثانٍ بلونٍ ثانٍ، لا بلونِ الأول.
 *
 * الزرّان متجاوران في بطاقةٍ واحدة، ويقودان إلى مسارين لا يشبه أحدهما الآخر:
 * الأول يفتح بيئةً معزولة على العقدة، والثاني يبثّ شاشةَ الجهاز الذي بين
 * يديك. وزرّان متطابقان في اللون تحت أحدهما الآخر يُضغط أعلاهما بالعادة لا
 * بالقصد - وهذا الفرقُ يُدفع ثمنُه مشاركةَ شاشةٍ لم تُرَد.
 */
.rm-btn--alt {
  background: transparent;
  border: 1px solid var(--rm-brand);
  color: var(--rm-brand-2);
  /*
   * فاصلٌ عن الزرّ الذي فوقه - وهو شرطٌ لا تجميل.
   *
   * زرّان متلاصقان بحافةٍ واحدة يعني أن ارتجافة ليزرٍ من بضعة بكسلات تُسقط
   * الضغطة على الآخر. والفرقُ بينهما هنا ليس هيّناً: أحدُهما يفتح متصفّحاً
   * معزولاً، والآخر يبثّ سطحَ مكتب صاحبه. فعشرة بكسلات هنا أرخصُ من مشاركةِ
   * شاشةٍ لم تُرَد.
   */
  margin-block-start: 10px;
}
.rm-btn--alt:hover {
  background: rgba(124, 77, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(161, 123, 255, 0.25);
}
.rm-btn--alt:active {
  background: rgba(124, 77, 255, 0.28);
  box-shadow: 0 0 0 5px rgba(161, 123, 255, 0.4);
}
.rm-btn--alt:disabled:hover { background: transparent; box-shadow: none; }

/*
 * لوح المعاينة: صغيرٌ عمداً.
 *
 * غرضُه أن يُطمئن صاحبَه أن ما يُرسل هو ما يقصده - نافذةٌ لا سطحُ مكتبٍ كامل
 * بحساباته المفتوحة. وذلك يحتاج أن يُعرف المحتوى، لا أن يُقرأ. وكبرُه يكلّف
 * فكَّ ترميزٍ ثانياً على نفس الجهاز الذي يرمّز البثّ أصلاً.
 */
.rm-share-box {
  position: absolute;
  inset-inline-end: 12px;
  inset-block-start: 12px;
  z-index: 5;
  width: min(280px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  background: rgba(18, 14, 28, 0.96);
  border: 1px solid var(--rm-line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.rm-share-box[hidden] { display: none; }

.rm-share-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--rm-line);
  font-size: 12px;
}

.rm-share-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rm-dim);
  font-weight: 700;
}
/* النقطة الحمراء النابضة هي عُرف «على الهواء» في كل مكان؛ لا تُخترع هنا. */
.rm-share-live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4a3f63;
}
.rm-share-live[data-on="1"] { color: var(--rm-ok); }
.rm-share-live[data-on="1"]::before {
  background: var(--rm-bad);
  box-shadow: 0 0 8px var(--rm-bad);
  animation: rm-share-pulse 1.6s ease-in-out infinite;
}
.rm-share-live[data-on="bad"] { color: var(--rm-bad); }

@keyframes rm-share-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
/* من يطلب تقليل الحركة لا يُفرض عليه نبضٌ دائم في زاوية شاشته. */
@media (prefers-reduced-motion: reduce) {
  .rm-share-live[data-on="1"]::before { animation: none; }
}

.rm-share-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--rm-dim);
  font-size: 22px;
  line-height: 1;
  /* مساحةُ لمسٍ كاملة رغم صغر المحرف: زرُّ إيقافٍ يُخطأ هو زرُّ بثٍّ يستمر. */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.rm-share-x:hover { color: var(--rm-ink); }

.rm-share-box video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.rm-share-note {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--rm-dim);
}
.rm-share-note[data-tone="bad"] { color: var(--rm-bad); }

/* ================================================================== */
/* الطبقة المدفوعة: هويّةٌ بصرية كاملة، لا شارةٌ في زاوية                */
/* ================================================================== */
/*
 * القسمان يتقاسمان القالب والسكربت - وهذا صحيح، فلا نسختان تفترقان.
 * لكنهما **يجب ألا يتقاسما الشكل**: ما يخرج منهما مختلف في أخطر ما يكون
 * الاختلاف - رابطٌ محروس بالعالَم هناك، ورابطٌ حرٌّ يعمل في أي مكان هنا.
 *
 * فالفصلُ يقع في الرموز (tokens) لا في المكوّنات: سطرٌ واحد يبدّل لونَ الخدمة
 * كلَّه على هذه الصفحة - الأزرار، والحالات، والشارات، وحلقاتُ التركيز - بلا
 * أن يُلمس قاعدةُ مكوّنٍ واحدة. ولو نُسخت المكوّنات بلونٍ آخر لافترقت عن
 * أصلها عند أول إصلاح.
 *
 * والذهبيُّ لا يظهر في أي موضعٍ آخر من الخدمة، فحيثما رآه المستخدم عرف أين هو.
 */
body[data-tier="pro"] {
  --rm-brand: #e0a02c;
  --rm-brand-2: #f6c76a;
  --rm-line: #3a2c14;
  --rm-panel: #17120a;
  --rm-bg: #0c0902;
}

/* شارة PRO. واحدةٌ في الشريط، وواحدةٌ في الترويسة، وبنفس القاعدة. */
.rm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--rm-brand);
  color: #221806;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  flex: 0 0 auto;
  /* لاتينيّةٌ في سطرٍ عربي: بلا العزل تنقلب «PRO» إلى «ORP» في بعض المحرّكات. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ */
/* ترويسة القسم المدفوع                                                */
/* ------------------------------------------------------------------ */
.rm-protop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(224, 160, 44, 0.18), rgba(224, 160, 44, 0.06));
  border-bottom: 1px solid var(--rm-line);
  flex: 0 0 auto;
}

.rm-protop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.rm-protop-text b { font-size: 13px; color: var(--rm-brand-2); }
.rm-protop-text small {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--rm-dim);
}
/* «بلا حماية» تحته خط: هي الكلمة التي إن فاتت فات معناها كلُّه. */
.rm-protop-text u { color: #f6c76a; text-underline-offset: 2px; }

.rm-protop-alt {
  flex: 0 0 auto;
  color: var(--rm-dim);
  font-size: 12px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--rm-line);
  white-space: nowrap;
}
.rm-protop-alt:hover { color: var(--rm-ink); }

/* الهاتف: الترويسة تبقى، ويُطوى مخرجُها وتفصيلُها لتُبقي الزرَّ فوق الطيّة. */
@media (max-width: 430px) {
  .rm-protop { padding: 8px 12px; gap: 8px; }
  .rm-protop-text small { display: none; }
  .rm-protop-alt { font-size: 11px; padding: 5px 7px; }
}

/* مخرجُ اللاعب المجاني من بوّابة القسم المدفوع. سطرٌ ثانوي بحجمٍ ثانوي:
   هو طريقٌ لمن أخطأ الباب، لا دعوةٌ لمن جاء يشترك. */
.rm-gate-alt {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--rm-dim);
}
.rm-gate-alt a { color: var(--rm-brand-2); }

/* ================================================================== */
/* وضع التلفاز: هويّةٌ ثالثة                                            */
/* ================================================================== */
/*
 * ثلاثةُ أقسام، وثلاثةُ ألوان: بنفسجيٌّ للعوالم، وذهبيٌّ للاشتراكات،
 * وسماويٌّ للتلفاز. وصفحةُ التلفاز تحمل `data-tier="pro"` أيضاً - لأن رابطها
 * حرٌّ بالضرورة - فلولا هذا التجاوز لبدت قسمَ الاشتراكات نفسَه.
 *
 * وترتيبُه بعد قاعدة `pro` مقصود: التخصيص متساوٍ، فالمتأخّر يفوز.
 */
body[data-tv="1"] {
  --rm-brand: #2aa7c4;
  --rm-brand-2: #7fd4e8;
  --rm-line: #16323a;
  --rm-panel: #0a1418;
  --rm-bg: #050c0f;
}

.rm-badge--tv { background: var(--rm-brand); color: #04191f; }
.rm-protop--tv {
  background: linear-gradient(180deg, rgba(42, 167, 196, 0.18), rgba(42, 167, 196, 0.06));
}
/* وسمُ الشاشة المقترنة: ليس رابطاً، فلا يُعطى شكلَ رابط. */
#rm-tv-code-tag {
  color: var(--rm-brand-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ */
/* لوح الاقتران                                                        */
/* ------------------------------------------------------------------ */
/*
 * يغطّي المسرح كلَّه حتى يُكتب الرمز، وفوق بطاقة «إنشاء الرابط».
 *
 * وهذا شرطٌ لا زينة: بثٌّ يبدأ بلا شاشةٍ مقترنة يحجز مقعداً على العقدة
 * ويشغّل مرمّزاً ولا يصل إلى أحد. فالبابُ الأول هو الاقتران.
 */
.rm-tvpair {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 12, 15, 0.94);
}
.rm-tvpair[hidden] { display: none; }

#rm-tvcode {
  width: 100%;
  padding: 15px;
  margin: 4px 0 12px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--rm-line);
  background: #050c0f;
  color: var(--rm-ink);
  font-family: inherit;
}
#rm-tvcode:focus { outline: 2px solid var(--rm-brand); border-color: var(--rm-brand); }

/* ------------------------------------------------------------------ */
/* أزرار المشغّل على التلفاز                                            */
/* ------------------------------------------------------------------ */
.rm-tvkeys {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.rm-tvkey {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--rm-line);
  background: var(--rm-panel);
  color: var(--rm-ink);
  border-radius: 11px;
  /* 54 بكسلاً: تُضغط بإبهامٍ والعين على التلفاز لا على الهاتف - بلا تصويب. */
  min-height: 54px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.rm-tvkey:active { transform: scale(0.96); }
.rm-tvkey--play {
  flex: 1.5 1 0;
  background: var(--rm-brand);
  border-color: var(--rm-brand);
  color: #04191f;
  font-size: 20px;
}

.rm-tvrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
#rm-tvvol {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--rm-brand);
  height: 34px;
}

/* مخرجا ترويسة القسم المدفوع: «الريموت» و«المحروس». */
.rm-protop-acts {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
/* «الريموت» مقصدٌ لا مخرج، فيأخذ لونَ القسم لا لونَ الحاشية. */
.rm-protop-alt--go {
  border-color: var(--rm-brand);
  color: var(--rm-brand-2);
  font-weight: 700;
}
.rm-protop-alt--go:hover { background: rgba(224, 160, 44, 0.16); }

@media (max-width: 430px) {
  /* على الهاتف يبقى «الريموت» وحده: هو المقصد، و«المحروس» موجودٌ في البوّابة. */
  .rm-protop-acts .rm-protop-alt:not(.rm-protop-alt--go) { display: none; }
}

/*
 * عناصرُ وضع التلفاز لا تظهر خارجه — حارسٌ ثانٍ فوق حارس القالب.
 *
 * القالبُ يلفّها بـ`{% if tv %}` أصلاً، وهذا يكفي في الإنتاج. لكن الحارس
 * الواحد كسر مختبراً: `remote-flow-lab` يجرّد القالبَ من وسوم Jinja كلِّها
 * ليختبر السكربت وحده، فظهر لوحُ الاقتران في وضع العوالم وابتلع كلَّ نقرةٍ
 * على «إنشاء الرابط» - ثلاثون ثانيةً من محاولاتٍ ثم انتهاءُ مهلة.
 *
 * والدرسُ أعمّ من المختبر: عنصرٌ يغطّي الشاشة يجب أن يشترط وضعَه في مكانين -
 * فظهورُه بالخطأ لا يُرى، ويُقرأ «الزرّ لا يستجيب».
 */
.rm-tvpair, .rm-tvkeys, .rm-tvrow { display: none; }
body[data-tv="1"] .rm-tvpair { display: flex; }
body[data-tv="1"] .rm-tvkeys,
body[data-tv="1"] .rm-tvrow { display: flex; }
body[data-tv="1"] .rm-tvpair[hidden] { display: none; }

/* =====================================================================
   وضعُ التحكّم: الصفحةُ تصير الموقعَ، لا ريموتاً عليه
   =====================================================================

   يُشغَّل بزرّ «بدء تحكّم ريموت»، ويُطفأ بالخروج من ملء الشاشة أو بـEscape.
   وكلُّ ما يفعله **إخفاءٌ وتكبير**: لا جلسةَ تُفتح، ولا مقبسَ يُعاد، ولا
   صورةَ تُطلب من جديد. الصورةُ واصلةٌ منذ «إنشاء الرابط»، وهذه الكتلةُ تزيح
   ما حولها وترفعها إلى ملء الجهاز.

   ولماذا سمةٌ على `<body>` لا صنفٌ على المسرح: الأشرطةُ التي تُخفى موزّعةٌ
   بين الترويسة والقدم والمسرح، وأبٌ واحد يحكمها جميعاً بسطرٍ واحد.
   ------------------------------------------------------------------- */

/* كلُّ ما ليس صورة يختفي: الترويسة، واللوح، والتلميح، والشارات. */
body[data-immersive="1"] .rm-bar,
body[data-immersive="1"] .rm-deck,
body[data-immersive="1"] .rm-protop,
body[data-immersive="1"] .rm-overlay,
body[data-immersive="1"] .rm-share-box,
body[data-immersive="1"] .rm-tvpair { display: none !important; }

body[data-immersive="1"] {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

body[data-immersive="1"] .rm-app {
  position: fixed;
  inset: 0;
  width: 100vw;
  /* `dvh` لا `vh`: شريطُ عنوان المتصفّح في الجوال يقتطع من `vh`، فيبقى شريطٌ
     أسود أسفل الصورة حتى داخل ملء الشاشة. و`vh` احتياطٌ لمن لا يعرف الوحدة. */
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

body[data-immersive="1"] .rm-stage {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #000;
}

body[data-immersive="1"] #rm-video {
  width: 100%;
  height: 100%;
  /* `contain` لا `cover`: القصُّ يخفي حافّةَ الموقع، وفيها شريطُ العنوان
     وأزرارُ الرجوع - أي بالضبط ما يحتاجه من يتصفّح. */
  object-fit: contain;
  background: #000;
}

/* ------------------------------------------------------------------ */
/* زرُّ بدء التحكّم                                                     */
/* ------------------------------------------------------------------ */
.rm-deck-row--immerse { margin-top: 8px; }

.rm-btn--immerse {
  width: 100%;
  justify-content: center;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 700;
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.08));
  color: #d6c7ff;
}
.rm-btn--immerse:hover, .rm-btn--immerse:focus-visible {
  border-color: #8b5cf6;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.32), rgba(139, 92, 246, 0.14));
  outline: none;
}
/* قبل أن يبدأ البثّ لا معنى للزرّ: لا صورةَ يتحكّم بها أحد. */
.rm-btn--immerse[disabled] { opacity: 0.4; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* اللوحة: رقمان، أعلى اليسار، بلا شريط                                */
/* ------------------------------------------------------------------ */
/*
 * المطلوب ألّا يشعر المتحكّم أنه أمام شاشةٍ بعيدة، وأيُّ شريطٍ - ولو شفّافاً -
 * يقول عكسَ ذلك في كل لحظة. فلا خلفيةَ ممتدّة ولا حدّ ولا عنوان: رقمان
 * صغيران يطفوان على الصورة، ولمن أراد قراءتهما وحده.
 *
 * و`pointer-events: none` شرطٌ لا زينة: اللوحةُ تقع فوق المسرح، وهو السطحُ
 * الذي تُلتقط عليه كلُّ لمسةٍ وتُمرَّر إلى العقدة. فبدونها تبتلع اللوحةُ لمسةَ
 * من قصد الزاوية العليا اليسرى - وهي زاويةُ «رجوع» في أكثر المواقع.
 */
.rm-hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  z-index: 40;
  display: flex;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  /* لاتينيّةٌ في مستندٍ عربيّ: بلا هذا ينقلب «60 fps» إلى «fps 60». */
  direction: ltr;
  unicode-bidi: isolate;
  color: rgba(255, 255, 255, 0.72);
  /* ظلٌّ لا خلفية: يُقرأ على صورةٍ فاتحة وعلى داكنة، ولا يرسم مستطيلاً. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.7);
  opacity: 0.85;
  transition: opacity 0.25s ease;
}

.rm-hud[hidden] { display: none !important; }

/* اللوحةُ لا تظهر إلا في وضع التحكّم: خارجَه ثمّة شريطُ إحصاءاتٍ كامل. */
body:not([data-immersive="1"]) .rm-hud { display: none !important; }

/* نقطةُ الحالة: خضراءُ حين يتدفّق، وكهرمانيّةٌ في وضع التوفير. */
.rm-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 6px rgba(61, 220, 132, 0.8);
}
.rm-hud[data-saving="1"] .rm-hud-dot {
  background: #f0b43c;
  box-shadow: 0 0 6px rgba(240, 180, 60, 0.8);
}
.rm-hud[data-saving="1"] { opacity: 0.6; }