/* ══════════════════════════════════════════════════════════════
   تصاميم شاشة الانضمام الجديدة (js/join-looks.js) — معاينة محلّيّة ?jl=1|2|3
   ══════════════════════════════════════════════════════════════ */
.lobby.jl{
  --jw:#ffd54a;                         /* لون كلمة الانضمام — دافئٌ يبرز على الأزرق */
  --jw-ink:#2a1a00;
  font-weight:800;text-align:center;
  overflow:hidden;width:100%;align-self:stretch;box-sizing:border-box;
}
.lobby.jl h2{font-weight:900;letter-spacing:-.4px;margin:0}
.lobby.jl .jl-note{font-size:clamp(13px,1.9vh,17px);font-weight:700;color:var(--dim);
  padding:8px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);max-width:640px}
.jl-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.jl-foot:empty{display:none}

/* ── بطاقة المنضمّ (مشتركة) ── */
.jl-grid{--av:clamp(46px,6.6vh,72px);--nm:clamp(17px,2.6vh,28px)}
.jl-p{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:6px 18px 6px 6px;border-radius:999px;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pb-acc) 30%,var(--surf-2)),color-mix(in srgb,var(--pb-acc) 10%,var(--surf)));
  border:1.5px solid color-mix(in srgb,var(--pb-acc) 55%,transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.jl-p .av{width:var(--av);height:var(--av);flex:0 0 auto;border-radius:50%;font-size:calc(var(--av) * .5)}
.jl-p > b{display:inline-flex;align-items:center;gap:6px;font-size:var(--nm);font-weight:900;color:#fff;
  white-space:nowrap;max-width:15ch;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.jl-p > b .lb-nm{overflow:hidden;text-overflow:ellipsis}
.jl-bn{position:absolute;inset:0;z-index:-1;background:var(--own-img) center var(--own-y,50%)/cover;opacity:.55}
.jl-p.has-bn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,13,42,.15),rgba(3,13,42,.7))}
.jl-p.new{animation:jlPop .6s cubic-bezier(.2,1.6,.4,1) both}
.jl-p.new::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:2;pointer-events:none;
  box-shadow:0 0 0 3px var(--jw),0 0 26px var(--jw);animation:jlFlash 1.6s ease-out forwards}
@keyframes jlPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes jlFlash{0%,40%{opacity:1}100%{opacity:0}}
.jl-more{align-self:center;font-size:var(--nm);font-weight:900;color:var(--dim);padding:6px 14px}
.jl-grid.d2{--av:clamp(40px,5.6vh,60px);--nm:clamp(16px,2.3vh,24px)}
.jl-grid.d3{--av:clamp(34px,4.7vh,50px);--nm:clamp(14px,2vh,21px)}
.jl-grid.d4{--av:clamp(28px,3.9vh,42px);--nm:clamp(13px,1.8vh,18px)}

/* زرّ البدء مشترك */
.lobby.jl .jl-go{font-weight:900;font-size:clamp(15px,2.2vh,20px);padding:12px 28px;border-radius:16px}
.lobby.jl .jl-go:not(:disabled){background:linear-gradient(135deg,#22c55e,#16a34a);border-color:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:jlReady 1.8s ease-out infinite}
@keyframes jlReady{70%{box-shadow:0 0 0 14px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* ═══════════ ١ · المنصّة: لوحةٌ جانبيّة تشرح، والمنضمّون يملأون المسرح ═══════════ */
.lobby.jl-1{flex-direction:row;align-items:stretch;justify-content:stretch;gap:clamp(12px,2vw,24px);
  padding:clamp(10px,1.6vh,18px)}
.jl-1 .jl-side{flex:0 0 clamp(250px,27%,340px);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,1.6vh,16px);padding:clamp(12px,2vh,22px) 14px;border-radius:24px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.jl-1 .jl-game{display:flex;flex-direction:column;align-items:center;gap:4px}
.jl-1 .jl-game h2{font-size:clamp(20px,3.2vh,32px)}
.jl-1 .jl-chat{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.jl-1 .jl-chat small{font-size:clamp(13px,1.8vh,16px);font-weight:800;color:var(--dim)}
.jl-1 .jl-chat p{margin:0;font-size:clamp(12px,1.6vh,14px);font-weight:700;color:var(--dim-2)}
.jl-1 .jl-msg{display:flex;align-items:center;gap:10px;padding:10px 22px 10px 12px;border-radius:22px 22px 22px 6px;
  background:#fff;color:#0b1a3a;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--jw) 60%,transparent);
  animation:jlBob 2.6s ease-in-out infinite}
.jl-1 .jl-cav{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--jw)}
.jl-1 .jl-msg b{font-size:clamp(28px,5vh,50px);font-weight:900;line-height:1;display:inline-flex;align-items:center;gap:4px}
.jl-caret{display:inline-block;width:3px;height:.9em;background:#0b1a3a;animation:jlBlink 1s steps(1) infinite}
@keyframes jlBlink{50%{opacity:0}}
@keyframes jlBob{50%{transform:translateY(-4px) rotate(-1deg)}}
.jl-ring{position:relative;width:clamp(96px,15vh,140px);aspect-ratio:1}
.jl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.jl-ring circle{fill:none;stroke-width:9}
.jl-ring .bg{stroke:var(--panel-3)}
.jl-ring .fg{stroke:var(--jw);stroke-linecap:round;stroke-dasharray:326.7;
  stroke-dashoffset:calc(326.7 * (1 - var(--pct)));transition:stroke-dashoffset .5s cubic-bezier(.2,.9,.3,1);
  filter:drop-shadow(0 0 6px var(--jw))}
.jl-ring > div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jl-ring b{font-size:clamp(30px,5.4vh,50px);font-weight:900;line-height:1;color:#fff}
.jl-ring span{font-size:clamp(11px,1.5vh,13px);font-weight:800;color:var(--dim)}
.jl-1 .jl-main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--p2) 18%,transparent),transparent 65%);
  border:1px dashed var(--line)}
.jl-1 .jl-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim)}
.jl-1 .jl-wait b{font-size:clamp(20px,3.2vh,30px);font-weight:900;color:#fff}
.jl-1 .jl-wait small{font-size:clamp(13px,1.8vh,16px);font-weight:700}
.jl-1.busy .jl-wait{display:none}
.jl-1 .jl-grid{flex:1;min-height:0;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;
  gap:12px;padding:clamp(12px,2vh,22px)}
.jl-1 .jl-grid:empty{display:none}
/* أوّل ستّة: بطاقاتٌ عموديّة كبيرة كأنّهم على منصّة */
.jl-1 .jl-grid.d1{align-content:center;gap:18px}
.jl-1 .jl-grid.d1 .jl-p{flex-direction:column;padding:16px 18px 14px;border-radius:22px;min-width:clamp(140px,17vh,190px);
  --av:clamp(74px,11vh,112px);--nm:clamp(20px,3vh,30px)}

/* ═══════════ ٢ · لوحة الملعب: لافتةٌ عريضة فوق وجدارُ أسماء تحت ═══════════ */
.lobby.jl-2{justify-content:flex-start;gap:clamp(8px,1.4vh,14px);padding:clamp(10px,1.6vh,18px) clamp(12px,2vw,24px)}
.jl-2 .jl-hero{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(12px,2vh,20px) clamp(14px,2vw,26px);border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--p1) 40%,var(--surf)),var(--surf) 55%,color-mix(in srgb,var(--p2) 30%,var(--surf)));
  border:1px solid var(--line-2);box-shadow:var(--shadow)}
.jl-2 .jl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.035) 22px 44px)}
.jl-2 .jl-title{display:flex;align-items:center;gap:12px;text-align:start;justify-self:start;position:relative}
.jl-2 .jl-title h2{font-size:clamp(22px,3.6vh,38px)}
.jl-2 .jl-title p{margin:2px 0 0;font-size:clamp(12px,1.7vh,15px);font-weight:700;color:var(--dim)}
.jl-2 .jl-keys{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.jl-2 .jl-keys small{font-size:clamp(13px,1.9vh,17px);font-weight:900;color:var(--dim)}
/* زرّ لوحة مفاتيح ضخم — «اضغطها» */
.jl-2 .jl-key{padding:clamp(8px,1.4vh,14px) clamp(26px,4vh,46px) clamp(12px,2vh,20px);border-radius:18px;
  background:linear-gradient(180deg,#fff3c4,var(--jw));color:var(--jw-ink);
  box-shadow:0 clamp(6px,1vh,10px) 0 #b98a10,0 18px 34px rgba(0,0,0,.45);
  animation:jlPress 1.8s ease-in-out infinite}
.jl-2 .jl-key b{font-size:clamp(34px,6.4vh,70px);font-weight:900;line-height:1}
@keyframes jlPress{0%,70%,100%{transform:none;box-shadow:0 clamp(6px,1vh,10px) 0 #b98a10,0 18px 34px rgba(0,0,0,.45)}
  80%{transform:translateY(clamp(5px,.8vh,8px));box-shadow:0 1px 0 #b98a10,0 8px 18px rgba(0,0,0,.4)}}
.jl-2 .jl-score{justify-self:end;display:flex;align-items:baseline;gap:6px;position:relative;
  padding:8px 18px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.jl-2 .jl-score b{font-size:clamp(40px,7vh,74px);font-weight:900;line-height:1;color:var(--jw);text-shadow:0 0 20px color-mix(in srgb,var(--jw) 50%,transparent)}
.jl-2 .jl-score span{font-size:clamp(16px,2.6vh,26px);font-weight:900;color:var(--dim)}
.jl-2 .jl-score small{font-size:clamp(12px,1.7vh,15px);font-weight:800;color:var(--dim);order:-1;align-self:center}
.jl-2.busy .jl-hero{padding-block:clamp(8px,1.3vh,14px)}
.jl-2.busy .jl-key b{font-size:clamp(28px,5vh,54px)}
.jl-2 .jl-wall-h{width:100%;display:flex;align-items:center;gap:12px;font-size:clamp(13px,1.9vh,17px);font-weight:900;color:var(--dim)}
.jl-2 .jl-wall-h i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.jl-2:not(.busy) .jl-wall-h::after{content:"بانتظار أوّل لاعب…";color:var(--dim-2);font-weight:800}
.jl-2 .jl-grid{flex:1;min-height:0;width:100%;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;
  justify-content:flex-start;gap:10px;padding:4px 2px}
.jl-2 .jl-grid:empty{display:none}
/* البطاقة هنا مستطيلة كأسماء لوحة الملعب، بشريطٍ ملوّن في جانبها */
.jl-2 .jl-p{border-radius:14px;padding:6px 16px 6px 6px;border-inline-start:6px solid var(--pb-acc)}
.jl-2 .jl-p .av{border-radius:10px}
.jl-2 .jl-bar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:6px;border-top:1px solid var(--line)}

/* ═══════════ ٣ · البوّابة: حلقةٌ مضيئة في الوسط والمنضمّون يدورون حولها ═══════════ */
.lobby.jl-3{justify-content:flex-start;gap:clamp(4px,1vh,10px);padding:clamp(8px,1.4vh,14px)}
.jl-3 .jl-top{display:flex;align-items:center;gap:10px}
.jl-3 .jl-top h2{font-size:clamp(20px,3.2vh,32px)}
.jl-3 .jl-portal{container-type:size;--R:min(37cqh,24cqw);position:relative;flex:1 1 auto;min-height:0;width:100%;
  display:grid;place-items:center}
.jl-3 .jl-portal > *{grid-area:1/1}
.jl-3 .jl-glow{width:calc(var(--R) * 1.5);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--jw) 30%,transparent),color-mix(in srgb,var(--p2) 18%,transparent) 45%,transparent 70%);
  animation:jlBreath 3s ease-in-out infinite}
.jl-3 .jl-spin{width:calc(var(--R) * 1.12);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--jw),transparent 30%,var(--p2),transparent 60%,var(--jw),transparent 85%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 69%,transparent 70%);
          mask:radial-gradient(circle,transparent 63%,#000 64%,#000 69%,transparent 70%);
  animation:jlSpin 6s linear infinite}
.jl-3 .jl-spin.s2{width:calc(var(--R) * 1.3);opacity:.5;animation-duration:11s;animation-direction:reverse}
@keyframes jlSpin{to{transform:rotate(1turn)}}
@keyframes jlBreath{50%{transform:scale(1.08);opacity:.8}}
.jl-3 .jl-core{width:calc(var(--R) * .92);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;position:relative;z-index:1;
  background:radial-gradient(circle at 50% 35%,var(--surf-2),var(--bg));
  border:2px solid color-mix(in srgb,var(--jw) 60%,transparent);
  box-shadow:0 0 40px color-mix(in srgb,var(--jw) 30%,transparent),inset 0 0 30px rgba(0,0,0,.5)}
.jl-3 .jl-core small{font-size:clamp(12px,1.8vh,16px);font-weight:900;color:var(--dim)}
.jl-3 .jl-core b{font-size:clamp(30px,6vh,64px);font-weight:900;line-height:1.05;color:var(--jw);
  text-shadow:0 0 24px color-mix(in srgb,var(--jw) 60%,transparent)}
.jl-3 .jl-core span{font-size:clamp(14px,2.2vh,20px);font-weight:900;color:var(--dim)}
.jl-3 .jl-core em{font-style:normal;color:#fff;font-size:1.5em}
/* المنضمّون على حلقتين حول البوّابة: ‏--cx/--cy (جيب الزاوية وجيب تمامها) يحسبها join-looks.js، والقطران --rx/--ry بوحدات الحاوية */
.jl-3 .jl-grid{position:relative;width:0;height:0;z-index:2;--av:clamp(40px,6vh,64px);--nm:clamp(13px,1.9vh,18px)}
.jl-3 .jl-p{--rx:25cqw;--ry:calc(50cqh - var(--av) * .5 - 30px);position:absolute;left:0;top:0;flex-direction:column;gap:3px;padding:0;
  background:none;border:0;box-shadow:none;overflow:visible;
  transform:translate(calc(-50% + var(--cx) * var(--rx)),calc(-50% + var(--cy) * var(--ry)))}
.jl-3 .jl-p.r2{--rx:1cqw;--ry:1cqh}
.jl-3 .jl-p .av{box-shadow:0 0 0 3px var(--pb-acc),0 6px 16px rgba(0,0,0,.45)}
.jl-3 .jl-p > b{max-width:11ch;padding:1px 8px;border-radius:8px;background:rgba(3,13,42,.75)}
.jl-3 .jl-bn,.jl-3 .jl-p.has-bn::after{display:none}
.jl-3 .jl-p.new{animation:jlWarp .8s cubic-bezier(.2,1.3,.4,1) both}
.jl-3 .jl-p.new::before{display:none}
.jl-3 .jl-p.new .av{box-shadow:0 0 0 3px var(--jw),0 0 26px var(--jw)}
@keyframes jlWarp{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  100%{transform:translate(calc(-50% + var(--cx) * var(--rx)),calc(-50% + var(--cy) * var(--ry)));opacity:1}}
.jl-3 .jl-more{position:absolute;left:0;top:0;transform:translate(-50%,calc(-50% + 44cqh))}

/* ── شارة المعاينة (محلّيّ فقط) ── */
#jlPick{position:fixed;left:12px;bottom:12px;z-index:9999;display:flex;flex-direction:column;gap:4px;
  padding:10px;border-radius:14px;background:rgba(3,13,42,.92);border:1px solid var(--line-2);font-weight:800;font-size:13px}
#jlPick b{color:var(--dim);font-size:12px}
#jlPick a{color:#fff;text-decoration:none;padding:5px 10px;border-radius:9px;background:var(--panel)}
#jlPick a.on{background:var(--jw,#ffd54a);color:#2a1a00}

@media (max-width:760px){
  .lobby.jl-1{flex-direction:column}
  .jl-1 .jl-side{flex:0 0 auto}
  .jl-2 .jl-hero{grid-template-columns:1fr;justify-items:center}
  .jl-2 .jl-title,.jl-2 .jl-score{justify-self:center}
}

/* ═══════════ ٤ · البوّابة بالبنرات: البوّابة على جنب، وآخر من دخل ببنره كاملاً، وجدارُ بنراتٍ يتّسع للأربعين ═══════════ */
.lobby.jl-4{flex-direction:row;align-items:stretch;justify-content:stretch;gap:clamp(12px,1.6vw,20px);padding:clamp(10px,1.6vh,16px)}
.jl-4 .jl-gate{flex:0 0 clamp(240px,26%,330px);display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,12px);
  padding:clamp(10px,1.6vh,16px) 12px;border-radius:24px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line)}
.jl-4 .jl-top{display:flex;align-items:center;gap:8px}
.jl-4 .jl-top h2{font-size:clamp(18px,2.8vh,28px)}
.jl-4 .jl-portal{--R:clamp(104px,17vh,170px);position:relative;display:grid;place-items:center;width:100%;flex:0 0 auto}
.jl-4 .jl-portal > *{grid-area:1/1}
.jl-4 .jl-glow{width:calc(var(--R) * 1.35);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--jw) 30%,transparent),color-mix(in srgb,var(--p2) 18%,transparent) 45%,transparent 70%);
  animation:jlBreath 3s ease-in-out infinite}
.jl-4 .jl-spin{width:calc(var(--R) * 1.08);aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,var(--jw),transparent 30%,var(--p2),transparent 60%,var(--jw),transparent 85%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 69%,transparent 70%);
          mask:radial-gradient(circle,transparent 63%,#000 64%,#000 69%,transparent 70%);
  animation:jlSpin 6s linear infinite}
.jl-4 .jl-spin.s2{width:calc(var(--R) * 1.24);opacity:.5;animation-duration:11s;animation-direction:reverse}
.jl-4 .jl-core{width:calc(var(--R) * .9);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,var(--surf-2),var(--bg));border:2px solid color-mix(in srgb,var(--jw) 60%,transparent);
  box-shadow:0 0 40px color-mix(in srgb,var(--jw) 30%,transparent),inset 0 0 30px rgba(0,0,0,.5)}
.jl-4 .jl-core small{font-size:clamp(11px,1.5vh,14px);font-weight:900;color:var(--dim)}
.jl-4 .jl-core b{font-size:clamp(26px,4.6vh,48px);font-weight:900;line-height:1.05;color:var(--jw);text-shadow:0 0 22px color-mix(in srgb,var(--jw) 60%,transparent)}
.jl-4 .jl-core span{font-size:clamp(13px,1.9vh,18px);font-weight:900;color:var(--dim)}
.jl-4 .jl-core em{font-style:normal;color:#fff;font-size:1.45em}
.jl-4 .jl-spot{width:100%;display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.jl-4 .jl-spot-k{font-size:13px;font-weight:900;color:var(--jw);text-align:center}
.jl-4 .jl-go{margin-top:auto;width:100%}

/* جدار البنرات: كلّ لاعبٍ بطاقةٌ بنسبة البنر (600/220) — البنر يملؤها، والأفتار والاسم على شريطٍ سفليّ */
.jl-4 .jl-wall{flex:1;min-width:0;display:flex;border-radius:24px;border:1px dashed var(--line);
  background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--p2) 14%,transparent),transparent 65%)}
.jl-4 .jl-grid{--cw:250px;flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr));gap:10px;padding:clamp(10px,1.6vh,16px)}
.jl-4 .jl-grid:empty{display:none}
.jl-4 .jl-grid.d2{--cw:210px;--av:clamp(36px,5vh,52px);--nm:clamp(15px,2.1vh,21px)}
.jl-4 .jl-grid.d3{--cw:175px;--av:clamp(30px,4.2vh,44px);--nm:clamp(13px,1.8vh,18px);gap:8px}
.jl-4 .jl-grid.d4{--cw:140px;--av:clamp(24px,3.4vh,34px);--nm:clamp(12px,1.5vh,15px);gap:6px}
.jl-4 .jl-p{width:100%;aspect-ratio:600/220;border-radius:14px;padding:0 10px 7px;align-items:flex-end;gap:8px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pb-acc) 55%,var(--surf-2)),color-mix(in srgb,var(--pb-acc) 15%,var(--bg)))}
.jl-4 .jl-p.has-bn .jl-bn{opacity:1}
.jl-4 .jl-p::after{content:"";position:absolute;inset:40% 0 0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(3,13,42,.85))}
.jl-4 .jl-p.has-bn::after{inset:40% 0 0;background:linear-gradient(180deg,transparent,rgba(3,13,42,.85))}
.jl-4 .jl-p > b{max-width:100%;min-width:0}
.jl-4 .jl-p.spot{--av:clamp(44px,6vh,62px);--nm:clamp(17px,2.4vh,24px);box-shadow:0 0 0 2px var(--jw),0 10px 30px rgba(0,0,0,.45);animation:jlPop .6s cubic-bezier(.2,1.6,.4,1) both}
@media (max-width:760px){.lobby.jl-4{flex-direction:column}.jl-4 .jl-gate{flex:0 0 auto}}
/* overflow:hidden مع aspect-ratio يُسقط الحدّ الأدنى للارتفاع فتنضغط الصفوف حين يزيد العدد (٤٠) — نقصّ البنر من داخله بدلها */
.jl-4 .jl-p{overflow:visible}
.jl-4 .jl-bn{border-radius:inherit}
.jl-4 .jl-p::after,.jl-4 .jl-p.has-bn::after{border-radius:0 0 14px 14px}
/* الجدار لا يمدّ المسرح: الشبكة مثبّتة داخله وتمرّر نفسها */
.jl-4 .jl-wall{position:relative;min-height:0}
.jl-4 .jl-wall > .jl-grid{position:absolute;inset:0}
.jl-4 .jl-grid.d5{--cw:104px;--av:clamp(20px,2.8vh,28px);--nm:clamp(11px,1.4vh,14px);gap:5px}
.jl-4 .jl-grid.d5 .jl-p{padding:0 6px 4px;gap:5px;border-radius:10px}
/* عدد الأعمدة يحسبه join-looks.js ليسع الجميع بلا تمرير (--cols) */
.jl-4 .jl-wall > .jl-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:8px;padding:12px}
.jl-4 .jl-wall > .jl-grid .jl-p{padding:0 max(5px,calc(var(--av) * .2)) max(4px,calc(var(--av) * .12));gap:max(5px,calc(var(--av) * .16))}
/* شاشة الانضمام تأخذ عرض المسرح كلّه — سقفُ عرض اللعبة (--gw) كان يحصرها في الوسط */
.g-wrap > *:has(.lobby.jl){max-width:min(1600px,100%)}
/* سطرُ اللعبة عن نفسها (lobbyNote) في العمود الضيّق: صندوقٌ لا كبسولة — كان «الروليت المخفي» ينضغط دائرة */
.jl-4 .jl-note{width:100%;box-sizing:border-box;font-size:clamp(12px,1.6vh,15px)}
.jl-4 .jl-note > *{border-radius:12px !important;flex-wrap:wrap;justify-content:center;text-align:center;width:100%;box-sizing:border-box}

/* ══ «كيف تنلعب؟» للألعاب الجديدة: كبيرٌ في الجدار قبل أوّل منضمّ، ثمّ شريطٌ نحيل فوق البنرات ══ */
.jl-4 .jl-how{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.4vh,24px);padding:clamp(14px,2.4vh,28px)}
.jl-4 .jl-how-h{font-size:clamp(24px,4vh,42px);font-weight:900;color:var(--jw);text-shadow:0 0 22px color-mix(in srgb,var(--jw) 45%,transparent)}
.jl-4 .jl-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px);width:100%;max-width:1000px}
.jl-4 .jl-how li{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:clamp(14px,2.4vh,24px) 14px;border-radius:20px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);font-weight:800;font-size:clamp(15px,2.2vh,22px);line-height:1.5;color:#fff}
.jl-4 .jl-how li em{font-style:normal;display:grid;place-items:center;width:clamp(38px,5.4vh,54px);aspect-ratio:1;border-radius:50%;font-weight:900;font-size:clamp(18px,2.8vh,28px);
  color:var(--jw-ink);background:linear-gradient(180deg,#fff3c4,var(--jw));box-shadow:0 6px 18px rgba(0,0,0,.35)}
.jl-4 .jl-how li strong{color:var(--jw)}
/* بعد أوّل منضمّ: الشرح شريطٌ واحد فوق، والبنرات تحته */
.jl-4.busy .jl-how{inset:0 0 auto;flex-direction:row;justify-content:center;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line)}
.jl-4.busy .jl-how-h{font-size:clamp(13px,1.8vh,17px);white-space:nowrap}
.jl-4.busy .jl-how ol{display:flex;gap:8px;max-width:none;width:auto;min-width:0}
.jl-4.busy .jl-how li{flex-direction:row;gap:6px;padding:4px 10px;border-radius:999px;font-size:clamp(11px,1.5vh,14px);line-height:1.3;text-align:start}
.jl-4.busy .jl-how li em{width:22px;font-size:12px;box-shadow:none}
.jl-4.has-how.busy .jl-wall > .jl-grid{top:var(--howh,52px)}
@media (max-width:1100px){.jl-4.busy .jl-how li:not(:first-child) span{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ══ «كيف تنلعب؟» داخل اللعبة (base.js · howGate): بطاقةٌ فوق اللوحة وزرّ بدءٍ بيد الستريمر ══ */
.how-gate{--jw:#ffd54a;position:fixed;inset:0;z-index:7600;display:grid;place-items:center;padding:16px;
  background:radial-gradient(ellipse at 50% 40%,rgba(3,13,42,.55),rgba(3,13,42,.82));opacity:0;transition:opacity .3s}
.how-gate.on{opacity:1}
.hg-card{width:min(760px,94vw);display:flex;flex-direction:column;gap:clamp(12px,2vh,18px);padding:clamp(18px,3vh,30px) clamp(16px,3vw,32px);border-radius:28px;
  background:linear-gradient(180deg,var(--surf-2,#0a2860),var(--bg,#030d2a));border:1.5px solid color-mix(in srgb,var(--jw) 55%,transparent);
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 50px color-mix(in srgb,var(--jw) 22%,transparent);transform:translateY(16px) scale(.96);transition:transform .45s cubic-bezier(.2,1.4,.4,1)}
.how-gate.on .hg-card{transform:none}
.hg-top{display:flex;align-items:center;gap:14px}
.hg-top small{display:block;font-weight:800;font-size:clamp(14px,2vh,18px);color:var(--dim,#b8d3f0)}
.hg-top h2{margin:0;font-weight:900;font-size:clamp(28px,4.6vh,46px);color:var(--jw)}
.hg-card ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hg-card li{display:flex;align-items:center;gap:14px;padding:clamp(10px,1.6vh,14px) 16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  font-weight:800;font-size:clamp(17px,2.6vh,24px);line-height:1.45;color:#fff}
.hg-card li em{flex:0 0 auto;font-style:normal;display:grid;place-items:center;width:clamp(38px,5vh,50px);aspect-ratio:1;border-radius:50%;font-weight:900;font-size:clamp(18px,2.6vh,24px);
  color:#2a1a00;background:linear-gradient(180deg,#fff3c4,var(--jw))}
.hg-card li strong{color:var(--jw)}
.hg-go{align-self:center;display:inline-flex;align-items:center;gap:10px;padding:clamp(12px,2vh,16px) clamp(30px,5vw,56px);border-radius:18px;border:0;cursor:pointer;
  font-family:inherit;font-weight:900;font-size:clamp(18px,2.8vh,26px);color:#fff;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 0 0 rgba(74,222,128,.6),0 12px 30px rgba(0,0,0,.4);
  animation:jlReady 1.8s ease-out infinite}
.hg-go:hover{filter:brightness(1.08)}
.hg-sub{margin:-4px 0 0;text-align:center;font-weight:700;font-size:13px;color:var(--dim,#b8d3f0)}

.hg-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:-6px}
.hg-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--jw),#ff9a2e);animation:hgBar 8s linear forwards}
@keyframes hgBar{from{width:0}to{width:100%}}

/* ══ «المسرح الحيّ» ?jl=5 (٢٠٢٦/١٠/٢٢، معاينة محلّيّة) ══
   نظام التصميم: خلفيّة = هويّة اللعبة (غلافها مغبّش أو لون من رقمها --gh) تحت ستارة كحليّة · لوحات زجاج غامق بحدّ ذهبي (--star)
   · خطّ Cairo 900 للعناوين والأرقام و800 للباقي · أيقونات SVG بلا إيموجي · الحركة بس للحظة الدخول والضوء الخلفي. */
.lobby.jl-5{position:relative;display:grid;grid-template-rows:auto minmax(0,34%) minmax(0,1fr) auto;gap:clamp(8px,1.4vh,14px);
  padding:clamp(10px,1.6vh,18px) clamp(12px,1.4vw,22px);overflow:hidden;isolation:isolate;font-family:"Cairo","Tajawal",sans-serif;
  --ga:hsl(var(--gh,40) 80% 58%);--gb:hsl(var(--gh,40) 70% 22%);--glass:rgba(10,14,34,.72);--rim:color-mix(in srgb,var(--star,#ffd23a) 70%,transparent)}
.jl-5 .j5-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--ga) 35%,transparent),transparent 60%),
  linear-gradient(180deg,rgba(8,10,28,.55),rgba(8,10,28,.92) 70%),var(--cov,none) center/cover no-repeat,var(--gb)}
.jl-5 .j5-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 46%,transparent,rgba(5,7,20,.7));backdrop-filter:blur(6px)}
.jl-5 .j5-beam{position:absolute;top:-10%;width:22%;height:80%;background:linear-gradient(180deg,color-mix(in srgb,var(--ga) 40%,transparent),transparent);
  filter:blur(12px);opacity:.55;transform-origin:50% 0;z-index:1}
.jl-5 .j5-beam.b1{left:18%;animation:j5Beam 7s ease-in-out infinite}
.jl-5 .j5-beam.b2{right:18%;animation:j5Beam 7s ease-in-out infinite reverse}
@keyframes j5Beam{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}

.jl-5 .j5-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.jl-5 .j5-game{display:flex;align-items:center;gap:clamp(8px,1vw,14px)}
.jl-5 .j5-cov{display:grid;place-items:center;flex:0 0 auto;width:clamp(48px,7vh,72px);height:clamp(48px,7vh,72px);border-radius:16px;
  background:var(--cov,linear-gradient(135deg,var(--ga),var(--gb))) center/cover;border:3px solid var(--rim);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.jl-5 .j5-cov b{font-size:clamp(26px,4vh,40px);font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.jl-5 .j5-game small{display:block;font-size:clamp(11px,1.6vh,15px);font-weight:800;color:var(--star,#ffd23a)}
.jl-5 .j5-game h2{margin:0;font-size:clamp(22px,4vh,40px);font-weight:900;color:#fff;line-height:1.15}
.jl-5 .j5-count{display:grid;justify-items:center;gap:2px;min-width:clamp(150px,16vw,230px);padding:8px 16px;border-radius:18px;background:var(--glass);border:2px solid var(--rim)}
.jl-5 .j5-count div{display:flex;align-items:baseline;gap:6px;direction:ltr}
.jl-5 .j5-count div b{font-size:clamp(30px,5.4vh,54px);font-weight:900;color:#fff;line-height:1}
.jl-5 .j5-count div span{font-size:clamp(14px,2.2vh,20px);font-weight:800;color:var(--dim,#a9b3d6)}
.jl-5 .j5-count small{font-size:clamp(11px,1.6vh,14px);font-weight:800;color:var(--dim,#a9b3d6)}
.jl-5 .j5-meter{display:block;width:100%;height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;direction:rtl}
.jl-5 .j5-meter s{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--star,#ffd23a),var(--ga));border-radius:99px;transition:width .5s}

.jl-5 .j5-stage{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(10px,1.4vw,18px);min-height:0}
.jl-5 .j5-call{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vh,10px);min-height:0;padding:12px;border-radius:22px;
  background:var(--glass);border:2px solid var(--rim);box-shadow:inset 0 0 40px color-mix(in srgb,var(--ga) 18%,transparent)}
.jl-5 .j5-call>small{font-size:clamp(13px,2.1vh,19px);font-weight:800;color:var(--dim,#a9b3d6)}
.jl-5 .j5-bubble{position:relative;display:flex;align-items:center;gap:clamp(8px,1vw,14px);padding:clamp(6px,1.2vh,12px) clamp(16px,2vw,30px);border-radius:999px;
  background:#fff;color:#14204a;box-shadow:0 8px 0 rgba(0,0,0,.28),0 0 0 4px var(--star,#ffd23a)}
.jl-5 .j5-bubble b{font-size:clamp(36px,8vh,84px);font-weight:900;line-height:1.1;color:#14204a}
.jl-5 .j5-ci{display:grid;place-items:center;width:clamp(30px,5vh,52px);height:clamp(30px,5vh,52px);border-radius:50%;background:var(--ga);color:#fff;flex:0 0 auto}
.jl-5 .j5-ci svg{width:60%;height:60%}
.jl-5 .j5-caret{width:4px;height:clamp(32px,7vh,72px);background:#14204a;border-radius:2px;animation:j5Caret 1s steps(1) infinite}
@keyframes j5Caret{50%{opacity:0}}
.jl-5 .j5-call>p{margin:0;font-size:clamp(13px,2vh,18px);font-weight:800;color:#fff}
.jl-5 .jl-note{font-size:clamp(12px,1.8vh,16px);font-weight:800;color:var(--star,#ffd23a)}
.jl-5 .j5-spot{position:relative;display:grid;place-items:center;min-height:0;border-radius:22px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--star,#ffd23a) 30%,transparent),transparent 70%),var(--glass);border:2px solid var(--rim)}
.jl-5 .j5-wait{display:grid;justify-items:center;gap:6px;text-align:center}
.jl-5 .j5-wait i{width:clamp(44px,7vh,70px);height:clamp(44px,7vh,70px);border-radius:50%;border:4px dashed var(--rim);animation:j5Spin 9s linear infinite}
@keyframes j5Spin{to{transform:rotate(1turn)}}
.jl-5 .j5-wait b{font-size:clamp(17px,2.8vh,26px);font-weight:900;color:#fff}
.jl-5 .j5-wait small{font-size:clamp(12px,1.8vh,16px);font-weight:800;color:var(--dim,#a9b3d6)}
.jl-5 .j5-hero{position:relative;display:grid;justify-items:center;gap:8px;width:92%}
.jl-5 .j5-hero.new{animation:j5Hero .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes j5Hero{from{transform:translateY(18px) scale(.9);opacity:0}}
.jl-5 .j5-tag{padding:3px 14px;border-radius:99px;background:var(--star,#ffd23a);color:#14204a;font-size:clamp(12px,1.9vh,17px);font-weight:900}
.jl-5 .j5-no{position:absolute;top:-4px;left:4px;font-size:clamp(18px,3.4vh,32px);font-weight:900;color:var(--star,#ffd23a);direction:ltr}
.jl-5 .j5-hero .jl-p.spot{width:100%;max-height:calc(100% - 30px)}

.jl-5 .j5-crowd{display:flex;flex-direction:column;min-height:0;border-radius:22px;background:var(--glass);border:2px solid rgba(255,255,255,.1);padding:10px 12px}
.jl-5 .j5-crowd-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.jl-5 .j5-crowd-h b{font-size:clamp(14px,2.2vh,20px);font-weight:900;color:#fff}
.jl-5 .j5-crowd-h span{font-size:clamp(11px,1.7vh,15px);font-weight:800;color:var(--dim,#a9b3d6)}
.jl-5 .j5-grid{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;overflow:hidden}
.jl-5 .j5-chip{position:relative;display:flex;align-items:center;gap:8px;overflow:hidden;padding:6px 14px 6px 8px;border-radius:14px;
  background:color-mix(in srgb,var(--pb-acc,#3a4a8a) 30%,rgba(255,255,255,.08));border:2px solid color-mix(in srgb,var(--pb-acc,#fff) 70%,transparent)}
.jl-5 .j5-chip .jl-bn{position:absolute;inset:0;background:var(--own-img) center/cover;opacity:.55}
.jl-5 .j5-chip .jl-bn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,10,28,.15),rgba(8,10,28,.75))}
.jl-5 .j5-chip>*{position:relative}
.jl-5 .j5-chip b{font-weight:900;color:#fff;white-space:nowrap;max-width:14em;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.jl-5 .j5-chip.new{box-shadow:0 0 0 3px var(--star,#ffd23a);animation:j5Hero .45s cubic-bezier(.2,1.4,.4,1)}
.jl-5 .t1 .j5-chip{font-size:clamp(18px,3vh,28px);padding:10px 20px 10px 10px}
.jl-5 .t1 .j5-chip .av{width:clamp(40px,6vh,58px) !important;height:clamp(40px,6vh,58px) !important}
.jl-5 .t2 .j5-chip{font-size:clamp(16px,2.5vh,23px)}
.jl-5 .t2 .j5-chip .av{width:clamp(32px,4.8vh,46px) !important;height:clamp(32px,4.8vh,46px) !important}
.jl-5 .t3 .j5-chip{font-size:clamp(14px,2.1vh,19px)}
.jl-5 .t3 .j5-chip .av{width:clamp(26px,3.8vh,36px) !important;height:clamp(26px,3.8vh,36px) !important}
.jl-5 .t4 .j5-chip{font-size:clamp(12px,1.8vh,16px);padding:4px 10px 4px 6px}
.jl-5 .t4 .j5-chip .av{width:clamp(22px,3vh,30px) !important;height:clamp(22px,3vh,30px) !important}
.jl-5 .t5{gap:5px}
.jl-5 .t5 .j5-chip{padding:2px;border-radius:50%}
.jl-5 .t5 .j5-chip b,.jl-5 .t5 .j5-chip .jl-bn{display:none}
.jl-5 .t5 .j5-chip .av{width:clamp(26px,3.6vh,36px) !important;height:clamp(26px,3.6vh,36px) !important}
.jl-5 .jl-more{align-self:center;padding:4px 12px;border-radius:99px;background:var(--star,#ffd23a);color:#14204a;font-weight:900}

.jl-5 .j5-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.jl-5 .jl-go{min-width:clamp(220px,24vw,360px);font-weight:900}
.jl-5 .jl-foot{display:flex;align-items:center;gap:10px}
@media (max-aspect-ratio:1/1){ .lobby.jl-5{grid-template-rows:auto auto auto minmax(0,1fr) auto} .jl-5 .j5-stage{grid-template-columns:1fr} .jl-5 .j5-spot{min-height:24vh} }
/* إصلاحات الجولة ١: عرض كامل · السطرين القديمة فوق تنشال (المسرح فيه النداء) · بطاقة «دخل الحين» كبيرة · الخلفيّة أهدأ */
.lobby.jl-5{width:100%;max-width:none;justify-items:stretch;align-items:stretch;align-self:stretch;flex:1 1 auto;height:100%}
.g-wrap:has(.jl-5) .g-how,.g-wrap:has(.jl-5) .g-sub{display:none !important}
.jl-5 .j5-bg{background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--ga) 30%,transparent),transparent 60%),
  linear-gradient(180deg,rgba(8,10,28,.78),rgba(8,10,28,.95) 70%),var(--cov,none) center/cover no-repeat,var(--gb)}
.jl-5 .j5-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:94%;height:90%;border-radius:18px;overflow:hidden;
  border:3px solid var(--star,#ffd23a);background:color-mix(in srgb,var(--pb-acc,#3a4a8a) 35%,rgba(10,14,34,.8));box-shadow:0 0 40px color-mix(in srgb,var(--star,#ffd23a) 35%,transparent)}
.jl-5 .j5-hero .jl-bn{position:absolute;inset:0;background:var(--own-img) center/cover}
.jl-5 .j5-hero .jl-bn::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,28,.85),rgba(8,10,28,.15) 60%)}
.jl-5 .j5-hero>*{position:relative}
.jl-5 .j5-tag{position:absolute;top:10px;right:12px}
.jl-5 .j5-no{top:6px;left:14px}
.jl-5 .j5-who{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);margin-top:18px}
.jl-5 .j5-who .av{width:clamp(64px,11vh,110px) !important;height:clamp(64px,11vh,110px) !important;font-size:clamp(30px,5vh,52px) !important;border:4px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.jl-5 .j5-who b{display:block;font-size:clamp(26px,5vh,52px);font-weight:900;color:#fff;line-height:1.1;text-shadow:0 2px 8px rgba(0,0,0,.6);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jl-5 .j5-mk{display:flex;gap:6px;margin-top:4px}
.jl-5 .j5-call{justify-content:center}
/* وجوه أكبر لمّا الجمهور كثير (٦١–١٢٠) — كانت صغيرة ويبقى فراغ */
.jl-5 .t5 .j5-chip .av{width:clamp(34px,5.2vh,52px) !important;height:clamp(34px,5.2vh,52px) !important}
.jl-5 .t5{gap:7px;justify-content:flex-start}

/* ══ «جدار الشرف» ?jl=6 (٢٠٢٦/١٠/٢٢، اعتمده المالك من معاينة _concepts/join3) ══
   كلّ منضمّ «بطاقة لاعب» بثلاث طبقات ما تنشال بأيّ عدد: البنر كامل بنسبته 600/220 · الأفتار بحلقة بيضا · الاسم Cairo 900.
   يملأ مسرح اللعبة كامل (شريط الإعدادات فوق يبقى)، والجدار يحسب أكبر مقاس يدخّل الكلّ (join-looks.js paint v===6). */
.lobby.jl-6{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-content:stretch;align-content:stretch;justify-items:stretch;align-items:stretch;grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(8px,1.4vh,16px);width:100%;max-width:none;height:100%;
  align-self:stretch;flex:1 1 auto;padding:clamp(10px,1.6vh,18px) clamp(12px,1.4vw,24px);font-family:"Cairo","Tajawal",sans-serif;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 0%,#24306e 0%,transparent 70%),linear-gradient(180deg,#0e1533,#080b1e);border-radius:inherit}
.g-wrap:has(.jl-6) .g-how,.g-wrap:has(.jl-6) .g-sub{display:none !important}
.jl-6 .j6-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2vw}
.jl-6 .j6-game{display:flex;align-items:center;gap:12px;min-width:0}
.jl-6 .j6-cov{flex:0 0 auto;display:grid;place-items:center;width:clamp(48px,7vh,76px);height:clamp(48px,7vh,76px);border-radius:16px;
  background:var(--cov,linear-gradient(135deg,var(--p1,#3a6df0),var(--p2,#7a4df0))) center/cover;border:3px solid var(--star,#ffd23a);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.jl-6 .j6-cov b{font-size:clamp(24px,4vh,40px);font-weight:900;color:#fff}
.jl-6 .j6-game small{display:block;font-size:clamp(12px,1.7vh,16px);font-weight:800;color:var(--star,#ffd23a)}
.jl-6 .j6-game h2{margin:0;font-size:clamp(22px,3.6vh,40px);font-weight:900;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl-6 .j6-call{display:flex;align-items:center;gap:14px;padding:.6vh 1.2vh .6vh 2.2vh;border-radius:999px;background:#fff;color:#14204a;
  box-shadow:0 0 0 4px var(--star,#ffd23a),0 10px 30px rgba(0,0,0,.45)}
.jl-6 .j6-call small{font-size:clamp(13px,2vh,20px);font-weight:800;color:#45507e;white-space:nowrap}
.jl-6 .j6-call b{font-size:clamp(30px,5.4vh,60px);font-weight:900;line-height:1.15;padding:0 2.2vh;border-radius:999px;background:var(--star,#ffd23a);color:#14204a;white-space:nowrap}
.jl-6 .j6-count{justify-self:end;display:grid;justify-items:center;gap:3px;min-width:clamp(150px,15vw,260px);padding:.8vh 1.4vw;border-radius:18px;
  background:rgba(10,14,34,.75);border:2px solid rgba(255,210,58,.6)}
.jl-6 .j6-count div{display:flex;align-items:baseline;gap:6px;direction:ltr}
.jl-6 .j6-count div b{font-size:clamp(28px,5vh,54px);font-weight:900;color:#fff;line-height:1}
.jl-6 .j6-count span,.jl-6 .j6-count small{font-size:clamp(12px,1.8vh,18px);font-weight:800;color:#b8c2e6}
.jl-6 .j6-meter{display:block;width:100%;height:7px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;direction:rtl}
.jl-6 .j6-meter s{display:block;height:100%;width:0;background:var(--star,#ffd23a);transition:width .4s}
.jl-6 .jl-note{text-align:center;font-weight:800;color:var(--star,#ffd23a)}
.jl-6 .j6-body{display:grid;grid-template-columns:minmax(0,27%) minmax(0,1fr);gap:1.6vw;min-height:0}
.jl-6 .j6-hero{display:flex;flex-direction:column;justify-content:center;gap:1.4vh;padding:2vh 1.2vw;border-radius:24px;min-height:0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(255,210,58,.26),transparent 70%),rgba(10,14,34,.7);border:2px solid rgba(255,210,58,.55)}
.jl-6 .j6-tag{align-self:center;padding:2px 16px;border-radius:99px;background:var(--star,#ffd23a);color:#14204a;font-size:clamp(14px,2.1vh,22px);font-weight:900}
.jl-6 .j6-hint{margin:0;text-align:center;font-size:clamp(13px,1.9vh,19px);font-weight:800;color:#b8c2e6}
.jl-6 .j6-wait{display:grid;justify-items:center;gap:10px;text-align:center}
.jl-6 .j6-wait i{width:9vh;height:9vh;border-radius:50%;border:4px dashed rgba(255,210,58,.6);animation:j6Spin 9s linear infinite}
.jl-6 .j6-wait b{font-size:clamp(18px,2.6vh,28px);font-weight:900;color:#fff}
.jl-6 .j6-wait small{font-size:clamp(13px,1.8vh,18px);font-weight:800;color:#b8c2e6}
@keyframes j6Spin{to{transform:rotate(1turn)}}
.jl-6 .j6-grid{display:grid;align-content:start;justify-content:center;gap:var(--g,10px);grid-template-columns:repeat(var(--c,4),var(--w,260px));min-height:0;overflow:hidden}
.jl-6 .j6-empty{grid-column:1/-1;align-self:center;margin-top:20vh;text-align:center;font-size:clamp(16px,2.6vh,26px);font-weight:900;color:#b8c2e6}

/* بطاقة اللاعب */
.jl-6 .j6-c{--fs:var(--f,16px);position:relative;display:flex;align-items:center;gap:calc(var(--fs)*.6);width:var(--w,260px);aspect-ratio:600/220;overflow:hidden;
  border-radius:calc(var(--fs)*.7);padding:0 calc(var(--fs)*.7);background:color-mix(in srgb,var(--pb-acc,#3a4a8a) 55%,#0b1030);
  box-shadow:0 0 0 2px rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.45);isolation:isolate}
.jl-6 .j6-bn{position:absolute;inset:0;z-index:-2;background:linear-gradient(120deg,color-mix(in srgb,var(--pb-acc,#3a6df0) 80%,#fff 0%),#0b1030)}
.jl-6 .j6-c.has-bn .j6-bn{background:var(--own-img) center/cover}
.jl-6 .j6-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(6,9,26,.8) 0%,rgba(6,9,26,.35) 52%,transparent 80%)}
.jl-6 .j6-c .av{flex:0 0 auto;width:calc(var(--fs)*3) !important;height:calc(var(--fs)*3) !important;font-size:calc(var(--fs)*1.4) !important;
  border:calc(var(--fs)*.18) solid #fff;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.jl-6 .j6-c b{min-width:0;flex:1;display:flex;align-items:center;gap:6px;font-size:calc(var(--fs)*1.25);font-weight:900;color:#fff;line-height:1.2;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.6)}
.jl-6 .j6-c b .lb-nm{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl-6 .j6-c em{position:absolute;top:calc(var(--fs)*.35);left:calc(var(--fs)*.45);font-style:normal;font-size:calc(var(--fs)*.75);font-weight:900;
  padding:0 .5em;border-radius:99px;background:rgba(0,0,0,.55);color:var(--star,#ffd23a);direction:ltr}
.jl-6 .tiny .j6-c em,.jl-6 .tiny .j6-c b .mk,.jl-6 .tiny .j6-c b>:not(.lb-nm){display:none}
.jl-6 .j6-c.new{animation:j6In .55s cubic-bezier(.2,1.4,.4,1) backwards;box-shadow:0 0 0 3px var(--star,#ffd23a),0 0 22px rgba(255,210,58,.6)}
@keyframes j6In{from{transform:translateY(14px) scale(.85);opacity:0}}
/* الداخل الحين: بطاقة كبيرة عموديّة — البنر فوق والأفتار والاسم تحته */
.jl-6 .j6-c.big{--fs:clamp(16px,2.1vh,26px);width:100%;aspect-ratio:auto;flex-direction:column;justify-content:flex-end;padding:0 1vw 2vh;gap:1vh;min-height:min(44vh,100%)}
.jl-6 .j6-c.big .j6-bn{inset:0 0 auto 0;height:58%}
.jl-6 .j6-c.big::after{background:linear-gradient(0deg,rgba(6,9,26,.9) 0%,rgba(6,9,26,.25) 55%,transparent)}
.jl-6 .j6-c.big .av{width:clamp(70px,13vh,140px) !important;height:clamp(70px,13vh,140px) !important;font-size:clamp(32px,6vh,64px) !important}
.jl-6 .j6-c.big b{flex:0 0 auto;max-width:100%;justify-content:center;font-size:clamp(24px,4vh,46px)}
.jl-6 .j6-c.big em{font-size:clamp(14px,2.2vh,24px);top:1.2vh;left:1.2vh}
.jl-6 .j6-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.jl-6 .jl-go{min-width:clamp(220px,24vw,360px);font-weight:900}
.jl-6 .jl-foot{display:flex;align-items:center;gap:10px}
@media (max-aspect-ratio:1/1){ .jl-6 .j6-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)} .jl-6 .j6-c.big{min-height:22vh} .jl-6 .j6-head{grid-template-columns:1fr auto} .jl-6 .j6-call{grid-column:1/-1;grid-row:2;justify-self:center} }
.lobby.jl-6{grid-template-rows:auto minmax(0,1fr) auto}
.jl-6.many .j6-body{grid-template-columns:minmax(0,20%) minmax(0,1fr)}
/* بطاقات صغيرة: الأفتار أصغر نسبيّاً عشان الاسم ياخذ مكانه */
.jl-6 .tiny .j6-c{gap:calc(var(--fs)*.4);padding:0 calc(var(--fs)*.45)}
.jl-6 .tiny .j6-c .av{width:calc(var(--fs)*2.3) !important;height:calc(var(--fs)*2.3) !important;border-width:2px}
.jl-6 .tiny .j6-c b{font-size:calc(var(--fs)*1.2)}
/* «جدار الشرف» نافذة كاملة على الشاشة (المالك: «يغطي كلشي نافذة لحال كاملة على الشاشة») —
   الإعدادات والإنهاء جوّاها، ولوحة الإعدادات (#gdock) تطلع فوقها */
.lobby.jl-6{position:fixed;inset:0;z-index:58;width:100vw;height:100dvh;border-radius:0;padding:clamp(14px,2.2vh,28px) clamp(16px,2vw,36px)}
body.jl6-open{overflow:hidden}
body.jl6-open #gdock{z-index:70}
.jl-6 .j6-bar{position:relative}
.jl-6 .j6-tools{display:flex;gap:8px;margin-inline-start:auto}
.jl-6 .j6-tb{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:14px;cursor:pointer;font:800 clamp(13px,1.8vh,17px) "Cairo",sans-serif;
  color:#fff;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.jl-6 .j6-tb svg{width:1.3em;height:1.3em}
.jl-6 .j6-tb:hover{background:rgba(255,255,255,.16)}
.jl-6 .j6-tb.stop{color:#ffd6da;border-color:rgba(255,90,100,.45);background:rgba(255,60,80,.12)}
body.jl6-open #toolrail,body.jl6-open #brandmark{display:none !important}
/* بلاغ المالك (صورة روليت الطرد): شريط المسرح وإعلانات الدخول كانت تطلع فوق النافذة، والجدار عمود واحد */
body.jl6-open #stageBar,body.jl6-open #joinfeed{display:none !important}
body.jl6-open #practice{position:fixed !important;inset:auto 0 0 0 !important;z-index:59 !important}
.lobby.jl-6{height:auto}
body.jl6-open:has(#practice:not(.hidden)) .lobby.jl-6{bottom:var(--prh,124px)}
/* بلاغ المالك: لوحة الإعدادات فوق نافذة الانضمام كانت مزاحة عن طرف الشاشة ومقصوصة ⇒ ملزوقة باليمين بطول الشاشة */
body.jl6-open #gdock{position:fixed !important;top:0 !important;bottom:0 !important;right:0 !important;left:auto !important;
  height:100dvh !important;max-height:none !important;margin:0 !important;border-radius:0 !important;transform:none !important;z-index:70 !important}
body.jl6-open:has(#practice:not(.hidden)) #gdock{bottom:var(--prh,124px) !important;height:auto !important}
body.jl6-open #gdock{background:linear-gradient(180deg,#151d42,#0b1029) !important;box-shadow:-24px 0 60px rgba(0,0,0,.6) !important}

/* «جدار الشرف» بالألعاب اللي انضمامها بالفريق (سين جيم · كود نيمز): الفريقين يملون الجسم مكان الجدار (٢٠٢٦/١٠/٢٤) */
.jl-6.j6-teams .j6-hero,.jl-6.j6-teams .j6-grid{display:none}
.jl-6.j6-teams .j6-body{grid-template-columns:minmax(0,1fr)}
.jl-6.j6-teams .j6-body > .sj-tj,.jl-6.j6-teams .j6-body > .cn-tj{grid-column:1/-1;min-height:0;height:100%;width:100%;max-width:none;margin:0}