/* =========================
   Shop (Skins + Cases)
   ========================= */

/* --- Modal / grids --- */
.skins-modal-content{max-width:940px;text-align:left}
.skins-balance{margin:8px 0 14px;opacity:.9}
.skins-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:12px 0 10px}

/* Mobile shop optimizations */
@media (max-width: 600px) {
  .skins-modal-content {
    max-width: 95vw;
    margin: 10px;
    border-radius: 16px;
  }
  
  .skins-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 15px 0;
  }
  
  .skins-balance {
    text-align: center;
    font-size: 1.1rem;
    margin: 15px 0;
  }
}

/* ------------------------
   Skin card V2 (3D preview)
   ------------------------ */
.skin-card.v2{
  background:#151515;border:1px solid #2a2a2a;border-radius:12px;padding:12px;
  display:grid;gap:10px;transition:border-color .2s ease,box-shadow .2s ease,transform .12s ease
}
.skin-card.v2:hover{border-color:#3a3a3a;box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(-1px)}
/* Rarity outline accent on hover */
.skin-card.v2[data-rarity="Common"]:hover{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(158,158,158,.35) inset}
.skin-card.v2[data-rarity="Uncommon"]:hover{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(76,175,80,.35) inset}
.skin-card.v2[data-rarity="Rare"]:hover{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(33,150,243,.35) inset}
.skin-card.v2[data-rarity="Epic"]:hover{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(156,39,176,.38) inset}
.skin-card.v2[data-rarity="Legendary"]:hover{box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(255,152,0,.38) inset}

.skin-card.v2 .skin-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
@media (max-width:520px){.skin-card.v2 .skin-row{grid-template-columns:1fr}}

.skin-preview3d{position:relative;width:120px;height:140px;perspective:800px;margin:0 auto}
.card3d{width:86px;height:120px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-style:preserve-3d;transition:transform .6s ease}
.skin-card.v2:hover .card3d:not(.flipped){transform:translate(-50%,-50%) rotateY(16deg) rotateX(2deg) translateZ(6px)}
.card3d .face,.card3d .back{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px}
.card3d .face{transform:rotateY(0deg) translateZ(1px)}
.card3d .back{transform:rotateY(180deg) translateZ(1px)}
.card3d.flipped{transform:translate(-50%,-50%) rotateY(180deg)}
.skin-card.v2:hover .card3d.flipped{transform:translate(-50%,-50%) rotateY(196deg) rotateX(2deg) translateZ(6px)}

.preview-toolbar{position:absolute;left:0;right:0;bottom:-6px;display:flex;justify-content:center;pointer-events:none}
.preview-toolbar .flip-btn{
  pointer-events:auto;background:#2b2b2b;color:#eee;border:1px solid #3c3c3c;border-radius:999px;
  padding:6px 10px;font-weight:700;font-size:12px;cursor:pointer
}
.preview-toolbar .flip-btn:hover{background:#333}

.skin-info-compact .skin-name{font-weight:800;margin-bottom:2px}
.skin-info-compact .skin-meta{font-size:12px;opacity:.9;display:flex;gap:8px;align-items:center}
.skin-rarity.pill{padding:2px 8px;border-radius:16px;font-weight:800}
.skin-rarity.pill.common{background:var(--rarity-common);color:#111}
.skin-rarity.pill.uncommon{background:var(--rarity-uncommon);color:#111}
.skin-rarity.pill.rare{background:var(--rarity-rare);color:#fff}
.skin-rarity.pill.epic{background:var(--rarity-epic);color:#fff}
  .skin-rarity.pill.legendary{background:var(--rarity-legendary);color:#fff} /* Changed text color to white for red background */
  .skin-rarity.pill.special{background:var(--rarity-special);color:#111} /* Special rarity pill styling */
  .skin-rarity.pill.mega-jackpot{background:var(--rarity-mega-jackpot);color:#111} /* New Mega Jackpot pill styling */
.skin-info-compact .price{opacity:.95}
.skin-info-compact .price.free{opacity:.85}

.badges{display:flex;gap:6px;margin-top:6px}
.badge{display:inline-block;font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid #3a3a3a;background:#262626}
.badge.equipped{border-color:#9e9e9e;color:#dcdcdc}
.badge.owned{border-color:#4caf50;color:#b2ffb2}

.skin-card.v2 .skin-actions{display:flex;gap:8px}
.skin-card.v2 .skin-actions .buy{background:#2e7d32;color:#fff;border:0;border-radius:6px;padding:8px 10px;font-weight:700;cursor:pointer;transition:all 0.2s ease}
.skin-card.v2 .skin-actions .equip{background:#1976d2;color:#fff;border:0;border-radius:6px;padding:8px 10px;font-weight:700;cursor:pointer;transition:all 0.2s ease}
.skin-card.v2 .skin-actions .equipped{background:#555;color:#ddd;border:0;border-radius:6px;padding:8px 10px;font-weight:700;cursor:default;transition:all 0.2s ease}
.skin-card.v2 .skin-actions .buy:disabled{opacity:.6;cursor:not-allowed}
.skin-card.v2 .skin-actions .buy:hover:not(:disabled){background:#388e3c;transform:translateY(-1px);box-shadow:0 2px 8px rgba(46,125,50,0.3)}
.skin-card.v2 .skin-actions .equip:hover{background:#1565c0;transform:translateY(-1px);box-shadow:0 2px 8px rgba(25,118,210,0.3)}

/* ------------------------
   Success Notifications
   ------------------------ */
.purchase-success, .equip-success {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: bold;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  animation: slideInRight 0.3s ease-out;
}

.purchase-success {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.equip-success {
  background: linear-gradient(135deg, #2196F3, #1976D2);
  color: white;
}

/* Animation keyframes */
@keyframes slideInRight {
  from { 
    transform: translateX(100%); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

@keyframes fadeOut {
  from { 
    opacity: 1; 
    transform: translateX(0);
  }
  to { 
    opacity: 0; 
    transform: translateX(10px);
  }
}

/* ------------------------
   Cases list + carousel
   ------------------------ */
.cases-block{margin:12px 0 4px}
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.case-card{background:#1a1a1a;border:1px solid #333;border-radius:10px;padding:12px;display:flex;gap:12px;align-items:center}
.case-icon{width:60px;height:60px;border-radius:10px;position:relative;flex:0 0 auto}
.case-icon.gold{background:linear-gradient(45deg,#b8860b,#ffd700);box-shadow:inset 0 0 0 3px rgba(0,0,0,.2)}
.case-icon.skins{background:linear-gradient(45deg,#2196f3,#9c27b0);box-shadow:inset 0 0 0 3px rgba(0,0,0,.2)}
.case-icon:before{content:'';position:absolute;inset:8px;border-radius:6px;background:rgba(0,0,0,.25)}
.case-icon:after{content:'';position:absolute;top:22px;left:50%;width:20px;height:16px;transform:translateX(-50%);border-radius:4px;background:#333;box-shadow:0 0 0 2px rgba(255,255,255,.1) inset}
.case-info{flex:1 1 auto}
.case-name{font-weight:800}
.case-price{font-size:12px;opacity:.85;margin-top:4px}
.case-actions{display:flex;gap:8px}
.case-open{background:#1976d2;color:#fff;border:0;border-radius:6px;padding:8px 12px;font-weight:800;cursor:pointer}
.cases-modal-content{max-width:940px}

.carousel-wrap{position:relative;height:120px;overflow:hidden;border:1px solid #333;border-radius:10px;background:#0b0b0b;margin:12px 0}
.carousel-wrap.hidden{display:none}
.carousel-track{display:flex;gap:8px;position:absolute;left:0;top:0;height:120px;will-change:transform;padding:10px 6px}
.drop-item{width:120px;height:100px;border-radius:8px;background:#111;border:1px solid #333;display:grid;place-items:center;font-size:14px;font-weight:800;overflow:hidden}
.rarity-common{box-shadow:0 0 0 2px #9e9e9e inset}
.rarity-uncommon{box-shadow:0 0 0 2px #4caf50 inset}
.rarity-rare{box-shadow:0 0 0 2px #2196f3 inset}
.rarity-epic{box-shadow:0 0 0 2px #9c27b0 inset}
.rarity-legendary{box-shadow:0 0 0 2px #f44336 inset} /* Changed to red */
.rarity-mega-jackpot{box-shadow:0 0 0 2px #ffd700 inset} /* New gold Mega Jackpot */
.drop-item .chip{font-size:18px}
.pointer{position:absolute;top:0;left:50%;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:14px solid gold;transform:translateX(-50%);z-index:3}
.result-box{margin-top:8px;font-weight:800;min-height:1.2em}

/* mini skin tile used in carousel items */
.skin-mini{position:relative;width:100%;height:100%;display:grid;place-items:center}
.skin-mini .stack{position:relative;width:60px;height:88px}
.skin-mini .card-back,.skin-mini .card{position:absolute;left:0;top:0;width:60px;height:88px;border-radius:8px}
.skin-mini .card-back{transform:rotate(-6deg) translate(-6px,6px)}
.skin-mini .label{position:absolute;left:6px;right:6px;bottom:4px;font-size:10px;line-height:1.1;text-align:center;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.case-card .case-price {
  font-size: 0.9rem;
  color: #ff6b6b;
  font-weight: bold;
  margin-top: 5px;
}

.case-card .case-price strong {
  color: #ff6b6b;
}