/* ===== Variante spéciale : Calculateur Caracs D&D ===== */
/* Inspiration : fond grimoire + braises dorées de la page Calccaracs */

.card--dnd {
  border-color: rgba(166, 124, 46, 0.6);
  background-color: #110b06;
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -5%, rgba(110, 55, 10, 0.68), transparent 56%),
    radial-gradient(ellipse 80% 70% at 15% 110%, rgba(80, 30, 5, 0.58), transparent 56%),
    radial-gradient(ellipse 80% 70% at 85% 110%, rgba(60, 20, 5, 0.48), transparent 56%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(90, 40, 8, 0.2), transparent 66%);
  box-shadow:
    inset 0 0 50px rgba(120, 85, 40, 0.16),
    inset 0 0 0 1px rgba(235, 208, 148, 0.08),
    0 18px 46px -26px rgba(0, 0, 0, 0.95),
    0 0 34px rgba(166, 124, 46, 0.1);
  isolation: isolate;
}

/* Cadre intérieur façon parchemin / grimoire */
.card--dnd::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(166, 124, 46, 0.32);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
  z-index: 0;
}

/* Particules dorées qui montent */
.card--dnd::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.58;
  mix-blend-mode: screen;

  background-image:
    radial-gradient(circle, rgba(235, 208, 148, 0.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(212, 136, 26, 0.78) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(166, 124, 46, 0.65) 0 1.4px, transparent 2.2px),
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(235, 208, 148, 0.16), transparent 44%),
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(107, 20, 20, 0.18), transparent 58%);

  background-size:
    42px 72px,
    68px 96px,
    95px 130px,
    100% 100%,
    100% 100%;

  background-position:
    10px 120%,
    34px 110%,
    18px 125%,
    center,
    center;

  animation: dnd-card-embers 9s linear infinite;
}

@keyframes dnd-card-embers {
  0% {
    background-position:
      10px 120%,
      34px 110%,
      18px 125%,
      center,
      center;
  }

  20% {
    background-position:
      22px 80%,
      20px 72%,
      34px 86%,
      center,
      center;
  }

  40% {
    background-position:
      4px 40%,
      46px 35%,
      10px 48%,
      center,
      center;
  }

  60% {
    background-position:
      25px 5%,
      14px 0%,
      42px 12%,
      center,
      center;
  }

  80% {
    background-position:
      8px -35%,
      52px -45%,
      20px -28%,
      center,
      center;
  }

  100% {
    background-position:
      28px -80%,
      18px -95%,
      48px -70%,
      center,
      center;
  }
}

/* On garde le contenu au-dessus des particules */
.card--dnd>* {
  position: relative;
  z-index: 1;
}

/* Icône façon artefact doré */
.card--dnd .icon-wrap {
  color: #ebd094;
  background:
    radial-gradient(circle at 35% 25%, rgba(235, 208, 148, 0.32), transparent 45%),
    linear-gradient(135deg, rgba(107, 20, 20, 0.48), rgba(166, 124, 46, 0.18));
  border-color: rgba(235, 208, 148, 0.42);
  box-shadow:
    inset 0 0 18px rgba(235, 208, 148, 0.1),
    0 0 18px rgba(166, 124, 46, 0.16);
}

.card--dnd h3 {
  color: #ebd094;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(166, 124, 46, 0.16);
}


.card--dnd p {
  color: rgba(236, 227, 208, 0.74);
}

.card--dnd .url {
  color: #ebd094;
  opacity: 0.9;
}

/* Hover plus magique */
.card--dnd:hover {
  transform: translateY(-7px) scale(1.012);
  border-color: rgba(235, 208, 148, 0.76);
  background-color: #160d06;
  box-shadow:
    inset 0 0 58px rgba(166, 124, 46, 0.18),
    inset 0 0 0 1px rgba(235, 208, 148, 0.14),
    0 22px 52px -24px rgba(0, 0, 0, 1),
    0 0 42px rgba(166, 124, 46, 0.24);
}

.card--dnd:hover::after {
  opacity: 0.9;
  animation-duration: 5.5s;
}

.card--dnd:hover .icon-wrap {
  transform: scale(1.1) rotate(-6deg);
  color: #f5d98f;
  border-color: rgba(235, 208, 148, 0.58);
}

/* Respect des préférences d’accessibilité */
@media (prefers-reduced-motion: reduce) {
  .card--dnd::after {
    animation: none;
  }
}