/* --- RESET & VIEWPORT FIXES --- */
:root {
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    /* New Theme Vars */
    --bg-pattern: #f0f9ff;
    --dot-color: #cbd5e1;
}

html, body {
    height: 100dvh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    /* LIGHT MODE: Polka Dot / Graph Paper Vibe */
    background-color: var(--bg-pattern);
    background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
    background-size: 20px 20px;
    color: #1e293b; /* Slate-800 text */
    font-family: 'Inter', sans-serif;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* --- SCREEN MANAGEMENT --- */
.screen {
    display: none;
    width: 100%;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: max(20px, var(--sat)); 
    padding-bottom: max(20px, var(--sab));
    box-sizing: border-box;
}

.screen.active { display: flex; }

/* --- UTILITIES --- */
.modal-overlay { 
    position: fixed; inset: 0; 
    background: rgba(0,0,0,0.6); /* Lighter backdrop */
    backdrop-filter: blur(8px);
    z-index: 100; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 16px; 
    padding-bottom: max(16px, var(--sab));
}

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 2px solid #f0f9ff; }

/* --- NEW BOOSTER PACK (Silver Foil Wrapper) --- */
.booster-pack-container { 
    perspective: 1000px; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-top: auto; 
    margin-bottom: auto;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.booster-pack {
    width: 240px; 
    height: 360px;
    position: relative;
    z-index: 50;
    
    /* THE FIX: Smoothly animate ANY transform change */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy pop */
    
    /* Performance optimizations */
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
}

/* --- FLOOR SHADOW FIX --- */
.pack-floor-shadow {
    width: 200px;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
    border-radius: 50%;
    /* Position it below the pack */
    margin-top: 380px; 
    z-index: 0;
    pointer-events: none;
    
    /* Animate it to match the float */
    animation: shadow-breathe 3s ease-in-out infinite;
}

/* Syncs with the pack-idle float animation */
@keyframes shadow-breathe {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(0.85); opacity: 0.2; } /* Pack is higher = shadow is smaller/lighter */
}

/* Hide shadow when pack is opened/ripped */
.pack-ready-to-open ~ .pack-floor-shadow, /* When expanding */
.pack-peek-bottom ~ .pack-floor-shadow {  /* When dropped */
    opacity: 0 !important;
    transition: opacity 0.3s;
}

/* --- BOOSTER PACK UPDATES --- */

/* STATE 2: READY (Touched/Big) */
.pack-ready-to-open {
    /* Stop the float animation instantly so transition takes over */
    animation: none !important;
    
    /* Go Big & Move Down */
    transform: scale(1.35) translateY(10%) !important; 
    
    z-index: 100;
    cursor: grab;
}

/* 2. Make the Tear Strip more obvious when ready */
.pack-ready-to-open .tear-strip {
    height: 50px; /* Make the strip taller physically */
    animation: strip-pulse 1.5s infinite ease-in-out;
    border-bottom: 2px solid rgba(255,255,255,0.5);
}

.pack-ready-to-open #cut-line {
    opacity: 1 !important;
    animation: pulse-line 1.5s infinite;
}

/* 3. Helper Animation for the cutline */
@keyframes pulse-line {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(1.05); opacity: 0.7; }
}

/* 3. Helper Animation for the strip */
@keyframes strip-pulse {
    0%, 100% { background-color: #fbbf24; transform: scaleY(1); }
    50% { background-color: #fcd34d; transform: scaleY(1.1); box-shadow: 0 0 15px #fbbf24; }
}

/* --- THE "POOF" ANIMATION (Improved) --- */
#poof-cloud {
    /* Ensure it starts centered and hidden */
    top: 0; 
    left: 50%;
    transform: translate(-50%, 0) scale(0.5);
    background: radial-gradient(circle, #ffffff 50%, rgba(255,255,255,0) 80%); /* Brighter core */
    mix-blend-mode: normal; /* Ensure it blocks out the pack behind it */
    z-index: 100; /* TOP LAYER */
}

.animate-poof {
    animation: poof-explosion 0.5s ease-out forwards;
}

@keyframes poof-explosion {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0.8; }
    40% { transform: translate(-50%, -40px) scale(3.5); opacity: 1; } /* Expand huge */
    100% { transform: translate(-50%, -60px) scale(4); opacity: 0; } /* Fade out */
}

/* Rainbow Holo Sheen on Pack */
.pack-foil-layer {
    position: absolute; inset: 0;
    background: linear-gradient(125deg, 
        rgba(255,0,0,0), 
        rgba(255,0,0,0), 
        rgba(255,255,255,0.5), 
        rgba(255,0,0,0.2), 
        rgba(0,0,255,0.2), 
        rgba(255,255,255,0.5), 
        rgba(255,0,0,0));
    background-size: 200% 200%;
    mix-blend-mode: color-dodge;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

.pack-glare {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.8) 50%, transparent 60%);
    background-size: 250% 100%;
    animation: foil-shine 3s infinite ease-in-out;
    z-index: 2;
    mix-blend-mode: screen;
    pointer-events: none;
}

.pack-content { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Zig-Zag Tear Strip */
.tear-strip {
    position: absolute; top: 0; left: 0; right: 0; height: 40px;
    background: repeating-linear-gradient(
      -45deg,
      #fbbf24,
      #fbbf24 10px,
      #f59e0b 10px,
      #f59e0b 20px
    );
    z-index: 20;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 95% 100%, 90% 80%, 85% 100%, 80% 80%, 75% 100%, 70% 80%, 65% 100%, 60% 80%, 55% 100%, 50% 80%, 45% 100%, 40% 80%, 35% 100%, 30% 80%, 25% 100%, 20% 80%, 15% 100%, 10% 80%, 5% 100%, 0% 80%);
}
.tear-strip::after { content: "ABRIR AQUÍ"; color: #78350f; font-weight: 900; font-size: 10px; letter-spacing: 1px; }
/* --- REVEAL SCREEN ALIGNMENT --- */
#screen-reveal {
    /* Ensures cards are DEAD CENTER */
    display: none; /* Toggled by JS */
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    width: 100%;
    height: 100dvh;
    padding-bottom: 50px; /* Lift cards slightly up from the visual pack */
}

#reveal-container {
    z-index: 50; /* ABOVE the pack */
    position: relative;
}

/* FLOAT ANIMATION */
@keyframes float-pack { 
    0%, 100% { transform: translateY(0) rotate(0deg); } 
    50% { transform: translateY(-15px) rotate(1deg); } 
}

/* --- ANIMATIONS --- */
/* STATE 1: IDLE (Floating) */
.pack-idle { 
    animation: float-pack 3s ease-in-out infinite; 
    cursor: pointer;
}
.pack-selected { transform: scale(1.1) translateY(40px) rotateX(5deg); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.2); z-index: 50; }
.strip-ripped-right { animation: rip-right 0.3s forwards ease-in; }
.strip-ripped-left { animation: rip-left 0.3s forwards ease-in; }

/* STATE 3: RIPPED (Foreground Depth Effect) */
.pack-peek-bottom {
    position: fixed !important; 
    bottom: -400px; 
    left: 50%;
    
    /* Massive scale to simulate being "close to camera" */
    transform: translateX(-50%) scale(2) !important; 
    
    z-index: 20 !important; /* Behind cards (cards are usually z-50) */
    pointer-events: none;
    animation: none !important;
    
    /* Subtle blur for depth of field */
    filter: blur(1px) brightness(0.9);
    
    /* Smooth drop transition */
    transition: bottom 0.6s ease-out, transform 0.6s ease-out;
}

.pack-peek-bottom #cut-line {
    display: none;
}

.card-pop-up { animation: card-enter-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
/* --- ANIMATION FIXES --- */

/* 1. Ensure the Rip Animation overrides the Pulse Animation */
.strip-ripped-right { 
    animation: rip-right 0.4s forwards ease-in !important; 
    border-bottom: none !important; /* Hide the border so it doesn't look weird flying off */
}

.strip-ripped-left { 
    animation: rip-left 0.4s forwards ease-in !important; 
    border-bottom: none !important;
}

/* 2. Keyframes (Ensure these exist) */
@keyframes rip-right { 
    0% { transform: translateX(0) scaleY(1); } 
    100% { transform: translateX(120%) rotate(15deg) scaleY(0.8); opacity: 0; } 
}

@keyframes rip-left { 
    0% { transform: translateX(0) scaleY(1); } 
    100% { transform: translateX(-120%) rotate(-15deg) scaleY(0.8); opacity: 0; } 
}
/* --- DYNAMIC BACKGROUND --- */
#dynamic-party-bg {
    background-repeat: repeat;
    background-size: 150px 150px; /* Size of the pattern tile */
    opacity: 0.15; /* Subtle */
    mix-blend-mode: multiply;
}

@keyframes float-pack { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-10px); } }
@keyframes foil-shine { 0% { background-position: 250% 0; } 100% { background-position: -150% 0; } }
@keyframes rip-right { 0% { transform: translateX(0); } 100% { transform: translateX(120%) rotate(15deg); opacity: 0; } }
@keyframes rip-left { 0% { transform: translateX(0); } 100% { transform: translateX(-120%) rotate(-15deg); opacity: 0; } }
@keyframes pack-drop { 0% { transform: scale(1.1) translateY(40px); opacity: 1; } 100% { transform: scale(0.8) translateY(300px); opacity: 0; } }
@keyframes card-enter-pop {
    0% { transform: translateY(100%) scale(0.5); opacity: 0; }
    70% { transform: translateY(-10px) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Keep textures for cards if needed */
.texture-paper { opacity: 0.5; mix-blend-mode: multiply; }

/* --- THE 5 NEW FOIL TYPES (REVISED LOGIC) --- */

/* 1. LEGENDARY (Infame) - MOBILE OPTIMIZED */
.foil-legendary {
    background-color: #7f1d1d; /* Brighter base red */
    
    /* Optimization: 
       We use 3 layers. Top layer is the "Scanner".
       We rely on opacity and gradients instead of heavy 'filter' effects.
    */
    background-image: 
        /* 1. THE LASER SCANNER (Top Layer) 
           Sharp white center for maximum "brightness" without filters 
        */
        linear-gradient(
            to bottom, 
            transparent 35%, 
            rgba(255, 255, 255, 0.6) 45%, 
            #ffffff 50%,                 /* Pure White Core */
            rgba(255, 255, 255, 0.6) 55%, 
            transparent 65%
        ),

        /* 2. THE HAZARD STRIPES (Middle Layer) */
        repeating-linear-gradient(
            -45deg, 
            transparent, 
            transparent 10px, 
            rgba(0, 0, 0, 0.6) 10px, 
            rgba(0, 0, 0, 0.6) 20px
        ),

        /* 3. THE GLOW (Bottom Layer) */
        radial-gradient(circle at center, #ef4444 0%, #450a0a 100%);
    
    /* The Laser (Layer 1) is 300% tall so it scans nicely.
       Layers 2 & 3 are static size.
    */
    background-size: 100% 300%, 100% 100%, 100% 100%;
    
    /* 'overlay' is fast on mobile and makes the white pop against the red */
    background-blend-mode: overlay, multiply, normal;
    
    /* Only animating background-position is very cheap for the GPU */
    animation: legendary-mobile-scan 1.5s infinite linear;
    
    /* Tell the browser to prepare for this change */
    will-change: background-position;
    
    /* Static Glow Border (Cheap) */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

/* Animation: Just moves the gradients. 
   No 'filter' properties means smooth 60fps on mobile.
*/
@keyframes legendary-mobile-scan {
    0% { 
        background-position: 0 -100%, 0 0, 0 0; 
    }
    100% { 
        background-position: 0 200%, 0 0, 0 0; 
    }
}



/* ANIMATION: Blinding Flash */
@keyframes legendary-overload {
    0% { 
        background-position: 50% 50%, 0 0, 0 -150%; 
        filter: contrast(1.2) brightness(1) saturate(1.2);
    }
    40% {
        /* Pre-flash ramp up */
        filter: contrast(1.5) brightness(1.5) saturate(1.5);
    }
    50% {
        /* THE SPIKE: 300% Brightness */
        filter: contrast(2.5) brightness(3) saturate(3) drop-shadow(0 0 15px white);
    }
    60% {
        /* Post-flash cool down */
        filter: contrast(1.5) brightness(1.5) saturate(1.5);
    }
    100% { 
        background-position: 50% 50%, 50px 50px, 0 250%; 
        filter: contrast(1.2) brightness(1) saturate(1.2);
    }
}



@keyframes border-panic {
    0% { border-color: #7f1d1d; box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); }
    100% { border-color: #ff0000; box-shadow: 0 0 30px rgba(255, 0, 0, 1), 0 0 60px rgba(255, 0, 0, 0.6); }
}

/* 2. EPIC (Notorio) - Yellow/Black Caution Tape */
.foil-epic {
    background-color: #facc15; /* Yellow Base */
    background-image: 
        /* Black Caution Stripes */
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.8) 10px, rgba(0,0,0,0.8) 20px),
        /* Texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
    background-blend-mode: overlay, multiply;
    animation: none; /* Static Caution Tape */
}

/* 3. COMMON (Cómplice) - Matte White */
.foil-common {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
    animation: none;
    border-color: #e2e8f0; /* Very light grey border to frame the white */
}

/* 4. BOY SCOUT (Standard) - Silver/Platinum (The old Epic style) */
.foil-boyscout-silver {
    background: 
        /* Sharp White Highlight */
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,1) 55%, transparent 70%),
        /* Deep Silver Base */
        linear-gradient(to bottom right, #94a3b8, #e2e8f0, #64748b),
        /* Texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.25'/%3E%3C/svg%3E");
    background-size: 200% 200%, 100% 100%, auto;
    background-blend-mode: overlay, normal, multiply;
    animation: platinum-sweep 5s ease-in-out infinite;
}

/* 5. BOY SCOUT (National) - Gold + Rainbow (The old Boy Scout style) */
.foil-boyscout-gold {
    background: 
        /* 1. Hard Linear Rainbow Spectrum (High Opacity) */
        linear-gradient(115deg, 
            transparent 20%, 
            rgba(255,0,0,0.8) 25%, 
            rgba(255,154,0,0.8) 30%, 
            rgba(255,255,0,0.8) 35%, 
            rgba(0,128,0,0.8) 40%, 
            rgba(0,255,255,0.8) 45%, 
            rgba(0,0,255,0.8) 50%, 
            rgba(128,0,128,0.8) 55%, 
            rgba(255,0,255,0.8) 60%, 
            transparent 70%),
        /* 2. White Shine */
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.5) 55%, transparent 70%),
        /* 3. Rich Golden Base */
        linear-gradient(135deg, #eab308 0%, #fef08a 50%, #ca8a04 100%),
        /* 4. Texture */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.2'/%3E%3C/svg%3E");
    
    background-size: 200% 200%, 200% 200%, 100% 100%, auto;
    background-blend-mode: hard-light, overlay, normal, overlay;
    animation: holo-shine 4s ease infinite;
}

/* --- BORDERS --- */

.border-legendary {
    border: 8px solid #b91c1c;
    border-radius: 18px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    animation: border-pulse-mobile 1.5s infinite ease-in-out;
}

@keyframes border-pulse-mobile {
    0%, 100% { border-color: #b91c1c; }
    50% { border-color: #ef4444; } /* Flashes brighter red */
}

/* Epic = Caution Yellow/Black */
.border-epic {
    border: 8px solid #000;
    border-radius: 18px;
    box-shadow: inset 0 0 0 2px #facc15;
}

/* Boy Scout (Silver) */
.border-boyscout-silver {
    border: 8px solid #cbd5e1;
    border-radius: 18px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 5px 15px rgba(0,0,0,0.2);
}

/* Boy Scout (Gold) */
.border-boyscout-gold {
    border: 8px solid #eab308;
    border-radius: 18px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6), 0 5px 15px rgba(234, 179, 8, 0.4);
    animation: border-pulse-gold 4s infinite ease-in-out;
}

/* Common = White/Grey */
.border-common {
    border: 8px solid #f1f5f9;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.1);
}

/* Animations */

@keyframes border-pulse-red {
    0%, 100% { border-color: #991b1b; box-shadow: 0 0 5px rgba(185, 28, 28, 0.5); }
    50% { border-color: #ef4444; box-shadow: 0 0 20px rgba(220, 38, 38, 0.9); }
}

@keyframes border-pulse-gold {
    0%, 100% { border-color: #eab308; }
    50% { border-color: #facc15; box-shadow: 0 0 15px rgba(250, 204, 21, 0.6); }
}

@keyframes danger-pulse {
    0%, 100% { filter: brightness(0.9); }
    50% { filter: brightness(1.2); }
}

@keyframes platinum-sweep {
    0% { background-position: 0% 50%, 0 0, 0 0; }
    100% { background-position: 100% 50%, 0 0, 0 0; }
}

@keyframes holo-shine {
    0% { background-position: 100% 100%, 0 0, 0 0; }
    100% { background-position: 0% 0%, 0 0, 0 0; }
}

/* Utilities */
.perspective-1000 { perspective: 1000px; -webkit-perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }

.backface-hidden { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; /* Safari */
}

.rotate-y-180 { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
}

/* Fix Card Faces */
.card-front, .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.card-back {
    z-index: 1;
    transform: rotateY(180deg);
    background-color: white; /* Ensure opaque background */
    /* Add border to back to prevent bleeding if slightly misaligned */
    box-sizing: border-box; 
}

/* Party Specifics */
.flag-ppso { background: linear-gradient(to right, #0d9488, #115e59); }

/* Textures (Light Theme) */
.bg-blueprint {
    background-image: radial-gradient(#0ea5e9 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.15;
}

/* Updated selector to target the inner div */
.card-inner > div > div.absolute.inset-2 {
    z-index: 20; 
}



/* Album Grid Optimization - The Magic Performance Line */
.album-section {
    width: 100%;
    margin-bottom: 40px;
    /* Browser skips rendering off-screen sections */
    content-visibility: auto; 
    contain-intrinsic-size: 1000px; 
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); /* Optimized for mobile width */
    gap: 8px;
    padding: 0 8px;
}

@media (min-width: 640px) {
    .album-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }
}


.pack-shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); }
  20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(-4deg); }
  40%, 60% { transform: translate3d(4px, 0, 0) rotate(4deg); }
}

/* Locked Card */
.card-locked {
    filter: grayscale(100%) brightness(0.3) blur(1px);
    opacity: 0.6;
    pointer-events: none;
    position: relative;
    border: 1px dashed #475569;
}

/* FIX: Static Card Wrapper */
.static-card-wrapper {
    /* Base Ratio 300/480 = 0.625 */
    /* Add extra buffer for borders/shadows */
    aspect-ratio: 300 / 480; 
    width: 100%;
    position: relative;
    /* KEY FIX: Visible overflow allows shadows/borders to extend */
    overflow: hidden; 
}

.static-card-scaler {
    width: 300px;
    height: 480px;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; 
    /* Ensure the scaler itself doesn't clip children */
    overflow: visible;
}

/* --- HUB PACK STAGE --- */

/* The Mini Pack (Scaled down version of the big pack) */
.hub-mini-pack {
    width: 240px; /* Same base size as original to keep art ratio */
    height: 360px;
    position: absolute;
    transform-origin: center center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Shadow specifically for the hub view */
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}

.hub-mini-pack:hover {
    z-index: 50;
    filter: drop-shadow(0 20px 25px rgba(0,0,0,0.2));
}

/* Stacking Logic for multiple packs */
.hub-mini-pack:nth-child(1) { transform: scale(0.6) translateX(-30px) rotate(-5deg); z-index: 10; }
.hub-mini-pack:nth-child(2) { transform: scale(0.6) translateX(30px) rotate(5deg); z-index: 10; }
.hub-mini-pack:nth-child(3) { transform: scale(0.65) translateY(-10px); z-index: 20; } 
/* Hover Effects per position */
.hub-mini-pack:nth-child(1):hover { transform: scale(0.7) translateX(-40px) rotate(-8deg); }
.hub-mini-pack:nth-child(2):hover { transform: scale(0.7) translateX(40px) rotate(8deg); }
.hub-mini-pack:nth-child(3):hover { transform: scale(0.75) translateY(-20px); }
/* Stagger animations for multiple packs so they don't move in perfect unison */
.hub-mini-pack:nth-child(1) img { animation-delay: 0s; }
.hub-mini-pack:nth-child(2) img { animation-delay: 0.5s; }
.hub-mini-pack:nth-child(3) img { animation-delay: 1s; }

/* SINGLE PACK CENTERED */
.hub-mini-pack:only-child {
    transform: scale(0.7);
    z-index: 20;
}
.hub-mini-pack:only-child:hover {
    transform: scale(0.75) translateY(-5px);
}

/* Apply to the IMAGE inside the container so we don't break the rotation of the container */
.hub-mini-pack img {
    animation: hub-bob 3s ease-in-out infinite;
    /* Optional: Add a subtle lighting shift if desired */
    filter: brightness(1);
    transition: filter 0.3s;
}

.hub-mini-pack:hover img {
    /* Speed up on hover */
    animation-duration: 0.5s;
    filter: brightness(1.1);
}


/* Updated Silhouette */
.pack-silhouette {
    width: 180px;
    height: 270px;
    border: 2px dashed #cbd5e1;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: rgba(255,255,255,0.5);
    transform: rotate(-2deg); /* Slight tilt for style */
}

/* Ensure the Timer Badge looks good */
#hub-status-subtitle {
    transition: all 0.3s ease;
}

/* Manilla Folder Shadow Press Effect */
#btn-goto-library:active .shadow-\[0_4px_0_\#d97706\] {
    box-shadow: 0 2px 0 #d97706 !important;
    transform: translateY(2px);
}

.pulsing-lock {
    animation: lock-pulse 2s infinite;
}

@keyframes lock-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Text Highlight Utility */
.highlight-mark {
    background: linear-gradient(120deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.4) 100%);
    padding: 0 4px;
}

/* --- ANIMATIONS FOR HUB --- */

/* Beckon / Bobbing Animation for Packs */
@keyframes hub-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* --- STATUS TEXT ANIMATION --- */

@keyframes stamp-in {
    0% {
        opacity: 0;
        transform: scale(3) rotate(-15deg); /* Start HUGE */
    }
    50% {
        opacity: 1;
        transform: scale(0.8) rotate(-5deg); /* Slam down small */
    }
    70% {
        transform: scale(1.1) rotate(-8deg); /* Bounce back up */
    }
    100% {
        transform: scale(1) rotate(-8deg); /* Settle */
    }
}

.animate-stamp-in {
    opacity: 1 !important;
    animation: stamp-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Helper for Text Stroke (Optional polish) */
.stroke-text-teal {
    -webkit-text-stroke: 2px #0f766e;
    paint-order: stroke fill;
}

#cut-line {
    cursor: pointer; /* Shows a hand icon on PC */
    pointer-events: auto !important; /* Ensures it catches the click */
}

#cut-line:hover .bg-yellow-400 {
    background-color: #fde047; /* Brighten the "Cortar" badge on hover */
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Ensure the pack container doesn't block the cut-line clicks */
.pack-ready-to-open {
    cursor: default; 
}

/* Add to styles.css */
.stamp-restricted {
    border: 3px solid rgba(220, 38, 38, 0.3); /* Red-900 transparent */
    color: rgba(220, 38, 38, 0.3);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transform: rotate(-12deg);
    backdrop-filter: blur(1px);
    pointer-events: none;
}