/* Skins modal */
.skins-modal-content { 
  max-width: 900px;
  max-height: calc(var(--app-vh, 1vh) * 90);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.skins-balance { margin: 8px 0 14px; opacity: .9; }
.skins-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin: 12px 0 10px;
}
.skin-card {
  background: #1a1a1a; border: 1px solid #333; border-radius: 10px;
  padding: 10px; text-align: left;
}
.skin-row { display: flex; gap: 10px; align-items: center; }
.skin-preview { width: 72px; height: 100px; position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #333; }
.skin-preview-stack { position: relative; width: 72px; height: 100px; }
.skin-preview-stack .card-back { position: absolute; top: 8px; left: -10px; transform: scale(.92); z-index: 0; }
.skin-preview-stack .card { position: absolute; top: 0; left: 0; z-index: 1; }
.skin-preview .card, .skin-preview .card-back { width: 72px; height: 100px; border-radius: 8px; }

.skin-info { flex: 1 1 auto; }
.skin-name { font-weight: 700; }
.skin-meta { font-size: 12px; opacity: .8; margin-top: 2px; }

.skin-rarity { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; margin-right: 6px; }
.skin-rarity.common { background: var(--rarity-common); color: #111; }
.skin-rarity.uncommon { background: var(--rarity-uncommon); color: #111; }
.skin-rarity.rare { background: var(--rarity-rare); color: #fff; }
.skin-rarity.epic { background: var(--rarity-epic); color: #fff; }
  .skin-rarity.legendary { background: var(--rarity-legendary); color: #fff; } /* Changed text color to white for red background */
  .skin-rarity.special { background: var(--rarity-special); color: #111; } /* Special rarity styling */
  .skin-rarity.mega-jackpot { background: var(--rarity-mega-jackpot); color: #111; } /* New Mega Jackpot styling */

.skin-actions { display: flex; gap: 6px; margin-top: 8px; }
.skin-actions button { padding: 8px 10px; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.skin-actions .buy { background: #2e7d32; color: #fff; }
.skin-actions .equip { background: #1976d2; color: #fff; }
.skin-actions .equipped { background: #555; color: #ddd; cursor: default; }
.skin-actions .owned { background: #666; color: #eee; cursor: default; }
.skins-actions { margin-top: 10px; }

/* Fan for #skins-grid previews */
#skins-grid .skin-preview .skin-fan .card-back {
  position: absolute; top: 12px; left: 18px;
  width: 58px; height: 84px; border-radius: 8px;
  transform-origin: 20% 90%; box-shadow: var(--card-shadow);
}
#skins-grid .skin-preview .skin-fan .card-back:nth-child(1) { transform: rotate(-12deg) translateX(-14px); }
#skins-grid .skin-preview .skin-fan .card-back:nth-child(2) { transform: rotate(0deg); }
#skins-grid .skin-preview .skin-fan .card-back:nth-child(3) { transform: rotate(12deg) translateX(14px); }

/* Shop Preview v2 (3D) */
.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 accents */
.skin-card.v2[data-rarity="Common"]     { border-color: rgba(158,158,158,.25); }
.skin-card.v2[data-rarity="Uncommon"]   { border-color: rgba(76,175,80,.25); }
.skin-card.v2[data-rarity="Rare"]       { border-color: rgba(33,150,243,.25); }
.skin-card.v2[data-rarity="Epic"]       { border-color: rgba(156,39,176,.28); }
.skin-card.v2[data-rarity="Legendary"]  { border-color: rgba(255,152,0,.28); }

/* Layout: preview left, text right */
.skin-card.v2 .skin-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; }
.skin-card.v2 .skin-content { min-width: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
@media (max-width: 560px) { .skin-card.v2 .skin-row { grid-template-columns: 1fr; } }

/* 3D preview */
.skin-preview3d { position: relative; width: 140px; height: 180px; perspective: 900px; margin: 0 auto; }
.card3d {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.skin-card.v2:hover .card3d:not(.flipped) { transform: translate(-50%,-50%) rotateY(14deg) rotateX(3deg) translateZ(8px); }

/* Faces */
.card3d .face, .card3d .back {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px;
  display: grid; place-items: center;
}
.card3d .face { transform: rotateY(0deg) translateZ(1px); }
.card3d .back { transform: rotateY(180deg) translateZ(1px); }

/* Ensure inner card sizes scale to the 3D container */
.card3d .face .card-container, .card3d .back .card-container { 
  width: 100px; height: 140px; 
  display: flex; justify-content: center; align-items: center;
}
.card3d .face .card, .card3d .back .card-back { 
  width: 100%; height: 100%; border-radius: 10px; 
}

/* Ensure shop cards inherit the same styling as game cards */
.skin-preview3d .card {
  width: 100px; height: 140px;
  background: var(--card-bg);
  border-radius: 10px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 5px; color: var(--card-index); font-weight: bold;
  border: 1px solid var(--card-border);
  position: relative; overflow: hidden;
}
.skin-preview3d .card.red { color: var(--card-index-red); }

.skin-preview3d .card::before, .skin-preview3d .card::after {
  content: attr(data-value);
  position: absolute; font-size: 1.2rem;
}
.skin-preview3d .card::before { top: 5px; left: 5px; }
.skin-preview3d .card::after  { bottom: 5px; right: 5px; transform: rotate(180deg); }

.skin-preview3d .card .suit {
  font-size: 2rem;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.skin-preview3d .card-back {
  background: var(--card-back-bg);
  color: white; border: var(--card-back-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; border-radius: 10px;
}
.skin-preview3d .card-back .pattern {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 50% 50%, var(--card-back-pattern-a) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--card-back-pattern-b) 1px, transparent 1px);
  background-size: 20px 20px; border-radius: 8px;
}

/* Text block alignment within card */
.skin-card.v2 .skin-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.skin-card.v2 .skin-name { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-card.v2 .skin-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; opacity: .9; }
.skin-card.v2 .skin-meta strong { font-weight: 800; }
.skin-card.v2 .skin-rarity { padding: 2px 8px; border-radius: 999px; font-weight: 800; }

/* Flip */
.card3d.flipped { transform: translate(-50%,-50%) rotateY(180deg); }
.skin-card.v2:hover .card3d.flipped { transform: translate(-50%,-50%) rotateY(196deg) rotateX(3deg) translateZ(8px); }

/* Preview toolbar */
.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; }

/* Text + badges */
.skin-info-compact .skin-name { font-weight: 800; margin-bottom: 2px; line-height: 1.1; word-break: break-word; max-width: 100%; }
.skin-info-compact .skin-meta { font-size: 12px; opacity: .9; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.skin-info-compact .skin-cost { white-space: nowrap; }
.skin-info-compact { min-width: 0; overflow: hidden; }
.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.mega-jackpot { background: var(--rarity-mega-jackpot); color: #111; } /* New Mega Jackpot pill styling */

.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; }
.skin-card.v2 .skin-actions .equip { background: #1976d2; color: #fff; border: 0; border-radius: 6px; padding: 8px 10px; font-weight: 700; cursor: pointer; }
.skin-card.v2 .skin-actions .equipped { background: #555; color: #ddd; border: 0; border-radius: 6px; padding: 8px 10px; font-weight: 700; cursor: default; }
.skin-card.v2 .skin-actions .buy:disabled { opacity: .6; cursor: not-allowed; }