/* Card faces (src/card-face.js), shared by the landing (#cards) and the in-game CARD screen.
   A card is the one warm, metallic or foiled surface anywhere, because it depicts a card
   (DESIGN.md, tier cards). Colors are DESIGN.md tokens; type inside is sized to the card
   (cqi), so a card reads the same at 150px and at 300px. The pointer tilts the card and
   slides its foil and glare (--rx --ry --mx --my --gl); a press turns it over. */
/* The card brings its own two faces, so it reads the same on the landing and inside the game. */
@font-face { font-family: Geist; src: url('../assets/fonts/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Galmuri11; src: url('../assets/fonts/Galmuri11-latin.woff2') format('woff2'); font-display: swap; }
.tcg .px { font-family: Galmuri11, ui-monospace, monospace; font-weight: 400; }
.tcg {
  font-family: Geist, system-ui, -apple-system, 'Segoe UI', sans-serif; font-synthesis: none;
  --ink: #0f2540; --ink-2: #2c4a72; --ink-3: #4d6b92;
  --card-cream: #fff6e6; --card-peach: #ffd9b0; --card-apricot: #ffb07a; --card-ring: #e8a15f;
  --foil-rose: #ff8fa3; --foil-amber: #ffd27a; --foil-mint: #a8f0a0; --foil-sky: #86d3ff; --foil-lilac: #c8a2ff;
  --shiny-frost: #eef7ff; --shiny-ice: #cfe6ff; --shiny-blue: #a9cff7; --shiny-ring: #7fb2e6; --shiny-ink: #2c5d93;
  --card-gold-pale: #fff4cf; --card-gold-light: #f7e2a1; --card-gold: #f2d17c; --card-gold-deep: #d8a84a; --card-gold-dark: #c9953a; --card-gold-ring: #b48329; --card-gold-ink: #4a3208; --card-gold-ink-2: #6b4a0e;
  --type: #ee6650; --frame: #fff4cf; --text: #0f2540; --text-soft: #4d6b92; --rule: rgba(15, 37, 64, .12);
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --gl: 0; --lean: 0deg; --lift: 0px;
  position: relative; display: block; aspect-ratio: 63 / 88; border-radius: 16px; container-type: inline-size; cursor: pointer; outline: none;
  transform: perspective(1000px) translateY(var(--lift)) rotate(var(--lean)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 26px 40px -22px rgba(184, 53, 25, .6); touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.tcg-type-fire { --type: #ee6650; } .tcg-type-grass { --type: #7fae3f; } .tcg-type-water { --type: #4d94cf; } .tcg-type-steel { --type: #8f96a8; } .tcg-type-psychic { --type: #9a78bd; }
.tcg:hover, .tcg.is-tilting, .tcg:focus-visible { --lean: 0deg; --lift: -14px; box-shadow: 0 34px 46px -22px rgba(184, 53, 25, .7); }
.tcg:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #e8472b, 0 34px 46px -22px rgba(184, 53, 25, .7); }
.tcg.is-tilting { transition: transform .08s linear, box-shadow .45s cubic-bezier(.16, 1, .3, 1); }
.tcg-inner { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.tcg.is-flipped .tcg-inner { transform: rotateY(180deg); }
/* WebKit (iPhone Safari) does not cull the hidden face here: it painted the back, mirrored, over the
   front's body. So the faces also swap visibility the moment the card stands edge-on. On this ease
   the turn passes 90° at about a tenth of its 0.7s, so the swap waits 70ms. */
.tcg-front, .tcg-back { transition: visibility 0s .07s; }
.tcg-back, .tcg.is-flipped .tcg-front { visibility: hidden; }
.tcg.is-flipped .tcg-back { visibility: visible; }
.tcg-front, .tcg-back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tcg-back { transform: rotateY(180deg); display: grid; place-items: center; align-content: center; gap: 5cqi; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0 .7cqi, transparent 1cqi) 0 0 / 7cqi 7cqi, linear-gradient(160deg, #2f86de, #6db3f2 58%, #bfe0fb); box-shadow: inset 0 0 0 2.4cqi #fff, inset 0 0 0 3.2cqi #2f86de; }
.tcg-back img { width: 68%; height: auto; filter: drop-shadow(0 3cqi 3cqi rgba(10, 50, 100, .3)); }
.tcg-back span { font-size: 5cqi; letter-spacing: .18em; color: #fff; text-shadow: 0 1px 0 rgba(10, 50, 100, .3); }

/* The face: frame, header, art, attacks, the stock seal, flavor, footer. */
.tcg-body { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto; gap: 2.2cqi; padding: 5.2cqi 5.6cqi 4.6cqi; border-radius: inherit; color: var(--text); background: linear-gradient(165deg, var(--card-cream), var(--card-peach) 62%, var(--card-apricot)); box-shadow: inset 0 0 0 2.6cqi var(--frame), inset 0 0 0 3.2cqi var(--type), inset 0 0 0 3.6cqi rgba(255, 255, 255, .6); }
.tcg-body > * { position: relative; z-index: 1; min-width: 0; }
.tcg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "stage stage stage" "name hp orb"; align-items: end; column-gap: 1.8cqi; padding-top: 1.2cqi; }
.tcg-stage { grid-area: stage; justify-self: start; padding: .4cqi 2cqi; border-radius: 999px; background: rgba(255, 255, 255, .72); font-size: 3.2cqi; letter-spacing: .12em; color: var(--text-soft); }
.tcg-name { grid-area: name; overflow: hidden; font-size: 8.4cqi; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
.tcg-hp { grid-area: hp; display: inline-flex; align-items: baseline; gap: .6cqi; font-size: 7cqi; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #b83519; font-variant-numeric: tabular-nums; }
.tcg-hp small { font-size: 3.4cqi; font-weight: 700; letter-spacing: .06em; }
.tcg-orb, .tcg-dot { display: inline-block; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 14%, rgba(255, 255, 255, 0) 38%), var(--dot, var(--type)); box-shadow: inset 0 -.5cqi 0 rgba(15, 37, 64, .22), 0 0 0 .5cqi rgba(255, 255, 255, .9); }
.tcg-orb { grid-area: orb; width: 7cqi; height: 7cqi; }
.tcg-dot { width: 3.6cqi; height: 3.6cqi; }
.tcg-dot-fire { --dot: #ee6650; } .tcg-dot-grass { --dot: #7fae3f; } .tcg-dot-water { --dot: #4d94cf; } .tcg-dot-steel { --dot: #8f96a8; } .tcg-dot-psychic { --dot: #9a78bd; } .tcg-dot-electric { --dot: #ffd27a; }
.tcg-dot-normal, .tcg-dot-flying { --dot: #ffffff; box-shadow: inset 0 0 0 .4cqi #4d6b92, 0 0 0 .5cqi rgba(255, 255, 255, .9); }

.tcg-art { position: relative; display: grid; place-items: center; min-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1cqi var(--frame), 0 0 0 1.5cqi var(--type), 0 1.6cqi 2.6cqi -1cqi rgba(15, 37, 64, .35); }
.tcg-art::before, .tcg-art::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tcg-art img { position: relative; z-index: 1; width: auto; height: 94%; max-width: 86%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2.4cqi 2cqi rgba(15, 37, 64, .3)); }
/* Scenes, one per family type, painted from the page's own tokens. */
.tcg-scene-fire { background: radial-gradient(circle at 76% 24%, var(--card-gold-pale) 0 9%, rgba(255, 244, 207, 0) 26%), linear-gradient(180deg, var(--card-cream) 0%, var(--card-peach) 34%, var(--card-apricot) 68%, #ee6650 100%); }
.tcg-scene-fire::before { background: radial-gradient(circle, rgba(255, 255, 255, .85) 0 .5cqi, transparent .8cqi) 0 0 / 9cqi 11cqi, linear-gradient(170deg, transparent 72%, rgba(184, 53, 25, .35) 72.5%); }
.tcg-scene-grass { background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 34%), linear-gradient(180deg, var(--card-cream) 0%, #8cc46a 46%, #7fae3f 72%, #3f8a4a 100%); }
.tcg-scene-grass::before { background: repeating-linear-gradient(105deg, rgba(255, 255, 255, .16) 0 3cqi, transparent 3cqi 9cqi); }
.tcg-scene-water { background: radial-gradient(circle at 24% 20%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #bfe0fb 0%, #5aa6dc 56%, #4d94cf 100%); }
.tcg-scene-water::before { background: repeating-radial-gradient(ellipse 140% 60% at 50% 128%, rgba(255, 255, 255, .28) 0 .8cqi, transparent .8cqi 5cqi); }
.tcg-scene-steel { background: linear-gradient(160deg, #eaf4fd 0%, #bfe0fb 40%, #8f96a8 100%); }
.tcg-scene-steel::before { background: linear-gradient(118deg, transparent 44%, var(--foil-amber) 45% 47%, transparent 48%), linear-gradient(118deg, transparent 58%, rgba(255, 255, 255, .7) 59% 60%, transparent 61%); }
.tcg-scene-psychic { background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .75) 0 12%, rgba(255, 255, 255, 0) 40%), repeating-conic-gradient(from 0deg at 50% 46%, var(--foil-lilac) 0 12deg, #9a78bd 12deg 24deg); }

.tcg-strip { margin: 0; padding: .9cqi 2cqi; border-radius: 6px; background: rgba(255, 255, 255, .55); font-size: 3.5cqi; font-style: italic; font-weight: 600; letter-spacing: .02em; text-align: center; color: var(--text-soft); }
.tcg-moves { list-style: none; margin: 0; padding: 0; display: grid; }
.tcg-moves li { display: grid; grid-template-columns: 12cqi minmax(0, 1fr) auto; align-items: center; gap: 1.6cqi; padding: 1.4cqi .6cqi; border-bottom: 1px solid var(--rule); }
.tcg-cost { display: inline-flex; gap: .8cqi; }
.tcg-moves b { overflow: hidden; font-size: 4.6cqi; font-weight: 800; letter-spacing: .01em; white-space: nowrap; text-overflow: ellipsis; }
.tcg-dmg { font-size: 6.4cqi; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tcg-seal { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; margin: 0; }
.tcg .ticker { display: inline-flex; align-items: center; padding: .9cqi 2.6cqi; border-radius: 6px; font-size: 3.8cqi; font-weight: 800; letter-spacing: .08em; color: #fff; }
.tcg .ticker-fire { background: #ee6650; } .tcg .ticker-grass { background: #7fae3f; } .tcg .ticker-water { background: #4d94cf; } .tcg .ticker-steel { background: #8f96a8; } .tcg .ticker-psychic { background: #9a78bd; }
.tcg-seal-made { padding: .9cqi 2.6cqi; border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: 3.8cqi; letter-spacing: .06em; color: var(--text-soft); white-space: nowrap; }
.tcg-holo .tcg-seal-made, .tcg-shiny .tcg-seal-made, .tcg-gold .tcg-seal-made { background: linear-gradient(135deg, var(--card-gold-pale), var(--card-gold) 45%, var(--card-gold-deep) 70%, var(--card-gold-light)); color: var(--card-gold-ink); box-shadow: inset 0 0 0 .4cqi var(--card-gold-ring); }
.tcg-flavor { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 3.3cqi; font-style: italic; line-height: 1.35; color: var(--text-soft); }
.tcg-foot { display: flex; justify-content: space-between; align-items: center; gap: 1.6cqi; padding-top: 1.6cqi; border-top: 1px solid var(--rule); font-size: 3.1cqi; letter-spacing: .04em; color: var(--text-soft); white-space: nowrap; }
.tcg-rarity { color: #b83519; }
.tcg-serial { font-variant-numeric: tabular-nums; }
.tcg-stamp { position: absolute; z-index: 2; left: 3cqi; bottom: 3cqi; display: grid; place-items: center; width: 12cqi; height: 12cqi; border-radius: 50%; background: var(--ink); color: #fff; font-size: 3cqi; line-height: 1.05; text-align: center; box-shadow: 0 0 0 1cqi rgba(255, 255, 255, .9); }
/* Collector marks (NO.1, DEX MATCH, LAST ONE): a gold tab in the art window's top corner. */
.tcg-marks { position: absolute; z-index: 2; top: 2.4cqi; right: 2.4cqi; display: grid; justify-items: end; gap: 1cqi; }
.tcg-mark { padding: .8cqi 2cqi; border-radius: 999px; background: linear-gradient(135deg, var(--card-gold-pale), var(--card-gold) 50%, var(--card-gold-deep)); color: var(--card-gold-ink); font-size: 3cqi; letter-spacing: .08em; white-space: nowrap; box-shadow: 0 0 0 .6cqi rgba(255, 255, 255, .85), 0 1cqi 2cqi rgba(74, 50, 8, .3); }

/* Foil: always behind the sprite and the type; only the glare crosses the whole card. */
.tcg-body > .tcg-foil { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; }
.tcg-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; opacity: var(--gl); transition: opacity .3s cubic-bezier(.16, 1, .3, 1); }
/* HOLO: a rainbow band and sparkles across the art window, the way the first holo cards did it. */
.tcg-holo .tcg-art::after { background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 .45cqi, transparent .75cqi) 1cqi 2cqi / 7cqi 7cqi, repeating-linear-gradient(115deg, var(--foil-rose) 0%, var(--foil-amber) 7%, var(--foil-mint) 14%, var(--foil-sky) 21%, var(--foil-lilac) 28%, var(--foil-rose) 35%) var(--mx) var(--my) / 260% 260%; mix-blend-mode: soft-light; opacity: .95; animation: foil-drift 9s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
/* SHINY: a pale-blue card that sparkles all over, with an iridescent art window. */
.tcg-shiny { --frame: #eef7ff; --text-soft: #2c5d93; }
.tcg-shiny .tcg-body { background: linear-gradient(165deg, var(--shiny-frost), var(--shiny-ice) 55%, var(--shiny-blue)); }
.tcg-shiny .tcg-foil { background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 .45cqi, transparent .8cqi) 0 0 / 8cqi 8cqi, radial-gradient(circle, rgba(255, 255, 255, .7) 0 .3cqi, transparent .6cqi) 4cqi 5cqi / 11cqi 11cqi, repeating-linear-gradient(125deg, var(--foil-rose) 0%, var(--foil-amber) 8%, var(--foil-mint) 16%, var(--foil-sky) 24%, var(--foil-lilac) 32%, var(--foil-rose) 40%) var(--mx) var(--my) / 240% 240%; mix-blend-mode: soft-light; opacity: .9; animation: foil-drift 11s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.tcg-shiny .tcg-art::after { background: repeating-linear-gradient(125deg, var(--foil-rose) 0%, var(--foil-amber) 8%, var(--foil-mint) 16%, var(--foil-sky) 24%, var(--foil-lilac) 32%, var(--foil-rose) 40%) var(--mx) var(--my) / 240% 240%; mix-blend-mode: soft-light; opacity: .8; animation: foil-drift 11s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.tcg-shiny .tcg-rarity { color: var(--shiny-ink); }
/* GOLD: another material entirely. A gold card with etched lines, a gold sunburst behind the sprite. */
.tcg-gold { --frame: #f7e2a1; --type: #b48329; --text: #4a3208; --text-soft: #6b4a0e; --rule: rgba(107, 74, 14, .25); }
.tcg-gold .tcg-body { background: linear-gradient(155deg, var(--card-gold-pale) 0%, var(--card-gold) 30%, var(--card-gold-deep) 55%, var(--card-gold-light) 78%, var(--card-gold-dark) 100%); }
.tcg-gold .tcg-foil { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 .25cqi, transparent .25cqi 1.6cqi), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 45%, transparent 60%) var(--mx) var(--my) / 250% 250%; mix-blend-mode: overlay; opacity: .8; animation: foil-drift 7s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.tcg-gold .tcg-art { background: radial-gradient(circle at 50% 50%, var(--card-gold-pale) 0 16%, rgba(255, 244, 207, 0) 46%), repeating-conic-gradient(from 0deg at 50% 50%, var(--card-gold-light) 0 7deg, var(--card-gold) 7deg 14deg); }
.tcg-gold .tcg-art::before { background: none; }
.tcg-gold .tcg-art::after { background: radial-gradient(circle, rgba(255, 255, 255, .95) 0 .5cqi, transparent .9cqi) 2cqi 1cqi / 8cqi 8cqi; mix-blend-mode: normal; opacity: .9; }
.tcg-gold .tcg-strip, .tcg-gold .tcg-stage { background: rgba(255, 244, 207, .55); }
.tcg-gold .tcg-hp, .tcg-gold .tcg-rarity { color: var(--card-gold-ink); }
.tcg-gold .tcg-name { text-shadow: 0 .3cqi 0 rgba(255, 244, 207, .8); }
@keyframes foil-drift { from { background-position: 0% 0%, 0% 0%, 0% 0%; } to { background-position: 100% 100%, 100% 100%, 100% 100%; } }
.tcg.is-tilting .tcg-art::after, .tcg.is-tilting .tcg-foil { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tcg, .tcg-inner { transition: none; }
  .tcg-art::after, .tcg-foil { animation: none; }
}