/* ========================= la carte secrète =========================

   Même ampleur que la mythique, c'est le sommet du jeu, mais là où la
   mythique est rose, la secrète n'a pas de teinte : elle les prend toutes.
   Tout ce qui est coloré par `--r-color` sur les autres paliers défile ici
   sur l'arc-en-ciel.
   ==================================================================== */

.card.r-secret {
  --r-color: #ff5fd2;
  --r-glow: #8be9ff;
  --holo: .42;
}

.card.r-secret .card-front {
  padding: .2em;
  box-shadow: 0 3em 7em -2.4em #000, 0 0 6em -1em rgba(255, 95, 210, .85);
}

/* le liseré tournant prend tout le spectre et va plus vite */
.card.r-secret .card-front::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg,
    #ff5fd2, #ff8a5f, #ffe95f, #5fff9b, #8be9ff, #c65fff, #ff5fd2);
  animation: frame-spin 2.6s linear infinite;
  opacity: .95;
}

/* et la teinte elle-même dérive, pour que deux captures ne se ressemblent pas */
.card.r-secret .card-frame {
  animation: secret-hue 7s linear infinite;
}
@keyframes secret-hue { to { filter: hue-rotate(360deg); } }

.card.r-secret .card-frame::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 18% 24%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 72% 16%, #fff, transparent),
    radial-gradient(2px 2px at 84% 62%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 30% 78%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 58% 44%, #fff, transparent);
  opacity: 0;
  animation: twinkle 2.2s ease-in-out infinite;
  pointer-events: none;
}

.card.r-secret::after { opacity: .7; }

/* le bandeau de palier, en dégradé plutôt qu'en aplat */
.card.r-secret .card-tier,
.card.r-secret .tier-badge,
.card.r-secret .card-rarity {
  background: linear-gradient(100deg, #ff5fd2, #ffe95f, #5fff9b, #8be9ff, #c65fff);
  background-size: 260% 100%;
  animation: secret-slide 4s linear infinite;
  color: #14121c;
  -webkit-text-fill-color: #14121c;
}
@keyframes secret-slide { to { background-position: 260% 0; } }

/* la scène : le halo de révélation, lui aussi multicolore */
.reveal-slot.is-secret::before,
.stamp.is-secret {
  background: conic-gradient(from 0deg,
    #ff5fd2, #ff8a5f, #ffe95f, #5fff9b, #8be9ff, #c65fff, #ff5fd2) !important;
  -webkit-background-clip: border-box;
}

/* le sceau « secrète » posé sur la jaquette et sur la carte */
.seal-secret {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #14121c;
  background: linear-gradient(100deg, #ff5fd2, #ffe95f, #5fff9b, #8be9ff, #c65fff);
  background-size: 260% 100%;
  animation: secret-slide 4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .card.r-secret .card-front::before,
  .card.r-secret .card-frame,
  .card.r-secret .card-tier,
  .seal-secret { animation: none; }
}

/* ---------------------- le sceau « série personnelle » ----------------------
   Il dit d'où vient la carte. Ce n'est pas décoratif : un titre qui n'existe
   que dans la série personnelle de quelqu'un ne s'obtient nulle part
   ailleurs, et c'est exactement ce qui lui donne sa valeur dans un échange. */
.seal-perso {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: .15em .6em;
  border-radius: 999px;
  border: 1px solid rgba(111, 214, 255, .55);
  background: rgba(111, 214, 255, .14);
  color: #9fe4ff;
  font-style: normal;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.seal-perso::before { content: "◆"; font-size: .8em; opacity: .85; }

.stat.is-seal {
  display: flex;
  align-items: center;
  padding-top: .1em;
}
.stat.is-seal .seal-perso { font-size: .9em; }

.jacket-meta .seal-perso { margin-left: 4px; font-size: 10px; }