/* ══════════════════════════════════════════════════════════
   هدهد — نظام التصميم
   مبدأ: هدوء بصري · مساحة تتنفّس · تباين بالحجم لا بالصراخ
   ══════════════════════════════════════════════════════════ */
:root{
  /* ── ألوان الشعار: بنفسجي · سماوي · ذهبي ── */
  --brand-purple:#a97bff;
  --brand-cyan:#31e1ff;
  --brand-gold:#ffd76e;
  --brand-gradient:linear-gradient(135deg,var(--brand-purple) 0%,var(--brand-cyan) 50%,var(--brand-gold) 100%);
  /* أسطح داكنة تُبرز ألوان الشعار */
  --bg:#0a0a16;
  --bg-2:#101022;
  --surf:#17172d;
  --surf-2:#20203b;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --panel-3:rgba(255,255,255,.095);
  --line:rgba(169,123,255,.14);
  --line-2:rgba(49,225,255,.25);

  /* ── نص ── */
  --txt:#f2efff;
  --dim:#b9b5d1;
  --dim-2:#9591af;

  /* ── ربط الواجهة بهوية الشعار ── */
  --star:#b3a7f0;      /* بنفسجي فاتح — يحلّ محلّ الذهبي */
  --p1:#8b7ad6;        /* بنفسجي */
  --p2:#6fa3dd;        /* أزرق */
  --p3:#a48ce8;        /* بنفسجي فاتح */
  --ok:#6fb5c9;        /* أزرق مخضرّ */
  --bad:#c98ab4;       /* بنفسجي ورديّ */
  --acc:var(--p3);

  /* مقاييس */
  --r:16px;
  --r-md:12px;
  --r-sm:9px;
  --gap:14px;
  --shadow:0 14px 34px rgba(6,8,26,.5);
  --shadow-sm:0 4px 14px rgba(6,8,26,.34);
  --emoji:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}

.hidden{display:none !important}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--txt);
  display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  font-size:15px;line-height:1.5;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}
::-webkit-scrollbar-track{background:transparent}

/* ══════════ الخلفية: هادئة وثابتة، بلا ضجيج ══════════ */
#bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(120% 80% at 15% -10%, rgba(169,123,255,.18), transparent 60%),
    radial-gradient(100% 70% at 95% 105%, rgba(49,225,255,.10), transparent 62%),
    var(--bg);
}
.aurora,#bgfx .grid,#starfield{display:none}

/* ══════════ إيموجي ══════════ */
.emo{
  display:inline-block;position:relative;line-height:1;vertical-align:middle;
  font-family:var(--emoji);font-style:normal;
}
.emo::after{content:none}
/* رمزٌ مرسوم بدل حرف إيموجي: يأخذ حجم الخطّ نفسه فيحلّ محلّه تماماً */
.emo > svg{width:1em;height:1em;display:block;overflow:visible}
.emo-xs{font-size:12px}
.emo-sm{font-size:15px}
.emo-md{font-size:24px}
.emo-lg{font-size:36px}
.emo-xl{font-size:64px}
.emo-2xl{font-size:92px}
.emo-float{animation:emoFloat 5s ease-in-out infinite}
.emo-beat {animation:emoBeat 2.4s ease-in-out infinite}
.emo-spin {animation:emoSpin 14s linear infinite}
.emo-shake{animation:emoShake 3s ease-in-out infinite}
.emo-pop  {animation:emoPop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes emoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes emoBeat {0%,100%{transform:scale(1)}22%{transform:scale(1.1)}44%{transform:scale(1)}}
@keyframes emoSpin {to{transform:rotate(360deg)}}
@keyframes emoShake{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-7deg)}96%{transform:rotate(7deg)}}
@keyframes emoPop  {from{transform:scale(.5);opacity:0}}

.orb{
  --acc:var(--p3);
  width:42px;height:42px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--acc) 13%,var(--surf));
  border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
  transition:transform .3s cubic-bezier(.2,1.2,.4,1);
}
.orb .emo::after{content:none}
.orb-lg{width:52px;height:52px;border-radius:16px}
.orb-xl{width:92px;height:92px;border-radius:28px}

/* ══════════ أزرار ══════════ */
.btn{
  border:1px solid var(--line);background:var(--panel-2);color:var(--txt);
  padding:9px 16px;border-radius:var(--r-md);cursor:pointer;
  font-size:13.5px;font-weight:700;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  transition:background .18s,border-color .18s,transform .18s,color .18s;
  white-space:nowrap;
}
.btn:hover{background:var(--panel-3);border-color:var(--line-2)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--p2);outline-offset:2px}
.btn-primary{
  background:color-mix(in srgb,var(--acc) 82%,#0d0f14);
  border-color:transparent;color:#12151d;font-weight:800;
}
.btn-primary:hover{background:color-mix(in srgb,var(--acc) 95%,#fff);border-color:transparent}
.btn-danger{background:color-mix(in srgb,var(--bad) 20%,transparent);
  border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:#f0c3cc}
.btn-danger:hover{background:color-mix(in srgb,var(--bad) 32%,transparent)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--panel-2)}
.btn-icon{padding:8px 10px;font-size:15px;font-family:var(--emoji);
  background:transparent;border-color:transparent;color:var(--dim)}
.btn-icon:hover{background:var(--panel-2);color:var(--txt)}
.btn-icon.on{background:color-mix(in srgb,var(--p3) 20%,transparent);
  border-color:color-mix(in srgb,var(--p3) 34%,transparent)}
.btn-mini{padding:5px 11px;font-size:12px;border-radius:9px}
.btn-lg{padding:13px 30px;font-size:16px;border-radius:14px}

/* ══════════ الشريط العلوي ══════════ */
#topbar{
  display:flex;align-items:center;gap:16px;padding:10px 18px;flex:0 0 auto;
  background:rgba(18,21,29,.78);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);z-index:20;
}
.brand{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  background:none;border:none;color:inherit;font-family:inherit;
  padding:4px 8px;border-radius:var(--r-md);transition:background .18s;
}
.brand:hover{background:var(--panel-2)}
.brand-logo{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;padding:6px;
  background:color-mix(in srgb,var(--p3) 16%,var(--surf));
  border:1px solid color-mix(in srgb,var(--p3) 24%,transparent);
}
.brand-logo svg{width:100%;height:100%}
.brand-text{text-align:start}
.brand-text b{display:block;font-size:17px;line-height:1.1;font-weight:800;letter-spacing:-.2px}
.brand-text .dot{color:var(--star)}
.brand-text span{font-size:10.5px;color:var(--dim-2);font-weight:600}

.conn{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-wrap:wrap}
.field{
  display:flex;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-md);
  padding-inline-start:12px;transition:border-color .18s;
}
.field:focus-within{border-color:color-mix(in srgb,var(--p2) 55%,transparent)}
.field .at{color:var(--dim-2);font-weight:700}
.conn input{background:none;border:none;color:var(--txt);padding:9px 10px;width:168px;
  font-size:13.5px;font-family:inherit;outline:none}
.conn input::placeholder{color:var(--dim-2)}

.status{
  display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);font-weight:700;
  background:var(--panel);border:1px solid var(--line);padding:8px 13px;border-radius:var(--r-md);
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--dim-2);display:block;flex:0 0 auto}
.status.on i{background:var(--ok)}
.status.on{color:#b6ddc7}
.status.sim i{background:var(--star)}
.status.sim{color:#eed9ae}
.status.wait i{background:var(--star);animation:pulse 1.4s ease-in-out infinite}
.status.wait{color:#eed9ae}
@keyframes pulse{50%{opacity:.28}}
.tools{display:flex;gap:3px}

/* ══════════ التخطيط ══════════ */
#layout{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) 268px;
  gap:var(--gap);padding:var(--gap);min-height:0;min-width:0;
}
/* الرئيسية: المعرض يأخذ العرض كاملاً */
body:not(.playing) #layout{grid-template-columns:minmax(0,1fr)}
body:not(.playing) #rail{display:none}
#sidebar{display:none}
#rail{
  background:var(--surf);
  border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}

/* ══════════ قائمة الألعاب ══════════ */
.side-head{
  display:flex;align-items:center;gap:8px;padding:14px 15px 10px;
}
.side-head h3{font-size:14px;font-weight:800;flex:1;letter-spacing:-.2px}
.pill{background:var(--panel-2);padding:2px 9px;border-radius:20px;
  font-size:11.5px;color:var(--dim);font-weight:700}

.side-search{
  display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:0 11px;
  border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line);
  transition:border-color .18s;
}
.side-search:focus-within{border-color:color-mix(in srgb,var(--p2) 50%,transparent)}
.ss-i{font-family:var(--emoji);font-size:12px;opacity:.5}
.side-search input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-size:13px;font-family:inherit;padding:8px 0}
.side-search input::placeholder{color:var(--dim-2)}

.game-list{overflow-y:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:2px;flex:1}
.g-item{
  --acc:var(--p3);
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--r-md);
  cursor:pointer;border:1px solid transparent;position:relative;
  transition:background .16s;
}
.g-item:hover{background:var(--panel)}
.g-item.active{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.g-item.active .orb{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.g-item .orb{width:34px;height:34px;border-radius:11px}
.g-item .orb .emo{font-size:18px}
.g-item .tx{min-width:0;flex:1}
.g-item b{display:block;font-size:13px;font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-item small{display:none}
.g-item .new-tag{
  font-size:9px;font-weight:800;background:color-mix(in srgb,var(--star) 24%,transparent);
  color:var(--star);padding:2px 6px;border-radius:20px;flex:0 0 auto;
}
.g-kind{font-size:10px;font-weight:700;color:var(--dim-2);flex:0 0 auto}

.side-foot{border-top:1px solid var(--line);padding:11px 15px}
.viewers{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim-2);font-weight:600}
.viewers b{color:var(--txt);font-weight:800;font-size:14px}

/* ══════════ المسرح ══════════ */
#stageWrap{display:flex;flex-direction:column;min-height:0;min-width:0;gap:10px;position:relative}
#stageBar{
  display:flex;align-items:center;gap:12px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 14px;flex:0 0 auto;
}
.sb-right{display:flex;align-items:center;gap:11px;min-width:0}
.sb-txt{min-width:0}
#stageTitle{font-size:16px;font-weight:800;display:block;letter-spacing:-.2px}
#stageHint{display:block;color:var(--dim-2);font-size:11.5px;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38ch}
.sb-left{display:flex;align-items:center;gap:8px}
.join-badge{
  background:color-mix(in srgb,var(--p2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--p2) 30%,transparent);color:#bcdae4;
  padding:8px 13px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.join-badge b{color:var(--txt);font-weight:800}

#stage{
  flex:1;min-height:0;min-width:0;border-radius:var(--r);overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  background:var(--surf);border:1px solid var(--line);
}
#stage::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(90% 60% at 50% -8%,color-mix(in srgb,var(--acc) 9%,transparent),transparent 65%);
}
/* أبناء المسرح في الصفّ، أمّا الطبقات العائمة فوقه فتبقى مطلقة —
   وإلا سحقتها قاعدةٌ بقوّة المعرّف وظهرت شريطاً في الأسفل */
#stage > *:not(.ko-over){position:relative;z-index:1}

/* شاشة الترحيب / تقديم اللعبة */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;padding:32px;overflow-y:auto;
  animation:fadeUp .35s cubic-bezier(.2,.9,.3,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.w-logo{width:80px;height:80px;border-radius:26px;display:grid;place-items:center;padding:14px;flex:0 0 auto;
  background:color-mix(in srgb,var(--p3) 14%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--p3) 22%,transparent)}
.w-logo svg{width:100%;height:100%}
.welcome h1{font-size:27px;font-weight:800;letter-spacing:-.6px;color:var(--txt)}
.welcome p{color:var(--dim);max-width:520px;line-height:1.8;font-size:14.5px}
.w-steps{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.w-steps div{background:var(--panel);border:1px solid var(--line);padding:10px 15px;
  border-radius:var(--r-md);font-size:12.5px;display:flex;align-items:center;gap:8px;color:var(--dim)}
.w-steps .n{background:color-mix(in srgb,var(--p3) 26%,transparent);color:var(--txt);
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  font-size:11px;font-weight:800;flex:0 0 auto}
.w-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--acc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 24%,transparent);
  color:var(--txt);padding:8px 17px;border-radius:30px;font-size:13px;font-weight:600;
}
.w-tag b{color:var(--star);font-weight:800}

/* ══════════ خمّن الكلمة: لوحُ التصويت على الحرف ══════════
   التصويت نفسه هو المشهد: يرى المشاهد صوته يرفع عمود حرفه، ويرى
   الحرف المنافس يسبقه. فأبرزناه بأعمدةٍ تنمو لا بقائمة أرقام. */
.hg-life{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  font-size:clamp(11px,1.9vh,14px);font-weight:900;color:var(--dim);
}
.hg-life i{font-style:normal;font-family:var(--emoji);font-size:clamp(15px,2.6vh,22px);
  line-height:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}

.hg-vote{
  display:flex;flex-direction:column;gap:clamp(4px,.9vh,8px);
  width:100%;max-width:min(96%,560px);flex:0 1 auto;min-height:0;
}
.hg-v{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:clamp(4px,.8vh,8px) clamp(9px,1.5vh,14px);border-radius:12px;overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line);
  animation:hgIn .22s ease-out;
}
@keyframes hgIn{from{opacity:0;transform:translateY(6px)}}
/* العمود خلف السطر: نسبته من أعلى الأصوات */
.hg-v i{
  position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--w,0%);
  background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 42%,transparent),
             color-mix(in srgb,var(--acc) 14%,transparent));
  transition:inline-size .28s var(--ease);
}
.hg-v b{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  min-width:clamp(26px,4.4vh,40px);height:clamp(26px,4.4vh,40px);border-radius:10px;
  font-size:clamp(15px,2.8vh,26px);font-weight:900;color:#12151d;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
}
.hg-v span{position:relative;margin-inline-start:auto;font-size:clamp(12px,2.2vh,18px);
  font-weight:900;color:var(--star)}
.hg-empty{
  text-align:center;padding:clamp(7px,1.4vh,12px);border-radius:12px;
  font-size:clamp(11px,1.9vh,14px);font-weight:800;color:var(--dim-2);
  background:var(--panel);border:1px dashed var(--line);
}
.hg-used{
  display:flex;align-items:center;flex-wrap:wrap;gap:5px;flex:0 0 auto;
  font-size:clamp(10px,1.7vh,13px);font-weight:800;color:var(--dim-2);
}
.hg-used i{
  font-style:normal;display:grid;place-items:center;
  min-width:clamp(20px,3.2vh,28px);height:clamp(20px,3.2vh,28px);border-radius:8px;
  font-size:clamp(11px,2vh,16px);font-weight:900;
}
.hg-used i.hit{background:color-mix(in srgb,var(--ok) 26%,transparent);color:#d6ffe9;
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.hg-used i.no{background:rgba(255,255,255,.05);color:var(--dim-2);
  border:1px solid var(--line);text-decoration:line-through}

/* ══════════ سباق الكلمات: لوحُ الوصول ══════════
   يرى كلُّ من كتبها سطرَه ووقتَه ونقاطه — فالكتابة تنفع ولو سبقك
   غيرك، وهذا كان أصل العطب: جولةٌ تُقفل على أوّل واصل. */
.rc-list{
  display:flex;flex-direction:column;gap:clamp(4px,.8vh,7px);
  width:100%;max-width:min(96%,600px);flex:0 1 auto;min-height:0;overflow:hidden;
}
.rc-r{
  display:flex;align-items:center;gap:9px;padding:clamp(4px,.8vh,8px) clamp(9px,1.5vh,14px);
  border-radius:12px;background:var(--surf-2);border:1px solid var(--line);
  animation:hgIn .22s ease-out;
}
.rc-r.top{border-color:color-mix(in srgb,var(--star) 46%,transparent);
  background:color-mix(in srgb,var(--star) 11%,var(--surf-2))}
.rc-k{
  display:grid;place-items:center;flex:0 0 auto;
  min-width:clamp(22px,3.6vh,32px);height:clamp(22px,3.6vh,32px);border-radius:9px;
  font-size:clamp(12px,2.2vh,18px);font-weight:900;color:var(--dim-2);
  background:var(--panel);border:1px solid var(--line);
}
.rc-r.top .rc-k{color:#12151d;border:0;background:linear-gradient(150deg,var(--star),#ffe2a6)}
.rc-r .av{width:clamp(22px,3.6vh,32px);height:clamp(22px,3.6vh,32px);
  font-size:clamp(10px,1.8vh,15px)}
.rc-r b{flex:1;min-width:0;font-size:clamp(12px,2.1vh,17px);font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.rc-r i{font-style:normal;font-size:clamp(10px,1.8vh,14px);font-weight:800;color:var(--dim-2)}
.rc-r u{text-decoration:none;font-size:clamp(11px,2vh,16px);font-weight:900;color:var(--star)}

/* ══════════ خمّن الرسمة: تصويتٌ من أربعة ══════════
   يُفتح بعد نصف الوقت إن لم يعرفها أحد — فمن لا يعرف الجواب يقدر
   أن يختار، وأكثرُ الناس كذلك. والأعمدة تُظهر ميل الجمهور حيّاً. */
.dr-poll{display:flex;flex-direction:column;gap:clamp(5px,1vh,9px);width:100%}
.dr-poll-h{font-size:clamp(11px,1.9vh,14.5px);font-weight:800;color:var(--dim);text-align:center}
.dr-poll-h b{color:var(--star)}
.dr-poll-row{display:grid;gap:clamp(5px,1vh,9px);
  grid-template-columns:repeat(auto-fit,minmax(clamp(120px,22vw,190px),1fr))}
.dr-o{
  position:relative;display:flex;align-items:center;gap:8px;overflow:hidden;
  padding:clamp(5px,1vh,10px) clamp(9px,1.4vw,14px);border-radius:12px;
  background:var(--surf-2);border:1px solid var(--line);
}
.dr-o i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:var(--w,0%);
  background:color-mix(in srgb,var(--acc) 30%,transparent);transition:inline-size .3s var(--ease)}
.dr-ok{
  position:relative;display:grid;place-items:center;flex:0 0 auto;
  min-width:clamp(20px,3.2vh,28px);height:clamp(20px,3.2vh,28px);border-radius:8px;
  font-size:clamp(11px,2vh,16px);font-weight:900;color:#12151d;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
}
.dr-o b{position:relative;flex:1;min-width:0;font-size:clamp(12px,2.1vh,17px);font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.dr-o u{position:relative;text-decoration:none;font-size:clamp(11px,1.9vh,15px);
  font-weight:900;color:var(--star)}
.dr-o.right{border-color:color-mix(in srgb,var(--ok) 62%,transparent);
  background:color-mix(in srgb,var(--ok) 18%,var(--surf-2))}
.dr-o.right i{background:color-mix(in srgb,var(--ok) 34%,transparent)}

/* ══════════ بنرات اللاعبين ══════════ */
.pb{
  --pb-acc:var(--p2);
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden;
  transition:border-color .2s,opacity .3s,filter .3s,background .2s;
  animation:pbIn .28s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pbIn{from{opacity:0;transform:translateY(6px)}}
.pb::before{content:'';position:absolute;inset-inline-start:0;inset-block:0;width:2px;
  background:var(--pb-acc);opacity:.6}
.pb-av{
  width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  position:relative;font-size:17px;font-family:var(--emoji);overflow:hidden;
  background:color-mix(in srgb,var(--pb-acc) 24%,var(--surf-2));
}
.pb-av img{width:100%;height:100%;object-fit:cover}
.pb-main{min-width:0;flex:1}
/* صفٌّ لا سطر: الاسم وحده يُقصّ بالنقاط، والشارات والشعار بعده
   على اليسار لا تُبتلع مهما طال الاسم */
.pb-name{display:flex;align-items:center;gap:5px;min-width:0;
  font-size:13px;font-weight:700;line-height:1.35}
.pb-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jc-tx b{display:flex;align-items:center;gap:6px;min-width:0}
.jc-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-meta{font-size:11px;color:var(--dim-2);display:flex;align-items:center;gap:6px;
  line-height:1.4;font-weight:600}
.pb-meta .pts{color:var(--star);font-weight:800}
.pb-tag{flex:0 0 auto;min-width:24px;height:24px;padding:0 7px;border-radius:8px;
  display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--panel-2);font-family:var(--emoji)}
.pb-rank{position:absolute;top:1px;inset-inline-end:3px;font-size:13px;font-family:var(--emoji)}

.pb.act{border-color:color-mix(in srgb,var(--pb-acc) 55%,transparent)}
.pb.picked{border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.pb.picked .pb-tag{background:color-mix(in srgb,var(--ok) 20%,transparent);color:#bfe3d0}
.pb.out{opacity:.34;filter:grayscale(.85)}
.pb.out .pb-name{text-decoration:line-through}
.pb.hot{border-color:color-mix(in srgb,var(--p1) 50%,transparent);
  background:color-mix(in srgb,var(--p1) 11%,transparent)}
.pb.win{border-color:color-mix(in srgb,var(--star) 50%,transparent);
  background:color-mix(in srgb,var(--star) 12%,transparent)}
.pb.red{--pb-acc:var(--p1)} .pb.blue{--pb-acc:var(--p2)}
.pb.gold{--pb-acc:#d3b078} .pb.silver{--pb-acc:#b9c1cf} .pb.bronze{--pb-acc:#bd8b5f}

/* بنر كبير — شاشة الفائز */
.pb.big{padding:16px 26px;gap:16px;border-radius:22px;min-width:280px;max-width:100%}
.pb.big .pb-av{width:62px;height:62px;border-radius:20px;font-size:32px}
.pb.big .pb-name{font-size:24px;font-weight:800;line-height:1.2}
.pb.big .pb-meta{font-size:13px}
.pb.big .pb-rank{font-size:20px;top:6px;inset-inline-end:9px}
.pb.big .pb-tag{min-width:38px;height:38px;font-size:18px;border-radius:12px}

/* بنر مصغّر */
.pb.sm{padding:5px 9px;gap:8px;border-radius:10px}
.pb.sm .pb-av{width:25px;height:25px;border-radius:8px;font-size:13px}
.pb.sm .pb-name{font-size:12px;max-width:110px}
.pb.sm .pb-meta{display:none}
.pb.sm .pb-tag{min-width:21px;height:21px;font-size:11px;padding:0 6px}

.pb-grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:168px;
  overflow:hidden;padding:2px;width:100%;max-width:840px}
.pb-rail{overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:5px;
  flex:1;align-content:flex-start}
.pb-more{font-size:12px;color:var(--dim-2);align-self:center;padding:6px 12px;
  background:var(--panel);border-radius:20px;font-weight:700}

/* ══════════ اللوحة الجانبية ══════════ */
.tabs{display:flex;padding:8px 8px 0;gap:4px}
.tab{
  flex:1;background:none;border:none;color:var(--dim-2);padding:9px 6px;cursor:pointer;
  font-size:12.5px;font-weight:700;border-radius:var(--r-sm);font-family:inherit;
  transition:.16s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.tab:hover{color:var(--dim);background:var(--panel)}
.tab.active{color:var(--txt);background:var(--panel-2)}
.mini{background:var(--panel-3);border-radius:20px;padding:1px 7px;font-size:10.5px;font-weight:800}
.tabpane{display:none;flex:1;min-height:0;flex-direction:column}
.tabpane.active{display:flex}
.board-head{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;
  font-size:12px;color:var(--dim-2);font-weight:700}
.empty{color:var(--dim-2);font-size:13px;text-align:center;padding:32px 14px;line-height:1.9;width:100%}
.empty .emo{display:block;margin:0 auto 10px;opacity:.55}

.test-form{display:flex;gap:7px;padding:10px;border-top:1px solid var(--line)}
.test-form input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);padding:9px 12px;border-radius:var(--r-sm);outline:none;
  font-size:13px;font-family:inherit}
.test-form input:focus{border-color:color-mix(in srgb,var(--p2) 50%,transparent)}

/* ══════════ عناصر داخل الألعاب ══════════ */
.g-wrap{
  flex:1;display:flex;flex-direction:column;padding:20px;gap:16px;min-height:0;position:relative;
  /* التصغير من الأعلى فتبقى رأس اللعبة في مكانها والباقي يقترب.
     وبلا انتقالٍ زمنيّ عن عمد: القياس يجري على الحجم المرسوم، فلو
     كان متحرّكاً بين حجمين لقِسنا حجماً ثالثاً فلا يستقرّ المقياس. */
  transform-origin:top center;
}
/* ضاق المسرح أكثر ممّا يحتمل التصغير ⇒ الجسم يمرّر */
.g-wrap.scrolls > .g-body{overflow-y:auto;overflow-x:hidden;min-height:0}
.g-wrap.scrolls > .g-body::-webkit-scrollbar{width:7px}
.g-wrap.scrolls > .g-body::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--star) 34%,transparent);border-radius:99px}
/* اللعبة تبقى في وسط الشاشة ولا تمتدّ إلى الحافّة */
.g-wrap > *{width:100%;max-width:var(--gw,1180px);margin-inline:auto}
.g-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;flex:0 0 auto}
.g-sub{color:var(--dim);font-size:15px;font-weight:700}
.g-sub b{color:var(--p2);font-weight:900}
/* «safe center»: يتوسّط ما دام يسع، فإذا طال المحتوى عن الصندوق
   عاد إلى الأعلى بدل أن يفيض من الطرفين فيختفي رأسه ولا يُدرَك. */
.g-body{flex:1;display:flex;flex-direction:column;align-items:safe center;
  justify-content:safe center;gap:18px;
  min-height:0;overflow-y:auto;overflow-x:hidden;text-align:center;padding:2px}

.timer{position:relative;height:9px;background:rgba(255,255,255,.08);border-radius:20px;overflow:hidden;
  flex:0 0 auto;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.timer i{position:absolute;inset-block:0;inset-inline-end:0;display:block;border-radius:20px;
  background:linear-gradient(90deg,var(--p3),var(--p2),var(--star),var(--p1));
  background-size:300% 100%;animation:barFlow 3s linear infinite;transition:width .1s linear;
  box-shadow:0 0 16px rgba(255,215,110,.5)}
@keyframes barFlow{to{background-position:300% 0}}

.bigcount{font-size:54px;font-weight:900;letter-spacing:1px;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#fff,var(--p2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bigcount.warn{background:linear-gradient(160deg,#fff,var(--p1));-webkit-background-clip:text;background-clip:text;
  animation:cntWarn .55s ease-in-out infinite}
@keyframes cntWarn{50%{transform:scale(1.14)}}

/* البلاطات */
.tiles{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.tile{
  width:124px;min-height:124px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:.35s cubic-bezier(.2,.9,.3,1);box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12);
}
.tile::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 62%)}
.tile .num{font-size:38px;font-weight:900;line-height:1;
  background:linear-gradient(160deg,#fff,#b7c0e8);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile .cnt{font-size:12px;color:var(--dim-2);font-weight:800;
  background:rgba(0,0,0,.3);padding:2px 10px;border-radius:20px;min-width:34px}
.tile.hasvotes{border-color:rgba(49,225,255,.42);box-shadow:0 0 24px rgba(49,225,255,.2)}
.tile.hasvotes .cnt{background:rgba(49,225,255,.2);color:#bff0ff}
.tile.safe{border-color:var(--ok);
  background:linear-gradient(160deg,rgba(47,227,138,.3),rgba(47,227,138,.07));
  box-shadow:0 0 40px rgba(47,227,138,.35)}
.tile.boom{border-color:var(--bad);
  background:linear-gradient(160deg,rgba(255,77,109,.35),rgba(255,77,109,.08));
  box-shadow:0 0 44px rgba(255,77,109,.45);animation:shakeTile .45s}
@keyframes shakeTile{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.tile.boom .num,.tile.safe .num{opacity:.18}
.tile .fx{position:absolute;inset:0;display:grid;place-items:center;font-size:52px;font-family:var(--emoji);
  animation:emoPop .45s cubic-bezier(.2,1.7,.4,1);filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}

/* البطل / الهيرو */
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .big{font-size:60px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,#fff 20%,var(--star) 70%,var(--p1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(255,215,110,.28))}
.hero .big.warn{background:linear-gradient(160deg,#fff,var(--p1));
  -webkit-background-clip:text;background-clip:text;animation:cntWarn .55s ease-in-out infinite}
.hero .sm{color:var(--dim);font-size:15px;font-weight:700}
.hero .sm b{color:#fff}

/* شاشة الفائز */
.winner{display:flex;flex-direction:column;align-items:center;gap:12px;
  animation:pop .5s cubic-bezier(.2,1.5,.4,1);text-align:center}
@keyframes pop{from{transform:scale(.72);opacity:0}}
.winner .crown{font-size:70px;font-family:var(--emoji);animation:emoFloat 3s ease-in-out infinite;
  filter:drop-shadow(0 10px 26px rgba(255,215,110,.5))}
.winner .wn{font-size:38px;font-weight:900;letter-spacing:-1px;
  background:linear-gradient(100deg,#fff 25%,var(--star));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.winner .wl{color:var(--dim);font-size:14px;font-weight:800}
.winner .pts{display:inline-flex;align-items:center;gap:8px;background:rgba(255,215,110,.16);
  border:1px solid rgba(255,215,110,.4);color:var(--star);padding:8px 20px;border-radius:30px;
  font-size:16px;font-weight:900}

/* الكلمة المخفية */
.word{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;direction:rtl}
.word span{width:52px;height:66px;border-radius:15px;display:grid;place-items:center;font-size:30px;font-weight:900;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:2px solid var(--line);
  transition:.35s;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.word span.rev{background:linear-gradient(160deg,rgba(49,225,255,.28),rgba(169,123,255,.14));
  border-color:var(--p2);color:#fff;box-shadow:0 0 22px rgba(49,225,255,.3);animation:emoPop .4s}

/* حرب الفرق */
.vs{display:flex;width:100%;max-width:780px;height:64px;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14)}
.vs .side{display:grid;place-items:center;font-weight:900;font-size:20px;transition:width .5s cubic-bezier(.2,.9,.3,1);
  min-width:6%;position:relative;font-variant-numeric:tabular-nums}
.vs .red{background:linear-gradient(90deg,#c11742,#cf7f92)}
.vs .blue{background:linear-gradient(90deg,#7fb8c9,#0a86c9);color:#04131b}
.teamcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;width:100%;max-width:780px}
.teamcol{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:13px;min-height:112px}
.teamcol h4{margin-bottom:10px;font-size:14px;font-weight:900;display:flex;align-items:center;gap:8px}
.teamcol.red{border-color:rgba(255,61,113,.36);background:rgba(255,61,113,.06)}
.teamcol.blue{border-color:rgba(49,225,255,.36);background:rgba(49,225,255,.06)}

/* التخمينات */
.guessfeed{display:flex;flex-direction:column;gap:6px;width:100%;max-width:540px;max-height:196px;overflow:hidden}
.gf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 13px;border-radius:12px;
  font-size:13px;font-weight:700;background:rgba(255,255,255,.05);border:1px solid var(--line);
  animation:slidein .25s cubic-bezier(.2,1.2,.4,1)}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}
.gf .hi{font-weight:900;font-family:var(--emoji)}
.gf.low{border-color:rgba(120,160,255,.3);color:#a8c4ff}
.gf.high{border-color:rgba(255,170,90,.3);color:#ffc48f}
.gf.ok{border-color:rgba(47,227,138,.4);background:rgba(47,227,138,.12);color:#a9f5cf}

/* العجلة */
.wheel2d{flex:1;min-height:0;display:grid;place-items:center;width:100%;padding:10px}
.wheel-wrap{
  position:relative;width:min(340px,72vmin);aspect-ratio:1;
  filter:drop-shadow(0 16px 40px rgba(6,8,26,.6));
}
.wheel-spin{
  position:absolute;inset:0;border-radius:50%;
  transform-origin:50% 50%;will-change:transform;
}
.wheel-face{
  position:absolute;inset:0;border-radius:50%;
  border:6px solid color-mix(in srgb,var(--p3) 40%,transparent);
  /* ظلّ داخلي خفيف فقط — الألوان تبقى صريحة لا مغسولة */
  box-shadow:inset 0 0 26px rgba(6,8,26,.3);
}
.wheel-marks{position:absolute;inset:0}
/* كل علامة تدور لزاويتها ثم يُعاد اعتدال محتواها */
.wm{
  position:absolute;inset:0;
  transform:rotate(var(--a));pointer-events:none;
}
.wm-in{
  position:absolute;top:9%;left:50%;
  transform:translateX(-50%) rotate(calc(-1 * var(--a)));
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transform-origin:50% 50%;will-change:transform;
}
.wm .av{width:32px;height:32px;font-size:15px;
  box-shadow:0 0 0 2px rgba(255,255,255,.28)}
/* صاحب الدور: التكبير على الاسم نفسه — لا على الحاوية،
   لأن دورانها العكسي يُضبط بأسلوب مضمّن أثناء اللفّ */
.wm.lit .av{box-shadow:0 0 0 3px var(--star),0 0 20px color-mix(in srgb,var(--star) 60%,transparent)}

.pointer{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:4;
  width:0;height:0;border-inline:12px solid transparent;
  border-top:22px solid var(--star);
  filter:drop-shadow(0 3px 6px rgba(6,8,26,.7));
}
.wheel-spin.stopped ~ .pointer,
.wheel-spin.stopped{}
.hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:23%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--surf-2);
  border:3px solid color-mix(in srgb,var(--p3) 45%,transparent);
  box-shadow:0 6px 20px rgba(6,8,26,.6);
}

/* أزرار الاختيار (تريفيا) */
.opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;max-width:720px}
.opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;text-align:start;
  background:linear-gradient(100deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:2px solid var(--line);transition:.3s;position:relative;overflow:hidden}
.opt .k{width:34px;height:34px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-weight:900;
  font-size:16px;background:rgba(255,255,255,.1);border:1px solid var(--line)}
.opt .t{font-size:15px;font-weight:800;flex:1}
.opt .c{font-size:12px;color:var(--dim-2);font-weight:800;background:rgba(0,0,0,.3);padding:2px 10px;border-radius:20px}
.opt.hasvotes{border-color:rgba(49,225,255,.4)}
.opt.right{border-color:var(--ok);background:linear-gradient(100deg,rgba(47,227,138,.26),rgba(47,227,138,.05));
  box-shadow:0 0 30px rgba(47,227,138,.28)}
.opt.wrong{opacity:.4}
.opt .bar{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(49,225,255,.12);
  transition:width .5s;z-index:-1}

/* البنر السفلي */
.banner{position:absolute;inset-inline:0;bottom:16px;margin:auto;width:fit-content;max-width:92%;
  background:linear-gradient(160deg,rgba(18,19,38,.96),rgba(12,13,26,.96));
  border:1px solid var(--line-2);border-radius:18px;padding:13px 26px;text-align:center;font-weight:700;
  box-shadow:var(--shadow);animation:bnIn .35s cubic-bezier(.2,1.4,.4,1);z-index:6;font-size:14.5px;
  backdrop-filter:blur(14px)}
@keyframes bnIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.banner b{color:var(--star)}
.banner .emo{margin-inline-end:6px}

#toasts{position:fixed;bottom:18px;inset-inline-start:18px;display:flex;flex-direction:column;gap:9px;z-index:99}
.toast{background:linear-gradient(160deg,rgba(20,21,42,.97),rgba(13,14,28,.97));border:1px solid var(--line-2);
  padding:12px 20px;border-radius:15px;font-size:13px;font-weight:700;max-width:340px;line-height:1.6;
  box-shadow:var(--shadow);animation:slidein .28s cubic-bezier(.2,1.2,.4,1);backdrop-filter:blur(12px)}
.toast.err{border-color:rgba(255,77,109,.45);color:#ffb8c4}
.toast.ok{border-color:rgba(47,227,138,.45);color:#a9f5cf}

/* ══════════ طبقة المؤثرات ══════════ */
#fxlayer{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.fx{position:absolute;font-family:var(--emoji);will-change:transform,opacity;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.fx-burst{animation:fxBurst var(--d,1200ms) cubic-bezier(.12,.7,.3,1) forwards}
@keyframes fxBurst{
  0%{transform:translate(-50%,-50%) scale(.25) rotate(0);opacity:0}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(calc(var(--rot)*.15))}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.55) rotate(var(--rot));opacity:0}
}
.fx-rain{top:-70px;animation:fxRain var(--d,3s) linear forwards}
@keyframes fxRain{
  0%{opacity:0;transform:translateY(0) rotate(0)}
  8%{opacity:1}
  100%{opacity:.1;transform:translateY(calc(100vh + 150px)) rotate(var(--rot))}
}
.fx-float{font-weight:900;font-family:'Tajawal',sans-serif;font-size:20px;
  animation:fxFloat 1.4s cubic-bezier(.2,.9,.3,1) forwards;text-shadow:0 3px 12px rgba(0,0,0,.8)}
@keyframes fxFloat{
  0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-16px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-82px) scale(1)}
}
.fx-ring{border-radius:50%;border:3px solid var(--rc,#fff);width:28px;height:28px;
  animation:fxRing .85s cubic-bezier(.1,.7,.3,1) forwards}
@keyframes fxRing{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(11)}
}


/* ══════════ استجابة ══════════ */
@media(max-width:1280px){
  #layout{grid-template-columns:224px minmax(0,1fr) 268px}
  .conn input{width:150px}
}
@media(max-width:1040px){
  #layout{grid-template-columns:minmax(0,1fr) 264px}
  #sidebar{display:none}
  .brand-text span{display:none}
}
@media(max-width:820px){
  #topbar{flex-wrap:wrap;gap:10px}
  #layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  #rail{max-height:230px}
  .tile{width:92px;min-height:92px;border-radius:18px}
  .tile .num{font-size:28px}
  .hero .big{font-size:44px}
  .opts{grid-template-columns:minmax(0,1fr)}
}

/* ══════════════════════════════════════════════════════════════
   شاشةٌ قصيرة (أو صفحةٌ مكبَّرة — وهما عند التخطيط سواء)
   الشريط العلوي ولوحة الشات يقضمان أكثر ممّا يستحقّان، فيبقى
   للمسرح فُتاتٌ تنزل اللعبة تحته. نُضيّقهما بالتدريج ليأخذ
   المسرح ما يستحقّ، وتُكمل ملاءمة اللعبة ما بقي.
   ══════════════════════════════════════════════════════════════ */
@media (max-height:760px){
  #topbar{padding:6px 14px;gap:11px}
  .brand-logo{width:28px;height:28px}
  #layout{--gap:8px}
  #stageWrap{gap:7px}
  .g-wrap{padding:14px;gap:11px}
}
@media (max-height:620px){
  #topbar{padding:4px 12px;gap:8px}
  #topbar .tools .btn{width:34px;height:34px}
  #status{display:none}
  #stageBar{padding:6px 11px}
  #stageHint{display:none}
  .g-wrap{padding:10px;gap:8px}
  .g-how{padding:5px 11px;font-size:12px}
  /* المسرح يأخذ ثلاثة أرباع ما بقي، والشات ربعاً يكفي للمتابعة */
  body.playing #layout{grid-template-rows:minmax(0,3fr) minmax(96px,1fr)}
}
@media (max-height:520px){
  #topbar{padding:3px 10px}
  .brand-text{display:none}
  .g-wrap{padding:7px;gap:6px}
  .g-how{display:none}
  body.playing #layout{grid-template-rows:minmax(0,4fr) minmax(84px,1fr)}
}

/* ══════════ صورة/إيموجي داخل البنر ══════════ */
.pb-av .pb-emo{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--emoji)}
.pb-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ══════════ بنر المطوّر ══════════ */
.pb.owner{
  border-color:transparent;
  background:linear-gradient(100deg,rgba(255,215,110,.2),rgba(169,123,255,.16),rgba(49,225,255,.14));
  background-size:220% 100%;animation:ownerFlow 6s linear infinite;
  box-shadow:0 0 0 1px rgba(255,215,110,.45),0 8px 28px rgba(255,215,110,.22);
}
@keyframes ownerFlow{to{background-position:220% 0}}
.pb.owner::before{background:linear-gradient(180deg,var(--star),var(--p3));opacity:1;width:4px}
.pb.owner .pb-av{box-shadow:0 0 0 2px rgba(255,215,110,.6),0 4px 16px rgba(255,215,110,.4)}
.pb-dev{
  display:inline-flex;align-items:center;gap:4px;margin-inline-start:7px;vertical-align:middle;
  font-size:10px;font-weight:900;padding:2px 8px;border-radius:20px;white-space:nowrap;
  background:linear-gradient(120deg,var(--star),#d99b74);color:#2b1c00;
  box-shadow:0 2px 8px rgba(255,215,110,.45);font-family:'Tajawal',var(--emoji),sans-serif;
}
.pb.sm .pb-dev{font-size:9px;padding:1px 6px;margin-inline-start:5px}
.pb.big .pb-dev{font-size:12px;padding:3px 11px}

/* ══════════ بطاقة إعدادات اللعبة ══════════ */
.cfg-card{
  width:100%;max-width:660px;text-align:start;border-radius:18px;padding:14px 16px;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.cfg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cfg-head b{font-size:14px;font-weight:900;display:flex;align-items:center;gap:7px}
.cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.cfg-f{display:flex;flex-direction:column;gap:5px}
.cfg-f > span{font-size:11.5px;color:var(--dim-2);font-weight:800}
.cfg-f > span i{font-style:normal;opacity:.7}
.cfg-f input,.cfg-f select{
  background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--txt);
  padding:9px 11px;border-radius:11px;outline:none;font-size:13.5px;font-weight:700;width:100%;
  font-family:inherit;transition:.18s;
}
.cfg-f input:focus,.cfg-f select:focus{border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.cfg-f input[type=range]{padding:0;height:32px;accent-color:var(--p2);background:none;border:none}
.cfg-f select option{background:#12131f;color:var(--txt)}

/* ══════════ النافذة المنبثقة ══════════ */
.modal{position:fixed;inset:0;z-index:8000;display:grid;place-items:center;padding:24px}
.modal-back{position:absolute;inset:0;background:rgba(4,4,12,.75);backdrop-filter:blur(8px);animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}}
.modal-box{
  position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;border-radius:24px;padding:26px;
  background:linear-gradient(165deg,rgba(24,25,48,.98),rgba(12,13,26,.98));
  border:1px solid var(--line-2);box-shadow:var(--shadow);
  animation:pop .32s cubic-bezier(.2,1.4,.4,1);
}
.modal-box.wide{max-width:620px}
.modal-x{
  position:absolute;top:14px;inset-inline-end:14px;width:34px;height:34px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);font-size:15px;transition:.18s;
}
.modal-x:hover{background:rgba(255,77,109,.18);border-color:rgba(255,77,109,.4);color:#ffb8c4}
.mo-title{font-size:20px;font-weight:900;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.mo-hint{font-size:12.5px;color:var(--dim-2);line-height:1.8;margin-bottom:12px}
.mo-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.mo-b{width:40px;height:40px;border-radius:12px;font-size:19px;cursor:pointer;font-family:var(--emoji);
  background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.18s}
.mo-b:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)}
.mo-b.on{background:linear-gradient(135deg,var(--star),#d99b74);border-color:transparent;
  box-shadow:0 6px 18px rgba(255,215,110,.4)}
.mo-prev{margin-top:14px}
.mo-plabel{font-size:11.5px;color:var(--dim-2);font-weight:800;margin-bottom:8px}
.mo-sounds{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.mo-s{padding:7px 13px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:800;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt);transition:.18s;
  font-family:'Tajawal',var(--emoji),sans-serif}
.mo-s:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);border-color:var(--line-2)}

/* ══════════ صفحة اللاعب ══════════ */
.pf-hero{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-inline-end:40px}
.pf-av{
  width:76px;height:76px;flex:0 0 auto;border-radius:24px;position:relative;overflow:hidden;
  display:grid;place-items:center;font-size:38px;
  background:linear-gradient(150deg,var(--pb-acc),color-mix(in srgb,var(--pb-acc) 35%,#141428));
  box-shadow:0 8px 26px color-mix(in srgb,var(--pb-acc) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.24);
}
.pf-av .pb-emo{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--emoji)}
.pf-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-id{min-width:0}
.pf-id h2{font-size:23px;font-weight:900;line-height:1.25;overflow-wrap:anywhere}
.pf-at{font-size:12.5px;color:var(--dim-2);font-weight:800;margin-top:2px}
.pf-dev{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:900;padding:4px 12px;border-radius:20px;
  background:linear-gradient(120deg,var(--star),#d99b74);color:#2b1c00;
  box-shadow:0 4px 14px rgba(255,215,110,.4)}
.pf-owner .pf-av{box-shadow:0 0 0 3px rgba(255,215,110,.6),0 10px 30px rgba(255,215,110,.35)}

.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.pf-s{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:15px;
  padding:12px 8px;text-align:center}
.pf-s b{display:block;font-size:21px;font-weight:900;line-height:1.2;
  background:linear-gradient(160deg,#fff,var(--star));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pf-s span{font-size:10.5px;color:var(--dim-2);font-weight:800;display:flex;align-items:center;
  justify-content:center;gap:4px;margin-top:3px}

.pf-best{background:rgba(255,215,110,.1);border:1px solid rgba(255,215,110,.28);border-radius:14px;
  padding:11px 15px;font-size:13px;font-weight:700;margin-bottom:16px}
.pf-best b{color:var(--star)}
.pf-sec{margin-top:20px}
.pf-sec h3{font-size:14px;font-weight:900;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.pf-bars{display:flex;flex-direction:column;gap:9px}
.pf-bar{display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:11px}
.pf-bl{font-size:12.5px;font-weight:800;display:flex;align-items:center;gap:7px;min-width:0}
.pf-bl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-bt{height:9px;border-radius:20px;background:rgba(255,255,255,.07);overflow:hidden}
.pf-bt i{display:block;height:100%;border-radius:20px;transition:width .5s cubic-bezier(.2,.9,.3,1)}
.pf-bv{font-size:12px;font-weight:900;color:var(--star);white-space:nowrap}
.pf-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--dim-2);font-weight:700}

.pb[role=button]{cursor:pointer}
.pb[role=button]:hover{transform:translateY(-2px);border-color:var(--line-2)}
.pb[role=button]:focus-visible{outline:2px solid var(--p2);outline-offset:2px}

@media(max-width:560px){
  .pf-stats{grid-template-columns:repeat(2,1fr)}
  .pf-bar{grid-template-columns:98px minmax(0,1fr) auto;gap:8px}
  .modal{padding:12px}
  .modal-box{padding:20px}
}

/* ══════════════════════════════════════════════════════════
   رصيف وضع التجربة
   ══════════════════════════════════════════════════════════ */
.practice{
  flex:0 0 auto;border-radius:var(--r);padding:11px 14px;
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(165deg,rgba(169,123,255,.14),rgba(49,225,255,.06));
  border:1px solid rgba(169,123,255,.34);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 -8px 34px rgba(169,123,255,.16),var(--shadow-sm);
  animation:fadeUp .3s cubic-bezier(.2,.9,.3,1);
}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pr-me{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pr-me .pb{flex:0 0 auto}
.pr-me .pb .pb-meta{display:none}
.pr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pr-bots{font-size:11.5px;color:var(--dim-2);font-weight:800;white-space:nowrap;
  background:rgba(0,0,0,.28);padding:6px 12px;border-radius:20px;border:1px solid var(--line)}

.pr-state{
  font-size:12px;font-weight:900;padding:6px 13px;border-radius:20px;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);
}
.pr-state.in,.pr-state.ok{background:rgba(47,227,138,.16);border-color:rgba(47,227,138,.4);color:#a9f5cf}
.pr-state.hot{background:rgba(255,61,113,.18);border-color:rgba(255,61,113,.48);color:#ffb3c4;
  animation:pbHot 1s ease-in-out infinite}
.pr-state.out{background:rgba(255,77,109,.12);border-color:rgba(255,77,109,.3);color:#ff9db0}
.pr-state.win{background:rgba(255,215,110,.2);border-color:rgba(255,215,110,.5);color:var(--star)}

.pr-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-keys{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0;align-items:center}
.pr-k{
  min-width:46px;padding:11px 16px;border-radius:14px;cursor:pointer;
  font-family:'Tajawal',var(--emoji),sans-serif;font-size:15px;font-weight:900;color:var(--txt);
  background:linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  border:1px solid var(--line-2);transition:transform .14s,background .14s,box-shadow .14s;
  position:relative;overflow:hidden;
}
.pr-k:hover{transform:translateY(-3px);background:rgba(255,255,255,.2);
  box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pr-k:active,.pr-k.tapped{transform:translateY(0) scale(.94);
  background:linear-gradient(135deg,var(--p2),#4ff0b6);color:#04131b;border-color:transparent}
.pr-k.big{padding:11px 22px;font-size:15.5px}
.pr-k.hot{background:linear-gradient(135deg,#cf7f92,#ff7a45);border-color:transparent;color:#fff;
  box-shadow:0 8px 24px rgba(255,61,113,.36)}
.pr-k.hot:hover{box-shadow:0 12px 30px rgba(255,61,113,.5)}
.pr-hint,.pr-info{font-size:13px;color:var(--dim-2);font-weight:800;padding:9px 4px}
.pr-info{background:rgba(255,255,255,.05);border:1px dashed var(--line-2);
  border-radius:14px;padding:10px 16px}

.pr-form{display:flex;gap:7px;flex:0 0 auto;min-width:0}
.pr-form input{
  width:190px;max-width:100%;background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--txt);
  padding:10px 13px;border-radius:12px;outline:none;font-size:13px;font-family:inherit;
}
.pr-form input:focus{border-color:var(--p3);box-shadow:0 0 0 3px rgba(169,123,255,.18)}

/* البنر السفلي يرتفع فوق الرصيف */
body.practice-on #banner{bottom:auto;top:60%}

@media(max-width:820px){
  .practice{padding:9px 11px;gap:8px}
  .pr-form input{width:100%}
  .pr-row{flex-direction:column;align-items:stretch}
  .pr-form{width:100%}
  .pr-k{padding:10px 14px;font-size:14px;min-width:42px}
  .pr-bots{display:none}
}

/* ══════════════════════════════════════════════════════════
   الأفتارات — قلب الواجهة
   ══════════════════════════════════════════════════════════ */
.av{
  --pb-acc:#7fb8c9;
  position:relative;display:inline-grid;place-items:center;flex:0 0 auto;
  width:42px;height:42px;border-radius:50%;font-size:21px;font-family:var(--emoji);
  background:linear-gradient(150deg,var(--pb-acc),color-mix(in srgb,var(--pb-acc) 26%,#101124));
  box-shadow:0 5px 16px color-mix(in srgb,var(--pb-acc) 42%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .22s cubic-bezier(.2,1.2,.4,1);
}
.av img,.av .av-emo{position:absolute;inset:0;border-radius:50%}
.av img{width:100%;height:100%;object-fit:cover}
.av .av-emo{display:grid;place-items:center;line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.av-ring{
  position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,var(--pb-acc),transparent 38%,transparent 62%,var(--pb-acc));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.5px));
  animation:avSpin 7s linear infinite;opacity:.85;
}
@keyframes avSpin{to{transform:rotate(360deg)}}

.av.xs{width:26px;height:26px;font-size:13px}
.av.xs .av-ring{inset:-2px}
.av.sm{width:32px;height:32px;font-size:16px}
.av.lg{width:56px;height:56px;font-size:28px}
.av.lg .av-ring{inset:-4px}
.av.xl{width:88px;height:88px;font-size:44px}
.av.xl .av-ring{inset:-5px}

/* كومة أفتارات فوق الأبواب والخيارات */
.av-stack{display:inline-flex;align-items:center;direction:ltr;vertical-align:middle}
.av-stack .av{margin-inline-start:-9px;box-shadow:0 0 0 2px rgba(10,11,24,.9),
  0 3px 9px rgba(0,0,0,.5)}
.av-stack .av:first-child{margin-inline-start:0}
.av-stack .av .av-ring{display:none}
.av-more{
  margin-inline-start:-6px;min-width:26px;height:26px;padding:0 7px;border-radius:20px;
  display:grid;place-items:center;font-size:11px;font-weight:900;color:var(--dim);
  background:rgba(12,13,28,.94);box-shadow:0 0 0 2px rgba(10,11,24,.9);
}

/* شارات العلاقة بالمذيع */
.pb-badges{display:inline-flex;gap:3px;margin-inline-start:5px;vertical-align:middle}
.bdg{font-style:normal;font-size:10px;font-family:var(--emoji);line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* ── شعارُ المنحة: «ستريمر» ──
   يمنحه المالك بيده لمن يشاء، فيلزم اسمَه في كل لعبة. مكتوبٌ لا
   مرموزٌ فقط ليُقرأ من بعيدٍ على شاشة البثّ: لونُه يمشي، وبريقٌ
   يعبره، وهالةٌ تنبض حوله فلا تخطئه العين. */
.mark{
  display:inline-flex;align-items:center;gap:.36em;vertical-align:middle;
  margin-inline:0;padding:.14em .6em .14em .46em;border-radius:999px;
  /* بالنسبة إلى الاسم لا برقمٍ ثابت: يكبر حيث يكبر فيبقى مقروءاً */
  font-size:.84em;font-weight:900;line-height:1.5;white-space:nowrap;
  color:#fff;position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,var(--mk,#ff4d8d) 0%,#7b61ff 34%,
                             #21d4fd 58%,var(--mk,#ff4d8d) 100%);
  background-size:280% 100%;
  border:1px solid rgba(255,255,255,.36);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  animation:mkFlow 5s linear infinite,mkGlow 2.4s ease-in-out infinite;
}
.mark.sm{font-size:.76em;gap:.3em}
.mark-i{font-style:normal;font-size:1em;font-family:var(--emoji);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.mark-t{font-weight:900;letter-spacing:.2px}
.mark-sh{
  position:absolute;inset-block:-20%;inline-size:36%;inset-inline-start:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:mkShine 2.8s ease-in-out infinite;
}
@keyframes mkFlow{to{background-position:280% 0}}
@keyframes mkGlow{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.4),0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.4),
      0 0 15px color-mix(in srgb,var(--mk,#ff4d8d) 72%,transparent)}
}
@keyframes mkShine{0%{inset-inline-start:-45%}55%,100%{inset-inline-start:118%}}
/* ── شعار صاحب الموقع ──
   لونٌ لا يتكرّر: ذهبٌ ووردٌ وفيروز يمشي بينها، وهالةٌ ذهبية تنبض،
   وإطارٌ فاتح — فلا يشتبه بشعار «ستريمر» ولا بأيّ شعارٍ يُمنح. */
.mark.mark-own{
  --mk:#ffc94a;
  background:linear-gradient(100deg,#ffc94a 0%,#ff6fae 30%,#7b61ff 55%,
                             #21d4fd 78%,#ffc94a 100%);
  background-size:300% 100%;
  border-color:rgba(255,255,255,.55);
  animation:mkFlow 6s linear infinite,mkOwn 2.2s ease-in-out infinite;
}
@keyframes mkOwn{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.4),0 0 0 rgba(255,201,74,0)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.4),0 0 20px rgba(255,201,74,.85)}
}

/* بطاقة الانضمام أعرض، فالشعار فيها أكبر قليلاً */
.joincard .mark{font-size:.9em}
.adm-mark .mark{font-size:13.5px;margin-inline-end:0}

/* ══════════════════════════════════════════════════════════
   البنر — هويات جاهزة + صورتك
   ══════════════════════════════════════════════════════════ */
.pb-bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.pb > *:not(.pb-bg){position:relative;z-index:1}
.pb-at{font-size:10.5px;color:var(--dim-2);font-weight:800;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.pb.sm .pb-at{display:none}
.pb.big .pb-at{font-size:13px}

/* شفق (الافتراضي) */
:root[data-skin="aurora"] .pb-bg{
  background:linear-gradient(100deg,rgba(169,123,255,.13),rgba(49,225,255,.07) 55%,transparent)}

/* ذهبي */
:root[data-skin="gold"] .pb{border-color:rgba(255,201,74,.42)}
:root[data-skin="gold"] .pb-bg{
  background:linear-gradient(100deg,rgba(255,201,74,.2),rgba(120,80,10,.14) 60%,transparent),
             repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px)}
:root[data-skin="gold"] .pb-name{color:#ffe9b0}

/* نيون */
:root[data-skin="neon"] .pb{border-color:rgba(255,61,182,.4);
  box-shadow:0 0 0 1px rgba(49,225,255,.16),0 6px 22px rgba(255,61,182,.2)}
:root[data-skin="neon"] .pb-bg{
  background:linear-gradient(100deg,rgba(255,61,182,.2),rgba(49,225,255,.14) 70%,transparent),
             radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,.08),transparent 60%)}

/* زجاجي */
:root[data-skin="glass"] .pb{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(14px) saturate(150%)}
:root[data-skin="glass"] .pb-bg{background:linear-gradient(160deg,rgba(255,255,255,.1),transparent 55%)}

/* كربون */
:root[data-skin="carbon"] .pb{border-color:rgba(255,255,255,.13)}
:root[data-skin="carbon"] .pb-bg{
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 5px),
             repeating-linear-gradient(-45deg,rgba(0,0,0,.3) 0 2px,transparent 2px 5px),
             linear-gradient(100deg,#171826,#0e0f1c)}

/* ملكي */
:root[data-skin="royal"] .pb{border-color:rgba(255,201,74,.34)}
:root[data-skin="royal"] .pb-bg{
  background:linear-gradient(100deg,rgba(88,40,170,.42),rgba(30,12,66,.4) 65%,transparent),
             radial-gradient(90% 120% at 100% 0%,rgba(255,201,74,.18),transparent 60%)}

/* غروب */
:root[data-skin="sunset"] .pb{border-color:rgba(255,140,90,.36)}
:root[data-skin="sunset"] .pb-bg{
  background:linear-gradient(100deg,rgba(255,110,80,.26),rgba(255,61,150,.18) 55%,rgba(120,40,120,.12))}

/* صورتك */
:root[data-skin="custom"] .pb-bg{
  background-image:var(--pb-img,none);background-size:cover;background-position:center}
:root[data-skin="custom"] .pb-bg::after{
  content:'';position:absolute;inset:0;background:rgba(8,9,20,var(--pb-dim,.55))}
:root[data-skin="custom"] .pb{border-color:rgba(255,255,255,.2)}

/* ══════════════════════════════════════════════════════════
   بطاقة الانضمام — تطلع لحظة ما ينضم اللاعب
   ══════════════════════════════════════════════════════════ */
#joinfeed{
  position:absolute;top:14px;inset-inline-start:14px;z-index:7;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;max-width:min(72%,420px);
}
.joincard{
  --pb-acc:#7fb8c9;
  position:relative;display:flex;align-items:center;gap:13px;
  padding:9px 18px 9px 11px;border-radius:999px;overflow:hidden;
  background:linear-gradient(100deg,rgba(16,17,36,.97),rgba(10,11,24,.94));
  border:1px solid color-mix(in srgb,var(--pb-acc) 45%,transparent);
  box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--pb-acc) 26%,transparent);
  animation:jcIn .42s cubic-bezier(.2,1.5,.35,1);
  backdrop-filter:blur(14px);
}
.joincard.out{animation:jcOut .38s cubic-bezier(.4,0,.8,.2) forwards}
@keyframes jcIn{from{opacity:0;transform:translateY(22px) scale(.88)}}
@keyframes jcOut{to{opacity:0;transform:translateY(16px) scale(.92)}}
.jc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--pb-acc) 22%,transparent),transparent 62%)}
.joincard > *:not(.jc-bg){position:relative;z-index:1}
.jc-tx{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.jc-tx b{font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-tx span{font-size:11.5px;color:var(--dim-2);font-weight:800}
.jc-tag{
  flex:0 0 auto;font-size:11.5px;font-weight:900;padding:5px 13px;border-radius:20px;white-space:nowrap;
  background:color-mix(in srgb,var(--pb-acc) 26%,transparent);
  border:1px solid color-mix(in srgb,var(--pb-acc) 45%,transparent);color:#fff;
}
.joincard.owner{border-color:rgba(255,215,110,.65);
  box-shadow:0 12px 36px rgba(0,0,0,.6),0 0 32px rgba(255,215,110,.4)}
.joincard.owner .jc-tag{background:linear-gradient(120deg,var(--star),#d99b74);color:#2b1c00;
  border-color:transparent}

@media(max-width:820px){
  #joinfeed{max-width:88%;top:10px;inset-inline-start:10px}
  .joincard{padding:7px 14px 7px 8px;gap:10px}
  .jc-tx b{font-size:13.5px}
}

/* ══════════════════════════════════════════════════════════
   هوية بصرية مستقلة لكل لعبة
   ══════════════════════════════════════════════════════════ */
#stage[data-game]{transition:background .5s}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.9}

/* أفتارات فوق العناصر */
.tile-av{display:flex;justify-content:center;min-height:26px;align-items:center}
.oav{display:flex;align-items:center;flex:0 0 auto}

/* ─────────── 🦑 الحبار — أبواب معدنية وإنذار أحمر ─────────── */
#stage[data-game="squid"]::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,61,113,0.023) 0 2px,transparent 2px 5px),
    radial-gradient(120% 80% at 50% 110%,rgba(255,61,113,0.090),transparent 62%);
}
.tiles.doors{gap:18px}  /* (لم تعد مستخدمة — استُبدلت بالجسر الزجاجي) */
.tiles.doors .tile{
  width:132px;min-height:186px;border-radius:14px 14px 6px 6px;justify-content:space-between;
  padding:16px 8px 12px;
  background:linear-gradient(180deg,#2a1420,#1a0d16 60%,#241019);
  border:2px solid rgba(255,61,113,0.135);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.045),inset 0 -18px 30px rgba(0,0,0,0.225),
             0 14px 32px rgba(0,0,0,0.225);
}
.tiles.doors .tile::before{
  background:linear-gradient(180deg,rgba(255,255,255,0.045),transparent 30%),
             repeating-linear-gradient(90deg,rgba(0,0,0,0.099) 0 1px,transparent 1px 14px)}
.tiles.doors .tile .num{font-size:44px}
.tiles.doors .tile::after{
  content:'';position:absolute;top:50%;inset-inline-end:9px;width:9px;height:9px;border-radius:50%;
  background:rgba(255,61,113,0.270);box-shadow:0 0 10px rgba(255,61,113,0.360)}

/* ─────────── 🌋 الهاوية — منصات معلّقة فوق فراغ ─────────── */
#stage[data-game="abyss"]::after{
  background:
    linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.248) 78%,#000 100%),
    radial-gradient(90% 60% at 50% 100%,rgba(255,159,69,0.099),transparent 60%);
}
.tiles.plats{gap:22px;perspective:900px}
.tiles.plats .tile{
  width:118px;min-height:104px;border-radius:12px;
  background:linear-gradient(180deg,#3a2a17,#231708);
  border:2px solid rgba(255,159,69,0.153);
  transform:rotateX(24deg);transform-style:preserve-3d;
  box-shadow:0 22px 0 -6px rgba(20,12,4,0.405),0 30px 44px rgba(0,0,0,0.315);
}
.tiles.plats .tile.boom{transform:rotateX(24deg) translateY(46px) rotate(9deg);opacity:.35}
.tiles.plats .tile .num{font-size:34px}

/* ─────────── 🥤 الأكواب — طاولة تحت ضوء مسرح ─────────── */
#stage[data-game="cups"]::after{
  background:
    radial-gradient(60% 46% at 50% 22%,rgba(49,225,255,0.090),transparent 66%),
    linear-gradient(180deg,transparent 52%,rgba(60,32,14,0.225) 74%,rgba(34,18,8,0.338) 100%);
}

/* ─────────── 🔐 كاسر الشفرة — طرفية هاكر ─────────── */
#stage[data-game="code"]{background:linear-gradient(165deg,rgba(4,16,10,0.405),rgba(2,8,6,0.427))}
#stage[data-game="code"]::after{
  background:repeating-linear-gradient(0deg,rgba(47,227,138,0.023) 0 1px,transparent 1px 3px),
             radial-gradient(80% 60% at 50% 0%,rgba(47,227,138,0.072),transparent 65%);
}
#stage[data-game="code"] .hero .big{
  font-family:ui-monospace,'Courier New',monospace;letter-spacing:4px;
  background:linear-gradient(160deg,#c9ffe4,#7bb894);
  -webkit-background-clip:text;background-clip:text;color:transparent}
#stage[data-game="code"] .gf{font-family:ui-monospace,'Courier New',monospace;
  background:rgba(47,227,138,0.032);border-color:rgba(47,227,138,0.108)}
#stage[data-game="code"] .w-tag{font-family:ui-monospace,monospace}

/* ─────────── 🎡 الروليت — خلفية هادئة، العجلة هي البطل ─────────── */
#stage[data-game="roulette"]{background:var(--surf)}
#stage[data-game="roulette"]::after{background:none}
#stage[data-game="roulette"] .wheel{border-color:rgba(255,201,74,0.248);
  box-shadow:inset 0 0 70px rgba(0,0,0,0.270),0 0 40px rgba(255,201,74,0.099)}
#stage[data-game="roulette"] .hub{border-color:rgba(255,201,74,0.225)}

/* ─────────── ⚡ سباق الكلمات — خطوط سرعة ─────────── */
#stage[data-game="race"]::after{
  background:repeating-linear-gradient(100deg,rgba(255,215,110,0.032) 0 2px,transparent 2px 22px),
             radial-gradient(70% 50% at 50% 50%,rgba(255,215,110,0.063),transparent 68%);
  animation:raceLines 1.4s linear infinite;
}
@keyframes raceLines{to{background-position:120px 0,0 0}}
#stage[data-game="race"] .hero .big{letter-spacing:-1px;
  text-shadow:0 0 40px rgba(255,215,110,0.225)}

/* ─────────── ⚔️ حرب الفرق — ساحة منقسمة ─────────── */
#stage[data-game="team"]::after{
  background:linear-gradient(100deg,rgba(255,61,113,0.090) 0%,rgba(255,61,113,0.023) 46%,
             rgba(49,225,255,0.023) 54%,rgba(49,225,255,0.090) 100%);
}
#stage[data-game="team"] .vs{height:72px}

/* ─────────── 🧩 خمّن الكلمة — استوديو مسابقات ─────────── */
#stage[data-game="hangman"]::after{
  background:radial-gradient(70% 50% at 50% 12%,rgba(78,205,196,0.090),transparent 66%),
             repeating-linear-gradient(90deg,rgba(255,255,255,0.009) 0 3px,transparent 3px 26px);
}
#stage[data-game="hangman"] .word span{
  border-radius:10px;background:linear-gradient(180deg,#123033,#0a1c1e);
  border-color:rgba(78,205,196,0.153);box-shadow:0 8px 0 -2px rgba(0,0,0,0.225)}

/* ─────────── 💣 القنبلة — إنذار نابض ─────────── */
#stage[data-game="bomb"]::after{
  background:radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(255,77,109,0.135) 100%);
  animation:alertPulse 1.5s ease-in-out infinite;
}
@keyframes alertPulse{50%{opacity:.4}}

/* ─────────── 🧠 تحدي المعلومات — منصّة مسابقة ─────────── */
#stage[data-game="trivia"]::after{
  background:radial-gradient(80% 60% at 50% 0%,rgba(124,199,255,0.090),transparent 64%),
             linear-gradient(180deg,transparent 62%,rgba(12,30,60,0.225) 100%);
}
#stage[data-game="trivia"] .opt{
  background:linear-gradient(100deg,rgba(124,199,255,0.045),rgba(255,255,255,0.009));
  border-radius:14px}
#stage[data-game="trivia"] .opt .k{
  background:linear-gradient(150deg,#2b6ea8,#154063);border-color:rgba(124,199,255,0.180)}

/* ─────────── 🎲 الرقم النادر — شبكة نيون ─────────── */
#stage[data-game="rare"]::after{
  background:
    linear-gradient(rgba(252,165,241,0.032) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(252,165,241,0.032) 1px,transparent 1px) 0 0/34px 34px,
    radial-gradient(70% 60% at 50% 50%,rgba(252,165,241,0.072),transparent 70%);
}

/* ─────────── 🏙️ البرج — عمق ثلاثي الأبعاد ─────────── */
#stage[data-game="tower"]{background:linear-gradient(180deg,rgba(10,14,34,0.414),rgba(4,6,16,0.432))}
#stage[data-game="tower"]::after{
  background:radial-gradient(90% 60% at 50% 6%,rgba(94,234,212,0.090),transparent 62%),
             linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.270) 100%);
}

@media(max-width:820px){
  .tiles.doors .tile{width:88px;min-height:132px;padding:11px 5px 9px}
  .tiles.doors .tile .num{font-size:30px}
  .tiles.plats .tile{width:84px;min-height:78px}
  .tiles.plats .tile .num{font-size:26px}
}

/* ══════════════════════════════════════════════════════════
   🏙️ البرج — منظور ثلاثي الأبعاد حقيقي
   ══════════════════════════════════════════════════════════ */
.tower{
  perspective:1150px;perspective-origin:50% 26%;
  display:flex;flex-direction:column-reverse;align-items:center;gap:30px;
  padding:26px 0 12px;width:100%;transform-style:preserve-3d;
}
.floor{
  position:relative;width:min(430px,74vw);height:22px;
  transform:rotateX(58deg);transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.45,0,.7,1),opacity .85s;
  will-change:transform;
}
.f-slab{
  position:absolute;inset:0;border-radius:9px;
  background:linear-gradient(180deg,#1e4750,#0d2229 70%,#08171c);
  border:2px solid rgba(94,234,212,.34);
  box-shadow:0 16px 0 -3px rgba(5,16,20,.96),
             0 22px 0 -6px rgba(94,234,212,.14),
             0 30px 46px rgba(0,0,0,.72),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* الوجه المواجه للمشاهد — نعيد تدويره ليقف عمودياً */
.f-face{
  position:absolute;inset-inline:0;bottom:2px;
  transform:rotateX(-58deg);transform-origin:bottom center;
  display:flex;align-items:flex-end;justify-content:center;gap:12px;
  pointer-events:none;
}
.f-num{
  font-size:30px;font-weight:900;line-height:1;
  background:linear-gradient(160deg,#fff,#82bfb0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));
}
.f-avs{display:flex;align-items:flex-end}
.f-cnt{
  font-size:11px;font-weight:900;color:#bff6ea;min-width:26px;text-align:center;
  background:rgba(6,20,24,.8);border:1px solid rgba(94,234,212,.28);
  padding:2px 9px;border-radius:20px;
}
.floor.hasvotes .f-slab{
  border-color:rgba(94,234,212,.75);
  box-shadow:0 16px 0 -3px rgba(5,16,20,.96),
             0 22px 0 -6px rgba(94,234,212,.3),
             0 30px 52px rgba(0,0,0,.72),
             0 0 34px rgba(94,234,212,.3),
             inset 0 1px 0 rgba(255,255,255,.2);
}
.floor.hold .f-slab{border-color:var(--ok);box-shadow:0 16px 0 -3px rgba(5,20,14,.96),
  0 30px 46px rgba(0,0,0,.7),0 0 40px rgba(47,227,138,.35)}
.floor.fall{
  transform:rotateX(58deg) translateY(260px) translateZ(-120px) rotate(11deg);
  opacity:0;
}
.floor.fall .f-slab{border-color:var(--bad)}

@media(max-width:820px){
  .tower{gap:22px;perspective:820px}
  .floor{width:88vw;height:18px}
  .f-num{font-size:23px}
  .f-face{gap:8px}
}

/* ══════════════════════════════════════════════════════════
   منتقي هوية البنر
   ══════════════════════════════════════════════════════════ */
.sk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:9px}
.sk{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;border-radius:14px;
  cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--dim);font-family:'Tajawal',sans-serif;font-size:11.5px;font-weight:800;transition:.18s;
}
.sk i{font-style:normal;font-size:22px;font-family:var(--emoji)}
.sk:hover{background:rgba(255,255,255,.11);transform:translateY(-2px);color:var(--txt)}
.sk.on{background:linear-gradient(150deg,rgba(169,123,255,.3),rgba(49,225,255,.16));
  border-color:rgba(169,123,255,.55);color:#fff;box-shadow:0 6px 20px rgba(169,123,255,.28)}
.cfg-f input[type=file]{padding:8px;font-size:12px;cursor:pointer}
.cfg-f input[type=file]::file-selector-button{
  background:rgba(255,255,255,.09);border:1px solid var(--line);color:var(--txt);
  padding:5px 12px;border-radius:9px;cursor:pointer;font-family:inherit;font-weight:800;
  margin-inline-end:9px}

/* شريحة شرط الهدية داخل اللعبة */
.g-mid{flex:1;display:flex;justify-content:center;min-width:0}
.gift-chip{
  font-size:12px;font-weight:800;padding:7px 15px;border-radius:20px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
  background:linear-gradient(100deg,rgba(255,61,113,.2),rgba(255,159,69,.12));
  border:1px solid rgba(255,61,113,.4);color:#ffd4de;
}
.gift-chip b{color:#fff}
@media(max-width:900px){.g-mid{display:none}}

/* إحكام المسرح على الشاشات الصغيرة */
@media(max-width:820px){
  .g-wrap{padding:12px;gap:10px}
  .g-body{gap:12px}
  .w-tag{padding:7px 13px;font-size:12.5px}
  .teamcols{gap:9px}
  .teamcol{padding:9px;min-height:auto}
  .vs{height:56px}
  .tower{padding:16px 0 6px}
}

/* ══════════════════════════════════════════════════════════
   🟩 الجسر الزجاجي — منظور ثلاثي الأبعاد
   ══════════════════════════════════════════════════════════ */
#stage[data-game="squid"]{background:linear-gradient(180deg,rgba(10,6,16,.94),rgba(24,6,18,.96))}
#stage[data-game="squid"]::after{
  background:
    repeating-linear-gradient(0deg,rgba(255,61,113,.045) 0 2px,transparent 2px 6px),
    radial-gradient(90% 60% at 50% 108%,rgba(255,61,113,.26),transparent 62%),
    radial-gradient(70% 50% at 50% -6%,rgba(49,225,255,.14),transparent 60%);
}

.bridge{
  position:relative;width:100%;
  perspective:820px;perspective-origin:50% 18%;
  display:flex;flex-direction:column;align-items:center;
  padding:6px 0 10px;
}

/* خطوات الجسر البعيدة — تعطي إحساس العمق */
.b-depth{
  position:absolute;top:-6px;inset-inline:0;height:96px;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:5px;transform-style:preserve-3d;
}
.b-far{
  display:block;height:9px;border-radius:5px;
  width:calc(52% - var(--d) * 9%);
  background:linear-gradient(90deg,transparent,rgba(190,240,255,.26),transparent);
  border:1px solid rgba(190,240,255,.16);
  opacity:calc(.5 - var(--d) * .13);
  transform:rotateX(60deg);
}

.b-row{
  display:flex;gap:16px;justify-content:center;
  transform:rotateX(50deg);transform-style:preserve-3d;
  margin-top:38px;
}

.pane{
  position:relative;width:128px;height:128px;border-radius:12px;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.4,0,.7,1),opacity .8s;
}
.p-glass{
  position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(150deg,rgba(190,240,255,.24),rgba(90,170,210,.08) 60%,rgba(190,240,255,.16));
  border:2px solid rgba(190,240,255,.5);
  box-shadow:inset 0 0 34px rgba(190,240,255,.24),
             inset 0 2px 0 rgba(255,255,255,.5),
             0 20px 0 -8px rgba(8,20,28,.75),
             0 28px 46px rgba(0,0,0,.66);
}
.p-glass::after{           /* انعكاس ضوء على الزجاج */
  content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.3) 44%,transparent 56%);
}
.pane.hasvotes .p-glass{
  border-color:rgba(255,61,113,.72);
  box-shadow:inset 0 0 40px rgba(255,61,113,.24),
             inset 0 2px 0 rgba(255,255,255,.5),
             0 20px 0 -8px rgba(24,6,14,.8),
             0 28px 52px rgba(0,0,0,.66),
             0 0 34px rgba(255,61,113,.34);
}

/* الوجه المواجه للمشاهد */
.p-face{
  position:absolute;inset-inline:0;bottom:6px;
  transform:rotateX(-50deg);transform-origin:bottom center;
  display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;
}
.p-num{
  font-size:40px;font-weight:900;line-height:1;
  background:linear-gradient(160deg,#fff,#bfeaff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.8));
}
.p-avs{display:flex;align-items:center}
.p-cnt{
  font-size:11px;font-weight:900;color:#dff4ff;min-width:26px;text-align:center;
  background:rgba(6,16,26,.82);border:1px solid rgba(190,240,255,.3);
  padding:2px 10px;border-radius:20px;
}

/* التشقّق ثم التحطّم */
.p-crack{
  position:absolute;inset:0;border-radius:12px;opacity:0;pointer-events:none;
  background:
    linear-gradient(56deg,transparent 47%,rgba(255,255,255,.95) 48%,transparent 50%),
    linear-gradient(-38deg,transparent 44%,rgba(255,255,255,.8) 45%,transparent 47%),
    linear-gradient(104deg,transparent 55%,rgba(255,255,255,.7) 56%,transparent 58%),
    linear-gradient(15deg,transparent 62%,rgba(255,255,255,.6) 63%,transparent 65%);
  transition:opacity .18s;
}
.pane.cracked .p-crack{opacity:1}
.pane.shake{animation:paneShake .42s ease-in-out}
@keyframes paneShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-4px,2px)}
  75%{transform:translate(4px,-2px)}
}
.pane.break{
  transform:translateY(280px) translateZ(-90px) rotate(16deg) scale(.86);
  opacity:0;
}
.pane.break .p-glass{border-color:rgba(255,61,113,.9);
  box-shadow:0 0 44px rgba(255,61,113,.6),inset 0 0 30px rgba(255,61,113,.35)}
.pane.hold .p-glass{
  border-color:rgba(47,227,138,.85);
  box-shadow:inset 0 0 40px rgba(47,227,138,.26),
             inset 0 2px 0 rgba(255,255,255,.5),
             0 20px 0 -8px rgba(6,22,16,.8),
             0 28px 46px rgba(0,0,0,.6),
             0 0 40px rgba(47,227,138,.4);
}

.b-edge{
  margin-top:56px;font-size:12px;font-weight:900;color:var(--dim-2);
  background:rgba(0,0,0,.34);border:1px solid var(--line);padding:6px 16px;border-radius:20px;
}

@media(max-width:820px){
  .bridge{perspective:640px}
  .b-row{gap:9px;margin-top:26px}
  .pane{width:80px;height:80px;border-radius:9px}
  .p-num{font-size:25px}
  .p-cnt{font-size:10px;padding:1px 7px;min-width:20px}
  .b-edge{margin-top:40px}
}

/* ══════════════════════════════════════════════════════════
   تكبير الأسماء + بنر المطوّر الخاص + بطاقة انضمام أضخم
   ══════════════════════════════════════════════════════════ */
.pb-name{font-size:15.5px;font-weight:900;letter-spacing:-.2px}
.pb.sm .pb-name{font-size:13.5px;max-width:140px}
.pb.big .pb-name{font-size:30px}
.pb-at{font-size:11.5px}
.pb-meta{font-size:11.5px}
.pb{padding:9px 12px;gap:11px}
.pb .av{width:46px;height:46px;font-size:23px}
.pb.sm .av{width:30px;height:30px;font-size:15px}

/* بنر المطوّر بصورته الخاصة */
.pb.owner .pb-bg{
  background-image:var(--own-img,none);background-size:cover;background-position:center;
}
.pb.owner .pb-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,8,2,.62),rgba(10,8,2,.4) 55%,rgba(10,8,2,.7));
}
:root .pb.owner:not([style*="--own-img"]) .pb-bg::after{content:none}

/* بطاقة الانضمام — أضخم وأوضح في البث */
#joinfeed{max-width:min(80%,540px);gap:11px}
.joincard{
  gap:16px;padding:12px 24px 12px 14px;border-radius:26px;
  border-width:2px;
  box-shadow:0 18px 46px rgba(0,0,0,.66),0 0 40px color-mix(in srgb,var(--pb-acc) 34%,transparent);
}
.jc-tx b{font-size:22px;line-height:1.2}
.jc-at{font-size:13px !important;font-weight:800}
.jc-dev{
  display:inline-block;margin-top:4px;font-size:11px;font-weight:900;padding:3px 11px;border-radius:20px;
  background:linear-gradient(120deg,var(--star),#d99b74);color:#2b1c00;width:fit-content;
}
.jc-tag{font-size:13px;padding:7px 16px}
/* البنر يُرسم لكل من يلبسه لا للمالك وحده — كانت القاعدة موقوفة
   على .owner، فبنر المشاهد يُضبط متغيّرُه ولا يُرسم أبداً.
   والصور المتحرّكة تتحرّك هنا من نفسها: خلفيّةٌ لا <img>. */
/* خلفيّة البطاقة نفسها شبه معتمة، فلو تركناها غطّت البنر —
   نُخفّفها لمن يلبس بنراً ليكون البنر هو ما يُرى */
.joincard.has-banner,
.joincard.owner{
  background:linear-gradient(100deg,rgba(12,13,28,.34),rgba(8,9,20,.28));
}
.joincard.has-banner .jc-bg,
.joincard.owner .jc-bg{
  background-image:var(--own-img,none);background-size:cover;background-position:center;
}
.joincard.has-banner .jc-bg::after,
.joincard.owner .jc-bg::after{
  content:'';position:absolute;inset:0;
  /* أخفُّ ما يكفي ليُرى البنر، وأثقلُ ما يكفي ليُقرأ الاسم فوقه */
  background:linear-gradient(100deg,rgba(8,7,16,.5),rgba(8,7,16,.14) 55%,rgba(8,7,16,.5));
}
.joincard.has-banner .jc-tx b,
.joincard.owner .jc-tx b{text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}
.joincard.has-banner .jc-tx span,
.joincard.has-banner .jc-tx i{text-shadow:0 2px 8px rgba(0,0,0,.9)}
.joincard:not([style*="--own-img"]) .jc-bg::after{content:none}

@media(max-width:820px){
  #joinfeed{max-width:92%}
  .joincard{gap:11px;padding:9px 16px 9px 9px;border-radius:20px}
  .jc-tx b{font-size:17px}
  .pb.big .pb-name{font-size:23px}
}

/* مسرح ثلاثي الأبعاد */
.stage3d{
  width:100%;flex:1;min-height:260px;max-height:100%;border-radius:16px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 20%,rgba(255,61,113,.1),transparent 70%);
  position:relative;
}
.stage3d canvas{display:block}
@media(max-width:820px){.stage3d{min-height:200px}}

/* الجسر بديل CSS: زوج واحد فقط (يسار/يمين) */
/* ══════════════════════════════════════════════════════════════
   الجسر الزجاجي بالأسئلة — السؤال فوق واضحاً، والإجابتان تحت
   اللوحين تُقرآن في الوضعين (ثلاثيّ الأبعاد وبديله)
   ══════════════════════════════════════════════════════════════ */
.q-card{
  display:flex;align-items:center;justify-content:center;gap:11px;
  width:100%;max-width:760px;margin-inline:auto;
  padding:clamp(9px,1.6vh,15px) clamp(14px,2vw,24px);border-radius:18px;
  text-align:center;line-height:1.45;
  font-size:clamp(15px,2.4vh,23px);font-weight:900;letter-spacing:-.3px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--acc) 20%,var(--surf)), var(--surf));
  border:1px solid color-mix(in srgb,var(--acc) 46%,transparent);
  box-shadow:0 12px 34px rgba(2,4,16,.45),
             inset 0 1px 0 rgba(255,255,255,.09);
  animation:qIn .32s cubic-bezier(.2,1.2,.35,1);
}
@keyframes qIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}

.q-opts{
  display:flex;justify-content:center;align-items:stretch;
  gap:clamp(10px,2vw,26px);flex-wrap:wrap;width:100%;flex:0 0 auto;
  margin-top:-2px;
}
.q-opt{
  display:flex;align-items:center;gap:12px;min-width:clamp(130px,17vw,230px);max-width:330px;
  padding:clamp(8px,1.5vh,14px) clamp(14px,1.8vw,22px);border-radius:999px;
  background:linear-gradient(150deg,rgba(16,38,54,.9),rgba(6,16,26,.82));
  border:2px solid rgba(190,240,255,.4);
  box-shadow:0 10px 26px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.q-opt b{
  flex:0 0 auto;
  width:clamp(28px,4.4vh,38px);height:clamp(28px,4.4vh,38px);
  display:grid;place-items:center;border-radius:50%;
  font-size:clamp(15px,2.4vh,20px);font-weight:900;color:#08131c;
  background:linear-gradient(150deg,#dff4ff,#9fd8f2);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.q-opt span{
  font-size:clamp(15px,2.7vh,24px);font-weight:900;color:#f2fbff;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
/* اللوح المكسور يُطفئ إجابته، والصامد يُضيئها */
.q-opt.bad{
  border-color:color-mix(in srgb,var(--bad) 62%,transparent);
  background:color-mix(in srgb,var(--bad) 20%,rgba(6,16,26,.72));
  opacity:.7;
}
.q-opt.bad b{background:linear-gradient(150deg,#ffc6d2,#e2607f)}
.q-opt.good{
  border-color:rgba(110,230,160,.7);
  background:rgba(24,66,44,.75);
  box-shadow:0 8px 22px rgba(0,0,0,.42),0 0 26px rgba(110,230,160,.3);
}
.q-opt.good b{background:linear-gradient(150deg,#d6ffe6,#6fe0a0)}

/* نصّ الإجابة على اللوح نفسه — أضيق فأصغر خطّاً */
.b-row.pair .p-side{
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media(max-width:820px){
  .q-opt{max-width:180px}
  .b-row.pair .p-side{max-width:92px;font-size:10.5px}
}

.b-row.pair{gap:34px;margin-top:30px}
.b-row.pair .pane{width:150px;height:150px}
.p-side{font-size:12px;font-weight:900;color:#cfefff;background:rgba(6,16,26,.75);
  border:1px solid rgba(190,240,255,.3);padding:2px 12px;border-radius:20px}
@media(max-width:820px){
  .b-row.pair{gap:18px;margin-top:20px}
  .b-row.pair .pane{width:104px;height:104px}
}

/* بديل ثنائي الأبعاد للأكواب */
.cups2d{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px}

/* بديل ثنائي الأبعاد للعجلة */
.wheel2d{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:220px}

/* بديل ثنائي الأبعاد للمنصات */
.plates2d{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px}

/* القنبلة — بديل ثنائي الأبعاد وحرف الجولة */
.bomb2d{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px}
.bomb-letter{
  display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;vertical-align:middle;
  background:linear-gradient(135deg,var(--p1),var(--p3));color:#fff;font-size:25px;font-weight:900;
  box-shadow:0 8px 24px rgba(255,61,113,.45);margin-inline:4px;
}

/* شريط المقصيين المصغّر أسفل لوح اللعبة */
.b-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:8px;flex:0 0 auto}
.fallen{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.28);
  padding:5px 12px;border-radius:20px;max-width:100%}
.fallen:empty{display:none}
.fl-label{font-style:normal;font-size:11px;font-weight:900;color:#ff9db0;white-space:nowrap}
.fl-av{display:inline-flex;filter:grayscale(.85) brightness(.75)}
.fl-av .av-ring{display:none}

/* ══════════════════════════════════════════════════════════
   شاشة الانضمام الموحّدة — كبيرة وواضحة في البث
   ══════════════════════════════════════════════════════════ */
.joinscreen{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;
  width:100%;min-height:0;animation:fadeUp .4s cubic-bezier(.2,.9,.3,1);
}
.js-head{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;flex:0 0 auto}
.js-cmd{display:flex;flex-direction:column;align-items:center;gap:6px}
.js-lead{font-size:14px;font-weight:800;color:var(--dim);display:flex;align-items:center;gap:8px}
.js-word{
  font-size:52px;font-weight:900;line-height:1.05;letter-spacing:-1px;padding:8px 30px;border-radius:20px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 28%,transparent),rgba(255,255,255,.05));
  border:2px dashed color-mix(in srgb,var(--acc) 55%,transparent);
  color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.6);
  animation:jsPulse 2.2s ease-in-out infinite;
}
@keyframes jsPulse{50%{transform:scale(1.03);
  box-shadow:0 0 40px color-mix(in srgb,var(--acc) 34%,transparent)}}
.js-count{
  font-size:76px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;min-width:110px;text-align:center;
  background:linear-gradient(160deg,#fff 20%,var(--star) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(255,215,110,.3));
}
.js-count.warn{background:linear-gradient(160deg,#fff,var(--p1));
  -webkit-background-clip:text;background-clip:text;animation:cntWarn .55s ease-in-out infinite}
.js-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;flex:0 0 auto}
.js-n{font-size:15px;font-weight:800;color:var(--dim);display:flex;align-items:center;gap:8px}
.js-n b{color:#fff;font-size:22px}
.js-gate{font-size:12px;font-weight:900;padding:5px 14px;border-radius:20px;
  background:rgba(255,61,113,.14);border:1px solid rgba(255,61,113,.36);color:#ffb3c4}
.js-gate:empty{display:none}
.js-grid{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;align-content:flex-start;
  width:100%;max-width:900px;overflow-y:auto;padding:2px;min-height:0;flex:1;
}
.js-grid .pb{min-width:190px}
.js-grid .pb .pb-meta:empty{display:none}

@media(max-width:820px){
  .js-word{font-size:34px;padding:6px 20px}
  .js-count{font-size:52px;min-width:80px}
  .js-head{gap:14px}
  .js-grid .pb{min-width:150px}
}

/* شارة شرط المشاركة فوق المسرح */
.gate-badge{
  font-size:12px;font-weight:900;padding:8px 14px;border-radius:var(--r-md);white-space:nowrap;
  background:rgba(255,61,113,.14);border:1px solid rgba(255,61,113,.38);color:#ffb3c4;
  display:flex;align-items:center;gap:7px;
}

/* ══════════════════════════════════════════════════════════
   روليت الطرد — العجلة فوق، وشريط أرقام هادئ تحتها
   ══════════════════════════════════════════════════════════ */
.rt-wrap{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;
  width:100%;flex:1;min-height:0}

/* شريط اللاعبين: بطاقة مرتّبة لكل واحد — رقم · صورة · اسم
   الكثافة تتغيّر مع العدد فلا يحتاج المشاهد إلى تمرير أبداً */
.rt-list{
  --rt-av:34px; --rt-nm:13px; --rt-num:24px; --rt-w:184px; --rt-gap:8px;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;
  gap:var(--rt-gap);padding:10px;min-height:0;overflow:visible;
  border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
}
.rt-list.d2{--rt-av:30px;--rt-nm:12px;--rt-num:21px;--rt-w:150px;--rt-gap:7px}
.rt-list.d3{--rt-av:26px;--rt-nm:11px;--rt-num:19px;--rt-w:122px;--rt-gap:6px;padding:8px}
.rt-list.d4{--rt-av:22px;--rt-nm:10px;--rt-num:17px;--rt-w:100px;--rt-gap:5px;padding:7px}
.rt-chip{
  --pb-acc:var(--p2);
  position:relative;display:flex;align-items:center;gap:calc(var(--rt-gap) + 1px);
  width:var(--rt-w);max-width:100%;padding:7px 11px 7px 8px;border-radius:13px;
  background:var(--surf-2);border:1px solid var(--line);
  transition:background .25s,border-color .25s,opacity .25s,transform .25s;
}
.rt-list.d3 .rt-chip,.rt-list.d4 .rt-chip{padding:5px 7px 5px 5px;border-radius:10px}
.rt-chip .av{
  width:var(--rt-av);height:var(--rt-av);font-size:calc(var(--rt-av) * .47);
  flex:0 0 auto;order:2;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 55%,transparent);
}
.rt-n{
  order:1;flex:0 0 auto;
  width:var(--rt-num);height:var(--rt-num);border-radius:8px;
  display:grid;place-items:center;line-height:1;
  font-size:calc(var(--rt-num) * .52);font-weight:800;color:#15161c;background:var(--pb-acc);
}
.rt-nm{
  flex:1;min-width:0;order:3;
  font-size:var(--rt-nm);font-weight:700;color:var(--txt);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;
}
/* عند الازدحام تختفي الأيقونة الزائدة لا الاسم */
.rt-list.d4 .rt-turn{display:none}

/* صاحب الدور */
.rt-chip.turn{
  background:color-mix(in srgb,var(--star) 15%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 55%,transparent);
  transform:translateY(-2px);
}
.rt-chip.turn .rt-nm{color:#fff;font-weight:800}
.rt-chip.turn .av{box-shadow:0 0 0 2px var(--star)}
.rt-turn{
  order:4;flex:0 0 auto;font-family:var(--emoji);font-size:15px;
  animation:rtBob 1.2s ease-in-out infinite;
}
@keyframes rtBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* المُختار للخروج */
.rt-chip.doomed{
  background:color-mix(in srgb,var(--bad) 16%,var(--surf-2));
  border-color:color-mix(in srgb,var(--bad) 55%,transparent);
}
.rt-chip.doomed .av{filter:grayscale(.8);box-shadow:0 0 0 2px var(--bad)}
.rt-chip.doomed .rt-nm{color:#e8b6c0;text-decoration:line-through}
.rt-chip.doomed::after{
  content:'¹5';order:5;flex:0 0 auto;
  font-size:14px;font-weight:900;color:var(--bad);
}

/* المطوّر */
.rt-chip.own{border-color:color-mix(in srgb,var(--star) 45%,transparent)}

@media(max-width:820px){
  .rt-list{--rt-w:150px;--rt-av:29px;--rt-nm:12px;--rt-num:21px;--rt-gap:6px;padding:7px}
  .rt-list.d3{--rt-w:112px}
  .rt-list.d4{--rt-w:94px}
}

/* ══════════ منتقي الهدايا ══════════ */
.gi{width:30px;height:30px;object-fit:contain;flex:0 0 auto;display:inline-grid;place-items:center}
.gi-emo{font-family:var(--emoji);font-size:22px;line-height:1}
.gi.sm{width:20px;height:20px;font-size:16px;vertical-align:middle}
.gift-pick{
  display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--txt);
  padding:7px 11px;border-radius:11px;font-family:inherit;font-size:13px;font-weight:800;transition:.18s;
}
.gift-pick:hover{border-color:var(--acc);background:rgba(255,255,255,.07)}
.gift-pick span{flex:1;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-pick i{font-style:normal;font-size:11px;color:var(--star);font-weight:900}
.gp-search{
  width:100%;background:rgba(0,0,0,.34);border:1px solid var(--line);color:var(--txt);
  padding:11px 15px;border-radius:12px;outline:none;font-size:14px;font-family:inherit;margin-bottom:14px;
}
.gp-search:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(49,225,255,.16)}
.gp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;
  max-height:52vh;overflow-y:auto;padding:2px}
.gp-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border-radius:14px;
  cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--txt);font-family:inherit;transition:.18s;
}
.gp-item:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);
  border-color:var(--line-2);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.gp-item .gi{width:38px;height:38px;font-size:28px}
.gp-item b{font-size:11.5px;font-weight:800;text-align:center;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.gp-item i{font-style:normal;font-size:10.5px;color:var(--star);font-weight:900}
.gp-item.any{background:linear-gradient(150deg,rgba(169,123,255,.22),rgba(49,225,255,.1));
  border-color:rgba(169,123,255,.45)}

/* ══════════ المسرح ثلاثي الأبعاد يملأ المساحة ══════════ */
.stage3d{flex:1 1 0;min-height:200px;height:auto;align-self:stretch}
.g-body:has(.stage3d){justify-content:flex-start;align-items:stretch;gap:10px;overflow:hidden}
.g-body:has(.stage3d) > .w-tag{align-self:center;flex:0 0 auto}
.g-body:has(.stage3d) > .b-foot,
.g-body:has(.stage3d) > #cupcloud,
.g-body:has(.stage3d) > #bholder{flex:0 0 auto}

/* ══════════ لوحة اللاعبين: أفتارات فقط / مخفية ══════════ */
.rail-avs{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.ra{position:relative;display:inline-flex;cursor:pointer;transition:.2s}
.ra:hover{transform:translateY(-3px)}
.ra i{
  position:absolute;bottom:-3px;inset-inline-end:-4px;min-width:19px;height:19px;padding:0 5px;
  border-radius:20px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:900;
  background:rgba(10,11,24,.94);border:1px solid var(--line-2);color:var(--txt);
  font-family:'Tajawal',var(--emoji),sans-serif;
}
.ra-own{position:absolute;top:-6px;inset-inline-start:-4px;font-size:14px;font-family:var(--emoji);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7))}
.ra.out{opacity:.32;filter:grayscale(.9)}
.ra.picked .av{box-shadow:0 0 0 2px var(--ok),0 4px 14px rgba(47,227,138,.5)}
.ra.hot .av{box-shadow:0 0 0 2px var(--p1),0 0 18px rgba(255,61,113,.6)}
.ra.win .av{box-shadow:0 0 0 2px var(--star),0 0 20px rgba(255,215,110,.6)}

/* المسرح فقط */
body.rail-off #rail{display:none}
body.rail-off #layout{grid-template-columns:minmax(0,1fr)}
@media(max-width:1040px){ body.rail-off #layout{grid-template-columns:minmax(0,1fr)} }

/* علبة هدية محايدة قبل وصول الصورة الحقيقية */
.gi-box{font-family:var(--emoji);opacity:.75;filter:grayscale(.35)}


/* المسرح ثلاثي الأبعاد يأخذ أقصى ارتفاع ممكن */
.g-wrap:has(.stage3d){padding:12px 14px 10px;gap:9px}
.g-body:has(.stage3d) > .b-foot{margin-top:2px;gap:10px}
.g-body:has(.stage3d) .fallen{padding:3px 10px;gap:4px}
.g-body:has(.stage3d) .fallen .av.xs{width:21px;height:21px;font-size:11px}
.g-body:has(.stage3d) .b-edge{padding:4px 12px;font-size:11px}
.g-body:has(.stage3d) > .w-tag{padding:6px 14px;font-size:12.5px}

/* الشريط السفلي يطفو فوق المشهد — الكانفاس يأخذ الارتفاع كاملاً */
.g-body:has(.stage3d){position:relative}
.g-body:has(.stage3d) > .b-foot{
  position:absolute;inset-inline:10px;bottom:8px;z-index:3;margin:0;pointer-events:none;
}
.g-body:has(.stage3d) > .b-foot > *{pointer-events:auto}
.g-body:has(.stage3d) > .w-tag{
  position:absolute;inset-inline:0;top:6px;z-index:3;width:fit-content;margin:0 auto;
  backdrop-filter:blur(10px);
}
/* أرضيةٌ حقيقية للمشهد ثلاثيّ الأبعاد: بلا حدٍّ أدنى ينكمش إلى صفر
   فتبقى لوحته بمقاسها القديم ويظهر المكان فارغاً. وبالحدّ الأدنى
   تتولّى ملاءمةُ المسرح تصغيرَ اللعبة كلّها — فتُرى ولو صغرت */
.g-body:has(.stage3d) > .stage3d{
  flex:1 1 auto;height:100%;
  min-height:clamp(150px,30vh,260px);
}
.g-body:has(.stage3d) > #cupcloud,
.g-body:has(.stage3d) > #bholder{
  position:absolute;inset-inline:0;bottom:8px;z-index:3;justify-content:center
}
.b-edge{backdrop-filter:blur(10px)}
.fallen{backdrop-filter:blur(10px)}

/* 🚦 الضوء الأحمر */
.field2d{width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px}
#stage[data-game="redlight"]::after{
  background:radial-gradient(80% 60% at 50% 100%,rgba(47,227,138,.14),transparent 62%),
             linear-gradient(180deg,rgba(120,140,60,.08),transparent 45%);
}
#stage.red-alert::before{
  background:radial-gradient(120% 90% at 50% 50%,transparent 34%,rgba(255,61,113,.34) 100%);
  animation:alertPulse 1s ease-in-out infinite;
}
#stage.red-alert{box-shadow:var(--shadow),inset 0 0 90px rgba(255,61,113,.22)}

/* ══════════════════════════════════════════════════════════
   بنر المطوّر المرفوع — الصورة تملأ البطاقة والاسم فوقها مباشرة
   ══════════════════════════════════════════════════════════ */
.pb.has-banner{
  border:none;padding:0;overflow:hidden;border-radius:16px;
  background:#0b0b16;
  box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,215,110,.35);
  animation:pbIn .3s cubic-bezier(.2,1.2,.4,1);
}
.pb.has-banner::before{display:none}          /* لا شريط جانبي */
.pb.has-banner .pb-bg{
  inset:0;background-image:var(--own-img);background-size:cover;background-position:center;
  border-radius:inherit;
}
.pb.has-banner .pb-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,6,14,.78) 0%,rgba(6,6,14,.42) 55%,rgba(6,6,14,.7) 100%);
}
/* المحتوى فوق الصورة مباشرة */
.pb.has-banner > *:not(.pb-bg){position:relative;z-index:2}
.pb.has-banner .av,
.pb.has-banner .pb-main,
.pb.has-banner .pb-tag{margin:0}
.pb.has-banner{display:flex;align-items:center;gap:12px;padding:11px 14px}
.pb.has-banner .pb-name{
  font-size:19px;font-weight:900;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.7);
}
.pb.has-banner .pb-at{color:#e6e8ff;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.pb.has-banner .pb-meta{color:#dfe3ff;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.pb.has-banner .av{
  box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 18px rgba(0,0,0,.65);
}
.pb.has-banner .pb-dev{
  background:linear-gradient(120deg,var(--star),#d99b74);color:#2b1c00;
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
.pb.has-banner .pb-tag{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.28);color:#fff}
.pb.big.has-banner{padding:15px 20px;border-radius:22px}
.pb.big.has-banner .pb-name{font-size:30px}
.pb.sm.has-banner{padding:6px 10px;border-radius:12px}
.pb.sm.has-banner .pb-name{font-size:14px}

/* بطاقة الانضمام بالبنر المرفوع — نفس الترتيب */
.joincard.owner[style*="--own-img"]{border-color:rgba(255,215,110,.6)}
.joincard.owner .jc-bg::after{
  background:linear-gradient(100deg,rgba(6,6,14,.74),rgba(6,6,14,.4) 55%,rgba(6,6,14,.7))}
.joincard.owner .jc-tx b{text-shadow:0 2px 10px rgba(0,0,0,.95)}

/* ══════════ إعداد بارز داخل بطاقة اللعبة ══════════ */
.cfg-f.big{
  grid-column:1 / -1;
  background:linear-gradient(100deg,rgba(255,61,113,.14),rgba(255,159,69,.07));
  border:1px solid rgba(255,61,113,.34);border-radius:15px;padding:12px 14px;gap:8px;
}
.cfg-f.big > span{font-size:14px;font-weight:900;color:#ffd4de}
.cfg-f.big em{font-style:normal;font-size:11.5px;color:var(--dim-2);font-weight:700}
.cfg-f.big input,.cfg-f.big select,.cfg-f.big .gift-pick{
  font-size:15px;padding:11px 14px;border-radius:13px}
.cfg-f.big .gift-pick .gi{width:38px;height:38px;font-size:28px}

/* ════════ رأس لوحة نتيجة الجولة ════════ */
.lb-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-weight:800; font-size:14px; color:var(--tx);
  padding:10px 12px; margin-bottom:10px; border-radius:14px;
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(255,77,109,.10));
  border:1px solid var(--line);
}
.lb-head b{ color:var(--acc) }
.lb-head i{
  flex:1 1 100%; font-style:normal; font-weight:600;
  font-size:11.5px; color:var(--tx3); letter-spacing:.2px;
}

/* ════════ معاينة أفتار المطوّر ════════ */
.own-face{
  display:flex; align-items:center; gap:12px; margin-top:10px;
  padding:10px 12px; border-radius:16px;
  background:var(--bg3); border:1px solid var(--line);
}
.own-face .av.lg{ width:60px; height:60px; flex:0 0 60px; font-size:28px }
.own-face > div{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.own-face b{ font-size:13.5px; color:var(--tx) }
.own-face i{ font-style:normal; font-size:11.5px; color:var(--tx3); line-height:1.5 }

/* ══════════════════════════════════════════════════════════
   حرب الفرق — جيشان متقابلان على الحبل
   ══════════════════════════════════════════════════════════ */
.tw-words{display:flex;align-items:center;gap:14px}
.tw-w{
  font-size:38px;font-weight:900;line-height:1;padding:8px 26px;border-radius:18px;
  color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);
  animation:jsPulse 2.2s ease-in-out infinite;
}
.tw-w.red{background:linear-gradient(120deg,rgba(255,61,113,.34),rgba(255,61,113,.07));
  border:2px dashed rgba(255,61,113,.6)}
.tw-w.blue{background:linear-gradient(120deg,rgba(49,225,255,.30),rgba(49,225,255,.06));
  border:2px dashed rgba(49,225,255,.55);animation-delay:1.1s}
.tw-vs{font-size:17px;font-weight:900;color:var(--dim-2);letter-spacing:1px}

.tw-armies{
  display:grid;grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr);
  gap:10px;width:100%;flex:1;min-height:0;align-items:stretch;
}
.tw-army{
  --tw:#cf7f92;
  display:flex;flex-direction:column;gap:8px;min-height:0;padding:12px;
  border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--tw) 34%,transparent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--tw) 13%,transparent),rgba(255,255,255,.02));
}
.tw-army.blue{--tw:#7fb8c9}
.tw-flag{
  display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
  font-size:16px;font-weight:900;color:#fff;
}
.tw-flag b{
  min-width:34px;padding:2px 9px;border-radius:10px;font-size:15px;
  background:color-mix(in srgb,var(--tw) 60%,#000);
}
.tw-men{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-content:flex-start;
  overflow-y:auto;min-height:0;flex:1;padding:2px;
}
.tw-men.win{flex:0 0 auto;margin-top:10px;max-height:120px}
.tw-man{display:inline-flex;animation:fadeUp .35s cubic-bezier(.2,1.3,.4,1)}
.tw-man .av{width:42px;height:42px;font-size:19px}
.tw-man.own .av{box-shadow:0 0 0 2px var(--star)}
.tw-more{
  align-self:center;font-size:13px;font-weight:900;color:var(--dim-2);
  padding:6px 11px;border-radius:12px;background:rgba(255,255,255,.06);
}

/* الحبل بين الجيشين */
.tw-rope{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.tw-rope i{flex:1;width:4px;border-radius:4px;
  background:linear-gradient(180deg,transparent,rgba(255,215,110,.55),transparent)}
.tw-rope span{font-family:var(--emoji);font-size:26px;
  animation:twSway 1.8s ease-in-out infinite}
@keyframes twSway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.tw-armies.fighting .tw-rope span{animation-duration:.5s}

@media(max-width:820px){
  .tw-words{gap:8px}
  .tw-w{font-size:26px;padding:6px 16px}
  .tw-armies{grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:6px}
  .tw-army{padding:8px}
  .tw-man .av{width:34px;height:34px;font-size:16px}
}

/* ══════════════════════════════════════════════════════════════
   🎯 روليت — شاشة الاختيار المستقلّة
   العجلة تختفي، ويظهر صاحب الدور كبيراً وأمامه كل الأرقام
   ══════════════════════════════════════════════════════════════ */
.rt-wrap{position:relative}
.rt-pick{display:none}
.rt-pick.on{
  position:fixed;inset:0;z-index:7200;
  display:flex;flex-direction:column;gap:16px;
  padding:22px clamp(16px, 5vw, 64px) 26px;
  /* أرضيّةٌ متدرّجة لا لوحٌ رماديّ: الشاشة تبقى ثوانيَ أمام آلافٍ
     يشاهدون، فلا تكون خامدة. والتدرّج من ألوان الموقع نفسها. */
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb,var(--star) 16%,transparent), transparent 70%),
    linear-gradient(158deg,
      color-mix(in srgb,var(--p3) 34%,#0a0d24) 0%,
      #0a0d24 44%,
      color-mix(in srgb,var(--bad) 26%,#0a0d24) 100%);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:rtPickIn .34s cubic-bezier(.2,1.2,.35,1);
  isolation:isolate;
}
/* ── شفقٌ يتنفّس ببطء ──
   بقعُ ضوءٍ ملوّنة تزحف زحفاً لا يُلاحَظ إلا كإحساسٍ بالحياة: أسرعُ
   منه يسرق النظر من الأسماء، وهي المقصودة. */
.rt-pick.on::before{
  content:'';position:absolute;inset:-22%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 42% at 20% 22%, color-mix(in srgb,var(--p2)  62%,transparent), transparent 68%),
    radial-gradient(34% 38% at 82% 14%, color-mix(in srgb,var(--star) 38%,transparent), transparent 66%),
    radial-gradient(44% 46% at 62% 92%, color-mix(in srgb,var(--bad)  46%,transparent), transparent 68%),
    radial-gradient(36% 40% at 8%  86%, color-mix(in srgb,#21d4fd     38%,transparent), transparent 66%);
  filter:blur(30px);opacity:.72;
  animation:rpAurora 22s ease-in-out infinite alternate;
}
@keyframes rpAurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(2.6%,-2.2%,0) scale(1.09)}
  100%{transform:translate3d(-2.2%,2.6%,0) scale(1.05)}
}
/* حافّةٌ داكنة تُرجع التركيز إلى الوسط فلا تسبح البطاقات في الضوء */
.rt-pick.on::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(128% 94% at 50% 46%, transparent 42%, rgba(4,6,20,.5) 100%);
}
@keyframes rtPickIn{
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to{opacity:1;transform:none}
}

/* ── الرأس: القاذف + المؤقّت ── */
.rp-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex:0 0 auto;padding:14px 20px;border-radius:var(--r);
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--star) 15%,var(--surf)), var(--surf));
  border:1px solid color-mix(in srgb,var(--star) 45%,transparent);
  box-shadow:0 16px 44px rgba(2,4,16,.45),
             0 0 46px color-mix(in srgb,var(--star) 16%,transparent);
}
.rp-who{
  --pb-acc:var(--p2);position:relative;display:flex;align-items:center;gap:16px;
  min-width:0;flex:1 1 auto;
  padding:10px 16px;border-radius:calc(var(--r) - 4px);overflow:hidden;
}
/* بنر صاحب الدور خلف اسمه — البار كبير فلا يبقى فارغاً */
.rp-bg{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.rp-who.has-banner{
  border:1px solid color-mix(in srgb,var(--star) 40%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.rp-who.has-banner .rp-bg{
  background-image:var(--own-img);background-size:cover;background-position:center;
}
.rp-who.has-banner .rp-bg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  /* الاسم على اليمين في العربية، فنُثقّل الحجاب هناك ليبقى مقروءاً */
  background:linear-gradient(270deg,
    rgba(8,8,18,.88) 0%, rgba(8,8,18,.66) 46%, rgba(8,8,18,.3) 100%);
}
.rp-who.owner.has-banner{border-color:color-mix(in srgb,var(--star) 70%,transparent)}
.rp-who > :not(.rp-bg){position:relative;z-index:1}
.rp-tx span em{font-style:normal;color:#fff;opacity:.92}
.rp-who .av{
  width:96px;height:96px;font-size:42px;flex:0 0 auto;
  box-shadow:0 0 0 4px var(--star),0 12px 34px color-mix(in srgb,var(--star) 40%,transparent);
  animation:rpPulse 1.9s ease-in-out infinite;
}
@keyframes rpPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--star) 55%,transparent),
  0 12px 40px color-mix(in srgb,var(--star) 55%,transparent)}}
.rp-num{
  position:absolute;inset-block-start:-8px;inset-inline-start:-8px;z-index:2;
  min-width:52px;padding:5px 14px;border-radius:15px;text-align:center;
  font-size:30px;font-weight:900;line-height:1.25;color:#140b02;
  background:linear-gradient(150deg,var(--star),#ffd98a);
  box-shadow:0 7px 20px rgba(0,0,0,.5);
}
/* الروليت المخفي: مكان الرقم قناع — انظر showPickScreen في roulettex.js */
.rp-num.rx-mask{
  background:rgba(12,16,36,.82);color:#e9ebf7;font-size:26px;
  border:1px solid rgba(160,170,255,.3);box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.rp-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.rp-tx b{
  font-size:46px;font-weight:900;letter-spacing:-.8px;line-height:1.1;color:#fff;
  max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 4px 22px rgba(0,0,0,.6);
}
.rp-tx i{font-size:14px;font-style:normal;font-weight:800;color:var(--dim-2)}
.rp-tx span{
  margin-top:4px;align-self:flex-start;font-size:12.5px;font-weight:900;
  padding:5px 13px;border-radius:999px;color:var(--star);
  background:color-mix(in srgb,var(--star) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--star) 42%,transparent);
}
/* ── أسفل شاشة الطرد: الوقت في القلب وأدوات المذيع على جانبيه ──
   كان المؤقّت في الأعلى يميناً فيضيع بين الاسم والبنر؛ وهنا يقع
   عليه البصر مباشرةً، ويجد المذيع زرّيه في الشاشة نفسها */
.rp-foot{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,2vw,26px);flex:0 0 auto;margin-top:auto;
  padding-top:clamp(8px,1.4vh,14px);
}
.rp-act{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:clamp(9px,1.5vh,14px) clamp(13px,1.8vw,22px);border-radius:16px;
  font-family:inherit;font-size:clamp(13px,1.9vh,16px);font-weight:900;cursor:pointer;
  color:var(--txt);background:var(--surf-2);
  border:1px solid color-mix(in srgb,var(--star) 34%,transparent);
  box-shadow:0 8px 22px rgba(2,4,16,.4);
  transition:background .18s,border-color .18s,transform .12s;
}
.rp-act:hover{background:color-mix(in srgb,var(--star) 16%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 60%,transparent)}
.rp-act:active{transform:translateY(1px)}
.rp-act.danger{
  border-color:color-mix(in srgb,var(--bad) 46%,transparent);
  color:color-mix(in srgb,var(--bad) 26%,#fff);
}
.rp-act.danger:hover{background:color-mix(in srgb,var(--bad) 20%,var(--surf-2));
  border-color:color-mix(in srgb,var(--bad) 72%,transparent)}
.rp-timer.off{opacity:.55}
.rp-timer.off i{font-size:13px;font-weight:800;color:var(--dim-2)}
@media(max-width:820px){
  .rp-foot{gap:9px}
  .rp-act span{display:none}
  .rp-act{padding:10px 14px}
}

.rp-timer{--p:1;display:flex;flex-direction:column;align-items:center;gap:3px;flex:0 0 auto}
.rp-timer .rt-ring{width:96px;height:96px}
.rp-timer .rt-ring::after{inset:8px}
.rp-timer .rt-ring b{font-size:38px}
.rp-timer i{font-size:11.5px;font-weight:900;color:var(--dim-2);font-style:normal}
.rp-timer.warn .rt-ring{background:conic-gradient(var(--warn) calc(var(--p) * 360deg),
  rgba(255,255,255,.07) 0)}
.rp-timer.warn .rt-ring b{color:var(--warn)}
.rp-timer.crit .rt-ring{background:conic-gradient(var(--bad) calc(var(--p) * 360deg),
  rgba(255,255,255,.07) 0)}
.rp-timer.crit .rt-ring b{color:var(--bad);animation:rpBeat .55s ease-in-out infinite}
@keyframes rpBeat{50%{transform:scale(1.22)}}

/* ── المهمّة والعنوان ── */
.rp-task{
  flex:0 0 auto;text-align:center;font-size:20px;font-weight:900;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bad) 13%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--bad) 34%,transparent);
}
.rp-task b{color:var(--star)}
.rp-task.good{
  background:color-mix(in srgb,var(--good) 13%,var(--surf-2));
  border-color:color-mix(in srgb,var(--good) 36%,transparent);
}
.rp-label{
  flex:0 0 auto;text-align:center;font-size:12.5px;font-weight:900;letter-spacing:2px;
  color:var(--dim-2);
}

/* ── شبكة اللاعبين بأرقامهم — الكل ظاهر بلا تمرير ── */
.rp-grid{
  /* المقاسات تتبع ارتفاع الشاشة لا رقماً ثابتاً: المشاهد يرى البثّ
     في مربّعٍ صغير على جوّاله، فالاسم والرقم هما ما يجب أن يُقرأ. */
  --rp-av:clamp(66px,9.4vh,116px); --rp-nm:clamp(26px,4.4vh,52px);
  --rp-n:clamp(34px,5.8vh,68px);   --rp-w:clamp(204px,27vh,330px);
  flex:1;min-height:0;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:11px;
  padding:14px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);
}
.rp-grid.d2{--rp-av:clamp(58px,8.2vh,100px);--rp-nm:clamp(23px,3.9vh,45px);
  --rp-n:clamp(30px,5.1vh,59px);--rp-w:clamp(180px,24vh,290px);gap:10px}
/* من تسعة عشر فأكثر: نُصغّر أكثر ممّا يوحي به الذوق — أن يرى
   المشاهد العشرين كلَّهم أنفعُ من أن يرى اثني عشر بخطٍّ أكبر */
.rp-grid.d3{--rp-av:clamp(42px,5.6vh,68px);--rp-nm:clamp(17px,2.7vh,27px);
  --rp-n:clamp(22px,3.5vh,35px);--rp-w:clamp(130px,16.5vh,186px);gap:8px;padding:10px}
.rp-grid.d4{--rp-av:clamp(32px,4.2vh,50px);--rp-nm:clamp(14px,2.2vh,21px);
  --rp-n:clamp(18px,2.8vh,27px);--rp-w:clamp(106px,13vh,150px);gap:6px;padding:8px}
.rp-grid.d3 .rp-c{padding:9px 7px 8px;gap:4px}
.rp-grid.d4 .rp-c{padding:7px 5px 6px;gap:3px;border-radius:13px}

.rp-c{
  --pb-acc:var(--p2);
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:var(--rp-w);max-width:100%;padding:12px 9px 10px;border-radius:16px;
  background:var(--surf-2);border:1px solid var(--line);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.rp-c .av{
  width:var(--rp-av);height:var(--rp-av);font-size:calc(var(--rp-av) * .44);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 70%,transparent);
}
.rp-c > b{
  font-size:var(--rp-nm);font-weight:900;max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rp-c u{
  font-size:calc(var(--rp-nm) * .55);font-weight:900;text-decoration:none;color:var(--dim-2);
  padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.06);
}
.rp-n{
  position:absolute;inset-block-start:-9px;inset-inline-start:-7px;
  min-width:calc(var(--rp-n) + 8px);padding:2px 7px;border-radius:10px;text-align:center;
  font-size:var(--rp-n);font-weight:900;line-height:1.25;color:#04040c;
  background:linear-gradient(150deg,var(--pb-acc),#fff);
  box-shadow:0 5px 14px rgba(0,0,0,.45);
}

/* صاحب الدور نفسه لا يُختار */
.rp-c.me{opacity:.42;filter:grayscale(.6)}
/* من استنفد مرّات الإنعاش */
.rp-c.no{opacity:.34;filter:grayscale(.85)}
/* بطاقات الإنعاش خضراء */
.rp-grid .rp-c.rv:not(.no){border-color:color-mix(in srgb,var(--good) 40%,transparent)}
/* الاختيار الواقع */
.rp-c.hit{
  transform:translateY(-4px) scale(1.06);
  border-color:var(--bad);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 55%,transparent),
             0 16px 40px color-mix(in srgb,var(--bad) 34%,transparent);
  animation:rpHit .4s cubic-bezier(.2,1.6,.4,1);
}
.rp-c.rv.hit{
  border-color:var(--good);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 55%,transparent),
             0 16px 40px color-mix(in srgb,var(--good) 34%,transparent);
}
@keyframes rpHit{from{transform:scale(.86)}}
.rp-c.hit::after{
  content:'✖';position:absolute;inset:0;display:grid;place-items:center;
  font-size:calc(var(--rp-av) * .9);font-family:var(--emoji);color:var(--bad);
  text-shadow:0 3px 14px rgba(0,0,0,.8);pointer-events:none;
}
.rp-c.rv.hit::after{content:'❤';color:var(--good)}

@media(max-width:899px){
  .rp-head{flex-direction:column;gap:10px;padding:12px}
  .rp-who .av{width:74px;height:74px;font-size:32px}
  .rp-tx b{font-size:34px;max-width:70vw}
  .rp-timer .rt-ring{width:74px;height:74px}
  .rp-timer .rt-ring b{font-size:29px}
  .rp-task{font-size:16px;padding:9px 14px}
}

/* الشريحة الخارجة تبقى باهتة بعلامة */
.rt-chip.gone{opacity:.3;filter:grayscale(1)}

/* ══════════════════════════════════════════════════════════
   وضع العرض — أثناء اللعب تنزوي الأدوات ويملأ المسرح الشاشة
   المشاهد يرى اللعبة فقط، والمذيع يبقى متحكماً
   ══════════════════════════════════════════════════════════ */

/* إحصاءات داخل شريط المسرح — يراها المشاهد */
.sb-mid{display:flex;align-items:center;gap:8px;margin-inline:auto}
.sb-stat{
  display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:12.5px;font-weight:800;color:var(--dim);
}
.sb-stat b{color:#fff;font-size:17px;font-variant-numeric:tabular-nums}

/* ── أثناء اللعب في وضع العرض ── */
body.show-mode.playing #layout{
  grid-template-columns:minmax(0,1fr);
  padding:10px;gap:10px;
}
body.show-mode.playing #rail{display:none}

/* الشريط العلوي ينكمش لشريط رفيع */
body.show-mode.playing #topbar{
  padding:6px 14px;gap:12px;
  background:linear-gradient(180deg,rgba(10,10,22,.82),rgba(10,10,22,.3));
}
body.show-mode.playing .brand-logo{width:32px;height:32px;border-radius:11px;padding:5px}
body.show-mode.playing .brand-text b{font-size:15px}
body.show-mode.playing .brand-text span{display:none}
body.show-mode.playing .conn{opacity:.32;transition:opacity .25s}
body.show-mode.playing .conn:hover,
body.show-mode.playing .conn:focus-within{opacity:1}
body.show-mode.playing .conn input{width:130px;padding:7px 9px}
body.show-mode.playing #btnConnect,
body.show-mode.playing #btnSim{padding:7px 12px;font-size:12px}

/* المسرح يكبر وتكبر خطوطه */
body.show-mode.playing #stageBar{padding:9px 14px}
body.show-mode.playing #stageHint{display:none}
body.show-mode.playing #stageTitle{font-size:19px}
body.show-mode.playing #stage{
  border-radius:calc(var(--r) + 4px);
  box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent);
}

/* عناصر اللعبة تكبر ليقرأها المشاهد من الجوال */
body.show-mode.playing .js-word{font-size:64px;padding:10px 38px}
body.show-mode.playing .js-count{font-size:92px;min-width:132px}
body.show-mode.playing .js-lead{font-size:16px}
body.show-mode.playing .js-n{font-size:17px}
body.show-mode.playing .js-n b{font-size:26px}
body.show-mode.playing .w-tag{font-size:16px;padding:11px 22px}
body.show-mode.playing .hero .big{font-size:74px}
body.show-mode.playing .banner{font-size:19px}

/* الحد الأقصى لعرض المسرح — يمنع التمدّد المفرط على الشاشات العريضة */
body.show-mode.playing #stageWrap{max-width:1500px;width:100%;margin-inline:auto}

@media(max-width:820px){
  .sb-mid{order:3;flex:1 1 100%;justify-content:center;margin:0}
  body.show-mode.playing .js-word{font-size:40px;padding:7px 22px}
  body.show-mode.playing .js-count{font-size:60px;min-width:92px}
  body.show-mode.playing .hero .big{font-size:52px}
}

/* ══════════════════════════════════════════════════════════
   منع التمدّد الأفقي — هالة الإيموجي زخرفية ولا يجوز
   أن تزيد عرض الصفحة على الجوال
   ══════════════════════════════════════════════════════════ */
.orb{overflow:hidden}
.orb .emo::after{inset:-14%}

/* أي حاوية تحمل إيموجي داخل صف — تُقصّ ولا تمدّ الصفحة */
#stageBar,#topbar,.side-head,.sb-right,.sb-left,.sb-mid,
.js-head,.js-meta,.tabs,.board-head{min-width:0}
#stageBar{overflow:hidden}
#stageWrap,#layout{overflow-x:clip}

/* ══════════ الجوال: المسرح يأخذ الشاشة فعلاً ══════════ */
@media(max-width:640px){
  body.show-mode.playing #topbar{
    padding:4px 10px;gap:8px;
  }
  body.show-mode.playing .brand-text,
  body.show-mode.playing .status span,
  body.show-mode.playing #btnSim,
  body.show-mode.playing .side-foot{display:none}
  body.show-mode.playing .brand-logo{width:26px;height:26px;border-radius:9px;padding:4px}
  body.show-mode.playing .conn{gap:5px}
  body.show-mode.playing .conn input{width:96px;font-size:12px;padding:6px 7px}
  body.show-mode.playing .tools .btn-icon{padding:6px 8px;font-size:14px}
  body.show-mode.playing #layout{padding:6px;gap:6px}
  body.show-mode.playing #stageWrap{gap:6px}
  body.show-mode.playing #stageBar{padding:6px 9px;gap:8px}
  body.show-mode.playing #stageIcon{display:none}
  body.show-mode.playing #stageTitle{font-size:14px}
  body.show-mode.playing .sb-stat{padding:5px 9px;font-size:11px}
  body.show-mode.playing .sb-stat b{font-size:14px}
  body.show-mode.playing #stageBar .btn{padding:7px 12px;font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════
   الصفحة الرئيسية — معرض هادئ
   ══════════════════════════════════════════════════════════ */
.home{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:18px;
  padding:26px 28px;overflow-y:auto;
  animation:fadeUp .35s cubic-bezier(.2,.9,.3,1);
}

/* الترويسة: نصّ لا صندوق */

/* مرشّحات: أقراص نظيفة */
.home-filters{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto}
.hf{
  display:flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:600;
  color:var(--dim);background:transparent;border:1px solid var(--line);transition:.16s;
}
.hf:hover{background:var(--panel);color:var(--txt)}
.hf.on{color:var(--txt);background:var(--panel-2);border-color:var(--line-2)}

/* الشبكة */
.home-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(216px,100%),1fr));
  grid-auto-rows:min-content;align-content:start;
  gap:11px;flex:0 0 auto;
}
.gcard{
  --acc:var(--p3);
  position:relative;overflow:hidden;cursor:pointer;text-align:start;
  display:flex;flex-direction:column;gap:5px;padding:15px 15px 13px;
  border-radius:var(--r);color:var(--txt);font-family:inherit;
  background:var(--surf);border:1px solid var(--line);
  transition:border-color .2s,background .2s,transform .2s;
}
.gcard:hover{
  transform:translateY(-2px);
  background:var(--surf-2);
  border-color:color-mix(in srgb,var(--acc) 40%,transparent);
}
.gcard:hover .gc-orb{transform:scale(1.06)}
.gcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.gc-glow{
  position:absolute;inset:0 0 auto;height:64px;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent);
}
.gc-orb{
  width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 14%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
  transition:transform .22s cubic-bezier(.2,1.3,.4,1);
}
.gc-orb .emo{font-size:26px}
/* الأيقونةُ والعنوانُ صفٌّ واحد: كانا سطرين فينفصلان ويضيع الارتفاع */
.gc-head{display:flex;align-items:center;gap:11px;min-width:0}
.gc-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.gc-b{font-size:15px;font-weight:800;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-d{
  font-size:12px;color:var(--dim);line-height:1.55;flex:1;
  /* ثلاثةٌ لا سطران: أكثرُ الأوصاف ثلاثةُ أسطرٍ فكان يُقطع في نصفه
     فلا يُعرف ما اللعبة — والزيادةُ نحو عشرين بكسلاً في البطاقة */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.gc-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.gc-kind,.gc-3d,.gc-newi{
  font-style:normal;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;
}
.gc-kind{
  align-self:flex-start;white-space:nowrap;
  background:color-mix(in srgb,var(--acc) 15%,transparent);
  color:color-mix(in srgb,var(--acc) 55%,#ffffff);
  border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
}
.gc-3d{background:color-mix(in srgb,var(--p2) 14%,transparent);color:#a8cbd6;letter-spacing:.4px}
.gc-newi{background:color-mix(in srgb,var(--star) 20%,transparent);color:var(--star)}
.gc-go{
  font-style:normal;margin-inline-start:auto;display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--dim-2);
  opacity:0;transform:translateX(5px);transition:.18s;
}
.gcard:hover .gc-go{opacity:1;transform:none;color:var(--txt)}
.gc-new{
  position:absolute;top:11px;inset-inline-start:11px;z-index:2;
  font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;
  background:color-mix(in srgb,var(--star) 22%,transparent);color:var(--star);
}

/* ══════════ بحث القائمة الجانبية ══════════ */
.side-head{gap:8px}
.side-head h3{flex:1}
.side-search{
  display:flex;align-items:center;gap:8px;margin:9px 9px 0;padding:0 11px;
  border-radius:var(--r-md);background:rgba(0,0,0,.3);border:1px solid var(--line);
  transition:.18s;
}
.side-search:focus-within{border-color:var(--p2);box-shadow:0 0 0 3px rgba(49,225,255,.14)}
.ss-i{font-family:var(--emoji);font-size:13px;opacity:.6}
.side-search input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-size:13px;font-family:inherit;padding:9px 0;
}
.g-item{padding-inline-end:14px}
.g-kind{
  position:absolute;bottom:7px;inset-inline-end:9px;
  font-size:9.5px;font-weight:900;color:var(--dim-2);
  padding:2px 7px;border-radius:20px;background:rgba(255,255,255,.06);
}
.g-item.hidden{display:none}

/* ══════════ شاشة تقديم اللعبة ══════════ */
.gintro{justify-content:flex-start;padding-top:26px}
.gi-head{display:flex;align-items:center;gap:18px;text-align:start;flex-wrap:wrap;justify-content:center}
.gi-tx{min-width:0}
.gi-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.gi-tx h1{font-size:32px}
.gi-tx p{max-width:520px;font-size:14px;margin-top:3px}
.gi-join{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:13px 22px;border-radius:var(--r);
  background:linear-gradient(120deg,rgba(49,225,255,.14),rgba(255,255,255,.03));
  border:1px dashed rgba(49,225,255,.42);
}
.gi-join > div{display:flex;flex-direction:column;gap:2px;text-align:start}
.gi-join small{font-size:11.5px;color:var(--dim-2);font-weight:700}
.gi-join b{font-size:28px;font-weight:900;color:#fff;line-height:1.05;letter-spacing:-.5px}
.gi-gate{
  font-size:11.5px;font-weight:900;padding:5px 13px;border-radius:20px;
  background:rgba(255,61,113,.14);border:1px solid rgba(255,61,113,.36);color:#ffb3c4;
}
.gi-gate:empty{display:none}

/* ══════════════════════════════════════════════════════════════
   الجوّال — الصفحة تُمرَّر كأيّ صفحة ويب
   لوحة المذيع مبنيّة كتطبيقٍ ثابت الارتفاع لا يُمرَّر: مناسبٌ
   لحاسوبٍ يبثّ، وحابسٌ لزائر الجوال — يجد نفسه أمام صندوقٍ
   صغيرٍ في وسط الشاشة، وأيّ سحبةٍ خارجه لا تُحرّك شيئاً.
   فنفكّ القفل على الشاشات الصغيرة ما لم تكن لعبةٌ شغّالة،
   وتبقى اللعبة نفسها في إطارها الثابت كما هي.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  html{overflow-x:hidden}
  html,body:not(.playing){height:auto}
  /* الجسم يكبر بمحتواه، والتمرير للمستند نفسه — فأيّ سحبةٍ
     على أيّ موضع من الشاشة تُحرّك الصفحة، لا صندوقاً بداخلها */
  body:not(.playing){
    overflow:visible;
    min-height:100dvh;
    -webkit-overflow-scrolling:touch;
  }
  body:not(.playing) #layout,
  body:not(.playing) #stageWrap{min-height:0;height:auto}
  /* المسرح والمعرض يكبران بمحتواهما بدل أن يقصّاه */
  body:not(.playing) #stage{overflow:visible;flex:0 0 auto}
  body:not(.playing) .home{overflow:visible;flex:0 0 auto;min-height:0}
  /* الشريط العلوي يبقى في الأعلى ولا يأكل نصف الشاشة */
  body:not(.playing) #topbar{position:sticky;top:0}
}

@media(max-width:820px){
  .home{padding:14px}
  .home-grid{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:9px}
  .gc-orb{width:52px;height:52px;border-radius:17px}
  .gc-b{font-size:14px}
  .gi-tx h1{font-size:24px}
  .gi-join b{font-size:22px}
}

/* ══════════════════════════════════════════════════════════
   الألعاب الجديدة — سباق الصحراء · الكنز · الرماية · حجر ورقة مقص
   ══════════════════════════════════════════════════════════ */

/* ── سباق الصحراء ── */
.dash-word{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  flex:0 0 auto;padding:10px 0 2px;
}
.dw-lead{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--dim)}
.dw-word{
  font-size:46px;font-weight:900;line-height:1.05;letter-spacing:-1px;padding:6px 28px;border-radius:18px;
  color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);
  background:linear-gradient(120deg,rgba(255,177,77,.32),rgba(255,255,255,.05));
  border:2px dashed rgba(255,177,77,.6);
  animation:jsPulse 1.6s ease-in-out infinite;
}
body.show-mode.playing .dw-word{font-size:58px}
.dash2d{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;justify-content:center;
  width:100%;padding:12px;overflow-y:auto}
.dl{--pb-acc:#d9ae74}
.dl-track{
  position:relative;height:38px;border-radius:20px;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,177,77,.12));
  border:1px solid var(--line);
}
.dl-track i{position:absolute;top:50%;transform:translate(50%,-50%);transition:inset-inline-start .3s}

/* ── صناديق الكنز ── */
.chest2d{flex:1;min-height:0;display:grid;place-items:center;width:100%;padding:14px}
.ch-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.ch{
  position:relative;width:104px;height:104px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(165deg,#6b4426,#41291444);
  border:2px solid rgba(255,215,110,.42);transition:.3s;
}
.ch-lid{position:absolute;inset:0 0 62% 0;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#7d5030,#5a3a20);transition:transform .45s cubic-bezier(.2,1.4,.4,1);
  transform-origin:top center}
.ch.open .ch-lid{transform:rotateX(-115deg)}
.ch-n{position:relative;z-index:2;font-size:30px;font-weight:900;color:#e3c07f;
  text-shadow:0 3px 10px rgba(0,0,0,.7)}
.ch.open .ch-n{opacity:.25}
.ch-in{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--emoji);
  font-size:44px;opacity:0;transition:.3s .2s}
.ch.open .ch-in{opacity:1}
.ch.trap{border-color:#cf7f92;box-shadow:0 0 26px rgba(255,61,113,.45)}
.ch.gold{border-color:#e3c07f;box-shadow:0 0 26px rgba(255,215,110,.5)}
.ch-av{position:absolute;top:-26px;inset-inline-start:50%;transform:translateX(-50%)}

/* ── الرماية ── */
.archer2d{flex:1;min-height:0;display:grid;place-items:center;width:100%}
.ar-rings{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;flex:0 0 auto;padding:10px 4px 2px;
}
.ar-r{
  --rc:#7bb894;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:88px;padding:9px 13px;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid var(--line);transition:.2s;
}
.ar-r.r1{--rc:#e3c07f}.ar-r.r2{--rc:#cf7f92}.ar-r.r3{--rc:#7fb8c9}
.ar-r.r4{--rc:#7bb894}.ar-r.r5{--rc:#c9ccdd}
.ar-r.hot{border-color:var(--rc);background:color-mix(in srgb,var(--rc) 14%,transparent)}
.ar-n{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;font-weight:900;color:#0d0d16;background:var(--rc);
}
.ar-t{font-size:12.5px;font-weight:900;color:#fff}
.ar-p{font-size:11px;font-weight:800;color:var(--star)}
.ar-c{font-size:10px;font-weight:700;color:var(--dim-2)}
.ar-b{
  position:absolute;top:-7px;inset-inline-end:-5px;min-width:20px;padding:1px 6px;
  border-radius:20px;font-size:11px;font-weight:900;color:#0d0d16;background:var(--rc);
}
.ar-b:empty{display:none}

/* ── حجر ورقة مقص ── */
.rps2d{flex:1;min-height:0;display:grid;place-items:center;width:100%;padding:12px}
.rp-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.rp{
  position:relative;width:132px;padding:18px 12px 14px;border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:2px solid var(--line);transition:.3s;
}
.rp-e{font-family:var(--emoji);font-size:46px;line-height:1}
.rp b{font-size:14px;font-weight:900}
.rp.win{border-color:var(--star);box-shadow:0 0 30px rgba(255,215,110,.45);transform:scale(1.06)}
.rp.lose{opacity:.35;filter:grayscale(1);transform:translateY(12px) scale(.94)}
.rp-av{min-height:26px}
.rps-hand{
  display:flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;
  font-size:19px;font-weight:900;padding:9px 0 2px;color:#fff;
}
.rps-hand b{color:var(--star)}
body.show-mode.playing .rps-hand{font-size:24px}

@media(max-width:640px){
  .dw-word{font-size:32px;padding:5px 18px}
  .ch{width:80px;height:80px}
  .ch-n{font-size:24px}
  .ar-r{min-width:70px;padding:7px 9px}
  .rp{width:104px;padding:13px 9px 11px}
  .rp-e{font-size:36px}
}

/* رقم اللاعب على بطاقته */
.pb-num{
  position:absolute;top:7px;inset-inline-start:7px;z-index:2;
  min-width:20px;height:20px;padding:0 6px;border-radius:7px;
  display:grid;place-items:center;line-height:1;
  font-size:11.5px;font-weight:900;color:#0d0d16;
  background:linear-gradient(150deg,var(--pb-acc),color-mix(in srgb,var(--pb-acc) 50%,#fff));
  box-shadow:0 2px 7px rgba(0,0,0,.4);
}
.pb.sm .pb-num{min-width:17px;height:17px;font-size:10px;top:5px;inset-inline-start:5px}

/* ══════════════════════════════════════════════════════════
   شرط المشاركة قبل كل لعبة
   ══════════════════════════════════════════════════════════ */
.gate-card{
  width:100%;max-width:660px;padding:13px 15px;border-radius:var(--r);
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.gc-h{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:900;margin-bottom:9px}
.gc-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:7px}
.gc-o{
  display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:start;
  padding:10px 13px;border-radius:var(--r-md);font-family:inherit;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt);transition:.18s;
}
.gc-o:hover{background:rgba(255,255,255,.09)}
.gc-o b{font-size:13px;font-weight:900}
.gc-o i{font-style:normal;font-size:10.5px;color:var(--dim-2);line-height:1.4}
.gc-o.on{
  border-color:color-mix(in srgb,var(--p1) 60%,transparent);
  background:linear-gradient(120deg,color-mix(in srgb,var(--p1) 26%,transparent),rgba(255,255,255,.04));
}
.gc-o.on i{color:var(--dim)}

/* ══════════════════════════════════════════════════════════
   حجر ورقة مقص — مبارزة ثنائية
   ══════════════════════════════════════════════════════════ */
.duel{
  position:relative;flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,44px);
  padding:14px;
}
.du-side{
  --pb-acc:#8f86bd;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:16px 18px;border-radius:var(--r);min-width:0;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:2px solid var(--line);transition:.35s cubic-bezier(.2,1.2,.4,1);
}
.du-side.win{
  border-color:var(--star);box-shadow:0 0 34px rgba(255,215,110,.4);transform:scale(1.05);
}
.du-side.lose{opacity:.45;filter:grayscale(.8);transform:scale(.95)}
.du-av{position:relative}
.du-av .av{width:104px;height:104px;font-size:48px;box-shadow:0 0 0 3px var(--pb-acc)}
.du-own{
  position:absolute;top:-6px;inset-inline-end:-4px;font-family:var(--emoji);font-size:20px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.du-nm{font-size:19px;font-weight:900;letter-spacing:-.3px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.du-at{font-size:11.5px;font-weight:700;color:var(--dim-2)}
.du-hand{
  font-family:var(--emoji);font-size:52px;line-height:1;margin-top:4px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55));transition:.25s;
}
.du-hand.ready{opacity:.85}
.du-hand.shown{animation:duPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes duPop{from{transform:scale(.3) rotate(-25deg);opacity:0}}
.du-dots{display:flex;gap:5px;margin-top:3px}
.du-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14)}
.du-dots i.on{background:var(--star);box-shadow:0 0 10px var(--star)}
.du-vs{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.du-vs span{font-size:13px;font-weight:900;color:var(--dim-2);letter-spacing:1px}

/* بطاقة الخروج */
.du-out{
  position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;
  background:radial-gradient(60% 60% at 50% 45%,rgba(255,61,113,.26),rgba(4,4,12,.9) 72%);
  backdrop-filter:blur(9px);border-radius:var(--r);
}
.du-out.on{display:flex;animation:roIn .28s cubic-bezier(.2,1.25,.35,1)}
.du-card{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:16px 30px;animation:roPop .42s cubic-bezier(.18,1.5,.4,1)}
.du-lead{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:#ffb3c4;
  padding:6px 18px;border-radius:30px;
  background:rgba(255,61,113,.18);border:1px solid rgba(255,61,113,.5)}
.du-face{position:relative;margin:10px 0 4px}
.du-face .av{width:128px;height:128px;font-size:58px;
  filter:grayscale(.72) brightness(.72);box-shadow:0 0 0 5px #cf7f92}
.du-x{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-size:104px;font-weight:900;color:#cf7f92;line-height:1;text-shadow:0 5px 26px rgba(0,0,0,.85)}
.du-oname{margin-top:10px;font-size:27px;font-weight:900;color:#fff}
.du-why{margin-top:6px;font-size:13px;font-weight:800;color:#ffd0dc;
  padding:5px 15px;border-radius:20px;background:rgba(255,255,255,.07)}
.du-left{margin-top:10px;font-size:13.5px;font-weight:800;color:var(--dim);
  display:flex;align-items:center;gap:6px}
.du-left b{color:var(--star);font-size:19px}

@media(max-width:640px){
  .duel{gap:8px;padding:8px}
  .du-side{padding:11px 10px}
  .du-av .av{width:70px;height:70px;font-size:32px}
  .du-nm{font-size:14px;max-width:110px}
  .du-hand{font-size:36px}
  .du-face .av{width:96px;height:96px}
  .du-x{font-size:78px}
  .du-oname{font-size:21px}
}

/* ══════════ منتقي الهدايا: صورة أكبر واسم إنجليزي وسعر واضح ══════════ */
.gp-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.gi.big{width:56px;height:56px;font-size:40px}
.gp-item{padding:13px 8px 10px;gap:4px}
.gp-item .gi.big{width:56px;height:56px}
.gp-item b{font-size:12.5px;font-weight:900}
.gp-item u{
  text-decoration:none;font-size:9.5px;color:var(--dim-2);font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.gp-item i{
  display:flex;align-items:center;gap:4px;margin-top:3px;
  font-size:11.5px;font-weight:900;color:var(--star);
  padding:3px 10px;border-radius:20px;background:rgba(255,215,110,.12);
}
.gp-coin{font-family:var(--emoji);font-size:11px}
.gift-pick i{
  margin-inline-start:auto;font-style:normal;font-size:11.5px;font-weight:900;color:var(--star);
  padding:2px 9px;border-radius:20px;background:rgba(255,215,110,.14);
}

/* ══════════════════════════════════════════════════════════
   زر الطرد ✕ — جنب كل لاعب في الانضمام واللوحة والمسرح
   ══════════════════════════════════════════════════════════ */
.pb-kick,.av-kick{
  position:absolute;z-index:4;cursor:pointer;
  display:grid;place-items:center;line-height:1;
  border-radius:50%;font-family:inherit;font-weight:900;
  background:rgba(255,61,113,.9);color:#fff;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  opacity:0;transform:scale(.7);transition:.16s;
}
.pb-kick{top:5px;inset-inline-end:5px;width:22px;height:22px;font-size:12px}
.av-kick{top:-5px;inset-inline-end:-5px;width:20px;height:20px;font-size:11px}
.pb:hover .pb-kick,
.pb:focus-within .pb-kick,
.ra:hover .av-kick,
.rt-chip:hover .av-kick,
.tw-man:hover .av-kick{opacity:1;transform:scale(1)}
.pb-kick:hover,.av-kick:hover{background:#c06a80;transform:scale(1.15)}
.pb-kick:focus-visible,.av-kick:focus-visible{opacity:1;transform:scale(1);outline:2px solid #fff}

/* على الجوال لا يوجد hover — يبقى الزر ظاهراً بخفوت */
@media(hover:none){
  .pb-kick,.av-kick{opacity:.62;transform:scale(.92)}
}

/* شارة الاتصال أثناء إعادة المحاولة */
.status.wait{color:#ffe7a8;border-color:rgba(255,215,110,.4)}

/* ══════════ مفتاح Euler Stream في الإعدادات ══════════ */
.euler-box{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px 14px;
  border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.eu-state{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  padding:7px 12px;border-radius:20px;align-self:flex-start;
}
.eu-state.on{background:rgba(47,227,138,.14);border:1px solid rgba(47,227,138,.4);color:#a8f5cd}
.eu-state.off{background:rgba(255,215,110,.12);border:1px solid rgba(255,215,110,.36);color:#ffe7a8}
.eu-row{display:flex;gap:8px;flex-wrap:wrap}
.eu-row input{
  flex:1;min-width:180px;background:rgba(0,0,0,.34);border:1px solid var(--line);
  color:var(--txt);padding:9px 12px;border-radius:11px;font-size:13px;
  font-family:inherit;outline:none;
}
.eu-row input:focus{border-color:var(--p2);box-shadow:0 0 0 3px rgba(49,225,255,.14)}
.eu-steps{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--dim-2);line-height:1.6}
.eu-steps b{color:var(--star)}
.eu-steps code{
  background:rgba(0,0,0,.4);padding:1px 7px;border-radius:6px;
  font-family:ui-monospace,monospace;font-size:11px;color:#a9edff;direction:ltr;display:inline-block;
}
.eu-state.bad{background:rgba(255,61,113,.14);border:1px solid rgba(255,61,113,.44);color:#ffb3c4}
.eu-state b{color:#fff;font-size:14px}

/* ══════════════════════════════════════════════════════════
   🔨 المزاد — قاعة مزاد: منصّة عرض ولوح مزايدات ومحافظ
   ══════════════════════════════════════════════════════════ */
.auc{flex:1;min-height:0;width:100%;display:grid;
  grid-template-rows:minmax(0,1fr) auto;gap:12px;padding:14px}
.auc-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:14px;min-height:0}
.auc-lot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.auc-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px 34px;border-radius:20px;text-align:center;
  background:var(--panel);border:1px solid var(--line);transition:.4s;
}
.auc-item.sold{border-color:color-mix(in srgb,var(--star) 45%,transparent);
  background:color-mix(in srgb,var(--star) 9%,transparent)}
.ai-emo{font-family:var(--emoji);font-size:58px;line-height:1}
.auc-item b{font-size:19px;font-weight:800}
.ai-range{font-size:12px;color:var(--dim-2);font-weight:600}
.ai-range u{text-decoration:none;color:var(--star);font-weight:800;font-size:15px}
.auc-ask{display:flex;align-items:center;gap:7px;font-size:13.5px;
  color:var(--dim);font-weight:600}
.auc-bids{display:flex;flex-direction:column;gap:5px;overflow-y:auto;min-height:0;padding:2px}
.auc-bid{
  display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);font-size:12.5px;
}
.auc-bid.top{border-color:color-mix(in srgb,var(--star) 45%,transparent);
  background:color-mix(in srgb,var(--star) 10%,transparent)}
.auc-bid .av{width:24px;height:24px;font-size:12px}
.ab-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.auc-bid b{font-size:14px;font-weight:800;color:var(--star)}
.auc-none{font-size:12.5px;color:var(--dim-2);text-align:center;padding:18px}
.auc-wallets{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:6px;max-height:34%;overflow-y:auto;flex:0 0 auto}
.auc-w{--pb-acc:var(--p2);display:flex;align-items:center;gap:7px;
  padding:6px 9px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);font-size:12px}
.auc-w .av{width:24px;height:24px;font-size:12px}
.aw-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.aw-c{font-weight:800;color:var(--ok);white-space:nowrap}
.aw-o{font-family:var(--emoji);font-size:13px;letter-spacing:-2px}

/* ══════════════════════════════════════════════════════════
   🤝 تقاسم أو خيانة — وجهان متقابلان وسمعة معلنة
   ══════════════════════════════════════════════════════════ */
.bt{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;gap:12px;padding:14px}
.bt-tag{text-align:center;font-size:14px;font-weight:600;color:var(--dim);flex:0 0 auto}
.bt-tag b{color:var(--txt);font-weight:800}
.bt-pairs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:2px}
.bt-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  align-items:center;gap:8px}
.bt-p{
  --pb-acc:var(--p1);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 10px;border-radius:14px;min-width:0;
  background:var(--panel);border:1px solid var(--line);transition:.35s;
}
.bt-p .av{width:46px;height:46px;font-size:22px}
.bt-p b{font-size:13px;font-weight:700;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-rep{font-style:normal;font-size:9.5px;font-weight:700;padding:1px 8px;border-radius:20px}
.bt-rep.good{background:color-mix(in srgb,var(--ok) 16%,transparent);color:#a6d3ba}
.bt-rep.evil{background:color-mix(in srgb,var(--bad) 18%,transparent);color:#e3aab6}
.bt-rep.mid{background:var(--panel-2);color:var(--dim-2)}
.bt-hand{font-family:var(--emoji);font-size:30px;line-height:1;margin-top:2px}
.bt-p.share{border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.bt-p.steal{border-color:color-mix(in srgb,var(--bad) 50%,transparent);
  background:color-mix(in srgb,var(--bad) 11%,transparent)}
.bt-p.lost{opacity:.5}
.bt-gain{font-size:13px;font-weight:800;color:var(--dim-2)}
.bt-gain.pos{color:var(--ok)} .bt-gain.neg{color:var(--bad)}
.bt-vs{text-align:center;font-size:12px;font-weight:700;color:var(--dim-2);
  font-family:var(--emoji)}
.bt-odd{display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:12px;color:var(--dim-2);padding:8px}
.bt-odd .av{width:24px;height:24px;font-size:12px}
.bt-keys{display:flex;gap:10px;justify-content:center;flex:0 0 auto}
.btk{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:20px;
  font-size:13px;font-weight:600;border:1px solid var(--line);background:var(--panel)}
.btk.share{color:#a6d3ba;border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.btk.steal{color:#e3aab6;border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.btk b{color:var(--txt);font-weight:800}

/* ══════════════════════════════════════════════════════════
   🪞 الأقلية تفوز — ميزان بين جانبين
   ══════════════════════════════════════════════════════════ */
.mn{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;gap:14px;padding:16px}
.mn-q{text-align:center;flex:0 0 auto}
.mn-q b{display:block;font-size:24px;font-weight:800;letter-spacing:-.4px}
.mn-q span{display:block;font-size:12.5px;color:var(--dim-2);margin-top:4px;font-weight:600}
.mn-sides{flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:12px;align-items:stretch}
.mn-side{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 14px;border-radius:18px;min-height:0;
  background:var(--panel);border:1px solid var(--line);transition:.4s;
}
.mn-side.a{--sc:var(--p2)} .mn-side.b{--sc:var(--p1)}
.mn-k{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#12151d;background:var(--sc)}
.mn-l{font-size:20px;font-weight:800;text-align:center;letter-spacing:-.3px}
.mn-c{font-size:12.5px;color:var(--dim-2);font-weight:700}
.mn-avs{margin-top:4px}
.mn-side.safe{border-color:color-mix(in srgb,var(--ok) 50%,transparent);
  background:color-mix(in srgb,var(--ok) 11%,transparent)}
.mn-side.safe .mn-c{color:var(--ok)}
.mn-side.doomed{opacity:.42;filter:grayscale(.6)}
.mn-scale{position:relative;border-radius:20px;overflow:hidden;
  background:color-mix(in srgb,var(--p1) 45%,transparent)}
.mn-scale i{position:absolute;inset-inline:0;top:0;height:50%;display:block;
  background:color-mix(in srgb,var(--p2) 75%,transparent);
  transition:height .5s cubic-bezier(.3,1,.4,1)}

/* ══════════════════════════════════════════════════════════
   📈 الجشع — عدّاد يصعد وقائمة من حجزوا
   ══════════════════════════════════════════════════════════ */
.gr{flex:1;min-height:0;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:16px;padding:16px}
.gr-meter{
  position:relative;border-radius:22px;overflow:hidden;min-height:0;
  background:var(--panel);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.gr-meter.boom{animation:grBoom .5s cubic-bezier(.36,.07,.19,.97) 2}
@keyframes grBoom{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.gr-fill{position:absolute;inset-inline:0;bottom:0;height:0;
  background:var(--ok);opacity:.16;transition:height .12s linear,background .4s}
.gr-num{
  position:relative;font-size:clamp(64px,13vw,132px);font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-4px;color:var(--txt);
  font-family:var(--emoji),'Tajawal',sans-serif;
}
.gr-num.cd{font-size:clamp(48px,9vw,92px);color:var(--dim)}
.gr-label{position:relative;display:flex;align-items:center;gap:7px;
  font-size:14px;color:var(--dim);font-weight:600}
.gr-label b{color:var(--txt);font-weight:800}
.gr-stopped{display:flex;flex-direction:column;gap:5px;overflow-y:auto;min-height:0;padding:2px}
.gr-s{--pb-acc:var(--ok);display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-radius:10px;background:color-mix(in srgb,var(--ok) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 26%,transparent);font-size:12.5px}
.gr-s .av{width:24px;height:24px;font-size:12px}
.gr-s span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:700}
.gr-s b{font-size:15px;font-weight:800;color:var(--ok)}
.gr-none{font-size:12.5px;color:var(--dim-2);text-align:center;padding:20px}

@media(max-width:820px){
  .auc-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .ai-emo{font-size:42px}
  .bt-row{grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:5px}
  .bt-p{padding:8px 6px}
  .bt-p .av{width:38px;height:38px;font-size:18px}
  .bt-hand{font-size:24px}
  .mn-q b{font-size:18px}
  .mn-l{font-size:15px}
  .mn-sides{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:7px}
  .gr{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .gr-stopped{max-height:32%}
}

/* ══════════════════════════════════════════════════════════
   شاشة «لا مصدر للاعبين» — تشرح وتعطي مخرجاً بدل انتظار فارغ
   ══════════════════════════════════════════════════════════ */
.nosrc{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:34px 26px;text-align:center;
  animation:fadeUp .35s cubic-bezier(.2,.9,.3,1);
}
.ns-ico{opacity:.75}
.nosrc h2{font-size:24px;font-weight:800;letter-spacing:-.4px}
.nosrc p{color:var(--dim);font-size:14px;max-width:440px;line-height:1.75}
.nosrc p b{color:var(--star);font-weight:800}
.nosrc.small h2{font-size:20px}
.ns-opts{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ns-o{
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  width:196px;padding:18px 16px;border-radius:var(--r);font-family:inherit;color:var(--txt);
  background:var(--panel);border:1px solid var(--line);
  transition:background .18s,border-color .18s,transform .18s;
}
.ns-o:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-2px)}
.ns-o:focus-visible{outline:2px solid var(--p2);outline-offset:2px}
.ns-e{margin-bottom:2px}
.ns-o b{font-size:15px;font-weight:800}
.ns-o i{font-style:normal;font-size:11.5px;color:var(--dim-2);line-height:1.5}

/* أزرار شاشة الانضمام */
.js-src{font-size:11.5px;font-weight:700;color:var(--dim-2);
  display:flex;align-items:center;gap:6px}
.js-src:empty{display:none}
.js-skip,.js-cancel{
  display:flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  padding:6px 13px;border-radius:20px;font-size:12px;font-weight:700;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  transition:.16s;
}
.js-skip:hover{background:var(--panel-2);color:var(--txt)}
.js-cancel:hover{background:color-mix(in srgb,var(--bad) 18%,transparent);
  border-color:color-mix(in srgb,var(--bad) 38%,transparent);color:#e6b6c0}

@media(max-width:640px){
  .ns-o{width:100%;max-width:280px;padding:14px}
  .nosrc h2{font-size:20px}
}

/* ══════════════════════════════════════════════════════════
   بوّابة الدخول
   ══════════════════════════════════════════════════════════ */
.authgate{
  position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(110% 70% at 20% -10%, rgba(153,144,194,.16), transparent 60%),
    radial-gradient(90% 60% at 90% 110%, rgba(127,179,196,.12), transparent 62%),
    var(--bg);
  overflow-y:auto;
}
.authgate.hidden{display:none}
.ag-card{
  width:100%;max-width:388px;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:34px 30px 26px;border-radius:22px;text-align:center;
  background:var(--surf);border:1px solid var(--line);box-shadow:var(--shadow);
  animation:fadeUp .4s cubic-bezier(.2,.9,.3,1);
}
.ag-logo{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;padding:11px;
  background:color-mix(in srgb,var(--p3) 15%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--p3) 22%,transparent)}
.ag-logo svg{width:100%;height:100%}
.ag-card h1{font-size:27px;font-weight:800;letter-spacing:-.6px;margin-top:8px}
.ag-sub{font-size:13px;color:var(--dim-2);line-height:1.6;margin-bottom:14px}

.ag-tabs{display:flex;gap:4px;width:100%;padding:4px;border-radius:var(--r-md);
  background:var(--panel);margin-bottom:14px}
.ag-t{flex:1;padding:9px;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:var(--dim-2);border-radius:var(--r-sm);transition:.16s}
.ag-t:hover{color:var(--dim)}
.ag-t.on{background:var(--panel-3);color:var(--txt)}

.ag-form{width:100%;display:flex;flex-direction:column;gap:11px}
.ag-f{display:flex;flex-direction:column;gap:5px;text-align:start;position:relative}
.ag-f.hidden{display:none}
.ag-f span{font-size:12px;font-weight:700;color:var(--dim)}
.ag-f input{
  background:var(--panel);border:1px solid var(--line);color:var(--txt);
  padding:11px 13px;border-radius:var(--r-md);font-size:14px;font-family:inherit;outline:none;
  transition:border-color .16s;width:100%;
}
.ag-f input:focus{border-color:color-mix(in srgb,var(--p2) 55%,transparent)}
.ag-f input::placeholder{color:var(--dim-2);font-size:13px}
.ag-eye{
  position:absolute;inset-inline-end:8px;bottom:7px;border:none;background:none;cursor:pointer;
  font-family:var(--emoji);font-size:15px;padding:5px;opacity:.6;border-radius:8px;
}
.ag-eye:hover{opacity:1;background:var(--panel-2)}

.ag-meter{display:flex;align-items:center;gap:9px;height:16px}
.ag-meter.hidden{display:none}
.ag-meter i{display:block;height:4px;width:0;border-radius:4px;background:var(--bad);
  transition:width .25s,background .25s;flex:0 0 auto;min-width:0}
.ag-meter::before{content:'';position:absolute}
.ag-meter i[data-s="3"]{background:var(--star)}
.ag-meter i[data-s="4"],.ag-meter i[data-s="5"]{background:var(--ok)}
.ag-meter span{font-size:11px;font-weight:700;color:var(--dim-2);white-space:nowrap}

.ag-err{font-size:12.5px;font-weight:700;color:#e6b6c0;text-align:start;
  padding:0;max-height:0;overflow:hidden;transition:.2s}
.ag-err.on{max-height:60px;padding:9px 12px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bad) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 32%,transparent)}
.ag-note{font-size:11px;color:var(--dim-2);line-height:1.7;margin-top:16px;
  display:flex;align-items:center;gap:6px;justify-content:center}

/* ══════════════════════════════════════════════════════════
   زر الحساب في الشريط العلوي
   ══════════════════════════════════════════════════════════ */
.btn-acct{
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;
  border-radius:22px;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
  transition:.16s;
}
.btn-acct:hover{background:var(--panel-2);border-color:var(--line-2)}
.btn-acct.on{border-color:color-mix(in srgb,var(--p3) 40%,transparent)}
.btn-acct #acctAv{
  width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;font-family:var(--emoji);font-size:14px;
  background:color-mix(in srgb,var(--p3) 22%,var(--surf-2));
}
.btn-acct #acctAv img{width:100%;height:100%;object-fit:cover}
.btn-acct b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}

/* ══════════════════════════════════════════════════════════
   صفحة الحساب
   ══════════════════════════════════════════════════════════ */
.acct{display:flex;flex-direction:column;gap:16px}
.ac-head{display:flex;align-items:center;gap:14px}
.ac-av{
  width:66px;height:66px;border-radius:22px;overflow:hidden;flex:0 0 auto;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--p3) 16%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--p3) 24%,transparent);
}
.ac-av img{width:100%;height:100%;object-fit:cover}
.ac-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-id h2{font-size:22px;font-weight:800;letter-spacing:-.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-u{font-size:12.5px;color:var(--dim-2);font-weight:600;display:flex;align-items:center;gap:7px}
.ac-role{font-style:normal;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;
  background:color-mix(in srgb,var(--star) 20%,transparent);color:var(--star)}
.ac-since{font-size:11px;color:var(--dim-2)}
.ac-sub{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  border:1px solid transparent;width:max-content}
.ac-sub.on{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);
  border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.ac-sub.off{color:var(--dim-2);background:var(--surf-2);border-color:var(--line)}

.ac-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ac-s{display:flex;flex-direction:column;align-items:center;gap:1px;padding:13px 8px;
  border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line)}
.ac-s b{font-size:21px;font-weight:800;letter-spacing:-.5px}
.ac-s span{font-size:11px;color:var(--dim-2);font-weight:600}

.ac-tabs{display:flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--panel)}
.ac-t{flex:1;padding:9px;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--dim-2);border-radius:var(--r-sm);transition:.16s}
.ac-t:hover{color:var(--dim)}
.ac-t.on{background:var(--panel-3);color:var(--txt)}
.ac-pane{display:none}
.ac-pane.on{display:block;animation:fadeUp .25s ease}
.ac-h{font-size:13.5px;font-weight:800;margin:18px 0 9px;color:var(--txt)}
.ac-h:first-child{margin-top:0}
.ac-h.danger{color:#e6b6c0}

.ac-games{display:flex;flex-direction:column;gap:5px}
.ac-g{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-md);background:var(--panel);border:1px solid var(--line)}
.ac-ge{font-family:var(--emoji);font-size:18px}
.ac-gn{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-gp{font-size:12.5px;font-weight:800;color:var(--star);white-space:nowrap}
.ac-gw{font-size:11px;color:var(--dim-2);white-space:nowrap;font-weight:600}

.ac-rounds{display:flex;flex-direction:column;gap:3px;max-height:280px;overflow-y:auto}
.ac-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto auto;
  align-items:center;gap:9px;padding:7px 11px;border-radius:10px;
  background:var(--panel);font-size:12px}
.ac-r > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-rw{color:var(--star);font-weight:700}
.ac-rp,.ac-rd{color:var(--dim-2);font-size:11px}

.ac-del{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.ac-del input{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);padding:9px 12px;border-radius:var(--r-md);font-size:13px;
  font-family:inherit;outline:none}
.ac-del input:focus{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}

@media(max-width:640px){
  .ag-card{padding:26px 20px 20px}
  .btn-acct b{display:none}
  .btn-acct{padding:5px;gap:0}
  .ac-stats{grid-template-columns:repeat(2,1fr)}
  .ac-r{grid-template-columns:minmax(0,1fr) auto;gap:5px}
  .ac-rp,.ac-rd{display:none}
}

/* زر إغلاق البوّابة وخيار المتابعة بلا حساب */
.ag-card{position:relative}
.ag-x{
  position:absolute;top:12px;inset-inline-end:12px;z-index:2;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:14px;font-family:inherit;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  transition:.16s;
}
.ag-x:hover{background:var(--panel-3);color:var(--txt)}
.ag-skip{
  margin-top:14px;padding:9px 16px;border-radius:20px;cursor:pointer;
  display:flex;align-items:center;gap:7px;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--dim);
  background:transparent;border:1px solid var(--line);transition:.16s;
}
.ag-skip:hover{background:var(--panel-2);color:var(--txt);border-color:var(--line-2)}

/* ══════════════════════════════════════════════════════════
   الصفحة التعريفية العامّة
   ══════════════════════════════════════════════════════════ */
.landing{
  position:fixed;inset:0;z-index:9400;overflow-y:auto;
  background:
    radial-gradient(120% 70% at 20% -8%, rgba(169,123,255,.20), transparent 62%),
    radial-gradient(100% 60% at 95% 40%, rgba(49,225,255,.10), transparent 64%),
    radial-gradient(80% 50% at 10% 100%, rgba(255,215,110,.06), transparent 65%),
    var(--bg);
}
.landing.hidden{display:none}
body.on-landing{overflow:hidden}
.ld{max-width:1080px;margin:0 auto;padding:0 24px 60px}

.ld-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);
}
.ld-brand{display:flex;align-items:center;gap:10px}
.ld-brand b{font-size:19px;font-weight:800;letter-spacing:-.3px}
.ld-logo{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;padding:6px;
  background:color-mix(in srgb,var(--p3) 16%,var(--surf));
  border:1px solid color-mix(in srgb,var(--p3) 24%,transparent)}
.ld-svg{width:100%;height:100%}
.ld-navb{display:flex;gap:8px}

/* البطل */
.ld-hero{text-align:center;padding:44px 0 52px;display:flex;
  flex-direction:column;align-items:center;gap:16px}
.ld-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:7px 16px;border-radius:20px;color:var(--star);
  background:color-mix(in srgb,var(--p3) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--p3) 26%,transparent);
}
.ld-hero h1{
  font-size:clamp(30px,5.2vw,52px);font-weight:800;line-height:1.22;letter-spacing:-1.2px;
}
.ld-hero h1 span{
  background:linear-gradient(100deg,var(--p3),var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-hero p{color:var(--dim);font-size:15.5px;line-height:1.85;max-width:540px}
.ld-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.ld-stats{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.ld-stats span{font-size:12.5px;color:var(--dim-2);font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:1px}
.ld-stats b{font-size:26px;font-weight:800;color:var(--txt);letter-spacing:-.6px}

/* أقسام */
.ld-sec{padding:38px 0}
.ld-sec h2{font-size:25px;font-weight:800;letter-spacing:-.5px;text-align:center}
.ld-sub{color:var(--dim-2);font-size:13.5px;text-align:center;margin-top:6px}

.ld-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-top:24px}
.ld-step{padding:22px 20px;border-radius:var(--r);position:relative;
  background:var(--surf);border:1px solid var(--line)}
.ld-n{
  position:absolute;top:-13px;inset-inline-start:20px;
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#0f1224;
  background:linear-gradient(140deg,var(--p3),var(--p2));
}
.ld-step b{display:block;font-size:16px;font-weight:800;margin-top:6px}
.ld-step p{color:var(--dim-2);font-size:13px;line-height:1.75;margin-top:5px}

.ld-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin-top:24px}
.ld-g{
  --acc:var(--p3);
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:20px 12px;
  border-radius:var(--r);text-align:center;
  background:var(--surf);border:1px solid var(--line);transition:.2s;
}
.ld-g:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.ld-ge{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--acc) 15%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--acc) 22%,transparent)}
.ld-g b{font-size:13.5px;font-weight:700;margin-top:4px}
.ld-g i{font-style:normal;font-size:11px;color:var(--dim-2);font-weight:600}
.ld-g.more{border-style:dashed}

/* الباقات */
.ld-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin-top:26px;align-items:start}
/* باقتان: لا تتمدّدان على عرض الصفحة كاملاً */
.ld-plans.duo{grid-template-columns:repeat(auto-fit,minmax(260px,340px));
  justify-content:center;gap:16px}
.ld-save{
  align-self:flex-start;display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:900;padding:4px 11px;border-radius:999px;
  color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 34%,transparent);
}
.ld-fine{margin-top:16px;text-align:center;font-size:12.5px;color:var(--dim-2);
  display:flex;align-items:center;justify-content:center;gap:6px}
.ld-p{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:24px 20px;
  border-radius:var(--r);background:var(--surf);border:1px solid var(--line);
}
.ld-p.hot{
  border-color:color-mix(in srgb,var(--p3) 50%,transparent);
  background:linear-gradient(170deg,color-mix(in srgb,var(--p3) 12%,var(--surf)),var(--surf));
}
.ld-tag{
  position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(50%);
  font-size:10.5px;font-weight:800;padding:3px 12px;border-radius:20px;white-space:nowrap;
  background:linear-gradient(120deg,var(--p3),var(--p2));color:#0f1224;
}
.ld-pn{font-size:15px;font-weight:800;color:var(--dim)}
.ld-pr{display:flex;align-items:baseline;gap:7px}
.ld-pr b{font-size:34px;font-weight:800;letter-spacing:-1px}
.ld-pr span{font-size:12px;color:var(--dim-2);font-weight:600}
.ld-p ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:6px 0 12px}
.ld-p li{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:8px}
.ld-p .btn{width:100%;justify-content:center;margin-top:auto}

.ld-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:26px 0 0;margin-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--dim-2);
}
.ld-foot > span{display:flex;align-items:center;gap:9px}
.ld-foot .ld-svg{width:22px;height:22px}
.ld-link{background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--p2);text-decoration:underline}
.ld-link:hover{color:var(--p3)}

@media(max-width:640px){
  .ld{padding:0 16px 40px}
  .ld-hero{padding:28px 0 34px}
  .ld-stats{gap:18px}
  .ld-stats b{font-size:21px}
  .ld-sec{padding:26px 0}
  .ld-sec h2{font-size:21px}
  .ld-games{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:7px}
  .ld-ge{width:42px;height:42px;border-radius:14px}
}

/* ══════════════════════════════════════════════════════════
   الدخول الفوري — بلا عدّاد ولا انتظار
   ══════════════════════════════════════════════════════════ */
.lobby{
  flex:1;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(7px,1.3vh,14px);padding:clamp(10px,1.8vh,22px) clamp(12px,2vw,26px);
  text-align:center;
  animation:fadeUp .35s cubic-bezier(.2,.9,.3,1);
}
/* الرأس ثابت والشبكة تأخذ ما بقي — فلا يهرب المنضمّون تحت الشاشة */
.lobby > *:not(.lb-grid){flex:0 0 auto}

/* أوّل ما يدخل أحد: الرأس ينكمش وتكبر البطاقات */
.lobby.busy{justify-content:flex-start;gap:8px}
.lobby.busy .lb-ic{display:none}
.lobby.busy h2{font-size:clamp(17px,2.6vh,26px)}
/* أوّل ما يدخل أحد: الشرح والعدّاد يتنحّيان — الكلمة الصفراء تكفي،
   والعدد مكتوبٌ على الزرّ. والمساحة كلُّها للمنضمّين. */
.lobby.busy .lb-hint,
.lobby.busy .lb-count{display:none}

.lobby.busy .lb-go{padding:10px 22px;font-size:15px}
/* وازدحمت أكثر ⇒ حتى العنوان يتنحّى: اسم اللعبة في شريط المسرح */
.lobby.busy:has(.lb-grid.d3) h2,
.lobby.busy:has(.lb-grid.d4) h2{display:none}
.lb-ic{opacity:.9}
.lobby h2{font-size:clamp(22px,3.6vh,40px);font-weight:800;letter-spacing:-.5px}
.lb-hint{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--dim);
  padding:9px 20px;border-radius:24px;
  background:color-mix(in srgb,var(--p2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--p2) 26%,transparent)}
.lb-count{display:flex;align-items:baseline;gap:7px;margin-top:4px}
.lb-count b{font-size:clamp(34px,5.4vh,58px);font-weight:800;letter-spacing:-1px;
  color:var(--star)}
.lb-count span{font-size:13px;color:var(--dim-2);font-weight:600}
.lb-grid{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  max-width:760px;max-height:34vh;overflow-y:auto;padding:2px;
}
.lb-p{
  display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);
  animation:fadeUp .3s cubic-bezier(.2,1.2,.4,1);
}
.lb-p .av{width:26px;height:26px;font-size:13px}
.lb-p b{font-size:12.5px;font-weight:700;max-width:150px}
.lb-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ══════════════════════════════════════════════════════════
   لوحة المالك
   ══════════════════════════════════════════════════════════ */
.adm{display:flex;flex-direction:column;gap:12px}
.adm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adm-head h2{font-size:19px;font-weight:800;display:flex;align-items:center;gap:9px}
.adm-n{font-size:12px;color:var(--dim-2);font-weight:700;
  padding:4px 11px;border-radius:20px;background:var(--panel)}

.adm-search{
  display:flex;align-items:center;gap:9px;padding:0 12px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);transition:border-color .16s;
}
.adm-search:focus-within{border-color:color-mix(in srgb,var(--p2) 50%,transparent)}
.adm-search span{font-family:var(--emoji);font-size:13px;opacity:.55}
.adm-search input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--txt);font-size:13.5px;font-family:inherit;padding:10px 0}

.adm-list{display:flex;flex-direction:column;gap:5px;max-height:58vh;overflow-y:auto;padding:2px}
.adm-u{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto auto auto auto;
  align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  border-inline-start:3px solid var(--dim-2);
}
.adm-u.on{border-inline-start-color:var(--ok)}
.adm-u.tr{border-inline-start-color:var(--star)}
.adm-u.ex{border-inline-start-color:var(--dim-2)}
.adm-u.off{border-inline-start-color:var(--bad);opacity:.6}
.adm-av{
  width:38px;height:38px;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  font-family:var(--emoji);font-size:17px;
  background:color-mix(in srgb,var(--p3) 18%,var(--surf-2));
}
.adm-av img{width:100%;height:100%;object-fit:cover}
.adm-id{min-width:0;display:flex;flex-direction:column;gap:1px}
.adm-id b{font-size:13.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.adm-id span{font-size:11px;color:var(--dim-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.adm-role{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:20px;
  background:color-mix(in srgb,var(--star) 22%,transparent);color:var(--star)}
.adm-sub{font-size:11.5px;font-weight:800;color:var(--ok);white-space:nowrap}
.adm-u.tr .adm-sub{color:var(--star)}
.adm-u.ex .adm-sub,.adm-u.off .adm-sub{color:var(--dim-2)}
.adm-st,.adm-dt{font-size:11px;color:var(--dim-2);white-space:nowrap;font-weight:600}
.adm-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
/* منح البنرات لشخصٍ بعينه */
.adm-bans{display:flex;flex-direction:column;gap:7px;margin-top:9px;
  max-height:280px;overflow-y:auto;padding:2px}
.adm-ban{
  display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:14px;
  background:var(--surf-2);border:1px solid var(--line);
}
/* صفُّ الشعارات في لوحة المالك — معاينةٌ حيّة للشعار نفسه بجانب زرّه */
.bn-mk{display:flex;align-items:center;justify-content:space-between;gap:9px;
  margin:14px 0 7px;padding:7px 11px;border-radius:12px;font-size:12.5px;font-weight:900;
  background:var(--surf-2);border:1px solid var(--line)}
.bn-mk i{font-style:normal;color:var(--dim-2);font-weight:800}
.adm-marks{display:flex;flex-direction:column;gap:8px}
.adm-mark{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:14px;
  background:var(--surf-2);border:1px solid var(--line);
}
.adm-mark.on{border-color:color-mix(in srgb,var(--mk,#ff4d8d) 60%,transparent);
  background:color-mix(in srgb,var(--mk,#ff4d8d) 12%,var(--surf-2))}

.adm-mtx{flex:1;font-size:12px;font-weight:800;color:var(--dim-2)}
.adm-mark.on .adm-mtx{color:var(--tx)}
.adm-ban.gift{border-color:color-mix(in srgb,var(--star) 62%,transparent);
  background:color-mix(in srgb,var(--star) 12%,var(--surf-2))}
.adm-bimg{
  flex:0 0 auto;width:56px;height:36px;border-radius:9px;
  background:linear-gradient(150deg,var(--tc,#8b7ad6),#0e0e1e);
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.14);
}
.adm-btx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.adm-btx b{font-size:13.5px;font-weight:900;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.adm-btx span{font-size:11px;font-weight:700;color:var(--dim-2)}
.adm-btx u{text-decoration:none;color:var(--star)}
.adm-worn{font-size:9.5px;font-style:normal;font-weight:800;color:#0c0c14;
  background:var(--star);padding:1px 6px;border-radius:6px;vertical-align:middle}
.adm-ban .btn{flex:0 0 auto}
.adm-ban .btn.danger{
  border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
.adm-ban .btn.danger:hover{background:color-mix(in srgb,var(--bad) 18%,transparent)}
/* شبكة قيمة النقاط */
.pt-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* المنح السريع — أزرارٌ تُقرأ كمُدد لا كأوامر خطرة */
.adm-quick .btn{
  border-color:color-mix(in srgb,var(--star) 40%,transparent);
  background:color-mix(in srgb,var(--star) 12%,transparent);
  font-weight:900;
}
.adm-quick .btn:hover{background:color-mix(in srgb,var(--star) 22%,transparent)}
.adm-quick .btn.danger{
  border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);
}
.adm-quick .btn.danger:hover{background:color-mix(in srgb,var(--bad) 22%,transparent)}
.adm-quick .btn:disabled{opacity:.5;cursor:default}

@media(max-width:640px){
  .adm-u{grid-template-columns:32px minmax(0,1fr) auto;gap:8px;padding:8px 9px}
  .adm-st,.adm-dt{display:none}
  .adm-av{width:32px;height:32px;border-radius:10px}
}

/* شعار هدهد في قلب العجلة */
.hub{padding:16%}
.hub-logo{width:100%;height:100%;
  filter:drop-shadow(0 2px 6px rgba(6,8,26,.6))}

/* زرّ بدء اللعبة داخل اللوبي */
.lb-go{margin-top:4px;min-width:220px;justify-content:center}
.lb-go:disabled{opacity:.5;cursor:not-allowed;
  background:var(--panel-2);color:var(--dim-2);border-color:var(--line)}
.lb-go:disabled:hover{background:var(--panel-2)}

/* لافتة حالة الاشتراك في الصفحة الرئيسية */
.ld-note{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center;
  margin-top:14px;padding:11px 18px;border-radius:var(--r-md);
  font-size:13.5px;font-weight:600;
}
.ld-note.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 34%,transparent);color:#bcdfe6}
.ld-note.none{background:color-mix(in srgb,var(--star) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--star) 32%,transparent);color:#d9d0f5}
.ld-note.expired{background:color-mix(in srgb,var(--bad) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--bad) 32%,transparent);color:#e8c5d8}
.ld-note b{color:#fff;font-weight:800}

/* أزرار نافذة الإعدادات الحيّة */
.lc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* أزرار الاشتراك كروابط */
a.btn{text-decoration:none}
a.btn:hover{text-decoration:none}

/* ══════════ بنرات المكافآت ══════════ */
/* ── معرض البنرات: يراه الجميع، والمقفل عليه قفل وسعره بالنقاط ── */
.tb-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px;font-size:13.5px}
.tb-head > span{font-size:11.5px;color:var(--dim)}
.tb-head > span b{color:var(--star);font-weight:800}
.tb-shop{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.tb-c{
  --tc:#8b7ad6;
  position:relative;border-radius:13px;overflow:hidden;
  background:var(--surf-2);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .2s,border-color .2s;
}
.tb-c.open{border-color:color-mix(in srgb,var(--tc) 55%,transparent)}
.tb-c.open:hover{transform:translateY(-2px)}
.tb-art{
  height:104px;background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 35%,#0d1020));
  display:block;position:relative;
}
/* المقفل يبقى بألوانه وحركته: تعتيم خفيف من الأسفل فقط ليقرأ السعر،
   بلا تشويش ولا تدرّج رمادي — البنر المتحرّك لازم يبين وهو يتحرّك */
.tb-c.lock .tb-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,18,.06) 40%,rgba(6,7,18,.62));
}
.tb-lk{
  position:absolute;z-index:1;inset-block-end:7px;inset-inline-start:7px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:999px;
  font-size:12.5px;font-weight:900;color:#fff;
  background:rgba(8,9,20,.78);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.tb-lk b{color:var(--star);font-weight:900}
.tb-anim{
  position:absolute;z-index:1;inset-block-start:7px;inset-inline-end:7px;
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:900;color:#0c1220;
  background:linear-gradient(120deg,var(--star),#ffe6a3);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.tb-meta{padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tb-meta b{font-size:12.5px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-meta span{font-size:10.5px;color:var(--dim-2);font-weight:700}
.tb-c.open .tb-meta span{color:var(--ok)}
.tb-bar{display:block;height:3px;background:rgba(255,255,255,.09);margin:0 10px 9px;
  border-radius:9px;overflow:hidden}
.tb-bar u{display:block;height:100%;background:var(--tc);border-radius:9px;
  transition:width .5s}
.tb-mine{padding:2px}

.tb-list{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.tb-i{
  --tc:var(--p3);
  display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line);
  border-inline-start:3px solid var(--tc);
}
.tb-pv{
  width:104px;height:56px;border-radius:10px;flex:0 0 auto;
  background:var(--tc) center/cover no-repeat;
  border:1px solid var(--line);
}
.tb-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tb-tx b{font-size:13.5px;font-weight:700}
.tb-tx span{font-size:11.5px;color:var(--star);font-weight:700}

/* وسم البنر على بطاقة اللاعب */
.pb-tier{
  font-size:9.5px;font-weight:800;padding:1px 7px;border-radius:20px;white-space:nowrap;
  background:color-mix(in srgb,var(--pb-acc) 30%,transparent);
  color:#fff;margin-inline-start:5px;
}
.pb.tiered{border-color:color-mix(in srgb,var(--pb-acc) 45%,transparent)}

/* ══════════════════════════════════════════════════════════════
   🔗 كلمة بحرف
   ══════════════════════════════════════════════════════════════ */
.ch-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;flex:1;min-height:0}
.ch-line{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;direction:rtl;
  min-height:78px;align-items:center;padding:10px 14px;width:100%;
  border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
}
.ch-l{
  --pb-acc:var(--p2);
  display:grid;place-items:center;width:56px;height:66px;border-radius:14px;
  font-size:34px;font-weight:900;line-height:1;color:#fff;
  background:linear-gradient(165deg,color-mix(in srgb,var(--pb-acc) 34%,var(--surf-2)),var(--surf-2));
  border:1px solid color-mix(in srgb,var(--pb-acc) 55%,transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  animation:chIn .3s cubic-bezier(.2,1.3,.35,1);
}
.ch-l.hit{box-shadow:0 0 0 3px color-mix(in srgb,var(--pb-acc) 60%,transparent),0 8px 22px rgba(0,0,0,.4)}
@keyframes chIn{from{transform:translateY(-14px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.ch-empty{color:var(--dim-2);font-size:14px;font-weight:700}
.ch-meta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:12px;color:var(--dim)}
.ch-meta b{color:var(--star);font-weight:800}
.ch-turn{min-height:74px;display:grid;place-items:center;width:100%}
.ch-now{display:flex;align-items:center;gap:11px;padding:8px 16px 8px 10px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line-2)}
.ch-ntx{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.ch-ntx b{font-size:14.5px;font-weight:800}
.ch-ntx i{font-size:11px;color:var(--star);font-style:normal;font-weight:700}
.ch-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%}
.ch-c{--pb-acc:var(--p2);display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;
  border-radius:999px;background:var(--surf-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;max-width:170px;transition:.25s}
.ch-c span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-c .av{width:24px;height:24px;font-size:12px}
.ch-c.now{background:color-mix(in srgb,var(--star) 16%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 55%,transparent);transform:translateY(-2px)}
.ch-list.d2 .ch-c{font-size:11px;max-width:140px;padding:4px 9px 4px 5px}
.ch-list.d2 .ch-c .av{width:21px;height:21px}
.ch-list.d3 .ch-c{font-size:0;max-width:none;padding:3px;gap:0}
.ch-list.d3 .ch-c .av{width:26px;height:26px;font-size:13px}
.ch-brk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 22px;
  border-radius:var(--r);background:color-mix(in srgb,var(--bad) 12%,var(--surf));
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  animation:roIn .3s cubic-bezier(.2,1.25,.35,1)}
.ch-blead{font-size:13px;font-weight:800;color:var(--bad)}
.ch-bword{font-size:30px;font-weight:900;letter-spacing:2px;color:#fff;direction:rtl}
.ch-bface{position:relative}
.ch-bface .av{width:74px;height:74px;font-size:34px}
.ch-bx{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:var(--bad);
  font-family:var(--emoji);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.ch-bname{font-size:16px;font-weight:800}
.ch-bwhy{font-size:12.5px;color:var(--dim)}
.ch-bleft{font-size:11.5px;color:var(--dim-2)}
.ch-bleft b{color:var(--txt)}

/* ══════════════════════════════════════════════════════════════
   🪑 الكراسي الموسيقية
   ══════════════════════════════════════════════════════════════ */
.mc-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;flex:1;min-height:0}
/* الكراسي صارت حلقة دائرية — القواعد المسطّحة القديمة حُذفت */
.mc-bang{position:absolute;inset-block-start:-10px;inset-inline-end:-6px;font-family:var(--emoji);font-size:22px}
.mc-note{font-size:16px;font-weight:800;text-align:center;min-height:26px}
.mc-note b{color:var(--bad)}
.mc-sl b{color:var(--star);font-weight:800}
.mc-out{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(4px);
  border-radius:var(--r);z-index:4}
.mc-out.on{display:flex;animation:roIn .28s cubic-bezier(.2,1.25,.35,1)}
.mc-card{display:flex;flex-direction:column;align-items:center;gap:11px;padding:20px 26px;
  border-radius:var(--r);background:var(--surf);
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);max-width:92%}
.mc-lead{font-size:14px;font-weight:800;color:var(--bad)}
.mc-faces{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mc-f{display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;width:92px}
.mc-f .av{width:56px;height:56px;font-size:26px}
.mc-fx{position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);
  width:56px;height:56px;display:grid;place-items:center;font-size:34px;color:var(--bad);
  font-family:var(--emoji);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.mc-f b{font-size:12px;font-weight:800;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mc-f i{font-size:10.5px;color:var(--dim-2);font-style:normal}
.mc-more{align-self:center;font-size:13px;font-weight:800;color:var(--dim)}
.mc-left{font-size:11.5px;color:var(--dim-2)}
.mc-left b{color:var(--txt)}

/* ══════════════════════════════════════════════════════════════
   💣 كانس الألغام
   ══════════════════════════════════════════════════════════════ */
.mn-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;flex:1;min-height:0}
.mn-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.mn-st{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line);font-size:11.5px;color:var(--dim)}
.mn-st b{color:var(--txt);font-weight:800}
.mn-grid{
  --cs:52px;
  display:grid;grid-template-columns:repeat(var(--w),var(--cs));gap:5px;
  padding:11px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
}
.mn-grid.d2{--cs:44px}
.mn-grid.d3{--cs:37px}
.mn-c{
  position:relative;height:var(--cs);border-radius:9px;display:grid;place-items:center;
  background:var(--surf-2);border:1px solid var(--line);
  font-size:calc(var(--cs) * .42);font-weight:900;line-height:1;transition:.2s;
}
.mn-i{font-size:calc(var(--cs) * .27);font-weight:700;color:var(--dim-2)}
.mn-c.aim{border-color:color-mix(in srgb,var(--star) 60%,transparent);
  background:color-mix(in srgb,var(--star) 12%,var(--surf-2))}
.mn-c.flag{background:color-mix(in srgb,var(--bad) 14%,var(--surf-2));
  border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.mn-fg,.mn-av{position:absolute;font-family:var(--emoji)}
.mn-fg{inset-block-start:1px;inset-inline-end:2px;font-size:calc(var(--cs) * .3)}
.mn-av{inset-block-end:1px;inset-inline-start:1px;display:flex}
.mn-av .av{width:calc(var(--cs) * .38);height:calc(var(--cs) * .38);font-size:9px;
  margin-inline-start:-4px;box-shadow:0 0 0 1.5px var(--surf-2)}
.mn-c.op{--pb-acc:var(--p2);background:color-mix(in srgb,var(--pb-acc) 13%,var(--surf));
  border-color:color-mix(in srgb,var(--pb-acc) 34%,transparent);
  animation:mnOp .25s cubic-bezier(.2,1.3,.35,1)}
@keyframes mnOp{from{transform:scale(.7);opacity:.2}to{transform:none;opacity:1}}
.mn-c.n1{color:#7fb8e8} .mn-c.n2{color:#7fd0a8} .mn-c.n3{color:#e8a87f}
.mn-c.n4{color:#c89ce8} .mn-c.n5{color:#e88f9f} .mn-c.n6{color:#7fd8d0}
.mn-c.n7{color:#e8d07f} .mn-c.n8{color:#ff9a9a}
.mn-c.boom{background:color-mix(in srgb,var(--bad) 30%,var(--surf));
  border-color:var(--bad);font-family:var(--emoji);animation:shake .45s}
.mn-feed{min-height:24px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:12px;color:var(--dim);opacity:0;transition:opacity .3s;text-align:center}
.mn-feed.on{opacity:1}
.mn-feed b{color:var(--txt)}
.mn-feed i{color:var(--star);font-style:normal}
.mn-feed.big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(4px);
  border-radius:var(--r);z-index:4}
.mn-boom{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 26px;
  border-radius:var(--r);background:var(--surf);
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent)}
.mn-blead{font-size:14px;font-weight:800;color:var(--bad)}
.mn-bface{position:relative}
.mn-bface .av{width:74px;height:74px;font-size:34px}
.mn-bx{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:var(--bad);
  font-family:var(--emoji);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.mn-bname{font-size:16px;font-weight:800;color:var(--txt)}
.mn-bleft{font-size:11.5px;color:var(--dim-2)}

/* ══════════════════════════════════════════════════════════════
   🎈 نفخة الحظّ
   ══════════════════════════════════════════════════════════════ */
.bl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:minmax(0,1fr) auto;
  gap:12px;width:100%;flex:1;min-height:0}
.bl-wrap > .stage3d,.bl-wrap > .bl-2d{grid-column:1;grid-row:1;min-height:220px}
.bl-hud{grid-column:1;grid-row:2}
.bl-side{grid-column:2;grid-row:1 / span 2;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  padding:9px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.bl-2d{display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,
  rgba(215,111,150,.16),transparent 70%);border-radius:var(--r)}
.bl-css{--r:0;font-family:var(--emoji);line-height:1;
  font-size:calc(70px + var(--r) * 130px);
  filter:drop-shadow(0 12px 30px rgba(215,111,150,.45));
  transition:font-size .3s cubic-bezier(.2,1.3,.35,1)}
.bl-css.pop{animation:blPop .45s forwards}
@keyframes blPop{to{transform:scale(2.2);opacity:0;filter:blur(9px)}}
.bl-meters{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:8px}
.bl-m{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:78px;
  padding:8px 12px;border-radius:13px;background:var(--surf-2);border:1px solid var(--line)}
.bl-m b{font-size:20px;font-weight:900;line-height:1.1}
.bl-m span{font-size:10.5px;color:var(--dim-2);font-weight:700}
.bl-m.pot b{color:var(--star)}
.bl-m.safe b{color:var(--ok)}
.bl-m.risk.hot{border-color:color-mix(in srgb,var(--bad) 55%,transparent);
  background:color-mix(in srgb,var(--bad) 14%,var(--surf-2));animation:pulse 1s infinite}
.bl-gauge{height:9px;border-radius:20px;background:rgba(255,255,255,.08);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.bl-gauge i{display:block;height:100%;border-radius:20px;transition:width .3s;
  background:linear-gradient(90deg,var(--ok),var(--star),var(--bad))}
.bl-gauge.hot{box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 0 14px rgba(201,138,180,.5)}
.bl-p{--pb-acc:var(--p2);display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:11px;
  background:var(--surf-2);border:1px solid var(--line);font-size:11.5px;transition:.25s}
.bl-p .av{width:24px;height:24px;font-size:12px;flex:0 0 auto}
.bl-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bl-b{font-style:normal;font-weight:900;color:var(--star);font-size:12px}
.bl-ok,.bl-pm{font-style:normal;font-size:11px;font-family:var(--emoji)}
.bl-p.safe{background:color-mix(in srgb,var(--ok) 13%,var(--surf-2));
  border-color:color-mix(in srgb,var(--ok) 42%,transparent)}
.bl-side.d2 .bl-p{padding:3px 6px;font-size:10.5px}
.bl-side.d2 .bl-p .av{width:20px;height:20px;font-size:10px}
.bl-pop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 20px;
  border-radius:var(--r);background:color-mix(in srgb,var(--bad) 12%,var(--surf));
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);text-align:center;
  animation:roIn .3s cubic-bezier(.2,1.25,.35,1)}
.bl-plead{font-size:15px;font-weight:800;color:var(--bad)}
.bl-pby{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.bl-pby .av{width:30px;height:30px;font-size:15px}
.bl-plost{font-size:12.5px;color:var(--txt)}
.bl-psave{font-size:11.5px;color:var(--ok)}
.bl-ppot{font-size:11.5px;color:var(--dim-2)}
@media(max-width:820px){
  .bl-wrap{grid-template-columns:minmax(0,1fr)}
  .bl-side{grid-column:1;grid-row:3;max-height:120px;flex-direction:row;flex-wrap:wrap}
  .bl-nm{max-width:70px}
}

/* ══════════════════════════════════════════════════════════════
   🎳 البولينج
   ══════════════════════════════════════════════════════════════ */
.bw-wrap{display:grid;grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:minmax(0,1fr) auto;
  gap:12px;width:100%;flex:1;min-height:0}
.bw-wrap > .stage3d,.bw-wrap > .bw-2d{grid-column:1;grid-row:1;min-height:230px}
.bw-hud{grid-column:1;grid-row:2}
.bw-board{grid-column:2;grid-row:1 / span 2;overflow-y:auto;display:flex;flex-direction:column;gap:5px;
  padding:9px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.bw-2d{display:grid;place-items:center}
.bw-fake{display:flex;flex-direction:column;align-items:center;gap:10px}
.bw-fk{font-size:34px;font-weight:900;color:var(--star)}
.bw-now{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:var(--r);
  background:var(--surf-2);border:1px solid var(--line)}
.bw-now .av{width:44px;height:44px;font-size:20px;flex:0 0 auto}
.bw-ntx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.bw-ntx b{font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw-ntx i{font-size:11px;color:var(--star);font-style:normal;font-weight:700}
.bw-aim{margin-inline-start:auto;display:flex;gap:12px;flex-wrap:wrap}
.bw-aim span{font-size:11.5px;color:var(--dim-2)}
.bw-aim b{color:var(--dim);font-weight:800}
.bw-aim.set b{color:var(--star)}
.bw-r{--pb-acc:var(--p2);display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:11px;
  background:var(--surf-2);border:1px solid var(--line);font-size:11.5px;transition:.25s}
.bw-rk{width:18px;text-align:center;font-weight:900;color:var(--dim-2);flex:0 0 auto}
.bw-r .av{width:24px;height:24px;font-size:12px;flex:0 0 auto}
.bw-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bw-st{font-style:normal;font-size:10px;font-family:var(--emoji)}
.bw-sc{font-weight:900;color:var(--star);font-size:12.5px}
.bw-r.now{background:color-mix(in srgb,var(--star) 15%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 50%,transparent)}
.bw-board.d2 .bw-r{padding:3px 6px;font-size:10.5px}
.bw-board.d2 .bw-r .av{width:20px;height:20px;font-size:10px}
@media(max-width:820px){
  .bw-wrap{grid-template-columns:minmax(0,1fr)}
  .bw-board{grid-column:1;grid-row:3;max-height:120px}
}

/* ══════════════════════════════════════════════════════════════
   ✌️ حجر ورقة مقص — المبارزة العمياء
   ══════════════════════════════════════════════════════════════ */
.rp-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:13px;
  width:100%;flex:1;min-height:0}
.rp-hand{font-size:15px;font-weight:700;color:var(--dim);text-align:center;min-height:24px}
.rp-hand b{color:var(--star)}
.rp-lock{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;width:100%}
.rp-p{--pb-acc:var(--p2);display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;
  border-radius:999px;background:var(--surf-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;max-width:180px;transition:.25s}
.rp-p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-p .av{width:24px;height:24px;font-size:12px}
.rp-p i{font-style:normal;font-family:var(--emoji);font-size:12px}
.rp-p.set{background:color-mix(in srgb,var(--ok) 14%,var(--surf-2));
  border-color:color-mix(in srgb,var(--ok) 48%,transparent)}
.rp-lock.d2 .rp-p{font-size:11px;max-width:146px;padding:4px 8px 4px 5px}
.rp-lock.d2 .rp-p .av{width:21px;height:21px}
.rp-lock.d3 .rp-p{font-size:0;padding:3px;gap:2px;max-width:none}
.rp-lock.d3 .rp-p .av{width:26px;height:26px;font-size:13px}
.rp-lock.d3 .rp-p i{font-size:11px}

.rp-duels{position:relative;display:grid;gap:10px;width:100%;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rp-duels.d2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.rp-duels.d3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}
.rp-d{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px;
  border-radius:14px;background:var(--surf-2);border:1px solid var(--line);
  animation:rpIn .34s cubic-bezier(.2,1.25,.35,1);
  animation-delay:calc(var(--k) * .05s)}
@keyframes rpIn{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
.rp-s{--pb-acc:var(--p2);flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:6px 4px;border-radius:11px;transition:.3s}
.rp-s .av{width:44px;height:44px;font-size:20px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 55%,transparent)}
.rp-duels.d3 .rp-s .av{width:34px;height:34px;font-size:16px}
.rp-nm{font-size:11.5px;font-weight:700;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rp-h{font-family:var(--emoji);font-size:26px;line-height:1;filter:grayscale(1);opacity:.5;
  transition:.3s}
.rp-h.show{filter:none;opacity:1;animation:rpRev .4s cubic-bezier(.2,1.4,.35,1)}
@keyframes rpRev{from{transform:scale(.4) rotate(-25deg)}to{transform:none}}
.rp-vs{font-size:12px;font-weight:900;color:var(--dim-2);font-family:var(--emoji);flex:0 0 auto}
.rp-s.win{background:color-mix(in srgb,var(--ok) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent)}
.rp-s.lose{background:color-mix(in srgb,var(--bad) 14%,transparent);opacity:.6}
.rp-s.lose .av{filter:grayscale(.75)}
.rp-s.draw{background:color-mix(in srgb,var(--star) 12%,transparent)}
.rp-bye,.rp-lazy{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:var(--dim-2);padding:6px;border-radius:10px;
  background:var(--surf-2);border:1px dashed var(--line-2)}
.rp-bye .av{width:22px;height:22px;font-size:11px}
.rp-bye b{color:var(--txt)}
.rp-out{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(4px);
  border-radius:var(--r);z-index:4}
.rp-out.on{display:flex;animation:roIn .28s cubic-bezier(.2,1.25,.35,1)}
.rp-oc{display:flex;flex-direction:column;align-items:center;gap:11px;padding:18px 24px;
  border-radius:var(--r);background:var(--surf);
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);max-width:94%}
.rp-olead{font-size:14px;font-weight:800;color:var(--bad)}
.rp-ofaces{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.rp-of{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:74px}
.rp-of .av{width:48px;height:48px;font-size:22px}
.rp-ox{position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);
  width:48px;height:48px;display:grid;place-items:center;font-size:30px;color:var(--bad);
  font-family:var(--emoji);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.rp-of b{font-size:11px;font-weight:700;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rp-omore{align-self:center;font-size:13px;font-weight:800;color:var(--dim)}
.rp-oleft{font-size:11.5px;color:var(--dim-2)}
.rp-oleft b{color:var(--txt)}

/* ══════════════════════════════════════════════════════════════
   🪢 شدّ الحبل — الحلبة ثلاثية الأبعاد
   ══════════════════════════════════════════════════════════════ */
.tg-wrap{display:flex;flex-direction:column;gap:11px;width:100%;flex:1;min-height:0}
.tg-wrap > .stage3d,.tg-wrap > .tg-2d{flex:1;min-height:220px}
.tg-2d{display:grid;place-items:center;border-radius:var(--r);
  background:radial-gradient(70% 60% at 50% 50%,rgba(201,141,141,.12),transparent 70%)}
.tg-bar{display:flex;height:34px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.tg-fill{display:flex;align-items:center;transition:width .5s cubic-bezier(.3,1,.4,1);
  font-size:12.5px;font-weight:800;overflow:hidden;white-space:nowrap}
.tg-fill span{padding:0 11px;font-family:var(--emoji)}
.tg-fill b{font-family:inherit}
.tg-fill.red{background:linear-gradient(90deg,#b8656f,#d0838d);color:#fff;justify-content:flex-start}
.tg-fill.blue{background:linear-gradient(90deg,#7fa0d8,#5f7fc0);color:#fff;justify-content:flex-end}
.tg-duel{display:flex;align-items:stretch;gap:10px;flex:0 0 auto}
.tg-s{--pb-acc:var(--p2);flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:10px 8px;border-radius:14px;background:var(--surf-2);
  border:1px solid var(--line);transition:.3s}
.tg-s .av{width:52px;height:52px;font-size:24px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 55%,transparent)}
.tg-nm{font-size:13px;font-weight:800;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tg-pl{font-size:11.5px;color:var(--dim-2);font-style:normal;font-family:var(--emoji)}
.tg-s.red{border-color:color-mix(in srgb,#c98d8d 40%,transparent)}
.tg-s.blue{border-color:color-mix(in srgb,#7fa0d8 40%,transparent)}
.tg-s.win{background:color-mix(in srgb,var(--ok) 16%,var(--surf-2));
  border-color:color-mix(in srgb,var(--ok) 55%,transparent);transform:translateY(-3px)}
.tg-s.lose{opacity:.55}
.tg-s.lose .av{filter:grayscale(.7)}
.tg-mid{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-align:center}
.tg-vs{font-family:var(--emoji);font-size:30px;line-height:1;
  animation:tgSway 1.4s ease-in-out infinite}
@keyframes tgSway{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.tg-mid span{font-size:10.5px;color:var(--dim-2);font-weight:700}
.tg-res{font-size:24px;font-weight:900;line-height:1}
.tg-res.red{color:#d0838d}
.tg-res.blue{color:#8fb0e8}
.tg-res.non{color:var(--dim-2)}
@media(max-width:700px){
  .tg-mid{flex-basis:82px}
  .tg-s .av{width:42px;height:42px;font-size:20px}
  .tg-nm{font-size:11.5px}
}

/* ══════════════════════════════════════════════════════════════
   🤝 تقاسم أو خيانة — مواجهة واحدة كبيرة وواضحة
   ══════════════════════════════════════════════════════════════ */
.bt2{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;flex:1;min-height:0}
.bt-pot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px;
  border-radius:16px;background:linear-gradient(165deg,
    color-mix(in srgb,#e0b64a 16%,var(--surf-2)),var(--surf-2));
  border:1px solid color-mix(in srgb,#e0b64a 40%,transparent);text-align:center}
.bt-chest{line-height:1}
.bt-amount{display:flex;align-items:baseline;gap:7px}
.bt-amount b{font-size:38px;font-weight:900;line-height:1;color:#e8c76a;
  text-shadow:0 3px 14px rgba(224,182,74,.35)}
.bt-amount span{font-size:12px;color:var(--dim);font-weight:700}
.bt-split{font-size:11px;color:var(--dim-2)}
.bt-split b{color:var(--txt);font-weight:800}

.bt-stage{display:flex;align-items:stretch;gap:12px;width:100%;max-width:760px}
.bt-big{--pb-acc:var(--p2);flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:4px;padding:13px 10px;border-radius:16px;background:var(--surf-2);
  border:1px solid var(--line);transition:.35s}
.bt-big.ready{border-color:color-mix(in srgb,var(--star) 50%,transparent)}
.bt-big.share{background:color-mix(in srgb,var(--ok) 13%,var(--surf-2));
  border-color:color-mix(in srgb,var(--ok) 52%,transparent)}
.bt-big.steal{background:color-mix(in srgb,var(--bad) 14%,var(--surf-2));
  border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.bt-av .av{width:72px;height:72px;font-size:33px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pb-acc) 55%,transparent)}
.bt-nm{font-size:15px;font-weight:800;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.bt-at{font-size:10.5px;color:var(--dim-2)}
.bt-rep{font-size:10.5px;font-style:normal;font-weight:800;padding:2px 9px;border-radius:999px}
.bt-rep.new{color:var(--dim-2);background:rgba(255,255,255,.05)}
.bt-rep.good{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.bt-rep.evil{color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent)}
.bt-rep.mid{color:var(--star);background:color-mix(in srgb,var(--star) 14%,transparent)}
.bt-card{display:flex;flex-direction:column;align-items:center;gap:1px;margin-top:5px;
  padding:9px 16px;border-radius:13px;background:rgba(0,0,0,.24);min-width:104px}
.bt-card span{font-size:11.5px;font-weight:800;color:var(--dim)}
.bt-card.flip{animation:btFlip .5s cubic-bezier(.2,1.3,.35,1)}
@keyframes btFlip{from{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.bt-big.share .bt-card span{color:var(--ok)}
.bt-big.steal .bt-card span{color:var(--bad)}
.bt-gain{font-size:22px;font-weight:900;line-height:1.2}
.bt-gain.pos{color:var(--ok)}
.bt-gain.neg{color:var(--bad)}
.bt-gain.zero{color:var(--dim-2)}
.bt-total{font-size:10.5px;color:var(--dim-2)}
.bt-total b{color:var(--star);font-weight:800}
.bt-mid{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;text-align:center}
.bt-icon{font-family:var(--emoji);font-size:34px;line-height:1}
.bt-icon.vs{font-size:26px;opacity:.7;animation:tgSway 2s ease-in-out infinite}
.bt-sub{font-size:10.5px;color:var(--dim-2);font-weight:700}

.bt-keys{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.bt-board{display:grid;gap:5px;width:100%;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.bt-board.d2{grid-template-columns:repeat(auto-fill,minmax(126px,1fr))}
.bt-br{--pb-acc:var(--p2);display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:10px;
  background:var(--surf-2);border:1px solid var(--line);font-size:11.5px;transition:.25s}
.bt-rk{width:15px;text-align:center;font-weight:900;color:var(--dim-2);flex:0 0 auto}
.bt-br .av{width:22px;height:22px;font-size:11px;flex:0 0 auto}
.bt-bn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.bt-bv{font-weight:900;color:var(--star)}
.bt-bv.neg{color:var(--bad)}
.bt-br.now{background:color-mix(in srgb,var(--star) 15%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 50%,transparent)}
@media(max-width:700px){
  .bt-mid{flex-basis:64px}
  .bt-av .av{width:56px;height:56px;font-size:26px}
  .bt-amount b{font-size:30px}
  .bt-card{min-width:84px;padding:7px 10px}
}

/* ══════════════════════════════════════════════════════════════
   🔒 وضع «مسجَّل بلا اشتراك» — يتصفّح كل شيء ولا يشغّل شيئاً
   ══════════════════════════════════════════════════════════════ */
.lk-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;border-radius:var(--r);
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--p3) 13%,var(--surf)),var(--surf));
  border:1px solid color-mix(in srgb,var(--p3) 34%,transparent);
}
.lk-b1{font-size:13.5px;font-weight:800;color:var(--txt)}
.lk-b2{font-size:11.5px;color:var(--dim);flex:1;min-width:180px}
.lk-bar .btn{flex:0 0 auto}

/* البطاقة المقفلة: تبقى جميلة ومقروءة، والقفل واضح */
.gcard.locked{cursor:pointer}
.gcard.locked .gc-orb{filter:none;opacity:1}
.gcard.locked .gc-b{color:var(--txt)}
.gcard.locked .gc-d{opacity:1}
.gcard.locked .gc-go{opacity:1}
.gcard.locked::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:transparent;
}
.gcard.locked:hover{transform:translateY(-2px)}
.gcard.locked:hover .gc-orb{filter:none;opacity:1}
.gc-lock{
  position:absolute;inset-block-start:9px;inset-inline-start:9px;z-index:3;
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--p3) 42%,transparent);
  font-family:var(--emoji);font-size:14px;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}

/* نافذة القفل */
.lk-note{text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px}
.lk-ico{position:relative;line-height:1}
.lk-pad{
  position:absolute;inset-block-end:-4px;inset-inline-end:-10px;
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:var(--surf-2);border:1px solid color-mix(in srgb,var(--p3) 45%,transparent);
  font-family:var(--emoji);
}
.lk-btns{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* أدوات المذيع لا معنى لها بلا اشتراك */
body.locked #btnStart,
body.locked #btnStop,
body.locked #btnGCfg,
body.locked .conn,
body.locked #btnResults{display:none !important}

/* ══════════════════════════════════════════════════════════════
   👁️ أسماء أكبر — المشاهد يقرأها من شاشة الجوّال أثناء البث
   تُطبَّق فوق كل ما سبق، ولعبةً لعبة
   ══════════════════════════════════════════════════════════════ */
.pb-name       {font-size:19px;font-weight:900;letter-spacing:-.2px;line-height:1.25}
.pb.sm .pb-name{font-size:16px;max-width:170px}
.pb.big .pb-name{font-size:38px;line-height:1.15}
.pb-at         {font-size:12.5px}
.pb.big .pb-at {font-size:15px}
.pb.has-banner .pb-name{font-size:19px}
.pb.big.has-banner .pb-name{font-size:38px}
.pb.sm.has-banner .pb-name{font-size:16px}

/* الروليت */
.rt-list{--rt-nm:16px}
.rt-list.d2{--rt-nm:15px}
.rt-list.d3{--rt-nm:13.5px}
.rt-list.d4{--rt-nm:12.5px}
.rt-list.d4 .rt-chip{width:118px}
.rt-list.d3 .rt-chip{width:142px}

/* حجر ورقة مقص */
.rp-nm{font-size:15px;font-weight:800}
.rp-duels.d3 .rp-nm{font-size:13px}
.rp-p{font-size:14.5px}
.rp-lock.d2 .rp-p{font-size:13.5px;max-width:180px}
.rp-of b{font-size:14px}
.rp-olead{font-size:17px}

/* شدّ الحبل */
.tg-nm{font-size:19px;font-weight:900}
.tg-res{font-size:30px}

/* تقاسم أو خيانة */
.bt-nm{font-size:21px;font-weight:900}
.bt-at{font-size:12.5px}
.bt-rep{font-size:12px}
.bt-card span{font-size:14px;font-weight:900}
.bt-gain{font-size:28px}
.bt-bn{font-size:13.5px}
.bt-bv{font-size:14px}

/* كلمة بحرف */
.ch-c{font-size:15px;max-width:220px}
.ch-c .av{width:30px;height:30px;font-size:15px}
.ch-list.d2 .ch-c{font-size:13.5px;max-width:180px}
.ch-list.d2 .ch-c .av{width:26px;height:26px}
.ch-list.d3 .ch-c{font-size:12px;max-width:150px;padding:4px 9px 4px 5px;gap:6px}
.ch-list.d3 .ch-c .av{width:24px;height:24px;font-size:12px}
.ch-ntx b{font-size:19px}
.ch-bname{font-size:26px}
.ch-bword{font-size:38px}

/* الكراسي الموسيقية */
.mc-f b{font-size:16px}
.mc-lead{font-size:19px}

/* البولينج */
.bw-ntx b{font-size:21px}
.bw-nm{font-size:14px}
.bw-sc{font-size:15px}

/* نفخة الحظّ */
.bl-nm{font-size:14px}
.bl-b{font-size:14px}

/* الشريط الجانبي والصفوف العامة */
.w-tag{font-size:19px}
.g-sub{font-size:17px}
.wl{font-size:19px}
.hero .big{letter-spacing:-1px}

@media(max-width:900px){
  .pb-name{font-size:16px}
  .pb.big .pb-name{font-size:28px}
  .bt-nm,.tg-nm{font-size:16px}
  .ch-bword{font-size:30px}
}

/* مسارات البولينج التسعة في الشريط العلوي */
.bw-lanes{margin-inline-start:auto;display:flex;gap:5px}
.bw-lanes i{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-style:normal;font-size:14px;font-weight:800;color:var(--dim-2);
  background:var(--surf);border:1px solid var(--line);transition:.2s;
}
.bw-lanes i.mid{color:var(--star);border-color:color-mix(in srgb,var(--star) 40%,transparent)}
.bw-lanes i.on{
  color:#15161c;background:var(--star);border-color:var(--star);
  transform:translateY(-3px) scale(1.12);
  box-shadow:0 4px 12px color-mix(in srgb,var(--star) 45%,transparent);
}
@media(max-width:820px){ .bw-lanes i{width:25px;height:25px;font-size:12px} }

/* ── الكراسي الموسيقية: مشهد 3D + شريط + مشغّل أغنية ── */
.mc-3d,.mc-flat{flex:1;min-height:240px;width:100%;border-radius:var(--r)}
.mc-flat{display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 45%,rgba(211,160,94,.14),transparent 70%)}
.mc-music{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 11px;
  border-radius:var(--r-md);background:var(--surf-2);border:1px solid var(--line);
}
.mm-ico{font-family:var(--emoji);flex:0 0 auto}
.mc-music input[type=url]{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:9px;padding:6px 10px;font-size:12px;
}
.mc-music input[type=url]:focus{outline:none;border-color:var(--p3)}
.mm-file{
  flex:0 0 auto;cursor:pointer;padding:6px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);font-family:var(--emoji);font-size:14px;
}
.mm-file:hover{border-color:var(--p3)}
.mm-state{font-size:11px;color:var(--dim-2);flex:0 0 auto;max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-state.ok{color:var(--ok)}
.mm-state.bad{color:var(--bad)}
@media(max-width:760px){
  .mc-music{flex-wrap:wrap}
  .mc-music input[type=url]{min-width:140px}
}

/* ══════════════════════════════════════════════════════════════
   🧩 تخطيط مستقل لكل نوع لعبة — لا تتشابه صفحتان
   arena · board · duel · strip · lane · feed
   ══════════════════════════════════════════════════════════════ */

/* ── arena: مسرح دائري، كل شيء يتمركز حول قلب اللعبة ── */
.lay-arena{--gw:920px;padding:14px 20px 22px}
.lay-arena .g-top{
  justify-content:center;text-align:center;flex-direction:column;gap:6px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.lay-arena .g-sub{font-size:18px}
.lay-arena .g-body{
  justify-content:center;
  background:radial-gradient(58% 52% at 50% 46%,
    color-mix(in srgb,var(--acc) 11%,transparent),transparent 72%);
}
.lay-arena .w-tag{text-align:center}

/* ── board: لوح مركزي كبير، والعنوان شريط علوي رفيع ── */
.lay-board{--gw:980px;padding:0 18px 18px}
.lay-board .g-top{
  position:sticky;top:0;z-index:3;margin-inline:-18px;padding:11px 22px;
  background:linear-gradient(180deg,var(--surf),color-mix(in srgb,var(--surf) 82%,transparent));
  border-bottom:1px solid var(--line-2);backdrop-filter:blur(6px);
}
.lay-board .g-body{justify-content:flex-start;padding-top:14px}
.lay-board .g-sub{font-size:16px;font-weight:800}

/* ── duel: الشاشة نصفان، وخطّ فاصل في المنتصف ── */
.lay-duel{--gw:1000px;padding:14px 20px 20px;position:relative}
.lay-duel::before{
  content:'';position:absolute;inset-block:56px 20px;inset-inline-start:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent);
  pointer-events:none;
}
.lay-duel .g-top{justify-content:center;text-align:center}
.lay-duel .g-body{justify-content:center;gap:14px}
.lay-duel .g-sub{font-size:17px}

/* ── strip: شريط أفقي، المحتوى يعلو من الأعلى ── */
.lay-strip{--gw:1000px;padding:12px 20px 20px}
.lay-strip .g-top{
  padding:9px 14px;border-radius:var(--r-md);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--acc) 14%,var(--surf-2)),var(--surf-2));
  border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);
}
.lay-strip .g-body{justify-content:flex-start;padding-top:16px;gap:14px}
.lay-strip .timer{height:6px}

/* ── lane: مشهد ممتدّ عرضاً، الشريط العلوي شفّاف فوقه ── */
.lay-lane{--gw:1080px;padding:0;gap:0}
.lay-lane .g-top{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:5;
  padding:12px 20px;background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg) 78%,transparent),transparent);
  pointer-events:none;
}
.lay-lane .g-top > *{pointer-events:auto}
.lay-lane .timer{position:absolute;inset-block-start:0;inset-inline:0;z-index:6;
  height:5px;border-radius:0}
.lay-lane .g-body{padding:56px 18px 16px;justify-content:stretch}
.lay-lane .g-sub{font-size:15px;text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ── feed: عمود ضيّق يقرأه المشاهد كقائمة ── */
.lay-feed{--gw:760px;padding:14px 20px 20px}
.lay-feed .g-top{
  flex-direction:column;align-items:flex-start;gap:5px;
  border-inline-start:3px solid var(--acc);padding-inline-start:12px;
}
.lay-feed .g-body{justify-content:flex-start;padding-top:14px;gap:10px}
.lay-feed .g-sub{font-size:16px}

/* خلفية المسرح تتلوّن بهوية التخطيط — فرق محسوس بين لعبة وأخرى */
body[data-lay="arena"] #stage{background:
  radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 60%),var(--surf)}
body[data-lay="board"] #stage{background:
  linear-gradient(180deg,color-mix(in srgb,var(--acc) 9%,var(--surf)),var(--surf))}
body[data-lay="duel"]  #stage{background:
  linear-gradient(90deg,color-mix(in srgb,var(--acc) 10%,var(--surf)),var(--surf) 45%,
    var(--surf) 55%,color-mix(in srgb,var(--p2) 10%,var(--surf)))}
body[data-lay="strip"] #stage{background:
  linear-gradient(160deg,color-mix(in srgb,var(--acc) 10%,var(--surf)),var(--surf) 55%)}
body[data-lay="lane"]  #stage{background:
  linear-gradient(180deg,var(--bg-2),var(--surf) 40%)}
body[data-lay="feed"]  #stage{background:
  linear-gradient(100deg,color-mix(in srgb,var(--acc) 8%,var(--surf)),var(--surf) 50%)}

@media(max-width:820px){
  .lay-duel::before{display:none}
  .lay-lane .g-body{padding-top:64px}
  .lay-arena,.lay-board,.lay-duel,.lay-strip,.lay-feed{padding-inline:12px}
}

/* ══════════════════════════════════════════════════════════════
   🎱 بينغو — قاعة كرات وبطاقات
   ══════════════════════════════════════════════════════════════ */
.lay-hall{--gw:1060px;padding:0 18px 16px}
.lay-hall .g-top{
  padding:10px 18px;margin-inline:-18px;
  background:linear-gradient(180deg,color-mix(in srgb,#e0b64a 12%,var(--surf)),transparent);
  border-bottom:1px solid color-mix(in srgb,#e0b64a 24%,transparent);
}
.lay-hall .g-body{justify-content:flex-start;padding-top:12px;gap:12px}
body[data-lay="hall"] #stage{background:
  radial-gradient(90% 60% at 50% 0%,rgba(224,182,74,.13),transparent 60%),var(--surf)}

.bg-wrap{display:flex;flex-direction:column;gap:12px;width:100%;flex:1;min-height:0}
.bg-stage{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bg-ball{
  flex:0 0 auto;width:118px;height:118px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#fff6dc,#e0b64a 52%,#9a7420);
  box-shadow:0 10px 30px rgba(224,182,74,.32),inset 0 -8px 18px rgba(0,0,0,.28);
  border:2px solid rgba(255,255,255,.35);
}
.bg-ball span{font-size:46px;font-weight:900;color:#3a2a06;line-height:1}
.bg-ball.pop{animation:bgPop .5s cubic-bezier(.2,1.5,.35,1)}
@keyframes bgPop{0%{transform:scale(.35) rotate(-30deg);opacity:0}
  60%{transform:scale(1.14) rotate(6deg)}100%{transform:none;opacity:1}}
.bg-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px}
.bg-drawn{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.bg-drawn i{
  font-style:normal;min-width:28px;height:28px;padding:0 6px;border-radius:8px;
  display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--surf-2);border:1px solid var(--line);color:var(--dim);
}
.bg-drawn i.now{background:#e0b64a;color:#2a1f06;border-color:#e0b64a;
  box-shadow:0 3px 10px rgba(224,182,74,.4)}
.bg-count{font-size:11.5px;color:var(--dim-2);margin-inline-start:6px}

.bg-close{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.bg-card{
  --pb-acc:var(--p2);
  padding:9px;border-radius:14px;background:var(--surf-2);
  border:1px solid var(--line);transition:.25s;
}
.bg-card.hot{border-color:color-mix(in srgb,#e0b64a 60%,transparent);
  background:color-mix(in srgb,#e0b64a 10%,var(--surf-2));
  box-shadow:0 0 0 1px color-mix(in srgb,#e0b64a 30%,transparent)}
.bg-card.won{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,var(--surf-2))}
.bg-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.bg-head .av{width:26px;height:26px;font-size:13px;flex:0 0 auto}
.bg-head b{flex:1;min-width:0;font-size:14px;font-weight:800;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-head i{font-size:11px;font-style:normal;color:var(--star);font-weight:800}
.bg-grid{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.bg-grid span{
  aspect-ratio:1;border-radius:8px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:var(--dim);
  background:var(--panel);border:1px solid var(--line);transition:.2s;
}
.bg-grid span.on{
  background:linear-gradient(160deg,#f5dc93,#e0b64a);
  border-color:#e0b64a;transform:scale(.94);
}
.bg-all{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bg-mini{
  --pb-acc:var(--p2);display:flex;align-items:center;gap:6px;
  padding:4px 9px 4px 5px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--surf-2);border:1px solid var(--line);max-width:190px;
}
.bg-mini .av{width:24px;height:24px;font-size:12px;flex:0 0 auto}
.bg-mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bg-mini b{font-size:12px;color:var(--star);flex:0 0 auto}
.bg-mini.hot{border-color:color-mix(in srgb,#e0b64a 55%,transparent);
  background:color-mix(in srgb,#e0b64a 12%,var(--surf-2))}
.bg-all.d2 .bg-mini{font-size:11.5px;max-width:150px;padding:3px 7px 3px 4px}
.bg-all.d2 .bg-mini .av{width:20px;height:20px;font-size:10px}

/* ══════════════════════════════════════════════════════════════
   🔺 أعلى أم أقل — ورقتان تنقلبان
   ══════════════════════════════════════════════════════════════ */
.lay-flip{--gw:900px;padding:16px 20px 20px}
.lay-flip .g-top{justify-content:center;text-align:center;flex-direction:column;gap:4px}
.lay-flip .g-body{justify-content:center;gap:16px}
body[data-lay="flip"] #stage{background:
  linear-gradient(180deg,color-mix(in srgb,#6fb5a8 10%,var(--surf)),var(--surf) 55%)}

.hi-wrap{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:14px;width:100%;flex:1;min-height:0}
.hi-cards{display:flex;align-items:center;gap:18px}
.hi-card{
  width:150px;height:200px;border-radius:18px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(165deg,var(--surf-2),var(--panel));
  border:1px solid var(--line-2);box-shadow:0 10px 28px rgba(0,0,0,.32);
}
.hi-card b{font-size:64px;font-weight:900;line-height:1;letter-spacing:-2px}
.hi-card span{font-size:12px;color:var(--dim-2);font-weight:700}
.hi-card.cur b{color:var(--txt)}
.hi-card.next b{color:var(--dim-2)}
.hi-card.next.shown{border-color:color-mix(in srgb,#6fb5a8 55%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,#6fb5a8 16%,var(--surf-2)),var(--panel))}
.hi-card.next.shown b{color:#8fd9c9}
.hi-card.flip{animation:hiFlip .55s cubic-bezier(.2,1.3,.35,1)}
@keyframes hiFlip{0%{transform:rotateY(90deg) scale(.85);opacity:.2}100%{transform:none;opacity:1}}
.hi-vs{display:flex;flex-direction:column;gap:8px;align-items:center}
.hi-vs i{
  font-style:normal;font-size:14px;font-weight:800;padding:7px 14px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line);white-space:nowrap;
}
.hi-up{color:#8fd9c9;border-color:color-mix(in srgb,#6fb5a8 40%,transparent) !important}
.hi-dn{color:#e8a0b4;border-color:color-mix(in srgb,var(--bad) 40%,transparent) !important}
.hi-trail{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.hi-trail i{
  font-style:normal;min-width:32px;height:26px;padding:0 7px;border-radius:8px;
  display:grid;place-items:center;font-size:12.5px;font-weight:800;
  background:var(--surf-2);border:1px solid var(--line);
}
.hi-trail i.up{color:#8fd9c9;border-color:color-mix(in srgb,#6fb5a8 35%,transparent)}
.hi-trail i.dn{color:#e8a0b4;border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.hi-trail i.tie{color:var(--star)}
.hi-people{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;width:100%}
.hi-p{
  --pb-acc:var(--p2);display:flex;align-items:center;gap:6px;
  padding:4px 9px 4px 5px;border-radius:999px;font-size:14px;font-weight:700;
  background:var(--surf-2);border:1px solid var(--line);max-width:200px;transition:.2s;
}
.hi-p .av{width:26px;height:26px;font-size:13px;flex:0 0 auto}
.hi-p span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-p i{font-style:normal;font-family:var(--emoji);font-size:13px;flex:0 0 auto}
.hi-st{font-style:normal;font-size:11px;color:var(--star);flex:0 0 auto}
.hi-p.set{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.hi-people.d2 .hi-p{font-size:12.5px;max-width:160px;padding:3px 8px 3px 4px}
.hi-people.d2 .hi-p .av{width:22px;height:22px;font-size:11px}
.hi-people.d3 .hi-p{font-size:0;padding:3px;gap:3px;max-width:none}
.hi-people.d3 .hi-p .av{width:26px;height:26px;font-size:13px}
.hi-people.d3 .hi-st{display:none}
.hi-out{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(4px);
  border-radius:var(--r);z-index:4}
.hi-out.on{display:flex;animation:roIn .28s cubic-bezier(.2,1.25,.35,1)}
.hi-oc{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 24px;
  border-radius:var(--r);background:var(--surf);
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);max-width:94%}
.hi-olead{font-size:17px;font-weight:800;color:var(--bad)}
.hi-ofaces{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hi-of{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:76px}
.hi-of .av{width:48px;height:48px;font-size:22px}
.hi-ox{position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%);
  width:48px;height:48px;display:grid;place-items:center;font-size:30px;color:var(--bad);
  font-family:var(--emoji);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hi-of b{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi-omore{align-self:center;font-size:13px;font-weight:800;color:var(--dim)}
.hi-oleft{font-size:12px;color:var(--dim-2)}
.hi-oleft b{color:var(--txt)}

@media(max-width:760px){
  .hi-card{width:112px;height:150px}
  .hi-card b{font-size:44px}
  .bg-ball{width:92px;height:92px}
  .bg-ball span{font-size:36px}
}

/* ── نفخة الحظّ: المشهد يملأ الصفحة والعدّادات تطفو فوقه ── */
.bl-wrap{display:flex;flex-direction:column;gap:0;width:100%;flex:1;min-height:0;position:relative}
.bl-wrap > .stage3d,.bl-wrap > .bl-2d{flex:1;min-height:260px;width:100%}
.bl-over{
  position:absolute;inset-block-start:8px;inset-inline-start:12px;z-index:3;
  display:flex;flex-direction:column;gap:8px;width:min(280px,42%);
  padding:12px 14px;border-radius:16px;
  background:color-mix(in srgb,var(--bg) 62%,transparent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid color-mix(in srgb,#d76f96 26%,transparent);
}
.bl-pot{display:flex;align-items:baseline;gap:8px}
.bl-pot b{font-size:42px;font-weight:900;line-height:1;color:#f0c46a;
  text-shadow:0 3px 16px rgba(240,196,106,.32)}
.bl-pot span{font-size:12px;color:var(--dim);font-weight:700}
.bl-meters{display:flex;gap:8px}
.bl-m{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:6px 4px;border-radius:11px;background:rgba(255,255,255,.05)}
.bl-m b{font-size:20px;font-weight:900;line-height:1.1}
.bl-m span{font-size:10px;color:var(--dim-2);font-weight:700}
.bl-m.safe b{color:var(--ok)}
.bl-m.risk.hot{background:color-mix(in srgb,var(--bad) 20%,transparent);animation:pulse 1s infinite}
.bl-rail{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:3;
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;
  padding:9px 12px;max-height:34%;overflow-y:auto;
  background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 84%,transparent),transparent);
}
.bl-rail .bl-p{width:auto;max-width:190px}
.bl-rail .bl-nm{max-width:110px}
.bl-rail.d2 .bl-nm{max-width:80px}
.bl-pop{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);z-index:4;min-width:min(420px,86%)}
@media(max-width:820px){
  .bl-over{width:auto;inset-inline:8px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .bl-pot b{font-size:30px}
}

/* ══════════════════════════════════════════════════════════════
   💬 الشات الجانبي أثناء اللعب + عدّاد المشاهدين
   ══════════════════════════════════════════════════════════════ */
.ch-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.ch-live{font-size:11.5px;color:var(--dim-2);font-weight:700}
.ch-auto{font-size:11px;color:var(--dim-2);display:flex;align-items:center;gap:5px;cursor:pointer}
.ch-auto input{accent-color:var(--p3)}
.chat-feed{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:4px;padding:9px;
}
.cf-row{
  --pb-acc:var(--p2);
  display:flex;align-items:flex-start;gap:8px;padding:6px 9px;border-radius:11px;
  background:var(--surf-2);border:1px solid transparent;
  animation:cfIn .22s ease-out;
}
@keyframes cfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cf-row .av{width:26px;height:26px;font-size:13px;flex:0 0 auto;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 45%,transparent)}
.cf-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cf-tx b{font-size:12.5px;font-weight:800;color:color-mix(in srgb,var(--pb-acc) 70%,var(--txt));
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-tx span{font-size:13.5px;color:var(--txt);word-break:break-word}
.cf-row.cf-ev{background:color-mix(in srgb,var(--star) 12%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 32%,transparent)}
.cf-row.cf-ev.gift{background:color-mix(in srgb,#e0b64a 14%,var(--surf-2));
  border-color:color-mix(in srgb,#e0b64a 38%,transparent)}
.cf-row.cf-ev .cf-tx span{color:var(--star);font-weight:700}

/* عدّاد المشاهدين ينبض حين يكون البثّ حيّاً */
#sbViewers.live b{color:var(--ok)}
#sbViewers.live::after{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--ok);
  margin-inline-start:5px;animation:pulse 1.6s infinite;
}

/* إخفاء اللوحة الجانبية بضغطة */
body.no-side #layout{grid-template-columns:minmax(0,1fr)}
body.no-side #rail{display:none}
#btnSide{opacity:.55;transition:.2s}
#btnSide.on{opacity:1;color:var(--star)}
body:not(.playing) #btnSide{display:none}

/* ── تجديد اللاعبين بين الجولات ── */
.lb-sub{display:block;font-size:12px;color:var(--dim-2);font-style:normal;margin-top:4px}
.renew{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;flex:1;text-align:center;padding:22px}
.rn-ic{line-height:1}
.renew h2{font-size:26px;font-weight:900}
.renew p{font-size:15px;color:var(--dim)}
.renew p b{color:var(--star);font-size:19px}
.rn-count{display:flex;align-items:baseline;gap:7px}
.rn-count b{font-size:44px;font-weight:900;color:var(--star);line-height:1}
.rn-count span{font-size:13px;color:var(--dim-2);font-weight:700}
.rn-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:760px}

/* ══════════════════════════════════════════════════════════════════════
   ✨ طبقة الصقل — رفع مستوى الواجهة بلا تغيير في البنية
   ارتفاعات متدرّجة · حوافّ متوهّجة · زجاج · حركة هادئة
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* ظلال متدرّجة بدل ظلّ واحد ثقيل */
  --sh-1:0 1px 2px rgba(4,6,20,.4);
  --sh-2:0 2px 6px rgba(4,6,20,.34), 0 8px 20px rgba(4,6,20,.28);
  --sh-3:0 4px 12px rgba(4,6,20,.36), 0 18px 44px rgba(4,6,20,.36);
  --sh-glow:0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent),
            0 10px 34px color-mix(in srgb,var(--acc) 22%,transparent);
  --ring:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent);
  --ease:cubic-bezier(.22,1,.36,1);
}

::selection{background:color-mix(in srgb,var(--p3) 42%,transparent);color:#fff}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(160,150,240,.28),rgba(110,150,220,.2));
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{background:rgba(180,170,255,.4)}

/* حبيبات خفيفة جداً تكسر سطوح اللون المسطّحة */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* نرفع الواجهة فوق طبقة الحبيبات — أمّا #landing و .modal فطبقتان
   ثابتتان (position:fixed) بمنسوبهما الخاص، وإقحامهما هنا كان يعيد
   تموضعهما داخل التدفّق فيطلع الشريط العلوي والمسرح من خلفهما */
#topbar,#layout{position:relative;z-index:1}

/* ══════════ الشريط العلوي: زجاج أعمق وخيط ضوئي ══════════ */
#topbar{
  background:linear-gradient(180deg,rgba(16,19,42,.9),rgba(16,19,42,.72));
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid transparent;
  box-shadow:0 1px 0 rgba(160,170,255,.09), 0 8px 28px rgba(4,6,20,.34);
}
#topbar::after{
  content:'';position:absolute;inset-block-end:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--p3) 55%,transparent) 30%,
    color-mix(in srgb,var(--p2) 55%,transparent) 70%,transparent);
  opacity:.55;
}
.brand-logo{
  position:relative;
  box-shadow:0 4px 14px rgba(140,120,220,.28), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.brand:hover .brand-logo{
  transform:translateY(-1px) rotate(-4deg);
  box-shadow:0 8px 22px rgba(140,120,220,.42), inset 0 1px 0 rgba(255,255,255,.18);
}
.brand-text b{
  background:linear-gradient(100deg,#e9e6ff,#bcd4f5 55%,#cfc2ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.4px;
}
.brand-text .dot{color:var(--p3);-webkit-text-fill-color:var(--p3)}

/* ══════════ الأزرار ══════════ */
.btn{
  transition:background .2s var(--ease), border-color .2s var(--ease),
             transform .16s var(--ease), box-shadow .2s var(--ease);
  box-shadow:var(--sh-1);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{
  background:var(--brand-gradient);
  border:1px solid color-mix(in srgb,var(--p3) 55%,transparent);
  box-shadow:0 4px 14px color-mix(in srgb,var(--p1) 36%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  color:var(--bg);font-weight:900;
}
.btn-primary:hover{
  background:var(--brand-gradient);
  box-shadow:0 8px 24px color-mix(in srgb,var(--p1) 46%,transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
  filter:brightness(1.06);
}
.btn-icon{border-radius:12px}
.btn-icon.on{
  background:color-mix(in srgb,var(--p3) 16%,transparent);
  border-color:color-mix(in srgb,var(--p3) 36%,transparent);
}

/* ══════════ الحقول ══════════ */
.field,.cfg-f input,.cfg-f select,.mc-music input[type=url]{
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field:focus-within,.cfg-f input:focus,.cfg-f select:focus{
  border-color:color-mix(in srgb,var(--p3) 60%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p3) 16%,transparent);
  outline:none;
}

/* ══════════ بطاقات الألعاب — القلب البصري للموقع ══════════ */
.home-grid{gap:13px}
.gcard{
  padding:16px 16px 14px;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb,var(--acc) 13%,transparent), transparent 62%),
    linear-gradient(168deg, var(--surf-2), var(--surf) 65%);
  border:1px solid color-mix(in srgb,var(--acc) 16%,var(--line));
  box-shadow:var(--sh-2);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
/* حافّة متوهّجة تظهر عند المرور */
.gcard::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--brand-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:1;transition:opacity .3s var(--ease);pointer-events:none;
}
.gcard:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-3), 0 0 34px color-mix(in srgb,var(--acc) 20%,transparent);
  border-color:transparent;
}
.gcard:hover::before{opacity:1}
.gc-glow{
  height:88px;
  background:radial-gradient(80% 100% at 20% 0%,
    color-mix(in srgb,var(--acc) 20%,transparent), transparent 70%);
}
.gc-orb{
  width:56px;height:56px;border-radius:19px;
  background:var(--brand-gradient);
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             0 6px 18px color-mix(in srgb,var(--acc) 20%,transparent);
}
.gcard:hover .gc-orb{transform:scale(1.09) rotate(-5deg)}
.gc-orb .emo{font-size:28px}
.gc-b{font-size:16.5px;font-weight:900;letter-spacing:-.3px}
.gc-d{font-size:12.5px;line-height:1.6;color:var(--dim)}
.gc-3d{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--p2) 26%,transparent), color-mix(in srgb,var(--p3) 20%,transparent));
  color:#bcd9e6;border:1px solid color-mix(in srgb,var(--p2) 26%,transparent);
}
.gc-new{
  background:var(--brand-gradient);color:var(--bg);
  box-shadow:0 3px 10px color-mix(in srgb,var(--p3) 40%,transparent);
  padding:3px 9px;font-size:9.5px;letter-spacing:.2px;
}
.gc-go{font-size:11.5px}

/* ══════════ الترويسة الرئيسية ══════════ */

/* ══════════ المسرح ══════════ */
#stage{box-shadow:var(--sh-3)}
#stageBar{
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  box-shadow:var(--sh-2);
}
#rail{box-shadow:var(--sh-2)}

/* التبويبات: قرص منزلق */
.tabs{position:relative;gap:4px;padding:8px 8px 0}
.tab{
  border-radius:11px 11px 0 0;transition:.2s var(--ease);
  border-bottom:2px solid transparent;
}
.tab.active{
  background:color-mix(in srgb,var(--p3) 13%,transparent);
  border-bottom-color:var(--p3);
  color:var(--txt);
}

/* ══════════ البطاقات الشخصية ══════════ */
.pb{box-shadow:var(--sh-1);transition:transform .22s var(--ease), box-shadow .22s var(--ease)}
.pb:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.pb.big{box-shadow:var(--sh-3)}

/* ══════════ النوافذ ══════════ */
.modal-box{
  box-shadow:0 30px 90px rgba(2,4,16,.7), 0 0 0 1px rgba(160,170,255,.1);
  border-radius:22px;
}
.modal-back{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ══════════ الواجهة العامة ══════════ */
.ld-hero{position:relative}
.ld-hero::before{
  content:'';position:absolute;inset-block-start:-60px;inset-inline-start:50%;
  transform:translateX(-50%);width:min(760px,92%);height:340px;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(169,123,255,.16),transparent 70%),
    radial-gradient(closest-side at 70% 40%,rgba(49,225,255,.10),transparent 70%);
  filter:blur(6px);
}
.ld-hero h1{
  background:linear-gradient(100deg,#f4f1ff,#c9dcf8 48%,#dccdff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-1.4px;
}
.ld-hero h1 span{
  background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ld-pill{
  background:var(--panel-2);border:1px solid color-mix(in srgb,var(--p3) 26%,transparent);
  box-shadow:0 4px 16px rgba(4,6,20,.3);
}
.ld-p{
  background:linear-gradient(168deg,var(--surf-2),var(--surf));
  box-shadow:var(--sh-2);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
.ld-p:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.ld-p.hot{
  border-color:color-mix(in srgb,var(--star) 55%,transparent);
  box-shadow:var(--sh-3), 0 0 32px color-mix(in srgb,var(--star) 10%,transparent);
}

/* ══════════ حركات الدخول ══════════ */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lk-bar{animation:riseIn .4s var(--ease)}
.home-grid .gcard{animation:riseIn .42s var(--ease)}
.home-grid .gcard:nth-child(1){animation-delay:.02s}
.home-grid .gcard:nth-child(2){animation-delay:.04s}
.home-grid .gcard:nth-child(3){animation-delay:.06s}
.home-grid .gcard:nth-child(4){animation-delay:.08s}
.home-grid .gcard:nth-child(5){animation-delay:.10s}
.home-grid .gcard:nth-child(6){animation-delay:.12s}
.home-grid .gcard:nth-child(7){animation-delay:.14s}
.home-grid .gcard:nth-child(8){animation-delay:.16s}
.home-grid .gcard:nth-child(9){animation-delay:.18s}
.home-grid .gcard:nth-child(10){animation-delay:.20s}
.home-grid .gcard:nth-child(11){animation-delay:.22s}
.home-grid .gcard:nth-child(12){animation-delay:.24s}
.home-grid .gcard:nth-child(13){animation-delay:.26s}
.home-grid .gcard:nth-child(14){animation-delay:.28s}
.home-grid .gcard:nth-child(15){animation-delay:.30s}
.home-grid .gcard:nth-child(16){animation-delay:.32s}
.home-grid .gcard:nth-child(17){animation-delay:.34s}
.home-grid .gcard:nth-child(18){animation-delay:.36s}
.home-grid .gcard:nth-child(19){animation-delay:.38s}
.home-grid .gcard:nth-child(20){animation-delay:.40s}
.home-grid .gcard:nth-child(n+21){animation-delay:.40s}

/* من أطفأ حركةَ النظام (إعدادات الوصول في ويندوز، أو موفّر الطاقة)
   كان يرى الموقعَ «مسرَّعاً»: كل انتقالٍ يقفز في جزءٍ من ألفٍ من الثانية،
   والعجلةُ لا تدور أصلاً لأنّ دورانَها انتقالُ transform لا صورة.
   فنُهدّئ الزينةَ وحدها ونترك المسرح: حركتُه هي اللعبة نفسها. */
@media (prefers-reduced-motion: reduce){
  :not(#stageWrap):not(#stageWrap *),
  :not(#stageWrap):not(#stageWrap *)::before,
  :not(#stageWrap):not(#stageWrap *)::after{
    animation-duration:.01ms !important;transition-duration:.01ms !important;
  }
}

@media(max-width:900px){
  .gcard:hover{transform:translateY(-2px)}
}

/* ── الترويسة الرئيسية: الجانب الأيسر لم يعد فارغاً ── */

@media(max-width:900px){
}

/* ── إشعارات الانضمام: صغيرة وأسفل، لا تحجب اللعبة ──
   الشات الجانبي صار يعرضها بالتفصيل، فتكفي هنا لمسة خفيفة */
/* إعلان الدخول في وسط أعلى المسرح لا في زاويةٍ صغيرة — لحظةُ
   دخول اللاعب يجب أن تُرى، وبنره معها. */
#joinfeed{
  /* في وسط عرض المسرح وأسفله: يُرى بوضوح، ولا يغطّي اللعب،
     ولا يصطدم بشريط العنوان فوق المسرح */
  top:auto;inset-block-end:18px;
  inset-inline:0;margin-inline:auto;width:max-content;
  max-width:min(86%,620px);gap:9px;
  align-items:center;
  flex-direction:column-reverse;
}
.joincard{
  padding:10px 22px 10px 12px;gap:14px;
  min-height:64px;
  box-shadow:0 16px 40px rgba(0,0,0,.6),
             0 0 30px color-mix(in srgb,var(--pb-acc) 30%,transparent);
}
.joincard .av,.joincard .pb-av{width:48px !important;height:48px !important;font-size:22px !important}
.jc-tx b{font-size:19px !important}
.jc-tx span,.jc-tx i{font-size:12px !important}
@media(max-width:820px){
  #joinfeed{max-width:70%;inset-block-end:10px;inset-inline-start:10px}
}

/* ══════════════════════════════════════════════════════════════
   💬 لوحة الشات المباشر — عمود مستقلّ يسار الشاشة أثناء اللعب
   ══════════════════════════════════════════════════════════════ */
/* الأعمدة يحسمها App.layoutCols — هنا الإظهار والإخفاء فقط */
body:not(.playing) #chatpane{display:none}
body.no-chat #chatpane{display:none}

#chatpane{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--surf-2),var(--surf) 22%);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
}

.cp-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 13px 10px;flex:0 0 auto;
  border-bottom:1px solid var(--line);
}
.cp-title{display:flex;align-items:center;gap:7px;min-width:0}
.cp-title b{font-size:14px;font-weight:800;letter-spacing:-.2px}
.cp-n{
  font-style:normal;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--p3) 20%,transparent);color:var(--star);
}
.cp-x{
  flex:0 0 auto;width:26px;height:26px;border-radius:9px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim-2);
  font-size:12px;line-height:1;transition:.2s;
}
.cp-x:hover{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--txt)}

/* شريط المشاهدين */
.cp-live{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 13px;flex:0 0 auto;
  background:linear-gradient(180deg,color-mix(in srgb,var(--p2) 9%,transparent),transparent);
  border-bottom:1px solid var(--line);
}
.cp-eye{display:flex;align-items:baseline;gap:6px}
.cp-eye b{
  font-size:23px;font-weight:900;line-height:1;color:var(--dim-2);
  transition:color .3s;
}
.cp-eye i{font-style:normal;font-size:10.5px;color:var(--dim-2);font-weight:700}
.cp-eye.live b{
  background:linear-gradient(120deg,var(--ok),var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cp-eye.live::after{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);
  align-self:center;animation:pulse 1.6s infinite;
}
.cp-state{font-size:10.5px;color:var(--dim-2);font-weight:700;text-align:end}

.cp-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;flex:0 0 auto;border-top:1px solid var(--line);
}

/* المجرى نفسه */
#chatpane .chat-feed{padding:9px 10px}
#chatpane .cf-row{padding:7px 10px}

/* الزرّان في شريط المسرح */
#btnChat{opacity:.55;transition:.2s}
#btnChat.on{opacity:1;color:var(--star)}
body:not(.playing) #btnChat{display:none}

/* وضع العرض: الشات يبقى لأنه جزء من المشهد للمشاهد */
body.show-mode.playing #chatpane{background:rgba(8,9,20,.72)}

/* شاشات أضيق: الشات يصير أسفل المسرح */
@media(max-width:1240px){
  body.playing #chatpane{max-height:210px}
}
@media(max-width:820px){
  body.playing #chatpane{max-height:170px}
}

/* ══════════════════════════════════════════════════════════════
   ▶️ شاشة الاستعداد — المذيع يبدأ بنفسه في كل لعبة
   ══════════════════════════════════════════════════════════════ */
.ready{
  display:flex;flex-direction:column;gap:14px;width:100%;max-width:660px;
  margin:auto;padding:22px;border-radius:20px;
  background:linear-gradient(168deg,var(--surf-2),var(--surf));
  border:1px solid var(--line);box-shadow:var(--sh-3);
  animation:riseIn .35s var(--ease);
}
.rd-top{display:flex;align-items:center;gap:14px}
.rd-ic{flex:0 0 auto;line-height:1}
.rd-tx{flex:1;min-width:0}
.rd-tx h2{font-size:24px;font-weight:900;letter-spacing:-.5px}
.rd-tx p{font-size:13px;color:var(--dim);line-height:1.55;margin-top:2px}
.rd-n{
  flex:0 0 auto;text-align:center;padding:10px 16px;border-radius:15px;
  background:var(--panel-2);border:1px solid var(--line);
}
.rd-n b{
  display:block;font-size:30px;font-weight:900;line-height:1;
  background:linear-gradient(120deg,var(--p3),var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rd-n span{font-size:10.5px;color:var(--dim-2);font-weight:700}
.rd-extra:empty{display:none}
.rd-note{font-size:11.5px;color:var(--dim-2);margin-top:7px;line-height:1.6}
.rd-cfg{
  border-radius:14px;background:var(--panel);border:1px solid var(--line);overflow:hidden;
}
.rd-cfg > summary{
  cursor:pointer;padding:11px 14px;font-size:13px;font-weight:800;
  list-style:none;user-select:none;
}
.rd-cfg > summary::-webkit-details-marker{display:none}
.rd-cfg > summary:hover{background:var(--panel-2)}
.rd-cfg[open] > summary{border-bottom:1px solid var(--line)}
.rd-cfg #rdCfgBox{padding:12px 14px;max-height:min(46vh,380px);overflow-y:auto}
.rd-cfg .cfg-card{background:none;border:none;padding:0;box-shadow:none}
.rd-go{display:flex;gap:10px;align-items:center}
.rd-go .btn-lg{flex:1;justify-content:center}
.rd-hint{font-size:11.5px;color:var(--dim-2);text-align:center}

/* إطار يوتيوب المصغّر */
/* مشغّل الأغنية: يعيش على <body> ولا يُخفى أبداً بـ display:none —
   المتصفّح يُسكت أي إطار مخفيّ، فنزيحه خارج الشاشة بدل إخفائه. */
.mm-yt{
  position:fixed;z-index:80;inset-inline-start:16px;bottom:16px;width:300px;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:#000;box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.mm-yt.tuck{inset-inline-start:auto;left:-10000px;bottom:auto;top:0;box-shadow:none}
.mm-yt iframe{width:100%;height:169px;border:0;display:block}
.mm-yt-tip{
  padding:9px 11px;font-size:12px;font-weight:800;line-height:1.6;text-align:center;
  color:#ffd76e;background:rgba(255,215,110,.1);border-top:1px solid var(--line);
}
@media(max-width:700px){
  .ready{padding:16px;gap:11px}
  .rd-top{flex-wrap:wrap}
  .rd-tx h2{font-size:20px}
  .mm-yt{width:220px}
  .mm-yt iframe{height:124px}
}

/* ══════════════════════════════════════════════════════════════
   🛠️ الشريط الجانبي: إعدادات اللعبة · إضافة لاعب · طرد
   ينزلق من يمين الشاشة فوق المسرح
   ══════════════════════════════════════════════════════════════ */
#gdock{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:60;
  width:min(340px,88vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surf-2),var(--surf) 20%);
  border-inline-end:1px solid var(--line-2);
  box-shadow:-18px 0 50px rgba(2,4,16,.6);
  animation:gdIn .28s var(--ease);
}
@keyframes gdIn{from{opacity:0}to{opacity:1}}
#gdock.hidden{display:none !important}

.gd-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;flex:0 0 auto;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent);
}
.gd-head b{font-size:15.5px;font-weight:900;letter-spacing:-.3px}
.gd-x{
  width:28px;height:28px;border-radius:9px;cursor:pointer;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim-2);
  font-size:13px;transition:.2s;
}
.gd-x:hover{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--txt)}

.gd-body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px;
  display:flex;flex-direction:column;gap:18px}
.gd-sec h4{
  display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;
  color:var(--dim);margin-bottom:9px;
}
.gd-sec h4 i{
  font-style:normal;font-size:11px;font-weight:800;color:var(--star);
  background:color-mix(in srgb,var(--p3) 18%,transparent);
  padding:2px 8px;border-radius:999px;
}
.gd-add{display:flex;gap:7px}
.gd-add input{
  flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:9px 12px;font-size:13.5px;
  font-family:inherit;
}
.gd-add input:focus{outline:none;border-color:var(--p3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p3) 16%,transparent)}
.gd-note{font-size:11px;color:var(--dim-2);margin-top:6px}

.gd-list{display:flex;flex-direction:column;gap:5px;max-height:290px;overflow-y:auto}
.gd-p{
  --pb-acc:var(--p2);display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:11px;font-size:13.5px;font-weight:700;
  background:var(--surf-2);border:1px solid var(--line);
}
.gd-p .av{width:26px;height:26px;font-size:13px;flex:0 0 auto}
.gd-p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-k{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line);color:var(--dim-2);
  font-size:11px;transition:.2s;
}
.gd-k:hover{background:color-mix(in srgb,var(--bad) 26%,transparent);color:#fff}
.gd-empty{font-size:12px;color:var(--dim-2);text-align:center;padding:14px}

#gdCfg .cfg-card{background:none;border:none;padding:0;box-shadow:none}
#gdCfg .cfg-head{display:none}
#gdCfg .cfg-grid{grid-template-columns:minmax(0,1fr)}

/* المسرح يفسح للشريط بلا أن ينكمش المحتوى */

@media(max-width:820px){ #gdock{width:100vw} }

/* ══════════ الروليت: عجلة أكبر وأسماء بدل الصور ══════════ */
.wheel-wrap{width:min(470px,66vmin)}
.wm-in{top:7%}
.wm .av{display:none}
.wm-name{
  max-width:170px;padding:6px 15px;border-radius:11px;
  font-size:27px;font-weight:900;line-height:1.22;color:#fff;
  background:rgba(8,9,20,.88);
  border:1px solid rgba(255,255,255,.26);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.95);
  box-shadow:0 3px 12px rgba(0,0,0,.5);
}
/* كلّما كثر اللاعبون صغر الخطّ — بلا تزاحم وبلا اختفاء */
.wheel-marks.many .wm-name{max-width:150px;font-size:23px;padding:5px 13px}
.wheel-marks.lots .wm-name{max-width:126px;font-size:19px;padding:4px 11px}
.wm.lit .wm-name{
  background:var(--star);color:#12151d;border-color:#fff;
  text-shadow:none;transform:scale(1.14);
  box-shadow:0 0 26px color-mix(in srgb,var(--star) 75%,transparent);
}
.hub{width:26%;border-width:4px}
.rt-spinbox{display:grid;place-items:center;min-height:0}
.rt-spinbox:empty{display:none}
.rt-spin{min-width:220px;justify-content:center}
@media(max-width:820px){
  .wheel-wrap{width:min(320px,72vmin)}
  .wm-name{max-width:118px;font-size:18px;padding:4px 10px}
}

/* شعار هدهد: place-items:center كان يمنع تمدّد الـSVG فيصير قياسه صفراً */
.hub{place-items:stretch}
.hub-logo{width:100%;height:100%;display:block}

/* زرّ التدوير: بارز أسفل العجلة مباشرةً لا مدفوناً */
.rt-spinbox{padding:4px 0 2px}
.rt-spin{
  min-width:240px;font-size:16px;padding:13px 26px;
  box-shadow:0 8px 26px color-mix(in srgb,var(--p1) 42%,transparent),
             inset 0 1px 0 rgba(255,255,255,.24);
  animation:rtPulse 2s ease-in-out infinite;
}
@keyframes rtPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.rt-spin:hover{animation:none}
/* الأسماء تحت العجلة تصغر قليلاً ليتّسع الجميع */
.rt-list{max-height:32vh;overflow-y:auto}

/* الحشو بالنسبة المئوية يُحسب من عرض العجلة لا من المنتصف —
   ٨٣px على صندوق ١٧٤px تبتلعه. نُلغيه ونقيس الشعار نفسه. */
.hub{padding:0 !important;place-items:center !important;overflow:hidden}
.hub-logo{width:64% !important;height:64% !important;display:block}

/* الشريط الجانبي: يُثبَّت على الحافّة اليمنى للشاشة صراحةً */
#gdock{
  inset-inline-start:auto !important;
  right:0 !important; left:auto !important;
  border-inline-end:none;
  border-left:1px solid var(--line-2);
  box-shadow:-18px 0 50px rgba(2,4,16,.6);
}



/* الشريط: انزلاق بلا transform عالق */
#gdock{animation:gdIn .22s var(--ease);transform:none !important}

/* ══════════════════════════════════════════════════════════════
   🎡 الروليت بلا تمرير — كل شيء يتّسع في الشاشة
   العجلة تُقاس من الارتفاع المتاح، والأسماء تتكثّف تلقائياً
   ══════════════════════════════════════════════════════════════ */
body[data-lay="arena"] .g-body{overflow:hidden}
.rt-wrap{overflow:hidden}
.wheel2d{
  min-height:0;overflow:hidden;
  display:grid;place-items:center;padding:4px;
}
/* المفتاح: الارتفاع يحكم، والعرض يتبعه فتبقى دائرة كاملة */
.wheel-wrap{
  width:auto !important;height:100%;
  aspect-ratio:1;max-width:min(520px,92%);max-height:100%;
  margin:auto;
}
/* الأسماء: بلا تمرير — الكثافة وحدها تتكفّل */
.rt-list{
  max-height:none !important;overflow:visible !important;
  align-content:center;
}
.rt-list.d3{--rt-w:118px}
.rt-list.d4{--rt-w:96px;--rt-av:20px;--rt-nm:11px;--rt-num:16px;gap:4px;padding:6px}
.rt-spinbox{padding:6px 0 0}

/* الاسم على العجلة يصغر مع كثرة اللاعبين — ويبقى مقروءاً من الجوّال */
.wheel-marks{--wm-nm:19px}
.wm-name{font-size:var(--wm-nm)}
.wheel-marks.many{--wm-nm:16px}
.wheel-marks.many .wm-name{max-width:106px;padding:3px 9px}
.wheel-marks.lots{--wm-nm:13.5px}
.wheel-marks.lots .wm-name{max-width:84px;padding:2px 7px}

@media(max-height:820px){
  .rt-list{--rt-w:130px;--rt-av:24px;--rt-nm:12.5px}
}

/* ══════════════════════════════════════════════════════════════
   🎡 الروليت: العجلة وحدها تملأ المسرح
   الأسماء تكفي على العجلة نفسها وفي صفحة الطرد — لا عمود يزاحمها
   ══════════════════════════════════════════════════════════════ */
.rt-wrap{
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  gap:12px;
}
.wheel2d   {grid-column:1;grid-row:1}
.rt-spinbox{grid-column:1;grid-row:2}

/* العجلة تُقاس بأصغر بُعدَي خانتها فتبقى دائرة كاملة مهما تغيّر المقاس */
.wheel2d{container-type:size;container-name:wheelbox}
.wheel-wrap{
  width:min(100cqw, 100cqh, 520px) !important;
  height:auto !important;
  max-width:none !important;max-height:none !important;
  aspect-ratio:1;margin:auto;
}

/* تقاسم أو خيانة: تتّسع بلا تمرير — الصندوق واللوحة يتقلّصان مع الارتفاع */
body[data-lay="duel"] .g-body{overflow:hidden}
.bt2{overflow:hidden;justify-content:center}
.bt-board{max-height:22vh;overflow-y:auto}
@media(max-height:900px){
  .bt-pot{padding:7px 18px}
  .bt-chest{font-size:0;line-height:0}
  .bt-chest .emo{font-size:34px;line-height:1}
  .bt-amount b{font-size:32px}
  .bt-av .av{width:62px;height:62px;font-size:28px}
  .bt-card{padding:7px 13px;min-width:92px;margin-top:3px}
  .bt-nm{font-size:18px}
  .bt-gain{font-size:23px}
  .bt-board{max-height:18vh}
}
@media(max-height:760px){
  .bt-chest{display:none}
  .bt-split{display:none}
  .bt-amount b{font-size:27px}
  .bt-av .av{width:52px;height:52px;font-size:24px}
  .bt-board{max-height:15vh}
}

/* الكراسي: المشهد والشريط ومشغّل الأغنية يتّسعون بلا تمرير */
body[data-lay="lane"] .g-body{overflow:hidden}
.mc-wrap{overflow:hidden}
@media(max-height:900px){
  .mc-3d,.mc-flat{min-height:180px}
  .mc-note{font-size:14px;min-height:20px}
}
@media(max-height:760px){
  .mc-3d,.mc-flat{min-height:150px}
  .mc-music{padding:5px 9px}
}

/* إيموجي تيك توك المخصّصة داخل الشات */
.cf-imgs{display:flex;gap:4px;align-items:center;margin-top:2px}
.cf-imgs img{width:30px;height:30px;object-fit:contain;border-radius:6px}
.cf-row.cf-emote{background:color-mix(in srgb,var(--p2) 10%,var(--surf-2))}

/* ══════════════════════════════════════════════════════════════
   إعلان الخروج — لحظة يجب أن تُشعر بها القاعة كلها.
   أحمرُ إنذار ينبض، ومَن يخرج يقف أمام بنره لا في فراغ.

   ملاحظتان تقنيّتان:
   • --bad في الموقع ورديّ هادئ، والخروج يحتاج أحمر صريح؛ فلها
     لونها الخاص هنا ولا نمسّ لون الموقع.
   • كل المقاسات بوحدات الحاوية (cq) فتضيق البطاقة مع المسرح
     مهما زوّم المشاهد صفحته، ولا تنزل تحت الشاشة أبداً.
   ══════════════════════════════════════════════════════════════ */
.ko-over{
  --ko-red:#e5384c;
  --ko-green:#3fd184;
  --ko-c:var(--ko-red);
  position:absolute;inset:0;z-index:30;display:none;
  container-type:size;
  margin:0 !important;flex:none !important;align-self:stretch;
  align-items:center;justify-content:center;pointer-events:none;
  padding:10px;overflow:hidden;
  background:
    radial-gradient(72% 62% at 50% 46%,
      color-mix(in srgb,var(--ko-red) 30%,transparent), transparent 74%),
    color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(9px) saturate(1.3);
  -webkit-backdrop-filter:blur(9px) saturate(1.25);
}
.ko-over.on{display:flex;animation:koIn .34s cubic-bezier(.2,1.3,.35,1)}
@keyframes koIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* أشرطة مائلة تمسح الخلفية — حركةٌ تحت البطاقة لا تسرق النظر */
.ko-over::before{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:repeating-linear-gradient(122deg,
    color-mix(in srgb,var(--ko-red) 14%,transparent) 0 3px,
    transparent 3px 26px);
  animation:koSweep 3.4s linear infinite;opacity:.55;
}
@keyframes koSweep{to{transform:translateX(-26px)}}

.ko-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,2cqh,13px);
  padding:clamp(12px,4cqh,24px) clamp(14px,3cqw,32px);
  border-radius:clamp(16px,3cqh,26px);
  max-width:min(96cqw,880px);max-height:96cqh;text-align:center;
  background:linear-gradient(168deg,
    color-mix(in srgb,var(--ko-c) 24%,var(--surf)),
    color-mix(in srgb,var(--ko-c) 7%,var(--surf)) 62%, var(--surf));
  border:1px solid color-mix(in srgb,var(--ko-c) 62%,transparent);
  box-shadow:0 26px 70px rgba(2,4,16,.72),
             0 0 70px color-mix(in srgb,var(--ko-c) 32%,transparent),
             inset 0 1px 0 rgba(255,255,255,.12);
  animation:koPulse 1.5s ease-in-out infinite;
}
@keyframes koPulse{
  0%,100%{box-shadow:0 26px 70px rgba(2,4,16,.72),
          0 0 56px color-mix(in srgb,var(--ko-c) 26%,transparent),
          inset 0 1px 0 rgba(255,255,255,.12)}
  50%    {box-shadow:0 26px 70px rgba(2,4,16,.72),
          0 0 110px color-mix(in srgb,var(--ko-c) 52%,transparent),
          inset 0 1px 0 rgba(255,255,255,.18)}
}
/* هالةٌ دوّارة خلف البطاقة */
.ko-glow{
  position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:conic-gradient(from 0deg,
    transparent 0 62%,
    color-mix(in srgb,var(--ko-c) 88%,transparent) 78%,
    transparent 92%);
  filter:blur(11px);opacity:.8;
  animation:koSpin 2.8s linear infinite;
}
@keyframes koSpin{to{transform:rotate(1turn)}}

.ko-lead{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:clamp(4px,1.2cqh,7px) clamp(11px,2.2cqw,20px);border-radius:999px;
  font-size:clamp(14px,3.4cqh,22px);font-weight:900;letter-spacing:-.3px;
  color:color-mix(in srgb,var(--ko-c) 24%,#fff);
  background:color-mix(in srgb,var(--ko-c) 24%,transparent);
  border:1px solid color-mix(in srgb,var(--ko-c) 50%,transparent);
  text-shadow:0 2px 10px color-mix(in srgb,var(--ko-c) 65%,transparent);
  white-space:nowrap;
}
.ko-faces{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(7px,1.6cqw,16px);min-height:0;
}

/* بطاقة الخارج — بنره خلفه، ووجهه فوقه */
.ko-f{
  --pb-acc:var(--p2);
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:1px;
  width:clamp(92px,17cqw,168px);
  padding:clamp(38px,13cqh,74px) clamp(7px,1.4cqw,12px) clamp(8px,1.8cqh,14px);
  border-radius:clamp(12px,2.6cqh,20px);overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pb-acc) 22%,transparent),
    color-mix(in srgb,var(--ko-c) 30%,transparent));
  border:1px solid color-mix(in srgb,var(--ko-c) 45%,transparent);
  box-shadow:0 12px 32px rgba(0,0,0,.5);
  animation:koCard .42s cubic-bezier(.2,1.2,.35,1) backwards;
}
.ko-f:nth-child(2){animation-delay:.07s}
.ko-f:nth-child(3){animation-delay:.14s}
.ko-f:nth-child(4){animation-delay:.21s}
@keyframes koCard{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}

.ko-bg{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.ko-f.has-banner .ko-bg{
  background-image:var(--own-img);background-size:cover;background-position:center;
  opacity:.95;
}
/* حجابٌ يُبقي الاسم مقروءاً فوق أي بنر */
.ko-f.has-banner .ko-bg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,
    rgba(6,6,14,.24) 0%, rgba(6,6,14,.6) 50%, rgba(6,6,14,.9) 100%),
    color-mix(in srgb,var(--ko-c) 20%,transparent);
}
.ko-f.owner{border-color:color-mix(in srgb,var(--star) 62%,transparent)}

.ko-face{
  position:relative;display:block;flex:none;
  width:clamp(52px,15cqh,100px);height:clamp(52px,15cqh,100px);
  margin:0 auto clamp(3px,1cqh,7px);
}
.ko-f .av{
  width:100%;height:100%;font-size:clamp(22px,7cqh,44px);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ko-c) 78%,transparent),
             0 10px 30px rgba(0,0,0,.55);
  filter:grayscale(.62);
}
.ko-x{
  position:absolute;inset:0;
  display:grid;place-items:center;
  /* بلا خطّ الإيموجي: الرمز يُرسم كنصّ فيأخذ اللون الأحمر فعلاً،
     ومع خطّ الإيموجي كان يُلوّن نفسه ويتجاهل color */
  font-size:clamp(34px,10cqh,62px);color:var(--ko-c);
  font-family:'Segoe UI Symbol','Arial Unicode MS',sans-serif;font-weight:700;
  text-shadow:0 3px 14px rgba(0,0,0,.9);
  animation:koX .45s cubic-bezier(.2,1.5,.35,1);
}
@keyframes koX{from{transform:scale(2.4) rotate(-25deg);opacity:0}
  to{transform:none;opacity:1}}
.ko-f b{
  position:relative;font-size:clamp(12px,2.9cqh,19px);font-weight:900;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}
.ko-f i{
  position:relative;font-size:clamp(9px,1.8cqh,11.5px);font-style:normal;font-weight:800;
  color:color-mix(in srgb,#fff 78%,var(--pb-acc));
  text-shadow:0 2px 8px rgba(0,0,0,.85);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ko-f i.ko-tier{color:color-mix(in srgb,var(--star) 70%,#fff)}

.ko-faces.many .ko-f{width:clamp(78px,12cqw,120px);padding-top:clamp(30px,10cqh,56px)}
.ko-faces.many .ko-face{width:clamp(42px,11cqh,72px);height:clamp(42px,11cqh,72px)}
.ko-faces.many .ko-x{font-size:clamp(26px,7.5cqh,44px)}
.ko-more{align-self:center;font-size:clamp(13px,2.6cqh,18px);font-weight:900;color:var(--dim)}
.ko-why{
  position:relative;font-size:clamp(11px,2.2cqh,15px);color:var(--dim);
  max-width:520px;line-height:1.55;
}

/* ── المواجهة: من طرد ومن انطرد جنباً إلى جنب ──
   البطاقتان بحجمٍ واحد وبينهما الفعل، فيُقرأ المشهد بنظرة:
   «فلانٌ طرد فلاناً» — ولا يُترك الأمر لسطرٍ صغير تحت الصورة. */
.ko-duo{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,2cqw,22px);min-height:0;flex-wrap:nowrap;
}
.ko-duo .ko-f{width:clamp(104px,21cqw,230px)}
.ko-duo .ko-f.ko-by{opacity:.94;border-color:color-mix(in srgb,var(--star) 42%,transparent)}
.ko-role{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:2;
  padding:clamp(3px,.9cqh,6px) 6px;text-align:center;
  font-size:clamp(9px,1.8cqh,14px);font-weight:900;color:#140b02;white-space:nowrap;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
  box-shadow:0 5px 16px rgba(0,0,0,.45);
}
.ko-vs{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:koVs .46s cubic-bezier(.2,1.3,.35,1) .1s backwards;
}
.ko-vs .ko-bolt{
  font-family:var(--emoji);font-size:clamp(26px,7cqh,64px);line-height:1;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--ko-c) 70%,transparent));
}
.ko-vs b{
  font-size:clamp(12px,2.8cqh,22px);font-weight:900;letter-spacing:.5px;
  color:color-mix(in srgb,#fff 82%,var(--ko-c));
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
@keyframes koVs{from{opacity:0;transform:scale(.5) rotate(-14deg)}}
/* شاشةٌ ضيّقة: يبقيان جنباً إلى جنب لكن أصغر — الترتيب هو المعنى */
@media(max-width:640px){
  .ko-duo .ko-f{width:clamp(84px,26cqw,140px)}
  .ko-vs .ko-bolt{font-size:clamp(20px,6cqh,38px)}
}

/* إعلان إيجابي: عودة لاعب بدل خروجه — أخضر لا أحمر */
.ko-over:has(.ko-card.good){
  --ko-c:var(--ko-green);
  background:
    radial-gradient(72% 62% at 50% 46%,
      color-mix(in srgb,var(--ko-green) 28%,transparent), transparent 74%),
    color-mix(in srgb,var(--bg) 82%,transparent);
}
.ko-over:has(.ko-card.good)::before{
  background:repeating-linear-gradient(122deg,
    color-mix(in srgb,var(--ko-green) 13%,transparent) 0 3px,
    transparent 3px 26px);
}
.ko-card.good{animation:none}
.ko-card.good .ko-f .av{filter:none}

.ko-left{
  position:relative;font-size:clamp(10px,2cqh,13px);color:var(--dim-2);
}
.ko-left b{color:var(--star);font-weight:900;font-size:clamp(13px,2.6cqh,16px)}

@media (prefers-reduced-motion: reduce){
  .ko-over::before,.ko-glow,.ko-card{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   ⏰ مؤقّت الروليت — حلقة تنفد أمام العين
   ══════════════════════════════════════════════════════════════ */
.rt-timer{
  --p:1;
  display:flex;align-items:center;gap:14px;justify-content:center;
  padding:8px 18px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line);
  box-shadow:var(--sh-2);
}
.rt-ring{
  position:relative;width:64px;height:64px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:conic-gradient(var(--star) calc(var(--p) * 360deg),
                            rgba(255,255,255,.07) 0);
  transition:background .3s linear;
}
.rt-ring::after{
  content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surf);
}
.rt-ring b{position:relative;z-index:1;font-size:26px;font-weight:900;line-height:1}
.rt-twho{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:start}
.rt-twho span{font-size:15px;font-weight:700;color:var(--dim);
  display:flex;align-items:center;gap:7px}
.rt-twho span b{color:var(--txt);font-weight:900;font-size:17px}
.rt-twho .av{width:26px;height:26px;font-size:13px}
.rt-twho i{font-size:11.5px;color:var(--dim-2);font-style:normal}
.rt-timer.warn .rt-ring{background:conic-gradient(var(--bad) calc(var(--p) * 360deg),
  rgba(255,255,255,.07) 0)}
.rt-timer.warn .rt-ring b{color:var(--bad)}
.rt-timer.crit{
  border-color:color-mix(in srgb,var(--bad) 60%,transparent);
  animation:pulse .7s infinite;
}
@media(max-width:820px){
  .rt-ring{width:52px;height:52px}
  .rt-ring b{font-size:21px}
}

/* ══════════════════════════════════════════════════════════════
   🚪 الانضمام المفتوح — صفحة تغطّي كل شيء
   ══════════════════════════════════════════════════════════════ */
.rv-over{
  position:fixed;inset:0;z-index:7300;display:none;
  align-items:center;justify-content:center;pointer-events:auto;
  margin:0 !important;flex:none !important;
  background:radial-gradient(60% 60% at 50% 50%,
    color-mix(in srgb,var(--ok) 18%,transparent), transparent 70%),
    color-mix(in srgb,var(--bg) 76%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.rv-over.on{display:flex;animation:koIn .3s cubic-bezier(.2,1.3,.35,1)}
.rv-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:26px 36px;border-radius:24px;text-align:center;max-width:92%;
  background:linear-gradient(168deg,color-mix(in srgb,var(--ok) 14%,var(--surf)),var(--surf));
  border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);
  box-shadow:0 26px 70px rgba(2,4,16,.7),
             0 0 60px color-mix(in srgb,var(--ok) 24%,transparent);
}
.rv-lead{font-size:20px;font-weight:900;color:var(--ok)}
.rv-word{font-size:34px;font-weight:900;letter-spacing:-.5px;line-height:1.2}
.rv-word b{
  background:linear-gradient(120deg,var(--ok),var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:44px;
}
.rv-sub{font-size:14px;color:var(--dim)}
.rv-n{font-size:14px;color:var(--dim)}
.rv-n b{color:var(--ok);font-weight:900;font-size:17px}
.rv-faces{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;max-width:560px}
.rv-f{--pb-acc:var(--p2);display:flex;align-items:center;gap:6px;
  padding:3px 10px 3px 4px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--surf-2);border:1px solid color-mix(in srgb,var(--ok) 34%,transparent);
  animation:koIn .25s}
.rv-f .av{width:22px;height:22px;font-size:11px}
.rv-f i{font-style:normal;max-width:110px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* زرّ الانضمام المفتوح في الشريط */
.gd-revive{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 12px;border-radius:16px;cursor:pointer;font-family:inherit;color:var(--txt);
  background:linear-gradient(165deg,color-mix(in srgb,var(--ok) 18%,var(--surf-2)),var(--surf-2));
  border:1px solid color-mix(in srgb,var(--ok) 42%,transparent);
  transition:.22s var(--ease);
}
.gd-revive:hover{transform:translateY(-2px);
  box-shadow:0 8px 24px color-mix(in srgb,var(--ok) 26%,transparent)}
.gd-revive:disabled{opacity:.5;cursor:default;transform:none}
.gd-revive b{font-size:15.5px;font-weight:900}
.gd-revive i{font-size:11px;color:var(--dim-2);font-style:normal;line-height:1.5}

/* الشريط: بطاقة الشرط تندمج بلا حشو */
#gdCfg .gate-card{background:none;border:none;padding:0;margin-bottom:14px}
#gdCfg .gc-h{font-size:12.5px;color:var(--dim);margin-bottom:7px}
#gdCfg .gc-opts{grid-template-columns:minmax(0,1fr)}
#gdCfg .gc-o{padding:8px 11px}
.gd-note{display:none}

/* الشريط: بلا حشو — العناوين المكرّرة والملاحظات تختفي */
.gd-note{display:none !important}
#gdCfg .cfg-head{display:none}
.gd-sec + .gd-sec{padding-top:2px}
.gd-body{gap:14px}

/* مفتاح تشغيل في الإعدادات */
.cfg-sw{
  width:52px;height:28px;border-radius:999px;cursor:pointer;flex:0 0 auto;
  background:var(--panel-2);border:1px solid var(--line);position:relative;
  transition:background .22s var(--ease), border-color .22s var(--ease);
}
.cfg-sw i{
  position:absolute;inset-block-start:3px;inset-inline-start:3px;
  width:20px;height:20px;border-radius:50%;background:var(--dim-2);
  transition:.22s var(--ease);
}
.cfg-sw.on{
  background:color-mix(in srgb,var(--ok) 30%,transparent);
  border-color:color-mix(in srgb,var(--ok) 55%,transparent);
}
.cfg-sw.on i{inset-inline-start:27px;background:var(--ok)}
.cfg-f:has(.cfg-sw){flex-direction:row;align-items:center;justify-content:space-between}

/* ══════════════════════════════════════════════════════════
   حقوق الموقع — سطر هادئ في التذييل مع رابط تيك توك
   ══════════════════════════════════════════════════════════ */
.ld-rights,.home-rights,.ag-rights{
  margin-top:18px;padding:14px 10px 4px;text-align:center;
  font-size:12.5px;font-weight:700;color:var(--dim-2);line-height:1.9;
}
.ld-rights b,.home-rights b,.ag-rights b{color:var(--dim);font-weight:900}
.rt-tt{
  display:inline-flex;align-items:center;gap:5px;margin-inline-start:7px;
  padding:3px 11px;border-radius:999px;text-decoration:none;
  font-size:12px;font-weight:900;color:var(--p2);
  background:color-mix(in srgb,var(--p2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--p2) 32%,transparent);
  transition:background .18s,color .18s,transform .18s;
}
.rt-tt::before{content:'♪';font-size:13px;line-height:1}
.rt-tt:hover{
  background:color-mix(in srgb,var(--p2) 22%,transparent);
  color:#fff;transform:translateY(-1px);
}
.home-rights{border-top:1px solid var(--line);margin-top:26px}
.ag-rights{margin-top:12px;font-size:11.5px}

/* ══════════ الشريط الجانبي: صفحتان ══════════ */
.gd-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:0 0 auto;
  padding:10px 12px 0;
}
.gd-tab{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;border-radius:13px 13px 0 0;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:900;color:var(--dim);
  background:transparent;border:1px solid transparent;border-bottom:none;
  transition:.2s var(--ease);
}
.gd-tab:hover{color:var(--txt);background:var(--surf-2)}
.gd-tab.on{
  color:var(--txt);background:var(--surf);
  border-color:var(--line);
  box-shadow:0 -3px 0 var(--p3) inset;
}
.gd-tab i{
  font-style:normal;font-size:11.5px;font-weight:900;min-width:20px;
  padding:1px 7px;border-radius:999px;color:var(--p3);
  background:color-mix(in srgb,var(--p3) 16%,transparent);
}
.gd-page{display:none}
.gd-page.on{display:block;animation:riseIn .26s var(--ease)}

/* ══════════ الانضمام المفتوح: زرّ الإغلاق ونصّ التلميح ══════════ */
.rv-card{position:relative}
.rv-x{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:17px;font-weight:900;
  color:var(--dim);background:var(--surf-2);border:1px solid var(--line);
  transition:.18s var(--ease);
}
.rv-x:hover{color:#fff;background:var(--bad);border-color:var(--bad);transform:rotate(90deg)}
.rv-tip{font-size:11.5px;color:var(--dim-2);margin-top:2px}
.rv-wait{font-size:13px;color:var(--dim-2);padding:8px 4px}
.rv-faces .rv-f{font-size:15px;font-weight:900;padding:5px 14px 5px 5px}
.rv-faces .rv-f .av{width:38px;height:38px;font-size:18px}
.rv-faces .rv-f i{max-width:150px}
.rv-faces.many .rv-f{font-size:13px;padding:4px 11px 4px 4px}
.rv-faces.many .rv-f .av{width:30px;height:30px;font-size:14px}

/* ══════════ شبكة الانتظار: المنضمّ باسمه وأفتاره وبنره ══════════ */
/* ══ كلمةُ الانضمام ══
   أوّلُ ما تقع عليه العين وأصفرُ اللون: هي الأمر الوحيد المطلوب من
   المشاهد. وكانت مدفونةً في سطرٍ رماديّ مع بقيّة الشرح. */
.lb-word{
  display:inline-flex;align-items:center;gap:clamp(7px,1.3vh,12px);flex:0 0 auto;
  padding:clamp(7px,1.3vh,14px) clamp(16px,2.6vh,30px);border-radius:999px;
  font-size:clamp(16px,2.9vh,30px);font-weight:900;color:var(--star);
  background:color-mix(in srgb,var(--star) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--star) 46%,transparent);
  box-shadow:0 0 34px color-mix(in srgb,var(--star) 18%,transparent);
  animation:lbWord 2.4s ease-in-out infinite;
}
.lb-word b{
  font-size:clamp(21px,4.2vh,46px);font-weight:900;letter-spacing:-.5px;color:#fff;
  text-shadow:0 0 22px color-mix(in srgb,var(--star) 70%,transparent);
}
@keyframes lbWord{50%{box-shadow:0 0 52px color-mix(in srgb,var(--star) 34%,transparent)}}
.lobby.busy .lb-word{padding:clamp(5px,.9vh,10px) clamp(13px,2vh,24px);
  font-size:clamp(14px,2.3vh,23px)}
.lobby.busy .lb-word b{font-size:clamp(18px,3.2vh,34px)}

/* الأسماء أكبر في كل الكثافات — الشاشة تُقرأ من الجوّال */
.lb-grid{
  --lb-av:clamp(64px,9vh,104px); --lb-nm:clamp(19px,3.1vh,34px); --lb-w:190px;
  /* سقفُ 34vh كان يقصّ الصفوف على الشاشات الطويلة — الشبكة تأخذ
     ما بقي من المسرح لا نسبةً من الصفحة */
  flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:11px;
  width:100%;max-width:1080px;margin-inline:auto;padding:4px 2px;
}
.lb-grid:empty{display:none}
.lb-p{flex:0 0 auto}
/* من خمسة فأكثر: البطاقة أفقيّة — الاسم يبقى كبيراً والارتفاع ينصّف
   فيتّسع الجميع في الشاشة بلا تمرير */
.lb-grid.d2,.lb-grid.d3,.lb-grid.d4{align-content:center}
.lb-grid{--lb-bw:clamp(300px,40vh,420px);--lb-fav:clamp(44px,6.2vh,68px)}
.lb-grid.d2{--lb-av:clamp(52px,7.4vh,84px);--lb-nm:clamp(18px,2.9vh,31px);
  --lb-bw:clamp(228px,31vh,320px);--lb-fav:clamp(36px,5.1vh,54px);gap:10px}
.lb-grid.d3{--lb-av:clamp(44px,6.2vh,70px);--lb-nm:clamp(16px,2.6vh,27px);
  --lb-bw:clamp(190px,26vh,268px);--lb-fav:clamp(31px,4.4vh,46px);gap:9px}
.lb-grid.d4{--lb-av:clamp(36px,5vh,56px);--lb-nm:clamp(14px,2.2vh,23px);
  --lb-bw:clamp(158px,21vh,220px);--lb-fav:clamp(26px,3.7vh,38px);gap:7px}
.lb-grid.d2 .lb-p,.lb-grid.d3 .lb-p,.lb-grid.d4 .lb-p{
  flex-direction:row;align-items:center;gap:10px;text-align:start;
  width:auto;min-width:auto;max-width:min(340px,42vw);
  padding:6px 16px 6px 6px;border-radius:999px;
}
.lb-grid.d2 .lb-p > i,.lb-grid.d3 .lb-p > i,.lb-grid.d4 .lb-p > i,
.lb-grid.d2 .lb-p > u,.lb-grid.d3 .lb-p > u,.lb-grid.d4 .lb-p > u{display:none}
.lb-grid.d2 .lb-p > b,.lb-grid.d3 .lb-p > b,.lb-grid.d4 .lb-p > b{
  text-align:start;max-width:min(250px,32vw)}
/* صاحب البنر يحتفظ بشكله العريض في كل الكثافات —
   قاعدة أخصّ من قاعدة الحبّة الأفقيّة فلا تسحقه */
.lb-grid .lb-p.has-banner,
.lb-grid.d2 .lb-p.has-banner,.lb-grid.d3 .lb-p.has-banner,.lb-grid.d4 .lb-p.has-banner{
  flex-direction:column;justify-content:flex-end;align-items:stretch;
  width:var(--lb-bw);max-width:none;min-width:0;
  aspect-ratio:2.6 / 1;height:auto;
  padding:0;border-radius:16px;gap:0;
}
.lb-grid .lb-p.has-banner > b{display:none}

.lb-p{
  --pb-acc:var(--p2);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:var(--lb-w);max-width:100%;padding:13px 10px 11px;border-radius:17px;
  background:var(--surf-2);border:1px solid var(--line);
  animation:riseIn .3s var(--ease);
}
.lb-bg{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background-image:var(--own-img,none);background-size:cover;background-position:center;
}
/* البنر يملأ البطاقة، والتعتيم أسفلها فقط ليقرأ الاسم بلا أن يُخفيها */
.lb-p.has-banner .lb-bg::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 34%,rgba(6,7,18,.55) 64%,rgba(6,7,18,.9));
}
.lb-p.has-banner{
  width:var(--lb-bw,260px);aspect-ratio:2.6 / 1;
  padding:0;border-radius:16px;overflow:hidden;
  justify-content:flex-end;align-items:stretch;gap:0;
  border-color:color-mix(in srgb,var(--star) 46%,transparent);
  box-shadow:0 8px 26px rgba(2,4,16,.5);
}
.lb-face{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:9px;
  padding:7px 11px;width:100%;
}
.lb-face .av{
  width:var(--lb-fav,38px);height:var(--lb-fav,38px);
  font-size:calc(var(--lb-fav,38px) * .45);flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.6);
}
/* صفٌّ لا سطر: الاسم وحده يُقصّ، والشعار بعده على اليسار يبقى */
.lb-face b,
.lb-p > b{
  display:flex;align-items:center;gap:5px;min-width:0;
  font-size:var(--lb-nm);font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.lb-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* في اللوبي البطاقات صغيرة، فالشعار يُصغَّر معها ولا يزاحم الاسم */
.lb-p .mark{font-size:.62em;padding:.1em .45em .1em .34em;gap:.24em}
.lb-p .mark-sh{display:none}
.lb-p > *:not(.lb-bg){position:relative;z-index:1}
.lb-p .av{
  width:var(--lb-av);height:var(--lb-av);font-size:calc(var(--lb-av) * .45);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pb-acc) 75%,transparent),
             0 6px 18px rgba(0,0,0,.45);
}
.lb-p > b{
  font-size:var(--lb-nm);font-weight:900;max-width:100%;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.lb-p > i{
  font-style:normal;font-size:11.5px;font-weight:800;color:var(--dim-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lb-p > u{
  text-decoration:none;font-size:10.5px;font-weight:900;margin-top:2px;
  padding:2px 10px;border-radius:999px;color:var(--star);
  background:color-mix(in srgb,var(--star) 15%,rgba(4,4,12,.5));
  border:1px solid color-mix(in srgb,var(--star) 35%,transparent);
}
.lb-p.has-banner{border-color:color-mix(in srgb,var(--star) 40%,transparent)}
.lb-p.own{border-color:rgba(255,215,110,.62)}

/* بطاقة الانضمام الطائرة: بنر صاحبها خلفها */
.joincard.has-banner .jc-bg{
  background-image:var(--own-img,none);background-size:cover;background-position:center;
}
.jc-tier{
  font-size:11px;font-weight:900;color:var(--star);
  padding:1px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--star) 15%,transparent);
}

/* شريط الأغنية داخل لعبة الكراسي: رابط · ملف · تجربة · صوت */
.mm-vol{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.mm-vol input[type=range]{
  width:96px;accent-color:var(--p3);cursor:pointer;
}
@media(max-width:900px){ .mm-vol input[type=range]{width:66px} }

/* ══════════════════════════════════════════════════════════
   💬 سطر «كيف تلعب» — ثابت أعلى المسرح فيفهمها المشاهد فوراً
   ══════════════════════════════════════════════════════════ */
.g-how{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;
  margin:0 0 8px;padding:9px 18px;border-radius:999px;text-align:center;
  background:color-mix(in srgb,var(--p3) 13%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--p3) 30%,transparent);
}
.g-how b{
  font-size:16px;font-weight:900;letter-spacing:-.2px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
body.show-mode .g-how b{font-size:18px}
@media(max-width:900px){ .g-how{padding:7px 13px} .g-how b{font-size:13.5px} }
/* في الألعاب المجسّمة نُبقيه ملتصقاً بالأعلى بلا أن يسرق ارتفاعاً */
.g-wrap:has(.stage3d) .g-how{margin-bottom:6px}

/* زرّ انطلاق الكراسي — لا تدور الموسيقى قبله */
.mc-go{min-width:250px;justify-content:center;font-size:17px;padding:13px 28px;
  box-shadow:0 8px 26px color-mix(in srgb,var(--p1) 42%,transparent)}

/* ══════════ أغنية الكراسي داخل شريط الإعدادات ══════════ */
.mm-card{margin-bottom:12px}
.mm-box{display:flex;flex-direction:column;gap:9px}
.mm-box #mmUrl{
  width:100%;padding:10px 12px;border-radius:11px;font-size:12.5px;
  background:var(--surf-2);border:1px solid var(--line);color:var(--txt);
  font-family:inherit;
}
.mm-box #mmUrl:focus{outline:none;border-color:var(--p3);box-shadow:var(--ring)}
.mm-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mm-file{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--surf-2);border:1px solid var(--line);
}
.mm-file:hover{border-color:var(--line-2)}
.mm-state{font-size:11.5px;font-weight:800;color:var(--dim-2)}
.mm-state.ok{color:var(--ok)}
.mm-state.bad{color:var(--bad)}

/* مضيف إطار يوتيوب: صغير في الزاوية، والصوت هو المقصود */
#mmYt{
  position:fixed;z-index:60;inset-block-end:14px;inset-inline-start:14px;
  width:260px;height:150px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-3);background:#000;
}
#mmYt.hidden{display:none}
#mmYt iframe{width:100%;height:100%;border:0;display:block}
/* الإزاحة والإدراج يغلبان التثبيت أعلاه: تلك القاعدة بمعرّفٍ فتسبق
   أي صنف، فكان المشغّل يبقى في الزاوية ولا يختفي أبداً — والمطلوب
   صوتٌ بلا صورة. مُزاحٌ لا مخفيّ: display:none يُسكت الإطار. */
#mmYt.tuck{
  inset-block:0 auto;inset-inline:auto auto;
  left:-10000px;right:auto;top:0;bottom:auto;
  box-shadow:none;border-color:transparent;
}
#mmYt.inline{
  position:static;inset:auto;width:100%;height:auto;
  box-shadow:none;border-radius:14px;
}
#mmYt.inline iframe{height:210px}
@media(max-width:700px){ #mmYt.inline iframe{height:170px} }

/* ══════════════════════════════════════════════════════════════
   🪑 حلبة الكراسي — كراسي ثابتة وناس يمشون حولها
   العنصر يملأ الحلبة ويدور لزاويته، ومحتواه يعتدل في الأعلى
   ══════════════════════════════════════════════════════════════ */
.mc-arena{
  position:relative;
  width:min(100%, 100cqh, 560px);aspect-ratio:1;margin:0 auto;
}
.mc-arena::before{
  content:'';position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,
    color-mix(in srgb,var(--acc) 18%,transparent), transparent 70%);
  border:2px dashed color-mix(in srgb,var(--acc) 30%,transparent);
}
.mc-seats,.mc-orbit{position:absolute;inset:0}

/* ── الكرسي ── */
.mc-seat{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
.mc-seat-in{
  position:absolute;top:17%;left:50%;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.mc-num{
  display:grid;place-items:center;min-width:46px;height:46px;padding:0 11px;
  border-radius:14px;font-size:27px;font-weight:900;line-height:1;color:#12151d;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
  box-shadow:0 5px 16px rgba(0,0,0,.55);
}
.mc-ic{font-family:var(--emoji);font-size:27px;line-height:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
/* الرقم مخفيّ ما دامت الأغنية تعمل — علامةُ استفهام باهتة تنبض،
   فيُعرف أنّ للكرسيّ رقماً لم يُكشف بعد */
.mc-num.hid{
  color:rgba(255,255,255,.82);
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px dashed rgba(255,255,255,.4);box-shadow:none;
  animation:mcQ 1.6s ease-in-out infinite;
}
@keyframes mcQ{50%{opacity:.55}}
.mc-seat.busy .mc-num,.mc-seat.ok .mc-num{background:linear-gradient(150deg,var(--ok),#a8f0cd)}
.mc-seat.free .mc-num{background:linear-gradient(150deg,#8b93a8,#c3c9d6);opacity:.55}

/* اللاعب وهو جالس على كرسيه */
.mc-sit{
  --pb-acc:var(--p2);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  animation:mcSit .34s cubic-bezier(.2,1.6,.4,1);
}
@keyframes mcSit{from{transform:translateY(-20px) scale(.6);opacity:0}}
.mc-sit .av{width:46px;height:46px;font-size:21px;
  box-shadow:0 0 0 3px var(--ok),0 5px 14px rgba(0,0,0,.5)}
.mc-sit b{font-size:13.5px;font-weight:900;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 6px rgba(0,0,0,.85)}

/* ── المشّاؤون على المدار الخارجي ── */
.mc-orbit{animation:mcOrbit 11s linear infinite;animation-play-state:paused}
.mc-arena.spin .mc-orbit{animation-play-state:running}
@keyframes mcOrbit{to{transform:rotate(360deg)}}
.mc-w{position:absolute;inset:0;transform:rotate(var(--a));pointer-events:none}
/* الاعتدال: عكس زاوية المكان وعكس دوران المدار بنفس المدّة */
.mc-w-in{
  position:absolute;top:2.5%;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  animation:mcOrbitBack 11s linear infinite;animation-play-state:paused;
}
.mc-arena.spin .mc-w-in{animation-play-state:running}
@keyframes mcOrbitBack{to{transform:translate(-50%,-50%) rotate(-360deg)}}
.mc-w .av{width:44px;height:44px;font-size:20px;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pb-acc) 85%,transparent),
             0 4px 12px rgba(0,0,0,.55)}
.mc-w b{font-size:13px;font-weight:900;max-width:92px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 7px rgba(0,0,0,.9)}
.mc-arena.many .mc-w .av{width:34px;height:34px;font-size:15px}
.mc-arena.many .mc-w b{font-size:11px;max-width:72px}
.mc-arena.lots .mc-w .av{width:27px;height:27px;font-size:12px}
.mc-arena.lots .mc-w b{display:none}

/* ── قلب الحلبة ── */
.mc-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;pointer-events:none;
}
.mc-core-n{font-size:52px;font-weight:900;line-height:1;color:var(--star);
  text-shadow:0 4px 20px rgba(0,0,0,.75)}
.mc-core span{font-size:12.5px;font-weight:800;color:var(--dim)}

@media(max-width:900px){
  .mc-num{min-width:34px;height:34px;font-size:20px;border-radius:11px}
  .mc-ic{font-size:20px}
  .mc-w .av{width:32px;height:32px;font-size:14px}
  .mc-w b{font-size:11px;max-width:66px}
  .mc-sit .av{width:34px;height:34px;font-size:15px}
  .mc-core-n{font-size:38px}
}

/* حاوية حلبة الكراسي: تأخذ الارتفاع كلّه فتكبر الحلقة */
.mc-stage{flex:1;min-height:0;width:100%;display:grid;place-items:center;padding:4px;
  container-type:size}
.mc-wrap{flex:1;min-height:0}
.mc-note:empty{display:none}

/* ══════════════════════════════════════════════════════════
   🎖️ بنرات اللاعب في صفحته — تتحرّك، والمقفل عليه قفله
   ══════════════════════════════════════════════════════════ */
.pf-hero{position:relative;overflow:hidden;border-radius:20px}
.pf-hero.has-banner{padding:22px 20px;min-height:132px;align-items:flex-end}
.pf-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--own-img);background-size:cover;background-position:center;
}
.pf-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,18,.25) 30%,rgba(6,7,18,.86));
}
.pf-hero > *:not(.pf-hero-bg){position:relative;z-index:1}
.pf-hero.has-banner h2{text-shadow:0 2px 12px rgba(0,0,0,.9)}

.pf-bans{display:flex;flex-wrap:wrap;gap:10px}
.pf-ban{
  --tc:#8b7ad6;
  position:relative;width:168px;aspect-ratio:2.4 / 1;border-radius:13px;overflow:hidden;
  background:linear-gradient(140deg,var(--tc),color-mix(in srgb,var(--tc) 30%,#0d1020));
  background-size:cover;background-position:center;
  border:1px solid var(--line);
}
.pf-ban.open{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
/* المقفل يبقى ظاهراً بحركته — تعتيم أسفل فقط ليُقرأ السعر */
.pf-ban.lock::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,18,.05) 45%,rgba(6,7,18,.7));
}
.pf-ban-lk,.pf-ban-ok{
  position:absolute;z-index:1;inset-block-end:6px;inset-inline-start:6px;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:900;color:#fff;
  background:rgba(8,9,20,.8);border:1px solid rgba(255,255,255,.22);
}
.pf-ban-lk b{color:var(--star)}
.pf-ban-lk i{font-style:normal;font-size:10px;color:var(--dim-2)}
.pf-ban-ok{background:rgba(10,32,22,.82);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.pf-ban-a{
  position:absolute;z-index:1;inset-block-start:6px;inset-inline-end:6px;
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:900;color:#0c1220;
  background:linear-gradient(120deg,var(--star),#ffe6a3);
}
@media(max-width:640px){ .pf-ban{width:calc(50% - 5px)} }

/* ══════════════════════════════════════════════════════════════
   🎯 قلنا لـ١٠٠ شخص — لوحة الاستطلاع
   خانات مرقّمة مغلقة، تنقلب واحدةً واحدة من الأدنى إلى الأعلى
   ══════════════════════════════════════════════════════════════ */
body[data-lay="survey"] #stage{
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb,var(--acc) 16%,transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb,var(--acc) 7%,var(--surf)), var(--surf));
}
body[data-lay="survey"] .g-body{overflow:hidden;justify-content:flex-start;gap:12px}

/* ── السؤال ── */
.fd-q{
  flex:0 0 auto;width:100%;max-width:960px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 26px;border-radius:20px;
  background:linear-gradient(165deg,
    color-mix(in srgb,var(--acc) 20%,var(--surf-2)), var(--surf-2));
  border:1px solid color-mix(in srgb,var(--acc) 42%,transparent);
  box-shadow:0 14px 40px rgba(2,4,16,.45),
             0 0 44px color-mix(in srgb,var(--acc) 14%,transparent);
  animation:riseIn .35s var(--ease);
}
.fd-q-lead{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:900;letter-spacing:.4px;color:var(--acc);
  padding:4px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--acc) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 34%,transparent);
}
.fd-q b{
  font-size:30px;font-weight:900;letter-spacing:-.6px;line-height:1.25;color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.6);
}

/* ── اللوحة ── */
.fd-board{
  flex:1;min-height:0;width:100%;max-width:860px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;align-content:center;padding:2px;
}
.fd-board:has(.fd-slot:nth-child(7)){grid-template-columns:repeat(2, minmax(0,1fr))}
@media(max-width:820px){ .fd-board{grid-template-columns:minmax(0,1fr);gap:7px} }

.fd-slot{
  position:relative;display:flex;align-items:center;gap:14px;
  min-height:62px;padding:10px 16px;border-radius:15px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  animation:riseIn .3s var(--ease);
  transition:border-color .25s, box-shadow .25s;
}
/* الخانة المغلقة: رقمها فقط ونقاط منتظرة */
.fd-rank{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:44px;border-radius:13px;
  font-size:24px;font-weight:900;line-height:1;color:var(--dim);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.fd-dots{
  flex:1;text-align:center;letter-spacing:8px;font-size:16px;color:var(--dim-2);opacity:.45;
  animation:fdWait 1.6s ease-in-out infinite;
}
@keyframes fdWait{50%{opacity:.85}}

/* ── الخانة المكشوفة ── */
.fd-slot.on{
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--acc) 26%,var(--surf-2)), var(--surf-2));
  border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 10px 28px rgba(2,4,16,.4),
             0 0 26px color-mix(in srgb,var(--acc) 16%,transparent);
}
.fd-slot.on .fd-rank{
  color:#0d1220;
  background:linear-gradient(150deg,var(--acc),#bfe6f5);
  border-color:transparent;
}
.fd-ans{
  flex:1;min-width:0;font-size:24px;font-weight:900;letter-spacing:-.4px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.fd-n{
  flex:0 0 auto;display:grid;place-items:center;min-width:52px;height:40px;padding:0 12px;
  border-radius:12px;font-size:23px;font-weight:900;color:#0d1220;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}

/* أثر القلب لحظة الكشف */
.fd-slot.hot{animation:fdFlip .5s cubic-bezier(.2,1.3,.35,1)}
@keyframes fdFlip{
  0%  {transform:rotateX(-92deg) scale(.94);opacity:0}
  60% {transform:rotateX(12deg) scale(1.03);opacity:1}
  100%{transform:none;opacity:1}
}
.fd-slot.hot .fd-n{animation:fdPop .45s cubic-bezier(.2,1.7,.4,1)}
@keyframes fdPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* الإجابة الأولى تتوّج */
.fd-slot.first.on{
  border-color:var(--star);
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--star) 26%,var(--surf-2)), var(--surf-2));
  box-shadow:0 12px 34px rgba(2,4,16,.5),
             0 0 40px color-mix(in srgb,var(--star) 30%,transparent);
}
.fd-slot.first.on .fd-rank{background:linear-gradient(150deg,var(--star),#ffe2a6)}
.fd-slot.first.on::after{
  content:'👑';position:absolute;inset-block-start:-13px;inset-inline-start:12px;
  font-family:var(--emoji);font-size:22px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
  animation:fdPop .4s cubic-bezier(.2,1.7,.4,1);
}

/* ── الشريط السفلي ── */
.fd-foot{
  flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 18px;font-size:13px;font-weight:800;color:var(--dim);
}
.fd-live,.fd-sum{display:inline-flex;align-items:center;gap:7px;
  padding:6px 15px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line)}
.fd-live b,.fd-sum b{color:var(--star);font-size:17px;font-weight:900}
.fd-live i{color:var(--dim-2);font-style:normal}
.fd-miss{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11.5px;color:var(--dim-2)}
.fd-miss i{font-style:normal;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}

/* ── من أجاب حتى الآن ── */
.fd-faces{
  flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  width:100%;max-width:900px;margin-inline:auto;max-height:96px;overflow:hidden;
}
.fd-f{
  --pb-acc:var(--p2);display:inline-flex;align-items:center;gap:6px;
  padding:3px 12px 3px 3px;border-radius:999px;
  font-size:13px;font-weight:900;
  background:var(--surf-2);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  animation:riseIn .25s var(--ease);
}
.fd-f .av{width:26px;height:26px;font-size:12px}
.fd-f b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-faces.d2 .fd-f{font-size:11.5px;padding:2px 10px 2px 2px}
.fd-faces.d2 .fd-f .av{width:22px;height:22px;font-size:10px}
.fd-faces.d3 .fd-f{font-size:0;padding:2px;gap:0}
.fd-faces.d3 .fd-f b{display:none}
.fd-faces.d3 .fd-f .av{width:24px;height:24px;font-size:11px}

@media(max-width:900px){
  .fd-q b{font-size:21px}
  .fd-ans{font-size:18px}
  .fd-n{font-size:18px;min-width:42px;height:34px}
  .fd-rank{width:36px;height:36px;font-size:19px}
  .fd-slot{min-height:52px;padding:8px 12px;gap:10px}
}

/* ══════════════════════════════════════════════════════════════
   👤 بوّابة المشاهد — صفحة مستقلّة، بسيطة، تفتح على الجوال
   ══════════════════════════════════════════════════════════════ */
/* صفحة اللاعب ليست لوحةَ بثٍّ ثابتة بل صفحةُ ويب تُقرأ وتُمرَّر.
   الجسم العامّ مقفولٌ على ارتفاع الشاشة بلا تمرير — يصلح للمذيع
   على حاسوبه، ويحبس زائر الجوال فلا يبلغ نصف الصفحة. فنفكّه هنا. */
.vw-body{
  margin:0;
  display:block;
  height:auto;
  min-height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(120% 70% at 20% -8%,rgba(140,120,220,.24),transparent 62%),
    radial-gradient(100% 60% at 95% 40%,rgba(90,145,215,.18),transparent 64%),var(--bg);
}
.vw-wrap{max-width:920px;margin:0 auto;padding:26px 20px 56px;
  display:flex;flex-direction:column;gap:18px}
/* الرأس: الشعار في الوسط، والرجوع للألعاب في الطرف */
.vw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 4px}
.vw-head .vw-brand{margin-inline-start:auto}
.vw-back{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800;
  color:var(--dim);background:var(--surf);border:1px solid var(--line);
  text-decoration:none;transition:color .16s,border-color .16s,transform .16s;
}
.vw-back:hover{color:var(--ink);border-color:var(--line-2);transform:translateX(-2px)}
.vw-back span{transition:transform .16s}
.vw-back:hover span{transform:translateX(-3px)}
.vw-brand{display:flex;align-items:center;gap:10px}
.vw-brand svg{width:38px;height:38px}
.vw-brand b{font-size:22px;font-weight:900;letter-spacing:-.4px}
.vw-load{text-align:center;color:var(--dim);padding:40px 0}

.vw-card{
  background:var(--surf);border:1px solid var(--line);border-radius:22px;
  padding:20px 18px;box-shadow:var(--sh-2);
}
.vw-card h1{font-size:26px;font-weight:900;margin:0 0 6px;text-align:center}
.vw-card h2{font-size:17px;font-weight:900;margin:0 0 12px}
.vw-sub{color:var(--dim);font-size:14px;text-align:center;margin:0 0 18px;line-height:1.8}
.vw-empty{color:var(--dim-2);text-align:center;padding:18px 0}

/* ── شاشة الربط ── */
.vw-steps{margin:0 0 14px;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:9px}
.vw-steps li{display:flex;align-items:center;gap:10px;font-size:14.5px;
  font-weight:700;color:var(--txt)}
.vw-steps b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:900;color:#0d1220;
  background:linear-gradient(150deg,var(--p3),var(--p2))}
.vw-code{
  margin:6px 0 10px;padding:18px;border-radius:18px;text-align:center;cursor:pointer;
  font-size:42px;font-weight:900;letter-spacing:10px;color:#0d1220;
  font-family:ui-monospace,monospace;
  background:linear-gradient(150deg,var(--star),#ffe2a6);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.vw-copy{
  width:100%;padding:12px;border-radius:14px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:900;color:var(--txt);
  background:var(--surf-2);border:1px solid var(--line);margin-bottom:16px;
}
.vw-copy:hover{border-color:var(--line-2)}
.vw-timer{text-align:center;font-size:13px;color:var(--dim);margin-top:10px}
.vw-timer b{color:var(--star);font-weight:900;font-size:16px}
.vw-note{text-align:center;font-size:11.5px;color:var(--dim-2);margin-top:8px}

/* ── صفحته ── */
.vw-me{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.vw-av{width:64px;height:64px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-size:30px;
  background:var(--surf-2);border:2px solid var(--p3)}
.vw-av img{width:100%;height:100%;object-fit:cover}
.vw-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.vw-id b{font-size:22px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-id i{font-size:13px;font-style:normal;color:var(--dim-2);font-weight:700}

.vw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vw-s{background:var(--surf-2);border:1px solid var(--line);border-radius:14px;
  padding:12px 6px;text-align:center}
.vw-s b{display:block;font-size:20px;font-weight:900;color:var(--star)}
.vw-s span{font-size:10.5px;color:var(--dim-2);font-weight:700}
@media(max-width:420px){ .vw-stats{grid-template-columns:repeat(2,1fr)} }

.vw-next{margin-top:16px}
.vw-next-t{font-size:13.5px;font-weight:800;color:var(--dim);margin-bottom:8px}
.vw-next-t b{color:var(--star);font-size:16px}
.vw-bar{display:block;height:8px;border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.vw-bar u{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--p3),var(--star));transition:width .6s}

/* ── بنراته ── */
.vw-bans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vw-ban{
  --tc:#8b7ad6;position:relative;aspect-ratio:2.4/1;border-radius:14px;overflow:hidden;
  background:linear-gradient(140deg,var(--tc),color-mix(in srgb,var(--tc) 30%,#0d1020));
  background-size:cover;background-position:center;
  border:1px solid var(--line);
}
.vw-ban.open{border-color:color-mix(in srgb,var(--ok) 55%,transparent)}
/* المقفل يبقى ظاهراً بحركته — تعتيم أسفل فقط */
.vw-ban.lock::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,18,.05) 45%,rgba(6,7,18,.72))}
.vw-lk,.vw-ok{
  position:absolute;z-index:1;inset-block-end:6px;inset-inline-start:6px;
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:900;color:#fff;
  background:rgba(8,9,20,.82);border:1px solid rgba(255,255,255,.22);
}
.vw-lk b{color:var(--star)}
.vw-lk i{font-style:normal;font-size:10px;color:var(--dim-2)}
.vw-ok{background:rgba(10,32,22,.85);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.vw-anim{position:absolute;z-index:1;inset-block-start:6px;inset-inline-end:6px;
  padding:2px 8px;border-radius:999px;font-size:10px;font-weight:900;color:#0c1220;
  background:linear-gradient(120deg,var(--star),#ffe6a3)}

/* ── المتصدّرون ── */
.vw-top{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.vw-top li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;
  background:var(--surf-2);border:1px solid var(--line);font-size:14px}
.vw-top li.me{border-color:var(--star);
  background:color-mix(in srgb,var(--star) 12%,var(--surf-2))}
.vw-r{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:var(--dim);background:rgba(255,255,255,.06)}
.vw-top li:nth-child(1) .vw-r{background:linear-gradient(150deg,var(--star),#ffe2a6);color:#12151d}
.vw-tn{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-tp{font-weight:900;color:var(--star)}

.vw-foot{display:flex;justify-content:center;padding-top:6px}
.vw-unlink{background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--dim-2);text-decoration:underline}
.vw-unlink:hover{color:var(--bad)}

/* ══════════ ملفّ اللاعب: أقسام ومستوى وحقيبة ══════════ */
.vw-center{text-align:center}
.vw-hero{font-size:52px;line-height:1;margin-bottom:10px}
.vw-btn{display:inline-block;margin-top:14px;padding:12px 26px;border-radius:14px;
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:900;color:#0d1220;
  text-decoration:none;border:none;
  background:linear-gradient(120deg,var(--p3),var(--p2))}
.vw-btn-sm{padding:9px 16px;font-size:13px;margin:0}
.vw-uid{display:inline-block;padding:2px 9px;border-radius:999px;margin-inline-start:6px;
  font-size:12px;font-weight:900;color:var(--p3);
  background:color-mix(in srgb,var(--p3) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--p3) 34%,transparent)}
.vw-nolink{color:var(--dim-2)}

.vw-lvl{margin-top:16px}
.vw-lvl-t{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px}
.vw-lvl-t b{font-size:17px;font-weight:900}
.vw-lvl-t span{font-size:12px;color:var(--dim-2);font-weight:800}
.vw-lvl-n{margin-top:7px;font-size:12.5px;color:var(--dim)}
.vw-lvl-n b{color:var(--star);font-weight:900}

.vw-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vw-tab{padding:11px 4px;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:900;color:var(--dim);
  background:var(--surf);border:1px solid var(--line)}
.vw-tab.on{color:var(--txt);border-color:var(--p3);
  background:color-mix(in srgb,var(--p3) 14%,var(--surf))}
.vw-pane{display:flex;flex-direction:column;gap:14px}

.vw-hint{font-size:12.5px;color:var(--dim);margin-top:10px;text-align:center}
.vw-hint b{color:var(--star);font-weight:900}
.vw-count{font-size:12px;font-weight:800;color:var(--dim-2);margin-inline-start:6px}
.vw-sub-h{text-align:center;font-size:20px !important;margin-bottom:6px !important}

.vw-rows{display:flex;flex-direction:column;gap:8px}
.vw-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 12px;border-radius:11px;font-size:13.5px;
  background:var(--surf-2);border:1px solid var(--line)}
.vw-row span{color:var(--dim-2);font-weight:700}
.vw-row b{font-weight:900}

.vw-linked{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.vw-ok-b,.vw-wait-b{padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:900}
.vw-ok-b{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 38%,transparent)}
.vw-wait-b{color:var(--star);background:color-mix(in srgb,var(--star) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--star) 38%,transparent)}

.vw-or{text-align:center;font-size:12px;font-weight:900;color:var(--dim-2);margin:16px 0 12px;
  position:relative}
.vw-or::before,.vw-or::after{content:'';position:absolute;top:50%;width:38%;height:1px;
  background:var(--line)}
.vw-or::before{inset-inline-start:0}
.vw-or::after{inset-inline-end:0}
.vw-alt h3{font-size:15px;font-weight:900;margin:0 0 12px}
.vw-inline{padding:2px 9px;border-radius:7px;font-family:ui-monospace,monospace;
  color:#12151d;background:linear-gradient(150deg,var(--star),#ffe2a6)}
.vw-form{display:flex;align-items:center;gap:7px;margin-top:10px}
.vw-at{font-size:16px;font-weight:900;color:var(--dim-2)}
.vw-form input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;font-family:inherit;
  font-size:13.5px;color:var(--txt);background:var(--surf-2);border:1px solid var(--line)}
.vw-form input:focus{outline:none;border-color:var(--p3);box-shadow:var(--ring)}
.vw-vmsg{margin-top:9px;font-size:12.5px;font-weight:800;min-height:18px;color:var(--dim)}
.vw-vmsg .good{color:var(--ok)}
.vw-vmsg .bad{color:var(--bad)}

/* ── مدخل ملفّ اللاعب ── */
.ac-acts{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.ac-acts .btn-mini{white-space:nowrap;text-align:center;text-decoration:none}
.btn-prof{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,var(--acc,#8b7ad6),#5aa9e6);
}
.btn-prof:hover{filter:brightness(1.08)}
/* أيقونة الملف في الشريط العلوي */
#btnProf{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:17px}

/* ══════════ ملفّ اللاعب: أكبر وأوضح ══════════ */
.vw-card{padding:26px 24px;border-radius:26px}
.vw-card h1{font-size:32px}
.vw-card h2{font-size:21px;margin-bottom:16px}
.vw-brand svg{width:44px;height:44px}
.vw-brand b{font-size:26px}

/* الرأس: الاسم والرقم والمستوى */
.vw-top-card{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.vw-me{flex:1 1 260px}
.vw-lvl{flex:1 1 320px}
.vw-av{width:76px;height:76px;font-size:34px}
.vw-id b{font-size:23px}
.vw-uid{font-size:16px}

/* التبويبات — أكبر وأسهل ضغطاً */
.vw-tabs{gap:10px}
.vw-tab{padding:12px 20px;font-size:15px;border-radius:14px}

/* الأرقام */
.vw-stats{gap:14px}
.vw-s b{font-size:30px}
.vw-s span{font-size:13px}
.vw-rows .vw-row{padding:13px 2px;font-size:16px}

/* البنرات في شبكة أوسع */
.vw-bans{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}

.vw-more{
  display:block;margin-top:16px;padding:13px;border-radius:14px;text-align:center;
  font-size:14px;font-weight:800;color:var(--dim);text-decoration:none;
  background:var(--bg-2,rgba(255,255,255,.03));border:1px solid var(--line);
  transition:color .16s,border-color .16s;
}
.vw-more:hover{color:var(--ink);border-color:var(--line-2)}

/* ── الربط: ثلاث خطوات مرقّمة كبيرة ── */
.lk{display:flex;flex-direction:column;gap:20px;margin-top:6px}
.lk-step{display:flex;gap:16px;align-items:flex-start}
.lk-n{
  flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:50%;
  font-size:19px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
}
.lk-b{flex:1;min-width:0}
.lk-b h4{margin:8px 0 10px;font-size:18px;font-weight:900}
.lk-hint{margin:10px 0 0;font-size:14px;line-height:1.85;color:var(--dim)}

.lk-code{
  display:inline-block;padding:14px 26px;border-radius:16px;cursor:pointer;
  font-size:34px;font-weight:900;letter-spacing:9px;direction:ltr;
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  color:#fff;background:rgba(139,122,214,.16);border:2px dashed rgba(139,122,214,.6);
}
.lk-code:hover{background:rgba(139,122,214,.26)}
.lk-copy{
  margin-inline-start:10px;padding:12px 18px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:800;color:var(--ink);
  background:var(--surf-2,rgba(255,255,255,.05));border:1px solid var(--line);
}
.lk-copy:hover{border-color:var(--line-2)}

.lk-form{display:flex;align-items:center;gap:0;flex-wrap:wrap}
.lk-at{
  padding:14px 14px;border-radius:14px 0 0 14px;font-size:17px;font-weight:900;
  color:var(--dim);background:var(--surf-2,rgba(255,255,255,.05));
  border:1px solid var(--line);border-inline-end:0;direction:ltr;
}
.lk-form input{
  flex:1 1 200px;min-width:0;padding:14px 14px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--surf-2,rgba(255,255,255,.05));
  border:1px solid var(--line);border-radius:0;
}
.lk-form input:focus{outline:none;border-color:#8b7ad6}
.lk-go{
  padding:14px 26px;border-radius:0 14px 14px 0;cursor:pointer;
  font:inherit;font-size:16px;font-weight:900;color:#fff;border:0;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
}
.lk-go:hover{filter:brightness(1.08)}
.lk-go:disabled{opacity:.55;cursor:default}

.lk-msg{margin-top:14px;font-size:15px;line-height:1.8;min-height:1px}
.lk-msg .good{color:#5ee08a;font-weight:800}
.lk-msg .bad{color:#ff8b8b;font-weight:800}
.lk-msg .wait{color:var(--dim)}
.lk-saw{
  display:block;margin-top:8px;padding:10px 12px;border-radius:10px;
  font-style:normal;font-weight:500;font-size:13px;line-height:1.7;
  color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--line);
  white-space:pre-wrap;word-break:break-word;
}

@media (max-width:560px){
  .lk-code{font-size:26px;letter-spacing:6px;padding:12px 18px}
  .lk-copy{margin:10px 0 0;display:block;width:100%}
  .lk-n{flex-basis:34px;height:34px;font-size:16px}
  .lk-step{gap:12px}
  .vw-card{padding:20px 16px}
}
.lk-warn{
  margin:12px 0 0;padding:11px 13px;border-radius:11px;
  font-size:13px;line-height:1.8;color:#ffd76e;
  background:rgba(255,215,110,.09);border:1px solid rgba(255,215,110,.28);
}

/* ══════════════════════════════════════════════════════════
   ملفّ اللاعب — تصميم هادئ بلا إيموجي:
   الحروف والفراغ واللون يحملون المعنى بدل الرموز
   ══════════════════════════════════════════════════════════ */
/* body عليها display:flex من التنسيق العام، فالحاوية تتقلّص لمحتواها
   ما لم نُعطها عرضاً صريحاً — لذلك width:100% لا max-width وحده */
.vw-wrap{width:100%;max-width:1080px;margin-inline:auto}

.vw-body{
  background:
    radial-gradient(120% 65% at 12% -10%, rgba(139,122,214,.20), transparent 60%),
    radial-gradient(90% 55% at 92% 8%, rgba(90,169,230,.14), transparent 62%),
    var(--bg, #06060e);
}

/* ── البطاقة العليا: الهويّة والمستوى ── */
.vw-top-card{
  position:relative;overflow:hidden;
  padding:30px 28px;border-radius:28px;
  background:linear-gradient(150deg, rgba(139,122,214,.14), rgba(90,169,230,.07) 55%, transparent),
             var(--surf);
}
.vw-me{display:flex;align-items:center;gap:20px}
.vw-av{
  width:82px;height:82px;border-radius:24px;display:grid;place-items:center;
  font-size:32px;font-weight:900;overflow:hidden;flex:0 0 auto;
  color:#fff;background:linear-gradient(140deg,#8b7ad6,#5aa9e6);
  box-shadow:0 8px 22px rgba(139,122,214,.32);
}
.vw-av img{width:100%;height:100%;object-fit:cover}
.vw-id{min-width:0}
.vw-id b{display:block;font-size:25px;font-weight:900;letter-spacing:-.4px;line-height:1.3}
.vw-uid{
  display:inline-block;margin-top:7px;padding:3px 11px;border-radius:999px;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;direction:ltr;
  color:#c9b8ff;background:rgba(139,122,214,.16);border:1px solid rgba(139,122,214,.3);
}
.vw-id i{display:block;margin-top:7px;font-style:normal;font-size:14px;color:var(--dim);direction:ltr}
.vw-nolink{opacity:.62}

/* ── شريط المستوى ── */
.vw-lvl-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:11px}
.vw-lvl-t b{font-size:19px;font-weight:900}
.vw-lvl-t span{font-size:13px;font-weight:700;color:var(--dim)}
.vw-bar{
  display:block;height:11px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid var(--line);
}
.vw-bar u{
  display:block;height:100%;border-radius:999px;text-decoration:none;
  background:linear-gradient(90deg,#8b7ad6,#5aa9e6);
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}
.vw-lvl-n{margin-top:11px;font-size:13.5px;color:var(--dim)}

/* ── التبويبات ── */
.vw-tabs{display:flex;gap:8px;flex-wrap:wrap}
.vw-tab{
  flex:1 1 auto;padding:13px 22px;border-radius:15px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:800;color:var(--dim);
  background:var(--surf);border:1px solid var(--line);
  transition:color .16s,border-color .16s,background .16s;
}
.vw-tab:hover{color:var(--ink)}
.vw-tab.on{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
  box-shadow:0 6px 18px rgba(139,122,214,.28);
}

/* ── الأرقام ── */
.vw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.vw-s{
  padding:20px 14px;border-radius:18px;text-align:center;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
}
.vw-s b{display:block;font-size:31px;font-weight:900;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;line-height:1.15}
.vw-s span{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--dim)}

/* ── المتصدّرون ── */
.vw-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.vw-top li{display:flex;align-items:center;gap:14px;padding:12px;border-radius:13px}
.vw-top li:nth-child(odd){background:rgba(255,255,255,.028)}
.vw-top li.me{background:rgba(139,122,214,.14);box-shadow:inset 0 0 0 1px rgba(139,122,214,.3)}
.vw-r{
  flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:9px;
  font-size:13px;font-weight:900;color:var(--dim);background:rgba(255,255,255,.05);
}
.vw-top li:nth-child(1) .vw-r{color:#0c0c14;background:linear-gradient(140deg,#ffd76e,#e8a838)}
.vw-top li:nth-child(2) .vw-r{color:#0c0c14;background:linear-gradient(140deg,#dfe6f0,#a8b4c6)}
.vw-top li:nth-child(3) .vw-r{color:#0c0c14;background:linear-gradient(140deg,#e0a878,#b8763f)}
.vw-tn{flex:1;min-width:0;font-weight:700;font-size:15px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vw-tp{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;color:#c9b8ff}

/* ── الحقيبة: البنرات بصورها ── */
.vw-bans{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.vw-ban{
  position:relative;aspect-ratio:16/6;border-radius:16px;overflow:hidden;
  display:flex;align-items:flex-end;padding:11px;
  background-size:cover;background-position:center;
  border:1px solid var(--line);
  background-color:color-mix(in srgb, var(--tc) 26%, #0c0c16);
}
.vw-ban::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(6,6,14,.72), rgba(6,6,14,.06) 52%, transparent);
}
/* المقفل يبقى مرئياً: الهدف أن يشتهيه لا أن يختفي عنه */
.vw-ban.lock{filter:grayscale(.42) brightness(.86)}
.vw-ban.lock::after{background:linear-gradient(to top, rgba(6,6,14,.78), rgba(6,6,14,.2) 58%, rgba(6,6,14,.06))}
.vw-ban.open{box-shadow:0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent),
             0 8px 20px rgba(0,0,0,.3)}
.vw-bn{
  position:relative;z-index:1;font-size:15px;font-weight:900;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8);
  max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vw-ok,.vw-lk,.vw-anim{
  position:absolute;z-index:2;top:9px;inset-inline-end:9px;
  padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;
}
.vw-ok{color:#0d1a10;background:#5ee08a}
.vw-lk{
  color:#ffd76e;background:rgba(10,10,18,.9);border:1px solid rgba(255,215,110,.34);
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  padding:5px 11px;line-height:1.35;backdrop-filter:blur(3px);
}
.vw-lk b{font-size:13px;font-variant-numeric:tabular-nums}
.vw-lk i{font-style:normal;font-weight:600;opacity:.7;font-size:10px;white-space:nowrap}
.vw-anim{top:auto;bottom:9px;inset-inline-end:9px;color:#cfe6ff;
  background:rgba(12,12,22,.78);border:1px solid rgba(120,180,255,.3)}
.vw-count{margin-inline-start:9px;font-size:13px;font-weight:700;color:var(--dim)}

/* ── علامة هادئة بدل الإيموجي الكبير ── */
.vw-mark{
  width:56px;height:56px;margin:0 auto 18px;border-radius:18px;
  background:linear-gradient(140deg, rgba(139,122,214,.3), rgba(90,169,230,.18));
  border:1px solid var(--line);
}
.vw-mark.on{background:linear-gradient(140deg,#8b7ad6,#5aa9e6);border-color:transparent;
  box-shadow:0 8px 22px rgba(139,122,214,.3)}

/* ── الصفوف ── */
.vw-rows{display:flex;flex-direction:column}
.vw-row{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 2px;border-bottom:1px solid var(--line);font-size:15.5px}
.vw-row:last-child{border-bottom:0}
.vw-row span{color:var(--dim);font-size:14px}
.vw-row b{font-weight:800;direction:ltr;font-variant-numeric:tabular-nums}

.vw-ok-b,.vw-wait-b{
  display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:800;
}
.vw-ok-b{color:#0d1a10;background:#5ee08a}
.vw-wait-b{color:#ffd76e;background:rgba(255,215,110,.13);border:1px solid rgba(255,215,110,.3)}

.vw-btn{
  display:inline-block;padding:15px 30px;border-radius:15px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:900;color:#fff;border:0;text-decoration:none;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
  box-shadow:0 8px 22px rgba(139,122,214,.28);
}
.vw-btn:hover{filter:brightness(1.07)}
.vw-unlink{
  margin-top:8px;padding:11px 20px;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:800;color:#ff9b9b;
  background:transparent;border:1px solid rgba(255,155,155,.3);
}
.vw-unlink:hover{background:rgba(255,155,155,.09)}

.vw-center{text-align:center}
.vw-sub{font-size:15px;line-height:1.95;color:var(--dim);margin:12px 0 0}
.vw-sub-h{font-size:23px;margin:0 0 8px}
.vw-hint{margin-top:9px;font-size:14px;color:var(--dim)}
.vw-empty{padding:34px 0;text-align:center;color:var(--dim);font-size:15px}

@media (max-width:760px){
  .vw-top-card{padding:22px 18px}
  .vw-me{gap:15px}
  .vw-av{width:64px;height:64px;font-size:25px;border-radius:19px}
  .vw-id b{font-size:21px}
  .vw-s b{font-size:26px}
  .vw-tab{padding:11px 15px;font-size:14px}
  .vw-bans{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
}

/* رسالة رفع البنر — تبقى ظاهرة بدل تنبيهٍ عابر */
.tb-msg{margin-top:10px;font-size:13.5px;line-height:1.75;font-weight:700;min-height:1px}
.tb-msg.ok{color:#5ee08a}
.tb-msg.bad{color:#ff9b9b}

/* ══════════════════════════════════════════════════════════
   الحقيبة — الصورة نظيفة والكلام تحتها.
   الشارة القديمة كانت تجلس فوق البنر فتغطّي الرسم كلّه.
   ══════════════════════════════════════════════════════════ */
.vw-bans{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

.vw-bcard{
  margin:0;border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:border-color .18s, transform .18s;
}
.vw-bcard.open{
  border-color:color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.vw-bcard:hover{transform:translateY(-2px)}

/* الصورة: بلا أي شيء فوقها إلا وسم «متحرّك» الصغير */
.vw-ban{
  position:relative;aspect-ratio:16/6;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:color-mix(in srgb, var(--tc) 24%, #0c0c16);
}
.vw-bcard.lock .vw-ban{filter:grayscale(.5) brightness(.72)}
.vw-anim{
  position:absolute;top:8px;inset-inline-end:8px;z-index:2;
  padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:800;
  color:#cfe6ff;background:rgba(10,10,18,.8);border:1px solid rgba(120,180,255,.32);
}

/* السطر السفلي: الاسم والحالة */
.vw-bfoot{padding:11px 13px 13px}
.vw-bname{
  display:block;font-size:14px;font-weight:900;margin-bottom:7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vw-ok{
  /* قاعدة قديمة تجعلها absolute بأربع حوافّ فتملأ الصفحة — نُبطلها هنا */
  position:static;inset:auto;
  display:inline-block;padding:3px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:#0d1a10;background:#5ee08a;
}
.vw-bfoot .vw-ok,.vw-bfoot .vw-need,.vw-bfoot .vw-bbar{position:static;inset:auto}
.vw-need{display:block;font-size:12.5px;font-weight:700;color:#ffd76e}
.vw-need b{font-size:14px;font-variant-numeric:tabular-nums}
.vw-bbar{
  display:block;height:5px;margin-top:8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.vw-bbar u{
  display:block;height:100%;border-radius:999px;text-decoration:none;
  background:linear-gradient(90deg,#8b7ad6,#5aa9e6);
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}

@media (max-width:760px){
  .vw-bans{grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:12px}
  .vw-bfoot{padding:9px 11px 11px}
}
.vw-src{display:block;margin-top:3px;font-style:normal;font-size:11.5px;
  font-weight:600;color:var(--dim);opacity:.75}

/* استعادة كلمة المرور */
.ag-forgot{
  display:block;margin:12px auto 0;padding:6px 10px;border:0;background:none;
  font:inherit;font-size:13.5px;font-weight:700;color:var(--dim);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ag-forgot:hover{color:var(--ink)}
.ag-hint{
  display:block;margin-top:6px;font-style:normal;font-size:12px;color:var(--dim);
}
.ag-tabs{display:flex;gap:8px;margin:0 0 16px}
.ag-tabs .ag-t{
  flex:1;padding:10px;border-radius:12px;cursor:pointer;font:inherit;
  font-size:14px;font-weight:800;color:var(--dim);
  background:var(--surf);border:1px solid var(--line);
}
.ag-tabs .ag-t.on{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6)}

/* مشغّل الأغنية في شاشة الاستعداد — يضغطه المذيع مرّة واحدة */
.mc-ready-yt{display:flex;flex-direction:column;align-items:center;gap:14px}
.mc-yt-wrap{width:100%;max-width:420px}
#mcYtSlot{width:100%;max-width:420px}
.mc-snd{width:100%;max-width:420px}
.mc-yt-tip{
  margin-bottom:9px;padding:9px 12px;border-radius:12px;text-align:center;
  font-size:13px;font-weight:800;line-height:1.7;color:#ffd76e;
  background:rgba(255,215,110,.1);border:1px solid rgba(255,215,110,.3);
}
/* حين يكون داخل الشاشة: عاديّ في مكانه لا مثبّتاً في الزاوية */
.mm-yt.inline{
  position:static;inset:auto;width:100%;box-shadow:none;
  border-radius:14px;overflow:hidden;
}
.mm-yt.inline iframe{height:210px}
@media(max-width:700px){ .mm-yt.inline iframe{height:170px} }
.mm-tip{
  margin:0 0 10px;padding:9px 11px;border-radius:11px;
  font-size:12.5px;line-height:1.8;color:var(--dim);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.mm-tip b{color:var(--ink)}

/* لعبة تحت الصيانة — تبقى مرئيّة ليعرف الجميع أنها قادمة */
.gcard.maint{opacity:1;cursor:not-allowed;filter:none}
.gcard.maint:hover{transform:none}
.gc-maint{
  position:absolute;top:10px;inset-inline-start:10px;z-index:3;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;
  color:#ffd76e;background:rgba(10,10,18,.85);border:1px solid rgba(255,215,110,.34);
}
.gcard.maint .gc-go{font-size:11px;color:#ffd76e;font-style:normal}
.new-tag.maint-tag{background:rgba(255,215,110,.16);color:#ffd76e;
  border:1px solid rgba(255,215,110,.3)}
.g-item:has(.maint-tag){opacity:.55}

/* ══════════════════════════════════════════════════════════
   شريط الدور — من عليه الدور · ماذا يُطلب · كم بقي
   عريضٌ فوق المسرح ليقرأه المشاهد من بعيد بلا تدقيق
   ══════════════════════════════════════════════════════════ */
.turnbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:0 auto 14px;padding:14px 18px;max-width:min(860px,96%);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(139,122,214,.18), rgba(90,169,230,.08) 60%, transparent),
             var(--surf);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  animation:tbIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes tbIn{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.turnbar[hidden]{display:none}

/* الشخص */
.tb-who{display:flex;align-items:center;gap:13px;min-width:0;flex:0 0 auto}
.tb-av{
  width:56px;height:56px;flex:0 0 auto;border-radius:17px;
  display:grid;place-items:center;overflow:hidden;
  font-size:23px;font-weight:900;color:#fff;
  background:linear-gradient(140deg,#8b7ad6,#5aa9e6);
  box-shadow:0 0 0 3px rgba(139,122,214,.28);
}
.tb-av img{width:100%;height:100%;object-fit:cover}
.tb-nm{display:flex;flex-direction:column;min-width:0}
.tb-nm b{
  font-size:22px;font-weight:900;letter-spacing:-.3px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;
}
.tb-nm i{font-style:normal;font-size:12.5px;font-weight:800;color:#c9b8ff;margin-top:2px}

/* المطلوب منه */
.tb-ask{
  flex:1 1 220px;min-width:0;text-align:center;
  font-size:17px;font-weight:800;line-height:1.6;color:var(--ink);
}
.tb-ask b{color:#ffd76e;font-size:26px;letter-spacing:1px}

/* الوقت */
.tb-time{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:74px}
.tb-time span{
  font-size:32px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  color:#fff;
}
.tb-bar{display:block;width:74px;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.1)}
.tb-bar u{display:block;height:100%;width:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#5ee08a,#ffd76e);transition:width .95s linear}

/* الحالات */
.turnbar.live .tb-av{box-shadow:0 0 0 3px rgba(255,215,110,.4);animation:tbPulse 1.1s infinite}
@keyframes tbPulse{50%{box-shadow:0 0 0 8px rgba(255,215,110,.06)}}
.turnbar.safe{background:linear-gradient(135deg, rgba(94,224,138,.16), transparent 60%), var(--surf)}
.turnbar.safe .tb-nm i{color:#5ee08a}
.turnbar.safe .tb-av{box-shadow:0 0 0 3px rgba(94,224,138,.4);animation:none}
.turnbar.out{background:linear-gradient(135deg, rgba(255,139,139,.16), transparent 60%), var(--surf)}
.turnbar.out .tb-nm i{color:#ff8b8b}
.turnbar.out .tb-av{filter:grayscale(.7);box-shadow:0 0 0 3px rgba(255,139,139,.35);animation:none}
.turnbar.out .tb-nm b{text-decoration:line-through;text-decoration-thickness:2px;opacity:.75}

/* الوقت الحرج */
.turnbar.hot .tb-time span{color:#ff8b8b;animation:tbHot .5s infinite}
@keyframes tbHot{50%{transform:scale(1.14)}}
.turnbar.hot .tb-bar u{background:linear-gradient(90deg,#ff8b8b,#ffd76e)}

@media(max-width:640px){
  .turnbar{gap:12px;padding:11px 13px;border-radius:16px}
  .tb-av{width:44px;height:44px;border-radius:13px;font-size:18px}
  .tb-nm b{font-size:18px;max-width:150px}
  .tb-ask{flex-basis:100%;order:3;font-size:15px}
  .tb-ask b{font-size:22px}
  .tb-time span{font-size:25px}
  .tb-bar{width:56px}
}
/* مسرحٌ فيه شريط دور: عمودٌ لا صفّ، ليأخذ الشريط عرضه كاملاً */
.with-turnbar{flex-direction:column !important;align-items:stretch !important}
.turnbar{width:100%;flex:0 0 auto}

/* ══════════════════════════════════════════════════════════
   بطاقة اللعبة: «العب» بارز، و«؟» لمن يبي يعرف قبل ما يدخل
   ══════════════════════════════════════════════════════════ */
.gc-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px}

.gc-go{
  /* التصميم القديم كان يُظهره عند المرور فقط — والزرّ لا يُخفى */
  opacity:1;transform:none;
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-inline-start:0;
  padding:10px 14px;border-radius:13px;
  font-style:normal;font-size:14px;font-weight:900;color:var(--bg);
  background:var(--brand-gradient);
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand-purple) 20%,transparent);
  transition:filter .16s, transform .16s;
}
.gcard:hover .gc-go{filter:none;color:var(--bg)}

/* ══════════ حياةُ التفاعل ══════════ */

/* وميضٌ يعبر البطاقة مرّةً عند المرور */
.gc-shine{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  overflow:hidden;opacity:0;
}
.gc-shine::before{
  content:'';position:absolute;inset-block:-40%;width:46%;
  inset-inline-start:-52%;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--acc) 34%,rgba(255,255,255,.22)),transparent);
  transform:rotate(14deg);
}
.gcard:hover .gc-shine{opacity:1}
.gcard:hover .gc-shine::before{animation:gcShine .85s var(--ease) forwards}
@keyframes gcShine{to{inset-inline-start:118%}}

/* الضغطةُ تُجيب: انخفاضٌ خفيفٌ وظلٌّ يقترب */
.gcard:active{
  transform:translateY(-1px) scale(.986);
  box-shadow:var(--sh-2), 0 0 16px color-mix(in srgb,var(--acc) 16%,transparent);
  transition-duration:.09s;
}
.gcard:active .gc-orb{transform:scale(1.03) rotate(-2deg);transition-duration:.09s}
.gcard:active .gc-go{transform:translateY(1px)}

/* زرُّ «العب» يرتفع مع بطاقته بدل أن يكتفي بالإضاءة */
.gc-go{transition:filter .16s, transform .22s var(--ease), box-shadow .22s var(--ease)}
.gcard:hover .gc-go{
  transform:translateY(-2px);
  box-shadow:0 11px 24px color-mix(in srgb,var(--acc) 38%,transparent);
}
.gcard:hover .gc-how{border-color:color-mix(in srgb,var(--acc) 34%,transparent);color:var(--txt)}

.gc-how{
  /* يأخذ ارتفاعَ «العب» بجانبه مهما كان — كان ٣٨ ثابتاً فتخلّفت
     حافّتُه عنه، وأيُّ رقمٍ ثابتٍ يتخلّف إن تغيّر الخطّ. والأربعون
     أرضيّةٌ تقارب هدفَ اللمس الموصى به على الجوّال. */
  flex:0 0 auto;width:40px;min-height:40px;height:auto;align-self:stretch;
  display:grid;place-items:center;
  border-radius:12px;cursor:pointer;
  font-style:normal;font-size:17px;font-weight:900;color:var(--dim);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  transition:color .16s, border-color .16s, background .16s;
}
.gc-how:hover{color:#fff;background:rgba(255,255,255,.12);border-color:var(--line-2)}

.gcard.maint .gc-go{
  background:rgba(255,215,110,.12);color:#ffd76e;box-shadow:none;
  border:1px solid rgba(255,215,110,.3);font-size:11.5px;
}

.gc-kindi{
  padding:2px 9px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;
  color:var(--dim);background:rgba(255,255,255,.06);border:1px solid var(--line);
}

/* ══ نافذة «كيف تنلعب؟» ══ */
.how{max-width:480px}
.how-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.how-orb{
  width:66px;height:66px;flex:0 0 auto;border-radius:20px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--acc,#8b7ad6) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--acc,#8b7ad6) 34%, transparent);
}
.how-head h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.4px}
.how-kind{
  display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:var(--dim);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.how-desc{margin:0 0 18px;font-size:15.5px;line-height:1.95;color:var(--dim)}
.how-steps{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.how-s{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.85}
.how-s > b{
  flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:50%;
  font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
}
.how-w{color:#ffd76e;font-weight:900}
.how .btn{width:100%}

@media(max-width:560px){
  .how-head h2{font-size:20px}
  .how-orb{width:54px;height:54px;border-radius:16px}
  .how-desc{font-size:14.5px}
}

/* ══════════════════════════════════════════════════════════
   البولينج — أبسط: ممرّ فوق · مضمار أرقام كبير · لوحة نتائج
   ══════════════════════════════════════════════════════════ */
.bw-wrap{
  display:flex;flex-direction:column;gap:14px;width:100%;
  max-width:min(900px,96%);margin:0 auto;
}
.bw-wrap .stage3d,.bw-2d{
  width:100%;aspect-ratio:16/9;max-height:46vh;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, rgba(127,143,216,.18), transparent 60%), #0b0b16;
  border:1px solid var(--line);
}

/* ── مضمار الأرقام: ما يكتبه اللاعب، كبيراً بلا لبس ── */
.bw-aim{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  padding:14px;border-radius:18px;
  background:var(--surf);border:1px solid var(--line);
}
.bw-l{
  width:52px;height:52px;display:grid;place-items:center;border-radius:14px;
  font-style:normal;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;
  color:var(--dim);background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  transition:transform .18s, background .18s, color .18s, border-color .18s;
}
.bw-l.mid{
  color:#ffd76e;border-color:rgba(255,215,110,.4);
  background:rgba(255,215,110,.1);
}
.bw-l.on{
  color:#fff;transform:translateY(-4px) scale(1.12);border-color:transparent;
  background:linear-gradient(140deg,#7f8fd8,#5aa9e6);
  box-shadow:0 8px 20px rgba(127,143,216,.45);
}
.bw-hint{
  flex-basis:100%;text-align:center;margin-top:4px;
  font-size:12.5px;font-weight:700;color:var(--dim);
}

/* ── لوحة النتائج ── */
.bw-board{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;
}
.bw-r{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:background .18s, border-color .18s;
}
.bw-r.now{
  background:color-mix(in srgb, var(--pb-acc,#7f8fd8) 18%, transparent);
  border-color:color-mix(in srgb, var(--pb-acc,#7f8fd8) 45%, transparent);
}
.bw-rk{
  flex:0 0 26px;height:26px;display:grid;place-items:center;border-radius:8px;
  font-size:12px;font-weight:900;color:var(--dim);background:rgba(255,255,255,.06);
}
.bw-r:nth-child(1) .bw-rk{color:#0c0c14;background:linear-gradient(140deg,#ffd76e,#e8a838)}
.bw-r:nth-child(2) .bw-rk{color:#0c0c14;background:linear-gradient(140deg,#dfe6f0,#a8b4c6)}
.bw-r:nth-child(3) .bw-rk{color:#0c0c14;background:linear-gradient(140deg,#e0a878,#b8763f)}
.bw-nm{
  flex:1;min-width:0;font-size:14px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bw-st{
  padding:2px 7px;border-radius:999px;font-size:11px;font-weight:800;
  font-style:normal;text-decoration:none;color:#ffd76e;
  background:rgba(255,215,110,.13);border:1px solid rgba(255,215,110,.28);
}
.bw-sc{
  font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;color:#c9b8ff;
}

@media(max-width:640px){
  .bw-l{width:40px;height:40px;font-size:17px;border-radius:11px}
  .bw-aim{gap:6px;padding:11px}
  .bw-board{grid-template-columns:1fr 1fr;gap:6px}
  .bw-r{padding:8px 9px;gap:7px}
  .bw-nm{font-size:12.5px}
  .bw-sc{font-size:15px}
}

/* ══════════════════════════════════════════════════════════
   خمّن الدولة — الصورة هي البطل، والباقي يخدمها
   ══════════════════════════════════════════════════════════ */
.pl-wrap{
  display:flex;flex-direction:column;gap:12px;width:100%;
  max-width:min(760px,96%);margin:0 auto;
}

/* الرأس: رقم الصورة · السؤال · الوقت */
.pl-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-radius:16px;
  background:var(--surf);border:1px solid var(--line);
}
.pl-n{font-size:14px;font-weight:800;color:var(--dim)}
.pl-n b{color:var(--ink)}
.pl-ask{font-size:20px;font-weight:900;letter-spacing:-.3px}
.pl-time{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:62px}
.pl-time b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.pl-bar{display:block;width:62px;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.1)}
.pl-bar u{display:block;height:100%;width:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#4fb98a,#ffd76e);transition:width .95s linear}

/* الإجابة بعد الكشف */
.pl-ans{
  font-size:24px;font-weight:900;color:#5ee08a;
  animation:plPop .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes plPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.pl-cnt{font-size:13px;font-weight:800;color:var(--dim)}

/* الصورة */
.pl-photo{
  position:relative;width:100%;aspect-ratio:16/10;max-height:52vh;
  border-radius:20px;overflow:hidden;background:#0b0b16;
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.4);
}
.pl-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  animation:plFade .5s ease;
}
@keyframes plFade{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.pl-photo.done::after{
  content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px rgba(94,224,138,.55);border-radius:20px;
}
.pl-fail{display:none}
.pl-photo.bad img{display:none}
.pl-photo.bad{display:grid;place-items:center}
.pl-photo.bad .pl-fail{
  display:block;padding:20px;text-align:center;font-size:14px;color:var(--dim);
}

/* من عرفها */
.pl-hits{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:2px}
.pl-hit{
  display:flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:999px;
  background:color-mix(in srgb, var(--pb-acc,#4fb98a) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--pb-acc,#4fb98a) 42%, transparent);
  animation:plPop .3s cubic-bezier(.2,.9,.3,1);
}
.pl-rk{
  width:23px;height:23px;display:grid;place-items:center;border-radius:50%;
  font-size:11.5px;font-weight:900;color:#0c0c14;background:#ffd76e;
}
.pl-hit:nth-child(2) .pl-rk{background:#dfe6f0}
.pl-hit:nth-child(3) .pl-rk{background:#e0a878}
.pl-nm{font-size:14px;font-weight:800;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-pt{font-size:14px;font-weight:900;color:#5ee08a}
.pl-none{padding:14px;font-size:15px;font-weight:700;color:var(--dim)}

@media(max-width:640px){
  .pl-head{padding:10px 12px;gap:10px}
  .pl-ask{font-size:17px}
  .pl-ans{font-size:20px}
  .pl-time b{font-size:21px}
  .pl-photo{border-radius:16px;aspect-ratio:4/3}
  .pl-nm{max-width:90px;font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════
   الروليت: العجلة هي البطل — لا يقضم ارتفاعَها شيء
   ══════════════════════════════════════════════════════════ */

/* شريحة الهدية أيقونةٌ عائمة خارج التدفّق، فلا تأخذ من العجلة صفّاً */
.lay-arena .g-mid{
  position:absolute;top:10px;inset-inline-start:12px;z-index:6;
  flex:0 0 auto;min-width:0;width:auto;
}
.lay-arena .g-top{position:relative}
.gift-chip.gift-mini{
  display:grid;place-items:center;width:46px;height:46px;padding:0;
  border-radius:15px;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,61,113,.26),rgba(255,159,69,.16));
  border:1px solid rgba(255,61,113,.45);
  box-shadow:0 6px 16px rgba(255,61,113,.22);
  animation:gmPulse 2.4s ease-in-out infinite;
}
@keyframes gmPulse{50%{box-shadow:0 6px 22px rgba(255,61,113,.4)}}
.gift-chip.gift-mini img,.gift-chip.gift-mini .gi-art{
  width:34px;height:34px;object-fit:contain;
}
@media(max-width:900px){
  .lay-arena .g-mid{display:grid}
  .gift-chip.gift-mini{width:38px;height:38px;border-radius:12px}
  .gift-chip.gift-mini img,.gift-chip.gift-mini .gi-art{width:27px;height:27px}
}

/* العجلة تملأ خانتها — والأسماء تكبر معها */
.wheel-wrap{
  width:min(99cqw, 96cqh, 760px) !important;
}
.rt-wrap{gap:8px}

/* ── الروليت: نضغط الرؤوس لتكبر العجلة ──
   كل بكسل يأخذه سطرُ شرحٍ فوق يُقتطع من قطر العجلة، والعجلة
   هي ما يشاهده الناس فعلاً. فنُبقي الشرح موجوداً ونُنحّفه. */
.lay-arena .g-how{
  padding:5px 12px;font-size:12.5px;line-height:1.5;
  margin-bottom:2px;
}
.lay-arena .g-top{padding:0;min-height:0}
.lay-arena .g-sub{font-size:13.5px;line-height:1.5}
.lay-arena .g-wrap{gap:6px;padding:10px 12px}
.lay-arena .g-body{gap:6px}
.lay-arena .rt-spinbox{padding-block:4px}

/* وبعدها العجلة تأخذ ما تبقّى. كبّرناها بطلب المالك — والأسماء
   تكبر معها لأنّ قياسها نسبةٌ من قطرها لا رقمٌ ثابت. */
.lay-arena .wheel-wrap{width:min(99cqw, 96cqh, 780px) !important}

/* ══ الروليت: كل بكسلٍ للعجلة ══
   قطرُها محكومٌ بارتفاع خانتها، فكلُّ سطرٍ فوقها يُقتطع منه. فأزلنا
   سطر العدد (الأسماء على العجلة نفسها تُغني عنه) ومددنا جسمها
   ليملأ المسرح بدل أن يتوسّط فيه ويترك فراغاً فوقه وتحته. */
#stage[data-game="roulette"] .rt-wrap,
#stage[data-game="roulettex"] .rt-wrap{flex:1 1 auto;width:100%;min-height:0}
#stage[data-game="roulette"] .g-top,
#stage[data-game="roulettex"] .g-top{padding:0;min-height:0;gap:0}
#stage[data-game="roulette"] #gsub,
#stage[data-game="roulettex"] #gsub{display:none}

/* ── اختيار البنر: زرّ في كل بطاقة مفتوحة ── */
.vw-bfoot .vw-wear,.vw-bfoot .vw-worn,.vw-bfoot .vw-need,
.vw-bfoot .vw-bbar,.vw-bfoot .vw-ok{position:static !important;inset:auto !important}

.vw-wear{
  display:inline-block;padding:5px 14px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:800;color:#fff;border:0;
  background:linear-gradient(135deg,#8b7ad6,#5aa9e6);
}
.vw-wear:hover{filter:brightness(1.1)}
.vw-wear:disabled{opacity:.55;cursor:default}
.vw-worn{
  display:inline-block;padding:4px 12px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:#0d1a10;background:#5ee08a;
}
.vw-bcard.worn{
  border-color:#5ee08a;
  box-shadow:0 0 0 1px #5ee08a, 0 10px 26px rgba(94,224,138,.22);
}
.vw-bcard.worn .vw-ban{filter:none}

.vw-auto{
  margin-inline-start:10px;padding:4px 12px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:800;color:var(--dim);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.vw-auto:hover{color:var(--ink)}
.vw-auto.on{color:#0d1a10;background:#5ee08a;border-color:transparent}

/* ══════════════════════════════════════════════════════════
   خمّن الرسمة — اللوح هو البطل، والأدوات تخدمه ولا تزاحمه
   ══════════════════════════════════════════════════════════ */
.dr-wrap{
  display:flex;flex-direction:column;gap:clamp(7px,1.4vh,13px);
  width:100%;max-width:min(1000px,97%);margin:0 auto;flex:1;min-height:0;
}

/* ── خمّن الرسمة: اللوح فوق والإرشاد تحته ──
   كان سطرُ إرشاد المشاهد وشريطُ الرأس يدفعان اللوح إلى أسفل الشاشة
   فتضيع الرسمة نفسها — وهي كلُّ اللعبة. فرُفع اللوح إلى الأعلى. */
#stage[data-game="draw"] #gtimer{order:0}
#stage[data-game="draw"] .g-top{order:1}
#stage[data-game="draw"] .g-body{order:2}
#stage[data-game="draw"] .g-how{order:3;margin:6px auto 0}

/* الرأس: رقم الرسمة · كلمة المذيع · الوقت — لم يعد يُرسم */
.dr-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(8px,1.6vw,16px);flex-wrap:wrap;flex:0 0 auto;
  padding:clamp(7px,1.2vh,12px) clamp(11px,1.6vw,17px);border-radius:16px;
  background:var(--surf);border:1px solid var(--line);
}
.dr-n{font-size:13px;font-weight:800;color:var(--dim)}
.dr-n b{color:var(--ink,#fff)}

/* كلمة المذيع — واضحة له، ومكتوبٌ تحتها أنها له وحده */
.dr-word{
  display:inline-flex;align-items:baseline;gap:9px;
  padding:clamp(4px,.9vh,8px) clamp(12px,1.8vw,20px);border-radius:999px;
  background:color-mix(in srgb,var(--acc) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 48%,transparent);
}
.dr-word b{font-size:clamp(17px,2.9vh,26px);font-weight:900;letter-spacing:-.4px}
.dr-word i{font-size:10.5px;font-style:normal;font-weight:800;color:var(--dim-2)}

.dr-time{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:64px}
.dr-time b{font-size:clamp(19px,3.2vh,28px);font-weight:900;
  font-variant-numeric:tabular-nums;line-height:1}
.dr-bar{display:block;width:64px;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.12)}
.dr-bar u{display:block;height:100%;width:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#4fb98a,#f5cd47,#e2574c);transition:width .95s linear}
.dr-wait{
  font-size:clamp(11px,1.8vh,14px);font-weight:800;color:var(--star);
  padding:6px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--star) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--star) 36%,transparent);
  animation:drPulse 1.5s ease-in-out infinite;
}
@keyframes drPulse{50%{opacity:.55}}

/* المسرح: اللوح والأدوات جنباً إلى جنب */
.dr-stage{display:flex;gap:clamp(7px,1.2vw,13px);flex:1;min-height:0}

.dr-pad{
  position:relative;flex:1;min-width:0;min-height:clamp(170px,34vh,440px);
  border-radius:18px;overflow:hidden;
  background:#fdfdff;
  border:1px solid var(--line);
  box-shadow:0 16px 44px rgba(2,4,16,.45),inset 0 0 0 1px rgba(0,0,0,.05);
  /* ورقٌ خفيف يوحي بلوحٍ حقيقي بلا أن يشوّش الرسم */
  background-image:
    linear-gradient(rgba(140,150,190,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,150,190,.08) 1px,transparent 1px);
  background-size:26px 26px;
}
.dr-pad canvas{
  display:block;width:100%;height:100%;
  touch-action:none;cursor:crosshair;
}

/* الحجاب: اختيار الكلمة · قناع الحروف · كشف الإجابة */
.dr-veil{display:none}
.dr-veil.on{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  padding:14px;text-align:center;
}
/* قناع الحروف للجمهور — أسفل اللوح لا فوق الرسمة */
.dr-veil.hint{align-items:end;padding-bottom:12px;background:none}
.dr-mask{
  display:inline-block;padding:6px 18px;border-radius:999px;
  font-size:clamp(15px,2.6vh,24px);font-weight:900;letter-spacing:5px;
  color:#12142a;background:rgba(255,255,255,.82);
  border:1px solid rgba(20,24,60,.16);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.dr-veil.ans{background:rgba(253,253,255,.86)}
.dr-ans{
  display:inline-flex;align-items:center;gap:11px;
  padding:clamp(9px,1.8vh,16px) clamp(18px,2.6vw,34px);border-radius:20px;
  font-size:clamp(19px,3.4vh,32px);font-weight:900;color:#14532d;
  background:rgba(94,224,138,.28);border:2px solid rgba(30,140,80,.5);
  box-shadow:0 14px 36px rgba(0,0,0,.22);
  animation:drPop .34s cubic-bezier(.2,1.2,.35,1);
}
@keyframes drPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* الأدوات — عمودٌ نحيل بجانب اللوح */
.dr-tools{
  display:flex;flex-direction:column;gap:clamp(7px,1.3vh,12px);flex:0 0 auto;
  padding:clamp(7px,1.2vh,12px);border-radius:16px;
  background:var(--surf);border:1px solid var(--line);
}
.dr-inks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.dr-ink{
  width:clamp(20px,3.4vh,28px);height:clamp(20px,3.4vh,28px);
  border-radius:50%;cursor:pointer;padding:0;
  background:var(--c);border:2px solid rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform .14s,border-color .18s;
}
.dr-ink:hover{transform:scale(1.12)}
.dr-ink.on{border-color:#fff;transform:scale(1.16);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 45%,transparent),0 2px 8px rgba(0,0,0,.4)}

.dr-sizes{display:flex;flex-direction:column;gap:5px;
  padding-top:7px;border-top:1px solid var(--line)}
.dr-size{
  display:grid;place-items:center;height:clamp(22px,3.6vh,30px);border-radius:9px;
  cursor:pointer;background:var(--surf-2);border:1px solid var(--line);
  transition:background .18s,border-color .18s;
}
.dr-size i{display:block;border-radius:50%;background:var(--txt);opacity:.85}
.dr-size:hover{background:color-mix(in srgb,var(--star) 12%,var(--surf-2))}
.dr-size.on{border-color:color-mix(in srgb,var(--star) 65%,transparent);
  background:color-mix(in srgb,var(--star) 18%,var(--surf-2))}

.dr-acts{display:flex;flex-direction:column;gap:5px;
  padding-top:7px;border-top:1px solid var(--line)}
.dr-act{
  display:grid;place-items:center;height:clamp(24px,3.8vh,32px);border-radius:9px;
  font-size:clamp(12px,1.9vh,15px);cursor:pointer;
  background:var(--surf-2);border:1px solid var(--line);
  transition:background .18s,border-color .18s;
}
.dr-act:hover:not(:disabled){background:color-mix(in srgb,var(--star) 14%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 45%,transparent)}
.dr-act:disabled{opacity:.35;cursor:default}
.dr-act.on{border-color:color-mix(in srgb,var(--star) 70%,transparent);
  background:color-mix(in srgb,var(--star) 20%,var(--surf-2))}
.dr-act.danger:hover:not(:disabled){
  background:color-mix(in srgb,var(--bad) 20%,var(--surf-2));
  border-color:color-mix(in srgb,var(--bad) 55%,transparent)}

/* من عرفها */
.dr-hits{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  flex:0 0 auto;min-height:2px;
}
.dr-hit{
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--pb-acc,#4fb98a) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--pb-acc,#4fb98a) 42%,transparent);
  animation:drPop .3s cubic-bezier(.2,.9,.3,1);
}
.dr-hit.first{border-color:#f5cd47;background:rgba(245,205,71,.18)}
.dr-rk{
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  font-size:11px;font-weight:900;color:#0c0c14;background:#dfe6f0;
}
.dr-hit.first .dr-rk{background:#f5cd47}
.dr-nm{font-size:13px;font-weight:800;max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-pt{font-size:13px;font-weight:900;color:#5ee08a}
.dr-none{padding:8px;font-size:13.5px;font-weight:700;color:var(--dim)}
.dr-none.dim{color:var(--dim-2);font-weight:600}

/* ── لوحة الكلمة في الشريط الجانبي ──
   المسرح مبثوث، فالكلمة تعيش هنا وحدها: مستورةً بنقاطٍ بعدد
   حروفها، تنكشف بضغطة عين ثم تُستَر. */
.dr-card .dr-cur{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-radius:13px;margin-top:8px;
  background:var(--surf-2);
  border:1px solid color-mix(in srgb,var(--star) 26%,transparent);
}
.dr-card .dr-cur.show{
  border-color:color-mix(in srgb,var(--star) 62%,transparent);
  background:color-mix(in srgb,var(--star) 13%,var(--surf-2));
}
.dr-cw{
  flex:1;min-width:0;font-size:20px;font-weight:900;letter-spacing:2px;
  color:var(--dim-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dr-cur.show .dr-cw{color:var(--star);letter-spacing:-.2px}
.dr-eye{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  border-radius:10px;cursor:pointer;font-size:16px;
  background:var(--surf);border:1px solid var(--line);
  transition:background .18s,border-color .18s;
}
.dr-eye:hover{background:color-mix(in srgb,var(--star) 16%,var(--surf));
  border-color:color-mix(in srgb,var(--star) 50%,transparent)}
.dr-eye.on{border-color:color-mix(in srgb,var(--star) 70%,transparent);
  background:color-mix(in srgb,var(--star) 22%,var(--surf))}
.dr-note{margin:7px 0 0;font-size:11.5px;font-weight:700;color:var(--dim-2);line-height:1.5}

.dr-card .dr-row{display:flex;gap:7px;align-items:center;margin-top:10px}
.dr-card .dr-row input{
  flex:1;min-width:0;padding:8px 12px;border-radius:11px;
  font-family:inherit;font-size:13px;color:var(--txt);
  background:var(--surf-2);border:1px solid var(--line);
}
.dr-card .dr-row input:focus{outline:none;
  border-color:color-mix(in srgb,var(--star) 55%,transparent)}
.dr-card .dr-row input:disabled{opacity:.45}

.dr-list{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
  max-height:190px;overflow-y:auto;padding:2px;
}
.dr-list::-webkit-scrollbar{width:6px}
.dr-list::-webkit-scrollbar-thumb{border-radius:99px;
  background:color-mix(in srgb,var(--star) 30%,transparent)}
.dr-wpick{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:6px 11px;border-radius:999px;cursor:pointer;font-family:inherit;
  background:var(--surf-2);border:1px solid var(--line);
  transition:background .16s,border-color .16s;
}
.dr-wpick:hover:not(:disabled){background:color-mix(in srgb,var(--star) 15%,var(--surf-2));
  border-color:color-mix(in srgb,var(--star) 50%,transparent)}
.dr-wpick:disabled{opacity:.4;cursor:default}
.dr-wpick.on{border-color:color-mix(in srgb,var(--star) 75%,transparent);
  background:color-mix(in srgb,var(--star) 22%,var(--surf-2))}
.dr-wpick b{font-size:13px;font-weight:900}
.dr-wpick i{font-size:9.5px;font-style:normal;font-weight:800;color:var(--dim-2)}
.dr-noword{padding:10px;font-size:12.5px;color:var(--dim-2)}

/* على المسرح: تذكيرٌ بمكان الكلمة لا الكلمة نفسها */
.dr-word.secret b{font-size:clamp(12px,2vh,15px);color:var(--dim)}
.dr-word.secret i{font-size:10px}

@media(max-width:820px){
  .dr-stage{flex-direction:column}
  .dr-tools{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap}
  .dr-inks{grid-template-columns:repeat(10,1fr)}
  .dr-sizes,.dr-acts{flex-direction:row;padding-top:0;border-top:none;
    padding-inline-start:9px;border-inline-start:1px solid var(--line)}
  .dr-size{width:30px}
  .dr-act{width:34px}
  .dr-word b{font-size:17px}
  .dr-pad{min-height:180px}
}

/* ══════════════════════════════════════════════════════════
   اسم · حيوان · جماد — الحرف هو البطل، والصنف يشرحه
   ══════════════════════════════════════════════════════════ */
.at-wrap{
  display:flex;flex-direction:column;gap:clamp(8px,1.6vh,15px);
  width:100%;max-width:min(880px,97%);margin:0 auto;flex:1;min-height:0;
}

.at-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(8px,1.6vw,16px);flex-wrap:wrap;flex:0 0 auto;
  padding:clamp(8px,1.3vh,13px) clamp(12px,1.7vw,18px);border-radius:16px;
  background:var(--surf);border:1px solid var(--line);
}
.at-n{font-size:13px;font-weight:800;color:var(--dim)}
.at-n b{color:var(--ink,#fff)}
.at-ask{font-size:clamp(14px,2.3vh,20px);font-weight:900;letter-spacing:-.2px}
.at-hl{
  display:inline-block;min-width:1.6em;padding:1px 9px;border-radius:9px;
  color:#0c1220;background:linear-gradient(150deg,#bfe3ff,#5aa9e6);
  box-shadow:0 3px 12px rgba(90,169,230,.45);
}
.at-time{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:62px}
.at-time b{font-size:clamp(18px,3vh,26px);font-weight:900;
  font-variant-numeric:tabular-nums;line-height:1}
.at-bar{display:block;width:62px;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.12)}
.at-bar u{display:block;height:100%;width:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#5aa9e6,#ffd166,#e2574c);transition:width .95s linear}

/* الحرف الكبير والصنف بجانبه */
.at-main{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,40px);flex:1;min-height:0;flex-wrap:wrap;
}
.at-letter{
  display:grid;place-items:center;flex:0 0 auto;
  width:clamp(96px,22vh,190px);height:clamp(96px,22vh,190px);
  border-radius:clamp(22px,4vh,38px);
  font-size:clamp(54px,13vh,120px);font-weight:900;line-height:1;
  color:#08131f;
  background:linear-gradient(150deg,#dff1ff,#5aa9e6 70%,#3d7fb8);
  box-shadow:0 20px 50px rgba(2,6,20,.55),
             0 0 60px rgba(90,169,230,.35),
             inset 0 3px 0 rgba(255,255,255,.5);
}
.at-letter.pop{animation:atPop .42s cubic-bezier(.2,1.4,.35,1)}
@keyframes atPop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}

.at-cat{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;
  padding:clamp(11px,2vh,20px) clamp(16px,2.4vw,28px);border-radius:20px;
  background:var(--surf);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  box-shadow:0 12px 34px rgba(2,4,16,.4);
}
.at-cat b{font-size:clamp(20px,3.6vh,34px);font-weight:900;letter-spacing:-.5px}
.at-cat i{font-size:clamp(11px,1.8vh,14px);font-style:normal;font-weight:700;color:var(--dim-2)}

/* الإجابات */
.at-answers{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  flex:0 0 auto;min-height:2px;max-height:26vh;overflow-y:auto;padding:2px;
}
.at-a{
  display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;
  background:color-mix(in srgb,var(--pb-acc,#5aa9e6) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--pb-acc,#5aa9e6) 40%,transparent);
  animation:atIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes atIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
.at-a.solo{border-color:var(--star);background:color-mix(in srgb,var(--star) 18%,transparent)}
/* المكرّرة صفراء: تُرى من بعيد فتعرف أنّها لن تُحسب لصاحبها */
.at-a.dup{
  border-color:#f5cd47;
  background:rgba(245,205,71,.16);
}
.at-a.dup .at-w{color:#ffe08a}
.at-dup{
  font-size:9.5px;font-style:normal;font-weight:900;color:#2a2205;
  background:#f5cd47;padding:1px 7px;border-radius:6px;
}
.at-a.out{opacity:.42;filter:grayscale(.7)}
.at-w{font-size:14px;font-weight:900}
.at-nm{font-size:11.5px;font-weight:700;color:var(--dim-2);max-width:110px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.at-pt{font-size:13px;font-weight:900;color:#5ee08a}
.at-solo{font-size:9.5px;font-style:normal;font-weight:900;color:#0c0c14;
  background:var(--star);padding:1px 7px;border-radius:6px}
.at-no{font-size:10px;font-style:normal;font-weight:800;color:var(--bad)}
.at-none{padding:8px;font-size:13.5px;font-weight:700;color:var(--dim)}
.at-none.dim{color:var(--dim-2);font-weight:600}

/* ══════════ شاشة التقييم — للمذيع ══════════ */
.at-judge{display:none}
.at-judge.on{
  position:fixed;inset:0;z-index:7300;display:grid;place-items:center;padding:18px;
  background:
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb,var(--acc) 14%,transparent), transparent 70%),
    color-mix(in srgb,var(--bg) 95%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:atJIn .3s cubic-bezier(.2,1.2,.35,1);
}
@keyframes atJIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.aj-card{
  display:flex;flex-direction:column;gap:12px;
  width:min(720px,96%);max-height:92vh;
  padding:clamp(16px,2.6vh,26px) clamp(16px,2.4vw,28px);border-radius:24px;
  background:var(--surf);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  box-shadow:0 26px 70px rgba(2,4,16,.7);
}
.aj-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.aj-t{font-size:clamp(16px,2.6vh,22px);font-weight:900}
.aj-n{font-size:13px;font-weight:800;color:var(--dim-2)}
.aj-tip{margin:0;font-size:12px;font-weight:700;color:var(--dim-2);line-height:1.6}

.aj-list{
  display:flex;flex-direction:column;gap:7px;
  overflow-y:auto;min-height:0;padding:2px;
}
.aj-a{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 13px;border-radius:14px;cursor:pointer;font-family:inherit;text-align:start;
  background:var(--surf-2);border:2px solid var(--line);
  transition:background .16s,border-color .16s;
}
.aj-a.yes{border-color:rgba(94,224,138,.6);background:rgba(94,224,138,.12)}
.aj-a.no{border-color:color-mix(in srgb,var(--bad) 45%,transparent);
  background:color-mix(in srgb,var(--bad) 9%,var(--surf-2));opacity:.72}
.aj-a:hover{filter:brightness(1.12)}
.aj-mark{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  font-size:14px;font-weight:900;color:#0c0c14;
}
.aj-a.yes .aj-mark{background:#5ee08a}
.aj-a.no  .aj-mark{background:#e2574c;color:#fff}
.aj-w{flex:1;min-width:0;font-size:16px;font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-nm{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--dim-2);
  max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-known{flex:0 0 auto;font-style:normal;font-size:13px;opacity:.75}

.aj-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.aj-btns .btn-primary{margin-inline-start:auto}

@media(max-width:820px){
  .at-main{gap:12px}
  .at-cat{padding:10px 14px}
  .at-cat b{font-size:20px}
  .aj-nm{display:none}
  .aj-btns{justify-content:stretch}
  .aj-btns .btn{flex:1}
}

/* ── بنر المنح: لا تفتحه النقاط، يُعطى من المذيع ── */
.tb-gift{
  display:flex;align-items:flex-start;gap:9px;margin-top:10px;
  padding:10px 13px;border-radius:13px;cursor:pointer;
  background:color-mix(in srgb,var(--star) 10%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--star) 30%,transparent);
}
.tb-gift input{margin-top:3px;flex:0 0 auto;accent-color:var(--star)}
.tb-gift span{font-size:12px;font-weight:700;color:var(--dim);line-height:1.6}
.tb-gift b{color:var(--star)}
.tb-lk.gift{background:rgba(245,205,71,.9);color:#2b1c00}
/* المدفوع: شارةٌ خضراء بسعره — لا قفلٌ بنقاطٍ لا تفتحه */
.tb-lk.pay{background:rgba(46,190,140,.92);color:#04231a}
.tb-lk.pay b{color:#04231a}
.tb-c.gift{border-color:color-mix(in srgb,var(--star) 55%,transparent)}
.vw-bcard.gift .vw-ban{box-shadow:inset 0 0 0 2px rgba(245,205,71,.5)}
.adm-ban .adm-btx span u{color:var(--star)}

/* ══════════════════════════════════════════════════════════════
   المرجعيّة — لوحة المالك: كل ما جرى في مكان واحد
   ══════════════════════════════════════════════════════════════ */
.lg{display:flex;flex-direction:column;gap:11px}
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lg-head h2{margin:0;font-size:20px;font-weight:900}
.lg-sum{display:flex;gap:7px;flex-wrap:wrap}
.lg-sum span{
  font-size:11.5px;font-weight:800;color:var(--dim-2);
  padding:5px 12px;border-radius:999px;
  background:var(--surf-2);border:1px solid var(--line);
}
.lg-sum b{color:var(--star);font-size:14px;font-weight:900;margin-inline-end:4px}

.lg-tabs{display:flex;gap:6px;flex-wrap:wrap}
.lg-t{
  padding:7px 16px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:800;color:var(--dim);
  background:var(--surf-2);border:1px solid var(--line);transition:.16s;
}
.lg-t:hover{color:var(--txt)}
.lg-t.on{color:#12142a;background:linear-gradient(150deg,var(--star),var(--p2));border-color:transparent}

.lg-pane{display:none;flex-direction:column;gap:4px;
  max-height:56vh;overflow-y:auto;padding:2px}
.lg-pane.on{display:flex}
.lg-pane::-webkit-scrollbar{width:6px}
.lg-pane::-webkit-scrollbar-thumb{border-radius:99px;
  background:color-mix(in srgb,var(--star) 28%,transparent)}

.lg-row{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;
  background:var(--surf-2);border:1px solid transparent;
}
.lg-row:hover{border-color:var(--line)}
.lg-row.lg-stream{background:color-mix(in srgb,#4fb98a 10%,var(--surf-2))}
.lg-row.lg-act{background:color-mix(in srgb,var(--star) 10%,var(--surf-2))}
.lg-row.lg-u.off{opacity:.5}
.lg-ico{flex:0 0 auto;font-size:17px;font-family:var(--emoji);width:24px;text-align:center}
.lg-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.lg-tx b{font-size:13.5px;font-weight:900}
.lg-tx span{font-size:12.5px;color:var(--dim)}
.lg-tx i{font-size:11px;font-style:normal;font-weight:700;color:var(--dim-2)}
.lg-at{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--dim-2);white-space:nowrap}
.lg-empty{padding:22px;text-align:center;font-size:13.5px;font-weight:700;color:var(--dim-2)}

/* خمّن الرسمة — فائزٌ واحد لكل رسمة */
.dr-hit.win{
  padding:7px 15px 7px 8px;
  border-color:#f5cd47;background:rgba(245,205,71,.18);
  box-shadow:0 6px 20px rgba(245,205,71,.2);
}
.dr-hit.win .dr-rk{background:#f5cd47}
.dr-got{font-size:10px;font-style:normal;font-weight:900;color:#3a2c00;
  background:#f5cd47;padding:2px 8px;border-radius:7px}
.dr-ans{flex-direction:column;gap:4px}
.dr-by{display:block;font-size:clamp(12px,1.9vh,15px);font-weight:800;color:#14532d;opacity:.85}

/* ══════════════════════════════════════════════════════════════════════
   مظهرا صفحة اللعب — قشرتان حول المسرح لا داخله.
   لا يمسّان كود أيّ لعبة: يعيدان ترتيب العناصر نفسها بصفوف CSS.
   يظهران في «الإعدادات ← مظهر الصفحة» في الألعاب المهيّأة لهما.
   ══════════════════════════════════════════════════════════════════════ */

/* مبدّل المظهر في الشريط الجانبي */
.sh-pick{display:flex;flex-direction:column;gap:6px}
.sh-b{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:start;
  padding:9px 12px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  transition:border-color .16s,background .16s;
}
.sh-b:hover{background:var(--panel-2);color:var(--txt)}
.sh-b b{font-size:13px;font-weight:800;color:var(--txt)}
.sh-b i{font-style:normal;font-size:11px;font-weight:600;color:var(--dim-2);line-height:1.5}
.sh-b.on{
  border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  background:color-mix(in srgb,var(--acc) 14%,var(--panel));
}
.sh-b.on b{color:var(--star)}

/* القشرتان للشاشات الواسعة وحدها. والــ media لا يزيد في الأولويّة،
   فلو كتبنا نقضاً للضيّق غلبته قواعدُ أطول منه. فالحلّ أن لا تولد أصلاً. */
@media (min-width:981px){
/* ══════════════ أ) المسرح ══════════════
   الشاشة كلّها للّعبة، وما عداها زجاجٌ يطفو فوقها. */
body.shell-ok.shell-cinema #layout{
  display:block;position:relative;padding:0;gap:0;min-height:0;overflow:hidden;
}
body.shell-ok.shell-cinema #layout::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 88% at 50% -12%,color-mix(in srgb,var(--acc) 15%,transparent),transparent 62%),
    radial-gradient(40% 40% at 18% 84%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%);
}
/* الشريط الجانبي للإعدادات يطفو فوق المسرح ولا يقتطع منه:
   كان يُزحزح اللعبة عن مكانها كلّما فُتح ثم يعيدها، فتقفز أمام
   المشاهد. dockpad صار صفراً دائماً. */
body.shell-ok.shell-cinema #stageWrap{
  position:absolute;inset-block:0;inset-inline:0;
  display:block;gap:0;max-width:none;width:auto;margin:0;
}
/* الشريط ينحلّ فتصير مجموعاته الثلاث لوحاتٍ عائمة مستقلّة */
body.shell-ok.shell-cinema #stageBar{display:contents}

body.shell-ok.shell-cinema .sb-right{
  position:absolute;z-index:34;inset-block-start:10px;inset-inline-start:14px;
  max-width:min(46%,420px);padding:6px 14px 6px 8px;border-radius:999px;
  background:rgba(10,13,30,.62);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(2,4,16,.5);
}
body.shell-ok.shell-cinema #stageIcon{width:34px;height:34px;border-radius:12px}
body.shell-ok.shell-cinema #stageTitle{font-size:14.5px}
body.shell-ok.shell-cinema #stageHint{display:none}

body.shell-ok.shell-cinema .sb-mid{
  position:absolute;z-index:34;inset-block-start:10px;
  inset-inline:0;width:max-content;max-width:52%;margin-inline:auto;
  padding:5px 9px;border-radius:999px;
  background:rgba(10,13,30,.62);border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 34px rgba(2,4,16,.5);
}
body.shell-ok.shell-cinema .sb-stat{background:none;border-color:transparent;padding:2px 7px}

/* الأدوات: رصيفٌ عائم في الأسفل */
body.shell-ok.shell-cinema .sb-left{
  position:absolute;z-index:42;inset-block-end:10px;
  inset-inline:0;width:max-content;max-width:94%;margin-inline:auto;
  flex-wrap:wrap;justify-content:center;gap:6px;
  padding:6px 8px;border-radius:999px;
  background:rgba(10,13,30,.72);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(2,4,16,.6);
}
body.shell-ok.shell-cinema .sb-left .btn-icon{transition:transform .16s,background .16s}
body.shell-ok.shell-cinema .sb-left .btn-icon:hover{transform:translateY(-4px) scale(1.14)}

/* المسرح نفسه: بلا إطارٍ ولا خلفيّة — الصفحة هي المسرح */
body.shell-ok.shell-cinema #stage{
  position:absolute;inset-block:62px 152px;inset-inline:14px;
  background:transparent;border-color:transparent;box-shadow:none;
}
body.shell-ok.shell-cinema #stage::before{background:none}
body.shell-ok.shell-cinema #banner{inset-block-end:158px}

/* الشات: عمودٌ يذوب في الخلفيّة بلا صندوق */
body.shell-ok.shell-cinema.playing #chatpane{
  display:flex;position:absolute;z-index:22;
  inset-block:62px 152px;inset-inline-end:16px;
  width:min(248px,23%);max-height:none;
  background:none;border:0;border-radius:0;box-shadow:none;
  justify-content:flex-end;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 20%,#000 88%,transparent);
}
body.shell-ok.shell-cinema #chatpane .cp-head,
body.shell-ok.shell-cinema #chatpane .cp-live,
body.shell-ok.shell-cinema #chatpane .cp-foot{display:none}
body.shell-ok.shell-cinema #chatpane .chat-feed{padding:0;gap:2px;overflow:hidden;flex:0 1 auto}
body.shell-ok.shell-cinema #chatpane .cf-row{
  background:none;border:0;padding:2px 0;gap:6px;align-items:center;
}
body.shell-ok.shell-cinema #chatpane .cf-row .av{width:19px;height:19px;font-size:10px;box-shadow:none}
body.shell-ok.shell-cinema #chatpane .cf-tx{flex-direction:row;align-items:baseline;gap:6px}
body.shell-ok.shell-cinema #chatpane .cf-tx b{font-size:11.5px;text-shadow:0 1px 6px rgba(0,0,0,.9)}
body.shell-ok.shell-cinema #chatpane .cf-tx span{font-size:12.5px;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* اللاعبون: شريط فيلمٍ أسفل المسرح */
body.shell-ok.shell-cinema.playing #rail{
  display:flex;position:absolute;z-index:26;
  inset-block-end:60px;inset-inline:0;
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
}
body.shell-ok.shell-cinema.no-side.playing #rail{display:none}

/* ══ «واجهةٌ لحالها» ══
   حين تعمل اللعبة تملك الصفحة كلّها: لا لوحةَ جانبية ولا عمودَ شات
   يقتطعان من المسرح. ويكفي أن يضغط المذيع زرّ الشات أو اللوحة
   ليعودا — فالضغطة ترفع هذا الوضع ولا تُبطله للجولات القادمة. */
body.shell-ok.shell-cinema.playing.solo #rail,
body.shell-ok.shell-cinema.playing.solo #chatpane,
body.shell-ok.shell-cockpit.playing.solo #rail,
body.shell-ok.shell-cockpit.playing.solo #chatpane{display:none}
/* واللوحة الجانبية تُغلق بنفسها عند بدء اللعبة (stopGame ⇒ dockClose)،
   فلا نُخفيها بـCSS: صنف hidden هو ما يقرؤه زرّ الفتح، ولو أخفيناها
   من فوقه لظنّ الزرُّ أنّها مفتوحةٌ فأغلق المغلق. */
body.playing.solo #layout{grid-template-columns:minmax(0,1fr)}

/* منتقي صوت المذيع داخل الإعدادات */
.sfx-pick{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.sfx-nm{font-size:11.5px;font-weight:800;color:var(--dim-2);font-style:normal;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.shell-ok.shell-cinema #rail .tabs,
body.shell-ok.shell-cinema #rail .board-head,
body.shell-ok.shell-cinema #rail .test-form,
body.shell-ok.shell-cinema #rail #tab-board{display:none}
body.shell-ok.shell-cinema #rail .tabpane{flex:0 0 auto}
body.shell-ok.shell-cinema #rail .pb-rail{
  flex:0 0 auto;flex-direction:row;align-items:flex-end;justify-content:center;
  overflow-x:auto;overflow-y:hidden;padding:4px 14px;gap:8px;scrollbar-width:none;
}
body.shell-ok.shell-cinema #rail .pb-rail::-webkit-scrollbar{display:none}
body.shell-ok.shell-cinema #rail .pb{
  flex:0 0 auto;flex-direction:column;align-items:center;text-align:center;
  width:68px;padding:7px 4px 6px;gap:3px;border-radius:14px;
  background:linear-gradient(180deg,rgba(22,27,54,.8),rgba(10,13,30,.9));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .18s,border-color .18s;
}
body.shell-ok.shell-cinema #rail .pb:hover{transform:translateY(-5px)}
body.shell-ok.shell-cinema #rail .pb-main{flex:0 0 auto;width:100%}
body.shell-ok.shell-cinema #rail .pb-meta{display:none}
body.shell-ok.shell-cinema #rail .pb-name{font-size:10.5px;max-width:100%}
body.shell-ok.shell-cinema #rail .pb-av{width:30px;height:30px;border-radius:50%;font-size:14px}
body.shell-ok.shell-cinema #rail .pb-tag{
  position:absolute;inset-block-start:-5px;inset-inline-end:-5px;
  min-width:19px;height:19px;font-size:10px;padding:0 5px;border-radius:7px;
}
body.shell-ok.shell-cinema #rail .rail-avs{justify-content:center;padding:4px 14px}
body.shell-ok.shell-cinema #rail .empty{display:none}

/* وضع التجربة يأخذ مكان الشريط، فيصعد الشريط ويعلو المسرح معه */
body.shell-ok.shell-cinema .practice{
  position:absolute;z-index:30;inset-block-end:58px;inset-inline:14px;margin:0;
}
body.shell-ok.shell-cinema.practice-on.playing #rail{inset-block-end:172px}
body.shell-ok.shell-cinema.practice-on #stage{inset-block-end:264px}
body.shell-ok.shell-cinema.practice-on #banner{inset-block-end:auto;inset-block-start:58%}

/* ══════════════ ب) القمرة ══════════════
   رصيفٌ ثابت وشريط قياسات وشاشةٌ بإطار — لا شيء يغطّي شيئاً. */
body.shell-ok.shell-cockpit #layout{
  display:grid;padding:0;gap:0;
  padding-inline-start:0;
  grid-template-columns:54px minmax(0,1fr) clamp(226px,21%,292px);
  grid-template-rows:auto minmax(0,1.1fr) minmax(0,1fr);
}
body.shell-ok.shell-cockpit:not(.playing) #layout,
body.shell-ok.shell-cockpit.no-side.no-chat #layout{
  grid-template-columns:54px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
}
body.shell-ok.shell-cockpit #stageWrap,
body.shell-ok.shell-cockpit #stageBar{display:contents}

/* الرصيف العموديّ: الأوامر لا تختفي أبداً */
body.shell-ok.shell-cockpit .sb-left{
  grid-column:1;grid-row:1 / -1;
  flex-direction:column;align-items:center;gap:6px;padding:10px 0;overflow-y:auto;
  background:linear-gradient(180deg,var(--surf-2),var(--surf));
  border-inline-end:1px solid var(--line);
}
body.shell-ok.shell-cockpit .sb-left::-webkit-scrollbar{width:0}
body.shell-ok.shell-cockpit .sb-left .btn{
  width:38px;height:38px;padding:0;border-radius:12px;justify-content:center;
}
body.shell-ok.shell-cockpit .sb-left #btnStart,
body.shell-ok.shell-cockpit .sb-left #btnStop,
body.shell-ok.shell-cockpit .sb-left #btnResults{
  font-size:10.5px;line-height:1.15;padding:0 3px;text-align:center;
}
body.shell-ok.shell-cockpit .sb-left .join-badge,
body.shell-ok.shell-cockpit .sb-left .gate-badge{
  writing-mode:vertical-rl;padding:9px 5px;font-size:11px;border-radius:11px;gap:5px;
}

/* شريط القياسات */
body.shell-ok.shell-cockpit .sb-right{
  grid-column:2;grid-row:1;padding:9px 15px;background:var(--panel);
  border-block-end:1px solid var(--line);
}
body.shell-ok.shell-cockpit .sb-mid{
  grid-column:3;grid-row:1;margin:0;padding:9px 12px;justify-content:space-around;
  background:var(--panel);border-block-end:1px solid var(--line);
  border-inline-start:1px solid var(--line);
}
body.shell-ok.shell-cockpit:not(.playing) .sb-right,
body.shell-ok.shell-cockpit.no-side.no-chat .sb-right{grid-column:2;grid-row:1;border-block-end:0}
body.shell-ok.shell-cockpit:not(.playing) .sb-mid,
body.shell-ok.shell-cockpit.no-side.no-chat .sb-mid{
  grid-column:2;grid-row:1;justify-content:flex-end;
  border-inline-start:0;background:none;padding-inline-end:15px;
}

/* الشاشة بإطارها */
body.shell-ok.shell-cockpit #stage{
  grid-column:2;grid-row:2 / -1;border-radius:0;border:0;
  border-inline-end:1px solid var(--line);
  background:
    radial-gradient(88% 66% at 50% 0%,color-mix(in srgb,var(--acc) 11%,transparent),transparent 66%),
    var(--surf);
}
body.shell-ok.shell-cockpit #stage::after{
  content:'';position:absolute;inset:12px;pointer-events:none;z-index:3;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--acc) 22%,transparent);
}
body.shell-ok.shell-cockpit:not(.playing) #stage,
body.shell-ok.shell-cockpit.no-side.no-chat #stage{grid-row:2;border-inline-end:0}

/* ══ لا شات في وضع اللعب ══
   عمودُ الشات كان يقتطع من المسرح ويشتّت النظر، والمشاهد يقرأ
   الشات في تيك توك أصلاً. فبقيت الشاشة للّعبة وحدها. */
body.shell-ok.shell-cockpit #chatpane,
body.shell-ok.shell-cinema  #chatpane{display:none !important}

/* العمود المقسوم: اللاعبون فوق والشات تحت */
body.shell-ok.shell-cockpit.playing #rail{
  grid-column:3;grid-row:2;display:flex;
  border:0;border-radius:0;box-shadow:none;background:var(--surf);
  border-block-end:1px solid var(--line);
}
body.shell-ok.shell-cockpit.playing #chatpane{
  grid-column:3;grid-row:3;display:flex;max-height:none;
  border:0;border-radius:0;box-shadow:none;
}
body.shell-ok.shell-cockpit.no-side.playing #rail{display:none}
body.shell-ok.shell-cockpit.no-side.playing #chatpane{grid-row:2 / -1}
body.shell-ok.shell-cockpit.no-chat.playing #rail{grid-row:2 / -1;border-block-end:0}
body.shell-ok.shell-cockpit .practice{grid-column:2;grid-row:-2 / -1;margin:0;align-self:end;z-index:5}
body.shell-ok.shell-cockpit #joinfeed{z-index:6}

/* ── لا عمودَ فارغاً ──
   عمود اليمين للّاعبين وحدهم بعد أن رُفع الشات من القمرة؛ فإن
   أُخفوا (وضع «واجهةٌ لحالها» أو إطفاء اللوحة) طُويت الخانة كلّها
   فلا يبقى ٢٩٢ بكسلاً فارغةً تُزحزح اللعبة عن وسط الشاشة. */
body.shell-ok.shell-cockpit.solo #layout,
body.shell-ok.shell-cockpit.no-side #layout{
  grid-template-columns:54px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr);
}
body.shell-ok.shell-cockpit.solo #stage,
body.shell-ok.shell-cockpit.no-side #stage{grid-row:2;border-inline-end:0}
body.shell-ok.shell-cockpit.solo .sb-right,
body.shell-ok.shell-cockpit.no-side .sb-right{grid-column:2;grid-row:1;border-block-end:0}
body.shell-ok.shell-cockpit.solo .sb-mid,
body.shell-ok.shell-cockpit.no-side .sb-mid{
  grid-column:2;grid-row:1;justify-content:flex-end;
  border-inline-start:0;background:none;padding-inline-end:15px;
}
/* واللاعبون يملؤون العمود كلّه ما داموا وحدهم فيه */
body.shell-ok.shell-cockpit.playing #rail{grid-row:2 / -1;border-block-end:0}

}

/* ══════════════════════════════════════════════════════════════════════
   ميلان ثلاثيّ — بطاقات المعرض تميل مع المؤشّر والضوء يتبعه.
   الأيقونة والعنوان يرتفعان عن السطح، فتُقرأ البطاقة طبقاتٍ لا لوحاً.
   لا تُطبَّق إلا حين تضع JS صنف tilt-on: فأرةٌ حقيقيّة وحركةٌ مقبولة.
   ══════════════════════════════════════════════════════════════════════ */
body.tilt-on .home-grid .gcard{
  /* المنظور على البطاقة نفسها لا على الشبكة: لكلٍّ مركزها، فلا تنحرف
     بطاقات الأطراف عن نقطة تلاشٍ بعيدة. */
  overflow:visible;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .14s ease-out,
             box-shadow .28s var(--ease),
             border-color .28s var(--ease);
}
body.tilt-on .home-grid .gcard:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(10px);
  box-shadow:0 30px 62px rgba(2,4,16,.55),
             0 0 54px color-mix(in srgb,var(--acc) 22%,transparent);
}

/* بقعة ضوءٍ تلاحق المؤشّر داخل البطاقة */
body.tilt-on .home-grid .gcard::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .26s var(--ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
    color-mix(in srgb,var(--acc) 26%,transparent),transparent 62%);
}
body.tilt-on .home-grid .gcard:hover::after{opacity:1}

/* التوهّج العلويّ كان مقصوصاً بـ overflow، وقد رفعناه — فليقصّ نفسه */
body.tilt-on .home-grid .gc-glow{
  inset:0;height:auto;border-radius:inherit;
  background:radial-gradient(80% 58% at 20% 0%,
    color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%);
}

/* الطبقات: كلّما علا العنصر عن السطح زاد شعورك بالعمق حين تميل */
body.tilt-on .home-grid .gc-orb{transform:translateZ(40px)}
body.tilt-on .home-grid .gcard:hover .gc-orb{
  transform:translateZ(54px) scale(1.09) rotate(-5deg);
}
body.tilt-on .home-grid .gc-b{transform:translateZ(26px)}
body.tilt-on .home-grid .gc-d{transform:translateZ(15px)}
body.tilt-on .home-grid .gc-foot{transform:translateZ(20px)}
body.tilt-on .home-grid .gc-new,
body.tilt-on .home-grid .gc-lock,
body.tilt-on .home-grid .gc-maint{transform:translateZ(34px)}

/* البطاقة المقفلة أو تحت الصيانة لا تميل — لا وعد فيها بشيء */
body.tilt-on .home-grid .gcard.maint{transform:none}
body.tilt-on .home-grid .gcard.maint::after{display:none}

/* ══════════════════════════════════════════════════════════
   الحرف الأخير — السلسلة هي الصورة: كلمةٌ تشدّ كلمة بحرف
   ══════════════════════════════════════════════════════════ */
.ll-wrap{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(10px,2vh,20px);width:100%;padding:6px;
}

/* الحرف المطلوب — بطل الشاشة */
.ll-need{
  display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto;
}
.ll-cat{
  display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;
  font-size:12px;font-weight:800;color:var(--dim);
  background:var(--panel-2);border:1px solid var(--line);
}
.ll-letter{
  display:grid;place-items:center;
  width:clamp(72px,15vh,124px);height:clamp(72px,15vh,124px);
  border-radius:clamp(20px,3.4vh,32px);
  font-size:clamp(42px,9vh,76px);font-weight:900;line-height:1;color:#07151b;
  background:linear-gradient(150deg,#d9f0f6,var(--acc) 68%,color-mix(in srgb,var(--acc) 70%,#0b2630));
  box-shadow:0 18px 44px rgba(2,6,20,.5),
             0 0 52px color-mix(in srgb,var(--acc) 34%,transparent),
             inset 0 3px 0 rgba(255,255,255,.45);
  animation:llPop .38s cubic-bezier(.2,1.4,.35,1);
}
@keyframes llPop{from{opacity:0;transform:scale(.62) rotate(-7deg)}to{opacity:1;transform:none}}
.ll-hint{font-size:11.5px;font-weight:700;color:var(--dim-2)}

/* السلسلة نفسها */
.ll-chain{
  display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  max-width:min(760px,96%);flex:0 0 auto;
}
.ll-more{font-style:normal;color:var(--dim-2);font-weight:900;padding-inline-end:2px}
.ll-w{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 12px;border-radius:12px;
  font-size:14px;font-weight:900;
  background:var(--panel);border:1px solid var(--line);
  animation:llIn .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes llIn{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}
.ll-w u{text-decoration:none;font-size:9.5px;font-weight:700;color:var(--dim-2)}
.ll-w.last{
  border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--acc) 14%,var(--panel));
}
.ll-w.todo{
  color:var(--dim-2);border-style:dashed;background:transparent;
  min-width:44px;justify-content:center;
}
/* حلقة الوصل: الحرف الذي انتقل من كلمةٍ إلى التي بعدها */
.ll-lk{
  font-style:normal;font-size:11px;font-weight:900;color:#07151b;
  padding:2px 7px;border-radius:7px;
  background:color-mix(in srgb,var(--acc) 62%,#cfe9f0);
}
.ll-lk.now{
  background:linear-gradient(120deg,var(--acc),#cfe9f0);
  box-shadow:0 0 14px color-mix(in srgb,var(--acc) 55%,transparent);
}

@media(max-width:760px){
  .ll-w{font-size:12.5px;padding:4px 9px}
  .ll-w u{display:none}
  .ll-hint{display:none}
}

/* الروليت المخفي: قطاعٌ مجهول حتى تقف العجلة */
.wheel-marks.masked .wm-name{
  opacity:.72;letter-spacing:0;
  color:color-mix(in srgb,#fff 82%,transparent);
}
.wheel-marks.masked .wm.unmasked .wm-name{
  opacity:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* ══════════════════════════════════════════════════════════════
   التكبير (Ctrl + عجلة): الصفحة تطول ولا تُسحق
   التكبير يُقصّر المنفذ بوحدات CSS. كنّا نحشر المسرح في ما بقي
   مهما ضاق، فتنكمش اللعبة حتى تختفي ويتراكب كلامها فوق بعضه.
   الآن: للمسرح أرضيّةٌ لا ينزل تحتها، وإن لم يبقَ للصفحة متّسعٌ
   تمرّرت — تماماً كما تفعل أيّ صفحةٍ في المتصفّح عند التكبير.
   ══════════════════════════════════════════════════════════════ */
@media (max-height:680px){
  html,body{height:auto;min-height:100%}
  body{overflow-y:auto;overflow-x:hidden}

  /* المسرح لا يُسحق: أرضيّةٌ تكفي لأصغر لعبة */
  body.playing #stage{min-height:300px}
  body.playing #layout{grid-template-rows:none}
  body.playing #rail{min-height:200px}
  body.playing #chatpane{min-height:170px;max-height:none}
  #stageWrap{min-height:0}

  /* والقشرتان تتنحّيان هنا كما تتنحّيان على الجوّال */
  body.shell-ok.shell-cinema #stage,
  body.shell-ok.shell-cockpit #stage{min-height:300px}
}
@media (max-height:520px){
  body.playing #stage{min-height:260px}
}

/* ══════════════════════════════════════════════════════════════════════
   الجوّال واللوحيّ — اللعبة تسع الشاشة ولا تفيض

   قشرةُ «المسرح» كلُّها داخل @media(min-width:981px)، فما دونها لا
   تُطبَّق شيئاً: يعود التخطيط إلى شبكةٍ يحدّدها المحتوى، فيصير
   #layout أطول من الشاشة (١٠٢٢ في شاشةٍ ٨١٢) — وbody عليه
   overflow:hidden فيقصّ ما فاض بلا تمرير. النتيجة أنّ أسفل المسرح
   يختفي: الأسماء والأسئلة تحت الحافّة ولا سبيل إليها.

   هنا نُثبّت الارتفاع: عمودٌ واحد بارتفاع الشاشة، المسرح يأخذ ما
   بقي منه، ولا شات ولا لوحة جانبية تزاحمانه وهو يلعب.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px){
  /* الجذر نفسه كان ينمو بمحتواه (٩٣٩ في شاشةٍ ٨١٢) فيدفع كلَّ شيء
     تحت الحافّة — نُثبّته على الشاشة أوّلاً ثم نوزّع ما فيها */
  html{height:100% !important;min-height:0}
  body{height:100% !important;min-height:0;overflow:hidden}

  body.playing #layout{
    display:flex !important;flex-direction:column;
    flex:1 1 auto;height:auto;min-height:0;overflow:hidden;
    grid-template-columns:none !important;grid-template-rows:none !important;
    padding:clamp(5px,1.2vw,10px);gap:clamp(5px,1vh,9px);
  }
  body.playing #stageWrap{
    flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0;
  }
  body.playing #stage{flex:1 1 auto;min-height:0 !important}

  /* الشات وقائمة اللاعبين لا مكان لهما في شاشةٍ صغيرة واللعبة تعمل —
     والمشاهد يقرأ الشات في تيك توك أصلاً */
  body.playing #chatpane,
  body.playing #rail{display:none !important}

  /* الشريط يلتفّ ثلاثة أسطر فيأكل ثلث الشاشة — نُنحّفه */
  body.playing #stageBar{
    padding:5px 8px;gap:6px;row-gap:5px;flex:0 0 auto;
  }
  body.playing #stageBar .btn-icon{width:32px;height:32px}
  body.playing #stageHint{display:none}
  body.playing #stageTitle{font-size:13px}
  body.playing #stageIcon{width:28px;height:28px;border-radius:10px}
  body.playing .sb-stat{padding:2px 7px;font-size:11px}

  /* ختم القناة أصغر: شريطه محجوزٌ من ارتفاع المسرح وهو ضيّقٌ هنا */
  body.playing #brandmark{
    padding:4px 12px 4px 7px;gap:7px;
  }
  body.playing #brandmark b{font-size:clamp(14px,4.6vw,22px)}
  body.playing #brandmark i{font-size:clamp(9px,2.6vw,13px)}
  body.playing .bm-logo{width:clamp(26px,7.4vw,38px);height:clamp(26px,7.4vw,38px)}
}

/* شاشةٌ قصيرة (الجوّال بالعرض): الحدود الدنيا تُلغى — كانت تفرض
   ٣٠٠ للمسرح و١٧٠ للشات على شاشةٍ ارتفاعها ٣٧٥ فيفيض حتماً */
@media (max-width:980px) and (max-height:680px){
  html,body{height:100%;min-height:0}
  body{overflow:hidden}
  body.playing #stage{min-height:0 !important}
  body.playing #rail,
  body.playing #chatpane{min-height:0 !important}
}

/* المسرح ضاق عرضاً ⇒ شريطه يلتفّ سطرين بدل أن تتراكب أزراره */
@media (max-width:900px){
  #stageBar{flex-wrap:wrap;row-gap:7px}
  .sb-mid{margin-inline:0}
  .sb-left{margin-inline-start:auto}
}

/* ══ الكراسي: اختيار مصدر النغمة ══ */
.mm-pick{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.mm-p{
  display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:11px 8px;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
  background:var(--panel);border:1px solid var(--line);color:var(--dim);
  transition:border-color .16s,background .16s;
}
.mm-p:hover{background:var(--panel-2);color:var(--txt)}
.mm-p b{font-size:12.5px;font-weight:800;color:var(--txt)}
.mm-p small{font-size:10px;font-weight:600;color:var(--dim-2);line-height:1.45}
.mm-p.on{
  border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  background:color-mix(in srgb,var(--acc) 14%,var(--panel));
}
.mm-p.on b{color:var(--star)}

/* موازِنٌ صغير يرقص — يقول إنّ هنا صوتاً */
.mm-eq{display:flex;align-items:flex-end;gap:2px;height:17px}
.mm-eq i{width:3px;border-radius:2px;background:var(--dim-2);height:5px}
.mm-p.on .mm-eq i{background:var(--star);animation:mmEq .9s ease-in-out infinite}
.mm-p.on .mm-eq i:nth-child(1){animation-delay:0s}
.mm-p.on .mm-eq i:nth-child(2){animation-delay:.15s}
.mm-p.on .mm-eq i:nth-child(3){animation-delay:.3s}
.mm-p.on .mm-eq i:nth-child(4){animation-delay:.45s}
@keyframes mmEq{0%,100%{height:5px}50%{height:16px}}

.mm-ext{display:flex;flex-direction:column;gap:7px;margin-bottom:8px}
.mm-ext.hidden{display:none}

/* ══════════════════════════════════════════════════════════════
   التخبّي — مشهدٌ معتم ومخابئ مغلقة، وكشّافك هو الضوء الوحيد
   ══════════════════════════════════════════════════════════════ */
.sk-wrap{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;gap:clamp(8px,1.6vh,15px);width:100%;padding:4px;
}

/* ── الرأس: من تكون في هذه اللحظة ── */
.sk-head{flex:0 0 auto;width:min(760px,98%);display:flex;flex-direction:column;gap:7px}
.sk-hd{
  display:flex;align-items:center;gap:clamp(9px,1.8vw,16px);
  padding:clamp(9px,1.5vh,14px) clamp(12px,1.8vw,18px);border-radius:18px;
  background:var(--surf);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(2,4,16,.4);
}
.sk-hd.blind{
  border-color:color-mix(in srgb,var(--bad) 40%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--bad) 12%,var(--surf)),var(--surf) 70%);
}
.sk-hd.hunt{
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 15%,var(--surf)),var(--surf) 70%);
}
.sk-eye{
  flex:0 0 auto;display:grid;place-items:center;
  width:clamp(42px,7vh,58px);height:clamp(42px,7vh,58px);border-radius:18px;
  background:var(--panel-2);border:1px solid var(--line);
}
.sk-eye.lit{
  background:color-mix(in srgb,var(--acc) 22%,var(--panel-2));
  border-color:color-mix(in srgb,var(--acc) 50%,transparent);
  box-shadow:0 0 26px color-mix(in srgb,var(--acc) 40%,transparent);
  animation:skBeam 1.8s ease-in-out infinite;
}
@keyframes skBeam{50%{box-shadow:0 0 42px color-mix(in srgb,var(--acc) 62%,transparent)}}
.sk-hx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sk-hx b{font-size:clamp(14px,2.3vh,19px);font-weight:900;letter-spacing:-.2px}
.sk-hx i{font-style:normal;font-size:clamp(10.5px,1.6vh,12.5px);font-weight:700;color:var(--dim-2)}
.sk-hx i b{color:var(--star);font-size:inherit}
.sk-timer{
  flex:0 0 auto;display:flex;align-items:baseline;gap:2px;
  font-variant-numeric:tabular-nums;
}
.sk-timer b{font-size:clamp(22px,4vh,34px);font-weight:900;line-height:1}
.sk-timer u{text-decoration:none;font-size:11px;font-weight:800;color:var(--dim-2)}

/* عدّاد من اختبأ — بلا رقم مخبأ أبداً */
.sk-count{
  display:flex;align-items:center;gap:9px;padding:0 4px;
  font-size:12px;font-weight:700;color:var(--dim-2);
}
.sk-count b{color:var(--txt);font-weight:900}
.sk-bar{flex:1;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.09)}
.sk-bar i{
  display:block;height:100%;border-radius:999px;transition:width .3s var(--ease);
  background:linear-gradient(90deg,var(--acc),var(--star));
}

/* ── شبكة المخابئ ── */
.sk-grid{
  flex:1;min-height:0;width:min(760px,98%);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:clamp(6px,1.2vh,11px);align-content:center;
}
.sk-grid.many{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}

.sk-s{
  position:relative;overflow:hidden;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  aspect-ratio:1;padding:6px;border-radius:16px;color:var(--txt);
  background:linear-gradient(168deg,var(--surf-2),var(--surf) 70%);
  border:1px solid var(--line);
  transition:transform .16s var(--ease),border-color .18s,box-shadow .18s;
}
.sk-s::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 22%,
    color-mix(in srgb,var(--acc) 34%,transparent),transparent 70%);
  transition:opacity .2s;
}
.sk-s:not(:disabled):hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  box-shadow:0 14px 32px rgba(2,4,16,.5),
             0 0 30px color-mix(in srgb,var(--acc) 26%,transparent);
}
.sk-s:not(:disabled):hover::before{opacity:1}
.sk-s:disabled{cursor:default}

.sk-n{
  position:absolute;inset-block-start:5px;inset-inline-start:7px;
  font-size:10.5px;font-weight:900;color:var(--dim-2);
}
.sk-ic{font-family:var(--emoji);font-size:clamp(24px,4.6vh,38px);line-height:1;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.sk-who{
  font-size:10.5px;font-weight:800;max-width:100%;padding:0 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* مقفلة أثناء الاختباء: باهتةٌ ولا تُضغط */
.sk-grid.locked .sk-s{opacity:.62;filter:saturate(.7)}

/* فُتحت */
.sk-s.open{animation:skOpen .34s cubic-bezier(.2,1.3,.35,1)}
@keyframes skOpen{from{transform:rotateY(-55deg) scale(.9)}to{transform:none}}
.sk-s.miss{opacity:.42;filter:grayscale(.75)}
.sk-s.hit{
  border-color:color-mix(in srgb,var(--bad) 62%,transparent);
  background:linear-gradient(168deg,color-mix(in srgb,var(--bad) 26%,var(--surf-2)),var(--surf));
  box-shadow:0 0 32px color-mix(in srgb,var(--bad) 34%,transparent);
}

.sk-foot{flex:0 0 auto;min-height:22px;text-align:center;
  font-size:clamp(12px,1.9vh,15px);font-weight:800}
.sk-tip{font-size:12px;font-weight:700;color:var(--dim-2)}
.sk-foot b{color:var(--star)}

/* ── ستارة الشات: لا تنظر ── */
.sk-veil{
  position:absolute;inset:0;z-index:9;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;padding:18px;border-radius:inherit;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:skVeil .3s var(--ease);
}
@keyframes skVeil{from{opacity:0}}
.sk-veil b{font-size:15px;font-weight:900}
.sk-veil i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--dim-2);line-height:1.7;
  max-width:22ch}
#chatpane{position:relative}

/* وحتى لو تسرّبت رسالةٌ خلف الستارة فلا تُقرأ */
body.seek-blind #chatFeed{filter:blur(9px);user-select:none}
body.seek-blind .pb-tag,
body.seek-blind .cf-tx span{filter:blur(6px)}

@media(max-width:700px){
  .sk-grid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr))}
  .sk-hx i{display:none}
  .sk-who{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   مسارح الألعاب الثلاث — كما رُسمت في المعاينة
   الفرق لم يكن في الألوان بل في الترتيب البصريّ: السؤال كان شريحةً
   صغيرة بحجم ١٣ بكسل والمشاهد على جوّاله لا يقرؤه، والعجلة بلا
   إطارٍ يفصلها عن الخلفيّة، ولوح الرسم بلا جوارٍ يشرحه.
   كلّ ما هنا مقصورٌ على لعبته — لا يمسّ لعبةً أخرى.
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────── ❓ تحدّي المعلومات ─────────────── */
/* السؤال هو البطل: بطاقةٌ تملأ العرض لا حبّةٌ في الزاوية */
#stage[data-game="trivia"] .w-tag{
  display:block;width:min(720px,96%);margin:0 auto;text-align:center;
  padding:clamp(13px,2.4vh,24px) clamp(16px,2.6vw,30px);
  border-radius:clamp(14px,2.2vh,22px);
  font-size:clamp(17px,3.4vh,31px);font-weight:900;letter-spacing:-.4px;line-height:1.45;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--acc) 20%,var(--surf-2)), var(--surf) 72%);
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  box-shadow:0 18px 44px rgba(2,4,16,.5),
             0 0 60px color-mix(in srgb,var(--acc) 16%,transparent);
}
#stage[data-game="trivia"] .w-tag .emo{
  display:block;margin:0 auto 4px;font-size:.8em;opacity:.85;
}

/* الخيارات: أوضح وأكبر، والشريط يملأ من خلفها بنسبة الأصوات */
#stage[data-game="trivia"] .opts{max-width:760px;gap:clamp(7px,1.4vh,13px)}
#stage[data-game="trivia"] .opt{
  padding:clamp(9px,1.7vh,15px) clamp(11px,1.5vw,17px);
  border-width:1px;border-radius:clamp(11px,1.8vh,16px);
  background:linear-gradient(100deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
#stage[data-game="trivia"] .opt .k{
  width:clamp(26px,3.8vh,34px);height:clamp(26px,3.8vh,34px);
  border-radius:clamp(8px,1.2vh,11px);font-size:clamp(13px,2.1vh,17px);
  color:#0b1220;border-color:transparent;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--acc) 88%,#fff), color-mix(in srgb,var(--acc) 70%,#0b1220));
}
#stage[data-game="trivia"] .opt .t{font-size:clamp(13px,2.2vh,18px);font-weight:800}
#stage[data-game="trivia"] .opt .c{
  font-size:clamp(11px,1.7vh,13px);font-weight:900;color:var(--txt);
  background:rgba(0,0,0,.34);
}
#stage[data-game="trivia"] .opt .bar{
  background:color-mix(in srgb,var(--acc) 26%,transparent);
}
#stage[data-game="trivia"] .opt.right .k{
  background:linear-gradient(150deg,#8ff0bd,#2fa768);
}

/* ─────────────── 🎯 روليت الطرد ─────────────── */
/* العجلة تُفصل عن الخلفيّة بحلقةٍ داكنة، ومركزها يغور */
#stage[data-game="roulette"] .wheel-wrap,
#stage[data-game="roulettex"] .wheel-wrap{
  width:min(380px,74vmin);
  filter:drop-shadow(0 22px 52px rgba(2,4,18,.72));
}
#stage[data-game="roulette"] .wheel-face,
#stage[data-game="roulettex"] .wheel-face{
  border:0;
  box-shadow:
    0 0 0 clamp(6px,1.1vmin,11px) #0e1226,          /* الحلقة الفاصلة */
    0 0 0 calc(clamp(6px,1.1vmin,11px) + 1px) color-mix(in srgb,var(--star) 34%,transparent),
    inset 0 0 44px rgba(2,4,18,.42);
}
#stage[data-game="roulette"] .hub,
#stage[data-game="roulettex"] .hub{
  width:27%;border:0;
  background:radial-gradient(circle at 50% 34%,#232a52,#0e1226 78%);
  box-shadow:0 10px 26px rgba(2,4,18,.7),
             inset 0 0 26px rgba(0,0,0,.6),
             0 0 0 1px color-mix(in srgb,var(--star) 28%,transparent);
}
#stage[data-game="roulette"] .pointer,
#stage[data-game="roulettex"] .pointer{
  top:-16px;border-inline-width:13px;border-top-width:26px;border-top-color:#fff;
  filter:drop-shadow(0 4px 9px rgba(2,4,18,.85));
}
#stage[data-game="roulette"] .wm-name,
#stage[data-game="roulettex"] .wm-name{
  text-shadow:0 1px 5px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);
}

/* ─────────────── 🎨 خمّن الرسمة ─────────────── */
/* اللوح ورقةٌ بيضاء لها ظلّ، لا مستطيلٌ ملصوق */
/* اللوح وحده يأخذ الظلّ — لا هو ولا اللوحة داخله، فيظهران ورقتين */
#stage[data-game="draw"] .dr-pad{
  border-radius:clamp(10px,1.6vh,16px);
  box-shadow:0 20px 50px rgba(2,4,18,.55),
             0 0 0 1px rgba(255,255,255,.08);
}
/* الكلمة السرّية بطاقةٌ بلون اللعبة تُقرأ بلمحة */
#stage[data-game="draw"] .dr-word{
  border-radius:clamp(10px,1.6vh,15px);
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--acc) 18%,var(--surf-2)), var(--surf) 74%);
  border:1px solid color-mix(in srgb,var(--acc) 48%,transparent);
  box-shadow:0 10px 26px rgba(2,4,18,.4);
}

/* كلمة المرور المولّدة — تظهر مرّة واحدة فتُنسخ */
.ac-newpass{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:9px;padding:11px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--ok) 12%,var(--panel));
  border:1px solid color-mix(in srgb,var(--ok) 42%,transparent);
}
.ac-newpass.hidden{display:none}
.np-lab{font-size:11.5px;font-weight:800;color:var(--dim-2)}
.ac-newpass code{
  flex:1;min-width:180px;font-size:16px;font-weight:900;letter-spacing:.6px;
  font-family:ui-monospace,'Courier New',monospace;color:#a9f5cf;
  user-select:all;word-break:break-all;
}

/* ══════════════════════════════════════════════════════════════════════
   الواجهة الأولى — «البثّ الحيّ»
   الزائر لا يقرأ وصفاً بل يرى المنتج يعمل: هاتفٌ إلى جانب العنوان
   فيه سؤالٌ وأصواتٌ تمتلئ وشاتٌ يجري. الوصف يقنع، والمشهد يبيع.
   ══════════════════════════════════════════════════════════════════════ */
.ld-hero.live{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3.4vw,40px);
  align-items:center;text-align:start;padding:clamp(20px,4vh,44px) 0 clamp(24px,4vh,50px);
}
.ld-hero.live .ld-h-tx{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;min-width:0;
}
.ld-hero.live .ld-cta,
.ld-hero.live .ld-stats{justify-content:flex-start}
.ld-hero.live p{max-width:44ch}

/* الهاتف */
.ld-h-live{position:relative;display:grid;place-items:center;min-width:0}
.ld-halo{
  position:absolute;inset:4%;border-radius:50%;z-index:0;pointer-events:none;
  filter:blur(58px);
  background:radial-gradient(circle,color-mix(in srgb,var(--p2) 42%,transparent),transparent 70%);
  animation:ldHalo 7s ease-in-out infinite alternate;
}
@keyframes ldHalo{to{transform:scale(1.12);opacity:.75}}
.ld-ph{
  position:relative;z-index:1;width:min(330px,94%);border-radius:26px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
  box-shadow:0 34px 72px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04);
}
.ld-ph-top{
  display:flex;align-items:center;gap:7px;padding:9px 14px;
  font-size:11.5px;font-weight:800;color:var(--dim);border-bottom:1px solid var(--line);
}
.ld-dot{
  width:7px;height:7px;border-radius:50%;background:#ff5f6d;
  box-shadow:0 0 0 0 rgba(255,95,109,.6);animation:ldPls 1.6s infinite;
}
@keyframes ldPls{70%{box-shadow:0 0 0 7px rgba(255,95,109,0)}100%{box-shadow:0 0 0 0 rgba(255,95,109,0)}}
.ld-ph-stage{
  display:flex;flex-direction:column;gap:8px;padding:15px 13px;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--p2) 14%,transparent),transparent 66%);
}
.ld-ph-q{
  padding:11px;border-radius:12px;text-align:center;font-size:14.5px;font-weight:900;
  background:var(--surf-2);border:1px solid color-mix(in srgb,var(--p2) 34%,transparent);
}
.ld-ph-op{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;
  padding:9px 11px;border-radius:11px;font-size:13px;font-weight:800;background:var(--surf);
}
.ld-ph-op i{
  position:relative;z-index:2;flex:0 0 auto;
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:900;color:#0b1220;background:var(--p2);
}
.ld-ph-op u{
  position:absolute;inset-block:0;inset-inline-start:0;text-decoration:none;
  background:color-mix(in srgb,var(--p2) 22%,transparent);
  animation:ldFill 2.4s cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes ldFill{from{width:0}}
.ld-ph-chat{
  display:flex;flex-direction:column;gap:5px;padding:10px 14px 14px;
  border-top:1px solid var(--line);max-height:148px;overflow:hidden;
}
.ld-ph-chat p{
  margin:0;font-size:12.5px;font-weight:700;color:#cfd5f5;
  animation:ldMsg 4s ease-in-out infinite;animation-delay:var(--d);
}
.ld-ph-chat b{color:var(--star);margin-inline-end:6px}
/* الرسائل تتنفّس: تظهر وتخفت كأنّ الشات يجري الآن */
@keyframes ldMsg{0%,88%{opacity:1}94%{opacity:.25}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ld-halo,.ld-ph-chat p,.ld-ph-op u,.ld-dot{animation:none}
}
@media(max-width:900px){
  .ld-hero.live{grid-template-columns:1fr;text-align:center}
  .ld-hero.live .ld-h-tx{align-items:center}
  .ld-hero.live .ld-cta,
  .ld-hero.live .ld-stats{justify-content:center}
  .ld-hero.live p{max-width:none}
  .ld-h-live{order:-1}
  .ld-ph{width:min(300px,88%)}
}

/* ══════════════════════════════════════════════════════════════════════
   صفحة الملف — «الحقيبة أوّلاً»
   البنر هو ما يفخر به اللاعب ويراه الناس، فجعلناه لوحةَ الصدارة
   لا سطراً في زاوية. وإلى جانبه هويّته ونقاطه وكم بقي للبنر التالي.
   ══════════════════════════════════════════════════════════════════════ */
.vw-hero{
  display:grid;grid-template-columns:1.45fr .95fr;gap:clamp(12px,2vw,20px);
  /* ارتفاعٌ واحد للخانتين: بلا تحديدٍ يتمدّد البنر ليطابق طول
     العمود المجاور فيصير لوحةً بلا داعٍ تملأ الشاشة */
  grid-template-rows:minmax(clamp(198px,30vh,252px),auto);
  align-items:stretch;margin-bottom:clamp(10px,1.6vh,16px);
}

/* لوحة البنر */
.vw-hban{
  position:relative;overflow:hidden;height:100%;
  border-radius:clamp(16px,2.4vh,22px);
  background-size:cover;background-position:center;
  background-color:var(--c);
  background-image:linear-gradient(122deg,
    color-mix(in srgb,var(--c) 88%,#fff), var(--c) 48%, #0e1226);
  border:1px solid var(--line);
  box-shadow:0 22px 52px rgba(2,4,16,.55),inset 0 0 0 1px rgba(255,255,255,.06);
}
.vw-hban.has{background-blend-mode:normal}
.vw-hban-b{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 13px;border-radius:999px;
  font-size:11px;font-weight:900;color:#0b1a10;background:var(--ok);
  font-family:'Tajawal',system-ui,sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.vw-hban-n{
  position:absolute;inset-block-end:12px;inset-inline-start:14px;
  font-size:14px;font-weight:900;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.vw-hban-e{
  position:absolute;inset:0;display:grid;place-items:center;padding:20px;
  text-align:center;font-size:13px;font-weight:800;color:rgba(255,255,255,.9);
  background:rgba(6,8,20,.45);text-shadow:0 2px 10px rgba(0,0,0,.7);
}

/* العمود المجاور */
.vw-hside{
  display:flex;flex-direction:column;gap:8px;justify-content:center;
  padding:clamp(14px,2.2vh,20px);border-radius:clamp(16px,2.4vh,22px);
  background:var(--surf);border:1px solid var(--line);
}
/* كتلة الهويّة مصمَّمةٌ لصفٍّ أفقيّ، وأساسها المرن ‎260px‎ — وداخل
   عمودٍ يصير ذلك ارتفاعاً فينتفخ الرأس. نُعيدها لحجمها هنا وحدها. */
.vw-hside .vw-me{flex:0 0 auto;margin-bottom:0;gap:12px}
.vw-hside .vw-av{width:56px;height:56px;border-radius:18px;font-size:24px}
.vw-hside .vw-id b{font-size:clamp(17px,2.6vh,21px);line-height:1.25}
.vw-hside .vw-uid{font-size:12px;margin-top:4px;padding:2px 9px}
.vw-hside .vw-id i{font-size:12px}

.vw-hpts{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.vw-hpts b{font-size:clamp(28px,5vh,40px);font-weight:900;line-height:1;letter-spacing:-1.4px}
.vw-hpts i{font-style:normal;font-size:12px;font-weight:800;color:var(--dim-2)}
.vw-swap{
  margin-top:4px;padding:10px 16px;border-radius:var(--r-md);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:900;
  color:var(--txt);background:var(--panel-2);border:1px solid var(--line);
  transition:background .16s,border-color .16s;
}
.vw-swap:hover{
  background:color-mix(in srgb,var(--p3) 18%,var(--panel-2));
  border-color:color-mix(in srgb,var(--p3) 45%,transparent);
}

@media(max-width:760px){
  .vw-hero{grid-template-columns:1fr;grid-template-rows:132px auto}
  .vw-hside{padding:14px}
}

/* ══════════════════════════════════════════════════════════════════════
   الشريطان العائمان — ترتيبٌ وهدوء
   كانا صفّاً من حبّاتٍ مختلفة الأحجام والألوان: زرٌّ أحمر وآخر أزرق
   وشارةٌ ورديّة، فلا يُعرف ما يُضغط ممّا يُقرأ. الآن:
   الأزرار دوائر متساوية بلا لون، والشارات تُقرأ ولا تُضغط، والفواصل
   تفصل المجموعات، ولون الخطر لا يظهر إلا عند لمس «إنهاء».
   ══════════════════════════════════════════════════════════════════════ */

/* ── أزرار الأدوات: دوائر متساوية، والحركة عند اللمس ── */
.sb-left .btn-icon,
body.shell-ok.shell-cinema .sb-left .btn-icon{
  width:36px;height:36px;padding:0;border-radius:50%;
  display:grid;place-items:center;font-size:15px;
  background:rgba(255,255,255,.055);border:1px solid transparent;color:var(--dim);
  transition:background .16s,color .16s,transform .16s,border-color .16s;
}
.sb-left .btn-icon:hover{
  background:rgba(255,255,255,.12);color:var(--txt);
  transform:translateY(-2px);
}
.sb-left .btn-icon.on{
  background:color-mix(in srgb,var(--p3) 26%,transparent);
  border-color:color-mix(in srgb,var(--p3) 45%,transparent);color:var(--txt);
}

/* «إنهاء» فعلٌ لا رجعة فيه: هادئٌ حتى تلمسه */
.sb-left #btnStop{
  padding:8px 16px;border-radius:999px;font-size:12.5px;font-weight:900;
  color:#ffb3c4;background:rgba(255,61,113,.10);
  border:1px solid rgba(255,61,113,.26);
  transition:background .16s,color .16s,border-color .16s;
}
.sb-left #btnStop:hover{
  background:rgba(255,61,113,.24);border-color:rgba(255,61,113,.55);color:#fff;
}
.sb-left #btnStart{padding:9px 20px;border-radius:999px;font-weight:900}

/* ── الشارات: تُقرأ ولا تُضغط ──
   حرفٌ صغيرٌ فوق وقيمةٌ تحته، بلا حدودٍ صارخة تشبه الأزرار. */
.join-badge,.gate-badge{
  padding:5px 14px;border-radius:999px;gap:6px;
  font-size:12px;font-weight:800;line-height:1.25;white-space:nowrap;
}
.join-badge{
  background:color-mix(in srgb,var(--ok) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 26%,transparent);
  color:color-mix(in srgb,var(--ok) 62%,#fff);
}
.join-badge b{color:#fff;font-weight:900;letter-spacing:.2px}
.gate-badge{
  background:rgba(255,61,113,.10);border:1px solid rgba(255,61,113,.24);color:#ffc3d0;
}

/* فاصلٌ بين المجموعات — الأدوات شيءٌ والشارات شيءٌ آخر */
.sb-left{gap:7px}
.sb-left .join-badge{margin-inline-start:4px;position:relative}
.sb-left .join-badge::before{
  content:'';position:absolute;inset-inline-start:-8px;inset-block:6px;
  width:1px;background:var(--line);
}

/* ── شريط الأرقام: كلّ رقمٍ بعنوانه ── */
.sb-mid{gap:4px}
.sb-stat{
  flex-direction:column;align-items:center;gap:0;
  padding:5px 13px;border-radius:14px;min-width:52px;
  background:transparent;border:0;
}
.sb-stat b{
  font-size:16px;font-weight:900;line-height:1.15;color:#fff;
  font-variant-numeric:tabular-nums;
}
.sb-stat .emo{font-size:12px;opacity:.75;line-height:1}
.sb-stat:hover{background:rgba(255,255,255,.06)}
/* فاصلٌ رفيع بين رقمٍ وآخر */
.sb-stat + .sb-stat{position:relative}
.sb-stat + .sb-stat::before{
  content:'';position:absolute;inset-inline-start:-2px;inset-block:8px;
  width:1px;background:var(--line);
}
/* أزرار الشات واللوحة تُفصل عن الأرقام */
.sb-mid #btnChat{margin-inline-start:6px}

@media(max-width:820px){
  .sb-stat{min-width:44px;padding:4px 9px}
  .sb-stat b{font-size:14px}
  .sb-left .btn-icon{width:32px;height:32px;font-size:14px}
}

/* ══════════════════════════════════════════════════════════════════════
   المسرح للمشاهد لا للمذيع
   المشاهد يرى بثّك في مربّعٍ صغير على جوّاله. فإن بقي في المسرح فراغٌ
   ولم نملأه ظهرت اللعبة صغيرةً لا تُقرأ — وهذا ما وقع في الروليت:
   عجلةٌ بـ٢٢٩ بكسل في مسرحٍ ارتفاعه ٤٩٩.
   العلاج أن تأخذ العجلة ارتفاع ما أُتيح لها بدل مقاسٍ ثابت.
   ══════════════════════════════════════════════════════════════════════ */
.wheel2d{padding:4px}
.wheel-wrap{
  width:auto;height:100%;aspect-ratio:1;
  max-width:min(100%,92vh);max-height:100%;
}
/* ── الأسماء تُقاس بقطر العجلة نفسها ──
   كانت تُقاس بعرض صندوقها هي، وعرضُه يتبع طول الاسم: فالاسم القصير
   يصغر خطُّه بلا سبب. ولا تصلح خانةُ العجلة (wheel2d) بديلاً — قد
   تكون عريضةً قصيرة فتُنتج اسماً أكبر من القرص. فجعلنا العجلة نفسها
   حاويةَ القياس: الاسم نسبةٌ من قطرها، يكبر بكِبَرها ولا يفيض. */
.wheel-wrap{container-type:inline-size}
.wm-name{font-size:clamp(13px,6.8cqw,34px);max-width:36cqw;font-weight:900}
.wheel-marks.many .wm-name{font-size:clamp(12px,5.7cqw,28px);max-width:32cqw}
.wheel-marks.lots .wm-name{font-size:clamp(11px,4.8cqw,23px);max-width:28cqw}
.wm .av{width:clamp(24px,7cqw,46px);height:clamp(24px,7cqw,46px);
  font-size:clamp(11px,3.4cqw,21px)}

/* في وضع العرض والمسرح: المؤشّر والحلقة يكبران معها */
body.show-mode.playing .pointer,
body.shell-ok.shell-cinema .pointer{
  top:-18px;border-inline-width:15px;border-top-width:30px;
}
/* شريط الحالة فوق العجلة يُقرأ من بعيد */
body.show-mode.playing #stage[data-game="roulette"] .w-tag,
body.show-mode.playing #stage[data-game="roulettex"] .w-tag,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .w-tag,
body.shell-ok.shell-cinema #stage[data-game="roulettex"] .w-tag{
  font-size:clamp(14px,2.4vh,21px);padding:9px 20px;font-weight:900;
}

/* ── الروليت على البثّ: العجلة تأخذ ما تستحقّ ──
   كانت تنال ٤٧٪ من المسرح لأنّ ما حولها يقتطع: حشوةُ الجسم،
   وفراغاته، وشريط الحالة، والزرّ تحتها. نُضيّق ما حولها في وضع
   العرض والمسرح وحدهما — حيث المشاهد بعيدٌ والشاشة صغيرة. */
body.show-mode.playing #stage[data-game="roulette"] .g-wrap,
body.show-mode.playing #stage[data-game="roulettex"] .g-wrap,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .g-wrap,
body.shell-ok.shell-cinema #stage[data-game="roulettex"] .g-wrap{
  padding:6px 10px;gap:6px;
}
body.show-mode.playing #stage[data-game="roulette"] .g-body,
body.show-mode.playing #stage[data-game="roulettex"] .g-body,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .g-body,
body.shell-ok.shell-cinema #stage[data-game="roulettex"] .g-body{
  gap:7px;padding:0;
}
body.show-mode.playing #stage[data-game="roulette"] .rt-wrap,
body.show-mode.playing #stage[data-game="roulettex"] .rt-wrap,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .rt-wrap,
body.shell-ok.shell-cinema #stage[data-game="roulettex"] .rt-wrap{
  gap:6px;
}
body.show-mode.playing #stage[data-game="roulette"] .wheel2d,
body.show-mode.playing #stage[data-game="roulettex"] .wheel2d,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .wheel2d,
body.shell-ok.shell-cinema #stage[data-game="roulettex"] .wheel2d{
  padding:0;
}
/* والزرّ تحتها: عريضٌ يُقرأ، لا يأكل ارتفاعاً */
body.show-mode.playing #stage[data-game="roulette"] .rt-wrap > .btn,
body.shell-ok.shell-cinema #stage[data-game="roulette"] .rt-wrap > .btn{
  padding:9px 26px;font-size:14px;
}

/* ══════════════════════════════════════════════════════════════════════
   🥤 الأكواب — «المنضدة»
   منضدةٌ خشبيّة لها أفقٌ وضوءٌ يسقط عليها من فوق، وأكوابٌ مخروطيّة
   لها بريقٌ وظلّ، والكرة تلمع وتطفو تحت الكوب الصحيح.
   المشهد يظهر خلف اللوحة المجسّمة أيضاً — فعارضها شفّاف.
   ══════════════════════════════════════════════════════════════════════ */
#stage[data-game="cups"]{
  background:
    radial-gradient(52% 34% at 50% 74%, rgba(255,214,160,.20), transparent 70%),
    linear-gradient(180deg, transparent 0 52%, rgba(126,86,52,.34) 52%, rgba(38,24,14,.62) 100%),
    radial-gradient(120% 84% at 50% 10%, #211630 0%, #140d1f 46%, #08050e 100%);
}
/* ألواح المنضدة تتقارب في العمق */
#stage[data-game="cups"]::after{
  background:
    repeating-conic-gradient(from 200deg at 50% 52%,
      rgba(255,214,160,.075) 0 1.2deg, transparent 1.2deg 5.6deg),
    radial-gradient(58% 58% at 50% 50%, transparent 42%, rgba(4,2,10,.55) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 52%,#000 64%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 52%,#000 64%,#000 100%);
}

/* ── المسرح الثنائيّ ── */
.cup-stage{
  position:relative;height:clamp(180px,34vh,290px);max-width:100%;margin:0 auto;
  perspective:900px;
}
.cup-floor{
  position:absolute;inset-block-end:6%;inset-inline:6%;height:30px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 72%);filter:blur(7px);
}

/* الكوب: مخروطٌ ناقص بحوافّ مضيئة */
.cup{
  position:absolute;inset-block-start:0;height:100%;
  display:flex;align-items:flex-end;justify-content:center;
  transition:right .45s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.2,1.2,.35,1);
}
.cup-body{
  position:relative;display:grid;place-items:end center;
  width:100%;height:78%;
  background:linear-gradient(100deg,#f0c495 0%,#d29a67 38%,#a86d3f 72%,#7d4d2a 100%);
  clip-path:polygon(17% 0, 83% 0, 100% 100%, 0 100%);
  border-radius:7px 7px 14px 14px;
  box-shadow:0 20px 38px rgba(0,0,0,.6), inset 0 4px 0 rgba(255,255,255,.34);
}
/* بريقٌ على الحافّة يعطيها حجماً */
.cup-body::before{
  content:'';position:absolute;inset-block:0;inset-inline-start:24%;width:12%;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent 70%);
}
.cup-body b{
  position:relative;z-index:2;margin-bottom:14%;
  font-size:clamp(20px,4.4vh,34px);font-weight:900;color:#40270f;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.cup-sh{
  position:absolute;inset-block-end:-4px;inset-inline:14%;height:14px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);filter:blur(4px);
}
/* الكوب المرفوع */
.cup.up{transform:translateY(-30%) rotate(-8deg)}

/* الكرة: تلمع وتطفو */
.cup-ball{
  position:absolute;inset-block-end:12%;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff8d2, #f5cd47 58%, #c2941c);
  box-shadow:0 0 30px rgba(245,205,71,.8), 0 10px 18px rgba(0,0,0,.55);
  transition:right .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  animation:cupBob 1.7s ease-in-out infinite;
}
@keyframes cupBob{50%{transform:translateY(-7px)}}

@media(max-width:700px){
  .cup-body b{font-size:20px}
  .cup-ball{width:26px;height:26px}
}

/* ── شات المسرح: أكبر وأوضح ──
   كان عموداً ضيّقاً بخطٍّ صغير — والمشاهد يقرؤه على جوّاله من بعيد.
   نوسّعه ونكبّر خطّه، ويبقى ذائباً في الخلفيّة بلا صندوق. */
@media (min-width:981px){
  body.shell-ok.shell-cinema.playing #chatpane{
    width:min(330px,29%);
    inset-block:62px 152px;
  }
  body.shell-ok.shell-cinema #chatpane .chat-feed{gap:4px}
  body.shell-ok.shell-cinema #chatpane .cf-row{padding:3px 0;gap:8px}
  body.shell-ok.shell-cinema #chatpane .cf-row .av{width:24px;height:24px;font-size:12px}
  body.shell-ok.shell-cinema #chatpane .cf-tx b{font-size:14px}
  body.shell-ok.shell-cinema #chatpane .cf-tx span{font-size:15px;line-height:1.45}
  /* والمسرح يفسح لها مكانها فلا تركب عليه — بشرط أن تكون ظاهرة.
     كان الحجز دائماً، فيبقى ٣٥٦ بكسلاً فارغةً على يسار الشاشة قبل
     أن تبدأ اللعبة أو والشات مخفيّ، فتبدو اللعبة زاحفةً إلى اليمين. */
  /* ولا يُحجز لها مكان: الشاشة كلُّها للّعبة */
  body.shell-ok.shell-cinema #stage{inset-inline:14px}
}

/* ══════════════════════════════════════════════════════════════════════
   ختم القناة — «ألعاب هدهد»
   يبقى ظاهراً في أعلى المسرح طوال اللعب، فمن يقصّ مقطعاً من بثّك
   يبقى الاسم فيه. خفيفٌ لا يزاحم اللعبة، والشعار يتنفّس ضوءاً.
   ولا يظهر في المعرض — هناك الاسم في الشريط العلويّ أصلاً.
   ══════════════════════════════════════════════════════════════════════ */
#brandmark{
  /* طبقةٌ تُرسم فوق أعلى المسرح تماماً — لا فوق ما حوله. موضعها
     يُقاس في markTop من مستطيل المسرح نفسه (لأنّ وضع المسرح يجعله
     مطلقاً بمقاسٍ يخالف أباه)، ثم يُحجز لها شريطٌ بحشوٍ في أعلى
     المسرح فينزل محتوى كل لعبةٍ تحتها ولا تغطّي شيئاً. */
  position:absolute;z-index:5;pointer-events:none;
  top:var(--bm-top,12px);left:var(--bm-x0,0px);right:var(--bm-x1,0px);
  margin-inline:auto;width:max-content;max-width:94%;
  display:none;align-items:center;gap:clamp(9px,1.4vh,15px);
  padding:clamp(7px,1.1vh,12px) clamp(18px,2.6vh,30px)
          clamp(7px,1.1vh,12px) clamp(11px,1.7vh,19px);
  border-radius:999px;
  background:rgba(10,13,30,.62);
  border:1px solid rgba(160,170,255,.26);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 34px rgba(139,122,214,.16);
  opacity:1;
}
body.playing #brandmark,
body.shell-ok #brandmark{display:flex}
/* في المعرض لا ختم — والختم صار قبل المسرح في الترتيب فلا ينفع «~» */
#stageWrap:has(#stage[data-game="home"]) #brandmark{display:none}

.bm-tx{display:flex;flex-direction:column;line-height:1.1;gap:2px}
/* كبيرٌ عمداً: الشاشة بعيدةٌ في البثّ، والخطّ الصغير لا يُقرأ */
#brandmark b{
  font-size:clamp(22px,3.8vh,40px);font-weight:900;letter-spacing:-.7px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.75),0 0 22px rgba(139,122,214,.45);
}
/* العنوان تحته — واضحٌ يُقرأ، لا سطرٌ خافت */
#brandmark i{
  font-style:normal;direction:ltr;unicode-bidi:isolate;
  font-size:clamp(13px,2.2vh,21px);font-weight:800;letter-spacing:.3px;
  color:#c9d0ff;text-shadow:0 1px 8px rgba(0,0,0,.7);
}
#brandmark i:empty{display:none}
.bm-logo{
  display:grid;place-items:center;width:clamp(42px,6.2vh,72px);aspect-ratio:1;flex:0 0 auto;
  filter:drop-shadow(0 0 11px rgba(139,122,214,.9));
  animation:bmGlow 3.4s ease-in-out infinite;
}
.bm-logo svg{width:100%;height:100%;display:block}
@keyframes bmGlow{
  50%{filter:drop-shadow(0 0 22px rgba(111,163,221,1)) drop-shadow(0 0 40px rgba(179,167,240,.7))}
}
@media (prefers-reduced-motion:reduce){ .bm-logo{animation:none} }

/* في المسرح: الحبّات العائمة فوق، فينزل الختم تحتها */
body.shell-ok.shell-cinema #brandmark{opacity:1}
/* وضع العرض: أعلى قليلاً لأنّ الشريط انكمش */


@media(max-width:760px){
  #brandmark{padding:6px 15px 6px 9px;gap:8px;opacity:.95}
  #brandmark b{font-size:17px}
  #brandmark i{font-size:11px}
  .bm-logo{width:32px}
}

/* البنر المدفوع في الحقيبة: سعرٌ وزرّ شراء */
.vw-price{
  font-size:12.5px;font-weight:900;color:#ffd76e;
  padding:3px 11px;border-radius:999px;
  background:rgba(255,215,110,.14);border:1px solid rgba(255,215,110,.3);
}
.vw-buy{
  font-size:12.5px;font-weight:900;text-decoration:none;
  padding:6px 15px;border-radius:999px;color:#06210f;
  background:linear-gradient(120deg,#8ef0b8,#3fbf72);
  box-shadow:0 6px 16px rgba(63,191,114,.3);
}
.vw-buy:hover{filter:brightness(1.08)}
.vw-anim.pay{background:rgba(255,215,110,.9);color:#2a2205}

/* ══════════════ التوب ٣ في المعرض ══════════════
   شريطٌ فوق شبكة الألعاب: ثلاث بطاقاتٍ أفقيّة، الأولى في الوسط أعلى
   قليلاً وعليها 🥇. مكانه المعرض لا المسرح — المسرح للّعبة وحدها. */
.t3-wrap{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  margin:2px auto 16px;
  /* لا تتجاوز أباها: كانت تتمدّد إلى مقاس محتواها فتفيض من الطرفين
     ويقصّها ما فوقها، فيختفي صاحبُ المركز الثالث بلا أثر */
  max-width:100%;min-width:0;
}
.t3-wrap.hidden{display:none}
.t3-cap{
  font-size:11.5px;font-weight:800;letter-spacing:.2px;color:#a8b0e0;
  padding:3px 13px;border-radius:999px;
  background:rgba(12,15,34,.5);border:1px solid rgba(160,170,255,.14);
}
#topthree{
  display:flex;align-items:flex-end;
  /* safe: يتوسّط ما دام يسع، فإذا فاض بدأ من أوّله بدل أن يُقصّ طرفاه */
  justify-content:safe center;
  width:max-content;max-width:min(94vw,720px);
  gap:clamp(5px,.8vw,10px);
  overflow-x:auto;scrollbar-width:none;
}
#topthree::-webkit-scrollbar{display:none}
/* الوسامُ لا ينكمش: انكماشُه يقصّ رقمَه داخله (٥٠٠ ← ٠٠) فيُقرأ رقمٌ
   خطأٌ على أنّه صحيح — والفيضُ مع التمرير أسلمُ من ذلك */
.t3-c{flex:0 0 auto}
/* على الشاشة الضيّقة تفيض الثلاثةُ من الطرفين لأنّ التوسيط يقسم
   الفائضَ عليهما، فيُقصّ الثالثُ ولا يُدرَك. safe يُلغي التوسيطَ عند
   الفيض وحدَه، والتمريرُ يُبقي الثلاثةَ في المتناول. */
@media (max-width:560px){
  .t3-wrap{align-self:stretch;width:100%}
  #topthree{width:100%;max-width:none;padding-inline:10px}
}
#topthree.hidden{display:none}

.t3-c{
  --t3-acc:#8b7ad6;
  position:relative;display:flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:999px;overflow:hidden;
  background:linear-gradient(120deg,rgba(12,15,34,.42),rgba(10,13,30,.68));
  border:1px solid rgba(160,170,255,.16);
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  box-shadow:0 7px 20px rgba(0,0,0,.34);
  animation:t3In .42s cubic-bezier(.2,1.3,.4,1) both;
  animation-delay:var(--t3-d,0ms);
}
/* البنر الذي يلبسه اللاعب هو خلفيّة بطاقته — بيّنٌ لا لمحة،
   والمتحرّك يتحرّك من نفسه لأنّه صورةُ خلفيّةٍ لا رسمٌ مجمّد */
.t3-c::before{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  background-image:var(--t3-img,none);background-size:cover;background-position:center;
}
/* ستارةٌ رقيقة فوقه ليبقى الاسم مقروءاً على أي بنرٍ فاتح */
.t3-c::after{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(8,10,26,.72),rgba(8,10,26,.34));
  opacity:var(--t3-scrim,0);
}
.t3-c.has-ban::after{--t3-scrim:1}
.t3-c > *{position:relative;z-index:1}

.t3-c.r1{
  --t3-acc:#f5cd47;
  padding:6px 14px;margin-block-end:clamp(4px,.8vh,9px);
  border-color:rgba(245,205,71,.42);
  box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 22px rgba(245,205,71,.2);
}
.t3-c.r2{--t3-acc:#cfd6e6}
.t3-c.r3{--t3-acc:#d99a5c}

.t3-med{
  font-size:clamp(11px,1.6vh,14px);line-height:1;order:0;flex:0 0 auto;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.t3-c.r1 .t3-med{
  font-size:clamp(14px,2vh,18px);
  animation:t3Crown 2.8s ease-in-out infinite;
}

.t3-av{
  display:grid;place-items:center;flex:0 0 auto;order:1;
  width:clamp(26px,3.4vh,36px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,#2a2f52,#171a33) center/cover no-repeat;
  border:2px solid var(--t3-acc);
  box-shadow:0 0 0 2px rgba(10,13,30,.72);
  overflow:hidden;position:relative;
}
.t3-c.r1 .t3-av{width:clamp(32px,4.2vh,44px)}
.t3-av i{
  position:absolute;font-style:normal;font-weight:900;color:#dfe3ff;
  font-size:clamp(11px,1.6vh,15px);
}
/* الصورة فوق الحرف: إن سقط رابطها بقي الحرف تحته بدل دائرةٍ فارغة */
.t3-av img{
  position:relative;width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
}

.t3-n{
  order:2;max-width:clamp(56px,8vw,104px);
  font-size:clamp(10px,1.5vh,13px);font-weight:800;color:#eef0ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.75);
}
.t3-c.r1 .t3-n{font-size:clamp(11.5px,1.8vh,15px);font-weight:900}

.t3-p{
  order:4;text-decoration:none;font-weight:900;font-variant-numeric:tabular-nums;
  font-size:clamp(10px,1.5vh,13px);color:#06210f;
  padding:1px 9px;border-radius:999px;
  background:linear-gradient(120deg,var(--t3-acc),color-mix(in srgb,var(--t3-acc) 62%,#ffffff));
  box-shadow:0 3px 9px rgba(0,0,0,.3);
}
.t3-c.r1 .t3-p{font-size:clamp(11.5px,1.8vh,15px);padding:2px 12px}

@keyframes t3In{
  from{opacity:0;transform:translateY(-8px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes t3Crown{ 50%{transform:translateY(-3px) rotate(-7deg)} }
@media (prefers-reduced-motion:reduce){
  .t3-c,.t3-c.r1 .t3-med{animation:none}
}
@media(max-width:760px){
  #topthree{gap:4px}
  .t3-c{padding:4px 8px 4px 5px;gap:5px}
  .t3-n{max-width:64px}
}

/* سعر بنرٍ قائم — حقلٌ صغير في قائمة بنرات المالك */
.tb-pin{
  width:clamp(72px,16%,110px);flex:0 0 auto;
  font-size:12.5px;font-weight:800;text-align:center;
  padding:6px 8px;border-radius:10px;
  color:#eef0ff;background:rgba(12,15,34,.6);
  border:1px solid rgba(160,170,255,.2);
}
.tb-pin:focus{outline:none;border-color:rgba(245,205,71,.6);background:rgba(20,24,48,.8)}

/* ══════════════ عمود الأدوات الجانبيّ ══════════════
   الأيقونات كلّها في عمودٍ نحيل على حافّة الصفحة، فيبقى السطر العلوي
   للاتصال وحده وينزل أقلّ ما يمكن — والمسرح يأخذ ما وفّرناه.
   ثابتٌ (fixed) عمداً: لو وُضع في التدفّق لاحتاج تغييرَ تخطيط
   الصفحة كلّه، والجسم عمودٌ مرن لا صفّ. */
:root{ --rail-w:72px }

#toolrail{
  position:fixed;z-index:22;inset-block:0;inset-inline-start:0;
  width:var(--rail-w);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:12px 0;
  background:linear-gradient(180deg,rgba(16,19,42,.94),rgba(14,17,36,.88));
  border-inline-end:1px solid var(--line);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:1px 0 0 rgba(160,170,255,.07), 8px 0 28px rgba(4,6,20,.3);
}
/* خيطٌ ضوئيّ على الحافّة — كما كان تحت الشريط العلوي */
#toolrail::after{
  content:'';position:absolute;inset-block:0;inset-inline-end:0;width:1px;
  background:linear-gradient(180deg,transparent,
    color-mix(in srgb,var(--p3) 55%,transparent) 30%,
    color-mix(in srgb,var(--p2) 55%,transparent) 70%,transparent);
  opacity:.55;
}
body{padding-inline-start:var(--rail-w)}

/* الشعار: الصورة وحدها والاسم تحتها صغيراً — الوصف يذهب */
#toolrail .brand{flex-direction:column;gap:5px;padding:5px 4px;width:100%;border-radius:14px}
#toolrail .brand-logo{width:38px;height:38px;border-radius:13px;padding:6px}
#toolrail .brand-text{text-align:center}
#toolrail .brand-text b{font-size:12.5px}
#toolrail .brand-text span{display:none}

#toolrail .tools{
  display:flex;flex-direction:column;gap:6px;align-items:center;
  margin-block:6px auto;width:100%;
  /* لا نقصّ شيئاً: لصيقة الاسم تخرج من العمود، ولو جعلنا التمرير
     رأسيّاً لأجبر المتصفّحُ القصَّ الأفقيَّ معه فاختفت اللصيقة */
  overflow:visible;
}
#toolrail .tr-foot{display:flex;flex-direction:column;gap:6px;align-items:center;width:100%}

#toolrail .btn-icon{width:42px;height:42px;font-size:17px;flex:0 0 auto}
/* زرّ الحساب في العمود: الأفتار وحده */
#toolrail .btn-acct{padding:5px;gap:0;border-radius:50%}
#toolrail .btn-acct #acctName{display:none}

/* الاسم يظهر عند المرور — لصيقةٌ تخرج من العمود */
#toolrail [data-tip]{position:relative}
#toolrail [data-tip]::after{
  content:attr(data-tip);
  position:absolute;inset-inline-start:calc(100% + 10px);inset-block-start:50%;
  transform:translateY(-50%);
  white-space:nowrap;font-size:11.5px;font-weight:800;color:var(--txt);
  padding:5px 11px;border-radius:9px;
  background:rgba(10,13,30,.96);border:1px solid var(--line-2);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .14s;z-index:3;
}
#toolrail [data-tip]:hover::after{opacity:1}

/* السطر العلوي: بلا شعارٍ ولا أدوات ⇒ الاتصال يبدأ من أوّله */
#topbar .conn{margin-inline-start:0}


/* الشاشات الضيّقة: العمود يستلقي شريطاً أفقيّاً في أعلى الصفحة */
@media(max-width:860px){
  body{padding-inline-start:0}
  #toolrail{
    position:static;width:auto;flex-direction:row;gap:6px;
    padding:7px 12px;border-inline-end:0;
    border-bottom:1px solid var(--line);
    overflow-x:auto;scrollbar-width:none;
  }
  #toolrail::-webkit-scrollbar{display:none}
  #toolrail::after{inset:auto 0 0 0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,
      color-mix(in srgb,var(--p3) 55%,transparent) 30%,
      color-mix(in srgb,var(--p2) 55%,transparent) 70%,transparent)}
  #toolrail .brand{flex-direction:row;width:auto;gap:8px}
  #toolrail .brand-logo{width:32px;height:32px}
  #toolrail .brand-text b{font-size:15px}
  #toolrail .tools{flex-direction:row;margin:0 auto 0 0;width:auto;overflow:visible}
  #toolrail .tr-foot{flex-direction:row;width:auto}
  #toolrail .btn-icon{width:34px;height:34px;font-size:15px}
  /* اللصيقة تنزل تحت الزرّ بدل أن تخرج من جنبه */
  #toolrail [data-tip]::after{
    inset-inline-start:50%;inset-block-start:calc(100% + 7px);
    transform:translateX(-50%);
  }
}

/* الشريط الجانبي للإعدادات يقف عند حافّة عمود الأدوات لا فوقه */
@media(min-width:861px){
  #gdock{ right:var(--rail-w) !important }
  /* التنبيهات تخرج من جنب العمود لا من تحته */
  #toasts{ inset-inline-start:calc(var(--rail-w) + 18px) }
}

/* أيقونات مرسومة بدل الإيموجي — ترث لون الزرّ وحجمه ولا تختلف بين الأجهزة */
.ico{width:20px;height:20px;display:block;flex:0 0 auto}
#toolrail .btn-icon{color:var(--dim)}
#toolrail .btn-icon:hover{color:var(--txt)}
#toolrail .btn-icon.on{color:var(--star)}
#toolrail .btn-icon.on .ico{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--star) 60%,transparent))}
@media(max-width:860px){ .ico{width:17px;height:17px} }

/* ══════════════ لوحة المالك — النظرة والنقاط والبنرات ══════════════ */
.lg-tabs{flex-wrap:wrap}

/* ــ نظرة عامة ــ */
.ov-grid{
  display:grid;gap:9px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.ov-c{
  display:flex;flex-direction:column;gap:1px;padding:12px 13px;border-radius:15px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--line);
}
.ov-e{font-size:17px;line-height:1;margin-bottom:4px}
.ov-c b{font-size:21px;font-weight:900;letter-spacing:-.5px;color:var(--star)}
.ov-c i{font-style:normal;font-size:12px;font-weight:800;color:var(--txt)}
.ov-c u{text-decoration:none;font-size:10.5px;color:var(--dim-2)}
.ov-subs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 13px;border-radius:13px;margin-bottom:12px;
  background:var(--panel);border:1px solid var(--line);
}
.ov-subs > b{font-size:12px;font-weight:900;color:var(--dim)}
.ov-s{
  font-size:11.5px;font-weight:700;color:var(--dim);
  padding:3px 11px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);
}
.ov-s b{color:var(--txt);font-weight:900}
.ov-last{font-size:12px;font-weight:900;color:var(--dim);margin:4px 2px 6px}

/* ــ نقاط الناس ــ */
.lg-q{
  width:100%;font:inherit;font-size:13px;color:var(--txt);
  padding:10px 15px;border-radius:12px;margin-bottom:9px;
  background:var(--panel);border:1px solid var(--line);
}
.lg-q:focus{outline:none;border-color:var(--line-2);background:var(--panel-2)}
.pt-r{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:12px;border:1px solid transparent;
}
.pt-r:nth-child(odd){background:rgba(255,255,255,.022)}
.pt-r:hover{background:var(--panel-2);border-color:var(--line)}
.pt-r.hidden{display:none}
.pt-n{
  width:26px;flex:0 0 auto;text-align:center;font-size:11px;font-weight:900;color:var(--dim-2);
}
.pt-av{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:900;color:#0d1024;
  background:linear-gradient(140deg,var(--p1),var(--p2));
}
.pt-av img{width:100%;height:100%;object-fit:cover;display:block}
.pt-id{flex:1;min-width:0}
.pt-id b{display:block;font-size:13px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-id span{display:block;font-size:10.5px;color:var(--dim-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-b{
  width:34px;height:22px;flex:0 0 auto;border-radius:6px;
  background-size:cover;background-position:center;
  border:1px solid var(--line-2);
}
.pt-b.none{background:repeating-linear-gradient(45deg,
  rgba(255,255,255,.05) 0 4px,transparent 4px 8px);opacity:.5}
.pt-b.k-paid{box-shadow:0 0 0 1px rgba(46,190,140,.75)}
.pt-b.k-gift{box-shadow:0 0 0 1px rgba(245,205,71,.8)}
.pt-w{
  width:44px;flex:0 0 auto;text-align:center;font-size:12px;font-weight:800;color:var(--dim);
}
.pt-w i{display:block;font-style:normal;font-size:9px;color:var(--dim-2)}
.pt-s{
  min-width:60px;flex:0 0 auto;text-align:center;font-size:15px;font-weight:900;color:var(--star);
}

/* ــ البنرات ــ */
.bn-r{
  border-radius:13px;margin-bottom:7px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
}
.bn-r summary{
  display:flex;align-items:center;gap:11px;padding:9px 12px;cursor:pointer;list-style:none;
}
.bn-r summary::-webkit-details-marker{display:none}
.bn-r[open] summary{border-bottom:1px solid var(--line)}
.bn-im{
  width:56px;height:32px;flex:0 0 auto;border-radius:7px;
  background-size:cover;background-position:center;
  background-color:var(--surf-2);border:1px solid var(--line-2);
}
.bn-tx{flex:1;min-width:0}
.bn-tx > b{display:block;font-size:13px;font-weight:900}
.bn-tx > b em{font-style:normal;font-size:10px;color:var(--dim-2);font-weight:700}
.bn-sub{display:flex;align-items:center;gap:7px;margin-top:2px}
.bn-sub i{font-style:normal;font-size:10.5px;color:var(--dim-2)}
.bn-k{
  font-size:9.5px;font-weight:900;padding:2px 9px;border-radius:999px;
  background:rgba(160,170,255,.16);color:var(--star);
}
.bn-k.k-paid{background:rgba(46,190,140,.2);color:#7ee0b8}
.bn-k.k-gift{background:rgba(245,205,71,.2);color:#f0d68a}
.bn-c{width:52px;flex:0 0 auto;text-align:center}
.bn-c b{display:block;font-size:15px;font-weight:900;color:var(--txt)}
.bn-c i{font-style:normal;font-size:9.5px;color:var(--dim-2)}
.bn-who{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
.bn-w{
  font-size:11px;font-weight:700;color:var(--dim);
  padding:3px 11px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);
}
.bn-w.on{color:#0d1024;background:linear-gradient(120deg,var(--p1),var(--p2));border-color:transparent}

@media(max-width:640px){
  .pt-w{display:none}
  .pt-b{width:26px}
  .bn-c{width:44px}
}

/* لوحة المالك تحتاج عرضاً: جدولُ نقاطٍ بسبعة أعمدة لا يتّسع في ٦٢٠ */
.modal-box:has(.lg){max-width:min(1080px,95vw)}

/* المشغّل حين ينقصه ضغطة: يبرز في الزاوية بحدٍّ ذهبيٍّ ونبضةٍ خفيفة */
.mm-yt.ask{
  border-color:rgba(245,205,71,.6);
  box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 0 3px rgba(245,205,71,.18);
  animation:mmAsk 2.2s ease-in-out infinite;
}
@keyframes mmAsk{50%{box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 0 7px rgba(245,205,71,.09)}}
.mm-yt-tip b{display:block;font-size:12.5px}
.mm-yt-tip span{display:block;margin-top:2px;font-size:10.5px;font-weight:600;
  color:var(--dim);line-height:1.6}
@media (prefers-reduced-motion:reduce){ .mm-yt.ask{animation:none} }

/* لعبةٌ مفتوحةٌ للمالك وحده والناس يرونها صيانة */
.gcard.mine{opacity:1}
.gc-mine{
  position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:3;
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:900;padding:3px 10px;border-radius:999px;
  background:linear-gradient(120deg,rgba(245,205,71,.95),rgba(226,170,60,.95));
  color:#2b1c00;box-shadow:0 4px 14px rgba(245,205,71,.32);
}
.new-tag.mine-tag{background:rgba(245,205,71,.9);color:#2b1c00}

/* الكراسي: بطاقة «صوتٌ فقط» بدل مشغّل الفيديو على المسرح */
.mc-snd{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:15px;
  background:linear-gradient(120deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.mc-snd.hidden{display:none}
.mc-snd-tx b{display:block;font-size:14px;font-weight:900}
.mc-snd-tx span{display:block;font-size:11.5px;color:var(--dim-2)}
/* الموجات تتحرّك ما دام هناك صوت */
.mc-snd .mm-eq{display:flex;align-items:flex-end;gap:3px;height:22px;flex:0 0 auto}
.mc-snd .mm-eq i{
  width:4px;border-radius:2px;background:linear-gradient(180deg,var(--p3),var(--p2));
  animation:mcEq 1s ease-in-out infinite;
}
.mc-snd .mm-eq i:nth-child(1){height:40%;animation-delay:0s}
.mc-snd .mm-eq i:nth-child(2){height:85%;animation-delay:.16s}
.mc-snd .mm-eq i:nth-child(3){height:55%;animation-delay:.32s}
.mc-snd .mm-eq i:nth-child(4){height:70%;animation-delay:.48s}
@keyframes mcEq{50%{height:22%}}
@media (prefers-reduced-motion:reduce){ .mc-snd .mm-eq i{animation:none} }

/* ══════════════ الكراسي: حلقةٌ أكبر تُقرأ من بعيد ══════════════
   الشاشة بعيدةٌ في البثّ، و٥٦٠ بكسل تضيع فيها. نكبّر الحلبة وكل ما
   عليها — الأرقام والوجوه والكراسي — ونُلبس الأرضيّة عمقاً. */
.mc-arena{ width:min(100%, 96cqh, 860px) }
.mc-arena::before{
  inset:14%;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in srgb,var(--acc) 26%,transparent), transparent 68%),
    radial-gradient(circle at 50% 108%, rgba(0,0,0,.5), transparent 60%);
  border:2px dashed color-mix(in srgb,var(--acc) 34%,transparent);
  box-shadow:inset 0 0 70px color-mix(in srgb,var(--acc) 16%,transparent),
             0 18px 60px rgba(0,0,0,.45);
}
/* حلقةُ ضوءٍ خارجيّة تُحدّد الملعب */
.mc-arena::after{
  content:'';position:absolute;inset:7%;border-radius:50%;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--acc) 18%,transparent);
}

/* الكرسيّ ورقمه */
.mc-num{
  /* أكبرُ ممّا كان: يُقرأ من جوّالٍ يشاهد البثّ، ويتّسع لثلاث خانات */
  min-width:86px;height:86px;padding:0 18px;border-radius:22px;
  font-size:50px;
  box-shadow:0 8px 24px rgba(0,0,0,.62);
}
.mc-ic{font-size:36px}
.mc-seat-in{gap:5px}

/* الجالس على كرسيّه */
.mc-sit .av{width:58px;height:58px;font-size:26px;
  box-shadow:0 0 0 3px var(--ok),0 6px 18px rgba(0,0,0,.55)}
.mc-sit b{font-size:15px;max-width:118px}

/* المشّاؤون حول الحلقة */
.mc-w .av{width:54px;height:54px;font-size:24px}
.mc-w b{font-size:14px;max-width:104px}

/* القلب: العدّاد في الوسط */
.mc-core-n{font-size:clamp(38px,7cqh,64px)}
.mc-core-e{font-size:clamp(30px,5.4cqh,52px)}

/* السطر فوق الحلبة */
.mc-note{font-size:19px;min-height:30px}

@media(max-height:900px){
  .mc-arena{width:min(100%, 92cqh, 720px)}
  .mc-num{min-width:72px;height:72px;font-size:42px;padding:0 15px}
  .mc-ic{font-size:30px}
  .mc-sit .av,.mc-w .av{width:48px;height:48px;font-size:22px}
  .mc-note{font-size:16px;min-height:24px}
}
@media(max-width:700px){
  .mc-arena{width:min(100%, 88cqh, 460px)}
  .mc-num{min-width:58px;height:58px;font-size:34px;border-radius:16px;padding:0 12px}
  .mc-ic{font-size:25px}
  .mc-sit .av,.mc-w .av{width:40px;height:40px;font-size:18px}
  .mc-sit b,.mc-w b{font-size:12px;max-width:80px}
}

/* عدّاد الجولة التلقائيّة داخل زرّ «دوّر» */
.rt-cd{
  display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  margin-inline-start:7px;border-radius:8px;font-style:normal;
  font-size:13px;font-weight:900;color:#0d1024;
  background:rgba(255,255,255,.85);
}

/* ══════════════ شاشة الفائز: تملأ المسرح ولا تتكوّم في أعلاه ══════════════
   كانت عموداً بلا توسيطٍ رأسيّ، فيبقى تحتها فراغٌ أسودُ نصفَ الشاشة —
   والشاشة بعيدةٌ في البثّ فيبدو المسرح خاوياً. */
.winner{
  justify-content:center;
  min-height:min(100%, 62cqh);
  height:100%;
  gap:clamp(10px,1.6vh,18px);
  padding:clamp(10px,2vh,26px) 12px;
}
.winner .crown{font-size:clamp(56px,9vh,104px)}
.winner .wl{font-size:clamp(14px,2.1vh,21px);letter-spacing:.4px}
.winner .wn{font-size:clamp(30px,5.4vh,58px)}
.winner .pts{font-size:clamp(15px,2.3vh,23px);padding:clamp(7px,1.2vh,13px) clamp(18px,3vh,32px)}
/* بطاقة الفائز نفسها تكبر مع الشاشة */
.winner .pb-card.big{transform:scale(clamp(1, .55 + .55vh, 1.35));transform-origin:center}
/* هالةٌ خلفه — لا تُرى البطاقةُ وحيدةً في سواد */
.winner::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 46% at 50% 42%, rgba(255,215,110,.16), transparent 70%);
}
.winner{position:relative}
@media (prefers-reduced-motion:reduce){ .winner .crown{animation:none} }

/* ونفسها لشاشة «لا فائز» */
.hero{justify-content:center}

/* ══════════════ الكراسي: لوحة الجولة ══════════════
   ثلاثةُ أرقامٍ وحالة، تُقرأ من آخر الغرفة. الحلبة تحتها. */
.mc-hud{
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,12px);
  flex-wrap:wrap;margin-bottom:2px;
}
.mc-h{
  display:inline-flex;align-items:center;gap:7px;
  padding:clamp(5px,.9vh,9px) clamp(12px,1.8vh,20px);border-radius:999px;
  font-size:clamp(11px,1.6vh,15px);font-weight:800;color:var(--dim);
  background:rgba(12,15,34,.55);border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.mc-h i{font-style:normal;font-size:1.15em;line-height:1;font-family:var(--emoji)}
.mc-h.n b{
  font-size:clamp(17px,2.9vh,28px);font-weight:900;line-height:1;color:var(--txt);
  letter-spacing:-.5px;
}
.mc-h.hot{
  color:#f0d68a;background:rgba(245,205,71,.12);border-color:rgba(245,205,71,.35);
}
.mc-h.hot b{color:#ffdf8a}
/* الموسيقى تدور: نبضةٌ خفيفة تُعلم المشاهد أنّ الوقت يجري */
.mc-h.run{
  color:#8ef0b8;background:rgba(63,191,114,.12);border-color:rgba(63,191,114,.35);
  animation:mcRun 1.4s ease-in-out infinite;
}
@keyframes mcRun{50%{box-shadow:0 0 0 6px rgba(63,191,114,.07)}}
.mc-h.end{color:#f0b8d0;background:rgba(240,120,170,.12);border-color:rgba(240,120,170,.34)}
@media (prefers-reduced-motion:reduce){ .mc-h.run{animation:none} }

/* المسرح يملأ ما تحته بدل أن يترك فراغاً */
.mc-wrap{justify-content:flex-start}
.mc-stage,.mc-3d{flex:1;min-height:0;display:grid;place-items:center;width:100%}

@media(max-width:700px){
  .mc-hud{gap:5px}
  .mc-h{padding:4px 10px;font-size:10.5px}
  .mc-h.n b{font-size:15px}
}

/* تنبيه الحقيبة: بنرك لن يُرى ما لم تربط تيك توك */
.vw-warn{
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  margin:2px 0 14px;padding:13px 15px;border-radius:14px;
  background:rgba(245,205,71,.09);border:1px solid rgba(245,205,71,.34);
}
.vw-warn b{font-size:13.5px;font-weight:900;color:#f0d68a}
.vw-warn span{font-size:12px;line-height:1.8;color:var(--dim)}
.vw-warn u{text-decoration:none;font-weight:900;color:#f0d68a}
.vw-btn.sm{padding:7px 16px;font-size:12.5px;margin-top:2px}
.vw-worn.off{
  background:rgba(245,205,71,.14);color:#f0d68a;
  border:1px solid rgba(245,205,71,.34);font-size:10.5px;
}

/* بنر منحٍ يملكه صاحب الصفحة — لا يُقال له «يُمنح لناس خاصّة» وهو معه */
.tb-lk.mine{background:rgba(46,190,140,.92);color:#04231a}
.tb-lk.mine b{color:#04231a}

/* حالة الربط في صفحة الشخص عند المالك */
.ac-tt{display:block;font-size:11.5px;font-weight:800;color:#f0d68a;margin-top:2px}
.ac-tt.on{color:#8ef0b8}
.adm-warn{
  display:flex;flex-direction:column;gap:5px;margin-top:12px;
  padding:12px 14px;border-radius:14px;
  background:rgba(245,205,71,.09);border:1px solid rgba(245,205,71,.34);
}
.adm-warn b{font-size:13px;font-weight:900;color:#f0d68a}
.adm-warn span{font-size:11.5px;line-height:1.8;color:var(--dim)}
.adm-warn u{text-decoration:none;font-weight:900;color:#f0d68a}

/* معرّف تيك توك في قائمة الإدارة — به يُفرَّق بين حسابين بالاسم نفسه */
.adm-tt{
  display:inline-block;width:max-content;max-width:100%;align-self:flex-start;
  margin-top:3px;font-style:normal;
  font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px;
  color:#f0d68a;background:rgba(245,205,71,.12);
  border:1px solid rgba(245,205,71,.32);
}
.adm-tt.on{
  color:#8ef0b8;background:rgba(63,191,114,.12);
  border-color:rgba(63,191,114,.32);direction:ltr;unicode-bidi:isolate;
}

/* ══════════════ شاشة الطرد — «الشاشة الكاملة» ══════════════
   كلمةٌ ضخمة تُقرأ من آخر الغرفة، ثم من انطرد، ثم عدّاد الباقين،
   ثم شريطُ أسماءٍ على كلٍّ ✕ يطرده المذيع بيده. */
.ko-card.ko-full{
  gap:clamp(8px,2.2cqh,18px);
  /* تملأ عرض المسرح لا تنكمش على محتواها — هي «الشاشة الكاملة» */
  width:min(96cqw,1000px);max-width:min(96cqw,1000px);
}
.ko-word{
  position:relative;flex:none;
  font-size:clamp(34px,10cqh,104px);font-weight:900;line-height:1;
  letter-spacing:clamp(2px,1cqh,10px);
  color:transparent;
  background:linear-gradient(100deg,#fff 20%,
    color-mix(in srgb,var(--ko-c) 78%,#fff) 72%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 60px color-mix(in srgb,var(--ko-c) 40%,transparent);
  animation:koWord .5s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes koWord{from{opacity:0;transform:scale(1.45)}}
/* العدّاد: رقمٌ كبير وكلمةٌ صغيرة، لا سطرٌ نصّي */
.ko-card.ko-full .ko-left{
  display:inline-flex;align-items:baseline;gap:9px;flex:none;
  padding:clamp(4px,1.1cqh,9px) clamp(14px,2.6cqw,28px);border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.ko-card.ko-full .ko-left b{
  font-size:clamp(17px,3.6cqh,32px);font-weight:900;color:var(--star);
}
.ko-card.ko-full .ko-left span{font-size:clamp(10px,1.9cqh,16px);color:var(--dim)}

/* ــ شريط الطرد اليدويّ ــ */
.ko-kick{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;
  width:100%;flex:0 1 auto;min-height:0;
  padding:clamp(8px,1.6cqh,14px) clamp(10px,2cqw,18px);
  border-radius:clamp(12px,2.4cqh,20px);
  background:rgba(8,10,24,.42);border:1px solid var(--line);
  animation:koFade .4s .5s both;
}
@keyframes koFade{from{opacity:0;transform:translateY(10px)}}
.ko-kick-h{
  font-size:clamp(9px,1.5cqh,12px);font-weight:900;letter-spacing:2px;color:var(--dim-2);
  padding:2px 13px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.ko-kick-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(4px,.8cqh,7px);
  overflow-y:auto;max-height:26cqh;scrollbar-width:thin;
}
.ko-kc{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;
  padding:clamp(4px,.9cqh,7px) clamp(7px,1.2cqw,10px)
          clamp(4px,.9cqh,7px) clamp(10px,1.8cqw,14px);
  border-radius:999px;color:var(--txt);
  background:rgba(255,255,255,.07);border:1px solid var(--line-2);
  transition:background .15s,border-color .15s;
}
.ko-kc:hover{background:rgba(255,95,126,.2);border-color:rgba(255,95,126,.62)}
.ko-kn{
  width:clamp(16px,2.6cqh,21px);aspect-ratio:1;flex:0 0 auto;
  display:grid;place-items:center;border-radius:6px;
  font-size:clamp(9px,1.5cqh,11px);font-weight:900;color:#0d1024;background:var(--star);
}
.ko-kc b{font-size:clamp(10.5px,1.9cqh,14px);font-weight:800;white-space:nowrap}
.ko-kc i{
  font-style:normal;font-size:clamp(9px,1.5cqh,11px);font-weight:900;color:var(--dim-2);
  width:clamp(15px,2.4cqh,19px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:6px;
  background:rgba(255,255,255,.07);transition:.15s;
}
.ko-kc:hover i{color:#fff;background:#ff5f7e}
.ko-kmore{font-size:11px;color:var(--dim-2);align-self:center}

@media (prefers-reduced-motion:reduce){
  .ko-word,.ko-kick{animation-duration:.01ms !important}
}

/* ══════════════ شاشة الطرد — شكل «اللوحة» ══════════════
   المحتوى نفسه، لكن صاحب الدور والوقت والأزرار في عمودٍ جانبيّ،
   وشبكة الأسماء تأخذ العرض كلّه — تتّسع لعددٍ أكبر ويكبر كلٌّ منهم. */
@media(min-width:900px){
  .rt-pick.on.board{
    display:grid;
    grid-template-columns:clamp(240px,24vw,320px) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
    gap:14px 20px;
    /* الصفّ الأخير يتمدّد ليأخذ ما بقي: مع align-content:start كان
       ينكمش على محتواه فتنزل آخرُ بطاقةٍ تحت الشاشة. */
    align-content:stretch;
  }
  .rt-pick.on.board .rp-head{grid-column:1;grid-row:1;margin:0}
  .rt-pick.on.board .rp-task{grid-column:1;grid-row:2}
  .rt-pick.on.board .rp-foot{
    grid-column:1;grid-row:3;align-self:start;
    flex-direction:column;gap:12px;padding:0;
  }
  .rt-pick.on.board .rp-foot .rp-act{width:100%;justify-content:center}
  /* «مين ينطرد؟» مكرّرةٌ مع سطر المهمّة في العمود، وحذفُها يُطلق
     الشبكة لتأخذ ارتفاع الشاشة كلَّه بدل نصفه */
  .rt-pick.on.board .rp-label{display:none}
  .rt-pick.on.board .rp-grid{
    grid-column:2;grid-row:1 / -1;align-content:center;
    overflow-y:auto;max-height:none;
  }
  /* صاحب الدور في عمودٍ ضيّق: يقف رأسيّاً ولا ينضغط */
  .rt-pick.on.board .rp-who{flex-direction:column;text-align:center;gap:8px}
  .rt-pick.on.board .rp-tx{align-items:center}
}

/* ✕ الطرد اليدويّ على بطاقة اللاعب — للمذيع وحده */
.rp-c{position:relative}
.rp-x{
  position:absolute;inset-block-start:-8px;inset-inline-start:-7px;z-index:3;
  cursor:pointer;font:inherit;line-height:1;
  width:clamp(21px,2.6vh,28px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:9px;
  font-size:clamp(10px,1.4vh,13px);font-weight:900;color:var(--dim);
  background:rgba(12,15,34,.94);border:1px solid var(--line-2);
  opacity:0;transform:scale(.7);transition:.15s;
}
.rp-c:hover .rp-x,.rp-x:focus-visible{opacity:1;transform:none}
.rp-x:hover{color:#fff;background:#ff5f7e;border-color:#ff5f7e}
/* على الشاشات اللمسية لا مرور بالفأرة — فيبقى ظاهراً باهتاً */
@media(hover:none){ .rp-x{opacity:.55;transform:none} }

/* ══════════════ رسالةٌ على الشاشة ══════════════
   يكتبها المالك فتملأ الشاشة كلّها في الوسط — أينما كان الناظر:
   داخل لعبةٍ أو في المعرض أو في صفحته. تنطفئ وحدها بعد ثوانٍ
   أو بـ✕. طبقةٌ ثابتة فوق كل شيء إلا النوافذ المنبثقة. */
#screennote{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(139,122,214,.28), transparent 72%),
    rgba(6,8,20,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
#screennote.hidden{display:none}
/* حركةُ الدخول على الطبقة وحدها لا على البطاقة أيضاً: حركتان
   على عنصرين مختلفين لا تُعاد إحداهما دائماً عند إعادة العرض،
   فتبقى البطاقة على أوّل مشهدها — شفّافةً لا تُرى. */
/* forwards لا both: «both» تُمسك أوّل مشهدٍ قبل أن تبدأ الحركة،
   فإن عُرضت الرسالة مرّتين متتاليتين بقيت الطبقة شفّافةً لا تُرى. */
#screennote.in{animation:snBack .38s cubic-bezier(.2,1.3,.3,1) forwards}
/* الحركة تكبيرٌ لا تخفيت: لو تجمّدت (نافذةٌ في الخلفية مثلاً)
   بقيت الرسالة مرئيّةً على أي حال — وهي رسالةُ بثٍّ لا زينة. */
@keyframes snBack{from{transform:scale(.9)}}
.snote-in{
  position:relative;display:flex;align-items:center;gap:clamp(12px,2vh,22px);
  max-width:min(94vw,1100px);
  padding:clamp(20px,4vh,44px) clamp(24px,4.5vh,56px);
  border-radius:clamp(20px,3vh,34px);
  background:linear-gradient(120deg,rgba(139,122,214,.96),rgba(111,163,221,.96));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 90px rgba(139,122,214,.4);
}
#screennote b{
  font-size:clamp(28px,7.4vh,86px);font-weight:900;letter-spacing:-1px;color:#0d1024;
  line-height:1.2;white-space:pre-wrap;word-break:break-word;text-align:center;
  text-shadow:0 2px 14px rgba(255,255,255,.28);
}
.snote-x{
  position:absolute;inset-block-start:clamp(-14px,-1.6vh,-10px);
  inset-inline-start:clamp(-14px,-1.6vh,-10px);
  cursor:pointer;font:inherit;line-height:1;flex:0 0 auto;
  width:clamp(34px,4.6vh,52px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  font-size:clamp(15px,2.4vh,26px);font-weight:900;color:#0d1024;
  background:#fff;border:2px solid rgba(139,122,214,.5);
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:.15s;
}
.snote-x:hover{transform:scale(1.1);background:#ffe9ee}

.sn-in{
  width:100%;font:inherit;font-size:15px;color:var(--txt);
  padding:12px 16px;border-radius:13px;margin:4px 0 12px;
  background:var(--panel);border:1px solid var(--line-2);
}
.sn-in:focus{outline:none;border-color:var(--star)}

@media (prefers-reduced-motion:reduce){ #screennote{animation:none} }

/* ══════════════════════════════════════════════════════════════
   🪑 الكراسي — هويّةٌ بصريّة خاصّة بها وحدها
   قاعةٌ خشبيّةٌ دافئة تحت ضوءٍ مسرحيّ، لا لوحةٌ زرقاء كبقيّة
   الألعاب. الأرضيّة دائرةٌ مضيئة، والكراسي عليها كأنّها حقيقيّة.
   ══════════════════════════════════════════════════════════════ */
body[data-lay="lane"] #stage:has(.mc-wrap){
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(211,160,94,.16), transparent 62%),
    radial-gradient(90% 70% at 50% 112%, rgba(20,12,6,.55), transparent 60%),
    linear-gradient(180deg, #171326 0%, #120f1f 55%, #0d0b16 100%);
}
/* عمودُ ضوءٍ ينزل على الحلبة */
.mc-wrap::before{
  content:'';position:absolute;inset-block-start:-6%;inset-inline:22%;height:70%;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,
    rgba(255,226,166,.16), rgba(255,226,166,.05) 45%, transparent 78%);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter:blur(2px);
}
.mc-wrap > *{position:relative;z-index:1}

/* الأرضيّة: خشبٌ دافئ لا دائرةٌ بنفسجيّة */
.mc-arena::before{
  background:
    radial-gradient(circle at 50% 34%, rgba(255,214,150,.22), transparent 66%),
    conic-gradient(from 0deg,
      rgba(150,102,58,.30), rgba(96,62,34,.30) 12%, rgba(150,102,58,.30) 25%,
      rgba(96,62,34,.30) 37%, rgba(150,102,58,.30) 50%, rgba(96,62,34,.30) 62%,
      rgba(150,102,58,.30) 75%, rgba(96,62,34,.30) 87%, rgba(150,102,58,.30) 100%),
    radial-gradient(circle at 50% 108%, rgba(0,0,0,.55), transparent 58%);
  border:2px solid rgba(211,160,94,.34);
  box-shadow:inset 0 0 90px rgba(211,160,94,.14),
             inset 0 -30px 60px rgba(0,0,0,.4),
             0 26px 70px rgba(0,0,0,.5);
}
.mc-arena::after{
  border:1px solid rgba(211,160,94,.18);
  box-shadow:0 0 46px rgba(211,160,94,.12);
}
/* حلقةٌ ذهبيّة تنبض ما دامت الموسيقى تدور */
.mc-arena.spin::after{animation:mcGlow 1.6s ease-in-out infinite}
@keyframes mcGlow{
  50%{box-shadow:0 0 78px rgba(255,214,150,.3);border-color:rgba(255,214,150,.45)}
}

/* الكرسي: رقمٌ خشبيّ لا حبّةٌ بنفسجيّة */
.mc-num{
  color:#2b1c08;
  background:linear-gradient(150deg,#f0d19a,#d3a05e 55%,#b07f42);
  box-shadow:0 7px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45);
  border:1px solid rgba(255,235,200,.35);
}
.mc-seat.busy .mc-num,.mc-seat.ok .mc-num{
  background:linear-gradient(150deg,#a8f0cd,#4fbf8a 60%,#2e9c6b);color:#04231a;
}
.mc-seat.free .mc-num{
  background:linear-gradient(150deg,#6b6f80,#474b59);color:#0d0f16;opacity:.6;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
/* الكرسيّ الفارغ يلمع لمحةً — يقول «تعال» */
.mc-seat:not(.busy):not(.ok) .mc-ic{
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(211,160,94,.5));
}

/* الجالس: طوقٌ ذهبيّ لا أخضر باهت */
.mc-sit .av{box-shadow:0 0 0 3px #f0d19a, 0 7px 20px rgba(0,0,0,.6)}
.mc-sit b{text-shadow:0 2px 8px rgba(0,0,0,.9)}

/* المشّاؤون: ظلٌّ تحتهم يوحي أنّهم يمشون على أرض */
.mc-w .av{box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 8px 16px rgba(0,0,0,.55)}

/* القلب: عدّادٌ في قرصٍ خشبيّ */
.mc-core{
  background:radial-gradient(circle at 50% 32%, rgba(255,226,166,.14), transparent 68%);
  border-radius:50%;
}
.mc-core-n{
  color:transparent;
  background:linear-gradient(160deg,#fff 18%,#f0d19a 62%,#d3a05e);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 40px rgba(240,209,154,.35);
}

/* لوحة الجولة بلون اللعبة */
.mc-h.hot{color:#f0d19a;background:rgba(211,160,94,.14);border-color:rgba(211,160,94,.4)}
.mc-h.hot b{color:#ffe2a6}

/* بطاقة «صوتٌ فقط» بلون القاعة */
.mc-snd{
  background:linear-gradient(120deg,rgba(211,160,94,.14),rgba(255,255,255,.02));
  border-color:rgba(211,160,94,.3);
}
.mc-snd .mm-eq i{background:linear-gradient(180deg,#f0d19a,#d3a05e)}

@media (prefers-reduced-motion:reduce){ .mc-arena.spin::after{animation:none} }

/* ══════════════ الكراسي: تخطيطٌ ثابت لا يتداخل ══════════════
   صفوفٌ محجوزة: لوحةُ الجولة، ثم السطر، ثم الحلبة تأخذ ما بقي.
   كلٌّ في صفّه فلا يزحف أحدٌ على أحد مهما تبدّل المحتوى، والحلبة
   تصغر بدل أن تفيض. */
.mc-wrap{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  align-items:start;justify-items:center;
  gap:clamp(6px,1.2vh,12px);
  height:100%;min-height:0;overflow:hidden;
}
.mc-hud{grid-row:1;margin:0}
.mc-note{grid-row:2;margin:0;display:grid;place-items:center;width:100%}
.mc-stage,.mc-3d{
  grid-row:3;width:100%;height:100%;min-height:0;
  display:grid;place-items:center;overflow:hidden;
}
/* الحلبة لا تتجاوز الصفّ المتاح لها */
.mc-arena{max-height:100%;max-width:100%}
/* شاشة الاستعداد داخل صفّها لا فوق غيرها */
.mc-ready,.mc-ready-yt{
  width:100%;max-width:min(94%,520px);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,16px);
}
/* طبقة «من انطرد» تغطّي الحلبة وحدها لا الصفوف فوقها */
.mc-out{grid-row:3;align-self:stretch;justify-self:stretch}

/* ══════════════════════════════════════════════════════════════════════
   الجوّال بالطول — جسم اللعبة يسع الشاشة

   المسرح صار يسعها بعد إصلاح الجذر، لكنّ ما بداخله بقي أطول منه:
   سؤالٌ بخطّ ٢٨ في ثلاثة أسطر وأربعةُ خيارات بحشوٍ واسع ⇒ ٧٤ بكسلاً
   خارج الحدّ، فلا يرى المشاهد إلا ثلاثة خيارات. نُنحّف ما ليس هو
   اللعبة، وبـimportant لأنّ قواعد كل لعبةٍ أخصُّ من هذه.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  body.playing .g-wrap{padding:8px 9px !important;gap:7px !important}
  body.playing .g-top{padding:0 !important;min-height:0 !important}
  body.playing .g-sub{font-size:12px !important}
  body.playing .g-how{padding:5px 12px !important;font-size:11.5px !important;
    margin:0 !important}
  body.playing .g-body{gap:8px !important}
  body.playing .w-tag{padding:9px 13px !important;
    font-size:clamp(15px,4.6vw,19px) !important;line-height:1.4 !important}
  body.playing .opts{gap:6px !important}
  body.playing .opt{padding:8px 11px !important;min-height:0 !important;
    font-size:13.5px !important}
}

/* ══════════════════════════════════════════════════════════════════════
   شاشةٌ قصيرة والعرضُ واسع — الآيباد بالعرض (١٠٢٤×٧٦٨)

   قشرة المسرح رُسمت لشاشةٍ طويلة: تحجز ٦٢ من أعلى و١٥٢ من أسفل،
   وفوقهما ٩٠ لشريط ختم القناة. على شاشةٍ ارتفاعها ٧١٩ لا يبقى
   للّعبة إلا ٤١٥ — والسؤال وخياراته الأربعة يحتاجون ٤٧٧، فيُقصّ
   آخرها ويظنّ المذيع أنّ الأسئلة «تختفي».

   والحجزُ السفليّ نفسه مبالغٌ فيه: رصيف الأدوات ٥٠ بكسلاً على بعد
   ١٠ من الحافّة، أي ٦٠ — والباقي فراغٌ مقصود لشاشةٍ فسيحة. هنا
   نردّه إلى قدر ما يشغله فعلاً، ونُنزل البنر معه فلا يغطّي اللعبة.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:981px) and (max-height:900px){
  body.shell-ok.shell-cinema #stage,
  body.shell-ok.shell-cinema.playing #chatpane{inset-block:58px 102px}
  body.shell-ok.shell-cinema #banner{inset-block-end:108px}
}
@media (min-width:981px) and (max-height:800px){
  body.shell-ok.shell-cinema #stage,
  body.shell-ok.shell-cinema.playing #chatpane{inset-block:54px 84px}
  body.shell-ok.shell-cinema #banner{inset-block-end:90px}
  /* الختم يحجز بقدر ارتفاعه (markTop يقيسه) — فتنحيفه يوسّع المسرح */
  #brandmark{padding:6px 18px 6px 10px;gap:9px}
  #brandmark b{font-size:clamp(19px,3vh,26px)}
  #brandmark i{font-size:clamp(11px,1.7vh,14px)}
  .bm-logo{width:clamp(34px,4.8vh,44px)}
}

/* وشاشةٌ قصيرةٌ جدّاً مهما كان عرضها: ننحّف جسم اللعبة أيضاً */
@media (max-height:820px) and (min-width:641px){
  body.playing .g-wrap{gap:9px}
  body.playing .g-body{gap:11px}
  body.playing .w-tag{padding:11px 16px}
  body.playing .opt{padding:9px 13px;min-height:0}
  body.playing .opts{gap:8px}
}

/* ══════════════════════════════════════════════════════════════════════
   الجوّال بالعرض (٨١٢×٣٧٥) — أقسى الحالات

   قبل أن تبدأ اللعبة تأكل الأطرافُ ٩٤ بكسلاً: شريط الأدوات ٤٦
   وشريط الحساب ٤٨. ثم يلتفّ شريط المسرح سطرين (٩٣)، ويحجز ختم
   القناة ٦٨ — فلا يبقى للّعبة من ٣٧٥ إلا ٩٣، ويهبط المقياس إلى
   حدّه الأدنى فلا يُقرأ شيء.

   فنُخلي لها ما لا تحتاجه وهي تعمل: حقل الاتصال بالبثّ يُملأ قبل
   البدء لا أثناءه، وشريط المسرح يُردّ سطراً واحداً، والختم ينكمش.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:980px) and (max-height:540px){
  body.playing #topbar{display:none !important}
  body.playing #toolrail{padding:3px 8px !important;gap:5px !important}
  body.playing #toolrail .btn-icon{width:28px !important;height:28px !important;
    font-size:14px !important}

  body.playing #stageBar{flex-wrap:nowrap !important;padding:4px 7px !important;
    gap:5px !important}
  body.playing #stageBar .sb-right,
  body.playing #stageBar .sb-mid,
  body.playing #stageBar .sb-left{flex-wrap:nowrap !important;min-width:0}
  body.playing #stageBar .btn-icon{width:27px !important;height:27px !important;
    font-size:13px !important}
  body.playing #stageTitle{font-size:11.5px !important;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  body.playing #stageIcon{width:22px !important;height:22px !important;
    border-radius:8px !important}
  body.playing .sb-stat{padding:1px 5px !important;font-size:10px !important}

  body.playing #brandmark{padding:3px 11px 3px 6px !important;gap:6px !important}
  body.playing #brandmark b{font-size:13px !important}
  body.playing #brandmark i{font-size:9px !important}
  body.playing .bm-logo{width:22px !important;height:22px !important}

  body.playing .g-wrap{padding:5px 7px !important;gap:5px !important}
  body.playing .g-top{display:none !important}
  body.playing .g-body{gap:6px !important}
  body.playing .w-tag{padding:6px 11px !important;font-size:14px !important;
    line-height:1.3 !important}
  /* بالعرض المساحةُ أفقيّة لا رأسية: قاعدةُ ٨٢٠ ردّت الخيارات
     عموداً واحداً فصارت أربعة أسطر تفيض — ونحن هنا أوسعُ ممّا نحن
     أطول، فنُعيدها عمودين */
  body.playing .opts{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:5px !important;max-width:none !important}
  body.playing .opt{padding:5px 9px !important;min-height:0 !important;
    font-size:12px !important}
}

/* ══════════════════════════════════════════════════════════════════════
   الآيباد — الروليت: عجلةٌ تسع المسرح بلا تصغير، ولوحةٌ أهدأ

   ١) «الكلام يتزوم وهي تدور»: العجلة والأسماء عليها طبقاتٌ مركَّبة
      (will-change) تعيش داخل .g-wrap وعليه scale كسريّ من الملاءمة
      التلقائيّة. وWebKit على الآيباد يرسم الطبقة مرّةً بمقياسِ أبيها
      وقتَ ترقيتها، فإذا تبدّل المقياس بعدها مطَّ الصورةَ المخزّنة ثمّ
      أعاد رسمها — فيرى المشاهد الاسمَ يكبر ويصغر في أثناء الدوران.
      فنُصغّر العجلة قدرَ المسرح حتى تستقرّ الملاءمة على ١، فلا مقياس
      كسريّ ولا إعادة رسم.

   ٢) ولا نُبقي الطبقات مرقّاةً بلا داعٍ: ثلاثون اسماً = ثلاثون طبقة
      تحملها الذاكرة طوال الجولة، وWebKit يُسقط بعضها تحت الضغط
      فيُعيد رسمها فجأةً — وهذا وحده يكفي للارتجاف. نرقّيها في أثناء
      الدوران وحده.
   ══════════════════════════════════════════════════════════════════════ */
.wheel-spin{will-change:auto}
.wm-in{will-change:auto}
.wheel-spin.spinning,
.wheel-spin.spinning .wm-in{will-change:transform}

/* ولا نفرض على العجلة عرضاً هنا: مقاسها يحكمه استعلامُ حاويتها
   (96cqh من .wheel2d) وهو أعلى أسبقيّةً، فتملأ ما يتاح لها من
   ارتفاعٍ من نفسها. وبعد إصلاح القياس أعلاه صار المتاحُ صحيحاً. */

/* ── لوحة الاختيار (الموقّت والطرد): أصغر على شاشة الآيباد ──
   المقاسات مربوطةٌ بـvh، وعلى ٧٦٨ تقع في وسط المدى فتخرج البطاقة
   ٢٠٧×١٥٢ والرقم ٤٥ والاسم ٣٤ — تملأ المسرح وتُتعب العين. نردّها
   نحو الخُمس، ويبقى الاسم والرقم أكبر ممّا يُقرأ على شاشة البثّ. */
@media (min-width:900px) and (max-height:840px){
  .rt-pick.on.board{
    grid-template-columns:clamp(198px,20vw,258px) minmax(0,1fr);
    gap:11px 15px;
  }
  .rp-grid{
    --rp-av:clamp(52px,7.2vh,86px); --rp-nm:clamp(21px,3.4vh,38px);
    --rp-n:clamp(27px,4.5vh,50px);  --rp-w:clamp(160px,20.5vh,248px);
    gap:9px;padding:10px;
  }
  .rp-grid.d2{--rp-av:clamp(46px,6.4vh,76px);--rp-nm:clamp(19px,3vh,34px);
    --rp-n:clamp(24px,4vh,44px);--rp-w:clamp(142px,18.5vh,220px);gap:8px}
  .rp-grid.d3{--rp-av:clamp(34px,4.5vh,54px);--rp-nm:clamp(14px,2.2vh,21px);
    --rp-n:clamp(18px,2.8vh,28px);--rp-w:clamp(106px,13vh,148px);gap:7px;padding:8px}
  .rp-grid.d4{--rp-av:clamp(26px,3.4vh,40px);--rp-nm:clamp(12px,1.8vh,17px);
    --rp-n:clamp(15px,2.3vh,22px);--rp-w:clamp(88px,10.5vh,120px);gap:5px;padding:7px}
  .rp-c{padding:9px 7px 8px;gap:4px}

  /* العمود الجانبي معه — وإلا صار أطول من الشبكة التي جنبه */
  .rt-pick.on.board .rp-who .av.xl{width:74px;height:74px;font-size:33px}
  .rt-pick.on.board .rp-num{font-size:23px}
  .rt-pick.on.board .rp-task{font-size:16px;padding:9px 13px}
  .rt-pick.on.board .rp-act{padding:9px 13px;font-size:14px}
  .rt-pick.on.board .rp-timer{width:76px}
  .rt-pick.on.board .rt-ring{width:76px;height:76px}
}


/* ══════════════════════════════════════════════════════════════════════
   شاشة الفوز — «الشريط»

   شكلٌ واحد لكل الألعاب. ثلاثةُ أشياء تصنعه: خلفيّةٌ تتنفّس بألوان
   اللعبة، وحافّةٌ متدرّجة لا خطٌّ ميّت، وامتلاءٌ يقول من بلغ كم.
   والبنر هو البطل: بنرُ الفائز يملأ خلفَ الشريط، وبنرُ كلٍّ من
   الباقين يملأ حبّته — يُقرأ من PB.skin نفسه الذي تقرأ منه البطاقة
   العادية، فلا يظهر لاعبٌ ببنرٍ هنا وبلا بنرٍ هناك.
   ══════════════════════════════════════════════════════════════════════ */
.wstrip{
  position:relative;overflow:hidden;
  width:100%;justify-content:center;
  gap:clamp(8px,1.5vh,16px);
}
/* ثلاثُ هالاتٍ تنزلق ببطء بلون اللعبة، وحجابٌ يُظلم الأطراف فلا
   تبتلع الألوانُ النصَّ ولا تُتعب العين على شاشة البثّ */
/* في المعمل كانت الهالات تقع على لوحٍ ملوّن، وفي المسرح تقع على
   سوادٍ شبه خالص — فبَهَتَت. نضع تحتها غسلةً ثابتة ونرفع كثافتها
   حتى يصير المشهد كما اعتُمد. */
.wstrip{
  background:
    radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 64%),
    linear-gradient(170deg,#171339,#0b0d24);
}
.wstrip::before{
  content:'';position:absolute;inset:-14%;pointer-events:none;z-index:0;
  background:
    radial-gradient(56% 42% at 20% 16%,color-mix(in srgb,var(--acc) 72%,transparent),transparent 64%),
    radial-gradient(50% 38% at 84% 24%,rgba(255,215,110,.34),transparent 68%),
    radial-gradient(72% 54% at 50% 106%,color-mix(in srgb,var(--p1) 62%,transparent),transparent 66%);
  filter:blur(8px);
  animation:wsAur 26s ease-in-out infinite alternate;
}
@keyframes wsAur{
  0%  {transform:translate3d(-2%,-1%,0) scale(1.04)}
  50% {transform:translate3d(2.5%,1.5%,0) scale(1.12)}
  100%{transform:translate3d(-1%,1%,0) scale(1.06)}
}
/* حجابٌ خفيفٌ جدّاً: هالاتُ الشفق مواضعُها عند الأطراف، والحجابُ
   يُظلم الأطراف — فكان يأكلها كلَّها ويعود المشهد سواداً. يكفي منه
   ما يمنع الوهجَ من ملامسة حافّة المسرح، والشريطُ نفسه صار معتماً
   فلا يحتاج إلى تعتيمٍ خلفه ليُقرأ. */
.wstrip::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(88% 74% at 50% 46%,transparent 62%,rgba(5,7,20,.34) 100%);
}
.wstrip > *{position:relative;z-index:1}

/* ── الشريط: الفائز ── */
.ws-hero{
  position:relative;overflow:hidden;flex:0 0 auto;
  width:min(94%,900px);
  display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  padding:clamp(12px,2.4vh,26px) clamp(16px,2.6vw,32px);
  border-radius:clamp(16px,2.6vh,26px);border:0;
  /* معتمٌ لا شفّاف: الشفافيّة فوق أرضيّةٍ ملوّنة أذابت التباين
     فبَهَت الاسمُ والحافّة معاً */
  background:linear-gradient(105deg,
    color-mix(in srgb,var(--pb-acc) 34%,#12142f),
    #0a0c22 62%);
  box-shadow:0 26px 64px rgba(0,0,0,.6),
             inset 0 0 0 1px rgba(255,255,255,.05),
             0 10px 46px -14px rgba(255,215,110,.55);
  animation:pop .5s cubic-bezier(.2,1.5,.4,1);
}
/* بنر الفائز صورةً خلف الشريط — الصورة نفسها التي يلبسها في بطاقته */
.ws-hero .ws-pbg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* البنر خامةٌ لا صورةٌ تُنافس: بنراتُ اللاعبين تأتي بأيّ لونٍ وأيّ
   سطوع، فلو تركناها كما هي بَهَت الاسمُ فوق البنر الفاتح ولم يُقرأ
   على شاشة البثّ. فنُخفّف حدّتها ونُلبسها حجاباً يشتدّ حيث يقع
   النصّ — يبقى البنر ظاهراً معروفاً، ويبقى الاسمُ مقروءاً دائماً. */
.ws-hero.has-banner .ws-pbg{
  background:var(--own-img) center/cover no-repeat;
  opacity:.5;filter:saturate(1.2) blur(1.5px);
}
/* حجابٌ قاعدتُه ثابتة ثمّ يشتدّ نحو النصّ: البنراتُ تأتي بأيّ سطوع،
   ولو جعلنا الحجابَ متدرّجاً وحده لبَهَت الاسمُ فوق بنرٍ فاتحِ الطرف */
.ws-hero.has-banner .ws-pbg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,9,24,.72),rgba(7,9,24,.94) 62%);
}
/* الحافّة تدرّجٌ لونيّ: إطارٌ بخلفيّةٍ متدرّجة يُفرَّغ جوفه بقناعين
   متعاكسين، فيبقى الخطُّ وحده وهو يتلوّن */
.ws-hero::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:linear-gradient(115deg,
    rgba(255,215,110,.92),
    color-mix(in srgb,var(--pb-acc) 78%,transparent) 34%,
    rgba(255,255,255,.06) 58%,
    rgba(255,215,110,.62));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:3;
}
/* لمعةٌ تعبر مرّة كل بضع ثوانٍ — إشارةُ «هذا هو الفائز» بلا صخب */
.ws-sh{position:absolute;inset:0;overflow:hidden;border-radius:inherit;
  pointer-events:none;z-index:2}
.ws-sh::after{
  content:'';position:absolute;inset-block:-45%;width:34%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.17),transparent);
  transform:skewX(-16deg);animation:wsShine 5.2s ease-in-out .6s infinite;
}
@keyframes wsShine{0%{inset-inline-start:-42%}58%,100%{inset-inline-start:112%}}
/* شريطُ تقدّمٍ عند القدم: يمتلئ مرّةً عند الظهور — حركةٌ واحدة
   تقول «اكتمل» بلا كلام، وتُثبّت العينَ على الفائز */
.ws-bar{
  position:absolute;inset-inline:0;inset-block-end:0;height:3px;z-index:3;
  background:rgba(255,255,255,.06);overflow:hidden;
}
.ws-bar::after{
  content:'';position:absolute;inset-block:0;inset-inline-start:0;width:100%;
  background:linear-gradient(90deg,color-mix(in srgb,var(--pb-acc) 85%,#fff),var(--star));
  box-shadow:0 0 16px rgba(255,215,110,.75);
  animation:wsFill 1.4s cubic-bezier(.2,.9,.25,1) .18s both;
}
@keyframes wsFill{from{width:0}}

.ws-hero .av{position:relative;z-index:1}
.ws-hero .av.xl{
  width:clamp(56px,12vh,104px);height:clamp(56px,12vh,104px);
  font-size:clamp(26px,5.6vh,48px);
}
.ws-tx{position:relative;z-index:1;flex:1;min-width:0;text-align:start}
.ws-lb{
  display:block;font-style:normal;font-weight:900;color:var(--star);
  font-size:clamp(10px,1.7vh,15px);letter-spacing:1.4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ws-nm{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:clamp(21px,4.6vh,46px);font-weight:900;letter-spacing:-1px;line-height:1.14;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
.ws-nm > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-sub{
  display:block;color:var(--dim-2);font-weight:800;
  font-size:clamp(10px,1.6vh,14px);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ws-pts{
  position:relative;z-index:1;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  padding:clamp(5px,1vh,10px) clamp(12px,1.8vw,22px);border-radius:999px;
  font-size:clamp(13px,2.2vh,20px);font-weight:900;color:var(--star);
  background:linear-gradient(140deg,rgba(255,215,110,.24),rgba(255,215,110,.08));
  border:1px solid rgba(255,215,110,.55);
  box-shadow:0 8px 24px -8px rgba(255,215,110,.7);
}

.ws-lab{color:var(--dim);font-weight:800;letter-spacing:1px;
  font-size:clamp(10px,1.7vh,15px)}

/* ── صفُّ الباقين: حافّتاه تذوبان ──
   صفٌّ واحد لا يلتفّ، فإن زاد عددُهم عن العرض خفتَ طرفاه بدل أن
   يُقطعا قطعاً حادّاً — ويفهم المشاهد أنّ خلفه بقيّة */
.ws-rest{
  display:flex;flex-wrap:nowrap;align-items:center;
  justify-content:safe center;gap:clamp(6px,.9vw,10px);
  width:min(94%,900px);overflow:hidden;
  padding-inline:clamp(14px,3vw,42px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.ws-p{
  position:relative;overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  padding:5px 12px 5px 6px;border-radius:999px;
  font-weight:900;font-size:clamp(10px,1.7vh,14px);
  border:1px solid transparent;
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--pb-acc) 20%,#171b3f),
                    #0d1030) padding-box,
    linear-gradient(125deg,color-mix(in srgb,var(--pb-acc) 80%,transparent),
                    color-mix(in srgb,var(--pb-acc) 14%,transparent) 52%,
                    rgba(255,255,255,.1)) border-box;
}
/* بنرُ اللاعب داخل حبّته */
.ws-p .ws-pbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ws-p.has-banner .ws-pbg{background:var(--own-img) center/cover no-repeat;
  opacity:.6;filter:blur(1px)}
.ws-p.has-banner .ws-pbg::after{content:'';position:absolute;inset:0;
  background:rgba(7,9,24,.74)}
/* وامتلاءٌ بقدر ما بلغ من نقاط الفائز — نُحرّك المقياس لا العرض:
   العرضُ في keyframes لا يقرأ var بثبات، والمقياس يجري على المُركِّب */
.ws-p .ws-fl{
  position:absolute;inset-block:0;inset-inline-start:0;width:var(--ws-f,0%);
  z-index:0;transform-origin:right center;
  background:linear-gradient(-90deg,color-mix(in srgb,var(--pb-acc) 58%,transparent),
                             color-mix(in srgb,var(--pb-acc) 10%,transparent));
  animation:wsGrow 1.1s cubic-bezier(.2,.9,.3,1) .3s both;
}
@keyframes wsGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ws-p > *:not(.ws-fl):not(.ws-pbg){position:relative;z-index:1}
.ws-p b{max-width:11ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-p u{text-decoration:none;color:var(--star)}
.ws-p .ws-rk{
  display:grid;place-items:center;font-style:normal;
  min-width:20px;height:20px;border-radius:7px;
  background:rgba(6,8,24,.66);color:var(--dim-2);font-size:11px;
}
.ws-p .av.xs{width:clamp(20px,3.2vh,28px);height:clamp(20px,3.2vh,28px)}

/* ── ما فاز أحد: الشكل نفسه لا شكلٌ ثانٍ ── */
.wstrip.none{align-items:center}
.ws-em{font-size:clamp(40px,8vh,84px);line-height:1}
.ws-none{
  font-size:clamp(26px,5.4vh,52px);font-weight:900;letter-spacing:-1px;
  background:linear-gradient(100deg,#fff 25%,var(--star));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

@media (prefers-reduced-motion:reduce){
  .wstrip::before,.ws-sh::after,.ws-bar::after,.ws-p .ws-fl{animation:none}
}

/* الجوّال: الشريط يقف عموداً فلا ينضغط الاسم */
@media (max-width:640px){
  .ws-hero{flex-wrap:wrap;justify-content:center;text-align:center}
  .ws-tx{flex:1 0 100%;text-align:center;order:3}
  .ws-nm{justify-content:center}
  .ws-pts{order:2}
}

/* بقيّةُ الواصلين عدداً لا أسطراً — انظر التعليق في wordrace.js */
.rc-more{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:5px 14px;border-radius:999px;margin-top:2px;
  font-size:clamp(11px,1.6vh,14px);font-weight:800;color:var(--dim-2);
  background:rgba(255,255,255,.05);border:1px dashed var(--line);
}

/* ══════════════════════════════════════════════════════════════════════
   الروليت المخفي — لوحةُ الأعلام

   القرار أعمى: لا اسمَ ولا أفتار، عَلَمٌ ورقمٌ فقط. فالبطاقة تتغيّر
   عمّا في الروليت العادي: العَلَم يأخذ مكان الأفتار ويكبر ليُقرأ من
   بعيد، واسمُ الدولة تحته صغيراً — والاسمُ الحقيقيّ لا يُكتب في أيّ
   موضع، ولا في تلميحة المتصفّح، وإلا كشفه مرورُ المؤشّر.
   ══════════════════════════════════════════════════════════════════════ */
.rp-grid.rx .rx-c{
  --rx-fl:clamp(38px,6.4vh,74px);
  background:linear-gradient(160deg,color-mix(in srgb,var(--pb-acc) 22%,var(--surf-2)),var(--panel));
}
.rp-grid.rx.d2 .rx-c{--rx-fl:clamp(33px,5.4vh,62px)}
.rp-grid.rx.d3 .rx-c{--rx-fl:clamp(25px,3.8vh,44px)}
.rp-grid.rx.d4 .rx-c{--rx-fl:clamp(20px,3vh,34px)}
.rx-fl{
  display:block;width:calc(var(--rx-fl) * 1.5);aspect-ratio:3/2;
  border-radius:7px;overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16);
  transition:transform .25s cubic-bezier(.2,1.3,.4,1);
}
.rx-fl img{width:100%;height:100%;object-fit:cover;display:block}
.rp-grid.rx .rx-c:hover .rx-fl{transform:scale(1.1) rotate(-4deg)}
.rp-grid.rx .rx-c > b{
  font-size:calc(var(--rp-nm) * .62);color:var(--dim);font-weight:800;
  letter-spacing:.2px;
}
.rp-grid.rx .rx-c.hit .rx-fl{animation:rxHit .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes rxHit{40%{transform:scale(1.28) rotate(6deg)}}

/* ══════════════════════════════════════════════════════════════════════
   شاشة الانتظار — تملأ المسرح ولا تكون سطراً في وسطه

   الانتظار أطولُ ما في اللعبة: الناس تكتب وتنضمّ والمذيع يتكلّم. فلا
   يليق أن تكون كلمةً صغيرة في فراغ. نجعلها مشهداً: عَلَمٌ يمرّ خلف
   كل شيء، ونداءُ الانضمام كبيرٌ في الوسط، وعدّادٌ حيّ، وشريطُ أعلامٍ
   يتحرّك في الأسفل يُنبئ بما ينتظرهم.
   ══════════════════════════════════════════════════════════════════════ */
#stage[data-game="roulettex"] .lobby{
  position:relative;overflow:hidden;
  justify-content:center;
  background:
    radial-gradient(72% 54% at 50% -6%,color-mix(in srgb,var(--acc) 34%,transparent),transparent 64%),
    linear-gradient(170deg,#161239,#0a0c22);
}
/* أعلامٌ شاحبة تنزلق في الخلف — حركةٌ بلا ضجيج */
#stage[data-game="roulettex"] .lobby::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.12;
  background-image:url('../img/flags/Flag_of_Saudi_Arabia.png'),
                   url('../img/flags/Flag_of_Brazil.png'),
                   url('../img/flags/Flag_of_Japan.png'),
                   url('../img/flags/Flag_of_Germany.png'),
                   url('../img/flags/Flag_of_Egypt.png');
  background-repeat:no-repeat;
  background-size:clamp(90px,17vh,190px) auto;
  background-position:6% 16%, 27% 74%, 52% 12%, 74% 68%, 93% 26%;
  animation:rxDrift 44s ease-in-out infinite alternate;
}
#stage[data-game="roulettex"] .lobby::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.09;
  background-image:url('../img/flags/Flag_of_Turkey.png'),
                   url('../img/flags/Flag_of_France.png'),
                   url('../img/flags/Flag_of_Kuwait.png'),
                   url('../img/flags/Flag_of_Argentina.png');
  background-repeat:no-repeat;
  background-size:clamp(70px,13vh,150px) auto;
  background-position:16% 82%, 42% 34%, 66% 90%, 88% 60%;
  animation:rxDrift 61s ease-in-out infinite alternate-reverse;
}
@keyframes rxDrift{to{transform:translate3d(-4%,2%,0) scale(1.08)}}
#stage[data-game="roulettex"] .lobby > *{position:relative;z-index:1}
/* نداءُ الانضمام يكبر: هو الشيء الوحيد الذي نريدهم أن يقرأوه */
#stage[data-game="roulettex"] .lb-word{
  font-size:clamp(26px,7.4vh,68px);
  padding:clamp(10px,1.8vh,20px) clamp(22px,4vw,52px);
}
#stage[data-game="roulettex"] .lb-ic{
  font-size:clamp(40px,9vh,92px);
}
/* سطرٌ يشرح سرّ اللعبة وهم ينتظرون — فيدخلون وهم فاهمون */
.rx-hint{
  display:flex;align-items:center;gap:10px;
  padding:clamp(7px,1.2vh,13px) clamp(14px,2.4vw,26px);
  border-radius:999px;font-weight:800;
  font-size:clamp(11px,1.9vh,17px);color:var(--dim);
  background:rgba(10,12,34,.6);border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.rx-hint b{color:var(--star)}
@media (prefers-reduced-motion:reduce){
  #stage[data-game="roulettex"] .lobby::before,
  #stage[data-game="roulettex"] .lobby::after{animation:none}
}

/* سطرُ اللعبة عن نفسها في شاشة الانتظار — انظر lobbyNote في base.js */
.lb-note{display:flex;justify-content:center;margin:2px 0 4px}
.lobby.busy .lb-note{display:none}

/* ══════════════════════════════════════════════════════════════════════
   التخبّي — المشهد يملأ الشاشة

   قياسُ ما كان يضيع على آيباد ١٠٢٤×٧٦٨: المسرح يترك ١٤ بكسلاً عن كل
   جانب و٨٤ من أسفل، وشريطُ المعلومات يأكل ٥٢ أخرى فوقه — فلا يبقى
   للمشهد إلا ٥٦٪ من الشاشة، محاطاً بحوافّ لا تنفع.

   وأسوأ من ذلك: القشرةُ تُطفئ حشوَ المسرح لهذه اللعبة، فيقع ختمُ
   القناة فوق شريط المعلومات ويغطّي أرقامَ الجولة والمحاولات.

   فهنا: يمتدّ المسرح إلى الحافّتين وإلى أسفل الشاشة (ونُبقي ٦٠ لرصيف
   الأدوات العائم)، ويطفو شريطُ المعلومات فوق المشهد بضبابةٍ خفيفة
   بدل أن يقتطع صفّاً كاملاً — وتحته يبقى الختم في بندٍ خاصّ لا
   يزاحمه نصّ.
   ══════════════════════════════════════════════════════════════════════ */
body.shell-ok.shell-cinema #stage.seek-active{
  inset-inline:0 !important;
  inset-block-end:60px !important;
}
#stage.seek-active .sk3{position:relative}

/* شريط المعلومات يطفو: يكسب المشهدُ صفَّه كاملاً، ويبقى مقروءاً
   بتدرّجٍ داكن تحته لا بلوحٍ صلب */
#stage.seek-active .sk3-hud{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:6;
  background:linear-gradient(180deg,rgba(9,12,30,.88) 42%,rgba(9,12,30,0));
  padding-block:9px 22px;pointer-events:none;
}
/* الختمُ يقع في وسط الشريط، فنُخلي له وسطَه ونُبعد ما فيه إلى طرفيه */
#stage.seek-active .sk3-hud > *{pointer-events:auto}
#stage.seek-active .sk3-hud .sk3-round,
#stage.seek-active .sk3-hud .sk3-attempts{
  max-width:26%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* الختمُ يبقى حيث تضعه القشرة في أعلى المسرح، والشريطُ ينزل تحت
   بندِه: --bm-h هو ارتفاع البند الذي يحسبه markTop، فنتّبعه بدل رقمٍ
   نخمّنه — فلا يتصادمان مهما كبر الختم أو التفّ الشريط سطرين. */
#stage.seek-active .sk3-hud{inset-block-start:var(--bm-h,64px)}

/* وإلى الحافّتين حقّاً: جسمُ اللعبة محدودٌ بـ٩٢٠ فيترك ١٦ من كل جانب،
   وللمسرح إطارٌ بعرض بكسل — وكلاهما لا محلّ له في مشهدٍ يملأ الشاشة */
#stage.seek-active{border-color:transparent !important}
#stage.seek-active .g-body{max-width:none !important}

/* المشهد يبدأ من أعلى المسرح ويأخذ كلَّ ما بقي */
#stage.seek-active .sk3-scene{order:0;flex:1;min-height:0}
#stage.seek-active .sk3-spots{order:2}
#stage.seek-active .sk3-footer{order:3}


/* ══════════════════════════════════════════════════════════════════════
   صالةُ «آخر كرسي» — انظر public/js/chairs-world.mjs
   ══════════════════════════════════════════════════════════════════════ */
/* ملصقاتٌ تُسقَط فوق اللوحة بإحداثيّاتٍ تُحسب كلَّ إطار */
.chair-number,.walker-name{
  position:absolute;z-index:2;transform:translate(-50%,-50%);
  pointer-events:none;white-space:nowrap;line-height:1.4;
}
.chair-number{
  background:#ffe4a8;color:#37261a;font-weight:900;font-size:36px;
  min-width:52px;text-align:center;border-radius:11px;padding:4px 13px;
  box-shadow:0 0 20px rgba(255,204,100,.2);border:1px solid #fff2cf;
}
/* الكرسيُّ المحجوز يحمل اسمَ صاحبه، فيصغر الرقمُ ويُفسح له */
.chair-number.taken{background:#a8d6b7;color:#152f23;font-size:15px;font-weight:800}
.chair-number.hidden{display:none}
.walker-name{
  padding:3px 9px;background:rgba(11,16,27,.79);border:1px solid rgba(255,255,255,.11);
  color:#e5e8ef;border-radius:5px;font-size:11px;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
/* اسمُ من جلس يُخفى — اسمُه صار على كرسيّه */
.walker-name.seated{opacity:0}

/* ── المسرحُ يملأ الصفحة ──
   الصالةُ مشهدٌ يُشاهَد، والقشرةُ السينمائيّةُ تحجز أطرافاً لا يحتاجها */
/* إلى الحافّتين، وإلى قرب القاع: لوحُ البدء صار فوق المشهد لا تحته
   فلم يعد يصطدم بشريط تحكّم المذيع (.practice) */
body.shell-ok.shell-cinema #stage.chairs-active{
  inset-inline:0 !important;
  inset-block-end:72px !important;
}
#stage.chairs-active{border-color:transparent !important}
#stage.chairs-active .g-body{max-width:none !important;padding:0}
/* السلسلةُ كلُّها ممدودةٌ صراحةً: .mc-wrap قد تكون شبكةً في بعض
   التخطيطات فلا تمدّ أبناءها، فينكمش المشهدُ إلى مقاس اللوحة
   الافتراضيّ ٣٠٠×١٥٠ داخل مسرحٍ عرضُه ألفٌ ومئتان. */
#stage.chairs-active .mc-wrap{
  display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%;
}
#stage.chairs-active .stage3d{
  flex:1 1 auto;width:100%;min-width:0;min-height:0;height:auto;
  align-self:stretch;justify-self:stretch;border-radius:0;
}
#stage.chairs-active .stage3d canvas{width:100%;height:100%;display:block}
/* الشريطُ ولوحُ الجولة يطفوان فوق المشهد بدل أن يقتطعا منه صفّاً.
   ولا يبتلعان النقر: pointer-events:none عليهما وحدهما. */
#stage.chairs-active .w-tag,
#stage.chairs-active .mc-hud{
  position:absolute;inset-inline:0;z-index:6;pointer-events:none;
  display:flex;justify-content:center;
}
#stage.chairs-active .w-tag{
  inset-block-start:var(--bm-h,64px);
  /* سطرٌ مضغوطٌ في وسط الأعلى لا شريطٌ يمتدّ فوق المشهد كلِّه */
  font-size:13px;max-width:min(78%,760px);margin-inline:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#stage.chairs-active .mc-hud{inset-block-start:calc(var(--bm-h,64px) + 44px)}

/* لوحُ البدء يبقى في مجرى التخطيط لا طبقةً مطلقة: فيه زرُّ «ابدأ
   الدوران»، والمسرحُ الممدود يمرّ تحت شريط التحكّم فيختفي خلفه أيُّ
   شيءٍ يُثبَّت قرب قاعه. الترتيبُ يضمن ظهورَه، ولا حسبةَ بكسلات. */
/* اللوحُ طبقةٌ عائمةٌ في أعلى المسرح: لا يقتطع من المشهد شيئاً،
   ولا يصطدم بشريط تحكّم المذيع في القاع. النقرُ يمرّ من خلاله إلى
   المشهد إلا على أبنائه — وفيهم زرُّ «ابدأ الدوران». */
#stage.chairs-active .mc-note{
  position:absolute;inset-inline:0;z-index:8;pointer-events:none;
  /* إلى القاع لا إلى الوسط: هنا رسالةُ الجولة ولوحُ البدء معاً،
     وكانا ينزلان على الكراسي فيحجبان الأرقامَ التي يُفترض أن
     تُقرأ. القاعُ يتّسع لهما ويترك المشهد نظيفاً. */
  inset-block-start:auto;
  inset-block-end:clamp(12px,2.4vh,26px);
  display:flex;justify-content:center;
}
#stage.chairs-active .mc-note > *{
  background:rgba(9,12,28,.82);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:16px;
  padding:12px 18px;box-shadow:var(--sh-3);
}
/* فارغٌ أكثرَ الوقت — فلا يقتطع من المشهد إلا حين فيه ما يُقرأ */
#stage.chairs-active .mc-note > *{pointer-events:auto}
#stage.chairs-active .mc-note:empty{display:none}
#stage.chairs-active .mc-out{z-index:9}

@media (max-width:980px){
  .chair-number{font-size:26px;min-width:38px;padding:3px 9px}
  .chair-number.taken{font-size:11px}
  .walker-name{font-size:9px;padding:2px 5px}
}

/* ══════════════════ حقيقة أم كذب ══════════════════
   المسرح ثلاث طبقات: رأسٌ فيه الجولة والوقت، وبطاقةُ الادّعاء
   (صورةٌ إن وُجدت وجملةٌ تحتها)، وكفّتان يملؤهما تصويت الشات.
   نُبقي الكفّتين ظاهرتين دائماً لا تظهران عند التصويت: الشاشة
   الثابتة تُفهم من أوّل نظرة، والقافزةُ تُربك المشاهد. */
.tf-wrap{
  display:flex;flex-direction:column;gap:12px;width:100%;
  max-width:min(760px,96%);margin:0 auto;
}

.tf-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-radius:16px;
  background:var(--surf);border:1px solid var(--line);
}
.tf-n{font-size:14px;font-weight:800;color:var(--dim)}
.tf-n b{color:var(--ink)}
.tf-ask{font-size:20px;font-weight:900;letter-spacing:-.3px}
.tf-time{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:62px}
.tf-time b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.tf-bar{display:block;width:62px;height:5px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.1)}
.tf-bar u{display:block;height:100%;width:100%;text-decoration:none;border-radius:999px;
  background:linear-gradient(90deg,#d3a84c,#ffe6a3);transition:width .95s linear}

/* بطاقة الادّعاء */
.tf-card{
  display:flex;flex-direction:column;gap:0;border-radius:20px;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.36);
}
.tf-photo{
  position:relative;width:100%;aspect-ratio:16/9;max-height:40vh;background:#0b0b16;
}
.tf-photo img{
  width:100%;height:100%;object-fit:contain;display:block;
  animation:tfFade .5s ease;
}
@keyframes tfFade{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.tf-photo.done::after{
  content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 3px rgba(211,168,76,.5);
}
.tf-fail{display:none}
.tf-photo.bad img{display:none}
.tf-photo.bad{display:grid;place-items:center}
.tf-photo.bad .tf-fail{display:block;padding:20px;text-align:center;font-size:14px;color:var(--dim)}

.tf-claim{
  padding:18px 20px;font-size:clamp(19px,2.6vw,26px);font-weight:900;
  line-height:1.5;text-align:center;
}

/* الحكم بعد الكشف — لونُه وحده يُغني عن القراءة من بعيد */
.tf-verdict{
  display:flex;flex-direction:column;gap:4px;padding:13px 18px;
  border-block-start:1px solid var(--line);
  animation:tfPop .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes tfPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tf-verdict b{font-size:19px;font-weight:900}
.tf-verdict span{font-size:14px;font-weight:700;color:var(--dim);line-height:1.6}
.tf-verdict.yes{background:rgba(94,224,138,.12)}
.tf-verdict.yes b{color:#5ee08a}
.tf-verdict.no{background:rgba(226,87,76,.12)}
.tf-verdict.no b{color:#ff8b80}

/* الكفّتان */
.tf-votes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tf-side{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:13px 15px;border-radius:16px;overflow:hidden;
  background:var(--surf);border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.tf-fill{
  position:absolute;inset-block:0;inset-inline-start:0;width:0;
  background:rgba(255,255,255,.07);transition:width .3s ease;
}
.tf-side>*:not(.tf-fill){position:relative}
.tf-k{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;
  font-size:15px;font-weight:900;background:rgba(255,255,255,.08);
}
.tf-lab{font-size:17px;font-weight:900}
.tf-av{margin-inline-start:auto;display:flex}
.tf-c{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;min-width:20px;text-align:center}
.tf-side.hasvotes{border-color:rgba(255,255,255,.22)}
.tf-side[data-v="1"] .tf-fill{background:rgba(94,224,138,.14)}
.tf-side[data-v="2"] .tf-fill{background:rgba(226,87,76,.14)}
.tf-side.right{border-color:rgba(94,224,138,.6);transform:translateY(-2px)}
.tf-side.right .tf-k{background:#5ee08a;color:#0c0c14}
.tf-side.wrong{opacity:.5}

@media (max-width:560px){
  .tf-ask{font-size:17px}
  .tf-claim{padding:14px 15px}
  .tf-lab{font-size:15px}
}


/* ===== استرجاع ألوان البطاقات والأزرار الأصلية
   كل بطاقة تعود لـ var(--acc) الخاص بها بدل التدرّج الموحّد.
   لإلغاء هذا الاسترجاع: احذف هذه الكتلة حتى نهاية الملف. ===== */
.btn-primary{
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--p3) 92%,#fff 8%), var(--p1) 55%, color-mix(in srgb,var(--p2) 88%,#000 6%));
  border:1px solid color-mix(in srgb,var(--p3) 55%,transparent);
  box-shadow:0 4px 14px color-mix(in srgb,var(--p1) 36%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  color:#fff;
}

.gcard::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--acc) 75%,transparent), transparent 45%,
    color-mix(in srgb,var(--acc) 32%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;
}

.gc-orb{
  width:56px;height:56px;border-radius:19px;
  background:
    radial-gradient(circle at 32% 26%, color-mix(in srgb,var(--acc) 34%,transparent), transparent 62%),
    color-mix(in srgb,var(--acc) 12%,var(--surf-2));
  border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
             0 6px 18px color-mix(in srgb,var(--acc) 20%,transparent);
}

.gc-new{
  background:linear-gradient(135deg,var(--p3),var(--p2));color:#fff;
  box-shadow:0 3px 10px color-mix(in srgb,var(--p3) 40%,transparent);
  padding:3px 9px;font-size:9.5px;letter-spacing:.2px;
}

.ld-hero h1 span{
  background:linear-gradient(100deg,var(--p3),var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.gc-go{
  /* التصميم القديم كان يُظهره عند المرور فقط — والزرّ لا يُخفى */
  opacity:1;transform:none;
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-inline-start:0;
  padding:10px 14px;border-radius:13px;
  font-style:normal;font-size:14px;font-weight:900;color:#fff;
  background:linear-gradient(135deg, var(--acc, #8b7ad6), color-mix(in srgb, var(--acc,#8b7ad6) 55%, #5aa9e6));
  box-shadow:0 6px 16px color-mix(in srgb, var(--acc,#8b7ad6) 30%, transparent);
  transition:filter .16s, transform .16s;
}