/* THE OUTFIT STORE — the live #shop screen (store on), the buy confirm, and the wardrobe's price
   badges. Kept out of style.css so the shared stylesheet stays untouched while other agents work in
   it. Everything here is scoped to .store-* / #shop.store-on / [data-price], so with the store OFF
   none of it matches anything. Visual language follows the existing shop scaffold (style.css «SHOP»). */

/* gem packs */
#shop.store-on .store-pack { position: relative; cursor: pointer; font: inherit; color: inherit; }
#shop.store-on .store-pack b { font-size: 16px; color: #9fe0ff; }
#shop.store-on .store-pack .store-ils { font: 900 11px "Arial Black", sans-serif; color: #fff4ca; }
#shop.store-on .store-pack:disabled { cursor: default; opacity: .78; }
.store-note { margin-top: 8px; text-align: center; font: 800 11px "Arial Black", sans-serif; color: #c9b8ff; }

/* outfits: one row per hero, 4 tiles (hero · gold · holo · signature) */
.store-hero { width: 100%; margin-bottom: 10px; }
.store-hero-name { font: 900 13px "Arial Black", sans-serif; color: #fff4ca; margin: 0 2px 5px; }
.store-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.store-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px 6px; cursor: pointer; font: inherit; color: inherit; min-width: 0;
  background: rgba(19,27,22,.94); border: 3px solid #46543f; box-shadow: 0 4px 0 #070b08; }
.store-tile canvas { width: 50px; height: 60px; image-rendering: pixelated; }
.store-tile-name { font: 900 10px "Arial Black", sans-serif; color: #b8c6ba; }
.store-tile-tag { font: 900 11px "Arial Black", sans-serif; color: #9fe0ff; white-space: nowrap; }
.store-tile.r-Rare { border-color: #8a6a1f; }
.store-tile.r-Epic { border-color: #6b5aa0; }
.store-tile.r-Legendary { border-color: #b8661f; }
.store-tile.owned .store-tile-tag { color: #8fe08a; }
.store-tile.worn { border-color: #ffd24d; background: #2a352b; }
.store-tile.worn .store-tile-tag { color: #ffd24d; }
.store-tile.needhero canvas { filter: brightness(0) grayscale(1); opacity: .45; }
.store-tile.needhero::after { content: '🔒'; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: 18px; }

/* buy confirm — above the wardrobe (.picker z 80) so it works when opened from there */
.store-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,4,.72); }
.store-modal.hidden { display: none; }
.store-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 220px; max-width: 86vw;
  padding: 16px 18px; background: rgba(19,27,22,.98); border: 3px solid #6b5aa0; box-shadow: 0 6px 0 #070b08; }
.store-card-art { width: 90px; height: 108px; image-rendering: pixelated; }
.store-card-title { font: 900 15px "Arial Black", sans-serif; color: #fff4ca; text-align: center; }
.store-card-price { font: 900 18px "Arial Black", sans-serif; color: #9fe0ff; }
.store-card-bal { font: 800 11px "Arial Black", sans-serif; color: #c9b8ff; }
.store-card-btns { display: flex; gap: 10px; margin-top: 6px; }
.store-card-btns button { font: 900 14px "Arial Black", sans-serif; padding: 9px 18px; border: 0; cursor: pointer;
  box-shadow: 0 4px 0 #070b08; }
.store-buy { background: #ffd24d; color: #1b1405; }
.store-buy:disabled { background: #5a5a52; color: #2a2a26; cursor: default; }
.store-cancel { background: #34413a; color: #fff4ca; }

/* wardrobe: unowned costume / locked hero shows its gem price */
.pick-tier.store-locked canvas { filter: grayscale(.85) brightness(.7); }
.pick-tier[data-price]:not([data-price=""])::after,
.pick-hero[data-price]:not([data-price=""])::before {
  content: attr(data-price); position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font: 900 9px "Arial Black", sans-serif; color: #9fe0ff; background: rgba(5,10,8,.82);
  padding: 1px 4px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.pick-tier.store-locked, .pick-hero[data-price]:not([data-price=""]) { position: relative; }

/* (the in-match «כוח» button's look moved to public/power-hud.js — the Saltiz violet candy, ONE LOOK) */