:root {
    --common: #75818f;
    --uncommon: #257b53;
    --rare: #315bcf;
    --epic: #7543c5;
    --legendary: #a96812;
    --unique: #c02977;
    --mythical: #a7192f;
    --celestial: #665bd1;
    --gilded: #FFD700;
    --counterfeit: #9ba360;
}

.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-counterfeit { --rarity-color: var(--counterfeit); }

.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] { 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)); opacity: .98; }
.trading-card .card-signature-sheen, .collectible-caption .card-signature-sheen { opacity: .2; }

.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]) { 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. */
/* A flat fill reads as yellow paint. Gold needs a ramp that runs dark, bright,
   dark again so the eye reads a curved metal surface catching a light, with the
   band's own reeding drawn over it and the lettering stamped rather than
   printed. */
.trading-card.rarity-gilded > .card-rarity,
.collectible-caption.rarity-gilded > .card-rarity {
    background:
        repeating-linear-gradient(100deg, #ffffff10 0 1px, #00000012 1px 3px),
        linear-gradient(100deg,
            #5c3d05 0%, #a9781a 9%, #e8bf55 20%, #fff3c4 30%, #ffffff 35%,
            #f2ce68 42%, #b9861d 55%, #8a5f0d 66%, #d6a92e 78%, #f7dd93 88%,
            #7d5409 100%);
    color: #3a2604;
    text-shadow: 0 1px 0 #ffe9a866;
}
/* 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; }
.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; }
.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) {
    border-color: #7768a4;
    background: linear-gradient(150deg, #1b1830 0 62%, #241c3d 82%, #120f1e);
    color: #f1eefc;
}
.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; }
.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; }
.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; }

.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); } }