/*---------------------------------------------------------
    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;
    }
}

/*
    슬라이드는 **틀을 꽉 채웁니다.**

    이 자리는 `width: 1600px; object-fit: none` 이었습니다 — 합성 이미지가
    1600px 이고, 그 크기 그대로 가운데 두면 예전에 마스크 두 장이 덮던 폭이
    재현된다는 계산이었습니다. 넓은 화면에서는 그 바깥이 슬라이드의 배경색으로
    남는데, 히어로가 전폭이 된 뒤로 그 남는 폭이 그대로 눈에 띕니다 — 1920 에서
    좌우 160px, 2560 에서 480px 씩 검은 띠였습니다.

    운영자 요청이 「메인 배너가 꽉 차야 한다」이므로 `cover` 로 채웁니다. 대가는
    1600 보다 넓은 화면에서 원본을 확대한다는 것과, 세로가 넘치는 만큼 위아래가
    잘린다는 것입니다. 배너가 문구를 가운데 두고 합성되므로 `object-position:
    center` 로 그 문구를 남깁니다.

    폰(≤767)은 아래에서 `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;
}

/*
    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;
    }
}