/*
 * Relics: holographic trading cards in plain CSS.
 *
 * A modern take on the ideas popularised by simeydotme's "Pokémon cards CSS":
 *  - one spring-driven JS loop (rlc-cards.js) writes a few custom properties
 *    per card (--rx/--ry tilt, --px/--py pointer, --a activity, --dx/--dy offset);
 *  - every finish is just CSS layers reading those properties, blended with
 *    mix-blend-mode;
 *  - foil on the art is masked by the art's own brightness (mask-mode:
 *    luminance), so highlights shine hardest;
 *  - glitter and galaxy textures are generated at runtime (no texture files);
 *  - layout scales with the card via container query units.
 *
 * Everything is scoped to .rlc-card so it survives inside any WordPress theme.
 */

/* Cinzel (SIL Open Font License, assets/fonts/OFL.txt), bundled so nothing loads from Google. */
@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/cinzel-latin-wght.woff2') format('woff2-variations'),
         url('../fonts/cinzel-latin-wght.woff2') format('woff2');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

.rlc-card,
.rlc-card *,
.rlc-card *::before,
.rlc-card *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Card shell and motion                                              */
/* ------------------------------------------------------------------ */

.rlc-card {
    /* Driven by card.js */
    --rx: 0deg;
    --ry: 0deg;
    --px: 50%;
    --py: 50%;
    --dx: 0;          /* -1..1 pointer offset from centre */
    --dy: 0;
    --a: 0;           /* 0 idle .. 1 fully engaged */
    --sx: 0px;
    --sy: 18px;

    /* Inspect transform */
    --tx: 0px;
    --ty: 0px;
    --s: 1;

    /* Per-finish palette */
    --frame-1: #1c2433;
    --frame-2: #0f141e;
    --edge: #44526d;
    --accent: #8fb6ff;
    --text: #eef2f8;
    --text-2: #b7c2d4;
    --panel: rgba(8, 12, 20, 0.72);
    --frame-text: var(--text);       /* text printed directly on the frame */
    --frame-text-2: var(--text-2);
    --name-shadow: 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.6);

    position: relative;
    --focus: 50% 40%;

    width: var(--card-w, 240px);
    max-width: 100%;
    aspect-ratio: 63 / 88;
    text-align: left; /* real trading card ratio */
    perspective: 900px;
    transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
    transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
    cursor: pointer;
    touch-action: none;
    outline: none;
    -webkit-user-select: none;
    user-select: none;
}

.rlc-card:focus-visible .rlc-card__front {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
}

.rlc-card.is-open {
    z-index: 50;
    cursor: default;
}

.rlc-card__rotator {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--ry)) rotateX(var(--rx));
    will-change: transform;
}

.rlc-card__front,
.rlc-card__back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 4.5% / 3.2%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    container-type: inline-size;
    box-shadow:
        var(--sx) var(--sy) 34px -6px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.rlc-card__back {
    transform: rotateY(180deg);
}

/* ------------------------------------------------------------------ */
/* Front layout (all positions in % so the card scales cleanly)       */
/*                                                                    */
/* A dark border around a tall art window, a ribbon hanging down the  */
/* left and a name plate below the art. Every part keeps its Gwent    */
/* meaning (docs/CARD-SYMBOLS.md): ribbon colour and emblem = faction, */
/* medallion = Strength (spiked = Hero), round icons = row then        */
/* abilities, tag on the seam = HERO. Rarity stays in the footer.     */
/* ------------------------------------------------------------------ */

.rlc-card {
    --serif: 'Cinzel', 'Cormorant SC', 'Trajan Pro', Georgia, 'Times New Roman', serif;
    --border: #0c0e13;

    /* Faction: ribbon cloth, hero rim and emblem. Neutral until Relics has factions. */
    --ribbon-1: #6c7686;
    --ribbon-2: #3c4452;
    /* Hero rim and shard tones follow the ribbon. */
    --faction-1: color-mix(in srgb, var(--ribbon-1) 22%, #ffffff);
    --faction-2: var(--ribbon-1);
    --faction-3: var(--ribbon-2);
    --stitch: rgba(255, 255, 255, 0.7);
    --metal-1: #f4f6f9;
    --metal-2: #a9b1bd;
    --metal-3: #5d6573;
    --medal-face: #eceef2;
    --medal-ink: #22262e;
    --medal-glow: transparent;
    --tag-ink: #1c1d22;
    --row-1: #ffd88a;
    --row-2: #e5862b;
    --ability-1: #ead9ff;
    --ability-2: #9a74e0;
    --badge-ink: #1d1408;

    /* Name plate (parchment) */
    --plate: #ece4d1;
    --plate-2: #d9cdb2;
    --plate-ink: #2b2219;
    --plate-ink-2: #5a4c3c;
    --plate-rule: rgba(43, 34, 25, 0.45);
}

.rlc-card__frame {
    position: absolute;
    inset: 0;
    background: var(--border);
    box-shadow: inset 0 0 0 0.5cqw rgba(255, 255, 255, 0.07);
}

/* Fine gold hairline just inside the border (decoration only, same on every Relic). */
.rlc-card__frame::after {
    content: "";
    position: absolute;
    inset: 1.1cqw;
    border: 0.35cqw solid rgba(226, 172, 74, 0.55);
    border-radius: 3.2cqw;
    pointer-events: none;
}

.rlc-card__art {
    position: absolute;
    top: 2.6%;
    left: 3.6%;
    width: 92.8%;
    height: 63.4%;
    overflow: hidden;
    border-radius: 2.6cqw 2.6cqw 0 0;
    background: #000;
    isolation: isolate; /* keeps the faction grade inside the art window */
}

.rlc-card .rlc-card__art img {
    position: absolute;
    inset: -6%;
    width: 112%;
    max-width: none;
    height: 112%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: cover;
    object-position: var(--focus);
    /* Gentle parallax: the art drifts against the tilt, like a window. */
    transform: translate3d(calc(var(--dx) * -3%), calc(var(--dy) * -3%), 0);
}

/* Placeholder while a card has no art yet (admin preview). */
.rlc-card--no-art .rlc-card__art {
    background: repeating-linear-gradient(135deg, #1a2234 0 10px, #141b2a 10px 20px);
}

.rlc-card--no-art .rlc-card__art img { visibility: hidden; }

/* Name plate */
.rlc-card__plate {
    position: absolute;
    top: 64.6%;
    left: 3.6%;
    right: 3.6%;
    bottom: 6.2%;
    border-radius: 0 0 2.6cqw 2.6cqw;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(180deg, var(--plate), var(--plate-2));
    box-shadow:
        0 -0.7cqw 0 0 #d9a440,
        0 -1.1cqw 1.6cqw rgba(0, 0, 0, 0.55),
        inset 0 0 3cqw rgba(60, 40, 15, 0.18);
}

.rlc-card__top {
    position: absolute;
    top: 68%;
    left: 30.5%;
    right: 5%;
    height: 6.4%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plate-ink);
}

.rlc-card__name {
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: inherit;
    font-family: var(--serif);
    font-size: 6.4cqw;
    font-variant: small-caps;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.05em;
    text-transform: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rlc-card[data-name-size="m"] .rlc-card__name { font-size: 5.4cqw; }
.rlc-card[data-name-size="s"] .rlc-card__name { font-size: 4.6cqw; }

/* Very long names wrap onto two lines instead of being cut short. */
.rlc-card[data-name-size="xs"] .rlc-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 4.2cqw;
    line-height: 1.02;
    text-align: center;
    white-space: normal;
}

/* Thin rule under the name, fading at both ends. */
.rlc-card__top::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -0.6cqw;
    height: 0.35cqw;
    background: linear-gradient(90deg, transparent, var(--plate-rule) 18%, var(--plate-rule) 82%, transparent);
}

/* Rarity tag sitting on the seam between art and plate. */
.rlc-card__type {
    position: absolute;
    top: 62.6%;
    left: 50%;
    height: 4%;
    min-width: 36cqw;
    padding: 0 6cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-36%);
    clip-path: polygon(0 50%, 5cqw 0, calc(100% - 5cqw) 0, 100% 50%, calc(100% - 5cqw) 100%, 5cqw 100%);
    visibility: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 55%),
        linear-gradient(90deg, var(--metal-3), var(--metal-1) 30%, var(--metal-2) 70%, var(--metal-3));
    color: var(--tag-ink);
    font-family: var(--serif);
    font-size: 3.1cqw;
    font-weight: 700;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The tag only appears on Heroes, as in Gwent. */
.rlc-card[data-hero="1"] .rlc-card__type { visibility: visible; }

.rlc-card__finish-name { display: none; }

.rlc-card__text {
    position: absolute;
    top: 76.2%;
    left: 7%;
    right: 7%;
    bottom: 7.4%;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    overflow: hidden;
    color: var(--plate-ink);
    font-family: var(--serif);
    font-size: 3.7cqw;
    line-height: 1.36;
    text-align: center;
}

.rlc-card .rlc-card__text p { margin: 0 0 1.2cqw; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.rlc-card .rlc-card__text p:last-child { margin-bottom: 0; }
.rlc-card .rlc-card__flavor { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.rlc-card[data-text-size="m"] .rlc-card__text { font-size: 3.25cqw; }
.rlc-card[data-text-size="s"] .rlc-card__text { font-size: 2.75cqw; line-height: 1.3; }

/* Ribbon down the left edge */
.rlc-card__banner {
    position: absolute;
    top: 2%;
    left: 5%;
    width: 25cqw;
    height: 74%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.6cqw;
    filter: drop-shadow(0.6cqw 0.8cqw 1cqw rgba(0, 0, 0, 0.55));
}

/* The cloth: stripes, metal edges, swallowtail. */
.rlc-card__banner::before,
.rlc-card__banner::after {
    content: "";
    position: absolute;
    top: 12cqw;
    bottom: 0;
    left: 4.4cqw;
    right: 4.4cqw;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7cqw), 0 100%);
}

.rlc-card__banner::before {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 1.2cqw, transparent 1.2cqw 2.6cqw),
        linear-gradient(90deg, var(--metal-3) 0 0.9cqw, var(--ribbon-2) 0.9cqw, var(--ribbon-1) 50%, var(--ribbon-2) calc(100% - 0.9cqw), var(--metal-3) calc(100% - 0.9cqw));
}

/* Stitching just inside the edges. */
.rlc-card__banner::after {
    left: 6.1cqw;
    right: 6.1cqw;
    bottom: 2.6cqw;
    border-left: 0.35cqw dashed var(--stitch);
    border-right: 0.35cqw dashed var(--stitch);
    opacity: 0.8;
}

.rlc-card__banner > * { position: relative; z-index: 1; }

.rlc-card__medal {
    flex: none;
    display: grid;
    place-items: center;
    width: 25cqw;
    height: 25cqw;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, var(--medal-face) 0 56%, transparent 57%),
        radial-gradient(circle, rgba(0, 0, 0, 0.5) 0 60%, transparent 61%),
        conic-gradient(from 210deg, var(--metal-1), var(--metal-3), var(--metal-2), var(--metal-1), var(--metal-3), var(--metal-1));
    box-shadow: 0 0 0 0.45cqw rgba(0, 0, 0, 0.6), 0 0 3cqw var(--medal-glow);
}

.rlc-card__medal-num {
    color: var(--medal-ink);
    font-family: var(--serif);
    font-size: 12cqw;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 2cqw var(--medal-glow);
}

/* No game stats yet: a plain medallion with the Relics shard, no number. */
.rlc-card[data-stats="0"] .rlc-card__medal-num {
    width: 6cqw;
    height: 8.4cqw;
    background: var(--faction-3);
    clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
    opacity: 0.55;
}

/* Hero: a spiked medallion whose rim is the faction colour (Gwent rule). */
.rlc-card[data-hero="1"] .rlc-card__medal {
    width: 27cqw;
    height: 27cqw;
    margin: -1cqw 0;
    background:
        radial-gradient(circle at 50% 42%, var(--medal-face) 0 50%, transparent 51%),
        radial-gradient(circle, rgba(0, 0, 0, 0.55) 0 54%, transparent 55%),
        conic-gradient(from 210deg, var(--faction-1), var(--faction-3), var(--faction-2), var(--faction-1), var(--faction-3), var(--faction-1));
    -webkit-mask: radial-gradient(circle, #000 64%, transparent 64.5%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg);
    mask: radial-gradient(circle, #000 64%, transparent 64.5%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg);
}

/* Round icons under the medallion: the row first, then each ability. */
.rlc-card__badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2cqw;
}

.rlc-card__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 14.6cqw;
    height: 14.6cqw;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, var(--row-1), var(--row-2) 72%);
    box-shadow: 0 0 0 0.6cqw var(--metal-2), 0 0 0 0.95cqw rgba(0, 0, 0, 0.55);
    color: var(--badge-ink);
}

.rlc-card__badge--ability {
    width: 12.4cqw;
    height: 12.4cqw;
    background: radial-gradient(circle at 38% 30%, var(--ability-1), var(--ability-2) 72%);
}

.rlc-card__badge svg {
    width: 64%;
    height: 64%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Faction emblem just above the swallowtail (the shape comes from data-emblem). Default: a shard in a ring. */
.rlc-card__emblem {
    margin-top: auto;
    margin-bottom: 9.6cqw;
    position: relative;
    width: 8.6cqw;
    height: 8.6cqw;
    border: 0.5cqw solid var(--stitch);
    border-radius: 50%;
}

.rlc-card__emblem::before {
    content: "";
    position: absolute;
    inset: 22% 32%;
    background: var(--stitch);
    clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
}

.rlc-card[data-emblem="flame"] .rlc-card__emblem::before { inset: 16% 24%; clip-path: polygon(50% 0, 66% 30%, 86% 22%, 82% 62%, 66% 100%, 34% 100%, 18% 62%, 14% 22%, 34% 30%); }
.rlc-card[data-emblem="crown"] .rlc-card__emblem::before { inset: 24% 18%; clip-path: polygon(0 100%, 0 20%, 25% 55%, 50% 0, 75% 55%, 100% 20%, 100% 100%); }
.rlc-card[data-emblem="chevrons"] .rlc-card__emblem::before { inset: 18% 22%; clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 70%, 50% 25%, 0 70%, 0 75%, 50% 30%, 100% 75%, 100% 100%, 50% 55%, 0 100%); }
.rlc-card[data-emblem="compass"] .rlc-card__emblem::before { inset: 14%; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.rlc-card[data-emblem="moon"] .rlc-card__emblem::before { inset: 16%; clip-path: none; border-radius: 50%; background: radial-gradient(circle at 70% 35%, transparent 0 46%, var(--stitch) 47%); }

/*
 * Faction grade: a light wash of the faction colour over the art, strongest
 * at the edges, so every Relic in a faction shares a family look. Neutral
 * Relics stay ungraded.
 */
.rlc-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(115% 95% at 50% 42%, transparent 48%, color-mix(in srgb, var(--ribbon-2) 85%, transparent) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--ribbon-1) 45%, transparent), transparent 50%);
    mix-blend-mode: soft-light;
    z-index: 1;
}

/* Plus a light colour tint across the whole image (above the art and foil). */
.rlc-card__art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--ribbon-1);
    mix-blend-mode: color;
    opacity: 0.12;
}

.rlc-card[data-faction="neutral"] .rlc-card__art::before,
.rlc-card[data-faction="neutral"] .rlc-card__art::after { display: none; }

/* Footer: printed on the dark border. */
.rlc-card__footer {
    position: absolute;
    left: 5.4%;
    right: 5.4%;
    bottom: 1.1%;
    height: 4.4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqw;
    color: #c5cad3;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 2.7cqw;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rlc-card__number::before {
    content: "";
    display: inline-block;
    width: 1.9cqw;
    height: 1.9cqw;
    margin-right: 1.4cqw;
    vertical-align: -0.1cqw;
    background: var(--accent);
    clip-path: polygon(50% 0, 100% 38%, 50% 100%, 0 38%);
}

.rlc-card .rlc-card__moment { flex: 1; margin: 0; overflow: hidden; color: #9aa3b2; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
/* Rarity (collection only, never a game symbol): pips and serial or rarity name. */
.rlc-card__rarity { display: inline-flex; align-items: center; gap: 1.4cqw; color: var(--accent); }
.rlc-card__gems { display: inline-flex; gap: 0.9cqw; }

.rlc-card__gems i {
    width: 1.6cqw;
    height: 1.6cqw;
    background: var(--accent);
    transform: rotate(45deg);
    box-shadow: 0 0 1cqw var(--accent);
}

.rlc-card__serial { color: #c5cad3; text-align: right; }

/* ------------------------------------------------------------------ */
/* Shared light layers                                                */
/* ------------------------------------------------------------------ */

.rlc-card__glare,
.rlc-card__glitter,
.rlc-card__reverse-foil,
.rlc-card__art-foil,
.rlc-card__art-cosmos {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Specular highlight that follows the pointer. */
.rlc-card__glare {
    background:
        radial-gradient(farthest-corner circle at var(--px) var(--py),
            rgba(255, 255, 255, 0.75) 0%,
            rgba(255, 255, 255, 0.28) 22%,
            rgba(0, 0, 0, 0.32) 90%);
    mix-blend-mode: overlay;
    opacity: calc(var(--a) * 0.85);
}

/* Prismatic rainbow used by several finishes. Position follows the pointer
   at a different rate than the glare, which reads as depth. */
.rlc-card {
    --rainbow:
        repeating-linear-gradient(110deg,
            hsl(350 100% 72%) 0%,
            hsl(45 100% 68%) 4%,
            hsl(95 90% 66%) 8%,
            hsl(185 100% 66%) 12%,
            hsl(230 100% 74%) 16%,
            hsl(290 95% 74%) 20%,
            hsl(350 100% 72%) 24%);
    --scanlines: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px);
    --foil-x: calc(50% + var(--dx) * 40%);
    --foil-y: calc(50% + var(--dy) * 40%);
}

/* Art foil, masked by the artwork's own brightness so highlights pop. */
.rlc-card__art-foil {
    opacity: 0;
    background: var(--rainbow), var(--scanlines);
    background-size: 420% 420%, 100% 100%;
    background-position: var(--foil-x) var(--foil-y), 0 0;
    mix-blend-mode: color-dodge;
    /* Darker foil + colour-dodge = only bright pixels light up strongly. */
    filter: brightness(0.5) contrast(2) saturate(1.4);
    -webkit-mask-image: var(--art), linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
    mask-image: var(--art), linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
    mask-mode: luminance, alpha;
    -webkit-mask-size: cover, 100% 100%;
    mask-size: cover, 100% 100%;
    -webkit-mask-position: var(--focus), 0 0;
    mask-position: var(--focus), 0 0;
}

.rlc-card__art-cosmos { opacity: 0; }

/* Frame-only foil: everything except the art window. */
.rlc-card__reverse-foil {
    opacity: 0;
    background: var(--rainbow), var(--scanlines);
    background-size: 380% 380%, 100% 100%;
    background-position: var(--foil-x) var(--foil-y), 0 0;
    mix-blend-mode: color-dodge;
    filter: brightness(0.65) contrast(1.5);
    clip-path: polygon(evenodd,
        0 0, 100% 0, 100% 100%, 0 100%, 0 0,
        3.6% 2.6%, 96.4% 2.6%, 96.4% 66%, 3.6% 66%, 3.6% 2.6%);
}

/* Sparkle layer: texture generated by card.js. Moves against the pointer so
   individual flecks seem to switch on and off. */
.rlc-card__glitter {
    opacity: 0;
    background-image: var(--glitter-texture);
    background-size: 46% auto;
    background-position: calc(50% - var(--dx) * 18%) calc(50% - var(--dy) * 18%);
    mix-blend-mode: color-dodge;
}

/* ------------------------------------------------------------------ */
/* Finishes                                                           */
/*                                                                    */
/* Rarity is collection-only, so finishes change the light effects,   */
/* the footer accent and (Epic and Legendary) the full-art layout.    */
/* They never touch the ribbon, medallion or icons: those carry game  */
/* meaning.                                                           */
/* ------------------------------------------------------------------ */

.rlc-card[data-finish="base"] { --accent: #dfe5ee; }

/* Reverse holo (Uncommon): the frame, ribbon and plate shimmer, the art stays clean. */
.rlc-card[data-finish="reverse"] { --accent: #7ff0a0; }
.rlc-card[data-finish="reverse"] .rlc-card__reverse-foil { opacity: calc(0.28 + var(--a) * 0.6); }

/* Holo (Rare): the art window shimmers. */
.rlc-card[data-finish="holo"] { --accent: #8cc2ff; }
.rlc-card[data-finish="holo"] .rlc-card__art-foil { opacity: calc(0.2 + var(--a) * 0.8); }

/* Epic and Legendary: the art runs down behind a dark plate, and the name gets foil lettering. */
.rlc-card[data-finish="fullart"],
.rlc-card[data-finish="cosmos"] {
    --plate-ink: #f3efe6;
    --plate-ink-2: #b9b2a5;
    --plate-rule: rgba(255, 255, 255, 0.5);
}

.rlc-card[data-finish="fullart"] .rlc-card__plate,
.rlc-card[data-finish="cosmos"] .rlc-card__plate {
    background: linear-gradient(180deg, rgba(8, 7, 12, 0.35), rgba(8, 7, 12, 0.88) 26%, #08070c 60%);
    box-shadow: 0 -0.7cqw 0 0 #d9a440, inset 0 0 0 0 transparent;
}

/* Foil lettering: a sheen that slides with the tilt. */
.rlc-card[data-finish="fullart"] .rlc-card__name,
.rlc-card[data-finish="cosmos"] .rlc-card__name {
    background: var(--name-foil);
    background-size: 300% 100%;
    background-position: calc(50% + var(--dx) * 45%) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.8));
}

.rlc-card[data-finish="fullart"] .rlc-card__art,
.rlc-card[data-finish="cosmos"] .rlc-card__art {
    height: 91.2%;
    border-radius: 2.6cqw;
}

.rlc-card[data-finish="fullart"] .rlc-card__art img,
.rlc-card[data-finish="cosmos"] .rlc-card__art img {
    inset: -8%;
    width: 116%;
    height: 116%;
    transform: translate3d(calc(var(--dx) * -5%), calc(var(--dy) * -5%), 0);
}

/* Full art (Epic). */
.rlc-card[data-finish="fullart"] {
    --accent: #c79bff;
    --name-foil: linear-gradient(100deg, #f3e9ff 0%, #c79bff 22%, #8ff3ff 40%, #ffffff 50%, #ff9de2 62%, #c79bff 80%, #f3e9ff 100%);
}

.rlc-card[data-finish="fullart"] .rlc-card__art-foil { opacity: calc(0.2 + var(--a) * 0.7); }

/* Cosmos (Legendary): a nebula and starfield in the sky. */
.rlc-card[data-finish="cosmos"] {
    --accent: #ffc85c;
    --name-foil: linear-gradient(100deg, #fff1c2 0%, #ffc85c 20%, #fff 32%, #8ff3ff 44%, #b6ff8f 52%, #ffd56b 62%, #fff 74%, #ffc85c 86%, #fff1c2 100%);
}

.rlc-card[data-finish="cosmos"] .rlc-card__art-cosmos {
    opacity: calc(0.55 + var(--a) * 0.45);
    background-image: var(--cosmos-texture);
    background-size: 180% 180%;
    background-position: calc(50% + var(--dx) * 30%) calc(50% + var(--dy) * 30%);
    /* Screen lifts dark areas most, so the nebula fills the night sky while
       the bright lightning stays crisp. */
    mix-blend-mode: screen;
}

.rlc-card[data-finish="cosmos"] .rlc-card__art-foil { opacity: calc(var(--a) * 0.45); }
.rlc-card[data-finish="cosmos"] .rlc-card__glitter { opacity: calc(0.25 + var(--a) * 0.55); }

/* ------------------------------------------------------------------ */
/* Card back                                                          */
/* ------------------------------------------------------------------ */

.rlc-card__back {
    background: #0b1a42 url('../img/card-back.svg') center / 100% 100% no-repeat;
}

/* Set code engraved under the emblem. */
.rlc-card__back-mark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13%;
    color: #f2cf7a;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 4.2cqw;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-align: center;
    text-shadow: 0 0.3cqw 0 #3a2406, 0 0 2cqw rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------ */
/* Logo: the full YubNub Relics lockup (assets/img/logo.svg, made by  */
/* tools/brand_svg.py). Size it with --logo-w.                        */
/* ------------------------------------------------------------------ */

.rlc-logo {
    display: block;
    width: var(--logo-w, 260px);
    max-width: 100%;
    aspect-ratio: 700 / 506;
    background: url('../img/logo.svg') center / contain no-repeat;
}

/* ------------------------------------------------------------------ */
/* Inspect mode                                                       */
/* ------------------------------------------------------------------ */

.rlc-card-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(3, 5, 9, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.rlc-card-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .rlc-card { transition: none; }
}