/* ═══════════════════════════════════════════════════════════════════════════
   STORE SCREEN — image-map skin approach
   Background: StoreScreenBlank.png (full-screen, stretched 100% × 100%)
   Layer 1: shop-slot divs housing item card PNGs in the 4 gold-border slots
   Layer 2: transparent .shop-buy-hit buttons over each card's gold buy area
   Layer 3: .shop-tab hit zones over each bottom category tab
   Layer 4: .shop-close hit zone over the × in top-right

   Debug: document.getElementById('screen-store').classList.add('shop-debug')
═══════════════════════════════════════════════════════════════════════════ */

#screen-store {
  background: url("../assets/Shop/StoreScreenBlank.webp") center / 100% 100% no-repeat;
  overflow: hidden;
  /* position: absolute + inset: 0 come from .screen — do NOT override with relative */
}

/* HUD: home skin's real HUD bar shines through above the shop panel — no overlay needed */

/* ── 4 card slots ─────────────────────────────────────────────────────────── */

.shop-slot {
  position: absolute;
  top: 10%;
  height: 75%;
  overflow: hidden;
  border-radius: 4px;
}

.shop-slot[data-slot="0"] { left: 2.2%;  width: 23%; }
.shop-slot[data-slot="1"] { left: 26.2%; width: 23%; }
.shop-slot[data-slot="2"] { left: 50.2%; width: 23%; }
.shop-slot[data-slot="3"] { left: 74.2%; width: 23%; }

.shop-slot.hidden { visibility: hidden; }

/* The item card PNG fills the slot */
.shop-card-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
}

/* ── Buy hit zone ─────────────────────────────────────────────────────────── */
/* Covers the gold button at the bottom of each card PNG */

.shop-buy-hit {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 12%;
  background: transparent;
  border: none;
  padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  transition: opacity 0.08s ease;
  transform-origin: center bottom;
  transition: transform 0.07s ease;
}
.shop-buy-hit:active  { transform: scale(0.94); }
.shop-buy-hit.owned   { cursor: default; opacity: 0.5; }
.shop-buy-hit.broke   { cursor: default; opacity: 0.4; }
.shop-buy-hit.loading { opacity: 0.3; pointer-events: none; }

/* ── Category tabs ─────────────────────────────────────────────────────────── */

.shop-tab {
  position: absolute;
  top: 87%;
  height: 12%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: clamp(6px, 1vw, 10px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(212,175,55,0.5);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, transform 0.07s;
  z-index: 4;
}
.shop-tab:active     { transform: scale(0.92); }
.shop-tab.active     { color: #D4AF37; text-shadow: 0 0 12px rgba(212,175,55,0.5); }

/* Evenly spread across the bottom bar */
.shop-tab[data-cat="featured"]  { left: 2%;    width: 15.5%; }
.shop-tab[data-cat="tools"]     { left: 17.5%; width: 15.5%; }
.shop-tab[data-cat="glassware"] { left: 33%;   width: 15.5%; }
.shop-tab[data-cat="garnishes"] { left: 48.5%; width: 15.5%; }
.shop-tab[data-cat="decor"]     { left: 64%;   width: 15.5%; }
.shop-tab[data-cat="currency"]  { left: 80%;   width: 18%; }

/* ── Close button ─────────────────────────────────────────────────────────── */

.shop-close {
  position: absolute;
  top: 1%;
  right: 0.5%;
  width: 5%;
  height: 9%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: clamp(14px, 2.5vw, 24px);
  color: rgba(255,255,255,0.65);
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s, transform 0.07s;
}
.shop-close:active { transform: scale(0.88); color: #fff; }

/* ── Toast ────────────────────────────────────────────────────────────────── */

.shop-toast {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,6,2,0.92);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 20px;
  padding: 8px 18px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  color: #D4AF37;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.shop-toast.visible { opacity: 1; }
.shop-toast.error   { color: #ff6b6b; border-color: rgba(255,107,107,0.4); }
.shop-toast.success { color: #6bffb8; border-color: rgba(107,255,184,0.4); }

/* ── Debug: outline hit zones ─────────────────────────────────────────────── */

#screen-store.shop-debug .shop-slot    { outline: 2px solid rgba(0,200,255,0.7); }
#screen-store.shop-debug .shop-buy-hit { background: rgba(0,255,0,0.15); outline: 1px solid lime; }
#screen-store.shop-debug .shop-tab     { background: rgba(255,0,255,0.15); outline: 1px solid magenta; }
#screen-store.shop-debug .shop-close   { background: rgba(255,165,0,0.2);  outline: 1px solid orange; }