/* --- 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;
}

/* --- NEW: JUNIOR BACK OVERRIDE --- */
/* This triggers when we add the 'junior' class to the main card div */
.card.junior .card-back {
    background-image: url('/assets/card_back_PJL.png');
}


/* 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; }

.card.totw_silver .card-liquid {
    background-image: repeating-linear-gradient(115deg, #b1b7bb 0%, #b1b7bb 40%, #ffffff 45%, #b1b7bb 50%, #b1b7bb 100%) !important;
    /* Slightly boosted contrast for the 'Pop' */
    /*filter: contrast(1.4) !important;*/
}

/* Bronze TOTW Foil */
.card.totw_bronze .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #2a1608 0%, 
        #bd9667 44%, 
        #ffffff 45%, 
        #bd9667 46%, 
        #2a1608 100%
    ) !important;
    mix-blend-mode: overlay;
    filter: contrast(1.4) saturate(1.2) brightness(1.1) !important;
}

/* Bronze TOTW Sparkle */
.card.totw_bronze .card-sparkle {
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 12px,
        #ffffff 13px,
        #bd9667 15px, /* Copper/Bronze glint */
        transparent 16px,
        transparent 25px
    );
    background-size: 15% 15%;
}

/* Silver Sparkle: Ice Blue Density */
.card.totw_silver .card-sparkle {
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 10px,
        #ffffff 11px, 
        #b9f2ff 12px, 
        transparent 13px,
        transparent 20px /* Tighter repeat */
    );
    background-size: 15% 15%;
}

.card.totw_gold .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #483D03 0%, 
        #D4AF37 44%, 
        #fffecd 45%, 
        #D4AF37 46%, 
        #483D03 100%
    ) !important;
    mix-blend-mode: overlay;
    /*filter: contrast(1.3) saturate(1.5) brightness(1.1) !important;*/
}

/* Gold Sparkle: Warm Ember Density */
.card.totw_gold .card-sparkle {
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 10px,
        #ffffff 11px,
        #ffd700 13px, 
        transparent 14px,
        transparent 20px
    );
    background-size: 12% 12%;
}

.card.totw_diamond .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #00152a 0%, 
        #2ddbe6 44%, 
        #ffffff 45%, 
        #2ddbe6 46%, 
        #00152a 100%
    ) !important;
    mix-blend-mode: color-dodge;
    filter: contrast(1.5) brightness(1.2) !important;
}

/* Diamond TOTW SPARKLES (Magenta Pop) */
.card.totw_diamond .card-sparkle {
    background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 10px,
        #ff00ff 11px,      /* VIVID MAGENTA CORE */
        #ff00ff 12px,      /* Hold the color */
        #4b0082 13px,      /* INDIGO SHADOW (The Anchor) */
        transparent 14px,
        transparent 20px   /* High-density repeat */
    ) !important;
    
    /*background-size: 10% 10%;*/
    
    /* We use 'color-dodge' or 'screen' here. 
       Plus-lighter might make it too white on the flare. */
    /*mix-blend-mode: screen !important; */
    
    /* Cranking the saturation and contrast so the purple stays 'hot' */
    filter: brightness(2.5) contrast(1.4) saturate(2.5) !important;
    opacity: 1 !important;
}

.card[class*="totw_"] .sparkle-wrapper, .card[class*="totw_"] .text-sparkle-stencil {
    opacity: 1 !important;
    filter: brightness(2.5) contrast(1.2) !important; /* Forces glints to burn through */
    /*mix-blend-mode: plus-lighter !important; */
    z-index: 10; /* Ensure it's above the foil flare */
}


/* --- 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
   ========================================= */
   
/* ============================================================
   BOOSTER FIX: The "Inverted" Black Primer Layer
   ============================================================ */

/* =========================================
   BOOSTER "PRIMER" FIX (The Pseudo-Element Method)
   ========================================= */
   
/* --- FIX: ROUND THE BASE PLATE CORNERS --- */
/* prevents the square edges from poking out behind the rounded foil border */
/* =========================================
   FINAL CORNER FIX (The Cookie Cutter)
   ========================================= */

/* Target ALL layers that sit behind the foil:
   1. The Base Plate Image (.card-base)
   2. The Black Text Primer (.booster-primer-text)
   3. The Black Border Primer (.booster-primer-border)
*/
.card.booster .card-base,
.booster-primer-text,
.booster-primer-border {
    /* 1. FORCE THE SHAPE */
    /* This physically cuts off the corners. 
       No 3D glitch can bypass this. */
    -webkit-clip-path: inset(0 round calc(9.921px * var(--s)));
    clip-path: inset(0 round calc(9.921px * var(--s)));

    /* 2. Backup Radius (Good practice) */
    border-radius: calc(9.921px * var(--s)) !important;
}

/* 3. ENSURE Z-INDEX IS CORRECT */
/* Base=0, Primers=3, Foil=5 */
.card.booster .card-base { z-index: 0; }
.booster-primer-text, .booster-primer-border { z-index: 3; }
.card.booster .liquid-wrapper, .card.booster .text-foil-stencil { z-index: 5; }

/* 1. Reset Stacking Context & Blend Modes */
/* We remove hard-light so the layers are opaque paint, not transparent filters */
.card.booster .liquid-wrapper,
.card.booster .text-foil-stencil {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    /* This creates a new stacking context for the ::before element */
    transform-style: preserve-3d; 
    z-index: 5;
}

/* 2. Create the BLACK BACKING LAYER */
/* This automatically takes the shape of the parent's mask! */
.card.booster .liquid-wrapper::before,
.card.booster .text-foil-stencil::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* THE PRIMER COLOR */
    background-color: #000000; 
    
    /* STACKING: Put it BEHIND the foil liquid */
    z-index: -1; 
}

/* 3. The Foil Liquid itself */
.card.booster .card-liquid {
    /* Ensure this sits ON TOP of the black ::before layer */
    z-index: 2; 
    
    /* Force it to be SOLID PAINT (No blending with the black) */
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* 1. North Sea Raiders: Titanium Silver */
.card.booster.NSR .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #2c3e50 0%, 
        #bdc3c7 40%, 
        #ffffff 45%, 
        #bdc3c7 50%, 
        #2c3e50 100%
    );
}

/* 2. Antwerp Anglers: Black Chrome (Dark & Glossy) */
.card.booster.AA .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #000000 0%, 
        #ff4500 38%,
        #ffe100 40%, 
        #000000 41%,
        #000000 45%, 
        #000000 49%,
        #ffe100 50%, 
        #ff4500 52%,
        #000000 100%
    );
}

/* 3. Dido's Army: Champagne Gold */
.card.booster.DA .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #483D03 0%, 
        #D4AF37 40%, 
        #fffecd 45%, 
        #D4AF37 50%, 
        #483D03 100%
    );
}

/* 4. Kraków Dragons: Magma Orange */
.card.booster.KD .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #3e0e00 0%, 
        #ff4500 40%, 
        #ffae00 45%, 
        #ff4500 50%, 
        #3e0e00 100%
    );
}

/* 5. Dnipro Steel: Electric Cyan */
.card.booster.DS .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #1500ff 0%,
        #fff700 40%, 
        #1500ff 42%, 
        #fff700 44%,
        #fff700 46%,
        #1500ff 48%, 
        #fff700 50%,
        #1500ff 100%
    );
}

/* 6. MotherPuckers: Neon Magenta */
.card.booster.MP .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #000000 0%, 
        #000000 43%, 
        #a020f0 44%,
        #ffffff 45%, 
        #a020f0 46%,
        #000000 47%, 
        #000000 100%)
    ;
}

.card.booster.SS .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #f6ff00 0%, 
        #f6ff00 43%, 
        #0004ff 44%,
        #8888ff 45%, 
        #0004ff 46%,
        #f6ff00 47%, 
        #f6ff00 100%)
    ;
}

.card.booster.NU .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #ffac00 0%, 
        #ffac00 43%, 
        #666262 44%,
        #ffffff 45%, 
        #666262 46%,
        #ffac00 47%, 
        #ffac00 100%)
    ;
}

.card.booster.SC .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #000000 0%, 
        #000000 43%, 
        #f8439c 44%,
        #ffffff 45%, 
        #f8439c 46%,
        #000000 47%, 
        #000000 100%)
    ;
}

.card.booster.PA .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #ffd100 0%,
        #ffd100 37%,
        #010003 38%,
        #ffd100 39%, 
        #010003 40%,
        #ffd100 42%, 
        #010003 44%,
        #ffd100 45%, 
        #010003 46%,
        #ffd100 48%,
        #010003 49%,
        #ffd100 50%, 
        #010003 51%,
        #ffd100 52%,
        #ffd100 100%)
    ;
}

.card.booster.HB .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #010003 0%,
        #010003 37%,
        #ffc100 38%,
        #010003 39%, 
        #ffc100 40%,
        #010003 42%, 
        #ffc100 44%,
        #010003 45%, 
        #ffc100 46%,
        #010003 48%,
        #ffc100 49%,
        #010003 50%, 
        #ffc100 51%,
        #010003 52%,
        #010003 100%)
    ;
}

.card.booster.NL .card-liquid {
    /*background-image: linear-gradient(*/
    /*    115deg, */
    /*    #19f2a3 0%, */
    /*    #4faed1 40%, */
    /*    #9ce4ff 45%, */
    /*    #4faed1 50%, */
    /*    #19f2a3 100%*/
    /*);*/
    background-image: linear-gradient(
        115deg, 
        #19f2a3 0%, 
        #19f2a3 35%, 
        #4faed1 44%,
        #9ce4ff 45%, 
        #4faed1 46%,
        #19f2a3 65%, 
        #19f2a3 100%)
    ;
}

.card.booster.RL .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #000000 0%, 
        #000000 43%, 
        #ff0000 44%,
        #ff9999 45%, 
        #ff0000 46%,
        #000000 47%, 
        #000000 100%)
    ;
}

/*.card.booster.MP .text-foil-stencil {*/
/*    mix-blend-mode: color-burn;*/
/*    opacity: 1;*/
/*}*/

.card.playoff_nsr .card-liquid {
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    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.playoff_nsr .card-sparkle{
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    background-image: repeating-linear-gradient(
        115deg, 
        #cf9f26 0%,   /* Rich Gold */
        #cf9f26 40%, 
        #fffec4 45%,  /* Bright Lemon/White Glare */
        #cf9f26 50%, 
        #cf9f26 100%
    )
}

.card.playoff_nsr .sparkle-wrapper{
    opacity: 1;
}

.card.playoff_nsr .player-art {
    width: 100%;
    height: 100%;
    background-size: 87% auto; 
    background-repeat: no-repeat;
    
    /* SCALING APPLIED */
    background-position: center calc(50px * var(--s));
}

.card.playoff_kd .card-liquid {
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: hard-light !important; /* Burns the gold into the white plate */
    
    background-image: repeating-linear-gradient(115deg, #b1b7bb 0%, #b1b7bb 40%, #ffffff 45%, #b1b7bb 50%, #b1b7bb 100%) !important;

}

.card.playoff_kd .card-sparkle{
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: hard-light !important; /* Burns the gold into the white plate */
    
    background-image: repeating-linear-gradient(115deg, #b1b7bb 0%, #b1b7bb 40%, #ffffff 45%, #b1b7bb 50%, #b1b7bb 100%) !important;

}

.card.playoff_kd .sparkle-wrapper{
    opacity: 1;
}


.card.playoff_kd .player-art {
    width: 100%;
    height: 100%;
    background-size: 87% auto; 
    background-repeat: no-repeat;
    
    /* SCALING APPLIED */
    background-position: center calc(50px * var(--s));
}


.card.legend .card-base,
.legend-primer-text,
.legend-primer-border {
    /* 1. FORCE THE SHAPE */
    /* This physically cuts off the corners. 
       No 3D glitch can bypass this. */
    -webkit-clip-path: inset(0 round calc(9.921px * var(--s)));
    clip-path: inset(0 round calc(9.921px * var(--s)));

    /* 2. Backup Radius (Good practice) */
    border-radius: calc(9.921px * var(--s)) !important;
}

/* 3. ENSURE Z-INDEX IS CORRECT */
/* Base=0, Primers=3, Foil=5 */
.card.legend .card-base { z-index: 0; }
.legend-primer-text, .legend-primer-border { z-index: 3; }
.card.legend .liquid-wrapper, .card.legend .text-foil-stencil { z-index: 5; }

/* 1. Reset Stacking Context & Blend Modes */
/* We remove hard-light so the layers are opaque paint, not transparent filters */
.card.legend .liquid-wrapper,
.card.legend .text-foil-stencil {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    /* This creates a new stacking context for the ::before element */
    transform-style: preserve-3d; 
    z-index: 5;
}

/* 2. Create the BLACK BACKING LAYER */
/* This automatically takes the shape of the parent's mask! */
.card.legend .liquid-wrapper::before,
.card.legend .text-foil-stencil::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* THE PRIMER COLOR */
    background-color: #000000; 
    
    /* STACKING: Put it BEHIND the foil liquid */
    z-index: -1; 
}

/* 3. The Foil Liquid itself */
.card.legend .card-liquid {
    /* Ensure this sits ON TOP of the black ::before layer */
    z-index: 2; 
    
    /* Force it to be SOLID PAINT (No blending with the black) */
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}


/* This tints the white base plate Gold */
.card.legend .card-liquid {
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: hard-light !important; /* Burns the gold into the white plate */
    
    background-image: linear-gradient(
        115deg, 
        #ffffff 0%, 
        /*#ffffff 30%, */
        #d4af37 42%,
        #ffd700 45%, 
        #d4af37 48%,
        /*#ffffff 60%, */
        #ffffff 100%)
    ;
    
    /*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.legend .card-base {
    background-image: url('/assets/base_plates/base_plate_LEGEND.png');
}

.card.legend .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(
        115deg, 
        #ffd700 0%,   /* Gold */
        #ffd700 100%    /* 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.legend .sparkle-wrapper,
.card.legend .text-sparkle-stencil {
    opacity: 1;
}



/* --- 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: hard-light !important; /* Burns the gold into the white plate */
    
    background-image: linear-gradient(
        115deg, 
        #d4af37 0%,   /* Gold */
        #ffd700 40%,   /* Bright Gold */
        #ffffff 45%,   /* White Glare */
        #ffd700 50%,   /* Bright Gold */
        #d4af37 100%    /* 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)));*/
}

/* Special "Husky" Rarity Styling */
.card.husky .card-base {
    background-image: url('/assets/base_plate_husky.png');
}

.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(
        115deg, 
        #d4af37 0%,   /* Gold */
        #ffd700 40%,   /* Bright Gold */
        #ffffff 45%,   /* White Glare */
        #ffd700 50%,   /* Bright Gold */
        #d4af37 100%    /* 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;
}

.card.opl .card-base,
.opl-primer-text,
.opl-primer-border {
    /* 1. FORCE THE SHAPE */
    /* This physically cuts off the corners. 
       No 3D glitch can bypass this. */
    -webkit-clip-path: inset(0 round calc(9.921px * var(--s)));
    clip-path: inset(0 round calc(9.921px * var(--s)));

    /* 2. Backup Radius (Good practice) */
    border-radius: calc(9.921px * var(--s)) !important;
}

/* 3. ENSURE Z-INDEX IS CORRECT */
/* Base=0, Primers=3, Foil=5 */
.card.opl .card-base { z-index: 0; }
.opl-primer-text, .opl-primer-border { z-index: 3; }
.card.opl .liquid-wrapper, .card.opl .text-foil-stencil { z-index: 5; }

/* 1. Reset Stacking Context & Blend Modes */
/* We remove hard-light so the layers are opaque paint, not transparent filters */
.card.opl .liquid-wrapper,
.card.opl .text-foil-stencil {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    /* This creates a new stacking context for the ::before element */
    transform-style: preserve-3d; 
    z-index: 5;
}

/* 2. Create the BLACK BACKING LAYER */
/* This automatically takes the shape of the parent's mask! */
.card.opl .liquid-wrapper::before,
.card.opl .text-foil-stencil::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* THE PRIMER COLOR */
    background-color: #000000; 
    
    /* STACKING: Put it BEHIND the foil liquid */
    z-index: -1; 
}

/* 3. The Foil Liquid itself */
.card.opl .card-liquid {
    /* Ensure this sits ON TOP of the black ::before layer */
    z-index: 2; 
    
    /* Force it to be SOLID PAINT (No blending with the black) */
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

.card.opl .card-liquid {
    background-image: linear-gradient(
        115deg, 
        #fcba03 0%, 
        #D4AF37 44%, 
        #fffecd 45%, 
        #D4AF37 46%, 
        #fcba03 100%
    ) !important;
    mix-blend-mode: overlay;
    /*filter: contrast(1.3) saturate(1.5) brightness(1.1) !important;*/
}

.card.opl .card-sparkle{
    opacity: 1 !important; /* Adjust: Higher = Darker Gold, Lower = Whiter */
    mix-blend-mode: hard-light !important; /* Burns the gold into the white plate */
    
    background-image: repeating-linear-gradient(115deg, #b1b7bb 0%, #b1b7bb 40%, #ffffff 45%, #b1b7bb 50%, #b1b7bb 100%) !important;

}

.card.opl .sparkle-wrapper, .card.opl .text-sparkle-stencil {
    opacity: 1 !important;
}

/* This triggers when we add the 'junior' class to the main card div */
.card.opl .card-back {
    background-image: url('/assets/card_back_OPL.png');
}

.card.potm .card-liquid {
    background-image: repeating-linear-gradient(
        115deg, 
        #00ff87 0%,      /* Vibrant Mint Highlight */
        #006b00 35%,     /* Emerald Green Base (1 shade lighter) */
        #ffffff 45%,     /* CENTRAL GLARE (The White Beam) */
        #006b00 55%,     /* Emerald Green Base */
        #006b00 100%     
    ) !important;
    
    /* Maintains the metallic 'hard-paint' look */
    mix-blend-mode: hard-light; 
    
    /* Standard Movement Speed matched to your other cards */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
}

.card.potm .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        
        /* --- OUTER LEFT (Mostly Invisible) --- */
        transparent 0%, 
        transparent 30%,

        /* --- 1. LEFT FLANK (Immediate Visibility: 35% - 44%) --- */
        /* Swapped Cyan for Vibrant Mint (#00ff87) */
        #00ff87 35%, #ffffff 36%, transparent 37%,  /* Sparkle A */
        transparent 39%,
        #00ff87 41%, #ffffff 42%, #00ff87 49%, transparent 50%, /* Sparkle B */

        /* --- 2. THE CENTRAL GLARE BEAM (45% - 55%) --- */
        transparent 45%,
        transparent 55%,

        /* --- 3. RIGHT FLANK (Immediate Visibility: 56% - 65%) --- */
        transparent 52%,
        #ffffff 53%, #00ff87 58%, transparent 59%, /* Sparkle C */
        transparent 61%,
        #ffffff 63%, #00ff87 64%, transparent 65%, /* Sparkle D */
        
        /* --- OUTER RIGHT (Mostly Invisible) --- */
        transparent 70%,
        transparent 100%
    );
    
    mix-blend-mode: color-dodge; 
    opacity: 1;
}

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

.card.chase .card-liquid {
    background-image: repeating-linear-gradient(
        115deg, 
        #cc00ff 0%,      /* Vibrant Purple Highlight */
        #6200a8 35%,     /* Vibrant Amethyst Base (Lighter for readability) */
        #ffffff 45%,     /* CENTRAL GLARE */
        #6200a8 55%,     /* Amethyst Base */
        #cc00ff 100%     
    ) !important;
    
    /* Maintains the metallic 'hard-paint' look */
    mix-blend-mode: hard-light; 
    
    /* Movement logic remains identical */
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
}

.card.chase .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        
        /* --- OUTER LEFT (Mostly Invisible) --- */
        transparent 0%, 
        transparent 30%,

        /* --- 1. LEFT FLANK (Immediate Visibility: 35% - 44%) --- */
        #ff00ff 35%, #ffffff 36%, transparent 37%,  /* Sparkle A (Magenta replaces Cyan) */
        transparent 39%,
        #ff00ff 41%, #ffffff 42%, #ff00ff 49%, transparent 50%, /* Sparkle B */

        /* --- 2. THE CENTRAL GLARE BEAM (45% - 55%) --- */
        transparent 45%,
        transparent 55%,

        /* --- 3. RIGHT FLANK (Immediate Visibility: 56% - 65%) --- */
        transparent 52%,
        #ffffff 53%, #ff00ff 58%, transparent 59%, /* Sparkle C */
        transparent 61%,
        #ffffff 63%, #ff00ff 64%, transparent 65%, /* Sparkle D */
        
        /* --- OUTER RIGHT (Mostly Invisible) --- */
        transparent 70%,
        transparent 100%
    );
    
    mix-blend-mode: color-dodge; 
    opacity: 1;
}

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

/* --- PLAYOFF POTM (PERFECT BEAM WIDTH - DEEP RED) --- */

.card.ppotm .card-liquid {
    background-image: repeating-linear-gradient(
        115deg,
        #2a0000 0%,      /* Black Edge */
        #cc0000 30%,     /* Deep Maroon Transition */
        #dd0000 35%,     /* WIDE BEAM START (Prevents Purple) */
        #ffffff 45%,     /* CENTRAL GLARE */
        #dd0000 55%,     /* WIDE BEAM END */
        #cc0000 60%,     /* Deep Maroon Transition */
        #2a0000 100%
    ) !important;
    
    mix-blend-mode: hard-light; 
    
    /* Balanced filters: keeps the darks heavy but makes the red/white punch */
    filter: saturate(1.3) contrast(1.4) brightness(0.85);
    
    transform: 
        translateX(calc(var(--tilt-x, 0) * -25px * var(--s))) 
        translateY(calc(var(--tilt-y, 0) * -25px * var(--s)));
}

.card.ppotm .card-sparkle {
    background: repeating-linear-gradient(
        115deg, 
        
        /* --- OUTER LEFT (Mostly Invisible) --- */
        transparent 0%, 
        transparent 30%,

        /* --- 1. LEFT FLANK (35% - 44%) --- */
        /* Red highlight to match your "No-Purple" beam */
        #cc0000 35%, #ffffff 36%, transparent 37%,  /* Sparkle A */
        transparent 39%,
        #cc0000 41%, #ffffff 42%, #cc0000 49%, transparent 50%, /* Sparkle B */

        /* --- 2. THE CENTRAL GLARE BEAM (45% - 55%) --- */
        transparent 45%,
        transparent 55%,

        /* --- 3. RIGHT FLANK (56% - 65%) --- */
        transparent 52%,
        #ffffff 53%, #cc0000 58%, transparent 59%, /* Sparkle C */
        transparent 61%,
        #ffffff 63%, #cc0000 64%, transparent 65%, /* Sparkle D */
        
        /* --- OUTER RIGHT --- */
        transparent 70%,
        transparent 100%
    );
    
    /* Matches POTM exactly */
    mix-blend-mode: color-dodge; 
    opacity: 1;
}

/* Red Glow for stencils */
.card.ppotm .sparkle-wrapper,
.card.ppotm .text-sparkle-stencil {
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px #880000) brightness(1.2);
}


/* ====== 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; } */