/* Legendary material. Shared by server-rendered cards, the album and pack clones.
   Everything lives INSIDE each face: never flatten .card3d-inner's 3D context.
   No idle animation: Card3D supplies light/tilt only while interacting. */
.rarity-legendario {
  --frame: #dfb967;
  --frame2: #71502a;
  --glow: #d79a394d;
  --ink-card: #f2dfac;
}

.rarity-legendario.trading-card,
.rarity-legendario .trading-card {
  background: linear-gradient(125deg, #f8e3a0, #7a5828 18%, #e7c77d 32%, #302413 52%, #cba35e 76%, #f5e3ae);
  padding: 4px;
}

.rarity-legendario .card-bezel {
  padding: calc(24 * var(--px));
  border-color: #b08a47;
  background:
    radial-gradient(ellipse at 50% 0, #63502a4d, transparent 60%),
    repeating-linear-gradient(125deg, #cfb57605 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #1e201b, #090e10 55%, #211b12);
}

/* Original scalable engraving, shared by every card; no downloaded artwork. */
.rarity-legendario .card-bezel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url("./legendary-frame.svg") center / 100% 100% no-repeat;
  opacity: 1;
  pointer-events: none;
}

.rarity-legendario .card-bezel::before {
  inset: 0;
  transform: none;
  background: radial-gradient(ellipse at calc(var(--holo-x, .5) * 100%) calc(var(--holo-y, .35) * 100%), #ffe5a525, transparent 65%);
}

.rarity-legendario .card-top {
  margin-bottom: calc(9 * var(--px));
  padding-bottom: calc(7 * var(--px));
  border-bottom: 1px solid #a47c3b66;
}
/* Las esquinas grabadas ocupan unos 60 px de cada lado: el texto de cabecera y pie
   empieza despues, para no escribirse encima de las volutas. */
.rarity-legendario .card-top,
.rarity-legendario .card-foot { padding-inline: calc(38 * var(--px)); }
.rarity-legendario .rarity-label {
  border-color: #b9934e88;
  background: linear-gradient(135deg, #9d75352b, #161710);
  color: #f4d993;
}
.rarity-legendario .card-copy {
  position: relative;
  text-align: center;
  margin-top: calc(9 * var(--px));
  border-top: 1px solid #aa844b80;
  background: radial-gradient(ellipse at 50% 0, #b68b3020, transparent 75%);
}
.rarity-legendario .card-copy h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.025em;
  color: #f4e4bf;
  text-shadow: 0 2px 2px #000;
}
.rarity-legendario .card-copy > p:last-child { color: #b6ae97; }
.rarity-legendario .card-art {
  isolation: isolate;
  flex-basis: 0;
  border-color: #b28a46;
  /* The crop remains compatible with existing rectangular illustrations. */
  clip-path: polygon(8% 0, 92% 0, 100% 7%, 100% 93%, 92% 100%, 8% 100%, 0 93%, 0 7%);
}
.rarity-legendario .card-art > img {
  position: absolute;
  inset: 0;
  /* A small overscan lets the art move behind its fixed engraved frame. */
  transform: translate(calc(var(--holo-dx, 0) * -5px), calc(var(--holo-dy, 0) * -5px)) scale(1.045);
}
/* Pack templates keep both the image and the unknown-card placeholder in the DOM.
   Their explicit display rules must not override the native hidden attribute. */
.rarity-legendario .card-art > [hidden] { display: none; }
.rarity-legendario .frame-corner {
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border-width: 1px;
  border-color: #edcf85;
  filter: drop-shadow(0 1px 1px #000);
}
.rarity-legendario .frame-one { border-width: 1px 0 0 1px; border-radius: 45% 0 0 0; }
.rarity-legendario .frame-two { border-width: 1px 1px 0 0; border-radius: 0 45% 0 0; }
.rarity-legendario .frame-three { border-width: 0 0 1px 1px; border-radius: 0 0 0 45%; }
.rarity-legendario .frame-four { border-width: 0 1px 1px 0; border-radius: 0 0 45% 0; }

/* Foil stays on the artwork, never on text or a hidden card's question mark.
   The printed version (album) has a restrained static sheen without JS. */
.rarity-legendario .card-art:has(> img:not([hidden]))::before,
.rarity-legendario .back-crest.has-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at calc(var(--holo-x, .5) * 100%) calc(var(--holo-y, .35) * 100%), #fff4ce90, transparent 52%),
    repeating-linear-gradient(116deg, #e7b56a 0%, #75b8b3 12%, #8984b4 25%, #c992b2 38%, #e2c179 50%),
    repeating-linear-gradient(38deg, #fff3 0 1px, #0003 1px 3px);
  background-size: 100% 100%, 280% 280%, 100% 100%;
  background-position: center, calc(var(--holo-x, .5) * 100%) calc(var(--holo-y, .35) * 100%), center;
  background-blend-mode: screen, soft-light, normal;
  mix-blend-mode: soft-light;
  opacity: calc(.23 + var(--active, 0) * .43);
}
.rarity-legendario .card-art::after {
  z-index: 2;
  box-shadow: inset 0 0 28px #0007, inset 0 0 0 2px #edc87860;
}

/* Keep broad specular light subtle, so the title and serial remain readable. */
.card3d.rarity-legendario .card3d-gloss {
  background-image: linear-gradient(112deg, transparent 35%, #fff4d9 48%, #ffe3a070 50%, transparent 63%);
  background-size: 300% 300%;
  background-position: calc(var(--holo-x, .5) * 100%) calc(var(--holo-y, .35) * 100%);
  mix-blend-mode: soft-light;
  opacity: calc(.1 + var(--active) * .22);
}
.card3d.rarity-legendario .card3d-sparkle {
  inset: 0;
  background-image:
    radial-gradient(circle at 13% 12%, #fff4d2 0 .6px, transparent 1.8px),
    radial-gradient(circle at 86% 37%, #ffe7ae 0 .8px, transparent 2px),
    radial-gradient(circle at 28% 79%, #e8d0a0 0 .7px, transparent 1.7px),
    radial-gradient(circle at 76% 91%, #fff4d2 0 .6px, transparent 1.8px);
  background-size: 100% 100%;
  transform: none;
  opacity: calc(.15 + var(--active) * .5);
}
.card3d.rarity-legendario .card3d-glow {
  background: radial-gradient(ellipse at 50% 44%, #d9a64d40, #74562e18 46%, transparent 68%);
  opacity: calc(.4 + var(--active) * .45);
}
.card3d.rarity-legendario .card3d-button { border-color: #806037; color: #dbc38e; }
.card3d.rarity-legendario .card3d-button:hover { border-color: #e5c581; color: #fff0c2; }

@media (prefers-reduced-motion: reduce) {
  .rarity-legendario .card-art > img { transform: none; }
  .rarity-legendario .card-bezel::before,
  .rarity-legendario .card-art::before,
  .rarity-legendario .back-crest.has-art::before,
  .card3d.rarity-legendario .card3d-gloss {
    --holo-x: .5;
    --holo-y: .35;
    --active: 0;
  }
  .card3d.rarity-legendario .card3d-sparkle { display: none; }
}