/* Minimal custom styles to complement Bootstrap */
.table {
    margin-bottom: 2rem;
}

.table td {
    vertical-align: middle;
}

/* Ensure table cells don't get too wide */
.table td {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Add hover effect for clickable elements */
a:hover {
    opacity: 0.8;
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

/* Congratulations message animation */
.congratulations-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, var(--bs-primary), var(--bs-info));
    color: white;
    padding: 2rem 4rem;
    border-radius: 16px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    animation: congratsAnimation 2s ease-in-out forwards;
}

.congratulations-message .emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

@keyframes congratsAnimation {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    75% {
        transform: translate(-50%, -50%) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}