/* ─────────────────────────────────────────────────────────────
   LEGEND CARDS · holographic "summon" cards for pro show artists
   ───────────────────────────────────────────────────────────── */
.legend--crimson { --c1: var(--tone-crimson); --c2: var(--tone-crimson-2); --bg: linear-gradient(170deg, #5a0f2c, #2a0c3a 55%, #0d0620); }
.legend--violet  { --c1: var(--tone-violet);  --c2: var(--tone-violet-2);  --bg: linear-gradient(170deg, #3d1f8a, #1d0e48 55%, #0d0620); }
.legend--rose    { --c1: var(--tone-rose);    --c2: var(--tone-rose-2);    --bg: linear-gradient(170deg, #7a1258, #2e0f4e 55%, #0d0620); }

.legend { position: relative; padding: 3px; border-radius: 18px; aspect-ratio: 3 / 4.2; max-width: 100%; outline: none;
  background: linear-gradient(135deg, #fff3c4, #e9bd67 22%, #7a4a12 45%, #f3c35f 60%, #fff3c4 75%, #b07a2a); background-size: 220% 220%;
  animation: foil 6s linear infinite, bob 5s ease-in-out infinite;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s, box-shadow .3s;
  box-shadow: 0 0 0 1px rgba(255,240,200,.25), 0 18px 40px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--c1) 35%, transparent); }
.legend:nth-child(2) { animation-delay: 0s, -1.6s; }
.legend:nth-child(3) { animation-delay: 0s, -3.2s; }
@keyframes foil { to { background-position: 220% 220%; } }
@keyframes bob { 50% { translate: 0 -8px; } }
.legend:hover, .legend:focus-visible { box-shadow: 0 0 0 1px rgba(255,240,200,.5), 0 24px 50px rgba(0,0,0,.6), 0 0 50px color-mix(in srgb, var(--c1) 65%, transparent); }

.legend__inner { position: relative; height: 100%; border-radius: 15px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; }
.legend__rays { position: absolute; left: 50%; top: 40%; width: 180%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; opacity: .5;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 45%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); mask: radial-gradient(circle, #000 10%, transparent 55%); animation: spin 40s linear infinite; }
.legend__holo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35; transition: opacity .3s;
  background: linear-gradient(115deg, transparent 20%, rgba(255,60,200,.55) 35%, rgba(60,230,255,.55) 48%, rgba(255,235,90,.55) 60%, transparent 78%);
  background-size: 250% 250%; background-position: calc(var(--px, .5) * 100%) calc(var(--py, .5) * 100%); }
.legend:hover .legend__holo { opacity: .75; }
.legend__corner { position: absolute; width: 46px; height: 46px; color: var(--gold-soft); z-index: 4; filter: drop-shadow(0 0 6px rgba(233,189,103,.8)); }
.legend__corner:nth-of-type(1) { left: 8px; top: 8px; }
.legend__corner:nth-of-type(2) { right: 8px; top: 8px; transform: scaleX(-1); }
.legend__corner:nth-of-type(3) { left: 8px; bottom: 8px; transform: scaleY(-1); }
.legend__corner:nth-of-type(4) { right: 8px; bottom: 8px; transform: scale(-1); }
.legend__rank { position: absolute; left: 22px; top: 20px; z-index: 5; font: 400 1.15rem/1 var(--f-display); padding: 6px 12px 5px;
  background: linear-gradient(180deg, #fff3cf, #f3c35f 55%, #b8741c); color: #2b0d52; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); box-shadow: 0 0 14px rgba(243,195,95,.6); }
.legend__stars { position: absolute; right: 24px; top: 24px; z-index: 5; color: #ffd772; letter-spacing: 2px; font-size: .95rem; text-shadow: 0 0 8px #ffb53c, 0 1px 0 #5a2a0a; }
.legend__sigil { position: absolute; left: 50%; top: 40%; translate: -50% -50%; width: 44%; aspect-ratio: 1; display: grid; place-items: center; color: #fff3d6; z-index: 1;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c1) 80%, #fff); box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 70%, transparent), inset 0 0 30px color-mix(in srgb, var(--c1) 60%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--c1) 40%, transparent), transparent 70%); animation: sigilPulse 3.4s ease-in-out infinite; }
.legend__sigil::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1.5px dashed rgba(245,220,164,.6); animation: spin 16s linear infinite reverse; }
.legend__sigil svg { width: 46%; height: 46%; filter: drop-shadow(0 0 10px var(--c1)); }
@keyframes sigilPulse { 50% { box-shadow: 0 0 60px color-mix(in srgb, var(--c1) 90%, transparent), inset 0 0 40px color-mix(in srgb, var(--c1) 70%, transparent); } }
.legend__plate { position: relative; z-index: 2; padding: 22px 22px 26px; text-align: center; background: linear-gradient(180deg, transparent, rgba(10,4,24,.92) 40%); }
.legend__plate::before { content: ""; position: absolute; left: 18px; right: 18px; top: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.legend__plate small { display: block; margin-top: 10px; font: italic 800 .72rem/1 var(--f-ui); letter-spacing: .3em; color: var(--gold-soft); text-transform: uppercase; }
.legend__plate h3 { margin: 10px 0 10px; font: 400 clamp(1.15rem, 1.9vw, 1.5rem)/1.15 var(--f-display); color: #fff; text-shadow: 0 2px 0 #1c0838, 0 0 18px var(--c1); }
.legend__genre { display: inline-flex; align-items: center; gap: 8px; font: italic 700 .72rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--c1); }
.legend__genre svg { width: 10px; height: 10px; color: var(--gold-soft); }