/* Gamification styles */

/* Pixel shadows based on status */
.glow-gray {
    box-shadow: 4px 4px 0px rgba(107, 114, 128, 1);
    background: #374151;
}

.glow-orange {
    box-shadow: 4px 4px 0px rgba(234, 88, 12, 1);
    background: #ea580c;
}

.glow-yellow {
    box-shadow: 4px 4px 0px rgba(202, 138, 4, 1);
    background: #ca8a04;
}

.glow-green {
    box-shadow: 4px 4px 0px rgba(22, 163, 74, 1);
    background: #16a34a;
}

/* Podium specific blocky borders */
.podium-gold {
    box-shadow: 8px 8px 0px rgba(0,0,0,1);
    border: 4px solid #facc15;
    background: #111827;
}
.podium-silver {
    box-shadow: 8px 8px 0px rgba(0,0,0,1);
    border: 4px solid #cbd5e1;
    background: #111827;
}
.podium-bronze {
    box-shadow: 8px 8px 0px rgba(0,0,0,1);
    border: 4px solid #f59e0b;
    background: #111827;
}

/* Column gradients */
.col-gold {
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.15) 0%, rgba(20, 25, 40, 0) 100%);
    border-top: 1px solid rgba(250, 204, 21, 0.5);
}
.col-silver {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.15) 0%, rgba(20, 25, 40, 0) 100%);
    border-top: 1px solid rgba(203, 213, 225, 0.5);
}
.col-bronze {
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.15) 0%, rgba(20, 25, 40, 0) 100%);
    border-top: 1px solid rgba(245, 158, 11, 0.5);
}


/* Animations */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes pulse-glow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; }
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar for the managers list */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Dynamic Progress Bar Animations */
@keyframes pulse-border {
    0% { border-color: rgba(168, 85, 247, 1); box-shadow: 4px 4px 0 rgba(168, 85, 247, 0.5); }
    50% { border-color: rgba(216, 180, 254, 1); box-shadow: 8px 8px 0 rgba(168, 85, 247, 1); }
    100% { border-color: rgba(168, 85, 247, 1); box-shadow: 4px 4px 0 rgba(168, 85, 247, 0.5); }
}

@keyframes pulse-border-warning {
    0% { border-color: rgba(250, 204, 21, 1); box-shadow: 4px 4px 0 rgba(250, 204, 21, 0.5); }
    50% { border-color: rgba(253, 224, 71, 1); box-shadow: 8px 8px 0 rgba(250, 204, 21, 1); }
    100% { border-color: rgba(250, 204, 21, 1); box-shadow: 4px 4px 0 rgba(250, 204, 21, 0.5); }
}

@keyframes pulse-border-success {
    0% { border-color: rgba(34, 197, 94, 1); box-shadow: 4px 4px 0 rgba(34, 197, 94, 0.5); }
    50% { border-color: rgba(134, 239, 172, 1); box-shadow: 8px 8px 0 rgba(34, 197, 94, 1); }
    100% { border-color: rgba(34, 197, 94, 1); box-shadow: 4px 4px 0 rgba(34, 197, 94, 0.5); }
}

@keyframes move-stripes {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.animate-pulse-purple {
    animation: pulse-border 3s infinite ease-in-out;
}
.animate-pulse-yellow {
    animation: pulse-border-warning 2s infinite ease-in-out;
}
.animate-pulse-green {
    animation: pulse-border-success 1s infinite ease-in-out;
}

.bg-stripes {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}
.animate-stripes {
    animation: move-stripes 1s linear infinite;
}

/* Boss Fight Animations */
@keyframes boss-shake {
    0% { transform: translate(5px, 5px) rotate(0deg); }
    10% { transform: translate(-15px, -20px) rotate(-5deg); }
    20% { transform: translate(-30px, 0px) rotate(5deg); }
    30% { transform: translate(30px, 20px) rotate(0deg); }
    40% { transform: translate(15px, -15px) rotate(5deg); }
    50% { transform: translate(-15px, 20px) rotate(-5deg); }
    60% { transform: translate(-30px, 15px) rotate(0deg); }
    70% { transform: translate(30px, 15px) rotate(-5deg); }
    80% { transform: translate(-15px, -15px) rotate(5deg); }
    90% { transform: translate(15px, 20px) rotate(0deg); }
    100% { transform: translate(5px, -20px) rotate(-5deg); }
}

@keyframes damage-flash {
    0% { filter: brightness(1) sepia(0) hue-rotate(0) saturate(1); }
    50% { filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(10); }
    100% { filter: brightness(1) sepia(0) hue-rotate(0) saturate(1); }
}

@keyframes cat-attack {
    0% { transform: translateX(0) scale(1); }
    30% { transform: translateX(-50px) scale(0.9); }
    45% { transform: translateX(300px) scale(1.2) rotate(15deg); }
    70% { transform: translateX(150px) scale(1.05) rotate(5deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes breathe {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.05) scaleX(1.02); }
}

@keyframes boss-die {
    0% { filter: brightness(1) sepia(0) hue-rotate(0) saturate(1); transform: rotate(0deg) scale(1); opacity: 1; }
    50% { filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5); transform: rotate(-10deg) scale(0.9); opacity: 0.8; }
    100% { filter: grayscale(1) brightness(0.3); transform: rotate(-90deg) scale(0.8) translateY(20px); opacity: 0.5; }
}

.boss-damage {
    animation: boss-shake 0.5s cubic-bezier(.36,.07,.19,.97) both, damage-flash 0.5s ease-in-out !important;
}

.animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
}

.animate-breathe {
    animation: breathe 3s infinite ease-in-out;
}

.cat-attacking {
    animation: cat-attack 0.5s ease-out;
}

.boss-dead {
    animation: boss-die 2s forwards ease-in;
}

@keyframes spawn-chest {
    0% { transform: scale(0) translateY(50px); opacity: 0; filter: brightness(2); }
    60% { transform: scale(1.1) translateY(-10px); opacity: 1; filter: brightness(1.5); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: brightness(1); }
}

.animate-spawn-chest {
    animation: spawn-chest 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Toast Notifications */
@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out-right {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.toast-enter {
    animation: slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-exit {
    animation: slide-out-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Critical Hit Screen Shake */
@keyframes screen-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-10px, -10px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translate(10px, 10px) rotate(1deg); }
}

.animate-screen-shake {
    animation: screen-shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* Combo / Crit text pop */
.pop-in {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}