/* ==========================================================================
   STANDARDIZED RETRO OVERLAY CARD DESIGN SYSTEM (.tdj-card)
   ========================================================================== */

.tdj-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    /* Matches the album sticker frame radius exactly */
    background: transparent !important;
    box-sizing: border-box;
    overflow: hidden;
    container-type: inline-size;
    border: none !important;
    box-shadow: none !important;
}

.tdj-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    background: transparent !important;
    box-sizing: border-box;
}

/* 1. Player Photo (tucked safely behind the solid borders) */
.tdj-card-player-container {
    position: absolute;
    top: 2%;
    left: 2%;
    right: 2%;
    bottom: 4%;
    border-radius: 12px;
    padding: 0;
    background: #f5f2eb !important;
    /* Premium vintage fallback background */
    overflow: hidden;
    z-index: 1;
    box-sizing: border-box;
}

.tdj-card-player-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* 2. Retro Frame Overlay PNG (scaled up to push transparent margins out of the slot) */
.tdj-card-frame-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill !important;
    z-index: 2;
    pointer-events: none;
    /* Allows click events to pass through transparently */
    display: block;
    transform: scale(1.09);
    /* Fills the slot completely by cropping transparent edges */
    transform-origin: center center;
}

/* Prime frames already fill the edges, so we don't scale them up */
.tdj-card.rarity-prime .tdj-card-frame-overlay {
    transform: scale(1);
}

.tdj-card.rarity-prime .tdj-card-player-container {
    top: 0%;
    left: 0%;
    right: 0%;
    bottom: 1.5%;
    border-radius: inherit;
}

/* ==========================================================================
   LEGEND RARITY (FULL ART & EFFECTS)
   ========================================================================== */
.tdj-card.rarity-raro .tdj-card-frame-overlay {
    display: none !important;
}

.tdj-card.rarity-legend .tdj-card-frame-overlay {
    display: block !important;
    transform: scale(1) !important;
}

.tdj-card.rarity-legend .tdj-card-player-container,
.tdj-card.rarity-raro .tdj-card-player-container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
}

/* Inner golden glow */
.album-sticker-frame .tdj-card.rarity-legend,
.album-sticker-frame .tdj-card.rarity-retro-champion,
.album-pack-summary-media .tdj-card.rarity-legend,
.album-pack-summary-media .tdj-card.rarity-retro-champion,
.album-card-viewer-media .tdj-card.rarity-legend,
.album-card-viewer-media .tdj-card.rarity-retro-champion,
.inv-card .tdj-card.rarity-legend,
.inv-card .tdj-card.rarity-retro-champion {
    box-shadow: inset 0 0 50px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

/* Golden border directly on the Retro Gold card */
.tdj-card.rarity-retro-champion {
    border: 3px solid #ffd700 !important;
}

/* Mystical Royal Stardust Particles */
.tdj-card.rarity-legend::before {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: 5;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><path d='M30 10 Q30 20 20 20 Q30 20 30 30 Q30 20 40 20 Q30 20 30 10 Z' fill='%23ffd700' opacity='0.9'/><path d='M80 30 Q80 45 65 45 Q80 45 80 60 Q80 45 95 45 Q80 45 80 30 Z' fill='%23ffffff' opacity='0.85'/><path d='M25 75 Q25 85 15 85 Q25 85 25 95 Q25 85 35 85 Q25 85 25 75 Z' fill='%23ffffff' opacity='0.85'/><path d='M100 80 Q100 90 90 90 Q100 90 100 100 Q100 90 110 90 Q100 90 100 80 Z' fill='%23ffffff' opacity='0.9'/><circle cx='55' cy='15' r='2' fill='%23ffd700' opacity='0.8'/><circle cx='10' cy='50' r='1.5' fill='%23ffffff' opacity='0.7'/><circle cx='70' cy='95' r='2.5' fill='%23ffffff' opacity='0.8'/><circle cx='115' cy='45' r='1.8' fill='%23ffd700' opacity='0.75'/></svg>");
    background-repeat: repeat;
    background-size: 150px 150px;
    mix-blend-mode: color-dodge;
    animation: legendStarParticles 12s linear infinite;
    opacity: 0.85;
}

@keyframes legendStarParticles {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.95);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-75px) translateX(6px) rotate(6deg) scale(1.1);
        opacity: 0.95;
        filter: drop-shadow(0 0 4px #ffffff);
    }

    100% {
        transform: translateY(-150px) translateX(-6px) rotate(12deg) scale(0.95);
        opacity: 0.6;
    }
}

/* Elegant Royal & Mystical Aura Glow Keyframes */
@keyframes legendMysticAura {
    0% {
        box-shadow:
            0 0 10px rgba(255, 255, 255, 0.35),
            0 0 20px rgba(255, 215, 0, 0.2),
            inset 0 0 10px rgba(255, 255, 255, 0.25) !important;
    }

    100% {
        box-shadow:
            0 0 16px rgba(255, 255, 255, 0.55),
            0 0 28px rgba(255, 215, 0, 0.4),
            inset 0 0 15px rgba(255, 255, 255, 0.35) !important;
    }
}

@keyframes legendMysticAuraHover {
    0% {
        box-shadow:
            0 0 15px rgba(255, 255, 255, 0.5),
            0 0 30px rgba(255, 215, 0, 0.35),
            inset 0 0 12px rgba(255, 255, 255, 0.4) !important;
    }

    100% {
        box-shadow:
            0 0 30px rgba(255, 255, 255, 0.85),
            0 0 50px rgba(255, 215, 0, 0.75),
            inset 0 0 25px rgba(255, 255, 255, 0.6) !important;
    }
}

.tdj-card.rarity-legend::after {
    content: "LEGEND";
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Impact', 'Oswald', 'Rajdhani', 'Teko', sans-serif;
    font-size: 11cqw;
    font-weight: 900;

    /* Cinematic gold metallic gradient text clip */
    background: linear-gradient(135deg, #ffe066 0%, #f5b041 30%, #ffd700 50%, #f5b041 70%, #ffe066 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    text-transform: uppercase;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.45));
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.12em;
    animation: legendTextGlowPulse 3s ease-in-out infinite alternate;
}

@keyframes legendTextGlowPulse {
    0% {
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.35));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(255, 215, 0, 0.75));
        transform: scale(1.03);
    }
}

.tdj-card.rarity-legend .tdj-card-name {
    display: none !important;
}

/* Cinematic Diagonal Golden Sheen Sweep */
.tdj-card.rarity-legend .tdj-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 223, 0, 0.3) 45%,
            rgba(255, 255, 255, 0.75) 50%,
            rgba(255, 223, 0, 0.3) 55%,
            rgba(255, 255, 255, 0) 70%,
            transparent 100%);
    transform: skewX(-25deg);
    z-index: 4;
    pointer-events: none;
    animation: legendCinematicShine 5.5s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

@keyframes legendCinematicShine {
    0% {
        left: -150%;
    }

    24% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}



/* Cinematic Color Grading Filter */
.tdj-card.rarity-legend .tdj-card-player-photo {
    filter: contrast(1.15) brightness(1.04) saturate(1.1);
    transition: filter 0.4s ease;
}

/* Cinematic 3D Hover Tilt & Giant Theatre Gold Glow */
.album-sticker-slot.is-owned:has(.tdj-card.rarity-legend) {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.album-sticker-slot.is-owned:has(.tdj-card.rarity-legend):hover {
    transform: translateY(-8px) scale(1.05) rotate(0.6deg) !important;
    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.65),
        0 0 50px rgba(255, 215, 0, 0.45) !important;
    z-index: 25 !important;
}

.album-sticker-slot.is-owned:has(.tdj-card.rarity-legend):hover .album-sticker-frame {
    animation: legendMysticAuraHover 2.5s ease-in-out infinite alternate !important;
}

.album-sticker-slot.is-owned:has(.tdj-card.rarity-legend):hover .tdj-card-player-photo {
    filter: contrast(1.24) brightness(1.1) saturate(1.18);
}

.tdj-card.rarity-raro .tdj-card-name {
    display: none !important;
}

/* ==========================================================================
   ALIEN RARITY (FULL ART & EFFECTS)
   ========================================================================== */
.tdj-card.rarity-alien .tdj-card-frame-overlay {
    display: none !important;
}

.tdj-card.rarity-alien .tdj-card-player-container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
}

/* Inner neon green glow */
.album-sticker-frame .tdj-card.rarity-alien,
.album-pack-summary-media .tdj-card.rarity-alien,
.album-card-viewer-media .tdj-card.rarity-alien,
.inv-card .tdj-card.rarity-alien {
    box-shadow: inset 0 0 50px rgba(57, 255, 20, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.6) !important;
}

/* Neon Star Particles */
.tdj-card.rarity-alien::before {
    content: "";
    position: absolute;
    inset: -50%;
    z-index: 5;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 10% 10%, #39ff14 1.5px, transparent 1.5px),
        radial-gradient(circle at 25% 35%, #fff 2.5px, transparent 2.5px),
        radial-gradient(circle at 40% 15%, #39ff14 1px, transparent 1px),
        radial-gradient(circle at 60% 25%, #fff 2px, transparent 2px),
        radial-gradient(circle at 80% 10%, #39ff14 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 65%, #fff 3px, transparent 3px),
        radial-gradient(circle at 35% 85%, #39ff14 1px, transparent 1px),
        radial-gradient(circle at 55% 75%, #fff 2px, transparent 2px),
        radial-gradient(circle at 75% 60%, #39ff14 1.5px, transparent 1.5px),
        radial-gradient(circle at 90% 85%, #fff 2.5px, transparent 2.5px),
        radial-gradient(circle at 50% 50%, rgba(57, 255, 20, 0.9) 2px, transparent 2px);
    background-repeat: repeat;
    background-size: 150px 150px;
    mix-blend-mode: color-dodge;
    animation: alienStarParticles 15s linear infinite;
    opacity: 0.7;
}

@keyframes alienStarParticles {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        transform: translateY(-150px) rotate(15deg);
        opacity: 0.5;
    }
}

.tdj-card.rarity-alien::after {
    content: "ALIEN";
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Impact', 'Oswald', 'Rajdhani', 'Teko', sans-serif;
    font-size: 11cqw;
    font-weight: 900;
    color: #39ff14;
    /* Neon green color */
    text-transform: uppercase;
    text-shadow:
        0 4px 15px rgba(0, 0, 0, 0.9),
        0 1px 3px rgba(0, 0, 0, 1),
        0 0 20px rgba(57, 255, 20, 0.5);
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.1em;
}

.tdj-card.rarity-alien .tdj-card-name {
    color: #fff;
    /* White text for better contrast on full art */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        2px 3px 6px rgba(0, 0, 0, 0.8);
}

/* 3. Player Name Label (at the bottom left of the white frame) */
.tdj-card-name {
    position: absolute;
    bottom: 1%;
    left: 6%;
    right: 24%;
    /* Avoids the country flag area */
    height: 12%;
    /* Covers the bottom white area */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 7cqw;
    line-height: 0.85;
    font-weight: 900;
    color: #292929fa;
    text-transform: uppercase;
    text-align: left;
    z-index: 3;
    pointer-events: none;
    letter-spacing: 0.02em;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        2px 3px 4px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   COMPATIBILITY & NORMALIZATION LAYERS (NO EXTRA BORDERS / OVERLAPS)
   ========================================================================== */

/* Normalize and strip all default album.css styles when the card is owned */
.album-sticker-slot.is-owned {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.album-sticker-slot.is-owned .album-sticker-frame {
    position: relative !important;
    border: none !important;
    background: transparent !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 4 !important;
    box-sizing: border-box !important;
}

.album-sticker-slot.is-owned .album-sticker-frame:has(.tdj-card.rarity-prime) {
    box-shadow: 0 0 0 3px #a855f7, 0 6px 24px rgba(168, 85, 247, 0.9) !important;
}

.album-sticker-slot.is-owned .album-sticker-frame:has(.tdj-card.rarity-legend) {
    animation: legendMysticAura 3s ease-in-out infinite alternate !important;
}

.album-sticker-slot.is-owned .album-sticker-frame:has(.tdj-card.rarity-alien) {
    box-shadow: 0 0 0 3px #39ff14, 0 6px 24px rgba(57, 255, 20, 0.8) !important;
}

/* Strip holographic overlay borders or shadows */
.album-sticker-slot.is-owned .album-sticker-frame::before,
.album-sticker-slot.is-owned .album-sticker-frame::after {
    border: none !important;
    box-shadow: none !important;
}

/* Ensure the card fills the sticker slot frame perfectly */
.album-sticker-frame .tdj-card {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Mini inventory card compatibility */
.inv-card {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.inv-card .tdj-card.is-mini {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
}

.inv-card:has(.tdj-card.is-mini.rarity-prime) {
    box-shadow: 0 0 0 2px #a855f7, 0 4px 12px rgba(168, 85, 247, 0.9) !important;
}

.inv-card:has(.tdj-card.is-mini.rarity-legend) {
    animation: legendMysticAura 3s ease-in-out infinite alternate !important;
}

.inv-card:has(.tdj-card.is-mini.rarity-alien) {
    box-shadow: 0 0 0 2px #39ff14, 0 4px 12px rgba(57, 255, 20, 0.8) !important;
}

/* Summary view compatibility */
.album-pack-summary-media:has(.tdj-card.is-summary) {
    overflow: visible !important;
    background: transparent !important;
}

.album-pack-summary-media .tdj-card.is-summary {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
    background: transparent !important;
    border-radius: inherit !important;
}

.album-pack-summary-media .tdj-card.is-summary.rarity-prime {
    box-shadow: 0 0 0 3px #a855f7, 0 6px 24px rgba(168, 85, 247, 0.9) !important;
}

.album-pack-summary-media .tdj-card.is-summary.rarity-legend {
    animation: legendMysticAura 3s ease-in-out infinite alternate !important;
}

.album-pack-summary-media .tdj-card.is-summary.rarity-alien {
    box-shadow: 0 0 0 3px #39ff14, 0 6px 24px rgba(57, 255, 20, 0.8) !important;
}

/* Active Reveal Face compatibility */
.album-reveal-card-front .tdj-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: none !important;
}

.album-reveal-card-front .tdj-card-inner {
    border-radius: 0 !important;
}

/* Card Viewer modal compatibility */
.album-card-viewer-media {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.album-card-viewer-media .tdj-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: none !important;
    width: 100% !important;
    height: 100% !important;
}

.album-card-viewer-media .tdj-card-inner {
    border-radius: 0 !important;
}

/* ==========================================================================
   CUSTOM RETRO OVERLAYS STYLING (.is-retro)
   ========================================================================== */
.tdj-card.is-retro .tdj-card-frame-overlay {
    transform: scale(1.09) !important;
}

.tdj-card.is-retro .tdj-card-player-container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
}

.tdj-card.is-retro .tdj-card-name {
    display: flex !important;
    position: absolute;
    bottom: 1%;
    left: 6%;
    right: 24%;
    height: 12%;
    align-items: center;
    justify-content: flex-start;
    font-family: 'Consolas', 'Lucida Console', 'Courier New', monospace;
    font-size: 6.5cqw;
    line-height: 0.85;
    font-weight: 900;
    color: #292929fa;
    text-transform: uppercase;
    text-align: left;
    z-index: 3;
    pointer-events: none;
    letter-spacing: -0.02em;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        2px 3px 4px rgba(0, 0, 0, 0.3);
}

/* Styling for shield/brasão cards: absolutely no frames, overlays, or names */
.tdj-card.is-brasao .tdj-card-player-container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
    background: transparent !important;
}

.tdj-card.is-brasao .tdj-card-frame-overlay,
.tdj-card.is-brasao .tdj-card-name {
    display: none !important;
}

/* Ensure the frame overlay is visible for horizontal cards, even if they are rare */
.tdj-card.is-horizontal .tdj-card-frame-overlay {
    display: block !important;
    transform: scale(1.09) !important;
}

.tdj-card.is-horizontal .tdj-card-player-container {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: inherit !important;
}

.tdj-card.is-horizontal .tdj-card-name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 28% !important;
    max-height: 60% !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(5px) !important;
    color: #fff !important;
    font-family: 'Outfit', 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    font-size: 4.2cqw !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    transform: translateY(101%) !important;
    opacity: 0 !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important;
    z-index: 10 !important;
    padding: 6px 8% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.tdj-card.is-horizontal:hover .tdj-card-name,
.album-sticker-slot:hover .tdj-card.is-horizontal .tdj-card-name,
.album-pack-summary-card:hover .tdj-card.is-horizontal .tdj-card-name,
.inv-card:hover .tdj-card.is-horizontal .tdj-card-name,
#album-roulette-reveal-media:hover .tdj-card.is-horizontal .tdj-card-name {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Adjust image fitting for horizontal cards so they are fully visible */
.tdj-card.is-horizontal .tdj-card-player-photo {
    object-fit: contain !important;
    background: #cccccc !important;
}

.tdj-card.is-horizontal .tdj-card-player-container {
    background: #cccccc !important;
}