/*
 * Lion2 Signal system — shared shell.
 *
 * The compatibility styles immediately before this module contain important
 * declarations and route-specific fidelity passes.  A named layer lets these
 * deliberately small important overrides win without adding another fake-ID
 * specificity anchor.  Keep this module route-independent.
 */

@layer lion2-signal-shell {
    @media screen and (min-width: 981px) {
        body.lion2-skin {
            --signal-shell-center-min: 1000px;
            --signal-shell-left-max: clamp(240px, 15.655vw, 306px);
            --signal-shell-right-max: clamp(238px, 15.119vw, 292px);
            --signal-shell-right-rail: clamp(
                0px,
                calc(100vw - var(--signal-shell-center-min)),
                var(--signal-shell-right-max)
            );
            --signal-shell-left-rail: clamp(
                0px,
                calc(
                    100vw
                    - var(--signal-shell-center-min)
                    - var(--signal-shell-right-max)
                ),
                var(--signal-shell-left-max)
            );
            --lion-left-frame-width: var(--signal-shell-left-rail) !important;
            --lion-right-frame-width: var(--signal-shell-right-rail) !important;
        }

        body.lion2-skin #crossScroll1.container_wrap {
            display: grid !important;
            grid-template-columns:
                minmax(0, var(--signal-shell-left-rail))
                minmax(min(100%, var(--signal-shell-center-min)), 1fr)
                minmax(0, var(--signal-shell-right-rail)) !important;
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-top: var(--lion-desktop-header-height) !important;
            padding: 0 !important;
        }

        body.lion2-skin #ajax-content.contents {
            grid-column: 2 !important;
            box-sizing: border-box !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
        }

        body.lion2-skin .top_wrap .userm_wrap {
            display: grid !important;
            grid-template-rows: minmax(0, 1fr) !important;
            grid-template-columns:
                clamp(176px, 17vw, 292px)
                clamp(220px, 24vw, 440px)
                minmax(0, 1fr) !important;
            box-sizing: border-box !important;
            gap: 0 clamp(8px, .72vw, 18px) !important;
            width: 100% !important;
            height: var(--lion-main-art-height) !important;
            padding: clamp(6px, .48vw, 12px) clamp(10px, .84vw, 22px) !important;
        }

        body.lion2-skin .top_wrap {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            background-image: var(--signal-part-header-shell) !important;
        }

        body.lion2-skin .top_wrap .userm_wrap .logo {
            position: relative !important;
            inset: auto !important;
            grid-row: 1 !important;
            grid-column: 1 !important;
            align-self: stretch !important;
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            pointer-events: auto !important;
        }

        body.lion2-skin .top_wrap .userm_wrap .logo img {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            object-position: left center !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy {
            position: relative !important;
            z-index: 3 !important;
            inset: auto !important;
            grid-row: 1 !important;
            grid-column: 2 !important;
            align-self: center !important;
            display: flex !important;
            box-sizing: border-box !important;
            gap: 9px !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            height: clamp(38px, 2.75vw, 52px) !important;
            margin: 0 !important;
            padding: 0 12px !important;
            overflow: hidden !important;
            align-items: center !important;
            border: 1px solid #5d6263 !important;
            border-left: 4px solid var(--signal-yellow-hot, #ffd316) !important;
            border-radius: 0 !important;
            background:
                var(--signal-part-notice-well) center / 100% 100% no-repeat,
                #0b0e0f !important;
            color: #eff1ed !important;
            box-shadow:
                inset 0 0 0 1px rgb(255 255 255 / 5%),
                0 3px 9px rgb(0 0 0 / 34%) !important;
            clip-path: none !important;
            font-family: var(--signal-font-body) !important;
            font-size: clamp(12px, .72vw, 14px) !important;
            font-weight: 700 !important;
            line-height: 1.2 !important;
            pointer-events: auto !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy::before,
        body.lion2-skin .top_wrap .scrollNotice-copy::after {
            display: none !important;
            content: none !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy:focus-visible {
            outline: 2px solid var(--signal-yellow-hot, #ffd316) !important;
            outline-offset: 2px !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy > i {
            position: static !important;
            z-index: auto !important;
            display: inline-flex !important;
            width: 18px !important;
            height: 18px !important;
            flex: 0 0 18px !important;
            align-items: center !important;
            justify-content: center !important;
            color: var(--signal-yellow-hot, #ffd316) !important;
            font-size: 14px !important;
            line-height: 1 !important;
            filter: none !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy > .lion-header-notice-viewport {
            position: relative !important;
            display: flex !important;
            min-width: 0 !important;
            height: 100% !important;
            flex: 1 1 auto !important;
            align-items: center !important;
            overflow: hidden !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy
            > .lion-header-notice-viewport
            > .lion-header-notice-text {
            position: relative !important;
            inset: auto !important;
            display: inline-block !important;
            box-sizing: content-box !important;
            width: max-content !important;
            min-width: max-content !important;
            max-width: none !important;
            flex: 0 0 auto !important;
            padding-inline-start: 100% !important;
            overflow: visible !important;
            color: inherit !important;
            font: inherit !important;
            line-height: 1.2 !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
            animation: lion2-header-notice-flow 13s linear infinite !important;
            transform: none !important;
            will-change: translate !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy:is(:hover, :focus-within)
            .lion-header-notice-text {
            animation-play-state: paused !important;
        }

        body.lion2-skin .top_wrap .scrollNotice-copy .lion-header-notice-text > * {
            display: inline !important;
            margin: 0 !important;
            color: inherit !important;
            font: inherit !important;
        }

        body.lion2-skin .top_wrap .userm_wrap ul.submenu {
            position: relative !important;
            inset: auto !important;
            grid-row: 1 !important;
            grid-column: 3 !important;
            align-self: center !important;
            display: flex !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            height: clamp(42px, 3vw, 56px) !important;
            margin: 0 !important;
            padding: 0 clamp(4px, .35vw, 9px) !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            border: 2px solid #55595a !important;
            background:
                var(--signal-part-nav-light) center / 100% 100% no-repeat,
                #aaa9a3 !important;
            box-shadow:
                inset 12px 0 12px -14px #050606,
                inset -12px 0 12px -14px #050606,
                inset 0 1px rgb(255 255 255 / 58%),
                0 4px 10px rgb(0 0 0 / 34%) !important;
            clip-path: none !important;
            overscroll-behavior-inline: contain;
            pointer-events: auto !important;
            scrollbar-color: #55595a #b7b6b0;
            scrollbar-width: thin;
            scroll-snap-type: inline proximity;
        }

        body.lion2-skin .top_wrap .userm_wrap ul.submenu li {
            display: flex !important;
            flex: 0 0 auto !important;
            align-items: stretch !important;
            min-width: max-content !important;
            height: 100% !important;
            scroll-snap-align: start;
        }

        body.lion2-skin .top_wrap .userm_wrap ul.submenu :is(a, button) {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            width: auto !important;
            min-width: max-content !important;
            height: 100% !important;
            padding: 0 clamp(6px, .5vw, 12px) !important;
            overflow: visible !important;
            color: #101213 !important;
            -webkit-text-fill-color: #101213 !important;
            font-family: var(--signal-font-body) !important;
            font-size: clamp(12px, .68vw, 13px) !important;
            font-weight: 900 !important;
            line-height: 1.15 !important;
            text-shadow: none !important;
            text-overflow: clip !important;
            white-space: nowrap !important;
        }

        body.lion2-skin .top_wrap .userm_wrap ul.submenu :is(a, button)::after {
            display: none !important;
            content: none !important;
        }

        /*
         * Authentication actions belong to the canonical right account panel.
         * Keep the top row dedicated to logo, notice and utility navigation so
         * login state cannot add a fourth track or shift the primary nav.
         */
        body.lion2-skin .top_wrap:is(.lion-header--guest, .lion-header--member) .loginmenu {
            display: none !important;
        }

        body.lion2-skin .top_wrap .nav_wrap {
            display: grid !important;
            grid-template-columns:
                minmax(0, var(--signal-shell-left-rail))
                minmax(min(100%, var(--signal-shell-center-min)), 1fr)
                minmax(0, var(--signal-shell-right-rail)) !important;
        }

        body.lion2-skin .top_wrap .nav_wrap .navdiv {
            grid-column: 2 !important;
            box-sizing: border-box !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
            margin: 0 !important;
        }

        /*
         * The compatibility bundle leaves a 56px line-height on these links.
         * At the compact desktop edge the flex item is only 40px high, so the
         * inherited line box is both reported and painted as clipped.  Keep
         * every game target at least 32px wide and center its own line box.
         */
        body.lion2-skin .top_wrap .nav_wrap .navdiv > :is(a, button) {
            flex: 1 1 auto !important;
            min-width: 32px !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        body.lion2-skin .top_wrap .nav_wrap .navdiv > :is(a, button)::before {
            position: static !important;
            inset: auto !important;
            border: 0 !important;
            background: var(--signal-yellow) !important;
            box-shadow: none !important;
        }

        body.lion2-skin .top_wrap .nav_wrap .navdiv > :is(a, button)::after {
            display: none !important;
            content: none !important;
        }

        body.lion2-skin .top_wrap .nav_wrap .navdiv > :is(
            a,
            button
        ):is(:hover, :focus-visible, .is-current, [aria-current='page'])::before {
            background: #080909 !important;
        }

        body.lion2-skin .left_content,
        body.lion2-skin .right_content {
            display: block !important;
            box-sizing: border-box !important;
            min-width: 0 !important;
            max-width: none !important;
            overflow: hidden !important;
            transition: none !important;
        }

        body.lion2-skin .left_content {
            right: auto !important;
            left: 0 !important;
            width: var(--signal-shell-left-rail) !important;
            padding-right:
                min(clamp(12px, .8929vw, 22px), calc(var(--signal-shell-left-rail) / 4)) !important;
            padding-left:
                min(clamp(12px, .8929vw, 22px), calc(var(--signal-shell-left-rail) / 4)) !important;
            border-right-width: min(3px, var(--signal-shell-left-rail)) !important;
        }

        body.lion2-skin .right_content {
            right: 0 !important;
            left: auto !important;
            width: var(--signal-shell-right-rail) !important;
            padding-right:
                min(clamp(11px, .7738vw, 20px), calc(var(--signal-shell-right-rail) / 4)) !important;
            padding-left:
                min(clamp(11px, .7738vw, 20px), calc(var(--signal-shell-right-rail) / 4)) !important;
            border-left-width: min(3px, var(--signal-shell-right-rail)) !important;
        }

        body.lion2-skin :is(.left_content, .right_content) > .scrollFrame {
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            height: calc(100dvh - var(--lion-main-art-height) - 22px) !important;
            max-height: calc(100dvh - var(--lion-main-art-height) - 22px) !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: contain;
            scrollbar-color: #6c7070 #171a1b;
            scrollbar-width: thin;
        }
    }

    /*
     * The rail tracks grow continuously so the 1000px center never jumps.
     * Their descendants, however, must not render until the track is usable:
     * otherwise a zero/partial rail exposes dozens of clipped links at 981px
     * and around the 1250px shell edge.  The right rail needs its full 238px;
     * the left directory becomes usable at 128px and switches to two columns
     * until the normal three-column directory has enough room.
     */
    @media screen and (min-width: 981px) and (max-width: 1237px) {
        body.lion2-skin .right_content {
            pointer-events: none !important;
        }

        body.lion2-skin .right_content > .scrollFrame {
            display: none !important;
        }
    }

    @media screen and (min-width: 981px) and (max-width: 1365px) {
        body.lion2-skin .left_content {
            pointer-events: none !important;
        }

        body.lion2-skin .left_content > .scrollFrame {
            display: none !important;
        }
    }

    @media screen and (min-width: 1366px) and (max-width: 1413px) {
        body.lion2-skin .left_content .leftMenu .menu {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media screen and (min-width: 981px) and (max-width: 1477px) {
        body.lion2-skin .left_content .lion-left-promo small {
            display: none !important;
        }
    }

    @keyframes lion2-header-notice-flow {
        from {
            translate: 0 0;
        }

        to {
            translate: -100% 0;
        }
    }

    @media screen and (min-width: 981px) and (prefers-reduced-motion: reduce) {
        body.lion2-skin .top_wrap .scrollNotice-copy
            > .lion-header-notice-viewport
            > .lion-header-notice-text {
            position: static !important;
            display: block !important;
            box-sizing: border-box !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            flex: 1 1 auto !important;
            padding-inline-start: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            animation: none !important;
            translate: none !important;
            will-change: auto !important;
        }
    }

    body.lion2-skin .right_content .rightMenu {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.lion2-skin .right_content .rightMenu > :is(.login_box, .user_body:first-child) {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 8px !important;
        padding: 11px !important;
        border: 1px solid #626667 !important;
        background:
            var(--signal-part-concrete) center / 256px 256px repeat,
            #0c0f10 !important;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%) !important;
    }

    body.lion2-skin .right_content .rightMenu > .user_body:first-child .bgy {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 5px 8px !important;
        overflow: hidden !important;
        border-bottom: 3px solid var(--signal-yellow) !important;
        background:
            var(--signal-part-title-signal) center / 100% 100% no-repeat,
            #222627 !important;
        color: var(--signal-copy) !important;
    }

    body.lion2-skin .right_content .rightMenu > .user_body:first-child .bgy > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.lion2-skin .right_content :is(.lion-user-nickname, .lion-level-name) {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    body.lion2-skin .right_content .rightMenu > .user_body:first-child .bgy > div:last-child {
        display: flex !important;
        flex: 0 0 var(--signal-control-icon) !important;
        width: var(--signal-control-icon) !important;
        min-width: var(--signal-control-icon) !important;
        max-width: var(--signal-control-icon) !important;
        height: var(--signal-control-icon) !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.lion2-skin #sidebar-right#sidebar-right
        .rightMenu > .user_body:first-child .bgy .signal-logout {
        position: static !important;
        inset: auto !important;
        display: inline-flex !important;
        flex: 0 0 var(--signal-control-icon) !important;
        width: var(--signal-control-icon) !important;
        min-width: var(--signal-control-icon) !important;
        max-width: var(--signal-control-icon) !important;
        height: var(--signal-control-icon) !important;
        min-height: var(--signal-control-icon) !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid #555b5d !important;
        border-radius: 0 !important;
        background:
            var(--signal-part-key-dark) center / 100% 100% no-repeat,
            #0d1011 !important;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%) !important;
        color: var(--signal-yellow-hot, #ffd316) !important;
        font-size: 17px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transform: none !important;
    }

    body.lion2-skin #sidebar-right#sidebar-right
        .rightMenu > .user_body:first-child .bgy .signal-logout > i {
        display: inline-flex !important;
        width: 1em !important;
        height: 1em !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        color: inherit !important;
        font-size: inherit !important;
        font-style: normal !important;
        line-height: 1 !important;
    }

    body.lion2-skin #sidebar-right#sidebar-right
        .rightMenu > .user_body:first-child .bgy .signal-logout:is(:hover, :focus-visible) {
        background:
            var(--signal-part-key-yellow) center / 100% 100% no-repeat,
            var(--signal-yellow-hot, #ffd316) !important;
        color: #080a0b !important;
        filter: none !important;
        transform: none !important;
    }

    body.lion2-skin .right_content .lion-account-balance-stack {
        display: grid !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        width: 100% !important;
        height: auto !important;
        margin: 7px 0 0 !important;
        overflow: visible !important;
    }

    body.lion2-skin .right_content .lion-account-balance {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 4px 8px !important;
        overflow: hidden !important;
        border: 1px solid #454a4c !important;
        background:
            var(--signal-part-input-well) center / 100% 100% no-repeat,
            #0b0e0f !important;
        color: var(--signal-copy-soft) !important;
        font-size: clamp(11px, .68vw, 14px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    body.lion2-skin .right_content .lion-account-balance > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.lion2-skin .right_content .lion-account-balance > div:last-child {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        font-size: clamp(11px, .64vw, 13px) !important;
    }

    body.lion2-skin .right_content .lion-account-balance .slip-panel-toggle {
        flex: 0 0 auto !important;
        min-width: 32px !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 7px !important;
        font-size: 11px !important;
        line-height: 30px !important;
    }

    body.lion2-skin .right_content .rmenu {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 7px 0 0 !important;
        padding: 0 !important;
    }

    body.lion2-skin .right_content .rmenu a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 46px !important;
        height: auto !important;
        aspect-ratio: 1 !important;
        padding: 4px 0 !important;
        overflow: hidden !important;
        border: 1px solid #4c5152 !important;
        border-radius: 0 !important;
        background:
            var(--signal-part-key-dark) center / 100% 100% no-repeat,
            #1d2122 !important;
    }

    body.lion2-skin .right_content .rmenu .signal-quick-label {
        color: #e3e5e1 !important;
        -webkit-text-fill-color: #e3e5e1 !important;
        font-family: var(--signal-font-body) !important;
        font-size: clamp(10px, .58vw, 11px) !important;
        font-weight: 700 !important;
        letter-spacing: -.1em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.lion2-skin .right_content .rmenu a > img {
        display: block !important;
        width: 100% !important;
        max-width: 34px !important;
        height: 100% !important;
        max-height: 34px !important;
        object-fit: contain !important;
        filter: none !important;
    }

    body.lion2-skin .right_content .rmenu .lion-slip-memo-count {
        inset: auto 3px 3px auto !important;
        min-width: 14px !important;
        padding: 1px 3px !important;
        color: var(--signal-yellow-hot) !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    body.lion2-skin .right_content .lion-main-betslip {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        overflow: hidden !important;
        border: 1px solid #565b5d !important;
        background:
            var(--signal-part-concrete) center / 256px 256px repeat,
            #0d1011 !important;
    }

    body.lion2-skin .right_content .lion-main-betslip .bgy.title {
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 44px !important;
        height: auto !important;
        padding: 6px 10px !important;
        border-bottom: 4px solid var(--signal-yellow) !important;
        background:
            var(--signal-part-title-signal) center / 100% 100% no-repeat,
            #222627 !important;
        color: var(--signal-copy) !important;
        font-size: 14px !important;
    }

    body.lion2-skin .right_content .lion-slip-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        box-sizing: border-box !important;
        gap: 2px !important;
        width: 100% !important;
        padding: 6px !important;
        background:
            var(--signal-part-concrete) center / 256px 256px repeat,
            #080a0b !important;
    }

    body.lion2-skin .right_content .lion-slip-tabs button {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 4px !important;
        font-size: 12px !important;
        background:
            var(--signal-part-key-dark) center / 100% 100% no-repeat,
            #171a1b !important;
    }

    body.lion2-skin .right_content .lion-slip-empty {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        gap: 6px !important;
        min-height: 150px !important;
        margin: 0 !important;
        padding: 16px 10px !important;
        text-align: center !important;
    }

    body.lion2-skin .right_content .betinput,
    body.lion2-skin .right_content .betinput2 {
        box-sizing: border-box !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        height: auto !important;
        padding: 5px 8px !important;
    }

    body.lion2-skin .right_content .betinput > span:first-child,
    body.lion2-skin .right_content .betinput2 > span:first-child {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    body.lion2-skin .right_content .betinput input {
        flex: 1 1 auto !important;
        box-sizing: border-box !important;
        width: auto !important;
        min-width: 0 !important;
        height: 32px !important;
        margin: 0 !important;
    }

    body.lion2-skin .right_content .lion-main-betslip .betmoney {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        box-sizing: border-box !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 6px !important;
    }

    body.lion2-skin .right_content .lion-main-betslip .betmoney button {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 3px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        background:
            var(--signal-part-key-dark) center / 100% 100% no-repeat,
            #171a1b !important;
    }

    body.lion2-skin .right_content .lion-main-betslip .betbtn_wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 9px !important;
    }

    body.lion2-skin .right_content .lion-main-betslip .betbtn {
        width: 100% !important;
        min-height: 50px !important;
        height: 50px !important;
        border-radius: 0 !important;
        font-size: 16px !important;
    }

    body.lion2-skin .right_content .r_banner {
        display: grid !important;
        box-sizing: border-box !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.lion2-skin .right_content .r_banner > :is(a, .banner-no-link, .banner-copy) {
        position: relative !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 2px solid #5c6061 !important;
        border-bottom: 4px solid var(--signal-yellow) !important;
        background:
            var(--signal-part-concrete) center / 256px 256px repeat,
            #111415 !important;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%) !important;
        clip-path: none !important;
    }

    body.lion2-skin .right_content .r_banner > :is(a, .banner-no-link, .banner-copy)::before,
    body.lion2-skin .right_content .r_banner > :is(a, .banner-no-link, .banner-copy)::after {
        display: none !important;
        content: none !important;
    }

    body.lion2-skin .right_content .r_banner > :is(a, .banner-no-link, .banner-copy) > img {
        position: relative !important;
        inset: auto !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
    }

    body.lion2-skin .right_content .r_banner .banner-overlay {
        z-index: 2 !important;
        max-width: calc(100% - 16px) !important;
    }

    /* Wave 1 image-parts chassis. The administrator still owns all banner
       artwork and live copy; this transparent 9-slice only supplies hardware. */
    body.lion2-skin .right_content .rightMenu > :is(.login_box, .lion-account-console),
    body.lion2-skin .right_content :is(.lion-main-betslip, .lion-betslip-panel),
    body.lion2-skin .right_content .r_banner > :is(a, .banner-no-link, .banner-copy) {
        border: 8px solid transparent !important;
        border-image: var(--signal-part-frame-heavy) var(--signal-slice-frame-heavy) / 8px / 0 stretch !important;
    }
}

/* Exact live copy over the text-free campaign artwork. Purpose-specific key
   visuals stay on the left; title, supporting line and CTA occupy the plate. */
body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label {
    --signal-banner-accent: var(--signal-yellow-hot, #ffd316);
    position: absolute;
    z-index: 3;
    inset: 7% clamp(6px, .55vw, 12px) 7% 40%;
    display: grid;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 0;
    align-content: center;
    align-items: start;
    grid-template-rows: auto auto auto;
    margin: 0;
    padding: clamp(4px, .35vw, 8px) clamp(6px, .55vw, 11px);
    overflow: hidden;
    border-left: 3px solid var(--signal-banner-accent);
    background: linear-gradient(90deg, rgb(5 8 9 / 94%), rgb(8 11 12 / 58%) 82%, transparent);
    clip: auto;
    color: #f4f5f0;
    font-family: var(--signal-font-display);
    text-align: left;
    text-shadow: 0 2px 4px rgb(0 0 0 / 90%);
    pointer-events: none;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label--customer {
    --signal-banner-accent: #27c5f5;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label--channel {
    --signal-banner-accent: #b657ff;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label--official {
    --signal-banner-accent: #ff4fc8;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label > strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #f7f7f2;
    -webkit-text-fill-color: #f7f7f2;
    font-size: clamp(11px, .72vw, 14px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-label > small {
    display: block;
    max-width: 100%;
    margin-top: clamp(2px, .22vw, 4px);
    overflow: hidden;
    color: #c9cfce;
    -webkit-text-fill-color: #c9cfce;
    font-family: var(--signal-font-body);
    font-size: clamp(9px, .54vw, 10px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-cta {
    display: inline-flex;
    width: fit-content;
    min-width: clamp(52px, 4.5vw, 78px);
    height: clamp(17px, 1.2vw, 22px);
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-top: clamp(3px, .3vw, 6px);
    padding: 0 clamp(5px, .45vw, 9px);
    border: 1px solid var(--signal-banner-accent);
    background: rgb(6 9 10 / 72%);
    color: var(--signal-banner-accent);
    -webkit-text-fill-color: var(--signal-banner-accent);
    font-family: var(--signal-font-body);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1;
    text-shadow: none;
}

body.lion2-skin.lion-skin .right_content .r_banner .signal-banner-cta > i {
    font-style: normal;
}

body.lion2-skin.lion-skin .right_content .r_banner > :is(a, .banner-copy):is(:hover, :focus-visible) .signal-banner-cta {
    background: var(--signal-banner-accent);
    color: #080a0b;
    -webkit-text-fill-color: #080a0b;
}