/* ═══════════════════════════════════════════
   STRANGE PHANTOM v3.5.2 — FIX CSS
   نەوارە · شۆپ · سکرۆڵ
═══════════════════════════════════════════ */

/* ══════════════════════════════
   نەوارەی خوارەوە — دیزاینی نوێ
══════════════════════════════ */
#navBar {
  height: 70px !important;
  padding: 0 0 var(--safe-b, 0px) !important;
  gap: 0 !important;
  border-top: 1.5px solid var(--bdr) !important;
  background: var(--bg1) !important;
  display: flex !important;
  align-items: stretch !important;
  position: relative !important;
}

.nav-btn {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  color: var(--tx3) !important;
  padding: 10px 0 6px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color .2s, background .2s !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ئایکۆنەکە */
.nav-btn .nicon {
  font-size: 24px !important;
  line-height: 1 !important;
  display: block !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1) !important;
}

/* تێکستی خوارەوە */
.nav-btn .nlbl,
.nav-btn > span:not(.nicon):not(.nav-badge) {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  padding: 0 3px !important;
  display: block !important;
}

/* چالاک بوون */
.nav-btn.on {
  color: var(--gold) !important;
  background: rgba(240,192,96,.06) !important;
}

.nav-btn.on .nicon {
  transform: translateY(-3px) scale(1.22) !important;
}

/* هێڵی سەرەوەی چالاک */
.nav-btn.on::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 18% !important;
  right: 18% !important;
  height: 3px !important;
  background: var(--gold) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 0 8px var(--gold3) !important;
}

/* جیاوازکردنی تاب‌ەکان */
.nav-btn + .nav-btn {
  border-right: 1px solid var(--bdr) !important;
}
[dir="ltr"] .nav-btn + .nav-btn {
  border-right: none !important;
  border-left: 1px solid var(--bdr) !important;
}

/* بەجگەی تاب‌ی هۆڤەر */
@media (hover: hover) {
  .nav-btn:not(.on):hover {
    background: rgba(255,255,255,.04) !important;
    color: var(--tx2) !important;
  }
}

/* ═══════════════════════════
   شۆپ — گەورەتر و جوانتر
═══════════════════════════ */
.shop-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 4px 0 !important;
}

.shop-item {
  padding: 20px 10px 14px !important;
  border-radius: 18px !important;
  border-width: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 130px !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .2s !important;
}

.shop-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
}

.si-preview {
  font-size: 40px !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 8px !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)) !important;
}

.si-name {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-align: center !important;
  line-height: 1.3 !important;
  margin: 0 0 5px !important;
  color: var(--tx) !important;
}

.si-price {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
  padding: 3px 10px !important;
  border-radius: var(--r-full) !important;
  background: rgba(240,192,96,.12) !important;
  border: 1px solid rgba(240,192,96,.25) !important;
}
.si-price.owned, .si-price.free {
  background: rgba(61,232,160,.1) !important;
  border-color: rgba(61,232,160,.3) !important;
}

/* فرەیم پریڤیو ناو شۆپدا */
.si-frame-preview {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
  font-size: 20px !important;
}

/* بەشی کۆین سەرەوەی شۆپ */
.shop-coins-bar {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}
.sc-val {
  font-size: 22px !important;
  font-weight: 900 !important;
}

/* گرد‌ی سەگمێنت */
.seg {
  border-radius: 12px !important;
  padding: 4px !important;
  gap: 4px !important;
}
.seg button {
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
}

/* ═══════════════════════════
   لۆبی — سکرۆڵی تەنظیمات
═══════════════════════════ */
#lobbyBox {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* کارت‌ی تەنظیمات ناو لۆبیدا */
#lobbyBox .card {
  overflow-y: auto !important;
  max-height: 55vh !important;
}

/* ═══════════════════════════
   گشتی — چاکسازی
═══════════════════════════ */

/* کارت‌ەکان گەورەتر */
.card {
  border-radius: 18px !important;
  padding: 16px !important;
}

/* دوگمەکانی گەورە */
.btn-lg {
  padding: 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  border-radius: 16px !important;
}

/* ڕیسپانسیڤ — دێسکتۆپ */
@media (min-width: 720px) {
  .shop-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #navBar {
    max-width: 560px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-left: 1px solid var(--bdr) !important;
    border-right: 1px solid var(--bdr) !important;
  }
}

/* مۆدی ڕووناکی */
[data-theme="light"] .nav-btn.on {
  background: rgba(200,155,60,.08) !important;
}
[data-theme="light"] .shop-item {
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}