/* --- 0. SCALING VARIABLE --- */
:root {
    --s: 1.8; /* CHANGE THIS to scale the card (e.g., 1.5, 2, 0.5) */
}

/* --- 1. FONTS & RESET --- */
@font-face {
    font-family: 'Bedstead','Berlin Sans FB';
    src: url('/assets/fonts/berlin_sans.TTF') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'Berlin Sans FB Demi Bold';
    src: url('/assets/fonts/berlin_sans_demibold.TTF') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'Bedstead';
    /* Ensure the path matches where you uploaded the file */
    src: url('/assets/fonts/bedstead.condensed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bedstead Bold';
    /* Ensure the path matches where you uploaded the file */
    src: url('/assets/fonts/bedstead.bold-condensed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Bedstead','Berlin Sans FB', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* The Wrapper */
/* .card { */
    /* SCALING APPLIED */
    /* width: calc(300px * var(--s));
    height: calc(420px * var(--s));
    border-radius: calc(15px * var(--s));
    
    position: relative;
    overflow: hidden; 
    box-shadow: 0 calc(10px * var(--s)) calc(30px * var(--s)) rgba(0,0,0,0.5);
    transform-style: preserve-3d;
} */

/* --- 2. THE NEW 3D STRUCTURE --- */

/* A. The Scene */
.scene {
    width: calc(300px * var(--s));
    height: calc(420px * var(--s));
    perspective: 1000px; /* Essential for 3D depth */
}

/* B. The Tilt Wrapper (Controlled by VanillaTilt) */
.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* Passes 3D depth to the child */
    cursor: pointer;
}

/* C. The Flip Inner (Controlled by CSS Click) */
.card-flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* Vital */
    transition: transform 0.8s;   /* Smooth flip speed */
}

/* D. The Trigger */
/* When the PARENT (.card-tilt) has the 'is-flipped' class... */
/* ...rotate the CHILD (.card-flip-inner) 180 degrees. */
.card.is-flipped .card-flip-inner {
    transform: rotateY(180deg);
}

/* --- 3. FACES --- */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Hides the back when turned */
    backface-visibility: hidden;
    
    border-radius: calc(15px * var(--s));
    overflow: hidden;
    box-shadow: 0 calc(10px * var(--s)) calc(30px * var(--s)) rgba(0,0,0,0.5);
}

/* FRONT */
.card-front {
    background-color: #1a1a1a;
    transform: rotateY(0deg); /* Faces forward */
    z-index: 2;
}

/* BACK */
.card-back {
    transform: rotateY(180deg); /* Faces backward */
    background-image: url('/assets/card_back.png');
    background-size: cover;
    background-position: center;
}


/* SHARED RULES */
.card-base, .card-sparkle, .card-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    pointer-events: none; 
}

/* LAYER 1: The Base Image */
.card-base {
    background-image: var(--base-img);
}

/* LAYER 2: The Sparkle Overlay */
.sparkle-wrapper {
   position: absolute;
   top: 0; left: 0; width: 100%; height: 100%;
   pointer-events: none;
   
   -webkit-mask-image: url('assets/sparkles.png'), url('assets/foil_mask.png');
   mask-image: url('assets/sparkles.png'), url('assets/foil_mask.png');

   -webkit-mask-composite: source-in; 
   mask-composite: intersect;

   -webkit-mask-size: 100% 100%, cover; 
   mask-size: 100% 100%, cover;
   
   -webkit-mask-position: center;
   mask-position: center;
   
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;

   mix-blend-mode: plus-lighter; 
   opacity: 1;
}

.card-sparkle {
    position: absolute;
    top: -100%; left: -100%; width: 300%; height: 300%;
    pointer-events: none;

    background: repeating-linear-gradient(
        115deg, 
        transparent 0%, 
        transparent 5%, 
        #ffffff 6%,        /* Flash */
        transparent 7%, 
        transparent 9%,
        #ffffff 10%,       /* Flash */
        transparent 11%,
        transparent 20%    /* Loop */
    );
    
    /* SCALING APPLIED: Movement speed scales with size */
    transform: translateX(calc(var(--tilt-y, 0) * 20px * var(--s))) translateY(calc(var(--tilt-x, 0) * 20px * var(--s)));
    
    filter: brightness(2.0) contrast(2.0);
    opacity: 1; 
}

/* --- 1. KILL THE ORIGINAL TEXT (Mask Only Mode) --- */
.player-name, .player-ovr, .cat-header, .stat-row span {
    color: transparent !important;
    text-shadow: none !important; 
    opacity: 0.01 !important; 
    user-select: none;
    pointer-events: none;
}

/* --- 2. THE MASTER WINDOW (The Stencil) --- */
.text-foil-stencil {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mix-blend-mode: hard-light;
    opacity: 1; 
}

/* LAYER 2: THE LIQUID METAL WRAPPER */
.liquid-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 5;

    -webkit-mask-image: url('/assets/foil_mask.png');
    mask-image: url('/assets/foil_mask.png');
    
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mix-blend-mode: hard-light;
    opacity: 1; 
}

.card-liquid {
    position: absolute;
    top: -250%; 
    left: -250%; 
    width: 600%; 
    height: 600%;
    pointer-events: none;
    
    /* SCALING APPLIED */
    background-position: 0 calc(400px * var(--s)); 
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
    
    filter: blur(calc(0.5px * var(--s)));
    opacity: 1;
}

/* --- RARITY VARIANTS (Colors unchanged) --- */
.card.bronze .card-liquid {
    background-image: repeating-linear-gradient(115deg, #bd9667 0%, #bd9667 40%, #ffeebb 45%, #bd9667 50%, #bd9667 100%) !important;
}
.card.silver .card-liquid {
    background-image: repeating-linear-gradient(115deg, #b1b7bb 0%, #b1b7bb 40%, #ffffff 45%, #b1b7bb 50%, #b1b7bb 100%) !important;
}
.card.gold .card-liquid{
    background-image: repeating-linear-gradient(
        115deg, 
        #cf9f26 0%,   /* Rich Gold */
        #cf9f26 40%, 
        #fffec4 45%,  /* Bright Lemon/White Glare */
        #cf9f26 50%, 
        #cf9f26 100%
    ) !important;
    /* Optional: boost brightness slightly */
    filter: brightness(1.1) !important;
}
.card.diamond .card-liquid{
    background-image: repeating-linear-gradient(115deg, #2ddbe6 0%, #2ddbe6 40%, #e0ffff 45%, #2ddbe6 50%, #2ddbe6 100%) !important;
}

/* --- DIAMOND SPARKLE CONTAINER --- */
.sparkle-wrapper {
    position: absolute;
    z-index: 5;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    
    -webkit-mask-image: url('assets/sparkles.png'), url('assets/foil_mask.png');
    mask-image: url('assets/sparkles.png'), url('assets/foil_mask.png');

    -webkit-mask-composite: source-in; 
    mask-composite: intersect;

    -webkit-mask-size: cover, 100% 100%; 
    mask-size: cover, 100% 100%;
    
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    mix-blend-mode: normal; 
    opacity: 0; 
    transition: opacity 0.3s ease;
}

/* --- THE MOVING COLOR SHEET --- */
.card-sparkle {
    position: absolute;
    top: -250%; left: -250%; width: 600%; height: 600%;
    pointer-events: none;

    background: repeating-linear-gradient(
        115deg, #ffffff 0%, #ffffff 40%, #003366 45%, #ffffff 50%, #ffffff 100% 
    );
    
    /* SCALING APPLIED */
    background-position: 0 calc(400px * var(--s)); 
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
    
    opacity: 0.8; 
}

.card.diamond .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        transparent 0%, 
        
        /* 1. LEFT FLANK (Pure White) */
        transparent 35%, 
        #ffffff 36%, #ffffff 49%, transparent 50%, 
        
        /* 2. CENTER GAP (Let the rainbow shine) */
        #003366 45%, 
        #003366 52%, 

        /* 3. RIGHT FLANK (Pure White) */
        transparent 52%, 
        #ffffff 53%, #ffffff 58%, transparent 59%, 
        
        transparent 100%
    );
    
    /* Normal + Brightness makes them crisp white dots on top of the rainbow */
    mix-blend-mode: normal; 
    filter: brightness(2.0);
    opacity: 1;
}

.card.diamond .sparkle-wrapper, 
.card.diamond .text-sparkle-stencil{ opacity: 1; }

/* .card.diamond .sparkle-wrapper { opacity: 1; } */

/* 1. THE LIQUID BORDER (Rainbow) */
.card.holo .card-liquid {
    background-image: repeating-linear-gradient(115deg, #ff9999 0%, #ffff99 1.6%, #99ff99 3.3%, #99ffff 5%, #9999ff 6.6%, #ff99ff 8.3%, #ff9999 10%);
    mix-blend-mode: color-dodge; 
    
    /* SCALING APPLIED: Faster speed for Holo */
    transform: 
        translateX(calc(var(--tilt-x, 0) * 35px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * 35px * var(--s)));
    
    opacity: 0.7;
}

/* --- LAYER 4: STATS (The Fix) --- */
.stats-wrapper {
    z-index: 10;
    display: flex;
    flex-direction: column;
    
    /* SCALING APPLIED */
    padding: calc(6px * var(--s)) calc(18px * var(--s)) calc(15px * var(--s)) calc(18px * var(--s));
    
    color: white;
    transform: translateZ(calc(30px * var(--s)));
    text-shadow: 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0,0,0,0.9);
}

/* --- HEADER --- */
.card-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    
    font-family: 'Bedstead Bold','Berlin Sans FB Demi Bold', sans-serif;
    font-weight: bold;
    /* SCALING APPLIED */
    font-size: calc(14pt * var(--s));

    margin-top: calc(0.5px * var(--s)); 
    height: calc(45px * var(--s)); 
    padding: 0 calc(7.5px * var(--s)); 
}

/* LEFT GROUP */
.header-left { 
    display: flex; 
    align-items: center; 
    /* SCALING APPLIED */
    gap: calc(6.5px * var(--s)); 
}

.team-logo { 
    /* SCALING APPLIED */
    height: calc(12pt * var(--s)); 
    width: calc(12pt * var(--s)); 
    
    /* Pushes logo down slightly to align with text baseline */
    transform: translateY(calc(1.5px * var(--s))); 
}

.player-name { 
    font-weight: bold; 
    white-space: nowrap; 
}

.player-ovr { 
    /* SCALING APPLIED */
    font-size: calc(16pt * var(--s)); 
    color: white; 
    font-weight: bold;
    text-shadow: 0 calc(2px * var(--s)) calc(4px * var(--s)) rgba(0,0,0,0.8);
}

.hero-spacer { flex-grow: 1; }

/* --- STATS GRID --- */
.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    /* SCALING APPLIED */
    column-gap: calc(10px * var(--s)); 
    row-gap: calc(8px * var(--s)); 
    
    /* ABSOLUTE POSITIONING (Keep this!) */
    position: absolute;
    top: calc(228.5px * var(--s)); 
    left: 0;
    width: 100%;
    
    padding-left: calc(18px * var(--s));
    padding-right: calc(18px * var(--s));
    padding-bottom: calc(5px * var(--s));
    
    /* VITAL: Ensures padding doesn't expand the width */
    box-sizing: border-box; 
}

.stat-block { 
    display: flex; 
    flex-direction: column; 
}

/* CATEGORY HEADERS */
.cat-header {
    text-align: center;
    font-family: 'Bedstead Bold', 'Berlin Sans FB Demi Bold';
    font-weight: bold;
    
    /* SCALING APPLIED */
    font-size: calc(10pt * var(--s));
    
    /* 1. DEFINE THE HEIGHT OF THE TEXT BOX */
    /* This creates the space for the letters "Attack" */
    height: calc(10pt * var(--s)); 
    line-height: 1; 

    /* 2. CREATE THE GAP (The Fix) */
    /* Increase THIS number to push the stats rows down */
    margin-bottom: calc(4.5px * var(--s)); 

    /* 3. RESET PADDING/BOXING */
    padding-bottom: 0; 
    padding-top: calc(2px * var(--s)); /* Keep your top nudge if you like */
    box-sizing: border-box; /* Back to standard box mode */

    /* Flex alignment */
    display: flex;
    align-items: flex-end; /* Align text to bottom of its own height */
    justify-content: center;
    
    margin-left: auto; 
    margin-right: auto;
    
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 3. LOCK THE ROW HEIGHTS */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    font-family: 'Bedstead','Berlin Sans FB', sans-serif;
    font-weight: normal; 
    
    /* SCALING APPLIED */
    font-size: calc(10pt * var(--s));
    
    /* 4. EXPLICIT HEIGHT (The Lego Brick Fix) */
    /* This forces every row to be exactly this tall, no matter what the text does */
    height: calc(11pt * var(--s)); 
    
    /* Reset line-height to avoid conflicts */
    line-height: 1; 
    
    padding: 0 calc(4px * var(--s)); 
    box-sizing: border-box;
}

.stats-wrapper .card-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 11; 
    background: none !important; 
    pointer-events: none;
    
    mix-blend-mode: overlay;
    opacity: 0.5;
    position: absolute; 
    width: 100%; 
    height: 100%; 
    box-sizing: border-box; 
}


/* --- PLAYER ART LAYER --- */
.art-wrapper {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; 
    pointer-events: none;

    -webkit-mask-image: url('/assets/art_mask_template.png');
    mask-image: url('/assets/art_mask_template.png');

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* THE ART IMAGE ITSELF */
.player-art {
    width: 100%;
    height: 100%;
    background-size: 110% auto; 
    background-repeat: no-repeat;
    
    /* SCALING APPLIED */
    background-position: center calc(50px * var(--s));
}

/* --- TEXT SPARKLE CONTAINER --- */
.text-sparkle-stencil {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 12; 

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    opacity: 0; 
    transition: opacity 0.3s ease;
}

.card.diamond .sparkle-wrapper, 
.card.diamond .text-sparkle-stencil { opacity: 1; }

/* --- TEXTURE LAYER --- */
.sparkle-texture-layer {
    width: 100%;
    height: 100%;
    -webkit-mask-image: url('/assets/sparkles.png');
    mask-image: url('/assets/sparkles.png');
    -webkit-mask-size: cover; 
    mask-size: cover;
    mix-blend-mode: color-dodge; 
}

/* --- MOVEMENT LAYER --- */
.text-sparkle-stencil .card-sparkle {
    position: absolute;
    top: -250%; left: -250%; width: 600%; height: 600%;
    
    background: repeating-linear-gradient(
        115deg, #ffffff 0%, #ffffff 40%, #003366 45%, #ffffff 50%, #ffffff 100% 
    );
    
    /* SCALING APPLIED */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
        
    filter: brightness(2.0) contrast(1.5);
}

/* --- TOTW (Team of the Week) --- */
/* THEME: Lighter Gold & Bright Bronze (Fixes dark text) */
.card.totw .card-liquid {
    background-image: repeating-linear-gradient(
        115deg, 
        #ffd700 0%,      /* Bright Gold (Unchanged) */
        #b8860b 30%,     /* CHANGED: DarkGoldenRod (Was #8B6914) -> Much lighter */
        
        /* SHARP BEAM */
        #b8860b 42%,     
        #ffffff 45%,     
        #b8860b 48%,     
        
        #b8860b 100%     /* The main fill color is now lighter */
    ) !important;
    
    mix-blend-mode: hard-light; 
    /* Removed the filter since we fixed the source colors */
    
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px* var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px* var(--s)));
}

.card.totw .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        transparent 0%, 
        
        /* --- 1. LEFT FLANK --- */
        /* Far Left */
        transparent 35%, 
        #ffd700 36%, #ffffff 37%, transparent 38%, 
        
        /* Near Left */
        transparent 41%, 
        #ffd700 42%, #ffffff 49%, transparent 50%, 

        /* --- 2. THE GAP --- */
        transparent 45%,
        transparent 50%,

        /* --- 3. RIGHT FLANK --- */
        /* Near Right */
        transparent 52%,
        #ffffff 53%, #ffd700 58%, transparent 59%, 
        
        /* Far Right */
        transparent 61%,
        #ffffff 63%, #ffd700 64%, transparent 65%, 
        
        transparent 100%
    );
    
    mix-blend-mode: color-dodge; 
    opacity: 1;
}
/* Ensure sparkles are visible */
.card.totw .sparkle-wrapper, .card.totw .text-sparkle-stencil { opacity: 1; }


/* --- TOTS (Team of the Season) --- */
/* THEME: Electric Cyan & Deep Blue */
.card.tots .card-liquid {
    background-image: repeating-linear-gradient(
        115deg, 
        #00c6ff 0%,      /* Cyan */
        #0072ff 35%,     /* Deep Blue */
        #ffffff 45%,     /* CENTRAL GLARE (The White Beam) */
        #0072ff 55%,     /* Deep Blue */
        #0072ff 100%     
    ) !important;
    
    /* 'hard-light' makes it look metallic like the base cards */
    mix-blend-mode: hard-light; 
    
    /* Standard Movement Speed */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px* var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px* var(--s)));
}

/* TOTS Sparkles (Dense Field minus Glare) */
/* TOTS Sparkles (Centered Tight Formation) */
.card.tots .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        
        /* --- OUTER LEFT (Mostly Invisible) --- */
        transparent 0%, 
        transparent 30%,

        /* --- 1. LEFT FLANK (Immediate Visibility: 35% - 44%) --- */
        /* These sit right next to the glare so you see them instantly */
        #00ffff 35%, #ffffff 36%, transparent 37%,  /* Sparkle A */
        transparent 39%,
        #00ffff 41%, #ffffff 42%, #00ffff 49%, transparent 50%, /* Sparkle B (Contrast) */

        /* --- 2. THE CENTRAL GLARE BEAM (45% - 55%) --- */
        /* Keep this clear for the liquid beam */
        transparent 45%,
        transparent 55%,

        /* --- 3. RIGHT FLANK (Immediate Visibility: 56% - 65%) --- */
        /* These sit right next to the glare on the other side */
        transparent 52%,
        #ffffff 53%, #00ffff 58%, transparent 59%, /* Sparkle C */
        transparent 61%,
        #ffffff 63%, #00ffff 64%, transparent 65%, /* Sparkle D */
        
        /* --- OUTER RIGHT (Mostly Invisible) --- */
        transparent 70%,
        transparent 100%
    );
    
    mix-blend-mode: color-dodge; 
    opacity: 1;
}

/* Force sparkles ON for TOTS */
.card.tots .sparkle-wrapper,
.card.tots .text-sparkle-stencil {
    opacity: 1;
}

/* --- MOMENTS (Iconic Moments) --- */
/* THEME: Platinum & White Gold */
.card.moments .card-liquid {
    background-image: repeating-linear-gradient(
        115deg,
        #ff9999 0%,
        #ffff99 1.6%,
        #99ff99 3.3%,
        #99ffff 5%,
        #9999ff 6.6%,
        #ff99ff 8.3%,
        #ff9999 10%
    );
    /* Hard-light makes the colors scream */
    mix-blend-mode: color-dodge; 
    
    /* EXTREME MOVEMENT SPEED */
    transform: 
        translateX(calc(var(--tilt-x, 0) * 35px* var(--s))) 
        translateY(calc(var(--tilt-y, 0) * 35px* var(--s)));
    
    opacity: 0.7;
}

/* MOMENTS SPARKLES (Pure White Starfield) */
.card.moments .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        transparent 0%, 
        
        /* 1. LEFT FLANK (Pure White) */
        transparent 35%, 
        #ffffff 36%, #ffffff 49%, transparent 50%, 
        
        /* 2. CENTER GAP (Let the rainbow shine) */
        transparent 45%, 
        transparent 55%, 

        /* 3. RIGHT FLANK (Pure White) */
        transparent 52%, 
        #ffffff 53%, #ffffff 58%, transparent 59%, 
        
        transparent 100%
    );
    
    /* Normal + Brightness makes them crisp white dots on top of the rainbow */
    mix-blend-mode: normal; 
    filter: brightness(2.0);
    opacity: 1;
}

/* =========================================
   TEAM BOOSTER FOIL GRADIENTS
   ========================================= */

/* 1. North Sea Raiders: Titanium Silver */
.card.booster.NSR .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #2c3e50 10%, 
        #bdc3c7 35%, 
        #ffffff 50%, 
        #bdc3c7 65%, 
        #2c3e50 90%
    );
}

/* 2. Antwerp Anglers: Black Chrome (Dark & Glossy) */
.card.booster.AA .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #000000 10%, 
        #434343 35%, 
        #d4d4d4 50%, 
        #434343 65%, 
        #000000 90%
    );
}

/* 3. Dido's Army: Champagne Gold */
.card.booster.DA .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #483D03 10%, 
        #D4AF37 35%, 
        #fffecd 50%, 
        #D4AF37 65%, 
        #483D03 90%
    );
}

/* 4. Kraków Dragons: Magma Orange */
.card.booster.KD .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #3e0e00 10%, 
        #ff4500 35%, 
        #ffae00 50%, 
        #ff4500 65%, 
        #3e0e00 90%
    );
}

/* 5. Dnipro Steel: Electric Cyan */
.card.booster.DS .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #00203f 10%, 
        #00b4db 35%, 
        #e0ffff 50%, 
        #00b4db 65%, 
        #00203f 90%
    );
}

/* 6. MotherPuckers: Neon Magenta */
.card.booster.MP .text-foil-stencil .card-liquid {
    background-image: linear-gradient(
        105deg, 
        #2a0026 10%, 
        #c90076 35%, 
        #ff99cc 50%, 
        #c90076 65%, 
        #2a0026 90%
    );
}
/* --- HUSKY MAIN FOIL WRAPPER --- */
/* This tints the white base plate Gold */
.card.husky .card-liquid {
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: color-burn !important; /* Burns the gold into the white plate */
    
    background-image: linear-gradient(
        105deg, 
        #d4af37 10%,   /* Gold */
        #ffd700 35%,   /* Bright Gold */
        #ffffff 50%,   /* White Glare */
        #ffd700 65%,   /* Bright Gold */
        #d4af37 90%    /* Gold */
    );
    
    background-size: 200% 200%;
    
    /* Physics Movement */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
}

.card.husky .card-sparkle{
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: color-burn !important; /* Burns the gold into the white plate */
    
    background-image: linear-gradient(
        105deg, 
        #d4af37 10%,   /* Gold */
        #ffd700 35%,   /* Bright Gold */
        #ffffff 50%,   /* White Glare */
        #ffd700 65%,   /* Bright Gold */
        #d4af37 90%    /* Gold */
    );
    
    background-size: 200% 200%;
    
    /* Physics Movement */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
}

/* Optional: Add sparkles to the background too */
.card.husky .sparkle-wrapper,
.card.husky .text-sparkle-stencil {
    opacity: 1;
}

/* Force sparkles ON for Moments */
.card.moments .sparkle-wrapper, 
.card.moments .text-sparkle-stencil { 
    opacity: 1; 
}

/* --- MISSING SPARKLE TRIGGERS --- */

/* 1. Force Sparkles for HOLO (Specials) */
.card.holo .sparkle-wrapper,
.card.holo .text-sparkle-stencil {
    opacity: 1;
}

/* 2. Force Sparkles for TOTW */
.card.totw .sparkle-wrapper,
.card.totw .text-sparkle-stencil {
    opacity: 1;
}

/* 3. Force Sparkles for TOTS */
.card.tots .sparkle-wrapper,
.card.tots .text-sparkle-stencil {
    opacity: 1;
}

/* 4. Force Sparkles for MOMENTS */
.card.moments .sparkle-wrapper,
.card.moments .text-sparkle-stencil {
    opacity: 1;
}



/* ====== DEBUG MODE ====== */
/* Uncomment these lines to see the invisible text boxes */
/* /* */
.stats-wrapper { border: calc(2px * var(--s)) solid transparent; }
.card-header { border: calc(2px * var(--s)) solid transparent; }
.stats-container { border: calc(2px * var(--s)) solid transparent; }
.stat-block { border: calc(1px * var(--s)) solid transparent; }
.stat-row { border: calc(1px * var(--s)) dotted transparent; }

/* .stats-wrapper { border: 2px solid red; }
.card-header { border: 2px solid yellow; }
.stats-container { border: 2px solid green; }
.stat-block { border: 1px solid blue; }
.stat-row { border: 1px dotted cyan; } */