/* ≤ 1400px */
@media (max-width: 1399.98px) {}

/* ≤ 1200px */
@media (max-width: 1199.98px) {
    .tournamentModal_contentMainLayout {
        max-width: 700px;
    }

    .modalBg.tournamentROSModal {
        background: url(../images/tournament/ros_bg.png);
        background-position: 20%;
        background-size: cover;
    }
}

/* ≤ 992px */
@media (max-width: 991.98px) {

    .mainLayout {
        background: url("../images/background/banner_3.png");
        background-position: top;
        background-size: cover;
    }

    .tournamentMainLayout {
        background: transparent;
        min-height: 100vh;
        margin-top: 0px;
        padding: 50px 10px;
        /* padding-top: 280px; */

    }


    .bannerMainContentLayout {
        min-height: 100vh;
        padding: 20px;
        background: transparent;
        padding-top: 80px;
    }

    /* character */
    .tournamentModal_contentMainLayout {
        max-width: 100%;
        right: 0px;
        bottom: 0px;

        padding: 20px 20px;
    }

    .modalBg {
        width: 100%;
        /* height: 750px; */
        padding: 0px;
    }

    .modalVideoBg.tournamentROSModal {
        height: 750px;
    }

    .modalFooterObject {
        display: flex;
        position: absolute;
        z-index: 3;
        bottom: 0px;
        left: 0px;

        width: 100%;
        height: 900px;

        background: linear-gradient(0deg, rgb(0 0 0) 23%, rgba(255, 255, 255, 0) 100%);
    }

    .modalBg.tournamentROLModal,
    .modalBg.tournamentRCCModal,
    .modalBg.tournamentROSModal {
        background-position: 20%;
    }

    .modalVideoBg.tournamentROSModal video {
        filter: brightness(1);
    }

    .waterShimmer {
        display: none;
    }

    .bannerBgBaseSea {
        display: none;
    }

    .bannerBgWaterZone {
        display: none;
    }

    .bannerBgBase {
        display: none;
    }

    .boatshipMainLayout,
    .boatshipMainLayout_2 {
        display: none;
    }

    .btnTournamentModal {
        width: 200px;
        height: 60px;
        padding: 15px;
        font-size: 15px;
    }

    .tourModalContent {
        font-size: 14px;
    }

    .tourModalLogo {
        width: 100%;
        max-width: 300px;
    }
}

/* ≤ 768px */
@media (max-width: 767.98px) {


    .tournamentTitleLayout {
        width: 100%;
        max-width: 280px;
    }

    .tournamentContentMainLayout {
        gap: 0px;
    }

    .tournamentTeam {
        width: 200px;
    }
}


/* ≤ 576px */
@media (max-width: 575.98px) {
    .tournamentContentMainLayout {
        gap: 0px;
        /* flex-wrap: wrap; */
    }

    .tournamentTeam.rcc {
        margin-top: 0px;
    }

    .tournamentTeam {
        width: 250px;
    }

    .tournamentTitleLayout {
        margin-bottom: 30px;
    }

    .modalBg.tournamentROSModal {
        background: url("../images/tournament/ros_bg2.png");
        background-position: 30%;
        background-size: cover;
    }

    .modalBg.tournamentRCCModal {
        background: url("../images/tournament/rcc_bg2.png");
        background-position: 30%;
        background-size: cover;
    }

    .modalBg.tournamentROLModal {
        background: url("../images/tournament/rol_bg2.png");
        background-position: 30%;
        background-size: cover;
    }

    .characterObject.forth {
        z-index: 13;
        width: 70px;
        bottom: 8%;
        left: 50%;
    }

    .bannerBgWaterZone {
        display: none;
    }

    .modalTourCharacter {
        position: absolute;
        z-index: 2;


        display: flex;
        width: 700px;
    }

    .modalTourCharacter.ros {
        bottom: 0px;
        left: -300px;
    }

    .modalTourCharacter.rcc {
        width: 700px;

        bottom: -60px;
        left: -200px;
    }

    .modalTourCharacter.rol {
        bottom: -0px;
        left: -250px;
    }

    .modalTourCharacter img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .bannerHeader_logo {
        max-width: 280px;
    }

    .bannerHeader_title {
        width: 100%;
        max-width: 350px;
    }

    .bannerHeader_layersLayout {
        width: 345px;
        height: 67px;
        padding: 16px 20px 27px 33px;
        font-size: 26px;
        line-height: 20px;
    }

    .tournamentMainLayout {
        padding-top: 150px;
    }

}

@media (max-width: 575.98px) {
    .tournamentContentMainLayout {
        display: block;
        position: relative;
    }

    .carousel-track {
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        /* กลับมาใช้ mandatory */
        scroll-behavior: auto;
        /* ลบ overflow-x: scroll ออก ใช้อันนี้แทน */
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding: 20px 0;
    }

    .carousel-track::-webkit-scrollbar {
        display: none;
    }

    .carousel-spacer {
        flex: 0 0 calc(50% - 110px - 8px);
        min-width: 1px;
    }

    .tournamentTeam {
        flex: 0 0 220px;
        scroll-snap-align: center;
        width: 220px;
        /* filter: drop-shadow(1px 1px 20px transparent) brightness(0.45); */
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .tournamentTeam.is-active {
        filter: drop-shadow(0px 0px 20px #ffb444) brightness(1.1);
        transform: scale(1);
    }

    .tournamentTeam.rcc {
        margin-top: 0;
        /* รีเซ็ต margin เดิม */
    }

    .carousel-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 8px;
    }

    .nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #00000096;
        border: 2px solid #494949;
        box-shadow: 1px 1px 2px #6d6d6dea;
        color: #b3b3b3;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
    }

    .nav-btn:disabled {
        opacity: 0.3;
        pointer-events: none;
    }

    .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        transition: background 0.3s, transform 0.3s;
    }

    .dot.active {
        background: #ffb444;
        transform: scale(1.4);
    }

    .tournamentTeam img {
        transform: translateY(0px);
        opacity: 1;
    }

    /* .bannerMainLayout {
        min-height: fit-content;
        height: 1000px;
    } */
    .tournamentMainLayout .sr,
    .tournamentMainLayout .sr.in-view,
    .tournamentMainLayout .sr:not(.in-view) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .tourModalLogo {
        width: 100%;
        max-width: 200px;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 420px) {
    .bannerHeader_layersLayout {
        width: 300px;
        height: 80px;
        font-size: 25px;
    }
}


/* ===================
    HEIGHT
=================== */

@media (max-height: 667px) {
    .modalTourCharacter.ros {
        bottom: -100px;
        left: -300px;
    }

    .modalTourCharacter.rol {
        bottom: -70px;
    }
}


@media (max-height: 568px) {
    .modalTourCharacter.rcc {
        bottom: -200px;
    }

    .modalTourCharacter.rol {
        bottom: -150px;
    }
}

@media (max-height: 480px) {
    .bannerMainContentLayout {
        min-height: calc(var(--vh, 1vh) * 150);
    }

    .tournamentMainLayout {
        padding-top: 400px;
    }
}