/* RS3 TCG shared card renderer v3.0.9
   Loaded by both the Lucky Friend public website and the Alt1 application.
   Keep all visible card-face rules here so both surfaces remain identical. */

.trading-card {
    --tcg-common: #b7c5cf;
    --tcg-uncommon: #73d594;
    --tcg-rare: #67a9ff;
    --tcg-epic: #c18cff;
    --tcg-legendary: #f2b858;
    --tcg-mythic: #ff75d5;
    --tcg-godly: #fff0a2;
    --rarity-color: var(--tcg-common);
    --rarity-glow: rgba(183, 197, 207, .23);
    --rarity-aura: rgba(183, 197, 207, .13);
    --rarity-surface: #494137;
    --rarity-border-soft: rgba(183, 197, 207, .32);
    --rarity-art-glow: rgba(183, 197, 207, .35);
    --rarity-line: rgba(183, 197, 207, .28);
    --rarity-badge-border: #c2bba1;
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 218 / 293;
    perspective: 1200px;
    transform-style: flat !important;
    color: #f7ecd7;
    font-family: Arial, Helvetica, sans-serif;
}

.trading-card[data-rarity="uncommon"] {
    --rarity-color: var(--tcg-uncommon);
    --rarity-glow: rgba(115, 213, 148, .23);
    --rarity-aura: rgba(115, 213, 148, .13);
    --rarity-surface: #3d442d;
    --rarity-border-soft: rgba(115, 213, 148, .32);
    --rarity-art-glow: rgba(115, 213, 148, .35);
    --rarity-line: rgba(115, 213, 148, .28);
    --rarity-badge-border: #95c67b;
}
.trading-card[data-rarity="rare"] {
    --rarity-color: var(--tcg-rare);
    --rarity-glow: rgba(103, 169, 255, .23);
    --rarity-aura: rgba(103, 169, 255, .13);
    --rarity-surface: #3b3c40;
    --rarity-border-soft: rgba(103, 169, 255, .32);
    --rarity-art-glow: rgba(103, 169, 255, .35);
    --rarity-line: rgba(103, 169, 255, .28);
    --rarity-badge-border: #8ea9c0;
}
.trading-card[data-rarity="epic"] {
    --rarity-color: var(--tcg-epic);
    --rarity-glow: rgba(193, 140, 255, .23);
    --rarity-aura: rgba(193, 140, 255, .13);
    --rarity-surface: #4b3740;
    --rarity-border-soft: rgba(193, 140, 255, .32);
    --rarity-art-glow: rgba(193, 140, 255, .35);
    --rarity-line: rgba(193, 140, 255, .28);
    --rarity-badge-border: #c896c0;
}
.trading-card[data-rarity="legendary"] {
    --rarity-color: var(--tcg-legendary);
    --rarity-glow: rgba(242, 184, 88, .23);
    --rarity-aura: rgba(242, 184, 88, .13);
    --rarity-surface: #543f22;
    --rarity-border-soft: rgba(242, 184, 88, .32);
    --rarity-art-glow: rgba(242, 184, 88, .35);
    --rarity-line: rgba(242, 184, 88, .28);
    --rarity-badge-border: #e8b354;
}
.trading-card[data-rarity="mythic"] {
    --rarity-color: var(--tcg-mythic);
    --rarity-glow: rgba(255, 117, 213, .23);
    --rarity-aura: rgba(255, 117, 213, .13);
    --rarity-surface: #563338;
    --rarity-border-soft: rgba(255, 117, 213, .32);
    --rarity-art-glow: rgba(255, 117, 213, .35);
    --rarity-line: rgba(255, 117, 213, .28);
    --rarity-badge-border: #f087a5;
}
.trading-card[data-rarity="godly"] {
    --rarity-color: var(--tcg-godly);
    --rarity-glow: rgba(255, 240, 162, .23);
    --rarity-aura: rgba(255, 240, 162, .13);
    --rarity-surface: #56492f;
    --rarity-border-soft: rgba(255, 240, 162, .32);
    --rarity-art-glow: rgba(255, 240, 162, .35);
    --rarity-line: rgba(255, 240, 162, .28);
    --rarity-badge-border: #f0d784;
}

.card-rotor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
}

.card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid var(--rarity-color);
    border-radius: 17px;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transform-style: flat !important;
    -webkit-transform-style: flat !important;
    contain: paint;
    box-shadow:
        0 15px 34px rgba(0, 0, 0, .52),
        0 0 22px var(--rarity-glow);
}

.card-front {
    display: grid;
    grid-template-rows: auto minmax(0, 34%) auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 9px;
    transform: rotateY(0deg) translateZ(.2px) !important;
    isolation: isolate;
    background-color: #17110b !important;
    background-image:
        radial-gradient(circle at 50% 12%, var(--rarity-aura), transparent 36%),
        linear-gradient(160deg, var(--rarity-surface), #17120d 58%) !important;
}

.card-front-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: #17110b;
    background-image:
        radial-gradient(circle at 50% 12%, var(--rarity-aura), transparent 36%),
        linear-gradient(160deg, var(--rarity-surface), #17120d 58%);
}

.card-front > header,
.card-front > .card-art,
.card-front > .card-title-block,
.card-front > .card-text,
.card-front > footer {
    position: relative;
    z-index: 6;
}

.card-front > header,
.card-front > footer {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.card-rarity {
    min-width: 0;
    overflow: hidden;
    color: var(--rarity-color);
    font-size: .61rem;
    font-weight: 950;
    letter-spacing: .105em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-art {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--rarity-border-soft);
    border-radius: 11px;
    background:
        radial-gradient(circle, var(--rarity-art-glow), transparent 61%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
        #0a1724;
}

.trading-card[data-set="boss"] .card-art {
    background:
        radial-gradient(circle, rgba(177, 52, 42, .25), transparent 65%),
        linear-gradient(155deg, rgba(45, 20, 17, .9), rgba(15, 11, 11, .98));
}

.trading-card[data-set="quest"] .card-art {
    background:
        radial-gradient(circle, rgba(83, 139, 219, .24), transparent 65%),
        linear-gradient(155deg, rgba(22, 35, 62, .92), rgba(12, 15, 24, .98));
}

.trading-card[data-set="location"] .card-art {
    background:
        radial-gradient(circle, rgba(74, 170, 126, .22), transparent 65%),
        linear-gradient(155deg, rgba(20, 48, 38, .9), rgba(10, 18, 15, .98));
}

.card-art::before,
.card-art::after {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    border: 1px solid var(--rarity-line);
    transform: rotate(45deg);
}

.card-art::after {
    width: 51%;
    transform: rotate(22deg);
}

.card-art-image {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 70%;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .46));
}

.trading-card[data-art-fit="compact"] .card-art-image {
    max-width: 61%;
    max-height: 61%;
}

.trading-card[data-art-fit="tall"] .card-art-image,
.card-art-image.is-tall-art {
    max-width: 61%;
    max-height: 84%;
}

.trading-card[data-art-fit="balanced"] .card-art-image {
    max-width: 72%;
    max-height: 72%;
}

.card-art-image.is-wide-art {
    max-width: 84%;
    max-height: 62%;
}

.card-art-image.is-hidden,
.card-symbol.is-hidden {
    display: none;
}

.card-symbol {
    position: relative;
    z-index: 1;
    color: #f8fdff;
    font-size: 2.85rem;
    font-weight: 1000;
    letter-spacing: -.08em;
    text-shadow: 0 0 18px var(--rarity-color);
}

.card-title-block {
    min-width: 0;
}

.card-title-block h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #fff6e6;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.card-title-block p {
    margin: 3px 0 0;
    overflow: hidden;
    color: #a99e90;
    font-size: .57rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-text {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    color: #d1c7ba;
    font-size: .62rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}

.trading-card.has-long-description .card-text {
    font-size: .58rem;
    line-height: 1.23;
    -webkit-line-clamp: 6;
}

.trading-card.has-very-long-description .card-art {
    transform: scale(.94);
}

.trading-card.has-very-long-description .card-text {
    font-size: .55rem;
    line-height: 1.19;
    -webkit-line-clamp: 7;
}

.card-category,
.card-stats {
    font-size: .58rem;
    line-height: 1;
}

.card-category {
    min-width: 0;
    overflow: hidden;
    color: #a99e90;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-stats {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    color: var(--rarity-color);
    font-weight: 900;
}

.quantity-badge {
    position: static;
    z-index: 8;
    display: none;
    flex: 0 0 auto;
    min-width: 25px;
    height: 22px;
    padding: 0 7px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rarity-badge-border);
    border-radius: 999px;
    background: rgba(5, 7, 10, .9);
    color: #fff2cb;
    font-size: .61rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

.trading-card.has-quantity .quantity-badge {
    display: inline-flex;
}

.new-ribbon,
.foil-badge {
    position: absolute;
    z-index: 9;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.new-ribbon {
    top: 14px;
    right: -32px;
    width: 112px;
    padding: 4px;
    transform: rotate(45deg);
    background: #73d594;
    color: #07130d;
    font-size: .52rem;
}

.trading-card.is-new .new-ribbon {
    display: flex;
}

.foil-badge {
    top: 31px;
    left: 9px;
    min-width: 54px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 999px;
    background: rgba(19, 14, 22, .82);
    color: #fff8e8;
    font-size: .49rem;
    letter-spacing: .1em;
    line-height: 1;
    box-shadow: 0 5px 13px rgba(0,0,0,.36);
}

.trading-card.is-foil .foil-badge {
    display: flex;
}

.card-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    background:
        repeating-linear-gradient(112deg,
            transparent 0 74px,
            rgba(255,255,255,.02) 82px,
            rgba(255,255,255,.16) 96px,
            rgba(255,255,255,.025) 110px,
            transparent 126px 260px);
    background-size: 260px 260px;
}

/* Foil treatments ---------------------------------------------------------
   Cosmic Swirl is the shared website default. Alt1 may switch every foil card
   to Rainbow Foil or Gold Foil with data-foil-style on <html>. */
.trading-card.is-foil .card-front::before,
.trading-card.is-foil .card-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    will-change: background-position, filter, opacity;
}

.trading-card.is-foil .card-front::before {
    z-index: 3;
    opacity: .56;
    background:
        conic-gradient(from 210deg at 53% 44%,
            rgba(42,206,255,.16) 0%,
            rgba(78,113,255,.4) 13%,
            rgba(239,78,255,.45) 27%,
            rgba(255,194,98,.36) 40%,
            rgba(95,255,204,.2) 53%,
            rgba(46,230,255,.38) 67%,
            rgba(178,83,255,.38) 82%,
            rgba(42,206,255,.16) 100%),
        radial-gradient(ellipse at 52% 45%, rgba(255,244,205,.5), rgba(159,65,255,.22) 13%, rgba(36,125,255,.1) 35%, transparent 64%),
        linear-gradient(145deg, rgba(42,197,255,.08), rgba(218,73,255,.11) 50%, rgba(255,199,78,.08));
    background-repeat: no-repeat;
    background-size: 150% 150%, 135% 135%, 100% 100%;
    animation: tcg-foil-cosmic-loop 9s linear infinite;
}

.trading-card.is-foil .card-front::after {
    z-index: 4;
    inset: 0;
    opacity: .16;
    background: linear-gradient(120deg, transparent 20%, #8ff 35%, #f9c 48%, #ffb 62%, transparent 75%);
    background-repeat: no-repeat;
    background-size: 250% 250%;
    background-position: 0% 0%;
    mix-blend-mode: normal;
    transform: none;
    animation: foilSweep 4s linear infinite;
}

html[data-foil-style="rainbow"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: 1;
    background:
        linear-gradient(
            135deg,
            rgba(255,0,255,.12),
            rgba(0,255,255,.12),
            rgba(255,255,0,.12),
            rgba(255,120,0,.12),
            rgba(0,255,180,.12),
            rgba(255,0,255,.12)
        );
    background-repeat: no-repeat;
    background-size: 300% 300%;
    animation: tcg-rainbow-shift 6s linear infinite;
}

html[data-foil-style="gold"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: 1;
    background:
        linear-gradient(
            120deg,
            rgba(107,67,0,.35),
            rgba(212,175,55,.45),
            rgba(116,74,2,.65),
            rgba(212,175,55,.45),
            rgba(138,90,0,.35)
        );
    background-repeat: no-repeat;
    background-size: 400% 400%;
    animation: tcg-gold-shift 5s linear infinite;
}

html[data-foil-style="starry"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .82;
    background:
        radial-gradient(circle at 12% 14%, rgba(255,255,255,.95) 0 1px, transparent 2.2px),
        radial-gradient(circle at 74% 11%, rgba(128,218,255,.9) 0 1.2px, transparent 2.5px),
        radial-gradient(circle at 88% 38%, rgba(255,226,147,.9) 0 1px, transparent 2.2px),
        radial-gradient(circle at 23% 52%, rgba(195,154,255,.88) 0 1.3px, transparent 2.6px),
        radial-gradient(circle at 64% 66%, rgba(255,255,255,.92) 0 1px, transparent 2.2px),
        radial-gradient(circle at 37% 88%, rgba(113,226,255,.85) 0 1.2px, transparent 2.5px),
        radial-gradient(ellipse at 68% 43%, rgba(72,90,255,.34), transparent 42%),
        radial-gradient(ellipse at 31% 72%, rgba(190,68,255,.27), transparent 46%),
        linear-gradient(145deg, rgba(3,8,30,.94), rgba(10,26,72,.86) 48%, rgba(31,9,56,.9));
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: tcg-starry-night 4.8s ease-in-out infinite alternate;
}

html[data-foil-style="black-hole"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .86;
    background:
        radial-gradient(circle at 50% 47%, #000 0 10%, rgba(0,0,0,.98) 11%, transparent 16%),
        radial-gradient(circle at 50% 47%, transparent 0 15%, rgba(255,238,190,.75) 17%, rgba(128,93,255,.48) 21%, transparent 28%),
        conic-gradient(from 220deg at 50% 47%, rgba(0,0,0,0), rgba(53,205,255,.42), rgba(128,66,255,.62), rgba(255,111,43,.52), rgba(255,226,128,.68), rgba(61,129,255,.48), rgba(0,0,0,0) 82%),
        radial-gradient(ellipse at 50% 47%, rgba(104,55,217,.36), rgba(5,9,24,.88) 56%, rgba(0,0,0,.94));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%, 100% 100%, 148% 148%, 100% 100%;
    animation: tcg-black-hole 7s ease-in-out infinite alternate;
}

html[data-foil-style="christmas"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .68;
    background:
        radial-gradient(circle at 11% 12%, rgba(255,255,255,.95) 0 1.2px, transparent 2.4px),
        radial-gradient(circle at 78% 17%, rgba(255,255,255,.85) 0 1px, transparent 2.2px),
        radial-gradient(circle at 25% 44%, rgba(255,255,255,.9) 0 1.3px, transparent 2.6px),
        radial-gradient(circle at 91% 63%, rgba(255,255,255,.88) 0 1px, transparent 2.2px),
        radial-gradient(circle at 48% 83%, rgba(255,255,255,.92) 0 1.2px, transparent 2.4px),
        linear-gradient(120deg,
            rgba(127,8,22,.78) 0 18%,
            rgba(10,93,51,.72) 18% 36%,
            rgba(222,178,57,.62) 36% 43%,
            rgba(142,10,24,.76) 43% 62%,
            rgba(8,105,57,.72) 62% 81%,
            rgba(240,204,91,.62) 81% 88%,
            rgba(127,8,22,.78) 88% 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: tcg-christmas 4.2s ease-in-out infinite alternate;
}

html[data-foil-style="skulls"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .72;
    background:
        url("../img/foil-skulls.svg"),
        radial-gradient(ellipse at 32% 24%, rgba(72,255,172,.28), transparent 42%),
        radial-gradient(ellipse at 72% 72%, rgba(173,72,255,.3), transparent 48%),
        linear-gradient(145deg, rgba(4,18,15,.92), rgba(19,8,30,.9) 52%, rgba(2,8,9,.95));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    animation: tcg-skulls 4.6s ease-in-out infinite alternate;
}

html[data-foil-style="partyhats"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .82;
    background:
        url("../img/foil-icons/partyhat-blue.webp") 8% 8% / 12% auto no-repeat,
        url("../img/foil-icons/partyhat-red.webp") 49% 5% / 9% auto no-repeat,
        url("../img/foil-icons/partyhat-yellow.webp") 89% 16% / 13% auto no-repeat,
        url("../img/foil-icons/partyhat-purple.webp") 27% 27% / 10% auto no-repeat,
        url("../img/foil-icons/partyhat-white.webp") 70% 34% / 9% auto no-repeat,
        url("../img/foil-icons/partyhat-green.webp") 9% 45% / 13% auto no-repeat,
        url("../img/foil-icons/partyhat-red.webp") 52% 51% / 11% auto no-repeat,
        url("../img/foil-icons/partyhat-blue.webp") 92% 58% / 9% auto no-repeat,
        url("../img/foil-icons/partyhat-white.webp") 34% 68% / 12% auto no-repeat,
        url("../img/foil-icons/partyhat-yellow.webp") 76% 77% / 10% auto no-repeat,
        url("../img/foil-icons/partyhat-purple.webp") 12% 86% / 9% auto no-repeat,
        url("../img/foil-icons/partyhat-green.webp") 51% 93% / 13% auto no-repeat,
        url("../img/foil-icons/partyhat-red.webp") 94% 94% / 8% auto no-repeat,
        radial-gradient(ellipse at 50% 45%, rgba(255,235,158,.34), transparent 44%),
        linear-gradient(145deg, rgba(21,37,76,.76), rgba(70,24,91,.72) 52%, rgba(20,72,62,.75));
    animation: tcg-partyhat-icons 4.4s ease-in-out infinite alternate;
}

html[data-foil-style="halloween-masks"] .trading-card.is-foil .card-front::before {
    inset: 0;
    opacity: .84;
    background:
        url("../img/foil-icons/halloween-mask-blue.png") 8% 7% / 10% auto no-repeat,
        url("../img/foil-icons/halloween-mask-green.webp") 43% 12% / 8% auto no-repeat,
        url("../img/foil-icons/halloween-mask-red.png") 88% 9% / 12% auto no-repeat,
        url("../img/foil-icons/halloween-mask-purple.webp") 23% 27% / 9% auto no-repeat,
        url("../img/foil-icons/halloween-mask-orange.webp") 69% 31% / 11% auto no-repeat,
        url("../img/foil-icons/halloween-mask-yellow.webp") 7% 43% / 8% auto no-repeat,
        url("../img/foil-icons/halloween-mask-cyan.webp") 48% 48% / 12% auto no-repeat,
        url("../img/foil-icons/halloween-mask-blue.png") 92% 51% / 9% auto no-repeat,
        url("../img/foil-icons/halloween-mask-red.png") 27% 64% / 11% auto no-repeat,
        url("../img/foil-icons/halloween-mask-green.webp") 72% 69% / 8% auto no-repeat,
        url("../img/foil-icons/halloween-mask-orange.webp") 10% 80% / 12% auto no-repeat,
        url("../img/foil-icons/halloween-mask-purple.webp") 51% 86% / 9% auto no-repeat,
        url("../img/foil-icons/halloween-mask-yellow.webp") 91% 83% / 11% auto no-repeat,
        url("../img/foil-icons/halloween-mask-cyan.webp") 31% 95% / 8% auto no-repeat,
        url("../img/foil-icons/halloween-mask-green.webp") 75% 96% / 10% auto no-repeat,
        radial-gradient(ellipse at 50% 48%, rgba(255,126,47,.25), transparent 42%),
        linear-gradient(145deg, rgba(20,8,30,.92), rgba(45,12,19,.84) 52%, rgba(5,29,27,.92));
    animation: tcg-halloween-mask-icons 4.2s ease-in-out infinite alternate;
}

@keyframes tcg-foil-cosmic-loop {
    from { background-position: 34% 42%, 62% 56%, 50% 50%; filter: hue-rotate(0deg); }
    to { background-position: 66% 58%, 38% 44%, 50% 50%; filter: hue-rotate(22deg); }
}

@keyframes tcg-rainbow-shift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes tcg-gold-shift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

@keyframes tcg-starry-night {
    from { opacity: .62; filter: brightness(.86) hue-rotate(0deg); }
    to { opacity: .88; filter: brightness(1.24) hue-rotate(14deg); }
}

@keyframes tcg-black-hole {
    from { background-size: 100% 100%, 100% 100%, 142% 142%, 100% 100%; filter: brightness(.9) hue-rotate(0deg); }
    to { background-size: 100% 100%, 100% 100%, 162% 162%, 100% 100%; filter: brightness(1.16) hue-rotate(28deg); }
}

@keyframes tcg-christmas {
    from { opacity: .58; filter: saturate(.92) brightness(.9); }
    to { opacity: .76; filter: saturate(1.22) brightness(1.12); }
}

@keyframes tcg-skulls {
    from { opacity: .56; filter: brightness(.82) hue-rotate(0deg); }
    to { opacity: .82; filter: brightness(1.22) hue-rotate(18deg); }
}

@keyframes tcg-partyhat-icons {
    from { opacity: .68; filter: brightness(.88) saturate(.94); }
    to { opacity: .92; filter: brightness(1.2) saturate(1.18); }
}

@keyframes tcg-halloween-mask-icons {
    from { opacity: .7; filter: brightness(.84) saturate(.9); }
    to { opacity: .94; filter: brightness(1.18) saturate(1.2); }
}

@keyframes foilSweep {
    0% { background-position: 0% 0%; opacity: 0; }
    10% { background-position: 10% 10%; opacity: .16; }
    90% { background-position: 90% 90%; opacity: .16; }
    100% { background-position: 100% 100%; opacity: 0; }
}

/* Alt1 shipped Chromium 83 before moving to Chromium 108. Chromium 83 does
   not understand aspect-ratio, so retain the classic percentage-box fallback
   for stale installations while modern builds use the native property above. */
@supports not (aspect-ratio: 1 / 1) {
    .trading-card {
        height: 0;
        padding-top: 134.4037%;
    }

    .card-art::before,
    .card-art::after {
        height: 78%;
    }
}

.card-back {
    transform: rotateY(180deg) translateZ(.2px) !important;
    background-color: #17120d !important;
    background-image: linear-gradient(160deg, #2a2118, #0c0a08) !important;
}

.card-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(17px - 2px);
    background: #17120d;
}

.trading-card.is-face-down .card-front,
.trading-card.is-revealed .card-front {
    transform: rotateY(0deg) translateZ(.2px) !important;
}

.trading-card.is-face-down .card-back,
.trading-card.is-revealed .card-back {
    transform: rotateY(180deg) translateZ(.2px) !important;
}

.trading-card.is-face-down .card-rotor {
    transform: rotateY(180deg);
}

.trading-card.is-revealed .card-rotor {
    animation: shared-solid-card-flip 720ms cubic-bezier(.2,.82,.2,1) both;
}

@keyframes shared-solid-card-flip {
    0% { transform: rotateY(180deg); }
    55% { transform: rotateY(82deg); }
    78% { transform: rotateY(-9deg); }
    100% { transform: rotateY(0deg); }
}

.trading-card.is-unowned {
    opacity: .48;
    filter: grayscale(1) brightness(.48);
}

.trading-card[data-rarity="mythic"] .card-face {
    box-shadow: 0 16px 38px rgba(0,0,0,.5), 0 0 30px rgba(255,101,213,.28);
}

.trading-card[data-rarity="godly"] .card-face {
    border-width: 3px;
    box-shadow: 0 18px 42px rgba(0,0,0,.54), 0 0 38px rgba(255,243,164,.42);
}

.trading-card[data-rarity="godly"] .card-front,
.trading-card[data-rarity="godly"] .card-front-surface {
    background-color: #1c1509 !important;
    background-image:
        radial-gradient(circle at 50% 22%, rgba(255,248,190,.18), transparent 44%),
        linear-gradient(160deg, #514014, #1c1509 58%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .trading-card.is-revealed .card-rotor {
        animation-duration: 1ms;
    }

    .trading-card .card-shine,
    .trading-card.is-foil .card-front::before,
    .trading-card.is-foil .card-front::after {
        animation: none !important;
    }
}

.trading-card {
    transition: transform .2s ease, filter .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .website-card-shell:hover .trading-card {
        transform: translateY(-3px);
    }
}

/* Face-down pack cards never disclose rarity. Their only hover treatment is
   a neutral outer glow around the card back: no border, shine, or particles. */
.card-fan .trading-card.is-face-down .card-face {
    border-width: 2px;
    border-color: transparent;
    box-shadow: 0 15px 34px rgba(0,0,0,.56);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.card-fan .trading-card.is-face-down::before,
.card-fan .trading-card.is-face-down::after {
    content: none;
}

@media (hover: hover) and (pointer: fine) {
    .card-fan .trading-card.is-face-down:hover .card-face,
    .card-fan .trading-card.is-face-down:focus-visible .card-face {
        border-color: transparent;
        box-shadow:
            0 17px 38px rgba(0,0,0,.62),
            0 0 22px rgba(231,195,111,.62),
            0 0 42px rgba(108,194,216,.18);
    }
}

/* v3.2.6 reveal: one uninterrupted rotation through the 90-degree edge. Keeping
   the midpoint free of keyframes prevents embedded Chromium from easing twice
   exactly when the face changes from back to front. */
.card-fan .trading-card.is-revealed {
    animation: opening-card-land 820ms cubic-bezier(.2,.74,.24,1) both !important;
}
.card-fan .trading-card.is-revealed .card-rotor {
    animation: opening-card-flip 820ms cubic-bezier(.2,.68,.22,1) both;
    will-change: transform;
}
.card-fan .trading-card.is-revealed::after {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 2px;
    overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(
        112deg,
        transparent 41%,
        rgba(255,255,255,.08) 45%,
        rgba(255,255,255,.48) 49%,
        rgba(255,255,255,.16) 53%,
        transparent 58%
    );
    mix-blend-mode: screen;
    pointer-events: none;
    animation: opening-card-glint 720ms ease-out both;
}

@keyframes opening-card-land {
    0% { transform: translateY(28px) scale(.9) rotateZ(-2deg); filter: brightness(.7); }
    48% { transform: translateY(-13px) scale(1.055) rotateZ(.8deg); filter: brightness(1.24); }
    72% { transform: translateY(4px) scale(.988) rotateZ(-.25deg); }
    100% { transform: translateY(0) scale(1) rotateZ(0); filter: brightness(1); }
}
@keyframes opening-card-flip {
    0% { transform: rotateY(180deg) scale(.96); }
    88% { transform: rotateY(-4deg) scale(1.01); }
    100% { transform: rotateY(0deg) scale(1); }
}
@keyframes opening-card-glint {
    0%,32% { opacity: 0; transform: translateX(-72%) skewX(-9deg); }
    48% { opacity: .62; }
    76%,100% { opacity: 0; transform: translateX(72%) skewX(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
    .card-fan .trading-card.is-revealed,
    .card-fan .trading-card.is-revealed .card-rotor,
    .card-fan .trading-card.is-revealed::after {
        animation-duration: 1ms !important;
    }
}