/* PACKAI cards: Set 1 "Synthetics" at 5:7, every size in container units (card.js renders the markup).
   The foils are the only gradients on the site. */
.card { --c-head: 'Figtree', system-ui, sans-serif; --c-sans: 'Figtree', system-ui, sans-serif; }
/* ---------- the card (5:7, everything in container units) ---------- */
.card { container-type: inline-size; aspect-ratio: 5 / 7; position: relative; border-radius: 4.6cqw; transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease; --mx: 50%; --my: 50%; color: #1d1d1a; user-select: none; }
.card.live { transition: none; }
.card .c-frame { position: absolute; inset: 0; border-radius: 4.6cqw; padding: 3.6cqw; overflow: hidden;
  background: linear-gradient(135deg, #f1efe9 0%, #c9c6bd 22%, #8f8c84 48%, #e9e6de 62%, #aeaba2 82%, #dcd9d1 100%); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 16px rgba(0,0,0,.35); }
.card .c-body { position: relative; height: 100%; border-radius: 1.8cqw; padding: 2.2cqw 3cqw 1.6cqw; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tc) 32%, #f3ecdc) 0%, color-mix(in srgb, var(--tc) 16%, #efe7d4) 60%, color-mix(in srgb, var(--tc) 26%, #e8dfca) 100%); box-shadow: inset 0 0 0 .5cqw rgba(0,0,0,.14); }
.card .ty { width: 6cqw; height: 6cqw; display: block; flex: none; }
.card .ty-s { width: 4.4cqw; height: 4.4cqw; }
.card .ty-l { width: 7.4cqw; height: 7.4cqw; }
.c-top { display: grid; grid-template-columns: auto 1fr auto auto; align-items: end; column-gap: 1.6cqw; padding-bottom: 1.2cqw; }
.c-top .stage { grid-column: 1 / -1; font: italic 600 2.6cqw/1 var(--c-sans); letter-spacing: .04em; color: #3b3a34; background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,0)); padding: .5cqw 1.4cqw; border-radius: 1cqw; justify-self: start; }
.c-evo { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2cqw; font: italic 2.3cqw/1 var(--c-sans); color: #3b3a34; margin-top: .8cqw; }
.evo-pic { width: 8cqw; height: 6cqw; border-radius: 1cqw; overflow: hidden; display: grid; place-items: center; background: var(--ac); border: .5cqw solid #b8b5ab; }
.evo-pic img { width: 100%; height: 100%; object-fit: cover; }
.c-name { grid-column: 1 / 3; margin: .8cqw 0 0; font: 700 6.8cqw/1 var(--c-head); letter-spacing: -.01em; color: #161614; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-hp { font: 700 6.4cqw/1 var(--c-head); color: #b3261e; display: flex; align-items: baseline; gap: .6cqw; }
.c-hp small { font: 700 2.6cqw/1 var(--c-sans); color: #1d1d1a; }
.c-art { position: relative; aspect-ratio: 3 / 2; border-radius: 1cqw; overflow: hidden; flex: none; isolation: isolate;
  border: 1.3cqw solid transparent; background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #fbfaf6, #9a978e 30%, #e6e3da 50%, #7e7b73 75%, #f2f0ea) border-box; box-shadow: 0 .6cqw 1.2cqw rgba(0,0,0,.25); }
.has-ab .c-art { aspect-ratio: 16 / 9; }
.c-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-art .ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2cqw; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ac) 70%, #10291f) 0 2cqw, color-mix(in srgb, var(--ac) 58%, #10291f) 2cqw 4cqw); }
.c-art .ph-ty { width: 20cqw; height: 20cqw; opacity: .9; }
.c-art .ph span { font: 2.4cqw/1 var(--c-sans); color: rgba(255,255,255,.75); letter-spacing: .1em; text-transform: uppercase; }
.c-dex { margin: 1cqw auto 1.2cqw; font: italic 2.2cqw/1.25 var(--c-sans); padding: .6cqw 2.4cqw; border-radius: 3cqw; color: #2f2e29; background: linear-gradient(90deg, rgba(201,198,189,.15), rgba(201,198,189,.85) 20%, rgba(201,198,189,.85) 80%, rgba(201,198,189,.15)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.c-text { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.4cqw; overflow: hidden; }
.c-ability { border: .5cqw solid #b3261e; border-radius: 1.4cqw; padding: 1.2cqw 1.8cqw; background: rgba(255,255,255,.35); }
.ab-tag { display: inline-block; background: #b3261e; color: #fff; font: italic 700 2.5cqw/1 var(--c-sans); padding: .6cqw 1.6cqw; border-radius: 1cqw; margin-right: 1.4cqw; }
.c-ability b { font: 700 4.2cqw/1.1 var(--c-head); color: #b3261e; }
.c-ability p { margin: .8cqw 0 0; font: 2.7cqw/1.28 var(--c-sans); }
.c-atks { display: flex; flex-direction: column; gap: 1.4cqw; }
.atk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1.8cqw; }
.atk .cost { display: flex; gap: .5cqw; min-width: 10cqw; }
.atk-n { font: 700 4.6cqw/1.05 var(--c-head); }
.dmg { font: 700 5.4cqw/1 var(--c-head); min-width: 7cqw; text-align: right; }
.atk p { grid-column: 1 / -1; margin: .5cqw 0 0; font: 2.7cqw/1.28 var(--c-sans); }
.c-wrr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; margin-top: 1.2cqw; padding-top: 1cqw; border-top: .35cqw solid rgba(0,0,0,.35); }
.c-wrr span { display: flex; align-items: center; gap: .6cqw; min-height: 5cqw; }
.c-wrr small { font: 600 2.1cqw/1 var(--c-sans); margin-right: .4cqw; }
.c-wrr b { font: 700 3cqw/1 var(--c-head); }
.c-flav { margin-top: 1cqw; border: .35cqw solid rgba(0,0,0,.4); border-radius: .8cqw; padding: 1cqw 1.8cqw; font: italic 2.4cqw/1.3 var(--c-sans); background: rgba(255,255,255,.3); }
.c-foot { margin-top: auto; padding-top: 1cqw; display: grid; grid-template-columns: 1fr auto; row-gap: .5cqw; font: 2.05cqw/1.1 var(--c-sans); color: #2a2a26; }
.c-foot .illus { grid-column: 1 / -1; font-style: italic; }
.c-foot .meta { display: flex; align-items: center; gap: 1.2cqw; }
.c-foot .meta b { font: 600 2.2cqw/1 var(--c-sans); }
.setsym { width: 3.2cqw; height: 3.2cqw; }
.rs { font-size: 2.6cqw; line-height: 1; letter-spacing: -.1em; }
.rs i { font: 700 1.9cqw/1 var(--c-sans); letter-spacing: 0; vertical-align: .2cqw; }
.reg { font: 600 1.9cqw/1 var(--c-sans); border: .3cqw solid currentColor; border-radius: .6cqw; padding: .2cqw .7cqw; }
.c-foot .copy { text-align: right; }
/* rarity symbols outside cards */
.feed .rs, .odds .rs, .bar .rs { font-size: 13px; }
.feed .rs i, .odds .rs i, .bar .rs i { font-size: 9px; vertical-align: 1px; }
.rs-holo, .rs-secret { color: #b89b6a; }
.card .rs-holo, .card .rs-secret { color: #1d1d1a; }

/* trainer */
.k-trainer { --tc: #c9c6bd; }
.k-trainer .c-body { background: linear-gradient(180deg, #f2ede1 0%, #e6dfcd 100%); }
.c-trainer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2cqw; }
.tr-banner { font: 700 4.4cqw/1 var(--c-head); letter-spacing: .12em; color: #f6f2e8; background: linear-gradient(90deg, #4a4843, #2b2a27); padding: 1cqw 3cqw 1cqw 2cqw; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); border-radius: .8cqw 0 0 .8cqw; }
.tr-sub { font: 700 3cqw/1 var(--c-sans); letter-spacing: .1em; padding: .8cqw 2cqw; border-radius: 3cqw; background: #2b2a27; color: #ede6d6; }
.k-trainer .tr-sub { color: #f6f2e8; }
.tr-name { margin: 0 0 1.6cqw; font-size: 7cqw; }
.tr-art { aspect-ratio: 4 / 3; }
.tr-text { flex: 1; display: flex; align-items: center; margin: 2cqw 0 1.4cqw; padding: 2cqw; border-radius: 1cqw; background: rgba(255,255,255,.45); font: 3.2cqw/1.38 var(--c-sans); }
.tr-text p { margin: 0; }
.tr-rule { font: italic 2.3cqw/1.3 var(--c-sans); color: #4a4843; border-top: .35cqw solid #4a4843; padding-top: 1cqw; }

/* energy */
.k-energy .c-body { background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--tc) 60%, #fff) 0%, color-mix(in srgb, var(--tc) 72%, #f3ecdc) 30%, color-mix(in srgb, var(--tc) 85%, #10291f) 100%); }
.c-energy { text-align: center; }
.en-banner { display: inline-block; font: 700 3.4cqw/1 var(--c-head); letter-spacing: .2em; color: #1d1d1a; background: rgba(255,255,255,.75); padding: 1cqw 3cqw; border-radius: 3cqw; }
.en-mark { flex: 1; display: grid; place-items: center; }
.card .en-ty { width: 62cqw; height: 62cqw; filter: drop-shadow(0 2cqw 2cqw rgba(0,0,0,.3)); }
.en-name { grid-column: auto; text-align: center; font-size: 7cqw; color: #fff; text-shadow: 0 .4cqw 0 rgba(0,0,0,.4); margin: 0 0 2cqw; }
.t-spark .en-name, .t-chrome .en-name { color: #1d1d1a; text-shadow: none; }
.k-energy .c-foot { background: rgba(255,255,255,.7); border-radius: 1cqw; padding: 1cqw 1.6cqw; }

/* finishes: holo shimmers the art window, reverse shimmers the body, secret goes full art with rainbow foil */
.shine { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0; mix-blend-mode: color-dodge; transition: opacity .3s; }
.f-holo .c-art .shine { opacity: .55; background:
  radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 38%),
  repeating-linear-gradient(115deg, #ff7b7b 0%, #ffd36b 6%, #b8f03a 12%, #6bf0c8 18%, #c38bff 24%, #ff7bd5 30%, #ff7b7b 36%);
  background-size: 100% 100%, 300% 300%; background-position: 0 0, var(--mx) var(--my); }
.f-holo.live .c-art .shine { opacity: .8; }
.f-holo .c-art::after { content: 'HOLO'; position: absolute; right: 1.4cqw; bottom: 1.2cqw; z-index: 3; font: 700 2cqw/1 var(--c-sans); color: rgba(255,255,255,.8); letter-spacing: .14em; }
.foil { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; }
.f-reverse .foil { opacity: .32; mix-blend-mode: color-dodge; background:
  radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.7), rgba(255,255,255,0) 40%),
  repeating-linear-gradient(60deg, rgba(255,140,140,.6) 0 3%, rgba(255,230,140,.6) 3% 6%, rgba(184,240,58,.6) 6% 9%, rgba(160,255,220,.6) 9% 12%, rgba(205,160,255,.6) 12% 15%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx) var(--my);
  -webkit-mask: linear-gradient(#000 0 0); }
.f-reverse.live .foil { opacity: .5; }
.f-reverse .c-art { z-index: 1; }

.f-secret .c-frame { background: linear-gradient(135deg, #fff2c2 0%, #d9b45a 22%, #8a6a22 46%, #f2d98c 60%, #b38a35 80%, #fbe7a8 100%); }
.f-secret .c-body { color: #f5efe0; background: #10291f; }
.f-secret .c-art { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 1.8cqw; background: #10291f; z-index: 0; box-shadow: none; }
.f-secret .c-art img { object-position: 50% 20%; }
.f-secret .c-body > :not(.c-art) { position: relative; z-index: 2; }
.f-secret .c-top { background: linear-gradient(180deg, rgba(8,18,14,.75), rgba(8,18,14,0)); margin: -2.2cqw -3cqw 0; padding: 2.2cqw 3cqw 4cqw; }
.f-secret .c-name, .f-secret .c-top .c-hp small { color: #fff8e6; }
.f-secret .c-hp { color: #ffd36b; }
.f-secret .c-top .stage { color: #f5efe0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.f-secret .c-dex { margin-top: auto; color: #f5efe0; background: rgba(8,18,14,.6); }
.f-secret .c-text, .f-secret .c-wrr, .f-secret .c-flav, .f-secret .c-foot { background: rgba(8,18,14,.78); margin-left: -3cqw; margin-right: -3cqw; padding-left: 3cqw; padding-right: 3cqw; }
.f-secret .c-text { flex: none; padding-top: 1.6cqw; padding-bottom: 1cqw; }
.f-secret .c-wrr { margin-top: 0; border-top-color: rgba(255,255,255,.3); }
.f-secret .c-flav { margin-top: 0; border: 0; border-radius: 0; }
.f-secret .c-foot { color: #f5efe0; padding-bottom: 1.6cqw; margin-bottom: -1.6cqw; }
.f-secret .c-ability { background: rgba(0,0,0,.25); border-color: #ffd36b; }
.f-secret .c-ability b { color: #ffd36b; }
.f-secret .ab-tag { background: #d9b45a; color: #1d1d1a; }
.f-secret .rs-secret { color: #ffd36b; }
.f-secret .foil { opacity: .45; mix-blend-mode: color-dodge; background:
  radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.8), rgba(255,255,255,0) 36%),
  repeating-linear-gradient(125deg, #ff6b6b 0%, #ffb86b 5%, #fff36b 10%, #b8f03a 15%, #6bffd8 20%, #b58bff 25%, #ff6bd0 30%, #ff6b6b 35%);
  background-size: 100% 100%, 320% 320%; background-position: 0 0, var(--mx) var(--my); }
.f-secret.live .foil { opacity: .7; }
.f-secret .shine { display: none; }


/* card back: ink, a champagne hairline frame and the torn-card mark */
.card.back .c-frame { background: linear-gradient(135deg, #3a3631, #121110 45%, #2a2723); }
.bk { height: 100%; border-radius: 2.4cqw; display: grid; place-items: center; align-content: center; gap: 5cqw; background: #0c0b0a;
  box-shadow: inset 0 0 0 2.2cqw #0c0b0a, inset 0 0 0 2.5cqw #b89b6a; position: relative; overflow: hidden; }
.bk::before { content: ''; position: absolute; inset: 6cqw; border: .3cqw solid rgba(184,155,106,.45); border-radius: 1.6cqw; }
.bk img { position: relative; width: 34cqw; height: auto; }
.bk-word { position: relative; font: 400 13cqw/1 'Pinyon Script', cursive; color: #ede6d6; }