/* OX GAMES — طبقة الواجهة المشتركة
   ------------------------------------------------------------
   ملف واحد يُحقن في كل الألعاب واللوحات، فيكفي تعديله هنا ليتغيّر
   كل الموقع. لا يفرض ألوانا: يقرأ متغيّرات كل صفحة إن وُجدت،
   ويسقط على قيم داكنة معقولة إن لم توجد. */

:root{
  --sbW: 10px;                /* عرض الشريط */
  --sbTrack: transparent;
  --sbThumb: color-mix(in srgb, var(--line2, #2a3550) 88%, transparent);
  --sbThumbHover: var(--a1, #22d3ee);
}

/* ===== شريط تمرير موحّد =====
   فايرفوكس يأخذ خاصيتين فقط، وكروم/سفاري يأخذان الأجزاء.
   الإبهام بحدّ شفاف وbackground-clip حتى يبدو نحيفا داخل مساره،
   ويثخن عند المرور بدل أن يقفز عرض الشريط ويزحزح المحتوى. */
/* كروم الحديث يتجاهل ‎::-webkit-scrollbar‎ كلها إن وُجدت ‎scrollbar-width‎
   على نفس العنصر، فنفصل بينهما: المحركات التي لا تعرف الوسم الويبكتي
   (فايرفوكس) تأخذ الخاصيتين القياسيتين، وكروم وسفاري يأخذان الشكل
   الكامل المدوّر. لو خلطناهما لخسرنا الشكل في كروم بلا أن ندري. */
@supports not selector(::-webkit-scrollbar){
  html *, html{ scrollbar-width: thin; scrollbar-color: var(--sbThumb) var(--sbTrack); }
}

/* نسبقها بـ html كي تغلب قواعد كل لعبة على حدة (‎.events::-webkit-…‎)
   فيبقى الشكل واحدا في الموقع كله. */
html *::-webkit-scrollbar, html::-webkit-scrollbar{ width: var(--sbW); height: var(--sbW); }
html *::-webkit-scrollbar-track, html::-webkit-scrollbar-track{ background: var(--sbTrack); }
html *::-webkit-scrollbar-corner{ background: transparent; }
html *::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb{
  background: var(--sbThumb);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 99px;
  transition: background-color .18s;
}
html *::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--sbThumbHover) 62%, var(--sbThumb));
  background-clip: padding-box;
}
html *::-webkit-scrollbar-thumb:active{
  background: var(--sbThumbHover);
  background-clip: padding-box;
}

/* شاشة اللمس لا تُظهر شريطا دائما، فلا داعي لحجز عرضه */
@media (hover: none){
  :root{ --sbW: 6px }
  html *::-webkit-scrollbar-thumb{ border-width: 2px }
}

/* الوضع النهاري: نفس الشكل بإبهام أغمق قليلا ليُرى على الأبيض */
:root[data-mode="light"]{
  --sbThumb: color-mix(in srgb, var(--line2, #c9d2e4) 92%, #000 8%);
}

/* ===== تمرير مريح =====
   كل صندوق قابل للتمرير يقف عند حدّه فلا يجرّ الصفحة خلفه،
   والانتقال إلى عنصر بالكيبورد لا يقصّه أعلى الصندوق. */
[class*="scroll"], .events, .feed, .tabbody, .log, .list, .panel-body,
.gd-sheet, .mus-panel, .supList, .sideScroll{
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important }
}

/* ===== طيّ مجموعات الإعدادات =====
   لوحة التحكم تطول، والستريمر يبحث فيها والبث شغّال. فكل مجموعة
   عنوانها زر يطويها، ويتذكّر الموقع ما طواه. السلوك في /ui.js. */
#tab-settings .group > .secttl,
#tab-play .group > .secttl{
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 9px 10px;
  border-radius: 12px;
  transition: background-color .15s;
}
#tab-settings .group > .secttl:hover,
#tab-play .group > .secttl:hover{ background: rgba(128,150,190,.10) }
#tab-settings .group > .secttl:focus-visible,
#tab-play .group > .secttl:focus-visible{
  outline: 2px solid var(--a1, #22d3ee); outline-offset: 2px }

#tab-settings .group > .secttl .gcar,
#tab-play .group > .secttl .gcar{
  margin-inline-start: auto;
  font-size: 13px; line-height: 1; opacity: .55;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), opacity .15s;
}
#tab-settings .group > .secttl:hover .gcar,
#tab-play .group > .secttl:hover .gcar{ opacity: 1 }
/* مطوية: السهم يشير إلى الجانب (والصفحة عربية، فالاتجاه لليسار) */
#tab-settings .group.collapsed > .secttl .gcar,
#tab-play .group.collapsed > .secttl .gcar{ transform: rotate(90deg) }

#tab-settings .group > .gbody,
#tab-play .group > .gbody{ padding: 0 2px }
#tab-settings .group.collapsed > .gbody,
#tab-play .group.collapsed > .gbody{ display: none !important }
/* مطوية: نضغط الفراغ حولها فتصير الأسطر قائمة مرتبة */
#tab-settings .group.collapsed,
#tab-play .group.collapsed{ padding-bottom: 0 }


/* ==========================================================
   بطاقة اللاعب — المعيار
   ----------------------------------------------------------
   الألعاب الحالية تحمل نسختها من هذه القواعد داخلها (وهي نفسها
   حرفا بحرف). ما هنا لأي لعبة جديدة: تكتب البنية وحدها فتأخذ
   الشكل مجانا بلا نسخ تنسيق:

     <div class="pcard">
       <img class="av">      الصورة الدائرية
       <div class="pn">3</div>   رقم اللاعب
       <div class="pnm">اسمه</div>
     </div>

   ثم oxLook(card, nameEl, player) للإطار واللافتة،
   و oxDress(card, player) للبطاقة المشتراة إن وُجدت.
   المتغيّرات: --av حجم الصورة، --scale مقياس الشاشة،
   --cardmin عرض البطاقة، --nmf حجم خط الاسم.
   ========================================================== */
/* ===== بطاقة اللاعب — المعيار الموحّد لكل الألعاب =====
   نفس الشكل في ساحة الانتظار أيا كانت اللعبة: صورة دائرية، شارة رقم
   ذهبية تركب أسفلها، ثم الاسم. من اشترى إطارا يظهر إطاره فوق هذا.
   أي لعبة جديدة تكتب نفس البنية: .pcard > .av + .pn + .pnm */
.pcard{position:relative;background:linear-gradient(180deg,var(--surface-2,#141a29),color-mix(in srgb,var(--surface-2,#141a29) 82%,#000));
  border:1px solid var(--line,rgba(255,255,255,.08));border-radius:calc(18px * var(--scale,1));
  padding:calc(13px * var(--scale,1)) calc(9px * var(--scale,1)) calc(11px * var(--scale,1));
  text-align:center;transition:.25s transform,.25s border-color,.25s opacity}
.pcard.click{cursor:pointer}
.pcard.click:hover{border-color:var(--rose,#fb7185);transform:translateY(-2px)}
.pcard .av{width:calc(var(--av,54px) * var(--scale,1));height:calc(var(--av,54px) * var(--scale,1));border-radius:50%;
  margin:0 auto;display:block;object-fit:cover;background:var(--surface-3,#1b2437);border:0;
  box-shadow:0 calc(4px * var(--scale,1)) calc(14px * var(--scale,1)) rgba(0,0,0,.38)}
.cards.dense .pcard{padding:calc(8px * var(--scale,1)) calc(5px * var(--scale,1)) calc(7px * var(--scale,1));
  border-radius:calc(13px * var(--scale,1))}
.cards.dense .pcard .pn{font-size:calc(var(--av,54px) * var(--scale,1) * .3)}
.cards.dense .pcard .pnm{font-size:calc(11px * var(--scale,1))}
.cards.dense .pcard.out::after{font-size:30px}
/* شارة الرقم: قرص ذهبي يركب أسفل الصورة فيُقرأ الرقم من مسافة البث */
.pcard .pn{font-family:"Alexandria",sans-serif;font-weight:800;color:#231603;
  display:flex;align-items:center;justify-content:center;
  width:max-content;min-width:calc(var(--av,54px) * var(--scale,1) * .42);
  height:calc(var(--av,54px) * var(--scale,1) * .42);
  padding:0 calc(6px * var(--scale,1));
  margin-inline:auto;
  margin-top:calc(var(--av,54px) * var(--scale,1) * -.2);
  margin-bottom:calc(5px * var(--scale,1));
  border-radius:999px;
  background:linear-gradient(180deg,#fde68a,#f0b53a);
  box-shadow:0 calc(2px * var(--scale,1)) calc(8px * var(--scale,1)) rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.6);
  font-size:calc(var(--av,54px) * var(--scale,1) * .26);line-height:1;
  font-variant-numeric:tabular-nums;position:relative;z-index:2}
.pcard .pnm{font-size:calc(var(--nmf,13px) * var(--scale,1) * 1.06);color:var(--text,#dfe4f0);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0;letter-spacing:.2px}
.pcard .badge{position:absolute;top:5px;inset-inline-start:5px;font-size:12px}