/* Custom scrollbar and overflow adjustments for mobile view */
@media (max-width: 767px) {
    /* Hide scrollbar for smooth horizontal hand scroll */
    .custom-scrollbar::-webkit-scrollbar {
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.5);
        border-radius: 3px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(245, 158, 11, 0.5);
        border-radius: 3px;
    }

    /* Force html and body to be fixed on mobile during game/lobby */
    html, body {
        height: 100%;
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    #lobby-container {
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 1rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Custom board card responsive size class */
.board-card-size {
    width: 9rem; /* w-36 = 144px */
    height: 14rem; /* h-56 = 224px */
}
@media (max-width: 767px) {
    .board-card-size {
        width: 4rem; /* w-16 = 64px */
        height: 6rem; /* h-24 = 96px */
    }
}

@keyframes divineGlow {
    0% { 
        box-shadow: 0 0 0px rgba(251, 191, 36, 0), inset 0 0 0px rgba(251, 191, 36, 0); 
        transform: scale(1); 
    }
    50% { 
        box-shadow: 0 0 35px rgba(251, 191, 36, 1), inset 0 0 15px rgba(251, 191, 36, 0.6); 
        transform: scale(1.08); 
    }
    100% { 
        box-shadow: 0 0 0px rgba(251, 191, 36, 0), inset 0 0 0px rgba(251, 191, 36, 0); 
        transform: scale(1); 
    }
}

.animate-divine-glow {
    animation: divineGlow 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.5rem; /* Keeps the glow conforming to the card shape */
    z-index: 40; /* Ensures it pops over other elements */
}