@media (max-width: 900px) {
    .sidebar {
        display: none;
    }

    .header-center input {
        width: 160px;
    }
}

@media (max-width: 600px) {
    .header-center {
        display: none;
    }

    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
@media (max-width: 900px) {

    .sidebar {
        position: fixed;
        top: 56px;
        left: 0;
        height: calc(100vh - 56px);
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 100;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .app-layout {
        position: relative;
    }

    .content {
        padding: 12px;
    }

    .overlay {
        position: fixed;
        inset: 56px 0 0 0;
        background: rgba(0,0,0,0.5);
        z-index: 90;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 600px) {
    .header-center {
        display: none;
    }
}