/* V47: cartoon avatar boutique and secure Google Pay top-up UI. */
#main-menu-screen .profile-actions {
  position: relative !important;
  z-index: 80 !important;
  pointer-events: auto !important;
}

/* V52: one-screen compact commerce pages. */
body:not(.view-game) #shopModal.commerce-page,
body:not(.view-game) #topupModal.commerce-page {
  padding: clamp(6px,1.2vw,16px) !important;
  background:
    linear-gradient(135deg,rgba(3,25,82,.88),rgba(72,25,132,.78)),
    url('../assets/bg-main.png') center/cover no-repeat !important;
}
body:not(.view-game) #shopModal.commerce-page .shop-card,
body:not(.view-game) #topupModal.commerce-page .shop-card {
  width: min(1180px,97vw) !important;
  height: min(900px,96dvh) !important;
  max-height: 96dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(4px,.7vh,9px) !important;
  padding: clamp(9px,1.25vw,18px) !important;
  background:
    radial-gradient(circle at 8% 5%,rgba(65,225,255,.22),transparent 25%),
    radial-gradient(circle at 92% 92%,rgba(255,190,55,.2),transparent 25%),
    linear-gradient(145deg,rgba(8,67,163,.97),rgba(30,25,111,.97)) !important;
}
body:not(.view-game) .commerce-page .shop-header {
  flex: 0 0 auto !important;
  min-height: 68px !important;
  padding: 8px 150px 8px 14px !important;
}
body:not(.view-game) #shopModal .shop-balance-row {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 6px 9px !important;
}
body:not(.view-game) #shopModal .shop-section-title {
  flex: 0 0 auto !important;
  margin: 2px 0 !important;
  font-size: clamp(12px,1.4vw,17px) !important;
}
body:not(.view-game) #shopModal .special-grid {
  flex: 0 0 78px !important;
  display: block !important;
}
body:not(.view-game) #shopModal .special-grid .skin-card {
  height: 74px !important;
  display: grid !important;
  grid-template-columns: 52px 1fr auto 140px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 12px !important;
  text-align: left !important;
}
body:not(.view-game) #shopModal .special-grid .special-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-size: 25px !important;
}
body:not(.view-game) #shopModal .special-grid h4,
body:not(.view-game) #shopModal .special-grid p { margin: 0 !important; min-height: 0 !important; }
body:not(.view-game) #shopModal #skinGrid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,minmax(0,1fr)) !important;
  gap: clamp(5px,.8vw,10px) !important;
}
body:not(.view-game) #shopModal #skinGrid .skin-card {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(5px,.7vw,9px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
body:not(.view-game) #shopModal .skin-card > img.avatar-art {
  width: clamp(42px,5.5vh,66px) !important;
  height: clamp(42px,5.5vh,66px) !important;
  flex: 0 0 auto !important;
}
body:not(.view-game) #shopModal .skin-card h4 {
  margin: 5px 0 1px !important;
  font-size: clamp(11px,1.15vw,15px) !important;
}
body:not(.view-game) #shopModal .skin-card .avatar-desc { display: none !important; }
body:not(.view-game) #shopModal .skin-card .avatar-price {
  min-height: 18px !important;
  margin: 1px 0 4px !important;
  font-size: clamp(10px,1vw,13px) !important;
}
body:not(.view-game) #shopModal img.inline-coin,
body:not(.view-game) #shopModal .skin-card img.inline-coin,
body:not(.view-game) #shopModal .avatar-price img.inline-coin {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
}
body:not(.view-game) #shopModal #skinGrid .skin-card button {
  min-height: 28px !important;
  padding: 4px 6px !important;
  font-size: clamp(9px,.9vw,12px) !important;
}
body:not(.view-game) #topupModal .topup-card { justify-content: center !important; }
body:not(.view-game) #topupModal .topup-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: clamp(7px,1.2vw,15px) !important;
}
@media (max-width: 620px) and (orientation: portrait) {
  body:not(.view-game) #shopModal #skinGrid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: repeat(3,minmax(0,1fr)) !important;
  }
  body:not(.view-game) #shopModal .special-grid .skin-card {
    grid-template-columns: 40px 1fr 72px !important;
  }
  body:not(.view-game) #shopModal .special-grid .skin-card > p:not(.avatar-price) { display: none !important; }
  body:not(.view-game) #shopModal .special-grid .skin-card button { width: 72px !important; }
  body:not(.view-game) .commerce-page .shop-header { padding-right: 105px !important; }
  body:not(.view-game) .commerce-page .commerce-back-btn { min-width: 88px !important; font-size: 10px !important; }
}
@media (max-height: 520px) {
  body:not(.view-game) .commerce-page .shop-header { min-height: 48px !important; }
  body:not(.view-game) .commerce-page .shop-header p { display: none !important; }
  body:not(.view-game) #shopModal .special-grid { flex-basis: 55px !important; }
  body:not(.view-game) #shopModal .special-grid .skin-card { height: 52px !important; }
  body:not(.view-game) #shopModal .special-grid .special-icon { width: 34px !important; height: 34px !important; font-size: 19px !important; }
}
#main-menu-screen #shopBtn,
#main-menu-screen #topUpBtn {
  position: relative !important;
  z-index: 81 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
body.view-main > #shopModal.is-open,
body.view-main > #topupModal.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 50000 !important;
}
/* V51: CSS-only fallback for the native Shop and Top-up links. */
body.view-main > #shopModal:target,
body.view-main > #topupModal:target {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 50000 !important;
}
#main-menu-screen a.action-btn,
#shopModal a.close-shop-btn,
#topupModal a.close-shop-btn,
#shopModal a.shop-topup-inline {
  text-decoration: none !important;
}
.commerce-page {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow: hidden !important;
  align-items: center !important;
  justify-content: center !important;
}
.commerce-page .shop-card {
  overflow: auto !important;
  overscroll-behavior: contain !important;
}
.commerce-page .commerce-back-btn {
  width: auto !important;
  min-width: 124px !important;
  min-height: 44px !important;
  padding: 9px 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(255,255,255,.75) !important;
  border-radius: 14px !important;
  color: #102d72 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  background: linear-gradient(#fff,#dff5ff) !important;
  box-shadow: 0 5px 0 #73a9d3 !important;
}
body:not(.view-game) #shopModal,
body:not(.view-game) #topupModal {
  padding: clamp(8px,2vw,24px) !important;
  background: radial-gradient(circle at 12% 15%,rgba(53,220,255,.24),transparent 28%),radial-gradient(circle at 88% 82%,rgba(255,195,55,.22),transparent 27%),rgba(3,20,65,.82) !important;
  backdrop-filter: blur(12px) !important;
}
body:not(.view-game) #shopModal .shop-card,
body:not(.view-game) #topupModal .shop-card {
  width: min(1120px,96vw) !important;
  max-height: min(850px,94dvh) !important;
  padding: clamp(14px,2.3vw,28px) !important;
  border: 3px solid #62e6ff !important;
  border-radius: clamp(20px,3vw,34px) !important;
  color: #fff !important;
  background: radial-gradient(circle at 90% 0,rgba(116,74,255,.42),transparent 28%),linear-gradient(145deg,#0b42a2,#132276 70%) !important;
  box-shadow: 0 9px 0 #061748,0 28px 75px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28) !important;
  scrollbar-color: #5edfff rgba(4,23,75,.5) !important;
}
body:not(.view-game) #shopModal .shop-header,
body:not(.view-game) #topupModal .shop-header {
  position: relative !important;
  min-height: 92px !important;
  padding: 17px 78px 17px 22px !important;
  border: 2px solid rgba(133,238,255,.62) !important;
  border-radius: 21px !important;
  background: linear-gradient(135deg,rgba(24,125,232,.88),rgba(103,47,211,.9)) !important;
  box-shadow: 0 6px 0 rgba(4,25,86,.52),inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body:not(.view-game) #shopModal .shop-header::before { content: '🛍️' !important; margin-right: 15px !important; font-size: 45px !important; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)) !important; }
body:not(.view-game) #shopModal .shop-header h2,
body:not(.view-game) #topupModal .shop-header h2 { margin: 0 !important; color: #fff !important; font-size: clamp(24px,3.2vw,38px) !important; font-weight: 1000 !important; text-shadow: 0 3px 0 rgba(16,20,94,.55) !important; }
body:not(.view-game) #shopModal .shop-header p,
body:not(.view-game) #topupModal .shop-header p { margin: 4px 0 0 !important; color: #dff9ff !important; font-weight: 700 !important; }
body:not(.view-game) #shopModal .panel-kicker,
body:not(.view-game) #topupModal .panel-kicker { color: #ffe65c !important; font-weight: 1000 !important; }
body:not(.view-game) .close-shop-btn { position: absolute !important; top: 20px !important; right: 20px !important; width: 48px !important; height: 48px !important; border: 2px solid #fff !important; border-radius: 15px !important; color: #fff !important; font-size: 29px !important; background: linear-gradient(145deg,#ff6974,#d9325d) !important; box-shadow: 0 5px 0 #8d1d42 !important; }

body:not(.view-game) #shopModal .shop-balance-row { align-items: center !important; margin: 18px 0 12px !important; padding: 11px 13px !important; border: 2px solid rgba(255,255,255,.28) !important; border-radius: 17px !important; background: rgba(4,30,101,.58) !important; }
body:not(.view-game) #shopModal .coin-line { min-height: 42px !important; padding: 8px 13px !important; border-radius: 12px !important; color: #fff !important; font-size: 14px !important; font-weight: 850 !important; background: rgba(255,255,255,.12) !important; }
body:not(.view-game) #shopModal .coin-line strong { color: #ffe65a !important; font-size: 20px !important; }
.shop-topup-inline { min-height: 43px !important; margin-left: auto !important; padding: 8px 16px !important; border: 2px solid #fff19a !important; border-radius: 13px !important; color: #fff !important; font-weight: 950 !important; cursor: pointer !important; background: linear-gradient(135deg,#ffb51c,#f06a24) !important; box-shadow: 0 5px 0 #a73e13 !important; }
body:not(.view-game) #shopModal .shop-section-title { margin: 15px 0 10px !important; color: #fff !important; font-size: clamp(16px,2vw,22px) !important; font-weight: 1000 !important; text-shadow: 0 2px 0 rgba(0,0,0,.3) !important; }
body:not(.view-game) #shopModal .shop-section-title::before { content: '★'; margin-right: 8px; color: #ffe54d; }
body:not(.view-game) #shopModal .skin-grid { grid-template-columns: repeat(auto-fit,minmax(158px,1fr)) !important; gap: 14px !important; }
body:not(.view-game) #shopModal .skin-card { position: relative !important; padding: 14px !important; overflow: hidden !important; border: 2px solid #a8dbff !important; border-radius: 19px !important; color: #17336e !important; text-align: center !important; background: linear-gradient(145deg,#fff,#eaf6ff) !important; box-shadow: 0 6px 0 #6296c9,0 12px 22px rgba(0,0,0,.18) !important; transition: transform .18s ease,filter .18s ease !important; }
body:not(.view-game) #shopModal .skin-card:hover { transform: translateY(-4px) !important; filter: brightness(1.04) !important; }
body:not(.view-game) #shopModal .skin-card.selected { border-color: #ffe23d !important; background: linear-gradient(145deg,#fffbd1,#ffe57f) !important; box-shadow: 0 6px 0 #c88e0f,0 0 25px rgba(255,220,45,.4) !important; }
body:not(.view-game) #shopModal .skin-card > img { width: 88px !important; height: 88px !important; padding: 8px !important; border: 3px solid #fff !important; border-radius: 50% !important; background: linear-gradient(145deg,#dff8ff,#fff) !important; box-shadow: 0 5px 0 #b6d0e4,0 9px 15px rgba(36,75,118,.18) !important; }
body:not(.view-game) #shopModal .skin-card h4 { margin: 11px 0 3px !important; color: #122c68 !important; font-size: 16px !important; font-weight: 1000 !important; }
body:not(.view-game) #shopModal .skin-card .avatar-desc { min-height: 34px !important; margin: 0 0 7px !important; color: #5d6c8b !important; font-size: 11px !important; font-weight: 650 !important; }
body:not(.view-game) #shopModal .skin-card .avatar-price { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 28px !important; margin: 0 0 8px !important; color: #a84d00 !important; font-size: 15px !important; font-weight: 1000 !important; }
body:not(.view-game) #shopModal .skin-card button { min-height: 39px !important; border: 1px solid rgba(255,255,255,.72) !important; border-radius: 11px !important; color: #fff !important; font-weight: 900 !important; box-shadow: 0 4px 0 #173c9c !important; background: linear-gradient(135deg,#2589ef,#4455df) !important; }
body:not(.view-game) #shopModal .skin-card .selected-btn { background: linear-gradient(135deg,#31c76a,#10a4a1) !important; box-shadow: 0 4px 0 #08795d !important; }
body:not(.view-game) #shopModal .skin-card .owned-btn { background: linear-gradient(135deg,#8e55ea,#6040ca) !important; box-shadow: 0 4px 0 #3b278c !important; }

body:not(.view-game) #topupModal .topup-intro { margin: 18px 0 !important; border: 2px solid rgba(112,229,255,.5) !important; border-radius: 18px !important; color: #fff !important; background: rgba(4,32,103,.58) !important; }
body:not(.view-game) #topupModal .topup-intro p { color: #fff !important; }
body:not(.view-game) #topupModal .topup-intro small { color: #bdeeff !important; }
body:not(.view-game) #topupModal .topup-package { border: 3px solid #bcecff !important; border-radius: 22px !important; color: #17336e !important; background: linear-gradient(145deg,#fff,#eaf7ff) !important; box-shadow: 0 7px 0 #5695c7,0 14px 25px rgba(0,0,0,.2) !important; }
body:not(.view-game) #topupModal .topup-package:nth-child(2) { border-color: #ffe253 !important; background: linear-gradient(145deg,#fffbd7,#ffe889) !important; box-shadow: 0 7px 0 #c88c13,0 0 24px rgba(255,215,45,.3) !important; }
body:not(.view-game) #topupModal .google-pay-btn { min-height: 50px !important; border: 2px solid #fff !important; border-radius: 14px !important; color: #fff !important; font-weight: 950 !important; background: linear-gradient(135deg,#151515,#343434) !important; box-shadow: 0 5px 0 #000 !important; }
.payment-security-note { margin: 17px 0 0 !important; padding: 11px 14px !important; border: 1px solid rgba(116,239,255,.52) !important; border-radius: 13px !important; color: #d8f7ff !important; font-size: 12px !important; font-weight: 650 !important; background: rgba(0,21,71,.52) !important; }

@media (max-width:700px), (max-height:560px) {
  body:not(.view-game) #shopModal .shop-card,body:not(.view-game) #topupModal .shop-card { max-height: 96dvh !important; padding: 10px !important; border-width: 2px !important; border-radius: 16px !important; }
  body:not(.view-game) #shopModal .shop-header,body:not(.view-game) #topupModal .shop-header { min-height: 60px !important; padding: 8px 48px 8px 11px !important; border-radius: 13px !important; }
  body:not(.view-game) #shopModal .shop-header::before { display: none !important; }
  body:not(.view-game) #shopModal .shop-header h2,body:not(.view-game) #topupModal .shop-header h2 { font-size: 19px !important; }
  body:not(.view-game) #shopModal .shop-header p,body:not(.view-game) #topupModal .shop-header p { font-size: 10px !important; }
  body:not(.view-game) .close-shop-btn { top: 10px !important; right: 10px !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 22px !important; }
  body:not(.view-game) #shopModal .shop-balance-row { margin: 9px 0 7px !important; padding: 6px !important; gap: 6px !important; }
  body:not(.view-game) #shopModal .coin-line { min-height: 31px !important; padding: 4px 7px !important; font-size: 10px !important; }
  body:not(.view-game) #shopModal .coin-line strong { font-size: 13px !important; }
  .shop-topup-inline { min-height: 33px !important; padding: 4px 9px !important; font-size: 10px !important; }
  body:not(.view-game) #shopModal .shop-section-title { margin: 8px 0 5px !important; font-size: 13px !important; }
  body:not(.view-game) #shopModal .skin-grid { grid-template-columns: repeat(auto-fit,minmax(112px,1fr)) !important; gap: 7px !important; }
  body:not(.view-game) #shopModal .skin-card { padding: 7px !important; border-radius: 12px !important; box-shadow: 0 3px 0 #6296c9 !important; }
  body:not(.view-game) #shopModal .skin-card > img { width: 49px !important; height: 49px !important; padding: 4px !important; border-width: 2px !important; box-shadow: 0 3px 0 #b6d0e4 !important; }
  body:not(.view-game) #shopModal .skin-card h4 { margin: 5px 0 1px !important; font-size: 11px !important; }
  body:not(.view-game) #shopModal .skin-card .avatar-desc { display: none !important; }
  body:not(.view-game) #shopModal .skin-card .avatar-price { min-height: 18px !important; margin-bottom: 4px !important; font-size: 10px !important; }
  body:not(.view-game) #shopModal .skin-card button { min-height: 28px !important; padding: 3px !important; font-size: 9px !important; box-shadow: 0 2px 0 #173c9c !important; }
  body:not(.view-game) #topupModal .topup-intro { margin: 8px 0 !important; padding: 7px !important; }
  body:not(.view-game) #topupModal .topup-grid { grid-template-columns: repeat(3,1fr) !important; gap: 7px !important; }
  body:not(.view-game) #topupModal .topup-package { padding: 9px 5px !important; border-width: 2px !important; border-radius: 12px !important; box-shadow: 0 3px 0 #5695c7 !important; }
  body:not(.view-game) #topupModal .topup-points { font-size: 13px !important; }
  body:not(.view-game) #topupModal .topup-price { margin: 4px 0 6px !important; font-size: 10px !important; }
  body:not(.view-game) #topupModal .google-pay-btn { min-height: 31px !important; padding: 3px !important; font-size: 8px !important; box-shadow: 0 2px 0 #000 !important; }
  .payment-security-note { margin-top: 8px !important; padding: 6px !important; font-size: 8px !important; }
}

/* V53: final coin guard and four compact special items. */
body:not(.view-game) #shopModal img[src*="coin-icon.svg"],
body:not(.view-game) #topupModal img[src*="coin-icon.svg"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body:not(.view-game) #shopModal .special-grid {
  flex: 0 0 92px !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 7px !important;
}
body:not(.view-game) #shopModal .special-grid .special-item-card {
  width: auto !important;
  height: 88px !important;
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: 1fr auto !important;
  gap: 3px 7px !important;
  padding: 6px 8px !important;
  text-align: left !important;
}
body:not(.view-game) #shopModal .special-grid .special-icon {
  grid-row: 1 / 3 !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 20px !important;
  align-self: center !important;
}
body:not(.view-game) #shopModal .special-grid .special-copy h4 {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}
body:not(.view-game) #shopModal .special-grid .special-copy small {
  color: #66749a !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}
body:not(.view-game) #shopModal .special-grid .avatar-price {
  justify-content: flex-start !important;
  margin: 0 !important;
  font-size: 10px !important;
}
body:not(.view-game) #shopModal .special-grid button {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  width: 48px !important;
  min-height: 23px !important;
  padding: 2px !important;
  font-size: 9px !important;
}
@media (max-width: 720px) {
  body:not(.view-game) #shopModal .special-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: repeat(2,minmax(0,1fr)) !important;
    flex-basis: 124px !important;
  }
  body:not(.view-game) #shopModal .special-grid .special-item-card { height: 58px !important; }
}