/* Final layout overrides kept separate from the legacy cascade. */
#fortuneView .fortune-stage {
  min-height: 510px !important;
  overflow: visible !important;
}
#fortuneView .fortune-arc-viewport {
  --prize-radius: 520px !important;
  width: 100% !important;
  max-width: none !important;
  height: 510px !important;
  overflow: hidden !important;
  mask-image: none !important;
}
#fortuneView .fortune-arc-art {
  top: 0 !important;
  left: 50% !important;
  width: 1040px !important;
  height: 520px !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  clip-path: none !important;
}
#fortuneView .fortune-arc-track,
#fortuneView .fortune-segments {
  top: 4px !important;
  left: 50% !important;
  width: 1040px !important;
  height: 1040px !important;
  margin-left: -520px !important;
}
#fortuneView .fortune-segment,
#fortuneView .fortune-segment:nth-child(n) {
  top: 50% !important;
  left: 50% !important;
  width: 252px !important;
  height: 218px !important;
  margin: 0 0 0 -126px !important;
  transform-origin: 50% 0 !important;
  transform: rotate(var(--angle)) translateY(-520px) !important;
}
#fortuneView .fortune-segment-content {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  mask: url("fortune/sector-mask.svg?v=3") center / 100% 100% no-repeat !important;
}
#fortuneView .fortune-segment-content img {
  position: absolute !important;
  top: 8% !important;
  left: 15% !important;
  width: 70% !important;
  height: 62% !important;
  margin: 0 !important;
  object-fit: contain !important;
}
#fortuneView .fortune-segment-content small { display: none !important; }
#fortuneView .fortune-arc-label {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}
#fortuneView .fortune-arc-label text {
  fill: #d9dce3 !important;
  font: 500 32px Inter, Arial, sans-serif !important;
}
#fortuneView .fortune-arc-viewport .fortune-pointer {
  top: 218px !important;
  left: 50% !important;
  width: 30px !important;
  height: 27px !important;
  transform: translateX(-50%) !important;
}
#fortuneView .fortune-center {
  top: 260px !important;
  width: 280px !important;
}

#shopGrid, #targetGrid, #ownedGrid,
.skin-grid, .shop-grid {
  grid-auto-rows: 118px !important;
  align-content: start !important;
}
#shopGrid .skin-card, #targetGrid .skin-card, #ownedGrid .skin-card,
.skin-grid .skin-card, .shop-grid .skin-card {
  height: 118px !important;
  min-height: 118px !important;
  padding: 6px 7px !important;
}
#shopGrid .skin-card .skin-art, #targetGrid .skin-card .skin-art, #ownedGrid .skin-card .skin-art,
.skin-grid .skin-card .skin-art, .shop-grid .skin-card .skin-art {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  height: 62px !important;
  min-height: 0 !important;
}
#shopGrid .skin-card .skin-image, #targetGrid .skin-card .skin-image, #ownedGrid .skin-card .skin-image,
.skin-grid .skin-card .skin-image, .shop-grid .skin-card .skin-image {
  max-height: 58px !important;
  object-fit: contain !important;
}
#shopGrid .skin-card strong, #targetGrid .skin-card strong, #ownedGrid .skin-card strong,
.skin-grid .skin-card strong, .shop-grid .skin-card strong {
  margin-top: 2px !important;
  font-size: 8px !important;
  line-height: 11px !important;
}
#shopGrid .skin-card small, #targetGrid .skin-card small, #ownedGrid .skin-card small,
.skin-grid .skin-card small, .shop-grid .skin-card small {
  margin-top: 1px !important;
  font-size: 7px !important;
  line-height: 9px !important;
}
#shopGrid .skin-card em, #targetGrid .skin-card em, #ownedGrid .skin-card em,
.skin-grid .skin-card em, .shop-grid .skin-card em {
  right: 7px !important;
  bottom: 6px !important;
  font-size: 8px !important;
}

@media (max-width: 650px) {
  #fortuneView .fortune-stage { min-height: 430px !important; }
  #fortuneView .fortune-arc-viewport {
    --prize-radius: 470px !important;
    width: 100% !important;
    height: 430px !important;
  }
  #fortuneView .fortune-arc-art {
    width: 940px !important;
    height: 470px !important;
  }
  #fortuneView .fortune-arc-track,
  #fortuneView .fortune-segments {
    width: 940px !important;
    height: 940px !important;
    margin-left: -470px !important;
  }
  #fortuneView .fortune-segment,
  #fortuneView .fortune-segment:nth-child(n) {
    width: 227px !important;
    height: 196px !important;
    margin-left: -113.5px !important;
    transform: rotate(var(--angle)) translateY(-470px) !important;
  }
  #fortuneView .fortune-arc-viewport .fortune-pointer {
    top: 196px !important;
    width: 30px !important;
    height: 27px !important;
  }
  #fortuneView .fortune-center {
    top: 238px !important;
    width: 240px !important;
  }
  #shopGrid, #targetGrid, #ownedGrid,
  .skin-grid, .shop-grid { grid-auto-rows: 116px !important; }
  #shopGrid .skin-card, #targetGrid .skin-card, #ownedGrid .skin-card,
  .skin-grid .skin-card, .shop-grid .skin-card {
    height: 116px !important;
    min-height: 116px !important;
    padding: 6px 7px !important;
  }
  #shopGrid .skin-card:nth-child(n+16) { display: none !important; }
}

/* Profile history and bonus cleanup 2026-10-08 */
@media (min-width: 901px) {
  #profileView .profile-inventory-shell.history-mode .profile-items {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: 154px !important;
    gap: 10px !important;
    padding: 12px !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: start !important;
  }
  #profileView .profile-inventory-shell.history-mode .profile-items > .history-skin-card,
  #profileView .profile-inventory-shell.history-mode .profile-items > .skin-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 154px !important;
    min-height: 154px !important;
    padding: 7px 7px 34px !important;
    overflow: hidden !important;
  }
  #profileView .profile-inventory-shell.history-mode .history-skin-card .skin-art,
  #profileView .profile-inventory-shell.history-mode .skin-card .skin-art {
    height: 86px !important;
    min-height: 0 !important;
  }
}
#profileView .profile-inventory-shell.history-mode .profile-history-more {
  display: block !important;
  width: 180px !important;
  margin: 12px auto 20px !important;
}
#profileView .profile-inventory-shell.bonus-mode .profile-history-more,
#profileView .profile-inventory-shell.bonus-mode button[class*="more"],
#profileView .profile-inventory-shell.bonus-mode [id*="More"] {
  display: none !important;
}
#fortuneView .fortune-head {
  justify-content: flex-start !important;
  gap: 10px !important;
}
#fortuneView .fortune-head h2 { margin: 0 !important; }
#fortuneView .fortune-head #fortuneHelp {
  position: static !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
#fortuneView .fortune-help-popover ol { margin: 8px 0 0 20px; padding: 0; text-align: left; }
#fortuneView .fortune-help-popover li { margin: 5px 0; }
@media (max-width: 900px) {
  #profileView .profile-inventory-shell.history-mode .profile-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 164px !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #profileView .profile-inventory-shell.history-mode .history-skin-card,
  #profileView .profile-inventory-shell.history-mode .skin-card {
    width: 100% !important;
    max-width: none !important;
    height: 164px !important;
    min-height: 164px !important;
    padding: 7px 6px 34px !important;
  }
}

#profileView .profile-items.profile-bonuses ~ .profile-history-more { display:none !important; }

/* Final readable catalog cards and taller empty profile panels */
#profileView .profile-inventory-shell:not(.history-mode) .profile-items.is-empty,
#profileView .profile-items.profile-bonuses:has(.profile-bonuses-empty) {
  min-height: 270px !important;
  height: 270px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}
#profileView .profile-bonuses-empty { min-height: 230px !important; height: 230px !important; display:grid !important; place-items:center !important; }
#profileView .profile-bonuses-empty > div { transform: translateY(-2px); }

/* Keep each catalog card in distinct price / art / name / wear zones. */
#shopGrid .skin-card, #targetGrid .skin-card, #ownedGrid .skin-card,
.skin-grid .skin-card, .shop-grid .skin-card {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-rows: 18px minmax(48px,1fr) 25px 13px !important;
  gap: 2px !important;
  height: 136px !important;
  min-height: 136px !important;
  padding: 5px 6px !important;
  overflow: hidden !important;
  align-items: stretch !important;
}
#shopGrid .skin-card > em, #targetGrid .skin-card > em, #ownedGrid .skin-card > em,
.skin-grid .skin-card > em, .shop-grid .skin-card > em {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
  line-height: 16px !important;
  z-index: 3 !important;
}
#shopGrid .skin-card .skin-art, #targetGrid .skin-card .skin-art, #ownedGrid .skin-card .skin-art,
.skin-grid .skin-card .skin-art, .shop-grid .skin-card .skin-art {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  inset: auto !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
}
#shopGrid .skin-card .skin-art .skin-image, #targetGrid .skin-card .skin-art .skin-image,
#ownedGrid .skin-card .skin-art .skin-image, .skin-grid .skin-card .skin-art .skin-image,
.shop-grid .skin-card .skin-art .skin-image {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}
#shopGrid .skin-card > strong, #targetGrid .skin-card > strong, #ownedGrid .skin-card > strong,
.skin-grid .skin-card > strong, .shop-grid .skin-card > strong {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 25px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  display: -webkit-box !important;
  align-self: center !important;
  overflow: hidden !important;
  color: #f3f8f5 !important;
  font-size: 9px !important;
  line-height: 12px !important;
  text-align: center !important;
  white-space: normal !important;
  text-overflow: clip !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
#shopGrid .skin-card > small, #targetGrid .skin-card > small, #ownedGrid .skin-card > small,
.skin-grid .skin-card > small, .shop-grid .skin-card > small {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 4 !important;
  width: 100% !important;
  height: 13px !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #92a69c !important;
  font-size: 7px !important;
  line-height: 11px !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 650px) {
  #shopGrid .skin-card, #targetGrid .skin-card, #ownedGrid .skin-card,
  .skin-grid .skin-card, .shop-grid .skin-card {
    grid-template-rows: 17px minmax(48px,1fr) 25px 12px !important;
    height: 136px !important;
    min-height: 136px !important;
  }
}

/* Weapon renderer uses .weapon instead of an image: keep it centered in the art row. */
#shopGrid .skin-card .skin-art .weapon, #targetGrid .skin-card .skin-art .weapon,
#ownedGrid .skin-card .skin-art .weapon, .skin-grid .skin-card .skin-art .weapon,
.shop-grid .skin-card .skin-art .weapon {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  display: block !important;
  width: 92% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  transform: rotate(-7deg) !important;
  overflow: visible !important;
}
#shopGrid .skin-card .skin-art .weapon:before, #targetGrid .skin-card .skin-art .weapon:before,
#ownedGrid .skin-card .skin-art .weapon:before, .skin-grid .skin-card .skin-art .weapon:before,
.shop-grid .skin-card .skin-art .weapon:before {
  top: 12px !important;
}

/* Actual profile history renderer uses boost-history-row. */
#profileView .profile-inventory-shell.history-mode .profile-items {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-auto-rows: 154px !important;
  gap: 10px !important;
  padding: 12px !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}
#profileView .profile-inventory-shell.history-mode .profile-items > .boost-history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 76px minmax(0, 1fr) 20px !important;
  gap: 2px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 154px !important;
  min-height: 154px !important;
  padding: 7px !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-art {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 76px !important;
  min-height: 0 !important;
  border-radius: 10px !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-art img,
#profileView .profile-inventory-shell.history-mode .boost-history-art .weapon {
  width: 90% !important;
  height: 70px !important;
  max-width: 100% !important;
  max-height: 70px !important;
  object-fit: contain !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  overflow: hidden !important;
  text-align: center !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-copy > b {
  width: 100% !important;
  max-height: 26px !important;
  overflow: hidden !important;
  font-size: 9px !important;
  line-height: 12px !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  text-align: center !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-copy > small,
#profileView .profile-inventory-shell.history-mode .boost-history-copy > .boost-history-status {
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: 7px !important;
  line-height: 10px !important;
}
#profileView .profile-inventory-shell.history-mode .boost-history-price {
  grid-column: 1 !important;
  grid-row: 3 !important;
  align-self: end !important;
  width: 100% !important;
  font-size: 10px !important;
  line-height: 17px !important;
  text-align: center !important;
}
#profileView .profile-inventory-shell:not(.history-mode) .profile-empty-center,
#profileView .profile-inventory-shell:not(.history-mode) .owned-login-empty {
  min-height: 270px !important;
  height: 270px !important;
}
@media (max-width: 900px) {
  #profileView .profile-inventory-shell.history-mode .profile-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 158px !important;
    gap: 8px !important;
  }
  #profileView .profile-inventory-shell.history-mode .profile-items > .boost-history-row {
    height: 158px !important;
    min-height: 158px !important;
  }
}