/* ==========================================================================
   Cards — "Aurore" premium: the portrait over a glow in the rarity colour, a dark
   band with the name, the universe, rarity stars (1 to 6) and the stats, inside a
   metal frame with fine ornaments whose metal follows the rarity. Holo and glare
   follow the pointer.
   Sizes use container units (cqw) so a card looks the same at any width.
   Pointer vars set from JS on .card: --mx/--my (0–100%), --px/--py (-1..1).
   ========================================================================== */

@property --ang { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes k-spin { to { --ang: 360deg; } }
@keyframes k-pulse { 50% { opacity: .55; } }
@keyframes k-rays { to { transform: rotate(360deg); } }
@keyframes k-gem { to { transform: rotate(360deg); } }
@keyframes k-prism { to { background-position: 300% 0; } }
@keyframes k-sheen { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(230%) skewX(-18deg); } }

.card {
  --c: var(--r-C);
  --mx: 50%; --my: 50%; --px: 0; --py: 0;
  --metal: linear-gradient(135deg, #d9dde3, #8b929c 40%, #f4f6f8 55%, #6c737d);
  --glow: transparent;
  --orn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 140%22 preserveAspectRatio=%22none%22%3E%3Crect x=%225.6%22 y=%225.6%22 width=%2288.8%22 height=%22128.8%22 rx=%222.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.45%22/%3E%3Cg id=%22c%22%3E%3Cpath d=%22M4.8 18 C4.8 9.5 9.5 4.8 18 4.8%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M18 4.8 C23 4.8 24 9.5 20.5 10.5 M4.8 18 C4.8 23 9.5 24 10.5 20.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%22.7%22/%3E%3Cpath d=%22M9.5 6.8 L12.2 9.5 L9.5 12.2 L6.8 9.5 Z%22 fill=%22%23000%22/%3E%3C/g%3E%3Cuse href=%22%23c%22 transform=%22matrix%28-1 0 0 1 100 0%29%22/%3E%3Cuse href=%22%23c%22 transform=%22matrix%281 0 0 -1 0 140%29%22/%3E%3Cuse href=%22%23c%22 transform=%22matrix%28-1 0 0 -1 100 140%29%22/%3E%3Cpath d=%22M42 3.2 L50 1.2 L58 3.2 L50 5.4 Z M42 136.8 L50 138.8 L58 136.8 L50 134.6 Z%22 fill=%22%23000%22/%3E%3C/svg%3E");
  position: relative;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  perspective: 900px;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
/* the metal of the frame follows the rarity: steel, green silver, blue silver, violet silver, gold, red gold */
.card[data-r=U] { --c: var(--r-U); --metal: linear-gradient(135deg, #d6f5e3, #5f9f7c 40%, #effff5 55%, #3e6f55); }
.card[data-r=R] { --c: var(--r-R); --metal: linear-gradient(135deg, #dcecff, #5f86b8 40%, #f3f8ff 55%, #3d5f8c); }
/* Heroic: gold-yellow · Celestial: mauve · Eternal: bright pearl white */
.card[data-r=E] { --c: var(--r-E); --metal: linear-gradient(135deg, #ffecc2, #d18a24 40%, #fff4dc 55%, #8a5612); --glow: rgba(255, 174, 43, .42); }
.card[data-r=L] { --c: var(--r-L); --metal: linear-gradient(135deg, #f5e6ff, #a66ae6 40%, #fdf6ff 55%, #6e3fa8); --glow: rgba(192, 132, 252, .55); }
.card[data-r=M] { --c: var(--r-M); --metal: linear-gradient(135deg, #ffffff, #c9d4e6 35%, #ffffff 55%, #8f9bb3); --glow: rgba(235, 245, 255, .7); }

.card .ci {
  position: absolute; inset: 0;
  border-radius: 4.5cqw;
  overflow: hidden;
  color: #fff;
  background: #0a0c14;
  box-shadow: 0 0 8cqw var(--glow), 0 3cqw 8cqw rgba(0, 0, 0, .5);
  transform: rotateY(calc(var(--px) * 12deg)) rotateX(calc(var(--py) * -12deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.card.active .ci { transition: transform .08s linear, box-shadow .3s; }
.card .cfx, .card .cglit { display: none; }
/* the rarity colour glows behind the portrait, which fades into the bottom band */
.card .cbg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--c) 75%, #fff 10%), color-mix(in srgb, var(--c) 35%, #0a0d18) 60%, #0a0d18); }
.card .cart { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* framed on the face: most portraits have it in the top third, a light zoom brings it forward */
.card .cart img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform-origin: 50% 18%; transform: scale(1.12) translate(calc(var(--px) * -1.5%), calc(var(--py) * -1.5%)); transition: transform .5s;
  -webkit-mask: linear-gradient(to bottom, #000 58%, transparent 92%); mask: linear-gradient(to bottom, #000 58%, transparent 92%); }
/* the card number, top left, on a small dark pill so it reads over any picture */
.card .cno { position: absolute; z-index: 3; top: 5cqw; left: 5.5cqw; padding: .8cqw 2.4cqw; border-radius: 99px; font: 800 4.2cqw/1 'Manrope', var(--body), sans-serif; color: #fff; background: rgba(6, 10, 20, .6); border: .3cqw solid rgba(255, 255, 255, .25); }
.card .cbot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 1.3cqw; padding: 20cqw 7cqw 7cqw; text-align: center;
  background: linear-gradient(to bottom, transparent, rgba(6, 8, 16, .82) 42%, rgba(6, 8, 16, .96)); }
.card .cname { max-width: 100%; font: 800 8.4cqw/1.05 'Sora', var(--display), sans-serif; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 .5cqw 2cqw rgba(0, 0, 0, .6); }
.card .cser { max-width: 100%; font: 700 3.6cqw 'Manrope', var(--body), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* rarity stars */
.card .cstars { display: flex; gap: 1.2cqw; justify-content: center; }
.card .cstars i { width: 5.6cqw; height: 5.6cqw; background: linear-gradient(135deg, #fff6c9, #f2c230 45%, #b8860b); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 1cqw rgba(255, 210, 90, .9)); }
.card .cstats { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.2cqw; font: 700 3.6cqw 'Manrope', var(--body), sans-serif; color: rgba(255, 255, 255, .72); }
.card .cstats div { display: flex; align-items: baseline; gap: 1.2cqw; }
.card .cstats b { font-weight: 700; }
.card .cstats em { font-style: normal; font-size: 5cqw; font-weight: 800; color: #fff; }
.card .crar { font: 800 3.1cqw 'Manrope', var(--body), sans-serif; letter-spacing: .18em; text-transform: uppercase; padding: 1cqw 2.6cqw; border-radius: 99px; color: #0a0d18; background: var(--metal); white-space: nowrap; }
/* frame: a metal border and fine corner ornaments, both painted with the rarity metal */
.card .cframe { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; padding: 2.2cqw; background: var(--metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.card .cframe::after { content: ''; position: absolute; inset: 0; background: var(--metal); -webkit-mask: var(--orn) center / 100% 100% no-repeat; mask: var(--orn) center / 100% 100% no-repeat; }

/* holo and glare (pointer) */
.card .cfoil, .card .cglare { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.card .cglare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 45%); opacity: 0; mix-blend-mode: overlay; transition: opacity .3s; z-index: 4; }
.card.active .cglare { opacity: 1; }
.card[data-r=R] .cart::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); animation: k-sheen 5s ease-in-out infinite; }
.card[data-r=E] .cfoil { background: linear-gradient(115deg, transparent 20%, rgba(255, 214, 90, .38) 40%, rgba(255, 250, 220, .35) 55%, transparent 75%) var(--mx) 0 / 250% 100%; mix-blend-mode: color-dodge; opacity: .5; }
/* Celestial: mauve holo, rays plus a shimmering band that follows the pointer */
.card[data-r=L] .cfoil { background: radial-gradient(circle at var(--mx) var(--my), rgba(220, 180, 255, .55), transparent 50%), linear-gradient(115deg, transparent 25%, rgba(245, 230, 255, .45) 45%, rgba(190, 130, 255, .38) 55%, transparent 75%) var(--mx) var(--my) / 220% 220%, repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 8deg, rgba(200, 150, 255, .13) 8deg 12deg); mix-blend-mode: screen; }
/* Eternal: rainbow holo foil that slides with the pointer, like a shiny trading card */
.card[data-r=M] .cfoil { background: repeating-linear-gradient(115deg, #ff5f6d 0%, #ffc371 7%, #47e891 14%, #4facfe 21%, #a66cff 28%, #ff5f6d 35%) var(--mx) var(--my) / 300% 300%, radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .35), transparent 45%); mix-blend-mode: color-dodge; opacity: .42; }
/* sparkles on Celestial and Eternal cards */
.card[data-r=L] .cglit, .card[data-r=M] .cglit { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(.9cqw .9cqw at 18% 22%, #fff, transparent), radial-gradient(1.2cqw 1.2cqw at 78% 14%, #fff, transparent), radial-gradient(.8cqw .8cqw at 64% 46%, #fff, transparent), radial-gradient(1cqw 1cqw at 30% 58%, #fff, transparent), radial-gradient(.9cqw .9cqw at 86% 66%, #fff, transparent);
  animation: c-twinkle 2.6s ease-in-out infinite; }
.card[data-r=L] .cglit { filter: drop-shadow(0 0 1cqw #d8b4fe); }
.card[data-r=M] .cglit { filter: drop-shadow(0 0 1cqw #ffffff); animation-duration: 1.9s; }
@keyframes c-twinkle { 0%, 100% { opacity: .25; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.card.tilt:hover .ci { box-shadow: 0 0 12cqw color-mix(in srgb, var(--c) 50%, transparent), 0 4cqw 10cqw rgba(0, 0, 0, .55); }

/* badges ------------------------------------------------------------------- */
.card .cbadge { position: absolute; z-index: 5; font-family: var(--mono); font-weight: 700; font-size: 4.4cqw; padding: .8cqw 2.6cqw; border-radius: 9cqw; line-height: 1.2; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .5); }
.card .cbadge.cnt { left: 5cqw; top: 22%; background: rgba(10, 10, 14, .85); border: .4cqw solid rgba(255, 255, 255, .25); color: #fff; }
.card .cbadge.new { right: 5cqw; top: 22%; background: linear-gradient(135deg, #ff7a5c, #ff2e63); color: #fff; animation: k-pulse 1.4s ease-in-out infinite; }

/* missing / locked ---------------------------------------------------------- */
.card.missing { opacity: .45; }
.card.missing { --glow: transparent; }
.card.missing .ci { filter: grayscale(1) brightness(.75); }
.card.missing .cfoil, .card.missing .cglit { display: none !important; }
.card.locked .cart img { filter: brightness(0) contrast(2); opacity: .55; }
.card.locked .cart::before { content: '?'; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 34cqw; color: rgba(255, 255, 255, .22); }

@media (prefers-reduced-motion: reduce) {
  .card *, .card *::before, .card *::after { animation: none !important; }
}

/* ==========================================================================
   Card back — seigaiha waves, ornate frame, rotating seal with ring text.
   ========================================================================== */
.back { --c: var(--accent); position: relative; aspect-ratio: 5 / 7; container-type: inline-size; }
.back .bk {
  position: absolute; inset: 0; border-radius: 5.5cqw; overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, transparent 6.6cqw, color-mix(in srgb, var(--c) 55%, transparent) 6.6cqw 7.2cqw, transparent 7.2cqw 8.8cqw, color-mix(in srgb, var(--c) 40%, transparent) 8.8cqw 9.4cqw, transparent 9.4cqw) 0 0 / 20cqw 10cqw,
    radial-gradient(circle at 50% 100%, transparent 6.6cqw, color-mix(in srgb, var(--c) 55%, transparent) 6.6cqw 7.2cqw, transparent 7.2cqw 8.8cqw, color-mix(in srgb, var(--c) 40%, transparent) 8.8cqw 9.4cqw, transparent 9.4cqw) 10cqw 5cqw / 20cqw 10cqw,
    radial-gradient(120% 80% at 50% 50%, color-mix(in srgb, var(--c) 45%, #140c0b), #0d0809);
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .5), inset 0 0 0 1.2cqw color-mix(in srgb, var(--c) 70%, #000), inset 0 0 0 1.7cqw rgba(255, 255, 255, .3), inset 0 0 12cqw rgba(0, 0, 0, .6);
  display: grid; place-items: center;
}
.back .bk::before, .back .bk::after { content: ''; position: absolute; width: 14cqw; height: 14cqw; border: .8cqw solid color-mix(in srgb, var(--c) 70%, #fff); }
.back .bk::before { top: 5.5cqw; left: 5.5cqw; border-right: 0; border-bottom: 0; border-radius: 3cqw 0 0 0; }
.back .bk::after { bottom: 5.5cqw; right: 5.5cqw; border-left: 0; border-top: 0; border-radius: 0 0 3cqw 0; }
.back .seal { position: relative; width: 52cqw; height: 52cqw; display: grid; place-items: center; }
.back .seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: k-rays 30s linear infinite; }
.back .seal text { fill: color-mix(in srgb, var(--c) 40%, #fff); font: 700 9px var(--mono); letter-spacing: 2.4px; }
.back .seal b {
  width: 30cqw; height: 30cqw; border-radius: 50%; display: grid; place-items: center;
  font-size: 15cqw; color: #1a0f0c;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 0 0 1.6cqw rgba(0, 0, 0, .3), 0 0 0 2.2cqw color-mix(in srgb, var(--c) 70%, #fff), 0 0 9cqw color-mix(in srgb, var(--c) 70%, transparent);
}
.back .brand { position: absolute; bottom: 9cqw; font-family: var(--display); font-weight: 900; font-size: 5.6cqw; letter-spacing: .5em; color: color-mix(in srgb, var(--c) 35%, #fff); opacity: .8; }

/* ===== performance =====
   Cards in grids keep their look but stay still until hovered; featured cards (.live:
   hero, detail views, booster results) animate all the time. Hover-only layers are not
   rendered at all until needed. */
.card:not(.live):not(:hover) *, .card:not(.live):not(:hover) *::before, .card:not(.live):not(:hover) *::after { animation-play-state: paused !important; }
.card:not(.live):not(.active):not(:hover) .cglare { display: none; }
.card:not(.live):not(.active):not(:hover):not([data-r=E]) .cfoil { display: none; }
.card .ci { contain: layout paint; }

/* "mode fluide": lighter cards for slower computers */
.lite .card *, .lite .card *::before, .lite .card *::after { animation: none !important; }
.lite .card .cglit, .lite .card .cfoil, .lite .card .cglare, .lite .card .cfx, .lite .card .ci::before { display: none !important; }
.lite .card .ci { box-shadow: 0 0 0 1.4cqw var(--c), 0 2cqw 6cqw rgba(0, 0, 0, .45) !important; }
.lite .card .cname { animation: none !important; }

/* Eternal: an aura breathes around the card, and a ring of light leaves it at each pulse.
   On the card itself (outside its picture), so it keeps pulsing in grids and stays cheap */
.card[data-r=M]::before, .card[data-r=M]::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border-radius: 9cqw; }
.card[data-r=M]::before { inset: -7%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(205, 225, 255, .55) 45%, rgba(255, 200, 245, .25) 70%, transparent);
  filter: blur(4cqw); animation: m-aura 2.4s ease-in-out infinite; }
.card[data-r=M]::after { inset: -2%; border: .9cqw solid rgba(255, 255, 255, .8); box-shadow: 0 0 6cqw rgba(225, 238, 255, .9); opacity: 0; animation: m-ring 2.4s ease-out infinite; }
@keyframes m-aura { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes m-ring { 0% { opacity: .9; transform: scale(.98); } 70%, 100% { opacity: 0; transform: scale(1.16); } }
.card.missing[data-r=M]::before, .card.missing[data-r=M]::after { display: none; }
/* still with "mode fluide" or reduced motion: a steady aura */
.lite .card[data-r=M]::before { animation: none; opacity: .7; }
.lite .card[data-r=M]::after { display: none; }
@media (prefers-reduced-motion: reduce) { .card[data-r=M]::before { animation: none; opacity: .7; } .card[data-r=M]::after { display: none; } }