/* ====================================================================
   سهرتكم — صفحة المتصدرين: منصة أول ثلاثة + قائمة الباقي
   تعتمد على متغيرات الثيم (--accent, --surface...) فتتناسق مع أي لون مفعّل.
   ==================================================================== */

.lb-controls{ position:relative; z-index:20; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:12px; margin-bottom:26px; }
.lb-seg{ display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:var(--surface); border:1px solid var(--border); }
.lb-seg button{ display:inline-flex; align-items:center; gap:7px; padding:9px 22px; border:none; border-radius:999px; background:transparent; color:var(--text-dim); font-family:'Tajawal',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:background .2s ease, color .2s ease; }
.lb-seg button:hover{ color:var(--text); }
.lb-seg button.active{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent-2); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); }
.lb-seg.small button{ padding:7px 16px; font-size:13px; }

/* ---------------- المنصة ---------------- */
.podium{
  position:relative; display:flex; direction:ltr; justify-content:center; align-items:flex-end; gap:18px;
  padding:124px 24px 0; margin-bottom:34px; overflow:hidden;
  border:1px solid var(--border); border-radius:30px;
  background:
    radial-gradient(60% 70% at 50% 18%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--surface-2) 70%,transparent), var(--surface));
}
.podium[hidden]{ display:none; }

.pod{
  --c1:#c9d1da; --c2:#8f9aa8; --glow:rgba(200,210,222,.35);
  position:relative; direction:rtl; flex:1 1 0; max-width:290px; min-width:0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 14px 18px; border-radius:26px 26px 0 0;
  border:1px solid color-mix(in srgb,var(--c1) 28%,transparent); border-bottom:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--c1) 12%,var(--surface)) 0%, var(--surface) 78%);
  box-shadow:0 -14px 40px -22px var(--glow);
  animation:podRise .8s cubic-bezier(.22,.8,.32,1) both; animation-delay:calc(var(--i) * .1s);
}
.pod.second{ order:1; --c1:#dfe5ec; --c2:#8f9aa8; min-height:262px; padding-top:62px; }
.pod.first { order:2; --c1:#ffd54d; --c2:#e39b00; --glow:rgba(255,196,40,.55); min-height:326px; padding-top:76px; }
.pod.third { order:3; --c1:#ff9a3d; --c2:#c4540a; --glow:rgba(255,140,40,.4);  min-height:236px; padding-top:58px; }
@keyframes podRise{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }

.pod .crown{ position:absolute; top:-112px; inset-inline:0; margin-inline:auto; width:66px; height:auto; z-index:3; filter:drop-shadow(0 6px 14px rgba(255,190,30,.6)); animation:crownFloat 3.2s ease-in-out infinite; }
@keyframes crownFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-5px) rotate(3deg); } }

/* حلقة الأفاتار المتدرجة + شارة الترتيب */
.pod-ring{
  position:absolute; top:0; inset-inline:0; margin-inline:auto; width:112px; height:112px;
  transform:translateY(-50%); padding:4px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--c1), var(--c2), var(--c1), var(--c2), var(--c1));
  box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 12%,transparent), 0 14px 34px -8px var(--glow);
}
.pod.first .pod-ring{ width:136px; height:136px; animation:ringGlow 3s ease-in-out infinite; }
@keyframes ringGlow{ 0%,100%{ box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 14%,transparent), 0 14px 34px -8px var(--glow); } 50%{ box-shadow:0 0 0 10px color-mix(in srgb,var(--c1) 6%,transparent), 0 16px 48px -6px var(--glow); } }
.pod-avatar{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--c1); font-size:42px; font-weight:800; font-family:'Lalezar','Tajawal',sans-serif; border:3px solid var(--surface); }
.pod-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pod-rank{
  position:absolute; bottom:-14px; inset-inline:0; margin-inline:auto; width:max-content; min-width:54px;
  padding:3px 16px; border-radius:999px; font-family:'Lalezar','Tajawal',sans-serif; font-size:19px; line-height:1.5; color:#241a05;
  background:linear-gradient(180deg,var(--c1),var(--c2)); border:3px solid var(--surface);
}
.pod.third .pod-rank{ color:#fff; }

.pod-name{ margin:30px 0 8px; max-width:100%; font-family:'Lalezar','Tajawal',sans-serif; font-weight:400; font-size:21px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod.first .pod-name{ margin-top:38px; font-size:27px; color:var(--c1); text-shadow:0 0 18px rgba(255,196,40,.35); }
.pod-meta{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; min-height:24px; margin-bottom:14px; }

.pod-stat{ width:100%; margin-top:auto; padding:11px 10px 12px; border-radius:18px; background:rgba(0,0,0,.28); border:1px solid color-mix(in srgb,var(--c1) 16%,transparent); display:flex; flex-direction:column; align-items:center; gap:1px; }
.pod.first .pod-stat{ background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent) 8%,transparent)); border-color:color-mix(in srgb,var(--c1) 38%,transparent); }
.pod-stat-label{ font-size:11.5px; font-weight:600; color:var(--text-faint); }
.pod-stat-value{ font-family:'Lalezar','Tajawal',sans-serif; font-weight:400; font-size:26px; line-height:1.2; color:var(--text); }
.pod.first .pod-stat-value{ font-size:34px; color:var(--c1); }
.pod-stat-sub{ font-size:11px; color:var(--text-dim); }

/* ---------------- باقي القائمة ---------------- */
.lb-head{ display:flex; align-items:center; gap:16px; padding:0 24px 10px; font-size:12.5px; font-weight:700; color:var(--text-faint); }
.lb-head[hidden]{ display:none; }
.lb-head .h-rank{ width:34px; text-align:center; }
.lb-head .h-av{ width:44px; }
.lb-head .h-name{ flex:1; }
.lb-head .h-stat{ width:120px; text-align:left; }
.lb-head .h-trend{ width:28px; }

.lb-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
.lb-row{ display:flex; align-items:center; gap:16px; padding:12px 24px; border-radius:22px; background:var(--surface); border:1px solid var(--border); transition:border-color .25s ease, background .25s ease; }
.lb-row:hover{ border-color:var(--border-strong); background:color-mix(in srgb,var(--surface-2) 70%,var(--surface)); }
.lb-rank{ width:34px; text-align:center; font-family:'Lalezar','Tajawal',sans-serif; font-size:21px; color:var(--text-faint); }
.lb-avatar{ width:44px; height:44px; border-radius:50%; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--accent-2); font-weight:800; border:2px solid var(--border-strong); }
.lb-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.lb-name{ flex:1; min-width:0; }
.lb-name-top{ display:flex; align-items:center; gap:5px; min-width:0; font-size:15px; }
.lb-name-top b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex-shrink:1; }
.lb-name-top .dw-badges{ flex-shrink:0; flex-wrap:nowrap; margin-inline-start:0; }
.lb-handle{ font-size:12px; color:var(--text-faint); direction:ltr; text-align:right; }
.lb-stat{ width:120px; text-align:left; font-weight:800; font-size:15px; }
.lb-stat span{ display:block; font-size:11px; font-weight:500; color:var(--text-faint); }
.lb-row .trend{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lb-row .trend.up{ color:#3ecf6e; background:rgba(62,207,110,.14); }
.lb-row .trend.down{ color:#f0554f; background:rgba(240,85,79,.14); }
.lb-row .trend.same{ color:var(--text-faint); background:rgba(244,242,240,.06); }

.lb-row.has-banner{ position:relative; background-size:cover; background-position:center; color:#fff; }
.lb-row.has-banner:before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 55%,rgba(0,0,0,.45)); pointer-events:none; }
.lb-row.has-banner > *{ position:relative; z-index:1; }
.lb-row.has-banner .lb-handle, .lb-row.has-banner .lb-stat span{ color:rgba(255,255,255,.7); }

.lb-empty{ padding:36px 20px; text-align:center; color:var(--text-faint); font-size:14px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:22px; }

/* ---------------- ترقيم الصفحات ---------------- */
.lb-pagination{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:10px 18px; margin-bottom:20px; }
.lb-pagination[hidden]{ display:none; }
.page-nav-btn{ display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-dim); font-family:'Tajawal',sans-serif; font-weight:700; font-size:14px; cursor:pointer; padding:8px 14px; }
.page-nav-btn:hover:not(:disabled){ background:rgba(244,242,240,.06); color:var(--text); }
.page-nav-btn:disabled{ opacity:.35; cursor:not-allowed; }
.page-nav-btn svg{ width:16px; height:16px; }
.page-numbers{ display:flex; align-items:center; gap:4px; }
.page-num-btn{ min-width:36px; height:36px; border:none; background:none; color:var(--text-dim); font-family:'Tajawal',sans-serif; font-weight:700; font-size:14px; cursor:pointer; }
.page-num-btn:hover{ background:rgba(244,242,240,.06); color:var(--text); }
.page-num-btn.active{ background:var(--accent); color:var(--accent-ink); }
.page-jump-input{ width:70px; height:36px; border-radius:999px; border:1px solid var(--accent); background:var(--surface-2); color:var(--text); font-family:'Tajawal',sans-serif; font-weight:700; font-size:14px; text-align:center; outline:none; -moz-appearance:textfield; }
.page-jump-input::-webkit-outer-spin-button,.page-jump-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------------- جوال ---------------- */
@media (max-width:640px){
  .podium{ gap:8px; padding:104px 8px 0; border-radius:24px; }
  .pod{ padding-inline:6px; border-radius:20px 20px 0 0; }
  .pod.second{ min-height:228px; padding-top:48px; }
  .pod.first{ min-height:282px; padding-top:62px; }
  .pod.third{ min-height:210px; padding-top:46px; }
  .pod-ring{ width:82px; height:82px; }
  .pod.first .pod-ring{ width:104px; height:104px; }
  .pod .crown{ width:50px; top:-82px; }
  .pod-avatar{ font-size:30px; }
  .pod-rank{ font-size:15px; min-width:44px; padding:2px 10px; }
  .pod-name{ font-size:15px; margin-top:24px; }
  .pod.first .pod-name{ font-size:19px; margin-top:30px; }
  .pod-stat-value{ font-size:20px; }
  .pod.first .pod-stat-value{ font-size:26px; }
  .pod-stat-sub{ display:none; }
  .lb-row{ gap:10px; padding:10px 14px; }
  .lb-stat{ width:auto; font-size:13.5px; }
  .lb-stat-extra, .lb-head .h-extra{ display:none; }
  .lb-head{ padding-inline:14px; }
}
@media (prefers-reduced-motion:reduce){
  .pod, .pod .crown, .pod.first .pod-ring{ animation:none; }
}

/* ---------------- قائمة الألعاب القابلة للطي ---------------- */