/*=============================================
                    ROOT START
=============================================*/

:root {
    --page-background: #f3e8ff;

    --purple-dark: #26105f;
    --purple-main: #7423df;
    --purple-light: #a933ee;

    --pink-main: #ea39c5;

    --yellow-main: #ffd536;
    --yellow-light: #ffeb70;
    --yellow-dark: #f4b30b;

    --text-main: #27105f;
    --text-secondary: #4f3970;
    --text-muted: #69587f;

    --container-width: 1680px;
    --header-height: 82px;

    --transition-fast: 0.2s ease;
    --transition-main: 0.35s ease;
}

/*=============================================
                     ROOT END
=============================================*/


/*=============================================
                    BASE START
=============================================*/

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text-main);

    background: var(--page-background);

    line-height: 1.55;
}

body.nav-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

main {
    overflow: hidden;
}

section {
    scroll-margin-top:
        calc(
            var(--header-height) + 18px
        );
}

/*=============================================
                     BASE END
=============================================*/


/*=============================================
                   HEADER START
=============================================*/

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    z-index: 1000;

    background:
        rgba(250, 247, 255, 0.96);

    border-bottom:
        1px solid
        rgba(117, 36, 223, 0.10);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:
        background var(--transition-main),
        border-color var(--transition-main),
        box-shadow var(--transition-main);
}

.site-header.is-scrolled {
    background:
        rgba(252, 250, 255, 0.99);

    border-color:
        rgba(117, 36, 223, 0.16);

    box-shadow:
        0 12px 30px
        rgba(71, 31, 114, 0.10);
}

.site-header-inner {
    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    gap: 22px;
}

/*=============================================
                    HEADER END
=============================================*/


/*=============================================
                    LOGO START
=============================================*/

.site-logo {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}

.site-logo-symbol {
    width: 40px;
    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #b445ff 0%,
            #7624e3 54%,
            #4612aa 100%
        );

    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    box-shadow:
        0 7px 20px
        rgba(108, 35, 218, 0.27);
}

.site-logo-text {
    display: flex;

    flex-direction: column;

    line-height: 1;
}

.site-logo-text strong {
    background:
        linear-gradient(
            90deg,
            #321279 0%,
            #8126e3 52%,
            #db37bb 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    font-size: 27px;

    font-weight: 900;

    letter-spacing: -0.04em;
}

.site-logo-text small {
    margin-top: 5px;

    color: #7b2bd7;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.23em;

    text-transform: uppercase;
}

/*=============================================
                     LOGO END
=============================================*/


/*=============================================
                NAVIGATION START
=============================================*/

.main-navigation {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 4px;
}

.main-navigation a {
    position: relative;

    padding: 11px 12px;

    border-radius: 10px;

    color: #382067;

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
    color: var(--purple-main);

    background:
        rgba(117, 36, 223, 0.07);

    outline: none;
}

.main-navigation a.is-active {
    color: var(--purple-main);
}

.main-navigation a.is-active::after {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    bottom: 2px;

    height: 3px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--purple-main),
            var(--pink-main)
        );
}

/*=============================================
                 NAVIGATION END
=============================================*/


/*=============================================
                HEADER CTA START
=============================================*/

.header-play {
    min-height: 48px;

    padding: 0 29px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 220, 58, 0.95);

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #ffec68 0%,
            #ffd736 48%,
            #f8b80c 100%
        );

    color: #281159;

    font-size: 14px;

    font-weight: 900;

    box-shadow:
        0 10px 24px
        rgba(117, 65, 0, 0.14);

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast),
        box-shadow var(--transition-fast);
}

.header-play:hover,
.header-play:focus-visible {
    transform:
        translateY(-2px);

    filter:
        brightness(1.04);

    box-shadow:
        0 15px 30px
        rgba(99, 52, 0, 0.18);

    outline: none;
}

/*=============================================
                 HEADER CTA END
=============================================*/


/*=============================================
                MOBILE MENU START
=============================================*/

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    margin-left: auto;

    padding: 10px;

    border:
        1px solid
        rgba(112, 38, 215, 0.15);

    border-radius: 12px;

    background:
        rgba(113, 39, 215, 0.06);

    cursor: pointer;
}

.nav-toggle span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 10px;

    background: var(--purple-dark);

    transition:
        transform var(--transition-main),
        opacity var(--transition-main);
}

.nav-toggle.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}

/*=============================================
                 MOBILE MENU END
=============================================*/


/*=============================================
                    HERO START
=============================================*/

.casino-hero {
    position: relative;

    margin-top: var(--header-height);

    min-height:
        calc(100vh - var(--header-height));

    min-height:
        calc(100svh - var(--header-height));

    overflow: hidden;

    isolation: isolate;

    background: #e8d7ff;
}


/*=============================================
              HERO BACKGROUND START
=============================================*/

.hero-background {
    position: absolute;

    inset: 0;

    z-index: -5;

    background:
        url("../images/hero.webp")
        center center / cover
        no-repeat;
}

.hero-background::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(78, 25, 146, 0.015) 0%,
            rgba(106, 36, 167, 0.025) 48%,
            rgba(70, 19, 130, 0.045) 100%
        );
}

.hero-shade {
    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 73% 50%,
            rgba(255, 255, 255, 0.24) 0%,
            rgba(255, 255, 255, 0.18) 27%,
            rgba(255, 255, 255, 0.09) 43%,
            rgba(255, 255, 255, 0.00) 64%
        );
}

/*=============================================
               HERO BACKGROUND END
=============================================*/


/*=============================================
                 HERO LAYOUT START
=============================================*/

.hero-layout {
    position: relative;

    width:
        min(
            calc(100% - 56px),
            var(--container-width)
        );

    min-height:
        calc(100vh - var(--header-height));

    min-height:
        calc(100svh - var(--header-height));

    margin: 0 auto;

    padding:
        36px
        0
        34px;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.78fr)
        minmax(830px, 1.22fr);

    align-items: center;

    gap: 12px;
}

/*=============================================
                  HERO LAYOUT END
=============================================*/


/*=============================================
                   HERO COPY START
=============================================*/

.hero-copy {
    position: relative;

    z-index: 40;

    max-width: 620px;
}

.hero-kicker {
    display: inline-block;

    margin-bottom: 15px;

    color: #6720c8;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0;

    color: #25105d;

    font-size:
        clamp(
            64px,
            4.8vw,
            84px
        );

    font-weight: 900;

    line-height: 0.94;

    letter-spacing: -0.05em;
}

.hero-copy h1 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #6d20dc 0%,
            #9e28e8 45%,
            #e536c2 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}

.hero-tagline {
    max-width: 595px;

    margin:
        27px
        0
        0;

    color: #2e1765;

    font-size:
        clamp(
            22px,
            1.5vw,
            27px
        );

    font-weight: 900;

    line-height: 1.32;
}

.hero-description {
    max-width: 590px;

    margin:
        16px
        0
        0;

    color: #493969;

    font-size:
        clamp(
            16px,
            1.03vw,
            18px
        );

    font-weight: 500;

    line-height: 1.65;
}

/*=============================================
                    HERO COPY END
=============================================*/


/*=============================================
                  HERO ACTION START
=============================================*/

.hero-action {
    width: fit-content;

    margin-top: 25px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 9px;
}

.hero-play {
    min-width: 220px;
    min-height: 58px;

    padding:
        0
        30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border:
        1px solid
        rgba(255, 226, 86, 0.98);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fff06d 0%,
            #ffd83d 49%,
            #f9b711 100%
        );

    color: #281159;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 14px 30px
        rgba(103, 56, 0, 0.16);

    transition:
        transform var(--transition-fast),
        filter var(--transition-fast);
}

.hero-play svg {
    width: 20px;
    height: 20px;

    flex:
        0
        0
        20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.hero-play:hover,
.hero-play:focus-visible {
    transform:
        translateY(-3px);

    filter:
        brightness(1.04);

    outline: none;
}

.hero-canada-note {
    padding-left: 3px;

    color: #58496f;

    font-size: 13px;

    font-weight: 700;
}

/*=============================================
                   HERO ACTION END
=============================================*/


/*=============================================
                HERO HIGHLIGHTS START
=============================================*/

.hero-highlights {
    max-width: 610px;

    margin-top: 27px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}

.hero-highlight {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;
}

.hero-highlight-icon {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid
        rgba(124, 43, 226, 0.22);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.70);

    color: #7422d9;

    font-size: 16px;

    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(77, 31, 132, 0.08);
}

.hero-highlight div {
    min-width: 0;

    display: flex;

    flex-direction: column;
}

.hero-highlight strong {
    color: #2d1762;

    font-size: 14px;

    font-weight: 900;
}

.hero-highlight div span {
    margin-top: 3px;

    color: #5c4d73;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.35;
}

/*=============================================
                 HERO HIGHLIGHTS END
=============================================*/


/*=============================================
                  HERO STAGE START
=============================================*/

.hero-stage {
    position: relative;

    width: 100%;

    min-height: 620px;
}

.hero-categories {
    position: absolute;

    inset: 0;

    z-index: 30;

    pointer-events: none;
}

/*=============================================
                   HERO STAGE END
=============================================*/


/*=============================================
                  HERO CARDS START
=============================================*/

.hero-category-card {
    --card-color: 126, 42, 230;

    position: absolute;

    width:
        clamp(
            150px,
            9.2vw,
            174px
        );

    aspect-ratio:
        360 / 600;

    overflow: hidden;

    border:
        2px solid
        rgba(
            var(--card-color),
            0.90
        );

    border-radius: 18px;

    background: #4a188b;

    pointer-events: auto;

    isolation: isolate;

    box-shadow:
        0 20px 38px
        rgba(67, 24, 108, 0.24),
        0 0 18px
        rgba(
            var(--card-color),
            0.34
        );

    transition:
        transform var(--transition-main),
        box-shadow var(--transition-main);
}

.hero-category-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transition:
        transform var(--transition-main),
        filter var(--transition-main);
}

.hero-category-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(20, 6, 52, 0.00) 0%,
            rgba(20, 6, 52, 0.01) 54%,
            rgba(36, 6, 80, 0.74) 100%
        );
}

.hero-card-title {
    position: absolute;

    left: 8px;
    right: 8px;

    bottom: 12px;

    z-index: 4;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.1;

    text-align: center;

    text-shadow:
        0 4px 12px
        rgba(25, 4, 52, 0.85);
}


/*=============================================
                    SLOTS
=============================================*/

.hero-card-slots {
    --card-color: 241, 62, 195;

    left: 4%;

    top: 36%;

    z-index: 10;

    transform:
        rotate(-6deg);
}

.hero-card-slots img {
    transform:
        scale(1.07);
}


/*=============================================
                 TABLE GAMES
=============================================*/

.hero-card-tables {
    --card-color: 62, 106, 247;

    left: 18%;

    top: 30%;

    z-index: 20;

    transform:
        rotate(-3deg);
}

.hero-card-tables img {
    transform:
        scale(1.08);
}


/*=============================================
                 LIVE CASINO
=============================================*/

.hero-card-live {
    --card-color: 23, 213, 193;

    left: 32%;

    top: 35%;

    z-index: 30;

    width:
        clamp(
            154px,
            9.45vw,
            179px
        );

    transform:
        rotate(0deg);
}

.hero-card-live img {
    object-position:
        center 46%;

    transform:
        scale(1.04);
}


/*=============================================
                    BONUSES
=============================================*/

.hero-card-bonuses {
    --card-color: 239, 51, 188;

    left: 47%;

    top: 29%;

    z-index: 40;

    transform:
        rotate(2deg);
}

.hero-card-bonuses img {
    object-position:
        54% center;

    transform:
        scale(1.17);
}


/*=============================================
                  TOURNAMENTS
=============================================*/

.hero-card-tournaments {
    --card-color: 86, 96, 245;

    left: 62%;

    top: 34%;

    z-index: 50;

    transform:
        rotate(4deg);
}

.hero-card-tournaments img {
    transform:
        scale(1.16);
}


/*=============================================
                       VIP
=============================================*/

.hero-card-vip {
    --card-color: 164, 57, 230;

    left: 77%;

    top: 30%;

    z-index: 60;

    transform:
        rotate(6deg);
}

.hero-card-vip img {
    object-position:
        46% center;

    transform:
        scale(1.17);
}

/*=============================================
                   HERO CARDS END
=============================================*/


/*=============================================
                HERO CARD HOVER START
=============================================*/

.hero-category-card:hover,
.hero-category-card:focus-visible,
.hero-category-card.is-active {
    z-index: 100;

    box-shadow:
        0 28px 50px
        rgba(72, 22, 114, 0.31),
        0 0 25px
        rgba(
            var(--card-color),
            0.60
        );

    outline: none;
}

.hero-card-slots:hover,
.hero-card-slots:focus-visible,
.hero-card-slots.is-active {
    transform:
        rotate(-6deg)
        translateY(-9px)
        scale(1.055);
}

.hero-card-tables:hover,
.hero-card-tables:focus-visible,
.hero-card-tables.is-active {
    transform:
        rotate(-3deg)
        translateY(-9px)
        scale(1.055);
}

.hero-card-live:hover,
.hero-card-live:focus-visible,
.hero-card-live.is-active {
    transform:
        translateY(-9px)
        scale(1.055);
}

.hero-card-bonuses:hover,
.hero-card-bonuses:focus-visible,
.hero-card-bonuses.is-active {
    transform:
        rotate(2deg)
        translateY(-9px)
        scale(1.055);
}

.hero-card-tournaments:hover,
.hero-card-tournaments:focus-visible,
.hero-card-tournaments.is-active {
    transform:
        rotate(4deg)
        translateY(-9px)
        scale(1.055);
}

.hero-card-vip:hover,
.hero-card-vip:focus-visible,
.hero-card-vip.is-active {
    transform:
        rotate(6deg)
        translateY(-9px)
        scale(1.055);
}

.hero-category-card:hover img,
.hero-category-card:focus-visible img,
.hero-category-card.is-active img {
    filter:
        brightness(1.05)
        saturate(1.06);
}

/*=============================================
                 HERO CARD HOVER END
=============================================*/


/*=============================================
              HEADER RESPONSIVE START
=============================================*/

@media (max-width: 1160px) {

    .nav-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;

        top: var(--header-height);

        left: 18px;
        right: 18px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        padding: 14px;

        border:
            1px solid
            rgba(114, 34, 218, 0.15);

        border-radius: 16px;

        background:
            rgba(250, 247, 255, 0.99);

        box-shadow:
            0 20px 50px
            rgba(79, 34, 119, 0.18);
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation a {
        padding:
            13px
            14px;
    }

}

/*=============================================
               HEADER RESPONSIVE END
=============================================*/


/*=============================================
               HERO RESPONSIVE START
=============================================*/

@media (max-width: 1360px) {

    .hero-layout {
        grid-template-columns:
            minmax(390px, 0.80fr)
            minmax(600px, 1.20fr);
    }

    .hero-copy {
        max-width: 560px;
    }

    .hero-stage {
        min-height: 550px;
    }

    .hero-category-card {
        width: 132px;
    }

    .hero-card-live {
        width: 138px;
    }

    .hero-card-slots {
        left: 2%;
    }

    .hero-card-tables {
        left: 17%;
    }

    .hero-card-live {
        left: 32%;
    }

    .hero-card-bonuses {
        left: 47%;
    }

    .hero-card-tournaments {
        left: 62%;
    }

    .hero-card-vip {
        left: 77%;
    }

}


@media (max-width: 1120px) {

    .casino-hero {
        min-height: auto;
    }

    .hero-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        padding:
            48px
            0
            45px;

        gap: 38px;
    }

    .hero-copy {
        max-width: 720px;
    }

    .hero-stage {
        min-height: auto;
    }

    .hero-categories {
        position: relative;

        inset: auto;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .hero-category-card,
    .hero-card-slots,
    .hero-card-tables,
    .hero-card-live,
    .hero-card-bonuses,
    .hero-card-tournaments,
    .hero-card-vip {
        position: relative;

        top: auto;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;

        transform: none;
    }

    .hero-category-card:hover,
    .hero-category-card:focus-visible,
    .hero-category-card.is-active {
        transform:
            translateY(-6px)
            scale(1.025);
    }

}


@media (max-width: 820px) {

    .site-header-inner {
        width:
            calc(100% - 28px);
    }

    .header-play {
        display: none;
    }

    .hero-layout {
        width:
            calc(100% - 30px);
    }

    .hero-copy h1 {
        font-size:
            clamp(
                52px,
                13vw,
                70px
            );
    }

    .hero-tagline {
        font-size: 22px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-categories {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .hero-highlights {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .hero-highlight strong {
        font-size: 14px;
    }

    .hero-highlight div span {
        font-size: 12px;
    }

    .hero-background {
        background-position:
            61% center;
    }

}


@media (max-width: 520px) {

    .site-logo-text strong {
        font-size: 23px;
    }

    .hero-kicker {
        font-size: 12px;

        letter-spacing: 0.13em;
    }

    .hero-copy h1 {
        font-size:
            clamp(
                46px,
                14vw,
                60px
            );
    }

    .hero-tagline {
        font-size: 20px;
    }

    .hero-description {
        font-size: 16px;

        line-height: 1.6;
    }

    .hero-play {
        width: 100%;

        max-width: 300px;
    }

    .hero-canada-note {
        font-size: 12px;
    }

    .hero-categories {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

/*=============================================
                HERO RESPONSIVE END
=============================================*/

/*=============================================
                      HERO END
=============================================*/
/*=============================================
                    Slots Start
=============================================*/

.slots-section {
    --slots-purple: #a93cf3;
    --slots-purple-rgb: 169, 60, 243;

    --slots-pink: #ff3fbd;
    --slots-pink-rgb: 255, 63, 189;

    --slots-cyan: #46dcff;
    --slots-cyan-rgb: 70, 220, 255;

    --slots-gold: #ffc943;
    --slots-gold-rgb: 255, 201, 67;

    --slots-violet: #7255ff;
    --slots-violet-rgb: 114, 85, 255;

    --section-accent: #c65cff;
    --section-accent-rgb: 198, 92, 255;
    --section-accent-light: #efcfff;

    position: relative;

    padding:
        58px
        24px
        84px;

    overflow: hidden;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 82% 6%,
            rgba(243, 69, 255, 0.23) 0%,
            rgba(243, 69, 255, 0.07) 30%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 9% 30%,
            rgba(105, 74, 255, 0.24) 0%,
            rgba(105, 74, 255, 0.06) 32%,
            transparent 54%
        ),
        radial-gradient(
            ellipse at 72% 75%,
            rgba(72, 218, 255, 0.13) 0%,
            transparent 44%
        ),
        linear-gradient(
            145deg,
            #19052f 0%,
            #2d0b55 38%,
            #3b116d 68%,
            #18072e 100%
        );
}


.slots-section[hidden] {
    display: none !important;
}


.slots-section::before {
    content: "";

    position: absolute;

    top: 100px;
    right: -110px;

    z-index: -1;

    width: 330px;
    height: 330px;

    border:
        24px dashed
        rgba(221, 153, 255, 0.06);

    border-radius: 50%;

    transform:
        rotate(21deg);

    box-shadow:
        inset 0 0 0 36px
        rgba(116, 70, 255, 0.035),
        0 0 100px
        rgba(216, 75, 255, 0.09);
}


/*=============================================
                  Shell Start
=============================================*/

.slots-section .games-shell {
    position: relative;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.slots-section .games-main {
    min-width: 0;
}

/*=============================================
                   Shell End
=============================================*/


/*=============================================
              Site Switcher Start
=============================================*/

.slots-section .games-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 80;
}


.slots-section .games-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(208, 118, 255, 0.26);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(48, 10, 87, 0.94),
            rgba(20, 7, 45, 0.97)
        );

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    box-shadow:
        0 24px 58px
        rgba(5, 0, 18, 0.44),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08);
}


.slots-section .games-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.slots-section .games-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.slots-section .games-site-switcher-button {
    --site-rgb: 188, 84, 255;

    min-height: 66px;

    padding:
        9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.52
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                0.18
            ),
            rgba(255, 255, 255, 0.025)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(3, 0, 14, 0.22);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.slots-section
.games-site-switcher-button[data-section-target="slots"] {
    --site-rgb: 195, 75, 255;
}


.slots-section
.games-site-switcher-button[data-section-target="table-games"] {
    --site-rgb: 55, 202, 255;
}


.slots-section
.games-site-switcher-button[data-section-target="live-casino"] {
    --site-rgb: 48, 224, 195;
}


.slots-section
.games-site-switcher-button[data-section-target="bonuses"] {
    --site-rgb: 255, 60, 183;
}


.slots-section
.games-site-switcher-button[data-section-target="tournaments"] {
    --site-rgb: 102, 100, 255;
}


.slots-section
.games-site-switcher-button[data-section-target="vip"] {
    --site-rgb: 255, 184, 48;
}


.slots-section .games-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.86
        );

    border-radius: 12px;

    background:
        rgba(
            var(--site-rgb),
            0.15
        );

    color:
        rgb(
            var(--site-rgb)
        );

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 0 16px
        rgba(
            var(--site-rgb),
            0.12
        );
}


.slots-section .games-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.08;
}


.slots-section .games-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(238, 228, 247, 0.70);

    font-size: 9.5px;

    font-weight: 700;

    line-height: 1.18;
}


.slots-section .games-site-switcher-button:hover,
.slots-section .games-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        rgb(
            var(--site-rgb)
        );

    box-shadow:
        0 12px 25px
        rgba(3, 0, 15, 0.31),
        0 0 23px
        rgba(
            var(--site-rgb),
            0.22
        );

    outline: none;
}


.slots-section .games-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.82);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                1
            ),
            rgba(
                var(--site-rgb),
                0.68
            )
        );

    box-shadow:
        0 14px 30px
        rgba(5, 0, 20, 0.35),
        0 0 30px
        rgba(
            var(--site-rgb),
            0.36
        );
}


.slots-section
.games-site-switcher-button.is-active
.games-site-switcher-icon {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(255, 255, 255, 0.15);
}

/*=============================================
               Site Switcher End
=============================================*/


/*=============================================
                    Intro Start
=============================================*/

.slots-section .games-intro {
    margin-bottom: 18px;

    padding:
        36px
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 46px;

    align-items: center;

    border:
        1px solid
        rgba(216, 132, 255, 0.30);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 5% 5%,
            rgba(191, 67, 255, 0.23),
            transparent 40%
        ),
        radial-gradient(
            circle at 95% 95%,
            rgba(63, 221, 255, 0.11),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(69, 18, 119, 0.92),
            rgba(28, 8, 58, 0.96)
        );

    box-shadow:
        0 25px 60px
        rgba(7, 0, 25, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.08);
}


.slots-section .games-kicker,
.slots-section .games-panel-kicker {
    margin:
        0
        0
        8px;

    color: #efc7ff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.slots-section .games-intro h2 {
    margin: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #eed2ff 46%,
            #d77bff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    font-size:
        clamp(
            40px,
            3.5vw,
            58px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.slots-section .games-intro-lead {
    margin:
        19px
        0
        0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.6;
}


.slots-section .games-intro-secondary > p {
    margin: 0;

    color: #ddd2e9;

    font-size: 14px;

    line-height: 1.67;
}


.slots-section .games-intro-secondary > p + p {
    margin-top: 11px;
}


.slots-section .games-intro-more {
    margin-top: 17px;
}


.slots-section .games-intro-more summary {
    min-height: 45px;

    padding:
        0
        16px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    list-style: none;

    border:
        1px solid
        rgba(215, 129, 255, 0.55);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(189, 67, 255, 0.22),
            rgba(255, 56, 189, 0.11)
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;
}


.slots-section
.games-intro-more summary::-webkit-details-marker {
    display: none;
}


.slots-section .games-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #bd48ff,
            #ff3cbd
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;
}


.slots-section
.games-intro-more[open]
summary::after {
    transform:
        rotate(45deg);
}


.slots-section .games-intro-more-content {
    margin-top: 10px;

    padding:
        17px
        18px;

    max-height: 310px;

    overflow-y: auto;

    border:
        1px solid
        rgba(213, 124, 255, 0.20);

    border-radius: 13px;

    background:
        rgba(15, 4, 36, 0.48);
}


.slots-section .games-intro-more-content p {
    margin: 0;

    color: #d8cde4;

    font-size: 12.5px;

    line-height: 1.62;
}


.slots-section
.games-intro-more-content p + p {
    margin-top: 10px;
}

/*=============================================
                     Intro End
=============================================*/


/*=============================================
                Experience Start
=============================================*/

.slots-section .slots-experience {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.slots-section .slots-experience article {
    padding:
        19px;

    border:
        1px solid
        rgba(211, 121, 255, 0.28);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(184, 65, 255, 0.15),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 12px 28px
        rgba(4, 0, 17, 0.22);
}


.slots-section .slots-experience article > span {
    display: block;

    margin-bottom: 6px;

    color: #e395ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.slots-section .slots-experience strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;
}


.slots-section .slots-experience p {
    margin:
        8px
        0
        0;

    color: #cfc3dc;

    font-size: 12px;

    line-height: 1.5;
}

/*=============================================
                 Experience End
=============================================*/


/*=============================================
             Category Buttons Start
=============================================*/

.slots-section .slots-navigation {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.slots-section .games-navigation-button {
    --nav-rgb: 191, 72, 255;
    --nav-start: #c34dff;
    --nav-end: #8a2de2;

    min-height: 94px;

    padding:
        15px
        16px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 13px;

    align-items: center;

    border:
        2px solid
        rgba(
            var(--nav-rgb),
            0.72
        );

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--nav-rgb),
                0.24
            ),
            rgba(25, 7, 51, 0.84)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(4, 0, 18, 0.28),
        0 0 18px
        rgba(
            var(--nav-rgb),
            0.13
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.slots-section
.games-navigation-button[data-games-target="popular"] {
    --nav-rgb: 209, 73, 255;
    --nav-start: #d94cff;
    --nav-end: #9d34ec;
}


.slots-section
.games-navigation-button[data-games-target="featured"] {
    --nav-rgb: 255, 71, 183;
    --nav-start: #ff4dbd;
    --nav-end: #d42ceb;
}


.slots-section
.games-navigation-button[data-games-target="megaways"] {
    --nav-rgb: 66, 217, 255;
    --nav-start: #42dcff;
    --nav-end: #7353ff;
}


.slots-section
.games-navigation-button[data-games-target="prizes"] {
    --nav-rgb: 255, 200, 63;
    --nav-start: #ffd24b;
    --nav-end: #f39932;
}


.slots-section .games-nav-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--nav-rgb),
            0.92
        );

    border-radius: 14px;

    background:
        rgba(
            var(--nav-rgb),
            0.14
        );

    color:
        rgb(
            var(--nav-rgb)
        );

    font-size: 16px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(
            var(--nav-rgb),
            0.12
        );
}


.slots-section
.games-navigation-button strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    line-height: 1.12;
}


.slots-section
.games-navigation-button small {
    display: block;

    margin-top: 5px;

    color:
        rgba(239, 228, 248, 0.72);

    font-size: 11px;

    font-weight: 700;
}


.slots-section
.games-navigation-button:hover,
.slots-section
.games-navigation-button:focus-visible {
    transform:
        translateY(-5px);

    border-color:
        rgb(
            var(--nav-rgb)
        );

    box-shadow:
        0 17px 36px
        rgba(5, 0, 20, 0.32),
        0 0 30px
        rgba(
            var(--nav-rgb),
            0.26
        );

    outline: none;
}


.slots-section
.games-navigation-button.is-active {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.86);

    background:
        linear-gradient(
            135deg,
            var(--nav-start) 0%,
            var(--nav-end) 100%
        );

    box-shadow:
        0 18px 38px
        rgba(6, 0, 23, 0.36),
        0 0 38px
        rgba(
            var(--nav-rgb),
            0.42
        );
}


.slots-section
.games-navigation-button.is-active
.games-nav-icon {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.58);

    background:
        rgba(255, 255, 255, 0.16);
}


.slots-section
.games-navigation-button[data-games-target="prizes"].is-active {
    color: #251500;
}


.slots-section
.games-navigation-button[data-games-target="prizes"].is-active strong {
    color: #251500;
}


.slots-section
.games-navigation-button[data-games-target="prizes"].is-active small {
    color:
        rgba(46, 27, 4, 0.70);
}


.slots-section
.games-navigation-button[data-games-target="prizes"].is-active
.games-nav-icon {
    color: #2b1900;

    border-color:
        rgba(55, 30, 0, 0.28);

    background:
        rgba(82, 42, 0, 0.10);
}

/*=============================================
              Category Buttons End
=============================================*/


/*=============================================
                  Stage Start
=============================================*/

.slots-section .slots-stage {
    padding: 28px;

    border:
        1px solid
        rgba(211, 125, 255, 0.25);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 94% 4%,
            rgba(202, 75, 255, 0.14),
            transparent 32%
        ),
        linear-gradient(
            150deg,
            rgba(48, 13, 91, 0.96),
            rgba(19, 6, 44, 0.98)
        );

    box-shadow:
        0 27px 62px
        rgba(4, 0, 19, 0.36),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}


.slots-section .games-panel[hidden],
.slots-section .games-subpanel[hidden],
.slots-section .game-detail[hidden] {
    display: none !important;
}


.slots-section .games-panel-heading {
    margin-bottom: 22px;

    padding-bottom: 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 38px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(211, 127, 255, 0.19);
}


.slots-section .games-panel-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            29px,
            2.5vw,
            43px
        );

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


.slots-section .games-panel-copy p {
    margin: 0;

    color: #cec3dc;

    font-size: 13.5px;

    line-height: 1.63;
}


.slots-section
.games-panel-copy p + p {
    margin-top: 10px;
}


.slots-section
.games-panel-copy .games-panel-lead {
    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}

/*=============================================
                   Stage End
=============================================*/


/*=============================================
                 Subpanel Start
=============================================*/

.slots-section .games-subpanel-head {
    margin-bottom: 14px;

    padding:
        15px
        17px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    border:
        1px solid
        rgba(211, 120, 255, 0.20);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);
}


.slots-section .games-subpanel-head strong {
    color: #ffffff;

    font-size: 17px;

    font-weight: 900;
}


.slots-section .games-subpanel-head p {
    margin:
        5px
        0
        0;

    color: #bdb0cb;

    font-size: 12px;

    line-height: 1.45;
}


.slots-section .games-subpanel-head > span {
    flex-shrink: 0;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(212, 125, 255, 0.30);

    border-radius: 999px;

    background:
        rgba(190, 68, 255, 0.13);

    color: #ebc8ff;

    font-size: 10px;

    font-weight: 900;
}

/*=============================================
                  Subpanel End
=============================================*/


/*=============================================
                    Grid Start
=============================================*/

.slots-section .games-grid {
    margin-top: 0;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.slots-section .game-card {
    min-width: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(210, 123, 255, 0.31);

    border-radius: 14px;

    background: #17052f;

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(3, 0, 14, 0.30);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.slots-section .game-card img {
    display: block;

    width: 100%;

    aspect-ratio:
        1.05 / 1 !important;

    object-fit: cover !important;

    object-position: center !important;

    background: #130529;
}


.slots-section .game-card-copy {
    min-height: 64px;

    padding:
        9px
        9px
        10px;

    display: block;

    border-top:
        3px solid
        #bc4aff;

    background:
        linear-gradient(
            180deg,
            #2d0c50,
            #150529
        );
}


.slots-section .game-card-copy strong {
    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.18;
}


.slots-section .game-card-copy small {
    display: block;

    margin-top: 5px;

    color: #d687ff;

    font-size: 9.5px;

    font-weight: 800;
}


.slots-section .game-card:hover,
.slots-section .game-card:focus-visible {
    transform:
        translateY(-5px);

    border-color: #d987ff;

    box-shadow:
        0 16px 32px
        rgba(4, 0, 18, 0.36),
        0 0 20px
        rgba(198, 75, 255, 0.22);

    outline: none;
}


.slots-section .game-card.is-active {
    transform:
        translateY(-5px);

    border-color: #50e2ff;

    box-shadow:
        0 17px 34px
        rgba(4, 0, 18, 0.38),
        0 0 26px
        rgba(76, 222, 255, 0.34);
}

/*=============================================
                     Grid End
=============================================*/


/*=============================================
                  Details Start
=============================================*/

.slots-section .game-details {
    margin-top: 16px;
}


.slots-section .game-detail {
    padding:
        18px
        20px;

    display: grid;

    grid-template-columns:
        minmax(210px, 0.33fr)
        minmax(0, 1.67fr);

    gap: 28px;

    border:
        1px solid
        rgba(77, 220, 255, 0.22);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(73, 219, 255, 0.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(28, 7, 53, 0.54)
        );
}


.slots-section .game-detail-title span {
    display: block;

    margin-bottom: 6px;

    color: #63e5ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.slots-section .game-detail-title h4 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-weight: 900;

    line-height: 1.07;
}


.slots-section .game-detail-copy p {
    margin: 0;

    color: #d0c5db;

    font-size: 13px;

    line-height: 1.65;
}

/*=============================================
                   Details End
=============================================*/


/*=============================================
                     FAQ Start
=============================================*/

.slots-section .slots-faq {
    margin-top: 22px;

    padding:
        29px
        30px;

    border:
        1px solid
        rgba(213, 125, 255, 0.23);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(72, 217, 255, 0.07),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(65, 17, 112, 0.90),
            rgba(24, 7, 50, 0.95)
        );
}


.slots-section .slots-faq-head {
    margin-bottom: 19px;
}


.slots-section .slots-faq-head h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.slots-section .slots-faq-head > p:last-child {
    margin:
        10px
        0
        0;

    color: #c8bbd5;

    font-size: 13px;
}


.slots-section .slots-faq-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.slots-section .slots-faq details {
    overflow: hidden;

    border:
        1px solid
        rgba(210, 120, 255, 0.22);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(182, 63, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );
}


.slots-section .slots-faq summary {
    min-height: 60px;

    padding:
        14px
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    list-style: none;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.35;

    cursor: pointer;

    transition:
        background 0.2s ease;
}


.slots-section
.slots-faq summary::-webkit-details-marker {
    display: none;
}


.slots-section .slots-faq summary::after {
    content: "+";

    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        29px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #bb4cff,
            #ff3dbd
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(206, 75, 255, 0.28);
}


.slots-section
.slots-faq details[open]
summary::after {
    transform:
        rotate(45deg);
}


.slots-section .slots-faq summary:hover {
    background:
        rgba(199, 79, 255, 0.08);
}


.slots-section .slots-faq details p {
    margin: 0;

    padding:
        0
        17px
        17px;

    color: #cbbfd7;

    font-size: 12px;

    line-height: 1.62;
}

/*=============================================
                      FAQ End
=============================================*/


/*=============================================
                  Closing Start
=============================================*/

.slots-section .slots-closing {
    margin-top: 22px;

    padding:
        27px
        29px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 38px;

    border:
        1px solid
        rgba(211, 121, 255, 0.21);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 3% 20%,
            rgba(196, 67, 255, 0.15),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(43, 11, 81, 0.94),
            rgba(18, 6, 41, 0.97)
        );
}


.slots-section .slots-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            26px,
            2.5vw,
            39px
        );

    font-weight: 900;

    line-height: 1.04;
}


.slots-section .slots-closing p {
    margin: 0;

    color: #cfc3da;

    font-size: 13px;

    line-height: 1.65;
}


.slots-section
.slots-closing p + p {
    margin-top: 10px;
}

/*=============================================
                   Closing End
=============================================*/


/*=============================================
                 Responsive Start
=============================================*/

@media (max-width: 1540px) {

    .slots-section .games-site-navigation,
    .slots-section .games-site-navigation.is-floating,
    .slots-section .games-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;
    }


    .slots-section .games-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .slots-section
    .games-site-switcher-button,
    .slots-section
    .games-site-switcher-button.is-active {
        transform: none;
    }

}


@media (max-width: 1180px) {

    .slots-section .games-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .slots-section .slots-experience,
    .slots-section .slots-navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .slots-section {
        padding:
            36px
            16px
            60px;
    }


    .slots-section .games-intro,
    .slots-section .games-panel-heading,
    .slots-section .slots-closing,
    .slots-section .game-detail {
        grid-template-columns:
            1fr;
    }


    .slots-section .games-intro {
        gap: 25px;

        padding:
            27px
            22px;
    }


    .slots-section .slots-stage {
        padding:
            20px
            17px;
    }


    .slots-section .games-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .slots-section .slots-faq-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .slots-section .games-site-switcher,
    .slots-section .games-grid,
    .slots-section .slots-experience,
    .slots-section .slots-navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .slots-section .games-navigation-button {
        min-height: 84px;

        grid-template-columns:
            42px
            minmax(0, 1fr);
    }


    .slots-section .games-nav-icon {
        width: 42px;
        height: 42px;
    }


    .slots-section .games-intro h2 {
        font-size: 38px;
    }


    .slots-section .games-subpanel-head {
        align-items: flex-start;

        flex-direction: column;
    }

}

/*=============================================
                  Responsive End
=============================================*/

/*=============================================
                     Slots End
=============================================*/
/*=============================================
                Table Games Start
=============================================*/

.table-games-section {
    --table-cyan: #42e2ff;
    --table-cyan-rgb: 66, 226, 255;

    --table-blue: #438cff;
    --table-blue-rgb: 67, 140, 255;

    --table-violet: #8258ff;
    --table-violet-rgb: 130, 88, 255;

    --table-pink: #ff4ca8;
    --table-pink-rgb: 255, 76, 168;

    --table-gold: #ffc94b;
    --table-gold-rgb: 255, 201, 75;

    --section-accent: #42e2ff;
    --section-accent-rgb: 66, 226, 255;
    --section-accent-light: #a8f2ff;

    position: relative;

    padding:
        58px
        24px
        84px;

    overflow: hidden;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 10% 6%,
            rgba(55, 179, 255, 0.22) 0%,
            rgba(55, 179, 255, 0.06) 30%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 88% 10%,
            rgba(125, 76, 255, 0.25) 0%,
            rgba(125, 76, 255, 0.07) 31%,
            transparent 54%
        ),
        radial-gradient(
            ellipse at 76% 76%,
            rgba(255, 74, 174, 0.12) 0%,
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #061323 0%,
            #0a1d38 34%,
            #111d4a 65%,
            #091327 100%
        );

    border-top:
        1px solid
        rgba(73, 214, 255, 0.22);
}


.table-games-section[hidden] {
    display: none !important;
}


.table-games-section::before {
    content: "";

    position: absolute;

    top: 130px;
    right: -110px;

    z-index: -1;

    width: 330px;
    height: 330px;

    border:
        20px dashed
        rgba(75, 212, 255, 0.055);

    border-radius: 50%;

    transform:
        rotate(21deg);

    box-shadow:
        inset 0 0 0 38px
        rgba(116, 90, 255, 0.035),
        0 0 100px
        rgba(69, 184, 255, 0.08);
}


.table-games-section::after {
    content: "";

    position: absolute;

    left: -130px;
    bottom: 250px;

    z-index: -1;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130, 88, 255, 0.14) 0%,
            rgba(130, 88, 255, 0.035) 48%,
            transparent 72%
        );

    filter: blur(12px);
}


/*=============================================
                   Shell Start
=============================================*/

.table-games-section .games-shell {
    position: relative;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.table-games-section .games-main {
    min-width: 0;
}

/*=============================================
                    Shell End
=============================================*/


/*=============================================
              Site Navigation Start
=============================================*/

.table-games-section .games-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 80;
}


.table-games-section .games-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(75, 191, 255, 0.26);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(10, 31, 64, 0.95),
            rgba(8, 16, 39, 0.98)
        );

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    box-shadow:
        0 24px 58px
        rgba(2, 6, 24, 0.46),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}


.table-games-section
.games-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.table-games-section
.games-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.table-games-section
.games-site-switcher-button {
    --site-rgb: 68, 204, 255;

    min-height: 66px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.50
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                0.16
            ),
            rgba(255, 255, 255, 0.02)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(2, 5, 20, 0.25);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.table-games-section
.games-site-switcher-button[data-section-target="slots"] {
    --site-rgb: 194, 73, 255;
}


.table-games-section
.games-site-switcher-button[data-section-target="table-games"] {
    --site-rgb: 63, 220, 255;
}


.table-games-section
.games-site-switcher-button[data-section-target="live-casino"] {
    --site-rgb: 44, 225, 196;
}


.table-games-section
.games-site-switcher-button[data-section-target="bonuses"] {
    --site-rgb: 255, 71, 174;
}


.table-games-section
.games-site-switcher-button[data-section-target="tournaments"] {
    --site-rgb: 103, 107, 255;
}


.table-games-section
.games-site-switcher-button[data-section-target="vip"] {
    --site-rgb: 255, 188, 59;
}


.table-games-section
.games-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.86
        );

    border-radius: 12px;

    background:
        rgba(
            var(--site-rgb),
            0.14
        );

    color:
        rgb(
            var(--site-rgb)
        );

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 0 16px
        rgba(
            var(--site-rgb),
            0.13
        );
}


.table-games-section
.games-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.08;
}


.table-games-section
.games-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(223, 233, 247, 0.69);

    font-size: 9.5px;

    font-weight: 700;

    line-height: 1.18;
}


.table-games-section
.games-site-switcher-button:hover,
.table-games-section
.games-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        rgb(
            var(--site-rgb)
        );

    box-shadow:
        0 12px 25px
        rgba(2, 5, 20, 0.32),
        0 0 23px
        rgba(
            var(--site-rgb),
            0.22
        );

    outline: none;
}


.table-games-section
.games-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.82);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                1
            ),
            rgba(
                var(--site-rgb),
                0.66
            )
        );

    box-shadow:
        0 14px 30px
        rgba(2, 6, 24, 0.38),
        0 0 30px
        rgba(
            var(--site-rgb),
            0.34
        );
}


.table-games-section
.games-site-switcher-button.is-active
.games-site-switcher-icon {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.56);

    background:
        rgba(255, 255, 255, 0.15);
}

/*=============================================
               Site Navigation End
=============================================*/


/*=============================================
                  Intro Start
=============================================*/

.table-games-section .games-intro {
    margin-bottom: 18px;

    padding:
        36px
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 46px;

    align-items: center;

    border:
        1px solid
        rgba(71, 211, 255, 0.29);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 4% 5%,
            rgba(64, 205, 255, 0.17),
            transparent 40%
        ),
        radial-gradient(
            circle at 96% 94%,
            rgba(128, 85, 255, 0.16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(10, 38, 76, 0.94),
            rgba(10, 17, 46, 0.97)
        );

    box-shadow:
        0 25px 60px
        rgba(2, 7, 28, 0.36),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}


.table-games-section .games-kicker,
.table-games-section .games-panel-kicker {
    margin:
        0
        0
        8px;

    color: #94ebff;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.table-games-section .games-intro h2 {
    margin: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #bfeeff 42%,
            #8c8cff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    font-size:
        clamp(
            40px,
            3.5vw,
            58px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.table-games-section .games-intro-lead {
    margin:
        19px
        0
        0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.6;
}


.table-games-section
.games-intro-secondary > p {
    margin: 0;

    color: #c8d4e4;

    font-size: 14px;

    line-height: 1.67;
}


.table-games-section
.games-intro-secondary > p + p {
    margin-top: 11px;
}


.table-games-section .games-intro-more {
    margin-top: 17px;
}


.table-games-section
.games-intro-more summary {
    min-height: 45px;

    padding:
        0
        16px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    list-style: none;

    border:
        1px solid
        rgba(71, 215, 255, 0.52);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(62, 208, 255, 0.15),
            rgba(124, 88, 255, 0.12)
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;
}


.table-games-section
.games-intro-more summary::-webkit-details-marker {
    display: none;
}


.table-games-section
.games-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #42dfff,
            #745cff
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;
}


.table-games-section
.games-intro-more[open]
summary::after {
    transform:
        rotate(45deg);
}


.table-games-section
.games-intro-more-content {
    margin-top: 10px;

    padding:
        17px
        18px;

    max-height: 310px;

    overflow-y: auto;

    border:
        1px solid
        rgba(71, 211, 255, 0.18);

    border-radius: 13px;

    background:
        rgba(5, 13, 35, 0.50);
}


.table-games-section
.games-intro-more-content p {
    margin: 0;

    color: #c8d4e3;

    font-size: 12.5px;

    line-height: 1.62;
}


.table-games-section
.games-intro-more-content p + p {
    margin-top: 10px;
}

/*=============================================
                   Intro End
=============================================*/


/*=============================================
               Experience Start
=============================================*/

.table-games-section .table-experience {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.table-games-section
.table-experience article {
    position: relative;

    padding:
        19px;

    overflow: hidden;

    border:
        1px solid
        rgba(73, 210, 255, 0.24);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(70, 210, 255, 0.10),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(60, 160, 255, 0.09),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        0 12px 28px
        rgba(2, 6, 22, 0.23);
}


.table-games-section
.table-experience article::after {
    content: "";

    position: absolute;

    right: -30px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border:
        1px solid
        rgba(85, 214, 255, 0.12);

    border-radius: 50%;
}


.table-games-section
.table-experience article > span {
    display: block;

    margin-bottom: 6px;

    color: #73e6ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.table-games-section
.table-experience strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;
}


.table-games-section
.table-experience p {
    margin:
        8px
        0
        0;

    color: #bdcad8;

    font-size: 12px;

    line-height: 1.5;
}

/*=============================================
                Experience End
=============================================*/


/*=============================================
              Navigation Start
=============================================*/

.table-games-section .table-games-navigation {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.table-games-section
.games-navigation-button {
    --nav-rgb: 66, 226, 255;
    --nav-start: #42e2ff;
    --nav-end: #3d83ff;
    --nav-ink: #061b2c;

    min-height: 94px;

    padding:
        15px
        16px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 13px;

    align-items: center;

    border:
        2px solid
        rgba(
            var(--nav-rgb),
            0.72
        );

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--nav-rgb),
                0.18
            ),
            rgba(9, 20, 48, 0.86)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(2, 5, 22, 0.30),
        0 0 18px
        rgba(
            var(--nav-rgb),
            0.13
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.table-games-section
.games-navigation-button[data-games-target="cards"] {
    --nav-rgb: 63, 221, 255;
    --nav-start: #45e1ff;
    --nav-end: #3f86ff;
    --nav-ink: #061a28;
}


.table-games-section
.games-navigation-button[data-games-target="roulette"] {
    --nav-rgb: 255, 73, 161;
    --nav-start: #ff4ba4;
    --nav-end: #d837e8;
    --nav-ink: #2b071c;
}


.table-games-section
.games-navigation-button[data-games-target="crash"] {
    --nav-rgb: 133, 87, 255;
    --nav-start: #9061ff;
    --nav-end: #6447ef;
    --nav-ink: #13082c;
}


.table-games-section
.games-navigation-button[data-games-target="specialty"] {
    --nav-rgb: 255, 199, 66;
    --nav-start: #ffd34e;
    --nav-end: #f29b2f;
    --nav-ink: #2b1a02;
}


.table-games-section .games-nav-icon {
    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--nav-rgb),
            0.92
        );

    border-radius: 14px;

    background:
        rgba(
            var(--nav-rgb),
            0.13
        );

    color:
        rgb(
            var(--nav-rgb)
        );

    font-size: 16px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(
            var(--nav-rgb),
            0.12
        );
}


.table-games-section
.games-navigation-button strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    line-height: 1.12;
}


.table-games-section
.games-navigation-button small {
    display: block;

    margin-top: 5px;

    color:
        rgba(224, 234, 247, 0.72);

    font-size: 11px;

    font-weight: 700;
}


.table-games-section
.games-navigation-button:hover,
.table-games-section
.games-navigation-button:focus-visible {
    transform:
        translateY(-5px);

    border-color:
        rgb(
            var(--nav-rgb)
        );

    box-shadow:
        0 17px 36px
        rgba(3, 6, 25, 0.34),
        0 0 30px
        rgba(
            var(--nav-rgb),
            0.28
        );

    outline: none;
}


.table-games-section
.games-navigation-button.is-active {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.87);

    background:
        linear-gradient(
            135deg,
            var(--nav-start) 0%,
            var(--nav-end) 100%
        );

    color:
        var(--nav-ink);

    box-shadow:
        0 18px 38px
        rgba(2, 6, 24, 0.38),
        0 0 38px
        rgba(
            var(--nav-rgb),
            0.42
        );
}


.table-games-section
.games-navigation-button.is-active strong {
    color:
        var(--nav-ink);
}


.table-games-section
.games-navigation-button.is-active small {
    color:
        rgba(10, 15, 28, 0.67);
}


.table-games-section
.games-navigation-button.is-active
.games-nav-icon {
    color:
        var(--nav-ink);

    border-color:
        rgba(0, 0, 0, 0.16);

    background:
        rgba(0, 0, 0, 0.09);
}

/*=============================================
               Navigation End
=============================================*/


/*=============================================
                  Stage Start
=============================================*/

.table-games-section .table-games-stage {
    padding: 28px;

    border:
        1px solid
        rgba(71, 210, 255, 0.24);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 94% 4%,
            rgba(74, 176, 255, 0.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 4% 100%,
            rgba(124, 85, 255, 0.08),
            transparent 35%
        ),
        linear-gradient(
            150deg,
            rgba(7, 28, 58, 0.97),
            rgba(8, 14, 39, 0.99)
        );

    box-shadow:
        0 27px 62px
        rgba(2, 6, 24, 0.38),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}


.table-games-section
.games-panel[hidden],
.table-games-section
.games-subpanel[hidden],
.table-games-section
.game-detail[hidden] {
    display: none !important;
}


.table-games-section
.games-panel-heading {
    margin-bottom: 22px;

    padding-bottom: 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 38px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(72, 211, 255, 0.18);
}


.table-games-section
.games-panel-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            29px,
            2.5vw,
            43px
        );

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


.table-games-section
.games-panel-copy p {
    margin: 0;

    color: #c4d0df;

    font-size: 13.5px;

    line-height: 1.63;
}


.table-games-section
.games-panel-copy p + p {
    margin-top: 10px;
}


.table-games-section
.games-panel-copy .games-panel-lead {
    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}

/*=============================================
                   Stage End
=============================================*/


/*=============================================
                Subpanel Start
=============================================*/

.table-games-section
.games-subpanel-head {
    margin-bottom: 14px;

    padding:
        15px
        17px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    border:
        1px solid
        rgba(73, 212, 255, 0.18);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.033);
}


.table-games-section
.games-subpanel-head strong {
    color: #ffffff;

    font-size: 17px;

    font-weight: 900;
}


.table-games-section
.games-subpanel-head p {
    margin:
        5px
        0
        0;

    color: #b8c5d4;

    font-size: 12px;

    line-height: 1.45;
}


.table-games-section
.games-subpanel-head > span {
    flex-shrink: 0;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(73, 213, 255, 0.28);

    border-radius: 999px;

    background:
        rgba(66, 210, 255, 0.10);

    color: #a9efff;

    font-size: 10px;

    font-weight: 900;
}

/*=============================================
                 Subpanel End
=============================================*/


/*=============================================
                   Grid Start
=============================================*/

.table-games-section .games-grid {
    margin-top: 0;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.table-games-section .game-card {
    min-width: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(73, 207, 255, 0.27);

    border-radius: 14px;

    background: #071326;

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(2, 5, 20, 0.32);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.table-games-section .game-card img {
    display: block;

    width: 100%;

    aspect-ratio:
        1.05 / 1 !important;

    object-fit: cover !important;

    object-position: center !important;

    background: #061020;
}


.table-games-section .game-card-copy {
    min-height: 64px;

    padding:
        9px
        9px
        10px;

    display: block;

    border-top:
        3px solid
        #41dcff;

    background:
        linear-gradient(
            180deg,
            #102645,
            #071326
        );
}


.table-games-section
.game-card-copy strong {
    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.18;
}


.table-games-section
.game-card-copy small {
    display: block;

    margin-top: 5px;

    color: #71e3ff;

    font-size: 9.5px;

    font-weight: 800;
}


.table-games-section
.game-card:hover,
.table-games-section
.game-card:focus-visible {
    transform:
        translateY(-5px);

    border-color: #58ddff;

    box-shadow:
        0 16px 32px
        rgba(2, 6, 24, 0.38),
        0 0 20px
        rgba(68, 214, 255, 0.23);

    outline: none;
}


.table-games-section
.game-card.is-active {
    transform:
        translateY(-5px);

    border-color: #ff52b0;

    box-shadow:
        0 17px 34px
        rgba(2, 6, 24, 0.40),
        0 0 27px
        rgba(255, 75, 171, 0.30);
}


.table-games-section
.game-card.is-active
.game-card-copy {
    border-top-color:
        #ff4eae;
}

/*=============================================
                    Grid End
=============================================*/


/*=============================================
                 Details Start
=============================================*/

.table-games-section .game-details {
    margin-top: 16px;
}


.table-games-section .game-detail {
    padding:
        18px
        20px;

    display: grid;

    grid-template-columns:
        minmax(210px, 0.33fr)
        minmax(0, 1.67fr);

    gap: 28px;

    border:
        1px solid
        rgba(73, 214, 255, 0.20);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(67, 211, 255, 0.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.02),
            rgba(7, 18, 45, 0.60)
        );
}


.table-games-section
.game-detail-title span {
    display: block;

    margin-bottom: 6px;

    color: #6be5ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.table-games-section
.game-detail-title h4 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-weight: 900;

    line-height: 1.07;
}


.table-games-section
.game-detail-copy p {
    margin: 0;

    color: #c5d0de;

    font-size: 13px;

    line-height: 1.65;
}


.table-games-section
.game-detail-copy p + p {
    margin-top: 9px;
}

/*=============================================
                  Details End
=============================================*/


/*=============================================
                    FAQ Start
=============================================*/

.table-games-section .table-knowledge {
    margin-top: 22px;

    padding:
        29px
        30px;

    border:
        1px solid
        rgba(72, 210, 255, 0.21);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 94% 8%,
            rgba(127, 84, 255, 0.09),
            transparent 37%
        ),
        linear-gradient(
            145deg,
            rgba(9, 34, 69, 0.93),
            rgba(8, 15, 39, 0.97)
        );
}


.table-games-section
.table-knowledge-head {
    margin-bottom: 19px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 36px;

    align-items: end;
}


.table-games-section
.table-knowledge-head h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.table-games-section
.table-knowledge-head > p {
    margin: 0;

    color: #bdc9d8;

    font-size: 13px;

    line-height: 1.55;

    text-align: right;
}


.table-games-section
.table-knowledge-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.table-games-section
.table-knowledge-item {
    overflow: hidden;

    border:
        1px solid
        rgba(72, 211, 255, 0.20);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(54, 190, 255, 0.06),
            rgba(255, 255, 255, 0.02)
        );
}


.table-games-section
.table-knowledge-item summary {
    min-height: 60px;

    padding:
        14px
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    list-style: none;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.35;

    cursor: pointer;

    transition:
        background 0.2s ease;
}


.table-games-section
.table-knowledge-item summary::-webkit-details-marker {
    display: none;
}


.table-games-section
.table-knowledge-item summary::after {
    content: "+";

    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        29px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #45dcff,
            #765cff
        );

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 0 18px
        rgba(74, 198, 255, 0.25);
}


.table-games-section
.table-knowledge-item[open]
summary::after {
    transform:
        rotate(45deg);
}


.table-games-section
.table-knowledge-item summary:hover {
    background:
        rgba(60, 197, 255, 0.06);
}


.table-games-section
.table-knowledge-item > div {
    padding:
        0
        17px
        17px;
}


.table-games-section
.table-knowledge-item p {
    margin: 0;

    color: #bdc9d6;

    font-size: 12px;

    line-height: 1.62;
}

/*=============================================
                     FAQ End
=============================================*/


/*=============================================
                 Closing Start
=============================================*/

.table-games-section
.table-games-closing {
    margin-top: 22px;

    padding:
        27px
        29px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 38px;

    border:
        1px solid
        rgba(72, 210, 255, 0.20);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 4% 20%,
            rgba(64, 198, 255, 0.11),
            transparent 40%
        ),
        radial-gradient(
            circle at 96% 80%,
            rgba(128, 85, 255, 0.07),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(8, 31, 63, 0.95),
            rgba(7, 14, 37, 0.98)
        );
}


.table-games-section
.table-games-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            26px,
            2.5vw,
            39px
        );

    font-weight: 900;

    line-height: 1.04;
}


.table-games-section
.table-games-closing p {
    margin: 0;

    color: #c4cfdb;

    font-size: 13px;

    line-height: 1.65;
}


.table-games-section
.table-games-closing p + p {
    margin-top: 10px;
}

/*=============================================
                  Closing End
=============================================*/


/*=============================================
                Responsive Start
=============================================*/

@media (max-width: 1540px) {

    .table-games-section
    .games-site-navigation,
    .table-games-section
    .games-site-navigation.is-floating,
    .table-games-section
    .games-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;
    }


    .table-games-section
    .games-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .table-games-section
    .games-site-switcher-button,
    .table-games-section
    .games-site-switcher-button.is-active {
        transform: none;
    }

}


@media (max-width: 1180px) {

    .table-games-section
    .games-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .table-games-section
    .table-experience,
    .table-games-section
    .table-games-navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .table-games-section {
        padding:
            36px
            16px
            60px;
    }


    .table-games-section
    .games-intro,
    .table-games-section
    .games-panel-heading,
    .table-games-section
    .table-games-closing,
    .table-games-section
    .game-detail,
    .table-games-section
    .table-knowledge-head {
        grid-template-columns:
            1fr;
    }


    .table-games-section
    .games-intro {
        gap: 25px;

        padding:
            27px
            22px;
    }


    .table-games-section
    .table-games-stage {
        padding:
            20px
            17px;
    }


    .table-games-section
    .games-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .table-games-section
    .table-knowledge-head > p {
        text-align: left;
    }


    .table-games-section
    .table-knowledge-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .table-games-section
    .games-site-switcher,
    .table-games-section
    .games-grid,
    .table-games-section
    .table-experience,
    .table-games-section
    .table-games-navigation {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .table-games-section
    .games-navigation-button {
        min-height: 84px;

        grid-template-columns:
            42px
            minmax(0, 1fr);
    }


    .table-games-section
    .games-nav-icon {
        width: 42px;
        height: 42px;
    }


    .table-games-section
    .games-intro h2 {
        font-size: 38px;
    }


    .table-games-section
    .games-subpanel-head {
        align-items: flex-start;

        flex-direction: column;
    }

}

/*=============================================
                 Responsive End
=============================================*/

/*=============================================
                 Table Games End
=============================================*/
/*=============================================
                   Live Casino Start
=============================================*/

.live-casino-section {
    --live-emerald: #20e6bb;
    --live-emerald-rgb: 32, 230, 187;

    --live-cyan: #42ddff;
    --live-cyan-rgb: 66, 221, 255;

    --live-coral: #ff657f;
    --live-coral-rgb: 255, 101, 127;

    --live-gold: #ffd45a;
    --live-gold-rgb: 255, 212, 90;

    --live-violet: #9870ff;
    --live-violet-rgb: 152, 112, 255;

    --section-accent: #20e6bb;
    --section-accent-rgb: 32, 230, 187;
    --section-accent-light: #9dffe9;

    position: relative;

    padding:
        58px
        24px
        84px;

    overflow: hidden;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 7% 7%,
            rgba(27, 232, 185, 0.20) 0%,
            rgba(27, 232, 185, 0.055) 29%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 92% 9%,
            rgba(66, 220, 255, 0.17) 0%,
            rgba(66, 220, 255, 0.045) 29%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 83% 76%,
            rgba(151, 103, 255, 0.12) 0%,
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #021b1d 0%,
            #05282b 34%,
            #08252e 63%,
            #06151e 100%
        );

    border-top:
        1px solid
        rgba(41, 230, 190, 0.20);
}


.live-casino-section[hidden] {
    display: none !important;
}


.live-casino-section::before {
    content: "";

    position: absolute;

    top: 150px;
    right: -120px;

    z-index: -1;

    width: 350px;
    height: 350px;

    border:
        22px dashed
        rgba(67, 225, 206, 0.05);

    border-radius: 50%;

    transform:
        rotate(17deg);

    box-shadow:
        inset 0 0 0 40px
        rgba(53, 216, 255, 0.025),
        0 0 110px
        rgba(32, 230, 187, 0.07);
}


.live-casino-section::after {
    content: "";

    position: absolute;

    left: -170px;
    bottom: 280px;

    z-index: -1;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(145, 99, 255, 0.12),
            rgba(145, 99, 255, 0.025) 50%,
            transparent 72%
        );

    filter:
        blur(14px);
}


/*=============================================
                    Shell Start
=============================================*/

.live-casino-section .games-shell {
    position: relative;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.live-casino-section .games-main {
    min-width: 0;
}

/*=============================================
                     Shell End
=============================================*/


/*=============================================
               Site Navigation Start
=============================================*/

.live-casino-section .games-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 80;
}


.live-casino-section .games-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(52, 225, 190, 0.25);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(5, 43, 43, 0.95),
            rgba(4, 20, 28, 0.98)
        );

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    box-shadow:
        0 24px 58px
        rgba(0, 10, 16, 0.47),
        inset 0 1px 0
        rgba(255, 255, 255, 0.065);
}


.live-casino-section
.games-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.live-casino-section
.games-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.live-casino-section
.games-site-switcher-button {
    --site-rgb: 32, 230, 187;

    min-height: 66px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.48
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                0.15
            ),
            rgba(255, 255, 255, 0.018)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(0, 8, 14, 0.27);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.live-casino-section
.games-site-switcher-button[data-section-target="slots"] {
    --site-rgb: 196, 74, 255;
}


.live-casino-section
.games-site-switcher-button[data-section-target="table-games"] {
    --site-rgb: 66, 194, 255;
}


.live-casino-section
.games-site-switcher-button[data-section-target="live-casino"] {
    --site-rgb: 32, 230, 187;
}


.live-casino-section
.games-site-switcher-button[data-section-target="bonuses"] {
    --site-rgb: 255, 77, 177;
}


.live-casino-section
.games-site-switcher-button[data-section-target="tournaments"] {
    --site-rgb: 111, 107, 255;
}


.live-casino-section
.games-site-switcher-button[data-section-target="vip"] {
    --site-rgb: 255, 191, 65;
}


.live-casino-section
.games-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--site-rgb),
            0.86
        );

    border-radius: 12px;

    background:
        rgba(
            var(--site-rgb),
            0.13
        );

    color:
        rgb(
            var(--site-rgb)
        );

    font-size: 10px;

    font-weight: 900;

    box-shadow:
        0 0 17px
        rgba(
            var(--site-rgb),
            0.12
        );
}


.live-casino-section
.games-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.08;
}


.live-casino-section
.games-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(219, 239, 235, 0.68);

    font-size: 9.5px;

    font-weight: 700;

    line-height: 1.18;
}


.live-casino-section
.games-site-switcher-button:hover,
.live-casino-section
.games-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        rgb(
            var(--site-rgb)
        );

    box-shadow:
        0 12px 25px
        rgba(0, 8, 17, 0.35),
        0 0 24px
        rgba(
            var(--site-rgb),
            0.23
        );

    outline: none;
}


.live-casino-section
.games-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.84);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--site-rgb),
                1
            ),
            rgba(
                var(--site-rgb),
                0.64
            )
        );

    box-shadow:
        0 14px 30px
        rgba(0, 8, 18, 0.40),
        0 0 32px
        rgba(
            var(--site-rgb),
            0.36
        );
}


.live-casino-section
.games-site-switcher-button.is-active
.games-site-switcher-icon {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.56);

    background:
        rgba(255, 255, 255, 0.14);
}

/*=============================================
                Site Navigation End
=============================================*/


/*=============================================
                   Intro Start
=============================================*/

.live-casino-section .games-intro {
    margin-bottom: 18px;

    padding:
        36px
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 46px;

    align-items: center;

    border:
        1px solid
        rgba(47, 231, 190, 0.28);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 4% 4%,
            rgba(34, 229, 184, 0.17),
            transparent 40%
        ),
        radial-gradient(
            circle at 96% 96%,
            rgba(69, 210, 255, 0.10),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            rgba(5, 55, 52, 0.94),
            rgba(5, 24, 32, 0.98)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 8, 17, 0.38),
        inset 0 1px 0
        rgba(255, 255, 255, 0.065);
}


.live-casino-section .games-kicker,
.live-casino-section .games-panel-kicker {
    margin:
        0
        0
        8px;

    color: #8dffe5;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.live-casino-section .games-intro h2 {
    margin: 0;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #bcfff0 42%,
            #71e5ff 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    font-size:
        clamp(
            40px,
            3.5vw,
            58px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.live-casino-section .games-intro-lead {
    margin:
        19px
        0
        0;

    color: #ffffff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.6;
}


.live-casino-section
.games-intro-secondary > p {
    margin: 0;

    color: #c1d8d6;

    font-size: 14px;

    line-height: 1.67;
}


.live-casino-section
.games-intro-secondary > p + p {
    margin-top: 11px;
}


.live-casino-section
.games-intro-more {
    margin-top: 17px;
}


.live-casino-section
.games-intro-more summary {
    min-height: 45px;

    padding:
        0
        16px;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    list-style: none;

    border:
        1px solid
        rgba(47, 230, 187, 0.52);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(30, 230, 185, 0.16),
            rgba(65, 210, 255, 0.09)
        );

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;
}


.live-casino-section
.games-intro-more summary::-webkit-details-marker {
    display: none;
}


.live-casino-section
.games-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #25e7bb,
            #43cfff
        );

    color: #04221e;

    font-size: 18px;

    font-weight: 900;
}


.live-casino-section
.games-intro-more[open]
summary::after {
    transform:
        rotate(45deg);
}


.live-casino-section
.games-intro-more-content {
    margin-top: 10px;

    padding:
        17px
        18px;

    max-height: 320px;

    overflow-y: auto;

    border:
        1px solid
        rgba(45, 224, 185, 0.17);

    border-radius: 13px;

    background:
        rgba(2, 22, 27, 0.55);
}


.live-casino-section
.games-intro-more-content p {
    margin: 0;

    color: #c2d8d5;

    font-size: 12.5px;

    line-height: 1.62;
}


.live-casino-section
.games-intro-more-content p + p {
    margin-top: 10px;
}

/*=============================================
                    Intro End
=============================================*/


/*=============================================
                Experience Start
=============================================*/

.live-casino-section .live-experience {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.live-casino-section
.live-experience article {
    position: relative;

    padding:
        19px;

    overflow: hidden;

    border:
        1px solid
        rgba(49, 225, 187, 0.24);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(48, 225, 187, 0.10),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(33, 210, 170, 0.075),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 12px 28px
        rgba(0, 8, 17, 0.25);
}


.live-casino-section
.live-experience article::after {
    content: "";

    position: absolute;

    right: -28px;
    bottom: -35px;

    width: 90px;
    height: 90px;

    border:
        1px solid
        rgba(49, 226, 191, 0.11);

    border-radius: 50%;
}


.live-casino-section
.live-experience article > span {
    display: block;

    margin-bottom: 6px;

    color: #62f4d5;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.14em;
}


.live-casino-section
.live-experience strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;
}


.live-casino-section
.live-experience p {
    margin:
        8px
        0
        0;

    color: #b9cfcb;

    font-size: 12px;

    line-height: 1.5;
}

/*=============================================
                 Experience End
=============================================*/


/*=============================================
             Category Navigation Start
=============================================*/

.live-casino-section
.live-games-navigation {
    margin-bottom: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.live-casino-section
.games-navigation-button {
    --nav-rgb: 32, 230, 187;
    --nav-start: #25e8bc;
    --nav-end: #14ac9a;
    --nav-ink: #03241e;

    min-height: 98px;

    padding:
        15px
        16px;

    display: grid;

    grid-template-columns:
        50px
        minmax(0, 1fr);

    gap: 13px;

    align-items: center;

    border:
        2px solid
        rgba(
            var(--nav-rgb),
            0.78
        );

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--nav-rgb),
                0.19
            ),
            rgba(3, 24, 30, 0.90)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 12px 30px
        rgba(0, 7, 16, 0.31),
        0 0 20px
        rgba(
            var(--nav-rgb),
            0.14
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.live-casino-section
.games-navigation-button[data-games-target="live-blackjack"] {
    --nav-rgb: 51, 229, 190;
    --nav-start: #31e8bd;
    --nav-end: #14b59d;
    --nav-ink: #04261f;
}


.live-casino-section
.games-navigation-button[data-games-target="live-baccarat"] {
    --nav-rgb: 255, 103, 130;
    --nav-start: #ff7188;
    --nav-end: #ed466f;
    --nav-ink: #330812;
}


.live-casino-section
.games-navigation-button[data-games-target="live-wheels"] {
    --nav-rgb: 255, 211, 81;
    --nav-start: #ffdc62;
    --nav-end: #f29b35;
    --nav-ink: #2e1a02;
}


.live-casino-section
.games-navigation-button[data-games-target="live-studio"] {
    --nav-rgb: 154, 111, 255;
    --nav-start: #a67cff;
    --nav-end: #7253ef;
    --nav-ink: #14072d;
}


.live-casino-section .games-nav-icon {
    width: 50px;
    height: 50px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--nav-rgb),
            0.94
        );

    border-radius: 14px;

    background:
        rgba(
            var(--nav-rgb),
            0.15
        );

    color:
        rgb(
            var(--nav-rgb)
        );

    font-size: 15px;

    font-weight: 900;

    box-shadow:
        0 0 20px
        rgba(
            var(--nav-rgb),
            0.16
        );
}


.live-casino-section
.games-navigation-button strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;

    line-height: 1.12;
}


.live-casino-section
.games-navigation-button small {
    display: block;

    margin-top: 5px;

    color:
        rgba(220, 237, 234, 0.72);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.3;
}


.live-casino-section
.games-navigation-button:hover,
.live-casino-section
.games-navigation-button:focus-visible {
    transform:
        translateY(-6px)
        scale(1.015);

    border-color:
        rgb(
            var(--nav-rgb)
        );

    box-shadow:
        0 18px 38px
        rgba(0, 7, 17, 0.36),
        0 0 34px
        rgba(
            var(--nav-rgb),
            0.30
        );

    outline: none;
}


.live-casino-section
.games-navigation-button.is-active {
    transform:
        translateY(-6px)
        scale(1.02);

    border-color:
        rgba(255, 255, 255, 0.90);

    background:
        linear-gradient(
            135deg,
            var(--nav-start) 0%,
            var(--nav-end) 100%
        );

    color:
        var(--nav-ink);

    box-shadow:
        0 20px 42px
        rgba(0, 7, 18, 0.40),
        0 0 44px
        rgba(
            var(--nav-rgb),
            0.48
        );
}


.live-casino-section
.games-navigation-button.is-active strong {
    color:
        var(--nav-ink);
}


.live-casino-section
.games-navigation-button.is-active small {
    color:
        rgba(10, 17, 20, 0.67);
}


.live-casino-section
.games-navigation-button.is-active
.games-nav-icon {
    color:
        var(--nav-ink);

    border-color:
        rgba(0, 0, 0, 0.17);

    background:
        rgba(0, 0, 0, 0.09);
}

/*=============================================
              Category Navigation End
=============================================*/


/*=============================================
                    Stage Start
=============================================*/

.live-casino-section
.live-casino-stage {
    padding: 28px;

    border:
        1px solid
        rgba(48, 225, 188, 0.23);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 94% 4%,
            rgba(49, 227, 188, 0.11),
            transparent 31%
        ),
        radial-gradient(
            circle at 4% 100%,
            rgba(76, 205, 255, 0.075),
            transparent 35%
        ),
        linear-gradient(
            150deg,
            rgba(4, 43, 43, 0.98),
            rgba(4, 18, 28, 0.99)
        );

    box-shadow:
        0 27px 62px
        rgba(0, 7, 17, 0.40),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}


.live-casino-section
.games-panel[hidden],
.live-casino-section
.games-subpanel[hidden],
.live-casino-section
.game-detail[hidden] {
    display: none !important;
}


.live-casino-section
.games-panel-heading {
    margin-bottom: 22px;

    padding-bottom: 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 38px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(49, 226, 189, 0.18);
}


.live-casino-section
.games-panel-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            29px,
            2.5vw,
            43px
        );

    font-weight: 900;

    line-height: 1.02;

    letter-spacing: -0.035em;
}


.live-casino-section
.games-panel-copy p {
    margin: 0;

    color: #c0d1cf;

    font-size: 13.5px;

    line-height: 1.63;
}


.live-casino-section
.games-panel-copy p + p {
    margin-top: 10px;
}


.live-casino-section
.games-panel-copy .games-panel-lead {
    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}

/*=============================================
                     Stage End
=============================================*/


/*=============================================
                  Subpanel Start
=============================================*/

.live-casino-section
.games-subpanel-head {
    margin-bottom: 14px;

    padding:
        15px
        17px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    border:
        1px solid
        rgba(48, 227, 190, 0.18);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.032);
}


.live-casino-section
.games-subpanel-head strong {
    color: #ffffff;

    font-size: 17px;

    font-weight: 900;
}


.live-casino-section
.games-subpanel-head p {
    margin:
        5px
        0
        0;

    color: #afc8c4;

    font-size: 12px;

    line-height: 1.45;
}


.live-casino-section
.games-subpanel-head > span {
    flex-shrink: 0;

    padding:
        7px
        11px;

    border:
        1px solid
        rgba(51, 230, 191, 0.29);

    border-radius: 999px;

    background:
        rgba(38, 223, 183, 0.10);

    color: #93ffe7;

    font-size: 10px;

    font-weight: 900;
}

/*=============================================
                   Subpanel End
=============================================*/


/*=============================================
                    Cards Start
=============================================*/

.live-casino-section .games-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.live-casino-section .game-card {
    min-width: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(51, 223, 189, 0.27);

    border-radius: 14px;

    background: #041a20;

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(0, 6, 13, 0.34);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.live-casino-section .game-card img {
    display: block;

    width: 100%;

    aspect-ratio:
        1.05 / 1 !important;

    object-fit: cover !important;

    object-position: center !important;

    background: #03141a;
}


.live-casino-section .game-card-copy {
    min-height: 66px;

    padding:
        9px
        9px
        10px;

    display: block;

    border-top:
        3px solid
        #23ddb4;

    background:
        linear-gradient(
            180deg,
            #0b3433,
            #04191f
        );
}


.live-casino-section
.game-card-copy strong {
    display: block;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.18;
}


.live-casino-section
.game-card-copy small {
    display: block;

    margin-top: 5px;

    color: #5ff2d6;

    font-size: 9.5px;

    font-weight: 800;
}


.live-casino-section
.game-card:hover,
.live-casino-section
.game-card:focus-visible {
    transform:
        translateY(-5px);

    border-color: #53f0cf;

    box-shadow:
        0 16px 32px
        rgba(0, 7, 16, 0.40),
        0 0 21px
        rgba(42, 227, 190, 0.24);

    outline: none;
}


.live-casino-section
.game-card.is-active {
    transform:
        translateY(-5px);

    border-color: #ffcd5a;

    box-shadow:
        0 17px 34px
        rgba(0, 7, 16, 0.41),
        0 0 28px
        rgba(255, 201, 78, 0.31);
}


.live-casino-section
.game-card.is-active
.game-card-copy {
    border-top-color:
        #ffd05c;
}

/*=============================================
                     Cards End
=============================================*/


/*=============================================
                  Details Start
=============================================*/

.live-casino-section .game-details {
    margin-top: 16px;
}


.live-casino-section .game-detail {
    padding:
        19px
        20px;

    display: grid;

    grid-template-columns:
        minmax(210px, 0.33fr)
        minmax(0, 1.67fr);

    gap: 28px;

    border:
        1px solid
        rgba(50, 226, 190, 0.20);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(38, 224, 184, 0.09),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            rgba(3, 27, 32, 0.64)
        );
}


.live-casino-section
.game-detail-title span {
    display: block;

    margin-bottom: 6px;

    color: #66f2d6;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.live-casino-section
.game-detail-title h4 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            21px,
            2vw,
            29px
        );

    font-weight: 900;

    line-height: 1.07;
}


.live-casino-section
.game-detail-copy p {
    margin: 0;

    color: #bed0cd;

    font-size: 13px;

    line-height: 1.65;
}


.live-casino-section
.game-detail-copy p + p {
    margin-top: 9px;
}

/*=============================================
                   Details End
=============================================*/


/*=============================================
                Comparison Start
=============================================*/

.live-casino-section .live-context {
    margin-top: 22px;

    padding:
        28px
        30px;

    border:
        1px solid
        rgba(48, 226, 189, 0.20);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 96% 5%,
            rgba(68, 216, 255, 0.07),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(5, 48, 47, 0.92),
            rgba(4, 21, 29, 0.97)
        );
}


.live-casino-section .live-context-head {
    margin-bottom: 18px;
}


.live-casino-section
.live-context-head h3 {
    max-width: 800px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.live-casino-section
.live-context-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.live-casino-section
.live-context-grid article {
    padding:
        18px
        18px;

    border:
        1px solid
        rgba(50, 225, 189, 0.18);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(39, 220, 183, 0.065),
            rgba(255, 255, 255, 0.018)
        );
}


.live-casino-section
.live-context-grid article > span {
    display: block;

    margin-bottom: 7px;

    color: #6ff4d9;

    font-size: 9.5px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.live-casino-section
.live-context-grid h4 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;
}


.live-casino-section
.live-context-grid p {
    margin:
        8px
        0
        0;

    color: #b8cbc8;

    font-size: 11.8px;

    line-height: 1.55;
}

/*=============================================
                 Comparison End
=============================================*/


/*=============================================
                     FAQ Start
=============================================*/

.live-casino-section .live-knowledge {
    margin-top: 22px;

    padding:
        29px
        30px;

    border:
        1px solid
        rgba(48, 226, 188, 0.20);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 94% 8%,
            rgba(148, 107, 255, 0.07),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(5, 47, 45, 0.92),
            rgba(4, 20, 29, 0.97)
        );
}


.live-casino-section
.live-knowledge-head {
    margin-bottom: 19px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap: 36px;

    align-items: end;
}


.live-casino-section
.live-knowledge-head h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.live-casino-section
.live-knowledge-head > p {
    margin: 0;

    color: #b7cac7;

    font-size: 13px;

    line-height: 1.55;

    text-align: right;
}


.live-casino-section
.live-knowledge-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.live-casino-section
.live-knowledge-item {
    overflow: hidden;

    border:
        1px solid
        rgba(50, 226, 189, 0.19);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(35, 220, 181, 0.055),
            rgba(255, 255, 255, 0.018)
        );
}


.live-casino-section
.live-knowledge-item summary {
    min-height: 60px;

    padding:
        14px
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    list-style: none;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.35;

    cursor: pointer;

    transition:
        background 0.2s ease;
}


.live-casino-section
.live-knowledge-item summary::-webkit-details-marker {
    display: none;
}


.live-casino-section
.live-knowledge-item summary::after {
    content: "+";

    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        29px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #25e5ba,
            #44cfff
        );

    color: #03221d;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 0 19px
        rgba(45, 224, 188, 0.25);
}


.live-casino-section
.live-knowledge-item[open]
summary::after {
    transform:
        rotate(45deg);
}


.live-casino-section
.live-knowledge-item summary:hover {
    background:
        rgba(43, 222, 184, 0.06);
}


.live-casino-section
.live-knowledge-item > div {
    padding:
        0
        17px
        17px;
}


.live-casino-section
.live-knowledge-item p {
    margin: 0;

    color: #b9ccc9;

    font-size: 12px;

    line-height: 1.62;
}


.live-casino-section
.live-knowledge-item p + p {
    margin-top: 9px;
}

/*=============================================
                      FAQ End
=============================================*/


/*=============================================
                  Closing Start
=============================================*/

.live-casino-section
.live-casino-closing {
    margin-top: 22px;

    padding:
        27px
        29px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 38px;

    border:
        1px solid
        rgba(49, 226, 189, 0.19);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 3% 20%,
            rgba(40, 226, 185, 0.10),
            transparent 40%
        ),
        radial-gradient(
            circle at 96% 80%,
            rgba(61, 210, 255, 0.06),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(4, 44, 43, 0.94),
            rgba(4, 19, 28, 0.98)
        );
}


.live-casino-section
.live-casino-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            26px,
            2.5vw,
            39px
        );

    font-weight: 900;

    line-height: 1.04;
}


.live-casino-section
.live-casino-closing p {
    margin: 0;

    color: #bed0cd;

    font-size: 13px;

    line-height: 1.65;
}


.live-casino-section
.live-casino-closing p + p {
    margin-top: 10px;
}

/*=============================================
                   Closing End
=============================================*/


/*=============================================
                 Responsive Start
=============================================*/

@media (max-width: 1540px) {

    .live-casino-section
    .games-site-navigation,
    .live-casino-section
    .games-site-navigation.is-floating,
    .live-casino-section
    .games-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;
    }


    .live-casino-section
    .games-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .live-casino-section
    .games-site-switcher-button,
    .live-casino-section
    .games-site-switcher-button.is-active {
        transform: none;
    }

}


@media (max-width: 1180px) {

    .live-casino-section .games-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .live-casino-section .live-experience,
    .live-casino-section .live-games-navigation,
    .live-casino-section .live-context-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 850px) {

    .live-casino-section {
        padding:
            36px
            16px
            60px;
    }


    .live-casino-section .games-intro,
    .live-casino-section .games-panel-heading,
    .live-casino-section .live-casino-closing,
    .live-casino-section .game-detail,
    .live-casino-section .live-knowledge-head {
        grid-template-columns:
            1fr;
    }


    .live-casino-section .games-intro {
        gap: 25px;

        padding:
            27px
            22px;
    }


    .live-casino-section .live-casino-stage {
        padding:
            20px
            17px;
    }


    .live-casino-section .games-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .live-casino-section
    .live-knowledge-head > p {
        text-align: left;
    }


    .live-casino-section
    .live-knowledge-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .live-casino-section
    .games-site-switcher,
    .live-casino-section
    .games-grid,
    .live-casino-section
    .live-experience,
    .live-casino-section
    .live-games-navigation,
    .live-casino-section
    .live-context-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .live-casino-section
    .games-navigation-button {
        min-height: 88px;

        grid-template-columns:
            42px
            minmax(0, 1fr);

        padding:
            12px;
    }


    .live-casino-section
    .games-nav-icon {
        width: 42px;
        height: 42px;
    }


    .live-casino-section
    .games-intro h2 {
        font-size: 38px;
    }


    .live-casino-section
    .games-subpanel-head {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 410px) {

    .live-casino-section
    .games-grid,
    .live-casino-section
    .live-experience,
    .live-casino-section
    .live-games-navigation,
    .live-casino-section
    .live-context-grid {
        grid-template-columns:
            1fr;
    }

}

/*=============================================
                  Responsive End
=============================================*/

/*=============================================
                    Live Casino End
=============================================*/

/*=============================================
                 Tournaments Start
=============================================*/

.tournaments-section {
    --tournament-blue: #49c8ff;
    --tournament-blue-rgb: 73, 200, 255;

    --tournament-gold: #ffd34f;
    --tournament-gold-rgb: 255, 211, 79;

    --tournament-green: #42e0a8;
    --tournament-green-rgb: 66, 224, 168;

    --tournament-orange: #ff8750;
    --tournament-orange-rgb: 255, 135, 80;

    --tournament-pink: #ff4da8;
    --tournament-pink-rgb: 255, 77, 168;

    --tournament-violet: #9a73ff;
    --tournament-violet-rgb: 154, 115, 255;

    position: relative;

    padding:
        58px
        24px
        86px;

    overflow: visible;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 5% 3%,
            rgba(49, 154, 255, 0.24) 0%,
            rgba(49, 154, 255, 0.065) 31%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 94% 7%,
            rgba(255, 191, 56, 0.18) 0%,
            rgba(255, 191, 56, 0.045) 30%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 82% 72%,
            rgba(154, 103, 255, 0.13) 0%,
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #050a1b 0%,
            #0a1530 37%,
            #11162e 68%,
            #070a18 100%
        );

    border-top:
        1px solid
        rgba(255, 211, 79, 0.20);
}


.tournaments-section[hidden] {
    display: none !important;
}


.tournaments-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 4px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #49c8ff,
            #8774ff,
            #ffd34f,
            #ff8750,
            #ff4da8,
            transparent
        );

    box-shadow:
        0 0 34px
        rgba(85, 126, 255, 0.48);
}


.tournaments-section::after {
    content: "";

    position: absolute;

    right: -140px;
    top: 430px;

    z-index: -1;

    width: 370px;
    height: 370px;

    border:
        24px dashed
        rgba(255, 210, 78, 0.032);

    border-radius: 50%;

    transform:
        rotate(19deg);
}


/*=============================================
                 Container Start
=============================================*/

.tournaments-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.tournaments-main {
    min-width: 0;
}

/*=============================================
                  Container End
=============================================*/


/*=============================================
              Site Navigation Start
=============================================*/

.tournaments-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 90;

    pointer-events: none;
}


.tournaments-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(94, 144, 255, 0.27);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(14, 22, 56, 0.97),
            rgba(5, 10, 27, 0.99)
        );

    box-shadow:
        0 24px 58px
        rgba(0, 4, 18, 0.50),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    pointer-events: auto;
}


.tournaments-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.tournaments-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.tournaments-site-switcher-button {
    --section-accent: #7488ff;
    --section-accent-rgb: 116, 136, 255;
    --section-ink: #0b1230;

    width: 100%;

    min-height: 66px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.50
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.15
            ),
            rgba(255, 255, 255, 0.018)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.tournaments-site-switcher-button[data-section-target="slots"] {
    --section-accent: #d94cff;
    --section-accent-rgb: 217, 76, 255;
    --section-ink: #25072d;
}


.tournaments-site-switcher-button[data-section-target="table-games"] {
    --section-accent: #45d5ff;
    --section-accent-rgb: 69, 213, 255;
    --section-ink: #041e2b;
}


.tournaments-site-switcher-button[data-section-target="live-casino"] {
    --section-accent: #2be4ba;
    --section-accent-rgb: 43, 228, 186;
    --section-ink: #04241e;
}


.tournaments-site-switcher-button[data-section-target="bonuses"] {
    --section-accent: #ff4fa8;
    --section-accent-rgb: 255, 79, 168;
    --section-ink: #32061d;
}


.tournaments-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd34f;
    --section-accent-rgb: 255, 211, 79;
    --section-ink: #302205;
}


.tournaments-site-switcher-button[data-section-target="vip"] {
    --section-accent: #ff9854;
    --section-accent-rgb: 255, 152, 84;
    --section-ink: #321705;
}


.tournaments-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.85
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.14
        );

    color:
        var(--section-accent);

    font-size: 10px;

    font-weight: 900;
}


.tournaments-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.08;
}


.tournaments-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(228, 231, 248, 0.72);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.18;
}


.tournaments-site-switcher-button:hover,
.tournaments-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 27px
        rgba(2, 5, 22, 0.35),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.24
        );

    outline: none;
}


.tournaments-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.88);

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.76
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(2, 5, 22, 0.40),
        0 0 34px
        rgba(
            var(--section-accent-rgb),
            0.40
        );
}


.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-icon,
.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-copy strong {
    color:
        var(--section-ink);
}


.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-copy small {
    color:
        rgba(18, 18, 23, 0.66);
}

/*=============================================
               Site Navigation End
=============================================*/


/*=============================================
                Tournament Hero Start
=============================================*/

.tournaments-intro {
    position: relative;

    margin-bottom: 18px;

    padding:
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.56fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(91, 155, 255, 0.30);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(72, 134, 255, 0.19),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 206, 72, 0.13),
            transparent 39%
        ),
        linear-gradient(
            145deg,
            rgba(16, 27, 67, 0.98),
            rgba(8, 14, 36, 0.99)
        );

    box-shadow:
        0 25px 60px
        rgba(2, 5, 22, 0.38),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}


.tournaments-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 23px;
    bottom: 23px;

    width: 5px;

    border-radius:
        0
        8px
        8px
        0;

    background:
        linear-gradient(
            180deg,
            #49c8ff,
            #8972ff,
            #ffd34f,
            #ff8750
        );

    box-shadow:
        0 0 24px
        rgba(99, 132, 255, 0.50);
}


.tournaments-eyebrow,
.tournaments-panel-kicker {
    margin:
        0
        0
        9px;

    color: #a7caff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.tournaments-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            3.65vw,
            60px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.tournaments-intro-copy > p {
    margin:
        15px
        0
        0;

    color: #cbd2e5;

    font-size: 15px;

    line-height: 1.65;
}


.tournaments-intro-copy
.tournaments-intro-lead {
    color: #ffffff;

    font-size: 17px;

    font-weight: 750;

    line-height: 1.6;
}


.tournaments-intro-actions {
    margin-top: 22px;

    display: flex;

    flex-wrap: wrap;

    gap: 11px;
}


.tournaments-action {
    min-height: 48px;

    padding:
        0
        18px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    font-size: 13px;

    font-weight: 900;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}


.tournaments-action-primary {
    border:
        1px solid
        rgba(67, 226, 170, 0.75);

    background:
        linear-gradient(
            135deg,
            #46e3aa,
            #22bb91
        );

    color: #06281d;

    box-shadow:
        0 12px 28px
        rgba(37, 211, 157, 0.18);
}


.tournaments-action-secondary {
    border:
        1px solid
        rgba(255, 141, 80, 0.72);

    background:
        linear-gradient(
            135deg,
            rgba(255, 135, 80, 0.22),
            rgba(255, 135, 80, 0.08)
        );

    color: #ffaf82;
}


.tournaments-action:hover,
.tournaments-action:focus-visible {
    transform:
        translateY(-3px);

    filter:
        brightness(1.06);

    outline: none;
}


.tournaments-intro-media {
    position: relative;

    min-height: 390px;

    margin: 0;

    overflow: hidden;

    border:
        2px solid
        rgba(255, 211, 79, 0.57);

    border-radius: 21px;

    background: #10152e;

    box-shadow:
        0 23px 53px
        rgba(2, 5, 22, 0.42),
        0 0 31px
        rgba(255, 202, 64, 0.12);
}


.tournaments-intro-media img {
    width: 100%;
    height: 390px;

    object-fit: cover;

    object-position: center;
}


.tournaments-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(6, 9, 27, 0.01) 15%,
            rgba(6, 9, 27, 0.94) 100%
        );
}


.tournaments-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 21px;
    right: 21px;
    bottom: 20px;
}


.tournaments-intro-media figcaption span,
.tournaments-intro-media figcaption strong,
.tournaments-intro-media figcaption small {
    display: block;
}


.tournaments-intro-media figcaption span {
    color: #ffd45f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.tournaments-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 32px;

    font-weight: 900;

    line-height: 1.05;
}


.tournaments-intro-media figcaption small {
    margin-top: 8px;

    color: #d7dbe8;

    font-size: 13px;

    line-height: 1.45;
}

/*=============================================
                 Tournament Hero End
=============================================*/


/*=============================================
                 Tournament Scale Start
=============================================*/

.tournaments-scale {
    margin-bottom: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.tournaments-scale article {
    --scale-rgb: 73, 200, 255;
    --scale-accent: #49c8ff;

    position: relative;

    padding:
        24px
        22px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            var(--scale-rgb),
            0.38
        );

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--scale-rgb),
                0.16
            ),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            rgba(
                var(--scale-rgb),
                0.10
            ),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 14px 32px
        rgba(2, 5, 22, 0.26);
}


.tournaments-scale article:nth-child(2) {
    --scale-rgb: 255, 211, 79;
    --scale-accent: #ffd34f;
}


.tournaments-scale article:nth-child(3) {
    --scale-rgb: 255, 79, 168;
    --scale-accent: #ff4fa8;
}


.tournaments-scale article > span {
    display: block;

    color:
        var(--scale-accent);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.tournaments-scale article > strong {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size:
        clamp(
            38px,
            3vw,
            56px
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.04em;
}


.tournaments-scale h3 {
    margin:
        10px
        0
        0;

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;

    line-height: 1.15;
}


.tournaments-scale p {
    margin:
        9px
        0
        0;

    color: #c9cedd;

    font-size: 13px;

    line-height: 1.55;
}

/*=============================================
                  Tournament Scale End
=============================================*/


/*=============================================
               Featured Tournaments Start
=============================================*/

.tournaments-featured {
    margin-top: 22px;

    padding:
        30px;

    border:
        1px solid
        rgba(105, 136, 255, 0.20);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 2% 2%,
            rgba(70, 112, 255, 0.09),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(15, 22, 55, 0.96),
            rgba(7, 12, 31, 0.98)
        );

    box-shadow:
        0 25px 56px
        rgba(2, 5, 22, 0.31);
}


.tournaments-featured-heading {
    max-width: 920px;

    margin-bottom: 22px;
}


.tournaments-featured-heading h3,
.tournaments-leaderboard h3,
.tournaments-prize-copy h3,
.tournaments-vip h3,
.tournaments-knowledge h3,
.tournaments-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            2.7vw,
            43px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.tournaments-featured-heading > p:last-child {
    margin:
        10px
        0
        0;

    color: #c8cede;

    font-size: 14px;

    line-height: 1.6;
}


.tournaments-featured-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 16px;
}


.tournament-showcase {
    --showcase-color: #43e0aa;
    --showcase-rgb: 67, 224, 170;

    padding:
        25px;

    border:
        2px solid
        rgba(
            var(--showcase-rgb),
            0.48
        );

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--showcase-rgb),
                0.14
            ),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(
                var(--showcase-rgb),
                0.075
            ),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 18px 42px
        rgba(2, 5, 22, 0.30),
        0 0 28px
        rgba(
            var(--showcase-rgb),
            0.08
        );

    scroll-margin-top:
        110px;
}


.tournament-showcase-free {
    --showcase-color: #43e0aa;
    --showcase-rgb: 67, 224, 170;
}


.tournament-showcase-buyin {
    --showcase-color: #ff8750;
    --showcase-rgb: 255, 135, 80;
}


.tournament-showcase-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: start;
}


.tournament-showcase-type {
    display: block;

    margin-bottom: 8px;

    color:
        var(--showcase-color);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.tournament-showcase h4 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            24px,
            2vw,
            32px
        );

    font-weight: 900;

    line-height: 1.08;
}


.tournament-showcase-value {
    min-width: 112px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(
            var(--showcase-rgb),
            0.48
        );

    border-radius: 14px;

    background:
        rgba(
            var(--showcase-rgb),
            0.11
        );

    text-align: center;
}


.tournament-showcase-value span,
.tournament-showcase-value strong {
    display: block;
}


.tournament-showcase-value span {
    color: #d5d9e6;

    font-size: 11px;

    font-weight: 800;
}


.tournament-showcase-value strong {
    margin-top: 5px;

    color:
        var(--showcase-color);

    font-size: 22px;

    font-weight: 900;
}


.tournament-showcase-lead {
    margin:
        14px
        0
        0;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.6;
}


.tournament-showcase-columns {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.tournament-showcase-block {
    padding:
        17px;

    border:
        1px solid
        rgba(
            var(--showcase-rgb),
            0.18
        );

    border-radius: 14px;

    background:
        rgba(2, 6, 21, 0.34);
}


.tournament-showcase-label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--showcase-color);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.tournament-showcase-block h5 {
    margin: 0;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.2;
}


.tournament-showcase-block p {
    margin:
        8px
        0
        0;

    color: #c8cedc;

    font-size: 13px;

    line-height: 1.6;
}


.tournament-showcase-block p + p {
    margin-top: 10px;
}


.tournament-showcase-reward {
    margin-top: 14px;

    padding:
        17px
        18px;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.42fr)
        minmax(0, 1.58fr);

    gap: 24px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--showcase-rgb),
            0.23
        );

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--showcase-rgb),
                0.13
            ),
            rgba(
                var(--showcase-rgb),
                0.035
            )
        );
}


.tournament-showcase-reward span {
    display: block;

    color:
        var(--showcase-color);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.tournament-showcase-reward strong {
    display: block;

    margin-top: 4px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;
}


.tournament-showcase-reward p {
    margin: 0;

    color: #d2d6e2;

    font-size: 13px;

    line-height: 1.58;
}

/*=============================================
                Featured Tournaments End
=============================================*/


/*=============================================
                 Leaderboard Start
=============================================*/

.tournaments-leaderboard {
    margin-top: 22px;

    padding:
        30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap: 34px;

    align-items: center;

    border:
        1px solid
        rgba(73, 200, 255, 0.24);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(73, 200, 255, 0.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(9, 31, 60, 0.93),
            rgba(7, 13, 31, 0.98)
        );
}


.tournaments-leaderboard-copy > p:not(.tournaments-panel-kicker) {
    margin:
        11px
        0
        0;

    color: #c8d0df;

    font-size: 14px;

    line-height: 1.62;
}


.tournaments-leaderboard-board {
    padding:
        17px;

    border:
        1px solid
        rgba(73, 200, 255, 0.24);

    border-radius: 17px;

    background:
        rgba(3, 9, 25, 0.48);
}


.tournaments-board-title {
    margin-bottom: 10px;

    padding:
        4px
        3px
        11px;

    border-bottom:
        1px solid
        rgba(87, 187, 255, 0.18);
}


.tournaments-board-title span,
.tournaments-board-title strong {
    display: block;
}


.tournaments-board-title span {
    color: #62ceff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.10em;
}


.tournaments-board-title strong {
    margin-top: 4px;

    color: #ffffff;

    font-size: 21px;

    font-weight: 900;
}


.tournaments-board-row {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    gap: 11px;

    align-items: center;

    padding:
        12px;

    border:
        1px solid
        rgba(96, 171, 255, 0.15);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.tournaments-board-row + .tournaments-board-row {
    margin-top: 8px;
}


.tournaments-board-row > span {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(75, 193, 255, 0.11);

    color: #5dcbff;

    font-size: 13px;

    font-weight: 900;
}


.tournaments-board-row strong {
    color: #ffffff;

    font-size: 13px;

    font-weight: 900;
}


.tournaments-board-row small {
    color: #c3cad9;

    font-size: 11px;

    font-weight: 700;
}


.tournaments-board-row.is-first {
    border-color:
        rgba(255, 211, 79, 0.37);
}


.tournaments-board-row.is-first > span {
    background:
        rgba(255, 211, 79, 0.15);

    color: #ffd34f;
}


.tournaments-board-row.is-second {
    border-color:
        rgba(174, 193, 220, 0.25);
}


.tournaments-board-row.is-third {
    border-color:
        rgba(255, 137, 80, 0.28);
}

/*=============================================
                  Leaderboard End
=============================================*/


/*=============================================
                  Prize Focus Start
=============================================*/

.tournaments-prize-focus {
    margin-top: 22px;

    padding:
        30px;

    display: grid;

    grid-template-columns:
        minmax(310px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 34px;

    align-items: center;

    border:
        1px solid
        rgba(255, 211, 79, 0.24);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(255, 203, 67, 0.12),
            transparent 39%
        ),
        linear-gradient(
            145deg,
            rgba(35, 27, 39, 0.92),
            rgba(9, 13, 30, 0.98)
        );
}


.tournaments-prize-number {
    padding:
        25px;

    border:
        1px solid
        rgba(255, 211, 79, 0.34);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 209, 73, 0.12),
            rgba(255, 209, 73, 0.035)
        );

    text-align: center;
}


.tournaments-prize-number span,
.tournaments-prize-number strong,
.tournaments-prize-number small {
    display: block;
}


.tournaments-prize-number span {
    color: #ffd34f;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.10em;
}


.tournaments-prize-number strong {
    margin-top: 8px;

    color: #ffffff;

    font-size:
        clamp(
            48px,
            4.6vw,
            72px
        );

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.tournaments-prize-number small {
    margin-top: 10px;

    color: #d1d4df;

    font-size: 13px;

    line-height: 1.45;
}


.tournaments-prize-copy > p:not(.tournaments-panel-kicker) {
    margin:
        11px
        0
        0;

    color: #c9cedd;

    font-size: 14px;

    line-height: 1.62;
}

/*=============================================
                   Prize Focus End
=============================================*/


/*=============================================
                 VIP Competition Start
=============================================*/

.tournaments-vip {
    margin-top: 22px;

    padding:
        29px
        30px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    gap: 34px;

    align-items: center;

    border:
        1px solid
        rgba(157, 115, 255, 0.27);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(154, 111, 255, 0.13),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(30, 20, 64, 0.94),
            rgba(8, 11, 29, 0.98)
        );
}


.tournaments-vip-copy > p:not(.tournaments-panel-kicker) {
    margin:
        11px
        0
        0;

    color: #c9ccdd;

    font-size: 14px;

    line-height: 1.6;
}


.tournaments-vip-card {
    padding:
        23px;

    border:
        1px solid
        rgba(161, 117, 255, 0.42);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(156, 110, 255, 0.16),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        0 0 31px
        rgba(147, 102, 255, 0.13);
}


.tournaments-vip-card span,
.tournaments-vip-card strong {
    display: block;
}


.tournaments-vip-card span {
    color: #bd9cff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.11em;
}


.tournaments-vip-card strong {
    margin-top: 6px;

    color: #ffffff;

    font-size: 24px;

    font-weight: 900;
}


.tournaments-vip-card p {
    margin:
        9px
        0
        0;

    color: #cbcadd;

    font-size: 13px;

    line-height: 1.57;
}

/*=============================================
                  VIP Competition End
=============================================*/


/*=============================================
                  Tournament FAQ Start
=============================================*/

.tournaments-knowledge {
    margin-top: 22px;

    padding:
        29px
        30px;

    border:
        1px solid
        rgba(110, 139, 255, 0.20);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 23, 56, 0.95),
            rgba(7, 13, 33, 0.98)
        );
}


.tournaments-knowledge-heading {
    margin-bottom: 18px;
}


.tournaments-knowledge-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.tournaments-knowledge-grid details {
    overflow: hidden;

    border:
        1px solid
        rgba(112, 142, 255, 0.19);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.018);
}


.tournaments-knowledge-grid summary {
    min-height: 62px;

    padding:
        14px
        16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    list-style: none;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.35;

    cursor: pointer;
}


.tournaments-knowledge-grid
summary::-webkit-details-marker {
    display: none;
}


.tournaments-knowledge-grid summary::after {
    content: "+";

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        31px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ffd34f,
            #ff8750
        );

    color: #2d1b03;

    font-size: 19px;

    font-weight: 900;

    transition:
        transform 0.2s ease;
}


.tournaments-knowledge-grid
details[open]
summary::after {
    transform:
        rotate(45deg);
}


.tournaments-knowledge-grid details > div {
    padding:
        0
        16px
        17px;
}


.tournaments-knowledge-grid p {
    margin: 0;

    color: #c2c8da;

    font-size: 13px;

    line-height: 1.62;
}

/*=============================================
                   Tournament FAQ End
=============================================*/


/*=============================================
                Tournament Closing Start
=============================================*/

.tournaments-closing {
    margin-top: 22px;

    padding:
        28px
        30px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid
        rgba(112, 140, 255, 0.20);

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(72, 111, 255, 0.08),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 205, 75, 0.055),
            transparent 31%
        ),
        rgba(255, 255, 255, 0.016);
}


.tournaments-closing > div:last-child p {
    margin: 0;

    color: #c9cfdf;

    font-size: 14px;

    line-height: 1.62;
}


.tournaments-closing > div:last-child p + p {
    margin-top: 10px;
}

/*=============================================
                 Tournament Closing End
=============================================*/


/*=============================================
                   Responsive Start
=============================================*/

@media (max-width: 1500px) {

    .tournaments-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }


    .tournaments-site-navigation {
        left: -160px;

        width: 140px;
    }


    .tournaments-site-switcher {
        width: 140px;
    }


    .tournaments-site-navigation.is-at-bottom {
        left: -160px;
    }

}


@media (max-width: 1240px) {

    .tournaments-site-navigation,
    .tournaments-site-navigation.is-floating,
    .tournaments-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }


    .tournaments-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .tournaments-site-switcher-button,
    .tournaments-site-switcher-button.is-active {
        transform: none;
    }


    .tournaments-intro {
        grid-template-columns:
            1fr;
    }


    .tournaments-featured-grid {
        grid-template-columns:
            1fr;
    }


    .tournaments-leaderboard,
    .tournaments-prize-focus,
    .tournaments-vip {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 980px) {

    .tournaments-scale {
        grid-template-columns:
            1fr;
    }


    .tournament-showcase-columns {
        grid-template-columns:
            1fr;
    }


    .tournament-showcase-reward {
        grid-template-columns:
            1fr;

        gap: 11px;
    }


    .tournaments-knowledge-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 760px) {

    .tournaments-section {
        padding:
            36px
            13px
            60px;
    }


    .tournaments-container {
        width: 100%;
    }


    .tournaments-intro {
        padding:
            27px
            21px;
    }


    .tournaments-intro h2 {
        font-size:
            clamp(
                36px,
                9vw,
                49px
            );
    }


    .tournaments-intro-copy > p {
        font-size: 14px;
    }


    .tournaments-intro-copy
    .tournaments-intro-lead {
        font-size: 16px;
    }


    .tournaments-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .tournaments-featured,
    .tournaments-leaderboard,
    .tournaments-prize-focus,
    .tournaments-vip,
    .tournaments-knowledge {
        padding:
            22px
            18px;
    }


    .tournament-showcase {
        padding:
            20px;
    }


    .tournament-showcase-head {
        grid-template-columns:
            1fr;
    }


    .tournament-showcase-value {
        width: fit-content;
    }


    .tournaments-board-row {
        grid-template-columns:
            42px
            minmax(0, 1fr);
    }


    .tournaments-board-row small {
        grid-column:
            2;
    }


    .tournaments-closing {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 520px) {

    .tournaments-site-switcher {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .tournaments-intro-actions {
        flex-direction: column;
    }


    .tournaments-action {
        width: 100%;
    }


    .tournaments-scale article > strong {
        font-size: 40px;
    }


    .tournament-showcase h4 {
        font-size: 23px;
    }


    .tournaments-prize-number strong {
        font-size: 50px;
    }

}

/*=============================================
                    Responsive End
=============================================*/

/*=============================================
                  Tournaments End
=============================================*/
/*=============================================
                    Bonuses Start
=============================================*/

.bonuses-section {
    --bonus-pink: #ff4f9f;
    --bonus-pink-rgb: 255, 79, 159;

    --bonus-peach: #ff9364;
    --bonus-peach-rgb: 255, 147, 100;

    --bonus-gold: #ffd45d;
    --bonus-gold-rgb: 255, 212, 93;

    --bonus-cyan: #50d8ff;
    --bonus-cyan-rgb: 80, 216, 255;

    --bonus-mint: #42e3b0;
    --bonus-mint-rgb: 66, 227, 176;

    --bonus-violet: #a272ff;
    --bonus-violet-rgb: 162, 114, 255;

    position: relative;

    padding:
        58px
        24px
        86px;

    overflow: visible;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 7% 4%,
            rgba(255, 70, 149, 0.22) 0%,
            rgba(255, 70, 149, 0.055) 31%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 92% 7%,
            rgba(255, 190, 78, 0.17) 0%,
            rgba(255, 190, 78, 0.04) 30%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 85% 68%,
            rgba(161, 101, 255, 0.11) 0%,
            transparent 43%
        ),
        linear-gradient(
            145deg,
            #170817 0%,
            #261025 37%,
            #1d1022 67%,
            #100914 100%
        );

    border-top:
        1px solid
        rgba(255, 113, 171, 0.20);
}


.bonuses-section[hidden] {
    display: none !important;
}


.bonuses-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 4px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff4f9f,
            #ff9564,
            #ffd45d,
            #a272ff,
            #50d8ff,
            transparent
        );

    box-shadow:
        0 0 34px
        rgba(255, 83, 157, 0.39);
}


/*=============================================
                  Container Start
=============================================*/

.bonuses-section .promotion-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.bonuses-section .promotion-main {
    min-width: 0;
}

/*=============================================
                   Container End
=============================================*/


/*=============================================
               Site Navigation Start
=============================================*/

.bonuses-section .promotion-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 90;

    pointer-events: none;
}


.bonuses-section .promotion-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(255, 110, 171, 0.24);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(48, 18, 42, 0.96),
            rgba(21, 9, 26, 0.985)
        );

    box-shadow:
        0 24px 58px
        rgba(8, 2, 10, 0.48),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(22px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(155%);

    pointer-events: auto;
}


.bonuses-section
.promotion-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.bonuses-section
.promotion-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.bonuses-section
.promotion-site-switcher-button {
    --section-accent: #ff5ba5;
    --section-accent-rgb: 255, 91, 165;
    --section-ink: #32091f;

    width: 100%;

    min-height: 66px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.48
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.15
            ),
            rgba(255, 255, 255, 0.018)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="slots"] {
    --section-accent: #d94cff;
    --section-accent-rgb: 217, 76, 255;
    --section-ink: #25072d;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="table-games"] {
    --section-accent: #45d5ff;
    --section-accent-rgb: 69, 213, 255;
    --section-ink: #041e2b;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="live-casino"] {
    --section-accent: #2be4ba;
    --section-accent-rgb: 43, 228, 186;
    --section-ink: #04241e;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="bonuses"] {
    --section-accent: #ff4f9f;
    --section-accent-rgb: 255, 79, 159;
    --section-ink: #32061d;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd34f;
    --section-accent-rgb: 255, 211, 79;
    --section-ink: #302205;
}


.bonuses-section
.promotion-site-switcher-button[data-section-target="vip"] {
    --section-accent: #ff9954;
    --section-accent-rgb: 255, 153, 84;
    --section-ink: #321705;
}


.bonuses-section .promotion-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.85
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.14
        );

    color:
        var(--section-accent);

    font-size: 10px;

    font-weight: 900;
}


.bonuses-section
.promotion-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;
}


.bonuses-section
.promotion-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(242, 229, 237, 0.72);

    font-size: 10px;

    font-weight: 700;
}


.bonuses-section
.promotion-site-switcher-button:hover,
.bonuses-section
.promotion-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 28px
        rgba(8, 2, 10, 0.34),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.23
        );

    outline: none;
}


.bonuses-section
.promotion-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.86);

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.76
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 32px
        rgba(8, 2, 10, 0.40),
        0 0 35px
        rgba(
            var(--section-accent-rgb),
            0.38
        );
}


.bonuses-section
.promotion-site-switcher-button.is-active
.promotion-site-switcher-icon,
.bonuses-section
.promotion-site-switcher-button.is-active
.promotion-site-switcher-copy strong {
    color:
        var(--section-ink);
}

/*=============================================
                Site Navigation End
=============================================*/


/*=============================================
                    Intro Start
=============================================*/

.bonuses-section .promotion-intro {
    position: relative;

    margin-bottom: 18px;

    padding:
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.56fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 111, 174, 0.30);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 75, 155, 0.17),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 198, 72, 0.11),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(50, 19, 44, 0.98),
            rgba(24, 11, 29, 0.99)
        );

    box-shadow:
        0 25px 60px
        rgba(9, 2, 10, 0.37),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}


.bonuses-section .promotion-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 23px;
    bottom: 23px;

    width: 5px;

    border-radius:
        0
        8px
        8px
        0;

    background:
        linear-gradient(
            180deg,
            #ff4f9f,
            #ff9364,
            #ffd45d,
            #a272ff
        );

    box-shadow:
        0 0 24px
        rgba(255, 84, 158, 0.42);
}


.bonuses-section .promotion-eyebrow,
.bonuses-section .promotion-panel-kicker,
.bonuses-section .promotion-offer-type {
    margin:
        0
        0
        9px;

    color: #ff97c2;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.bonuses-section .promotion-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            3.65vw,
            60px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.bonuses-section
.promotion-intro-copy > p {
    margin:
        15px
        0
        0;

    color: #ddcfd7;

    font-size: 15px;

    line-height: 1.65;
}


.bonuses-section
.promotion-intro-copy
.promotion-intro-lead {
    color: #ffffff;

    font-size: 17px;

    font-weight: 750;
}


.bonuses-section
.promotion-intro-media {
    position: relative;

    min-height: 390px;

    margin: 0;

    overflow: hidden;

    border:
        2px solid
        rgba(255, 200, 79, 0.53);

    border-radius: 21px;

    background: #160c17;

    box-shadow:
        0 23px 53px
        rgba(9, 2, 10, 0.42);
}


.bonuses-section
.promotion-intro-media img {
    width: 100%;
    height: 390px;

    object-fit: cover;
    object-position: center;
}


.bonuses-section
.promotion-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10, 5, 15, 0.01) 15%,
            rgba(10, 5, 15, 0.94) 100%
        );
}


.bonuses-section
.promotion-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 21px;
    right: 21px;
    bottom: 20px;
}


.bonuses-section
.promotion-intro-media figcaption span,
.bonuses-section
.promotion-intro-media figcaption strong,
.bonuses-section
.promotion-intro-media figcaption small {
    display: block;
}


.bonuses-section
.promotion-intro-media figcaption span {
    color: #ffd45d;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.11em;
}


.bonuses-section
.promotion-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 900;
}


.bonuses-section
.promotion-intro-media figcaption small {
    margin-top: 7px;

    color: #ddd4da;

    font-size: 13px;

    line-height: 1.45;
}

/*=============================================
                     Intro End
=============================================*/


/*=============================================
                  Snapshot Start
=============================================*/

.bonuses-section .promotion-snapshot {
    margin-bottom: 19px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.bonuses-section
.promotion-snapshot article {
    --snapshot-accent: #ff5ca6;
    --snapshot-rgb: 255, 92, 166;

    padding:
        18px;

    border:
        1px solid
        rgba(
            var(--snapshot-rgb),
            0.34
        );

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--snapshot-rgb),
                0.13
            ),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(
                var(--snapshot-rgb),
                0.09
            ),
            rgba(255, 255, 255, 0.018)
        );
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="welcome"] {
    --snapshot-accent: #ffd45d;
    --snapshot-rgb: 255, 212, 93;
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="deposit"] {
    --snapshot-accent: #ff9364;
    --snapshot-rgb: 255, 147, 100;
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="wagering"] {
    --snapshot-accent: #42e3b0;
    --snapshot-rgb: 66, 227, 176;
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="twister"] {
    --snapshot-accent: #ff4f9f;
    --snapshot-rgb: 255, 79, 159;
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="plus"] {
    --snapshot-accent: #50d8ff;
    --snapshot-rgb: 80, 216, 255;
}


.bonuses-section
.promotion-snapshot article[data-promotion-snapshot="daily"] {
    --snapshot-accent: #a272ff;
    --snapshot-rgb: 162, 114, 255;
}


.bonuses-section
.promotion-snapshot span,
.bonuses-section
.promotion-snapshot strong,
.bonuses-section
.promotion-snapshot small {
    display: block;
}


.bonuses-section
.promotion-snapshot span {
    color:
        var(--snapshot-accent);

    font-size: 11px;

    font-weight: 900;

    text-transform: uppercase;
}


.bonuses-section
.promotion-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 26px;

    font-weight: 900;
}


.bonuses-section
.promotion-snapshot small {
    margin-top: 6px;

    color: #d2c7cd;

    font-size: 12px;

    line-height: 1.4;
}

/*=============================================
                   Snapshot End
=============================================*/


/*=============================================
                     Tabs Start
=============================================*/

.bonuses-section .promotion-tabs {
    margin-bottom: 19px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.bonuses-section .promotion-tab {
    --tab-accent: #ff5ca6;
    --tab-accent-rgb: 255, 92, 166;
    --tab-ink: #33091f;

    min-height: 82px;

    padding:
        12px
        14px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        2px solid
        rgba(
            var(--tab-accent-rgb),
            0.70
        );

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.18
            ),
            rgba(25, 10, 27, 0.92)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(9, 2, 10, 0.28),
        0 0 18px
        rgba(
            var(--tab-accent-rgb),
            0.12
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.bonuses-section
.promotion-tab[data-promotion-target="welcome"] {
    --tab-accent: #ffd45d;
    --tab-accent-rgb: 255, 212, 93;
    --tab-ink: #322306;
}


.bonuses-section
.promotion-tab[data-promotion-target="kickers"] {
    --tab-accent: #ff4f9f;
    --tab-accent-rgb: 255, 79, 159;
    --tab-ink: #35061f;
}


.bonuses-section
.promotion-tab[data-promotion-target="ojoplus"] {
    --tab-accent: #50d8ff;
    --tab-accent-rgb: 80, 216, 255;
    --tab-ink: #05242e;
}


.bonuses-section
.promotion-tab[data-promotion-target="wheel"] {
    --tab-accent: #42e3b0;
    --tab-accent-rgb: 66, 227, 176;
    --tab-ink: #06271e;
}


.bonuses-section
.promotion-tab[data-promotion-target="twister"] {
    --tab-accent: #ff9364;
    --tab-accent-rgb: 255, 147, 100;
    --tab-ink: #351406;
}


.bonuses-section
.promotion-tab[data-promotion-target="levels"] {
    --tab-accent: #a272ff;
    --tab-accent-rgb: 162, 114, 255;
    --tab-ink: #19082f;
}


.bonuses-section .promotion-tab-icon {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        44px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.14
        );

    color:
        var(--tab-accent);

    font-size: 10px;

    font-weight: 900;
}


.bonuses-section
.promotion-tab-copy strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;
}


.bonuses-section
.promotion-tab-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(238, 226, 233, 0.73);

    font-size: 11px;

    font-weight: 700;
}


.bonuses-section
.promotion-tab:hover,
.bonuses-section
.promotion-tab:focus-visible {
    transform:
        translateY(-5px);

    border-color:
        var(--tab-accent);

    box-shadow:
        0 17px 34px
        rgba(9, 2, 10, 0.35),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.28
        );

    outline: none;
}


.bonuses-section
.promotion-tab.is-active {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.88);

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.76
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 18px 38px
        rgba(9, 2, 10, 0.40),
        0 0 38px
        rgba(
            var(--tab-accent-rgb),
            0.43
        );
}


.bonuses-section
.promotion-tab.is-active
.promotion-tab-copy strong,
.bonuses-section
.promotion-tab.is-active
.promotion-tab-icon {
    color:
        var(--tab-ink);
}


.bonuses-section
.promotion-tab.is-active
.promotion-tab-copy small {
    color:
        rgba(20, 15, 20, 0.67);
}

/*=============================================
                      Tabs End
=============================================*/


/*=============================================
                 Bonus Panels Start
=============================================*/

.bonuses-section .promotion-panel {
    --promo-accent: #ff5ca6;
    --promo-accent-rgb: 255, 92, 166;

    padding: 29px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.24
        );

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(
                var(--promo-accent-rgb),
                0.09
            ),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(42, 17, 38, 0.98),
            rgba(22, 10, 27, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(9, 2, 10, 0.34),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}


.bonuses-section
.promotion-panel[data-promotion-panel="welcome"] {
    --promo-accent: #ffd45d;
    --promo-accent-rgb: 255, 212, 93;
}


.bonuses-section
.promotion-panel[data-promotion-panel="kickers"] {
    --promo-accent: #ff4f9f;
    --promo-accent-rgb: 255, 79, 159;
}


.bonuses-section
.promotion-panel[data-promotion-panel="ojoplus"] {
    --promo-accent: #50d8ff;
    --promo-accent-rgb: 80, 216, 255;
}


.bonuses-section
.promotion-panel[data-promotion-panel="wheel"] {
    --promo-accent: #42e3b0;
    --promo-accent-rgb: 66, 227, 176;
}


.bonuses-section
.promotion-panel[data-promotion-panel="twister"] {
    --promo-accent: #ff9364;
    --promo-accent-rgb: 255, 147, 100;
}


.bonuses-section
.promotion-panel[data-promotion-panel="levels"] {
    --promo-accent: #a272ff;
    --promo-accent-rgb: 162, 114, 255;
}


.bonuses-section .promotion-panel[hidden] {
    display: none !important;
}


.bonuses-section
.promotion-panel-heading {
    padding-bottom: 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        210px;

    gap: 32px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.20
        );
}


.bonuses-section
.promotion-panel h3,
.bonuses-section
.promotion-guide h3,
.bonuses-section
.bonuses-faq h3,
.bonuses-section
.promotion-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            2.7vw,
            43px
        );

    font-weight: 900;

    line-height: 1.04;

    letter-spacing: -0.035em;
}


.bonuses-section
.promotion-panel-heading p {
    margin:
        11px
        0
        0;

    color: #d6cad1;

    font-size: 14px;

    line-height: 1.62;
}


.bonuses-section .promotion-panel-mark {
    padding:
        18px
        15px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.43
        );

    border-radius: 15px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.09
        );

    text-align: center;
}


.bonuses-section
.promotion-panel-mark span,
.bonuses-section
.promotion-panel-mark strong,
.bonuses-section
.promotion-panel-mark small {
    display: block;
}


.bonuses-section
.promotion-panel-mark span {
    color: #ded1d8;

    font-size: 11px;
}


.bonuses-section
.promotion-panel-mark strong {
    margin-top: 5px;

    color:
        var(--promo-accent);

    font-size: 30px;

    font-weight: 900;

    line-height: 1;
}


.bonuses-section
.promotion-panel-mark small {
    margin-top: 7px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;
}

/*=============================================
                  Bonus Panels End
=============================================*/


/*=============================================
                 Hero Offer Start
=============================================*/

.bonuses-section
.promotion-hero-offer {
    margin-top: 21px;

    padding: 21px;

    display: grid;

    grid-template-columns:
        275px
        minmax(0, 1fr);

    gap: 27px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.22
        );

    border-radius: 16px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.045
        );
}


.bonuses-section
.promotion-hero-value {
    padding:
        21px
        17px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.36
        );

    border-radius: 14px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.07
        );

    text-align: center;
}


.bonuses-section
.promotion-hero-value span,
.bonuses-section
.promotion-hero-value strong,
.bonuses-section
.promotion-hero-value small {
    display: block;
}


.bonuses-section
.promotion-hero-value span {
    color: #d8ccd2;

    font-size: 12px;
}


.bonuses-section
.promotion-hero-value strong {
    margin-top: 6px;

    color:
        var(--promo-accent);

    font-size: 38px;

    font-weight: 900;
}


.bonuses-section
.promotion-hero-value small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 12px;
}


.bonuses-section
.promotion-hero-copy h4 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;

    font-weight: 900;
}


.bonuses-section
.promotion-hero-copy p {
    margin:
        9px
        0
        0;

    color: #d2c7cd;

    font-size: 13.5px;

    line-height: 1.62;
}

/*=============================================
                  Hero Offer End
=============================================*/


/*=============================================
                  Claim Steps Start
=============================================*/

.bonus-claim-layout {
    margin-top: 23px;

    padding-top: 21px;

    display: grid;

    grid-template-columns:
        minmax(240px, 0.34fr)
        minmax(0, 1.66fr);

    gap: 29px;

    border-top:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );
}


.bonus-claim-copy h4 {
    margin: 0;

    color: #ffffff;

    font-size: 23px;

    font-weight: 900;

    line-height: 1.12;
}


.bonus-claim-copy > p:last-child {
    margin:
        8px
        0
        0;

    color: #d0c4ca;

    font-size: 13px;

    line-height: 1.58;
}


.bonus-claim-steps {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.bonus-claim-steps-four {
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
}


.bonus-claim-steps article {
    padding: 15px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.02);
}


.bonus-claim-steps article > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--promo-accent);

    font-size: 11px;

    font-weight: 900;
}


.bonus-claim-steps strong {
    display: block;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.2;
}


.bonus-claim-steps p {
    margin:
        6px
        0
        0;

    color: #d0c5ca;

    font-size: 11.5px;

    line-height: 1.5;
}

/*=============================================
                   Claim Steps End
=============================================*/


/*=============================================
                Condition Grid Start
=============================================*/

.bonuses-section .promotion-condition-grid {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.bonuses-section
.promotion-condition-grid article {
    padding:
        15px
        14px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.bonuses-section
.promotion-condition-grid span,
.bonuses-section
.promotion-condition-grid strong {
    display: block;
}


.bonuses-section
.promotion-condition-grid span {
    color: #bfaeb7;

    font-size: 10px;
}


.bonuses-section
.promotion-condition-grid strong {
    margin-top: 5px;

    color:
        var(--promo-accent);

    font-size: 17px;

    font-weight: 900;
}


.bonuses-section
.promotion-condition-grid p {
    margin:
        6px
        0
        0;

    color: #cec4c9;

    font-size: 11.5px;

    line-height: 1.45;
}

/*=============================================
                 Condition Grid End
=============================================*/


/*=============================================
               Feature Layout Start
=============================================*/

.bonus-feature-layout {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap: 23px;

    align-items: center;
}


.bonus-feature-copy {
    padding: 20px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.19
        );

    border-radius: 14px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.04
        );
}


.bonus-feature-copy h4 {
    margin: 0;

    color: #ffffff;

    font-size: 24px;

    font-weight: 900;
}


.bonus-feature-copy p {
    margin:
        9px
        0
        0;

    color: #d0c6cb;

    font-size: 13px;

    line-height: 1.6;
}


.bonus-feature-points {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.bonus-feature-points article {
    padding:
        16px
        14px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.19
        );

    border-radius: 12px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.04
        );

    text-align: center;
}


.bonus-feature-points span,
.bonus-feature-points strong {
    display: block;
}


.bonus-feature-points span {
    color: #c1b2ba;

    font-size: 9px;
}


.bonus-feature-points strong {
    margin-top: 5px;

    color:
        var(--promo-accent);

    font-size: 15px;

    font-weight: 900;
}

/*=============================================
                Feature Layout End
=============================================*/


/*=============================================
                    OJOplus Start
=============================================*/

.ojoplus-showcase {
    margin-top: 22px;

    padding: 22px;

    display: grid;

    grid-template-columns:
        275px
        minmax(0, 1fr);

    gap: 28px;

    align-items: center;

    border:
        1px solid
        rgba(80, 216, 255, 0.25);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(80, 216, 255, 0.07),
            rgba(255, 255, 255, 0.016)
        );
}


.ojoplus-value {
    padding:
        23px;

    border:
        1px solid
        rgba(80, 216, 255, 0.34);

    border-radius: 15px;

    background:
        rgba(80, 216, 255, 0.06);

    text-align: center;
}


.ojoplus-value span,
.ojoplus-value strong,
.ojoplus-value b {
    display: block;
}


.ojoplus-value span {
    color: #70e1ff;

    font-size: 12px;

    font-weight: 900;
}


.ojoplus-value strong {
    margin-top: 6px;

    color: #ffffff;

    font-size: 27px;

    font-weight: 900;
}


.ojoplus-value b {
    margin-top: 5px;

    color: #50d8ff;

    font-size: 22px;

    font-weight: 900;
}


.ojoplus-copy h4 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;

    font-weight: 900;
}


.ojoplus-copy p {
    margin:
        9px
        0
        0;

    color: #ccd2d9;

    font-size: 13.5px;

    line-height: 1.62;
}

/*=============================================
                     OJOplus End
=============================================*/


/*=============================================
                 Wheel Choices Start
=============================================*/

.wheel-choice-grid {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.wheel-choice-grid article {
    --wheel-rgb: 66, 227, 176;
    --wheel-color: #42e3b0;

    padding:
        20px;

    border:
        1px solid
        rgba(
            var(--wheel-rgb),
            0.30
        );

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--wheel-rgb),
                0.12
            ),
            transparent 46%
        ),
        rgba(255, 255, 255, 0.018);
}


.wheel-choice-grid
article[data-wheel-type="deal"] {
    --wheel-rgb: 255, 212, 93;
    --wheel-color: #ffd45d;
}


.wheel-choice-grid
article[data-wheel-type="risk"] {
    --wheel-rgb: 255, 79, 159;
    --wheel-color: #ff4f9f;
}


.wheel-choice-grid span {
    display: block;

    color:
        var(--wheel-color);

    font-size: 11px;

    font-weight: 900;
}


.wheel-choice-grid strong {
    display: block;

    margin-top: 7px;

    color: #ffffff;

    font-size: 19px;

    font-weight: 900;
}


.wheel-choice-grid p {
    margin:
        8px
        0
        0;

    color: #cec7cb;

    font-size: 12.5px;

    line-height: 1.55;
}

/*=============================================
                  Wheel Choices End
=============================================*/


/*=============================================
                 Prize Twister Start
=============================================*/

.twister-prize-grid {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.twister-prize-grid article {
    --twister-rgb: 255, 147, 100;
    --twister-color: #ff9364;

    padding:
        21px;

    border:
        1px solid
        rgba(
            var(--twister-rgb),
            0.31
        );

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--twister-rgb),
                0.09
            ),
            rgba(255, 255, 255, 0.018)
        );
}


.twister-prize-grid
article[data-twister="super"] {
    --twister-rgb: 255, 93, 161;
    --twister-color: #ff5da1;
}


.twister-prize-grid
article[data-twister="mega"] {
    --twister-rgb: 255, 212, 93;
    --twister-color: #ffd45d;
}


.twister-prize-grid span,
.twister-prize-grid strong {
    display: block;
}


.twister-prize-grid span {
    color:
        var(--twister-color);

    font-size: 11px;

    font-weight: 900;
}


.twister-prize-grid strong {
    margin-top: 7px;

    color: #ffffff;

    font-size:
        clamp(
            28px,
            2.6vw,
            40px
        );

    font-weight: 900;
}


.twister-prize-grid p {
    margin:
        8px
        0
        0;

    color: #cfc7cb;

    font-size: 12px;

    line-height: 1.5;
}

/*=============================================
                  Prize Twister End
=============================================*/


/*=============================================
                   Levels Start
=============================================*/

.levels-reward-grid {
    margin-top: 22px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.levels-reward-grid article {
    padding:
        18px;

    border:
        1px solid
        rgba(162, 114, 255, 0.24);

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(162, 114, 255, 0.075),
            rgba(255, 255, 255, 0.016)
        );
}


.levels-reward-grid span {
    display: block;

    color: #bc9aff;

    font-size: 10px;

    font-weight: 900;
}


.levels-reward-grid strong {
    display: block;

    margin-top: 6px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;
}


.levels-reward-grid p {
    margin:
        7px
        0
        0;

    color: #cac5d1;

    font-size: 11.5px;

    line-height: 1.5;
}

/*=============================================
                    Levels End
=============================================*/


/*=============================================
                    Guide Start
=============================================*/

.bonuses-section .promotion-guide {
    margin-top: 22px;

    padding:
        27px
        29px;

    border:
        1px solid
        rgba(255, 111, 174, 0.18);

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 78, 158, 0.07),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(42, 18, 37, 0.89),
            rgba(23, 11, 27, 0.95)
        );
}


.bonuses-section
.promotion-guide-heading {
    max-width: 900px;
}


.bonuses-section
.promotion-guide-grid {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.bonuses-section
.promotion-guide-grid article {
    padding: 16px;

    border:
        1px solid
        rgba(255, 121, 177, 0.15);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.bonuses-section
.promotion-guide-grid strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;
}


.bonuses-section
.promotion-guide-grid p {
    margin:
        6px
        0
        0;

    color: #cec5ca;

    font-size: 12px;

    line-height: 1.5;
}

/*=============================================
                     Guide End
=============================================*/


/*=============================================
                     FAQ Start
=============================================*/

.bonuses-faq {
    margin-top: 22px;

    padding:
        28px
        29px;

    border:
        1px solid
        rgba(255, 111, 174, 0.18);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(43, 18, 38, 0.92),
            rgba(22, 11, 27, 0.97)
        );
}


.bonuses-faq-heading {
    margin-bottom: 17px;
}


.bonuses-faq-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.bonuses-faq-grid details {
    overflow: hidden;

    border:
        1px solid
        rgba(255, 116, 174, 0.18);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.018);
}


.bonuses-faq-grid summary {
    min-height: 61px;

    padding:
        14px
        16px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 14px;

    list-style: none;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;
}


.bonuses-faq-grid
summary::-webkit-details-marker {
    display: none;
}


.bonuses-faq-grid summary::after {
    content: "+";

    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        31px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff4f9f,
            #ff9364
        );

    color: #ffffff;

    font-size: 19px;

    font-weight: 900;
}


.bonuses-faq-grid
details[open]
summary::after {
    transform:
        rotate(45deg);
}


.bonuses-faq-grid
details > div {
    padding:
        0
        16px
        17px;
}


.bonuses-faq-grid p {
    margin: 0;

    color: #cec5ca;

    font-size: 13px;

    line-height: 1.6;
}

/*=============================================
                      FAQ End
=============================================*/


/*=============================================
                    Closing Start
=============================================*/

.bonuses-section .promotion-closing {
    margin-top: 22px;

    padding:
        28px
        30px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid
        rgba(255, 117, 174, 0.18);

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(255, 79, 159, 0.07),
            transparent 36%
        ),
        rgba(255, 255, 255, 0.015);
}


.bonuses-section
.promotion-closing > div:last-child p {
    margin: 0;

    color: #d0c6cb;

    font-size: 14px;

    line-height: 1.62;
}


.bonuses-section
.promotion-closing > div:last-child p + p {
    margin-top: 10px;
}

/*=============================================
                     Closing End
=============================================*/


/*=============================================
                   Responsive Start
=============================================*/

@media (max-width: 1500px) {

    .bonuses-section
    .promotion-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }


    .bonuses-section
    .promotion-site-navigation {
        left: -160px;

        width: 140px;
    }


    .bonuses-section
    .promotion-site-switcher {
        width: 140px;
    }


    .bonuses-section
    .promotion-site-navigation.is-at-bottom {
        left: -160px;
    }

}


@media (max-width: 1240px) {

    .bonuses-section
    .promotion-site-navigation,
    .bonuses-section
    .promotion-site-navigation.is-floating,
    .bonuses-section
    .promotion-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }


    .bonuses-section
    .promotion-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .bonuses-section
    .promotion-site-switcher-button,
    .bonuses-section
    .promotion-site-switcher-button.is-active {
        transform: none;
    }


    .bonuses-section
    .promotion-intro {
        grid-template-columns:
            1fr;
    }


    .bonus-claim-layout,
    .bonus-feature-layout,
    .ojoplus-showcase {
        grid-template-columns:
            1fr;
    }


    .bonus-claim-steps {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .bonus-claim-steps-four {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .levels-reward-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 920px) {

    .bonuses-section
    .promotion-snapshot,
    .bonuses-section
    .promotion-tabs,
    .bonuses-section
    .promotion-guide-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .bonuses-section
    .promotion-panel-heading {
        grid-template-columns:
            1fr;
    }


    .bonuses-section
    .promotion-panel-mark {
        max-width: 290px;
    }


    .bonuses-section
    .promotion-hero-offer {
        grid-template-columns:
            1fr;
    }


    .bonuses-section
    .promotion-condition-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .wheel-choice-grid,
    .twister-prize-grid {
        grid-template-columns:
            1fr;
    }


    .bonuses-faq-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 760px) {

    .bonuses-section {
        padding:
            36px
            13px
            60px;
    }


    .bonuses-section
    .promotion-container {
        width: 100%;
    }


    .bonuses-section
    .promotion-intro {
        padding:
            27px
            21px;
    }


    .bonuses-section
    .promotion-intro h2 {
        font-size:
            clamp(
                35px,
                9vw,
                49px
            );
    }


    .bonuses-section
    .promotion-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .bonuses-section
    .promotion-tabs {
        display: flex;

        gap: 9px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }


    .bonuses-section
    .promotion-tabs::-webkit-scrollbar {
        display: none;
    }


    .bonuses-section
    .promotion-tab {
        min-width: 205px;

        flex:
            0
            0
            205px;

        scroll-snap-align: start;
    }


    .bonuses-section
    .promotion-panel {
        padding:
            22px
            18px;
    }


    .bonus-claim-steps,
    .bonus-claim-steps-four,
    .bonuses-section
    .promotion-condition-grid,
    .levels-reward-grid,
    .bonuses-section
    .promotion-guide-grid {
        grid-template-columns:
            1fr;
    }


    .bonus-feature-points {
        grid-template-columns:
            1fr;
    }


    .bonuses-section
    .promotion-closing {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 520px) {

    .bonuses-section
    .promotion-site-switcher {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .bonuses-section
    .promotion-snapshot {
        grid-template-columns:
            1fr;
    }

}

/*=============================================
                    Responsive End
=============================================*/

/*=============================================
                     Bonuses End
=============================================*/
/*=============================================
                       VIP Start
=============================================*/

.vip-section {
    --vip-gold: #f3c96d;
    --vip-gold-rgb: 243, 201, 109;

    --vip-bronze: #d88b55;
    --vip-bronze-rgb: 216, 139, 85;

    --vip-cyan: #52d8ff;
    --vip-cyan-rgb: 82, 216, 255;

    --vip-green: #42e0ac;
    --vip-green-rgb: 66, 224, 172;

    --vip-pink: #ff57a4;
    --vip-pink-rgb: 255, 87, 164;

    --vip-violet: #a27aff;
    --vip-violet-rgb: 162, 122, 255;

    position: relative;

    padding:
        58px
        24px
        86px;

    overflow: visible;

    isolation: isolate;

    color: #ffffff;

    background:
        radial-gradient(
            ellipse at 7% 4%,
            rgba(216, 139, 85, 0.17) 0%,
            rgba(216, 139, 85, 0.035) 30%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 93% 7%,
            rgba(243, 201, 109, 0.16) 0%,
            rgba(243, 201, 109, 0.035) 30%,
            transparent 51%
        ),
        radial-gradient(
            ellipse at 82% 70%,
            rgba(162, 122, 255, 0.075) 0%,
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #080706 0%,
            #15110d 38%,
            #17130f 67%,
            #080706 100%
        );

    border-top:
        1px solid
        rgba(243, 201, 109, 0.24);
}


.vip-section[hidden] {
    display: none !important;
}


.vip-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 4px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #c47b4d,
            #f3c96d,
            #fff0b2,
            #d88b55,
            transparent
        );

    box-shadow:
        0 0 31px
        rgba(243, 201, 109, 0.29);
}


/*=============================================
                  Container Start
=============================================*/

.vip-container {
    position: relative;

    z-index: 2;

    width:
        min(
            calc(100% - 10px),
            1360px
        );

    margin:
        0 auto;
}


.vip-main {
    min-width: 0;
}

/*=============================================
                   Container End
=============================================*/


/*=============================================
               Site Navigation Start
=============================================*/

.vip-site-navigation {
    position: absolute;

    top: 0;
    left: -188px;

    width: 164px;

    z-index: 90;

    pointer-events: none;
}


.vip-site-switcher {
    width: 164px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid
        rgba(243, 201, 109, 0.22);

    border-radius: 24px;

    background:
        linear-gradient(
            155deg,
            rgba(28, 23, 18, 0.97),
            rgba(11, 10, 9, 0.99)
        );

    box-shadow:
        0 24px 58px
        rgba(0, 0, 0, 0.48),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(22px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(140%);

    pointer-events: auto;
}


.vip-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            12px,
            calc(50% - 680px - 188px)
        );

    transform:
        translateY(-50%);
}


.vip-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;

    left: -188px;

    transform: none;
}


.vip-site-switcher-button {
    --section-accent: #f3c96d;
    --section-accent-rgb: 243, 201, 109;
    --section-ink: #30240f;

    width: 100%;

    min-height: 66px;

    padding: 9px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.46
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.13
            ),
            rgba(255, 255, 255, 0.016)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.vip-site-switcher-button[data-section-target="slots"] {
    --section-accent: #d94cff;
    --section-accent-rgb: 217, 76, 255;
    --section-ink: #25072d;
}


.vip-site-switcher-button[data-section-target="table-games"] {
    --section-accent: #45d5ff;
    --section-accent-rgb: 69, 213, 255;
    --section-ink: #041e2b;
}


.vip-site-switcher-button[data-section-target="live-casino"] {
    --section-accent: #2be4ba;
    --section-accent-rgb: 43, 228, 186;
    --section-ink: #04241e;
}


.vip-site-switcher-button[data-section-target="bonuses"] {
    --section-accent: #ff4fa8;
    --section-accent-rgb: 255, 79, 168;
    --section-ink: #32061d;
}


.vip-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd34f;
    --section-accent-rgb: 255, 211, 79;
    --section-ink: #302205;
}


.vip-site-switcher-button[data-section-target="vip"] {
    --section-accent: #f3c96d;
    --section-accent-rgb: 243, 201, 109;
    --section-ink: #30240f;
}


.vip-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.82
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);

    font-size: 10px;

    font-weight: 900;
}


.vip-site-switcher-copy strong {
    display: block;

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;
}


.vip-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(236, 227, 210, 0.70);

    font-size: 10px;

    font-weight: 700;
}


.vip-site-switcher-button:hover,
.vip-site-switcher-button:focus-visible {
    transform:
        translateX(6px);

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.35),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.21
        );

    outline: none;
}


.vip-site-switcher-button.is-active {
    transform:
        translateX(7px);

    border-color:
        rgba(255, 255, 255, 0.83);

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.78
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 32px
        rgba(0, 0, 0, 0.40),
        0 0 34px
        rgba(
            var(--section-accent-rgb),
            0.32
        );
}


.vip-site-switcher-button.is-active
.vip-site-switcher-icon,
.vip-site-switcher-button.is-active
.vip-site-switcher-copy strong {
    color:
        var(--section-ink);
}

/*=============================================
                Site Navigation End
=============================================*/


/*=============================================
                    Intro Start
=============================================*/

.vip-intro {
    position: relative;

    margin-bottom: 19px;

    padding:
        38px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.56fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(243, 201, 109, 0.27);

    border-radius: 27px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(216, 139, 85, 0.13),
            transparent 40%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(243, 201, 109, 0.11),
            transparent 39%
        ),
        linear-gradient(
            145deg,
            rgba(29, 24, 19, 0.98),
            rgba(11, 10, 9, 0.99)
        );

    box-shadow:
        0 25px 60px
        rgba(0, 0, 0, 0.39),
        inset 0 1px 0
        rgba(255, 255, 255, 0.055);
}


.vip-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 23px;
    bottom: 23px;

    width: 5px;

    border-radius:
        0
        8px
        8px
        0;

    background:
        linear-gradient(
            180deg,
            #fff0b2,
            #f3c96d,
            #d88b55
        );

    box-shadow:
        0 0 23px
        rgba(243, 201, 109, 0.34);
}


.vip-eyebrow,
.vip-kicker,
.vip-feature-label,
.vip-card-label {
    margin:
        0
        0
        9px;

    color: #f3c96d;

    font-size: 12px;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: 0.10em;

    text-transform: uppercase;
}


.vip-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            41px,
            3.6vw,
            59px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.vip-intro-copy > p {
    margin:
        15px
        0
        0;

    color: #d8cec1;

    font-size: 15px;

    line-height: 1.65;
}


.vip-intro-copy
.vip-intro-lead {
    color: #fff8e8;

    font-size: 17px;

    font-weight: 750;
}


.vip-intro-media {
    position: relative;

    min-height: 365px;

    margin: 0;

    overflow: hidden;

    border:
        2px solid
        rgba(243, 201, 109, 0.50);

    border-radius: 21px;

    background: #14110e;

    box-shadow:
        0 23px 53px
        rgba(0, 0, 0, 0.43);
}


.vip-intro-media img {
    width: 100%;
    height: 365px;

    object-fit: cover;
    object-position: center;
}


.vip-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 7, 6, 0.01) 15%,
            rgba(8, 7, 6, 0.94) 100%
        );
}


.vip-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 21px;
    right: 21px;
    bottom: 20px;
}


.vip-intro-media figcaption span,
.vip-intro-media figcaption strong,
.vip-intro-media figcaption small {
    display: block;
}


.vip-intro-media figcaption span {
    color: #f3c96d;

    font-size: 11px;

    font-weight: 900;
}


.vip-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 30px;

    font-weight: 900;
}


.vip-intro-media figcaption small {
    margin-top: 7px;

    color: #ded4c6;

    font-size: 13px;

    line-height: 1.45;
}

/*=============================================
                     Intro End
=============================================*/


/*=============================================
                     Tabs Start
=============================================*/

.vip-tabs {
    margin-bottom: 19px;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.vip-tab {
    --tab-accent: #f3c96d;
    --tab-accent-rgb: 243, 201, 109;
    --tab-ink: #30240f;

    min-height: 84px;

    padding:
        12px
        14px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        2px solid
        rgba(
            var(--tab-accent-rgb),
            0.65
        );

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.14
            ),
            rgba(12, 10, 8, 0.93)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.29),
        0 0 18px
        rgba(
            var(--tab-accent-rgb),
            0.09
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.vip-tab[data-vip-target="club"] {
    --tab-accent: #f3c96d;
    --tab-accent-rgb: 243, 201, 109;
    --tab-ink: #30240f;
}


.vip-tab[data-vip-target="levels"] {
    --tab-accent: #a27aff;
    --tab-accent-rgb: 162, 122, 255;
    --tab-ink: #1d0c36;
}


.vip-tab[data-vip-target="benefits"] {
    --tab-accent: #ff9b67;
    --tab-accent-rgb: 255, 155, 103;
    --tab-ink: #34170a;
}


.vip-tab[data-vip-target="ojoplus"] {
    --tab-accent: #52d8ff;
    --tab-accent-rgb: 82, 216, 255;
    --tab-ink: #05242e;
}


.vip-tab[data-vip-target="exclusive"] {
    --tab-accent: #ff58a4;
    --tab-accent-rgb: 255, 88, 164;
    --tab-ink: #36071f;
}


.vip-tab-icon {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        44px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.13
        );

    color:
        var(--tab-accent);

    font-size: 10px;

    font-weight: 900;
}


.vip-tab-copy strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    line-height: 1.1;
}


.vip-tab-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(230, 222, 210, 0.72);

    font-size: 10.5px;

    font-weight: 700;
}


.vip-tab:hover,
.vip-tab:focus-visible {
    transform:
        translateY(-5px);

    border-color:
        var(--tab-accent);

    box-shadow:
        0 17px 34px
        rgba(0, 0, 0, 0.35),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.25
        );

    outline: none;
}


.vip-tab.is-active {
    transform:
        translateY(-5px);

    border-color:
        rgba(255, 255, 255, 0.88);

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.76
            )
        );

    box-shadow:
        0 18px 38px
        rgba(0, 0, 0, 0.40),
        0 0 38px
        rgba(
            var(--tab-accent-rgb),
            0.38
        );
}


.vip-tab.is-active
.vip-tab-icon,
.vip-tab.is-active
.vip-tab-copy strong {
    color:
        var(--tab-ink);
}


.vip-tab.is-active
.vip-tab-copy small {
    color:
        rgba(20, 16, 11, 0.66);
}

/*=============================================
                      Tabs End
=============================================*/


/*=============================================
                     Stage Start
=============================================*/

.vip-stage {
    position: relative;
}


.vip-panel {
    --panel-accent: #f3c96d;
    --panel-accent-rgb: 243, 201, 109;

    padding:
        29px;

    border:
        1px solid
        rgba(
            var(--panel-accent-rgb),
            0.22
        );

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(
                var(--panel-accent-rgb),
                0.08
            ),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(27, 22, 18, 0.98),
            rgba(10, 9, 8, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(0, 0, 0, 0.35);
}


.vip-panel[data-vip-panel="levels"] {
    --panel-accent: #a27aff;
    --panel-accent-rgb: 162, 122, 255;
}


.vip-panel[data-vip-panel="benefits"] {
    --panel-accent: #ff9b67;
    --panel-accent-rgb: 255, 155, 103;
}


.vip-panel[data-vip-panel="ojoplus"] {
    --panel-accent: #52d8ff;
    --panel-accent-rgb: 82, 216, 255;
}


.vip-panel[data-vip-panel="exclusive"] {
    --panel-accent: #ff58a4;
    --panel-accent-rgb: 255, 88, 164;
}


.vip-panel[hidden] {
    display: none !important;
}


.vip-panel-heading {
    padding-bottom: 21px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(180px, 215px);

    gap: 30px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(
            var(--panel-accent-rgb),
            0.20
        );
}


.vip-panel h3,
.vip-faq h3,
.vip-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            29px,
            2.65vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}


.vip-panel-heading p {
    margin:
        11px
        0
        0;

    color: #d0c7bb;

    font-size: 14px;

    line-height: 1.62;
}


.vip-panel-mark {
    padding:
        18px
        15px;

    border:
        1px solid
        rgba(
            var(--panel-accent-rgb),
            0.42
        );

    border-radius: 15px;

    background:
        rgba(
            var(--panel-accent-rgb),
            0.08
        );

    text-align: center;
}


.vip-panel-mark span,
.vip-panel-mark strong,
.vip-panel-mark small {
    display: block;
}


.vip-panel-mark span {
    color: #d7cdbf;

    font-size: 11px;
}


.vip-panel-mark strong {
    margin-top: 5px;

    color:
        var(--panel-accent);

    font-size: 25px;

    font-weight: 900;

    line-height: 1.05;
}


.vip-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 11px;
}

/*=============================================
                      Stage End
=============================================*/


/*=============================================
                   Club OJO Start
=============================================*/

.vip-club-highlight {
    margin-top: 20px;

    padding:
        19px
        20px;

    display: grid;

    grid-template-columns:
        minmax(260px, 0.7fr)
        minmax(0, 1.3fr);

    gap: 28px;

    align-items: center;

    border:
        1px solid
        rgba(243, 201, 109, 0.20);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(243, 201, 109, 0.085),
            rgba(216, 139, 85, 0.025)
        );
}


.vip-club-highlight h4 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    line-height: 1.18;
}


.vip-club-highlight > p {
    margin: 0;

    color: #d0c8bc;

    font-size: 13px;

    line-height: 1.6;
}


.vip-club-grid {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.vip-club-grid article {
    padding:
        16px;

    border:
        1px solid
        rgba(243, 201, 109, 0.17);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.017);
}


.vip-club-grid strong {
    display: block;

    color: #fff2cf;

    font-size: 15px;

    font-weight: 900;
}


.vip-club-grid p {
    margin:
        7px
        0
        0;

    color: #cbc3b8;

    font-size: 11.5px;

    line-height: 1.5;
}


.vip-manager-feature {
    margin-top: 12px;

    padding:
        19px
        20px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.72fr)
        minmax(0, 1.28fr);

    gap: 28px;

    align-items: center;

    border:
        1px solid
        rgba(216, 139, 85, 0.20);

    border-radius: 15px;

    background:
        rgba(216, 139, 85, 0.035);
}


.vip-manager-feature h4 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 900;

    line-height: 1.16;
}


.vip-manager-feature p {
    margin: 0;

    color: #d0c7bc;

    font-size: 13px;

    line-height: 1.6;
}


.vip-manager-feature p + p {
    margin-top: 8px;
}

/*=============================================
                    Club OJO End
=============================================*/


/*=============================================
                   OJO Levels Start
=============================================*/

.vip-panel-mark-violet {
    border-color:
        rgba(162, 122, 255, 0.42);

    background:
        rgba(162, 122, 255, 0.08);
}


.vip-levels-explainer {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(270px, 0.75fr);

    gap: 20px;

    align-items: center;
}


.vip-levels-explainer > div:first-child {
    padding:
        19px;

    border:
        1px solid
        rgba(162, 122, 255, 0.18);

    border-radius: 14px;

    background:
        rgba(162, 122, 255, 0.035);
}


.vip-levels-explainer h4 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 900;

    line-height: 1.15;
}


.vip-levels-explainer p {
    margin:
        9px
        0
        0;

    color: #cdc6d2;

    font-size: 13px;

    line-height: 1.6;
}


.vip-level-progress-card {
    padding:
        20px;

    border:
        1px solid
        rgba(162, 122, 255, 0.28);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(162, 122, 255, 0.12),
            rgba(162, 122, 255, 0.035)
        );
}


.vip-level-progress-card span,
.vip-level-progress-card strong {
    display: block;
}


.vip-level-progress-card span {
    color: #b99cff;

    font-size: 10px;

    font-weight: 900;
}


.vip-level-progress-card strong {
    margin-top: 7px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;

    line-height: 1.2;
}


.vip-levels-grid {
    margin-top: 12px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.vip-levels-grid article {
    --reward-color: #a27aff;
    --reward-rgb: 162, 122, 255;

    padding:
        17px;

    border:
        1px solid
        rgba(
            var(--reward-rgb),
            0.25
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--reward-rgb),
                0.07
            ),
            rgba(255, 255, 255, 0.015)
        );
}


.vip-levels-grid
article[data-level-reward="wheel"] {
    --reward-color: #42e0ac;
    --reward-rgb: 66, 224, 172;
}


.vip-levels-grid
article[data-level-reward="twister"] {
    --reward-color: #ff57a4;
    --reward-rgb: 255, 87, 164;
}


.vip-levels-grid
article[data-level-reward="cash"] {
    --reward-color: #f3c96d;
    --reward-rgb: 243, 201, 109;
}


.vip-levels-grid span,
.vip-levels-grid strong {
    display: block;
}


.vip-levels-grid span {
    color:
        var(--reward-color);

    font-size: 10px;

    font-weight: 900;
}


.vip-levels-grid strong {
    margin-top: 6px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;
}


.vip-levels-grid p {
    margin:
        7px
        0
        0;

    color: #ccc5ce;

    font-size: 11.5px;

    line-height: 1.5;
}


.vip-levels-note {
    margin-top: 12px;

    padding:
        16px
        18px;

    border:
        1px solid
        rgba(162, 122, 255, 0.17);

    border-radius: 12px;

    background:
        rgba(162, 122, 255, 0.032);
}


.vip-levels-note strong {
    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;
}


.vip-levels-note p {
    margin:
        6px
        0
        0;

    color: #cbc4cf;

    font-size: 12px;

    line-height: 1.52;
}

/*=============================================
                    OJO Levels End
=============================================*/


/*=============================================
                    Benefits Start
=============================================*/

.vip-panel-mark-orange {
    border-color:
        rgba(255, 155, 103, 0.42);

    background:
        rgba(255, 155, 103, 0.08);
}


.vip-benefits-grid {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.vip-benefits-grid article {
    --benefit-color: #ff9b67;
    --benefit-rgb: 255, 155, 103;

    padding:
        18px;

    border:
        1px solid
        rgba(
            var(--benefit-rgb),
            0.24
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--benefit-rgb),
                0.065
            ),
            rgba(255, 255, 255, 0.016)
        );
}


.vip-benefits-grid
article[data-vip-benefit="manager"] {
    --benefit-color: #f3c96d;
    --benefit-rgb: 243, 201, 109;
}


.vip-benefits-grid
article[data-vip-benefit="speed"] {
    --benefit-color: #52d8ff;
    --benefit-rgb: 82, 216, 255;
}


.vip-benefits-grid
article[data-vip-benefit="live"] {
    --benefit-color: #42e0ac;
    --benefit-rgb: 66, 224, 172;
}


.vip-benefits-grid
article[data-vip-benefit="kickers"] {
    --benefit-color: #ff57a4;
    --benefit-rgb: 255, 87, 164;
}


.vip-benefits-grid
article[data-vip-benefit="birthday"] {
    --benefit-color: #a27aff;
    --benefit-rgb: 162, 122, 255;
}


.vip-benefit-icon {
    width: 43px;
    height: 43px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--benefit-rgb),
            0.48
        );

    border-radius: 12px;

    background:
        rgba(
            var(--benefit-rgb),
            0.10
        );

    color:
        var(--benefit-color);

    font-size: 9px;

    font-weight: 900;
}


.vip-benefits-grid strong {
    display: block;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;
}


.vip-benefits-grid p {
    margin:
        7px
        0
        0;

    color: #cbc3ba;

    font-size: 12px;

    line-height: 1.52;
}

/*=============================================
                     Benefits End
=============================================*/


/*=============================================
                     OJOplus Start
=============================================*/

.vip-panel-mark-cyan {
    border-color:
        rgba(82, 216, 255, 0.42);

    background:
        rgba(82, 216, 255, 0.08);
}


.vip-ojoplus-showcase {
    margin-top: 20px;

    padding:
        20px;

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap: 27px;

    align-items: center;

    border:
        1px solid
        rgba(82, 216, 255, 0.20);

    border-radius: 15px;

    background:
        rgba(82, 216, 255, 0.035);
}


.vip-ojoplus-value {
    padding:
        21px;

    border:
        1px solid
        rgba(82, 216, 255, 0.30);

    border-radius: 14px;

    background:
        rgba(82, 216, 255, 0.055);

    text-align: center;
}


.vip-ojoplus-value span,
.vip-ojoplus-value strong,
.vip-ojoplus-value small {
    display: block;
}


.vip-ojoplus-value span {
    color: #72e0ff;

    font-size: 10px;

    font-weight: 900;
}


.vip-ojoplus-value strong {
    margin-top: 7px;

    color: #ffffff;

    font-size: 27px;

    font-weight: 900;
}


.vip-ojoplus-value small {
    margin-top: 7px;

    color: #cad2d3;

    font-size: 11px;

    line-height: 1.4;
}


.vip-ojoplus-copy h4 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;

    font-weight: 900;
}


.vip-ojoplus-copy p {
    margin:
        9px
        0
        0;

    color: #c9d0d0;

    font-size: 13px;

    line-height: 1.6;
}


.vip-ojoplus-grid {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.vip-ojoplus-grid article {
    padding:
        14px;

    border:
        1px solid
        rgba(82, 216, 255, 0.17);

    border-radius: 11px;

    background:
        rgba(82, 216, 255, 0.025);
}


.vip-ojoplus-grid span,
.vip-ojoplus-grid strong {
    display: block;
}


.vip-ojoplus-grid span {
    color: #72ddff;

    font-size: 9px;

    font-weight: 900;
}


.vip-ojoplus-grid strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;
}


.vip-ojoplus-grid p {
    margin:
        6px
        0
        0;

    color: #c7cfd0;

    font-size: 11px;

    line-height: 1.45;
}

/*=============================================
                      OJOplus End
=============================================*/


/*=============================================
                  Exclusives Start
=============================================*/

.vip-panel-mark-pink {
    border-color:
        rgba(255, 87, 164, 0.42);

    background:
        rgba(255, 87, 164, 0.08);
}


.vip-exclusive-grid {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 11px;
}


.vip-exclusive-grid article {
    --exclusive-color: #ff57a4;
    --exclusive-rgb: 255, 87, 164;

    padding:
        19px;

    border:
        1px solid
        rgba(
            var(--exclusive-rgb),
            0.25
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--exclusive-rgb),
                0.065
            ),
            rgba(255, 255, 255, 0.015)
        );
}


.vip-exclusive-grid
article[data-exclusive-type="spins"] {
    --exclusive-color: #a27aff;
    --exclusive-rgb: 162, 122, 255;
}


.vip-exclusive-grid
article[data-exclusive-type="competitions"] {
    --exclusive-color: #f3c96d;
    --exclusive-rgb: 243, 201, 109;
}


.vip-exclusive-grid
article[data-exclusive-type="gifts"] {
    --exclusive-color: #ff9b67;
    --exclusive-rgb: 255, 155, 103;
}


.vip-exclusive-grid > article > span {
    display: block;

    color:
        var(--exclusive-color);

    font-size: 10px;

    font-weight: 900;
}


.vip-exclusive-grid > article > strong {
    display: block;

    margin-top: 6px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 900;
}


.vip-exclusive-grid > article > p {
    margin:
        8px
        0
        0;

    color: #cbc3bb;

    font-size: 12.5px;

    line-height: 1.55;
}


.vip-spin-values {
    margin-top: 13px;

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 7px;
}


.vip-spin-values > span {
    padding:
        11px
        8px;

    display: block;

    border:
        1px solid
        rgba(162, 122, 255, 0.18);

    border-radius: 9px;

    background:
        rgba(162, 122, 255, 0.035);

    text-align: center;
}


.vip-spin-values small,
.vip-spin-values strong {
    display: block;
}


.vip-spin-values small {
    color: #bfb5c9;

    font-size: 9px;
}


.vip-spin-values strong {
    margin-top: 4px;

    color: #c0a4ff;

    font-size: 13px;

    font-weight: 900;
}

/*=============================================
                   Exclusives End
=============================================*/


/*=============================================
                       FAQ Start
=============================================*/

.vip-faq {
    margin-top: 20px;

    padding:
        26px
        28px;

    border:
        1px solid
        rgba(243, 201, 109, 0.17);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.014);
}


.vip-faq-heading {
    margin-bottom: 16px;
}


.vip-faq-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;
}


.vip-faq-grid details {
    overflow: hidden;

    border:
        1px solid
        rgba(243, 201, 109, 0.16);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.016);
}


.vip-faq-grid summary {
    min-height: 58px;

    padding:
        13px
        15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 13px;

    list-style: none;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;

    line-height: 1.35;

    cursor: pointer;
}


.vip-faq-grid
summary::-webkit-details-marker {
    display: none;
}


.vip-faq-grid summary::after {
    content: "+";

    width: 29px;
    height: 29px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        29px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #f3c96d,
            #d88b55
        );

    color: #30240f;

    font-size: 18px;

    font-weight: 900;
}


.vip-faq-grid
details[open]
summary::after {
    transform:
        rotate(45deg);
}


.vip-faq-grid
details > div {
    padding:
        0
        15px
        15px;
}


.vip-faq-grid p {
    margin: 0;

    color: #cdc5b9;

    font-size: 12.5px;

    line-height: 1.6;
}

/*=============================================
                        FAQ End
=============================================*/


/*=============================================
                     Closing Start
=============================================*/

.vip-closing {
    margin-top: 20px;

    padding:
        26px
        28px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 35px;

    align-items: center;

    border:
        1px solid
        rgba(243, 201, 109, 0.17);

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(243, 201, 109, 0.055),
            transparent 36%
        ),
        rgba(255, 255, 255, 0.014);
}


.vip-closing > div:last-child p {
    margin: 0;

    color: #cec6ba;

    font-size: 13.5px;

    line-height: 1.6;
}


.vip-closing > div:last-child p + p {
    margin-top: 9px;
}

/*=============================================
                      Closing End
=============================================*/


/*=============================================
                    Responsive Start
=============================================*/

@media (max-width: 1500px) {

    .vip-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }


    .vip-site-navigation {
        left: -160px;

        width: 140px;
    }


    .vip-site-switcher {
        width: 140px;
    }


    .vip-site-navigation.is-at-bottom {
        left: -160px;
    }

}


@media (max-width: 1240px) {

    .vip-site-navigation,
    .vip-site-navigation.is-floating,
    .vip-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }


    .vip-site-switcher {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );
    }


    .vip-site-switcher-button,
    .vip-site-switcher-button.is-active {
        transform: none;
    }


    .vip-intro {
        grid-template-columns:
            1fr;
    }


    .vip-tabs {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .vip-club-grid,
    .vip-levels-grid,
    .vip-ojoplus-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 920px) {

    .vip-panel-heading {
        grid-template-columns:
            1fr;
    }


    .vip-panel-mark {
        max-width: 290px;
    }


    .vip-club-highlight,
    .vip-manager-feature,
    .vip-levels-explainer,
    .vip-ojoplus-showcase {
        grid-template-columns:
            1fr;
    }


    .vip-benefits-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .vip-exclusive-grid,
    .vip-faq-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 760px) {

    .vip-section {
        padding:
            36px
            13px
            60px;
    }


    .vip-container {
        width: 100%;
    }


    .vip-intro {
        padding:
            27px
            21px;
    }


    .vip-intro h2 {
        font-size:
            clamp(
                35px,
                9vw,
                49px
            );
    }


    .vip-site-switcher {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .vip-tabs {
        display: flex;

        gap: 9px;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }


    .vip-tabs::-webkit-scrollbar {
        display: none;
    }


    .vip-tab {
        min-width: 205px;

        flex:
            0
            0
            205px;

        scroll-snap-align: start;
    }


    .vip-panel {
        padding:
            22px
            18px;
    }


    .vip-club-grid,
    .vip-levels-grid,
    .vip-benefits-grid,
    .vip-ojoplus-grid {
        grid-template-columns:
            1fr;
    }


    .vip-spin-values {
        grid-template-columns:
            1fr;
    }


    .vip-closing {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 520px) {

    .vip-site-switcher {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

/*=============================================
                     Responsive End
=============================================*/

/*=============================================
                       VIP End
=============================================*/
/*=============================================
         Final Readability Fix Start
=============================================*/

/*
    Keep secondary text readable across the
    three text-heavy sections at the end
    of the main page.
*/


/*=============================================
                Tournaments Text
=============================================*/

.tournaments-site-switcher-copy small,
.tournaments-tab small,
.tournaments-scale p,
.tournament-showcase-block p,
.tournament-showcase-reward p,
.tournaments-board-row small,
.tournaments-prize-number small,
.tournaments-leaderboard-copy p,
.tournaments-prize-copy p,
.tournaments-vip-copy p,
.tournaments-vip-card p,
.tournaments-knowledge-grid p,
.tournaments-closing p {
    font-size: 13px !important;
    line-height: 1.55;
}


.tournaments-scale h3,
.tournament-showcase-block h5,
.tournaments-board-row strong {
    font-size: 15px !important;
}


/*=============================================
                  Bonuses Text
=============================================*/

.bonuses-section
.promotion-site-switcher-copy small,
.bonuses-section
.promotion-tab-copy small,
.bonuses-section
.promotion-snapshot small,
.bonus-claim-steps p,
.bonuses-section
.promotion-condition-grid p,
.bonus-feature-points span,
.bonus-feature-points strong,
.bonuses-section
.promotion-guide-grid p,
.bonuses-faq-grid p,
.bonuses-section
.promotion-closing p,
.levels-reward-grid p,
.wheel-choice-grid p,
.twister-prize-grid p {
    font-size: 13px !important;
    line-height: 1.55;
}


.bonus-claim-steps strong,
.bonuses-section
.promotion-guide-grid strong,
.bonus-feature-points strong {
    font-size: 14px !important;
}


/*=============================================
                    VIP Text
=============================================*/

.vip-site-switcher-copy small,
.vip-tab-copy small,
.vip-club-grid p,
.vip-levels-grid p,
.vip-benefits-grid p,
.vip-ojoplus-grid p,
.vip-exclusive-grid > article > p,
.vip-spin-values small,
.vip-faq-grid p,
.vip-closing > div:last-child p {
    font-size: 13px !important;
    line-height: 1.55;
}


.vip-card-label,
.vip-feature-label,
.vip-levels-grid span,
.vip-ojoplus-grid span,
.vip-exclusive-grid > article > span {
    font-size: 11px !important;
}


.vip-club-grid strong,
.vip-levels-grid strong,
.vip-benefits-grid strong,
.vip-ojoplus-grid strong {
    font-size: 15px !important;
}

/*=============================================
          Final Readability Fix End
=============================================*/


/*=============================================
                     Footer Start
=============================================*/

.site-footer {
    position: relative;

    padding:
        56px
        22px
        24px;

    overflow: hidden;

    isolation: isolate;

    color: #e4ddf2;

    border-top:
        1px solid
        rgba(195, 101, 255, 0.20);

    background:
        radial-gradient(
            ellipse at 7% 0%,
            rgba(174, 74, 255, 0.15),
            transparent 32%
        ),
        radial-gradient(
            ellipse at 72% 0%,
            rgba(255, 76, 174, 0.10),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 96% 90%,
            rgba(72, 218, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            150deg,
            #12061f 0%,
            #1a092c 44%,
            #120820 72%,
            #090510 100%
        );
}


.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #a941f5 13%,
            #ee3ec4 30%,
            #ffd34e 48%,
            #49d7ff 68%,
            #825fff 86%,
            transparent 100%
        );

    box-shadow:
        0 0 30px
        rgba(177, 73, 255, 0.25);
}


.footer-glow {
    position: absolute;

    width: 540px;
    height: 540px;

    right: -220px;
    top: -270px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(172, 65, 255, 0.11),
            transparent 68%
        );

    filter:
        blur(5px);
}


.footer-container {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            1360px
        );

    margin:
        0 auto;
}


/*=============================================
                 Footer Main Start
=============================================*/

.footer-main {
    display: grid;

    grid-template-columns:
        minmax(360px, 1.7fr)
        minmax(180px, 0.65fr)
        minmax(210px, 0.7fr);

    gap:
        54px;

    align-items:
        start;
}

/*=============================================
                  Footer Main End
=============================================*/


/*=============================================
                 Footer Brand Start
=============================================*/

.footer-brand {
    max-width: 540px;
}


.footer-logo {
    width: fit-content;

    display: inline-flex;

    align-items: center;

    gap: 11px;
}


.footer-logo-symbol {
    width: 46px;
    height: 46px;

    display: inline-grid;

    place-items: center;

    flex-shrink: 0;

    border:
        2px solid
        rgba(255, 215, 76, 0.92);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #b445ff 0%,
            #7624e3 54%,
            #4612aa 100%
        );

    color: #ffffff;

    font-size: 21px;

    font-weight: 900;

    box-shadow:
        0 0 20px
        rgba(170, 67, 255, 0.30),
        0 0 18px
        rgba(255, 205, 71, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


.footer-logo-text {
    display: flex;

    flex-direction: column;

    line-height: 1;
}


.footer-logo-text strong {
    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #e9c9ff 42%,
            #ff70cb 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: -0.045em;
}


.footer-logo-text small {
    margin-top: 5px;

    color: #d67aff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.footer-logo:hover
.footer-logo-symbol,
.footer-logo:focus-visible
.footer-logo-symbol {
    transform:
        translateY(-2px);

    border-color:
        #ffffff;

    box-shadow:
        0 0 27px
        rgba(177, 73, 255, 0.43),
        0 0 23px
        rgba(255, 205, 71, 0.25);
}


.footer-logo:focus-visible {
    outline: none;
}


.footer-brand-lead {
    margin:
        20px
        0
        0;

    color: #f3edf8;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.65;
}


.footer-brand-note {
    margin:
        11px
        0
        0;

    color: #c2b5cd;

    font-size: 13px;

    line-height: 1.6;
}

/*=============================================
                  Footer Brand End
=============================================*/


/*=============================================
                 Footer Badges Start
=============================================*/

.footer-badges {
    margin-top: 17px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.footer-badges span {
    min-height: 32px;

    padding:
        6px
        11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(202, 112, 255, 0.26);

    border-radius: 999px;

    background:
        rgba(188, 83, 255, 0.055);

    color: #e0b5ff;

    font-size: 12px;

    font-weight: 900;

    line-height: 1;
}


.footer-badges span:first-child {
    border-color:
        rgba(255, 211, 79, 0.40);

    background:
        rgba(255, 211, 79, 0.06);

    color: #ffe18a;
}


.footer-badges span:nth-child(2) {
    border-color:
        rgba(75, 211, 255, 0.34);

    color: #81dfff;
}

/*=============================================
                  Footer Badges End
=============================================*/


/*=============================================
                  Footer Links Start
=============================================*/

.footer-links h3 {
    margin:
        3px
        0
        17px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.2;
}


.footer-links ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.footer-links li + li {
    margin-top: 10px;
}


.footer-links a {
    position: relative;

    display: inline-block;

    color: #c8bbd3;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.45;

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        text-shadow 0.2s ease;
}


.footer-links a::before {
    content: "";

    position: absolute;

    left: -11px;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d96cff;

    opacity: 0;

    transform:
        translateY(-50%)
        scale(0.5);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.footer-links a:hover,
.footer-links a:focus-visible {
    color: #efb8ff;

    transform:
        translateX(4px);

    text-shadow:
        0 0 13px
        rgba(210, 98, 255, 0.24);

    outline: none;
}


.footer-links a:hover::before,
.footer-links a:focus-visible::before {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


/*=============================================
                  Footer Legal Start
=============================================*/

.footer-legal a {
    color: #cec3d7;
}


.footer-legal a:hover,
.footer-legal a:focus-visible,
.footer-legal a[aria-current="page"] {
    color: #ffd96f;

    text-shadow:
        0 0 12px
        rgba(255, 205, 83, 0.19);
}


.footer-legal a:hover::before,
.footer-legal a:focus-visible::before,
.footer-legal a[aria-current="page"]::before {
    background: #ffd05d;

    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}

/*=============================================
                   Footer Legal End
=============================================*/

/*=============================================
                   Footer Links End
=============================================*/


/*=============================================
              Footer Highlights Start
=============================================*/

.footer-feature-strip {
    margin-top: 36px;

    padding:
        20px
        0;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 10px;

    border-top:
        1px solid
        rgba(194, 155, 219, 0.13);

    border-bottom:
        1px solid
        rgba(194, 155, 219, 0.13);
}


.footer-feature-strip article {
    min-width: 0;

    padding:
        14px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 11px;

    align-items: center;

    border:
        1px solid
        rgba(189, 91, 255, 0.13);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.018);
}


.footer-feature-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255, 207, 77, 0.27);

    border-radius: 11px;

    background:
        rgba(255, 207, 77, 0.045);

    color: #ffd568;

    font-size: 10px;

    font-weight: 900;
}


.footer-feature-strip strong {
    display: block;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;
}


.footer-feature-strip small {
    display: block;

    margin-top: 4px;

    color: #b5a9c0;

    font-size: 12px;

    line-height: 1.4;
}

/*=============================================
               Footer Highlights End
=============================================*/


/*=============================================
                 Footer Bottom Start
=============================================*/

.footer-bottom {
    padding-top: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;
}


.footer-bottom p {
    margin: 0;

    color: #9e8fab;

    font-size: 12.5px;

    line-height: 1.5;
}


.footer-bottom-note {
    max-width: 650px;

    text-align: right;
}

/*=============================================
                  Footer Bottom End
=============================================*/


/*=============================================
              Footer Responsive Start
=============================================*/

@media (max-width: 1050px) {

    .footer-main {
        grid-template-columns:
            minmax(300px, 1.4fr)
            repeat(
                2,
                minmax(150px, 0.6fr)
            );

        gap: 34px;
    }


    .footer-feature-strip {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .site-footer {
        padding:
            42px
            15px
            19px;
    }


    .footer-main {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            30px
            22px;
    }


    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 700px;
    }


    .footer-feature-strip {
        grid-template-columns: 1fr;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }


    .footer-bottom-note {
        text-align: left;
    }

}


@media (max-width: 460px) {

    .footer-main {
        grid-template-columns: 1fr;
    }


    .footer-brand {
        grid-column: auto;
    }

}

/*=============================================
               Footer Responsive End
=============================================*/

/*=============================================
                      Footer End
=============================================*/


/*=============================================
                  Legal Pages Start
=============================================*/

.legal-page {
    position: relative;

    min-height:
        calc(
            100vh -
            var(--header-height)
        );

    margin-top:
        var(--header-height);

    padding:
        72px
        20px
        88px;

    overflow: hidden;

    color: #e4dded;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(167, 71, 246, 0.10),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(67, 213, 255, 0.065),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(255, 199, 62, 0.035),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #10061d 0%,
            #160923 48%,
            #0e0818 100%
        );
}


.legal-page::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a941f5,
            #ef43c4,
            #ffd149,
            #4bd7ff,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(177, 73, 255, 0.17);
}


.legal-page-container {
    position: relative;

    z-index: 1;

    width:
        min(
            100%,
            1120px
        );

    margin:
        0 auto;
}


/*=============================================
                 Legal Header Start
=============================================*/

.legal-page-head {
    max-width: 960px;

    margin:
        0 auto
        42px;

    padding:
        33px
        35px
        36px;

    border:
        1px solid
        rgba(189, 104, 255, 0.18);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 200, 71, 0.06),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(185, 80, 255, 0.09),
            transparent 36%
        ),
        rgba(25, 10, 36, 0.84);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.25),
        inset 0 1px 0
        rgba(255, 255, 255, 0.04);
}


.legal-page-kicker {
    display: block;

    margin:
        0
        0
        10px;

    color: #ffd05a;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.legal-page-head h1 {
    max-width: 860px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight: 900;

    line-height: 0.99;

    letter-spacing: -0.045em;
}


.legal-page-intro {
    max-width: 890px;

    margin:
        20px
        0
        0;

    color: #d0c4d7;

    font-size: 16px;

    line-height: 1.72;
}


.legal-last-updated {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin:
        20px
        0
        0;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(255, 198, 59, 0.23);

    border-radius: 999px;

    background:
        rgba(255, 198, 59, 0.055);

    color: #d0c09e;

    font-size: 12.5px;

    font-weight: 800;
}


.legal-last-updated span {
    color: #ffe08a;

    font-weight: 900;
}

/*=============================================
                  Legal Header End
=============================================*/


/*=============================================
                Legal Content Start
=============================================*/

.legal-content {
    width:
        min(
            100%,
            960px
        );

    margin:
        0 auto;
}


.legal-section {
    position: relative;

    padding:
        30px
        32px;

    border:
        1px solid
        rgba(171, 122, 198, 0.14);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(29, 15, 41, 0.91),
            rgba(18, 10, 29, 0.94)
        );

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.13),
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}


.legal-section +
.legal-section {
    margin-top: 14px;
}


.legal-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 31px;

    width: 58px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #a941f5,
            #ff51b6,
            #ffd05a
        );
}


.legal-section h2 {
    max-width: 820px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            24px,
            2.2vw,
            32px
        );

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -0.02em;
}


.legal-section h3 {
    margin:
        22px
        0
        0;

    color: #f2dfff;

    font-size: 19px;

    font-weight: 900;
}


.legal-section p {
    margin:
        13px
        0
        0;

    color: #c8bccf;

    font-size: 15px;

    line-height: 1.74;
}


.legal-section p +
.legal-section p {
    margin-top: 11px;
}


.legal-section ul,
.legal-section ol {
    margin:
        14px
        0
        0;

    padding-left: 23px;

    color: #c8bccf;

    font-size: 15px;

    line-height: 1.74;
}


.legal-section li +
.legal-section li {
    margin-top: 7px;
}


.legal-section strong {
    color: #ffffff;
}


.legal-section a {
    color: #ef93ff;

    font-weight: 800;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition:
        color 0.2s ease;
}


.legal-section a:hover,
.legal-section a:focus-visible {
    color: #ffe08a;

    outline: none;
}

/*=============================================
                 Legal Content End
=============================================*/


/*=============================================
                Legal Notice Start
=============================================*/

.legal-notice,
.legal-highlight,
.legal-warning {
    margin-top: 16px;

    padding:
        16px
        18px;

    border-left:
        3px solid
        #a941f5;

    border-radius:
        0
        10px
        10px
        0;

    background:
        rgba(169, 65, 245, 0.045);
}


.legal-warning {
    border-left-color: #ffd05e;

    background:
        rgba(255, 208, 94, 0.045);
}


.legal-highlight {
    border-left-color: #4bd7ff;

    background:
        rgba(75, 215, 255, 0.045);
}


.legal-notice p,
.legal-highlight p,
.legal-warning p {
    margin: 0;
}

/*=============================================
                 Legal Notice End
=============================================*/


/*=============================================
             Current Legal Page Start
=============================================*/

.footer-links
a[aria-current="page"] {
    color: #ffd577;

    font-weight: 900;
}

/*=============================================
              Current Legal Page End
=============================================*/


/*=============================================
               Legal Responsive Start
=============================================*/

@media (max-width: 900px) {

    .legal-page {
        padding:
            62px
            18px
            76px;
    }

}


@media (max-width: 620px) {

    .legal-page {
        padding:
            48px
            14px
            64px;
    }


    .legal-page-head {
        margin-bottom: 28px;

        padding:
            25px
            19px
            27px;

        border-radius: 16px;
    }


    .legal-page-head h1 {
        font-size:
            clamp(
                36px,
                11vw,
                50px
            );
    }


    .legal-page-intro {
        margin-top: 17px;

        font-size: 15px;
    }


    .legal-section {
        padding:
            25px
            19px
            23px;

        border-radius: 14px;
    }


    .legal-section::before {
        left: 19px;
    }


    .legal-section h2 {
        font-size: 23px;
    }


    .legal-section p,
    .legal-section ul,
    .legal-section ol {
        font-size: 14px;
    }

}

/*=============================================
                Legal Responsive End
=============================================*/

/*=============================================
                  Legal Pages End
=============================================*/


/*=============================================
       Tournaments Left Switcher Fix Start
=============================================*/

.tournaments-site-navigation {
    left:
        -184px !important;

    width:
        156px !important;
}


.tournaments-site-switcher {
    width:
        156px !important;

    padding:
        8px !important;
}


.tournaments-site-switcher-button {
    padding:
        8px
        7px !important;

    grid-template-columns:
        36px
        minmax(0, 1fr) !important;

    gap:
        6px !important;
}


.tournaments-site-switcher-icon {
    width:
        36px !important;

    height:
        36px !important;
}


.tournaments-site-switcher-copy strong {
    font-size:
        13px !important;
}


.tournaments-site-switcher-copy small {
    font-size:
        11.5px !important;
}


.tournaments-site-navigation.is-floating {
    left:
        max(
            10px,
            calc(50% - 680px - 184px)
        ) !important;
}


.tournaments-site-navigation.is-at-bottom {
    left:
        -184px !important;
}


@media (max-width: 1500px) and (min-width: 1241px) {

    .tournaments-site-navigation {
        left:
            -158px !important;

        width:
            136px !important;
    }


    .tournaments-site-switcher {
        width:
            136px !important;

        padding:
            7px !important;
    }


    .tournaments-site-switcher-button {
        padding:
            7px
            5px !important;

        grid-template-columns:
            32px
            minmax(0, 1fr) !important;

        gap:
            5px !important;
    }


    .tournaments-site-switcher-icon {
        width:
            32px !important;

        height:
            32px !important;
    }


    .tournaments-site-switcher-copy strong {
        font-size:
            12.5px !important;
    }


    .tournaments-site-switcher-copy small {
        font-size:
            11px !important;
    }


    .tournaments-site-navigation.is-floating {
        left:
            max(
                10px,
                calc(50% - 630px - 158px)
            ) !important;
    }


    .tournaments-site-navigation.is-at-bottom {
        left:
            -158px !important;
    }

}

/*=============================================
        Tournaments Left Switcher Fix End
=============================================*/