@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*** After Login ***/
/*** Navbar ***/
div#flashOfferBar {
    display: flex;
    max-width: 1170px;
    margin: auto;
}

.header-left {
    gap: 2.5rem;
}

/* On desktop (where the inline .newMenuList is visible), keep the logo
   group at its natural width so the menu sits flush against it, and let
   .balance-info's margin-left: auto (from lobby_new.css) push the
   price/balance and avatar to the right. Below 1111px the inline menu
   is hidden and the tablet/mobile rules later in this file govern. */
@media screen and (min-width: 1111px) {
    .main-header[data-nav-layout="index-new"] .header-left {
        flex: 0 0 auto;
    }
}

header.main-header {
    background: #FDF9FB;
    box-shadow: 0 4px 14px 0 rgba(236, 25, 102, 0.15);
    /* Tighten the header band: lobby_new.css sets `.main-header
       { padding: 18px 20px }` and `.header-content { margin-bottom:
       8px }`. Trim the vertical padding and drop the content
       margin so the logged-in header reads as a slimmer bar. */
    padding-top: 10px;
    padding-bottom: 10px;
}

header.main-header .header-content {
    margin-bottom: 0;
}

/* darkNavLogo.png already contains the FUNTOKEN GAMES wordmark */
header.main-header .logo-text {
    display: none;
}

header.main-header .balance-info,
header.main-header .balance-info .token-rate,
header.main-header .balance-info #priceSpan,
header.main-header .balance-info #balanceSpan {
    color: #1a1a1a;
}

/* Hide the small donut/coin icons that previously sat inside the
   balance pill — they read as decorative noise next to the numbers,
   and the colour-coded text already signals price vs balance. */
header.main-header .balance-info .balance-icon {
    display: none;
}

header.main-header .balance-info .token-rate,
header.main-header .balance-info .balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

header.main-header .balance-info {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

header.main-header .balance-info #priceSpan {
    color: #00BC66;
}

header.main-header .balance-info #balanceSpan {
    /* Match the logged-out / promo pill treatment: white text on the
       brand-pink fill so the balance value pops at a glance. Previous
       transparent-bg + pink-text version got lost against the light
       header background. The element is a `<strong>` in the header
       partial, so `font-weight: 400` is needed to override the UA's
       bold default. */
    color: #fff;
    background: #FF0080;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 400;
}

/* Brand logo: match the logged-out page header's
   `<img src="darkNavLogo.png" width="150">` so the FUNTOKEN GAMES
   wordmark renders at the same scale on both states (was previously
   `height: 50px; width: auto` which rendered noticeably wider). */
header.main-header img.logo-icon {
    width: 132px;
    height: auto;
}

/* At desktop the inline .newMenuList carries the primary nav,
   so hide the duplicate links rendered inside the avatar dropdown
   (.newTopBars-links). Only Profile/Stats/Logout siblings remain. */
@media screen and (min-width: 1111px) {
    .newProMenu-container > .newTopBars-links {
        display: none;
    }
}

span.newPriceFun {
    color: #00BC66;
}

.newPriceFun-container {
    color: #4F4F4F;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 9px;
    background: #F2F4FD;
    padding: 9px 27px;
}

.newConversionNav {
    display: flex;
    gap: 10px;
}

.newBalFun-container {
    color: #FF0080;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 9px;
    background: #F2F4FD;
    padding: 9px 27px;
}


/* Plain-text nav links — the old pill / oval-button look was replaced
   with a flat menu where the current page (Games) gets pink text + a
   short pink underline, and the rest read as quiet dark text that
   tints pink on hover. */
.newMenuList a[id$="Link"] {
    background: transparent;
    box-shadow: none;
    color: #1a1a1a !important;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}

.newMenuList a[id$="Link"]:hover {
    color: #EC0078 !important;
}

.newMenuList a[id$="Link"]:focus-visible {
    color: #EC0078 !important;
    /* Keep keyboard focus distinct even on the always-active Games link. */
    background: rgba(255, 0, 128, 0.08);
    outline: 2px solid #9F0050;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Active "Games" indicator — pink text + a short pink underline.
   `gamesNavLink` is the only nav target that's a real page (the lobby);
   `depositNavLink` / `stakingNavLink` / `referNavLink` open modals, so
   "Games" is effectively always the current section when the user is
   logged in. */
.newMenuList #gamesNavLink {
    color: #EC0078 !important;
}

.newMenuList #gamesNavLink::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: -4px;
    height: 2px;
    background: #EC0078;
    border-radius: 999px;
}

.newMenuList {
    display: flex;
    gap: 28px;
    align-items: center;
    /* Push the menu off the logo — `.header-left { gap: 16px }` alone
       left the first nav item sitting flush against the wordmark. */
    margin-left: 36px;
}

img.logo-icon {
    width: 100%;
    height: 50px;
}


@media screen and (min-width: 1109px) {

    button#navToggleBtn,
    .newTopBars-links {
        display: none;
    }
}

/* The new 28×28 avatar SVG carries its own pink wash + ring inside
   its own frame, so the wrapper is just a transparent click target
   now — the previous `padding: 4px; background: #FFE9F2` bubble
   would double up the wash and stack a second pink halo around the
   real one. Hover state blooms a soft pink halo via `box-shadow`
   (no layout impact, so the header doesn't reflow on hover);
   `.newProMenu.active` (set by header-cro-v2.js when the dropdown
   opens) strengthens the halo so the press is visibly registered. */
.newProMenu-icon,
.newProMenu-icon__mobile {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.18s ease, transform 0.12s ease;
}

.newProMenu-icon:focus-visible,
.newProMenu-icon__mobile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.35);
}

.newProMenu-icon svg,
.newProMenu-icon__mobile svg {
    width: 28px;
    height: 28px;
    display: block;
    overflow: visible;
}

.newProMenu-icon:hover,
.newProMenu-icon__mobile:hover {
    box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.15);
}

.newProMenu.active .newProMenu-icon,
.newProMenu.active .newProMenu-icon__mobile {
    box-shadow: 0 0 0 4px rgba(255, 0, 128, 0.22);
}

.newProMenu-icon:active,
.newProMenu-icon__mobile:active {
    transform: scale(0.96);
}

.newProMenu-container {
    border-radius: 10px;
    background: #FF0080;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    /* Tightened from 15px → 4px now that each link row carries its own
       6px vertical padding for the hover background. Final row
       separation reads as ~16px between text baselines. */
    gap: 4px;
    position: absolute;
    bottom: 0;
    /* Anchor to the right edge of the 28px-wide .newProMenu avatar
       wrapper. With `left: 0` the 120px-wide dropdown was overhanging
       the viewport right edge by ~10px (avatar sits in the top-right
       corner), which forced a document-level horizontal scrollbar on
       the lobby even though the dropdown was visibility:hidden. */
    right: 0;
    min-width: 120px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.newProMenu.active .newProMenu-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(110%);
    pointer-events: auto;
}


.newProMenu {
    position: relative;
    margin-right: 50px;
    /* Flex the wrapper so its child (.newProMenu-icon, 28×28) sits on
       the same vertical midline as the balance pill sibling — without
       this the icon hangs at the baseline of `.header-content` and
       reads as ~1–2px above the balance pill. */
    display: inline-flex;
    align-items: center;
}

.newProMenu-container a[id$="Link"] {
    color: #fff;
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    /* Row padding gives the hover background something to fill;
       negative horizontal margin pushes the hover row out to the
       container's inner edges so it reads as a real menu row, not
       a halo behind the text. Container's `padding: 12px 20px` is
       what we cancel out with -20px here. */
    padding: 6px 20px;
    margin: 0 -20px;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    display: block;
    transition: background 0.15s ease, padding-left 0.15s ease;
}

.newProMenu-container a[id$="Link"]:hover {
    background: rgba(255, 255, 255, 0.16);
    /* Tiny rightward shift on hover — gives the row a subtle "lean
       in" feel without bouncing the layout. */
    padding-left: 24px;
}

.newProMenu-container a[id$="Link"]:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    outline: 2px solid #fff;
    outline-offset: 0;
    padding-left: 24px;
}

@media screen and (max-width: 1499px) {

    .newBalFun-container,
    .newPriceFun-container {
        padding: 9px 15px;
        font-size: clamp(13px, 3.2vw, 16px);
    }

    .newMenuList a[id$="Link"] {
        padding: 9px 15px;
        font-size: clamp(13px, 3.2vw, 14px);
    }
}

@media screen and (max-width: 1250px) {
    /* Keep the mobile/tablet logo at the same 150px width as the
       desktop logged-in logo so the wordmark stays consistent across
       breakpoints (was `height: 50px; width: auto` which rendered the
       logo at ~199px wide on tablet — disproportionate against the
       rest of the shrunk header chrome). */
    img.logo-icon {
        width: 150px;
        height: auto;
    }

    .header-left {
        gap: 1rem;
    }

    .newProMenu-container {
        min-width: 100px;
    }

    .newProMenu {
        margin-right: 30px;
    }
}

button#navToggleBtn {
    display: none;
}

@media screen and (max-width: 1110px) {

    .newMenuList,
    .newProMenu-icon {
        display: none;
    }

    div#navMenu {
        background: #DA1B69;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
        padding: 30px 25px;
        width: calc(100% + 64px);
        margin-left: -32px;
    }

    .main-header[data-nav-layout="index-new"] .nav-menu-inner {
        flex-direction: column;
    }

    button#navToggleBtn {
        /* Shrink the hamburger so it sits comfortably next to the
           150px-wide mobile logo and reads at a tap-target scale
           without overpowering the small header. */
        padding: 4px 7px;
        border-radius: 7px;
        background: #FFF;
        box-shadow: 0 0 14px 0 rgba(236, 25, 102, 0.15);
        position: relative;
        border: none;
        display: block;
    }

    button#navToggleBtn span {
        border-radius: 10px;
        background: #FF0080;
        transition: transform 0.3s ease, opacity 0.2s ease;
        width: 16px;
        display: block;
        height: 2px;
        margin: 3px 0;
    }

    button#navToggleBtn.active span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    button#navToggleBtn.active span:nth-child(2) {
        opacity: 0;
    }

    button#navToggleBtn.active span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    .nav-menu-inner a[id$="Link"] {
        border: none;
        background: none;
        color: #fff !important;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #FFFFFF66;
        border-radius: 0;
        padding-bottom: 10px;
        font-size: 18px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
    }

    .nav-menu-inner a#logoutLink {
        border: none;
    }

    .main-header[data-nav-layout="index-new"] .header-content {
        flex-wrap: nowrap;
        padding-bottom: 12px;
    }

    header.main-header {
        padding-bottom: 0;
    }




    button#navToggleBtn {
        margin: 0;
    }

    button#navToggleBtn.active~.newProMenu-container {
        visibility: visible;
        opacity: 1;
    }


    .newProMenu-container {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: 0;
        right: auto;
        border-radius: 0;
        width: 100%;
        padding: 20px 30px;
        background: #DA1B69;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    }

    .newProMenu {
        position: unset;
        margin: 0;
    }

    /* Hide the three plain Profile/Stats/Logout siblings on mobile; the
       .newTopBars-links pill rows above already carry them. This selector
       matches the global `.newProMenu-container a[id$="Link"]` rule at
       (0,2,1), so the mobile override works because it appears later in
       the cascade. */
    .newProMenu-container > a[id$="Link"] {
        display: none;
    }

    .newTopBars-links>a[id$="Link"] {
        display: flex;
        justify-content: space-between;
        border-bottom: solid 1px #FFFFFF66;
        border-radius: 0;
        padding-bottom: 10px;
        font-size: 18px;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        padding: 9px;
        color: #fff !important;
    }

    a#logoutLink {
        border-bottom: none;
    }

}

@media screen and (max-width: 720px) {
    .newTopBars {
        margin: 20px auto;
    }

    /* Header on mobile: 2-row layout. Row 1 = logo + hamburger; row 2 =
       1 $FUN price + user balance. balance-info wraps to a full-width
       row 2 via flex: 0 0 100%, while the hamburger stays on row 1
       right via order. darkNavLogo.png is cropped to the cube via
       object-fit. */
    header.main-header {
        position: sticky;
    }

    /* All selectors below carry the [data-nav-layout="index-new"]
       attribute so they out-specify the lobby_new.css rule
       `.main-header[data-nav-layout="index-new"] .balance-info { order: 3 }`
       which otherwise wins the cascade and keeps balance-info on row 1
       instead of wrapping it to row 2. */
    header.main-header[data-nav-layout="index-new"] .header-content {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 10px;
        padding-bottom: 0;
    }

    .main-header[data-nav-layout="index-new"] .header-left {
        order: 0;
        gap: 0;
        flex: 0 0 auto;
    }

    .main-header[data-nav-layout="index-new"] .logo-icon {
        /* Match the desktop logged-in logo width on mobile too so the
           wordmark is visually consistent across breakpoints. */
        width: 150px;
        height: auto;
    }

    header.main-header[data-nav-layout="index-new"] .newProMenu {
        order: 1;
        margin-left: auto;
    }

    header.main-header[data-nav-layout="index-new"] .balance-info {
        order: 2;
        flex: 0 0 100%;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: nowrap;
        font-size: 12px;
        white-space: nowrap;
    }

    header.main-header[data-nav-layout="index-new"] .balance-info .token-rate,
    header.main-header[data-nav-layout="index-new"] .balance-info .balance {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* Open menu panel sits flush against the bottom of the header bar —
       no empty stripe of lobby background showing between the two.
       Clear the desktop/tablet bottom + translate offsets here. */
    button#navToggleBtn.active~.newProMenu-container {
        top: 100%;
        bottom: auto;
        transform: none;
    }

    header.main-header .balance-info .balance-icon {
        width: 16px;
        height: 16px;
    }

    .newMenuList a[id$="Link"] {
        padding: 9px;
    }

    .newBalFun-container,
    .newPriceFun-container {
        padding: 5px;
    }

    /* Keep the WoF tile's 2 CTAs (Spin Now + Play Jackpot) side-by-side on
       narrow screens by shrinking padding + font. */
    .newTopBars-cta-row .cta-active {
        padding: 7px 14px;
        font-size: 13px;
        max-width: none;
        white-space: nowrap;
    }
}


/*** Top Content ***/
.newPlayGames-heading {
    color: #101325;
    text-align: center;
    font-family: Poppins;
    font-size: clamp(32px, 6vw, 58px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 30px;
}

.newTopBars {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-around;
    max-width: 1170px;
    margin: 40px auto;
}

.newTopBars-items {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    border-radius: 12px;
    /* Subtle gradient + inner white border give the tile depth without
       altering the brand colour (flat #DA1B69 previously). */
    background: linear-gradient(135deg, #EC0078 0%, #C70062 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    padding: 18px 30px;
    flex: 0 0 calc((100% - 60px) / 3);
}

/* On dedicated game pages (and the WoF play page) keep the top-bars area
   minimal so the actual game moves above the fold: hide everything in the
   shared lobby-new-top-bars container EXCEPT the Daily Rewards hub, which
   renders as a thin, collapsed bar. This keeps streaks/quests reachable from
   every game page while the bulky magenta promo tiles — and the
   email/unsub/promo/flash notification bars that share this container — stay
   suppressed here (they still show on / and /profile/, the primary engagement
   surfaces). When the streaks/quests feature is disabled, #dailyRewardsHub is
   absent and the container simply collapses to its 4px top padding. */
body.game-page-body .container.lobby-new-top-bars > *:not(.dailyRewardsHub),
body.wof-redesign .container.lobby-new-top-bars > *:not(.dailyRewardsHub) {
    display: none;
}

/* When the link-prompt tile is hidden, JS toggles .newTopBars--two-up so
   the remaining two tiles split the row even in browsers without :has(). */
.newTopBars--two-up .newTopBars-items:not([hidden]) {
    flex: 0 0 calc((100% - 30px) / 2);
}

.newTopBars-desc {
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.newTopBars-copy {
    text-align: center;
}

.newTopBars-copy span {
    color: #FFE923;
    text-align: center;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.newTopBars-items:first-child .newTopBars-copy span {
    color: #20ff8a;
}


/*** Games ***/
.newPlayGames-items img {
    max-width: 150px;
    z-index: 1;
}

.newPlayGames-items {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 97%;
    margin: auto;
}

.newPlayGames-items a {
    flex: 0 0 calc((100% - 24px) / 3);
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(18, 65, 101, 0.60);
    backdrop-filter: blur(3px);
    border: 20px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.1s ease-in;
}

.newPlayGames-featured a {
    position: relative;
    height: 180px;
    display: block;
    background-image: url('/static/assets/redesign-cro-v2/Game-1-1-1.png');
    background-position-x: right;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    border: 1px solid #FF0080;
    box-shadow: 0 0 24px 0 #D91B69;
    margin-bottom: 30px;
}

.newPlayGames-featured span:not(.games-active-players, .live-active-badge) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 65px;
    border-radius: 100px;
    background: linear-gradient(180deg, #F9448C 0%, #D70570 100%);
    box-shadow: 0 0 24px 0 rgba(217, 27, 105, 0.40);
    padding: 16px 60px;
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.newPlayGames-featured img {
    margin: auto;
    width: calc(100% + 100px);
    margin-left: -50px;
}

.newPlayGames-items a::before {
    content: '';
    position: absolute;
    inset: 0;
    filter: blur(3px);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Match background to the game by data-game attribute, not by
   nth-child position. The grid is reordered for visual layout, and
   future shuffle code will also reorder DOM nodes — positional
   selectors stuck the wrong background behind the wrong tile (Roll's
   logo on the coinflip-bg, Crash's logo on the plinko-bg, etc.).
   Position-8 (Plinko) was completely blank because there was no
   nth-child(8) rule defined. */
.newPlayGames-items a[data-game="coin"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/coinflip-bg.png');
}

.newPlayGames-items a[data-game="highlow"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/highlow-bg.png');
}

.newPlayGames-items a[data-game="rps"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/rps-bg.png');
}

.newPlayGames-items a[data-game="roulette"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/roulette-bg.png');
}

.newPlayGames-items a[data-game="crash"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/crash-bg.png');
}

.newPlayGames-items a[data-game="scratchcard"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/scratchcard-bg.png');
}

.newPlayGames-items a[data-game="plinko"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/plinko-bg.png');
}

.newPlayGames-items a[data-game="basketball"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/basketball-bg.png');
}

.newPlayGames-items a[data-game="penalty-shot"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60), rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/penalty-shot-bg.png');
}

.newPlayGames-items a[data-game="egg-crack"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/egg-crack-bg.png');
}

.newPlayGames-items a[data-game="higher-lower"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/higher-lower-bg.png');
}

.newPlayGames-items a[data-game="lucky-dumpling"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/lucky-dumpling-bg.png');
}

.newPlayGames-items a[data-game="cricket-sixer"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/cricket-sixer-bg.png');
}

.newPlayGames-items a[data-game="boxing-ring"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/boxing-ring-bg.png');
}

.newPlayGames-items a[data-game="ghost-blaster"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/ghost-blaster-bg.png');
}

.newPlayGames-items a[data-game="zombie-barricade"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/zombie-barricade-bg.png');
}

.newPlayGames-items a[data-game="witch-flight"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/witch-flight-bg.png');
}

/* Roll has no dedicated -bg.png in the asset bundle. Use the logo
   itself as the blurred background — same visual treatment, no new
   asset needed. */
.newPlayGames-items a[data-game="roll"]::before {
    background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/expired-cro-v2/roll-a-dice.png');
}

.newPlayGames-hover {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    border-radius: 100px;
    background: linear-gradient(180deg, #F9448C 0%, #D70570 100%);
    box-shadow: 0 0 24px 0 rgba(217, 27, 105, 0.40);
    padding: 16px 30px;
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
}

.newPlayGames-items a:hover {
    box-shadow: 0 0 24px 0 #D91B69;
}

.newPlayGames-items a:hover .newPlayGames-hover {
    visibility: visible;
    opacity: 1;
    margin-left: 20px;
    position: unset;
}

/* Normalize game-card frames so the six different illustration styles
   (rendered 3D dice, gilded roulette, neon plinko, etc.) sit on the
   same visual rail. Add a subtle drop shadow + 1px white inner border
   for consistent depth, and a thin bottom gradient overlay so the
   active-players badge stays legible across all images. */
.newPlayGames-items a {
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.newPlayGames-items a::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to top, rgba(15, 12, 41, 0.45) 0%, rgba(15, 12, 41, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.newPlayGames-items a {
    position: relative;
}

.newPlayGames-items a > * {
    position: relative;
    z-index: 1;
}

.newPlayGames-items a:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(236, 25, 102, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Quiz "play while waiting" grid — reuses the same game art as the
   homepage `.newPlayGames-items` cards so users see one game library
   across the site, not a parallel emoji-on-Bootstrap-card variant. */
.quiz-game-tile {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(18, 65, 101, 0.10);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
}

.quiz-game-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.quiz-game-tile:hover,
.quiz-game-tile:focus {
    transform: translateY(-2px);
    box-shadow:
        0 8px 22px rgba(236, 25, 102, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

section.game-cards>.game-card,
section.game-cards>.game-card-row {
    display: none;
}

section.game-card {
    margin-top: 3rem;
}

.newTopBars-cta__tg {
    margin-top: 7px;
}

/* #tgLink and #addEmailBtn share class="top-banner__cta" and should
   render identically (blue gradient pill from lobby_new.css). The
   previous white-bg / pink-text override on #tgLink only diverged
   them visually — keep the hover rule for a.cta-active (used by the
   WoF tile's Spin Now / Play Jackpot anchors) without re-targeting
   #tgLink. */
a.cta-active:hover {
    border-radius: 100px;
    background: linear-gradient(180deg, #2C85FF 0%, #1175FF 100%);
    color: #fff;
}

.cta-active {
    display: none;
}

.newTopBars-copy.expired .cta-active {
    display: block;
}

.newTopBars-copy.expired>span,
.newTopBars-copy.expired>.newTopBars-cd {
    display: none !important;
}

/* WoF reward tile (#freeSpinBar): show the "resets in" countdown and the
   action CTAs together instead of swapping one for the other. Jackpot
   tickets stay playable after the daily free spins run out, and the reset
   clock stays useful while free spins remain — so the timer must not be
   hidden when the tile is .expired. Keep the span inline and the countdown
   flex (their non-.expired display values) to preserve the layout. */
#freeSpinBar .newTopBars-copy.expired>span {
    display: inline !important;
}

#freeSpinBar .newTopBars-copy.expired>.newTopBars-cd {
    display: flex !important;
}

/* Only the applicable CTAs show: header-cro-v2.js toggles the per-button
   `hidden` flags (#wofTileCta / #wofTileCtaJackpot), so a hidden CTA must
   stay hidden even though its .expired parent reveals the CTA row. */
#freeSpinBar .newTopBars-copy.expired .cta-active[hidden] {
    display: none !important;
}

/* Two-CTA row (WoF tile shows Spin Now + Play Jackpot side by side). */
.newTopBars-cta-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.newTopBars-cta-row .cta-active {
    margin: 0;
}

a.cta-active {
    text-decoration: none;
    padding: 9px 27px;
    max-width: 155px;
    margin: 10px auto;
    border-radius: 49px;
    background: #FFF;
    color: #FF0080;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
}


/*** Countdown ***/
#quiz-cd,
#wof-cd {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    gap: 2px;
}

#quiz-cd .quiz-cd__box,
#wof-cd .quiz-cd__box {
    min-width: 22px;
    height: 30px;
    border-radius: 6px;
    background: #FFE9F2;
    border: 1px solid rgba(236, 22, 140, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EC168C;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.quiz-cd__box {
    transition: transform 0.2s ease;
}

.quiz-cd__box:active {
    transform: scale(1.1);
}

#quiz-cd .quiz-cd__colon,
#wof-cd .quiz-cd__colon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 8px;
    /* Muted off-white so the colon separator sits quieter between the
       two MM:SS digit pills (was the brand pink #EC168C, which fought
       with the surrounding tile gradient). */
    color: #ededed;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

#quiz-cd .quiz-cd__colon::before,
#wof-cd .quiz-cd__colon::before {
    content: ":";
}


/*** Jackpot Minigames ***/
/* `section.giveaway-section { display: none }` previously hid the
   wrapper that holds the rotating-banner slot rendered by
   `_partials/rotating_banner_slot.html` on `index.html` and
   `landing-page-cro-v2.html`. That made the 300×250 promo banner
   invisible across both the logged-out landing and the logged-in
   lobby even though the `/api/rotating_banners/` API was returning
   active banners. The hide is removed so the banner renders again. */

.newJackpotMiniGames-heading {
    color: #101325;
    text-align: center;
    font-family: Poppins;
    font-size: clamp(32px, 6vw, 58px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.newJackpotMiniGames-container {
    border-radius: 20px;
    background: #0B1024;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    padding: 35px;
    display: flex;
    gap: 40px;
    margin-top: 25px;
}

section.newJackpotMiniGames {
    margin-top: 3rem;
    margin-bottom: 4rem;
}

.newJackpotMiniGames-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.newJackpotMiniGames-left img {
    max-height: 145px;
}

/* Jackpot minigame tiles: each image is now a link to its game tab with a
   Play Now hover pill, reusing the Play Games grid's `.newPlayGames-hover`
   look. The anchor is the positioning context; the pill sits centered and
   fades in on hover, while the tile art dims (brightness filter) behind it so
   the CTA stands out. The filter is used instead of an overlay because the
   tile images can be wider than their grid cell at some widths — an inset
   overlay (with overflow:hidden) would crop the art, the filter never does. */
.newJackpotMiniGames-left a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.newJackpotMiniGames-left a:hover {
    transform: translateY(-2px);
}

.newJackpotMiniGames-left a img {
    transition: filter 0.2s ease;
}

.newJackpotMiniGames-left a:hover img,
.newJackpotMiniGames-left a:focus-visible img {
    filter: brightness(0.5);
}

.newJackpotMiniGames-left a .newPlayGames-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    white-space: nowrap;
    z-index: 2;
    /* Slightly smaller than the Play Games grid pill (16px 30px / 18px) so it
       fits the more compact jackpot tiles. Scoped here so the shared
       `.newPlayGames-hover` on the Play Games grid is unaffected. */
    padding: 11px 22px;
    font-size: 15px;
}

.newJackpotMiniGames-left a:hover .newPlayGames-hover,
.newJackpotMiniGames-left a:focus-visible .newPlayGames-hover {
    visibility: visible;
    opacity: 1;
}

.newJackpotMiniGames-left a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.newJackpotMiniGames-subheading {
    color: #FFF;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.newJackpotMiniGames-desc {
    margin-top: 15px;
}

.newJackpotMiniGames-tickets {
    border-radius: 4px;
    border: 1px dashed #6A7399;
    background: #20294F;
    display: flex;
    gap: 5px;
    width: fit-content;
    padding: 5px 20px;
    margin-top: 1rem;
}

.newJackpotMiniGames-tickets span {
    font-weight: 600;
}

.newJackpotMinigames-cta {
    max-width: 205px;
}

a.newJackpotMiniGames-button {
    border-radius: 100px;
    background: linear-gradient(180deg, #F9448C 0%, #D70570 100%);
    box-shadow: 0 0 24px 0 rgba(217, 27, 105, 0.40);
    color: #fff;
    text-decoration: none;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 1.5rem;
    transition: all 0.1s ease-in;
}

a.newJackpotMiniGames-button:hover,
button#startWithdrawBtn:hover {
    border-radius: 100px;
    background: linear-gradient(180deg, #FF5297 0%, #EC0078 100%);
    box-shadow: 0 0 24px 0 #D91B69;
}

.newJackpotMiniGames-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container.lobby-new-top-bars {
    /* Match `.lobby-new-main { max-width: 1200px; margin: 0 auto }`
       (lobby_body.css) so the daily-rewards hub — the two pink promo
       tiles and the daily-streak banner — lines up with the Live Feed /
       Play Games content below instead of spanning the full viewport
       and bleeding past the page wrapper. Bootstrap `.container`
       already centers via auto side margins. */
    max-width: 1200px;
}

/* Consistent outer spacing for every bar in the top-bars stack: a uniform 6px
   gap above each bar and no outer bottom margin. Overrides the varied
   per-component top margins (the daily-rewards hub tiles) and the runtime
   `mb-0` / `mb-4` bootstrap utilities that `stackTopAlerts()` toggles on the
   `.top-alert` bars (email / unsub / promo / flash). `!important` + the
   two-class specificity is required to beat those `!important` utilities.
   Between siblings the lower bar's 6px top margin meets the upper bar's 0
   bottom margin, so gaps stay an even 6px with no doubling. */
.container.lobby-new-top-bars > * {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

/* The first bar gets the same 6px above it as the gaps between bars. The
   container carries a 4px top padding (daily_rewards_hub.css) which, on top of
   the 6px first-bar margin above, left a 10px top gap — the one spacing in the
   stack that wasn't 6px. Dropping the padding lets the first bar's 6px top
   margin provide the top spacing on its own, so the whole stack is an even 6px
   (desktop + mobile). */
.container.lobby-new-top-bars {
    padding-top: 0 !important;
}

@media screen and (max-width: 1200px) {
    .newTopBars-items {
        flex-basis: 45%;
    }

    .newTopBars {
        justify-content: center;
    }
}

@media screen and (max-width: 991px) {
    .newJackpotMiniGames-container {
        flex-direction: column-reverse;
        align-items: center;
        max-width: 660px;
        margin: 25px auto;
    }

    .newJackpotMiniGames-right {
        align-items: center;
        text-align: center;
    }

    .newJackpotMinigames-cta {
        width: 100%;
    }

    .newJackpotMiniGames-left {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .newPlayGames-featured a {
        background-image: linear-gradient(rgba(18, 65, 101, 0.60)), url('/static/assets/redesign-cro-v2/Game-1-1-1.png');
        background-position-x: 15%;
    }

    .newPlayGames-featured a::after {
        content: '';
        height: 125px;
        display: block;
        width: 150px;
        background-image: url('/static/assets/expired-cro-v2/roll-a-dice.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 7%;
    }

    .newPlayGames-featured span:not(.games-active-players, .live-active-badge) {
        right: 7%;
        padding: 16px 40px;
    }

    .newJackpotMiniGames-desc {
        margin-top: 15px;
    }

    .newPlayGames-items a {
        flex-basis: 100%;
    }

    .newTopBars-items {
        flex-basis: 100%;
    }

    .newTopBars--two-up .newTopBars-items:not([hidden]) {
        flex-basis: 100%;
    }

    .newTopBars {
        gap: 1rem;
        margin-top: 20px;
    }

    .newJackpotMiniGames-left a {
        width: 100%;
        max-width: 420px;
        margin: auto;
    }

    .newJackpotMiniGames-left img {
        max-height: none;
        margin: auto;
        width: 100%;
        max-width: 420px;
    }
}

@media screen and (max-width: 400px) {
    .newPlayGames-featured span:not(.games-active-players, .live-active-badge) {
        padding: 16px 25px;
    }

    header.main-header {
        padding: 18px 15px 0;
    }

}

.live-ticker {
    width: 100%;
}




/*** Deposit Popup ***/
div#depositTableWrapper table>tbody>tr>td {
    border-radius: 10px;
    background: #847EDE;
    padding: 20px;
    display: block;
    position: relative;
    border: none;
    max-width: 500px;
}

span.crypto-img {
    margin-right: .5rem;
    max-width: 25px;
}

span.crypto-img img {
    max-width: 25px;
}

input.form-control.form-control-sm {
    margin-top: 10px;
    border-radius: 4px;
    background: #6969AD;
    border: none;
    width: calc(100% - 25px);
    color: #FFF;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 28px;
}

div#depositTableWrapper table>tbody>tr {
    margin-bottom: 10px;
    display: block;
}

div#depositTableWrapper table>tbody>tr>td strong {
    color: #FFF;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

span.ms-2.qr-btn img {
    max-width: 20px;
}

div#depositTableWrapper table>tbody>tr>td::after {
    content: none;
    max-width: 10px;
    width: 100%;
    height: 17px;
    background: url('/static/assets/redesign-cro-v2/copy-button.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    z-index: 1;
    position: absolute;
    padding: 5px;
    box-sizing: content-box;
    bottom: 20px;
    right: 15px;
    cursor: pointer;
}

.copy-button>img {
    max-width: 19px;
    width: 100%;
    height: 20px;
    display: block;
    z-index: 1;
    position: absolute;
    bottom: 25px;
    right: 15px;
    cursor: pointer;
}

div#depositTableWrapper table>tbody>tr {
    border-radius: 10px;
    background: #847EDE;
    display: block;
    position: relative;
}

div#depositTableWrapper table>tbody>tr[data-chain-id="bitcoin"]>td,
div#depositTableWrapper table>tbody>tr[data-chain-id="bitcoin"] {
    border-radius: 10px;
    background: #F4922F;
}

div#depositTableWrapper table>tbody>tr[data-chain-id="bitcoin"] input.form-control.form-control-sm {
    border-radius: 4px;
    background: #B86F20;
}

div#depositChainSelectorWrap {
    max-width: 500px;
    margin-bottom: 15px !important;
}

div#depositChainSelectorWrap label {
    color: #545454;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

select#depositChainSelect {
    border-radius: 10px;
    border: 1px solid #D9D9D9;
    color: #545454;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    min-height: 48px;
    box-shadow: none;
}

select#depositChainSelect:focus {
    border-color: #F23887;
    box-shadow: 0 0 0 0.2rem rgba(242, 56, 135, 0.15);
}


p#convertNote {
    color: #545454 !important;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal-content {
    border-radius: 30px;
}

.modal.show .modal-dialog {
    max-width: 660px;
    top: 45%;
    transform: translateY(-50%);
}

.modal-body {
    padding: 1rem 40px;
}

.modal-header {
    padding: 2rem 40px 1rem;
    border: none;
    position: relative;
}

h5.modal-title {
    color: #F23887;
    font-family: Poppins;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal-header .btn-close {
    position: absolute;
    top: 10px;
    right: 20px;
    --bs-btn-close-bg: none;
    font-size: 40px;
    font-weight: 500;
    opacity: 1;
}

.live-active-badge {
    background: #f0f0f0;
}

.live-active-badge.is-active {
    background: #BCFFCC;
}

/* Active-players badge on the homepage game tiles — small chip
   pinned to the top-right corner of each tile so it sits over the
   art without dominating the centre of the card. */
.newPlayGames-items a .games-active-players {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    transform: none;
}

.newPlayGames-items a .live-active-badge {
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.92);
    color: #334155;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
    white-space: nowrap;
}

.newPlayGames-items a .live-active-badge.is-active {
    background: #16A34A;
    color: #fff;
}



#funPriceTableWrapper .table-bordered>:not(caption)>*>* {
    border: none;
    background: none;
    vertical-align: middle;
}

#funPriceTableWrapper .table-bordered>:not(caption)>* {
    border: none;
}

div#funPriceTableWrapper table tbody tr:nth-child(odd) {
    border-radius: 4px;
    background: #D9D9D9 !important;
}

td.crypto-icon {
    text-align: center;
}

/* Constrain the token artwork (source PNGs/SVGs are ~800px) to a small round
   icon so the price-table rows stay compact; matches the 28px fallback badge.
   A narrower max-width override for small screens lives in the media block below. */
td.crypto-icon img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
}

.crypto-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F8428C;
    color: #FFF;
    font-family: Poppins;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.funPriceTableDepositModal {
    color: #545454;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-bottom: solid 1px #d9d9d9;
    padding-bottom: 20px;
    margin-bottom: 10px;
}

div#funPriceTableWrapper {
    max-width: 450px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.15);
    padding: 20px;
}

th.empty-th {
    min-width: 80px;
}

.stakingInfor {
    color: #F8428C;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 20px;
    margin-bottom: 10px;
}

p#stakingInfo {
    display: none;
}

@media screen and (max-width: 500px) {
    .modal-content {
        border-radius: 20px;
    }

    .modal.show .modal-dialog {
        top: 50%;
    }

    span.crypto-img img {
        max-width: 25px;
    }

    span.ms-2.qr-btn img {
        max-width: 20px;
    }

    div#depositModal .modal-body {
        padding: 1rem 1.5rem;
    }

    div#depositModal .modal-header {
        padding: 1.5rem;
    }

    .modal-header .btn-close {
        right: 10px;
        top: 5px;
    }

    #funPriceTableWrapper .table-bordered>:not(caption)>*>* {
        font-size: 14px;
    }

    th.empty-th {
        min-width: 50px;
    }

    td.crypto-icon+td {
        text-align: center;
    }

    .stakingInfor {
        text-align: center;
        font-size: 14px;
    }

    div#depositTableWrapper table>tbody>tr>td {
        padding: 20px 10px;
    }

    input.form-control.form-control-sm {
        width: calc(100% - 35px);
    }

    td.crypto-icon img {
        width: 25px;
        height: 25px;
    }

    td.crypto-icon .crypto-icon-fallback {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
}


/* The deposit modal used to cap its body at 75vh only below 860px of viewport
   height; that left taller-but-still-short viewports with an unscrollable,
   top-clipped dialog. The body is now capped and scrolled at every height by
   the `#depositModal .modal-content` / `.modal-body` rules in the deposit
   reskin block further down, so this height-gated cap is gone. */












/* ============================================================
   Deposit modal — new-UI reskin (reference: "Deposit modal new UI").
   Everything here is scoped to #depositModal so the shared modal rules
   (.modal-content / .modal-dialog / .modal-title / .btn-close used by the
   QR, stats, referral and staking modals) are left untouched. These rules
   override the older deposit-popup styling above by higher specificity.
   Font stays the site's Poppins; network icons + gradients + layout follow
   the reference; currency icons remain the live token artwork.
   ============================================================ */

/* Shell */
/* Centring uses flex + min-height instead of the global
   `.modal.show .modal-dialog { top: 45%; transform: translateY(-50%) }` shim.
   That shim pulls the dialog up by half its own height, so once the deposit
   content is taller than the viewport the header (title + close button) ends
   up above the scroll origin of `.modal` and can never be scrolled back into
   view — the modal looks "stuck" with its top cut off. With `min-height` the
   dialog grows past the viewport instead of being shifted, and the content
   below is capped + scrolled internally so the header always stays pinned. */
#depositModal.modal.show .modal-dialog {
    max-width: 460px;
    top: 0;
    transform: none;
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin, .5rem) * 2);
}
#depositModal .modal-content {
    border-radius: 22px;
    overflow: hidden;
    width: 100%;
    /* First declaration is the fallback; the `dvh` one wins where supported
       and keeps the dialog inside the visible area on mobile browsers whose
       toolbars shrink the viewport. */
    max-height: calc(100vh - var(--bs-modal-margin, .5rem) * 2);
    max-height: calc(100dvh - var(--bs-modal-margin, .5rem) * 2);
}
#depositModal .modal-header {
    padding: 20px 22px 8px;
    flex: 0 0 auto;
}
#depositModal .modal-body {
    padding: 0 22px 22px;
    /* Absorb all overflow here (flex child needs min-height:0 to shrink). */
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E8 transparent;
}
#depositModal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#depositModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#depositModal .modal-body::-webkit-scrollbar-thumb {
    background: #E0E0E8;
    border-radius: 8px;
}
#depositModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #D0D0DA;
}

/* Title — pink gradient clip-text */
#depositModal h5.modal-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, #FF2E8C, #C20E66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Close — round with inline SVG X, matching the staking modal close button */
#depositModal .modal-header .btn-close {
    top: 18px;
    right: 22px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #F5F6F9;
    border: 1px solid #ECECF2;
    color: #6B6775;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
#depositModal .modal-header .btn-close svg {
    width: 18px;
    height: 18px;
    display: block;
}
#depositModal .modal-header .btn-close:hover {
    background: rgba(236, 25, 102, .1);
    color: #BC1351;
    border-color: rgba(236, 25, 102, .35);
}
#depositModal .modal-header .btn-close:active {
    transform: scale(.92);
}
#depositModal .modal-header .btn-close:focus-visible {
    box-shadow: none;
    outline: 3px solid #EC1966;
    outline-offset: 2px;
}

/* The native network <select> row is replaced by the in-card dropdown. */
#depositModal #depositChainSelectorWrap {
    display: none !important;
}

/* Network / address card — sticky, per-network gradient */
#depositModal #depositTableWrapper {
    position: sticky;
    top: 0;
    z-index: 6;
    margin-bottom: 16px;
}
#depositModal #depositTableWrapper table,
#depositModal #depositTableWrapper table > tbody,
#depositModal #depositTableWrapper table > tbody > tr {
    display: block;
    background: transparent;
    margin: 0;
}
#depositModal #depositTableWrapper table > tbody > tr > td {
    display: block;
    max-width: none;
    padding: 18px;
    border: none;
    border-radius: 18px;
    color: #fff;
    background:
        radial-gradient(130px 130px at 88% -12%, rgba(255, 255, 255, .28), transparent 70%),
        linear-gradient(135deg, #9A86F5 0%, #6A4BD6 100%);
    box-shadow: 0 14px 30px -14px rgba(106, 75, 214, .65);
}
#depositModal #depositTableWrapper table > tbody > tr[data-chain-id="bitcoin"] > td {
    background:
        radial-gradient(130px 130px at 88% -12%, rgba(255, 255, 255, .28), transparent 70%),
        linear-gradient(135deg, #F9A83C 0%, #E07810 100%);
    box-shadow: 0 14px 30px -14px rgba(224, 120, 16, .6);
}
#depositModal #depositTableWrapper table > tbody > tr[data-chain-id="solana"] > td {
    background:
        radial-gradient(130px 130px at 88% -12%, rgba(255, 255, 255, .28), transparent 70%),
        linear-gradient(135deg, #33333F 0%, #0C0C14 100%);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
#depositModal #depositTableWrapper table > tbody > tr > td::after {
    content: none;
}

/* Network row: icon + dropdown + QR */
#depositModal .dt-net-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
#depositModal .dt-net-ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    flex: 0 0 auto;
}
#depositModal .dt-net-ic svg {
    width: 17px;
    height: 17px;
    display: block;
}
#depositModal .dt-net-dd {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
#depositModal .dt-net-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 3px 0;
    text-align: left;
}
#depositModal .dt-net-trigger.dt-net-trigger--static {
    cursor: default;
}
#depositModal .dt-net-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#depositModal .dt-net-caret {
    flex: 0 0 auto;
    transition: transform .2s ease;
}
#depositModal .dt-net-dd.is-open .dt-net-caret {
    transform: rotate(180deg);
}
#depositModal .dt-net-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: -4px;
    min-width: 230px;
    max-width: 300px;
    margin: 0;
    padding: 6px;
    list-style: none;
    z-index: 30;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
#depositModal .dt-net-dd.is-open .dt-net-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
#depositModal .dt-net-opt {
    display: flex;
    align-items: center;
    padding: 11px 13px;
    border-radius: 10px;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    color: #1B1B2A;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
#depositModal .dt-net-opt:hover {
    background: #FFF0F7;
    color: #E4197E;
}
#depositModal .dt-net-opt.is-sel {
    background: #FFE3F0;
    color: #E4197E;
}
#depositModal .dt-net-opt.is-sel::after {
    content: "\2713";
    margin-left: auto;
    font-weight: 800;
}
#depositModal .dt-qr {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    cursor: pointer;
}
#depositModal .dt-qr:hover {
    background: rgba(255, 255, 255, .3);
}

/* Accepted-tokens line */
#depositModal .dt-tokens {
    margin: 12px 0 14px;
    font-family: Poppins;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}
#depositModal .dt-tokens b {
    color: #fff;
    font-weight: 600;
}

/* Address + copy */
#depositModal .dt-addr {
    display: flex;
    align-items: center;
    gap: 8px;
}
#depositModal .dt-addr input.form-control.form-control-sm {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    font-family: Poppins;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fff;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .18);
    text-overflow: ellipsis;
}
/* The Bitcoin card kept a legacy 4px-radius, solid-fill address input; an older
   rule targets it with higher specificity, so override it here to match the
   other networks' rounded translucent box. */
#depositModal #depositTableWrapper table > tbody > tr[data-chain-id="bitcoin"] .dt-addr input.form-control.form-control-sm {
    border-radius: 11px;
    background: rgba(0, 0, 0, .18);
}
#depositModal .dt-addr input:focus {
    outline: none;
    border-color: #fff;
    box-shadow: none;
}
#depositModal .dt-copy.copy-button {
    flex: 0 0 auto;
    position: static;
    display: grid;
    place-items: center;
    width: 44px;
    height: 42px;
    border-radius: 11px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    transition: background .15s ease, transform .1s ease;
}
#depositModal .dt-copy.copy-button > img {
    display: none;
}
#depositModal .dt-copy.copy-button:hover {
    background: rgba(255, 255, 255, .32);
}
#depositModal .dt-copy.copy-button:active {
    transform: scale(.94);
}

/* Fee note — green pill */
#depositModal p#convertNote {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 16px 0 !important;
    padding: 11px 14px;
    border-radius: 12px;
    background: #EAFBF3;
    border: 1px solid #C5F0DD;
    font-size: 13.5px;
    font-weight: 600;
    color: #0E8E5C !important;
    text-align: center;
    line-height: 1.4;
}
#depositModal p#convertNote::before {
    content: "\2713";
    flex: 0 0 auto;
    font-weight: 800;
    color: #0E8E5C;
}
#depositModal p#convertNote b {
    font-weight: 700;
    color: #0A6E47;
}

/* Price table */
#depositModal #funPriceTableWrapper {
    max-width: none;
    border: 1px solid #ECECF2;
    border-radius: 16px;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}
#depositModal .funPriceTableDepositModal {
    font-size: 15px;
    font-weight: 700;
    color: #1B1B2A;
    padding: 14px 16px 10px;
    margin-bottom: 0;
    border-bottom: none;
}
#depositModal #funPriceTableWrapper th {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    padding: 8px 16px;
    border-bottom: 1px solid #ECECF2;
}
#depositModal #funPriceTableWrapper th:last-child {
    text-align: right;
}
#depositModal #funPriceTableWrapper td {
    font-size: 13.5px;
    padding: 9px 16px;
    vertical-align: middle;
}
/* Currency cell: icon + symbol grouped on the left. */
#depositModal #funPriceTableWrapper td:first-child {
    text-align: left;
}
#depositModal .dt-cur {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
#depositModal .dt-coin {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .4);
}
#depositModal .dt-coin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#depositModal .dt-coin .crypto-icon-fallback {
    width: 100%;
    height: 100%;
    font-size: 12px;
}
/* Price value: right-aligned, tabular. */
#depositModal #funPriceTableWrapper td:last-child {
    text-align: right;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#depositModal #funPriceTableWrapper table tbody tr:nth-child(odd) {
    background: #FAFAFC !important;
    border-radius: 0;
}
#depositModal #funPriceTableWrapper table tbody tr:hover {
    background: #FFF0F7 !important;
}

/* Footer — staking rate + free-spin note */
#depositModal .stakingInfor {
    color: #E4197E;
    font-size: 14px;
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 6px;
}
#depositModal p#depositSpinInfo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 400;
    color: #4B4B57;
    line-height: 1.45;
    margin: 0;
}
#depositModal p#depositSpinInfo::before {
    content: "\2605";
    color: #F0A500;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.2;
}
#depositModal p#depositSpinInfo b {
    font-weight: 700;
    color: #1B1B2A;
}

/* Conversion simulator — light card directly under the 0%-fee pill. */
#depositModal .dt-sim {
    border: 1px solid #ECECF2;
    border-radius: 16px;
    padding: 14px 16px 15px;
    background: #FFF;
}
#depositModal .dt-sim-label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1B1B2A;
    margin-bottom: 10px;
}
#depositModal .dt-sim-row input.form-control,
#depositModal .dt-sim-row select.form-select {
    font-size: 13.5px;
    font-weight: 600;
    color: #1B1B2A;
    padding: 10px 12px;
    border: 1px solid #ECECF2;
    background: #FAFAFC;
}
#depositModal .dt-sim-row input.form-control {
    border-radius: 11px 0 0 11px;
}
#depositModal .dt-sim-row select.form-select {
    border-radius: 0 11px 11px 0;
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
}
#depositModal .dt-sim-row input.form-control:focus,
#depositModal .dt-sim-row select.form-select:focus {
    outline: none;
    border-color: #E4197E;
    box-shadow: none;
}
#depositModal .dt-sim-hint,
#depositModal .dt-sim-note {
    font-size: 12px;
    line-height: 1.45;
    color: #6B7280;
}
#depositModal #funConvertSimulateStatus {
    font-size: 13.5px;
    font-weight: 600;
    color: #1B1B2A;
    line-height: 1.45;
}
/* High-slippage warning — red, and deliberately louder than the grey notes. */
#depositModal .dt-sim-warn {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    color: #C81E4A;
    background: #FDECEF;
    border: 1px solid #F7C9D3;
    border-radius: 11px;
    padding: 9px 12px;
}

/* A little breathing room above the large-order settlement note. */
#depositModal #funDepthSettlementNote {
    margin-top: 14px;
}

/* Mobile — bottom sheet */
@media (max-width: 520px) {
    #depositModal.modal.show .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        margin: 0;
        max-width: none;
        transform: none;
        display: block;
        min-height: 0;
    }
    #depositModal .modal-content {
        border-radius: 22px 22px 0 0;
        max-height: 94vh;
        max-height: 94dvh;
    }
}

/*** Referral Modal ***/
div#referralModal h5.modal-title,
div#stakingModal h5.modal-title {
    color: #F23887;
}

h6.mt-4 {
    margin-top: auto !important;
    border-bottom: solid 1px #D9D9D9;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: clamp(16px, 4vw, 18px);
}

/* ============================================================
   Refer & Earn modal — new-UI reskin (reference: "Refer modal new UI ref").
   All rules scoped to #referralModal; the old .mb-3 link boxes / .referStats-*
   grid / #referStats table markup is replaced by the .rf-* structure emitted
   from the template + renderReferralStats() in header-cro-v2.js. Font stays the
   site's Poppins (the reference used Rubik). Mirrors the staking/deposit reskin.
   ============================================================ */
#referralModal {
    --rf-navy: #1C3B6A;
    --rf-midnight: #0D1C32;
    --rf-pink: #EC1966;
    --rf-pink-dark: #BC1351;
    --rf-success: #00B094;
    --rf-success-ink: #00785F;
    --rf-neon: #2BF7A6;
    --rf-slate: #6B6775;
    --rf-grey: #DADADA;
    --rf-surface: #FFFFFF;
    --rf-surface-2: #F5F6F9;
    --rf-fg: #0D1C32;
    --rf-fg-muted: #6B6775;
    --rf-fg-dim: #9AA0AD;
    --rf-line: #ECECF2;
    --rf-line-2: #DDDEE6;
    --rf-radius-card: 18px;
    --rf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Shell — ref width (460px). Centring uses flex + min-height like the
   deposit modal instead of the global `.modal.show .modal-dialog
   { top: 45%; transform: translateY(-50%) }` shim. That shim pulls the
   dialog up by half its own height, so once the referral content is taller
   than the viewport (it exceeds ~1900px with stats loaded) the header ends
   up above the scroll origin of `.modal` and can never be scrolled back
   into view — the modal looks "stuck" with its top cut off. With
   `min-height` the dialog grows past the viewport instead of being
   shifted, and the body below is capped + scrolled internally so the
   header always stays visible. */
#referralModal.modal.show .modal-dialog {
    max-width: 460px;
    top: 0;
    transform: none;
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin, .5rem) * 2);
}
#referralModal .modal-content {
    position: relative;
    overflow: hidden;
    /* First declaration is the fallback; the `dvh` one wins where supported
       and keeps the dialog inside the visible area on mobile browsers whose
       toolbars shrink the viewport. */
    max-height: calc(100vh - var(--bs-modal-margin, .5rem) * 2);
    max-height: calc(100dvh - var(--bs-modal-margin, .5rem) * 2);
    border: 1px solid var(--rf-line);
    border-radius: 24px;
    background:
        radial-gradient(120% 70% at 88% -12%, rgba(0, 176, 148, .09), transparent 55%),
        radial-gradient(120% 70% at -6% -4%, rgba(236, 25, 102, .09), transparent 52%),
        var(--rf-surface);
    box-shadow: 0 40px 90px -30px rgba(13, 28, 50, .4);
}
#referralModal .modal-content::before,
#referralModal .modal-content::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(66px);
    pointer-events: none;
    z-index: 0;
}
#referralModal .modal-content::before {
    background: var(--rf-pink);
    opacity: .1;
    top: -90px;
    right: -70px;
}
#referralModal .modal-content::after {
    background: var(--rf-success);
    opacity: .1;
    bottom: -110px;
    left: -80px;
}

/* Header */
#referralModal .modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 62px 6px 22px;
    border-bottom: none;
}
/* Title — pink gradient clip-text matching the staking modal title (same
   size/weight/color). `div#` specificity beats the shared solid-pink
   referral/staking title rule above; the inner <b> inherits so the gradient
   reads across the whole title. */
div#referralModal h5.modal-title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, #FF2E8C, #C20E66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
div#referralModal h5.modal-title b {
    color: inherit;
    font-weight: 800;
}
/* Close — round with inline SVG X, matching the staking/deposit modals */
#referralModal .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rf-surface-2);
    border: 1px solid var(--rf-line);
    color: var(--rf-slate);
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
#referralModal .modal-header .btn-close svg {
    width: 18px;
    height: 18px;
    display: block;
}
#referralModal .modal-header .btn-close:hover {
    background: rgba(236, 25, 102, .1);
    color: var(--rf-pink-dark);
    border-color: rgba(236, 25, 102, .35);
}
#referralModal .modal-header .btn-close:active {
    transform: scale(.92);
}
#referralModal .modal-header .btn-close:focus-visible {
    outline: 3px solid var(--rf-pink);
    outline-offset: 2px;
}

/* Body — thin deposit-style scrollbar; absorbs all overflow (flex child
   needs min-height:0 to shrink) so the header stays pinned on any
   viewport height */
#referralModal .modal-body {
    position: relative;
    z-index: 1;
    padding: 8px 22px 22px;
    font-family: Poppins, sans-serif;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E8 transparent;
}
#referralModal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#referralModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#referralModal .modal-body::-webkit-scrollbar-thumb {
    background: #E0E0E8;
    border-radius: 8px;
}
#referralModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #D0D0DA;
}
#referralModal .modal-body > *:first-child {
    margin-top: 0;
}

/* staggered entrance — keep the normal hidden-then-rise sequencing during the
   delay via animation-fill-mode:both, but leave the base state visible so if
   the one-shot animation ever fails to start (a display:none -> visible race,
   seen intermittently on mobile) the body still renders instead of going
   blank. */
#referralModal .rf-reveal {
    animation: rf-rise .5s var(--rf-ease) both;
}
#referralModal .rf-reveal.d1 { animation-delay: .05s; }
#referralModal .rf-reveal.d2 { animation-delay: .1s; }
#referralModal .rf-reveal.d3 { animation-delay: .15s; }
#referralModal .rf-reveal.d4 { animation-delay: .2s; }
#referralModal .rf-reveal.d5 { animation-delay: .25s; }
#referralModal .rf-reveal.d6 { animation-delay: .3s; }
@keyframes rf-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

#referralModal .rf-eyebrow {
    margin: 22px 2px 11px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rf-fg-dim);
}

/* HERO — oversized earned statement on a navy island */
#referralModal .rf-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 20px;
    border-radius: var(--rf-radius-card);
    border: 1px solid rgba(43, 247, 166, .26);
    background:
        radial-gradient(200px 150px at 100% 120%, rgba(43, 247, 166, .42), transparent 72%),
        linear-gradient(135deg, #233A67 0%, #0D1C32 100%);
    box-shadow: 0 22px 46px -24px rgba(13, 28, 50, .7);
}
#referralModal .rf-hbadge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--rf-neon);
    background: rgba(43, 247, 166, .12);
    border: 1px solid rgba(43, 247, 166, .3);
}
#referralModal .rf-hero-amount {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 15px;
}
#referralModal .rf-hero-amount .big {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--rf-neon);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 28px rgba(43, 247, 166, .4);
}
#referralModal .rf-hero-amount .cur {
    font-size: 16px;
    font-weight: 800;
    color: rgba(255, 255, 255, .8);
}
#referralModal .rf-hero-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
    font-weight: 500;
    max-width: 32ch;
}
#referralModal .rf-hero-sub b {
    color: #fff;
    font-weight: 700;
}
#referralModal .rf-hero-sub b.for {
    color: var(--rf-neon);
}

/* invite links */
#referralModal .rf-link + .rf-link {
    margin-top: 11px;
}
#referralModal .rf-link-k {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rf-midnight);
    margin-bottom: 7px;
}
#referralModal .rf-link-k svg {
    color: var(--rf-pink);
}
#referralModal .rf-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
#referralModal .rf-link-in {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--rf-fg-muted);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--rf-line-2);
    background: var(--rf-surface-2);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#referralModal .rf-link-in:focus {
    outline: none;
    border-color: var(--rf-pink);
    color: var(--rf-midnight);
    box-shadow: 0 0 0 4px rgba(236, 25, 102, .1);
}
#referralModal .rf-copy {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 45px;
    border-radius: 12px;
    cursor: pointer;
    color: #fff;
    border: none;
    background: linear-gradient(135deg, var(--rf-pink), var(--rf-pink-dark));
    box-shadow: 0 8px 16px -6px rgba(211, 22, 91, .55);
    transition: transform .1s, filter .15s;
}
#referralModal .rf-copy:hover {
    filter: brightness(1.06);
}
#referralModal .rf-copy:active {
    transform: scale(.94);
}
#referralModal .rf-copy:focus-visible {
    outline: 3px solid var(--rf-pink);
    outline-offset: 2px;
}

/* share */
#referralModal .rf-share {
    margin-top: 14px;
    width: 100%;
    font: inherit;
    font-size: 15.5px;
    /* explicit 1.2 matches the reference button height (~49px); `inherit`/`normal`
       would give Bootstrap's 1.5 (or Poppins' tall normal metrics) and render
       the button ~4px taller than the ref */
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--rf-pink), var(--rf-pink-dark));
    box-shadow: 0 16px 32px -12px rgba(211, 22, 91, .6);
    transition: transform .1s, filter .15s;
}
#referralModal .rf-share:hover {
    filter: brightness(1.06);
}
#referralModal .rf-share:active {
    transform: translateY(1px) scale(.995);
}
#referralModal .rf-share:focus-visible {
    outline: 3px solid var(--rf-pink);
    outline-offset: 3px;
}

/* reward rows */
#referralModal .rf-rewards {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
#referralModal .rf-rw {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 15px;
    background: linear-gradient(180deg, #FFF3F8 0%, #FFFFFF 100%);
    border: 1px solid rgba(236, 25, 102, .18);
    box-shadow: 0 8px 20px -16px rgba(211, 22, 91, .4);
    transition: transform .15s var(--rf-ease), box-shadow .2s;
}
#referralModal .rf-rw:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(211, 22, 91, .4);
}
#referralModal .rf-rw-pct {
    flex: 0 0 auto;
    min-width: 62px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--rf-pink), var(--rf-pink-dark));
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 16px -6px rgba(211, 22, 91, .5);
}
#referralModal .rf-rw-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#referralModal .rf-rw-txt b {
    font-size: 14px;
    font-weight: 700;
    color: var(--rf-midnight);
}
#referralModal .rf-rw-txt span {
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--rf-fg-muted);
    font-weight: 500;
}

/* referral stats — KPI dashboard */
#referralModal .rf-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#referralModal .rf-kpi {
    padding: 15px 16px;
    border-radius: 16px;
    border: 1px solid var(--rf-line);
    background: var(--rf-surface);
    box-shadow: 0 10px 24px -18px rgba(13, 28, 50, .5);
}
#referralModal .rf-kpi-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 10px;
}
#referralModal .rf-kpi-ic.ppl {
    background: rgba(28, 59, 106, .1);
    color: var(--rf-navy);
}
#referralModal .rf-kpi-ic.coin {
    background: rgba(0, 176, 148, .12);
    color: var(--rf-success);
}
#referralModal .rf-kpi-val {
    display: block;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--rf-midnight);
    font-variant-numeric: tabular-nums;
}
#referralModal .rf-kpi-val i {
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    color: var(--rf-fg-muted);
}
#referralModal .rf-kpi-lbl {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--rf-fg-muted);
}
#referralModal .rf-kpi.total {
    background: linear-gradient(135deg, rgba(0, 176, 148, .1), rgba(43, 247, 166, .05));
    border-color: rgba(0, 176, 148, .28);
}
#referralModal .rf-kpi.total .rf-kpi-val {
    color: var(--rf-success-ink);
}
#referralModal .rf-kpigrid {
    margin-top: 9px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
#referralModal .rf-kpi-sm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--rf-line);
    background: var(--rf-surface-2);
}
#referralModal .rf-kpi-sm .k {
    font-size: 12px;
    font-weight: 600;
    color: var(--rf-fg-muted);
}
#referralModal .rf-kpi-sm .v {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rf-midnight);
    font-variant-numeric: tabular-nums;
}
#referralModal .rf-kpi-sm.is-pending .v {
    color: var(--rf-fg-dim);
}

/* note */
#referralModal .rf-note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(236, 25, 102, .07);
    border: 1px solid rgba(236, 25, 102, .16);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rf-pink-dark);
    line-height: 1.4;
}
#referralModal .rf-note svg {
    flex: 0 0 auto;
    color: var(--rf-pink);
}

@media screen and (max-width: 520px) {
    #referralModal .modal-body {
        padding: 8px 18px 18px;
    }
    #referralModal .modal-header {
        padding: 18px 58px 6px 18px;
    }
    #referralModal h5.modal-title {
        font-size: 19px;
    }
    #referralModal .rf-hero-amount .big {
        font-size: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #referralModal .rf-reveal {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    #referralModal .modal-content::before,
    #referralModal .modal-content::after {
        animation: none !important;
    }
}




/*** Stats ***/
/* ============================================================
   Community Stats modal — new-UI reskin (reference: "Stats modal new UI ref",
   KPI tile grid). Scoped to #statsModal; the old .stats-icon / #statsWrapper
   table markup is replaced by the .cs-* hero + grid structure emitted from
   loadStats() in header-cro-v2.js. Data source (/api/stats/) is unchanged —
   only markup/presentation change. Font stays the site's Poppins (the reference
   used Rubik). Mirrors the referral/staking/withdraw reskins.
   ============================================================ */
#statsModal {
    --cs-navy: #1C3B6A;
    --cs-midnight: #0D1C32;
    --cs-pink: #EC1966;
    --cs-pink-dark: #BC1351;
    --cs-success: #00B094;
    --cs-success-ink: #00785F;
    --cs-neon: #2BF7A6;
    --cs-slate: #6B6775;
    --cs-surface: #FFFFFF;
    --cs-surface-2: #F5F6F9;
    --cs-fg-muted: #6B6775;
    --cs-fg-dim: #9AA0AD;
    --cs-line: #ECECF2;
    --cs-radius-card: 18px;
    --cs-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Shell — ref width (460px), centered like the deposit/staking/refer modals */
#statsModal.modal.show .modal-dialog {
    max-width: 460px;
    top: 50%;
}
#statsModal .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cs-line);
    border-radius: 24px;
    background:
        radial-gradient(120% 70% at 88% -12%, rgba(0, 176, 148, .09), transparent 55%),
        radial-gradient(120% 70% at -6% -4%, rgba(236, 25, 102, .09), transparent 52%),
        var(--cs-surface);
    box-shadow: 0 40px 90px -30px rgba(13, 28, 50, .4);
}
#statsModal .modal-content::before,
#statsModal .modal-content::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(66px);
    pointer-events: none;
    z-index: 0;
}
#statsModal .modal-content::before {
    background: var(--cs-pink);
    opacity: .1;
    top: -90px;
    right: -70px;
}
#statsModal .modal-content::after {
    background: var(--cs-success);
    opacity: .1;
    bottom: -110px;
    left: -80px;
}

/* Header */
#statsModal .modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 62px 6px 22px;
    border-bottom: none;
}
/* Title — pink gradient clip-text matching the referral/staking modal titles.
   `div#` specificity beats the shared solid-pink stats title rule; the inner
   <b> inherits so the gradient reads across the whole title. */
div#statsModal h5.modal-title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, #FF2E8C, #C20E66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
div#statsModal h5.modal-title b {
    color: inherit;
    font-weight: 800;
}
/* Close — round with inline SVG X, matching the referral/staking/deposit modals */
#statsModal .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cs-surface-2);
    border: 1px solid var(--cs-line);
    color: var(--cs-slate);
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
#statsModal .modal-header .btn-close svg {
    width: 18px;
    height: 18px;
    display: block;
}
#statsModal .modal-header .btn-close:hover {
    background: rgba(236, 25, 102, .1);
    color: var(--cs-pink-dark);
    border-color: rgba(236, 25, 102, .35);
}
#statsModal .modal-header .btn-close:active {
    transform: scale(.92);
}
#statsModal .modal-header .btn-close:focus-visible {
    outline: 3px solid var(--cs-pink);
    outline-offset: 2px;
}

/* Body — thin deposit-style scrollbar; height cap only on short screens */
#statsModal .modal-body {
    position: relative;
    z-index: 1;
    padding: 8px 22px 22px;
    font-family: Poppins, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E8 transparent;
}
#statsModal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#statsModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#statsModal .modal-body::-webkit-scrollbar-thumb {
    background: #E0E0E8;
    border-radius: 8px;
}
#statsModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #D0D0DA;
}
@media screen and (max-height: 860px) {
    #statsModal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }
}
#statsModal #statsWrapper > *:first-child {
    margin-top: 0;
}

/* staggered entrance — keep base state visible (animation-fill-mode:both) so a
   display:none -> visible race never leaves the body blank (see the refer/
   withdraw mobile fix in #3574). */
#statsModal .cs-reveal {
    animation: cs-rise .5s var(--cs-ease) both;
}
#statsModal .cs-reveal.d1 { animation-delay: .05s; }
#statsModal .cs-reveal.d2 { animation-delay: .12s; }
#statsModal .cs-reveal.d3 { animation-delay: .19s; }
@keyframes cs-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* HERO — Total Wagered on a navy island, neon-green value */
#statsModal .cs-hero {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--cs-radius-card);
    border: 1px solid rgba(43, 247, 166, .26);
    background:
        radial-gradient(190px 150px at 100% 120%, rgba(43, 247, 166, .42), transparent 72%),
        linear-gradient(135deg, #233A67 0%, #0D1C32 100%);
    box-shadow: 0 22px 46px -24px rgba(13, 28, 50, .7);
}
#statsModal .cs-hero-ic {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(43, 247, 166, .14);
    color: var(--cs-neon);
}
#statsModal .cs-hero-ic svg {
    width: 20px;
    height: 20px;
}
#statsModal .cs-hero-k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}
#statsModal .cs-hero-v {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 11px;
}
#statsModal .cs-hero-v .big {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--cs-neon);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 28px rgba(43, 247, 166, .4);
}
#statsModal .cs-hero-v .cur {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255, 255, 255, .8);
}
#statsModal .cs-hero-exact {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
    font-variant-numeric: tabular-nums;
    word-break: break-all;
}

#statsModal .cs-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 22px 2px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cs-midnight);
}
#statsModal .cs-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    display: block;
    width: 5px;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--cs-pink), var(--cs-pink-dark));
}

/* KPI tile grid */
#statsModal .cs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
#statsModal .cs-tile {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: 16px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-line);
    box-shadow: 0 8px 20px -18px rgba(13, 28, 50, .5);
    transition: transform .15s var(--cs-ease), box-shadow .2s;
}
#statsModal .cs-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -16px rgba(13, 28, 50, .45);
}
#statsModal .cs-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 11px;
}
#statsModal .cs-ic svg {
    width: 18px;
    height: 18px;
}
#statsModal .cs-tile.c-pink {
    background: linear-gradient(180deg, #FFF1F7 0%, #FFFFFF 82%);
    border-color: rgba(236, 25, 102, .24);
    box-shadow: 0 10px 22px -16px rgba(211, 22, 91, .4);
}
#statsModal .cs-tile.c-green {
    background: linear-gradient(180deg, #EBFFF8 0%, #FFFFFF 82%);
    border-color: rgba(0, 176, 148, .26);
    box-shadow: 0 10px 22px -16px rgba(0, 176, 148, .4);
}
#statsModal .cs-tile.c-navy {
    background: linear-gradient(180deg, #EEF4FF 0%, #FFFFFF 82%);
    border-color: rgba(28, 59, 106, .22);
    box-shadow: 0 10px 22px -16px rgba(28, 59, 106, .4);
}
#statsModal .cs-tile.c-pink .cs-ic {
    background: linear-gradient(135deg, var(--cs-pink), var(--cs-pink-dark));
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(211, 22, 91, .55);
}
#statsModal .cs-tile.c-green .cs-ic {
    background: linear-gradient(135deg, var(--cs-success), #009B82);
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(0, 176, 148, .55);
}
#statsModal .cs-tile.c-navy .cs-ic {
    background: linear-gradient(135deg, #2B5AA6, var(--cs-navy));
    color: #fff;
    box-shadow: 0 6px 14px -6px rgba(28, 59, 106, .55);
}
#statsModal .cs-tile.c-pink .cs-big {
    color: var(--cs-pink-dark);
}
#statsModal .cs-tile.c-green .cs-big {
    color: var(--cs-success-ink);
}
#statsModal .cs-tile.c-navy .cs-big {
    color: var(--cs-navy);
}
#statsModal .cs-lbl {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cs-fg-muted);
}
#statsModal .cs-big {
    margin-top: 7px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cs-midnight);
    font-variant-numeric: tabular-nums;
}
#statsModal .cs-big i {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--cs-fg-muted);
    margin-left: 2px;
}
#statsModal .cs-exact {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    color: var(--cs-fg-dim);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 520px) {
    #statsModal .modal-body {
        padding: 8px 18px 18px;
    }
    #statsModal .modal-header {
        padding: 18px 58px 6px 18px;
    }
    #statsModal h5.modal-title {
        font-size: 19px;
    }
    #statsModal .cs-hero-v .big {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #statsModal .cs-reveal {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    #statsModal .cs-tile {
        transition: none;
    }
    #statsModal .modal-content::before,
    #statsModal .modal-content::after {
        animation: none !important;
    }
}



/*** Withdraw ***/
/* ============================================================
   Withdraw FUN modal — new-UI reskin (reference: "Withdraw modal new UI ref",
   light · amount-first). Scoped to #withdrawModal; the money/KYC/verify flow
   (fee, validation, #confirmWithdrawModal, /api/withdraw, per-row Verify/Resume
   KYC) is preserved unchanged — only markup/presentation change. Font stays the
   site's Poppins. Mirrors the staking/refer reskins.
   ============================================================ */
#withdrawModal {
    --wd-navy: #1C3B6A;
    --wd-midnight: #0D1C32;
    --wd-pink: #EC1966;
    --wd-pink-dark: #BC1351;
    --wd-success: #00B094;
    --wd-success-ink: #00785F;
    --wd-neon: #2BF7A6;
    --wd-error: #EF5A88;
    --wd-error-ink: #C21F3C;
    --wd-slate: #6B6775;
    --wd-surface: #FFFFFF;
    --wd-surface-2: #F5F6F9;
    --wd-fg: #0D1C32;
    --wd-fg-muted: #6B6775;
    --wd-fg-dim: #9AA0AD;
    --wd-line: #E9EAEF;
    --wd-line-2: #DADADA;
    --wd-radius-card: 18px;
    --wd-radius-ctrl: 13px;
    --wd-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Shell — ref width (460px), centered like the other reskinned modals */
#withdrawModal.modal.show .modal-dialog {
    max-width: 460px;
    top: 50%;
}
#withdrawModal .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wd-line);
    border-radius: 24px;
    background:
        radial-gradient(120% 85% at 84% -12%, rgba(43, 247, 166, .14), transparent 55%),
        radial-gradient(120% 85% at -5% 2%, rgba(236, 25, 102, .13), transparent 52%),
        var(--wd-surface);
    box-shadow: 0 40px 90px -30px rgba(13, 28, 50, .4);
}
#withdrawModal .modal-content::before,
#withdrawModal .modal-content::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
}
#withdrawModal .modal-content::before {
    background: var(--wd-neon);
    opacity: .13;
    top: -100px;
    right: -80px;
}
#withdrawModal .modal-content::after {
    background: var(--wd-pink);
    opacity: .12;
    bottom: -120px;
    left: -90px;
}

/* Header */
#withdrawModal .modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 62px 6px 22px;
    border-bottom: none;
}
/* Title — pink gradient clip-text matching the refer/staking modal titles
   (same size/weight/color); the inner <b> inherits so the gradient reads
   across the whole "Withdraw FUN". */
div#withdrawModal h5.modal-title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: normal;
    background: linear-gradient(90deg, #FF2E8C, #C20E66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
div#withdrawModal h5.modal-title b {
    color: inherit;
    font-weight: 800;
}
#withdrawModal .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--wd-surface-2);
    border: 1px solid var(--wd-line);
    color: var(--wd-slate);
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
#withdrawModal .modal-header .btn-close svg {
    width: 18px;
    height: 18px;
    display: block;
}
#withdrawModal .modal-header .btn-close:hover {
    background: rgba(236, 25, 102, .1);
    color: var(--wd-pink-dark);
    border-color: rgba(236, 25, 102, .35);
}
#withdrawModal .modal-header .btn-close:active {
    transform: scale(.92);
}

/* Body — thin deposit-style scrollbar; height cap only on short screens */
#withdrawModal .modal-body {
    position: relative;
    z-index: 1;
    padding: 6px 22px 22px;
    font-family: Poppins, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E8 transparent;
}
#withdrawModal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#withdrawModal .modal-body::-webkit-scrollbar-thumb {
    background: #E0E0E8;
    border-radius: 8px;
}
@media screen and (max-height: 860px) {
    #withdrawModal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }
}
#withdrawModal .modal-body > *:first-child {
    margin-top: 0;
}

/* staggered entrance — keep the normal hidden-then-rise sequencing during the
   delay via animation-fill-mode:both, but leave the base state visible so a
   misfired animation (display:none -> visible race, seen intermittently on
   mobile) can't leave this money-critical modal blank. */
#withdrawModal .wd2-reveal {
    animation: wd2-rise .5s var(--wd-ease) both;
}
#withdrawModal .wd2-reveal.d1 { animation-delay: .06s; }
#withdrawModal .wd2-reveal.d2 { animation-delay: .12s; }
#withdrawModal .wd2-reveal.d3 { animation-delay: .18s; }
#withdrawModal .wd2-reveal.d4 { animation-delay: .24s; }
@keyframes wd2-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* AMOUNT hero — navy island */
#withdrawModal .wd2-amount {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    padding: 18px 18px 16px;
    border-radius: var(--wd-radius-card);
    border: 1px solid rgba(43, 247, 166, .3);
    background:
        radial-gradient(160px 120px at 100% 120%, rgba(43, 247, 166, .4), transparent 70%),
        linear-gradient(135deg, #1C3B6A 0%, #0D1C32 100%);
    box-shadow: 0 18px 38px -20px rgba(13, 28, 50, .6);
}
#withdrawModal .wd2-amount-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#withdrawModal .wd2-amount-k {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}
#withdrawModal .wd2-bal {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .66);
}
#withdrawModal .wd2-bal b {
    color: var(--wd-neon);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#withdrawModal .wd2-amount-in {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 8px 0 2px;
}
#withdrawModal .wd2-amount-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    font: inherit;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-variant-numeric: tabular-nums;
    caret-color: var(--wd-neon);
}
#withdrawModal .wd2-amount-input::placeholder {
    color: rgba(255, 255, 255, .3);
}
#withdrawModal .wd2-amount-cur {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 800;
    color: var(--wd-neon);
}
#withdrawModal .wd2-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-top: 14px;
}
#withdrawModal .wd2-chip {
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    transition: all .15s;
}
#withdrawModal .wd2-chip:hover {
    border-color: rgba(43, 247, 166, .6);
    color: #fff;
}
#withdrawModal .wd2-chip:active {
    transform: scale(.96);
}

/* ADDRESS field */
#withdrawModal .wd2-field {
    margin-top: 16px;
}
#withdrawModal .wd2-flabel {
    font-size: 13px;
    font-weight: 700;
    color: var(--wd-midnight);
    margin-bottom: 7px;
    display: block;
}
#withdrawModal .wd2-inputwrap {
    position: relative;
    display: flex;
    align-items: center;
}
#withdrawModal .wd2-input {
    width: 100%;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--wd-midnight);
    padding: 13px 78px 13px 14px;
    border-radius: var(--wd-radius-ctrl);
    border: 1.5px solid var(--wd-line-2);
    background: var(--wd-surface-2);
    transition: border-color .15s, box-shadow .15s, background .15s;
    font-variant-numeric: tabular-nums;
}
#withdrawModal .wd2-input::placeholder {
    color: var(--wd-fg-dim);
    font-weight: 500;
}
#withdrawModal .wd2-input:focus {
    outline: none;
    border-color: var(--wd-pink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(236, 25, 102, .12);
}
#withdrawModal .wd2-inbtn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    padding: 7px 12px;
    border: none;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--wd-pink), var(--wd-pink-dark));
    box-shadow: 0 6px 14px -6px rgba(211, 22, 91, .6);
    transition: transform .1s, filter .15s;
}
#withdrawModal .wd2-inbtn:hover {
    filter: brightness(1.05);
}
#withdrawModal .wd2-inbtn:active {
    transform: translateY(-50%) scale(.94);
}

/* SUMMARY */
#withdrawModal .wd2-sum {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--wd-radius-card);
    background: linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 100%);
    border: 1px solid var(--wd-line);
    box-shadow: 0 8px 22px -18px rgba(13, 28, 50, .5);
}
#withdrawModal .wd2-srow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
#withdrawModal .wd2-srow + .wd2-srow {
    margin-top: 9px;
}
#withdrawModal .wd2-srow .k {
    color: var(--wd-fg-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
#withdrawModal .wd2-srow .v {
    color: var(--wd-midnight);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#withdrawModal .wd2-srow.total {
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px dashed var(--wd-line-2);
}
#withdrawModal .wd2-srow.total .k {
    color: var(--wd-midnight);
    font-weight: 800;
}
#withdrawModal .wd2-srow.total .v {
    font-size: 16px;
    color: var(--wd-success-ink);
    font-weight: 800;
}
#withdrawModal .wd2-refresh {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 7px;
    cursor: pointer;
    color: var(--wd-pink);
    background: rgba(236, 25, 102, .1);
    border: none;
    transition: background .15s;
}
#withdrawModal .wd2-refresh:hover {
    background: rgba(236, 25, 102, .2);
}
#withdrawModal .wd2-refresh:focus-visible {
    outline: 2px solid rgba(236, 25, 102, .45);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(236, 25, 102, .14);
}
#withdrawModal .wd2-refresh svg {
    display: block;
}
#withdrawModal .wd2-min {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--wd-fg-dim);
}
#withdrawModal .wd2-min b {
    color: var(--wd-fg-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* message line (KYC / errors / success — driven by existing JS) */
#withdrawModal .wd2-msg-line {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}
#withdrawModal .wd2-msg-line.text-danger {
    color: var(--wd-error-ink) !important;
}
#withdrawModal .wd2-msg-line.text-success {
    color: var(--wd-success-ink) !important;
}

/* CTA */
#withdrawModal .wd2-submit {
    margin-top: 18px;
    width: 100%;
    font: inherit;
    font-size: 15.5px;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: linear-gradient(135deg, var(--wd-pink), var(--wd-pink-dark));
    box-shadow: 0 14px 30px -10px rgba(211, 22, 91, .6);
    transition: transform .1s, filter .15s;
}
/* hover matches the Refer modal share CTA: just brightness, no shape/gradient
   change (the extra props pin the base so the deployed #startWithdrawBtn:hover
   — border-radius:100px + different gradient — can't morph the button) */
#withdrawModal .wd2-submit:hover:not(:disabled) {
    filter: brightness(1.06);
    border-radius: 15px;
    box-shadow: 0 14px 30px -10px rgba(211, 22, 91, .6);
    background: linear-gradient(135deg, var(--wd-pink), var(--wd-pink-dark));
}
#withdrawModal .wd2-submit:active:not(:disabled) {
    transform: translateY(1px) scale(.995);
}
#withdrawModal .wd2-submit:disabled {
    cursor: not-allowed;
    background: #E7E8EE;
    color: #A9AEBB;
    box-shadow: none;
}

/* PENDING withdrawals */
#withdrawModal .wd2-pend-head {
    margin: 22px 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wd-midnight);
}
#withdrawModal .wd2-pend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#withdrawModal .wd2-pend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--wd-surface);
    border: 1px solid var(--wd-line);
    box-shadow: 0 6px 16px -14px rgba(13, 28, 50, .5);
}
#withdrawModal .wd2-pend-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin-right: auto;
}
#withdrawModal .wd2-pend-amt {
    font-size: 14px;
    font-weight: 800;
    color: var(--wd-midnight);
    font-variant-numeric: tabular-nums;
}
#withdrawModal .wd2-pend-to {
    font-size: 11.5px;
    color: var(--wd-fg-dim);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
#withdrawModal .wd2-pend-time {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--wd-fg-dim);
    font-weight: 500;
}
#withdrawModal .wd2-pend-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
#withdrawModal .wd2-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: capitalize;
    white-space: nowrap;
}
#withdrawModal .wd2-status .d {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
#withdrawModal .wd2-status.is-pending {
    color: var(--wd-navy);
    background: rgba(28, 59, 106, .1);
}
#withdrawModal .wd2-status.is-pending .d {
    background: var(--wd-navy);
}
#withdrawModal .wd2-status.is-processing {
    color: var(--wd-pink-dark);
    background: rgba(236, 25, 102, .12);
}
#withdrawModal .wd2-status.is-processing .d {
    background: var(--wd-pink);
}
#withdrawModal .wd2-status.is-done {
    color: var(--wd-success-ink);
    background: rgba(0, 176, 148, .14);
}
#withdrawModal .wd2-status.is-done .d {
    background: var(--wd-success);
}
#withdrawModal .wd2-pend-verify {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    padding: 5px 11px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--wd-pink), var(--wd-pink-dark));
    box-shadow: 0 6px 14px -6px rgba(211, 22, 91, .55);
    white-space: nowrap;
}
#withdrawModal .wd2-pend-verify:hover {
    filter: brightness(1.05);
    color: #fff;
}
#withdrawModal .wd2-pend-note {
    font-size: 11px;
    font-weight: 700;
}
#withdrawModal .wd2-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: var(--wd-surface-2);
    border: 1px dashed var(--wd-line-2);
    color: var(--wd-fg-muted);
    font-size: 13px;
    font-weight: 600;
}
#withdrawModal .wd2-empty svg {
    color: var(--wd-fg-dim);
    flex: 0 0 auto;
}

@media screen and (max-width: 520px) {
    #withdrawModal .modal-body {
        padding: 6px 18px 18px;
    }
    #withdrawModal .modal-header {
        padding: 18px 58px 6px 18px;
    }
    #withdrawModal h5.modal-title {
        font-size: 19px;
    }
    #withdrawModal .wd2-amount-input {
        font-size: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #withdrawModal .wd2-reveal {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    #withdrawModal .modal-content::before,
    #withdrawModal .modal-content::after {
        animation: none !important;
    }
}




/*** Staking ***/
/* ============================================================
   Staking Benefits modal — new-UI reskin (reference: "Staking Modal New UI
   Ref", light · navy + neon-green variant). Everything is scoped to
   #stakingModal so the shared modal rules (.modal-content / .btn-close used
   by the deposit, QR, stats, referral and withdraw modals) stay untouched.
   The old .stakeAPYRates / projected-earnings-table markup is replaced by the
   .stk-* structure emitted from loadStakingBenefits() in header-cro-v2.js.
   Font stays the site's Poppins (the reference used Rubik); the FUN artwork
   stays the live funCoin.svg.
   ============================================================ */

/* Shell — turn the bootstrap modal into the reference's rounded card */
#stakingModal {
    --stk-navy: #1C3B6A;
    --stk-midnight: #0D1C32;
    --stk-pink: #EC1966;
    --stk-pink-dark: #BC1351;
    --stk-success: #00B094;
    --stk-success-ink: #00785F;
    --stk-error: #EF5A88;
    --stk-neon: #2BF7A6;
    --stk-slate: #6B6775;
    --stk-surface: #FFFFFF;
    --stk-surface-2: #F5F6F9;
    --stk-fg: #0D1C32;
    --stk-fg-muted: #6B6775;
    --stk-fg-dim: #9AA0AD;
    --stk-line: #ECECF2;
    --stk-radius-card: 18px;
    --stk-ease: cubic-bezier(.16, 1, .3, 1);
}
/* ref width (460px); `top:50%` (with the global translateY(-50%)) centers the
   dialog like the deposit modal, so the height-capped, scrollable body sits
   centred in the viewport */
#stakingModal.modal.show .modal-dialog {
    max-width: 460px;
    top: 50%;
}
#stakingModal .modal-content {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--stk-line);
    border-radius: 24px;
    background:
        radial-gradient(120% 70% at 88% -12%, rgba(0, 176, 148, .09), transparent 55%),
        radial-gradient(120% 70% at -6% -4%, rgba(236, 25, 102, .09), transparent 52%),
        var(--stk-surface);
    box-shadow: 0 40px 90px -30px rgba(13, 28, 50, .4);
}
/* ambient blobs via pseudo-elements (no extra markup) */
#stakingModal .modal-content::before,
#stakingModal .modal-content::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    z-index: 0;
}
#stakingModal .modal-content::before {
    background: var(--stk-neon);
    opacity: .14;
    top: -100px;
    right: -80px;
}
#stakingModal .modal-content::after {
    background: var(--stk-navy);
    opacity: .12;
    bottom: -120px;
    left: -90px;
}

/* Header */
#stakingModal .modal-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px 22px 10px;
    border-bottom: none;
}
/* Title — pink gradient clip-text matching the deposit modal title.
   `div#` specificity (1,1,2) beats the shared solid-pink referral/staking rule. */
div#stakingModal h5.modal-title {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    background: linear-gradient(90deg, #FF2E8C, #C20E66);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#stakingModal .stk-live {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    border-radius: 999px;
    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--stk-success-ink);
    background: rgba(0, 176, 148, .12);
    border: 1px solid rgba(0, 176, 148, .3);
}
#stakingModal .stk-live .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--stk-success);
    animation: stk-pulse 1.8s ease-out infinite;
}
@keyframes stk-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 176, 148, .55); }
    70% { box-shadow: 0 0 0 7px rgba(0, 176, 148, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 176, 148, 0); }
}
/* Close — round, with the reference's inline SVG X (global .btn-close bg is
   stripped site-wide, so the icon is a real <svg> child, not a bg image) */
#stakingModal .modal-header .btn-close {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--stk-surface-2);
    border: 1px solid var(--stk-line);
    color: var(--stk-slate);
    line-height: 1;
    opacity: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
}
#stakingModal .modal-header .btn-close svg {
    width: 18px;
    height: 18px;
    display: block;
}
#stakingModal .modal-header .btn-close:hover {
    background: rgba(236, 25, 102, .1);
    color: var(--stk-pink-dark);
    border-color: rgba(236, 25, 102, .35);
}
#stakingModal .modal-header .btn-close:active {
    transform: scale(.92);
}
#stakingModal .modal-header .btn-close:focus-visible {
    box-shadow: none;
    outline: 3px solid var(--stk-pink);
    outline-offset: 2px;
}

/* Body — thin styled scrollbar matching the deposit modal; the height cap that
   triggers the scroll lives in the max-height media query below (also matching
   the deposit modal), so on tall screens the modal shows in full */
#stakingModal .modal-body {
    position: relative;
    z-index: 1;
    padding: 6px 22px 22px;
    scrollbar-width: thin;
    scrollbar-color: #E0E0E8 transparent;
}
#stakingModal .modal-body::-webkit-scrollbar {
    width: 8px;
}
#stakingModal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}
#stakingModal .modal-body::-webkit-scrollbar-thumb {
    background: #E0E0E8;
    border-radius: 8px;
}
#stakingModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #D0D0DA;
}
@media screen and (max-height: 860px) {
    #stakingModal .modal-body {
        max-height: 75vh;
        overflow-y: auto;
    }
}
#stakingModal .modal-body > p.mb-2,
#stakingModal .stk-subtitle {
    margin: 0 0 6px;
    font-family: Poppins, sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--stk-fg-muted);
}
#stakingModal .stk-subtitle b {
    color: var(--stk-fg);
    font-weight: 700;
}
#stakingModal #stakingBenefits {
    font-family: Poppins, sans-serif;
}
#stakingModal #stakingBenefits > *:first-child {
    margin-top: 0;
}

/* staggered entrance */
#stakingModal .stk-reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: stk-rise .5s var(--stk-ease) forwards;
}
#stakingModal .stk-reveal.d1 { animation-delay: .06s; }
#stakingModal .stk-reveal.d2 { animation-delay: .13s; }
#stakingModal .stk-reveal.d3 { animation-delay: .2s; }
@keyframes stk-rise {
    to { opacity: 1; transform: none; }
}

/* HERO — APY + sparkline (dark navy island, neon-green accents) */
#stakingModal .stk-hero {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 18px 18px 16px;
    border-radius: var(--stk-radius-card);
    border: 1px solid rgba(43, 247, 166, .28);
    background:
        radial-gradient(90px 90px at 14% 8%, rgba(255, 255, 255, .1), transparent 70%),
        radial-gradient(170px 130px at 100% 120%, rgba(43, 247, 166, .4), transparent 70%),
        linear-gradient(135deg, #233A67 0%, #0D1C32 100%);
    box-shadow: 0 18px 36px -20px rgba(13, 28, 50, .7);
}
#stakingModal .stk-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#stakingModal .stk-hero-k {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .03em;
    text-transform: uppercase;
}
#stakingModal .stk-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #04241b;
    background: var(--stk-neon);
    box-shadow: 0 0 16px -2px rgba(43, 247, 166, .55);
}
#stakingModal .stk-trend.is-down {
    background: var(--stk-error);
    color: #3a0010;
    box-shadow: none;
}
#stakingModal .stk-trend svg {
    width: 13px;
    height: 13px;
}
#stakingModal .stk-apy {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 2px;
}
#stakingModal .stk-apy .num {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: -.02em;
    text-shadow: 0 0 26px rgba(43, 247, 166, .6);
    font-variant-numeric: tabular-nums;
}
#stakingModal .stk-apy .unit {
    font-size: 20px;
    font-weight: 700;
    color: var(--stk-neon);
}
#stakingModal .stk-apy .apytag {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .6);
    align-self: flex-end;
}
#stakingModal .stk-spark {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    display: block;
    overflow: visible;
}
#stakingModal .stk-spark .area {
    fill: url(#stkSparkFill);
}
#stakingModal .stk-spark .line {
    fill: none;
    stroke: var(--stk-neon);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(43, 247, 166, .85));
}
#stakingModal .stk-spark .dot {
    fill: #fff;
    filter: drop-shadow(0 0 7px rgba(43, 247, 166, 1));
}
#stakingModal .stk-avgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}
#stakingModal .stk-chip {
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .14);
    text-align: center;
}
#stakingModal .stk-chip .k {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
    letter-spacing: .02em;
}
#stakingModal .stk-chip .v {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* LIVE BALANCE (dark navy island) */
#stakingModal .stk-bal {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    padding: 17px 18px;
    border-radius: var(--stk-radius-card);
    background:
        radial-gradient(150px 110px at 6% 120%, rgba(43, 247, 166, .4), transparent 70%),
        linear-gradient(135deg, #233A67 0%, #0D1C32 100%);
    border: 1px solid rgba(43, 247, 166, .35);
    box-shadow: 0 16px 34px -16px rgba(13, 28, 50, .7), 0 0 0 3px rgba(43, 247, 166, .07);
}
#stakingModal .stk-bal-k {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, .72);
}
#stakingModal .stk-bal-k .spark {
    color: var(--stk-neon);
    display: inline-flex;
}
#stakingModal .stk-bal-v {
    margin-top: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
/* the ticking amount lives in its own flex block so the "FUN" suffix stays put
   as the live decimals change width (Poppins has no tabular figures) */
#stakingModal .stk-bal-amt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
#stakingModal .stk-bal-amt .stk-fade {
    color: var(--stk-neon);
    text-shadow: 0 0 16px rgba(43, 247, 166, .55);
}
#stakingModal .stk-bal-v .sfx {
    flex: 0 0 auto;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    font-weight: 700;
}

/* PROJECTED EARNINGS */
#stakingModal .stk-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 10px;
}
#stakingModal .stk-sec-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stk-fg-dim);
}
#stakingModal .stk-sec-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--stk-fg-muted);
}
#stakingModal .stk-sec-note b {
    color: var(--stk-success-ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
#stakingModal .stk-sec-note .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stk-success);
    box-shadow: 0 0 8px rgba(0, 176, 148, .7);
}
#stakingModal .stk-seg {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 4px;
    border-radius: 14px;
    background: var(--stk-surface-2);
    border: 1px solid var(--stk-line);
}
#stakingModal .stk-seg .pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border-radius: 10px;
    z-index: 0;
    background: linear-gradient(135deg, var(--stk-pink) 0%, var(--stk-pink-dark) 100%);
    box-shadow: 0 6px 16px -6px rgba(211, 22, 91, .6);
    transition: transform .45s var(--stk-ease), width .45s var(--stk-ease);
}
#stakingModal .stk-seg button {
    position: relative;
    z-index: 1;
    appearance: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 9px 4px;
    border-radius: 10px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--stk-fg-muted);
    transition: color .3s ease;
    white-space: nowrap;
}
#stakingModal .stk-seg button[aria-selected="true"] {
    color: #fff;
    font-weight: 700;
}
#stakingModal .stk-earn-hero {
    margin-top: 12px;
    padding: 15px 18px;
    border-radius: var(--stk-radius-card);
    background: linear-gradient(180deg, #EEFFF8 0%, #FFFFFF 100%);
    border: 1px solid rgba(0, 176, 148, .25);
    box-shadow: 0 12px 28px -16px rgba(0, 176, 148, .4);
    display: flex;
    align-items: center;
    gap: 13px;
}
#stakingModal .stk-earn-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}
#stakingModal .stk-earn-logo {
    width: 44px;
    height: 44px;
    display: block;
}
#stakingModal .stk-earn-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#stakingModal .stk-earn-lbl {
    font-size: 11.5px;
    color: var(--stk-fg-muted);
    font-weight: 600;
    letter-spacing: .01em;
}
#stakingModal .stk-earn-lbl b {
    color: var(--stk-fg);
    font-weight: 700;
    text-transform: capitalize;
}
#stakingModal .stk-earn-amt {
    margin-top: 1px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--stk-success-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    text-shadow: 0 0 18px rgba(0, 176, 148, .22);
}
#stakingModal .stk-earn-amt .pfx {
    color: var(--stk-success);
    margin-right: 2px;
}
#stakingModal .stk-earn-amt small {
    font-size: 12.5px;
    color: var(--stk-fg-muted);
    font-weight: 700;
    margin-left: 3px;
}

/* SPINS reward — pink tint + spinning wheel */
#stakingModal .stk-spins {
    margin-top: 16px;
    padding: 15px 18px;
    border-radius: var(--stk-radius-card);
    background:
        radial-gradient(130px 90px at 100% 0%, rgba(236, 25, 102, .1), transparent 70%),
        linear-gradient(180deg, #FFF4F9 0%, #FFFFFF 100%);
    border: 1px solid rgba(236, 25, 102, .2);
    box-shadow: 0 10px 26px -16px rgba(236, 25, 102, .32);
}
#stakingModal .stk-spins-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
#stakingModal .stk-spins-ic {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    overflow: visible;
}
#stakingModal .stk-wheel {
    width: 46px;
    height: 46px;
    display: block;
    transform-origin: center;
    filter: drop-shadow(0 3px 6px rgba(13, 28, 50, .35));
    animation: stk-spin 4s infinite;
}
@keyframes stk-spin {
    0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.15, .9, .25, 1); }
    75% { transform: rotate(1440deg); }
    100% { transform: rotate(1440deg); }
}
#stakingModal .stk-wheel__pointer {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 3;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 9px solid #FFF7DA;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4));
}
#stakingModal .stk-spins-txt {
    font-size: 13px;
    line-height: 1.4;
    color: var(--stk-fg);
}
#stakingModal .stk-spins-txt b {
    color: var(--stk-pink-dark);
    font-weight: 700;
}
/* "free" matches the plain "You’re earning" lead text (base fg, normal weight) */
#stakingModal .stk-spins-txt .stk-free {
    color: var(--stk-fg);
    font-weight: 400;
}
#stakingModal .stk-spins-txt .big {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 520px) {
    #stakingModal .modal-body {
        padding: 6px 18px 18px;
    }

    #stakingModal .modal-header {
        padding: 18px 18px 8px;
    }

    #stakingModal h5.modal-title {
        font-size: 19px;
    }

    #stakingModal .stk-apy .num {
        font-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #stakingModal .stk-reveal,
    #stakingModal .stk-live .dot,
    #stakingModal .stk-wheel {
        animation: none !important;
    }

    #stakingModal .stk-reveal {
        opacity: 1;
        transform: none;
    }

    #stakingModal .stk-seg .pill {
        transition: none !important;
    }
}

div#depositModal,
div#statsModal,
div#stakingModal,
div#withdrawModal,
div#referralModal {
    z-index: 1100;
}

div#qrModal {
    z-index: 1100;
}

/*** Live Feed ***/
h2.lobby-live-feed__title {
    font-size: 26px;
}

/* ===== Live Feed ticker — new-UI reference reskin =====
   Compact single-line ticker: LEFT stats + RIGHT 3-card win ticker.
   Brand palette, one accent (hot pink), site Poppins font. Scoped to
   #lobbyLiveFeedPanel so the old .lobby-live-feed rules no longer apply. */
#lobbyLiveFeedPanel
{
    --lf-pink: #EC1966;
    --lf-pink-bright: #FF2E8C;
    --lf-pink-deep: #BC1351;
    --lf-fg: #0D1C32;
    --lf-fg-muted: #6B6775;
    --lf-fg-dim: #9AA0AD;
    --lf-surface: #FFFFFF;
    --lf-line: #EFEFF4;
    --lf-line-pink: #F6E4EE;
    --lf-tint: rgba(236, 25, 102, .08);
    --lf-tint-2: rgba(236, 25, 102, .12);
    --lf-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    background: var(--lf-surface);
    border: 1px solid var(--lf-line);
    border-radius: 16px;
    box-shadow: 0 16px 40px -28px rgba(28, 59, 106, .35);
    padding: 10px 14px;
    margin-bottom: 20px;
    overflow: hidden;
    color: var(--lf-fg);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#lobbyLiveFeedPanel *,
#lobbyLiveFeedPanel *::before,
#lobbyLiveFeedPanel *::after
{
    box-sizing: border-box;
}

#lobbyLiveFeedPanel::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--lf-pink-bright), var(--lf-pink-deep));
}

#lobbyLiveFeedPanel .tnum
{
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

#lobbyLiveFeedPanel .lf-left
{
    flex: 0 0 auto;
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-right: 18px;
    position: relative;
}

#lobbyLiveFeedPanel .lf-left::before
{
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(236, 25, 102, .10), transparent 70%);
}

#lobbyLiveFeedPanel .lf-left::after
{
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--lf-line-pink) 20%, var(--lf-line-pink) 80%, transparent);
}

#lobbyLiveFeedPanel .lf-head
{
    display: flex;
    align-items: center;
    gap: 9px;
}

#lobbyLiveFeedPanel .lf-title
{
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lf-pink);
    line-height: 1;
}

#lobbyLiveFeedPanel .lf-live
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    background: var(--lf-tint);
    color: var(--lf-pink-deep);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

#lobbyLiveFeedPanel .lf-eq
{
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
}

#lobbyLiveFeedPanel .lf-eq i
{
    width: 2px;
    height: 100%;
    border-radius: 1px;
    background: currentColor;
    transform-origin: bottom;
    animation: lobbyLfEq .9s ease-in-out infinite;
}

#lobbyLiveFeedPanel .lf-eq i:nth-child(2) { animation-delay: .18s; }
#lobbyLiveFeedPanel .lf-eq i:nth-child(3) { animation-delay: .36s; }
#lobbyLiveFeedPanel .lf-eq i:nth-child(4) { animation-delay: .54s; }

@keyframes lobbyLfEq
{
    0%, 100% { transform: scaleY(.35); }
    50% { transform: scaleY(1); }
}

@keyframes lobbyLfSweep
{
    to { transform: translateX(120%); }
}

#lobbyLiveFeedPanel .lf-stats
{
    display: flex;
    gap: 8px;
}

#lobbyLiveFeedPanel .lf-chip
{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 7px;
    border-radius: 12px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-line-pink);
}

#lobbyLiveFeedPanel .lf-chip-ic
{
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
    background: var(--lf-tint);
    color: var(--lf-pink);
}

#lobbyLiveFeedPanel .lf-chip-ic svg { width: 16px; height: 16px; }

#lobbyLiveFeedPanel .lf-chip-tx
{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
}

#lobbyLiveFeedPanel .lf-chip-val
{
    font-size: 14px;
    font-weight: 800;
    color: var(--lf-fg);
    letter-spacing: -.01em;
}

#lobbyLiveFeedPanel .lf-chip-lbl
{
    font-size: 8.5px;
    font-weight: 700;
    color: var(--lf-fg-dim);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

#lobbyLiveFeedPanel .lf-chip.is-players .lf-chip-val
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#lobbyLiveFeedPanel .lf-chip.is-players .lf-chip-val::before
{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lf-pink);
    box-shadow: 0 0 0 0 rgba(236, 25, 102, .5);
    animation: lobbyLfBeat 2s ease-in-out infinite;
}

@keyframes lobbyLfBeat
{
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 25, 102, .5); }
    50% { box-shadow: 0 0 0 5px rgba(236, 25, 102, 0); }
}

#lobbyLiveFeedPanel .lf-chip.is-hero
{
    position: relative;
    overflow: hidden;
    border-color: transparent;
    flex: 1.35 1 0;
    background: linear-gradient(120deg, var(--lf-pink-bright), var(--lf-pink-deep));
    box-shadow: 0 10px 20px -12px rgba(236, 25, 102, .7);
}

#lobbyLiveFeedPanel .lf-chip.is-hero .lf-chip-ic
{
    background: #fff;
    color: #fff;
    overflow: hidden;
    padding: 3px;
}

#lobbyLiveFeedPanel .lf-chip-logo
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 5px;
}

#lobbyLiveFeedPanel .lf-chip.is-hero .lf-chip-val { color: #fff; }
#lobbyLiveFeedPanel .lf-chip.is-hero .lf-chip-lbl { color: #fff; opacity: .9; }

#lobbyLiveFeedPanel .lf-chip.is-hero.is-bump::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: lobbyLfSweep 1s var(--lf-ease) 1;
}

#lobbyLiveFeedPanel .lf-right
{
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    /* No right-edge fade mask: the feed shows a fixed set of equal-width
       (`flex: 1 1 0`) cards that fill the track without overflowing, so the
       fade only clipped the last card's right border instead of hinting at
       scrollable content. */
}

#lobbyLiveFeedPanel .lf-feed
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

#lobbyLiveFeedPanel .lf-card
{
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border-radius: 12px;
    background: var(--lf-surface);
    border: 1px solid var(--lf-line-pink);
    will-change: transform, opacity;
}

#lobbyLiveFeedPanel .lf-card.is-flash
{
    border-color: var(--lf-pink);
    box-shadow: 0 0 0 2px rgba(236, 25, 102, .14), 0 10px 22px -16px rgba(236, 25, 102, .5);
}

#lobbyLiveFeedPanel .lf-ic
{
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--lf-pink);
    background: var(--lf-tint);
}

#lobbyLiveFeedPanel .lf-ic svg { width: 17px; height: 17px; display: block; }

#lobbyLiveFeedPanel .lf-body
{
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

#lobbyLiveFeedPanel .lf-name
{
    font-size: 13px;
    font-weight: 700;
    color: var(--lf-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

#lobbyLiveFeedPanel .lf-game
{
    font-size: 11px;
    font-weight: 600;
    color: var(--lf-fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
}

#lobbyLiveFeedPanel .lf-game .dot
{
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--lf-fg-dim);
    vertical-align: middle;
    margin-right: 6px;
}

#lobbyLiveFeedPanel .lf-amt
{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--lf-pink);
    letter-spacing: -.01em;
    white-space: nowrap;
}

#lobbyLiveFeedPanel .lf-amt .u
{
    font-size: 9px;
    font-weight: 700;
    color: var(--lf-pink-deep);
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .9;
}

#lobbyLiveFeedPanel .lf-card.is-big
{
    border-color: transparent;
    background: linear-gradient(120deg, #FFEFF6 0%, #FFF7FB 55%, #FFF0F7 100%);
    box-shadow: 0 12px 26px -18px rgba(236, 25, 102, .75);
}

#lobbyLiveFeedPanel .lf-card.is-big .lf-ic
{
    background: linear-gradient(135deg, var(--lf-pink-bright), var(--lf-pink-deep));
    color: #fff;
}

#lobbyLiveFeedPanel .lf-tag
{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--lf-tint-2);
    color: var(--lf-pink-deep);
}

#lobbyLiveFeedPanel .lf-tag svg { width: 8px; height: 8px; }

#lobbyLiveFeedPanel .lf-card.is-big::after
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: lobbyLfSweep 1.1s var(--lf-ease) 1;
    pointer-events: none;
}

/* ---- Green win styling. The Live Feed ticker only renders WIN cards
   (buildLiveFeedCard in lobby_new.js), so give every card the green treatment
   of the Live Bets WIN card (#liveFeedSection .lb-card.win) — green border,
   icon, and payout amount — instead of the neutral pink. The card keeps its
   plain surface background (no green wash). Placed after the base .lf-* rules
   so it wins on equal specificity. ---- */
#lobbyLiveFeedPanel .lf-card
{
    border-color: rgba(34, 197, 94, .28);
}

#lobbyLiveFeedPanel .lf-ic
{
    color: #16A34A;
    background: rgba(34, 197, 94, .13);
}

#lobbyLiveFeedPanel .lf-amt,
#lobbyLiveFeedPanel .lf-amt .u
{
    color: #16A34A;
}

#lobbyLiveFeedPanel .lf-card.is-flash
{
    border-color: rgba(34, 197, 94, .55);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .14), 0 10px 22px -16px rgba(22, 163, 74, .5);
}

#lobbyLiveFeedPanel .lf-card.is-big
{
    border-color: rgba(34, 197, 94, .5);
    background: var(--lf-surface);
    box-shadow: 0 12px 26px -18px rgba(22, 163, 74, .75);
}

#lobbyLiveFeedPanel .lf-card.is-big .lf-ic
{
    background: linear-gradient(135deg, #4ADE80, #16A34A);
    color: #fff;
}

#lobbyLiveFeedPanel .lf-empty
{
    flex: 1 1 auto;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--lf-surface);
    border: 1px dashed var(--lf-line-pink);
    color: var(--lf-fg-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width: 860px)
{
    #lobbyLiveFeedPanel
    {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px 8px;
    }

    #lobbyLiveFeedPanel .lf-left
    {
        width: auto;
        padding: 0 0 12px;
    }

    #lobbyLiveFeedPanel .lf-left::after { display: none; }

    #lobbyLiveFeedPanel .lf-right
    {
        -webkit-mask-image: none;
        mask-image: none;
    }

    #lobbyLiveFeedPanel .lf-feed
    {
        flex-direction: column;
        align-items: center;
    }

    /* Mobile shows only the latest win card — centered, a touch taller and
       narrower. New wins render as the first child, so they land here. */
    #lobbyLiveFeedPanel .lf-card
    {
        flex: 0 0 auto;
        width: 100%;
        max-width: 320px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    #lobbyLiveFeedPanel .lf-card:not(:first-child)
    {
        display: none;
    }
}

@media screen and (max-width: 420px)
{
    #lobbyLiveFeedPanel .lf-stats { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce)
{
    #lobbyLiveFeedPanel .lf-eq i,
    #lobbyLiveFeedPanel .lf-chip.is-players .lf-chip-val::before,
    #lobbyLiveFeedPanel .lf-card.is-big::after,
    #lobbyLiveFeedPanel .lf-chip.is-hero.is-bump::after
    {
        animation: none;
    }
}


/*** Mini Games ***/
.jm-header {
    text-align: center;
}

.jm-header>h2 {
    margin-bottom: 30px !important;
    color: #101325;
    text-align: center;
    font-family: Poppins;
    font-size: clamp(28px, 4vw, 44px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.jm-ticket-pill.mb-3 {
    border-radius: 5px;
    background: #124165;
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.jm-tabs {
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.jm-tabs>button {
    border-radius: 50px;
    border: 1px solid #124165;
    background: rgba(217, 217, 217, 0.00);
    color: #124165;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

button.jm-tab.is-active {
    border-radius: 50px;
    background: linear-gradient(180deg, #F9448C 0%, #D70570 100%), #EC1966;
    border: none;
}


/*** Games ***/
body.game-page-body {
    background: #F7F8FB;
}

.container.game-page.text-center {
    /*display: flex;
    flex-direction: column;
    gap: 30px;*/
    max-width: 1200px;
}

.newGames-heading {
    color: #101325;
    text-align: center;
    font-family: Poppins;
    font-size: clamp(32px, 6vw, 68px);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

h2.game-title {
    font-size: clamp(32px, 4vw, 38px);
    /* Sit close beneath the switcher, matching the Basketball page (was 50px). */
    margin-top: 0.6rem;
    margin-bottom: 30px;
}

nav.game-switcher {
    max-width: 1200px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

a.game-switcher__link {
    border-radius: 50px;
    border: 1px solid #124165;
    background: rgba(217, 217, 217, 0.00);
    color: #124165;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

a.game-switcher__link.is-active {
    border-radius: 50px;
    background: linear-gradient(180deg, #F9448C 0%, #D70570 100%), #EC1966;
    box-shadow: 0 2px 8px 0 rgba(236, 25, 102, 0.25);
    color: #fff;
    border: none;
}

a.game-switcher__link:not(.is-active):hover,
button.jm-tab:not(.is-active):hover {
    transform: translateY(-1px);
    border-radius: 50px;
    border: 1px solid #FF0080;
    background: rgba(217, 217, 217, 0.00);
    color: #101325;
}



/*** Profile ***/
body * {
    font-family: 'Poppins';
}

.container.py-4>.row>div {
    width: 100%;
}

.card.shadow-sm {
    box-shadow: none !important;
    border: none;
    border-radius: 20px;
    background: #F2F4FD;
    padding: 5px;
}

h1.h4.mb-1,
h2.h4.mb-1,
.card.shadow-sm h4.mb-1,
.card.shadow-sm h4.mb-0 {
    font-weight: 700;
}

button#enableTwofaBtn {
    border-radius: 49px;
    background: #FF0080;
    border: none;
    padding: 16px 30px;
    color: #FFF;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 250px;
    transition: box-shadow 0.3s ease-in-out;
}

button#loadMoreWithdrawals,
button#loadMoreDeposits,
button#loadMoreBets {
    border-radius: 49px;
    background: #FF0080;
    border: none;
    color: #FFF;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 16px 25px;
    transition: box-shadow 0.3s ease-in-out;
}

button#enableTwofaBtn:hover,
button#loadMoreWithdrawals:hover,
button#loadMoreDeposits:hover,
button#loadMoreBets:hover {
    border-radius: 100px;
    background: linear-gradient(180deg, #FF5297 0%, #EC0078 100%);
    box-shadow: 0 0 24px 0 #D91B69;
}

.card-body>p.mb-1:not(:first-of-type) {
    color: #f11;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.card-body>p.mb-1:nth-of-type(2) {
    color: #00B66F;
}

table#betsTable tbody>tr>td:first-child,
table#depositsTable tbody>tr>td:first-child,
table#withdrawalsTable tbody>tr>td:first-child {
    padding: 10px;
}

@media (max-width: 767px) {
    #summaryCards {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0 !important;
        scrollbar-width: none;
    }

    #summaryCards::-webkit-scrollbar {
        display: none;
    }

    #summaryCards .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: start;
        padding: 0 4px;
    }

    .carousel-nav {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-bottom: 30px;
        padding-right: 4px;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
        background: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        border: none;
    }

    .carousel-btn:hover {
        background: #f5f5f5;
    }
}

@media screen and (max-width: 500px) {

    table#betsTable thead>tr>th:first-child,
    table#depositsTable thead>tr>th:first-child,
    table#withdrawalsTable thead>tr>th:first-child {
        min-width: 225px;
    }

    button#loadMoreWithdrawals,
    button#loadMoreDeposits,
    button#loadMoreBets {
        margin-top: 15px;
    }

    .jm-tabs {
        max-width: 360px;
        margin: auto auto 50px;
    }

    body.game-page-body .container.lobby-new-top-bars>.newTopBars-Arrow,
    .container.lobby-new-top-bars>.newTopBars-Arrow.jackpotmg-arrow {
        display: block;
        text-align: center;
        margin-bottom: 20px;
    }

    .newTopBars-Arrow img {
        max-width: 40px;
    }
}

@media (min-width: 768px) {
    .carousel-nav {
        display: none;
    }
}

/* ============================================================
   "Copied!" toast.
   Anchored above the clicked element by JS — position: fixed so
   modal stacking contexts don't shift it. Transform up + left so
   `top/left` coords from getBoundingClientRect can be used directly
   as the anchor point.
   ============================================================ */
.copy-toast
{
    position: fixed;
    transform: translate(-50%, calc(-100% - 6px));
    z-index: 3000;
    padding: 4px 10px;
    border-radius: 6px;
    background: #1F2937;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.copy-toast.is-visible
{
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px));
}

.copy-toast::after
{
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #1F2937;
}

/* Refer & Earn modal intro line — sits above the two link fields.
   Brand-tinted callout so it reads as helpful framing rather than
   noise. */
.referral-intro
{
    background: #FFF5F8;
    border: 1px solid #FFD1E2;
    border-radius: 10px;
    padding: 10px 14px;
    color: #9F0050;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================================
   Zendesk chat launcher — modal-open behaviour.
   The launcher iframe (#launcher, title "…messaging window") carries a base
   `transform: scale(0.5)` (lobby_new.css) that shrinks the native 64px widget
   to a 32px icon. It is intentionally left untouched when a modal opens: it
   keeps its size AND its fixed bottom-right position.

   A previous `body.modal-open` rule set `transform: translateY(-72px)` to lift
   the launcher above modal footers, but `transform` is a single property, so
   that value overwrote the base `scale(0.5)` — doubling the icon (32px → 64px)
   every time any modal opened. Rather than reintroduce the size clash, the lift
   is dropped so the icon simply stays put. (Re-add a lift only as
   `translateY(...) scale(0.5)` if it's ever needed again.)
   ============================================================ */

/* ============================================================
   Site footer — dark gradient strip with brand-pink top accent,
   icon-button social links, and an "18+" badge in the meta row.
   Replaces the previous slim pink-tinted footer to match the
   updated Footer-UI reference.
   ============================================================ */
/* Keep the site footer pinned to the viewport bottom on short pages. The
   min-height gives the body room; `position: sticky; top: 100vh` drops the
   footer to the bottom edge when content is short and stays inert (natural
   flow) on tall pages. Sticky still anchors the .site-footer::before strip. */
html,
body
{
    min-height: 100vh;
}

.site-footer
{
    --ft-bg-deep:   #1a0418;
    --ft-bg:        #2a0822;
    --ft-border:    rgba(255, 255, 255, 0.08);
    --ft-pink:      #ec008c;
    --ft-pink-hot:  #ff4081;
    --ft-pink-soft: #ffb6d9;
    --ft-text-dim:  #a48aa0;
    margin-top: 48px;
    background: linear-gradient(180deg, var(--ft-bg) 0%, var(--ft-bg-deep) 100%);
    color: #fff;
    padding: 14px 32px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    position: sticky;
    top: 100vh;
}

/* Thin pink accent strip on top edge of the footer. */
.site-footer::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ft-pink) 30%,
        var(--ft-pink-hot) 50%,
        var(--ft-pink) 70%,
        transparent 100%);
}

.site-footer__inner
{
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer__links
{
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.site-footer__links a
{
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ft-border);
    color: var(--ft-pink-soft);
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease,
                color 180ms ease, border-color 180ms ease;
}

.site-footer__links a:hover
{
    background: var(--ft-pink);
    border-color: var(--ft-pink);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.site-footer__links a:focus-visible
{
    outline: 2px solid var(--ft-pink-hot);
    outline-offset: 2px;
}

.site-footer__links svg
{
    width: 18px;
    height: 18px;
}

.site-footer__meta
{
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ft-text-dim);
    font-size: 14px;
}

.site-footer__copy
{
    color: var(--ft-text-dim);
    text-align: left;
}

.site-footer__dot
{
    color: rgba(255, 182, 217, 0.4);
}

.site-footer__age
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 8px;
    background: linear-gradient(135deg, var(--ft-pink) 0%, var(--ft-pink-hot) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(236, 0, 140, 0.35);
}

@media (max-width: 640px)
{
    .site-footer
    {
        padding: 20px;
    }
    .site-footer__inner
    {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }
    .site-footer__links
    {
        gap: 10px;
        justify-content: center;
    }
    .site-footer__meta
    {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================================
   Brand-aligned primary CTA buttons.
   The codebase mixes Bootstrap `btn-success` (Roll, Buy Tickets,
   Verify Email) / `btn-primary` (post-WoF promo) / `btn-outline-primary`
   (Send Email Code) — repaint them all to the pink brand so every
   primary CTA on the site reads as the same action color.
   `btn-outline-danger` is left alone (Disable 2FA — destructive).
   ============================================================ */

.btn.btn-success,
.btn.btn-primary
{
    background: linear-gradient(180deg, #FF5297 0%, #EC0078 100%);
    border-color: #EC0078;
    color: #fff;
}

.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active
{
    background: linear-gradient(180deg, #FF3D8A 0%, #D60068 100%);
    border-color: #D60068;
    color: #fff;
    box-shadow: 0 4px 12px rgba(236, 25, 102, 0.3);
}

.btn.btn-success:disabled,
.btn.btn-success.disabled,
.btn.btn-primary:disabled,
.btn.btn-primary.disabled
{
    background: linear-gradient(180deg, #FFB8D2 0%, #F58AB6 100%);
    border-color: #F58AB6;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

.btn.btn-outline-primary
{
    background: transparent;
    border-color: #EC0078;
    color: #EC0078;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active
{
    background: #FFE9F2;
    border-color: #EC0078;
    color: #9F0050;
}

/* ============================================================
   Heading scale.
   The lobby previously had heading sizes scattered between 18px,
   24px, 56px, 80px, etc. Settle on three sizes used consistently
   so the visual hierarchy is predictable from page to page.
   Scoped to the logged-in lobby body classes so the blog (which
   has its own type system) and admin pages stay untouched.
   ============================================================ */
body.lobby-new-body h1,
body.game-page-body h1,
body.wof-redesign h1,
body.bg-light h1
{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
}

body.lobby-new-body h2,
body.game-page-body h2,
body.wof-redesign h2,
body.bg-light h2
{
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

body.lobby-new-body h3,
body.game-page-body h3,
body.wof-redesign h3,
body.bg-light h3
{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

/* The Jackpot Minigames section heading on the homepage uses
   .newJackpotMiniGames-heading with a clamp(32px, 6vw, 58px). Cap
   it at the new H2 size so it doesn't tower over everything else
   on wide viewports. */
.newJackpotMiniGames-heading
{
    font-size: clamp(24px, 4vw, 32px) !important;
}

/* "Play Games" heading on the lobby. Keep the size, but tame
   anything taller than our new H2 cap. */
.newPlayGames-heading
{
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
}

/* ============================================================
   Button / pill radius standard.
   Conventions:
     • 999px — chips, badges, top-nav pills, the brand button
                pills (.btn-primary / .btn-success / friends)
     • 12px  — modal action surfaces (Crash play / Plinko drop /
                deposit address cards)
     • 8px   — form inputs
   Bootstrap defaults to 0.375rem (6px) for inputs and 0.5rem (8px)
   for buttons. Override globally — scoped to the logged-in body
   classes so the blog isn't affected.
   ============================================================ */
body.lobby-new-body .btn,
body.game-page-body .btn,
body.wof-redesign .btn,
body.bg-light .btn
{
    border-radius: 999px;
}

body.lobby-new-body .btn-sm,
body.game-page-body .btn-sm,
body.wof-redesign .btn-sm,
body.bg-light .btn-sm
{
    border-radius: 999px;
}

body.lobby-new-body .form-control,
body.lobby-new-body .form-select,
body.game-page-body .form-control,
body.game-page-body .form-select,
body.wof-redesign .form-control,
body.wof-redesign .form-select,
body.bg-light .form-control,
body.bg-light .form-select
{
    border-radius: 8px;
}

body.lobby-new-body .input-group > .form-control,
body.game-page-body .input-group > .form-control,
body.wof-redesign .input-group > .form-control,
body.bg-light .input-group > .form-control
{
    border-radius: 0;
}

body.lobby-new-body .input-group > .form-control:first-child,
body.game-page-body .input-group > .form-control:first-child,
body.wof-redesign .input-group > .form-control:first-child,
body.bg-light .input-group > .form-control:first-child
{
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

body.lobby-new-body .input-group > .form-control:last-child,
body.game-page-body .input-group > .form-control:last-child,
body.wof-redesign .input-group > .form-control:last-child,
body.bg-light .input-group > .form-control:last-child
{
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Input-group buttons that flank a number input (e.g. -/+ on bet
   amounts) should match the input's 8px radius, not the global
   999px pill — pills next to a rounded rectangle look broken. */
body.lobby-new-body .input-group > .btn,
body.game-page-body .input-group > .btn,
body.wof-redesign .input-group > .btn,
body.bg-light .input-group > .btn
{
    border-radius: 8px;
}

body.lobby-new-body .input-group > .btn:not(:first-child),
body.game-page-body .input-group > .btn:not(:first-child),
body.wof-redesign .input-group > .btn:not(:first-child),
body.bg-light .input-group > .btn:not(:first-child)
{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.lobby-new-body .input-group > .btn:not(:last-child),
body.game-page-body .input-group > .btn:not(:last-child),
body.wof-redesign .input-group > .btn:not(:last-child),
body.bg-light .input-group > .btn:not(:last-child)
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   Game info modal (racing + minesweeper) — visually align with the
   coinflip `.icon-key-modal` so the Jackpot Minigames tabs feel
   consistent. Coinflip uses a hand-rolled modal (`.icon-key-modal`);
   racing + minesweeper inherit Bootstrap's `.modal` machinery, so we
   keep the Bootstrap modal structure and just restyle the chrome:
   rounded card, padded body, lightweight "×" close button instead of
   Bootstrap's SVG btn-close.

   Scope:
   - `.game-info-modal#jrInfoModal` (racing) and
     `.game-info-modal#iconKeyModal` (minesweeper) — both Bootstrap
     modals that opt into the shared `.game-info-modal` flag.
   - `:not(#dailyCapModal)` keeps wof.html's daily-free-spins info
     modal on Bootstrap defaults (different content shape: progress
     bar + multi-paragraph body, would clip with the new tighter
     padding).
   ========================================================================== */
/* Bootstrap's own `.modal { position: fixed; inset: 0; width: 100%;
   height: 100% }` rule occasionally fails to win the cascade for the
   info modals — one of the later production stylesheets resets
   `.modal` to `position: static` and the dialog ends up sitting
   in-flow after the game content (768+ px below the iframe top
   instead of centered). Pin the .modal element itself to a
   fixed-position viewport overlay so the centered-dialog flex layout
   in `embedded_game.css` can do its job and the card lands at the
   middle of the iframe, matching coinflip's `.icon-key-backdrop`
   centered placement. */
.modal.game-info-modal:not(#dailyCapModal)
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal.game-info-modal:not(#dailyCapModal) .modal-content
{
    border-radius: 20px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    padding: 1.4rem 1.5rem 1.6rem;
    color: #1f1f1f;
    /* In embed mode the dialog is `display: flex` (set by
       `embedded_game.css`) so a default-sized modal-content collapses
       to its intrinsic content width — fine for wide labels like
       "Earn FUN when revealed", but the racing prize rows ("1st Place
       : 8 FUN") leave the card crammed at ~200px. Pin modal-content
       to the dialog's full width so the card always reads at the
       max-width we set on the dialog. */
    width: 100%;
}

.modal.game-info-modal:not(#dailyCapModal) .modal-header
{
    padding: 0;
    margin-bottom: 1rem;
    border-bottom: none;
    align-items: center;
}

.modal.game-info-modal:not(#dailyCapModal) .modal-title
{
    font-size: 1rem;
    font-weight: 700;
    color: #1f1f1f;
    text-align: left;
    width: auto;
    line-height: 1.2;
}

/* Replace Bootstrap's SVG close icon with a plain × character matched
   to coinflip's `.icon-key-close { border: none; background:
   transparent; font-size: 1.1rem; font-weight: 700; color: #1f1f1f; }`.
   The original `.btn-close` element is kept so `data-bs-dismiss=
   "modal"` (Bootstrap's close-on-click handler) still fires — we just
   blank its background image and overlay a ::before glyph. The
   `.modal-header { display: flex; justify-content: space-between }`
   default already pins the button to the top-right of the card. */
.modal.game-info-modal:not(#dailyCapModal) .btn-close
{
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    opacity: 1;
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f1f1f;
    line-height: 1;
}

.modal.game-info-modal:not(#dailyCapModal) .btn-close::before
{
    content: "\00d7";
    line-height: 1;
}

.modal.game-info-modal:not(#dailyCapModal) .modal-body
{
    padding: 0;
}

/* Minesweeper's info modal only shows two short rows ("Earn FUN when
   revealed" / "Ends the round instantly"), so Bootstrap's default
   500px dialog width feels overly wide and leaves a stretched empty
   strip on either side of the icon list. Cap to 440px to match the
   coinflip `.icon-key-modal { width: min(440px, 100%) }` reference. */
.modal.game-info-modal#iconKeyModal .modal-dialog
{
    max-width: 440px;
}

/* Match the coinflip `.icon-key-modal { width: min(440px, 100%) }`
   reference so the racing info modal feels visually identical to its
   sibling tab: same 440px card width and same centered placement.

   The global `.modal.show .modal-dialog { max-width: 660px; top: 45%;
   transform: translateY(-50%); }` rule earlier in this file would
   otherwise cascade onto racing and either widen the card past 440 or
   shift it off-center; clear `top` / `transform` here so the
   embed-mode flex-center on `.modal-dialog` (set in
   `embedded_game.css`) drives placement, matching the
   `.icon-key-backdrop { align-items: center; justify-content: center }`
   pattern. */
.modal.game-info-modal#jrInfoModal .modal-dialog
{
    max-width: 440px;
    top: auto;
    transform: none;
    /* Anchor the racing modal near the top of the iframe (≈25% down)
       so a clear breathing strip stays visible between the "Jackpot
       Racing" title and the modal card — matches the visual placement
       of coinflip's `.icon-key-modal` (which lands at iframe top
       ~224px / 871px ≈ 26% via its flex-center backdrop). Embed-mode
       sets `align-items: center` on this dialog; flex-start + a
       fixed top padding lets the card sit in roughly the same
       proportional slot regardless of iframe height. */
    align-items: flex-start;
    padding-top: 240px;
}

/* Tint the modal backdrop with coinflip's `rgba(8, 12, 22, 0.7)`
   shade so the game-info modal feels consistent across all jackpot
   tabs — racing and minesweeper inherit Bootstrap's `.modal-backdrop`
   (default `#000` / 50% opacity), and outside the info-modal context
   we leave the deployed backdrop alone. The `:has()` selector lets us
   scope to the case where a `.game-info-modal` is currently shown
   alongside the backdrop; browsers without `:has()` (pre-Chrome 105 /
   Safari 15.4 / Firefox 121) fall back to the default backdrop, which
   is still functional. */
body:has(.modal.game-info-modal:not(#dailyCapModal).show) > .modal-backdrop.show
{
    background-color: rgb(8, 12, 22);
    opacity: 0.7;
}

/* ============================================================
   Auto-Bet History modal — shared across coin / crash / highlow /
   plinko / roll / roulette / rps / scratchcard.
   1. Wider dialog so the 8 history columns (Bet # / Bet / Choice /
      Outcome / Result / Balance / Remaining / Time) breathe — was
      Bootstrap's `modal-lg` default (800px), which cramped the
      Balance column at typical FUN balances.
   2. Re-introduce a visible × close icon at the top-right. The
      global `.modal-header .btn-close { --bs-btn-close-bg: none }`
      rule earlier in this file blanks Bootstrap's SVG; without a
      replacement glyph the close button is invisible on this modal
      and on the quiz / WOF promo modals. Keep the shared `::before
      "×"` treatment consolidated so all three modals stay visually
      aligned while the Bootstrap `data-bs-dismiss="modal"` handler
      keeps working.
   ============================================================ */
#autoBetsModal .modal-dialog,
#penalty-shot-auto-bets-modal .modal-dialog,
#basketball-hoop-auto-bets-modal .modal-dialog,
#egg-crack-auto-bets-modal .modal-dialog,
#higher-or-lower-auto-bets-modal .modal-dialog,
#lucky-dumpling-auto-bets-modal .modal-dialog,
#boxing-ring-auto-bets-modal .modal-dialog,
#ghost-blaster-auto-bets-modal .modal-dialog,
#zombie-barricade-auto-bets-modal .modal-dialog,
#witch-flight-auto-bets-modal .modal-dialog,
#cricket-sixer-auto-bets-modal .modal-dialog
{
    max-width: 920px;
}

#autoBetsModal .modal-header .btn-close,
#penalty-shot-auto-bets-modal .modal-header .btn-close,
#basketball-hoop-auto-bets-modal .modal-header .btn-close,
#egg-crack-auto-bets-modal .modal-header .btn-close,
#higher-or-lower-auto-bets-modal .modal-header .btn-close,
#lucky-dumpling-auto-bets-modal .modal-header .btn-close,
#boxing-ring-auto-bets-modal .modal-header .btn-close,
#ghost-blaster-auto-bets-modal .modal-header .btn-close,
#zombie-barricade-auto-bets-modal .modal-header .btn-close,
#witch-flight-auto-bets-modal .modal-header .btn-close,
#cricket-sixer-auto-bets-modal .modal-header .btn-close,
#quizBetModal .modal-header .btn-close,
#freeSpinPromoModal .modal-header .btn-close
{
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    opacity: 1;
    position: absolute;
    top: 14px;
    right: 22px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #1f1f1f;
    line-height: 1;
}

#autoBetsModal .modal-header .btn-close::before,
#penalty-shot-auto-bets-modal .modal-header .btn-close::before,
#basketball-hoop-auto-bets-modal .modal-header .btn-close::before,
#egg-crack-auto-bets-modal .modal-header .btn-close::before,
#higher-or-lower-auto-bets-modal .modal-header .btn-close::before,
#lucky-dumpling-auto-bets-modal .modal-header .btn-close::before,
#boxing-ring-auto-bets-modal .modal-header .btn-close::before,
#ghost-blaster-auto-bets-modal .modal-header .btn-close::before,
#zombie-barricade-auto-bets-modal .modal-header .btn-close::before,
#witch-flight-auto-bets-modal .modal-header .btn-close::before,
#cricket-sixer-auto-bets-modal .modal-header .btn-close::before,
#quizBetModal .modal-header .btn-close::before,
#freeSpinPromoModal .modal-header .btn-close::before
{
    content: "\00d7";
    line-height: 1;
}

#autoBetsModal .modal-header .btn-close:hover,
#penalty-shot-auto-bets-modal .modal-header .btn-close:hover,
#basketball-hoop-auto-bets-modal .modal-header .btn-close:hover,
#egg-crack-auto-bets-modal .modal-header .btn-close:hover,
#higher-or-lower-auto-bets-modal .modal-header .btn-close:hover,
#lucky-dumpling-auto-bets-modal .modal-header .btn-close:hover,
#boxing-ring-auto-bets-modal .modal-header .btn-close:hover,
#ghost-blaster-auto-bets-modal .modal-header .btn-close:hover,
#zombie-barricade-auto-bets-modal .modal-header .btn-close:hover,
#witch-flight-auto-bets-modal .modal-header .btn-close:hover,
#cricket-sixer-auto-bets-modal .modal-header .btn-close:hover,
#quizBetModal .modal-header .btn-close:hover,
#freeSpinPromoModal .modal-header .btn-close:hover
{
    color: #F23887;
}

/* ============================================================
   Live Bets section — new-UI reskin (reference: "Live-bets-new-UI-ref").
   Scoped to #liveFeedSection; the old <table> markup is replaced by an lb-*
   card list emitted from lobby_new.js (createLiveFeedRow). Same data source
   (/api/lobby/live_feed feed[]) and streaming pipeline. Font stays the site's
   Poppins (the reference used Rubik). id-scoped so these win over the legacy
   .live-feed-* / .full-feed-* class rules in lobby_new.css / lobby_body.css.
   ============================================================ */
#liveFeedSection
{
    --lb-pink: #EC1966;
    --lb-pink-bright: #FF2E8C;
    --lb-pink-deep: #BC1351;
    --lb-midnight: #0D1C32;
    --lb-slate: #6B6775;
    --lb-fg-dim: #9AA0AD;
    --lb-line: #EFEFF4;
    --lb-line-pink: #F6E4EE;
    --lb-tint: rgba(236, 25, 102, .08);
    --lb-win-ink: #15803D;
    --lb-win: #22C55E;
    --lb-lose-ink: #B91C1C;
    --lb-lose: #EF4444;
    --lb-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--lb-line);
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 0 16px 40px -28px rgba(28, 59, 106, .35);
    font-family: Poppins, sans-serif;
}
#liveFeedSection::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 2;
    background: linear-gradient(180deg, var(--lb-pink-bright), var(--lb-pink-deep));
}
#liveFeedSection .tnum
{
    font-variant-numeric: tabular-nums;
}

/* header */
#liveFeedSection .lb-head
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px 12px 20px;
}
#liveFeedSection .lb-headL
{
    display: flex;
    align-items: center;
    gap: 10px;
}
#liveFeedSection .lb-title
{
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--lb-pink);
    line-height: 1;
}
#liveFeedSection .lb-live
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 8px;
    border-radius: 999px;
    background: var(--lb-tint);
    color: var(--lb-pink-deep);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
#liveFeedSection .lb-eq
{
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 10px;
}
#liveFeedSection .lb-eq i
{
    width: 2px;
    height: 100%;
    border-radius: 1px;
    background: currentColor;
    transform-origin: bottom;
    animation: lbEq .9s ease-in-out infinite;
}
#liveFeedSection .lb-eq i:nth-child(2) { animation-delay: .18s; }
#liveFeedSection .lb-eq i:nth-child(3) { animation-delay: .36s; }
#liveFeedSection .lb-eq i:nth-child(4) { animation-delay: .54s; }
@keyframes lbEq { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* stat chips */
#liveFeedSection .lb-stats
{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#liveFeedSection .lb-chip
{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px 6px 7px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--lb-line-pink);
}
#liveFeedSection .lb-chip-ic
{
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
    background: var(--lb-tint);
    color: var(--lb-pink);
}
#liveFeedSection .lb-chip-ic svg { width: 16px; height: 16px; }
#liveFeedSection .lb-chip-tx
{
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
#liveFeedSection .lb-chip-val
{
    font-size: 14px;
    font-weight: 800;
    color: var(--lb-midnight);
    letter-spacing: -.01em;
}
#liveFeedSection .lb-chip-lbl
{
    font-size: 8.5px;
    font-weight: 700;
    color: var(--lb-fg-dim);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}
#liveFeedSection .lb-chip--players .lb-chip-val
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#liveFeedSection .lb-chip--players .lb-chip-val::before
{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lb-pink);
    animation: lbBeat 2s ease-in-out infinite;
}
@keyframes lbBeat { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 25, 102, .5); } 50% { box-shadow: 0 0 0 5px rgba(236, 25, 102, 0); } }
#liveFeedSection .lb-chip--wagered
{
    border-color: transparent;
    background: linear-gradient(120deg, var(--lb-pink-bright), var(--lb-pink-deep));
    box-shadow: 0 10px 20px -12px rgba(236, 25, 102, .7);
}
#liveFeedSection .lb-chip--wagered .lb-chip-ic { background: rgba(255, 255, 255, .22); color: #fff; }
#liveFeedSection .lb-chip--wagered .lb-chip-val { color: #fff; }
#liveFeedSection .lb-chip--wagered .lb-chip-lbl { color: rgba(255, 255, 255, .9); }

/* column hint */
#liveFeedSection .lb-colhint
{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lb-fg-dim);
    border-top: 1px solid var(--lb-line);
}
#liveFeedSection .lb-colhint .r { text-align: right; }

/* feed list */
#liveFeedSection .lb-feed
{
    list-style: none;
    margin: 0;
    padding: 6px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
#liveFeedSection .lb-empty
{
    padding: 20px 6px;
    text-align: center;
    color: var(--lb-slate);
    font-size: 12.5px;
    font-weight: 600;
}
/* Two classes so this beats the equal-specificity `#liveFeedSection .lb-card`
   display:grid rule below regardless of source order (collapse to 10 / 30). */
#liveFeedSection .lb-card.lb-card--hidden { display: none; }

#liveFeedSection .lb-card
{
    position: relative;
    overflow: hidden;
    display: grid;
    /* icon | name | detail(game·wager·time) | right(mult·payout·result), all one
       row on desktop. Mobile drops the detail to its own row (see the max-width
       640px block). minmax(0,1fr) lets the detail ellipsize instead of blowing
       out the track and overlapping the right cluster. */
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "ic mid sub right";
    align-items: center;
    column-gap: 13px;
    padding: 9px 14px 9px 17px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid var(--lb-line-pink);
}
/* Left accent strip removed per design — the faint background tint plus the
   right-side WIN/LOSS pill already signal each result. */
#liveFeedSection .lb-card::before { content: none; }
#liveFeedSection .lb-card.win
{
    background: linear-gradient(90deg, rgba(34, 197, 94, .10), rgba(255, 255, 255, 0) 46%);
    border-color: rgba(34, 197, 94, .26);
}
#liveFeedSection .lb-card.lose
{
    background: linear-gradient(90deg, rgba(239, 68, 68, .09), rgba(255, 255, 255, 0) 46%);
    border-color: rgba(239, 68, 68, .24);
}
#liveFeedSection .lb-card.is-big
{
    border-color: rgba(34, 197, 94, .5);
    box-shadow: 0 12px 26px -18px rgba(22, 163, 74, .6);
}

#liveFeedSection .lb-ic
{
    grid-area: ic;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--lb-pink);
    background: var(--lb-tint);
}
#liveFeedSection .lb-ic svg { width: 19px; height: 19px; display: block; }
#liveFeedSection .lb-card.win .lb-ic { color: #16A34A; background: rgba(34, 197, 94, .13); }
#liveFeedSection .lb-card.lose .lb-ic { color: #DC2626; background: rgba(239, 68, 68, .11); }
#liveFeedSection .lb-card.is-big .lb-ic { background: linear-gradient(135deg, #4ADE80, #16A34A); color: #fff; }

/* Player name and the game·wager·time detail sit on ONE line (detail to the
   right of the name via the grid areas above); the detail drops to its own row
   on mobile (see the max-width 640px block below). */
#liveFeedSection .lb-mid { grid-area: mid; min-width: 0; }
#liveFeedSection .lb-nameRow { display: flex; align-items: center; gap: 4px; min-width: 0; }
#liveFeedSection .lb-name
{
    font-size: 13.5px;
    font-weight: 800;
    color: var(--lb-midnight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#liveFeedSection .lb-tag
{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(34, 197, 94, .16);
    color: #15803D;
}
#liveFeedSection .lb-tag svg { width: 8px; height: 8px; }
#liveFeedSection .lb-sub
{
    grid-area: sub;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--lb-slate);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#liveFeedSection .lb-sub .g { color: var(--lb-midnight); font-weight: 700; }
#liveFeedSection .lb-sub .sep
{
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--lb-fg-dim);
    vertical-align: middle;
    margin: 0 7px;
}
#liveFeedSection .lb-sub .t { color: var(--lb-fg-dim); font-weight: 500; }

#liveFeedSection .lb-right
{
    grid-area: right;
    display: flex;
    align-items: center;
    gap: 12px;
}
#liveFeedSection .lb-mult
{
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: -.01em;
}
#liveFeedSection .lb-mult.win { color: var(--lb-win-ink); background: rgba(34, 197, 94, .14); }
#liveFeedSection .lb-mult.loss { color: var(--lb-slate); background: rgba(107, 103, 117, .1); }
#liveFeedSection .lb-amt
{
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    min-width: 96px;
    justify-content: flex-end;
}
#liveFeedSection .lb-amt .u { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .9; }
#liveFeedSection .lb-amt.win { color: var(--lb-win-ink); }
#liveFeedSection .lb-amt.win .u { color: var(--lb-win); }
#liveFeedSection .lb-amt.loss { color: var(--lb-lose-ink); }
#liveFeedSection .lb-amt.loss .u { color: var(--lb-lose); }
#liveFeedSection .lb-res
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}
#liveFeedSection .lb-res.win { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 6px 13px -6px rgba(22, 163, 74, .55); }
#liveFeedSection .lb-res.lose { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 6px 13px -6px rgba(220, 38, 38, .45); }

/* new-row slide-in */
#liveFeedSection .lb-card.is-new { animation: lbIn .45s var(--lb-ease); }
@keyframes lbIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* view more */
#liveFeedSection .lb-morebtn
{
    appearance: none;
    cursor: pointer;
    width: calc(100% - 28px);
    margin: 2px 14px 12px;
    padding: 11px;
    border-radius: 12px;
    border: 1px solid var(--lb-line-pink);
    background: #FFFFFF;
    color: var(--lb-pink-deep);
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background .15s, border-color .15s, transform .1s;
}
#liveFeedSection .lb-morebtn:hover { background: var(--lb-tint); border-color: rgba(236, 25, 102, .32); }
#liveFeedSection .lb-morebtn:active { transform: scale(.99); }
#liveFeedSection .lb-morebtn:focus-visible { outline: 3px solid var(--lb-pink); outline-offset: 2px; }
#liveFeedSection .lb-morebtn svg { width: 14px; height: 14px; transition: transform .2s; }
#liveFeedSection .lb-morebtn.is-open svg { transform: rotate(180deg); }
#liveFeedSection .lb-morebtn[hidden] { display: none; }

@media (max-width: 640px)
{
    #liveFeedSection .lb-head { padding: 16px; }
    #liveFeedSection .lb-stats { width: 100%; }
    #liveFeedSection .lb-chip { flex: 1 1 0; }
    #liveFeedSection .lb-colhint { display: none; }
    #liveFeedSection .lb-amt { min-width: 0; }
    #liveFeedSection .lb-right { gap: 8px; }
    /* On narrow screens the name + detail don't both fit on one line, so the
       game·wager·time detail drops to its own full-width row beneath the
       name + result cluster (row-gap gives it a little top spacing so it no
       longer sits under the multiplier / payout). */
    #liveFeedSection .lb-card
    {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "ic mid   right"
            "ic sub   sub";
        row-gap: 5px;
    }
}
@media (prefers-reduced-motion: reduce)
{
    #liveFeedSection .lb-eq i,
    #liveFeedSection .lb-chip--players .lb-chip-val::before,
    #liveFeedSection .lb-card.is-new { animation: none; }
}