@media (max-width: 1200px) {
    .layout-center {
        max-width: 95%;
    }
    .game-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 15px;
    }
    .game-grid-horizontal {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 992px) {
    .nav-block-first {
        padding: 0.5rem 4%;
    }
    .nav-logo {
        max-height: 2.6rem;
    }
    .btn-register, .btn-login {
        font-size: 0.9rem;
        padding: 0.45rem 1.2rem;
    }
    .sidebar-left-content {
        gap: 0.6rem;
        height: 4.4rem;
    }
    .menu-btn-image {
        border-radius: 0.8rem;
    }
    .menu-btn-text {
        font-size: 0.6rem;
        bottom: 8%;
    }
}

@media (max-width: 768px) {
    .main-layout {
        padding: 1.5rem 3%;
    }
    .bonustime-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .game-grid-horizontal {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .game-card, .game-card2, .game-card3 {
        border-radius: 12px;
    }
    .game-card .badge-bottom-left {
        width: 1.8rem;
        bottom: 8px;
        left: 8px;
    }
    .game-card .badge-bottom-right {
        width: 1.8rem;
        bottom: 8px;
        right: 8px;
    }
    .rtp-badge-container {
        padding: 4px 6px;
        border-radius: 6px;
    }
    .rtp-text {
        font-size: 0.65rem;
    }
    .rtp-bar-bg {
        height: 5px;
    }
    
    .game-card .game-title-text .title-main {
        font-size: 0.75rem !important;
    }
    .game-card .game-title-text .title-time {
        font-size: 1.4rem;
    }
    
    .nav-block-second {
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0.6rem 4%;
        -webkit-overflow-scrolling: touch;
    }
    .nav-block-second::-webkit-scrollbar {
        display: none;
    }
    .sidebar-left-content {
        width: max-content;
        justify-content: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .nav-block-first {
        padding: 0.5rem 3%;
    }
    .nav-logo {
        max-height: 2.3rem;
    }
    .btn-register, .btn-login {
        font-size: 0.8rem;
        padding: 0.4rem 0.9rem;
    }
    .game-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .game-grid-horizontal {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }
    
    .game-card .game-title-text {
        padding: 0.8rem 1rem 2rem 1rem !important;
    }
    .game-card .game-title-text .title-main {
        font-size: 0.58rem !important;
        letter-spacing: -0.2px !important;
    }
    .game-card .game-title-text .title-time {
        font-size: 1.25rem !important;
    }
}

/* ==========================================================================
   🏆 ระบบแยกสเกลภาพ: บังคับภาพการ์ดแนวนอนแผ่เต็มใบ ส่วนค่ายอื่นย่อพอดีกรอบ
   ========================================================================== */
@media (max-width: 768px) {
    .game-card .main-game-img,
    .game-card3 .main-game-img,
    .game-card3 img,
    .game-grid-horizontal img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        background-color: transparent !important;
    }
    .game-grid .game-card2 img {
        object-fit: contain !important;
        /* background-color: #11131a !important; */
        width: 100% !important;
        height: 100% !important;
        /* padding: 4px !important; */
    }
}

@media (max-width: 480px) {
    .game-card .main-game-img,
    .game-card3 .main-game-img,
    .game-card3 img,
    .game-grid-horizontal img {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        background-color: transparent !important;
    }
    .game-grid .game-card2 img {
        object-fit: contain !important;
        /* background-color: #11131a !important; */
        width: 100% !important;
        height: 100% !important;
        /* padding: 2px !important; */
    }
}

.floating-line-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    width: 60px;
    height: 60px;
    display: block;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-line-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}
@media (max-width: 768px) {
    .floating-line-wrapper {
        width: 50px !important;
        height: 50px !important;
        bottom: 15px !important;
        right: 15px !important;
    }
}