/* ==========================================================================
   card.css — the trading card: metallic frame, inner panel, typography and
   the card back. Every size is in cqi (1% of the card's width) so a card
   reads the same at 120 px on a phone and 560 px on a desktop.
   ========================================================================== */

.card {
  position: relative;
  width: 100%; height: 100%;
  container-type: inline-size;
  /* Perspective scales with the card (≈ 4× its width), so a big card's flip
     doesn't bulge more than a small one's. */
  perspective: calc(var(--sw) * 4);
  -webkit-tap-highlight-color: transparent;
}

/* Tilt layer: JS writes --rx/--ry (rotation) and --mx/--my/--hyp (light). */
.card__tilt {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --hyp: 0;
  position: absolute; inset: 0;
  border-radius: 4.6cqi;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  /* Flat on purpose (no preserve-3d): Chrome rasterises preserve-3d layers at
     low resolution once tilted, which blurs the text. The deal flips the card
     with `rotate: y …` and swaps back → face when it is edge-on (90°). */
  box-shadow:
    0 1cqi 2cqi rgb(0 0 0 / .35),
    0 4cqi 10cqi rgb(0 0 0 / .45);
}

.card__face {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  padding: 3.4cqi;
  display: flex;
}

/* Metallic frame: a brushed silver edge around the panel. */
.card__frame {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(125deg, #f4f8fd 0%, #9fb0c6 22%, #e3ebf5 40%, #7d8fa8 60%, #dbe4ef 78%, #8a9ab0 100%);
}
.card__frame::after {   /* fine brushed lines */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

.card__panel {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 2.8cqi;
  padding: 4cqi 4.6cqi 3.4cqi;
  border-radius: 2.8cqi;
  background:
    radial-gradient(120% 60% at 50% 0%, rgb(0 100 181 / .55), transparent 70%),
    linear-gradient(175deg, #0a3566 0%, var(--navy) 45%, #00122c 100%);
  box-shadow: inset 0 0 0 .45cqi rgb(255 255 255 / .14), inset 0 0 6cqi rgb(0 0 0 / .45);
  overflow: hidden;
}

/* Top row: rarity mark + card number. */
.card__top, .card__bottom {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 3.3cqi/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c9dbef;
}
.rarity { display: inline-flex; align-items: center; gap: 1.4cqi; }
.rarity svg { width: 4cqi; height: 4cqi; fill: currentColor; }
.rarity--ultra {
  font-family: "Mono Caps", var(--mono);
  color: #fff;
  padding: 1.2cqi 2.4cqi 1.2cqi 1.8cqi;
  border-radius: 99px;
  background: linear-gradient(100deg, #ffd9f2, #c8f4ff 35%, #d8ffd0 65%, #fff1c4);
  color: #0d2346;
  font-weight: 500;
}
.card__no { opacity: .9; }

/* Art window. */
.card__art {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1.24;
  border-radius: 2.6cqi;
  overflow: hidden;
  isolation: isolate;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, rgb(116 186 255 / .55), transparent 75%),
    linear-gradient(160deg, #0d4c8f, #00285e 60%, #001736);
  box-shadow: inset 0 0 0 .45cqi rgb(255 255 255 / .35), inset 0 -3cqi 6cqi rgb(0 0 0 / .35);
}
.art__rays {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .12) 0 3deg, transparent 3deg 12deg);
  mask-image: radial-gradient(closest-side, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent 85%);
}
.card__art img {
  position: relative;
  width: 60%; height: auto;
  filter: drop-shadow(0 2.4cqi 3cqi rgb(0 0 0 / .45));
}

/* Text block. */
.card__text { display: flex; flex-direction: column; gap: 2.2cqi; }
.card__title {
  margin: 0;
  font: 600 7.2cqi/1.04 var(--sans);
  letter-spacing: -.012em;
  color: #fff;
  text-wrap: balance;
}
.card__eyebrow {
  display: block;
  margin-bottom: 1.4cqi;
  font: 500 3.4cqi/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9fcbf5;
}
.card__meta {
  margin: 0;
  font: 400 3.2cqi/1.3 var(--mono);
  color: #d5e3f3;
  white-space: nowrap;
}
.card__meta i { font-style: normal; color: #6fa4d8; padding: 0 .15em; }
.card__flavour {
  margin: 0;
  padding-top: 2.2cqi;
  border-top: .3cqi solid rgb(255 255 255 / .16);
  font: 400 4.1cqi/1.3 var(--sans);
  color: #e9f1fb;
  opacity: .92;
}

.card__bottom {
  margin-top: auto;
  font-size: 3cqi;
  color: #8eaed2;
}
.card__set { color: #c9dbef; }

/* ── Card back: same "OneLake" language as the pack (teal + blue crest) ─────────────────── */

.card__back {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  display: grid; place-items: center;
  /* Mirrored, so it reads correctly while the card is turned around. */
  transform: rotateY(180deg);
  background:
    radial-gradient(60% 45% at 50% 48%, rgb(116 234 194 / .22), transparent 75%),
    linear-gradient(172deg, #2b9a8a 0%, #19776e 28%, #11594f 62%, #08302a 100%);
  /* teal foil frame + a fine inner hairline */
  box-shadow:
    inset 0 0 0 3.2cqi #146a5e,
    inset 0 0 0 3.5cqi rgb(255 255 255 / .55),
    inset 0 0 0 6.2cqi rgb(0 20 60 / .25);
}
.back__topo {
  position: absolute; inset: 3.2cqi;
  border-radius: 2.6cqi;
  -webkit-mask: url("../assets/topo.svg") center / cover no-repeat;
          mask: url("../assets/topo.svg") center / cover no-repeat;
  background-image:
    linear-gradient(rgb(255 255 255 / .22), rgb(255 255 255 / .22)),
    repeating-linear-gradient(115deg, #8fd8ff 0%, #b9a7ff 6%, #ffc4e6 12%, #fff1b8 18%, #b6ffd9 24%, #8fd8ff 30%);
  background-size: 100% 100%, 260% 260%;
  background-position: 0 0, var(--mx) var(--my);
  opacity: calc(.38 + var(--hyp) * .4);
}
/* A pipeline running straight through the shield, frame to frame. */
.back__line {
  position: absolute; left: 3.2cqi; right: 3.2cqi; top: 50%;
  height: .5cqi; translate: 0 -50%;
  background:
    radial-gradient(circle, #fff 0 1.1cqi, transparent 1.2cqi) 14% 50% / 3cqi 3cqi no-repeat,
    radial-gradient(circle, #fff 0 1.1cqi, transparent 1.2cqi) 86% 50% / 3cqi 3cqi no-repeat,
    linear-gradient(90deg, transparent, rgb(255 255 255 / .7) 12% 88%, transparent);
  overflow: visible;
}
.back__mark {
  position: relative;
  display: grid; justify-items: center; gap: 2.4cqi;
  padding: 7cqi 8cqi 6cqi;
  border-radius: 6cqi;
  background: radial-gradient(closest-side, rgb(8 48 42 / .85) 55%, transparent);
}
.back__shield { width: 26cqi; height: auto; filter: drop-shadow(0 1cqi 2cqi rgb(0 0 0 / .45)); }
.back__code { font: 700 10cqi/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.back__series { font: 500 3.2cqi/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #c6f1e6; }

/* Face-up cards hide the back once dealt (the deal animation shows it first). */
[data-face-up] .card__back { opacity: 0; }
.card--badge { perspective: calc(var(--bw) * 4); }

/* ── Reveal effects ──────────────────────────────────────────────────── */

/* A soft halo behind the badge card while it is revealed. */
.reveal-glow {
  position: absolute; inset: -45% -60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(116 234 194 / .7) 30%, rgb(0 100 181 / .4) 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
/* A band of light that sweeps once across the face after the flip. */
.card__shine {
  position: absolute; inset: 0; z-index: 6;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .6) 48%, rgb(255 255 255 / .15) 56%, transparent 66%);
  mix-blend-mode: overlay;
  translate: -130% 0;
  pointer-events: none;
}

/* ── Hit area: the real <button> that zooms a card ───────────────────── */

.card__hit {
  position: absolute; inset: 0;
  margin: 0; padding: 0;
  border: 0; border-radius: 4.6cqi;
  background: transparent;
  cursor: zoom-in;
  z-index: 5;
}
.card__hit[aria-expanded="true"] { cursor: zoom-out; }

/* ==========================================================================
   Colour cards — a parody of creature trading cards.
   The whole card is the type's colour, text is black, and the holo lives
   only in the art window (so everything else reads cleanly).
   Palette per card: --c-light, --c, --c-dark, --c-ink (set inline).
   ========================================================================== */

.card--mon .card__face { padding: 2.6cqi; }

.mon {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 1.5cqi;
  padding: 2.4cqi 3.4cqi 2cqi;
  border-radius: 2.4cqi;
  color: #111;
  background:
    /* fine diagonal texture, like printed card stock */
    repeating-linear-gradient(135deg, rgb(255 255 255 / .08) 0 .5cqi, transparent .5cqi 1.6cqi),
    radial-gradient(110% 60% at 25% 6%, color-mix(in srgb, var(--c-light) 85%, white), transparent 60%),
    linear-gradient(172deg, var(--c-light) 0%, var(--c) 42%, color-mix(in srgb, var(--c) 90%, black) 100%);
  box-shadow: inset 0 0 0 .35cqi rgb(255 255 255 / .4), inset 0 0 5cqi rgb(0 0 0 / .14);
}

/* ── Header ── */
.mon__stage {
  margin: 0;
  display: flex; align-items: center; gap: 1.4cqi;
  height: 3.6cqi;
  font: 500 2.3cqi/1 "Grotesk Caps", var(--sans);
}
.mon__stage span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%;
  /* IBM Plex Mono's caps sit above the line box's centre: nudge them down
     (top > bottom padding). Letter-spacing adds trailing space: balance it. */
  padding: 0 1.6cqi 0 calc(1.6cqi + .1em);
  border-radius: 99px;
  background: var(--c-ink);
  color: #fff;
  font: 500 1.95cqi/1 "Mono Caps", var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mon__stage em { font-style: normal; font-weight: 700; }

.mon__title { display: flex; align-items: center; gap: 1.6cqi; margin-top: .4cqi; }
.mon__name { margin: 0; font: 700 8.2cqi/1 var(--sans); letter-spacing: -.03em; }

/* CU (Fabric Capacity Units) in place of a life stat: the exam weight. */
.cu { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: .5cqi; white-space: nowrap; line-height: 1; }
.cu small { font: 700 2.6cqi/1 var(--mono); letter-spacing: .04em; }
.cu b { font: 700 6.2cqi/1 var(--sans); letter-spacing: -.03em; }
.cu i { font: 700 3.6cqi/1 var(--sans); font-style: normal; }
.cu--all { flex-direction: column; align-items: flex-end; gap: .6cqi; }
.cu--all small { font-size: 2cqi; text-transform: uppercase; }
.cu--all b { font-size: 3.6cqi; }

/* Type badge: the same component in the header and in every attack cost. */
.mon__type, .cost {
  --s: 5.8cqi;
  width: var(--s); height: var(--s);
  display: grid; place-items: center;
  flex: none;
  border-radius: 50%;
  color: #fff;
  font-style: normal; line-height: 0;
  background: radial-gradient(circle at 35% 30%, var(--c-dark), var(--c-ink) 75%);
  box-shadow: 0 0 0 .35cqi rgb(255 255 255 / .85), 0 .4cqi .8cqi rgb(0 0 0 / .35);
}
.mon__type svg, .cost__glyph { width: 62%; height: 62%; display: block; }

/* ── Art window: the only holographic part ── */
.mon__art {
  position: relative;
  aspect-ratio: 1.68;
  margin-top: .6cqi;
  overflow: hidden;
  isolation: isolate;
  /* placeholder until the illustration arrives: the type's colours + contour lines */
  background:
    radial-gradient(70% 80% at 50% 60%, var(--c-light), var(--c-dark) 85%);
  /* a bevelled metallic frame */
  box-shadow:
    0 0 0 .55cqi #f4efda,
    0 0 0 .9cqi #a99e78,
    0 .8cqi 1.6cqi .9cqi rgb(0 0 0 / .3);
}
.mon__art::before {
  content: ""; position: absolute; inset: 0;
  background: rgb(255 255 255 / .35);
  -webkit-mask: url("../assets/topo.svg") center / cover no-repeat;
          mask: url("../assets/topo.svg") center / cover no-repeat;
}
.mon__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--art-y, 50%); }
.mon__art .foil { --base: .2; --gain: .5; border-radius: 0; }
.mon__art .glitter, .mon__art .glare { border-radius: 0; }

/* The little info ribbon under the art. */
.mon__strip {
  margin: .2cqi 5cqi 0;
  padding: .9cqi 2cqi;
  text-align: center;
  font: 600 2.1cqi/1.2 var(--sans);
  font-style: italic;
  white-space: nowrap;
  color: #2a2410;
  background: linear-gradient(180deg, #fbf7e6, #d9cfa6);
  clip-path: polygon(2cqi 0, calc(100% - 2cqi) 0, 100% 50%, calc(100% - 2cqi) 100%, 2cqi 100%, 0 50%);
}

/* ── Attacks ── */
.mon__attacks { list-style: none; margin: .4cqi 0 0; padding: 0; display: flex; flex-direction: column; }
.attack {
  display: grid;
  grid-template-columns: 12.6cqi 1fr;     /* fixed cost column (2 badges): names line up */
  column-gap: 1.8cqi; row-gap: 1.4cqi;
  align-items: center;
  padding: 1.8cqi 0;
}
.attack + .attack { border-top: .25cqi solid rgb(0 0 0 / .22); }
.attack__cost { display: flex; gap: .8cqi; }

.attack__name { font: 700 4.5cqi/1.1 var(--sans); letter-spacing: -.015em; }
.attack__text {
  grid-column: 1 / -1;
  margin: 0;
  font: 500 2.75cqi/1.32 var(--sans);
  color: #161616;
  text-wrap: pretty;
}

/* ── Weakness / resistance / retreat (all jokes, no numbers) ── */
.mon__stats {
  margin: auto 0 0;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 2cqi;
  padding-top: 1.3cqi;
  border-top: .3cqi solid rgb(0 0 0 / .32);
}
.mon__stats dt { font: 600 1.9cqi/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.mon__stats dd { margin: .6cqi 0 0; font: 600 2.4cqi/1.2 var(--sans); display: flex; gap: .4cqi; }
.mon__stats .cup { width: 3.4cqi; height: 3.4cqi; fill: #111; }

.mon__flavour {
  margin: 0;
  padding: 1.2cqi 2cqi;
  border: .25cqi solid rgb(0 0 0 / .3);
  border-radius: 1.2cqi;
  background: rgb(255 255 255 / .16);
  font: 500 2.5cqi/1.3 var(--sans);
  font-style: italic;
  text-wrap: balance;
}
.mon__foot {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 1.9cqi/1 var(--mono);
  letter-spacing: .06em;
}
.mon__set { display: inline-flex; align-items: center; gap: .8cqi; font-weight: 600; }
.mon__set svg { width: 2.2cqi; height: 2.2cqi; fill: var(--c-ink); }

/* A soft, non-holo sheen over the whole card so it still catches the light. */
.glare--soft { opacity: calc(.05 + var(--hyp) * .3); }

/* ==========================================================================
   Badge card — full-art ultra rare. The official badge fills the card over an
   etched starburst; a rainbow holo frame; the holo covers the whole card.
   ========================================================================== */

/* Iridescent frame: a pastel rainbow centred on the light, so it shifts as the card tilts. */
.card__frame--holo {
  background:
    conic-gradient(from 20deg at var(--mx) var(--my),
      #ffd9ef, #c9f1ff, #d9ffd2, #fff2c2, #e6d6ff, #ffd9ef);
}
.card__frame--holo::after { opacity: .7; }

.ultra {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  padding: 4cqi 4.4cqi 3.6cqi;
  border-radius: 2.8cqi;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(85% 55% at 50% 36%, #2a8ae0 0%, var(--blue) 28%, #00377a 62%, #00122c 100%);
  box-shadow: inset 0 0 0 .45cqi rgb(255 255 255 / .3), inset 0 0 8cqi rgb(0 0 0 / .45);
}
/* Etched background: fine starburst rays, star dust and the OneLake contours. */
.ultra__etch {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle, rgb(255 255 255 / .55) 0 .18cqi, transparent .3cqi) 0 0 / 7cqi 7cqi,
    radial-gradient(circle, rgb(255 255 255 / .35) 0 .14cqi, transparent .26cqi) 3.5cqi 3.5cqi / 7cqi 7cqi,
    repeating-conic-gradient(from 0deg at 50% 36%, rgb(255 255 255 / .1) 0 1deg, transparent 1deg 5deg);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 36%, #000 30%, rgb(0 0 0 / .4) 100%);
          mask-image: radial-gradient(90% 70% at 50% 36%, #000 30%, rgb(0 0 0 / .4) 100%);
}
.ultra__etch::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(255 255 255 / .22);
  -webkit-mask: url("../assets/topo.svg") center / cover no-repeat;
          mask: url("../assets/topo.svg") center / cover no-repeat;
}

.ultra__art {
  position: relative;
  flex: 1;
  display: grid; place-items: center;
  margin: 1cqi 0 2cqi;
}
.ultra__halo {
  position: absolute; width: 86%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgb(255 255 255 / .35), rgb(116 234 194 / .25) 45%, transparent 72%);
  box-shadow: 0 0 0 .4cqi rgb(255 255 255 / .2), 0 0 0 2.4cqi rgb(255 255 255 / .05);
}
.ultra__art img {
  position: relative;
  width: 72%; height: auto;
  filter: drop-shadow(0 3cqi 4cqi rgb(0 0 0 / .5)) drop-shadow(0 0 3cqi rgb(116 234 194 / .35));
}

/* Glass panel for the text. */
.ultra__panel {
  display: flex; flex-direction: column; gap: 2.2cqi;
  padding: 3.4cqi 3.6cqi 2.8cqi;
  border-radius: 2.4cqi;
  background: linear-gradient(180deg, rgb(0 30 70 / .55), rgb(0 14 36 / .82));
  box-shadow: inset 0 0 0 .3cqi rgb(255 255 255 / .22), 0 2cqi 5cqi rgb(0 0 0 / .3);
}
.ultra__panel .card__bottom { margin-top: .4cqi; }

/* Holo over the whole card: stronger than any other card. */
.foil--ultra { --base: .2; --gain: .42; z-index: 2; }
.foil--ultra-bands { z-index: 2; border-radius: inherit; opacity: calc(.18 + var(--hyp) * .5); }
.glitter--ultra {
  opacity: calc(.3 + var(--hyp) * .7);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .5) 40%, rgb(0 0 0 / .15) 80%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .5) 40%, rgb(0 0 0 / .15) 80%);
}