/* Dragon Deck : « le cycle des éléments ». Écailles en fond, et dans l'arène du bas les trois emblèmes
   (feu, forêt, eau : dessins originaux) qui s'allument tour à tour, reliés par « bat ». Rien sur la boîte. */
.sm--dragon-deck {
  --sm-fond: #e5f5f4; --sm-fond-2: #f2faf9; --sm-encre: #1f1d1a; --sm-doux: #4a463f;
  --sm-accent: #a1321c; --sm-accent-fonce: #73220f; --sm-carte: #fff;
  --sm-police: "Bricolage Grotesque", var(--titre);
  --dd-feu: #d9481f; --dd-foret: #3f8a3a; --dd-eau: #2a74b8;
}
.sm--dragon-deck .sm-ouverture { background: linear-gradient(#d3eeec, #e5f5f4); }
.sm--dragon-deck h1 { font-weight: 800; }
.dd-ecailles { position: absolute; inset: 0; background: url("/assets/img/motifs/ecailles.svg") 0 0 / 48px auto repeat; opacity: 0.35; -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); mask-image: linear-gradient(90deg, #000, transparent 45%); }
.dd-arene { display: grid; place-items: center; background: #1f2b2a; border-top: 4px solid #a6d9d4; }
.dd-cycle { list-style: none; margin: 0; padding: 0 1rem; display: flex; align-items: center; gap: clamp(0.3rem, 1.5vw, 1rem); }
.dd-element { display: grid; justify-items: center; gap: 0.2rem; font-weight: 800; font-size: clamp(0.72rem, 1.5vw, 0.95rem); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.dd-element svg { width: clamp(2.4rem, 5vw, 3.6rem); height: auto; padding: 0.45rem; border-radius: 50%; background: #2d3d3b; box-shadow: 0 0 0 3px currentColor; }
.dd-element path { fill: currentColor; }
.dd-element--foret path { stroke: #2d3d3b; stroke-width: 2.5; }
.dd-element--feu { color: #ff8a5c; } .dd-element--foret { color: #7fcf74; } .dd-element--eau { color: #6fb6f2; }
.dd-fleche { position: relative; font-size: clamp(0.62rem, 1.3vw, 0.8rem); font-weight: 700; color: #cfe9e6; text-transform: lowercase; padding: 0 1.2rem 0.6rem 0; border-bottom: 2px dashed #a6d9d4; }
.dd-fleche::after { content: ""; position: absolute; right: -2px; bottom: -6px; border: 5px solid transparent; border-left: 8px solid #a6d9d4; }
@media (max-width: 30rem) { .dd-fleche--retour { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .dd-element svg { animation: dd-eveil 6s ease-in-out infinite; }
  .dd-element--foret svg { animation-delay: 2s; } .dd-element--eau svg { animation-delay: 4s; }
  @keyframes dd-eveil { 0%, 30%, 100% { box-shadow: 0 0 0 3px currentColor; translate: 0 0; } 12% { box-shadow: 0 0 0 3px currentColor, 0 0 22px 6px currentColor; translate: 0 -5px; } }
  .dd-fleche { background: linear-gradient(90deg, transparent 0 40%, rgba(166, 217, 212, 0.25) 50%, transparent 60%) 0 0 / 300% 100%; animation: dd-passe 2s linear infinite; }
  @keyframes dd-passe { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}