/* ==========================================================================
   3D CARD PHYSICS, HOLOGRAPHIC FOIL SHADERS & BOOSTER PACK VISUALS
   ========================================================================== */

:root {
    --card-width: 220px;
    --card-height: 310px;
    --card-radius: 12px;
    --c-common: #94a3b8;
    --c-uncommon: #10b981;
    --c-uncommon-glow: rgba(16, 185, 129, 0.45);
    --c-rare: #0284c7;
    --c-rare-glow: rgba(2, 132, 199, 0.55);
    --c-very-rare: #9333ea;
    --c-very-rare-glow: rgba(147, 51, 234, 0.65);
    --c-legendary: #f59e0b;
    --c-legendary-glow: rgba(245, 158, 11, 0.8);
}

/* ==================== 3D Card Base ==================== */
.card-3d-wrapper {
    width: var(--card-width);
    height: var(--card-height);
    perspective: 1000px;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    border-radius: var(--card-radius);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 
        calc(var(--pointer-x, 0) * -6px) calc(16px + var(--pointer-y, 0) * 6px) 32px -5px rgba(0, 0, 0, 0.85),
        calc(var(--pointer-x, 0) * -3px) calc(8px + var(--pointer-y, 0) * 3px) 14px -6px rgba(0, 0, 0, 0.60),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    will-change: transform;
}

/* ==================== Physical 3D Edge Bevel & Gilded Rim Sheen ==================== */
/* Simulates light catching the physical rounded 350gsm die-cut paperboard edge */
.card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 25;
    padding: 1.5px;
    background: linear-gradient(
        var(--glare-angle, 135deg),
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 45%,
        transparent 65%,
        rgba(255, 255, 255, 0.25) 85%,
        rgba(255, 255, 255, 0.55) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: var(--glare-opacity, 0);
    transition: opacity 0.25s ease;
}

.rarity-legendary .card-inner::after {
    background: linear-gradient(
        var(--glare-angle, 135deg),
        rgba(254, 240, 138, 0.95) 0%,
        rgba(245, 158, 11, 0.60) 25%,
        transparent 45%,
        transparent 65%,
        rgba(245, 158, 11, 0.50) 85%,
        rgba(254, 240, 138, 0.90) 100%
    );
    box-shadow: inset 0 0 4px rgba(245, 158, 11, 0.4);
}

.rarity-very-rare .card-inner::after {
    background: linear-gradient(
        var(--glare-angle, 135deg),
        rgba(233, 213, 255, 0.85) 0%,
        rgba(168, 85, 247, 0.50) 25%,
        transparent 45%,
        transparent 65%,
        rgba(168, 85, 247, 0.45) 85%,
        rgba(233, 213, 255, 0.80) 100%
    );
}

.rarity-rare .card-inner::after {
    background: linear-gradient(
        var(--glare-angle, 135deg),
        rgba(186, 230, 253, 0.80) 0%,
        rgba(14, 165, 233, 0.45) 25%,
        transparent 45%,
        transparent 65%,
        rgba(14, 165, 233, 0.40) 85%,
        rgba(186, 230, 253, 0.75) 100%
    );
}

.rarity-uncommon .card-inner::after {
    background: linear-gradient(
        var(--glare-angle, 135deg),
        rgba(167, 243, 208, 0.70) 0%,
        rgba(16, 185, 129, 0.40) 25%,
        transparent 45%,
        transparent 65%,
        rgba(16, 185, 129, 0.35) 85%,
        rgba(167, 243, 208, 0.65) 100%
    );
}

.card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    backface-visibility: hidden;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border: 2px solid #334155;
    box-sizing: border-box;
}

/* ==================== Holographic Specular Glare & Optical Foil ==================== */
/* Physical Selective Foil / White-Ink Underprint Mask:
   Protects the central artwork from excessive reflection blowout while preserving
   vibrant photographic contrast and rich blacks. The frame, header, flavor box,
   footer, and borders retain full foil & glare brilliance, while the artwork window
   maintains a tasteful, authentic ~22% selective collector's sheen. */
.card-glare {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 20;
    opacity: var(--glare-opacity, 0);
    background: radial-gradient(
        circle 140px at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.40) 0%,
        rgba(255, 255, 255, 0.10) 35%,
        transparent 70%
    );
    mix-blend-mode: overlay;
    transition: opacity 0.25s ease;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0px,
        #000 36px,
        rgba(0, 0, 0, 0.22) 44px,
        rgba(0, 0, 0, 0.22) 166px,
        #000 174px,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0px,
        #000 36px,
        rgba(0, 0, 0, 0.22) 44px,
        rgba(0, 0, 0, 0.22) 166px,
        #000 174px,
        #000 100%
    );
}

.card-foil-sheen {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 19;
    transform: translateZ(1px);
    opacity: 0;
    transition: opacity 0.25s ease;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0px,
        #000 36px,
        rgba(0, 0, 0, 0.24) 44px,
        rgba(0, 0, 0, 0.24) 166px,
        #000 174px,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0px,
        #000 36px,
        rgba(0, 0, 0, 0.24) 44px,
        rgba(0, 0, 0, 0.24) 166px,
        #000 174px,
        #000 100%
    );
}

/* Tier 1: Common - Unlaminated Matte Linen Cardstock (No Foil Layer) */
.rarity-common .card-foil-sheen {
    display: none;
    opacity: 0 !important;
}

.rarity-common .card-glare {
    background: radial-gradient(
        farthest-corner circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.26) 0%,
        rgba(255, 255, 255, 0.06) 35%,
        transparent 65%
    );
    mix-blend-mode: soft-light;
}

/* Tier 2: Uncommon - Selective Cold-Foil / Polymer Spot-Gloss Varnish */
.rarity-uncommon .card-glare {
    background: radial-gradient(
        circle 140px at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.38) 0%,
        rgba(167, 243, 208, 0.20) 30%,
        transparent 70%
    );
    mix-blend-mode: screen;
}

.rarity-uncommon .card-foil-sheen {
    background:
        /* Soft localized specular highlight */
        radial-gradient(
            circle 150px at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, 0.38) 0%,
            rgba(167, 243, 208, 0.18) 35%,
            transparent 70%
        ),
        /* Subtle directional cold-foil gleam */
        linear-gradient(
            var(--glare-angle, 135deg),
            transparent 20%,
            rgba(16, 185, 129, 0.08) 36%,
            rgba(255, 255, 255, 0.28) 48%,
            rgba(167, 243, 208, 0.20) 52%,
            rgba(16, 185, 129, 0.08) 64%,
            transparent 80%
        );
    background-position:
        0 0,
        calc(50% + var(--foil-shift-x, 0%)) calc(50% + var(--foil-shift-y, 0%));
    mix-blend-mode: color-dodge;
    filter: brightness(1.06) contrast(1.04);
    opacity: 0.10;
}

.card-3d-wrapper.rarity-uncommon:hover .card-foil-sheen {
    opacity: 0.45;
}

/* Tier 3: Rare - Traditional Metallic Holofoil with Micro-Etched Diffraction Grating */
.rarity-rare .card-glare {
    background: radial-gradient(
        circle 145px at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.42) 0%,
        rgba(186, 230, 253, 0.25) 30%,
        transparent 70%
    );
    mix-blend-mode: screen;
}

.rarity-rare .card-foil-sheen {
    background:
        /* Micro-groove grating texture - ultra-subtle physical grain */
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 3px
        ),
        /* Concentric specular hotspot */
        radial-gradient(
            circle 160px at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, 0.45) 0%,
            rgba(56, 189, 248, 0.20) 35%,
            transparent 70%
        ),
        /* Anisotropic metallic holofoil sweep */
        linear-gradient(
            var(--glare-angle, 135deg),
            transparent 10%,
            rgba(14, 165, 233, 0.14) 28%,
            rgba(186, 230, 253, 0.38) 45%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(186, 230, 253, 0.38) 55%,
            rgba(14, 165, 233, 0.14) 72%,
            transparent 90%
        );
    background-position:
        0 0,
        0 0,
        calc(50% + var(--foil-shift-x, 0%)) calc(50% + var(--foil-shift-y, 0%));
    mix-blend-mode: color-dodge;
    filter: brightness(1.10) contrast(1.06);
    opacity: 0.15;
}

.card-3d-wrapper.rarity-rare:hover .card-foil-sheen {
    opacity: 0.48;
}

/* Tier 4: Very Rare - Secret Rare Cosmic Refractor / Multi-Spectral Prismatic Dispersion */
.rarity-very-rare .card-glare {
    background: radial-gradient(
        circle 150px at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.46) 0%,
        rgba(216, 180, 254, 0.28) 25%,
        rgba(56, 189, 248, 0.15) 50%,
        transparent 75%
    );
    mix-blend-mode: screen;
}

.rarity-very-rare .card-foil-sheen {
    background:
        /* Ultra-delicate micro-prism lattice */
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.016) 0px,
            rgba(255, 255, 255, 0.016) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 4px
        ),
        /* Soft 3D chromatic dispersion flare */
        radial-gradient(
            ellipse 170px 170px at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, 0.48) 0%,
            rgba(233, 213, 255, 0.26) 22%,
            rgba(244, 114, 182, 0.16) 44%,
            rgba(56, 189, 248, 0.12) 66%,
            transparent 80%
        ),
        /* Refined pastel chromatic wave */
        linear-gradient(
            var(--glare-angle, 135deg),
            transparent 8%,
            rgba(192, 132, 252, 0.18) 22%,
            rgba(244, 114, 182, 0.25) 38%,
            rgba(255, 255, 255, 0.42) 50%,
            rgba(56, 189, 248, 0.22) 62%,
            rgba(168, 85, 247, 0.18) 78%,
            transparent 92%
        );
    background-position:
        0 0,
        0 0,
        0 0,
        calc(50% + var(--foil-shift-x, 0%)) calc(50% + var(--foil-shift-y, 0%));
    mix-blend-mode: color-dodge;
    filter: brightness(1.12) contrast(1.08);
    opacity: 0.18;
}

.card-3d-wrapper.rarity-very-rare:hover .card-foil-sheen {
    opacity: 0.52;
}

/* Tier 5: Legendary - Polychrome Iridescent Prismatic Glare */
.rarity-legendary .card-glare {
    background:
        /* Polychrome spectral iris corona */
        radial-gradient(
            circle 175px at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, 0.65) 0%,
            rgba(56, 189, 248, 0.48) 16%,
            rgba(129, 140, 248, 0.44) 28%,
            rgba(192, 132, 252, 0.42) 42%,
            rgba(244, 63, 94, 0.38) 56%,
            rgba(245, 158, 11, 0.35) 70%,
            rgba(16, 185, 129, 0.28) 84%,
            transparent 100%
        ),
        /* Rotational polychrome chromatic dispersion */
        conic-gradient(
            from var(--glare-angle, 135deg) at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(244, 63, 94, 0.22) 0deg,
            rgba(168, 85, 247, 0.26) 60deg,
            rgba(56, 189, 248, 0.28) 120deg,
            rgba(16, 185, 129, 0.24) 180deg,
            rgba(245, 158, 11, 0.26) 240deg,
            rgba(244, 63, 94, 0.22) 300deg,
            rgba(244, 63, 94, 0.22) 360deg
        ),
        /* Sweeping polychrome iridescent spectrum ribbon */
        linear-gradient(
            var(--glare-angle, 135deg),
            transparent 6%,
            rgba(6, 182, 212, 0.30) 18%,
            rgba(99, 102, 241, 0.34) 30%,
            rgba(168, 85, 247, 0.38) 42%,
            rgba(244, 63, 94, 0.42) 52%,
            rgba(251, 191, 36, 0.40) 64%,
            rgba(34, 197, 94, 0.32) 76%,
            rgba(14, 165, 233, 0.25) 88%,
            transparent 96%
        );
    mix-blend-mode: screen;
    filter: saturate(1.30) brightness(1.08);
    animation: polychrome-chroma-flow 7s ease-in-out infinite alternate;
}

@keyframes polychrome-chroma-flow {
    0% {
        filter: saturate(1.30) brightness(1.08) hue-rotate(0deg);
    }
    50% {
        filter: saturate(1.35) brightness(1.12) hue-rotate(30deg);
    }
    100% {
        filter: saturate(1.30) brightness(1.08) hue-rotate(-25deg);
    }
}

/* Tier 5: Legendary - Masterpiece Gilded & Prismatic Starlight Foil */
.rarity-legendary .card-foil-sheen {
    background:
        /* Micro-starlight pinpoints - subtle physical sparkle */
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.12) 0px,
            rgba(255, 255, 255, 0.12) 0.8px,
            transparent 1.2px
        ) 0 0 / 8px 8px,
        /* Dynamic gilded metallic gold specular center */
        radial-gradient(
            circle 180px at var(--glare-x, 50%) var(--glare-y, 50%),
            rgba(255, 255, 255, 0.52) 0%,
            rgba(254, 240, 138, 0.38) 22%,
            rgba(245, 158, 11, 0.20) 48%,
            transparent 75%
        ),
        /* Warm champagne & opalescent starlight ribbon */
        linear-gradient(
            var(--glare-angle, 135deg),
            transparent 10%,
            rgba(245, 158, 11, 0.18) 22%,
            rgba(254, 240, 138, 0.40) 36%,
            rgba(254, 240, 138, 0.48) 50%,
            rgba(251, 207, 232, 0.35) 64%,
            rgba(125, 211, 252, 0.20) 78%,
            transparent 90%
        );
    background-position:
        calc(var(--foil-shift-x, 0%) * 0.5) calc(var(--foil-shift-y, 0%) * 0.5),
        0 0,
        calc(50% + var(--foil-shift-x, 0%)) calc(50% + var(--foil-shift-y, 0%));
    mix-blend-mode: color-dodge;
    filter: brightness(1.14) contrast(1.08);
    opacity: 0.22;
}

.card-3d-wrapper.rarity-legendary:hover .card-foil-sheen {
    opacity: 0.58;
}

/* ==================== High-Rarity Ambient Halos ==================== */
.card-aura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateZ(-10px);
    display: none;
}

/* Very Rare: Luminous Ethereal Amethyst Halo */
.rarity-very-rare .card-aura {
    display: block;
    opacity: 0.55;
    transition: opacity 0.35s ease;
}

.rarity-very-rare .card-aura::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: calc(var(--card-radius) + 16px);
    background: radial-gradient(
        ellipse at center,
        rgba(192, 132, 252, 0.45) 0%,
        rgba(168, 85, 247, 0.28) 45%,
        rgba(236, 72, 153, 0.12) 70%,
        transparent 100%
    );
    filter: blur(18px);
    animation: very-rare-halo-breathe 4.5s ease-in-out infinite alternate;
}

.card-3d-wrapper.rarity-very-rare:hover .card-aura {
    opacity: 0.90;
}

@keyframes very-rare-halo-breathe {
    from { transform: scale(0.98); opacity: 0.50; }
    to { transform: scale(1.02); opacity: 0.85; }
}

/* Legendary: Solar Corona Halo */
.rarity-legendary .card-aura {
    display: block;
    opacity: 0.70;
    transition: opacity 0.35s ease;
}

.rarity-legendary .card-aura::before {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: calc(var(--card-radius) + 22px);
    background: radial-gradient(
        ellipse at center,
        rgba(254, 240, 138, 0.60) 0%,
        rgba(245, 158, 11, 0.40) 45%,
        rgba(217, 119, 6, 0.15) 70%,
        transparent 100%
    );
    filter: blur(22px);
    animation: legendary-corona-breathe 4s ease-in-out infinite alternate;
}

.rarity-legendary .card-aura::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: calc(var(--card-radius) + 10px);
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.50) 0%,
        rgba(254, 240, 138, 0.30) 50%,
        transparent 80%
    );
    filter: blur(12px);
    opacity: 0.80;
}

.card-3d-wrapper.rarity-legendary:hover .card-aura {
    opacity: 1;
}

@keyframes legendary-corona-breathe {
    from { transform: scale(0.97); opacity: 0.65; }
    to { transform: scale(1.04); opacity: 0.95; }
}

.locked .card-aura {
    display: none !important;
}

/* ==================== Legendary Realistic Electric Thunder FX ==================== */
.card-thunder-fx {
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--card-radius) + 2px);
    pointer-events: none;
    z-index: 25;
    transform: translateZ(2px);
    overflow: hidden;
    mix-blend-mode: screen;
}

.thunder-bolt-branch {
    position: absolute;
    pointer-events: none;
    filter:
        drop-shadow(0 0 2px #ffffff)
        drop-shadow(0 0 6px #38bdf8)
        drop-shadow(0 0 14px #fbbf24);
}

.thunder-bolt-branch.bolt-left {
    top: 0;
    bottom: 0;
    left: -2px;
    width: 28px;
    animation: bolt-left-crackle 3.4s infinite ease-in-out;
}

.thunder-bolt-branch.bolt-right {
    top: 0;
    bottom: 0;
    right: -2px;
    width: 28px;
    animation: bolt-right-crackle 4.1s infinite ease-in-out 0.6s;
}

.thunder-bolt-branch.bolt-top {
    left: 4px;
    right: 4px;
    top: -2px;
    height: 24px;
    animation: bolt-top-crackle 2.8s infinite ease-in-out 1.2s;
}

@keyframes bolt-left-crackle {
    0%, 72%, 84%, 100% { opacity: 0; transform: scaleY(0.96); }
    74% { opacity: 0.95; transform: scaleY(1.02); }
    76% { opacity: 0.15; transform: scaleY(0.98); }
    78% { opacity: 1; transform: scaleY(1); }
    81% { opacity: 0.3; transform: scaleY(1.01); }
    83% { opacity: 0.9; transform: scaleY(0.99); }
}

@keyframes bolt-right-crackle {
    0%, 68%, 80%, 100% { opacity: 0; transform: scaleY(0.96); }
    70% { opacity: 0.9; transform: scaleY(1.01); }
    72% { opacity: 0.2; transform: scaleY(0.99); }
    75% { opacity: 1; transform: scaleY(1.02); }
    77% { opacity: 0.4; transform: scaleY(0.98); }
    79% { opacity: 0.85; transform: scaleY(1); }
}

@keyframes bolt-top-crackle {
    0%, 75%, 86%, 100% { opacity: 0; transform: scaleX(0.96); }
    77% { opacity: 0.95; transform: scaleX(1.02); }
    79% { opacity: 0.2; transform: scaleX(0.99); }
    81% { opacity: 1; transform: scaleX(1.01); }
    84% { opacity: 0.3; transform: scaleX(0.98); }
}

.card-3d-wrapper.rarity-legendary:hover .thunder-bolt-branch {
    filter:
        drop-shadow(0 0 3px #ffffff)
        drop-shadow(0 0 9px #38bdf8)
        drop-shadow(0 0 18px #fbbf24);
}

.thunder-corona-surge {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 10px rgba(56, 189, 248, 0.45),
        0 0 14px rgba(56, 189, 248, 0.35),
        0 0 28px rgba(245, 158, 11, 0.30);
    opacity: 0.45;
    animation: thunder-surge-pulse 3s ease-in-out infinite alternate;
}

@keyframes thunder-surge-pulse {
    0% { opacity: 0.30; filter: brightness(1); }
    40% { opacity: 0.55; filter: brightness(1.15); }
    65% { opacity: 0.40; filter: brightness(1.05); }
    82% { opacity: 0.85; filter: brightness(1.30); }
    90% { opacity: 0.50; filter: brightness(1.10); }
    100% { opacity: 0.35; filter: brightness(1); }
}

.card-3d-wrapper.rarity-legendary:hover .thunder-corona-surge {
    opacity: 0.75;
}

/* ==================== Rarity Physical Borders & Edge Bevels ==================== */
.rarity-common .card-face {
    border-color: #3b4758;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.60),
        inset 0 0 14px rgba(0, 0, 0, 0.80);
}

.rarity-uncommon .card-face {
    border-color: #059669;
    box-shadow:
        inset 0 1px 1px rgba(167, 243, 208, 0.60),
        inset 0 -1px 1px rgba(4, 120, 87, 0.60),
        inset 0 0 12px rgba(6, 78, 59, 0.35),
        0 0 14px rgba(16, 185, 129, 0.22);
}

.rarity-rare .card-face {
    border-color: #0284c7;
    box-shadow:
        inset 0 1px 1px rgba(186, 230, 253, 0.70),
        inset 0 -1px 1px rgba(3, 105, 161, 0.70),
        inset 0 0 14px rgba(2, 132, 199, 0.35),
        0 0 18px rgba(14, 165, 233, 0.28);
}

.rarity-very-rare .card-face {
    border-color: #9333ea;
    box-shadow:
        inset 0 1px 1.5px rgba(233, 213, 255, 0.75),
        inset 0 -1px 1.5px rgba(107, 33, 168, 0.75),
        inset 0 0 16px rgba(147, 51, 234, 0.40),
        0 0 24px rgba(168, 85, 247, 0.32);
}

.rarity-legendary .card-face {
    border-color: #f59e0b;
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 2px rgba(180, 83, 9, 0.85),
        inset 0 0 0 1.5px rgba(254, 240, 138, 0.80),
        inset 0 0 20px rgba(245, 158, 11, 0.45),
        0 0 28px rgba(245, 158, 11, 0.40),
        0 0 8px rgba(254, 240, 138, 0.55);
}

.card-3d-wrapper.rarity-common:hover .card-face {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.70),
        inset 0 0 16px rgba(0, 0, 0, 0.85),
        0 14px 28px rgba(0, 0, 0, 0.65);
}

.card-3d-wrapper.rarity-uncommon:hover .card-face {
    box-shadow:
        inset 0 1.5px 1.5px rgba(167, 243, 208, 0.80),
        inset 0 -1.5px 1.5px rgba(4, 120, 87, 0.70),
        inset 0 0 14px rgba(6, 78, 59, 0.45),
        0 16px 32px rgba(0, 0, 0, 0.70),
        0 0 20px rgba(16, 185, 129, 0.38);
}

.card-3d-wrapper.rarity-rare:hover .card-face {
    box-shadow:
        inset 0 1.5px 1.5px rgba(186, 230, 253, 0.90),
        inset 0 -1.5px 1.5px rgba(3, 105, 161, 0.80),
        inset 0 0 16px rgba(2, 132, 199, 0.45),
        0 18px 36px rgba(0, 0, 0, 0.75),
        0 0 26px rgba(14, 165, 233, 0.45);
}

.card-3d-wrapper.rarity-very-rare:hover .card-face {
    box-shadow:
        inset 0 1.5px 2px rgba(233, 213, 255, 0.95),
        inset 0 -1.5px 2px rgba(107, 33, 168, 0.85),
        inset 0 0 18px rgba(147, 51, 234, 0.50),
        0 20px 40px rgba(0, 0, 0, 0.80),
        0 0 32px rgba(168, 85, 247, 0.50);
}

.card-3d-wrapper.rarity-legendary:hover .card-face {
    box-shadow:
        inset 0 1.5px 2px #ffffff,
        inset 0 -2px 2.5px rgba(180, 83, 9, 0.95),
        inset 0 0 0 2px rgba(254, 240, 138, 0.95),
        inset 0 0 24px rgba(245, 158, 11, 0.60),
        0 22px 45px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(245, 158, 11, 0.60);
}

/* ==================== Card Content Layout ==================== */
.card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    z-index: 2;
}

.card-title-wrap { flex: 1; min-width: 0; line-height: 1.1; }
.card-name {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 11.5px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95), calc(var(--pointer-x, 0) * -0.8px) calc(var(--pointer-y, 0) * -0.8px) 1.5px rgba(255, 255, 255, 0.35);
}

.rarity-rare .card-name {
    background: linear-gradient(90deg, #e0f2fe 0%, #38bdf8 30%, #ffffff 50%, #38bdf8 70%, #e0f2fe 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-sapphire-shimmer 5s linear infinite;
    font-weight: 800;
}
@keyframes text-sapphire-shimmer {
    to { background-position: 200% center; }
}

.rarity-very-rare .card-name {
    background: linear-gradient(90deg, #e9d5ff 0%, #c084fc 25%, #ffffff 50%, #f472b6 75%, #e9d5ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-cosmic-shimmer 4s linear infinite;
    font-weight: 800;
}
@keyframes text-cosmic-shimmer {
    to { background-position: 200% center; }
}
.rarity-legendary .card-name {
    background: linear-gradient(90deg, #fef08a 0%, #f59e0b 25%, #ffffff 50%, #f59e0b 75%, #fef08a 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    animation: text-gold-shimmer 3.5s linear infinite; font-weight: 800;
}
@keyframes text-gold-shimmer { to { background-position: 200% center; } }

.card-set-tag {
    font-size: 8.5px;
    color: #94a3b8;
    font-family: var(--font-mono, 'Space Mono', monospace);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Rarity Symbol Gems - Faceted AAA Crystal Cuts */
.card-rarity-gem { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-rarity-gem .rarity-star {
    transition: filter 0.2s ease, transform 0.2s ease;
}
.card-3d-wrapper:hover .card-rarity-gem .rarity-star {
    transform: scale(calc(1 + var(--glare-opacity, 0) * 0.12));
    filter: drop-shadow(0 0 calc(3px + var(--glare-opacity, 0) * 4px) currentColor) drop-shadow(0 0 1.5px #ffffff);
}
.card-rarity-gem.gem-common {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #94a3b8 0%, #475569 70%, #1e293b 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}
.card-rarity-gem.gem-uncommon {
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    border-radius: 1.5px;
    background: radial-gradient(circle at 35% 35%, #a7f3d0 0%, #10b981 50%, #064e3b 100%);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 0 8px rgba(16, 185, 129, 0.6);
}
.card-rarity-gem.gem-rare .rarity-star {
    width: 11px;
    height: 11px;
    fill: #38bdf8;
    filter: drop-shadow(0 0 3px #0284c7) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.card-rarity-gem.gem-very-rare { display: inline-flex; gap: 1.5px; }
.card-rarity-gem.gem-very-rare .rarity-star {
    width: 10px;
    height: 10px;
    fill: #e879f9;
    filter: drop-shadow(0 0 4px #9333ea) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.card-rarity-gem.gem-legendary { display: inline-flex; gap: 1.5px; }
.card-rarity-gem.gem-legendary .rarity-star {
    width: 9.5px;
    height: 9.5px;
    fill: #fef08a;
    filter: drop-shadow(0 0 4px #f59e0b) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

/* Artwork Frame - Die-Cut Collector's Window */
.card-artwork-frame {
    height: 135px;
    width: calc(100% - 12px);
    margin: 6px auto 0 auto;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    background: #020617;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        inset calc(var(--pointer-x, 0) * 3px) calc(var(--pointer-y, 0) * 3px) 6px rgba(0, 0, 0, 0.70),
        inset 0 3px 8px rgba(0, 0, 0, 0.90),
        inset 0 0 0 1px rgba(0, 0, 0, 0.60),
        0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Lenticular Parallax Depth on Artwork */
.card-artwork-frame .card-photo-img,
.card-artwork-frame .card-art-placeholder {
    transform: scale(1.06) translate(calc(var(--pointer-x, 0) * -3.5px), calc(var(--pointer-y, 0) * -3.5px));
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.rarity-uncommon .card-artwork-frame {
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.90),
        inset 0 0 0 1px rgba(52, 211, 153, 0.25),
        0 0 8px rgba(16, 185, 129, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.50);
}

.rarity-rare .card-artwork-frame {
    border-color: rgba(56, 189, 248, 0.50);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, 0.90),
        inset 0 0 0 1px rgba(56, 189, 248, 0.30),
        0 0 10px rgba(14, 165, 233, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.50);
}

.rarity-very-rare .card-artwork-frame {
    border-color: rgba(192, 132, 252, 0.60);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.92),
        inset 0 0 0 1px rgba(216, 180, 254, 0.35),
        0 0 14px rgba(168, 85, 247, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.50);
}

.rarity-legendary .card-artwork-frame {
    border-color: rgba(245, 158, 11, 0.75);
    box-shadow:
        inset 0 3px 10px rgba(0, 0, 0, 0.95),
        inset 0 0 0 1px rgba(254, 240, 138, 0.50),
        0 0 18px rgba(245, 158, 11, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.50);
}

/* ==================== Real-Life Picture Physical Effects ==================== */

/* 1. Dynamic Parallax & Ink Gloss Reflection */
.card-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
    filter: contrast(1.06) saturate(1.04) brightness(calc(1 + var(--glare-opacity, 0) * 0.08));
    image-rendering: auto;
    transition: filter 0.2s ease;
}
.card-artwork-frame.has-photo .card-photo-img { display: block; }
.card-artwork-frame.has-photo .card-art-placeholder { display: none; }
.card-art-placeholder, .placeholder-art-svg { width: 100%; height: 100%; }

/* 2. Physical Die-Cut Shadowbox Ambient Occlusion Vignette */
.card-art-vignette {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(
        ellipse at calc(50% + var(--pointer-x, 0) * 12%) calc(50% + var(--pointer-y, 0) * 12%),
        transparent 58%,
        rgba(0, 0, 0, 0.28) 82%,
        rgba(0, 0, 0, 0.60) 100%
    );
    box-shadow: 
        inset calc(var(--pointer-x, 0) * 3px) calc(var(--pointer-y, 0) * 3px) 6px rgba(0, 0, 0, 0.65),
        inset 0 1px 1px rgba(255, 255, 255, 0.10);
    mix-blend-mode: multiply;
}

/* 4. Micro-Lithographic Offset Printing Matrix & Lenticular Lineation */
.card-art-lens-grid {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    opacity: calc(var(--glare-opacity, 0) * 0.30);
    transition: opacity 0.25s ease;
    background-image:
        /* Micro-halftone offset printing rosette matrix */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0.6px, transparent 0.9px),
        /* Micro-lenticular optical vertical lineation */
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 4px);
    background-size: 3px 3px, 4px 100%;
    mix-blend-mode: overlay;
}

/* Card-Specific Artwork Framing & Alignment Adjustments */
[data-card-id="elo-003"] .card-photo-img { object-position: center 28%; } /* Card #045: L'œil critique - slightly moved to top */
[data-card-id="elo-004"] .card-photo-img { object-position: center 32%; } /* Card #046: Opération bigoudis - slightly moved to top */
[data-card-id="elo-005"] .card-photo-img { object-position: center 18%; } /* Card #047: Ici c'est Élodie - moved toward top */
[data-card-id="elo-015"] .card-photo-img { object-position: center 75%; } /* Card #057: Angle fatal - moved toward bottom */
[data-card-id="elo-017"] .card-photo-img { object-position: center 20%; } /* Card #059: Razzia au supermarché - moved toward top */
[data-card-id="theo-002"] .card-photo-img { object-position: center 38%; } /* Card #065: L'ami des canidés - moved slightly to bottom for face + dog visibility */
[data-card-id="theo-006"] .card-photo-img { object-position: center 78%; } /* Card #069: Pause au pub - moved toward bottom */
[data-card-id="theo-010"] .card-photo-img { object-position: center 20%; } /* Card #073: Ray-Ban & grimace - moved toward top */
[data-card-id="theo-014"] .card-photo-img { object-position: center 30%; } /* Card #077: Santé ! - slightly moved to top */
[data-card-id="theo-016"] .card-photo-img { object-position: center 23%; } /* Card #079: Courrier champêtre - moved slightly to bottom while keeping face clearly visible */
[data-card-id="theo-017"] .card-photo-img { object-position: center 22%; } /* Card #080: Samouraï moderne - slightly moved to top */
[data-card-id="theo-019"] .card-photo-img { object-position: center 32%; } /* Card #082: Métamorphose faciale - moved a bit to top */


.card-season-emblem { position: absolute; right: 4px; bottom: 3px; width: 8px; height: 9px; z-index: 3; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); pointer-events: none; }
.card-season-emblem svg { width: 100%; height: 100%; display: block; }

/* Flavor Text Box */
.card-flavor-box {
    margin: 6px 8px;
    padding: 6px 8px;
    flex: 1;
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.75) 0%, rgba(2, 6, 23, 0.85) 100%);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.card-flavor-text { font-size: 9.5px; font-style: italic; color: #cbd5e1; line-height: 1.4; padding-right: 10px; }

/* Card Footer */
.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px;
    background: #090d16;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 8px;
    font-weight: 700;
}

.card-ascendency-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 1.5px 6px;
    border-radius: 4px;
}
.card-ascendency-badge.ascendency-arthur {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.20);
    border: 1px solid rgba(239, 68, 68, 0.48);
    text-shadow: 0 0 6px rgba(239, 68, 68, 0.55);
}
.card-ascendency-badge.ascendency-clara {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.45);
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}
.card-ascendency-badge.ascendency-elodie {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.18);
    border: 1px solid rgba(244, 114, 182, 0.45);
    text-shadow: 0 0 6px rgba(244, 114, 182, 0.5);
}
.card-ascendency-badge.ascendency-theodore {
    color: #34d399;
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.45);
    text-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
.card-ascendency-badge.ascendency-dual {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.22), rgba(168, 85, 247, 0.25));
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #fecdd3;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.35);
    text-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}
.card-ascendency-none { color: #64748b; font-family: monospace; }

/* Real-Life Physical Holographic Security Stamp (Authenticity Holofoil Seal) */
.card-security-seal {
    width: 15px;
    height: 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.8px solid rgba(255, 255, 255, 0.45);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        inset 0 -1px 1px rgba(0, 0, 0, 0.7),
        0 1px 3px rgba(0, 0, 0, 0.85);
    background: #0f172a;
    flex-shrink: 0;
    margin: 0 4px;
    cursor: default;
    transform: translateZ(2px);
}

.card-security-seal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--glare-angle, 135deg) at 50% 50%,
        #f43f5e 0deg,
        #a855f7 60deg,
        #38bdf8 120deg,
        #34d399 180deg,
        #f59e0b 240deg,
        #f43f5e 300deg,
        #f43f5e 360deg
    );
    opacity: 0.85;
    mix-blend-mode: screen;
    transition: opacity 0.25s ease;
}

.card-security-seal .seal-core {
    position: relative;
    z-index: 2;
    font-size: 6.5px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
    transform: translateY(-0.5px);
}

.seal-legendary {
    border-color: rgba(254, 240, 138, 0.9);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 0 6px rgba(245, 158, 11, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.9);
}
.seal-very-rare {
    border-color: rgba(216, 180, 254, 0.85);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.85),
        0 0 5px rgba(168, 85, 247, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.9);
}
.seal-rare {
    border-color: rgba(186, 230, 253, 0.8);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        0 0 5px rgba(56, 189, 248, 0.4),
        0 1px 3px rgba(0, 0, 0, 0.9);
}
.seal-uncommon {
    border-color: rgba(167, 243, 208, 0.7);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.7),
        0 0 4px rgba(16, 185, 129, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* ==================== Ascendency Card Backgrounds & Art Theming ==================== */
.card-face.card-front {
    position: relative;
    overflow: hidden;
}

/* Layer 1: Universal Physical Cardstock Linen & Fine Grain Noise Texture */
.card-face.card-front::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.38;
    mix-blend-mode: overlay;
    border-radius: inherit;
    background-image:
        /* Micro-grain noise texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.45'/%3E%3C/svg%3E"),
        /* Fine cross-hatch linen grain */
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 3px);
    background-size: 140px 140px, 3px 3px, 3px 3px;
}

/* Layer 2: Intricate Ascendency Filigree & Guilloche Vector Pattern (Tactile Micro-Embossed Relief) */
.card-face.card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.26;
    mix-blend-mode: screen;
    background-repeat: repeat;
    border-radius: inherit;
    filter: drop-shadow(
        calc(var(--pointer-x, 0) * -1px)
        calc(var(--pointer-y, 0) * -1px)
        0.8px
        rgba(255, 255, 255, 0.28)
    );
    transition: filter 0.12s linear;
}

.card-header,
.card-artwork-frame,
.card-flavor-box,
.card-footer {
    position: relative;
    z-index: 2;
}

/* -------------------- Arthur (Deep Red / Crimson Majesty) -------------------- */
.ascendency-arthur .card-face.card-front {
    background:
        radial-gradient(circle at 50% 10%, rgba(220, 38, 38, 0.36) 0%, rgba(153, 27, 27, 0.18) 40%, transparent 75%),
        radial-gradient(circle at 50% 90%, rgba(185, 28, 28, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, transparent 45%),
        linear-gradient(180deg, #1c0505 0%, #130303 50%, #0a0101 100%);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.28);
}

/* Royal Damask & Guilloche Lattice Pattern */
.ascendency-arthur .card-face.card-front::after {
    background-size: 48px 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24 L24 0 L48 24 L24 48 Z' fill='none' stroke='%23ef4444' stroke-width='0.65' stroke-opacity='0.4' stroke-dasharray='1 2'/%3E%3Cpath d='M0 0 L48 48 M48 0 L0 48' stroke='%23dc2626' stroke-width='0.4' stroke-opacity='0.25'/%3E%3Cpath d='M24 7 L33 24 L24 41 L15 24 Z' fill='none' stroke='%23f87171' stroke-width='0.75' stroke-opacity='0.45'/%3E%3Cpath d='M19 21 L24 13 L29 21 L35 17 L31 27 L17 27 L13 17 Z' fill='%23ef4444' fill-opacity='0.18' stroke='%23fca5a5' stroke-width='0.55' stroke-opacity='0.4'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%23fecaca' fill-opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23ef4444' fill-opacity='0.35'/%3E%3Ccircle cx='48' cy='0' r='1.5' fill='%23ef4444' fill-opacity='0.35'/%3E%3Ccircle cx='0' cy='48' r='1.5' fill='%23ef4444' fill-opacity='0.35'/%3E%3Ccircle cx='48' cy='48' r='1.5' fill='%23ef4444' fill-opacity='0.35'/%3E%3C/svg%3E");
}

.ascendency-arthur .card-header {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.28) 0%, rgba(32, 6, 6, 0.94) 100%);
    border-bottom: 1px solid rgba(239, 68, 68, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ascendency-arthur .card-artwork-frame {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(220, 38, 38, 0.50) 0%, rgba(153, 27, 27, 0.28) 48%, rgba(69, 10, 10, 0.45) 80%, #0a0202 100%),
        radial-gradient(circle at 50% 25%, rgba(254, 202, 202, 0.25) 0%, transparent 45%),
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(239, 68, 68, 0.05) 0deg, transparent 5deg, rgba(239, 68, 68, 0.05) 10deg);
    border-color: rgba(239, 68, 68, 0.45);
    box-shadow: inset 0 0 18px rgba(220, 38, 38, 0.32), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ascendency-arthur .card-flavor-box {
    background: linear-gradient(180deg, rgba(34, 6, 6, 0.84) 0%, rgba(18, 3, 3, 0.92) 100%);
    border-color: rgba(239, 68, 68, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ascendency-arthur .card-footer {
    background: #0f0202;
    border-top: 1px solid rgba(239, 68, 68, 0.24);
}

.ascendency-arthur:not(.rarity-legendary):not(.rarity-very-rare) .card-name {
    color: #fee2e2;
}

/* -------------------- Clara (Celestial / Sapphire / Cyan) -------------------- */
.ascendency-clara .card-face.card-front {
    background:
        radial-gradient(circle at 50% 10%, rgba(56, 189, 248, 0.34) 0%, rgba(3, 105, 161, 0.18) 40%, transparent 75%),
        radial-gradient(circle at 50% 90%, rgba(2, 132, 199, 0.20) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, transparent 45%),
        linear-gradient(180deg, #081730 0%, #040e1f 50%, #020713 100%);
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25);
}

/* Astrolabe & Constellation Chart Pattern */
.ascendency-clara .card-face.card-front::after {
    background-size: 56px 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='24' fill='none' stroke='%230284c7' stroke-width='0.5' stroke-opacity='0.3' stroke-dasharray='3 3'/%3E%3Ccircle cx='28' cy='28' r='16' fill='none' stroke='%2338bdf8' stroke-width='0.65' stroke-opacity='0.4'/%3E%3Ccircle cx='28' cy='28' r='8' fill='none' stroke='%2338bdf8' stroke-width='0.5' stroke-opacity='0.3' stroke-dasharray='1 2'/%3E%3Cpath d='M28 0v56M0 28h56' stroke='%230ea5e9' stroke-width='0.45' stroke-opacity='0.28'/%3E%3Cpath d='M0 0l56 56M56 0L0 56' stroke='%2338bdf8' stroke-width='0.35' stroke-opacity='0.2' stroke-dasharray='2 4'/%3E%3Cpolygon points='28,14 31,25 42,28 31,31 28,42 25,31 14,28 25,25' fill='%2338bdf8' fill-opacity='0.18' stroke='%237dd3fc' stroke-width='0.65' stroke-opacity='0.5'/%3E%3Ccircle cx='28' cy='28' r='2' fill='%23ffffff' fill-opacity='0.6'/%3E%3Ccircle cx='0' cy='28' r='1.2' fill='%2338bdf8' fill-opacity='0.45'/%3E%3Ccircle cx='56' cy='28' r='1.2' fill='%2338bdf8' fill-opacity='0.45'/%3E%3Ccircle cx='28' cy='0' r='1.2' fill='%2338bdf8' fill-opacity='0.45'/%3E%3Ccircle cx='28' cy='56' r='1.2' fill='%2338bdf8' fill-opacity='0.45'/%3E%3C/svg%3E");
}

.ascendency-clara .card-header {
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.28) 0%, rgba(6, 21, 44, 0.94) 100%);
    border-bottom: 1px solid rgba(56, 189, 248, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ascendency-clara .card-artwork-frame {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.48) 0%, rgba(3, 105, 161, 0.28) 48%, rgba(12, 74, 110, 0.45) 80%, #020713 100%),
        radial-gradient(circle at 50% 25%, rgba(186, 230, 253, 0.25) 0%, transparent 45%),
        repeating-radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.06) 0px, rgba(56, 189, 248, 0.06) 2px, transparent 2px, transparent 14px);
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.32), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ascendency-clara .card-flavor-box {
    background: linear-gradient(180deg, rgba(7, 24, 48, 0.84) 0%, rgba(3, 12, 27, 0.92) 100%);
    border-color: rgba(56, 189, 248, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ascendency-clara .card-footer {
    background: #030c18;
    border-top: 1px solid rgba(56, 189, 248, 0.24);
}

.ascendency-clara:not(.rarity-legendary):not(.rarity-very-rare) .card-name {
    color: #f0f9ff;
}

/* -------------------- Elodie (Blossom / Rose / Magenta) -------------------- */
.ascendency-elodie .card-face.card-front {
    background:
        radial-gradient(circle at 50% 10%, rgba(244, 114, 182, 0.34) 0%, rgba(190, 24, 93, 0.18) 40%, transparent 75%),
        radial-gradient(circle at 50% 90%, rgba(219, 39, 119, 0.20) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, transparent 45%),
        linear-gradient(180deg, #20071c 0%, #140411 50%, #0a0109 100%);
    box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.25);
}

/* Sacred Botanical Rosette & Arabesque Spirals */
.ascendency-elodie .card-face.card-front::after {
    background-size: 52px 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='23' fill='none' stroke='%23be185d' stroke-width='0.5' stroke-opacity='0.3' stroke-dasharray='2 2'/%3E%3Ccircle cx='26' cy='26' r='15' fill='none' stroke='%23f472b6' stroke-width='0.65' stroke-opacity='0.35'/%3E%3Cpath d='M26 8 C32 16, 32 20, 26 26 C20 20, 20 16, 26 8 Z' fill='%23f472b6' fill-opacity='0.14' stroke='%23fb7185' stroke-width='0.65' stroke-opacity='0.45'/%3E%3Cpath d='M26 44 C32 36, 32 32, 26 26 C20 32, 20 36, 26 44 Z' fill='%23f472b6' fill-opacity='0.14' stroke='%23fb7185' stroke-width='0.65' stroke-opacity='0.45'/%3E%3Cpath d='M8 26 C16 32, 20 32, 26 26 C20 20, 16 20, 8 26 Z' fill='%23f472b6' fill-opacity='0.14' stroke='%23fb7185' stroke-width='0.65' stroke-opacity='0.45'/%3E%3Cpath d='M44 26 C36 32, 32 32, 26 26 C32 20, 36 20, 44 26 Z' fill='%23f472b6' fill-opacity='0.14' stroke='%23fb7185' stroke-width='0.65' stroke-opacity='0.45'/%3E%3Cpath d='M13 13 C21 19, 21 21, 26 26 C21 21, 19 21, 13 13 Z' stroke='%23f472b6' stroke-width='0.5' stroke-opacity='0.32'/%3E%3Cpath d='M39 13 C31 19, 31 21, 26 26 C31 21, 33 21, 39 13 Z' stroke='%23f472b6' stroke-width='0.5' stroke-opacity='0.32'/%3E%3Cpath d='M13 39 C21 33, 21 31, 26 26 C21 31, 19 31, 13 39 Z' stroke='%23f472b6' stroke-width='0.5' stroke-opacity='0.32'/%3E%3Cpath d='M39 39 C31 33, 31 31, 26 26 C31 31, 33 31, 39 39 Z' stroke='%23f472b6' stroke-width='0.5' stroke-opacity='0.32'/%3E%3Ccircle cx='26' cy='26' r='3' fill='%23fbcfe8' fill-opacity='0.5'/%3E%3C/svg%3E");
}

.ascendency-elodie .card-header {
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.28) 0%, rgba(35, 7, 29, 0.94) 100%);
    border-bottom: 1px solid rgba(244, 114, 182, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ascendency-elodie .card-artwork-frame {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.48) 0%, rgba(219, 39, 119, 0.28) 48%, rgba(131, 24, 67, 0.45) 80%, #0f020d 100%),
        radial-gradient(circle at 50% 25%, rgba(251, 207, 232, 0.25) 0%, transparent 45%),
        repeating-conic-gradient(from 45deg at 50% 50%, rgba(244, 114, 182, 0.05) 0deg, transparent 8deg, rgba(244, 114, 182, 0.05) 16deg);
    border-color: rgba(244, 114, 182, 0.45);
    box-shadow: inset 0 0 18px rgba(244, 114, 182, 0.32), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ascendency-elodie .card-flavor-box {
    background: linear-gradient(180deg, rgba(38, 8, 30, 0.84) 0%, rgba(19, 4, 16, 0.92) 100%);
    border-color: rgba(244, 114, 182, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ascendency-elodie .card-footer {
    background: #0f020c;
    border-top: 1px solid rgba(244, 114, 182, 0.24);
}

.ascendency-elodie:not(.rarity-legendary):not(.rarity-very-rare) .card-name {
    color: #fdf2f8;
}

/* -------------------- Theodore (Verdant / Forest / Emerald Green) -------------------- */
.ascendency-theodore .card-face.card-front {
    background:
        radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.34) 0%, rgba(5, 150, 105, 0.18) 40%, transparent 75%),
        radial-gradient(circle at 50% 90%, rgba(4, 120, 87, 0.20) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, transparent 45%),
        linear-gradient(180deg, #051d12 0%, #03140c 50%, #010a06 100%);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}

/* Sacred Botanical Ivy & Celtic Foliage Guilloche Lattice Pattern */
.ascendency-theodore .card-face.card-front::after {
    background-size: 50px 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cpath d='M25 0 C15 15, 15 35, 25 50 C35 35, 35 15, 25 0 Z' fill='%2310b981' fill-opacity='0.12' stroke='%2334d399' stroke-width='0.6' stroke-opacity='0.4'/%3E%3Cpath d='M0 25 C15 15, 35 15, 50 25 C35 35, 15 35, 0 25 Z' fill='%2310b981' fill-opacity='0.12' stroke='%2334d399' stroke-width='0.6' stroke-opacity='0.4'/%3E%3Ccircle cx='25' cy='25' r='18' fill='none' stroke='%23059669' stroke-width='0.5' stroke-opacity='0.3' stroke-dasharray='2 2'/%3E%3Ccircle cx='25' cy='25' r='8' fill='none' stroke='%2310b981' stroke-width='0.6' stroke-opacity='0.35'/%3E%3Ccircle cx='25' cy='25' r='2.5' fill='%23a7f3d0' fill-opacity='0.5'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%2310b981' fill-opacity='0.3'/%3E%3Ccircle cx='50' cy='0' r='2' fill='%2310b981' fill-opacity='0.3'/%3E%3Ccircle cx='0' cy='50' r='2' fill='%2310b981' fill-opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%2310b981' fill-opacity='0.3'/%3E%3C/svg%3E");
}

.ascendency-theodore .card-header {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.28) 0%, rgba(5, 31, 19, 0.94) 100%);
    border-bottom: 1px solid rgba(16, 185, 129, 0.30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ascendency-theodore .card-artwork-frame {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.48) 0%, rgba(5, 150, 105, 0.28) 48%, rgba(6, 78, 59, 0.45) 80%, #010a06 100%),
        radial-gradient(circle at 50% 25%, rgba(167, 243, 208, 0.25) 0%, transparent 45%),
        repeating-radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.06) 0px, rgba(16, 185, 129, 0.06) 2px, transparent 2px, transparent 14px);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: inset 0 0 18px rgba(16, 185, 129, 0.32), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ascendency-theodore .card-flavor-box {
    background: linear-gradient(180deg, rgba(5, 34, 21, 0.84) 0%, rgba(2, 17, 10, 0.92) 100%);
    border-color: rgba(16, 185, 129, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ascendency-theodore .card-footer {
    background: #02110a;
    border-top: 1px solid rgba(16, 185, 129, 0.24);
}

.ascendency-theodore:not(.rarity-legendary):not(.rarity-very-rare) .card-name {
    color: #ecfdf5;
}

/* -------------------- Dual Ascendency (Cosmic Crimson Blend) -------------------- */
.ascendency-dual .card-face.card-front {
    background:
        radial-gradient(circle at 20% 10%, rgba(220, 38, 38, 0.32) 0%, transparent 60%),
        radial-gradient(circle at 80% 10%, rgba(168, 85, 247, 0.28) 0%, transparent 60%),
        radial-gradient(circle at 50% 90%, rgba(244, 114, 182, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0%, transparent 45%),
        linear-gradient(180deg, #180512 0%, #10040e 50%, #070107 100%);
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.28);
}

/* Dual Guilloche Sacred Circles Pattern */
.ascendency-dual .card-face.card-front::after {
    background-size: 56px 56px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='20' cy='28' r='16' fill='none' stroke='%23ef4444' stroke-width='0.65' stroke-opacity='0.38'/%3E%3Ccircle cx='36' cy='28' r='16' fill='none' stroke='%23c084fc' stroke-width='0.65' stroke-opacity='0.38'/%3E%3Ccircle cx='28' cy='28' r='10' fill='none' stroke='%23f472b6' stroke-width='0.5' stroke-opacity='0.28' stroke-dasharray='2 2'/%3E%3Cpath d='M0 0 L56 56 M56 0 L0 56' stroke='%23e879f9' stroke-width='0.4' stroke-opacity='0.22' stroke-dasharray='2 4'/%3E%3Cpolygon points='28,15 33,23 41,28 33,33 28,41 23,33 15,28 23,23' fill='%23ef4444' fill-opacity='0.16' stroke='%23fca5a5' stroke-width='0.65' stroke-opacity='0.45'/%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%23ffffff' fill-opacity='0.5'/%3E%3C/svg%3E");
}

.ascendency-dual .card-header {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.28) 0%, rgba(168, 85, 247, 0.26) 100%);
    border-bottom: 1px solid rgba(248, 113, 113, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ascendency-dual .card-artwork-frame {
    background:
        radial-gradient(circle at 35% 50%, rgba(220, 38, 38, 0.44) 0%, transparent 60%),
        radial-gradient(circle at 65% 50%, rgba(168, 85, 247, 0.40) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(244, 114, 182, 0.24) 0%, transparent 70%),
        #0a0412;
    border-color: rgba(248, 113, 113, 0.48);
    box-shadow: inset 0 0 18px rgba(168, 85, 247, 0.28), 0 2px 6px rgba(0, 0, 0, 0.6);
}

.ascendency-dual .card-flavor-box {
    background: linear-gradient(180deg, rgba(28, 6, 26, 0.84) 0%, rgba(14, 3, 14, 0.92) 100%);
    border-color: rgba(248, 113, 113, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ascendency-dual .card-footer {
    background: #09020b;
    border-top: 1px solid rgba(248, 113, 113, 0.24);
}
.card-rarity-pill { font-size: 8px; color: #94a3b8; font-weight: 800; letter-spacing: 0.5px; }
.rarity-uncommon .card-rarity-pill { color: #6ee7b7; }
.rarity-rare .card-rarity-pill { color: #7dd3fc; }
.rarity-very-rare .card-rarity-pill { color: #d8b4fe; }
.rarity-legendary .card-rarity-pill { color: #fde047; }

/* Badges */
.card-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    border: 2px solid #0f172a;
    z-index: 40;
    transform: translateZ(30px);
}
.card-new-ribbon {
    position: absolute;
    top: 8px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
    background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
    color: #ffffff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid rgba(167, 243, 208, 0.85);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.65),
        0 0 12px rgba(16, 185, 129, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.65);
    z-index: 50;
    transform: translateZ(28px);
    pointer-events: none;
}

.ribbon-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    line-height: 1;
    color: #fef08a;
    filter: drop-shadow(0 0 3px #fbbf24);
    flex-shrink: 0;
    margin-right: 1px;
}

.has-new-badge .card-header .card-title-wrap {
    padding-left: 68px;
}

/* Rarity-specific discovery glows */
.rarity-very-rare .card-new-ribbon {
    background: linear-gradient(135deg, #7e22ce 0%, #9333ea 50%, #581c87 100%);
    border-color: rgba(232, 121, 249, 0.9);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 14px rgba(147, 51, 234, 0.75),
        inset 0 1px 1px rgba(255, 255, 255, 0.75);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(232, 121, 249, 0.5);
}

.rarity-legendary .card-new-ribbon {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #b45309 100%);
    border-color: rgba(254, 240, 138, 0.95);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7),
        0 0 14px rgba(245, 158, 11, 0.75),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(254, 240, 138, 0.5);
}

/* Locked Card Silhouette */
.card-3d-wrapper.locked { cursor: default; }
.card-locked-face {
    background: #090d16 !important;
    border-color: #1e293b !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.locked-icon-wrap { width: 36px; height: 36px; color: #475569; }
.locked-svg { width: 100%; height: 100%; }
.locked-set-num { font-size: 11px; font-family: monospace; color: #475569; font-weight: 700; }
.locked-rarity-badge { font-size: 9px; font-weight: 800; color: #334155; }

/* ==================== 3D Booster Pack Wrapper ==================== */
.pack-3d-wrapper {
    width: 200px;
    height: 310px;
    perspective: 1000px;
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    transition: transform 0.25s ease;
    z-index: 2;
}
.pack-3d-wrapper:hover {
    transition: transform 0.05s ease-out;
}

.shop-mini-pack { width: 130px; height: 174px; }

/* Stack of unopened packs */
.pack-3d-wrapper.has-stack::before,
.pack-3d-wrapper.has-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #1e40af, #0a1540);
    border: 1px solid rgba(255, 255, 255, 0.75);
    z-index: 0;
    pointer-events: none;
}
.pack-3d-wrapper.has-stack::before { transform: translate(-4px, 4px); opacity: 0.7; }
.pack-3d-wrapper.has-stack::after { transform: translate(-8px, 8px); opacity: 0.4; }
.pack-premium-stack::before, .pack-premium-stack::after { border-color: #7dd3fc; background: linear-gradient(135deg, #0369a1, #0f172a); }

/* Foil sachet body: metallic gradient + soft edge lighting */
.pack-foil-body {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.18) 0%, transparent 18%, transparent 82%, rgba(255, 255, 255, 0.14) 100%),
        linear-gradient(135deg, #1e40af 0%, #12276b 45%, #0a1540 100%);
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 22px rgba(255, 255, 255, 0.3), 0 0 40px rgba(30, 64, 175, 0.5), inset 0 0 14px rgba(255, 255, 255, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
}

.pack-foil-body.pack-premium {
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.2) 0%, transparent 18%, transparent 82%, rgba(255, 255, 255, 0.16) 100%),
        linear-gradient(135deg, #075985 0%, #0b1a3a 45%, #0ea5e9 100%);
    border-color: #7dd3fc;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 24px rgba(125, 211, 252, 0.45), inset 0 0 14px rgba(255, 255, 255, 0.14);
}

/* Heat-crimped metallic flaps with grooved ridges */
.pack-crimp-top, .pack-crimp-bottom {
    position: relative;
    height: 24px;
    flex-shrink: 0;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px, rgba(255, 255, 255, 0.35) 1px, rgba(255, 255, 255, 0.35) 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px),
        linear-gradient(180deg, #f1f5f9 0%, #94a3b8 100%);
    background-blend-mode: overlay, normal;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.pack-crimp-bottom { border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.5); }
.pack-premium .pack-crimp-top, .pack-premium .pack-crimp-bottom {
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0px, rgba(0, 0, 0, 0.35) 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, rgba(255, 255, 255, 0.08) 2px, rgba(255, 255, 255, 0.08) 4px),
        linear-gradient(180deg, #bae6fd 0%, #0369a1 100%);
    background-blend-mode: overlay, normal;
}

/* Sombrero / Euro-slot retail peg hanger hole */
.pack-hanger-hole {
    position: relative;
    width: 26px;
    height: 9px;
    border-radius: 5px;
    background: #030712;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pack-hanger-hole::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    width: 12px;
    height: 8px;
    transform: translateX(-50%);
    border-radius: 6px 6px 0 0;
    background: #030712;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom: 0;
}

/* Card-stack bulge: the 10 cards pressing the foil outward */
.pack-deck-cushion {
    position: absolute;
    inset: 26px 8px;
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 55%, transparent 75%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 15%, transparent 85%, rgba(0, 0, 0, 0.35) 100%);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

/* Foil tension wrinkles radiating from the crimp corners */
.pack-foil-wrinkles {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(62deg, transparent 0 14%, rgba(255, 255, 255, 0.14) 14.5%, transparent 15.5% 100%),
        linear-gradient(118deg, transparent 0 14%, rgba(255, 255, 255, 0.14) 14.5%, transparent 15.5% 100%),
        linear-gradient(-62deg, transparent 0 86%, rgba(255, 255, 255, 0.1) 86.5%, transparent 87.5% 100%),
        linear-gradient(-118deg, transparent 0 86%, rgba(255, 255, 255, 0.1) 86.5%, transparent 87.5% 100%),
        linear-gradient(80deg, transparent 0 30%, rgba(0, 0, 0, 0.18) 30.5%, transparent 32% 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Season 1 artwork */
.pack-art-layer {
    position: absolute;
    inset: 24px 0;
    background: url('/static/images/season1_art.jpg') center/cover no-repeat;
    opacity: 0.65;
    mix-blend-mode: luminosity;
    pointer-events: none;
}
.pack-art-overlay {
    position: absolute;
    inset: 24px 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.88) 100%);
    pointer-events: none;
}

/* Iridescent diffraction + specular sheen follow the mouse via JS custom properties */
.pack-iridescent-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(var(--foil-angle, 125deg), transparent 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.35) 45%, rgba(30, 64, 175, 0.4) 60%, transparent 75%);
    mix-blend-mode: overlay;
    pointer-events: none;
    opacity: var(--glare-opacity, 0.55);
}
.pack-premium .pack-iridescent-glare { background: linear-gradient(var(--foil-angle, 125deg), transparent 0%, rgba(125, 211, 252, 0.4) 30%, rgba(255, 255, 255, 0.4) 45%, rgba(56, 189, 248, 0.35) 60%, transparent 75%); }
.pack-specular-sheen {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--sheen-x, 50%) var(--sheen-y, 30%), rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 55%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 11;
}

/* Tear strip with notches and perforation line */
.pack-tear-strip {
    position: relative;
    padding: 4px 12px;
    background: rgba(15, 23, 42, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
}
.pack-tear-strip::after {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.55);
}
.tear-guide { font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #e2e8f0; }
.tear-notch { width: 0; height: 0; border: 4px solid transparent; }
.notch-left { border-left-color: #e2e8f0; }
.notch-right { border-right-color: #e2e8f0; }
.pack-premium .tear-guide { color: #bae6fd; }

/* Front artwork layout */
.pack-front-art {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 12px;
    text-align: center;
    z-index: 8;
}
.pack-brand-header, .pack-brand-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }

.pack-edition-pill {
    font-size: 7.5px;
    font-weight: 900;
    letter-spacing: 1.4px;
    color: #fff;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 2px 8px;
    border-radius: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Holographic authenticity seal */
.pack-foil-seal {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 35% 35%, #fff 0%, #e2e8f0 40%, #cbd5e1 70%, #1e3a8a 100%);
    border: 1.5px solid #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.45), inset 0 0 8px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(0, 0, 0, 0.7);
    animation: float-seal 3.5s ease-in-out infinite alternate;
}
.pack-foil-seal.seal-premium {
    background: radial-gradient(circle at 35% 35%, #fff 0%, #bae6fd 50%, #38bdf8 100%);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.8), 0 4px 10px rgba(0, 0, 0, 0.7);
}
.seal-prismatic-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(rgba(255, 255, 255, 0.35), rgba(203, 213, 225, 0.4), rgba(59, 130, 246, 0.35), rgba(255, 255, 255, 0.4), rgba(236, 72, 153, 0.3), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.35));
    mix-blend-mode: overlay;
    animation: spin-seal 6s linear infinite;
    pointer-events: none;
}
.pack-foil-seal > span { position: relative; z-index: 1; line-height: 1; }
.seal-icon { font-size: 11px; color: #0f172a; }
.seal-text { font-size: 9.5px; font-weight: 900; color: #0f172a; letter-spacing: 0.5px; }
.seal-sub { font-size: 5px; font-weight: 900; color: #1e3a8a; letter-spacing: 0.8px; margin-top: 1px; }
@keyframes float-seal {
    from { transform: translateY(0) rotate(-3deg); }
    to { transform: translateY(-3px) rotate(3deg); }
}
@keyframes spin-seal { to { transform: rotate(360deg); } }

.pack-spec-badge {
    font-size: 9.5px;
    font-weight: 800;
    color: #fff;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(6px);
    padding: 2.5px 11px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 1px;
}
.pack-rarity-promise { font-size: 8px; font-weight: 800; color: #e2e8f0; letter-spacing: 0.8px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

/* Retail legal line + barcode */
.pack-retail-legal {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: rgba(226, 232, 240, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.legal-dot { color: #94a3b8; }
.pack-premium .legal-dot { color: #7dd3fc; }

.pack-barcode-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.barcode-bars {
    width: 74px;
    height: 12px;
    background: repeating-linear-gradient(90deg, #0f172a 0 1px, transparent 1px 2px, #0f172a 2px 4px, transparent 4px 5px, #0f172a 5px 6px, transparent 6px 8px, #0f172a 8px 10px, transparent 10px 11px);
}
.barcode-num { font-family: monospace; font-size: 6.5px; font-weight: 700; letter-spacing: 1px; line-height: 1; margin-top: 2px; color: #0f172a; }

/* Shop mini-packs: fill pack border-to-border with art & eliminate all gaps */
.shop-mini-pack .pack-retail-legal,
.shop-mini-pack .pack-barcode-graphic,
.shop-mini-pack .pack-rarity-promise,
.shop-mini-pack .pack-tear-strip,
.shop-mini-pack .pack-crimp-top,
.shop-mini-pack .pack-crimp-bottom,
.shop-mini-pack .pack-foil-seal { display: none; }
.shop-mini-pack .pack-art-layer {
    inset: 0;
    opacity: 0.92;
    background: url('/static/images/season1_art.jpg') center / 100% 100% no-repeat;
}
.shop-mini-pack .pack-art-overlay { inset: 0; }
.shop-mini-pack .pack-deck-cushion { display: none; }
.shop-mini-pack .pack-front-art {
    padding: 8px;
    justify-content: flex-end;
}
.shop-mini-pack .pack-spec-badge {
    font-size: 8px;
    padding: 2.5px 9px;
    margin-bottom: 2px;
}

/* ==================== AAA 3D Pack Opening Ritual Animations ==================== */

/* Pack Idle Floating & Levitation */
.pack-3d-wrapper.pack-idle-floating {
    animation: packIdleHover 4.5s ease-in-out infinite alternate;
}
@keyframes packIdleHover {
    0% { transform: perspective(1000px) translateY(0px) rotateX(2deg) rotateY(0deg); }
    50% { transform: perspective(1000px) translateY(-10px) rotateX(-2deg) rotateY(2.5deg); }
    100% { transform: perspective(1000px) translateY(0px) rotateX(2deg) rotateY(0deg); }
}

/* ==================== Booster Consuming Ritual ==================== */
/*
 * The intact pack is dissolved in place (no DOM swap, no pose jump).
 * A single JS rAF loop drives --burn (-12% -> 112%), which simultaneously controls:
 *   - the soft mask edge eating the foil top-to-bottom
 *   - the incandescent glow band riding that edge
 *   - the ember emitter position (particles.js emitBurnEdge)
 * so all three stay perfectly in sync.
 */

/* Smooth fade-out of altar controls during opening */
.booster-altar-scene.scene-opening .altar-pack-switcher,
.booster-altar-scene.scene-opening .pack-action-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
    transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.pack-3d-wrapper.is-consuming {
    --burn: -12%;
    --burn-rgb: 56, 189, 248;
    pointer-events: none;
    cursor: default;
    animation: none !important;
}
.pack-3d-wrapper.is-consuming.is-premium-burn {
    --burn-rgb: 251, 191, 36;
}

.pack-3d-wrapper.is-consuming .pack-tear-strip {
    opacity: 0 !important;
    transition: opacity 0.2s ease;
}

/* Stacked spare packs behind the active one quietly fade away */
.pack-3d-wrapper.is-consuming::before,
.pack-3d-wrapper.is-consuming::after {
    opacity: 0 !important;
    transition: opacity 0.35s ease;
}

/* Charge: foil warms up, then is eaten by a soft feathered mask edge */
.pack-3d-wrapper.is-consuming .pack-foil-body {
    filter: brightness(1.14) saturate(1.12);
    transition: filter 0.35s ease;
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--burn) - 4%), #000 calc(var(--burn) + 7%));
            mask-image: linear-gradient(to bottom, transparent calc(var(--burn) - 4%), #000 calc(var(--burn) + 7%));
    will-change: mask-image;
}

/* Incandescent band riding exactly on the dissolve line */
.pack-burn-edge {
    position: absolute;
    inset: 0 -8px;
    border-radius: 12px;
    pointer-events: none;
    z-index: 12;
    background: linear-gradient(to bottom,
        transparent calc(var(--burn) - 6%),
        rgba(var(--burn-rgb), 0.45) calc(var(--burn) - 1.5%),
        rgba(255, 255, 255, 0.95) calc(var(--burn) + 0.8%),
        rgba(var(--burn-rgb), 0.85) calc(var(--burn) + 3%),
        rgba(var(--burn-rgb), 0.22) calc(var(--burn) + 7%),
        transparent calc(var(--burn) + 11%)
    );
    mix-blend-mode: screen;
    filter: blur(1.5px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pack-3d-wrapper.is-burning .pack-burn-edge { opacity: 1; }
.pack-3d-wrapper.is-burnt .pack-burn-edge { opacity: 0; transition-duration: 0.2s; }

/* Soft breathing halo behind the pack while it is being consumed */
.pack-burn-halo {
    position: absolute;
    inset: -30px;
    border-radius: 40px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 50%, rgba(var(--burn-rgb), 0.38) 0%, rgba(var(--burn-rgb), 0.12) 45%, transparent 72%);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.pack-3d-wrapper.is-consuming .pack-burn-halo { opacity: 1; transform: scale(1.06); }
.pack-3d-wrapper.is-burnt .pack-burn-halo { opacity: 0; transform: scale(1.2); }

/* Card stack resting inside the pack, revealed as the foil dissolves, then released */
.altar-pack-center .consume-deck {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    filter: brightness(1.2);
    transform: translate(-50%, -50%) scale(0.86);
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        filter 0.8s ease;
}
.altar-pack-center .consume-deck.is-visible { opacity: 1; }
.altar-pack-center .consume-deck.is-released {
    transform: translate(-50%, -50%) translateY(-8px) scale(1);
    filter: brightness(1);
}

/* Deal hand-off: flying cards pass above the stack, which thins out as they leave */
.altar-pack-center.is-dealing-out { z-index: 5 !important; }
.altar-pack-center .consume-deck.is-depleting {
    opacity: 0;
    transition: opacity 0.55s linear, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .pack-burn-halo,
    .altar-pack-center .consume-deck { transition-duration: 0.2s; }
}

/* ==================== Phase 3: Extracted 3D Card Deck ==================== */
.deck-extraction-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    perspective: 1200px;
    z-index: 10;
}

.extracted-deck-3d {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s ease-out;
}

@keyframes deckRiseOut {
    0% {
        transform: translateX(-50%) translateY(75px) scale(0.85) rotateX(16deg);
        opacity: 0.2;
    }
    60% {
        transform: translateX(-50%) translateY(-6px) scale(1.04) rotateX(-2deg);
        opacity: 1;
    }
    85% {
        transform: translateX(-50%) translateY(-14px) scale(1.02) rotateX(-4deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-10px) scale(1.02) rotateX(-3deg);
        opacity: 1;
    }
}

.extracted-deck-3d.deck-floating {
    animation: deckIdleLevitate 3.5s ease-in-out infinite alternate;
}
@keyframes deckIdleLevitate {
    0% { transform: perspective(1000px) translateY(-8px) rotateX(-4deg) rotateY(0deg); }
    50% { transform: perspective(1000px) translateY(-18px) rotateX(2deg) rotateY(2deg); }
    100% { transform: perspective(1000px) translateY(-8px) rotateX(-4deg) rotateY(0deg); }
}

/* Realistic Stacked Paperboard Edges (10-Card Thickness) */
.deck-stacked-edges {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    box-shadow: 
        0 1px 0 #cbd5e1,
        0 2px 0 #475569,
        0 3px 0 #cbd5e1,
        0 4px 0 #334155,
        0 5px 0 #cbd5e1,
        0 6px 0 #1e293b,
        0 7px 0 #cbd5e1,
        0 8px 0 #0f172a,
        0 22px 45px rgba(0, 0, 0, 0.9);
}

/* Mysterious Anticipation Aura Radiating from Stacked Deck (Pack-themed, never spoiling cards) */
.deck-anticipation-aura {
    position: absolute;
    inset: -14px;
    border-radius: calc(var(--card-radius) + 10px);
    pointer-events: none;
    z-index: -1;
    animation: deckAuraPulse 2.2s ease-in-out infinite alternate;
}
.deck-anticipation-aura.aura-premium {
    background: radial-gradient(ellipse at 50% 50%, rgba(251, 191, 36, 0.42) 0%, rgba(56, 189, 248, 0.15) 50%, transparent 75%);
    box-shadow: 0 0 45px rgba(251, 191, 36, 0.65), 0 0 85px rgba(56, 189, 248, 0.35);
}
.deck-anticipation-aura.aura-standard {
    background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.38) 0%, rgba(14, 165, 233, 0.12) 50%, transparent 75%);
    box-shadow: 0 0 38px rgba(56, 189, 248, 0.6), 0 0 70px rgba(56, 189, 248, 0.25);
}
@keyframes deckAuraPulse {
    0% { transform: scale(0.97); opacity: 0.75; }
    100% { transform: scale(1.03); opacity: 1.0; }
}

/* ==================== Unified Persistent Altar & Reveal Architecture ==================== */
.altar-header-area {
    width: 100%;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    margin-bottom: 6px;
}
.altar-header-area .altar-pack-switcher {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.altar-header-area .reveal-header {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.altar-stage-area {
    width: 100%;
    min-height: 610px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1400px;
    margin: 4px 0;
}

/* Center pack positioned at exact stage center */
.altar-pack-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.35s ease;
    width: 240px;
    height: 340px;
    pointer-events: auto;
}

/* Altar pedestal anchored under the center pack and scaling for 5x2 card table */
.altar-stage-area .altar-pedestal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(145px) scale(1);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
    margin: 0;
    z-index: 2;
    pointer-events: none;
}
.booster-altar-scene.state-revealing .altar-pedestal {
    transform: translate(-50%, -50%) translateY(20px) scale(2.4) !important;
    opacity: 0.32 !important;
}

.altar-footer-area {
    width: 100%;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 20;
    margin-top: 10px;
}
.altar-footer-area .pack-action-panel {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ==================== 10-Card Fanned Reveal Stage ==================== */
.reveal-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.reveal-title { font-size: 20px; font-weight: 900; letter-spacing: 2px; color: #f8fafc; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.reveal-sub { font-size: 12px; color: #94a3b8; }
.reveal-progress-wrap { width: 300px; height: 7px; background: #1e293b; border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }
.reveal-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #38bdf8, #818cf8, #fbbf24); transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-counter-text { font-size: 11px; font-family: monospace; font-weight: 700; color: #94a3b8; letter-spacing: 1px; }
.reveal-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.reveal-kbd-hints { display: flex; gap: 10px; font-size: 11px; color: #64748b; }

/* Dedicated 5x2 Card Table Grid Layout */
.cards-fanned-deck {
    display: grid;
    grid-template-columns: repeat(5, var(--card-width));
    justify-content: center;
    gap: 16px 14px;
    perspective: 1400px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    transition: opacity 0.4s ease;
}

@media (max-width: 1240px) {
    .cards-fanned-deck {
        --card-width: 180px;
        --card-height: 254px;
        gap: 12px 10px;
    }
}
@media (max-width: 1000px) {
    .cards-fanned-deck {
        --card-width: 150px;
        --card-height: 212px;
        gap: 10px 8px;
    }
}
@media (max-width: 820px) {
    .cards-fanned-deck {
        grid-template-columns: repeat(2, var(--card-width));
        --card-width: 170px;
        --card-height: 240px;
        gap: 12px;
    }
}

.fanned-card-slot {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    perspective: 1200px;
    overflow: visible;
    cursor: pointer;
    user-select: none;
    transform-style: preserve-3d;
}

.fanned-card-slot:hover,
.fanned-card-slot.revealed:hover {
    z-index: 25;
}

/* 3D Parabolic Flight Arc from Center Pack to Card Table Slot */
.cards-fanned-deck.is-dealing .fanned-card-slot {
    animation: dealFlyArc 0.76s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
    animation-delay: calc(var(--slot-idx, 0) * 52ms);
    pointer-events: none;
    z-index: calc(25 - var(--slot-idx, 0));
}
@keyframes dealFlyArc {
    0% {
        opacity: 0;
        transform: translate3d(var(--deal-from-x, 0px), var(--deal-from-y, 0px), 15px) scale(0.68) rotateZ(calc(var(--deal-rot, 0deg) * 1.6)) rotateX(24deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    }
    8% {
        opacity: 1;
    }
    42% {
        transform: translate3d(calc(var(--deal-from-x, 0px) * 0.45), calc(var(--deal-from-y, 0px) * 0.45 - 45px), 210px) scale(1.08) rotateZ(var(--deal-rot, 0deg)) rotateX(10deg);
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(56, 189, 248, 0.5);
    }
    80% {
        transform: translate3d(calc(var(--deal-from-x, 0px) * -0.02), calc(var(--deal-from-y, 0px) * -0.02), 6px) scale(1.02) rotateZ(0deg) rotateX(-2deg);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.65);
    }
    90% {
        transform: translate3d(0, 2px, 0) scale(0.98) rotateZ(0deg) rotateX(0deg);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotateZ(0deg) rotateX(0deg);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    }
}

/* Card Slot Inner: Isolates hover lift and idle float from the flipper */
.card-slot-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease;
    will-change: transform;
    border-radius: var(--card-radius);
}

/* Ambient 3D floating levitation active ONLY after deal finishes (.cards-dealt) */
.cards-fanned-deck.cards-dealt .fanned-card-slot:not(.revealed) .card-slot-inner {
    animation: cardIdleFloat 4s ease-in-out infinite alternate;
    animation-delay: calc(var(--slot-idx, 0) * 160ms);
}
@keyframes cardIdleFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(0.4deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Hover lift on unrevealed card (applied to slot inner, zero clash with flipper!) */
.cards-fanned-deck.cards-dealt .fanned-card-slot:not(.revealed):hover .card-slot-inner {
    transform: translateY(-12px) scale(1.04);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9), 0 0 28px rgba(56, 189, 248, 0.45);
}
.cards-fanned-deck.cards-dealt .fanned-card-slot:not(.revealed):hover .back-core-gem {
    transform: scale(1.25);
    filter: brightness(1.3);
}

/* Dynamic Rarity Aura Hints on Unrevealed Cards */
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="uncommon"]:not(.revealed):hover .card-slot-inner {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9), 0 0 32px rgba(16, 185, 129, 0.55);
}
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="rare"]:not(.revealed):hover .card-slot-inner {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9), 0 0 36px rgba(56, 189, 248, 0.65);
}
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="very-rare"]:not(.revealed):hover .card-slot-inner,
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="very rare"]:not(.revealed):hover .card-slot-inner {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9), 0 0 42px rgba(192, 132, 252, 0.75);
}
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="legendary"]:not(.revealed):hover .card-slot-inner {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.9), 0 0 50px rgba(245, 158, 11, 0.9), inset 0 0 16px rgba(245, 158, 11, 0.4);
}
.cards-fanned-deck.cards-dealt .fanned-card-slot[data-rarity="legendary"]:not(.revealed):hover .back-core-gem {
    transform: scale(1.4);
    filter: brightness(1.6) drop-shadow(0 0 12px rgba(245, 158, 11, 0.9));
}

/* 3D Card Flipper: Strictly controls 3D flip rotation (rotateY 180deg) */
.card-flip-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
    will-change: transform;
    border-radius: var(--card-radius);
}
.card-flip-flipper.is-flipped {
    transform: rotateY(180deg);
}

/* Cinematic Legendary Suspense Flip (No !important, smooth handoff) */
.card-flip-flipper.hit-stop-legendary {
    animation: legendarySuspenseFlip 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes legendarySuspenseFlip {
    0% { transform: rotateY(0deg) scale(1); }
    40% { transform: rotateY(90deg) scale(1.10); }
    60% { transform: rotateY(90deg) scale(1.12); } /* Tension pause */
    100% { transform: rotateY(180deg) scale(1); }
}

/* Legendary Radiant Border Frame */
.legendary-radiant-frame {
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--card-radius) + 2px);
    pointer-events: none;
    z-index: 26;
    background: linear-gradient(135deg, #ffd700, #fbbf24, #ffffff, #f59e0b, #ffd700);
    background-size: 300% 300%;
    animation: radiantFrameShift 3s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 3px;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.8), inset 0 0 10px rgba(254, 240, 138, 0.6);
}
@keyframes radiantFrameShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Bouncy "NEW DISCOVERY" Ribbon Drop */
.card-new-ribbon {
    animation: ribbonDropIn 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.25) backwards;
}
@keyframes ribbonDropIn {
    0% { transform: translateY(-20px) scale(0.6); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Specular diagonal sheen sweep upon reveal */
.card-reveal-sheen {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 30;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.65) 50%,
        transparent 65%,
        transparent 100%
    );
    background-size: 300% 300%;
    opacity: 0;
    transform: translateZ(2px);
}
.fanned-card-slot.just-flipped .card-reveal-sheen {
    animation: sheenSweep 0.75s ease-out forwards;
}
@keyframes sheenSweep {
    0% { background-position: 0% 0%; opacity: 0; }
    20% { opacity: 0.95; }
    100% { background-position: 100% 100%; opacity: 0; }
}

.card-flip-flipper:not(.is-flipped) .card-side-front {
    pointer-events: none;
}
.card-flip-flipper.is-flipped .card-side-back {
    pointer-events: none;
}

/* Card Flip Reveal Shine Burst */
.fanned-card-slot.just-flipped .card-foil-sheen {
    opacity: 0.9 !important;
    transition: opacity 0.8s ease-out;
}
.fanned-card-slot.just-flipped .card-glare {
    opacity: 0.85 !important;
    transition: opacity 0.8s ease-out;
}

.card-side {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.card-side-back {
    background: #0f172a;
    border: 2px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}
.card-back-ornament {
    width: 90%;
    height: 90%;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
}
.back-rune-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px dashed #38bdf8;
    opacity: 0.5;
    animation: spin-rune 12s linear infinite;
}

.back-core-gem {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 15px #38bdf8;
    margin-top: -38px;
    transition: all 0.3s ease;
}

.back-brand {
    font-size: 10px;
    font-weight: 900;
    color: #94a3b8;
    letter-spacing: 2px;
    margin-top: 16px;
}

@keyframes spin-rune {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.card-side-front { transform: rotateY(180deg); overflow: visible !important; }

/* Screen Shake & Flash */
.screen-shake { animation: screen-shake-anim 0.5s ease-in-out; }
@keyframes screen-shake-anim {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-8px, 6px); }
    40% { transform: translate(8px, -6px); }
    60% { transform: translate(-4px, 4px); }
    80% { transform: translate(4px, -2px); }
}

.screen-flash-burst, .screen-flash-legendary, .screen-flash-thunder {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99999;
    animation: flash-fade 0.6s ease-out forwards;
}
.screen-flash-burst { background: rgba(56, 189, 248, 0.4); }
.screen-flash-legendary { background: rgba(251, 191, 36, 0.5); }
.screen-flash-thunder { background: rgba(255, 255, 255, 0.85); animation-duration: 0.8s; }
@keyframes flash-fade { from { opacity: 1; } to { opacity: 0; } }

/* ==================== Real-Life Glistening Twinkling Star FX (Very Rare & Legendary) ==================== */
.card-twinkle-fx {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    z-index: 24;
    transform: translateZ(2.5px);
    overflow: visible;
}

.twinkle-star {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    width: 17px;
    height: 17px;
}

.twinkle-star-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: center center;
}

/* Reduced star count (2 stars) with rare, staggered cycles */
.twinkle-star.star-1 {
    animation: card-star-twinkle 8.5s ease-in-out infinite;
    animation-delay: 0.6s;
}

.twinkle-star.star-2 {
    animation: card-star-twinkle 10.5s ease-in-out infinite;
    animation-delay: 4.8s;
}

/* Legendary Radiant Gold & Diamond Shimmer */
.twinkle-legendary {
    color: #fbbf24;
}

.twinkle-legendary .twinkle-star-svg {
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 1px #ffffff);
}

.twinkle-legendary .twinkle-halo {
    fill: rgba(254, 240, 138, 0.45);
    filter: blur(2px);
}

.twinkle-legendary .twinkle-sparkle-diag {
    fill: #fde047;
    opacity: 0.75;
}

.twinkle-legendary .twinkle-sparkle-cross {
    fill: #fffbeb;
    filter: drop-shadow(0 0 2px #f59e0b) drop-shadow(0 0 1px #ffffff);
}

.twinkle-legendary .twinkle-core {
    fill: #ffffff;
    filter: drop-shadow(0 0 2px #ffffff);
}

/* Very Rare Cosmic Amethyst & Starlight Shimmer */
.twinkle-very-rare {
    color: #c084fc;
}

.twinkle-very-rare .twinkle-star-svg {
    filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.8)) drop-shadow(0 0 1px #ffffff);
}

.twinkle-very-rare .twinkle-halo {
    fill: rgba(216, 180, 254, 0.45);
    filter: blur(2px);
}

.twinkle-very-rare .twinkle-sparkle-diag {
    fill: #f472b6;
    opacity: 0.75;
}

.twinkle-very-rare .twinkle-sparkle-cross {
    fill: #f3e8ff;
    filter: drop-shadow(0 0 2px #9333ea) drop-shadow(0 0 1px #ffffff);
}

.twinkle-very-rare .twinkle-core {
    fill: #ffffff;
    filter: drop-shadow(0 0 2px #ffffff);
}

/* Specular Shimmer Responsiveness on 3D Card Hover */
.card-3d-wrapper:hover .card-twinkle-fx .twinkle-star-svg {
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px #ffffff);
}

.locked .card-twinkle-fx {
    display: none !important;
}

/* AAA Astroid Diamond Cross Flare Animation (Subtle, Rare Glistening Glint) */
@keyframes card-star-twinkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    8% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    16% {
        transform: scale(1.30) rotate(20deg);
        opacity: 1;
    }
    21% {
        transform: scale(0.95) rotate(26deg);
        opacity: 0.85;
    }
    27% {
        transform: scale(1.15) rotate(34deg);
        opacity: 0.95;
    }
    34% {
        transform: scale(0.30) rotate(44deg);
        opacity: 0.20;
    }
    40% {
        transform: scale(0) rotate(50deg);
        opacity: 0;
    }
    100% {
        transform: scale(0) rotate(50deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .twinkle-star {
        animation: none !important;
        opacity: 0 !important;
    }
}