.item-buy-overlay{
  position:fixed;
  inset:0;
  z-index:260;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:rgba(10,10,18,0.92);
  pointer-events:auto;
  opacity:0;
  transform:scale(.94);
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
}
.item-buy-overlay.active{
  display:flex;
  opacity:1;
  transform:scale(1);
}
.item-buy-overlay.closing{
  opacity:0;
  transform:scale(.94);
  pointer-events:none;
}

.item-buy-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:20px;
}

.item-buy-img-wrap{
  position:relative;
  width:min(70vw, 360px);
  height:min(50vh, 280px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.item-buy-rays{
  position:absolute;
  top:50%;
  left:50%;
  width:100vmax;
  height:100vmax;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  background:conic-gradient(
    from 0deg,
    transparent 0%, color-mix(in srgb, var(--win-color) 18%, transparent) 3%, transparent 6%,
    transparent 12%, color-mix(in srgb, var(--win-color) 14%, transparent) 15%, transparent 18%,
    transparent 25%, color-mix(in srgb, var(--win-color) 18%, transparent) 28%, transparent 31%,
    transparent 37%, color-mix(in srgb, var(--win-color) 14%, transparent) 40%, transparent 43%,
    transparent 50%, color-mix(in srgb, var(--win-color) 18%, transparent) 53%, transparent 56%,
    transparent 62%, color-mix(in srgb, var(--win-color) 14%, transparent) 65%, transparent 68%,
    transparent 75%, color-mix(in srgb, var(--win-color) 18%, transparent) 78%, transparent 81%,
    transparent 87%, color-mix(in srgb, var(--win-color) 14%, transparent) 90%, transparent 93%
  );
  -webkit-mask-image:radial-gradient(circle, white 10%, transparent 30%);
  mask-image:radial-gradient(circle, white 10%, transparent 30%);
}
.item-buy-overlay.active .item-buy-rays{
  animation:lightRaysFadeIn .8s ease .55s forwards, lightRaysRotate 20s linear infinite;
}

.item-buy-glow{
  position:absolute;
  inset:-15%;
  background:radial-gradient(circle at center, color-mix(in srgb, var(--win-color) 40%, transparent), transparent 60%);
  filter:blur(24px);
  z-index:0;
  pointer-events:none;
  opacity:0;
}
.item-buy-overlay.active .item-buy-glow{
  animation:lightRaysFadeIn .8s ease .4s forwards;
}

.item-buy-img-wrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.55));
  opacity:0;
}
.item-buy-overlay.active .item-buy-img-wrap img{
  animation:itemBuyImgIn .65s cubic-bezier(.19,1,.22,1) forwards;
}

.item-buy-name{
  font-size:1.6rem;
  font-weight:700;
  font-family:'Jost',sans-serif;
  color:var(--text);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  opacity:0;
}
.item-buy-overlay.active .item-buy-name{
  animation:itemBuyTextIn .5s ease .2s forwards;
}

.item-buy-added{
  font-size:1.05rem;
  color:var(--text);
  font-weight:600;
  text-shadow:0 1px 6px rgba(0,0,0,.4);
  opacity:0;
}
.item-buy-overlay.active .item-buy-added{
  animation:itemBuyTextIn .5s ease .44s forwards;
}

.item-buy-ok{
  margin-top:12px;
  padding:11px 36px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#0a0a12;
  font-family:'Jost',sans-serif;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:all .25s;
  opacity:0;
}
.item-buy-overlay.active .item-buy-ok{
  animation:itemBuyTextIn .5s ease .55s forwards;
}
.item-buy-ok:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(var(--accent-rgb),.35);
}

@keyframes itemBuyImgIn{
  from{transform:scale(.65) translateY(24px); opacity:0;}
  to{transform:scale(1) translateY(0); opacity:1;}
}
@keyframes itemBuyTextIn{
  from{transform:translateY(10px); opacity:0;}
  to{transform:translateY(0); opacity:1;}
}

@media(max-width:768px){
  .item-buy-name{font-size:1.25rem}
  .item-buy-img-wrap{width:min(80vw,300px);height:min(40vh,220px)}
}