/* ===== Card component (js/card.js). 1em = card width / 20. ===== */
.card {
  --cw: 104px;
  --tint-rgb: 185, 178, 166;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  position: relative;
  flex: none;
  container: card / inline-size;
  perspective: 1100px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.card[role="button"] { cursor: pointer; }
.card[role="button"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.card-inner {
  position: absolute; inset: 0;
  font-size: calc(var(--cw) / 20);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
@supports (width: 1cqw) { .card-inner { font-size: 5cqw; } }
.card.down .card-inner { transform: rotateY(180deg); }
.card.flipping .card-inner { animation: cardFlip .55s cubic-bezier(.2, .8, .2, 1) both; }
.card.flipping.quick .card-inner { animation-duration: .34s; }
@keyframes cardFlip { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
.card.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); touch-action: none; }
.card.tilt.tilting { transition: transform .09s linear; }

.face {
  position: absolute; inset: 0;
  border-radius: .95em;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 .45em 1.3em rgba(0, 0, 0, .55), 0 0 0 .05em rgba(0, 0, 0, .7);
}
.face.front { transform: rotateY(0deg); }
.face.back { transform: rotateY(180deg); }
/* Belt and braces: no spoilers even where backface-visibility misbehaves. */
.card.down:not(.flipping) .face.front { visibility: hidden; }
.card:not(.down) .face.back { visibility: hidden; }
.card.flipping .face.back { visibility: visible; }

/* ---- rarity palettes ---- */
.r-C { --frame: linear-gradient(150deg, #f6eee0 0%, #cdc4b4 28%, #9d958a 55%, #e7dece 78%, #b9b2a6 100%); --accent: #DDD5C7; --accent-soft: rgba(221, 213, 199, .32); --tint-rgb: 185, 178, 166; --gem: linear-gradient(135deg, #fff, #9d958a); }
.r-U { --frame: linear-gradient(150deg, #c6fbe6 0%, #5ee7b2 30%, #23926e 60%, #8ff0cb 84%, #3fc795 100%); --accent: #5EE7B2; --accent-soft: rgba(94, 231, 178, .4); --tint-rgb: 94, 231, 178; --gem: linear-gradient(135deg, #e3fff3, #23a77a); }
.r-R { --frame: linear-gradient(150deg, #ffb3a8 0%, #e84338 32%, #8a1c13 62%, #f2786c 85%, #c8362d 100%); --accent: #FF7468; --accent-soft: rgba(232, 67, 56, .48); --tint-rgb: 232, 67, 56; --gem: linear-gradient(135deg, #ffd6d0, #d0342a); }
.r-SR { --frame: linear-gradient(150deg, #ded2ff 0%, #8b5cf6 30%, #3f1f8a 60%, #b597ff 82%, #6d3fe0 100%); --accent: #AE92FF; --accent-soft: rgba(139, 92, 246, .55); --tint-rgb: 139, 92, 246; --gem: linear-gradient(135deg, #f2edff, #7c4bf0); }
.r-UR { --frame: linear-gradient(150deg, #fff4c4 0%, #f5c04b 20%, #a2701a 42%, #ffe08a 60%, #c9962f 80%, #fff1b8 100%); --accent: #F5C04B; --accent-soft: rgba(245, 192, 75, .6); --tint-rgb: 245, 192, 75; --gem: conic-gradient(#ff6ad5, #ffd36a, #6affc4, #6ab8ff, #c86aff, #ff6ad5); }
.r-GOLD { --frame: linear-gradient(125deg, #7a5a17 0%, #f5d77a 14%, #b8862b 28%, #fff1b8 42%, #c9972f 56%, #f5c04b 70%, #8a6a1f 84%, #f0cf73 100%); --accent: #FFE08A; --accent-soft: rgba(255, 224, 138, .6); --tint-rgb: 233, 196, 106; --gem: linear-gradient(135deg, #fff7d6, #c9962f); }

/* ---- front ---- */
.frame { position: absolute; inset: 0; padding: .5em; background: var(--frame); border-radius: inherit; }
.frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 .07em rgba(255, 255, 255, .5), inset 0 .14em .22em rgba(255, 255, 255, .3), inset 0 -.16em .3em rgba(0, 0, 0, .35);
}
.frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, .22) 48%, transparent 62%);
}
.panel {
  position: relative; z-index: 1; height: 100%;
  border-radius: .55em;
  background: radial-gradient(120% 70% at 50% 0%, rgba(var(--tint-rgb), .16), transparent 62%), linear-gradient(180deg, #171a20, #0b0d10);
  box-shadow: inset 0 0 0 .06em rgba(0, 0, 0, .75), 0 0 0 .05em rgba(255, 255, 255, .14);
  display: flex; flex-direction: column;
  padding: .4em .5em .45em;
}
.c-top { display: flex; align-items: center; gap: .4em; height: 2.15em; padding: 0 .15em; flex: none; }
.c-name { flex: 1; min-width: 0; font-weight: 600; font-size: 1.18em; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #F7F0E4; }
.c-rar { font: 600 .62em/1 var(--mono); letter-spacing: .06em; color: var(--accent); }
.gem {
  width: 1em; height: 1em; flex: none; margin: 0 .22em 0 .05em;
  transform: rotate(45deg); border-radius: .16em; background: var(--gem);
  box-shadow: 0 0 .55em var(--accent-soft), inset 0 0 0 .08em rgba(255, 255, 255, .55);
}
.c-art {
  position: relative; flex: none; aspect-ratio: 4 / 3; border-radius: .42em; overflow: hidden;
  background: radial-gradient(circle at 50% 56%, rgba(var(--tint-rgb), .5), rgba(var(--tint-rgb), .1) 58%, transparent 78%), linear-gradient(180deg, #1d2128, #0f1115);
  box-shadow: inset 0 0 0 .08em rgba(0, 0, 0, .6), 0 0 0 .07em var(--accent-soft);
}
.c-art .c-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3.5%; }
.fit-cover .c-art .c-img { object-fit: cover; padding: 0; }
.c-meta {
  display: flex; justify-content: space-between; align-items: center; gap: .5em; flex: none;
  margin-top: .55em; padding: 0 .25em;
  font-size: .6em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #9d968c;
}
.c-meta .mono { letter-spacing: .03em; color: var(--accent); font-size: 1.12em; font-weight: 500; }
.c-text {
  flex: 1; min-height: 0; margin-top: .45em; padding: .35em .55em;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2em;
  border-radius: .4em;
  background: linear-gradient(180deg, rgba(var(--tint-rgb), .08), rgba(255, 255, 255, .015));
  box-shadow: inset 0 0 0 .05em rgba(var(--tint-rgb), .26);
}
.c-flavor {
  margin: 0; font-size: .8em; line-height: 1.32; font-style: italic; color: #d6cdbf; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.c-foot { display: flex; justify-content: center; margin-top: .3em; flex: none; }
.c-king { width: 2.3em; height: 2.3em; object-fit: contain; display: block; filter: drop-shadow(0 .08em .2em rgba(0, 0, 0, .6)); }
.c-king.crown-fb svg { width: 100%; height: 100%; display: block; }

/* art missing → rarity-tinted placeholder with the name */
.ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; }
.ph-name { font-weight: 600; font-size: 1.5em; line-height: 1.1; color: rgba(var(--tint-rgb), .95); text-shadow: 0 .1em .6em rgba(0, 0, 0, .6); }
.ph-gold { gap: .3em; align-content: center; background: radial-gradient(circle at 50% 45%, rgba(255, 224, 138, .35), transparent 65%); }
.ph-coin { width: 5.4em; height: 5.4em; display: block; filter: drop-shadow(0 0 .8em rgba(245, 192, 75, .6)); }
.ph-coin svg { width: 100%; height: 100%; display: block; }
.ph-gold .ph-name { font-size: 1.1em; letter-spacing: .2em; text-transform: uppercase; color: #FFE08A; }
.ph-q { position: absolute; inset: 0; display: grid; place-items: center; font: 600 4em var(--font); color: rgba(244, 235, 221, .12); }

/* ---- shine layers ----
   .holo lives inside .frame under the opaque .panel, so the rainbow only plays on the border;
   the art window gets its own soft sheen (::after). */
.holo, .sparkle, .glare { position: absolute; inset: 0; pointer-events: none; }
.holo { z-index: 0; }
.sparkle, .glare { z-index: 2; }
.glare { overflow: hidden; border-radius: inherit; }
.glare::before {
  content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: overlay; opacity: 0;
  transform: translate3d(calc(var(--px, 0) * 25%), calc(var(--py, 0) * 25%), 0);
  transition: opacity .3s;
}
.tilting .glare::before { opacity: 1; }

.r-SR .holo {
  inset: -50%;
  background: linear-gradient(115deg, transparent 36%, rgba(236, 226, 255, .55) 46%, rgba(255, 255, 255, .7) 50%, rgba(236, 226, 255, .55) 54%, transparent 64%);
  mix-blend-mode: overlay;
  animation: srSweep 5.5s ease-in-out infinite;
}
.r-UR .holo {
  inset: -60%;
  background: linear-gradient(115deg, transparent 14%, #ff5fd2 24%, #ffd25c 33%, #5cffc0 42%, #5cb6ff 51%, #b65cff 60%, #ff5fd2 69%, transparent 80%);
  mix-blend-mode: color-dodge; opacity: .75;
  animation: holoDrift 6.5s ease-in-out infinite alternate;
}
.r-GOLD .holo {
  inset: -50%;
  background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%);
  mix-blend-mode: overlay;
  animation: goldSweep 3.4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.tilting .holo { animation: none; transform: translate3d(calc(var(--px, 0) * 22%), calc(var(--py, 0) * 16%), 0); transition: transform .09s linear; }

/* art-window sheen */
.c-art::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; z-index: 1;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .1) 49%, transparent 58%);
  transform: translate3d(calc(var(--px, -.3) * 20%), calc(var(--py, -.2) * 14%), 0);
}
.r-UR .c-art::after {
  background: linear-gradient(115deg, transparent 22%, rgba(255, 95, 210, .45) 32%, rgba(255, 210, 92, .45) 40%, rgba(92, 255, 192, .45) 48%, rgba(92, 182, 255, .45) 56%, rgba(182, 92, 255, .45) 64%, transparent 74%);
  mix-blend-mode: soft-light;
  animation: holoDrift 6.5s ease-in-out infinite alternate;
}
.r-GOLD .c-art::after {
  background: linear-gradient(112deg, transparent 40%, rgba(255, 240, 200, .35) 50%, transparent 60%);
  mix-blend-mode: screen;
  animation: goldSweep 3.4s cubic-bezier(.45, 0, .2, 1) infinite;
}
.tilting .c-art::after { animation: none; transition: transform .09s linear; }
.r-UR .sparkle, .r-GOLD .sparkle {
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .95) 0 .05em, transparent .12em),
    radial-gradient(circle at 70% 70%, rgba(255, 250, 220, .9) 0 .045em, transparent .11em),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .8) 0 .035em, transparent .09em);
  background-size: 2.9em 3.3em, 4.3em 3.7em, 5.9em 5.1em;
  mix-blend-mode: screen; opacity: .4;
  animation: twinkle 2.2s ease-in-out infinite alternate;
}
.c-vid { background: #0b0d10; }
@keyframes holoDrift { from { transform: translate3d(-16%, -10%, 0); } to { transform: translate3d(16%, 10%, 0); } }
@keyframes srSweep { 0%, 15% { transform: translate3d(-40%, 0, 0); } 70%, 100% { transform: translate3d(40%, 0, 0); } }
@keyframes twinkle { from { opacity: .15; } to { opacity: .55; } }
@keyframes goldSweep { 0% { transform: translate3d(-45%, 0, 0); } 65%, 100% { transform: translate3d(45%, 0, 0); } }

/* ---- GOLD foil card ---- */
.r-GOLD .frame { padding: .62em; }
.r-GOLD .frame::after { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 .05em, transparent .05em .19em), linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, .3) 48%, transparent 64%); }
.r-GOLD .panel { background: radial-gradient(120% 70% at 50% 0%, rgba(255, 224, 138, .22), transparent 60%), linear-gradient(165deg, #2b200b, #110c04 55%, #2a1e09); box-shadow: inset 0 0 0 .08em rgba(255, 224, 138, .55); }
.r-GOLD .c-name { color: #FFE9A8; }
.r-GOLD .c-meta { color: #d9bf7c; }
.r-GOLD .c-serial { font-size: 1.45em !important; color: #FFE08A; }
.c-amount { text-align: center; font-size: 1.45em; font-weight: 500; color: #FFE08A; margin-top: .3em; text-shadow: 0 0 .6em rgba(245, 192, 75, .65); flex: none; }
.r-GOLD .c-flavor { color: #e8d6a6; }

/* ---- back ---- */
.face.back {
  background:
    radial-gradient(circle at 50% 44%, rgba(233, 196, 106, .2), transparent 40%),
    repeating-linear-gradient(45deg, rgba(233, 196, 106, .07) 0 .06em, transparent .06em 1.25em),
    repeating-linear-gradient(-45deg, rgba(233, 196, 106, .07) 0 .06em, transparent .06em 1.25em),
    linear-gradient(160deg, #16244a, #0a1229 55%, #060a18);
}
.face.back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, #F5C04B 0 .07em, transparent .13em),
    radial-gradient(circle at 75% 65%, #FFE08A 0 .06em, transparent .12em),
    radial-gradient(circle at 45% 85%, #E9C46A 0 .05em, transparent .1em);
  background-size: 5.1em 4.7em, 6.3em 5.9em, 4.1em 6.7em;
  animation: twinkle 2.6s ease-in-out infinite alternate;
}
.face.back .back-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.back-in {
  position: absolute; inset: .75em; border-radius: .6em;
  border: .09em solid rgba(233, 196, 106, .6);
  box-shadow: inset 0 0 0 .28em rgba(9, 15, 36, .9), inset 0 0 0 .36em rgba(233, 196, 106, .25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1em;
}
.back-ring {
  width: 8.6em; height: 8.6em; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(233, 196, 106, .28), rgba(233, 196, 106, 0) 70%);
  box-shadow: 0 0 0 .12em rgba(233, 196, 106, .75), 0 0 2.2em rgba(233, 196, 106, .3);
}
.back-king { width: 6.6em; height: 6.6em; object-fit: contain; display: block; filter: drop-shadow(0 .2em .5em rgba(0, 0, 0, .6)); }
.back-king.crown-fb svg { width: 100%; height: 100%; display: block; }
.back-title { font-size: .85em; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: #E9C46A; padding-left: .38em; }

/* ---- missing (binder silhouette) ---- */
.missing .face.front { background: #0c0e11; box-shadow: inset 0 0 0 .1em rgba(244, 235, 221, .07); }
.missing .panel { background: linear-gradient(180deg, #1a1d22, #101216); align-items: center; justify-content: center; gap: .7em; padding: .9em; box-shadow: none; }
.c-art.sil { width: 100%; background: radial-gradient(circle, rgba(244, 235, 221, .06), transparent 70%); box-shadow: none; }
.c-art.sil .c-img { filter: brightness(0); opacity: .85; }
.fit-cover .c-art.sil .c-img { filter: brightness(.16) grayscale(1); opacity: 1; }
.m-no { font-size: 1.5em; color: rgba(244, 235, 221, .5); }
.m-label { font-size: 1.15em; font-weight: 600; color: var(--gold3); text-align: center; line-height: 1.2; }

/* ---- badges + aura ---- */
.badge-new {
  position: absolute; top: 3.2em; left: 1em; z-index: 4;
  background: var(--red); color: #fff; font: 700 .78em/1 var(--font); letter-spacing: .08em;
  padding: .38em .55em; border-radius: .4em; box-shadow: 0 .2em .7em rgba(232, 67, 56, .55);
  transform: rotate(-8deg);
}
.badge-count { position: absolute; bottom: .65em; right: .65em; z-index: 4; background: rgba(6, 7, 9, .86); color: var(--cream); font-size: .95em; padding: .22em .45em; border-radius: .45em; border: .06em solid var(--accent-soft); }
.aura {
  position: absolute; inset: -16%; border-radius: 34%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--tint-rgb), .8), rgba(var(--tint-rgb), 0));
  opacity: 0; transform: scale(.75);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.card.glow .aura { opacity: 1; transform: scale(1); }
.r-C.glow .aura, .r-U.glow .aura { opacity: 0; }
/* project red light behind every R+ reveal */
.card.glow-red .aura { background: radial-gradient(closest-side, rgba(232, 67, 56, .9), rgba(232, 67, 56, 0)); opacity: .85; transform: scale(1); }
@keyframes leak { from { opacity: .45; } to { opacity: 1; } }

/* ---- Halo card (SPEC §5.9): slowly rotating red-gold ring around the frame + HALO ribbon ----
   The ring is a static ring-shaped mask over a rotating conic gradient, so only a transform animates. */
.halo-ring {
  position: absolute; z-index: 0; pointer-events: none;
  inset: calc(var(--cw) / -34); border-radius: calc(var(--cw) / 14);
  padding: calc(var(--cw) / 62);
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
@supports (width: 1cqw) { .halo-ring { inset: -3cqw; border-radius: 7cqw; padding: 1.6cqw; } }
.halo-ring i {
  position: absolute; left: 50%; top: 50%; width: 250%; aspect-ratio: 1; margin: -125% 0 0 -125%;
  background: conic-gradient(from 0deg, #E84338, #F5C04B 18%, #fff1b8 25%, #F5C04B 32%, #E84338 50%, #F5C04B 68%, #fff1b8 75%, #F5C04B 82%, #E84338);
  animation: haloSpin 7s linear infinite;
}
.card.is-halo::before {
  content: ""; position: absolute; inset: -9%; border-radius: 22%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(245, 160, 70, .4), rgba(232, 67, 56, .14) 60%, transparent);
}
.halo-tag {
  position: absolute; left: 50%; top: 0; z-index: 6; transform: translate(-50%, -55%);
  font: 700 calc(var(--cw) / 26)/1 var(--font); letter-spacing: .22em; padding: .45em .7em .45em .92em; white-space: nowrap;
  border-radius: .5em; color: #1d0e04;
  background: linear-gradient(90deg, #E84338, #F5C04B 50%, #E84338);
  box-shadow: 0 .25em .8em rgba(232, 67, 56, .55), inset 0 0 0 .08em rgba(255, 241, 184, .6);
  pointer-events: none;
}
@supports (width: 1cqw) { .halo-tag { font-size: max(8px, 3.8cqw); } }
@keyframes haloSpin { to { transform: rotate(1turn); } }

/* ---- small sizes ---- */
@container card (max-width: 95px) {
  .c-name, .c-rar, .c-meta, .c-text, .c-foot, .back-title, .badge-count { display: none; }
  .c-top { height: 1.7em; justify-content: flex-end; }
  .panel { justify-content: center; padding-bottom: 1.2em; }
  .badge-new { font-size: 1.3em; top: 1.2em; left: .5em; }
}
@container card (min-width: 96px) and (max-width: 159px) {
  .c-top { height: 2.7em; }
  .c-name { font-size: 1.6em; }
  .c-rar, .c-flavor, .c-foot, .back-title { display: none; }
  .c-text { background: none; box-shadow: none; padding: 0; }
  .c-meta { font-size: 1.05em; justify-content: center; margin-top: .8em; }
  .c-meta > span:first-child { display: none; }
  .c-amount { font-size: 1.9em; }
  .panel { padding-bottom: .8em; }
  .badge-new { font-size: 1.2em; top: 2.3em; left: .6em; }
  .badge-count { font-size: 1.5em; }
  .m-no { font-size: 2.2em; }
  .m-label { font-size: 1.7em; }
}
@container card (min-width: 160px) and (max-width: 239px) {
  .c-flavor { font-size: .92em; }
  .c-meta { font-size: .7em; }
  .c-rar { font-size: .75em; }
}

@media (prefers-reduced-motion: reduce) {
  .holo, .c-art::after, .sparkle, .face.back::after, .halo-ring i { animation: none !important; }
  .card.tilt { transform: none !important; }
}