/* ===== خانة المستويات (كرت شازار) ===== */
#shz-lp-top5{
 --_shz-radius: var(--shz-radius, 14px);
  --_shz-border: var(--shz-border, #084F5D);
  --_shz-text:   var(--shz-text, #084F5D);
  --_shz-bg:     var(--shz-bg, #FFFFFF);
  --_shz-muted:  var(--shz-muted, #F2DBAD);
 --_sh-radius: var(--sh-radius, 6px);
  --_shz-active:  var( --shz-active, #B2905F);
  
  font-family: Tajawal, Arial, sans-serif;
  border: 1.5px solid var(--_shz-border);
  border-radius: var(--_shz-radius);
  background: var(--_shz-bg);
  color: var(--_shz-text);
  padding: .75rem;            /* أصغر */
  margin: 1rem auto;          /* أصغر */
  max-width: 1100px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  direction: rtl;
}

#shz-lp-top5 .shz-lp-top5-head{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.35rem; margin-bottom:.5rem; text-align:center;
}

#shz-lp-top5 .hgroup h2{ font-size:0.7rem; margin:0; font-weight:800 }
#shz-lp-top5 .shz-lp-period{ font-size:.45rem; opacity:.8 }
#shz-lp-top5 .shz-top5-toggle{
  background: transparent; color: var( --_shz-active);
   border: 2px solid var( --_shz-active);
 border-radius: var( --_sh-radius);
  padding: .35rem .6rem; font-weight:800; cursor:pointer;
}
#shz-lp-top5 .shz-top5-toggle[aria-pressed="true"]{
 border-color: var(--_shz-border);
  border-radius:  var( --_sh-radius);
  color: var( --_shz-text);
}

#shz-lp-top5 .shz-lp-top5-viewport{
  overflow: hidden; position: relative; border: 1px solid var(--_shz-border);
   border-radius: var(--_shz-radius);
 background: var(--_shz-bg);
}
#shz-lp-top5 .shz-lp-top5-viewport.dragging{ cursor: grabbing; }

#shz-lp-top5 .shz-lp-top5-track{
  display: inline-flex; align-items: stretch; gap: .6rem;
  padding: .6rem;
  will-change: transform;
  animation: shz-marquee var(--marquee-dur, 40s) linear infinite;
  /* من اليمين لليسار */
  transform: translateX(0);
}
#shz-lp-top5 .shz-lp-top5-track[data-paused]{ animation-play-state: paused; }
#shz-lp-top5 .shz-lp-top5-track.is-skeleton{ position:relative; }
#shz-lp-top5 .shz-lp-top5-track.is-skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.07), rgba(0,0,0,.03));
  animation: shz-skel 1.2s infinite;
}

@keyframes shz-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* يزحف حتى نصف المحتوى (لأننا نكرر العناصر) */
}
@keyframes shz-skel { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

#shz-lp-top5 .shz-lp-tier-card{
  flex: 0 0 220px;            /* بطاقة مضغوطة ثابته العرض */
  border: 1px solid var(--_shz-border);
  border-radius: var(--_shz-radius);
  background: var(--_shz-bg);
  padding: .55rem;
  min-height: 160px;
}

#shz-lp-top5 .tier-head{
  display:flex; align-items:center; justify-content:center;
  gap:.3rem; margin-bottom:1.3rem; flex-direction: row-reverse; /* أيقونة إلى اليمين */
}
#shz-lp-top5 .tier-title{
  display:flex; align-items:center; gap:.8rem; /* اسم + مضاعف */
}
#shz-lp-top5 .tier-title .t-name{ font-size:.7rem; font-weight:800 }
#shz-lp-top5 .tier-title .t-mult{
  font-size:.5rem; font-weight:700; opacity:.8;
  margin-inline-start: auto; /* ادفع المضاعف لليسار */
}

#shz-lp-top5 .tier-icon{
  width: 28px; height: 28px;
 background: var( --_shz-bg);  flex:0 0 auto; overflow:hidden;
}
#shz-lp-top5 img.tier-icon{ width:100%; height:100%; object-fit:cover; display:block; }
/* [ADD after line 093] — عندما تكون الأيقونة نص/إيموجي/HTML */
#shz-lp-top5 .tier-icon.is-text{
  display:flex; align-items:center; justify-content:center;
 font-size:.7rem; line-height:1; color: var(--_shz-text);
}

#shz-lp-top5 .tier-users{ list-style:none; margin:.35rem 0 0 0; padding:0; }
#shz-lp-top5 .tier-users li{
  display:grid; grid-template-columns: 18px 22px 1fr auto; gap:.35rem; align-items:center;
 padding:.22rem .25rem; border-radius: var(--_shz-radius);
}
#shz-lp-top5 .tier-users li:nth-child(odd){ background: rgba(8,79,93,.045) }
#shz-lp-top5 .tier-users .u-rank{ text-align:center; font-weight:600; opacity:.35; font-size:.55rem }
#shz-lp-top5 .tier-users .u-avatar{ width:22px; height:22px; border-radius:50%; overflow:hidden; background:#ddd; display:block }
#shz-lp-top5 .tier-users .u-avatar.fallback{ border:1px solid var(--_shz-border) }
#shz-lp-top5 .tier-users .u-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.39rem }
#shz-lp-top5 .tier-users .u-pts{ font-weight:800; font-size:.35rem }

#shz-lp-top5 .no-data{ padding:.6rem; text-align:center; opacity:.8 }

#shz-lp-top5 .shz-lp-top5-foot{ margin-top:.5rem; text-align:center }
#shz-lp-top5 .muted{ opacity:.7; font-size:.8rem }

/* وضع داكن */
body.os-dark #shz-lp-top5{
  --_shz-bg:    var(--os-dark-card);
  --_shz-text:  var(--os-dark-text);
  --_shz-border:var(--os-dark-border);
  --_shz-muted: rgba(var(--os-accent-rgb, 178,144,95), .18);
  box-shadow: none;
}
body.os-dark #shz-lp-top5 .tier-users li:nth-child(odd){ background: rgba(255,255,255,.05) }