:root {
    --page-background: #060714;
    --surface-main: #0d0d1e;
    --surface-light: #17162d;

    --text-main: #ffffff;
    --text-secondary: #e9e7f2;
    --text-muted: #b8b4c6;

    --cyan-main: #35ece5;
    --cyan-light: #94fff8;

    --violet-main: #8d64ff;
    --magenta-main: #f63dcc;

    --gold-main: #f4bd5b;

    --container-width: 1660px;
    --header-height: 84px;

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


/*=============================================
                    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:
        radial-gradient(
            circle at 16% 12%,
            rgba(53, 236, 229, 0.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 16%,
            rgba(141, 100, 255, 0.09),
            transparent 34%
        ),
        var(--page-background);

    line-height: 1.6;
}

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%;

    z-index: 1000;

    background:
        rgba(5, 6, 18, 0.90);

    border-bottom:
        1px solid rgba(86, 236, 230, 0.15);

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

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

.site-header.is-scrolled {
    background:
        rgba(5, 6, 18, 0.98);

    border-color:
        rgba(86, 236, 230, 0.27);

    box-shadow:
        0 16px 42px
        rgba(0, 0, 0, 0.34);
}

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

    height:
        var(--header-height);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}


/*=============================================
                     Logo Start
=============================================*/

.site-logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;
}

.site-logo-symbol {
    position:
        relative;

    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}

.site-logo-mark {
    position:
        relative;

    width:
        27px;

    height:
        27px;
}

.site-logo-mark::before,
.site-logo-mark::after {
    content:
        "";

    position:
        absolute;

    top:
        12px;

    width:
        19px;

    height:
        4px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--cyan-main),
            var(--magenta-main)
        );

    box-shadow:
        0 0 14px
        rgba(53, 236, 229, 0.46);
}

.site-logo-mark::before {
    left:
        0;

    transform:
        rotate(48deg);
}

.site-logo-mark::after {
    right:
        0;

    transform:
        rotate(-48deg);
}

.site-logo-text {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;
}

.site-logo-text strong {
    color:
        #ffffff;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        0.04em;
}

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

    color:
        var(--cyan-light);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        0.34em;
}

/*=============================================
                      Logo End
=============================================*/


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

.main-navigation {
    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;
}

.main-navigation a {
    position:
        relative;

    padding:
        12px;

    border-radius:
        9px;

    color:
        #e9e7f2;

    font-size:
        15px;

    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:
        #ffffff;

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

    outline:
        none;
}

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

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

    position:
        absolute;

    left:
        13px;

    right:
        13px;

    bottom:
        3px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan-main),
            var(--magenta-main),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(53, 236, 229, 0.48);
}

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


/*=============================================
                Header Play Start
=============================================*/

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

    padding:
        0 28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        1px solid rgba(126, 255, 249, 0.90);

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #36eee7 0%,
            #53dcf0 55%,
            #8b78ff 100%
        );

    color:
        #080815;

    font-size:
        15px;

    font-weight:
        900;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.25),
        0 0 24px
        rgba(53, 236, 229, 0.16);

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

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

    filter:
        brightness(1.06);

    box-shadow:
        0 16px 34px
        rgba(0, 0, 0, 0.32),
        0 0 32px
        rgba(53, 236, 229, 0.30);

    outline:
        none;
}

/*=============================================
                 Header Play End
=============================================*/


/*=============================================
                Mobile Menu Start
=============================================*/

.nav-toggle {
    display:
        none;

    width:
        44px;

    height:
        44px;

    margin-left:
        auto;

    padding:
        10px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius:
        11px;

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

    cursor:
        pointer;
}

.nav-toggle span {
    display:
        block;

    width:
        100%;

    height:
        2px;

    margin:
        5px 0;

    border-radius:
        10px;

    background:
        #ffffff;

    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
=============================================*/

/*=============================================
                    Header 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: #050612;
}


/*=============================================
              Hero Background Start
=============================================*/

.hero-background {
    position: absolute;
    inset: 0;

    z-index: -5;

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


/* Darken the environment while keeping the woman brighter */

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

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 68% 52%,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.00) 17%,
            rgba(3, 4, 14, 0.12) 27%,
            rgba(3, 4, 14, 0.38) 45%,
            rgba(3, 4, 14, 0.56) 72%,
            rgba(3, 4, 14, 0.68) 100%
        );
}


.hero-shade {
    position: absolute;
    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(3, 5, 17, 0.98) 0%,
            rgba(3, 5, 17, 0.94) 14%,
            rgba(3, 5, 17, 0.82) 23%,
            rgba(3, 5, 17, 0.50) 32%,
            rgba(3, 5, 17, 0.20) 40%,
            rgba(3, 5, 17, 0.04) 52%,
            rgba(3, 5, 17, 0.02) 68%,
            rgba(3, 5, 17, 0.14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 5, 17, 0.10) 0%,
            rgba(3, 5, 17, 0.02) 45%,
            rgba(3, 5, 17, 0.20) 100%
        );
}

/*=============================================
               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:
        clamp(42px, 5vh, 64px)
        0
        38px;

    display: grid;

    grid-template-columns:
        minmax(385px, 0.72fr)
        minmax(790px, 1.28fr);

    align-items: center;

    gap: 20px;
}

/*=============================================
                 Hero Layout End
=============================================*/


/*=============================================
                  Hero Copy Start
=============================================*/

.hero-copy {
    position: relative;

    z-index: 30;

    max-width: 575px;
}

.hero-kicker {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--cyan-light);

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    text-shadow:
        0 0 16px rgba(53, 236, 229, 0.24);
}

.hero-copy h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(60px, 5.1vw, 84px);
    font-weight: 900;

    line-height: 0.9;

    letter-spacing: -0.05em;

    text-shadow:
        0 14px 34px rgba(0, 0, 0, 0.34);
}

.hero-copy h1 span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #bafff9 45%,
            #5cecff 74%,
            #a078ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

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

    margin: 22px 0 0;

    color: #ffffff;

    font-size: clamp(23px, 1.6vw, 28px);
    font-weight: 900;

    line-height: 1.22;
}

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

    margin: 15px 0 0;

    color: var(--text-secondary);

    font-size: 16px;
    font-weight: 500;

    line-height: 1.68;
}

/*=============================================
                   Hero Copy End
=============================================*/


/*=============================================
                 Hero Action Start
=============================================*/

.hero-action {
    width: fit-content;

    margin-top: 25px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 8px;
}

.hero-play {
    min-width: 215px;
    min-height: 57px;

    padding: 0 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 17px;

    border:
        1px solid rgba(126, 255, 249, 0.94);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #36eee7 0%,
            #53dcf0 55%,
            #8b78ff 100%
        );

    color: #080815;

    font-size: 18px;
    font-weight: 900;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.28),
        0 0 27px rgba(53, 236, 229, 0.20);

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

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

    fill: none;

    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

    filter: brightness(1.06);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.34),
        0 0 38px rgba(53, 236, 229, 0.34);

    outline: none;
}

.hero-geo {
    color: #c9c5d5;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 0.07em;
}

/*=============================================
                  Hero Action End
=============================================*/


/*=============================================
              Hero Highlights Start
=============================================*/

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

    margin-top: 27px;

    display: grid;

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

.hero-highlight {
    min-width: 0;

    padding: 0 15px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid rgba(232, 228, 255, 0.16);
}

.hero-highlight:first-child {
    padding-left: 0;
}

.hero-highlight:last-child {
    padding-right: 0;
    border-right: 0;
}

.hero-highlight strong {
    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
}

.hero-highlight span {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 12px;
    font-weight: 600;

    line-height: 1.4;
}

/*=============================================
               Hero Highlights End
=============================================*/


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

.hero-stage {
    position: relative;

    width: 100%;
    min-height: 710px;
}

.hero-categories {
    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;
}


/*=============================================
                 Hero Card Start
=============================================*/

.hero-category-card {
    --card-primary: 53, 236, 229;
    --card-secondary: 141, 100, 255;

    position: absolute;

    width: clamp(232px, 16.5vw, 282px);

    aspect-ratio: 1.52 / 1;

    overflow: hidden;

    border:
        2px solid
        rgba(var(--card-primary), 0.88);

    border-radius: 19px;

    background: #080914;

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.52),
        0 0 16px rgba(var(--card-primary), 0.48),
        0 0 38px rgba(var(--card-secondary), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    pointer-events: auto;

    isolation: isolate;

    transform-origin: center;

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

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

    z-index: 1;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    filter:
        brightness(1.05)
        saturate(1.08)
        contrast(1.04);

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

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

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 68%,
            rgba(3, 4, 12, 0.07) 79%,
            rgba(3, 4, 12, 0.26) 100%
        );
}

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

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.13) 0%,
            transparent 19%,
            transparent 76%,
            rgba(var(--card-primary), 0.13) 100%
        );

    box-shadow:
        inset 0 0 19px
        rgba(var(--card-primary), 0.09);
}


/*=============================================
                    Games Card
=============================================*/

.hero-card-games {
    --card-primary: 255, 177, 53;
    --card-secondary: 255, 80, 42;

    top: -7%;
    left: 5%;

    transform: rotate(-1.5deg);
}


/*=============================================
                    Sports Card
=============================================*/

.hero-card-sports {
    --card-primary: 43, 189, 255;
    --card-secondary: 65, 103, 255;

    top: 34%;
    left: -10%;

    transform: rotate(1deg);
}


/*=============================================
                 Promotions Card
=============================================*/

.hero-card-promotions {
    --card-primary: 255, 58, 204;
    --card-secondary: 165, 66, 255;

    bottom: 0;
    left: 6%;

    transform: rotate(-1.5deg);
}


/*=============================================
                 Tournaments Card
=============================================*/

.hero-card-tournaments {
    --card-primary: 61, 234, 222;
    --card-secondary: 66, 135, 255;

    top: 0;
    right: 7%;

    width: clamp(235px, 16.7vw, 286px);

    aspect-ratio: 1.40 / 1;

    transform: rotate(1.5deg);
}


/*=============================================
                   Loyalty Card
=============================================*/

.hero-card-loyalty {
    --card-primary: 190, 74, 255;
    --card-secondary: 255, 60, 210;

    top: 35%;
    right: -1%;

    transform: rotate(-1deg);
}


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

.hero-card-vip {
    --card-primary: 255, 198, 74;
    --card-secondary: 255, 137, 35;

    bottom: 0;
    right: 7%;

    transform: rotate(1.5deg);
}


/*=============================================
             Card Image Position Start
=============================================*/

.hero-card-games img {
    object-position: center 47%;
}

.hero-card-sports img {
    object-position: center 48%;
}

.hero-card-promotions img {
    object-position: center 47%;
}

.hero-card-tournaments img {
    object-position: center 39%;

    transform: scale(1);
}

.hero-card-loyalty img {
    object-position: center 47%;
}

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

/*=============================================
              Card Image Position End
=============================================*/


/*=============================================
                Hero Card Hover Start
=============================================*/

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

    border-color:
        rgba(var(--card-primary), 1);

    box-shadow:
        0 27px 56px rgba(0, 0, 0, 0.58),
        0 0 21px rgba(var(--card-primary), 0.74),
        0 0 46px rgba(var(--card-secondary), 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    outline: none;
}

.hero-card-games:hover,
.hero-card-games:focus-visible,
.hero-card-games.is-active {
    transform:
        rotate(-1.5deg)
        translateY(-6px)
        scale(1.035);
}

.hero-card-sports:hover,
.hero-card-sports:focus-visible,
.hero-card-sports.is-active {
    transform:
        rotate(1deg)
        translateY(-6px)
        scale(1.035);
}

.hero-card-promotions:hover,
.hero-card-promotions:focus-visible,
.hero-card-promotions.is-active {
    transform:
        rotate(-1.5deg)
        translateY(-6px)
        scale(1.035);
}

.hero-card-tournaments:hover,
.hero-card-tournaments:focus-visible,
.hero-card-tournaments.is-active {
    transform:
        rotate(1.5deg)
        translateY(-6px)
        scale(1.035);
}

.hero-card-loyalty:hover,
.hero-card-loyalty:focus-visible,
.hero-card-loyalty.is-active {
    transform:
        rotate(-1deg)
        translateY(-6px)
        scale(1.035);
}

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

.hero-category-card:hover img,
.hero-category-card:focus-visible img,
.hero-category-card.is-active img {
    transform: scale(1.055);

    filter:
        brightness(1.09)
        saturate(1.12)
        contrast(1.05);
}

.hero-card-tournaments:hover img,
.hero-card-tournaments:focus-visible img,
.hero-card-tournaments.is-active img {
    transform: scale(1.025);
}

/*=============================================
                 Hero Card Hover End
=============================================*/

/*=============================================
                   Hero Card End
=============================================*/

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


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

@media (max-width: 1360px) {

    .hero-layout {
        grid-template-columns:
            minmax(350px, 0.76fr)
            minmax(620px, 1.24fr);

        gap: 18px;
    }

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

    .hero-category-card {
        width: clamp(210px, 16vw, 245px);
    }

    .hero-card-games {
        top: -6%;
        left: 5%;
    }

    .hero-card-sports {
        top: 34%;
        left: -8%;
    }

    .hero-card-promotions {
        left: 6%;
    }

    .hero-card-tournaments {
        top: 0;
        right: 6%;

        width: clamp(215px, 16.3vw, 250px);
    }

    .hero-card-loyalty {
        right: 0;
    }

    .hero-card-vip {
        right: 6%;
    }
}


@media (max-width: 1120px) {

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

    .hero-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        padding:
            52px
            0
            44px;

        gap: 42px;
    }

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

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

    .hero-categories {
        position: relative;
        inset: auto;

        display: grid;

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

        gap: 15px;
    }

    .hero-category-card,
    .hero-card-games,
    .hero-card-sports,
    .hero-card-promotions,
    .hero-card-tournaments,
    .hero-card-loyalty,
    .hero-card-vip {
        position: relative;

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

        width: 100%;

        aspect-ratio: 1.52 / 1;

        transform: none;
    }

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

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


@media (max-width: 760px) {

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

        padding:
            38px
            0
            34px;
    }

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

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

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

    .hero-highlights {
        overflow-x: auto;

        grid-template-columns:
            repeat(3, 165px);

        padding-bottom: 6px;

        scrollbar-width: none;
    }

    .hero-highlights::-webkit-scrollbar {
        display: none;
    }

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

        gap: 12px;
    }
}


@media (max-width: 540px) {

    .hero-kicker {
        font-size: 11px;
        letter-spacing: 0.13em;
    }

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

    .hero-description {
        line-height: 1.62;
    }

    .hero-action {
        align-items: flex-start;
    }

    .hero-play {
        width: 100%;
        max-width: 300px;
    }

    .hero-categories {
        grid-template-columns: 1fr;
    }
}

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

/*=============================================
                     Hero End
=============================================*/

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

.vip-section {
    position: relative;

    padding:
        58px
        22px
        82px;

    overflow: visible;

    isolation: isolate;

    color: #fcf9ff;

    background:
        radial-gradient(
            ellipse at 8% 4%,
            rgba(178, 93, 255, 0.22) 0%,
            rgba(178, 93, 255, 0.06) 25%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 84% 4%,
            rgba(255, 201, 91, 0.16) 0%,
            rgba(255, 201, 91, 0.04) 27%,
            transparent 49%
        ),
        radial-gradient(
            ellipse at 96% 55%,
            rgba(76, 150, 255, 0.10) 0%,
            transparent 37%
        ),
        linear-gradient(
            145deg,
            #1a1029 0%,
            #27153d 34%,
            #211334 65%,
            #160e26 100%
        );

    border-top:
        1px solid rgba(196, 137, 255, 0.23);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ad6dff 17%,
            #7c8cff 34%,
            #ffd468 53%,
            #ffad69 69%,
            #c184ff 84%,
            transparent
        );

    box-shadow:
        0 0 28px
        rgba(174, 105, 255, 0.46);
}

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

.vip-container {
    position: relative;

    z-index: 2;

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

    margin:
        0 auto;
}

.vip-main {
    min-width: 0;
}


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

.vip-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.vip-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(192, 133, 255, 0.24);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(44, 24, 68, 0.95),
            rgba(22, 13, 38, 0.97)
        );

    box-shadow:
        0 24px 58px
        rgba(8, 3, 18, 0.47),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    pointer-events: auto;
}

.vip-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform:
        translateY(-50%);
}

.vip-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.vip-site-switcher-button {
    --section-accent: #bb87ff;
    --section-accent-rgb: 187, 135, 255;
    --section-ink: #231238;

    width: 100%;

    min-height: 67px;

    padding:
        9px
        10px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.44
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.16
            ),
            rgba(
                var(--section-accent-rgb),
                0.045
            )
        );

    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="games"] {
    --section-accent: #60d8ef;
    --section-accent-rgb: 96, 216, 239;
    --section-ink: #08242c;
}

.vip-site-switcher-button[data-section-target="sports"] {
    --section-accent: #6cb7ff;
    --section-accent-rgb: 108, 183, 255;
    --section-ink: #091c31;
}

.vip-site-switcher-button[data-section-target="promotions"] {
    --section-accent: #ff7cae;
    --section-accent-rgb: 255, 124, 174;
    --section-ink: #32101f;
}

.vip-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd05e;
    --section-accent-rgb: 255, 208, 94;
    --section-ink: #302306;
}

.vip-site-switcher-button[data-section-target="loyalty"] {
    --section-accent: #68dfba;
    --section-accent-rgb: 104, 223, 186;
    --section-ink: #09281f;
}

.vip-site-switcher-button[data-section-target="vip"] {
    --section-accent: #bd89ff;
    --section-accent-rgb: 189, 137, 255;
    --section-ink: #241238;
}

.vip-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.76
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);
}

.vip-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vip-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.vip-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(237, 226, 247, 0.72);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.18;
}

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

    border-color:
        var(--section-accent);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.30
            ),
            rgba(
                var(--section-accent-rgb),
                0.08
            )
        );

    box-shadow:
        0 12px 26px
        rgba(8, 3, 18, 0.31),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.20
        );

    outline: none;
}

.vip-site-switcher-button.is-active {
    transform:
        translateX(8px);

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

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.84
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(8, 3, 18, 0.36),
        0 0 32px
        rgba(
            var(--section-accent-rgb),
            0.34
        );
}

.vip-site-switcher-button.is-active
.vip-site-switcher-icon {
    border-color:
        rgba(0, 0, 0, 0.15);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--section-ink);
}

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


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

.vip-intro {
    position: relative;

    margin-bottom: 20px;

    padding:
        35px
        37px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.62fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(194, 137, 255, 0.31);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(176, 101, 255, 0.17),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 201, 81, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(46, 25, 72, 0.98),
            rgba(24, 14, 42, 0.98)
        );

    box-shadow:
        0 24px 55px
        rgba(8, 3, 18, 0.36),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}

.vip-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius:
        0
        6px
        6px
        0;

    background:
        linear-gradient(
            180deg,
            #b26eff,
            #7e8cff,
            #ffd067
        );

    box-shadow:
        0 0 20px
        rgba(183, 108, 255, 0.48);
}

.vip-eyebrow,
.vip-panel-kicker {
    margin:
        0
        0
        9px;

    color: #c290ff;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.vip-intro h2 {
    max-width: 800px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.8vw,
            57px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.vip-intro-copy > p {
    margin:
        13px
        0
        0;

    color: #d8cce3;

    font-size: 17px;

    line-height: 1.56;
}

.vip-intro-copy
.vip-intro-lead {
    color: #ffffff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}

.vip-intro-more {
    margin-top: 15px;
}

.vip-intro-more summary {
    width: fit-content;

    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    list-style: none;

    border:
        1px solid rgba(194, 140, 255, 0.40);

    border-radius: 11px;

    background:
        rgba(190, 138, 255, 0.08);

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.vip-intro-more summary::-webkit-details-marker {
    display: none;
}

.vip-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #b16cff,
            #ffd064
        );

    color: #20102d;

    font-size: 18px;
    font-weight: 900;
}

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

.vip-intro-more > div {
    margin-top: 10px;

    padding:
        14px
        16px;

    max-height: 250px;

    overflow-y: auto;

    border:
        1px solid rgba(194, 140, 255, 0.14);

    border-radius: 11px;

    background:
        rgba(12, 6, 22, 0.30);
}

.vip-intro-more p {
    margin: 0;

    color: #d5cadd;

    font-size: 14px;

    line-height: 1.54;
}

.vip-intro-more p + p {
    margin-top: 9px;
}

.vip-intro-media {
    position: relative;

    min-height: 320px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 204, 84, 0.52);

    border-radius: 21px;

    background: #1a1029;

    box-shadow:
        0 22px 50px
        rgba(8, 3, 18, 0.39);
}

.vip-intro-media img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    object-position: center;
}

.vip-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12, 5, 22, 0.03) 28%,
            rgba(12, 5, 22, 0.91) 100%
        );
}

.vip-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    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: #d5b2ff;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.vip-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 29px;
    font-weight: 900;
}

.vip-intro-media figcaption small {
    margin-top: 7px;

    color: #e1d7e9;

    font-size: 14px;

    line-height: 1.4;
}

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


/*=============================================
                  Snapshot Start
=============================================*/

.vip-snapshot {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.vip-snapshot article {
    --snap-accent: #bd89ff;
    --snap-accent-rgb: 189, 137, 255;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--snap-accent-rgb),
            0.29
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--snap-accent-rgb),
                0.09
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.vip-snapshot article[data-vip-highlight="games"] {
    --snap-accent: #78b8ff;
    --snap-accent-rgb: 120, 184, 255;
}

.vip-snapshot article[data-vip-highlight="withdrawals"] {
    --snap-accent: #6fd9ff;
    --snap-accent-rgb: 111, 217, 255;
}

.vip-snapshot article[data-vip-highlight="cashback"] {
    --snap-accent: #ff89b6;
    --snap-accent-rgb: 255, 137, 182;
}

.vip-snapshot article[data-vip-highlight="manager"] {
    --snap-accent: #ffd05e;
    --snap-accent-rgb: 255, 208, 94;
}

.vip-snapshot span,
.vip-snapshot strong,
.vip-snapshot small {
    display: block;
}

.vip-snapshot span {
    color:
        var(--snap-accent);

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.vip-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
}

.vip-snapshot small {
    margin-top: 5px;

    color: #d2c8dc;

    font-size: 13px;

    line-height: 1.35;
}

/*=============================================
                   Snapshot End
=============================================*/


/*=============================================
                     Tabs Start
=============================================*/

.vip-tabs {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.vip-tab {
    --tab-accent: #bd89ff;
    --tab-accent-rgb: 189, 137, 255;
    --tab-ink: #251239;

    min-height: 80px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.42
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.14
            ),
            rgba(255, 255, 255, 0.025)
        );

    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-tab[data-vip-target="levels"] {
    --tab-accent: #be8cff;
    --tab-accent-rgb: 190, 140, 255;
}

.vip-tab[data-vip-target="benefits"] {
    --tab-accent: #ffd05e;
    --tab-accent-rgb: 255, 208, 94;
    --tab-ink: #302306;
}

.vip-tab[data-vip-target="joining"] {
    --tab-accent: #6fafff;
    --tab-accent-rgb: 111, 175, 255;
    --tab-ink: #091d32;
}

.vip-tab[data-vip-target="guide"] {
    --tab-accent: #ef83b8;
    --tab-accent-rgb: 239, 131, 184;
    --tab-ink: #30101f;
}

.vip-tab-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        40px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.14
        );

    color:
        var(--tab-accent);
}

.vip-tab-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vip-tab strong {
    display: block;

    color: inherit;

    font-size: 16px;
    font-weight: 900;

    line-height: 1.1;
}

.vip-tab small {
    display: block;

    margin-top: 4px;

    color:
        rgba(237, 228, 245, 0.72);

    font-size: 12px;
    font-weight: 700;
}

.vip-tab:hover,
.vip-tab:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--tab-accent);

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.27
            ),
            rgba(
                var(--tab-accent-rgb),
                0.07
            )
        );

    box-shadow:
        0 14px 28px
        rgba(8, 3, 18, 0.30),
        0 0 23px
        rgba(
            var(--tab-accent-rgb),
            0.18
        );

    outline: none;
}

.vip-tab.is-active {
    transform:
        translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.83
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 15px 30px
        rgba(8, 3, 18, 0.34),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.28
        );
}

.vip-tab.is-active
.vip-tab-icon {
    border-color:
        rgba(0, 0, 0, 0.14);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--tab-ink);
}

.vip-tab.is-active small {
    color:
        rgba(30, 15, 40, 0.66);
}

/*=============================================
                      Tabs End
=============================================*/


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

.vip-stage {
    padding: 27px;

    border:
        1px solid rgba(190, 138, 255, 0.22);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(177, 102, 255, 0.09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(37, 21, 59, 0.98),
            rgba(21, 13, 38, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(8, 3, 18, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}

.vip-panel[hidden] {
    display: none !important;
}

.vip-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 33px;

    align-items: center;

    border-bottom:
        1px solid rgba(193, 139, 255, 0.22);
}

.vip-panel h3,
.vip-summary h3,
.vip-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.7vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.vip-panel-heading p {
    margin:
        10px
        0
        0;

    color: #d4c9dd;

    font-size: 16px;

    line-height: 1.54;
}

.vip-panel-mark {
    padding:
        16px
        14px;

    border:
        1px solid rgba(255, 207, 92, 0.46);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 205, 87, 0.14),
            rgba(183, 106, 255, 0.07)
        );

    text-align: center;
}

.vip-panel-mark span,
.vip-panel-mark strong,
.vip-panel-mark small {
    display: block;
}

.vip-panel-mark span {
    color: #ded4e4;

    font-size: 13px;
    font-weight: 800;
}

.vip-panel-mark strong {
    margin-top: 5px;

    color: #ffd05e;

    font-size: 27px;
    font-weight: 900;
}

.vip-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;
}

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


/*=============================================
                     Levels Start
=============================================*/

.vip-level-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 11px;
}

.vip-level-card {
    --level-accent: #c08cff;
    --level-accent-rgb: 192, 140, 255;

    min-width: 0;

    padding:
        18px
        17px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.30
        );

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--level-accent-rgb),
                0.10
            ),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(
                var(--level-accent-rgb),
                0.08
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.vip-level-card[data-vip-level="gold"] {
    --level-accent: #ffd05e;
    --level-accent-rgb: 255, 208, 94;
}

.vip-level-card[data-vip-level="platinum"] {
    --level-accent: #b9d5ef;
    --level-accent-rgb: 185, 213, 239;
}

.vip-level-card[data-vip-level="diamond"] {
    --level-accent: #d99cff;
    --level-accent-rgb: 217, 156, 255;
}

.vip-level-card header {
    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.22
        );
}

.vip-level-name {
    display: block;

    color:
        var(--level-accent);

    font-size: 14px;
    font-weight: 900;

    text-transform: uppercase;
}

.vip-level-card header strong {
    display: block;

    margin-top: 6px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1.18;
}

.vip-level-threshold {
    margin-top: 13px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.20
        );

    border-radius: 10px;

    background:
        rgba(
            var(--level-accent-rgb),
            0.05
        );
}

.vip-level-threshold span,
.vip-level-threshold strong {
    display: block;
}

.vip-level-threshold span {
    color: #d3c9dc;

    font-size: 12px;
}

.vip-level-threshold strong {
    margin-top: 3px;

    color:
        var(--level-accent);

    font-size: 25px;
    font-weight: 900;
}

.vip-level-card > p {
    margin:
        12px
        0
        0;

    color: #d2c6dc;

    font-size: 14px;

    line-height: 1.46;
}

.vip-level-benefits {
    margin-top: 13px;

    display: grid;

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

    gap: 7px;
}

.vip-level-benefits span {
    padding:
        8px
        9px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.18
        );

    border-radius: 8px;

    background:
        rgba(
            var(--level-accent-rgb),
            0.055
        );

    color: #f5eff9;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.3;
}

.vip-level-reward {
    margin-top: 9px;

    padding:
        10px
        11px;

    border-left:
        3px solid
        var(--level-accent);

    background:
        rgba(
            var(--level-accent-rgb),
            0.045
        );
}

.vip-level-reward small,
.vip-level-reward strong,
.vip-level-reward span {
    display: block;
}

.vip-level-reward small {
    color: #cfc4d7;

    font-size: 11px;
}

.vip-level-reward strong {
    margin-top: 3px;

    color:
        var(--level-accent);

    font-size: 18px;
    font-weight: 900;
}

.vip-level-reward span {
    margin-top: 3px;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.3;
}

.vip-level-comparison {
    margin-top: 19px;

    padding:
        18px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.46fr)
        minmax(0, 1.54fr);

    gap: 28px;

    border-left:
        3px solid #ffd05e;

    background:
        rgba(255, 208, 94, 0.045);
}

.vip-level-comparison h4,
.vip-membership-copy h4,
.vip-reading-guide h4 {
    margin:
        6px
        0
        0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;

    line-height: 1.12;
}

.vip-level-comparison-grid {
    display: grid;

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

    gap: 9px;
}

.vip-level-comparison-grid article {
    padding: 13px;

    border:
        1px solid rgba(255, 208, 94, 0.16);

    border-radius: 10px;

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

.vip-level-comparison-grid strong {
    color: #ffd05e;

    font-size: 15px;
    font-weight: 900;
}

.vip-level-comparison-grid p {
    margin:
        5px
        0
        0;

    color: #d2c8da;

    font-size: 13px;

    line-height: 1.42;
}

/*=============================================
                      Levels End
=============================================*/


/*=============================================
                    Benefits Start
=============================================*/

.vip-benefit-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 11px;
}

.vip-benefit-grid article {
    --benefit-accent: #c18eff;
    --benefit-accent-rgb: 193, 142, 255;

    padding: 18px;

    display: grid;

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

    gap: 14px;

    border:
        1px solid
        rgba(
            var(--benefit-accent-rgb),
            0.22
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--benefit-accent-rgb),
                0.075
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.vip-benefit-grid article[data-vip-benefit="games"] {
    --benefit-accent: #79b7ff;
    --benefit-accent-rgb: 121, 183, 255;
}

.vip-benefit-grid article[data-vip-benefit="withdrawal"] {
    --benefit-accent: #69d9ff;
    --benefit-accent-rgb: 105, 217, 255;
}

.vip-benefit-grid article[data-vip-benefit="manager"] {
    --benefit-accent: #ffd05e;
    --benefit-accent-rgb: 255, 208, 94;
}

.vip-benefit-grid article[data-vip-benefit="tournaments"] {
    --benefit-accent: #ae8cff;
    --benefit-accent-rgb: 174, 140, 255;
}

.vip-benefit-grid article[data-vip-benefit="bonuses"] {
    --benefit-accent: #ff8aba;
    --benefit-accent-rgb: 255, 138, 186;
}

.vip-benefit-grid article[data-vip-benefit="cashback"] {
    --benefit-accent: #69dfbb;
    --benefit-accent-rgb: 105, 223, 187;
}

.vip-benefit-grid article[data-vip-benefit="achievement"] {
    --benefit-accent: #ffd467;
    --benefit-accent-rgb: 255, 212, 103;
}

.vip-benefit-grid article[data-vip-benefit="avatar"] {
    --benefit-accent: #d393ff;
    --benefit-accent-rgb: 211, 147, 255;
}

.vip-benefit-icon {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--benefit-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--benefit-accent-rgb),
            0.13
        );

    color:
        var(--benefit-accent);
}

.vip-benefit-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vip-benefit-grid strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.vip-benefit-grid p {
    margin:
        6px
        0
        0;

    color: #d3c8dc;

    font-size: 14px;

    line-height: 1.46;
}

/*=============================================
                     Benefits End
=============================================*/


/*=============================================
                    Joining Start
=============================================*/

.vip-join-flow {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.vip-join-flow article {
    padding: 16px;

    border:
        1px solid rgba(111, 175, 255, 0.20);

    border-radius: 13px;

    background:
        rgba(111, 175, 255, 0.04);
}

.vip-join-icon {
    width: 40px;
    height: 40px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(111, 175, 255, 0.12);

    color: #78b5ff;
}

.vip-join-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vip-join-flow strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.vip-join-flow p {
    margin:
        6px
        0
        0;

    color: #d0c6da;

    font-size: 14px;

    line-height: 1.44;
}

.vip-membership-layout {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(330px, 0.85fr);

    gap: 28px;

    align-items: center;
}

.vip-membership-copy > p {
    margin:
        9px
        0
        0;

    color: #d2c7db;

    font-size: 15px;

    line-height: 1.5;
}

.vip-membership-points {
    display: grid;

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

    gap: 9px;
}

.vip-membership-points article {
    padding: 14px;

    border:
        1px solid rgba(111, 175, 255, 0.18);

    border-radius: 11px;

    background:
        rgba(111, 175, 255, 0.035);

    text-align: center;
}

.vip-membership-points strong,
.vip-membership-points span {
    display: block;
}

.vip-membership-points strong {
    color: #7db9ff;

    font-size: 16px;
    font-weight: 900;
}

.vip-membership-points span {
    margin-top: 4px;

    color: #d6ccdf;

    font-size: 12px;

    line-height: 1.3;
}

.vip-invitation-note {
    margin-top: 17px;

    padding:
        15px
        17px;

    display: grid;

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

    gap: 20px;

    align-items: center;

    border-left:
        3px solid #6fafff;

    background:
        rgba(111, 175, 255, 0.045);
}

.vip-invitation-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.vip-invitation-note p {
    margin: 0;

    color: #d2c8dc;

    font-size: 14px;

    line-height: 1.45;
}

/*=============================================
                     Joining End
=============================================*/


/*=============================================
                      Guide Start
=============================================*/

.vip-guide-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.vip-guide-grid article {
    padding: 15px;

    border:
        1px solid rgba(190, 138, 255, 0.17);

    border-radius: 12px;

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

.vip-guide-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 9px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(190, 138, 255, 0.12);

    color: #c594ff;
}

.vip-guide-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.vip-guide-grid strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.vip-guide-grid p {
    margin:
        6px
        0
        0;

    color: #d0c5d9;

    font-size: 14px;

    line-height: 1.42;
}

.vip-reading-guide {
    margin-top: 20px;

    padding-top: 19px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.44fr)
        minmax(0, 1.56fr);

    gap: 28px;

    border-top:
        1px solid rgba(190, 138, 255, 0.18);
}

.vip-reading-guide > div:last-child p {
    margin: 0;

    color: #d0c5d9;

    font-size: 14px;

    line-height: 1.5;
}

.vip-reading-guide > div:last-child p + p {
    margin-top: 8px;
}

.vip-reading-guide strong {
    color: #ffd16a;
}

/*=============================================
                       Guide End
=============================================*/


/*=============================================
                     Summary Start
=============================================*/

.vip-summary {
    margin-top: 22px;

    padding:
        23px
        25px;

    border:
        1px solid rgba(190, 138, 255, 0.18);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(180, 103, 255, 0.08),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.vip-summary-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 9px;
}

.vip-summary-grid article {
    padding: 14px;

    border:
        1px solid rgba(190, 138, 255, 0.15);

    border-radius: 11px;

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

.vip-summary-grid span,
.vip-summary-grid strong {
    display: block;
}

.vip-summary-grid span {
    color: #c391ff;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.vip-summary-grid strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.vip-summary-grid p {
    margin:
        6px
        0
        0;

    color: #d0c5d9;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                      Summary End
=============================================*/


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

.vip-closing {
    margin-top: 22px;

    padding:
        25px
        27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.76fr)
        minmax(0, 1.24fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid rgba(190, 138, 255, 0.18);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(180, 103, 255, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 208, 93, 0.05),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.vip-closing > div:last-child p {
    margin: 0;

    color: #d1c6da;

    font-size: 15px;

    line-height: 1.5;
}

.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: -168px;

        width: 146px;
    }

    .vip-site-switcher {
        width: 146px;
    }

    .vip-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@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%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .vip-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .vip-site-switcher-button {
        min-width: 160px;

        flex:
            0
            0
            160px;
    }

    .vip-intro {
        grid-template-columns: 1fr;
    }

    .vip-level-grid {
        grid-template-columns: 1fr;
    }

    .vip-join-flow,
    .vip-summary-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: 300px;
    }

    .vip-benefit-grid,
    .vip-guide-grid {
        grid-template-columns: 1fr;
    }

    .vip-level-comparison,
    .vip-membership-layout,
    .vip-reading-guide,
    .vip-invitation-note {
        grid-template-columns: 1fr;
    }

    .vip-level-comparison-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .vip-section {
        padding:
            34px
            12px
            58px;
    }

    .vip-container {
        width: 100%;
    }

    .vip-intro {
        padding:
            25px
            20px;
    }

    .vip-intro h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }

    .vip-tabs {
        display: flex;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .vip-tabs::-webkit-scrollbar {
        display: none;
    }

    .vip-tab {
        min-width: 200px;

        flex:
            0
            0
            200px;

        scroll-snap-align: start;
    }

    .vip-stage {
        padding:
            19px
            14px;
    }

    .vip-level-benefits,
    .vip-join-flow,
    .vip-membership-points,
    .vip-summary-grid {
        grid-template-columns: 1fr;
    }

    .vip-closing {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}

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

/*=============================================
                       VIP End
=============================================*/
/*=============================================
                    Sports Start
=============================================*/

.sports-section {
    position: relative;

    padding:
        58px
        22px
        82px;

    overflow: visible;

    isolation: isolate;

    color: #f7fffc;

    background:
        radial-gradient(
            ellipse at 8% 4%,
            rgba(38, 224, 169, 0.20) 0%,
            rgba(38, 224, 169, 0.05) 27%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 85% 3%,
            rgba(49, 176, 255, 0.17) 0%,
            rgba(49, 176, 255, 0.04) 28%,
            transparent 49%
        ),
        radial-gradient(
            ellipse at 95% 58%,
            rgba(255, 211, 83, 0.08) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #071b1d 0%,
            #0b282b 35%,
            #0b2028 65%,
            #07151b 100%
        );

    border-top:
        1px solid rgba(78, 225, 190, 0.21);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #39dfa9 17%,
            #49cfff 37%,
            #ffd45e 56%,
            #56d9c9 73%,
            transparent
        );

    box-shadow:
        0 0 27px
        rgba(61, 215, 186, 0.39);
}

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

.sports-container {
    position: relative;

    z-index: 2;

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

    margin: 0 auto;
}

.sports-main {
    min-width: 0;
}


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

.sports-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.sports-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(83, 220, 187, 0.23);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 48, 48, 0.94),
            rgba(7, 26, 32, 0.97)
        );

    box-shadow:
        0 24px 58px
        rgba(1, 10, 15, 0.45),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    pointer-events: auto;
}

.sports-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform:
        translateY(-50%);
}

.sports-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.sports-site-switcher-button {
    --section-accent: #47dbb0;
    --section-accent-rgb: 71, 219, 176;
    --section-ink: #06251c;

    width: 100%;

    min-height: 67px;

    padding:
        9px
        10px;

    display: grid;

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

    gap: 10px;

    align-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.43
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.14
            ),
            rgba(255, 255, 255, 0.02)
        );

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

.sports-site-switcher-button[data-section-target="games"] {
    --section-accent: #67cef2;
    --section-accent-rgb: 103, 206, 242;
    --section-ink: #08262d;
}

.sports-site-switcher-button[data-section-target="sports"] {
    --section-accent: #49dfac;
    --section-accent-rgb: 73, 223, 172;
    --section-ink: #07251c;
}

.sports-site-switcher-button[data-section-target="promotions"] {
    --section-accent: #ff7daf;
    --section-accent-rgb: 255, 125, 175;
    --section-ink: #32101f;
}

.sports-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd15f;
    --section-accent-rgb: 255, 209, 95;
    --section-ink: #302306;
}

.sports-site-switcher-button[data-section-target="loyalty"] {
    --section-accent: #74e0c2;
    --section-accent-rgb: 116, 224, 194;
    --section-ink: #08271f;
}

.sports-site-switcher-button[data-section-target="vip"] {
    --section-accent: #bd8cff;
    --section-accent-rgb: 189, 140, 255;
    --section-ink: #231238;
}

.sports-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.76
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);
}

.sports-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.sports-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.sports-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(224, 242, 238, 0.72);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.18;
}

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

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 26px
        rgba(1, 10, 15, 0.30),
        0 0 24px
        rgba(
            var(--section-accent-rgb),
            0.19
        );

    outline: none;
}

.sports-site-switcher-button.is-active {
    transform:
        translateX(8px);

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

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.83
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(1, 10, 15, 0.35),
        0 0 31px
        rgba(
            var(--section-accent-rgb),
            0.31
        );
}

.sports-site-switcher-button.is-active
.sports-site-switcher-icon {
    color:
        var(--section-ink);

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

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

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


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

.sports-intro {
    position: relative;

    margin-bottom: 20px;

    padding:
        35px
        37px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, 0.62fr);

    gap: 41px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(68, 222, 177, 0.29);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(45, 221, 169, 0.14),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(59, 183, 255, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(13, 47, 49, 0.98),
            rgba(8, 27, 35, 0.98)
        );

    box-shadow:
        0 24px 55px
        rgba(1, 10, 15, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}

.sports-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius:
        0
        6px
        6px
        0;

    background:
        linear-gradient(
            180deg,
            #47dfad,
            #4bbfff,
            #ffd25e
        );

    box-shadow:
        0 0 20px
        rgba(68, 220, 178, 0.45);
}

.sports-eyebrow,
.sports-panel-kicker {
    margin:
        0
        0
        9px;

    color: #72e5c2;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.sports-intro h2 {
    max-width: 810px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.8vw,
            57px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.sports-intro-copy > p {
    margin:
        13px
        0
        0;

    color: #c9dcd8;

    font-size: 17px;

    line-height: 1.56;
}

.sports-intro-copy
.sports-intro-lead {
    color: #ffffff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}

.sports-intro-more {
    margin-top: 15px;
}

.sports-intro-more summary {
    width: fit-content;

    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    list-style: none;

    border:
        1px solid rgba(69, 221, 176, 0.38);

    border-radius: 11px;

    background:
        rgba(69, 221, 176, 0.075);

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.sports-intro-more summary::-webkit-details-marker {
    display: none;
}

.sports-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #45dfae,
            #4abfff
        );

    color: #08211d;

    font-size: 18px;
    font-weight: 900;
}

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

.sports-intro-more > div {
    margin-top: 10px;

    padding:
        14px
        16px;

    max-height: 255px;

    overflow-y: auto;

    border:
        1px solid rgba(66, 220, 176, 0.14);

    border-radius: 11px;

    background:
        rgba(2, 13, 17, 0.30);
}

.sports-intro-more p {
    margin: 0;

    color: #cbded9;

    font-size: 14px;

    line-height: 1.55;
}

.sports-intro-more p + p {
    margin-top: 9px;
}

.sports-intro-media {
    position: relative;

    min-height: 320px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(77, 206, 255, 0.40);

    border-radius: 21px;

    background: #071b21;

    box-shadow:
        0 22px 50px
        rgba(1, 10, 15, 0.38);
}

.sports-intro-media img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    object-position: center;
}

.sports-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3, 12, 17, 0.03) 28%,
            rgba(3, 12, 17, 0.91) 100%
        );
}

.sports-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 20px;
}

.sports-intro-media span,
.sports-intro-media strong,
.sports-intro-media small {
    display: block;
}

.sports-intro-media span {
    color: #83e6c7;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.sports-intro-media strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 900;
}

.sports-intro-media small {
    margin-top: 7px;

    color: #d4e4e0;

    font-size: 14px;

    line-height: 1.4;
}

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


/*=============================================
                  Snapshot Start
=============================================*/

.sports-snapshot {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.sports-snapshot article {
    --snap-accent: #52dfb2;
    --snap-accent-rgb: 82, 223, 178;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--snap-accent-rgb),
            0.28
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--snap-accent-rgb),
                0.09
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.sports-snapshot article[data-sports-highlight="football"] {
    --snap-accent: #4ce0aa;
    --snap-accent-rgb: 76, 224, 170;
}

.sports-snapshot article[data-sports-highlight="live"] {
    --snap-accent: #4bbfff;
    --snap-accent-rgb: 75, 191, 255;
}

.sports-snapshot article[data-sports-highlight="weekly"] {
    --snap-accent: #ffd261;
    --snap-accent-rgb: 255, 210, 97;
}

.sports-snapshot article[data-sports-highlight="weekend"] {
    --snap-accent: #ae8cff;
    --snap-accent-rgb: 174, 140, 255;
}

.sports-snapshot span,
.sports-snapshot strong,
.sports-snapshot small {
    display: block;
}

.sports-snapshot span {
    color:
        var(--snap-accent);

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.sports-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
}

.sports-snapshot small {
    margin-top: 5px;

    color: #cbdcd8;

    font-size: 13px;

    line-height: 1.35;
}

/*=============================================
                   Snapshot End
=============================================*/


/*=============================================
                     Tabs Start
=============================================*/

.sports-tabs {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.sports-tab {
    --tab-accent: #55dbb4;
    --tab-accent-rgb: 85, 219, 180;
    --tab-ink: #06251c;

    min-height: 80px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.40
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.13
            ),
            rgba(255, 255, 255, 0.022)
        );

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

.sports-tab[data-sports-target="overview"] {
    --tab-accent: #52ddb2;
    --tab-accent-rgb: 82, 221, 178;
}

.sports-tab[data-sports-target="sports"] {
    --tab-accent: #61d5ef;
    --tab-accent-rgb: 97, 213, 239;
    --tab-ink: #07242d;
}

.sports-tab[data-sports-target="bet-types"] {
    --tab-accent: #ffd15f;
    --tab-accent-rgb: 255, 209, 95;
    --tab-ink: #302306;
}

.sports-tab[data-sports-target="bonuses"] {
    --tab-accent: #aa8cff;
    --tab-accent-rgb: 170, 140, 255;
    --tab-ink: #211137;
}

.sports-tab[data-sports-target="guide"] {
    --tab-accent: #ff8caf;
    --tab-accent-rgb: 255, 140, 175;
    --tab-ink: #32101f;
}

.sports-tab-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        40px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.13
        );

    color:
        var(--tab-accent);
}

.sports-tab-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.sports-tab strong {
    display: block;

    color: inherit;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.1;
}

.sports-tab small {
    display: block;

    margin-top: 4px;

    color:
        rgba(225, 239, 236, 0.72);

    font-size: 12px;
    font-weight: 700;
}

.sports-tab:hover,
.sports-tab:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--tab-accent);

    box-shadow:
        0 14px 28px
        rgba(1, 10, 15, 0.30),
        0 0 23px
        rgba(
            var(--tab-accent-rgb),
            0.18
        );

    outline: none;
}

.sports-tab.is-active {
    transform:
        translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.83
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 15px 30px
        rgba(1, 10, 15, 0.34),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.27
        );
}

.sports-tab.is-active
.sports-tab-icon {
    border-color:
        rgba(0, 0, 0, 0.14);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--tab-ink);
}

/*=============================================
                      Tabs End
=============================================*/


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

.sports-stage {
    padding: 27px;

    border:
        1px solid rgba(80, 222, 178, 0.21);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(75, 192, 255, 0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(11, 42, 44, 0.98),
            rgba(6, 23, 31, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(1, 10, 15, 0.34),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}

.sports-panel[hidden] {
    display: none !important;
}

.sports-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 34px;

    align-items: center;

    border-bottom:
        1px solid rgba(74, 222, 178, 0.19);
}

.sports-panel h3,
.sports-guide h3,
.sports-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.7vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.sports-panel-heading p {
    margin:
        10px
        0
        0;

    color: #cadbd7;

    font-size: 16px;

    line-height: 1.54;
}

.sports-panel-mark {
    padding:
        16px
        14px;

    border:
        1px solid rgba(255, 209, 95, 0.42);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 208, 91, 0.12),
            rgba(69, 222, 176, 0.06)
        );

    text-align: center;
}

.sports-panel-mark span,
.sports-panel-mark strong,
.sports-panel-mark small {
    display: block;
}

.sports-panel-mark span {
    color: #d4dfdc;

    font-size: 13px;
}

.sports-panel-mark strong {
    margin-top: 5px;

    color: #ffd15f;

    font-size: 25px;
    font-weight: 900;

    line-height: 1.1;
}

.sports-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;
}

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


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

.sports-mode-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.sports-mode-grid article {
    --mode-accent: #50ddb0;
    --mode-accent-rgb: 80, 221, 176;

    padding: 17px;

    border:
        1px solid
        rgba(
            var(--mode-accent-rgb),
            0.23
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--mode-accent-rgb),
                0.075
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.sports-mode-grid article[data-sports-mode="live"] {
    --mode-accent: #54c5ff;
    --mode-accent-rgb: 84, 197, 255;
}

.sports-mode-grid article[data-sports-mode="single"] {
    --mode-accent: #ffd15e;
    --mode-accent-rgb: 255, 209, 94;
}

.sports-mode-grid article[data-sports-mode="multi"] {
    --mode-accent: #ae8cff;
    --mode-accent-rgb: 174, 140, 255;
}

.sports-mode-label {
    color:
        var(--mode-accent);

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;
}

.sports-mode-grid h4,
.sports-bet-grid h4,
.sports-bonus-card h4,
.sports-guide-comparison h4 {
    margin:
        6px
        0
        0;

    color: #ffffff;

    font-size: 21px;
    font-weight: 900;

    line-height: 1.12;
}

.sports-mode-grid p {
    margin:
        8px
        0
        0;

    color: #c7d9d5;

    font-size: 14px;

    line-height: 1.45;
}

.sports-live-note {
    margin-top: 18px;

    padding:
        17px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.44fr)
        minmax(0, 1.56fr);

    gap: 28px;

    align-items: center;

    border-left:
        3px solid #52c8ff;

    background:
        rgba(82, 200, 255, 0.045);
}

.sports-live-note h4 {
    margin:
        5px
        0
        0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 900;

    line-height: 1.12;
}

.sports-live-note > p {
    margin: 0;

    color: #cbdcd8;

    font-size: 15px;

    line-height: 1.48;
}

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


/*=============================================
                Sport Categories Start
=============================================*/

.sports-category-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.sports-category-grid article {
    --sport-accent: #50ddb0;
    --sport-accent-rgb: 80, 221, 176;

    padding: 17px;

    border:
        1px solid
        rgba(
            var(--sport-accent-rgb),
            0.21
        );

    border-radius: 13px;

    background:
        rgba(
            var(--sport-accent-rgb),
            0.045
        );
}

.sports-category-grid article[data-sport-kind="racing"],
.sports-category-grid article[data-sport-kind="darts"] {
    --sport-accent: #ffd15f;
    --sport-accent-rgb: 255, 209, 95;
}

.sports-category-grid article[data-sport-kind="tennis"],
.sports-category-grid article[data-sport-kind="basketball"] {
    --sport-accent: #58c5ff;
    --sport-accent-rgb: 88, 197, 255;
}

.sports-category-grid article[data-sport-kind="cricket"],
.sports-category-grid article[data-sport-kind="rugby"] {
    --sport-accent: #7ee3c8;
    --sport-accent-rgb: 126, 227, 200;
}

.sports-category-grid article[data-sport-kind="combat"] {
    --sport-accent: #ff8d94;
    --sport-accent-rgb: 255, 141, 148;
}

.sports-category-grid strong {
    color:
        var(--sport-accent);

    font-size: 17px;
    font-weight: 900;
}

.sports-category-grid p {
    margin:
        7px
        0
        0;

    color: #c9d9d6;

    font-size: 14px;

    line-height: 1.45;
}

/*=============================================
                 Sport Categories End
=============================================*/


/*=============================================
                   Bet Types Start
=============================================*/

.sports-bet-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 9px;
}

.sports-bet-grid article {
    --bet-accent: #ffd15f;
    --bet-accent-rgb: 255, 209, 95;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--bet-accent-rgb),
            0.19
        );

    border-radius: 12px;

    background:
        rgba(
            var(--bet-accent-rgb),
            0.04
        );
}

.sports-bet-grid article[data-bet-type="live"] {
    --bet-accent: #52c5ff;
    --bet-accent-rgb: 82, 197, 255;
}

.sports-bet-grid article[data-bet-type="builder"] {
    --bet-accent: #ad8cff;
    --bet-accent-rgb: 173, 140, 255;
}

.sports-bet-grid article > span {
    color:
        var(--bet-accent);

    font-size: 12px;
    font-weight: 900;

    text-transform: uppercase;
}

.sports-bet-grid p {
    margin:
        7px
        0
        0;

    color: #cbdad7;

    font-size: 14px;

    line-height: 1.43;
}

.sports-odds-explainer {
    margin-top: 20px;

    padding-top: 18px;

    display: grid;

    grid-template-columns:
        minmax(300px, 0.52fr)
        minmax(0, 1.48fr);

    gap: 27px;

    align-items: center;

    border-top:
        1px solid rgba(255, 209, 95, 0.17);
}

.sports-odds-explainer h4 {
    margin:
        5px
        0
        0;

    color: #ffffff;

    font-size: 23px;
    font-weight: 900;

    line-height: 1.12;
}

.sports-odds-example {
    display: grid;

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

    gap: 9px;
}

.sports-odds-example article {
    padding: 14px;

    border:
        1px solid rgba(255, 209, 95, 0.17);

    border-radius: 11px;

    background:
        rgba(255, 209, 95, 0.045);

    text-align: center;
}

.sports-odds-example span,
.sports-odds-example strong {
    display: block;
}

.sports-odds-example span {
    color: #c8d4d1;

    font-size: 13px;
}

.sports-odds-example strong {
    margin-top: 4px;

    color: #ffd15f;

    font-size: 23px;
    font-weight: 900;
}

.sports-odds-note {
    margin-top: 13px;

    padding:
        14px
        16px;

    border-left:
        3px solid #ffd15f;

    background:
        rgba(255, 209, 95, 0.045);
}

.sports-odds-note strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.sports-odds-note p {
    margin:
        5px
        0
        0;

    color: #cbdad7;

    font-size: 14px;

    line-height: 1.44;
}

/*=============================================
                    Bet Types End
=============================================*/


/*=============================================
                  Bonuses Start
=============================================*/

.sports-bonus-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 12px;
}

.sports-bonus-card {
    --bonus-accent: #b08cff;
    --bonus-accent-rgb: 176, 140, 255;

    padding: 20px;

    border:
        1px solid
        rgba(
            var(--bonus-accent-rgb),
            0.24
        );

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--bonus-accent-rgb),
                0.075
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.sports-bonus-card[data-bonus-type="weekly"] {
    --bonus-accent: #ffd15f;
    --bonus-accent-rgb: 255, 209, 95;
}

.sports-bonus-label {
    color:
        var(--bonus-accent);

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.sports-bonus-value {
    display: block;

    margin-top: 8px;

    color:
        var(--bonus-accent);

    font-size: 32px;
    font-weight: 900;

    line-height: 1;
}

.sports-bonus-card > p {
    margin:
        9px
        0
        0;

    color: #cbd9d6;

    font-size: 15px;

    line-height: 1.47;
}

.sports-bonus-path {
    margin-top: 14px;

    display: grid;

    gap: 7px;
}

.sports-bonus-path span {
    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            var(--bonus-accent-rgb),
            0.16
        );

    border-radius: 8px;

    background:
        rgba(
            var(--bonus-accent-rgb),
            0.04
        );

    color: #d3dfdc;

    font-size: 14px;

    line-height: 1.42;
}

.sports-bonus-note {
    margin-top: 16px;

    padding:
        16px
        18px;

    border-left:
        3px solid #ae8cff;

    background:
        rgba(174, 140, 255, 0.045);
}

.sports-bonus-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.sports-bonus-note p {
    margin:
        6px
        0
        0;

    color: #cbd9d6;

    font-size: 14px;

    line-height: 1.47;
}

/*=============================================
                   Bonuses End
=============================================*/


/*=============================================
                First Bet Guide Start
=============================================*/

.sports-first-bet-flow {
    margin-top: 20px;

    display: grid;

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

    gap: 9px;
}

.sports-first-bet-flow article {
    padding: 15px;

    border:
        1px solid rgba(255, 140, 175, 0.16);

    border-radius: 12px;

    background:
        rgba(255, 140, 175, 0.025);
}

.sports-guide-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 9px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(255, 140, 175, 0.11);

    color: #ff94b7;
}

.sports-guide-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.sports-first-bet-flow strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.sports-first-bet-flow p {
    margin:
        6px
        0
        0;

    color: #cad9d6;

    font-size: 14px;

    line-height: 1.42;
}

.sports-guide-comparison {
    margin-top: 20px;

    padding-top: 18px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.43fr)
        minmax(0, 1.57fr);

    gap: 28px;

    border-top:
        1px solid rgba(255, 140, 175, 0.16);
}

.sports-guide-comparison-grid {
    display: grid;

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

    gap: 10px;
}

.sports-guide-comparison-grid article {
    padding: 15px;

    border:
        1px solid rgba(75, 197, 255, 0.16);

    border-radius: 11px;

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

.sports-guide-comparison-grid strong {
    color: #55c8ff;

    font-size: 16px;
    font-weight: 900;
}

.sports-guide-comparison-grid p {
    margin:
        6px
        0
        0;

    color: #cbdad7;

    font-size: 14px;

    line-height: 1.43;
}

/*=============================================
                 First Bet Guide End
=============================================*/


/*=============================================
                    Guide Start
=============================================*/

.sports-guide {
    margin-top: 22px;

    padding:
        23px
        25px;

    border:
        1px solid rgba(73, 222, 173, 0.17);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(69, 222, 174, 0.07),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.sports-guide-heading {
    max-width: 850px;
}

.sports-guide-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 9px;
}

.sports-guide-grid article {
    padding: 15px;

    border:
        1px solid rgba(73, 222, 173, 0.14);

    border-radius: 11px;

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

.sports-guide-grid strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.sports-guide-grid p {
    margin:
        6px
        0
        0;

    color: #cbdad7;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                     Guide End
=============================================*/


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

.sports-closing {
    margin-top: 22px;

    padding:
        25px
        27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.76fr)
        minmax(0, 1.24fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid rgba(73, 222, 173, 0.17);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(69, 222, 174, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(76, 195, 255, 0.05),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.sports-closing > div:last-child p {
    margin: 0;

    color: #cad9d6;

    font-size: 15px;

    line-height: 1.5;
}

.sports-closing > div:last-child p + p {
    margin-top: 9px;
}

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


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

@media (max-width: 1500px) {

    .sports-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }

    .sports-site-navigation {
        left: -168px;

        width: 146px;
    }

    .sports-site-switcher {
        width: 146px;
    }

    .sports-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@media (max-width: 1240px) {

    .sports-site-navigation,
    .sports-site-navigation.is-floating,
    .sports-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }

    .sports-site-switcher {
        width: 100%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .sports-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .sports-site-switcher-button {
        min-width: 160px;

        flex:
            0
            0
            160px;
    }

    .sports-intro {
        grid-template-columns: 1fr;
    }

    .sports-mode-grid,
    .sports-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

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

    .sports-first-bet-flow,
    .sports-guide-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 920px) {

    .sports-panel-heading {
        grid-template-columns: 1fr;
    }

    .sports-panel-mark {
        max-width: 300px;
    }

    .sports-live-note,
    .sports-odds-explainer,
    .sports-guide-comparison {
        grid-template-columns: 1fr;
    }

    .sports-bonus-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 760px) {

    .sports-section {
        padding:
            34px
            12px
            58px;
    }

    .sports-container {
        width: 100%;
    }

    .sports-intro {
        padding:
            25px
            20px;
    }

    .sports-intro h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }

    .sports-tabs {
        display: flex;

        overflow-x: auto;

        gap: 8px;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .sports-tabs::-webkit-scrollbar {
        display: none;
    }

    .sports-tab {
        min-width: 195px;

        flex:
            0
            0
            195px;

        scroll-snap-align: start;
    }

    .sports-stage {
        padding:
            19px
            14px;
    }

    .sports-snapshot,
    .sports-mode-grid,
    .sports-category-grid,
    .sports-bet-grid,
    .sports-odds-example,
    .sports-first-bet-flow,
    .sports-guide-grid,
    .sports-guide-comparison-grid {
        grid-template-columns: 1fr;
    }

    .sports-closing {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}

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

/*=============================================
                     Sports End
=============================================*/
/*=============================================
                   Loyalty Start
=============================================*/

.loyalty-section {
    position: relative;

    padding:
        58px
        22px
        82px;

    overflow: visible;

    isolation: isolate;

    color: #f9fffd;

    background:
        radial-gradient(
            ellipse at 8% 4%,
            rgba(47, 225, 183, 0.19) 0%,
            rgba(47, 225, 183, 0.05) 27%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 86% 4%,
            rgba(255, 206, 89, 0.14) 0%,
            rgba(255, 206, 89, 0.035) 28%,
            transparent 49%
        ),
        radial-gradient(
            ellipse at 94% 58%,
            rgba(100, 143, 255, 0.09) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0a1c1a 0%,
            #102925 35%,
            #132520 65%,
            #0a1817 100%
        );

    border-top:
        1px solid rgba(91, 224, 188, 0.21);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #4ae0b1 17%,
            #76e6ce 34%,
            #ffd05d 54%,
            #84a2ff 72%,
            #57dbc2 84%,
            transparent
        );

    box-shadow:
        0 0 28px
        rgba(75, 220, 178, 0.40);
}

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

.loyalty-container {
    position: relative;

    z-index: 2;

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

    margin: 0 auto;
}

.loyalty-main {
    min-width: 0;
}


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

.loyalty-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.loyalty-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(92, 224, 188, 0.23);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 54, 46, 0.95),
            rgba(11, 29, 27, 0.97)
        );

    box-shadow:
        0 24px 58px
        rgba(2, 11, 9, 0.45),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    pointer-events: auto;
}

.loyalty-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform:
        translateY(-50%);
}

.loyalty-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.loyalty-site-switcher-button {
    --section-accent: #66dfbd;
    --section-accent-rgb: 102, 223, 189;
    --section-ink: #08271f;

    width: 100%;

    min-height: 67px;

    padding:
        9px
        10px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.43
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.15
            ),
            rgba(255, 255, 255, 0.02)
        );

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

.loyalty-site-switcher-button[data-section-target="games"] {
    --section-accent: #62d3f1;
    --section-accent-rgb: 98, 211, 241;
    --section-ink: #08252d;
}

.loyalty-site-switcher-button[data-section-target="sports"] {
    --section-accent: #56deb0;
    --section-accent-rgb: 86, 222, 176;
    --section-ink: #07251c;
}

.loyalty-site-switcher-button[data-section-target="promotions"] {
    --section-accent: #ff7eaf;
    --section-accent-rgb: 255, 126, 175;
    --section-ink: #32101f;
}

.loyalty-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd05e;
    --section-accent-rgb: 255, 208, 94;
    --section-ink: #302306;
}

.loyalty-site-switcher-button[data-section-target="loyalty"] {
    --section-accent: #66dfbd;
    --section-accent-rgb: 102, 223, 189;
    --section-ink: #08271f;
}

.loyalty-site-switcher-button[data-section-target="vip"] {
    --section-accent: #be8cff;
    --section-accent-rgb: 190, 140, 255;
    --section-ink: #231238;
}

.loyalty-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.76
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);
}

.loyalty-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.loyalty-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.loyalty-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(226, 242, 235, 0.72);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.18;
}

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

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 26px
        rgba(2, 11, 9, 0.30),
        0 0 24px
        rgba(
            var(--section-accent-rgb),
            0.19
        );

    outline: none;
}

.loyalty-site-switcher-button.is-active {
    transform:
        translateX(8px);

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

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.83
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(2, 11, 9, 0.35),
        0 0 31px
        rgba(
            var(--section-accent-rgb),
            0.31
        );
}

.loyalty-site-switcher-button.is-active
.loyalty-site-switcher-icon {
    color:
        var(--section-ink);

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

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

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


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

.loyalty-intro {
    position: relative;

    margin-bottom: 20px;

    padding:
        35px
        37px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, 0.62fr);

    gap: 41px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(91, 224, 188, 0.29);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(74, 224, 177, 0.14),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 208, 93, 0.09),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(20, 54, 47, 0.98),
            rgba(11, 29, 27, 0.98)
        );

    box-shadow:
        0 24px 55px
        rgba(2, 11, 9, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}

.loyalty-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius:
        0
        6px
        6px
        0;

    background:
        linear-gradient(
            180deg,
            #50dfb2,
            #ffd15f,
            #83a2ff
        );

    box-shadow:
        0 0 20px
        rgba(74, 220, 177, 0.45);
}

.loyalty-eyebrow,
.loyalty-panel-kicker {
    margin:
        0
        0
        9px;

    color: #76e4c3;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.25;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.loyalty-intro h2 {
    max-width: 810px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.8vw,
            57px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.loyalty-intro-copy > p {
    margin:
        13px
        0
        0;

    color: #cdded8;

    font-size: 17px;

    line-height: 1.56;
}

.loyalty-intro-copy
.loyalty-intro-lead {
    color: #ffffff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}

.loyalty-intro-more {
    margin-top: 15px;
}

.loyalty-intro-more summary {
    width: fit-content;

    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    list-style: none;

    border:
        1px solid rgba(92, 224, 188, 0.38);

    border-radius: 11px;

    background:
        rgba(92, 224, 188, 0.075);

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.loyalty-intro-more summary::-webkit-details-marker {
    display: none;
}

.loyalty-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #59dfb5,
            #ffd160
        );

    color: #10261f;

    font-size: 18px;
    font-weight: 900;
}

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

.loyalty-intro-more > div {
    margin-top: 10px;

    padding:
        14px
        16px;

    max-height: 255px;

    overflow-y: auto;

    border:
        1px solid rgba(92, 224, 188, 0.14);

    border-radius: 11px;

    background:
        rgba(4, 15, 13, 0.30);
}

.loyalty-intro-more p {
    margin: 0;

    color: #ccddd7;

    font-size: 14px;

    line-height: 1.55;
}

.loyalty-intro-more p + p {
    margin-top: 9px;
}

.loyalty-intro-media {
    position: relative;

    min-height: 320px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 208, 93, 0.44);

    border-radius: 21px;

    background: #0d201c;

    box-shadow:
        0 22px 50px
        rgba(2, 11, 9, 0.38);
}

.loyalty-intro-media img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    object-position: center;
}

.loyalty-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 13, 0.03) 28%,
            rgba(4, 15, 13, 0.92) 100%
        );
}

.loyalty-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    bottom: 20px;
}

.loyalty-intro-media span,
.loyalty-intro-media strong,
.loyalty-intro-media small {
    display: block;
}

.loyalty-intro-media span {
    color: #87e7c9;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.loyalty-intro-media strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 28px;
    font-weight: 900;
}

.loyalty-intro-media small {
    margin-top: 7px;

    color: #d8e5e0;

    font-size: 14px;

    line-height: 1.4;
}

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


/*=============================================
                  Snapshot Start
=============================================*/

.loyalty-snapshot {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.loyalty-snapshot article {
    --snap-accent: #66dfbd;
    --snap-accent-rgb: 102, 223, 189;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--snap-accent-rgb),
            0.27
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--snap-accent-rgb),
                0.085
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.loyalty-snapshot article[data-loyalty-highlight="cashback"],
.loyalty-snapshot article[data-loyalty-highlight="deposit"] {
    --snap-accent: #ffd15f;
    --snap-accent-rgb: 255, 209, 95;
}

.loyalty-snapshot article[data-loyalty-highlight="spins"] {
    --snap-accent: #66caff;
    --snap-accent-rgb: 102, 202, 255;
}

.loyalty-snapshot article[data-loyalty-highlight="multiplier"] {
    --snap-accent: #ad8cff;
    --snap-accent-rgb: 173, 140, 255;
}

.loyalty-snapshot article[data-loyalty-highlight="exchange"] {
    --snap-accent: #ff8eb3;
    --snap-accent-rgb: 255, 142, 179;
}

.loyalty-snapshot span,
.loyalty-snapshot strong,
.loyalty-snapshot small {
    display: block;
}

.loyalty-snapshot span {
    color:
        var(--snap-accent);

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.loyalty-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 900;
}

.loyalty-snapshot small {
    margin-top: 5px;

    color: #ceddd8;

    font-size: 13px;

    line-height: 1.35;
}

/*=============================================
                   Snapshot End
=============================================*/


/*=============================================
                     Tabs Start
=============================================*/

.loyalty-tabs {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.loyalty-tab {
    --tab-accent: #66dfbd;
    --tab-accent-rgb: 102, 223, 189;
    --tab-ink: #08271f;

    min-height: 80px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.40
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.13
            ),
            rgba(255, 255, 255, 0.022)
        );

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

.loyalty-tab[data-loyalty-target="levels"] {
    --tab-accent: #66dfbd;
    --tab-accent-rgb: 102, 223, 189;
}

.loyalty-tab[data-loyalty-target="rewards"] {
    --tab-accent: #ffd15f;
    --tab-accent-rgb: 255, 209, 95;
    --tab-ink: #302306;
}

.loyalty-tab[data-loyalty-target="points"] {
    --tab-accent: #6ecaff;
    --tab-accent-rgb: 110, 202, 255;
    --tab-ink: #08222f;
}

.loyalty-tab[data-loyalty-target="guide"] {
    --tab-accent: #ad8cff;
    --tab-accent-rgb: 173, 140, 255;
    --tab-ink: #211137;
}

.loyalty-tab-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        40px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.13
        );

    color:
        var(--tab-accent);
}

.loyalty-tab-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.loyalty-tab strong {
    display: block;

    color: inherit;

    font-size: 16px;
    font-weight: 900;

    line-height: 1.1;
}

.loyalty-tab small {
    display: block;

    margin-top: 4px;

    color:
        rgba(228, 240, 235, 0.72);

    font-size: 12px;
    font-weight: 700;
}

.loyalty-tab:hover,
.loyalty-tab:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--tab-accent);

    box-shadow:
        0 14px 28px
        rgba(2, 11, 9, 0.30),
        0 0 23px
        rgba(
            var(--tab-accent-rgb),
            0.18
        );

    outline: none;
}

.loyalty-tab.is-active {
    transform:
        translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.83
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 15px 30px
        rgba(2, 11, 9, 0.34),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.27
        );
}

.loyalty-tab.is-active
.loyalty-tab-icon {
    border-color:
        rgba(0, 0, 0, 0.14);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--tab-ink);
}

/*=============================================
                      Tabs End
=============================================*/


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

.loyalty-stage {
    padding: 27px;

    border:
        1px solid rgba(91, 224, 188, 0.20);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(255, 209, 95, 0.06),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(17, 48, 42, 0.98),
            rgba(8, 25, 24, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(2, 11, 9, 0.34),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}

.loyalty-panel[hidden] {
    display: none !important;
}

.loyalty-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 34px;

    align-items: center;

    border-bottom:
        1px solid rgba(91, 224, 188, 0.19);
}

.loyalty-panel h3,
.loyalty-summary h3,
.loyalty-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.7vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.loyalty-panel-heading p {
    margin:
        10px
        0
        0;

    color: #cadbd5;

    font-size: 16px;

    line-height: 1.54;
}

.loyalty-panel-mark {
    padding:
        16px
        14px;

    border:
        1px solid rgba(255, 209, 95, 0.42);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 209, 95, 0.12),
            rgba(91, 224, 188, 0.05)
        );

    text-align: center;
}

.loyalty-panel-mark span,
.loyalty-panel-mark strong,
.loyalty-panel-mark small {
    display: block;
}

.loyalty-panel-mark span {
    color: #d6e1dd;

    font-size: 13px;
}

.loyalty-panel-mark strong {
    margin-top: 5px;

    color: #ffd15f;

    font-size: 25px;
    font-weight: 900;

    line-height: 1.1;
}

.loyalty-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;
}

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


/*=============================================
                     Levels Start
=============================================*/

.loyalty-level-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 11px;
}

.loyalty-level-card {
    --level-accent: #6be1bf;
    --level-accent-rgb: 107, 225, 191;

    padding: 18px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.26
        );

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--level-accent-rgb),
                0.08
            ),
            transparent 35%
        ),
        rgba(255, 255, 255, 0.019);
}

.loyalty-level-card[data-loyalty-level="newcomer"] {
    --level-accent: #83dbc3;
    --level-accent-rgb: 131, 219, 195;
}

.loyalty-level-card[data-loyalty-level="amateur"] {
    --level-accent: #6ecaff;
    --level-accent-rgb: 110, 202, 255;
}

.loyalty-level-card[data-loyalty-level="experienced"] {
    --level-accent: #8aa9ff;
    --level-accent-rgb: 138, 169, 255;
}

.loyalty-level-card[data-loyalty-level="professional"] {
    --level-accent: #bd91ff;
    --level-accent-rgb: 189, 145, 255;
}

.loyalty-level-card[data-loyalty-level="master"] {
    --level-accent: #ffd15f;
    --level-accent-rgb: 255, 209, 95;
}

.loyalty-level-card[data-loyalty-level="legend"] {
    --level-accent: #ff97be;
    --level-accent-rgb: 255, 151, 190;
}

.loyalty-level-card-featured {
    box-shadow:
        0 0 0 1px
        rgba(
            var(--level-accent-rgb),
            0.12
        ),
        0 16px 34px
        rgba(2, 11, 9, 0.24);
}

.loyalty-level-card header {
    padding-bottom: 12px;

    border-bottom:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.19
        );
}

.loyalty-level-name {
    display: block;

    color:
        var(--level-accent);

    font-size: 14px;
    font-weight: 900;

    text-transform: uppercase;
}

.loyalty-level-card header strong {
    display: block;

    margin-top: 5px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1.16;
}

.loyalty-level-requirement {
    margin-top: 12px;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.18
        );

    border-radius: 10px;

    background:
        rgba(
            var(--level-accent-rgb),
            0.045
        );
}

.loyalty-level-requirement span,
.loyalty-level-requirement strong {
    display: block;
}

.loyalty-level-requirement span {
    color: #cbd8d4;

    font-size: 12px;
}

.loyalty-level-requirement strong {
    margin-top: 3px;

    color:
        var(--level-accent);

    font-size: 24px;
    font-weight: 900;
}

.loyalty-level-benefits {
    margin-top: 12px;

    display: grid;

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

    gap: 7px;
}

.loyalty-level-benefits article {
    padding:
        9px
        10px;

    border:
        1px solid
        rgba(
            var(--level-accent-rgb),
            0.15
        );

    border-radius: 9px;

    background:
        rgba(
            var(--level-accent-rgb),
            0.035
        );
}

.loyalty-level-benefits span,
.loyalty-level-benefits strong,
.loyalty-level-benefits small {
    display: block;
}

.loyalty-level-benefits span {
    color: #c5d5d0;

    font-size: 11px;
}

.loyalty-level-benefits strong {
    margin-top: 3px;

    color:
        var(--level-accent);

    font-size: 16px;
    font-weight: 900;
}

.loyalty-level-benefits small {
    margin-top: 3px;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.28;
}

.loyalty-level-card > p {
    margin:
        12px
        0
        0;

    color: #cad9d4;

    font-size: 14px;

    line-height: 1.45;
}

.loyalty-achievement {
    margin-top: 10px;

    padding:
        10px
        12px;

    border-left:
        3px solid
        var(--level-accent);

    background:
        rgba(
            var(--level-accent-rgb),
            0.045
        );
}

.loyalty-achievement span,
.loyalty-achievement strong {
    display: block;
}

.loyalty-achievement span {
    color: #cbd8d4;

    font-size: 12px;
}

.loyalty-achievement strong {
    margin-top: 3px;

    color:
        var(--level-accent);

    font-size: 18px;
    font-weight: 900;
}

/*=============================================
                      Levels End
=============================================*/


/*=============================================
                    Rewards Start
=============================================*/

.loyalty-reward-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 11px;
}

.loyalty-reward-grid article {
    --reward-accent: #6be0bf;
    --reward-accent-rgb: 107, 224, 191;

    padding: 18px;

    display: grid;

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

    gap: 14px;

    border:
        1px solid
        rgba(
            var(--reward-accent-rgb),
            0.21
        );

    border-radius: 14px;

    background:
        rgba(
            var(--reward-accent-rgb),
            0.04
        );
}

.loyalty-reward-grid article[data-loyalty-reward="deposit"],
.loyalty-reward-grid article[data-loyalty-reward="weekly"] {
    --reward-accent: #ffd15f;
    --reward-accent-rgb: 255, 209, 95;
}

.loyalty-reward-grid article[data-loyalty-reward="spins"] {
    --reward-accent: #6ccaff;
    --reward-accent-rgb: 108, 202, 255;
}

.loyalty-reward-grid article[data-loyalty-reward="multiplier"] {
    --reward-accent: #ad8cff;
    --reward-accent-rgb: 173, 140, 255;
}

.loyalty-reward-grid article[data-loyalty-reward="achievement"] {
    --reward-accent: #ff94ba;
    --reward-accent-rgb: 255, 148, 186;
}

.loyalty-reward-icon {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--reward-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--reward-accent-rgb),
            0.12
        );

    color:
        var(--reward-accent);
}

.loyalty-reward-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.loyalty-reward-grid strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.loyalty-reward-grid p {
    margin:
        6px
        0
        0;

    color: #cad8d4;

    font-size: 14px;

    line-height: 1.45;
}

/*=============================================
                     Rewards End
=============================================*/


/*=============================================
                  Points Start
=============================================*/

.loyalty-points-layout {
    margin-top: 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(380px, 0.98fr);

    gap: 27px;

    align-items: center;
}

.loyalty-points-explainer h4,
.loyalty-first-visit h4 {
    margin:
        5px
        0
        0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;

    line-height: 1.12;
}

.loyalty-points-explainer > p {
    margin:
        9px
        0
        0;

    color: #cad9d4;

    font-size: 15px;

    line-height: 1.5;
}

.loyalty-points-example {
    display: grid;

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

    gap: 9px;
}

.loyalty-points-example article {
    padding: 14px;

    border:
        1px solid rgba(108, 202, 255, 0.17);

    border-radius: 11px;

    background:
        rgba(108, 202, 255, 0.04);

    text-align: center;
}

.loyalty-points-example span,
.loyalty-points-example strong,
.loyalty-points-example small {
    display: block;
}

.loyalty-points-example span {
    color: #c7d7d3;

    font-size: 12px;
}

.loyalty-points-example strong {
    margin-top: 4px;

    color: #6ccaff;

    font-size: 22px;
    font-weight: 900;
}

.loyalty-points-example small {
    margin-top: 4px;

    color: #ffffff;

    font-size: 11px;
}

.loyalty-exchange-table {
    margin-top: 19px;

    overflow: hidden;

    border:
        1px solid rgba(108, 202, 255, 0.16);

    border-radius: 12px;
}

.loyalty-exchange-row {
    display: grid;

    grid-template-columns:
        minmax(170px, 0.45fr)
        minmax(150px, 0.4fr)
        minmax(0, 1fr);

    border-bottom:
        1px solid rgba(108, 202, 255, 0.12);
}

.loyalty-exchange-row:last-child {
    border-bottom: 0;
}

.loyalty-exchange-row > * {
    padding:
        12px
        14px;

    border-right:
        1px solid rgba(108, 202, 255, 0.10);
}

.loyalty-exchange-row > *:last-child {
    border-right: 0;
}

.loyalty-exchange-row strong {
    color: #ffffff;

    font-size: 14px;
}

.loyalty-exchange-row span {
    color: #cad9d4;

    font-size: 14px;
}

.loyalty-exchange-head {
    background:
        rgba(108, 202, 255, 0.07);
}

.loyalty-exchange-head span {
    color: #6ccaff;

    font-weight: 900;
}

.loyalty-cash-note,
.loyalty-wagering-note {
    margin-top: 15px;

    padding:
        15px
        17px;

    border-left:
        3px solid #6ccaff;

    background:
        rgba(108, 202, 255, 0.045);
}

.loyalty-cash-note strong,
.loyalty-wagering-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.loyalty-cash-note p,
.loyalty-wagering-note p {
    margin:
        5px
        0
        0;

    color: #cad9d4;

    font-size: 14px;

    line-height: 1.46;
}

/*=============================================
                    Points End
=============================================*/


/*=============================================
                 How It Works Start
=============================================*/

.loyalty-how-flow {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.loyalty-how-flow article {
    padding: 16px;

    border:
        1px solid rgba(173, 140, 255, 0.18);

    border-radius: 12px;

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

.loyalty-how-icon {
    width: 39px;
    height: 39px;

    margin-bottom: 9px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(173, 140, 255, 0.11);

    color: #b394ff;
}

.loyalty-how-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.loyalty-how-flow strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.loyalty-how-flow p {
    margin:
        6px
        0
        0;

    color: #cad9d4;

    font-size: 14px;

    line-height: 1.43;
}

.loyalty-first-visit {
    margin-top: 20px;

    padding-top: 18px;

    display: grid;

    grid-template-columns:
        minmax(280px, 0.42fr)
        minmax(0, 1.58fr);

    gap: 28px;

    border-top:
        1px solid rgba(173, 140, 255, 0.16);
}

.loyalty-first-visit-grid {
    display: grid;

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

    gap: 9px;
}

.loyalty-first-visit-grid article {
    padding: 14px;

    border:
        1px solid rgba(173, 140, 255, 0.15);

    border-radius: 10px;

    background:
        rgba(173, 140, 255, 0.03);
}

.loyalty-first-visit-grid strong {
    color: #b394ff;

    font-size: 15px;
    font-weight: 900;
}

.loyalty-first-visit-grid p {
    margin:
        5px
        0
        0;

    color: #cad9d4;

    font-size: 14px;

    line-height: 1.42;
}

.loyalty-wagering-note {
    border-left-color: #ad8cff;

    background:
        rgba(173, 140, 255, 0.045);
}

/*=============================================
                  How It Works End
=============================================*/


/*=============================================
                    Summary Start
=============================================*/

.loyalty-summary {
    margin-top: 22px;

    padding:
        23px
        25px;

    border:
        1px solid rgba(91, 224, 188, 0.17);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(91, 224, 188, 0.07),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.loyalty-summary-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 9px;
}

.loyalty-summary-grid article {
    padding: 14px;

    border:
        1px solid rgba(91, 224, 188, 0.14);

    border-radius: 11px;

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

.loyalty-summary-grid span,
.loyalty-summary-grid strong {
    display: block;
}

.loyalty-summary-grid span {
    color: #75e3c1;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.loyalty-summary-grid strong {
    margin-top: 4px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.loyalty-summary-grid p {
    margin:
        6px
        0
        0;

    color: #cad9d4;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                     Summary End
=============================================*/


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

.loyalty-closing {
    margin-top: 22px;

    padding:
        25px
        27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.76fr)
        minmax(0, 1.24fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid rgba(91, 224, 188, 0.17);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(91, 224, 188, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 209, 95, 0.05),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.loyalty-closing > div:last-child p {
    margin: 0;

    color: #cad9d4;

    font-size: 15px;

    line-height: 1.5;
}

.loyalty-closing > div:last-child p + p {
    margin-top: 9px;
}

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


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

@media (max-width: 1500px) {

    .loyalty-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }

    .loyalty-site-navigation {
        left: -168px;

        width: 146px;
    }

    .loyalty-site-switcher {
        width: 146px;
    }

    .loyalty-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@media (max-width: 1240px) {

    .loyalty-site-navigation,
    .loyalty-site-navigation.is-floating,
    .loyalty-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }

    .loyalty-site-switcher {
        width: 100%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .loyalty-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .loyalty-site-switcher-button {
        min-width: 160px;

        flex:
            0
            0
            160px;
    }

    .loyalty-intro {
        grid-template-columns: 1fr;
    }

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

    .loyalty-level-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 920px) {

    .loyalty-panel-heading {
        grid-template-columns: 1fr;
    }

    .loyalty-panel-mark {
        max-width: 300px;
    }

    .loyalty-reward-grid {
        grid-template-columns: 1fr;
    }

    .loyalty-points-layout,
    .loyalty-first-visit {
        grid-template-columns: 1fr;
    }

    .loyalty-how-flow,
    .loyalty-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .loyalty-section {
        padding:
            34px
            12px
            58px;
    }

    .loyalty-container {
        width: 100%;
    }

    .loyalty-intro {
        padding:
            25px
            20px;
    }

    .loyalty-intro h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }

    .loyalty-tabs {
        display: flex;

        overflow-x: auto;

        gap: 8px;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .loyalty-tabs::-webkit-scrollbar {
        display: none;
    }

    .loyalty-tab {
        min-width: 205px;

        flex:
            0
            0
            205px;

        scroll-snap-align: start;
    }

    .loyalty-stage {
        padding:
            19px
            14px;
    }

    .loyalty-snapshot,
    .loyalty-level-benefits,
    .loyalty-how-flow,
    .loyalty-first-visit-grid,
    .loyalty-summary-grid,
    .loyalty-points-example {
        grid-template-columns: 1fr;
    }

    .loyalty-exchange-table {
        overflow-x: auto;
    }

    .loyalty-exchange-row {
        min-width: 650px;
    }

    .loyalty-closing {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}

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

/*=============================================
                    Loyalty End
=============================================*/


/*=============================================
                Tournaments Start
=============================================*/

.tournaments-section {
    position: relative;

    padding:
        58px
        22px
        82px;

    overflow: visible;

    isolation: isolate;

    color: #f8f9ff;

    background:
        radial-gradient(
            ellipse at 7% 3%,
            rgba(90, 93, 255, 0.23) 0%,
            rgba(90, 93, 255, 0.055) 27%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 86% 4%,
            rgba(53, 195, 255, 0.18) 0%,
            rgba(53, 195, 255, 0.045) 27%,
            transparent 49%
        ),
        radial-gradient(
            ellipse at 92% 60%,
            rgba(255, 198, 72, 0.11) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0e142c 0%,
            #161b3a 35%,
            #101a37 65%,
            #0b1428 100%
        );

    border-top:
        1px solid rgba(128, 137, 255, 0.22);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #706dff 17%,
            #4ac9ff 36%,
            #ffd25e 55%,
            #ad81ff 72%,
            #59dfd0 85%,
            transparent
        );

    box-shadow:
        0 0 28px
        rgba(92, 112, 255, 0.43);
}

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

.tournaments-container {
    position: relative;

    z-index: 2;

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

    margin:
        0 auto;
}

.tournaments-main {
    min-width: 0;
}


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

.tournaments-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.tournaments-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(131, 142, 255, 0.25);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 29, 67, 0.95),
            rgba(13, 19, 46, 0.97)
        );

    box-shadow:
        0 24px 58px
        rgba(3, 7, 24, 0.46),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    pointer-events: auto;
}

.tournaments-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform:
        translateY(-50%);
}

.tournaments-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.tournaments-site-switcher-button {
    --section-accent: #7b83ff;
    --section-accent-rgb: 123, 131, 255;
    --section-ink: #10152d;

    width: 100%;

    min-height: 67px;

    padding:
        9px
        10px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.45
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.16
            ),
            rgba(
                var(--section-accent-rgb),
                0.045
            )
        );

    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="games"] {
    --section-accent: #61d9f0;
    --section-accent-rgb: 97, 217, 240;
    --section-ink: #08232b;
}

.tournaments-site-switcher-button[data-section-target="sports"] {
    --section-accent: #64b9ff;
    --section-accent-rgb: 100, 185, 255;
    --section-ink: #081c31;
}

.tournaments-site-switcher-button[data-section-target="promotions"] {
    --section-accent: #ff7cac;
    --section-accent-rgb: 255, 124, 172;
    --section-ink: #32101f;
}

.tournaments-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd260;
    --section-accent-rgb: 255, 210, 96;
    --section-ink: #302306;
}

.tournaments-site-switcher-button[data-section-target="loyalty"] {
    --section-accent: #62ddc6;
    --section-accent-rgb: 98, 221, 198;
    --section-ink: #082820;
}

.tournaments-site-switcher-button[data-section-target="vip"] {
    --section-accent: #b98bff;
    --section-accent-rgb: 185, 139, 255;
    --section-ink: #211136;
}

.tournaments-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.76
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);
}

.tournaments-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.tournaments-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(230, 232, 250, 0.72);

    font-size: 11px;
    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);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.30
            ),
            rgba(
                var(--section-accent-rgb),
                0.08
            )
        );

    box-shadow:
        0 12px 26px
        rgba(3, 7, 24, 0.31),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.20
        );

    outline: none;
}

.tournaments-site-switcher-button.is-active {
    transform:
        translateX(8px);

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

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.84
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(3, 7, 24, 0.36),
        0 0 32px
        rgba(
            var(--section-accent-rgb),
            0.34
        );
}

.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-icon {
    border-color:
        rgba(0, 0, 0, 0.15);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--section-ink);
}

.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-copy small {
    color:
        rgba(20, 18, 10, 0.68);
}

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


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

.tournaments-intro {
    position: relative;

    margin-bottom: 20px;

    padding:
        35px
        37px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, 0.62fr);

    gap: 41px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(130, 133, 255, 0.32);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(108, 101, 255, 0.17),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(65, 190, 255, 0.12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(25, 31, 70, 0.98),
            rgba(14, 20, 48, 0.98)
        );

    box-shadow:
        0 24px 55px
        rgba(3, 7, 24, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}

.tournaments-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius:
        0
        6px
        6px
        0;

    background:
        linear-gradient(
            180deg,
            #766dff,
            #55c8ff,
            #ffd162
        );

    box-shadow:
        0 0 20px
        rgba(101, 119, 255, 0.46);
}

.tournaments-eyebrow,
.tournaments-panel-kicker,
.tournaments-feature-label {
    margin: 0 0 8px;

    color: #96b3ff;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.28;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.tournaments-intro h2 {
    max-width: 790px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.8vw,
            57px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.tournaments-intro-copy > p {
    margin:
        13px
        0
        0;

    color: #cfd3e6;

    font-size: 17px;

    line-height: 1.56;
}

.tournaments-intro-copy
.tournaments-intro-lead {
    color: #ffffff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}


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

.tournaments-intro-more {
    margin-top: 15px;
}

.tournaments-intro-more summary {
    width: fit-content;

    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    list-style: none;

    border:
        1px solid rgba(112, 168, 255, 0.42);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(103, 168, 255, 0.12),
            rgba(255, 208, 91, 0.07)
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.tournaments-intro-more summary::-webkit-details-marker {
    display: none;
}

.tournaments-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #6a8fff,
            #b079ff
        );

    font-size: 18px;
    font-weight: 900;
}

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

.tournaments-intro-more > div {
    margin-top: 10px;

    padding:
        14px
        16px;

    max-height: 260px;

    overflow-y: auto;

    border:
        1px solid rgba(122, 139, 255, 0.16);

    border-radius: 11px;

    background:
        rgba(5, 10, 29, 0.34);
}

.tournaments-intro-more > div p {
    margin: 0;

    color: #cbd0e3;

    font-size: 14px;

    line-height: 1.55;
}

.tournaments-intro-more > div p + p {
    margin-top: 9px;
}

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


.tournaments-intro-media {
    position: relative;

    min-height: 320px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 204, 84, 0.50);

    border-radius: 21px;

    background: #10152e;

    box-shadow:
        0 22px 50px
        rgba(3, 7, 24, 0.38);
}

.tournaments-intro-media img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    object-position: center;
}

.tournaments-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 10, 28, 0.04) 28%,
            rgba(7, 10, 28, 0.91) 100%
        );
}

.tournaments-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    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: #aab9ff;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.tournaments-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 29px;
    font-weight: 900;
}

.tournaments-intro-media figcaption small {
    margin-top: 7px;

    color: #d7daeb;

    font-size: 14px;

    line-height: 1.4;
}

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


/*=============================================
                Snapshot Start
=============================================*/

.tournaments-snapshot {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.tournaments-snapshot article {
    --snap-accent: #7f8cff;
    --snap-accent-rgb: 127, 140, 255;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--snap-accent-rgb),
            0.30
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--snap-accent-rgb),
                0.10
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.tournaments-snapshot article[data-snapshot-theme="swintt"] {
    --snap-accent: #6ab7ff;
    --snap-accent-rgb: 106, 183, 255;
}

.tournaments-snapshot article[data-snapshot-theme="weekend"] {
    --snap-accent: #b28bff;
    --snap-accent-rgb: 178, 139, 255;
}

.tournaments-snapshot article[data-snapshot-theme="pateplay"] {
    --snap-accent: #ffd05b;
    --snap-accent-rgb: 255, 208, 91;
}

.tournaments-snapshot article[data-snapshot-theme="spin"] {
    --snap-accent: #59dfd1;
    --snap-accent-rgb: 89, 223, 209;
}

.tournaments-snapshot article[data-snapshot-theme="endorphina"] {
    --snap-accent: #ff9d66;
    --snap-accent-rgb: 255, 157, 102;
}

.tournaments-snapshot article[data-snapshot-theme="amigo"] {
    --snap-accent: #ff75b8;
    --snap-accent-rgb: 255, 117, 184;
}

.tournaments-snapshot span,
.tournaments-snapshot strong,
.tournaments-snapshot small {
    display: block;
}

.tournaments-snapshot span {
    color:
        var(--snap-accent);

    font-size: 13px;
    font-weight: 900;
}

.tournaments-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;
}

.tournaments-snapshot small {
    margin-top: 5px;

    color: #c8cce0;

    font-size: 13px;
}

/*=============================================
                 Snapshot End
=============================================*/


/*=============================================
                   Tabs Start
=============================================*/

.tournaments-tabs {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.tournaments-tab {
    --tab-accent: #8190ff;
    --tab-accent-rgb: 129, 144, 255;
    --tab-ink: #11182f;

    min-height: 76px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.42
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.14
            ),
            rgba(255, 255, 255, 0.025)
        );

    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-tab[data-tournaments-target="overview"] {
    --tab-accent: #69d4f0;
    --tab-accent-rgb: 105, 212, 240;
    --tab-ink: #08262d;
}

.tournaments-tab[data-tournaments-target="swintt"] {
    --tab-accent: #6ea8ff;
    --tab-accent-rgb: 110, 168, 255;
    --tab-ink: #091d32;
}

.tournaments-tab[data-tournaments-target="weekend"] {
    --tab-accent: #b389ff;
    --tab-accent-rgb: 179, 137, 255;
    --tab-ink: #221137;
}

.tournaments-tab[data-tournaments-target="pateplay"] {
    --tab-accent: #ffd05d;
    --tab-accent-rgb: 255, 208, 93;
    --tab-ink: #302306;
}

.tournaments-tab[data-tournaments-target="spin-blitz"] {
    --tab-accent: #5cdec9;
    --tab-accent-rgb: 92, 222, 201;
    --tab-ink: #082920;
}

.tournaments-tab[data-tournaments-target="endorphina"] {
    --tab-accent: #ff9b62;
    --tab-accent-rgb: 255, 155, 98;
    --tab-ink: #321708;
}

.tournaments-tab[data-tournaments-target="amigo"] {
    --tab-accent: #ff79bc;
    --tab-accent-rgb: 255, 121, 188;
    --tab-ink: #321024;
}

.tournaments-tab-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        40px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.14
        );

    color:
        var(--tab-accent);
}

.tournaments-tab-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-tab strong {
    display: block;

    color: inherit;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.1;
}

.tournaments-tab small {
    display: block;

    margin-top: 4px;

    color:
        rgba(225, 228, 245, 0.72);

    font-size: 12px;
    font-weight: 700;
}

.tournaments-tab:hover,
.tournaments-tab:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--tab-accent);

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.27
            ),
            rgba(
                var(--tab-accent-rgb),
                0.07
            )
        );

    box-shadow:
        0 14px 28px
        rgba(3, 7, 24, 0.30),
        0 0 23px
        rgba(
            var(--tab-accent-rgb),
            0.18
        );

    outline: none;
}

.tournaments-tab.is-active {
    transform:
        translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.83
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 15px 30px
        rgba(3, 7, 24, 0.34),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.28
        );
}

.tournaments-tab.is-active
.tournaments-tab-icon {
    border-color:
        rgba(0, 0, 0, 0.14);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--tab-ink);
}

.tournaments-tab.is-active small {
    color:
        rgba(20, 20, 25, 0.66);
}

/*=============================================
                    Tabs End
=============================================*/


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

.tournaments-stage {
    padding: 27px;

    border:
        1px solid rgba(127, 136, 255, 0.22);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(105, 113, 255, 0.09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20, 26, 60, 0.98),
            rgba(11, 17, 43, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(3, 7, 24, 0.34),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}

.tournaments-panel[hidden] {
    display: none !important;
}

.tournaments-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 34px;

    align-items: center;

    border-bottom:
        1px solid rgba(141, 149, 255, 0.23);
}

.tournaments-panel-heading-wide {
    grid-template-columns:
        minmax(0, 1fr)
        205px;
}

.tournaments-panel h3,
.tournaments-guide h3,
.tournaments-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.7vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.tournaments-panel-heading p {
    margin:
        11px
        0
        0;

    color: #cbd0e3;

    font-size: 16px;

    line-height: 1.54;
}

.tournaments-panel-mark {
    padding:
        16px
        14px;

    border:
        1px solid rgba(255, 208, 93, 0.48);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 208, 93, 0.15),
            rgba(128, 112, 255, 0.07)
        );

    text-align: center;
}

.tournaments-panel-mark span,
.tournaments-panel-mark strong,
.tournaments-panel-mark small {
    display: block;
}

.tournaments-panel-mark span {
    color: #d5d8e7;

    font-size: 13px;
}

.tournaments-panel-mark strong {
    margin-top: 5px;

    color: #ffd15e;

    font-size: 30px;
    font-weight: 900;

    line-height: 1.05;
}

.tournaments-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;
}


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

.tournaments-format-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.tournaments-format-grid article {
    --format-accent: #78a4ff;
    --format-accent-rgb: 120, 164, 255;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--format-accent-rgb),
            0.24
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--format-accent-rgb),
                0.08
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.tournaments-format-grid article[data-tournament-format="battle"] {
    --format-accent: #b58dff;
    --format-accent-rgb: 181, 141, 255;
}

.tournaments-format-grid article[data-tournament-format="blitz"] {
    --format-accent: #5bded0;
    --format-accent-rgb: 91, 222, 208;
}

.tournaments-format-grid article[data-tournament-format="leaderboard"] {
    --format-accent: #ffd05d;
    --format-accent-rgb: 255, 208, 93;
}

.tournaments-format-icon {
    width: 39px;
    height: 39px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--format-accent);

    border-radius: 11px;

    background:
        rgba(
            var(--format-accent-rgb),
            0.12
        );

    color:
        var(--format-accent);
}

.tournaments-format-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-format-grid strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.tournaments-format-grid p {
    margin:
        7px
        0
        0;

    color: #c6cbe0;

    font-size: 14px;

    line-height: 1.45;
}

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


/*=============================================
               Prize Showcase Start
=============================================*/

.tournaments-prize-showcase {
    margin-top: 15px;

    display: grid;

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

    gap: 9px;
}

.tournaments-prize-showcase article {
    padding:
        13px
        14px;

    border:
        1px solid rgba(255, 209, 94, 0.18);

    border-radius: 11px;

    background:
        rgba(255, 209, 94, 0.04);
}

.tournaments-prize-showcase span,
.tournaments-prize-showcase strong,
.tournaments-prize-showcase small {
    display: block;
}

.tournaments-prize-showcase span {
    color: #aeb5d7;

    font-size: 13px;
}

.tournaments-prize-showcase strong {
    margin-top: 4px;

    color: #ffd15e;

    font-size: 20px;
    font-weight: 900;
}

.tournaments-prize-showcase small {
    margin-top: 4px;

    color: #d2d5e3;

    font-size: 12px;
}

/*=============================================
                Prize Showcase End
=============================================*/


/*=============================================
               How It Works Start
=============================================*/

.tournaments-how-it-works {
    margin-top: 21px;

    padding-top: 19px;

    display: grid;

    grid-template-columns:
        minmax(270px, 0.40fr)
        minmax(0, 1.60fr);

    gap: 29px;

    border-top:
        1px solid rgba(129, 139, 255, 0.20);
}

.tournaments-how-it-works h4,
.tournaments-primary-copy h4 {
    margin:
        6px
        0
        0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;

    line-height: 1.12;
}

.tournaments-how-flow {
    display: grid;

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

    gap: 9px;
}

.tournaments-how-flow article {
    padding: 14px;

    border:
        1px solid rgba(129, 139, 255, 0.17);

    border-radius: 11px;

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

.tournaments-how-flow strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-how-flow p {
    margin:
        6px
        0
        0;

    color: #c7cce0;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                How It Works End
=============================================*/


/*=============================================
               Primary Layout Start
=============================================*/

.tournaments-primary-layout {
    margin-top: 21px;

    display: grid;

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

    gap: 27px;

    align-items: center;
}

.tournaments-primary-copy p {
    margin:
        9px
        0
        0;

    color: #ccd0e3;

    font-size: 16px;

    line-height: 1.5;
}

.tournaments-stat-board {
    display: grid;

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

    gap: 9px;
}

.tournaments-stat-board article {
    padding:
        14px
        12px;

    border:
        1px solid rgba(255, 208, 93, 0.18);

    border-radius: 11px;

    background:
        rgba(255, 208, 93, 0.045);

    text-align: center;
}

.tournaments-stat-board span,
.tournaments-stat-board strong {
    display: block;
}

.tournaments-stat-board span {
    color: #aeb4cc;

    font-size: 13px;
}

.tournaments-stat-board strong {
    margin-top: 5px;

    color: #ffd15d;

    font-size: 20px;
    font-weight: 900;
}

/*=============================================
                Primary Layout End
=============================================*/


/*=============================================
                 Rule Cards Start
=============================================*/

.tournaments-rule-cards {
    margin-top: 16px;

    display: grid;

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

    gap: 9px;
}

.tournaments-rule-cards article {
    padding: 15px;

    border:
        1px solid rgba(104, 180, 255, 0.18);

    border-radius: 11px;

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

.tournaments-rule-cards strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-rule-cards p {
    margin:
        6px
        0
        0;

    color: #c7ccdf;

    font-size: 14px;

    line-height: 1.43;
}

/*=============================================
                  Rule Cards End
=============================================*/


/*=============================================
                 Notes Start
=============================================*/

.tournaments-story-note,
.tournaments-payout-note {
    margin-top: 16px;

    padding:
        15px
        17px;

    display: grid;

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

    gap: 20px;

    align-items: center;

    border-left:
        3px solid #ffd15e;

    background:
        rgba(255, 208, 94, 0.05);
}

.tournaments-story-note strong,
.tournaments-payout-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.tournaments-story-note p,
.tournaments-payout-note p {
    margin:
        5px
        0
        0;

    color: #cbd0e2;

    font-size: 14px;

    line-height: 1.45;
}

.tournaments-payout-note {
    grid-template-columns:
        43px
        minmax(0, 1fr);

    border-left-color: #5edfc9;

    background:
        rgba(94, 223, 201, 0.05);
}

.tournaments-payout-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(94, 223, 201, 0.13);

    color: #64e6d1;
}

.tournaments-payout-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/*=============================================
                  Notes End
=============================================*/


/*=============================================
                  Guide Start
=============================================*/

.tournaments-guide {
    margin-top: 22px;

    padding:
        23px
        25px;

    border:
        1px solid rgba(124, 135, 255, 0.19);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(113, 104, 255, 0.08),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.tournaments-guide-heading {
    max-width: 800px;
}

.tournaments-guide-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 9px;
}

.tournaments-guide-grid article {
    padding: 15px;

    border:
        1px solid rgba(130, 140, 255, 0.15);

    border-radius: 12px;

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

.tournaments-guide-grid strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-guide-grid p {
    margin:
        6px
        0
        0;

    color: #c8cde0;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                   Guide End
=============================================*/


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

.tournaments-closing {
    margin-top: 22px;

    padding:
        25px
        27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: 39px;

    align-items: center;

    border:
        1px solid rgba(125, 137, 255, 0.18);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(110, 104, 255, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 207, 88, 0.05),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.tournaments-closing > div:last-child p {
    margin: 0;

    color: #cbd0e2;

    font-size: 15px;

    line-height: 1.52;
}

.tournaments-closing > div:last-child p + p {
    margin-top: 9px;
}

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


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

@media (max-width: 1500px) {

    .tournaments-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }

    .tournaments-site-navigation {
        left: -168px;

        width: 146px;
    }

    .tournaments-site-switcher {
        width: 146px;
    }

    .tournaments-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@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%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .tournaments-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .tournaments-site-switcher-button {
        min-width: 160px;

        flex:
            0
            0
            160px;
    }

    .tournaments-intro {
        grid-template-columns: 1fr;
    }

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

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

    .tournaments-format-grid,
    .tournaments-rule-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .tournaments-how-it-works,
    .tournaments-primary-layout {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 920px) {

    .tournaments-panel-heading,
    .tournaments-panel-heading-wide {
        grid-template-columns: 1fr;
    }

    .tournaments-panel-mark {
        max-width: 300px;
    }

    .tournaments-how-flow {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .tournaments-prize-showcase {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .tournaments-section {
        padding:
            34px
            12px
            58px;
    }

    .tournaments-container {
        width: 100%;
    }

    .tournaments-intro {
        padding:
            25px
            20px;
    }

    .tournaments-intro h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }

    .tournaments-tabs {
        display: flex;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .tournaments-tabs::-webkit-scrollbar {
        display: none;
    }

    .tournaments-tab {
        min-width: 200px;

        flex:
            0
            0
            200px;

        scroll-snap-align: start;
    }

    .tournaments-stage {
        padding:
            19px
            14px;
    }

    .tournaments-snapshot,
    .tournaments-format-grid,
    .tournaments-prize-showcase,
    .tournaments-how-flow,
    .tournaments-rule-cards,
    .tournaments-guide-grid,
    .tournaments-stat-board {
        grid-template-columns: 1fr;
    }

    .tournaments-story-note,
    .tournaments-payout-note,
    .tournaments-closing {
        grid-template-columns: 1fr;
    }

}

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

/*=============================================
                 Tournaments End
=============================================*/
/*=============================================
                Tournaments Start
=============================================*/

.tournaments-section {
    position: relative;

    padding:
        58px
        22px
        82px;

    overflow: visible;

    isolation: isolate;

    color: #f8f9ff;

    background:
        radial-gradient(
            ellipse at 7% 3%,
            rgba(90, 93, 255, 0.23) 0%,
            rgba(90, 93, 255, 0.055) 27%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 86% 4%,
            rgba(53, 195, 255, 0.18) 0%,
            rgba(53, 195, 255, 0.045) 27%,
            transparent 49%
        ),
        radial-gradient(
            ellipse at 92% 60%,
            rgba(255, 198, 72, 0.11) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0e142c 0%,
            #161b3a 35%,
            #101a37 65%,
            #0b1428 100%
        );

    border-top:
        1px solid rgba(128, 137, 255, 0.22);
}

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

    position: absolute;

    top: 0;
    left: 50%;

    width:
        min(
            94%,
            1540px
        );

    height: 3px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #706dff 17%,
            #4ac9ff 36%,
            #ffd25e 55%,
            #ad81ff 72%,
            #59dfd0 85%,
            transparent
        );

    box-shadow:
        0 0 28px
        rgba(92, 112, 255, 0.43);
}

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

.tournaments-container {
    position: relative;

    z-index: 2;

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

    margin:
        0 auto;
}

.tournaments-main {
    min-width: 0;
}


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

.tournaments-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.tournaments-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(131, 142, 255, 0.25);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 29, 67, 0.95),
            rgba(13, 19, 46, 0.97)
        );

    box-shadow:
        0 24px 58px
        rgba(3, 7, 24, 0.46),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);

    pointer-events: auto;
}

.tournaments-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform:
        translateY(-50%);
}

.tournaments-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.tournaments-site-switcher-button {
    --section-accent: #7b83ff;
    --section-accent-rgb: 123, 131, 255;
    --section-ink: #10152d;

    width: 100%;

    min-height: 67px;

    padding:
        9px
        10px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.45
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.16
            ),
            rgba(
                var(--section-accent-rgb),
                0.045
            )
        );

    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="games"] {
    --section-accent: #61d9f0;
    --section-accent-rgb: 97, 217, 240;
    --section-ink: #08232b;
}

.tournaments-site-switcher-button[data-section-target="sports"] {
    --section-accent: #64b9ff;
    --section-accent-rgb: 100, 185, 255;
    --section-ink: #081c31;
}

.tournaments-site-switcher-button[data-section-target="promotions"] {
    --section-accent: #ff7cac;
    --section-accent-rgb: 255, 124, 172;
    --section-ink: #32101f;
}

.tournaments-site-switcher-button[data-section-target="tournaments"] {
    --section-accent: #ffd260;
    --section-accent-rgb: 255, 210, 96;
    --section-ink: #302306;
}

.tournaments-site-switcher-button[data-section-target="loyalty"] {
    --section-accent: #62ddc6;
    --section-accent-rgb: 98, 221, 198;
    --section-ink: #082820;
}

.tournaments-site-switcher-button[data-section-target="vip"] {
    --section-accent: #b98bff;
    --section-accent-rgb: 185, 139, 255;
    --section-ink: #211136;
}

.tournaments-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.76
        );

    border-radius: 12px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.13
        );

    color:
        var(--section-accent);
}

.tournaments-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.tournaments-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(230, 232, 250, 0.72);

    font-size: 11px;
    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);

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.30
            ),
            rgba(
                var(--section-accent-rgb),
                0.08
            )
        );

    box-shadow:
        0 12px 26px
        rgba(3, 7, 24, 0.31),
        0 0 25px
        rgba(
            var(--section-accent-rgb),
            0.20
        );

    outline: none;
}

.tournaments-site-switcher-button.is-active {
    transform:
        translateX(8px);

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

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.84
            )
        );

    color:
        var(--section-ink);

    box-shadow:
        0 15px 31px
        rgba(3, 7, 24, 0.36),
        0 0 32px
        rgba(
            var(--section-accent-rgb),
            0.34
        );
}

.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-icon {
    border-color:
        rgba(0, 0, 0, 0.15);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--section-ink);
}

.tournaments-site-switcher-button.is-active
.tournaments-site-switcher-copy small {
    color:
        rgba(20, 18, 10, 0.68);
}

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


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

.tournaments-intro {
    position: relative;

    margin-bottom: 20px;

    padding:
        35px
        37px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(360px, 0.62fr);

    gap: 41px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(130, 133, 255, 0.32);

    border-radius: 25px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(108, 101, 255, 0.17),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(65, 190, 255, 0.12),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(25, 31, 70, 0.98),
            rgba(14, 20, 48, 0.98)
        );

    box-shadow:
        0 24px 55px
        rgba(3, 7, 24, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.07);
}

.tournaments-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 4px;

    border-radius:
        0
        6px
        6px
        0;

    background:
        linear-gradient(
            180deg,
            #766dff,
            #55c8ff,
            #ffd162
        );

    box-shadow:
        0 0 20px
        rgba(101, 119, 255, 0.46);
}

.tournaments-eyebrow,
.tournaments-panel-kicker,
.tournaments-feature-label {
    margin: 0 0 8px;

    color: #96b3ff;

    font-size: 13px;
    font-weight: 900;

    line-height: 1.28;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.tournaments-intro h2 {
    max-width: 790px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.8vw,
            57px
        );

    font-weight: 900;

    line-height: 0.98;

    letter-spacing: -0.045em;
}

.tournaments-intro-copy > p {
    margin:
        13px
        0
        0;

    color: #cfd3e6;

    font-size: 17px;

    line-height: 1.56;
}

.tournaments-intro-copy
.tournaments-intro-lead {
    color: #ffffff;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}


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

.tournaments-intro-more {
    margin-top: 15px;
}

.tournaments-intro-more summary {
    width: fit-content;

    min-height: 42px;

    padding:
        0
        15px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    list-style: none;

    border:
        1px solid rgba(112, 168, 255, 0.42);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(103, 168, 255, 0.12),
            rgba(255, 208, 91, 0.07)
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    cursor: pointer;
}

.tournaments-intro-more summary::-webkit-details-marker {
    display: none;
}

.tournaments-intro-more summary::after {
    content: "+";

    width: 27px;
    height: 27px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #6a8fff,
            #b079ff
        );

    font-size: 18px;
    font-weight: 900;
}

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

.tournaments-intro-more > div {
    margin-top: 10px;

    padding:
        14px
        16px;

    max-height: 260px;

    overflow-y: auto;

    border:
        1px solid rgba(122, 139, 255, 0.16);

    border-radius: 11px;

    background:
        rgba(5, 10, 29, 0.34);
}

.tournaments-intro-more > div p {
    margin: 0;

    color: #cbd0e3;

    font-size: 14px;

    line-height: 1.55;
}

.tournaments-intro-more > div p + p {
    margin-top: 9px;
}

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


.tournaments-intro-media {
    position: relative;

    min-height: 320px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 204, 84, 0.50);

    border-radius: 21px;

    background: #10152e;

    box-shadow:
        0 22px 50px
        rgba(3, 7, 24, 0.38);
}

.tournaments-intro-media img {
    width: 100%;
    height: 320px;

    object-fit: cover;

    object-position: center;
}

.tournaments-intro-media::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7, 10, 28, 0.04) 28%,
            rgba(7, 10, 28, 0.91) 100%
        );
}

.tournaments-intro-media figcaption {
    position: absolute;

    z-index: 2;

    left: 22px;
    right: 22px;
    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: #aab9ff;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
}

.tournaments-intro-media figcaption strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 29px;
    font-weight: 900;
}

.tournaments-intro-media figcaption small {
    margin-top: 7px;

    color: #d7daeb;

    font-size: 14px;

    line-height: 1.4;
}

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


/*=============================================
                Snapshot Start
=============================================*/

.tournaments-snapshot {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.tournaments-snapshot article {
    --snap-accent: #7f8cff;
    --snap-accent-rgb: 127, 140, 255;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--snap-accent-rgb),
            0.30
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--snap-accent-rgb),
                0.10
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.tournaments-snapshot article[data-snapshot-theme="swintt"] {
    --snap-accent: #6ab7ff;
    --snap-accent-rgb: 106, 183, 255;
}

.tournaments-snapshot article[data-snapshot-theme="weekend"] {
    --snap-accent: #b28bff;
    --snap-accent-rgb: 178, 139, 255;
}

.tournaments-snapshot article[data-snapshot-theme="pateplay"] {
    --snap-accent: #ffd05b;
    --snap-accent-rgb: 255, 208, 91;
}

.tournaments-snapshot article[data-snapshot-theme="spin"] {
    --snap-accent: #59dfd1;
    --snap-accent-rgb: 89, 223, 209;
}

.tournaments-snapshot article[data-snapshot-theme="endorphina"] {
    --snap-accent: #ff9d66;
    --snap-accent-rgb: 255, 157, 102;
}

.tournaments-snapshot article[data-snapshot-theme="amigo"] {
    --snap-accent: #ff75b8;
    --snap-accent-rgb: 255, 117, 184;
}

.tournaments-snapshot span,
.tournaments-snapshot strong,
.tournaments-snapshot small {
    display: block;
}

.tournaments-snapshot span {
    color:
        var(--snap-accent);

    font-size: 13px;
    font-weight: 900;
}

.tournaments-snapshot strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;
}

.tournaments-snapshot small {
    margin-top: 5px;

    color: #c8cce0;

    font-size: 13px;
}

/*=============================================
                 Snapshot End
=============================================*/


/*=============================================
                   Tabs Start
=============================================*/

.tournaments-tabs {
    margin-bottom: 17px;

    display: grid;

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

    gap: 10px;
}

.tournaments-tab {
    --tab-accent: #8190ff;
    --tab-accent-rgb: 129, 144, 255;
    --tab-ink: #11182f;

    min-height: 76px;

    padding:
        10px
        12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.42
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.14
            ),
            rgba(255, 255, 255, 0.025)
        );

    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-tab[data-tournaments-target="overview"] {
    --tab-accent: #69d4f0;
    --tab-accent-rgb: 105, 212, 240;
    --tab-ink: #08262d;
}

.tournaments-tab[data-tournaments-target="swintt"] {
    --tab-accent: #6ea8ff;
    --tab-accent-rgb: 110, 168, 255;
    --tab-ink: #091d32;
}

.tournaments-tab[data-tournaments-target="weekend"] {
    --tab-accent: #b389ff;
    --tab-accent-rgb: 179, 137, 255;
    --tab-ink: #221137;
}

.tournaments-tab[data-tournaments-target="pateplay"] {
    --tab-accent: #ffd05d;
    --tab-accent-rgb: 255, 208, 93;
    --tab-ink: #302306;
}

.tournaments-tab[data-tournaments-target="spin-blitz"] {
    --tab-accent: #5cdec9;
    --tab-accent-rgb: 92, 222, 201;
    --tab-ink: #082920;
}

.tournaments-tab[data-tournaments-target="endorphina"] {
    --tab-accent: #ff9b62;
    --tab-accent-rgb: 255, 155, 98;
    --tab-ink: #321708;
}

.tournaments-tab[data-tournaments-target="amigo"] {
    --tab-accent: #ff79bc;
    --tab-accent-rgb: 255, 121, 188;
    --tab-ink: #321024;
}

.tournaments-tab-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        40px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.14
        );

    color:
        var(--tab-accent);
}

.tournaments-tab-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-tab strong {
    display: block;

    color: inherit;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.1;
}

.tournaments-tab small {
    display: block;

    margin-top: 4px;

    color:
        rgba(225, 228, 245, 0.72);

    font-size: 12px;
    font-weight: 700;
}

.tournaments-tab:hover,
.tournaments-tab:focus-visible {
    transform:
        translateY(-4px);

    border-color:
        var(--tab-accent);

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.27
            ),
            rgba(
                var(--tab-accent-rgb),
                0.07
            )
        );

    box-shadow:
        0 14px 28px
        rgba(3, 7, 24, 0.30),
        0 0 23px
        rgba(
            var(--tab-accent-rgb),
            0.18
        );

    outline: none;
}

.tournaments-tab.is-active {
    transform:
        translateY(-4px);

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

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.83
            )
        );

    color:
        var(--tab-ink);

    box-shadow:
        0 15px 30px
        rgba(3, 7, 24, 0.34),
        0 0 28px
        rgba(
            var(--tab-accent-rgb),
            0.28
        );
}

.tournaments-tab.is-active
.tournaments-tab-icon {
    border-color:
        rgba(0, 0, 0, 0.14);

    background:
        rgba(0, 0, 0, 0.10);

    color:
        var(--tab-ink);
}

.tournaments-tab.is-active small {
    color:
        rgba(20, 20, 25, 0.66);
}

/*=============================================
                    Tabs End
=============================================*/


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

.tournaments-stage {
    padding: 27px;

    border:
        1px solid rgba(127, 136, 255, 0.22);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(105, 113, 255, 0.09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(20, 26, 60, 0.98),
            rgba(11, 17, 43, 0.99)
        );

    box-shadow:
        0 24px 55px
        rgba(3, 7, 24, 0.34),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}

.tournaments-panel[hidden] {
    display: none !important;
}

.tournaments-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 34px;

    align-items: center;

    border-bottom:
        1px solid rgba(141, 149, 255, 0.23);
}

.tournaments-panel-heading-wide {
    grid-template-columns:
        minmax(0, 1fr)
        205px;
}

.tournaments-panel h3,
.tournaments-guide h3,
.tournaments-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.7vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.tournaments-panel-heading p {
    margin:
        11px
        0
        0;

    color: #cbd0e3;

    font-size: 16px;

    line-height: 1.54;
}

.tournaments-panel-mark {
    padding:
        16px
        14px;

    border:
        1px solid rgba(255, 208, 93, 0.48);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 208, 93, 0.15),
            rgba(128, 112, 255, 0.07)
        );

    text-align: center;
}

.tournaments-panel-mark span,
.tournaments-panel-mark strong,
.tournaments-panel-mark small {
    display: block;
}

.tournaments-panel-mark span {
    color: #d5d8e7;

    font-size: 13px;
}

.tournaments-panel-mark strong {
    margin-top: 5px;

    color: #ffd15e;

    font-size: 30px;
    font-weight: 900;

    line-height: 1.05;
}

.tournaments-panel-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1.3;
}


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

.tournaments-format-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 10px;
}

.tournaments-format-grid article {
    --format-accent: #78a4ff;
    --format-accent-rgb: 120, 164, 255;

    padding: 16px;

    border:
        1px solid
        rgba(
            var(--format-accent-rgb),
            0.24
        );

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--format-accent-rgb),
                0.08
            ),
            rgba(255, 255, 255, 0.02)
        );
}

.tournaments-format-grid article[data-tournament-format="battle"] {
    --format-accent: #b58dff;
    --format-accent-rgb: 181, 141, 255;
}

.tournaments-format-grid article[data-tournament-format="blitz"] {
    --format-accent: #5bded0;
    --format-accent-rgb: 91, 222, 208;
}

.tournaments-format-grid article[data-tournament-format="leaderboard"] {
    --format-accent: #ffd05d;
    --format-accent-rgb: 255, 208, 93;
}

.tournaments-format-icon {
    width: 39px;
    height: 39px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    border:
        1px solid
        var(--format-accent);

    border-radius: 11px;

    background:
        rgba(
            var(--format-accent-rgb),
            0.12
        );

    color:
        var(--format-accent);
}

.tournaments-format-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.tournaments-format-grid strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.tournaments-format-grid p {
    margin:
        7px
        0
        0;

    color: #c6cbe0;

    font-size: 14px;

    line-height: 1.45;
}

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


/*=============================================
               Prize Showcase Start
=============================================*/

.tournaments-prize-showcase {
    margin-top: 15px;

    display: grid;

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

    gap: 9px;
}

.tournaments-prize-showcase article {
    padding:
        13px
        14px;

    border:
        1px solid rgba(255, 209, 94, 0.18);

    border-radius: 11px;

    background:
        rgba(255, 209, 94, 0.04);
}

.tournaments-prize-showcase span,
.tournaments-prize-showcase strong,
.tournaments-prize-showcase small {
    display: block;
}

.tournaments-prize-showcase span {
    color: #aeb5d7;

    font-size: 13px;
}

.tournaments-prize-showcase strong {
    margin-top: 4px;

    color: #ffd15e;

    font-size: 20px;
    font-weight: 900;
}

.tournaments-prize-showcase small {
    margin-top: 4px;

    color: #d2d5e3;

    font-size: 12px;
}

/*=============================================
                Prize Showcase End
=============================================*/


/*=============================================
               How It Works Start
=============================================*/

.tournaments-how-it-works {
    margin-top: 21px;

    padding-top: 19px;

    display: grid;

    grid-template-columns:
        minmax(270px, 0.40fr)
        minmax(0, 1.60fr);

    gap: 29px;

    border-top:
        1px solid rgba(129, 139, 255, 0.20);
}

.tournaments-how-it-works h4,
.tournaments-primary-copy h4 {
    margin:
        6px
        0
        0;

    color: #ffffff;

    font-size: 24px;
    font-weight: 900;

    line-height: 1.12;
}

.tournaments-how-flow {
    display: grid;

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

    gap: 9px;
}

.tournaments-how-flow article {
    padding: 14px;

    border:
        1px solid rgba(129, 139, 255, 0.17);

    border-radius: 11px;

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

.tournaments-how-flow strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-how-flow p {
    margin:
        6px
        0
        0;

    color: #c7cce0;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                How It Works End
=============================================*/


/*=============================================
               Primary Layout Start
=============================================*/

.tournaments-primary-layout {
    margin-top: 21px;

    display: grid;

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

    gap: 27px;

    align-items: center;
}

.tournaments-primary-copy p {
    margin:
        9px
        0
        0;

    color: #ccd0e3;

    font-size: 16px;

    line-height: 1.5;
}

.tournaments-stat-board {
    display: grid;

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

    gap: 9px;
}

.tournaments-stat-board article {
    padding:
        14px
        12px;

    border:
        1px solid rgba(255, 208, 93, 0.18);

    border-radius: 11px;

    background:
        rgba(255, 208, 93, 0.045);

    text-align: center;
}

.tournaments-stat-board span,
.tournaments-stat-board strong {
    display: block;
}

.tournaments-stat-board span {
    color: #aeb4cc;

    font-size: 13px;
}

.tournaments-stat-board strong {
    margin-top: 5px;

    color: #ffd15d;

    font-size: 20px;
    font-weight: 900;
}

/*=============================================
                Primary Layout End
=============================================*/


/*=============================================
                 Rule Cards Start
=============================================*/

.tournaments-rule-cards {
    margin-top: 16px;

    display: grid;

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

    gap: 9px;
}

.tournaments-rule-cards article {
    padding: 15px;

    border:
        1px solid rgba(104, 180, 255, 0.18);

    border-radius: 11px;

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

.tournaments-rule-cards strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-rule-cards p {
    margin:
        6px
        0
        0;

    color: #c7ccdf;

    font-size: 14px;

    line-height: 1.43;
}

/*=============================================
                  Rule Cards End
=============================================*/


/*=============================================
                 Notes Start
=============================================*/

.tournaments-story-note,
.tournaments-payout-note {
    margin-top: 16px;

    padding:
        15px
        17px;

    display: grid;

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

    gap: 20px;

    align-items: center;

    border-left:
        3px solid #ffd15e;

    background:
        rgba(255, 208, 94, 0.05);
}

.tournaments-story-note strong,
.tournaments-payout-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.tournaments-story-note p,
.tournaments-payout-note p {
    margin:
        5px
        0
        0;

    color: #cbd0e2;

    font-size: 14px;

    line-height: 1.45;
}

.tournaments-payout-note {
    grid-template-columns:
        43px
        minmax(0, 1fr);

    border-left-color: #5edfc9;

    background:
        rgba(94, 223, 201, 0.05);
}

.tournaments-payout-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    background:
        rgba(94, 223, 201, 0.13);

    color: #64e6d1;
}

.tournaments-payout-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

/*=============================================
                  Notes End
=============================================*/


/*=============================================
                  Guide Start
=============================================*/

.tournaments-guide {
    margin-top: 22px;

    padding:
        23px
        25px;

    border:
        1px solid rgba(124, 135, 255, 0.19);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(113, 104, 255, 0.08),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.tournaments-guide-heading {
    max-width: 800px;
}

.tournaments-guide-grid {
    margin-top: 17px;

    display: grid;

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

    gap: 9px;
}

.tournaments-guide-grid article {
    padding: 15px;

    border:
        1px solid rgba(130, 140, 255, 0.15);

    border-radius: 12px;

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

.tournaments-guide-grid strong {
    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.tournaments-guide-grid p {
    margin:
        6px
        0
        0;

    color: #c8cde0;

    font-size: 14px;

    line-height: 1.42;
}

/*=============================================
                   Guide End
=============================================*/


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

.tournaments-closing {
    margin-top: 22px;

    padding:
        25px
        27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.75fr)
        minmax(0, 1.25fr);

    gap: 39px;

    align-items: center;

    border:
        1px solid rgba(125, 137, 255, 0.18);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(110, 104, 255, 0.07),
            transparent 34%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 207, 88, 0.05),
            transparent 30%
        ),
        rgba(255, 255, 255, 0.017);
}

.tournaments-closing > div:last-child p {
    margin: 0;

    color: #cbd0e2;

    font-size: 15px;

    line-height: 1.52;
}

.tournaments-closing > div:last-child p + p {
    margin-top: 9px;
}

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


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

@media (max-width: 1500px) {

    .tournaments-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }

    .tournaments-site-navigation {
        left: -168px;

        width: 146px;
    }

    .tournaments-site-switcher {
        width: 146px;
    }

    .tournaments-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@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%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .tournaments-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .tournaments-site-switcher-button {
        min-width: 160px;

        flex:
            0
            0
            160px;
    }

    .tournaments-intro {
        grid-template-columns: 1fr;
    }

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

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

    .tournaments-format-grid,
    .tournaments-rule-cards {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .tournaments-how-it-works,
    .tournaments-primary-layout {
        grid-template-columns: 1fr;
    }

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

}


@media (max-width: 920px) {

    .tournaments-panel-heading,
    .tournaments-panel-heading-wide {
        grid-template-columns: 1fr;
    }

    .tournaments-panel-mark {
        max-width: 300px;
    }

    .tournaments-how-flow {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .tournaments-prize-showcase {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .tournaments-section {
        padding:
            34px
            12px
            58px;
    }

    .tournaments-container {
        width: 100%;
    }

    .tournaments-intro {
        padding:
            25px
            20px;
    }

    .tournaments-intro h2 {
        font-size:
            clamp(
                34px,
                9vw,
                48px
            );
    }

    .tournaments-tabs {
        display: flex;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .tournaments-tabs::-webkit-scrollbar {
        display: none;
    }

    .tournaments-tab {
        min-width: 200px;

        flex:
            0
            0
            200px;

        scroll-snap-align: start;
    }

    .tournaments-stage {
        padding:
            19px
            14px;
    }

    .tournaments-snapshot,
    .tournaments-format-grid,
    .tournaments-prize-showcase,
    .tournaments-how-flow,
    .tournaments-rule-cards,
    .tournaments-guide-grid,
    .tournaments-stat-board {
        grid-template-columns: 1fr;
    }

    .tournaments-story-note,
    .tournaments-payout-note,
    .tournaments-closing {
        grid-template-columns: 1fr;
    }

}

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

/*=============================================
                 Tournaments End
=============================================*/
/*=============================================
                    Games Start
=============================================*/

.games-section {
    position: relative;
    padding: 46px 22px 74px;
    overflow: visible;
    isolation: isolate;
    color: #ffffff;

    background:
        radial-gradient(
            circle at 8% 7%,
            rgba(255, 61, 176, 0.10),
            transparent 31%
        ),
        radial-gradient(
            circle at 91% 8%,
            rgba(52, 224, 221, 0.11),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #0c111d 0%,
            #101829 48%,
            #0b1921 100%
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

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

.games-shell {
    position: relative;
    width: min(calc(100% - 10px), 1360px);
    margin: 0 auto;
}

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


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

.games-site-navigation {
    position: absolute;
    top: 0;
    left: -188px;
    width: 164px;
    z-index: 80;
}

.games-site-switcher {
    width: 164px;
    padding: 9px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    border:
        1px solid rgba(93, 222, 225, 0.20);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 27, 40, 0.88),
            rgba(7, 17, 29, 0.94)
        );

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

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

    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.games-site-navigation.is-floating {
    position: fixed;
    top: 50%;

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

    transform: translateY(-50%);
}

.games-site-navigation.is-at-bottom {
    position: absolute;
    top: auto;
    bottom: 0;
    left: -188px;
    transform: none;
}

.games-site-switcher-button {
    --site-accent-rgb: 58, 225, 220;
    --site-ink: #061d20;

    min-height: 62px;
    padding: 8px;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;

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

    border-radius: 14px;

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

    color: #ffffff;
    font: inherit;
    text-align: left;
    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 7px 17px rgba(0, 0, 0, 0.20);

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

.games-site-switcher-button[data-section-target="games"] {
    --site-accent-rgb: 255, 199, 67;
    --site-ink: #2c1e05;
}

.games-site-switcher-button[data-section-target="sports"] {
    --site-accent-rgb: 62, 181, 255;
    --site-ink: #071d32;
}

.games-site-switcher-button[data-section-target="promotions"] {
    --site-accent-rgb: 255, 69, 177;
    --site-ink: #2b091e;
}

.games-site-switcher-button[data-section-target="tournaments"] {
    --site-accent-rgb: 154, 104, 255;
    --site-ink: #17092c;
}

.games-site-switcher-button[data-section-target="loyalty"] {
    --site-accent-rgb: 62, 228, 176;
    --site-ink: #06241a;
}

.games-site-switcher-button[data-section-target="vip"] {
    --site-accent-rgb: 255, 177, 63;
    --site-ink: #2b1904;
}

.games-site-switcher-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

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

    border-radius: 11px;

    background:
        rgba(var(--site-accent-rgb), 0.12);

    color:
        rgba(var(--site-accent-rgb), 1);

    font-size: 11px;
    font-weight: 900;
}

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

    font-size: 12px;
    font-weight: 900;
    line-height: 1.08;
}

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

    margin-top: 3px;

    color:
        rgba(229, 232, 239, 0.66);

    font-size: 10px;
    font-weight: 650;
    line-height: 1.18;
}

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

    border-color:
        rgba(var(--site-accent-rgb), 0.85);

    box-shadow:
        0 11px 23px rgba(0, 0, 0, 0.27),
        0 0 19px rgba(var(--site-accent-rgb), 0.16);

    outline: none;
}

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

    color:
        var(--site-ink);

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

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

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.30),
        0 0 25px rgba(var(--site-accent-rgb), 0.24);
}

.games-site-switcher-button.is-active
.games-site-switcher-icon {
    color:
        var(--site-ink);

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

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

.games-site-switcher-button.is-active
.games-site-switcher-copy small {
    color:
        rgba(0, 0, 0, 0.61);
}

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


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

.games-intro {
    margin-bottom: 17px;
    padding: 27px 30px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    gap: 38px;
    align-items: center;

    border:
        1px solid rgba(70, 213, 220, 0.19);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 65, 177, 0.10),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(19, 24, 43, 0.97),
            rgba(9, 19, 31, 0.98)
        );

    box-shadow:
        0 21px 48px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.games-kicker,
.games-panel-kicker {
    margin: 0 0 7px;

    color: #7ef6ee;

    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.games-intro h2 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            34px,
            3.1vw,
            49px
        );

    font-weight: 900;
    line-height: 1;

    letter-spacing: -0.042em;
}

.games-intro-lead {
    margin: 15px 0 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
}

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

    color: #c8cbd4;

    font-size: 14px;
    line-height: 1.58;
}

.games-intro-secondary > p + p {
    margin-top: 10px;
}


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

.games-intro-more {
    margin-top: 13px;
}

.games-intro-more summary {
    width: fit-content;
    min-height: 42px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    list-style: none;

    border:
        1px solid rgba(72, 221, 216, 0.35);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(64, 221, 216, 0.10),
            rgba(149, 101, 255, 0.08)
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

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

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

    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #ff47b4,
            #8f69ff
        );

    font-size: 17px;
    line-height: 1;
}

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

.games-intro-more-content {
    margin-top: 9px;
    padding: 13px 15px;

    max-height: 240px;
    overflow-y: auto;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 11px;

    background:
        rgba(3, 8, 16, 0.34);
}

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

    color: #c3c7d0;

    font-size: 12px;
    line-height: 1.55;
}

.games-intro-more-content p + p {
    margin-top: 8px;
}

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

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


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

.games-navigation {
    margin-bottom: 15px;

    display: grid;

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

    gap: 8px;
}

.games-navigation-button {
    --nav-accent-rgb: 255, 67, 182;
    --nav-ink: #27081c;

    min-width: 0;
    min-height: 69px;
    padding: 9px 10px;

    display: grid;

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

    gap: 9px;
    align-items: center;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--nav-accent-rgb), 0.10),
            rgba(255, 255, 255, 0.018)
        );

    color: #ffffff;

    font: inherit;
    text-align: left;

    cursor: pointer;

    box-shadow:
        0 9px 21px rgba(0, 0, 0, 0.20);

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

.games-navigation-button[data-games-target="famous"] {
    --nav-accent-rgb: 255, 67, 182;
    --nav-ink: #27081c;
}

.games-navigation-button[data-games-target="slots"] {
    --nav-accent-rgb: 255, 194, 63;
    --nav-ink: #2c1d04;
}

.games-navigation-button[data-games-target="live"] {
    --nav-accent-rgb: 62, 180, 255;
    --nav-ink: #071d32;
}

.games-navigation-button[data-games-target="tables"] {
    --nav-accent-rgb: 63, 227, 176;
    --nav-ink: #06241a;
}

.games-navigation-button[data-games-target="instant"] {
    --nav-accent-rgb: 153, 103, 255;
    --nav-ink: #17092c;
}

.games-nav-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

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

    border-radius: 11px;

    background:
        rgba(var(--nav-accent-rgb), 0.10);

    color:
        rgba(var(--nav-accent-rgb), 1);

    font-size: 10px;
    font-weight: 900;
}

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

    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
}

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

    margin-top: 3px;

    color:
        rgba(230, 232, 240, 0.66);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
}

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

    border-color:
        rgba(var(--nav-accent-rgb), 0.90);

    box-shadow:
        0 13px 27px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(var(--nav-accent-rgb), 0.15);

    outline: none;
}

.games-navigation-button.is-active {
    transform: translateY(-3px);

    color:
        var(--nav-ink);

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

    background:
        linear-gradient(
            135deg,
            rgba(var(--nav-accent-rgb), 1),
            rgba(var(--nav-accent-rgb), 0.72)
        );

    box-shadow:
        0 13px 28px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(var(--nav-accent-rgb), 0.23);
}

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

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

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

.games-navigation-button.is-active small {
    color:
        rgba(0, 0, 0, 0.60);
}

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


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

.games-stage {
    --games-accent-rgb: 255, 67, 182;
    --games-accent: #ff43b6;
    --games-ink: #27081c;

    padding: 21px;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.20);

    border-radius: 21px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(var(--games-accent-rgb), 0.08),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            rgba(14, 18, 31, 0.99),
            rgba(8, 14, 25, 0.99)
        );

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.29),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.games-stage[data-games-theme="famous"] {
    --games-accent-rgb: 255, 67, 182;
    --games-accent: #ff43b6;
    --games-ink: #27081c;
}

.games-stage[data-games-theme="slots"] {
    --games-accent-rgb: 255, 194, 63;
    --games-accent: #ffc23f;
    --games-ink: #2c1d04;
}

.games-stage[data-games-theme="live"] {
    --games-accent-rgb: 62, 180, 255;
    --games-accent: #3eb4ff;
    --games-ink: #071d32;
}

.games-stage[data-games-theme="tables"] {
    --games-accent-rgb: 63, 227, 176;
    --games-accent: #3fe3b0;
    --games-ink: #06241a;
}

.games-stage[data-games-theme="instant"] {
    --games-accent-rgb: 153, 103, 255;
    --games-accent: #9967ff;
    --games-ink: #17092c;
}

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


/*=============================================
                 Panel Heading Start
=============================================*/

.games-panel-heading {
    padding-bottom: 16px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.77fr)
        minmax(0, 1.23fr);

    gap: 35px;
    align-items: center;

    border-bottom:
        1px solid rgba(var(--games-accent-rgb), 0.19);
}

.games-panel-kicker {
    color:
        var(--games-accent);
}

.games-panel-heading h3 {
    max-width: 650px;
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            27px,
            2.2vw,
            37px
        );

    font-weight: 900;
    line-height: 1.04;

    letter-spacing: -0.033em;
}

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

    color: #c3c7d1;

    font-size: 13px;
    line-height: 1.55;
}

.games-panel-copy p + p {
    margin-top: 8px;
}

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

    font-size: 14px;
    font-weight: 700;
}

/*=============================================
                  Panel Heading End
=============================================*/


/*=============================================
                Category Layout Start
=============================================*/

.games-category-layout {
    margin-top: 15px;

    display: grid;

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

    gap: 15px;
    align-items: start;
}


/*=============================================
                    Subnav Start
=============================================*/

.games-subnav {
    display: grid;
    gap: 8px;
}

.games-subnav-button {
    min-height: 47px;

    padding:
        9px
        12px
        9px
        15px;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.39);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(var(--games-accent-rgb), 0.10),
            rgba(255, 255, 255, 0.015)
        );

    color: #e8e9ef;

    font: inherit;
    font-size: 12px;
    font-weight: 850;

    text-align: left;

    cursor: pointer;

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

.games-subnav-button:hover,
.games-subnav-button:focus-visible {
    transform: translateX(4px);

    border-color:
        var(--games-accent);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        0 0 15px rgba(var(--games-accent-rgb), 0.11);

    outline: none;
}

.games-subnav-button.is-active {
    transform: translateX(5px);

    color:
        var(--games-ink);

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

    background:
        linear-gradient(
            135deg,
            var(--games-accent),
            rgba(var(--games-accent-rgb), 0.72)
        );

    box-shadow:
        0 9px 19px rgba(0, 0, 0, 0.26),
        0 0 18px rgba(var(--games-accent-rgb), 0.17);
}

/*=============================================
                     Subnav End
=============================================*/


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

.games-subpanels {
    min-width: 0;
}

.games-subpanel-head {
    padding-bottom: 9px;

    display: grid;

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

    gap: 20px;
    align-items: end;

    border-bottom:
        1px solid rgba(var(--games-accent-rgb), 0.16);
}

.games-subpanel-head strong {
    display: block;

    color:
        var(--games-accent);

    font-size: 19px;
    font-weight: 900;
}

.games-subpanel-head p {
    margin: 4px 0 0;

    color: #c0c4ce;

    font-size: 12px;
    line-height: 1.42;
}

.games-subpanel-head > span {
    color: #959aa7;

    font-size: 11px;
    font-weight: 700;
}

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


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

.games-grid {
    margin-top: 10px;

    display: grid;

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

    gap: 8px;
}

.game-card {
    min-width: 0;
    padding: 0;

    overflow: hidden;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.23);

    border-radius: 11px;

    background: #080b12;

    color: #ffffff;

    text-align: left;

    cursor: pointer;

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

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

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

    border-color:
        var(--games-accent);

    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.33),
        0 0 16px rgba(var(--games-accent-rgb), 0.12);

    outline: none;
}

.game-card.is-active {
    transform: translateY(-3px);

    border-color:
        var(--games-accent);

    box-shadow:
        0 0 0 1px rgba(var(--games-accent-rgb), 0.18),
        0 13px 25px rgba(0, 0, 0, 0.34),
        0 0 19px rgba(var(--games-accent-rgb), 0.16);
}

.game-card img {
    display: block;

    width: 100%;

    aspect-ratio:
        760 / 500;

    object-fit: cover;
    object-position: center;

    background: #070910;
}

.game-card-copy {
    min-height: 55px;

    padding:
        7px
        8px
        8px;

    display: block;

    border-top:
        3px solid var(--games-accent);

    background:
        linear-gradient(
            180deg,
            #141923,
            #080c14
        );
}

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

    color: #ffffff;

    font-size: 10.8px;
    font-weight: 900;

    line-height: 1.17;
}

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

    margin-top: 4px;

    color:
        var(--games-accent);

    font-size: 9.8px;
    font-weight: 750;

    line-height: 1.14;
}

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


/*=============================================
                 Game Detail Start
=============================================*/

.game-details {
    margin-top: 10px;
}

.game-detail {
    padding:
        15px
        17px;

    display: grid;

    grid-template-columns:
        minmax(205px, 0.30fr)
        minmax(0, 1.70fr);

    gap: 24px;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.25);

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(var(--games-accent-rgb), 0.09),
            transparent 35%
        ),
        rgba(255, 255, 255, 0.017);
}

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

    margin-bottom: 5px;

    color:
        var(--games-accent);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

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

    color: #ffffff;

    font-size: 20px;
    font-weight: 900;

    line-height: 1.08;
}

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

    color: #c5c9d2;

    font-size: 12.5px;
    line-height: 1.55;
}

.game-detail-copy p + p {
    margin-top: 7px;
}

.game-detail-compare {
    padding:
        8px
        10px;

    border-left:
        3px solid var(--games-accent);

    border-radius:
        0 7px 7px 0;

    background:
        rgba(var(--games-accent-rgb), 0.055);
}

.game-detail-compare strong {
    color:
        var(--games-accent);
}

/*=============================================
                  Game Detail End
=============================================*/


/*=============================================
                     Guide Start
=============================================*/

.games-guide {
    margin-top: 13px;
}

.games-guide summary {
    min-height: 50px;

    padding:
        0
        15px
        0
        17px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    list-style: none;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.42);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(var(--games-accent-rgb), 0.14),
            rgba(var(--games-accent-rgb), 0.04)
        );

    color: #ffffff;

    font-size: 12.5px;
    font-weight: 900;

    cursor: pointer;
}

.games-guide summary::-webkit-details-marker {
    display: none;
}

.games-guide summary::after {
    content: "+";

    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--games-accent);

    color:
        var(--games-ink);

    font-size: 18px;
    font-weight: 900;
}

.games-guide[open]
summary::after {
    transform: rotate(45deg);
}

.games-guide-content {
    margin-top: 8px;

    padding:
        16px
        18px;

    max-height: 260px;

    overflow-y: auto;

    border:
        1px solid rgba(var(--games-accent-rgb), 0.17);

    border-radius: 12px;

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

.games-guide-content h4 {
    margin: 0 0 9px;

    color:
        var(--games-accent);

    font-size: 19px;
    font-weight: 900;
}

.games-guide-content p {
    margin: 0;

    color: #c4c8d1;

    font-size: 12.5px;
    line-height: 1.57;
}

.games-guide-content p + p {
    margin-top: 8px;
}

/*=============================================
                      Guide End
=============================================*/


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

.games-closing {
    margin-top: 18px;

    padding:
        21px
        23px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.72fr)
        minmax(0, 1.28fr);

    gap: 34px;
    align-items: center;

    border:
        1px solid rgba(72, 211, 222, 0.16);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 23, 37, 0.91),
            rgba(9, 17, 28, 0.94)
        );
}

.games-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            26px,
            2.2vw,
            35px
        );

    font-weight: 900;
    line-height: 1.05;
}

.games-closing > div:last-child p {
    margin: 0;

    color: #c1c5ce;

    font-size: 12.5px;
    line-height: 1.57;
}

.games-closing > div:last-child p + p {
    margin-top: 8px;
}

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


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

@media (max-width: 1500px) {

    .games-shell {
        width:
            min(
                calc(100% - 20px),
                1240px
            );
    }

    .games-site-navigation {
        left: -160px;
        width: 143px;
    }

    .games-site-switcher {
        width: 143px;
    }

    .games-site-navigation.is-at-bottom {
        left: -160px;
    }

    .games-site-navigation.is-floating {
        left:
            max(
                10px,
                calc(50% - 620px - 160px)
            );
    }

}


@media (max-width: 1240px) {

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

        width: 100%;

        margin-bottom: 15px;

        transform: none;
    }

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

        display: grid;

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

    .games-site-switcher-button {
        min-height: 56px;
    }

    .games-site-switcher-button:hover,
    .games-site-switcher-button:focus-visible,
    .games-site-switcher-button.is-active {
        transform: translateY(-2px);
    }

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

}


@media (max-width: 980px) {

    .games-intro,
    .games-panel-heading,
    .games-closing {
        grid-template-columns: 1fr;

        gap: 16px;
    }

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

    .games-category-layout {
        grid-template-columns: 1fr;
    }

    .games-subnav {
        display: flex;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;
    }

    .games-subnav::-webkit-scrollbar {
        display: none;
    }

    .games-subnav-button {
        min-width: 165px;
        flex: 0 0 165px;
    }

    .games-subnav-button:hover,
    .games-subnav-button:focus-visible,
    .games-subnav-button.is-active {
        transform: translateY(-2px);
    }

    .game-detail {
        grid-template-columns: 1fr;

        gap: 11px;
    }

}


@media (max-width: 760px) {

    .games-section {
        padding:
            31px
            11px
            54px;
    }

    .games-shell {
        width: 100%;
    }

    .games-site-switcher {
        display: flex;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .games-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .games-site-switcher-button {
        min-width: 154px;
        flex: 0 0 154px;
    }

    .games-intro {
        padding:
            22px
            19px;
    }

    .games-intro h2 {
        font-size:
            clamp(
                32px,
                9vw,
                44px
            );
    }

    .games-navigation {
        display: flex;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }

    .games-navigation::-webkit-scrollbar {
        display: none;
    }

    .games-navigation-button {
        min-width: 205px;

        flex:
            0
            0
            205px;
    }

    .games-stage {
        padding:
            16px
            12px;
    }

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

}


@media (max-width: 480px) {

    .game-card-copy strong {
        font-size: 10.3px;
    }

    .game-card-copy small {
        font-size: 9.3px;
    }

}

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

/*=============================================
                     Games End
=============================================*/
/*=============================================
                Promotion Start
=============================================*/

.promotion-section {
    position: relative;
    padding: 58px 22px 82px;
    overflow: visible;
    isolation: isolate;
    color: #fffafb;

    background:
        radial-gradient(
            ellipse at 8% 4%,
            rgba(255, 82, 150, 0.18) 0%,
            rgba(255, 82, 150, 0.045) 27%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 84% 3%,
            rgba(255, 190, 73, 0.14) 0%,
            rgba(255, 190, 73, 0.035) 28%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 96% 54%,
            rgba(84, 195, 241, 0.08) 0%,
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #1c101b 0%,
            #281321 34%,
            #211421 66%,
            #15101b 100%
        );

    border-top:
        1px solid rgba(255, 143, 185, 0.18);
}

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

    position: absolute;
    top: 0;
    left: 50%;

    width: min(94%, 1540px);
    height: 3px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff5d9f 17%,
            #ffb94a 37%,
            #ffe071 51%,
            #ce78ff 69%,
            #56cceb 84%,
            transparent
        );

    box-shadow:
        0 0 27px rgba(255, 103, 165, 0.36);
}

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

.promotion-container {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;
}

.promotion-main {
    min-width: 0;
}


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

.promotion-site-navigation {
    position: absolute;

    top: 0;
    left: -194px;

    width: 168px;

    z-index: 90;

    pointer-events: none;
}

.promotion-site-switcher {
    width: 168px;

    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    border:
        1px solid rgba(255, 155, 196, 0.20);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(49, 21, 42, 0.93),
            rgba(24, 12, 27, 0.96)
        );

    box-shadow:
        0 24px 56px rgba(8, 2, 8, 0.43),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

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

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

    pointer-events: auto;
}

.promotion-site-navigation.is-floating {
    position: fixed;

    top: 50%;

    left:
        max(
            14px,
            calc(50% - 680px - 194px)
        );

    transform: translateY(-50%);
}

.promotion-site-navigation.is-at-bottom {
    position: absolute;

    top: auto;
    bottom: 0;
    left: -194px;

    transform: none;
}

.promotion-site-switcher-button {
    --section-accent-rgb: 255, 113, 171;
    --section-accent: #ff71ab;
    --section-ink: #31101e;

    width: 100%;
    min-height: 66px;

    padding: 9px 10px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.42
        );

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                var(--section-accent-rgb),
                0.13
            ),
            rgba(255, 255, 255, 0.02)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 18px rgba(8, 2, 8, 0.22);

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

.promotion-site-switcher-button[data-section-target="games"] {
    --section-accent-rgb: 91, 210, 244;
    --section-accent: #5bd2f4;
    --section-ink: #07252d;
}

.promotion-site-switcher-button[data-section-target="sports"] {
    --section-accent-rgb: 105, 177, 255;
    --section-accent: #69b1ff;
    --section-ink: #071b31;
}

.promotion-site-switcher-button[data-section-target="promotions"] {
    --section-accent-rgb: 255, 117, 174;
    --section-accent: #ff75ae;
    --section-ink: #33101f;
}

.promotion-site-switcher-button[data-section-target="tournaments"] {
    --section-accent-rgb: 255, 205, 90;
    --section-accent: #ffcd5a;
    --section-ink: #302306;
}

.promotion-site-switcher-button[data-section-target="loyalty"] {
    --section-accent-rgb: 102, 223, 194;
    --section-accent: #66dfc2;
    --section-ink: #07271f;
}

.promotion-site-switcher-button[data-section-target="vip"] {
    --section-accent-rgb: 188, 137, 255;
    --section-accent: #bc89ff;
    --section-ink: #221136;
}

.promotion-site-switcher-icon {
    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--section-accent-rgb),
            0.77
        );

    border-radius: 11px;

    background:
        rgba(
            var(--section-accent-rgb),
            0.12
        );

    color:
        var(--section-accent);
}

.promotion-site-switcher-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.promotion-site-switcher-copy strong {
    display: block;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}

.promotion-site-switcher-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(242, 228, 236, 0.72);

    font-size: 11px;
    font-weight: 700;

    line-height: 1.18;
}

.promotion-site-switcher-button:hover,
.promotion-site-switcher-button:focus-visible {
    transform: translateX(5px);

    border-color:
        var(--section-accent);

    box-shadow:
        0 12px 26px rgba(8, 2, 8, 0.29),
        0 0 24px rgba(var(--section-accent-rgb), 0.18);

    outline: none;
}

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

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

    color:
        var(--section-ink);

    background:
        linear-gradient(
            135deg,
            var(--section-accent),
            rgba(
                var(--section-accent-rgb),
                0.83
            )
        );

    box-shadow:
        0 14px 29px rgba(8, 2, 8, 0.33),
        0 0 30px rgba(var(--section-accent-rgb), 0.30);
}

.promotion-site-switcher-button.is-active
.promotion-site-switcher-icon {
    color:
        var(--section-ink);

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

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

.promotion-site-switcher-button.is-active
.promotion-site-switcher-copy small {
    color:
        rgba(35, 7, 20, 0.68);
}

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


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

.promotion-intro {
    margin-bottom: 21px;

    padding:
        34px
        36px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(350px, 0.62fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid rgba(255, 132, 182, 0.29);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 89, 158, 0.14),
            transparent 38%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 188, 69, 0.09),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(49, 21, 43, 0.97),
            rgba(28, 14, 31, 0.98)
        );

    box-shadow:
        0 23px 53px rgba(9, 2, 9, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.promotion-eyebrow,
.promotion-panel-kicker {
    margin: 0 0 9px;

    color: #ff8cba;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.13em;

    line-height: 1.3;

    text-transform: uppercase;
}

.promotion-intro h2 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            39px,
            3.7vw,
            56px
        );

    font-weight: 900;

    line-height: 0.99;

    letter-spacing: -0.045em;
}

.promotion-intro-copy p {
    max-width: 800px;

    margin: 13px 0 0;

    color: #decdd6;

    font-size: 17px;

    line-height: 1.58;
}

.promotion-intro-copy
.promotion-intro-lead {
    color: #fff9fb;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.52;
}

.promotion-intro-media {
    min-height: 310px;

    margin: 0;

    overflow: hidden;

    border:
        1px solid rgba(255, 190, 69, 0.48);

    border-radius: 20px;

    background: #140c14;

    box-shadow:
        0 20px 44px rgba(8, 2, 8, 0.36),
        0 0 23px rgba(255, 177, 62, 0.08);
}

.promotion-intro-media img {
    width: 100%;
    height: 310px;

    object-fit: cover;

    object-position: center;
}

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


/*=============================================
                    Tabs Start
=============================================*/

.promotion-tabs {
    margin-bottom: 16px;

    display: grid;

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

    gap: 10px;
}

.promotion-tab {
    --tab-accent-rgb: 255, 120, 174;
    --tab-accent: #ff78ae;
    --tab-ink: #33101f;

    min-width: 0;

    min-height: 80px;

    padding: 11px 13px;

    display: flex;

    align-items: center;

    gap: 11px;

    border:
        1px solid
        rgba(
            var(--tab-accent-rgb),
            0.40
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--tab-accent-rgb),
                0.12
            ),
            rgba(255, 255, 255, 0.02)
        );

    color: #ffffff;

    font: inherit;

    text-align: left;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 9px 20px rgba(8, 2, 8, 0.21);

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

.promotion-tab[data-promotion-target="overview"] {
    --tab-accent-rgb: 92, 215, 239;
    --tab-accent: #5cd7ef;
    --tab-ink: #06252c;
}

.promotion-tab[data-promotion-target="casino"] {
    --tab-accent-rgb: 255, 205, 91;
    --tab-accent: #ffcd5b;
    --tab-ink: #302206;
}

.promotion-tab[data-promotion-target="spins"] {
    --tab-accent-rgb: 255, 105, 174;
    --tab-accent: #ff69ae;
    --tab-ink: #32101f;
}

.promotion-tab[data-promotion-target="sports"] {
    --tab-accent-rgb: 103, 181, 255;
    --tab-accent: #67b5ff;
    --tab-ink: #071c31;
}

.promotion-tab[data-promotion-target="loyalty"] {
    --tab-accent-rgb: 184, 137, 255;
    --tab-accent: #b889ff;
    --tab-ink: #211036;
}

.promotion-tab-icon {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    flex:
        0
        0
        42px;

    border:
        1px solid
        var(--tab-accent);

    border-radius: 12px;

    background:
        rgba(
            var(--tab-accent-rgb),
            0.13
        );

    color:
        var(--tab-accent);
}

.promotion-tab-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.promotion-tab-copy strong {
    display: block;

    font-size: 16px;
    font-weight: 900;

    line-height: 1.08;
}

.promotion-tab-copy small {
    display: block;

    margin-top: 4px;

    color:
        rgba(239, 226, 233, 0.72);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.18;
}

.promotion-tab:hover,
.promotion-tab:focus-visible {
    transform: translateY(-4px);

    border-color:
        var(--tab-accent);

    box-shadow:
        0 14px 27px rgba(8, 2, 8, 0.29),
        0 0 22px rgba(var(--tab-accent-rgb), 0.17);

    outline: none;
}

.promotion-tab.is-active {
    transform: translateY(-4px);

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

    color:
        var(--tab-ink);

    background:
        linear-gradient(
            135deg,
            var(--tab-accent),
            rgba(
                var(--tab-accent-rgb),
                0.82
            )
        );

    box-shadow:
        0 15px 29px rgba(8, 2, 8, 0.33),
        0 0 27px rgba(var(--tab-accent-rgb), 0.27);
}

.promotion-tab.is-active
.promotion-tab-icon {
    color:
        var(--tab-ink);

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

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

.promotion-tab.is-active
.promotion-tab-copy small {
    color:
        rgba(30, 7, 18, 0.66);
}

/*=============================================
                     Tabs End
=============================================*/


/*=============================================
                Main Panels Start
=============================================*/

.promotion-panel {
    --promo-accent-rgb: 255, 124, 176;
    --promo-accent: #ff7cb0;

    padding: 27px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.22
        );

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 96% 4%,
            rgba(
                var(--promo-accent-rgb),
                0.08
            ),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            rgba(40, 18, 35, 0.98),
            rgba(23, 12, 27, 0.99)
        );

    box-shadow:
        0 23px 52px rgba(9, 2, 9, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.promotion-panel[data-promotion-panel="overview"] {
    --promo-accent-rgb: 95, 216, 238;
    --promo-accent: #5fd8ee;
}

.promotion-panel[data-promotion-panel="casino"] {
    --promo-accent-rgb: 255, 205, 91;
    --promo-accent: #ffcd5b;
}

.promotion-panel[data-promotion-panel="spins"] {
    --promo-accent-rgb: 255, 105, 174;
    --promo-accent: #ff69ae;
}

.promotion-panel[data-promotion-panel="sports"] {
    --promo-accent-rgb: 103, 181, 255;
    --promo-accent: #67b5ff;
}

.promotion-panel[data-promotion-panel="loyalty"] {
    --promo-accent-rgb: 184, 137, 255;
    --promo-accent: #b889ff;
}

.promotion-panel[hidden] {
    display: none !important;
}

.promotion-panel-heading {
    padding-bottom: 20px;

    display: grid;

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

    gap: 31px;

    align-items: center;

    border-bottom:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.22
        );
}

.promotion-panel-heading-wide {
    grid-template-columns:
        minmax(0, 1fr)
        190px;
}

.promotion-panel h3,
.promotion-guide h3,
.promotion-closing h3 {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            31px,
            2.6vw,
            42px
        );

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.035em;
}

.promotion-panel-heading p {
    max-width: 900px;

    margin: 10px 0 0;

    color: #d5c7ce;

    font-size: 16px;

    line-height: 1.56;
}

.promotion-panel-mark,
.promotion-overview-mark {
    padding: 15px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.43
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--promo-accent-rgb),
                0.15
            ),
            rgba(
                var(--promo-accent-rgb),
                0.035
            )
        );

    text-align: center;
}

.promotion-panel-mark span,
.promotion-panel-mark strong,
.promotion-panel-mark small,
.promotion-overview-mark span,
.promotion-overview-mark strong,
.promotion-overview-mark small {
    display: block;
}

.promotion-panel-mark span,
.promotion-overview-mark span {
    color: #dfd1d8;

    font-size: 13px;
    font-weight: 800;
}

.promotion-panel-mark strong,
.promotion-overview-mark strong {
    margin-top: 5px;

    color:
        var(--promo-accent);

    font-size: 32px;
    font-weight: 900;

    line-height: 1;
}

.promotion-panel-mark small,
.promotion-overview-mark small {
    margin-top: 6px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.25;
}

/*=============================================
                 Main Panels End
=============================================*/


/*=============================================
                 Overview Start
=============================================*/

.promotion-overview-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 11px;
}

.promotion-overview-card {
    --overview-accent-rgb: 255, 120, 174;
    --overview-accent: #ff78ae;

    padding: 17px;

    display: grid;

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

    gap: 13px;

    border:
        1px solid
        rgba(
            var(--overview-accent-rgb),
            0.24
        );

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--overview-accent-rgb),
                0.07
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.promotion-overview-card[data-promo-theme="casino"] {
    --overview-accent-rgb: 255, 205, 91;
    --overview-accent: #ffcd5b;
}

.promotion-overview-card[data-promo-theme="spins"] {
    --overview-accent-rgb: 255, 105, 174;
    --overview-accent: #ff69ae;
}

.promotion-overview-card[data-promo-theme="sport"] {
    --overview-accent-rgb: 103, 181, 255;
    --overview-accent: #67b5ff;
}

.promotion-overview-card[data-promo-theme="premium"] {
    --overview-accent-rgb: 184, 137, 255;
    --overview-accent: #b889ff;
}

.promotion-overview-icon {
    width: 46px;
    height: 46px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(
            var(--overview-accent-rgb),
            0.68
        );

    border-radius: 12px;

    background:
        rgba(
            var(--overview-accent-rgb),
            0.12
        );

    color:
        var(--overview-accent);
}

.promotion-overview-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.promotion-overview-card strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;

    line-height: 1.18;
}

.promotion-overview-card p {
    margin: 7px 0 0;

    color: #d0c3ca;

    font-size: 14px;

    line-height: 1.45;
}


/*=============================================
                 Reward Path Start
=============================================*/

.promotion-path {
    margin-top: 24px;

    padding-top: 21px;

    border-top:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );
}

.promotion-path-flow {
    margin-top: 15px;

    display: grid;

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

    gap: 10px;
}

.promotion-path-flow article {
    padding: 15px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );

    border-radius: 12px;

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

.promotion-path-icon {
    width: 37px;
    height: 37px;

    margin-bottom: 10px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(
            var(--promo-accent-rgb),
            0.14
        );

    color:
        var(--promo-accent);
}

.promotion-path-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.promotion-path-flow strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.18;
}

.promotion-path-flow p {
    margin: 7px 0 0;

    color: #d0c3ca;

    font-size: 14px;

    line-height: 1.45;
}

.promotion-account-note {
    margin-top: 17px;

    padding: 16px 18px;

    border-left:
        3px solid
        var(--promo-accent);

    background:
        rgba(
            var(--promo-accent-rgb),
            0.055
        );
}

.promotion-account-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.promotion-account-note p {
    margin: 6px 0 0;

    color: #d1c5cb;

    font-size: 14px;

    line-height: 1.48;
}

/*=============================================
                  Reward Path End
=============================================*/

/*=============================================
                  Overview End
=============================================*/


/*=============================================
                  Offers Start
=============================================*/

.promotion-offer-stack {
    margin-top: 20px;

    display: grid;

    gap: 13px;
}

.promotion-offer {
    --offer-accent-rgb: 255, 205, 91;
    --offer-accent: #ffcd5b;

    padding: 20px;

    border:
        1px solid
        rgba(
            var(--offer-accent-rgb),
            0.25
        );

    border-radius: 15px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(
                var(--offer-accent-rgb),
                0.08
            ),
            transparent 34%
        ),
        rgba(255, 255, 255, 0.018);
}

.promotion-offer[data-offer-theme="festival"] {
    --offer-accent-rgb: 255, 190, 65;
    --offer-accent: #ffbe41;
}

.promotion-offer[data-offer-theme="third"] {
    --offer-accent-rgb: 255, 100, 171;
    --offer-accent: #ff64ab;
}

.promotion-offer[data-offer-theme="deposit"] {
    --offer-accent-rgb: 77, 220, 177;
    --offer-accent: #4ddcb1;
}

.promotion-offer[data-offer-theme="weekend"] {
    --offer-accent-rgb: 102, 181, 255;
    --offer-accent: #66b5ff;
}

.promotion-offer[data-offer-theme="magic"] {
    --offer-accent-rgb: 187, 137, 255;
    --offer-accent: #bb89ff;
}

.promotion-offer-head {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 25px;
}

.promotion-offer-type,
.promotion-sports-label,
.promotion-feature-label {
    color:
        var(--offer-accent, var(--promo-accent));

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.promotion-offer-head h4,
.promotion-feature-card h4,
.promotion-sports-card h4,
.promotion-highroller h4,
.promotion-loyalty h4 {
    margin: 6px 0 0;

    color: #ffffff;

    font-size:
        clamp(
            22px,
            1.8vw,
            29px
        );

    font-weight: 900;

    line-height: 1.1;
}

.promotion-offer-value {
    max-width: 350px;

    color:
        var(--offer-accent);

    font-size:
        clamp(
            21px,
            1.65vw,
            27px
        );

    font-weight: 900;

    line-height: 1.1;

    text-align: right;
}

.promotion-offer-lead {
    max-width: 1000px;

    margin: 10px 0 0;

    color: #d5c7ce;

    font-size: 15px;

    line-height: 1.52;
}

.promotion-claim-path {
    margin-top: 15px;

    display: grid;

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

    gap: 9px;
}

.promotion-claim-path article {
    padding: 14px;

    border:
        1px solid
        rgba(
            var(--offer-accent-rgb, var(--promo-accent-rgb)),
            0.18
        );

    border-radius: 11px;

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

.promotion-claim-path strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.2;
}

.promotion-claim-path p {
    margin: 6px 0 0;

    color: #cfc2c9;

    font-size: 14px;

    line-height: 1.45;
}

.promotion-offer-more,
.promotion-card-details {
    margin-top: 13px;
}

.promotion-offer-more summary,
.promotion-card-details summary {
    width: fit-content;

    min-height: 40px;

    padding: 0 14px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    list-style: none;

    border:
        1px solid
        rgba(
            var(--offer-accent-rgb, var(--promo-accent-rgb)),
            0.28
        );

    border-radius: 9px;

    background:
        rgba(
            var(--offer-accent-rgb, var(--promo-accent-rgb)),
            0.065
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 850;

    cursor: pointer;
}

.promotion-offer-more summary::-webkit-details-marker,
.promotion-card-details summary::-webkit-details-marker {
    display: none;
}

.promotion-offer-more summary::after,
.promotion-card-details summary::after {
    content: "+";

    color:
        var(--offer-accent, var(--promo-accent));

    font-size: 18px;
    font-weight: 900;
}

.promotion-offer-more[open] summary::after,
.promotion-card-details[open] summary::after {
    transform: rotate(45deg);
}

.promotion-offer-more > div,
.promotion-card-details > p {
    margin-top: 9px;

    padding: 13px 14px;

    border-radius: 9px;

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

.promotion-offer-more p,
.promotion-card-details p {
    margin: 0;

    color: #cfc2c9;

    font-size: 14px;

    line-height: 1.5;
}

/*=============================================
                   Offers End
=============================================*/


/*=============================================
                Feature Cards Start
=============================================*/

.promotion-feature-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 12px;
}

.promotion-feature-card {
    --feature-accent-rgb: 255, 105, 174;
    --feature-accent: #ff69ae;

    padding: 20px;

    border:
        1px solid
        rgba(
            var(--feature-accent-rgb),
            0.25
        );

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--feature-accent-rgb),
                0.07
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.promotion-feature-card[data-feature-theme="week"] {
    --feature-accent-rgb: 255, 104, 171;
    --feature-accent: #ff68ab;
}

.promotion-feature-card[data-feature-theme="welcome"] {
    --feature-accent-rgb: 255, 204, 88;
    --feature-accent: #ffcc58;
}

.promotion-feature-card[data-feature-theme="deposit"] {
    --feature-accent-rgb: 77, 221, 177;
    --feature-accent: #4dddb1;
}

.promotion-feature-card[data-feature-theme="free-spins"] {
    --feature-accent-rgb: 181, 135, 255;
    --feature-accent: #b587ff;
}

.promotion-feature-card
.promotion-feature-label {
    color:
        var(--feature-accent);
}

.promotion-feature-value {
    display: block;

    margin-top: 10px;

    color:
        var(--feature-accent);

    font-size: 34px;
    font-weight: 900;

    line-height: 1;
}

.promotion-feature-card > p {
    margin: 10px 0 0;

    color: #d1c3ca;

    font-size: 15px;

    line-height: 1.5;
}

.promotion-feature-steps {
    margin: 15px 0 0;

    padding-left: 22px;

    color: #e0d4da;

    font-size: 14px;

    line-height: 1.55;
}

.promotion-feature-steps li + li {
    margin-top: 5px;
}

.promotion-feature-card
.promotion-card-details summary {
    border-color:
        rgba(
            var(--feature-accent-rgb),
            0.28
        );

    background:
        rgba(
            var(--feature-accent-rgb),
            0.065
        );
}

.promotion-feature-card
.promotion-card-details summary::after {
    color:
        var(--feature-accent);
}

/*=============================================
                 Feature Cards End
=============================================*/


/*=============================================
                   Sports Start
=============================================*/

.promotion-sports-grid {
    margin-top: 20px;

    display: grid;

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

    gap: 12px;
}

.promotion-sports-card {
    --sports-accent-rgb: 103, 181, 255;
    --sports-accent: #67b5ff;

    padding: 20px;

    border:
        1px solid
        rgba(
            var(--sports-accent-rgb),
            0.27
        );

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--sports-accent-rgb),
                0.075
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.promotion-sports-card[data-sports-theme="weekend"] {
    --sports-accent-rgb: 87, 191, 255;
    --sports-accent: #57bfff;
}

.promotion-sports-card[data-sports-theme="weekly"] {
    --sports-accent-rgb: 109, 150, 255;
    --sports-accent: #6d96ff;
}

.promotion-sports-card
.promotion-sports-label {
    color:
        var(--sports-accent);
}

.promotion-sports-value {
    margin-top: 10px;

    color:
        var(--sports-accent);

    font-size: 38px;
    font-weight: 900;

    line-height: 1;
}

.promotion-sports-card > p {
    margin: 10px 0 0;

    color: #d0c5cb;

    font-size: 15px;

    line-height: 1.5;
}

.promotion-sports-path {
    margin-top: 15px;

    display: grid;

    gap: 7px;
}

.promotion-sports-path span {
    padding: 10px 12px;

    border:
        1px solid
        rgba(
            var(--sports-accent-rgb),
            0.17
        );

    border-radius: 8px;

    background:
        rgba(
            var(--sports-accent-rgb),
            0.04
        );

    color: #d8cdd3;

    font-size: 14px;

    line-height: 1.42;
}

.promotion-sports-note {
    margin-top: 16px;

    padding: 16px 18px;

    border-left:
        3px solid
        var(--promo-accent);

    background:
        rgba(
            var(--promo-accent-rgb),
            0.055
        );
}

.promotion-sports-note strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 900;
}

.promotion-sports-note p {
    margin: 6px 0 0;

    color: #d1c5cb;

    font-size: 14px;

    line-height: 1.48;
}

/*=============================================
                    Sports End
=============================================*/


/*=============================================
                  Premium Start
=============================================*/

.promotion-premium-layout {
    margin-top: 20px;

    display: grid;

    gap: 14px;
}

.promotion-highroller,
.promotion-loyalty {
    padding: 21px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.25
        );

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--promo-accent-rgb),
                0.07
            ),
            rgba(255, 255, 255, 0.018)
        );
}

.promotion-highroller {
    display: grid;

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

    gap: 27px;

    align-items: center;
}

.promotion-highroller
.promotion-offer-type,
.promotion-loyalty
.promotion-offer-type {
    color:
        var(--promo-accent);
}

.promotion-highroller > div:first-child > p,
.promotion-loyalty-heading p {
    margin: 9px 0 0;

    color: #d1c5cc;

    font-size: 15px;

    line-height: 1.5;
}

.promotion-highroller-value {
    text-align: center;
}

.promotion-highroller-value strong,
.promotion-highroller-value span {
    display: block;
}

.promotion-highroller-value strong {
    color:
        var(--promo-accent);

    font-size: 41px;
    font-weight: 900;

    line-height: 1;
}

.promotion-highroller-value span {
    margin-top: 7px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 850;
}

.promotion-highroller
.promotion-claim-path {
    grid-column:
        1 / -1;
}

.promotion-loyalty-stats {
    margin-top: 16px;

    display: grid;

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

    gap: 9px;
}

.promotion-loyalty-stats article {
    padding: 14px 12px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.18
        );

    border-radius: 11px;

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

    text-align: center;
}

.promotion-loyalty-stats small,
.promotion-loyalty-stats strong,
.promotion-loyalty-stats span {
    display: block;
}

.promotion-loyalty-stats small {
    color: #baadb5;

    font-size: 12px;
}

.promotion-loyalty-stats strong {
    margin-top: 4px;

    color:
        var(--promo-accent);

    font-size: 21px;
    font-weight: 900;
}

.promotion-loyalty-stats span {
    margin-top: 4px;

    color: #ddd2d8;

    font-size: 12px;

    line-height: 1.3;
}

.promotion-loyalty-process {
    margin-top: 15px;

    display: grid;

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

    gap: 9px;
}

.promotion-loyalty-process article {
    padding: 13px;

    border:
        1px solid
        rgba(
            var(--promo-accent-rgb),
            0.17
        );

    border-radius: 10px;

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

.promotion-loyalty-process strong {
    display: block;

    color: #ffffff;

    font-size: 14px;
    font-weight: 900;
}

.promotion-loyalty-process p {
    margin: 6px 0 0;

    color: #cabec5;

    font-size: 13px;

    line-height: 1.42;
}

/*=============================================
                   Premium End
=============================================*/


/*=============================================
                    Guide Start
=============================================*/

.promotion-guide {
    margin-top: 22px;

    padding: 23px 25px;

    border:
        1px solid rgba(255, 131, 182, 0.18);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(255, 98, 160, 0.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(43, 19, 37, 0.87),
            rgba(24, 13, 28, 0.92)
        );
}

.promotion-guide-heading {
    max-width: 850px;
}

.promotion-guide-grid {
    margin-top: 16px;

    display: grid;

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

    gap: 9px;
}

.promotion-guide-grid article {
    padding: 15px;

    border:
        1px solid rgba(255, 132, 182, 0.14);

    border-radius: 11px;

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

.promotion-guide-icon {
    width: 37px;
    height: 37px;

    margin-bottom: 9px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        rgba(255, 118, 176, 0.11);

    color: #ff88b8;
}

.promotion-guide-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.promotion-guide-grid strong {
    display: block;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    line-height: 1.18;
}

.promotion-guide-grid p {
    margin: 6px 0 0;

    color: #cec2c8;

    font-size: 14px;

    line-height: 1.44;
}

/*=============================================
                     Guide End
=============================================*/


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

.promotion-closing {
    margin-top: 22px;

    padding: 25px 27px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.76fr)
        minmax(0, 1.24fr);

    gap: 38px;

    align-items: center;

    border:
        1px solid rgba(255, 137, 184, 0.17);

    border-radius: 17px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(255, 93, 158, 0.07),
            transparent 34%
        ),
        rgba(255, 255, 255, 0.016);
}

.promotion-closing h3 {
    max-width: 610px;
}

.promotion-closing > div:last-child p {
    margin: 0;

    color: #d0c3ca;

    font-size: 15px;

    line-height: 1.52;
}

.promotion-closing > div:last-child p + p {
    margin-top: 9px;
}

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


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

@media (max-width: 1500px) {

    .promotion-container {
        width:
            min(
                calc(100% - 18px),
                1260px
            );
    }

    .promotion-site-navigation {
        left: -168px;

        width: 146px;
    }

    .promotion-site-switcher {
        width: 146px;
    }

    .promotion-site-navigation.is-at-bottom {
        left: -168px;
    }

}


@media (max-width: 1240px) {

    .promotion-site-navigation,
    .promotion-site-navigation.is-floating,
    .promotion-site-navigation.is-at-bottom {
        position: static;

        width: 100%;

        margin-bottom: 17px;

        transform: none;

        pointer-events: auto;
    }

    .promotion-site-switcher {
        width: 100%;

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;
    }

    .promotion-site-switcher::-webkit-scrollbar {
        display: none;
    }

    .promotion-site-switcher-button {
        min-width: 165px;

        flex:
            0
            0
            165px;
    }

    .promotion-intro {
        grid-template-columns: 1fr;
    }

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

    .promotion-path-flow {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

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

}


@media (max-width: 920px) {

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

    .promotion-panel-heading,
    .promotion-panel-heading-wide,
    .promotion-highroller {
        grid-template-columns: 1fr;
    }

    .promotion-panel-mark,
    .promotion-overview-mark {
        max-width: 300px;
    }

    .promotion-claim-path,
    .promotion-loyalty-process {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .promotion-feature-grid,
    .promotion-sports-grid {
        grid-template-columns: 1fr;
    }

    .promotion-loyalty-stats {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 760px) {

    .promotion-section {
        padding:
            34px
            12px
            58px;
    }

    .promotion-container {
        width: 100%;
    }

    .promotion-intro {
        padding:
            25px
            20px;
    }

    .promotion-intro h2 {
        font-size:
            clamp(
                33px,
                9vw,
                47px
            );
    }

    .promotion-intro-copy p {
        font-size: 15px;
    }

    .promotion-tabs {
        display: flex;

        gap: 8px;

        overflow-x: auto;

        padding-bottom: 4px;

        scrollbar-width: none;

        scroll-snap-type:
            x mandatory;
    }

    .promotion-tabs::-webkit-scrollbar {
        display: none;
    }

    .promotion-tab {
        min-width: 200px;

        flex:
            0
            0
            200px;

        scroll-snap-align: start;
    }

    .promotion-panel {
        padding:
            19px
            15px;
    }

    .promotion-overview-grid,
    .promotion-path-flow,
    .promotion-claim-path,
    .promotion-loyalty-stats,
    .promotion-loyalty-process,
    .promotion-guide-grid {
        grid-template-columns: 1fr;
    }

    .promotion-offer-head {
        flex-direction: column;

        gap: 8px;
    }

    .promotion-offer-value {
        max-width: none;

        text-align: left;
    }

    .promotion-closing {
        grid-template-columns: 1fr;

        gap: 16px;
    }

}

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

/*=============================================
                 Promotion End
=============================================*/

/*=============================================
                   Footer Start
=============================================*/

.site-footer {
    position: relative;

    padding:
        48px
        22px
        20px;

    overflow: hidden;

    color: #d9e7e8;

    border-top:
        1px solid
        rgba(111, 224, 209, 0.18);

    background:
        radial-gradient(
            ellipse at 8% 0%,
            rgba(70, 213, 188, 0.10),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 84% 0%,
            rgba(97, 160, 255, 0.08),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 94% 92%,
            rgba(190, 131, 255, 0.07),
            transparent 28%
        ),
        linear-gradient(
            150deg,
            #07181d 0%,
            #071319 45%,
            #050b10 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%,
            #60dec7 14%,
            #65b9ff 29%,
            #ff7fae 44%,
            #ffd05e 58%,
            #bd8cff 73%,
            #69deb9 87%,
            transparent 100%
        );

    box-shadow:
        0 0 25px
        rgba(95, 218, 198, 0.26);
}

.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(300px, 1.35fr)
        minmax(125px, 0.48fr)
        minmax(150px, 0.56fr)
        minmax(155px, 0.60fr)
        minmax(175px, 0.62fr);

    gap:
        30px;

    align-items:
        start;
}

/*=============================================
               Footer Main End
=============================================*/


/*=============================================
              Footer Brand Start
=============================================*/

.footer-brand {
    max-width:
        450px;
}

.footer-logo {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;
}

.footer-logo-symbol {
    position: relative;

    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}

.footer-logo-mark {
    position: relative;

    width:
        27px;

    height:
        27px;
}

.footer-logo-mark::before,
.footer-logo-mark::after {
    content: "";

    position: absolute;

    top:
        12px;

    width:
        19px;

    height:
        4px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #35ece5,
            #f63dcc
        );

    box-shadow:
        0 0 14px
        rgba(53, 236, 229, 0.46);
}

.footer-logo-mark::before {
    left:
        0;

    transform:
        rotate(48deg);
}

.footer-logo-mark::after {
    right:
        0;

    transform:
        rotate(-48deg);
}

.footer-logo-text {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;
}

.footer-logo-text strong {
    color:
        #ffffff;

    font-size:
        24px;

    font-weight:
        900;

    letter-spacing:
        0.05em;
}

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

    color:
        #94fff8;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        0.34em;
}

.footer-logo:hover
.footer-logo-mark::before,
.footer-logo:hover
.footer-logo-mark::after,
.footer-logo:focus-visible
.footer-logo-mark::before,
.footer-logo:focus-visible
.footer-logo-mark::after {
    background:
        linear-gradient(
            90deg,
            #ffffff,
            #5cecff,
            #a078ff
        );

    box-shadow:
        0 0 22px
        rgba(53, 236, 229, 0.56);
}

.footer-logo:focus-visible {
    outline:
        none;
}

.footer-brand-lead {
    margin:
        18px
        0
        0;

    color:
        #eef6f6;

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.58;
}

.footer-brand-note {
    margin:
        10px
        0
        0;

    color:
        #aebfc2;

    font-size:
        13px;

    line-height:
        1.58;
}

/*=============================================
               Footer Brand End
=============================================*/


/*=============================================
               Footer Badges Start
=============================================*/

.footer-badges {
    margin-top:
        16px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}

.footer-badges span {
    min-height:
        31px;

    padding:
        5px
        11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(100, 221, 199, 0.25);

    border-radius:
        999px;

    background:
        rgba(100, 221, 199, 0.055);

    color:
        #8cebd2;

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1;
}

.footer-badges span:first-child {
    border-color:
        rgba(255, 206, 88, 0.42);

    background:
        rgba(255, 206, 88, 0.065);

    color:
        #ffe18a;
}

/*=============================================
                Footer Badges End
=============================================*/


/*=============================================
               Footer Links Start
=============================================*/

.footer-links h3 {
    margin:
        2px
        0
        15px;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        900;

    line-height:
        1.2;
}

.footer-links ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.footer-links li + li {
    margin-top:
        9px;
}

.footer-links a {
    position:
        relative;

    display:
        inline-block;

    color:
        #b9c9cc;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.4;

    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:
        #64dec8;

    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:
        #88efd8;

    transform:
        translateX(5px);

    text-shadow:
        0 0 13px
        rgba(94, 226, 198, 0.23);

    outline:
        none;
}

.footer-links a:hover::before,
.footer-links a:focus-visible::before {
    opacity:
        1;

    transform:
        translateY(-50%)
        scale(1);
}


/*=============================================
             Footer Game Links Start
=============================================*/

.footer-games a:hover,
.footer-games a:focus-visible {
    color:
        #77cfff;
}

.footer-games a:hover::before,
.footer-games a:focus-visible::before {
    background:
        #68c5f4;
}

/*=============================================
              Footer Game Links End
=============================================*/


/*=============================================
            Footer Rewards Links Start
=============================================*/

.footer-rewards a:hover,
.footer-rewards a:focus-visible {
    color:
        #c6a0ff;
}

.footer-rewards a:hover::before,
.footer-rewards a:focus-visible::before {
    background:
        #b98cff;
}

/*=============================================
             Footer Rewards Links End
=============================================*/


/*=============================================
             Footer Legal Links Start
=============================================*/

.footer-legal a {
    color:
        #c9c2d6;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color:
        #ffd578;

    text-shadow:
        0 0 13px
        rgba(255, 203, 83, 0.20);
}

.footer-legal a:hover::before,
.footer-legal a:focus-visible::before {
    background:
        #ffd05d;
}

.footer-legal a[aria-current="page"] {
    color:
        #ffd578;
}

/*=============================================
              Footer Legal Links End
=============================================*/

/*=============================================
                Footer Links End
=============================================*/


/*=============================================
         Responsible Gambling Start
=============================================*/

.footer-responsible {
    margin-top:
        31px;

    padding:
        19px
        0;

    display:
        grid;

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

    gap:
        18px;

    align-items:
        center;

    border-top:
        1px solid
        rgba(133, 173, 185, 0.14);

    border-bottom:
        1px solid
        rgba(133, 173, 185, 0.14);
}

.footer-age {
    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border:
        2px solid
        #ffd05d;

    border-radius:
        50%;

    background:
        rgba(255, 208, 93, 0.055);

    color:
        #ffe18a;

    font-size:
        15px;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0 0 18px
        rgba(255, 205, 83, 0.12);
}

.footer-responsible-content {
    display:
        grid;

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

    gap:
        24px;

    align-items:
        center;
}

.footer-responsible-content strong {
    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        900;

    line-height:
        1.3;
}

.footer-responsible-content p {
    margin:
        0;

    color:
        #b7c8cb;

    font-size:
        13px;

    line-height:
        1.58;
}

.footer-responsible-content a {
    color:
        #ffe08a;

    font-weight:
        900;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}

.footer-responsible-content a:hover,
.footer-responsible-content a:focus-visible {
    color:
        #ffffff;

    outline:
        none;
}

/*=============================================
          Responsible Gambling End
=============================================*/


/*=============================================
              Footer Bottom Start
=============================================*/

.footer-bottom {
    padding-top:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;
}

.footer-bottom p {
    margin:
        0;

    color:
        #80979d;

    font-size:
        12px;

    line-height:
        1.45;
}

.footer-bottom-note {
    max-width:
        680px;

    text-align:
        right;
}

/*=============================================
               Footer Bottom End
=============================================*/


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

@media (max-width: 1180px) {

    .footer-main {
        grid-template-columns:
            minmax(280px, 1.2fr)
            repeat(
                2,
                minmax(150px, 0.55fr)
            );

        gap:
            32px
            38px;
    }

    .footer-brand {
        grid-row:
            span 2;
    }

}


@media (max-width: 900px) {

    .footer-main {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            30px
            40px;
    }

    .footer-brand {
        grid-column:
            1 / -1;

        grid-row:
            auto;

        max-width:
            720px;
    }

    .footer-responsible-content {
        grid-template-columns:
            1fr;

        gap:
            5px;
    }

}


@media (max-width: 620px) {

    .site-footer {
        padding:
            36px
            14px
            17px;
    }

    .footer-main {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            28px
            20px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-brand-lead {
        font-size:
            14px;
    }

    .footer-brand-note {
        font-size:
            13px;
    }

    .footer-links h3 {
        font-size:
            15px;
    }

    .footer-links a {
        font-size:
            13px;
    }

    .footer-responsible {
        grid-template-columns:
            47px
            minmax(0, 1fr);

        gap:
            13px;
    }

    .footer-age {
        width:
            47px;

        height:
            47px;
    }

    .footer-responsible-content {
        grid-template-columns:
            1fr;
    }

    .footer-responsible-content p {
        font-size:
            12px;
    }

    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            7px;
    }

    .footer-bottom-note {
        text-align:
            left;
    }

}


@media (max-width: 430px) {

    .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:
        #dbe6e8;

    background:
        radial-gradient(
            circle at 88% 5%,
            rgba(141, 100, 255, 0.12),
            transparent 27%
        ),
        radial-gradient(
            circle at 8% 92%,
            rgba(53, 236, 229, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(246, 61, 204, 0.035),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #070915 0%,
            #0a111d 48%,
            #071318 100%
        );
}

.legal-page::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #35ece5,
            #8d64ff,
            #f4bd5b,
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(53, 236, 229, 0.22);

    pointer-events:
        none;
}

.legal-page-container {
    position:
        relative;

    z-index:
        1;

    width:
        min(
            100%,
            1100px
        );

    margin:
        0 auto;
}


/*=============================================
               Legal Header Start
=============================================*/

.legal-page-head {
    max-width:
        940px;

    margin:
        0 auto
        42px;

    padding:
        31px
        33px
        34px;

    border:
        1px solid
        rgba(119, 221, 214, 0.16);

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(53, 236, 229, 0.08),
            transparent 36%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(141, 100, 255, 0.08),
            transparent 36%
        ),
        rgba(12, 17, 31, 0.80);

    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:
        #74eee6;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}

.legal-page-head h1 {
    max-width:
        840px;

    margin:
        0;

    color:
        #ffffff;

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

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    font-weight:
        900;

    line-height:
        0.99;

    letter-spacing:
        -0.045em;
}

.legal-page-intro {
    max-width:
        870px;

    margin:
        20px
        0
        0;

    color:
        #c3d1d5;

    font-size:
        16px;

    font-weight:
        500;

    line-height:
        1.7;
}

.legal-page-intro strong {
    color:
        #ffffff;
}

.legal-last-updated {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin:
        20px
        0
        0;

    padding:
        8px
        12px;

    border:
        1px solid
        rgba(244, 189, 91, 0.22);

    border-radius:
        999px;

    background:
        rgba(244, 189, 91, 0.065);

    color:
        #cbbd9d;

    font-size:
        11px;

    font-weight:
        800;
}

.legal-last-updated span {
    color:
        #ffe08a;

    font-weight:
        900;
}

/*=============================================
                Legal Header End
=============================================*/


/*=============================================
              Legal Content Start
=============================================*/

.legal-content {
    width:
        min(
            100%,
            940px
        );

    margin:
        0 auto;
}

.legal-section {
    position:
        relative;

    padding:
        29px
        31px;

    border:
        1px solid
        rgba(129, 160, 174, 0.13);

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 24, 37, 0.88),
            rgba(10, 18, 29, 0.91)
        );

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.12),
        inset 0 1px 0
        rgba(255, 255, 255, 0.025);
}

.legal-section + .legal-section {
    margin-top:
        13px;
}

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

    position:
        absolute;

    top:
        0;

    left:
        30px;

    width:
        54px;

    height:
        2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #35ece5,
            #8d64ff,
            #f4bd5b
        );
}

.legal-section h2 {
    max-width:
        800px;

    margin:
        0;

    color:
        #ffffff;

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

    font-size:
        clamp(
            23px,
            2.2vw,
            31px
        );

    font-weight:
        900;

    line-height:
        1.12;

    letter-spacing:
        -0.02em;
}

.legal-section h3 {
    margin:
        22px
        0
        0;

    color:
        #dff9f6;

    font-size:
        18px;

    font-weight:
        900;
}

.legal-section p {
    margin:
        13px
        0
        0;

    color:
        #b8c9cd;

    font-size:
        14px;

    line-height:
        1.72;
}

.legal-section p + p {
    margin-top:
        11px;
}

.legal-section ul,
.legal-section ol {
    margin:
        14px
        0
        0;

    padding-left:
        22px;

    color:
        #b8c9cd;

    font-size:
        14px;

    line-height:
        1.72;
}

.legal-section li + li {
    margin-top:
        6px;
}

.legal-section strong {
    color:
        #ffffff;
}

/*=============================================
               Legal Content End
=============================================*/


/*=============================================
            Legal Internal Links Start
=============================================*/

.legal-section a {
    color:
        #7feee3;

    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 Internal Links End
=============================================*/


/*=============================================
              Legal Notice Start
=============================================*/

.legal-notice,
.legal-highlight,
.legal-warning {
    margin-top:
        15px;

    padding:
        15px
        17px;

    border-left:
        3px solid
        #35ece5;

    border-radius:
        0
        10px
        10px
        0;

    background:
        rgba(53, 236, 229, 0.045);
}

.legal-warning {
    border-left-color:
        #ffd05e;

    background:
        rgba(255, 208, 94, 0.045);
}

.legal-highlight {
    border-left-color:
        #8d64ff;

    background:
        rgba(141, 100, 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:
        #ffd578;

    font-weight:
        900;
}

/*=============================================
            Current Legal Page End
=============================================*/


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

@media (max-width: 900px) {

    .legal-page {
        padding:
            62px
            18px
            76px;
    }

    .legal-page-container {
        width:
            min(
                100%,
                920px
            );
    }

    .legal-page-head,
    .legal-content {
        max-width:
            100%;
    }

}


@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;

        line-height:
            1.65;
    }

    .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:
            13px;

        line-height:
            1.68;
    }

}

/*=============================================
              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;
    letter-spacing: -0.25px !important;
}

.tournaments-site-switcher-button[data-section-target="tournaments"]
.tournaments-site-switcher-copy {
    transform: translateX(-2px);
}

.tournaments-site-navigation.is-floating {
    left:
        max(
            10px,
            calc(50% - 680px - 184px)
        ) !important;
}

.tournaments-site-navigation.is-at-bottom {
    left: -184px !important;
}


/* Keep the corrected size at the intermediate desktop width */
@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: 12px !important;
        letter-spacing: -0.35px !important;
    }

    .tournaments-site-switcher-copy small {
        font-size: 10px !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
=============================================*/