/*---------------------------------------------------------
    FLATTENED MAIN VISUAL

    The skin built every slide from a background, two gradient masks, an
    entity and a label, and moved each of them separately at every
    breakpoint. Those layers are now composed into one image per slide
    (apps/api/src/management/compose-visual-slides.ts), so all that is left
    to position is a single <img>.

    .visual_flat is the only rule the casino and slot sections need, because
    casino.css and slot.css still own their #casino_visual / #slot_visual
    shells. #deposit_visual and #withdraw_visual are restated here: deposit.css
    and withdraw.css carry a global `*` reset that would repaint the rest of
    the page, so the player app cannot load them for the banner alone.
---------------------------------------------------------*/

#deposit_visual,
#withdraw_visual {
    display: block;
    margin: 0;
    border-top: 1px solid #454462;
    border-bottom: 1px solid #454462;
}

#deposit_visual > .visual_list,
#withdraw_visual > .visual_list {
    display: block;
    margin: 0;
    min-width: 1400px;
    height: 364px;
    position: relative;
    overflow: hidden;
}

#deposit_visual > .visual_list > .visual_item,
#withdraw_visual > .visual_list > .visual_item {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all 600ms;
}

#deposit_visual > .visual_list > .visual_item.active,
#withdraw_visual > .visual_list > .visual_item.active {
    opacity: 1;
    transition: all 600ms;
}

#deposit_visual .visual_btns,
#withdraw_visual .visual_btns {
    position: absolute;
    display: flex;
    left: 50%;
    height: 0px;
    bottom: 50px;
    transform: translate(-50%, -50%);
}

#deposit_visual .visual_btns > .btn_circle,
#withdraw_visual .visual_btns > .btn_circle {
    display: block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin: 10px;
    border-radius: 10px;
    background: #42425f;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 300ms;
}

#deposit_visual .visual_btns > .btn_circle.active,
#withdraw_visual .visual_btns > .btn_circle.active {
    background: #ffc967;
    box-shadow: 0px 0px 20px 5px #ffc967;
    width: 16px;
    height: 16px;
    border-radius: 10px;
    transition: all 300ms;
}

@media (max-width: 1400px) {
    #deposit_visual > .visual_list,
    #withdraw_visual > .visual_list {
        min-width: 100%;
        height: 364px;
    }
}

@media (max-width: 767px) {
    #deposit_visual,
    #withdraw_visual {
        border-top: 0;
    }

    #deposit_visual > .visual_list,
    #withdraw_visual > .visual_list {
        min-width: 320px;
        max-width: 800px;
        height: 200px;
    }

    #deposit_visual .visual_btns,
    #withdraw_visual .visual_btns {
        display: none;
    }
}

@media (max-width: 280px) {
    #deposit_visual > .visual_list,
    #withdraw_visual > .visual_list {
        min-width: 280px;
    }
}

/*
    슬라이드는 **띠를 꽉 채우고, 띠는 그림의 비율로 섭니다** (2026-11-05 맥스벳 「배너가 잘리고」).

    이 자리는 `width: 1600px; object-fit: none` 이었습니다 — 합성 이미지가 1600px 이고 그 크기 그대로 가운데 두면
    예전에 마스크 두 장이 덮던 폭이 재현된다는 계산이었습니다. 운영자 배너로 바뀐 뒤에는 그 계산이 남긴 것이 둘뿐이었습니다:
    1920 에서는 좌우 160px 이 슬라이드의 바탕색으로 남아 그림이 칼로 자른 듯 끊겨 보였고, 1600 보다 좁으면 양옆이 잘렸습니다.

    그래서 띠의 높이를 폭에서 냅니다 — 자리 규격 1600×364 의 비율. 슬롯 탭도 같은 크기입니다(2026-11-05 「맥스뱃 슬롯도 배너
    카지노쪽이랑 같은크기로」 — 원본의 484 는 슬롯 그림 한 장의 높이였습니다). 그림과 띠의 비율이 같으므로
    `cover` 는 아무것도 자르지 않고, 다른 비율로 올린 배너만 가운데를 남기고 조금 잘립니다. 아주 넓은 화면에서는 높이에
    상한을 두어 첫 화면이 배너로만 차지 않게 합니다 — 그때 잘리는 위아래는 배너 규칙(문구는 세로 가운데 80%)이 비워 둔 곳입니다.

    폰(≤767)은 `globals.css` 가 768×320 비율로 따로 잡고, 아래에서 `contain` 으로 되돌립니다.
*/
.visual_item > .visual_flat {
    display: block;
}

.visual_item > .visual_flat > img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 768px) {
    #app :is(#casino_visual, #slot_visual, #deposit_visual, #withdraw_visual) > .visual_list {
        min-width: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1600 / 364;
        max-height: 480px;
    }

    /* `slot.css` 가 슬롯 띠의 바깥 상자에도 1400 바닥과 484 높이를 줍니다. */
    #app #slot_visual {
        min-width: 0;
        height: auto;
    }
}

/*
    On a phone the rule above crops away most of the slide: the frame is about
    350px across and the source is 1600, so roughly four fifths of it —
    including every slide's headline and its call to action, which sit left of
    centre — never reaches the screen. Fitting the whole slide inside the frame
    trades some vertical letterbox for a banner that still says something.

    The slide's own background colour is painted behind it, so the bands read
    as part of the banner rather than as gaps.
*/
@media (max-width: 767px) {
    .visual_item > .visual_flat > img {
        width: 100%;
        object-fit: contain;
    }
}