/* Bloqueia a rolagem elástica irritante nos celulares */
html, body {
    background-color: #000000;
    overscroll-behavior-y: none;
}

body {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.roblox-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 24px;
    gap: 2rem;
}

.roblox-row::-webkit-scrollbar { display: none; }

.game-card-roblox {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
}

.img-hover-zoom {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.game-card-roblox:hover .img-hover-zoom {
    transform: scale(1.05);
    filter: grayscale(0%);
}

.overlay-hidden { opacity: 0; pointer-events: none; }
.overlay-visible { opacity: 1; pointer-events: auto; }
.sidebar-hidden { transform: translateX(-100%); }
.sidebar-visible { transform: translateX(0); }

.input-login {
    background-color: transparent;
    border-bottom: 1px solid #333;
    color: white;
    transition: border-color 0.3s ease;
}

.input-login:focus {
    outline: none;
    border-bottom-color: white;
}