/*
  Card face v1, approved on 2026-09-29 (prototype: data/memes/cartes-v1/card.css).
  Laid on top of the rarity frame at fixed percentages; sizes in cqw follow the card's own width
  (the container is .card__front, see styles.css). Classes are prefixed mk- so nothing collides
  with the older face or with /holo/holo.css.
  The reflections are the prototype's, but driven by the pointer variables /holo/holo.js already
  sets on .card (--pointer-x, --pointer-y, --card-opacity) instead of the prototype's own script.
*/

/*
  The typeface (2026-10-01): Gillius ADF, the free Gill Sans the Pokémon cards are set in (Arkandis Digital Foundry,
  GPL with font exception, fonts/COPYING). The condensed bold sets the name, the bold every label, the bold italic
  the type, the description and the set line. Where it has not arrived yet, Apple's own Gill Sans stands in.
  Its glyph widths are in face.js, which sizes the name, the type and the description from them: kerning is off,
  so what the browser draws is exactly what face.js measured. scripts/card_font_metrics.py builds both.
  The vertical metrics are pinned to the font's own (hhea) so Windows and Android set a line where macOS does.
*/
@font-face { font-family: "MMC Gill"; font-weight: 700; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 29.8%; line-gap-override: 0%; src: url(/cards/fonts/GilliusADF-Bold.woff2?v=cd396d95fe) format("woff2"); }
@font-face { font-family: "MMC Gill"; font-weight: 700; font-style: italic; font-display: swap; ascent-override: 95%; descent-override: 29.8%; line-gap-override: 0%; src: url(/cards/fonts/GilliusADF-BoldItalic.woff2?v=e119e443e8) format("woff2"); }
@font-face { font-family: "MMC Gill Cond"; font-weight: 700; font-style: normal; font-display: swap; ascent-override: 95%; descent-override: 29.8%; line-gap-override: 0%; src: url(/cards/fonts/GilliusADFCond-Bold.woff2?v=6d612d2018) format("woff2"); }

.mk {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background-size: 100% 100%;
  color: var(--mk-ink);
  font-family: "MMC Gill", "Gill Sans", "Gill Sans MT", system-ui, sans-serif;
  font-weight: 700; font-kerning: none; font-synthesis: none; letter-spacing: 0;
}
/* holo.css turns every descendant of the rotator into a full-size grid layer; undo that inside the face */
.mk * {
  display: block; grid-area: auto; width: auto; height: auto; aspect-ratio: auto;
  border-radius: 0; overflow: visible; transform-style: flat; min-width: 0;
}
.mk > span { position: absolute; display: flex; align-items: center; min-width: 0; }
.mk-top > span { display: flex; align-items: center; }

/*
  Legibility (2026-09-30 review): the frames are busy — a rainbow maze on rares, glitter on epics, an iridescent
  fingerprint on mythics — so every text sits on a panel. --mk-scrim is the light pill under the small labels (name,
  Fame, site), --mk-well the panel under the description; both take the rarity's hue, dark under a white ink
  (rare, epic, mythic) and pale under a dark one (common, legendary). Contrast, measured under each text with
  scripts/card_contrast.mjs: description >= 4.5:1, every other label >= 3:1, on every rarity.
*/
.mk-common { --mk-ink: #141a1c; --mk-soft: #141a1c; --mk-scrim: rgba(242, 247, 244, .8); --mk-well: rgba(242, 247, 244, .86); }
.mk-rare { --mk-ink: #ffffff; --mk-soft: #ffffff; --mk-scrim: rgba(5, 24, 66, .66); --mk-well: rgba(5, 24, 66, .78); }
.mk-epic { --mk-ink: #ffffff; --mk-soft: #ffffff; --mk-scrim: rgba(30, 6, 66, .68); --mk-well: rgba(30, 6, 66, .8); }
.mk-legendary { --mk-ink: #1d1200; --mk-soft: #1d1200; --mk-scrim: rgba(255, 247, 219, .82); --mk-well: rgba(255, 248, 224, .88); }
.mk-mythic { --mk-ink: #ffffff; --mk-soft: #ffffff; --mk-scrim: rgba(8, 16, 58, .7); --mk-well: rgba(8, 16, 58, .82); }
.mk-rare .mk-body, .mk-epic .mk-body, .mk-mythic .mk-body { text-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .45); }

/* The frame's own mid-tone under each one, painted before the image arrives: a card turned over on a cold cache
   shows its rarity's colour, never the dark card behind it. */
.mk-common { background-color: #cfd9d4; }
.mk-rare { background-color: #1f4fa8; }
.mk-epic { background-color: #5b2aa0; }
.mk-legendary { background-color: #e2b547; }
.mk-mythic { background-color: #22307a; }
.mk-common { background-image: url(/cards/frames/common.webp); }
.mk-rare { background-image: url(/cards/frames/rare.webp); }
.mk-epic { background-image: url(/cards/frames/epic.webp); }
.mk-legendary { background-image: url(/cards/frames/legendary.webp); }
.mk-mythic { background-image: url(/cards/frames/mythic.webp); }
.mk-logo-common { --mk-ar: 953 / 180; background-image: url(/cards/logos/common.webp); }
.mk-logo-rare { --mk-ar: 627 / 180; background-image: url(/cards/logos/rare.webp); }
.mk-logo-epic { --mk-ar: 612 / 180; background-image: url(/cards/logos/epic.webp); }
.mk-logo-legendary { --mk-ar: 858 / 180; background-image: url(/cards/logos/legendary.webp); }
.mk-logo-mythic { --mk-ar: 851 / 180; background-image: url(/cards/logos/mythic.webp); }
/* English wordmarks (the French ones above are the default, `mk-logo-fr` adds nothing). */
.mk-logo-en.mk-logo-common { --mk-ar: 953 / 180; background-image: url(/cards/logos/en/common.webp); }
.mk-logo-en.mk-logo-rare { --mk-ar: 627 / 180; background-image: url(/cards/logos/en/rare.webp); }
.mk-logo-en.mk-logo-epic { --mk-ar: 612 / 180; background-image: url(/cards/logos/en/epic.webp); }
.mk-logo-en.mk-logo-legendary { --mk-ar: 858 / 180; background-image: url(/cards/logos/en/legendary.webp); }
.mk-logo-en.mk-logo-mythic { --mk-ar: 851 / 180; background-image: url(/cards/logos/en/mythic.webp); }

/* top row: type pill, name, rarity logo, Fame, star circle */
/* The widths here are the ones face.js budgets the name with (MK_TOP, MK_TYPE, MK_LOGO_H, MK_FAME, MK_STAR). */
.mk-top { left: 6.4%; top: 3.3%; width: 87.4%; height: 6%; gap: 1.1cqw; }
.mk-type {
  position: static; flex: none; font-weight: 700; font-style: italic; font-size: 1.9cqw; line-height: 1; letter-spacing: .03em;
  text-transform: uppercase; color: #3b4148; white-space: nowrap; padding: .7cqw 1.35cqw .6cqw; border-radius: 99px;
  background: linear-gradient(180deg, #ffffff, #d7dbe1 55%, #f2f4f6);
  box-shadow: 0 0 0 .35cqw #8d949d, 0 .5cqw .8cqw rgba(0, 0, 0, .35);
}
/*
  The name: face.js has sized it to its room (font-size in the markup), on one line or, with .two, on two balanced
  ones. overflow stays hidden all the same, the last guard should a font come out wider than its measures.
*/
.mk-top > .mk-name {
  display: grid; align-content: center; flex: 0 1 auto; box-sizing: border-box; height: 7.4cqw; padding: 0 1.1cqw;
  font-family: "MMC Gill Cond", "Gill Sans", "Gill Sans MT", system-ui, sans-serif; font-weight: 700;
  line-height: 1; color: var(--mk-ink); white-space: nowrap; overflow: hidden;
  border-radius: 1.4cqw; background: var(--mk-scrim);
}
.mk-top > .mk-name.two { line-height: 1.04; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
.mk-rare .mk-name, .mk-epic .mk-name, .mk-mythic .mk-name { text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5); }
.mk-top > .mk-logo {
  display: block; flex: none; align-self: center; height: 3.4cqw; aspect-ratio: var(--mk-ar); width: auto; margin-left: auto;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .35));
}
.mk-fame {
  flex: none; align-items: baseline; gap: .6cqw; color: var(--mk-ink); white-space: nowrap;
  padding: .4cqw 1cqw .2cqw; border-radius: 99px; background: var(--mk-scrim);
}
.mk-fame small { font-weight: 700; font-size: 2.3cqw; line-height: 1; }
.mk-fame b { font-weight: 700; font-size: 4.8cqw; line-height: 1; }
.mk-rare .mk-fame, .mk-epic .mk-fame, .mk-mythic .mk-fame { text-shadow: 0 .3cqw 1cqw rgba(0, 0, 0, .5); }
.mk-star {
  flex: none; width: 4.8cqw; height: 4.8cqw; justify-content: center; border-radius: 50%; font-size: 2.9cqw;
  font-family: system-ui, sans-serif;
  color: #1b1f24; background: radial-gradient(circle at 35% 30%, #ffffff, #d6dae0 60%, #aab1ba);
  box-shadow: 0 0 0 .35cqw #8d949d, 0 .5cqw .8cqw rgba(0, 0, 0, .35);
}

/* the meme art, in the frame's window; the dark ground shows through when the image is missing */
.mk-art { left: 7%; top: 10%; width: 86%; height: 42.1%; border-radius: .6cqw; overflow: hidden; background: #1c2029; }
/* Pinned to the window's four sides rather than sized in percent: a moving copy sits in a <picture> with
   display: contents, and Safari on iPhone resolved the img's 100% height against that box as auto, so a
   landscape animation drew as a band across a Full Art card (01/10/2026, Pop Cat). */
.mk-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-art picture { display: contents; }
.mk-art[style*="background-image"] { background-size: cover; background-repeat: no-repeat; }
/* Full Art and Shiny stay recognisable: a badge over the art */
.mk-badge {
  position: absolute; left: 2cqw; top: 2cqw; font-size: 2.8cqw; font-weight: 700; color: #1a1300;
  background: #ffd84a; border-radius: 99px; padding: .3cqw 1.8cqw;
}

.mk-strip {
  left: 7%; top: 52.9%; width: 86%; height: 2.7%; justify-content: center; font-size: 3.1cqw; line-height: 1;
  color: #1f242b; white-space: nowrap; overflow: hidden;
}
.mk-body {
  box-sizing: border-box; left: 7%; top: 57.3%; width: 86%; height: 25.2%; padding: 2.6cqw 3.2cqw;
  border-radius: 2.4cqw; background: var(--mk-well); flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 1.6cqw;
  box-shadow: inset 0 .7cqw 1.6cqw rgba(0, 0, 0, .28), inset 0 -.2cqw 0 rgba(255, 255, 255, .18), 0 .3cqw 0 rgba(255, 255, 255, .35);
}
/*
  The description, as the flavour text of a Pokémon card: bold italic, sized by face.js between 4.2 and 3.1 cqw to
  fill its well without leaving it (3.1 is 9.3 px on a 300 px card sheet), and cut at a sentence past that.
  The inner box is 79.6 × 29.6 cqw (MK_DESC in face.js): the well's 86% × 25.2% less its padding.
*/
.mk-desc {
  font-size: 3.8cqw; line-height: 1.24; font-style: italic; font-weight: 700; color: var(--mk-soft);
  overflow: hidden; overflow-wrap: anywhere; max-height: 100%;
}
/*
  « Proposée par @natsu »: the player who suggested the card. Same bold italic as the description (face.js fits
  them as one run), so nothing here may change a glyph's width: no size, no tracking, no extra character. The handle
  is a band of gold light sweeping across, on a slow loop; reduced motion keeps the gold, still.
*/
.mk-by, .mk-by b { display: inline; } /* `.mk *` makes every layer a block: the credit runs on with the text */
.mk-by b {
  font-weight: inherit; color: #ffd76a; text-shadow: none;
  background: linear-gradient(100deg, #ffb347 0%, #ffe9a8 22%, #fff 30%, #ffe9a8 38%, #ff7ab6 62%, #ffb347 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .9cqw rgba(255, 196, 92, .55));
  animation: mk-by-shine 3.2s ease-in-out infinite;
}
@keyframes mk-by-shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mk-by b { animation: none; background-position: 30% 0; } }
.mk-plate { top: 83.7%; height: 3.6%; justify-content: space-between; padding-inline: 2.6cqw 3.6cqw; color: #1a1f26; white-space: nowrap; }
.mk-plate small { font-size: 2.8cqw; font-weight: 700; }
.mk-plate b { font-size: 3cqw; font-weight: 700; }
.mk-pr b { font-family: system-ui, sans-serif; font-size: 2.6cqw; letter-spacing: .04em; }
.mk-pl { left: 6.8%; width: 40%; }
.mk-pr { left: 52.2%; width: 40%; }
.mk-site {
  left: 5%; top: 90.2%; width: 26%; height: 4%; justify-content: center; font-size: 2.6cqw; font-style: italic;
  color: var(--mk-ink); white-space: nowrap; overflow: hidden; border-radius: 99px; background: var(--mk-scrim);
}
.mk-set {
  left: 40%; top: 90.2%; width: 50%; height: 4%; justify-content: center; font-style: italic;
  font-size: 2.9cqw; color: #fff; white-space: nowrap; overflow: hidden; border-radius: 99px; background: rgba(8, 12, 26, .62);
}

/*
  Reflections. Two layers, and the pointer fades from one to the other:
  .mk::before is the prototype's shine per rarity, opened by --card-opacity, and .card__shine carries
  the resting shimmer of legendary and mythic cards, which closes as the shine opens.
  Shiny and Full Art define no --mk-shine: they keep their own treatment below.
*/
.mk::before, .mk::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
}
.mk::before {
  background-image: var(--mk-shine, none); background-size: 260% 260%;
  background-position: var(--pointer-x, 50%) var(--pointer-y, 50%);
  mix-blend-mode: soft-light; opacity: calc(var(--mk-shine-on, 0) * var(--card-opacity, 0));
}
.mk::after {
  background-image: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 30%, rgba(0, 0, 0, .15) 75%);
  mix-blend-mode: overlay; opacity: calc(.75 * var(--card-opacity, 0));
}
.card.f-common .mk { --mk-shine-on: .5; --mk-shine: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .8) 46%, rgba(255, 255, 255, 0) 58%); }
.card.f-rare .mk { --mk-shine-on: .6; --mk-shine: linear-gradient(115deg, rgba(255, 255, 255, 0) 28%, rgba(190, 225, 255, .85) 44%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, 0) 60%); }
.card.f-epic .mk { --mk-shine-on: .7; --mk-shine: repeating-linear-gradient(115deg, rgba(214, 164, 255, 0) 0%, rgba(230, 200, 255, .8) 3%, rgba(255, 255, 255, .9) 4.5%, rgba(138, 61, 255, 0) 8%); }
.card.f-legendary .mk { --mk-shine-on: .85; --mk-shine: repeating-linear-gradient(115deg, rgba(255, 227, 122, 0) 0%, rgba(255, 225, 120, .85) 4%, rgba(255, 255, 235, 1) 6%, rgba(255, 176, 32, .5) 8%, rgba(255, 227, 122, 0) 12%); }
.card.f-mythic .mk { --mk-shine-on: .9; --mk-shine: repeating-linear-gradient(115deg, #ff7eb3 0%, #ffe57a 5%, #7affc8 10%, #7ab8ff 15%, #c77aff 20%, #ff7eb3 25%); }
/* legendary and mythic shimmer at rest */
.card.f-legendary .card__shine, .card.f-mythic .card__shine {
  background-image: var(--mk-shine); background-size: 260% 260%; mix-blend-mode: soft-light;
  opacity: calc(.3 * (1 - var(--card-opacity, 0)));
}
@media (prefers-reduced-motion: no-preference) {
  .card.f-legendary .card__shine, .card.f-mythic .card__shine { animation: mk-sweep 7s ease-in-out infinite alternate; }
}
@keyframes mk-sweep { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/*
  Shiny: the onyx card. The rarity frame disappears under a black plate engraved with gold rings
  (the two repeating radial gradients), the rim and the pills stay gold (styles.css), the meme art
  goes grey behind a gold ring, and the light follows the pointer variables holo.js sets on .card.
  The plate rides .mk-tex, which is free here: the per-rarity textures key off .card.f-<rarity>, and
  a shiny card carries .card.f-shiny instead. It is the face's first child, so it stays under the
  art and every text.
  No filter on .mk itself: it would drag the whole subtree, gold included, back to grey.
*/
.card.f-shiny .mk { --mk-ink: #f1f2f4; --mk-soft: #d4d8de; --mk-well: rgba(0, 0, 0, .5); --mk-scrim: rgba(0, 0, 0, .5); }
.card.f-shiny .mk-tex {
  background:
    repeating-radial-gradient(ellipse 140% 90% at 88% 12%, transparent 0 5.2cqw, rgba(233, 193, 90, .42) 5.2cqw 5.7cqw),
    repeating-radial-gradient(ellipse 110% 140% at 8% 98%, transparent 0 6.4cqw, rgba(233, 193, 90, .3) 6.4cqw 6.9cqw),
    linear-gradient(170deg, rgba(27, 28, 32, .95), rgba(10, 10, 12, .98) 70%);
}
.card.f-shiny .mk-art { box-shadow: inset 0 0 0 1.2cqw rgba(233, 193, 90, .5); filter: grayscale(1) contrast(1.15) brightness(.72); }
/* the rarity logo is a coloured image: grey it so it reads as engraved metal on the onyx */
.card.f-shiny .mk-logo { filter: grayscale(1) brightness(1.3) drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .6)); }
.card.f-shiny .mk-type, .card.f-shiny .mk-star {
  color: #1a1508; box-shadow: 0 0 0 .35cqw #8a6a1c, 0 .5cqw .8cqw rgba(0, 0, 0, .5);
}
.card.f-shiny .mk-type { background: linear-gradient(180deg, #f7e3a6, #d7a93c 55%, #f0d489); }
.card.f-shiny .mk-star { background: radial-gradient(circle at 35% 30%, #fff6d8, #e9c15a 60%, #b98e2e); }
.card.f-shiny .mk-fame b, .card.f-shiny .mk-plate b, .card.f-shiny .mk-set { color: #f3d27a; }
.card.f-shiny .mk-strip, .card.f-shiny .mk-plate, .card.f-shiny .mk-fame small { color: #d4d8de; }
.card.f-shiny .mk-body {
  box-shadow: inset 0 0 0 .25cqw rgba(233, 193, 90, .3), inset 0 .7cqw 1.6cqw rgba(0, 0, 0, .5);
}
.card.f-shiny .mk-badge { background: #e9c15a; }
.card.f-shiny .mk::before {
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 248, 224, .5) 0%, rgba(233, 193, 90, .22) 20%, transparent 46%);
  mix-blend-mode: screen; opacity: 1;
}
.card.f-shiny .mk::after {
  background:
    radial-gradient(circle at 18% 22%, #ffefc0 0 1.2px, transparent 2px),
    radial-gradient(circle at 76% 14%, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 58%, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 30% 80%, #ffefc0 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 86%, #fff 0 1.2px, transparent 2px);
  mix-blend-mode: normal; opacity: 1; animation: mk-twinkle 2.4s ease-in-out infinite alternate;
}
@keyframes mk-twinkle { from { opacity: .25; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .card.f-legendary .card__shine, .card.f-mythic .card__shine, .card.f-shiny .mk::after { animation: none; }
}

/*
  Small thumbnails (stakes, a staked card): under 130 px the description is under 5 px tall and the plates
  with it, so both go, and the lines around them. The name, the art and the rarity logo never do. Under
  110 px only they are left. A collection tile (150 px and up) keeps its whole face: bare plates read as broken.
*/
@container (max-width: 130px) {
  .mk > .mk-body, .mk > .mk-plate, .mk > .mk-strip, .mk > .mk-site, .mk > .mk-set, .mk-top > .mk-type { display: none; }
}
@container (max-width: 110px) {
  .mk-top > .mk-fame, .mk-top > .mk-star { display: none; }
}

/*
  Textures, one per rarity, taken from the holo patterns of the launch cards (/holo/img, GPL-3.0 like the rest of
  /holo): printed grain on commons, a rainbow maze on rares, glitter on epics and legendaries, an iridescent
  fingerprint on mythics. They sit on the frame, under the art and the text, and wake up with the pointer.
  Shiny and Full Art cards keep their own treatment.
*/
.mk-tex { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.card.f-common .mk-tex { background: url(/holo/img/grain.webp) 0 0 / 60cqw; mix-blend-mode: soft-light; opacity: .45; }
.card.f-rare .mk-tex {
  background-image: url(/holo/img/geometric.png), linear-gradient(115deg, #ff7eb3, #ffe57a, #7affc8, #7ab8ff, #c77aff, #ff7eb3); background-size: 16cqw, 300% 300%;
  background-position: 0 0, var(--pointer-x, 50%) var(--pointer-y, 50%); background-blend-mode: multiply;
  mix-blend-mode: color-dodge; opacity: calc(.28 + .27 * var(--card-opacity, 0));
}
.card.f-epic .mk-tex, .card.f-legendary .mk-tex {
  background-image: url(/holo/img/glitter.png), radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #fff8d8 0%, #ffe9a0 25%, #b08a40 60%, #3a2c10 100%);
  background-size: 45cqw, 100% 100%; background-blend-mode: multiply;
  mix-blend-mode: color-dodge; opacity: calc(.5 + .4 * var(--card-opacity, 0));
}
.card.f-mythic .mk-tex {
  background-image: url(/holo/img/illusion-mask.png), linear-gradient(115deg, #ff7eb3, #ffe57a, #7affc8, #7ab8ff, #c77aff, #ff7eb3); background-size: 70cqw, 300% 300%;
  background-position: center, var(--pointer-x, 50%) var(--pointer-y, 50%); background-blend-mode: multiply;
  mix-blend-mode: color-dodge; opacity: calc(.18 + .22 * var(--card-opacity, 0));
}

/*
  Full Art (variant 2, class mk-fa). The promise the home pages make — "the art covers the whole card" —
  taken literally: no rarity frame, no art window. Two layers of the same image, because the art is
  landscape (640×360) and the card portrait: .mk-tex blows it up, blurs it and darkens it to fill the card
  edge to edge, and .mk-art lays it sharp and nearly full width over that ground, at its own aspect ratio,
  so nothing of the meme is cropped away. The card's own background is the iridescent gradient of
  .pill.r-fullart, which the layers leave showing as a rim.
  Every text keeps the place it has on the normal face, on two panels of dark glass so it reads over any image.
*/
.mk.mk-fa {
  --mk-ink: #ffffff; --mk-soft: #eef2ff; --mk-scrim: transparent;
  background-image: linear-gradient(135deg, #ff8ad8, #8f6bff 45%, #3fd3ff);
}
/* the blurred ground: the pseudo-element carries the blur, so .mk-tex can clip its soft edges away */
.mk-fa > .mk-tex { inset: 1.1cqw; border-radius: 3.2cqw; overflow: hidden; }
.mk-fa > .mk-tex::after {
  content: ""; position: absolute; inset: 0;
  background: var(--mk-img) center / cover no-repeat;
  filter: blur(2.4cqw) saturate(1.3) brightness(.68);
  transform: scale(1.25);
}
/* the sharp art: 97.2% × 38% is the 640×360 ratio at this width, so `cover` crops next to nothing */
.mk-fa > .mk-art {
  left: 1.4%; top: 11.6%; width: 97.2%; height: 38%; border-radius: 2.4cqw; background: none;
  box-shadow: 0 .5cqw 2cqw rgba(0, 0, 0, .45);
}
.mk-fa .mk-badge { background: linear-gradient(90deg, #ff8ad8, #8f6bff, #3fd3ff); color: #fff; }

/* the two glass panels: the top row, and the band the strip, the description and the plates sit on */
.mk-fa > .mk-top, .mk-fa > .mk-fa-band {
  box-sizing: border-box; border-radius: 2.6cqw; background: rgba(8, 10, 18, .82);
  box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .16), 0 .4cqw 1.4cqw rgba(0, 0, 0, .3);
}
/* where backdrop-filter exists the glass thins out and lets the art through; the rule above is the fallback */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mk-fa > .mk-top, .mk-fa > .mk-fa-band {
    background: rgba(8, 10, 18, .68);
    -webkit-backdrop-filter: blur(1.6cqw) saturate(1.3); backdrop-filter: blur(1.6cqw) saturate(1.3);
  }
}
.mk-fa > .mk-top { left: 2.4%; top: 2.2%; width: 95.2%; height: 8.8%; padding-inline: 2.2cqw; }
.mk-fa > .mk-fa-band { left: 2.4%; top: 50.6%; width: 95.2%; height: 47.4%; }
.mk-fa > .mk-body { background: none; box-shadow: none; }
.mk-fa > .mk-strip { color: #e6eaff; }
.mk-fa > .mk-plate { color: #f2f5ff; }
.mk-fa > .mk-set { left: 30%; width: 62%; }
.mk-fa .mk-name, .mk-fa .mk-fame, .mk-fa > .mk-strip, .mk-fa .mk-desc, .mk-fa > .mk-plate, .mk-fa > .mk-site, .mk-fa > .mk-set {
  text-shadow: 0 .25cqw 1cqw rgba(0, 0, 0, .7);
}
/* the rainbow that follows the pointer, over the whole card (holo.js sets the variables on .card) */
.card.f-fullart .mk {
  --mk-shine-on: .8;
  --mk-shine: repeating-linear-gradient(115deg, #ff7eb3 0%, #ffe57a 5%, #7affc8 10%, #7ab8ff 15%, #c77aff 20%, #ff7eb3 25%);
}
/* a thumbnail that drops its lower texts has nothing to lay on the band: the art takes the room instead */
@container (max-width: 130px) {
  .mk-fa > .mk-fa-band { display: none; }
  .mk-fa > .mk-art { top: 13%; height: 62%; }
}

/*
  Full Art cards (class mk-full, `fullArt` in cards.json), drawn after a Pokémon Special Illustration Rare:
  the illustration is the card, and it stays readable because next to nothing is laid on it. No rarity frame,
  no art window, no description — two thin bands of glass and that is the whole face. Their heights add up to
  15% of the card, so the illustration is seen over 85% of it, and the glass is translucent even there.
  The markup is mmcFullArtFace in face.js, not the normal face: the classes below only ever meet its children.
*/
.mk.mk-full { --mk-ink: #ffffff; background-image: none; background-color: #0a0c12; }
/* the illustration, edge to edge, cropped at the card's own focus (the img carries object-position) */
.mk-full > .mk-art {
  left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; background-color: #0a0c12;
  box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .26);
}
/* the two bands: dark glass, so a white text reads over a pale illustration as well as a dark one */
.mk-full > .mk-top, .mk-full > .mk-foot {
  box-sizing: border-box; border-radius: 2.4cqw; background: rgba(6, 8, 14, .6);
  box-shadow: inset 0 0 0 .25cqw rgba(255, 255, 255, .18), 0 .4cqw 1.4cqw rgba(0, 0, 0, .35);
}
/* where backdrop-filter exists the glass thins out and lets the art through; the rule above is the fallback */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mk-full > .mk-top, .mk-full > .mk-foot {
    background: rgba(6, 8, 14, .54);
    -webkit-backdrop-filter: blur(1.4cqw) saturate(1.25); backdrop-filter: blur(1.4cqw) saturate(1.25);
  }
}
.mk-full > .mk-top { left: 3%; top: 2.4%; width: 94%; height: 8.6%; padding-inline: 2.6cqw; gap: 1.6cqw; }
/* MK_FULL in face.js: the band's 12 cqw less a margin, and the name as large as 5.4 */
.mk-full > .mk-top > .mk-name { height: 10.4cqw; padding: 0; background: none; }
/* the card's identity, one short line: N° 301/300 · Full Art · the set */
.mk-full > .mk-foot {
  left: 3%; top: 91%; width: 94%; height: 6.4%; justify-content: center; font-size: 2.6cqw;
  letter-spacing: .01em; color: #e9edff; white-space: nowrap; overflow: hidden;
}
/* the rarity is the card's own — FULL ART, never the base card's Commune or Rare — in gold turning iridescent */
.mk-full .mk-rar {
  flex: none; font-size: 2.8cqw; font-weight: 700; font-style: italic; letter-spacing: .06em; margin-left: auto;
  text-transform: uppercase; white-space: nowrap;
  background: linear-gradient(95deg, #ffe9a8, #ffc23d 28%, #ff9ee0 62%, #8fe8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .2cqw .5cqw rgba(0, 0, 0, .7));
}
.mk-full .mk-fame small { font-size: 2.2cqw; }
.mk-full .mk-fame b { font-size: 4.6cqw; }
.mk-full .mk-name, .mk-full .mk-fame, .mk-full > .mk-foot { text-shadow: 0 .25cqw 1cqw rgba(0, 0, 0, .8); }
/* a thumbnail: the identity line is under 6 px tall there, so the art takes the whole tile instead */
@container (max-width: 130px) {
  .mk-full > .mk-foot { display: none; }
}
/* under 110 px the top band keeps the name alone (the generic rule above already drops the Fame) */
@container (max-width: 110px) {
  .mk-full .mk-rar { display: none; }
}

/*
  A limited edition card (docs/editions-limitees.md, class mk-edi): the printing carries its own holographic
  frame, in every variant — a card pulled from an edition looks like one even when it is neither shiny nor Full
  Art. Two parts, and both ride the pointer variables holo.js already sets on .card, so an edition adds no
  animation loop of its own: the rarity shine layer (.mk::before) is repainted with a rainbow foil, and
  .mk-holo draws the rim. Nothing moves at rest — --card-opacity is 0 until a pointer touches the card, which
  is also what holo.js leaves for someone who asked for reduced motion.
  The rarity variables are set on `.card.f-<rarity> .mk`, so overriding them takes one class more.
*/
.card .mk.mk-edi {
  --mk-edi-foil: linear-gradient(115deg, #ff7eb3 0%, #ffe57a 18%, #7affc8 36%, #7ab8ff 54%, #c77aff 72%, #ff7eb3 90%);
  --mk-shine-on: .9;
  --mk-shine: repeating-linear-gradient(115deg, rgba(255, 126, 179, 0) 0%, rgba(255, 229, 122, .8) 4%, rgba(122, 255, 200, .9) 7%, rgba(122, 184, 255, .8) 10%, rgba(199, 122, 255, 0) 15%);
}
/*
  The rim. The foil fills the whole card and the mask keeps only the .9cqw ring the padding leaves, so the art
  underneath keeps its own colours; the ring slides with the tilt (--background-x/y) like the other foils.
*/
.mk-holo {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  padding: .9cqw;
  background: var(--mk-edi-foil);
  background-size: 260% 260%;
  background-position: var(--background-x, 50%) var(--background-y, 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: calc(.6 + .4 * var(--card-opacity, 0));
}
/* the set line names the edition: foil there too, so the printing reads on a still screenshot */
.mk-edi > .mk-set, .mk-edi > .mk-foot {
  background: var(--mk-edi-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .2cqw .4cqw rgba(0, 0, 0, .7));
}
/* a thumbnail is barely 110 px of art: a .9cqw rim would eat the frame it is meant to draw */
@container (max-width: 130px) {
  .mk-holo { padding: .5cqw; }
}

/*
  The edition's one-of-a-kind card (`jackpot`, docs/editions-limitees.md): gold where the others are rainbow — the
  rim, the 1/1 plate and the foot line all read --mk-edi-foil — and a rim that turns on its own, slowly, so the
  card stands out on a still screen and in a grid. Nobody who asked for reduced motion sees it move.
*/
.card .mk.mk-jackpot {
  --mk-edi-foil: linear-gradient(115deg, #fff6c9 0%, #ffc23d 18%, #ff9a2e 32%, #fff6c9 48%, #ffd45c 64%, #c8901a 80%, #fff6c9 100%);
  --mk-shine: repeating-linear-gradient(115deg, rgba(255, 214, 92, 0) 0%, rgba(255, 246, 201, .85) 5%, rgba(255, 194, 61, .9) 8%, rgba(255, 154, 46, 0) 14%);
}
.mk-jackpot > .mk-holo {
  padding: 1.3cqw; opacity: 1;
  box-shadow: inset 0 0 2.4cqw rgba(255, 194, 61, .55);
  animation: mk-jackpot-rim 5s linear infinite;
}
@keyframes mk-jackpot-rim {
  from { background-position: 0% 50%; }
  to { background-position: 260% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-jackpot > .mk-holo { animation: none; }
}
.mk-jackpot .mk-rar { background: var(--mk-edi-foil); -webkit-background-clip: text; background-clip: text; font-style: normal; letter-spacing: .02em; }
@container (max-width: 130px) {
  .mk-jackpot > .mk-holo { padding: .8cqw; }
}