/*
 * ptcgp.trade
 *
 * The palette, radius and motion tokens below are lifted verbatim from
 * activity/client/src/app.css in the bot repo. That file is the source of
 * truth: if the app's colours move, change them there and mirror them here,
 * never the reverse. The point is that a member who clicks Join and opens the
 * market thirty seconds later should feel like they are still in the same
 * product, not on a marketing site about one.
 *
 * Two rules carried over from the app and worth restating because a marketing
 * page is exactly where they get broken:
 *   1. Gold (--accent) is never a button fill. It is a border, an icon, a
 *      label, a tint. As a solid fill under a white label it does not clear
 *      contrast, and it stops meaning "attention" the moment everything is it.
 *   2. Blue starts something. Join the Discord is the only start on this page,
 *      so blurple owns the CTA and nothing else competes at that weight.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg-0: #08121F;
  --bg-1: #161F29;
  --bg-2: #1E2A38;
  --bg-3: #26333F;
  --bg-4: #2E3D4A;
  --border: #3A4A59;
  --text: #f2f3f5;
  --text-dim: #b5bac1;
  --text-faint: #959aa8;
  --accent: #f5c451;
  --accent-dark: #b8902e;
  --teal: #4cc3b0;
  --blurple: #5865f2;
  --green: #23a55a;
  --blue: #3b82f6;
  --red: #da5c5c;
  --green-btn: #1d8649;
  --blue-btn: #1b6df5;
  --diamond: #7dd3fc;
  --star: #f5c451;

  --radius: 10px;
  --row-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The app itself sets headings in Bricolage Grotesque. It is not carried over
     here on purpose: its condensed, quirky display cut reads as an editorial
     brand rather than a friendly mobile card game, which is the wrong first
     impression for a page whose whole job is "this is approachable, come in".
     DM Sans is the plain, warm, geometric alternative and Inter is the neutral
     workhorse under it. Both are two of the most widely used faces on the web,
     which is the point: nothing here should be the interesting part. */
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 48px);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
:root { color-scheme: dark; }

body {
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The sprite is a definitions-only SVG. Without this it reserves a line box
   at the top of the document and pushes the header down by a few pixels. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.ic { width: 20px; height: 20px; flex: none; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--blurple); color: #fff; padding: 10px 16px;
  border-radius: 8px; font-weight: 600; transition: top .18s var(--row-ease);
}
.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Scoped: the bare rule set border-radius on everything, which visibly squared
   the pill-shaped controls at the moment they took focus. */
:focus-visible:not(.demo-tabs button, .chip, .btn) { border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: 820px; }

/* ── Type scale ─────────────────────────────────────────────────────────── */
h1, h2, h3, .brand-name, .step-n, .af-title, .ma-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.3rem, 5.2vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 em {
  font-style: normal;
  color: var(--accent);
}

.h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.kicker {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.sub {
  color: var(--text-dim);
  font-size: 1.05rem;
  max-width: 66ch;
  margin-bottom: 44px;
  text-wrap: pretty;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body);
  font-size: .93rem; font-weight: 600; letter-spacing: -0.005em;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .12s ease, background .15s, border-color .15s, box-shadow .15s;
}
/* The app hovers every button with filter: brightness(1.12) over .12s and
   has no :active transform anywhere. Carried over so a CTA here depresses the
   same way a Confirm does inside the market. */
.btn:hover { filter: brightness(1.12); }

/* Discord blurple, not the app's --blue-btn. Every other blue on this page is
   the product; this one is the platform, and the difference is the point. */
.btn-join {
  background: var(--blurple);
  color: #fff;
  box-shadow: 0 4px 18px rgba(88,101,242,.28);
}
.btn-join:hover { box-shadow: 0 6px 24px rgba(88,101,242,.42); }
.btn-join .ic { width: 19px; height: 19px; fill: currentColor; }

/* --bg-4 fill with a --text-dim label, exactly as .btn-ghost is drawn in the
   app. A transparent outline button is not in the product's vocabulary. */
.btn-ghost {
  background: var(--bg-4);
  color: var(--text-dim);
}

.btn-lg { font-size: 1rem; padding: 14px 24px; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,18,31,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.nav.stuck { border-bottom-color: var(--border); background: rgba(8,18,31,.9); }

.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 34px; height: 34px; }
.brand-name {
  font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em;
  color: var(--accent);
}
.brand-name span { color: var(--text); font-weight: 700; }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: .89rem; font-weight: 500; color: var(--text-dim);
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); }

/* Owns the auto margin itself rather than inheriting the gap from .nav-links,
   which is display:none below 940 and used to take the layout with it. */
.nav-cta { flex: none; margin-left: auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 118px); overflow: hidden; }

/* Two washes, blue from the left and gold from the right, mirroring the two
   arrows of the logo. Kept very low alpha: the app is a dark surface with
   colour used sparingly, and a saturated marketing gradient would read as a
   different product entirely. */
.hero-glow {
  position: absolute; inset: -30% -10% auto -10%; height: 780px;
  background:
    radial-gradient(58% 62% at 18% 12%, rgba(59,130,246,.20), transparent 66%),
    radial-gradient(52% 58% at 84% 4%, rgba(245,196,81,.13), transparent 64%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; color: var(--text-dim);
  background: var(--bg-1); border: 1px solid var(--border);
  padding: 6px 13px; border-radius: 999px;
  margin-bottom: 24px;
}

.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(35,165,90,.6);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35,165,90,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(35,165,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); }
}

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-dim);
  max-width: 52ch;
  margin: 22px 0 30px;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.trust {
  margin-top: 20px;
  font-size: .87rem;
  color: var(--text-faint);
  max-width: 46ch;
}

/* ── The app frame (hero product shot) ──────────────────────────────────── */
.app-frame {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 40px rgba(0,0,0,.5),
    0 30px 70px -18px rgba(0,0,0,.7),
    0 0 0 1px rgba(59,130,246,.08);
  transform: perspective(1900px) rotateY(-4deg) rotateX(1.2deg);
  transform-origin: left center;
}

.af-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border);
}
.af-dots { display: flex; gap: 6px; }
.af-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-4); }
.af-title {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 700; letter-spacing: -0.01em;
}
.af-live {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  font-size: .72rem; color: var(--text-faint);
}

.af-body { display: grid; grid-template-columns: 152px minmax(0, 1fr); min-height: 392px; }

.af-side {
  background: var(--bg-0);
  border-right: 1px solid var(--border);
  padding: 12px 8px;
}
.af-grp {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); padding: 12px 8px 6px;
}
.af-grp:first-child { padding-top: 2px; }
.af-nav {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px;
  font-size: .77rem; color: var(--text-dim);
}
.af-nav .ic { width: 15px; height: 15px; }
.af-nav.on { background: var(--bg-2); color: var(--text); font-weight: 600; }
.af-nav.on .ic { color: var(--accent); }

.af-main { padding: 14px; overflow: hidden; }

.af-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  font-size: .68rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
}
.chip.on, .chip.gold {
  background: rgba(245,196,81,.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Listing row, mirrored from .listing-compact in app.css ─────────────── */
.lst {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.lst.dim { opacity: .72; }
.lst.match { border-color: rgba(59,130,246,.42); box-shadow: 0 0 0 1px rgba(59,130,246,.14); }

.lst-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .62rem; font-weight: 700; color: #fff;
}
.av-b { background: var(--blurple); }
.av-g { background: #e67e22; }
.av-t { background: #3aa8c1; }
.av-p { background: #9b59b6; }

.lst-name { font-family: var(--font-display); font-size: .84rem; font-weight: 700; }

.tag {
  font-size: .63rem; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--bg-3); color: var(--text-dim);
}
.tag.tier { color: var(--diamond); background: rgba(125,211,252,.1); }

.lst-sides {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: start;
  margin-top: 12px;
}
.lst-swap { color: var(--text-faint); padding-top: 20px; }
.lst-swap .ic { width: 15px; height: 15px; }

.side-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); margin-bottom: 8px;
}
.side-label b { color: var(--text-faint); font-weight: 600; letter-spacing: 0; }

.strip { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.mini {
  display: block; width: 26px; aspect-ratio: 367 / 512;
  border-radius: 3px;
  background:
    radial-gradient(60% 42% at 50% 50%, rgba(125,211,252,.16), transparent 70%),
    linear-gradient(158deg, #24344a, #16202e);
  border: 1px solid rgba(255,255,255,.07);
}
.mini.more {
  display: grid; place-items: center;
  background: none; border: 1px dashed var(--border);
  font-family: var(--font-body); font-style: normal;
  font-size: .55rem; font-weight: 700; color: var(--text-faint);
}
.mini.hit {
  background:
    radial-gradient(60% 42% at 50% 50%, rgba(125,211,252,.34), transparent 70%),
    linear-gradient(158deg, #3a557f, #24405f);
  border-color: rgba(125,211,252,.5);
  box-shadow: 0 0 0 1px rgba(125,211,252,.28);
}

.match-flag {
  position: absolute; top: -9px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .61rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--blue-btn); color: #fff;
}
.match-flag .ic { width: 11px; height: 11px; }

.lst-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mini-btn {
  font-size: .7rem; font-weight: 600; padding: 6px 12px; border-radius: 7px;
  background: var(--bg-3); color: var(--text);
}
.mini-btn.blue { background: var(--blue-btn); }
.mini-note { font-size: .66rem; color: var(--text-faint); }

/* ── Bands ──────────────────────────────────────────────────────────────── */
.band { padding: clamp(64px, 8vw, 108px) 0; }
.band.alt { background: var(--bg-1); border-block: 1px solid var(--border); }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; margin-top: 44px; counter-reset: s;
}
.step {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px 24px;
}
.band.alt .step { background: var(--bg-2); }

/* The connector. Drawn on the card rather than as a separate track so it
   cannot drift out of alignment when the grid reflows, and hidden on the last
   one and at every stacked breakpoint. */
.step::after {
  content: ""; position: absolute; top: 44px; right: -20px; width: 20px;
  border-top: 1px dashed var(--border);
}
.step:last-child::after { display: none; }

.step-n {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(245,196,81,.1);
  border: 1px solid var(--accent-dark);
  color: var(--accent);
  font-size: .95rem; font-weight: 800;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.06rem; margin-bottom: 8px; }
.step p { font-size: .9rem; color: var(--text-dim); }

/* ── Demo (tabbed mockups) ──────────────────────────────────────────────── */
.demo-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.demo-tabs button {
  font-family: var(--font-display);
  font-size: .87rem; font-weight: 700; letter-spacing: -0.01em;
  padding: 9px 17px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.demo-tabs button:hover { color: var(--text); }
.demo-tabs button.on {
  background: rgba(245,196,81,.15);
  border-color: var(--accent);
  color: var(--accent);
}

.pane {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 52px); align-items: start;
  animation: fadeUp .34s var(--row-ease) both;
}
.pane[hidden] { display: none; }

.pane-side, .pane-shot { min-width: 0; }
.pane-side { padding-top: 4px; }
.pane-side h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-bottom: 12px; }
.pane-side p { color: var(--text-dim); margin-bottom: 20px; }

.ticks { display: grid; gap: 10px; }
.ticks li {
  position: relative; padding-left: 28px;
  font-size: .91rem; color: var(--text-dim);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(35,165,90,.16);
  border: 1px solid rgba(35,165,90,.5);
}
.ticks li::after {
  content: ""; position: absolute; left: 5px; top: .62em;
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green);
  transform: rotate(-45deg);
}

.mini-app {
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 24px 56px -20px rgba(0,0,0,.7);
}

.ma-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.ma-head .ic { width: 15px; height: 15px; color: var(--text-faint); }
.ma-input {
  flex: 1; font-size: .8rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 7px 11px; border-radius: 8px;
}
.ma-btn {
  font-size: .72rem; font-weight: 600; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: 8px;
}
.ma-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 9px;
}
.ma-sets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.set-pill {
  font-size: .69rem; font-weight: 600; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 999px;
}
.set-pill b { color: var(--accent); }

.beta {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px;
  background: none; color: var(--accent);
  border: 1px solid rgba(245,196,81,.4);
  vertical-align: middle;
}

.match-pair {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 18px;
}
.mp-col { display: grid; gap: 8px; justify-items: center; }
.mp-lab {
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}
.mp-mid { color: var(--text-faint); }

/* --bg-4 is the colour the app paints behind card art while it LOADS, so every
   placeholder here was reading as a failed image. These are face-down cards
   now: a deeper ground with the game's diamond at the centre. It says "a card"
   without standing in for artwork we do not have. */
.card {
  position: relative;
  display: block; width: 54px; aspect-ratio: 367 / 512;
  border-radius: 5px;
  background: linear-gradient(158deg, #24344a, #16202e);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 34%; aspect-ratio: 1;
  background: rgba(125,211,252,.20);
  clip-path: polygon(50% 4%, 96% 50%, 50% 96%, 4% 50%);
}
.card.gold { border-color: var(--accent-dark); box-shadow: 0 0 0 1px var(--accent-dark); }
.card.own  { background: linear-gradient(158deg, #24473a, #16281f); border-color: rgba(35,165,90,.45); }
.card.want { background: linear-gradient(158deg, #40381f, #241f12); border-color: var(--accent-dark); }
.card.own::after  { background: rgba(35,165,90,.38); }
.card.want::after { background: rgba(245,196,81,.38); }

.bank-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.bank-grid .card { width: 100%; }
.bank-key { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.bank-key span { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-faint); }
.bank-key .k {
  width: 11px; height: 11px; border-radius: 3px;
  background: var(--bg-4); border: 1px solid rgba(255,255,255,.08);
}
.bank-key .k.own { background: #2f5a44; border-color: rgba(35,165,90,.5); }
.bank-key .k.want { background: #4a3f22; border-color: var(--accent-dark); }

/* ── Features ───────────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 44px;
}
/* Column + margin-top:auto on the tag, so the separator rules line up across
   a row whatever the description lengths do. Left to flow they landed at four
   different heights and the row read as four unrelated boxes. */
.feat {
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px 24px;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
/* Rows lift, tiles change border. These are tiles, so they take the tile
   idiom: --bg-2 steps to --bg-3 and the border goes gold. */
.feat:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.feat-ic {
  width: 26px; height: 26px;
  color: var(--accent);
  margin-bottom: 16px;
}
.feat h3 { font-size: 1.06rem; margin-bottom: 9px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.feat p { font-size: .9rem; color: var(--text-dim); margin-bottom: 18px; }
.feat-tag {
  margin-top: auto;
  font-size: .7rem; font-weight: 600;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: 13px; width: 100%;
}

.also {
  margin-top: 30px; padding: 22px 26px; max-width: 78ch;
  background:
    radial-gradient(120% 130% at 20% 0%, rgba(245,196,81,.12), transparent 62%),
    var(--bg-2);
  border: 1px solid rgba(245,196,81,.4);
  border-radius: var(--radius);
  font-size: .92rem; color: var(--text-dim);
}

/* ── Versus ─────────────────────────────────────────────────────────────── */
.versus {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; margin-top: 44px;
}
.vs-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 24px;
}
/* "Worse" is said with --text-faint copy, not by dimming the card and taking
   its own heading below AA with it. */
.vs-bad .vs-quote, .vs-bad li { color: var(--text-faint); }
.vs-good { border-color: rgba(59,130,246,.34); box-shadow: 0 0 0 1px rgba(59,130,246,.1); }

.vs-lab {
  display: block;
  font-family: var(--font-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.vs-good .vs-lab { color: var(--text-dim); }

.vs-quote {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem; color: var(--text-dim);
  background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 20px;
}
.vs-card .lst { margin-bottom: 20px; background: var(--bg-1); }

.vs-card ul { display: grid; gap: 9px; }
.vs-card li {
  position: relative; padding-left: 22px;
  font-size: .89rem; color: var(--text-dim);
}
.vs-card li::before {
  content: ""; position: absolute; left: 2px; top: .58em;
  width: 9px; height: 1.6px; background: var(--text-faint); border-radius: 2px;
}
.vs-good li { padding-left: 28px; }
.vs-good li::before {
  left: 0; top: .34em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(35,165,90,.16); border: 1px solid rgba(35,165,90,.5);
}
.vs-good li::after {
  content: ""; position: absolute; left: 5px; top: .62em;
  width: 6px; height: 3px;
  border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green);
  transform: rotate(-45deg);
}

.closer {
  margin-top: 30px; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700;
  color: var(--text-dim);
}

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.final { position: relative; padding: clamp(76px, 10vw, 128px) 0; overflow: hidden; text-align: center; border-top: 1px solid var(--border); }
.final-glow {
  position: absolute; inset: -20% -15% -25% -15%;
  background:
    radial-gradient(46% 58% at 28% 62%, rgba(59,130,246,.22), transparent 68%),
    radial-gradient(42% 54% at 74% 40%, rgba(245,196,81,.14), transparent 66%);
  pointer-events: none;
}
.final-in { position: relative; }
.final-panel {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(245,196,81,.12), transparent 62%),
    var(--bg-2);
  border: 1px solid rgba(245,196,81,.4);
  border-radius: 16px;
  padding: clamp(38px, 5vw, 60px) clamp(24px, 4vw, 52px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.final h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 700; letter-spacing: -0.022em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.final p { color: var(--text-dim); max-width: 48ch; margin: 0 auto 30px; }
.final .final-note {
  margin: 20px auto 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--text-faint);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot { background: var(--bg-1); border-top: 1px solid var(--border); padding: 46px 0 30px; }
.foot-in {
  display: flex; flex-wrap: wrap; gap: 30px;
  align-items: flex-start; justify-content: space-between;
}
.foot-brand { display: flex; gap: 13px; max-width: 38ch; }
.foot-brand strong { font-family: var(--font-display); font-size: .98rem; }
.foot-brand p { font-size: .84rem; color: var(--text-faint); margin-top: 5px; }

.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* padding, not line-height: clears the WCAG 2.2 24px target minimum outright
   rather than leaning on the spacing exception. */
.foot-links a { font-size: .82rem; padding: 2px 0; color: var(--text-dim); transition: color .15s; }
.foot-links a:hover { color: var(--accent); }

.legal { margin-top: 34px; }
.legal-in { border-top: 1px solid var(--border); padding-top: 22px; }
.legal p { font-size: .76rem; color: var(--text-faint); max-width: 86ch; }

/* ── Reveal ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The hidden state is gated behind .js-reveal, which only site.js sets. If the
   script 404s, errors, or is blocked, .reveal elements simply render, rather
   than leaving two whole sections invisible with no way for a reader to know
   there was anything there. Progressive enhancement, not progressive
   disappearance. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.js-reveal .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--row-ease), transform .5s var(--row-ease);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { display: none; }
}

@media (max-width: 940px) {
  .hero-in { grid-template-columns: 1fr; }
  .app-frame { transform: none; }
  .hero-shot { order: 2; }
  .pane { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .versus { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 74px; }
  .nav-in { height: 60px; gap: 12px; }
  .brand-name span { display: none; }
  .nav-cta { padding: 9px 13px; font-size: .84rem; }
  .nav-cta .ic { width: 17px; height: 17px; }
  .steps { grid-template-columns: 1fr; }
  .step::after { display: none; }
  .af-body { grid-template-columns: 1fr; }
  .af-side { display: none; }
  .lst-sides { grid-template-columns: 1fr; }
  .lst-swap { display: none; }
  .bank-grid { grid-template-columns: repeat(4, 1fr); }
  .cta-row .btn { flex: 1 1 100%; }
  .foot-in { flex-direction: column; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ── Spotlights ─────────────────────────────────────────────────────────── */
.spots {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 6vw, 86px); margin-top: 48px;
}

.spot {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
/* Direction alternates, but only the visual order: the copy stays first in the
   DOM in every row, so reading order and tab order never zigzag. */
.spot.alt .spot-copy { order: 2; }

.spot-copy, .spot-shot { min-width: 0; }

.spot-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.spot-copy h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  letter-spacing: -0.022em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.spot-copy p { color: var(--text-dim); margin-bottom: 22px; }

/* The section head, carried over from the app verbatim, fading rule included.
   It is the most recognisable typographic object in the product. */
.section-head {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 20px 2px 12px;
}
.section-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ── Deck QR ────────────────────────────────────────────────────────────── */
.qr-deck { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-meta { flex: 1 1 230px; min-width: 0; }
.qr-name { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; }
.qr-code {
  display: inline-block; margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; letter-spacing: .06em; color: var(--accent);
  background: rgba(245,196,81,.1); border: 1px solid var(--accent-dark);
  padding: 3px 9px; border-radius: 6px;
}
.qr-energy { display: flex; gap: 6px; margin: 14px 0 12px; }
.en { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); }
.en-l { background: radial-gradient(circle at 34% 30%, #ffe27a, #d8a41a); }
.en-w { background: radial-gradient(circle at 34% 30%, #86c9f5, #2b7fc4); }
.en-f { background: radial-gradient(circle at 34% 30%, #e0a97a, #a35f2c); }
/* Five across, two rows. At eight across inside this column each card came out
   about 20px wide, which at a card's aspect ratio reads as a tally mark rather
   than a card. */
.qr-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.qr-cards .card { width: 100%; border-radius: 3px; }

.qr-count {
  display: block; margin-top: 9px;
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}

.qr-code-box {
  display: grid; justify-items: center; gap: 9px;
  color: inherit; transition: border-color .15s, background .15s;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.qr-code-box:hover { border-color: var(--accent); background: var(--bg-3); }
.qr-code-box img { border-radius: 4px; }
.qr-hint {
  font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ── Lounge ─────────────────────────────────────────────────────────────── */
.lounge-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .8rem; color: var(--text-dim); margin-bottom: 6px;
}
.lounge-head b { color: var(--text); }
.lounge-grp {
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint); margin: 16px 0 8px;
}
.lounge-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 8px;
}
.lounge-row.dim { opacity: .72; }
.lounge-row > * { min-width: 0; }
.lounge-name {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.on-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.lounge-pair { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.lounge-pair .ic { width: 13px; height: 13px; color: var(--text-faint); }
.mini-btn.green { background: var(--green-btn); color: #fff; }

/* ── Card detail ────────────────────────────────────────────────────────── */
.cd-panel { display: flex; gap: 16px; align-items: flex-start; }
.cd-art { width: 84px; flex: none; border-radius: 6px; }
.cd-art::after { width: 30%; }
.cd-info { min-width: 0; }
.cd-name { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.cd-meta { display: block; font-size: .74rem; color: var(--text-faint); margin-top: 4px; }
.cd-stats { display: flex; gap: 8px; margin: 12px 0 10px; }
.cd-stat {
  font-size: .68rem; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 4px 9px; border-radius: 6px;
}
.cd-stat b { color: var(--text); font-weight: 700; margin-right: 3px; }
.cd-market { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-m {
  font-size: .68rem; font-weight: 600; color: var(--text);
  padding: 4px 10px; border-radius: 999px;
}
.cd-m b { font-weight: 800; margin-right: 3px; }
.cd-m.want  { background: rgba(76,195,176,.14); border: 1px solid rgba(76,195,176,.45); }
.cd-m.offer { background: rgba(59,130,246,.16);  border: 1px solid rgba(59,130,246,.45); }

.cd-hist { display: grid; gap: 7px; }
.cd-h {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 11px;
}
.cd-h .ic { width: 13px; height: 13px; color: var(--text-faint); }
.cd-h b { margin-left: auto; font-size: .68rem; font-weight: 600; color: var(--text-faint); }

/* ── Friend Finder ──────────────────────────────────────────────────────── */
.ff-app { display: grid; place-items: center; }
.ff-card {
  display: grid; justify-items: center; gap: 10px;
  background:
    radial-gradient(120% 130% at 20% 0%, rgba(245,196,81,.12), transparent 62%),
    var(--bg-2);
  border: 1px solid rgba(245,196,81,.4);
  border-radius: 14px;
  padding: 24px 30px;
  width: min(280px, 100%);
}
.ff-av { width: 40px; height: 40px; font-size: .84rem; }
.ff-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; }
.ff-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; letter-spacing: .04em; color: var(--text-dim);
  background: var(--bg-0); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 7px;
}
.ff-qr { border-radius: 5px; margin-top: 4px; }
.ff-btn { margin-top: 4px; padding: 8px 20px; }

/* ── Trade history ──────────────────────────────────────────────────────── */
.hist-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 8px;
}
.hist-row.dim { opacity: .72; }
.hist-ok {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(35,165,90,.18); border: 1px solid rgba(35,165,90,.5);
  color: var(--green);
}
.hist-ok .ic { width: 11px; height: 11px; }
.hist-pair { display: flex; align-items: center; gap: 6px; }
.hist-pair .ic { width: 13px; height: 13px; color: var(--text-faint); }
.hist-row > * { min-width: 0; }
.hist-who { font-size: .82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-when { margin-left: auto; font-size: .7rem; color: var(--text-faint); white-space: nowrap; }

@media (max-width: 1080px) {
  .spot { grid-template-columns: 1fr; }
  .qr-deck { flex-direction: column; align-items: stretch; }
  /* Order is reset so every row reads copy-then-picture once stacked; the
     alternation only ever meant anything side by side. */
  .spot.alt .spot-copy { order: 0; }
}

/* ── Grain ──────────────────────────────────────────────────────────────── */
/* A single fixed fractal-noise tile. The page is six stacked dark bands and
   without this they read as flat blocks of hex; grain gives them a surface.
   Fixed rather than per-section so it never seams at a band boundary, and
   very low opacity so it reads as texture rather than dirt. */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .034; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The nav and any fixed layer must sit above it. */
.nav { z-index: 100; }

/* ── Hero stats ─────────────────────────────────────────────────────────── */
/* The numbers ship baked and already true, then site.js swaps in the live ones
   from Discord's public invite endpoint. If that call fails, is rate limited or
   is blocked, the baked figures stand and nothing looks broken. */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
  max-width: 500px;
}
.hstat dt {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.hstat dd {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hs-plus { color: var(--accent); }
/* Once live figures land the "+" is wrong: the number is exact, not a floor. */
.hero-stats[data-live="ok"] .hs-plus { display: none; }
.hero-stats[data-live="ok"] .hstat dd { transition: color .4s var(--row-ease); }

/* ── Try it ─────────────────────────────────────────────────────────────── */
.demo2 {
  min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(24px, 3.5vw, 46px);
  margin-top: 40px;
  align-items: start;
}
.d2-pickers { display: grid; gap: 22px; }
.d2-col .section-head { margin-top: 0; }

.d2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 7px; }
.d2-pick {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-dim);
  text-align: left; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.d2-pick:hover { background: var(--bg-3); color: var(--text); }
.d2-pick .pip {
  width: 9px; height: 9px; flex: none;
  background: var(--diamond);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* The app's one on-state: gold tint, accent border, accent label. */
.d2-pick[aria-pressed="true"] {
  background: rgba(245,196,81,.15);
  border-color: var(--accent);
  color: var(--accent);
}
.d2-pick[aria-pressed="true"] .pip { background: var(--accent); }

.d2-stage {
  position: relative;
  background: var(--bg-0);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  min-height: 330px;
  display: grid; align-items: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.d2-idle { text-align: center; color: var(--text-faint); }
.d2-idle .ic { width: 30px; height: 30px; margin: 0 auto 12px; opacity: .5; }
.d2-idle p { font-size: .88rem; }

.d2-scan { text-align: center; }
.d2-scan p { font-size: .86rem; color: var(--text-dim); margin-top: 14px; }
.d2-bar { height: 3px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.d2-bar i { display: block; height: 100%; width: 40%; background: var(--blue-btn); border-radius: 2px; animation: d2sweep 1s var(--row-ease) infinite; }
@keyframes d2sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.d2-dots i { animation: d2blink 1.2s infinite; }
.d2-dots i:nth-child(2) { animation-delay: .2s; }
.d2-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes d2blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.d2-count {
  display: block; margin-top: 10px;
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

.d2-result { position: relative; animation: fadeUp .4s var(--row-ease) both; }
/* The flag is a sibling of the row here, so the row cannot be its containing
   block; anchoring both to .d2-result keeps them together whatever the stage
   padding does. */
.d2-result .match-flag { top: 0; left: 12px; }
.d2-result .lst { position: static; margin-top: 14px; }
.d2-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 14px; }
.d2-half { display: grid; gap: 6px; }
.d2-lab {
  font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.d2-card {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 10px;
  font-size: .8rem; font-weight: 600; color: var(--text);
}
.d2-card.hit { border-color: rgba(125,211,252,.5); box-shadow: 0 0 0 1px rgba(125,211,252,.22); }
.d2-arrow { color: var(--text-faint); }
.d2-arrow .ic { width: 16px; height: 16px; }
.d2-note { font-size: .74rem; color: var(--text-faint); margin: 14px 0 16px; }
.d2-again {
  display: block; margin-top: 12px;
  background: none; border: none; padding: 0;
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-faint);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.d2-again:hover { color: var(--text); }

@media (max-width: 940px) {
  .demo2 { grid-template-columns: 1fr; }
  .d2-stage { min-height: 300px; }
}
@media (max-width: 620px) {
  .hero-stats { gap: 10px 22px; }
  .hstat dd { font-size: 1.28rem; }
  .d2-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}


/* ── Real card art ──────────────────────────────────────────────────────── */
/* Thumbnails copied out of the tcgpocket R2 bucket and re-encoded at two sizes,
   then served from our own origin. Hotlinking r2.dev would mean widening
   img-src and leaning on a dev URL Cloudflare rate limits and that our own
   notes say not to use in production. */
.mini.art, .card.art {
  background-size: cover;
  background-position: center;
  background-color: #16202e;
}
/* The diamond placeholder is the stand-in for art; with art it is noise. */
.card.art::after { display: none; }
/* A dex reads at a glance when the gaps are grey. Owned cards keep their
   colour, everything unmarked recedes. */
.bank-grid .card.art:not(.own):not(.want) { filter: grayscale(1) brightness(.42); }

.mini.c-A1_036 { background-image: url("/assets/cards/sm/A1_036.webp"); }
.card.c-A1_036 { background-image: url("/assets/cards/A1_036.webp"); }
.mini.c-A1_129 { background-image: url("/assets/cards/sm/A1_129.webp"); }
.card.c-A1_129 { background-image: url("/assets/cards/A1_129.webp"); }
.mini.c-A1_096 { background-image: url("/assets/cards/sm/A1_096.webp"); }
.card.c-A1_096 { background-image: url("/assets/cards/A1_096.webp"); }
.mini.c-A1_056 { background-image: url("/assets/cards/sm/A1_056.webp"); }
.card.c-A1_056 { background-image: url("/assets/cards/A1_056.webp"); }
.mini.c-A1_004 { background-image: url("/assets/cards/sm/A1_004.webp"); }
.card.c-A1_004 { background-image: url("/assets/cards/A1_004.webp"); }
.mini.c-A1_123 { background-image: url("/assets/cards/sm/A1_123.webp"); }
.card.c-A1_123 { background-image: url("/assets/cards/A1_123.webp"); }
.mini.c-A1_146 { background-image: url("/assets/cards/sm/A1_146.webp"); }
.card.c-A1_146 { background-image: url("/assets/cards/A1_146.webp"); }
.mini.c-A1_084 { background-image: url("/assets/cards/sm/A1_084.webp"); }
.card.c-A1_084 { background-image: url("/assets/cards/A1_084.webp"); }
.mini.c-A1_041 { background-image: url("/assets/cards/sm/A1_041.webp"); }
.card.c-A1_041 { background-image: url("/assets/cards/A1_041.webp"); }
.mini.c-A1_047 { background-image: url("/assets/cards/sm/A1_047.webp"); }
.card.c-A1_047 { background-image: url("/assets/cards/A1_047.webp"); }
.mini.c-A1_104 { background-image: url("/assets/cards/sm/A1_104.webp"); }
.card.c-A1_104 { background-image: url("/assets/cards/A1_104.webp"); }
.mini.c-A1_076 { background-image: url("/assets/cards/sm/A1_076.webp"); }
.card.c-A1_076 { background-image: url("/assets/cards/A1_076.webp"); }
.mini.c-A1_153 { background-image: url("/assets/cards/sm/A1_153.webp"); }
.card.c-A1_153 { background-image: url("/assets/cards/A1_153.webp"); }
.mini.c-A1_023 { background-image: url("/assets/cards/sm/A1_023.webp"); }
.card.c-A1_023 { background-image: url("/assets/cards/A1_023.webp"); }
.mini.c-A3b_053 { background-image: url("/assets/cards/sm/A3b_053.webp"); }
.card.c-A3b_053 { background-image: url("/assets/cards/A3b_053.webp"); }