/* Minecraft-style bank card skins (bank page + player profile) */

.bank-card[class*="bank-card-design-"] .bank-card-face,
.player-bank-card[class*="player-bank-card-design-"] .player-bank-card-face {
  position: relative;
  overflow: hidden;
}

.bank-card[class*="bank-card-design-"] .bank-card-face::before,
.player-bank-card[class*="player-bank-card-design-"] .player-bank-card-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.45) 1px, transparent 1px),
    linear-gradient(rgba(0, 0, 0, 0.45) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}

.bank-card[class*="bank-card-design-"] .bank-card-face > *,
.player-bank-card[class*="player-bank-card-design-"] .player-bank-card-face > * {
  position: relative;
  z-index: 1;
}

/* Custom uploaded card textures */
.bank-card-design-custom .bank-card-face,
.player-bank-card-design-custom .player-bank-card-face {
  background-image: var(--bank-card-design-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bank-card-design-custom .bank-card-face::before,
.player-bank-card-design-custom .player-bank-card-face::before {
  display: none;
}

/* Затемнение фона и читаемый текст на загруженных текстурах */
.bank-card-design-custom .bank-card-face::after,
.player-bank-card-design-custom .player-bank-card-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.12) 32%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, transparent 48%);
}

.bank-card-design-custom .bank-card-aurora,
.bank-card-design-custom .bank-card-shine {
  opacity: 0.2;
}

.player-bank-card-design-custom .player-bank-card-shine {
  opacity: 0.2;
}

.bank-card-design-custom .bank-card-logo-text,
.bank-card-design-custom .bank-card-label,
.bank-card-design-custom .bank-card-amount,
.bank-card-design-custom .bank-card-amount small,
.bank-card-design-custom .bank-card-owner,
.bank-card-design-custom .bank-card-preview-balance,
.player-bank-card-design-custom .player-bank-card-logo,
.player-bank-card-design-custom .player-bank-card-label,
.player-bank-card-design-custom .player-bank-balance,
.player-bank-card-design-custom .player-bank-balance strong,
.player-bank-card-design-custom .player-bank-balance small,
.player-bank-card-design-custom .player-bank-balance-label {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 2px 10px rgba(0, 0, 0, 0.85);
}

.bank-card-design-custom .bank-card-label,
.player-bank-card-design-custom .player-bank-card-label,
.player-bank-card-design-custom .player-bank-balance-label {
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}

.bank-card-design-custom .bank-card-code,
.player-bank-card-design-custom .player-bank-card-code {
  color: #fde68a;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 1),
    0 0 12px rgba(0, 0, 0, 0.9);
}

.bank-card-design-custom .bank-card-mark,
.player-bank-card-design-custom .player-bank-card-mark {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85));
}

.bank-card-design-custom .bank-icon-btn,
.player-bank-card-design-custom .player-bank-copy-btn {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.bank-design-preview.bank-card-design-custom .bank-design-preview-emoji,
.bank-design-preview.bank-card-design-custom .bank-design-rarity {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 2px 8px rgba(0, 0, 0, 0.85);
}

/* starlit — default, styled in bank.css */

.bank-card-design-grass .bank-card-face,
.player-bank-card-design-grass .player-bank-card-face {
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 255, 200, 0.45), transparent 35%),
    linear-gradient(180deg, #6eb5ff 0%, #6eb5ff 38%, #5a9e3a 38%, #3d6b24 100%);
}

.bank-card-design-dirt .bank-card-face,
.player-bank-card-design-dirt .player-bank-card-face {
  background:
    linear-gradient(180deg, #5a9e3a 0%, #5a9e3a 12%, #8b5a2b 12%, #6b4423 100%);
}

.bank-card-design-stone .bank-card-face,
.player-bank-card-design-stone .player-bank-card-face {
  background:
    linear-gradient(145deg, #9a9a9a 0%, #7a7a7a 35%, #6e6e6e 70%, #5a5a5a 100%);
}

.bank-card-design-deepslate .bank-card-face,
.player-bank-card-design-deepslate .player-bank-card-face {
  background:
    radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.15), transparent 40%),
    linear-gradient(160deg, #3d4450 0%, #2b3038 45%, #1a1d24 100%);
}

.bank-card-design-diamond .bank-card-face,
.player-bank-card-design-diamond .player-bank-card-face {
  background:
    radial-gradient(circle at 75% 25%, rgba(125, 211, 252, 0.55), transparent 42%),
    linear-gradient(145deg, #1e4d6b 0%, #2d6a8f 40%, #0f2d44 100%);
}

.bank-card-design-emerald .bank-card-face,
.player-bank-card-design-emerald .player-bank-card-face {
  background:
    radial-gradient(circle at 30% 30%, rgba(110, 231, 183, 0.45), transparent 45%),
    linear-gradient(145deg, #14532d 0%, #166534 50%, #052e16 100%);
}

.bank-card-design-gold .bank-card-face,
.player-bank-card-design-gold .player-bank-card-face {
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 200, 0.5), transparent 40%),
    linear-gradient(145deg, #ca8a04 0%, #eab308 45%, #a16207 100%);
  color: #1a1204;
}

.bank-card-design-gold .bank-card-label,
.bank-card-design-gold .bank-card-logo-text,
.player-bank-card-design-gold .player-bank-card-label,
.player-bank-card-design-gold .player-bank-card-logo {
  color: rgba(26, 18, 4, 0.75);
}

.bank-card-design-redstone .bank-card-face,
.player-bank-card-design-redstone .player-bank-card-face {
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 113, 113, 0.35), transparent 55%),
    linear-gradient(145deg, #7f1d1d 0%, #b91c1c 50%, #450a0a 100%);
}

.bank-card-design-lapis .bank-card-face,
.player-bank-card-design-lapis .player-bank-card-face {
  background:
    radial-gradient(circle at 60% 40%, rgba(96, 165, 250, 0.4), transparent 50%),
    linear-gradient(145deg, #1e3a8a 0%, #2563eb 45%, #172554 100%);
}

.bank-card-design-nether .bank-card-face,
.player-bank-card-design-nether .player-bank-card-face {
  background:
    radial-gradient(circle at 80% 70%, rgba(251, 146, 60, 0.45), transparent 40%),
    linear-gradient(145deg, #450a0a 0%, #7c2d12 40%, #292524 100%);
}

.bank-card-design-crimson .bank-card-face,
.player-bank-card-design-crimson .player-bank-card-face {
  background:
    radial-gradient(circle at 25% 75%, rgba(244, 63, 94, 0.35), transparent 45%),
    linear-gradient(160deg, #4c0519 0%, #9f1239 45%, #3f0d1a 100%);
}

.bank-card-design-end .bank-card-face,
.player-bank-card-design-end .player-bank-card-face {
  background:
    radial-gradient(circle at 50% 20%, rgba(196, 181, 253, 0.35), transparent 50%),
    linear-gradient(180deg, #0f0a1a 0%, #1e1b2e 40%, #ddd6c8 40%, #c9c0b0 100%);
}

.bank-card-design-ocean .bank-card-face,
.player-bank-card-design-ocean .player-bank-card-face {
  background:
    radial-gradient(circle at 40% 30%, rgba(45, 212, 191, 0.35), transparent 45%),
    linear-gradient(145deg, #0c4a6e 0%, #0e7490 50%, #164e63 100%);
}

.bank-card-design-amethyst .bank-card-face,
.player-bank-card-design-amethyst .player-bank-card-face {
  background:
    radial-gradient(circle at 55% 45%, rgba(192, 132, 252, 0.5), transparent 48%),
    linear-gradient(145deg, #3b0764 0%, #6b21a8 50%, #2e1065 100%);
}

/* Aurora tint per design */
.bank-card-design-nether .bank-card-aurora,
.bank-card-design-crimson .bank-card-aurora {
  background:
    radial-gradient(circle at 20% 80%, rgba(251, 146, 60, 0.3), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(239, 68, 68, 0.25), transparent 40%);
}

.bank-card-design-end .bank-card-aurora {
  background:
    radial-gradient(circle at 30% 70%, rgba(167, 139, 250, 0.35), transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(253, 230, 138, 0.2), transparent 40%);
}

.bank-card-design-diamond .bank-card-aurora {
  background:
    radial-gradient(circle at 20% 80%, rgba(56, 189, 248, 0.35), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(125, 211, 252, 0.3), transparent 40%);
}