/* THE APEX CARD (Money chat): a real trading card, sized by its own width (container units). The body takes its first type's colour
   (soft gradient + a fine texture + the type's mark as a watermark), the border is gold for EPIC, silver holo for LEGENDARY, rainbow
   holo for MYTHIC. Live cards blend with plain alpha (60 fps); the still NFT picture (.flat) gets real colour-dodge foil. */
.gc { container-type: inline-size; position: relative; aspect-ratio: 63 / 88; perspective: 1100px; user-select: none; -webkit-user-select: none;
  --frame: linear-gradient(135deg, #fff3b0, #f3cf43 22%, #d6a320 48%, #f8de70 72%, #c48f17); --rim: #e9bf3a; }
.gc.r-legendary { --frame: linear-gradient(135deg, #fbfcfd, #c5ccd5 22%, #f2f4f7 44%, #98a2ad 68%, #e9edf1 86%, #b7c0c9); --rim: #c9d0d8; }
.gc.r-mythic { --frame: linear-gradient(125deg, #ffd3e2, #ffe6a1 18%, #caffb2 36%, #aee9ff 54%, #d6c3ff 72%, #ffd3e2 90%); --rim: #e8d9ff; }
.gc.r-basic { --frame: linear-gradient(135deg, #f4ffd9, #cfff6a 24%, #93d42c 50%, #e2ffa6 74%, #a9e23e); --rim: #b8ff3a; }      /* the animal you own (not an Apex yet) */
.gc-in { position: absolute; inset: 0; border-radius: 4.4cqw; overflow: hidden; isolation: isolate; contain: paint;
  box-shadow: 0 2.4cqw 6cqw -1.6cqw rgba(0, 0, 0, .55), 0 .6cqw 1.4cqw rgba(0, 0, 0, .35); transition: box-shadow .4s; }
.gc.on .gc-in { box-shadow: 0 4cqw 10cqw -2cqw rgba(0, 0, 0, .6), 0 0 9cqw -2cqw color-mix(in srgb, var(--t) 60%, transparent); }
.gc.live .gc-in, .gc.on .gc-in { will-change: transform; }
.gc.flat .gc-in { transform: none; }
.gc-frame { position: absolute; inset: 0; background: var(--frame); }
.gc-frame::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 .3cqw, transparent .3cqw 1.1cqw), linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 30%, rgba(0, 0, 0, .12)); }

/* the body */
.gc-face { position: absolute; inset: 3.3cqw; border-radius: 2.4cqw; overflow: hidden; display: flex; flex-direction: column; gap: .9cqw; padding: 2.1cqw 2.6cqw 1.8cqw;
  background: linear-gradient(172deg, var(--b1) 0%, color-mix(in srgb, var(--b1) 55%, var(--b2)) 38%, var(--b2) 100%); color: var(--ink); font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .22), inset 0 .5cqw 1.2cqw rgba(255, 255, 255, .5); }
.gc-tex { position: absolute; inset: 0; pointer-events: none; color: var(--te);
  background: radial-gradient(120% 45% at 50% 0%, rgba(255, 255, 255, .55), transparent 62%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .2) 0 .22cqw, transparent .22cqw 1.3cqw); }
.gc-tex .wm { position: absolute; right: -14cqw; bottom: 6cqw; width: 74cqw; height: 74cqw; opacity: .1; filter: none; stroke-width: 1.4; }
.gc.dark .gc-tex { background: radial-gradient(120% 45% at 50% 0%, rgba(255, 255, 255, .18), transparent 62%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 .22cqw, transparent .22cqw 1.3cqw); }
.gc.dark .gc-tex .wm { opacity: .16; color: #c9c0ff; }
.gc-face > * { position: relative; flex: none; }
.gc-face > .gc-moves { flex: 0 1 auto; min-height: 0; overflow: hidden; }

.gc-head { display: flex; align-items: center; gap: 1.4cqw; min-width: 0; }
.gc-stage { flex: none; padding: .55cqw 1.5cqw .45cqw; border-radius: .9cqw; font: 800 2.05cqw/1 var(--sans, sans-serif); letter-spacing: .08em; color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .35)); box-shadow: inset 0 0 0 .22cqw rgba(0, 0, 0, .28); font-style: italic; }
.gc.dark .gc-stage { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 .22cqw rgba(255, 255, 255, .3); }
.gc-from { font: italic 600 2.3cqw/1 var(--sans, sans-serif); opacity: .66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-title { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; margin-top: -.2cqw; }
.gc-name { flex: 1; min-width: 0; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-hp { flex: none; font: 800 6cqw/1 var(--sans, sans-serif); letter-spacing: -.03em; }
.gc-hp small { font-size: 2.3cqw; margin-right: .5cqw; color: #d02a2a; letter-spacing: .02em; vertical-align: .35cqw; }
.gc.dark .gc-hp small { color: #ff8b8b; }
.gc-types { display: flex; gap: .5cqw; flex: none; }
/* energy symbols */
.gc-en { display: inline-grid; place-items: center; flex: none; width: 3.7cqw; height: 3.7cqw; border-radius: 50%;
  box-shadow: inset 0 -.35cqw 0 rgba(0, 0, 0, .22), inset 0 .3cqw 0 rgba(255, 255, 255, .35), 0 .2cqw .5cqw rgba(0, 0, 0, .3); }
.gc-en .ti { width: 68%; height: 68%; stroke-width: 2.7; }
.gc-en.lg { width: 5.6cqw; height: 5.6cqw; }
.gc-en.sm { width: 3.3cqw; height: 3.3cqw; }

/* the art: a fixed slot (nothing moves when the picture arrives), a thin metal inset frame */
.gc-art { position: relative; flex: none; height: 59cqw; border-radius: .9cqw; overflow: hidden; background: #22313a;
  box-shadow: 0 0 0 .55cqw var(--rim), 0 0 0 .8cqw rgba(0, 0, 0, .28), inset 0 0 2.4cqw rgba(0, 0, 0, .35); margin: .5cqw .3cqw .2cqw; }
.gc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; opacity: 0; transition: opacity .5s var(--ease, ease); }
.gc-img.ok { opacity: 1; }
.gc-img.r3d { object-position: 50% 50%; }
.gc-noart { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t) 45%, transparent), transparent 65%), repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--t) 14%, transparent) 0 4deg, transparent 4deg 14deg), linear-gradient(var(--b2), #1b2a33); }
.gc-noart .ti { width: 20cqw; height: 20cqw; opacity: .55; }
.gc-noart.dexbg { background: radial-gradient(60% 18% at 50% 88%, rgba(0, 0, 0, .28), transparent 70%), radial-gradient(75% 70% at 50% 58%, color-mix(in srgb, var(--t) 38%, #fff) 0, color-mix(in srgb, var(--t) 55%, var(--b2)) 48%, color-mix(in srgb, var(--te) 75%, #0b1410) 100%); }
.gc-noart.dexbg::after { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(255, 255, 255, .07) 0 5deg, transparent 5deg 15deg); }
.gc-img.dex { object-fit: contain; object-position: 50% 100%; inset: 6% 6% 4%; width: 88%; height: 90%; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(0, 0, 0, .28)); }      /* the kit's portrait of its form (GENESIS v2) */
.gc-prism { flex: none; margin-left: auto; padding: .5cqw 1.3cqw .42cqw; border-radius: .9cqw; font: 800 1.9cqw/1 var(--sans, sans-serif); letter-spacing: .12em; color: #24103b;
  background: linear-gradient(100deg, #ffd3e2, #ffe6a1 25%, #caffb2 50%, #aee9ff 75%, #d6c3ff); box-shadow: 0 0 1.6cqw rgba(214, 195, 255, .6); }
.gc-plate { margin: .3cqw 3cqw 0; padding: .6cqw 1.6cqw; border-radius: 1cqw; text-align: center; font: italic 600 2.3cqw/1.1 var(--sans, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .62) 18%, rgba(255, 255, 255, .62) 82%, rgba(255, 255, 255, .05)); box-shadow: 0 0 0 .18cqw rgba(0, 0, 0, .12); }
.gc.dark .gc-plate { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 18%, rgba(255, 255, 255, .14) 82%, transparent); box-shadow: 0 0 0 .18cqw rgba(255, 255, 255, .14); }

/* moves */
.gc-moves { display: flex; flex-direction: column; margin-top: .4cqw; }
.gc-mv { display: grid; grid-template-columns: 13.4cqw minmax(0, 1fr) auto; align-items: center; gap: 1.4cqw; padding: 1.3cqw .4cqw; border-bottom: .2cqw solid rgba(0, 0, 0, .14); }
.gc.dark .gc-mv { border-bottom-color: rgba(255, 255, 255, .14); }
.gc-mv:last-child { border-bottom: 0; }
.gc-cost { display: flex; gap: .45cqw; }
.gc-mn { display: flex; flex-direction: column; gap: .45cqw; min-width: 0; }
.gc-mn b { font: 800 3.35cqw/1.05 var(--sans, sans-serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-mn i { font: 500 2.25cqw/1.15 var(--sans, sans-serif); font-style: normal; opacity: .74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-mp { display: flex; flex-direction: column; align-items: flex-end; gap: .35cqw; font: 800 4.6cqw/1 var(--sans, sans-serif); letter-spacing: -.03em; min-width: 7cqw; text-align: right; }
.gc-mp em { font: 700 1.95cqw/1 var(--sans, sans-serif); font-style: normal; letter-spacing: .01em; opacity: .78; white-space: nowrap; }
.gc-mv.st .gc-mp em { font-size: 2.5cqw; opacity: .9; padding: .5cqw 1cqw; border-radius: 1cqw; background: rgba(0, 0, 0, .08); }      /* a status move: its effect is the number */
.gc.dark .gc-mv.st .gc-mp em { background: rgba(255, 255, 255, .1); }
/* the line's ULTIMATE: a fifth, gold-foil row; a card that carries one gives its picture a little height so all five rows fit */
.gc.has-ult .gc-art { height: 50cqw; }
.gc.has-ult .gc-mv { padding-top: .95cqw; padding-bottom: .95cqw; }
.gc.has-ult .gc-mv.ult { padding: 1.05cqw 1.2cqw; margin-top: .5cqw; }
.gc.has-ult .gc-moves { margin-top: .2cqw; }
.gc-mv.ult { position: relative; margin-top: .6cqw; padding: 1.3cqw 1.2cqw; border: 0; border-radius: 1.2cqw; color: #2b1d05; overflow: hidden;
  background: linear-gradient(105deg, #fff3b0, #f3cf43 28%, #fff7c9 46%, #d6a320 70%, #f8de70); box-shadow: inset 0 0 0 .25cqw rgba(120, 80, 0, .35), 0 .6cqw 1.6cqw -.6cqw rgba(120, 80, 0, .5); }
.gc-mv.ult::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 6%, rgba(255, 255, 255, .35) 8%, transparent 10% 18%); mix-blend-mode: normal; opacity: .55; pointer-events: none; }
.gc-mv.ult .gc-mn i { opacity: .8; }
.gc-mv.ult .gc-mp { color: #5a3a00; }
.gc-ulttag { display: inline-block; padding: .55cqw .9cqw .45cqw; border-radius: .8cqw; background: #2b1d05; color: #ffd86a; font: 900 1.75cqw/1 var(--sans, sans-serif); letter-spacing: .12em; }

/* weakness · resistance · retreat */
.gc-bot { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1cqw; padding: 1cqw .3cqw 0; border-top: .28cqw solid rgba(0, 0, 0, .26); margin-top: auto; }
.gc.dark .gc-bot { border-top-color: rgba(255, 255, 255, .24); }
.gc-bot > div { display: flex; align-items: center; gap: .8cqw; min-width: 0; font: 700 2.5cqw/1 var(--sans, sans-serif); }
.gc-bot > div > span:first-child { font-size: 2.2cqw; letter-spacing: .04em; text-transform: lowercase; opacity: .72; }
.gc-bot b { font-size: 2.8cqw; }
.gc-ret { display: flex; gap: .4cqw; }
.gc-ret i { width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #dfe3e6); box-shadow: inset 0 0 0 .22cqw rgba(0, 0, 0, .35); }
.gc-flav { font: italic 400 2.45cqw/1.25 var(--serif, Georgia, serif); padding: .9cqw 1.5cqw; border-radius: .9cqw; background: rgba(255, 255, 255, .34); box-shadow: inset 0 0 0 .18cqw rgba(0, 0, 0, .12);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.2cqw; }
.gc.dark .gc-flav { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .18cqw rgba(255, 255, 255, .12); }
.gc-flav:empty { display: none; }
.gc-foot { display: flex; align-items: center; gap: 2cqw; font: 600 2.1cqw/1 var(--mono, ui-monospace, monospace); letter-spacing: .02em; opacity: .78; white-space: nowrap; }
.gc-own { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gc-no b { font-size: 2.3cqw; margin-left: .5cqw; }

/* small cards (a grid of many): bigger relative type, the long lines go */
@container (max-width: 300px) {
  .gc-from, .gc-mn i, .gc-flav, .gc-bot > div > span:first-child { display: none; }
  .gc-art { height: 60cqw; }
  .gc-plate { font-size: 3.1cqw; margin: .3cqw 1.5cqw 0; }
  .gc-mn b { font-size: 4.3cqw; }
  .gc-mp { font-size: 5.4cqw; }
  .gc-mv { grid-template-columns: 15.5cqw minmax(0, 1fr) auto; padding: 1.45cqw .4cqw; gap: 1.2cqw; }
  .gc-mv.ult { padding: 1.45cqw 1.2cqw; }
  .gc.has-ult .gc-art { height: 47cqw; }
  .gc.has-ult .gc-mv { padding-top: 1.05cqw; padding-bottom: 1.05cqw; }
  .gc.has-ult .gc-mv.ult { padding: 1.15cqw 1.2cqw; }
  .gc-mp em { font-size: 2.6cqw; }
  .gc-mv.st .gc-mp em { font-size: 3cqw; }
  .gc-ulttag { font-size: 2.3cqw; }
  .gc-cost .gc-en { width: 4.6cqw; height: 4.6cqw; }
  .gc-cost { gap: .3cqw; }
  .gc-bot { justify-content: space-between; }
  .gc-bot > div { font-size: 3.3cqw; gap: 1cqw; justify-content: center; }
  .gc-bot b { font-size: 3.4cqw; }
  .gc-en.sm { width: 4.4cqw; height: 4.4cqw; }
  .gc-ret i { width: 3.4cqw; height: 3.4cqw; }
  .gc-foot { font-size: 3cqw; }
  .gc-stage { font-size: 2.9cqw; }
  .gc-hp { font-size: 6.6cqw; } .gc-hp small { font-size: 2.8cqw; }
}

/* the light: each layer is a clip box holding an oversized gradient that MOVES BY TRANSFORM (composited, never repainted) */
.gc-artfoil, .gc-foil, .gc-glare { position: absolute; pointer-events: none; overflow: hidden; }
.gc-artfoil > i, .gc-foil > i, .gc-glare > i { position: absolute; }
.gc.live .gc-artfoil > i, .gc.live .gc-foil > i, .gc.live .gc-glare > i, .gc.on .gc-artfoil > i, .gc.on .gc-foil > i, .gc.on .gc-glare > i { will-change: transform; }
.gc-artfoil { inset: 0; opacity: 0; transition: opacity .3s; z-index: 1; }
.gc-artfoil > i { left: -40%; top: -40%; width: 180%; height: 180%; background: repeating-linear-gradient(110deg, rgba(255, 255, 255, 0) 0, rgba(230, 240, 255, .5) 2.3%, rgba(255, 255, 255, 0) 4.6%, rgba(255, 255, 255, 0) 7.6%); }
.gc.prism .gc-artfoil { opacity: .34; }
.gc.prism .gc-artfoil > i { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 0 .25%, transparent .5%) 0 0 / 9% 11%, repeating-linear-gradient(115deg, #ff5f6d55 0, #ffc37155 3.3%, #b8ff3a55 6.6%, #46c4ff55 10%, #a78bff55 13.3%, #ff5f6d55 16.6%); }
.r-mythic .gc-artfoil > i { background: repeating-linear-gradient(115deg, #ff5f6d40 0, #ffc37140 3.3%, #b8ff3a40 6.6%, #46c4ff40 10%, #a78bff40 13.3%, #ff5f6d40 16.6%); }
.gc-foil { inset: 0; padding: 3.3cqw; border-radius: inherit; -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; opacity: .32; }
.gc-foil > i { left: -30%; top: -30%; width: 160%; height: 160%; background: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .7) 3.7%, rgba(255, 255, 255, 0) 7.5%); }
.r-mythic .gc-foil > i { background: repeating-linear-gradient(115deg, #ff7a8a 0, #ffd27a 5%, #c8ff6a 10%, #6ad2ff 15%, #b79bff 20%, #ff7a8a 25%); }
.gc-glare { inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s; z-index: 2; }
.gc-glare > i { left: -25%; top: -25%; width: 150%; height: 150%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 14%, rgba(0, 0, 0, .12) 42%); }
.gc.flat .gc-artfoil, .gc.flat .gc-foil { mix-blend-mode: color-dodge; }
.gc.flat .gc-glare { mix-blend-mode: overlay; }

/* a card that arrives while scrolling (cardHTML(e, { lazy: true }) + reveal(root)) */
.gc.lazy { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .6s var(--ease, ease), transform .7s var(--ease, ease); }
.gc.lazy.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gc-in { transform: none !important; } .gc.lazy { opacity: 1; transform: none; transition: none; } }