/* ============================================================
   @voltedge/ui — Shop (cosmetics) — SHARED look across games.
   Slide-in panel from the right with category grids and item cards
   (premium badge · icon/swatch · name · price · Buy/Equip button).
   Self-contained palette so the shop looks identical in every game.
   Markup is produced by shop.js (window.VEShop.render). Reusable: include
   this CSS + shop.js and keep the #shop-panel shell in index.html.
   ============================================================ */

#shop-overlay {
  position: absolute; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(1.5px);
}
#shop-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 88vw);
  z-index: 91; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0b1320, #0a0f18);
  border-left: 2px solid rgba(60, 170, 230, 0.6);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.6);
  transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
#shop-panel.open { transform: translateX(0); }

.shop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid rgba(60, 120, 170, 0.35);
}
.shop-title { font: 800 18px/1 system-ui, sans-serif; letter-spacing: 3px; color: #cfeeff; }
.shop-balance { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #bfe9ff; font-weight: 700; }
.shop-balance img { width: 22px; height: 22px; }
#shop-close { background: transparent; border: 0; color: #9fb3c8; font-size: 20px; cursor: pointer; padding: 4px 6px; line-height: 1; }
#shop-close:hover { color: #fff; }

#shop-body { overflow-y: auto; padding: 12px 14px 24px; }
.shop-cat-title { color: #7ad0ff; font: 700 12px/1 system-ui, sans-serif; letter-spacing: 2px; margin: 16px 4px 8px; text-transform: uppercase; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.shop-item {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(80, 120, 160, 0.4);
  border-radius: 12px; padding: 10px; text-align: center; position: relative;
}
.shop-item .si-art {
  width: 64px; height: 64px; margin: 2px auto 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden;
}
.shop-item .si-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-item .si-swatch { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.5); box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
.shop-item .si-art--empty { background: rgba(255,255,255,0.05); color: #6f8aa6; font-size: 22px; }
.shop-item .si-name { color: #e8f6ff; font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.shop-item .si-price { color: #ffd11a; font-size: 13px; font-weight: 800; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.shop-item .si-price img { width: 16px; height: 16px; }
.shop-item.premium { border-color: rgba(255, 200, 40, 0.7); box-shadow: 0 0 14px rgba(255, 200, 40, 0.25); }
.shop-item .si-badge { position: absolute; top: 6px; right: 6px; font-size: 9px; color: #ffd11a; letter-spacing: 1px; font-weight: 700; }
.shop-item .si-btn {
  margin-top: 8px; width: 100%; padding: 7px; border-radius: 7px; cursor: pointer;
  border: 1px solid #3caae6; background: #0d1828; color: #bfe9ff; font: 700 12px system-ui, sans-serif;
}
.shop-item .si-btn:hover { box-shadow: 0 0 10px #3caae6; }
.shop-item.owned .si-btn { border-color: #3ce678; color: #3ce678; }
.shop-item.equipped .si-btn { background: #15351f; border-color: #3ce678; color: #aaffcc; cursor: default; }
/* Not enough Voltium → buy button greyed out and not clickable. */
.shop-item .si-btn--locked { border-color: #444c57; background: #14181d; color: #6b7682; cursor: not-allowed; }
.shop-item .si-btn--locked:hover { box-shadow: none; }

#shop-panel.hidden, #shop-overlay.hidden { display: none; }