/*
 * Lion2 Signal — final interaction and realtime polish.
 *
 * This layer is deliberately motion-light: controls communicate hover,
 * keyboard focus, press, expanded, selected, busy and empty states without
 * moving persistent layout.  Every non-essential animation is disabled by
 * the reduced-motion contract at the end of this file.
 */

body.lion2-skin {
    --signal-motion-fast: 120ms;
    --signal-motion-standard: 180ms;
    --signal-motion-slow: 260ms;
    --signal-motion-ease: cubic-bezier(.2, .8, .2, 1);
    --signal-dialog-font-body: 'Malgun Gothic', 'Apple SD Gothic Neo', Arial, sans-serif;
    --signal-dialog-font-display: 'SEBANG_Gothic_Bold', 'Malgun Gothic', sans-serif;
}

body.lion2-skin #ajax-content > :first-child {
    animation: lion2-route-enter var(--signal-motion-slow) var(--signal-motion-ease) both;
}

body.lion2-skin #ajax-content :where(
    a[href],
    button,
    input,
    select,
    textarea,
    [role='button'],
    [role='tab'],
    [aria-expanded]
) {
    transition:
        color var(--signal-motion-fast) ease,
        background-color var(--signal-motion-fast) ease,
        border-color var(--signal-motion-fast) ease,
        box-shadow var(--signal-motion-fast) ease,
        filter var(--signal-motion-fast) ease,
        opacity var(--signal-motion-fast) ease,
        transform var(--signal-motion-fast) ease;
}

body.lion2-skin :where(
    .loginContainer,
    .sweet-alert,
    .lion-rules-modal,
    .lion-rolling-modal__backdrop,
    .casino-modal-overlay,
    .modal
) :where(a[href], button, input, select, textarea, [role='button']) {
    transition:
        color var(--signal-motion-fast) ease,
        background-color var(--signal-motion-fast) ease,
        border-color var(--signal-motion-fast) ease,
        box-shadow var(--signal-motion-fast) ease,
        filter var(--signal-motion-fast) ease,
        opacity var(--signal-motion-fast) ease,
        transform var(--signal-motion-fast) ease;
}

body.lion2-skin #ajax-content :where(button, [role='button'], [role='tab']):not(:disabled, [aria-disabled='true']):active,
body.lion2-skin :where(.loginContainer, .sweet-alert, .modal) button:not(:disabled):active {
    filter: brightness(.96);
    transform: translateY(1px);
}

body.lion2-skin #ajax-content :where([aria-selected='true'], [aria-pressed='true']) {
    box-shadow: inset 0 -3px 0 rgb(0 0 0 / 32%);
}

body.lion2-skin #ajax-content [aria-expanded] :where(
    .toggle-icon,
    .fi-rr-angle-down,
    .fi-rs-angle-small-down,
    .fi-br-angle-down
) {
    transition: transform var(--signal-motion-standard) var(--signal-motion-ease);
}

body.lion2-skin #ajax-content [aria-expanded='true'] :where(
    .toggle-icon,
    .fi-rr-angle-down,
    .fi-rs-angle-small-down,
    .fi-br-angle-down
) {
    transform: rotate(180deg);
}

body.lion2-skin #ajax-content :where([aria-busy='true'], .is-loading) {
    cursor: progress;
}

body.lion2-skin #ajax-content :where(input, select, textarea):user-invalid {
    border-color: var(--signal-danger, #ff665d) !important;
    box-shadow: 0 0 0 2px rgb(255 102 93 / 18%) !important;
}

body.lion2-skin #ajax-content :where(
    .memo-empty-state,
    .recommend-empty-state,
    .coupon-empty-state,
    .virtual-empty,
    .virtual-cart-empty,
    .mini-order-empty,
    .quiz-empty,
    .pointdetail-empty,
    .notice-empty,
    .customer-empty-state,
    .ranking-empty,
    .honor-empty,
    .mybet-empty-state
) {
    border: 1px dashed #596164;
    border-left: 5px solid var(--signal-yellow, #ffd400);
    border-radius: 0;
    background-color: #0d1113;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 4%) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--signal-copy-soft, #b9bcb7);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%);
}

@media (hover: hover) and (pointer: fine) {
    body.lion2-skin #ajax-content :where(
        button,
        [role='button'],
        [role='tab']
    ):not(:disabled, [aria-disabled='true']):hover {
        filter: brightness(1.08);
    }

    body.lion2-skin #ajax-content :where(
        .live-game-cont,
        .match-card,
        .coupon-ticket,
        .recommend-step-card,
        .memo-card,
        .point-card,
        .board-card
    ):hover {
        border-color: var(--signal-yellow, #ffd400) !important;
        box-shadow: 0 8px 18px rgb(0 0 0 / 34%);
    }
}

/* --------------------------------------------------------------------------
 * Realtime: replace the inherited Lion1 savanna empty screen with a semantic
 * Signal control-room state.  The legacy selector remains as a cache-safe
 * fallback until every browser has the rebuilt realtime chunk.
 * ----------------------------------------------------------------------- */

body.lion2-skin.lion-skin #ajax-content .w_realtime {
    color: var(--signal-detail-copy, #f2f0e9);
    font-family: var(--signal-font-body) !important;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .spo_jong .sports-type[aria-selected='true'] {
    border-color: #ffe45c !important;
    background: var(--signal-yellow, #ffd400) !important;
    color: #090b0c !important;
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 30%) !important;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime
    .spo_jong .sports-type[aria-selected='true'] :is(.signal-sport-icon, small, div) {
    color: #090b0c !important;
    -webkit-text-fill-color: #090b0c !important;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list {
    position: relative;
    isolation: isolate;
    min-height: 260px;
    transition: filter var(--signal-motion-standard) ease, opacity var(--signal-motion-standard) ease;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list[aria-busy='true'] {
    filter: saturate(.72);
    opacity: .76;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list[aria-busy='true']::before {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, transparent, #55d9e8, #ffd400, #ff665d, transparent);
    background-size: 220% 100%;
    animation: lion2-signal-loading .9s linear infinite;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list.is-list-ready
    > .signal-realtime-empty {
    animation: lion2-state-enter var(--signal-motion-slow) var(--signal-motion-ease) both;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty,
body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list
    > .width-full.display-center:has(.p-t-24) {
    position: relative;
    display: grid;
    box-sizing: border-box;
    min-height: 520px;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 48px 24px;
    overflow: hidden;
    border: 1px solid #596164 !important;
    border-top: 4px solid var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background-color: #0b0f11 !important;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 7%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 6%) 1px, transparent 1px),
        radial-gradient(circle at 50% 42%, rgb(255 212 0 / 10%), transparent 34%),
        linear-gradient(145deg, #171c1e, #080b0c 72%) !important;
    background-position: center !important;
    background-size: 36px 36px, 36px 36px, auto, auto !important;
    color: var(--signal-copy, #f2f0e9);
    text-align: center;
    box-shadow: inset 0 0 58px rgb(0 0 0 / 58%) !important;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty::before,
body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list
    > .width-full.display-center:has(.p-t-24)::before {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 10px;
    border: 0;
    border-radius: 0;
    content: '';
    background: repeating-linear-gradient(135deg, #ffd400 0 12px, #101314 12px 24px) !important;
    box-shadow: none;
    transform: none;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty::after {
    position: absolute;
    top: 0;
    bottom: 10px;
    left: -32%;
    width: 24%;
    content: '';
    background: linear-gradient(90deg, transparent, rgb(85 217 232 / 8%), transparent);
    pointer-events: none;
    animation: lion2-signal-sweep 4.8s ease-in-out infinite;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty__beacon {
    position: relative;
    display: grid;
    width: 120px;
    height: 72px;
    place-items: center;
    margin-bottom: 8px;
    border: 2px solid #616a6d;
    border-left: 8px solid var(--signal-yellow, #ffd400);
    background: #111618;
    color: #fff;
    box-shadow: 8px 8px 0 rgb(0 0 0 / 36%), inset 0 0 0 1px rgb(255 255 255 / 4%);
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty__beacon::before {
    width: 13px;
    height: 13px;
    margin-right: 46px;
    border: 2px solid #2a0d0d;
    border-radius: 50%;
    content: '';
    background: #ff665d;
    box-shadow: 0 0 0 6px rgb(255 102 93 / 12%), 0 0 20px rgb(255 102 93 / 44%);
    animation: lion2-live-beacon 1.35s steps(2, end) infinite;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty__beacon > span {
    position: absolute;
    right: 17px;
    color: var(--signal-yellow-hot, #ffdf2f);
    font: 900 16px/1 var(--signal-font-numeric);
    letter-spacing: .08em;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty h2 {
    z-index: 1;
    max-width: 560px;
    margin: 0;
    color: var(--signal-copy, #f2f0e9);
    font-family: var(--signal-font-display);
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.3;
    text-shadow: none;
}

body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty p {
    z-index: 1;
    margin: 0;
    color: var(--signal-copy-soft, #b9bcb7);
    font-family: var(--signal-font-body);
    font-size: 14px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
 * Bet history: the last legacy red-brown fallbacks were non-semantic chrome.
 * Outcome and destructive controls intentionally keep their danger colours.
 * ----------------------------------------------------------------------- */

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet > .page_ttl {
    background-color: #101416 !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet :is(
    .mybet-category-tabs,
    .mybet-subtabs
) > a {
    border-color: #535b5e !important;
    background: #171d20 !important;
    color: var(--detail-text, #eff1ed) !important;
    box-shadow: none !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet :is(
    .mybet-category-tabs,
    .mybet-subtabs
) > a:is(.on, .active, [aria-selected='true']) {
    border-color: #ffe45c !important;
    background: var(--signal-yellow, #ffd400) !important;
    color: #090b0c !important;
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 32%) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-bulk-actions > :is(
    .mybet-select-all,
    .mybet-delete-selected
) {
    min-width: 92px;
    min-height: 38px;
    padding: 0 14px !important;
    border-radius: 0 !important;
    font-family: var(--signal-font-body) !important;
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-bulk-actions > .mybet-select-all {
    border: 1px solid #ffe45c !important;
    background: #252a25 !important;
    color: var(--signal-yellow, #ffd400) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet
    .mybet-bulk-actions > .mybet-select-all[aria-pressed='true'] {
    background: var(--signal-yellow, #ffd400) !important;
    color: #090b0c !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-bulk-actions > .mybet-delete-selected {
    border: 1px solid #9a5946 !important;
    background: #54271d !important;
    color: #f0d8cf !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-bulk-actions > :is(
    .mybet-select-all,
    .mybet-delete-selected
):focus-visible {
    outline: 3px solid var(--signal-yellow, #ffd400) !important;
    outline-offset: 2px;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-empty-state {
    border: 1px dashed #596164 !important;
    border-left: 5px solid var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background-color: #0d1113 !important;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 4%) 1px, transparent 1px),
        linear-gradient(145deg, #171c1e, #080b0c 72%) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    color: var(--signal-copy-soft, #b9bcb7) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-empty-state::before,
body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-empty-state::after {
    background: linear-gradient(90deg, transparent, rgb(85 217 232 / 38%)) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet .mybet-empty-state__icon {
    border: 2px solid #616a6d !important;
    border-left: 7px solid var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background: #111618 !important;
    color: var(--signal-yellow, #ffd400) !important;
    box-shadow: 7px 7px 0 rgb(0 0 0 / 34%) !important;
    text-shadow: none !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet :is(
    .mybet-empty-state__title,
    .mybet-empty-state__description
) {
    color: var(--signal-copy, #f2f0e9) !important;
    text-shadow: none !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet #div_esport :is(
    .esport-bet-card,
    .esport-bet-card-m
) {
    border-color: #535b5e !important;
    border-left-color: var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background-color: #101416 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet #div_esport :is(
    .esport-bet-card,
    .esport-bet-card-m
):is(.esport-bet-card--win, .esport-bet-card--settlement) {
    border-left-color: var(--signal-success, #68d391) !important;
}

body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet #div_esport :is(
    .esport-bet-card,
    .esport-bet-card-m
).esport-bet-card--lose {
    border-left-color: var(--signal-danger, #ff665d) !important;
}

/* Cached legacy chunk fallback: retain its DOM, remove all Lion artwork. */
body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list
    > .width-full.display-center:has(.p-t-24)::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(90%, 620px);
    content: 'SIGNAL OFFLINE\A현재 진행 중인 실시간 경기가 없습니다\A경기 목록은 자동으로 업데이트됩니다.';
    color: var(--signal-copy, #f2f0e9);
    font-family: var(--signal-font-display);
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 900;
    line-height: 1.75;
    text-shadow: none;
    white-space: pre-wrap;
    transform: translate(-50%, -50%);
}

body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list
    > .width-full.display-center:has(.p-t-24) .p-t-24 {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
 * Dialog polish: the inherited SweetAlert skin still used the Lion1 jungle
 * logo and bronze material.  Keep the existing API and DOM, replace only its
 * visual surface and interaction feedback.
 * ----------------------------------------------------------------------- */

body.lion2-skin :is(#login, #join, #join2).loginContainer {
    background-color: rgb(2 5 6 / 94%) !important;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 4%) 1px, transparent 1px),
        radial-gradient(circle at 50% 30%, rgb(255 212 0 / 9%), transparent 34%) !important;
    background-position: center !important;
    background-size: 36px 36px, 36px 36px, auto !important;
    backdrop-filter: blur(6px) saturate(.72) !important;
    animation: lion2-overlay-enter var(--signal-motion-standard) ease both;
    font-family: var(--signal-dialog-font-body) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :where(
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    label,
    span,
    strong,
    small,
    li,
    a,
    button,
    input,
    select,
    option,
    textarea
) {
    font-family: var(--signal-dialog-font-body) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .wrap1 {
    background: transparent !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer
    :is(.wrap2, .wrap2.joincol) {
    border: 1px solid #677174 !important;
    border-top: 8px solid var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background-color: #101518 !important;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 4%) 1px, transparent 1px),
        linear-gradient(rgb(8 12 14 / 88%), rgb(8 12 14 / 95%)),
        url('/skin/lion2_main/images/signal/signal-frame-panel-v1.webp') !important;
    background-position: center !important;
    background-size: 30px 30px, 30px 30px, auto, cover !important;
    box-shadow: 18px 22px 0 rgb(0 0 0 / 38%), 0 28px 72px rgb(0 0 0 / 68%) !important;
    clip-path: var(--signal-cut, none) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .wrap2::before {
    height: 8px !important;
    background: repeating-linear-gradient(135deg, #ffd400 0 10px, #101314 10px 20px) !important;
    box-shadow: none !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .wrap2::after {
    background-image: none !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :is(
    .box,
    .title,
    .colWrap,
    .col,
    .btnCont,
    .btnCont2
) {
    background-image: none !important;
    text-shadow: none !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :is(.title, label) {
    color: var(--signal-copy, #f2f0e9) !important;
    font-family: var(--signal-dialog-font-body) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .title {
    font-family: var(--signal-dialog-font-display) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .title :where(span, strong, small) {
    font-family: var(--signal-dialog-font-display) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :is(input, select) {
    border-color: #596164 !important;
    border-radius: 0 !important;
    background: #090d0e !important;
    color: var(--signal-copy, #f2f0e9) !important;
    box-shadow: inset 0 2px 6px rgb(0 0 0 / 48%) !important;
    font-size: 14px !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :is(input, select):focus {
    border-color: var(--signal-yellow, #ffd400) !important;
    box-shadow: 0 0 0 3px rgb(255 212 0 / 16%) !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer :is(button, .u-cert-btn) {
    font-size: 14px !important;
}

/* Keep every guest login action above the 44px touch-target floor even when
 * Chromium resolves the modal's fractional mobile layout at 390px. */
body.lion2-skin #login.loginContainer .btnCont .btn_login {
    min-height: 46px !important;
    height: 46px !important;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .close_login {
    min-width: 46px !important;
    width: 46px !important;
    min-height: 46px !important;
    height: 46px !important;
}

body.lion2-skin #ajax-content .favorite-icon[role='button'] {
    display: grid !important;
    place-items: center;
    box-sizing: border-box;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 212 0 / 66%);
    border-radius: 0;
    background: rgb(9 13 14 / 88%);
    color: var(--signal-yellow, #ffd400);
    line-height: 1;
}

body.lion2-skin :is(#login, #join, #join2).loginContainer .btnCont2 .btnBig {
    font-family: var(--signal-dialog-font-display) !important;
    font-size: 15px !important;
}

body.lion2-skin .sweet-overlay {
    background: rgb(2 5 6 / 82%) !important;
    backdrop-filter: blur(5px) saturate(.72);
}

body.lion2-skin .sweet-alert {
    width: min(460px, calc(100vw - 28px)) !important;
    margin-left: -230px !important;
    padding: 38px 28px 26px !important;
    border: 1px solid #677174 !important;
    border-top: 8px solid var(--signal-yellow, #ffd400) !important;
    border-radius: 0 !important;
    background-color: #101518 !important;
    background-image:
        linear-gradient(90deg, rgb(85 217 232 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(85 217 232 / 4%) 1px, transparent 1px),
        linear-gradient(145deg, #1b2123, #0b0f11 76%) !important;
    background-position: center !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    color: var(--signal-copy, #f2f0e9) !important;
    box-shadow: 18px 22px 0 rgb(0 0 0 / 38%), 0 26px 70px rgb(0 0 0 / 62%) !important;
    animation: lion2-dialog-enter var(--signal-motion-standard) var(--signal-motion-ease) both;
}

body.lion2-skin .sweet-alert::before {
    top: 9px;
    right: 10px;
    left: 10px;
    height: 6px;
    background: repeating-linear-gradient(135deg, #ffd400 0 8px, #111 8px 16px);
    box-shadow: none;
}

body.lion2-skin .sweet-alert::after {
    inset: 4px;
    border-color: rgb(255 255 255 / 6%);
    border-radius: 0;
}

body.lion2-skin .sweet-alert h2 {
    margin: 0 0 10px !important;
    color: var(--signal-copy, #f2f0e9) !important;
    font-family: var(--signal-dialog-font-display) !important;
    font-size: 22px !important;
    text-shadow: none !important;
}

body.lion2-skin .sweet-alert p {
    color: var(--signal-copy-soft, #b9bcb7) !important;
    font-family: var(--signal-dialog-font-body) !important;
    font-size: 14px !important;
}

body.lion2-skin .sweet-alert input {
    border: 1px solid #596164 !important;
    border-radius: 0 !important;
    background: #090d0e !important;
    color: var(--signal-copy, #f2f0e9) !important;
    box-shadow: inset 0 2px 6px rgb(0 0 0 / 48%) !important;
}

body.lion2-skin .sweet-alert input:focus {
    border-color: var(--signal-yellow, #ffd400) !important;
    box-shadow: 0 0 0 3px rgb(255 212 0 / 16%) !important;
}

body.lion2-skin .sweet-alert button {
    min-height: 44px;
    border-radius: 0 !important;
    font-family: var(--signal-dialog-font-display) !important;
    font-size: 14px !important;
    text-shadow: none !important;
}

body.lion2-skin .sweet-alert button.confirm {
    border: 1px solid #ffe45c !important;
    background: linear-gradient(180deg, #ffe036, #cba500) !important;
    color: #090b0c !important;
    box-shadow: inset 0 1px rgb(255 255 255 / 42%), 0 3px 0 #665100 !important;
}

body.lion2-skin .sweet-alert button.cancel {
    border: 1px solid #596164 !important;
    background: #202628 !important;
    color: var(--signal-copy, #f2f0e9) !important;
    box-shadow: none !important;
}

body.lion2-skin :is(
    .loginContainer .wrap2,
    .lion-rules-modal__dialog,
    .lion-rolling-modal__dialog,
    .casino-modal-content,
    .modal.show .modal-dialog
) {
    animation: lion2-dialog-enter var(--signal-motion-standard) var(--signal-motion-ease) both;
}

@keyframes lion2-route-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lion2-state-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lion2-dialog-enter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lion2-overlay-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lion2-signal-loading {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@keyframes lion2-signal-sweep {
    0%, 16% { transform: translateX(0); }
    70%, 100% { transform: translateX(560%); }
}

@keyframes lion2-live-beacon {
    0%, 48% { opacity: .48; }
    49%, 100% { opacity: 1; }
}

@media (width <= 980px) {
    body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet
        .mybet-scroll-nav.is-scrollable :is(.mybet-category-tabs, .mybet-subtabs) {
        padding-inline: 52px !important;
        scroll-padding-inline: 52px !important;
    }

    body.lion2-skin.lion-skin #ajax-content#ajax-content .page.w_mybet
        .mybet-scroll-arrow:disabled {
        pointer-events: none;
        opacity: .42;
    }

    body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty,
    body.lion2-skin.lion-skin #ajax-content .w_realtime #realtime_list
        > .width-full.display-center:has(.p-t-24) {
        min-height: 460px;
        padding: 38px 18px;
    }

    body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty h2 {
        font-size: 22px;
    }

    body.lion2-skin.lion-skin #ajax-content .w_realtime .signal-realtime-empty p {
        font-size: 15px;
    }

    body.lion2-skin .sweet-alert {
        left: 50% !important;
        width: calc(100vw - 24px) !important;
        margin-left: calc(-50vw + 12px) !important;
        padding: 34px 18px 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lion2-skin #ajax-content > :first-child,
    body.lion2-skin #ajax-content .w_realtime #realtime_list::before,
    body.lion2-skin #ajax-content .w_realtime .signal-realtime-empty,
    body.lion2-skin #ajax-content .w_realtime .signal-realtime-empty::after,
    body.lion2-skin #ajax-content .w_realtime .signal-realtime-empty__beacon::before,
    body.lion2-skin .sweet-alert,
    body.lion2-skin :is(#login, #join, #join2).loginContainer,
    body.lion2-skin :is(
        .loginContainer .wrap2,
        .lion-rules-modal__dialog,
        .lion-rolling-modal__dialog,
        .casino-modal-content,
        .modal.show .modal-dialog
    ) {
        animation: none !important;
    }

    body.lion2-skin #ajax-content :where(
        a[href],
        button,
        input,
        select,
        textarea,
        [role='button'],
        [role='tab'],
        [aria-expanded]
    ),
    body.lion2-skin :where(
        .loginContainer,
        .sweet-alert,
        .lion-rules-modal,
        .lion-rolling-modal__backdrop,
        .casino-modal-overlay,
        .modal
    ) * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}