:root {
    --common: #75818f;
    --uncommon: #257b53;
    --rare: #315bcf;
    --epic: #7543c5;
    --legendary: #a96812;
    --unique: #c02977;
    --mythical: #a7192f;
    --celestial: #665bd1;
    --gilded: #d4a23a;
    --abyssal: #0b5a70;
    --overgrown: #3f8f2c;
    --inkbound: #1d1b22;
    --stormforged: #2d63e8;
    --blueprint: #1f56a8;
    --glitched: #0d0d0f;
    --counterfeit: #9ba360;
    --special: #0f9f96;
}

.trading-card {
    --rarity-color: var(--common);
    box-sizing: border-box;
    isolation: isolate;
    container-type: inline-size;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 5.076142% minmax(0, 1fr) auto auto auto 4.568528%;
    width: min(76vw, 340px);
    aspect-ratio: 4 / 7;
    overflow: hidden;
    border: 2px solid #25252d;
    border-radius: 11px;
    background: #fff;
    box-shadow: 5px 5px 0 var(--rarity-color), 7px 7px 0 #25252d;
    color: #25252d;
    text-align: left;
}
/* Keep printed typography and spacing at the same proportions as the 340px
   reference card (336px inside its frame), including zoomed collection cards.
   Only descendants consume this unit: cqw then refers to their own card/caption. */
.trading-card, .collectible-caption { --card-print-unit: calc(100cqw / 336); }
.rarity-common { --rarity-color: var(--common); }
.rarity-uncommon { --rarity-color: var(--uncommon); }
.rarity-rare { --rarity-color: var(--rare); }
.rarity-epic { --rarity-color: var(--epic); }
.rarity-legendary { --rarity-color: var(--legendary); }
.rarity-unique { --rarity-color: var(--unique); }
.rarity-mythical { --rarity-color: var(--mythical); }
.rarity-celestial { --rarity-color: var(--celestial); }
.rarity-gilded { --rarity-color: var(--gilded); }
.rarity-abyssal { --rarity-color: var(--abyssal); }
.rarity-overgrown { --rarity-color: var(--overgrown); }
.rarity-inkbound { --rarity-color: var(--inkbound); }
.rarity-stormforged { --rarity-color: var(--stormforged); }
.rarity-blueprint { --rarity-color: var(--blueprint); }
.rarity-glitched { --rarity-color: var(--glitched); }
.rarity-counterfeit { --rarity-color: var(--counterfeit); }
.rarity-special { --rarity-color: var(--special); }

.trading-card.rarity-unique:not(.full-card-image) {
    overflow: visible;
    border-color: #ff3cac;
    background: linear-gradient(150deg, #fff 65%, #e9fff8);
    box-shadow: 5px 5px 0 #ff3cac, 7px 7px 0 #17131f, 0 0 26px #4deeea55;
}
.trading-card.rarity-unique:not(.full-card-image) > .card-rarity,
.collectible-caption.rarity-unique > .card-rarity {
    background: linear-gradient(110deg, #17131f, #ff3cac 60%, #4deeea);
    color: #fff;
}
.trading-card.rarity-unique:not(.full-card-image) > .card-rarity { border-radius: 8px 8px 0 0; }
.trading-card .card-rarity-effect[data-effect=unique-energy] { overflow: visible; }
.trading-card.rarity-unique > .card-inspector-glare { border-radius: inherit; }
/* Image-only cards keep the effect inside their existing alpha mask. */
.trading-card.full-card-image .card-rarity-effect[data-effect=unique-energy]:not([data-unique-ready]) { overflow: hidden; }
.trading-card.full-card-image .card-rarity-effect[data-effect=unique-energy] > .rfx-layer { box-shadow: none; }
.trading-card.full-card-image .card-rarity-effect[data-effect=unique-energy] > .rfx-layer::before {
    inset: 0; padding: 0; mask: none; opacity: .18;
    background: linear-gradient(120deg, #ff3cac, transparent 35% 60%, #4deeea);
    background-size: 200% 200%;
}
.trading-card .card-rarity-effect[data-effect=prismatic] { z-index: 6; }
.card-footer:has(.card-finish-label) { justify-content: space-between; }
.card-finish-label {
    font: 800 calc(9 * var(--card-print-unit, 1px))/1.2 ui-sans-serif, sans-serif;
    letter-spacing: .13em; text-transform: uppercase; color: #694577;
}
.card-signed-label { color: #25252d; letter-spacing: .06em; }
.trading-card.is-negative { filter: invert(1); }
.card-footer:has(.card-signed-label) { gap: calc(8 * var(--card-print-unit, 1px)); }
.card-footer:has(.card-signed-label) > :last-child:not(.card-finish-label) { margin-left: auto; }
.creator-card-badge { display: inline-flex; flex-shrink: 0; width: calc(15 * var(--card-print-unit, 1px)); height: calc(15 * var(--card-print-unit, 1px)); }
.creator-card-badge svg { width: 100%; height: 100%; }
/* Ink sits on the complete printed surface, including text and foil. It never animates. */
.trading-card .card-signature-layer, .collectible-caption .card-signature-layer { position: absolute; inset: 0; z-index: 8; overflow: hidden; border-radius: inherit; pointer-events: none; }
.trading-card .card-signature, .collectible-caption .card-signature { position: absolute; left: var(--signature-x); top: var(--signature-y); width: var(--signature-width, 80%); height: 29%; transform: translate(-50%, -50%) rotate(var(--signature-angle)); }
/* Marker ink is not quite opaque: where two strokes cross it reads darker. Its fraying,
   bleed and glint are the filter the signature's own SVG carries. */
.trading-card .card-signature-body, .collectible-caption .card-signature-body { opacity: .96; }

.trading-card.rarity-mythical:not(.full-card-image) {
    background: linear-gradient(145deg, #fff 0 72%, #ffe1dc 88%, #25060b);
    box-shadow: 6px 6px 0 var(--mythical), 9px 9px 0 #21070c, 0 0 24px #df263f73;
}
.trading-card.rarity-celestial:not(.full-card-image) {
    background: radial-gradient(circle at 82% 12%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 18% 72%, #fff 0 1px, transparent 2px),
        linear-gradient(145deg, #fff 0 68%, #e6e8ff 86%, #35256d);
    border-color: #8c94bb;
    box-shadow: 3px 3px 0 #665bd15c, 0 0 22px #90dfff33;
}
.trading-card .card-rarity-effect {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: auto;
    height: auto;
    overflow: hidden;
    border-radius: inherit;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
.trading-card .card-rarity-effect.rfx > .rfx-layer { z-index: 0; }
.trading-card .card-rarity-effect.rfx[data-shape="card"] {
    width: auto;
    height: auto;
    border: 0;
    border-radius: inherit;
}
/* A bright cosmic corona follows the whole card, with a clear center. */
.trading-card.rarity-celestial:not(.full-card-image) { overflow: visible; }
.trading-card.rarity-celestial:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-celestial > .card-inspector-glare { border-radius: inherit; }
/* A cut-out collectible mounts its surface inside the artwork box, which clips
   by default and was cropping the aura square across the subject. Those cards
   letterbox their artwork with object-fit: contain, so the clip was holding
   nothing back. The caption still paints above the spill on its own layer. */
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-celestial-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-mythical-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-gilded-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-abyssal-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-overgrown-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-ink-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-stormforged-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-blueprint-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-deepfried-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-unique-ready]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-prismatic-spill]),
.trading-card.full-card-image .card-art:has(> .card-rarity-effect[data-glitch-ready]) { overflow: visible; }

.trading-card .card-rarity-effect .rfx-fire {
    width: calc(100% + 80px);
    height: calc(100% + 100px);
    left: -40px;
    bottom: -30px;
}
/* Mythical fire extends beyond the frame; surface embers stay inside in the shader. */
/* The gold is in the frame the surface draws around the card, so the band
   does not compete with it: black lacquer with gold lettering, the way a case
   for something precious is finished. */
.trading-card.rarity-gilded > .card-rarity,
.collectible-caption.rarity-gilded > .card-rarity {
    background: linear-gradient(180deg, #231805, #0e0a03);
    box-shadow: inset 0 -1px 0 #c99a3a;
    color: #f0cf78;
}
/* The lettering is gold leaf: a metallic ramp clipped to the type, with the
   light drifting slowly across it. */
.trading-card.rarity-gilded > .card-rarity :is(.card-rarity-label, b),
.collectible-caption.rarity-gilded > .card-rarity :is(.card-rarity-label, b) {
    background: linear-gradient(100deg, #a8731a 0%, #f3dc98 24%, #fffaf0 32%, #e0b24a 44%, #93600f 62%, #edd083 82%, #a8731a 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gilded-leaf 7s ease-in-out infinite;
}
.trading-card.rarity-gilded > .card-rarity .card-rarity-label > *,
.collectible-caption.rarity-gilded > .card-rarity .card-rarity-label > * { color: #f0cf78; }
@keyframes gilded-leaf { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
/* Gilded spills like the other secret tiers: its surface reaches past the card,
   so the card stops clipping and the rarity band takes over the rounding that
   the clip used to provide. Without this the gilt is cut off square at the
   corners and the aura never leaves the frame. */
.trading-card.rarity-gilded:not(.full-card-image) {
    overflow: visible;
    border-color: #2a1d06;
    background: linear-gradient(160deg, #fff 0 58%, #fff8e7);
    /* The gold ring only shows where the shaded bezel cannot be drawn. */
    box-shadow: 0 0 0 3px #d4a23a, 0 14px 28px -10px #5a3d0a80;
}
.trading-card.rarity-gilded:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-gilded > .card-inspector-glare { border-radius: inherit; }
/* Abyssal: a card from the deep. The print sits on a cold stock that sinks
   into the dark towards the bottom corner like water with depth, and the
   band is the black of the abyss with the glow of the things that live in it. */
.trading-card.rarity-abyssal:not(.full-card-image) {
    overflow: visible;
    border-color: #01101a;
    background: linear-gradient(160deg, #eef5f6 0 48%, #cddfe2 70%, #7fa3ad 92%, #58808b);
    box-shadow: 6px 6px 0 var(--abyssal), 9px 9px 0 #01070d, 0 0 24px #2de0c230;
}
.trading-card.rarity-abyssal > .card-rarity,
.collectible-caption.rarity-abyssal > .card-rarity {
    background: linear-gradient(100deg, #000306 0%, #021521 45%, #05303f 75%, #0b5a70);
    color: #b9fbef;
    text-shadow: 0 0 6px #3ff5d899;
}
.trading-card.rarity-abyssal:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-abyssal > .card-inspector-glare { border-radius: inherit; }
/* Overgrown: a card left out for years. The stock has yellowed and the band
   has weathered to the colour of old bronze under moss; the surface draws the
   moss, the stains and the ivy on top. The artwork's own weathering is painted
   when it is made. It spills like the other secret tiers so the ivy can climb
   off it. */
.trading-card.rarity-overgrown:not(.full-card-image) {
    overflow: visible;
    border-color: #3d3a28;
    background: linear-gradient(170deg, #efe8d4 0 55%, #e4d9bb 82%, #cdbf97);
    box-shadow: 6px 6px 0 #4c5a2e, 9px 9px 0 #1c2410;
    color: #2f2c21;
}
.trading-card.rarity-overgrown .card-flavor { color: #5d5641; }
.trading-card.rarity-overgrown .card-modifiers span { border-color: #4a4632; background: #e3dbc2; }
.trading-card.rarity-overgrown > .card-rarity,
.collectible-caption.rarity-overgrown > .card-rarity {
    background: linear-gradient(100deg, #1e2614 0%, #33402a 45%, #4d5a34 80%, #5f6a3e);
    color: #e2e6c8;
    text-shadow: 0 1px 0 #0008;
}
.trading-card.rarity-overgrown:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-overgrown > .card-inspector-glare { border-radius: inherit; }
/* Inkbound: the whole card is paper and ink. Its artwork is painted in ink
   when it is made; everything around it is set the same way here, the band a
   stroke of the brush. */
.trading-card.rarity-inkbound:not(.full-card-image),
.collectible-caption.rarity-inkbound {
    border-color: #16151a;
    background-color: #f3eee1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    color: #16151a;
}
.trading-card.rarity-inkbound:not(.full-card-image) { overflow: visible; box-shadow: 5px 5px 0 #16151a; }
.trading-card.rarity-inkbound:not(.full-card-image) .card-art { border-bottom-color: #16151a; }
.trading-card.rarity-inkbound .card-modifiers span,
.collectible-caption.rarity-inkbound .card-modifiers span { border-color: #16151a; background: transparent; }
.trading-card.rarity-inkbound .card-flavor,
.collectible-caption.rarity-inkbound .card-flavor { color: #4a4750; }
.trading-card.rarity-inkbound .card-footer { border-top-color: #16151a33; }
.trading-card.rarity-inkbound > .card-rarity,
.collectible-caption.rarity-inkbound > .card-rarity {
    /* Dry brush: the stroke thins into streaks where the ink ran out. */
    background:
        repeating-linear-gradient(178deg, transparent 0 3px, #f3eee114 3px 4px, transparent 4px 7px),
        linear-gradient(90deg, #16151a 0 82%, #2b2a30 94%, #3d3b42);
    color: #f3eee1;
    letter-spacing: .08em;
}
.trading-card.rarity-inkbound:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-inkbound > .card-inspector-glare { border-radius: inherit; }
/* Stormforged: a card that took a bolt and still holds the charge. The stock
   is the cold white of a flash, the band is storm cloud, and its lettering
   burns like a filament that now and then stutters. The arcs, and the eyes
   in its artwork, are drawn by the surface and the prompt. It spills like
   the other secret tiers so the arcs can leap off it. */
.trading-card.rarity-stormforged:not(.full-card-image) {
    overflow: visible;
    border-color: #0a1238;
    background: linear-gradient(165deg, #f5f9ff 0 55%, #e4ecfb 80%, #cad8f6);
    box-shadow: 6px 6px 0 var(--stormforged), 9px 9px 0 #0a1238, 0 0 22px #7cc4ff40;
}
.trading-card.rarity-stormforged > .card-rarity,
.collectible-caption.rarity-stormforged > .card-rarity {
    background: linear-gradient(100deg, #03061a 0%, #0a1446 45%, #14268a 78%, #2d63e8);
    color: #e2f3ff;
    text-shadow: 0 0 4px #7cc4ff, 0 0 10px #2d63e8;
    animation: stormforged-filament 5.3s steps(1, end) infinite;
}
.trading-card.rarity-stormforged:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-stormforged > .card-inspector-glare { border-radius: inherit; }
@keyframes stormforged-filament {
    0%, 61%, 63.5%, 64.5%, 100% { color: #e2f3ff; text-shadow: 0 0 4px #7cc4ff, 0 0 10px #2d63e8; }
    62%, 64% { color: #8fa6d8; text-shadow: none; }
}
/* Blueprint: a card that is still a plan. Its artwork is a whole sheet of
   its own (every Blueprint card is made in the Blueprint format), so what is
   styled here is what goes with it: drafting paper, the blue of the sheet
   ruled in a fine grid, and a band lettered like a title block. Where a
   Blueprint card has the ordinary frame, in a preview, the frame is that
   paper too. It spills like the other secret tiers, so the draughtsman's
   lines can run off it. */
.trading-card.rarity-blueprint:not(.full-card-image),
.collectible-caption.rarity-blueprint {
    border-color: #0b2a5c;
    background:
        linear-gradient(#ffffff12 1px, transparent 1px) 0 0 / 100% calc(14 * var(--card-print-unit, 1px)),
        linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / calc(14 * var(--card-print-unit, 1px)) 100%,
        linear-gradient(165deg, #174a8f, #12407f 60%, #0e346b);
    color: #eaf5ff;
}
.trading-card.rarity-blueprint:not(.full-card-image) {
    overflow: visible;
    box-shadow: 6px 6px 0 var(--blueprint), 9px 9px 0 #0b2a5c;
}
.trading-card.rarity-blueprint:not(.full-card-image) .card-flavor,
.collectible-caption.rarity-blueprint .card-flavor { color: #bcd9f7; }
.trading-card.rarity-blueprint:not(.full-card-image) .card-art { border-bottom-color: #9fd0ff66; }
.trading-card.rarity-blueprint:not(.full-card-image) .card-modifiers span,
.collectible-caption.rarity-blueprint .card-modifiers span { border-color: #9fd0ff88; background: #ffffff14; }
.trading-card.rarity-blueprint:not(.full-card-image) .card-footer,
.collectible-caption.rarity-blueprint .card-footer { border-top-color: #9fd0ff55; }
.trading-card.rarity-blueprint > .card-rarity,
.collectible-caption.rarity-blueprint > .card-rarity {
    background: #0b2a5c;
    box-shadow: inset 0 -1px 0 #9fd0ff99;
    color: #eaf5ff;
    font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
    letter-spacing: .14em;
}
.trading-card.rarity-blueprint:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-blueprint > .card-inspector-glare { border-radius: inherit; }
/* Torn: a finish that leaves half a card. The renderer cuts the copy along its
   card's seam and draws what the tear left on it: the board showing white
   where the print lifted, the creases of the pull, and the tape that holds two
   halves together again. */
.trading-card .card-tear { position: absolute; inset: 0; z-index: 9; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trading-card .card-tear-pulp { fill: #fbf8f0; stroke: none; }
.trading-card .card-tear-shade { fill: none; stroke: #3b2a1a; stroke-width: 1; stroke-opacity: .32; stroke-linejoin: round; }
.trading-card .card-tear-crease { fill: none; stroke: #fffdf6; stroke-width: 1.6; stroke-opacity: .8; stroke-linecap: round; filter: drop-shadow(.8px .8px 0 #3b2a1a55); }
.trading-card .card-tape { fill: #f2e2a4; fill-opacity: .58; stroke: #b79a4e; stroke-width: .8; stroke-opacity: .55; stroke-linejoin: round; }
.trading-card .card-tape-gloss { fill: none; stroke: #fffbe6; stroke-width: 2.4; stroke-opacity: .4; stroke-linecap: round; }
/* Its picture before the fryer (`raw_image_url`), over the fried one it shows: only the reveal lifts it, while the card is still raw. */
.trading-card .card-art .card-raw-art { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
/* A copy that went into the fryer keeps its rarity and its words: the crust its oil leaves round it stays under
   the band, which still says what it is, and under its name and text. */
.trading-card.is-deep-fried > :is(.card-rarity, .card-copy, .card-flavor) { position: relative; z-index: 6; }
/* ?: a card that should not have been in the booster. It is printed on black
   like a tape with no label, faint scan lines run across it, its edge does not
   quite line up with itself, and its band names nothing. */
.trading-card.rarity-glitched:not(.full-card-image),
.collectible-caption.rarity-glitched {
    border-color: #050506;
    background: repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 3px), #111114;
    color: #d6d6cc;
}
.trading-card.rarity-glitched:not(.full-card-image) {
    overflow: visible;
    box-shadow: -2px 0 0 #ff2d5599, 2px 0 0 #00e7ff99, 6px 6px 0 #2a2a30, 8px 8px 0 #000;
}
.trading-card.rarity-glitched:not(.full-card-image) .card-art { border-bottom-color: #000; }
.trading-card.rarity-glitched > .card-rarity,
.collectible-caption.rarity-glitched > .card-rarity { background: #000; color: #8a8a82; }
.trading-card.rarity-glitched .card-modifiers span,
.collectible-caption.rarity-glitched .card-modifiers span { border-color: #3b3b42; background: #1b1b20; color: #d6d6cc; }
.trading-card.rarity-glitched .card-flavor,
.collectible-caption.rarity-glitched .card-flavor { color: #9d9d94; }
.trading-card.rarity-glitched .card-footer { border-top-color: #ffffff1f; }
.trading-card.rarity-glitched:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-glitched > .card-inspector-glare { border-radius: inherit; }
.trading-card.rarity-mythical:not(.full-card-image) { overflow: visible; }
.trading-card.rarity-mythical:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.rarity-mythical > .card-inspector-glare { border-radius: inherit; }
.trading-card .card-rarity-effect[data-effect="crimson-flames"],
.trading-card .card-rarity-effect[data-effect="violet-flames"] { overflow: visible; }
.trading-card.has-rarity-effect-crimson-flames:not(.full-card-image),
.trading-card.has-rarity-effect-violet-flames:not(.full-card-image) { overflow: visible; }

/* Prismatic prints on dark stock.

   The finish composites with hard-light, which can only screen or multiply,
   and screening white paper does nothing — so on white the spectrum can only
   ever darken and it comes out chalky. Given a dark ground, both halves of the
   signal land and the colour reads the way foil actually does. The paper is
   part of the finish, so it comes last and overrides whatever ground the
   rarity would otherwise print on. */
.trading-card.is-prismatic:not(.full-card-image) {
    /* It throws its light past its own edges, so it stops clipping, and the band takes over the rounding. */
    overflow: visible;
    border-color: #7768a4;
    background: linear-gradient(150deg, #1b1830 0 62%, #241c3d 82%, #120f1e);
    color: #f1eefc;
}
.trading-card.is-prismatic:not(.full-card-image) > .card-rarity { border-radius: 9px 9px 0 0; }
.trading-card.is-prismatic > .card-inspector-glare { border-radius: inherit; }
.trading-card.is-prismatic:not(.full-card-image) .card-art { border-bottom-color: #4a4270; }
.trading-card.is-prismatic:not(.full-card-image) .card-flavor { color: #b3aad6; }
.trading-card.is-prismatic:not(.full-card-image) .card-modifiers span {
    border-color: #6d63a0; background: #ffffff12;
}
.trading-card.is-prismatic:not(.full-card-image) .card-footer { border-top-color: #ffffff2e; }
.trading-card.is-prismatic:not(.full-card-image) .card-finish-label { color: #c9a5e6; }
.trading-card.is-prismatic:not(.full-card-image) .card-signed-label { color: #cfc8ea; }

.trading-card .card-rarity, .collectible-caption .card-rarity { grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--card-print-unit, 1px)); min-width: 0; padding: 0 calc(11 * var(--card-print-unit, 1px)); background: var(--rarity-color); color: #fff; font-size: calc(12 * var(--card-print-unit, 1px)); font-weight: 750; }
.card-rarity-label { display: inline-flex; align-items: center; gap: calc(6 * var(--card-print-unit, 1px)); }
.trading-card .card-rarity b, .collectible-caption .card-rarity b { font: 600 calc(12 * var(--card-print-unit, 1px)) ui-monospace, monospace; white-space: nowrap; }
.trading-card .card-rarity b.card-print-number, .collectible-caption .card-rarity b.card-print-number { font-size: calc(10 * var(--card-print-unit, 1px)); line-height: 1.1; white-space: normal; text-align: right; }
.manual-card-badge { display: inline-grid; place-items: center; width: calc(18 * var(--card-print-unit, 1px)); height: calc(18 * var(--card-print-unit, 1px)); border: calc(1 * var(--card-print-unit, 1px)) solid currentColor; border-radius: calc(4 * var(--card-print-unit, 1px)); font-size: calc(12 * var(--card-print-unit, 1px)); }
.trading-card .manual-card-badge, .collectible-caption .manual-card-badge { flex-shrink: 0; width: auto; height: auto; border: 0; font-size: calc(14 * var(--card-print-unit, 1px)); line-height: 1; }
.trading-card .card-art { position: relative; grid-row: 2; min-width: 0; min-height: 0; overflow: hidden; border-bottom: calc(2 * var(--card-print-unit, 1px)) solid #25252d; }
.trading-card .card-art img { display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Full Art (trading-card.js, docs/collectible-formats.md): the picture is taller than the art window and wider
   than it. Both layers lay it out the same way, at its own proportions and sat on the window's bottom edge: the picture
   stays cut to the window, and its subject, transparent round the figure, rises over the band and past the card's
   top edge. Below the window nothing of it shows, so the name and the text stay readable. */
.trading-card.has-pop-out { overflow: visible; }
/* Both in the window's cell: a cell taken by one would push the other into a column of its own. */
.trading-card.has-pop-out .card-art { grid-column: 1; container-type: inline-size; }
/* Scaled so 640 of the picture's pixels span the window and centred, so a picture wider than that reaches past the
   card's sides, as its height reaches past the top (card_boosters.FULL_ART_SIZE). */
.trading-card.has-pop-out .card-art img,
.trading-card .card-pop-out-figure { display: block; position: absolute; top: auto; right: auto; left: 50%; bottom: 0; width: auto; max-width: none; height: calc(100cqw * 1072 / 640); min-height: 100%; transform: translateX(-50%); }
.trading-card .card-pop-out { position: relative; z-index: 7; grid-row: 2; grid-column: 1; min-width: 0; min-height: 0; container-type: inline-size; border-bottom: calc(2 * var(--card-print-unit, 1px)) solid transparent; pointer-events: none; }
/* The subject's box is the picture's own (card_boosters.FULL_ART_SIZE), sized from its height alone, so the finishes
   laid over it line up with it whatever its picture's size; a picture of another size is contained in it. */
.trading-card .card-pop-out-figure { aspect-ratio: 896 / 1072; }
.trading-card .card-pop-out-figure > img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; border: 0; filter: drop-shadow(0 calc(3 * var(--card-print-unit, 1px)) calc(3 * var(--card-print-unit, 1px)) #25252d66); }
/* The subject wears the card's finishes over the whole of it, past the frame too (#1207). The foil, the prismatic
   film and an effect's CSS layer keep to its pixels; a shaded effect builds round its outline (surface-engine.js) and
   goes past it, as it goes past a cut-out collectible. */
.trading-card .card-pop-out-figure > .object-finishes > :is(.card-foil, .rfx[data-effect="prismatic"]),
.trading-card .card-pop-out-figure > .object-finishes > .rfx > .rfx-layer { -webkit-mask: var(--picture-mask) center / contain no-repeat; mask: var(--picture-mask) center / contain no-repeat; }
/* The layer opens no stacking context of its own, so the film and the foil blend into the subject under them rather
   than into an empty layer, which left them opaque over it. */
.trading-card .card-pop-out-figure > .object-finishes { z-index: auto; }
.trading-card .card-copy, .collectible-caption .card-copy { grid-row: 3; min-width: 0; padding: calc(10 * var(--card-print-unit, 1px)) calc(11 * var(--card-print-unit, 1px)) calc(5 * var(--card-print-unit, 1px)); }
.card-character { display: block; font-size: calc(12 * var(--card-print-unit, 1px)); line-height: 1.4; opacity: .7; margin-bottom: calc(3 * var(--card-print-unit, 1px)); }
.card-identity { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--card-print-unit, 1px)) calc(7 * var(--card-print-unit, 1px)); margin-bottom: calc(3 * var(--card-print-unit, 1px)); }
.card-identity .card-character { margin-bottom: 0; }
.trading-card .card-copy h3, .collectible-caption .card-copy h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 0; font-size: calc(19 * var(--card-print-unit, 1px)); line-height: 1.15; letter-spacing: calc(-.35 * var(--card-print-unit, 1px)); font-weight: 800; }
.trading-card.has-long-name .card-copy h3 { font-size: calc(17 * var(--card-print-unit, 1px)); }
.trading-card .card-modifiers, .collectible-caption .card-modifiers { grid-row: 4; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: center; gap: calc(4 * var(--card-print-unit, 1px)); padding: calc(3 * var(--card-print-unit, 1px)) calc(11 * var(--card-print-unit, 1px)) calc(10 * var(--card-print-unit, 1px)); }
.card-modifiers span { max-width: 100%; overflow-wrap: anywhere; }
.trading-card .card-modifiers span, .collectible-caption .card-modifiers span { padding: calc(3 * var(--card-print-unit, 1px)) calc(5 * var(--card-print-unit, 1px)); border: calc(1 * var(--card-print-unit, 1px)) solid #25252d; border-radius: calc(5 * var(--card-print-unit, 1px)); background: #f6f3fa; font-size: calc(13 * var(--card-print-unit, 1px)); line-height: 1.35; font-weight: 600; }
.trading-card .card-modifiers .card-modifiers-more, .collectible-caption .card-modifiers .card-modifiers-more { border-style: dashed; background: transparent; }
.trading-card .card-modifiers:empty, .collectible-caption .card-modifiers:empty { padding: 0; }
.trading-card .card-flavor, .collectible-caption .card-flavor { grid-row: 5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: calc(2 * var(--card-print-unit, 1px)) calc(11 * var(--card-print-unit, 1px)) calc(10 * var(--card-print-unit, 1px)); font-size: calc(12 * var(--card-print-unit, 1px)); line-height: 1.4; font-style: italic; font-weight: 500; color: #59515f; }
.card-footer { grid-row: 6; display: flex; justify-content: flex-end; align-items: center; min-height: calc(27 * var(--card-print-unit, 1px)); padding: 0 calc(11 * var(--card-print-unit, 1px)); border-top: calc(1 * var(--card-print-unit, 1px)) solid #25252d20; font: 600 calc(12 * var(--card-print-unit, 1px)) ui-monospace, monospace; }
.sale-badge { display: inline-block; margin-top: calc(7 * var(--card-print-unit, 1px)); padding: calc(4 * var(--card-print-unit, 1px)) calc(6 * var(--card-print-unit, 1px)); border-radius: calc(4 * var(--card-print-unit, 1px)); background: #9bf6ff; color: #25252d; font-size: calc(12 * var(--card-print-unit, 1px)); }

/* Artwork and metadata share one footprint for every full-image collectible. */
.trading-card.full-card-image { display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.trading-card.full-card-image .card-art { flex: 1; width: 100%; min-height: 0; margin-bottom: 0; border: 0; overflow: hidden; }
.trading-card.full-card-image .card-art img { object-fit: contain; }
/* An image-only card ends where its artwork's visible pixels do (`--art-mask`, trading-card.js), not at its box. What
   is painted on it keeps to them: its foil, the glare as it tilts, and the CSS layer of its rarity effect
   (rarity-effects.css, `--rfx-image-mask`). The rest of the effect builds round that outline and goes past it. The
   mask is laid out as the image is, contained and centred. */
.trading-card.full-card-image .card-art { --rfx-image-mask: var(--art-mask, none); }
.trading-card.full-card-image .card-art > .card-inspector-glare {
    mask-image: var(--art-mask, none); mask-size: contain; mask-position: center; mask-repeat: no-repeat;
    -webkit-mask-image: var(--art-mask, none); -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat;
}
.trading-card.full-card-image .card-art { flex-basis: 0; }
.collectible-caption { position: relative; width: 100%; container-type: inline-size; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); border: 2px solid #25252d; border-radius: 9px; background: #fff; box-shadow: 3px 3px 0 var(--rarity-color); overflow: hidden; }
.trading-card.full-card-image > .collectible-caption { position: relative; z-index: 9; box-sizing: border-box; }
.collectible-caption .card-rarity { min-height: calc(30 * var(--card-print-unit, 1px)); }
.collectible-caption > .card-rarity, .collectible-caption > .card-copy, .collectible-caption > .card-modifiers, .collectible-caption > .card-flavor, .collectible-caption > .card-footer { grid-row: auto; }

/* Defects transform only the artwork, underneath the whole-card foil layer. */
.trading-card .misprint-art { position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; }
.trading-card .misprint-art img { transform-origin: center; }
.trading-card .misprint-art .misprint-layer { position: absolute; inset: 0; pointer-events: none; }
.trading-card[data-card-foil], .trading-card [data-card-foil] { rotate: none; }
.trading-card[data-card-foil] > .card-foil { grid-area: 1 / 1 / -1 / -1; z-index: 6; opacity: .4; }
.trading-card .card-art[data-foil-mask="artwork"] > .card-foil { opacity: .3; mask-size: contain, 100% 100%; mask-position: center; }

/* A Paper Note (trading-card.js, renderPaperSheet; docs/collectible-formats.md): no picture, a cream sheet the
   card's text is written on in a clerk's serif, creased where it was folded in three, the card's picture struck
   at its foot as a seal. It takes the sheet's own proportions, and nothing of a card's frame or caption. The
   sheet is its own container, so its type is sized to it (`--u`, like `--card-print-unit`). */
.trading-card.is-paper-note, .full-card-tilt-stage > .trading-card.full-card-image.is-paper-note { aspect-ratio: 688 / 960; }
.trading-card.is-paper-note .card-art { display: flex; align-items: center; overflow: visible; border: 0; }
.paper-note { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 688 / 960; overflow: hidden; container-type: inline-size; color: #1c2742; background: linear-gradient(135deg, #f6efdd, #ebe1c7 55%, #f3ecd8); border: 2px solid #b9a67a; border-radius: 3px; box-shadow: inset 0 0 28px rgba(120, 95, 40, .12), 0 6px 18px rgba(40, 30, 10, .18); font-family: Georgia, "Times New Roman", serif; }
.paper-note::before, .paper-note::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(180deg, rgba(120, 95, 40, .16), rgba(255, 252, 240, .5)); pointer-events: none; }
.paper-note::before { top: 33.333%; }
.paper-note::after { top: 66.666%; }
.paper-note-page { --u: calc(100cqw / 336); position: absolute; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: calc(26 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)); }
.paper-note-head { flex: 0 0 auto; margin: 0 0 calc(16 * var(--u)); padding-bottom: calc(8 * var(--u)); border-bottom: calc(3 * var(--u)) double #1c2742; }
.paper-note-issuer { margin: 0 0 calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.3; letter-spacing: .04em; opacity: .8; }
.paper-note-title { margin: 0; font-size: calc(20 * var(--u)); line-height: 1.15; font-weight: 700; letter-spacing: .01em; }
.paper-note-reference { margin: calc(4 * var(--u)) 0 0; font-size: calc(10 * var(--u)); line-height: 1.3; font-style: italic; opacity: .8; }
.paper-note-body { flex: 1 1 auto; min-height: 0; font-size: calc(13 * var(--u)); line-height: 1.45; }
.paper-note-body p { margin: 0 0 calc(8 * var(--u)); }
.paper-note-list { margin: 0 0 calc(8 * var(--u)); padding: 0 0 0 calc(18 * var(--u)); }
.paper-note-list li { margin: 0 0 calc(3 * var(--u)); }
/* A sheet of several pages shows one, and turns them under its text (the seal keeps the right-hand corner). */
.paper-note-leaf[hidden] { display: none; }
.paper-note-pages { display: flex; align-items: center; gap: calc(6 * var(--u)); margin: auto 0 0; font-size: calc(10 * var(--u)); font-style: italic; opacity: .85; }
.paper-note-turn { min-width: calc(34 * var(--u)); min-height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-size: calc(32 * var(--u)); font-style: normal; font-weight: 700; line-height: 1; cursor: pointer; }
.paper-note-turn:hover, .paper-note-turn:focus-visible { transform: none; background: none; box-shadow: none; opacity: 1; outline: none; text-decoration: underline; }
/* The seal, struck a little askew, sinks into the paper rather than lying on it. The picture is round-cropped and
   multiplied, so the square it came as is not seen; its rule comes after the card art's, which it outranks by
   order alone. */
.paper-note-seal { position: absolute; right: calc(22 * var(--u)); bottom: calc(18 * var(--u)); width: calc(84 * var(--u)); aspect-ratio: 1; border-radius: 50%; overflow: hidden; mix-blend-mode: multiply; filter: drop-shadow(1px 2px 1px rgba(60, 20, 20, .25)); pointer-events: none; }
.trading-card .card-art .paper-note-seal > img, .paper-note-seal > img { display: block; width: 125%; height: 125%; margin: -12.5%; object-fit: cover; border: 0; transform: rotate(-9deg); }

.card-preview-button, .set-editor-page .card-preview-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; box-shadow: none; }
.card-preview-button:focus-visible { outline: 3px solid #6b28a8; outline-offset: 4px; }
@media (max-width: 700px) { .trading-card { width: min(78vw, 310px); } }