/* Shop is a full-screen route outside PlayerShell. The document/root are locked
   globally, so the Shop itself must own the vertical scroll surface on iOS.
   Keep exactly one Shop scroller and account for the native status-bar safe area. */

.procoin-shop {
  box-sizing: border-box !important;
  position: relative !important;
  width: min(100%, 430px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin-inline: auto !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none;
  padding-bottom: calc(112px + max(var(--sab, 0px), env(safe-area-inset-bottom, 0px))) !important;
  background-color: #020403 !important;
}

.procoin-shop::-webkit-scrollbar { display: none; }

/* The Shop header is sticky inside the Shop scroller. In the native iOS app the
   route renders under the status bar, so reserve the safe area once here. */
.procoin-shop .shop-game-header {
  top: 0 !important;
  min-height: calc(78px + max(var(--sat, 0px), env(safe-area-inset-top, 0px))) !important;
  padding-top: calc(12px + max(var(--sat, 0px), env(safe-area-inset-top, 0px))) !important;
  padding-bottom: 12px !important;
  padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
}

/* The Shop is a primary destination, not a modal/detail screen. Never expose a
   back affordance here, including any legacy header class left by older builds. */
.procoin-shop .procoin-shop-back {
  display: none !important;
}

/* Clean storefront header: two quick actions on the left, centered brand,
   wallet on the right. The profile/avatar button used to make the row feel like
   another navigation control and squeezed the title, so it is intentionally
   removed from this header. Profile remains available from the app navigation. */
.procoin-shop .shop-game-header {
  direction: ltr !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "actions brand wallet" !important;
  column-gap: 16px !important;
  align-items: center !important;
}

.procoin-shop .shop-player-cluster {
  grid-area: wallet !important;
  justify-self: end !important;
  gap: 0 !important;
}

.procoin-shop .shop-avatar {
  display: none !important;
}

.procoin-shop .shop-game-brand {
  grid-area: brand !important;
  justify-self: center !important;
  text-align: center !important;
  font-size: 12px !important;
  letter-spacing: .055em !important;
}

.procoin-shop .shop-header-actions {
  grid-area: actions !important;
  justify-self: start !important;
  display: flex !important;
  gap: 8px !important;
}

.procoin-shop .shop-header-actions button {
  width: 52px !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
}

.procoin-shop .shop-header-actions span {
  font-size: 8px !important;
}

.procoin-shop .shop-wallet {
  min-width: 104px !important;
  height: 44px !important;
  gap: 7px !important;
  padding: 0 7px 0 12px !important;
}

.procoin-shop .shop-wallet strong {
  font-size: 16px !important;
}

.procoin-shop .shop-wallet button {
  width: 30px !important;
  height: 30px !important;
}

/* Horizontal rails may scroll sideways but must never widen or steal vertical
   touch gestures from the page. */
.procoin-shop .shop-category-bar,
.procoin-shop .shop-new-rail,
.procoin-shop .shop-pack-row {
  min-width: 0;
  max-width: 100%;
  touch-action: pan-x pan-y !important;
}

.procoin-shop .shop-feature-grid,
.procoin-shop .shop-section,
.procoin-shop .procoin-economy-note {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 430px) {
  .procoin-shop {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .procoin-shop .shop-game-header {
    column-gap: 10px !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  .procoin-shop .shop-header-actions {
    gap: 6px !important;
  }

  .procoin-shop .shop-header-actions button {
    width: 48px !important;
    min-height: 48px !important;
  }

  .procoin-shop .shop-game-brand {
    font-size: 10.5px !important;
  }

  .procoin-shop .shop-wallet {
    min-width: 94px !important;
    height: 42px !important;
    padding-left: 10px !important;
  }

  .procoin-shop .shop-wallet strong {
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .procoin-shop .shop-game-header {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 7px !important;
  }

  .procoin-shop .shop-header-actions button {
    width: 44px !important;
  }

  .procoin-shop .shop-header-actions span {
    font-size: 7px !important;
  }

  .procoin-shop .shop-game-brand {
    font-size: 9.5px !important;
  }

  .procoin-shop .shop-wallet {
    min-width: 86px !important;
    height: 40px !important;
  }
}

@supports not (height: 100dvh) {
  .procoin-shop {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
}