/* ===== Shop (Adventure) ===== */

body.shop-page::before,
body.shop-page::after{
  opacity: 0;
}


.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  margin-bottom:16px;
}

/* Wallet */
.shop-coins{
  position:relative;
  z-index:1;

  margin-left:auto;
  padding:8px 10px;
  display:flex;
  justify-content:center;
  gap:8px;
  align-items:center;
  width:max-content;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  font-weight:900;

  transform: scale(0.9);
}





.shop-coins span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:18px;
  color:#4a2a10;
  padding:6px 10px;
  border-radius:999px;
}

.shop-coins span::before{
  font-size:18px;
}

#shopCoins::before{ content:"🪙"; }
#shopGems::before{ content:"💎"; }

#shopCoins{
  background:linear-gradient(180deg,#fff2c6,#ffd56a);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.75),
    0 3px 0 rgba(150,105,35,0.45);
}

#shopGems{
  background:linear-gradient(180deg,#e7fbff,#bfefff);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.8),
    0 3px 0 rgba(45,120,135,0.35);
}

/* Hero */
.shop-hero{
  margin:18px 0 32px;
  padding:26px 18px 28px;
  border-radius:28px;
  text-align:center;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 22px 44px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.25);
  position:relative;
  overflow:visible;
}




.shop-hero::before{
  content:"";
  position:absolute;
  left:-20%;
  top:-40%;
  width:140%;
  height:140%;
  background:radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  pointer-events:none;
}

.shop-hero-title{
  font-size:20px;
  font-weight:900;
  color:#4a2a10;
  margin-bottom:12px;
  text-shadow:0 1px 0 rgba(255,255,255,0.65);
}

.shop-hero-btn{
  width:100%;
  max-width:320px;
  aspect-ratio: 1 / 1;
  margin:0 auto;
  border:none;
  cursor:pointer;

  display:block;

  background: url("../img/shop/random_card.webp") center / contain no-repeat;
  background-color: transparent;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.35);

  position:relative;
}


.shop-hero-btn::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:10px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events:none;
}






.shop-choice{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
  width:100%;
  margin:0 auto 32px;
  padding:0 12px;
  box-sizing:border-box;
}





.shop-choice-btn{
  min-width:130px;
  padding:14px 22px;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  letter-spacing:0.5px;

  color:#4a2a10;
  background:
    radial-gradient(circle at 30% 30%,#fff6d8 0%,#ffd36a 45%,#f3a738 100%);
  border:2px solid rgba(255,190,90,0.55);

  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 0 -3px 0 rgba(160,90,20,0.35),
    0 8px 0 rgba(160,100,35,0.45),
    0 20px 28px rgba(0,0,0,0.28);

  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.shop-choice-btn:hover{
  filter: saturate(1.25) brightness(1.05);
  transform: translateY(-2px) scale(1.04);
}

.shop-choice-btn:active{
  transform: translateY(3px) scale(0.97);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.85),
    inset 0 -2px 0 rgba(160,90,20,0.35),
    0 4px 0 rgba(160,100,35,0.45),
    0 12px 18px rgba(0,0,0,0.25);
}




.shop-choice-btn.active{
  filter:saturate(1.05);
}

#chooseCards.active{
  background:linear-gradient(180deg,#ffe7b6,#f3c15a);
  border-color:rgba(160,110,35,0.20);
}

#chooseProducts.active{
  background:linear-gradient(180deg,#dff7ff,#88dbe9);
  border-color:rgba(45,120,135,0.25);
}

/* Items */
.shop-item{
  position: relative;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:12px;
  text-align:center;
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}



.shop-item-title{
  font-weight:900;
  margin-bottom:8px;
  font-size:16px;
  color:#ffffff;
  background:linear-gradient(135deg,#ff6ec7,#ff9f43,#ffd36a);
  padding:6px 12px;
  border-radius:999px;
  display:inline-block;
  box-shadow:
    0 4px 0 rgba(180,80,40,0.35),
    0 10px 18px rgba(0,0,0,0.25);
}

.shop-item-desc{
  font-size:15px;
  font-weight:700;
  line-height:1.5;

  color:#ffffff;

  margin:8px 4px 12px;
  padding:0;

  background:none;
  border-radius:0;
  box-shadow:none;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.55),
    0 0 14px rgba(120,200,255,0.35);

  opacity:0.95;
}


.shop-item-icon img{
  width:100%;
  max-width:200px;
  height:auto;
  display:inline-block;
}


.shop-item-price{
  margin-top:auto;
  font-weight:900;
  font-size:14px;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff2c6,#ffd56a);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.75),
    0 3px 0 rgba(150,105,35,0.45);
  color:#4a2a10;
}

.shop-item.buyable{
  cursor:pointer;
  transition:transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.shop-item.buyable:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 36px rgba(0,0,0,0.28);
  filter: saturate(1.15);
}

.shop-item.buyable:active{
  transform: translateY(2px) scale(0.97);
  box-shadow:
    0 3px 0 rgba(140,100,50,0.12),
    0 10px 14px rgba(80,55,25,0.14);
}


.shop-item.owned{
  opacity:0.55;
  filter:grayscale(0.55);
  cursor:default;
  pointer-events:none;
}

body.shop-page .shop-grid .shop-item.owned{
  opacity:1;
  filter:none;
  transform:scale(1.05);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.35),
    0 0 22px rgba(255,210,255,0.55);
  cursor:default;
  pointer-events:none;
}


.shop-item.owned .shop-item-price{
  opacity:0.55;
}

/* Rarity (still fits adventure) */
.shop-item.rarity-common{
  border-color:rgba(120,120,120,0.20);
}

.shop-item.rarity-special{
  border-color:rgba(180,125,35,0.35);
  box-shadow:
    0 6px 0 rgba(180,125,35,0.10),
    0 14px 18px rgba(80,55,25,0.10);
}

.shop-item.rarity-rare{
  border-color:rgba(90,70,180,0.28);
  box-shadow:
    0 6px 0 rgba(90,70,180,0.08),
    0 14px 18px rgba(80,55,25,0.10);
}



.shop-spin{
  animation:spinGlow 0.25s linear infinite;
}

@keyframes spinGlow{
  0%{ box-shadow:0 6px 0 rgba(255,210,120,0.10), 0 0 0 rgba(255,210,120,0.0) }
  50%{ box-shadow:0 6px 0 rgba(255,210,120,0.10), 0 0 18px rgba(255,210,120,0.55) }
  100%{ box-shadow:0 6px 0 rgba(255,210,120,0.10), 0 0 0 rgba(255,210,120,0.0) }
}




/* ===== Shop page background override ===== */

body.shop-page{
  background: url("../img/shop/shop.webp") center top / cover no-repeat fixed;
  animation: none;
}

body.shop-page::before,
body.shop-page::after{
  display: none;
}

/* Remove floating bubbles only in shop */
body.shop-page .magic-bubbles{
  display: none;
}

body.shop-page .card{
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(4px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.16);
}





body.shop-page .topbar-title{
  position: relative;
  font-size: 52px;
  padding: 22px 34px;
  border-radius: 999px;

  color: transparent;
  background:
    linear-gradient(
      90deg,
      #ff4ecd 0%,
      #ffd36a 10%,
      #4dd7ff 20%,
      #9b6cff 30%,
      #ff8ad8 40%,
      #ffd36a 50%,
      #4dd7ff 60%,
      #9b6cff 70%,
      #ff8ad8 80%,
      #ffd36a 90%,
      #ff4ecd 100%
    );
  background-size: 800% 100%;
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 40px rgba(255,200,255,0.95);

  animation:
    shopTitleRainbow 3.5s linear infinite,
    shopTitlePulse 1.4s ease-in-out infinite alternate;
}

body.shop-page .topbar-title::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,0.9), transparent 35%),
    radial-gradient(circle at 50% 70%, rgba(255,220,255,0.8), transparent 40%),
    radial-gradient(circle at 85% 40%, rgba(200,240,255,0.8), transparent 35%);
  filter: blur(10px);
  opacity:0.8;
  animation: shopTitleSparkle 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shopTitleRainbow{
  0%{ background-position:0% 50% }
  100%{ background-position:100% 50% }
}

@keyframes shopTitlePulse{
  from{
    transform: scale(1);
    text-shadow:
      0 6px 18px rgba(0,0,0,0.45),
      0 0 26px rgba(255,190,255,0.8);
  }
  to{
    transform: scale(1.06);
    text-shadow:
      0 10px 28px rgba(0,0,0,0.55),
      0 0 52px rgba(255,220,255,1);
  }
}

@keyframes shopTitleSparkle{
  0%{ opacity:0.35 }
  50%{ opacity:0.95 }
  100%{ opacity:0.35 }
}


body.shop-page .topbar-title::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8), transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.6), transparent 40%);
  opacity:0.7;
  filter: blur(6px);
  animation: shopTitleSparkle 2.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shopTitleFlow{
  0%{ background-position:0% 50% }
  100%{ background-position:100% 50% }
}

@keyframes shopTitleGlow{
  from{ text-shadow:0 4px 12px rgba(0,0,0,0.35),0 0 18px rgba(255,210,140,0.6) }
  to{ text-shadow:0 6px 18px rgba(0,0,0,0.45),0 0 32px rgba(255,230,170,0.95) }
}

@keyframes shopTitleSparkle{
  0%{ opacity:0.3 }
  50%{ opacity:0.85 }
  100%{ opacity:0.3 }
}


.shop-item.owned::after{
  content:"OWNED";
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 8px;
  font-size:11px;
  font-weight:900;
  border-radius:999px;
  background:linear-gradient(180deg,#d1ffd6,#7ee081);
  color:#1e5b2a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 2px 6px rgba(0,0,0,0.25);
}
.shop-item-icon{
  position:relative;
  margin:0 0 14px;
  height:auto;
  display:block;
  text-align:center;
}



#heroPrice{
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;

  display:flex;
  align-items:center;
  gap:16px;

  font-size:22px;
  font-weight:900;
  color:#ffffff;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 14px rgba(255,255,255,0.25);

  pointer-events:none;
}



.shop-hero-btn{
  animation: chestFloat 3.2s ease-in-out infinite;
}

.shop-hero-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 40%),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.25), transparent 45%);
  opacity:0.6;
  animation: sparklePulse 2.4s ease-in-out infinite;
  pointer-events:none;
}

.shop-hero-btn:active{
  transform: scale(0.96);
}

@keyframes chestFloat{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-8px) }
  100%{ transform: translateY(0) }
}

@keyframes sparklePulse{
  0%{ opacity:0.3 }
  50%{ opacity:0.75 }
  100%{ opacity:0.3 }
}
#heroPrice{
  background: none;
  box-shadow: none;
}
#heroPrice .price-item:last-child .icon{
  display:inline-block;
  animation: gemSpin 2.6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes gemSpin{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}
.shop-choice{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:16px;
  width:100%;
  margin:0 auto 32px;
  padding:0 12px;
  box-sizing:border-box;
  flex-wrap:wrap;
}






.shop-choice-img img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;

  border-radius:20px;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.35),
    0 0 18px rgba(255,220,255,0.35);

  animation: shopButtonFloat 3.2s ease-in-out infinite;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}




.shop-choice-img:hover img{
  transform: translateY(-6px) scale(1.08);
  filter: saturate(1.25) brightness(1.05);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.45),
    0 0 26px rgba(255,210,255,0.75);
}


.shop-choice-img:active img{
  transform: translateY(2px) scale(0.97);
}
.shop-choice-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.shop-choice-title{
  font-size:22px;
  font-weight:900;
  padding:0;
  margin-bottom:6px;

  color:#ffffff;
  background:none;
  border-radius:0;

  box-shadow:none;
  text-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    0 0 18px rgba(255,220,255,0.6);

  animation:none;
  cursor:default;
}


@keyframes shopButtonFloat{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
  100%{ transform: translateY(0) }
}

.shop-grid {
  margin-top: 16px;
}

.shop-random {
  margin: 20px 0 28px;
}

.shop-choice {
  margin-bottom: 24px;
}
#randomProductBuyBtn.shop-hero-btn{
  background: url("../img/shop/random_product.webp") center / contain no-repeat;
}
#randomProductBuyBtn.shop-hero-btn{
  aspect-ratio: 1 / 1;
  min-height:280px;
  max-width:320px;
}

#randomProductBuyBtn img{
  display: none;
}
#randomProductBuyBtn.shop-hero-btn:not([hidden]){
  height: 300px;
}

#randomBuyBtn{
  width:100%;
  max-width:320px;
  aspect-ratio: 1 / 1;
  min-height:280px;
  margin:0 auto;

  border:none;
  cursor:pointer;

  background: url("../img/shop/random_card.webp") center / contain no-repeat;
  background-color: transparent;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.35);

  animation:
    chestFloat 3.2s ease-in-out infinite,
    chestHint 2.6s ease-in-out infinite;

  font-size:0;
  color:transparent;
}







@keyframes chestHint{
  0%{ transform: scale(1) }
  8%{ transform: scale(0.96) }
  16%{ transform: scale(1.06) }
  24%{ transform: scale(1) }
  100%{ transform: scale(1) }
}




.shop-random.no-funds{
  animation: noFundsShake 420ms ease-in-out;
}

.shop-random.no-funds::after{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,120,120,0.45), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,180,180,0.35), transparent 50%);
  animation: noFundsGlow 520ms ease-out;
  pointer-events: none;
}

@keyframes noFundsShake{
  0%{ transform: translateX(0) }
  20%{ transform: translateX(-6px) }
  40%{ transform: translateX(6px) }
  60%{ transform: translateX(-4px) }
  80%{ transform: translateX(4px) }
  100%{ transform: translateX(0) }
}

@keyframes noFundsGlow{
  0%{ opacity:0; transform: scale(0.92) }
  50%{ opacity:1; transform: scale(1.02) }
  100%{ opacity:0; transform: scale(1.06) }
}
.shop-message{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);

  padding: 14px 22px;
  border-radius: 999px;

  font-size: 18px;
  font-weight: 900;
  color: #4a2a10;

  background: linear-gradient(180deg,#fff7dc,#ffe29a);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.9),
    0 10px 22px rgba(0,0,0,0.35);

  z-index: 2000;
  opacity: 0;

  animation: shopMessagePop 420ms ease-out forwards;
  pointer-events: none;
}

@keyframes shopMessagePop{
  0%{
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.85);
  }
  60%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.shop-random-price{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%) scale(0.92);

  padding:4px 12px;
  border-radius:999px;

  font-size:15px;
  font-weight:900;
  color:#ffffff;

  background:
    linear-gradient(180deg,#ff9fcf,#ff6fb1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 3px 8px rgba(0,0,0,0.25),
    0 0 10px rgba(255,140,190,0.45);

  animation: priceHeartPulseSoft 2.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes priceHeartPulseSoft{
  0%{ transform:translateX(-50%) scale(0.92) }
  50%{ transform:translateX(-50%) scale(0.98) }
  100%{ transform:translateX(-50%) scale(0.92) }
}


@keyframes priceHeartPulse{
  0%{ transform:translateX(-50%) scale(1) }
  50%{ transform:translateX(-50%) scale(1.12) }
  100%{ transform:translateX(-50%) scale(1) }
}
#randomBuyBtn[hidden],
#randomProductBuyBtn[hidden]{
  display: none !important;
}
.shop-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: revealFadeIn 220ms ease-out;
}

.shop-reveal-overlay .shop-item.reveal {
  transform: scale(0.85);
  animation: revealPop 420ms cubic-bezier(0.2, 1.4, 0.3, 1);
}

.shop-reveal-overlay.from-my-stuff {
  animation: revealFadeInSoft 320ms ease-out;
}

.shop-reveal-overlay.from-my-stuff .shop-item.reveal {
  transform: scale(0.96);
  animation: revealSoft 380ms ease-out;
}

@keyframes revealPop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes revealSoft {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes revealFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes revealFadeInSoft {
  from { opacity: 0; }
  to { opacity: 1; }
}
.shop-reveal-hint{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);

  padding:8px 16px;
  border-radius:999px;

  font-size:16px;
  font-weight:900;
  color:#ffffff;

  background:
    linear-gradient(180deg,#ff9fcf,#ff6fb1);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 6px 14px rgba(0,0,0,0.35);

  animation: revealHintPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes revealHintPulse{
  0%{ transform:translateX(-50%) scale(0.96); opacity:0.7 }
  50%{ transform:translateX(-50%) scale(1.05); opacity:1 }
  100%{ transform:translateX(-50%) scale(0.96); opacity:0.7 }
}
body.shop-loading .topbar,
body.shop-loading .shop-choice,
body.shop-loading .shop-grid,
body.shop-loading .shop-random{
  filter: blur(0.8px) saturate(1.2);
  animation: shopLoadingPulse 0.45s ease-in-out infinite alternate;
}

@keyframes shopLoadingPulse{
  from{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to{
    transform: translateY(-1px) scale(1.01);
    opacity: 0.75;
  }
}.shop-random{
  position: relative;
}

/* ===== EMPTY COLLECTION STATE ===== */


.shop-grid.is-empty::before{
  content: "";
  display: block;
  text-align: center;

  margin: 20px auto 8px;
  max-width: 280px;

  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;

  color: #ffffff;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 0 22px rgba(255,200,255,0.6);

  animation: emptyHintFloat 2.8s ease-in-out infinite;
}

.shop-grid.is-empty::after{
  content: "✨";
  display: block;
  text-align: center;

  font-size: 28px;
  margin-top: 6px;

  animation: emptySparkle 2.2s ease-in-out infinite;
}

@keyframes emptyHintPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

@keyframes emptySparkle{
  0%{ opacity: 0.3; transform: translateY(0); }
  50%{ opacity: 1; transform: translateY(-6px); }
  100%{ opacity: 0.3; transform: translateY(0); }
}
.shop-empty-text{
  text-align: center;
  margin: 22px auto 6px;
  max-width: 320px;

  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;

  color: #ffffff;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 0 22px rgba(255,200,255,0.6);

  animation: emptyHintFloat 2.8s ease-in-out infinite;
}

@keyframes emptyHintFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0); }
}
.shop-transition{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(circle at center, rgba(255,190,230,0.35), rgba(20,10,40,0.85) 65%),
    linear-gradient(180deg, rgba(40,20,80,0.85), rgba(10,5,30,0.95));

  backdrop-filter: blur(6px) saturate(1.3);
}

.shop-transition.active{
  display:flex;
}

.shop-transition img{
  width:82%;
  max-width:460px;
  border-radius:28px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 60px rgba(255,180,255,0.55),
    0 0 120px rgba(180,120,255,0.35);

  animation:
    revealFloat 2.6s ease-in-out infinite,
    revealGlow 1.8s ease-in-out infinite alternate;
}

@keyframes revealFloat{
  0%{ transform:scale(0.96) translateY(6px); }
  50%{ transform:scale(1.02) translateY(-10px); }
  100%{ transform:scale(0.96) translateY(6px); }
}

@keyframes revealGlow{
  from{
    filter: brightness(1) saturate(1.1);
  }
  to{
    filter: brightness(1.15) saturate(1.4);
  }
}


@keyframes shopPulse{
  0%{ transform:scale(0.92); opacity:0.85; }
  50%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(0.92); opacity:0.85; }
}
.shop-random.no-funds .shop-hero-btn,
.shop-random.no-funds #randomBuyBtn,
.shop-random.no-funds #randomProductBuyBtn{
  filter: grayscale(0.6) brightness(0.85);
  opacity: 0.75;
  animation: none;
  cursor: not-allowed;
}

.shop-random.no-funds .shop-hero-btn::after{
  background:
    radial-gradient(circle at 50% 50%, rgba(255,120,120,0.35), transparent 55%);
  opacity: 0.8;
}

.shop-random.no-funds .shop-random-price{
  background: linear-gradient(180deg,#ffb3b3,#ff6b6b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 3px 10px rgba(180,40,40,0.45);
}
.shop-random.no-funds #randomBuyBtn{
  animation: none !important;
}
.shop-random.no-funds{
  pointer-events: none;
}

.shop-item.no-funds-item{
  animation: noFundsShake 420ms ease-in-out;
}

.shop-item.no-funds-item::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,120,120,0.45), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(255,180,180,0.35), transparent 50%);
  animation: noFundsGlow 520ms ease-out;
  pointer-events: none;
}