/* ══════════════════════════════════════════════════════
   NFT Diamond Backgrounds
   Подключи в index.html: <link rel="stylesheet" href="/static/NFT/backgrounds/diamonds.css">
   ══════════════════════════════════════════════════════ */

/* ── RAINY DIAMOND ───────────────────────────────────── */
.nft-bg-rainy {
  background:
    radial-gradient(ellipse at 28% 22%, rgba(74,168,255,0.20) 0%, transparent 52%),
    radial-gradient(ellipse at 72% 78%, rgba(10,58,107,0.28)  0%, transparent 48%),
    linear-gradient(158deg, #021628 0%, #041c38 45%, #020c1c 100%);
  position: relative;
  overflow: hidden;
}
/* Rain streaks overlay */
.nft-bg-rainy::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      108deg,
      transparent      0px,
      transparent      22px,
      rgba(74,168,255,0.045) 22px,
      rgba(74,168,255,0.045) 23px
    ),
    repeating-linear-gradient(
      108deg,
      transparent      0px,
      transparent      38px,
      rgba(74,168,255,0.025) 38px,
      rgba(74,168,255,0.025) 39px
    );
  pointer-events: none;
}
/* Soft radial mist */
.nft-bg-rainy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(74,168,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* ── BLUE DIAMOND ────────────────────────────────────── */
.nft-bg-blue {
  background:
    radial-gradient(ellipse at 24% 26%, rgba(0,102,255,0.24)   0%, transparent 50%),
    radial-gradient(ellipse at 76% 74%, rgba(0,28,148,0.32)    0%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(0,46,180,0.10)    0%, transparent 68%),
    linear-gradient(148deg, #04041e 0%, #06082e 50%, #02021c 100%);
  position: relative;
  overflow: hidden;
}
/* Constellation dots */
.nft-bg-blue::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(140,210,255,0.08) 0%, transparent 32%),
    radial-gradient(circle at 82% 68%, rgba(0,100,255,0.10)   0%, transparent 28%),
    radial-gradient(circle at 55% 15%, rgba(80,160,255,0.06)  0%, transparent 20%);
  pointer-events: none;
}
/* Top shimmer */
.nft-bg-blue::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(185deg, rgba(0,80,220,0.07) 0%, transparent 55%);
  pointer-events: none;
}

/* ── EVIL DIAMOND ────────────────────────────────────── */
.nft-bg-evil {
  background:
    radial-gradient(ellipse at 38% 32%, rgba(180,0,0,0.20)    0%, transparent 44%),
    radial-gradient(ellipse at 64% 68%, rgba(80,0,0,0.28)     0%, transparent 48%),
    radial-gradient(ellipse at 50% 50%, rgba(100,0,0,0.08)    0%, transparent 62%),
    linear-gradient(158deg, #0e0000 0%, #180000 48%, #090000 100%);
  position: relative;
  overflow: hidden;
}
/* Crack texture lines */
.nft-bg-evil::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      62deg,
      transparent     0px,
      transparent     44px,
      rgba(200,0,0,0.028) 44px,
      rgba(200,0,0,0.028) 45px
    ),
    repeating-linear-gradient(
      -38deg,
      transparent     0px,
      transparent     60px,
      rgba(150,0,0,0.020) 60px,
      rgba(150,0,0,0.020) 61px
    );
  pointer-events: none;
}
/* Blood glow vignette */
.nft-bg-evil::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 35% 38%, rgba(255,20,0,0.06) 0%, transparent 38%),
    radial-gradient(ellipse at 68% 62%, rgba(180,0,0,0.08)  0%, transparent 32%);
  pointer-events: none;
}

/* ── UTILITY: apply to gift card / info modal ────────── */
.diamond-card {
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}
.diamond-card.rainy { background: var(--nft-bg-rainy, #021628); border: 2px solid #3a9aef; box-shadow: 0 0 24px rgba(74,168,255,0.18); }
.diamond-card.blue  { background: var(--nft-bg-blue,  #04041e); border: 2px solid #0066ff; box-shadow: 0 0 28px rgba(0,102,255,0.22); }
.diamond-card.evil  { background: var(--nft-bg-evil,  #0e0000); border: 2px solid #cc0000; box-shadow: 0 0 28px rgba(180,0,0,0.22); }