/* store/store.css */

.storeOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:9999;
  overflow:auto;
  padding:20px;
}

.storeBox{
  background:white;
  border-radius:30px;
  padding:20px;
  max-width:700px;
  margin:0 auto;
}

.storeTitle{
  text-align:center;
  font-size:42px;
  font-weight:900;
  margin-bottom:20px;
}

.storeGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}


/* =========================================
CARD
========================================= */

.stickerCard{
  background:#f5f5f5;
  border-radius:24px;
  padding:15px;
  text-align:center;
  box-shadow:0 5px 14px rgba(0,0,0,.12);
}


/* =========================================
OWNED CARD
========================================= */

.stickerCard.ownedCard{

  background:
    linear-gradient(
      to bottom,
      #42ff00 0%,
      #1fd100 55%,
      #119700 100%
    );

  box-shadow:
    inset 0 6px 10px rgba(255,255,255,.18),
    inset 0 -6px 10px rgba(0,0,0,.18),
    0 8px 20px rgba(0,0,0,.20);
}


/* =========================================
IMAGES
========================================= */

.stickerCard img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
}

.stickerLocked{
  filter:grayscale(1);
  opacity:.45;
}


/* =========================================
OWNED IMAGE AREA
========================================= */

.stickerOwned{

  filter:none;

  border-radius:28px;

  padding:12px;

  background:
    linear-gradient(
      to bottom,
      #fff700 0%,
      #ffd400 45%,
      #ff9500 100%
    );

  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.25),
    inset 0 -4px 8px rgba(0,0,0,.15);
}


/* =========================================
WHITE BOX
========================================= */

.stickerOwnedWrap{

  background:white;

  border-radius:20px;

  padding:16px;
}


/* =========================================
TEXT
========================================= */

.stickerTitle{
  font-size:26px;
  font-weight:900;
  margin-top:14px;
}

.stickerCard.ownedCard .stickerTitle{
  color:black;
}


/* =========================================
BUY BUTTON
========================================= */

.buyBtn{

  margin-top:12px;

  position:relative;

  border:none;

  border-radius:999px;

  padding:16px 34px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  font-size:30px;
  font-weight:900;

  color:white;

  -webkit-text-stroke:1.5px rgba(0,0,0,.18);

  text-shadow:
    0 3px 0 rgba(0,0,0,.18);

  background:
    linear-gradient(
      to bottom,
      #5dff1f 0%,
      #33d600 50%,
      #1da300 100%
    );

  box-shadow:
    inset 0 5px 8px rgba(255,255,255,.35),
    inset 0 -5px 8px rgba(0,0,0,.22),
    0 5px 12px rgba(0,0,0,.22);

  overflow:hidden;
}

.buyBtn::before{

  content:"";

  position:absolute;

  top:6%;
  left:8%;

  width:84%;
  height:38%;

  border-radius:999px;

  background:rgba(255,255,255,.28);

  filter:blur(2px);
}

.buyBtn::after{

  content:"";

  position:absolute;

  inset:4px;

  border-radius:999px;

  border:3px solid rgba(255,255,255,.18);

  pointer-events:none;
}


/* =========================================
OWNED LABEL
========================================= */

.ownedLabel{

  margin-top:10px;

  font-size:22px;
  font-weight:900;

  color:white;

  text-shadow:
    0 3px 0 rgba(0,0,0,.20);
}


/* =========================================
CLOSE
========================================= */

.closeStore{
  width:100%;
  margin-top:20px;
  border:none;
  border-radius:999px;
  background:#111;
  color:white;
  padding:18px;
  font-size:24px;
  font-weight:900;
}


/* =========================================
COIN
========================================= */

.storeCoin{
  width:30px;
  height:30px;
  object-fit:contain;
  position:relative;
  z-index:2;
}