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

:root{
    --bg:#0a090d;
    --bg-soft:#190d2a;
    --panel:#160f25;
    --panel-light:#291642;
    --text:#f7f3ff;
    --muted:#a99bb9;
    --accent:#8641ff;
    --accent-dark:#7136c7;
    --line:rgba(255,255,255,.09);
    --radius:20px;
    --container:1180px;
    --header:78px;
}

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Manrope",sans-serif;
    line-height:1.7;
    overflow-x:hidden;
}

body,
button,
a{
    -webkit-tap-highlight-color:transparent;
}

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

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

button,
a{
    font:inherit;
}

button{
    cursor:pointer;
}

::selection{
    background:var(--accent);
    color:#fff;
}


/* =========================================================
   COMMON
========================================================= */

.site-shell{
    min-height:100vh;
}

.content-area{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
}

.content-article{
    width:100%;
}

.content-block{
    padding:20px 0;
    scroll-margin-top:90px;
}

.content-block--wide{
    max-width:100%;
}

.section-kicker{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.section-kicker__line{
    width:30px;
    height:1px;
    background:var(--accent);
}

.content-heading{
    max-width:780px;
    margin:0 0 24px;
    font-size:clamp(32px,4vw,54px);
    line-height:1.12;
    letter-spacing:-.04em;
}

.content-lead{
    max-width:780px;
    color:#d1c7dc;
    font-size:18px;
}

.content-block p{
    max-width:820px;
    color:var(--muted);
}

.content-block h3{
    margin:45px 0 15px;
    font-size:26px;
    line-height:1.25;
}


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

.topbar{
    position:fixed;
    inset:0 0 auto;
    height:var(--header);
    z-index:1000;
    background:rgba(18,9,31,.82);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px);
}

.topbar__inner{
    width:min(calc(100% - 40px),var(--container));
    height:100%;
    margin:auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:30px;
}

.brandmark{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    font-weight:800;
    letter-spacing:.08em;
}

.brandmark__symbol{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    background:var(--accent);
    color:#fff;
    font-size:18px;
}

.brandmark__name{
    font-size:15px;
}

.mainnav{
    display:flex;
    align-items:center;
    gap:28px;
}

.mainnav__link{
    position:relative;
    padding:28px 0;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    transition:color .25s;
}

.mainnav__link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s;
}

.mainnav__link:hover,
.mainnav__link.is-current{
    color:#fff;
}

.mainnav__link.is-current::after{
    transform:scaleX(1);
}

.topbar__action{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    font-size:13px;
    font-weight:800;
    transition:transform .25s,background .25s;
}

.topbar__action:hover{
    transform:translateY(-2px);
    background:var(--accent-dark);
}

.topbar__action-arrow{
    font-size:17px;
}


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

.intro-hero{
    position:relative;
    min-height:760px;
    margin-top:var(--header);
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
}

.intro-hero__media{
    position:absolute;
    inset:0;
    z-index:-3;
}

.intro-hero__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.intro-hero:hover .intro-hero__media img{
    transform:scale(1.035);
}

.intro-hero__veil{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(90deg,
            rgba(18,9,31,.96) 0%,
            rgba(18,9,31,.72) 42%,
            rgba(18,9,31,.28) 100%
        ),
        linear-gradient(0deg,
            rgba(18,9,31,.7),
            transparent 70%
        );
}

.intro-hero__orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(80px);
    opacity:.22;
    z-index:-1;
}

.intro-hero__orb--one{
    width:300px;
    height:300px;
    right:10%;
    top:12%;
    background:var(--accent);
}

.intro-hero__orb--two{
    width:220px;
    height:220px;
    left:35%;
    bottom:-80px;
    background:#fff;
}

.intro-hero__content{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
    padding:90px 0;
}

.intro-hero__eyebrow{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:22px;
    color:#d7cbe4;
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.intro-hero__status{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#63e69a;
    box-shadow:0 0 14px #63e69a;
}

.intro-hero__title{
    max-width:720px;
    margin:0;
    font-size:clamp(46px,6vw,82px);
    line-height:.98;
    letter-spacing:-.055em;
}

.intro-hero__title strong{
    display:block;
    color:var(--accent);
    font-weight:800;
}

.intro-hero__description{
    max-width:620px;
    margin:28px 0 0;
    color:#d1c7dc;
    font-size:17px;
}

.intro-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:34px;
}

.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:52px;
    padding:0 22px;
    border-radius:13px;
    font-size:13px;
    font-weight:800;
    transition:transform .25s,background .25s,border-color .25s;
}

.cta:hover{
    transform:translateY(-2px);
}

.cta--primary{
    background:var(--accent);
    color:#fff;
}

.cta--primary:hover{
    background:var(--accent-dark);
}

.cta--ghost{
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.05);
    color:#fff;
    backdrop-filter:blur(10px);
}

.cta--ghost:hover{
    background:rgba(255,255,255,.1);
}

.cta__icon{
    font-size:18px;
}

.intro-hero__meta{
    display:flex;
    gap:35px;
    margin-top:65px;
}

.hero-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.hero-meta__value{
    font-size:21px;
    font-weight:800;
}

.hero-meta__label{
    color:var(--muted);
    font-size:11px;
}

/* =========================================================
   QUICK NAV
========================================================= */

.quick-nav{
    border-bottom:1px solid var(--line);
    background:var(--bg-soft);
}

.quick-nav__wrap{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
    display:flex;
    align-items:center;
    gap:35px;
    min-height:82px;
}

.quick-nav__heading{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.quick-nav__caption{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.quick-nav__counter{
    color:var(--muted);
    font-size:10px;
}

.quick-nav__rail{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--accent) transparent;
}

.quick-nav__rail::-webkit-scrollbar{
    height:3px;
}

.quick-nav__rail::-webkit-scrollbar-track{
    background:transparent;
}

.quick-nav__rail::-webkit-scrollbar-thumb{
    background:var(--accent);
    border-radius:10px;
}

.quick-nav__item{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    transition:.25s;
}

.quick-nav__item:hover,
.quick-nav__item.is-active{
    border-color:rgba(155,92,255,.45);
    background:rgba(155,92,255,.1);
    color:#fff;
}


/* =========================================================
   FACT STRIP
========================================================= */

.fact-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin:20px 0 10px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--panel);
}

.fact-strip__item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:24px;
}

.fact-strip__item + .fact-strip__item{
    border-left:1px solid var(--line);
}

.fact-strip__icon{
    display:grid;
    place-items:center;
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(155,92,255,.12);
    color:var(--accent);
    font-size:14px;
    font-weight:800;
}

.fact-strip strong{
    display:block;
    font-size:13px;
}

.fact-strip small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
}


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

.data-table-wrap{
    width:100%;
    margin-top:35px;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
    -webkit-overflow-scrolling:touch;
}

.data-table{
    width:100%;
    min-width:620px;
    border-collapse:collapse;
}

.data-table th,
.data-table td{
    padding:18px 22px;
    border-bottom:1px solid var(--line);
    text-align:left;
    font-size:13px;
}

.data-table th{
    color:#fff;
    background:rgba(255,255,255,.035);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.data-table td{
    color:var(--muted);
}

.data-table td:first-child{
    width:35%;
    color:#eee8f4;
    font-weight:700;
}

.data-table tr:last-child td{
    border-bottom:0;
}

.data-table tbody tr{
    transition:background .2s;
}

.data-table tbody tr:hover{
    background:rgba(155,92,255,.045);
}



/* =========================================================
   GAMES CTA
========================================================= */

.games-cta{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    min-height:300px;
    margin:0 0 50px;
    padding:50px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:
        linear-gradient(
            115deg,
            var(--panel-light),
            var(--panel)
        );
}

.games-cta__content{
    position:relative;
    z-index:1;
    max-width:600px;
}

.games-cta__label{
    display:block;
    margin-bottom:14px;
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.cta-h2{
    margin:0;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.04em;
}

.games-cta p{
    max-width:520px;
    margin:18px 0 25px;
    color:var(--muted);
    font-size:14px;
}

.games-cta__decor{
    position:absolute;
    right:-20px;
    top:50%;
    color:rgba(255,255,255,.025);
    font-size:130px;
    font-weight:800;
    letter-spacing:-.08em;
    transform:translateY(-50%);
    pointer-events:none;
}


/* =========================================================
   EDITORIAL BLOCK
========================================================= */

.editorial-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:70px;
    align-items:start;
}

.editorial-layout__main p{
    max-width:820px;
}

.editorial-note{
    position:sticky;
    top:110px;
    padding:25px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
}

.editorial-note__top,
.editorial-note__bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.editorial-note__number{
    color:var(--accent);
    font-size:25px;
    font-weight:800;
}

.editorial-note__caption{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}

.editorial-note__line{
    height:1px;
    margin:20px 0;
    background:var(--line);
}

.editorial-note p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.editorial-note__bottom{
    margin-top:35px;
    color:#fff;
    font-size:10px;
    font-weight:800;
}


/* =========================================================
   RESPONSIBLE GAMING
========================================================= */

.responsible-block{
    padding:0 0 50px;
    scroll-margin-top:90px;
}

.responsible-block__inner{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:50px;
    padding:50px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius);
    background:var(--panel);
}

.responsible-block__mark{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    color:var(--accent);
    font-size:72px;
    font-weight:800;
    line-height:1;
}

.responsible-block__content h2{
    max-width:650px;
    margin:0 0 20px;
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.04em;
}

.responsible-block__content p{
    max-width:720px;
    margin:10px 0;
    color:var(--muted);
    font-size:14px;
}

.responsible-block__rules{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:28px;
}

.responsible-block__rules span{
    padding:9px 12px;
    border:1px solid var(--line);
    border-radius:9px;
    color:#d9d0e4;
    font-size:10px;
    font-weight:700;
}
/* =========================================================
   FOOTER
========================================================= */

.site-footer{
    border-top:1px solid var(--line);
    background:#0e0718;
    scroll-margin-top:90px;
}

.site-footer__main{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    padding:70px 0 45px;
}

.brandmark--footer{
    margin-bottom:18px;
}

.site-footer__description{
    max-width:360px;
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.site-footer__warning{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.site-footer__warning-icon{
    display:grid;
    place-items:center;
    flex:0 0 50px;
    width:50px;
    height:50px;
    border:1px solid rgba(155,92,255,.3);
    border-radius:14px;
    color:var(--accent);
    font-size:15px;
    font-weight:800;
}

.site-footer__warning p{
    max-width:430px;
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.site-footer__navigation{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.site-footer__navigation a{
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    transition:color .2s;
}

.site-footer__navigation a:hover{
    color:#fff;
}

.site-footer__bottom{
    width:min(calc(100% - 40px),var(--container));
    margin:auto;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 0 110px;
    color:#766a84;
    font-size:10px;
}


/* =========================================================
   FIXED BOTTOM ACTIONS
========================================================= */

.bottom-actions{
    position:fixed;
    left:50%;
    bottom:20px;
    z-index:900;
    width:min(calc(100% - 40px),560px);
    transform:translateX(-50%);
}

.bottom-actions__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:17px;
    background:rgba(25,13,42,.9);
    box-shadow:0 15px 50px rgba(0,0,0,.4);
    backdrop-filter:blur(18px);
}

.bottom-actions__button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:48px;
    padding:0 15px;
    border-radius:11px;
    font-size:11px;
    font-weight:800;
    transition:.25s;
}

.bottom-actions__button--primary{
    background:var(--accent);
    color:#fff;
}

.bottom-actions__button--primary:hover{
    background:var(--accent-dark);
}

.bottom-actions__button--secondary{
    background:rgba(255,255,255,.05);
    color:#eee;
}

.bottom-actions__button--secondary:hover{
    background:rgba(255,255,255,.1);
}

.bottom-actions__icon{
    font-size:14px;
}

.bottom-actions__arrow{
    font-size:17px;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.backtotop{
    position:fixed;
    right:25px;
    bottom:95px;
    z-index:800;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(25,13,42,.9);
    color:#fff;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.25s;
    backdrop-filter:blur(12px);
}

.backtotop.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.backtotop:hover{
    border-color:var(--accent);
    color:var(--accent);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1000px){

    .topbar__inner{
        grid-template-columns:1fr auto;
    }

    .mainnav{
        display:none;
    }

    .intro-hero{
        min-height:680px;
    }

    .intro-hero__side-label{
        display:none;
    }

    .editorial-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .editorial-note{
        position:static;
    }

    .responsible-block__inner{
        grid-template-columns:100px minmax(0,1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    :root{
        --header:68px;
    }

    html{
        scroll-padding-top:82px;
    }

    .content-area,
    .topbar__inner,
    .quick-nav__wrap,
    .site-footer__main,
    .site-footer__navigation,
    .site-footer__bottom,
    .intro-hero__content{
        width:calc(100% - 28px);
    }

    .topbar__inner{
        grid-template-columns:1fr auto;
        gap:12px;
    }

    .brandmark__symbol{
        width:32px;
        height:32px;
        border-radius:9px;
    }

    .brandmark__name{
        font-size:13px;
    }

    .topbar__action{
        padding:10px 13px;
        border-radius:10px;
        font-size:11px;
    }

    .topbar__action-arrow{
        display:none;
    }


    /* HERO */

    .intro-hero{
        min-height:650px;
        margin-top:var(--header);
        align-items:flex-end;
    }

    .intro-hero__media img{
        object-position:center;
    }

    .intro-hero__veil{
        background:
            linear-gradient(
                180deg,
                rgba(18,9,31,.6),
                rgba(18,9,31,.96) 85%
            );
    }

    .intro-hero__content{
        padding:80px 0 85px;
    }

    .intro-hero__title{
        font-size:clamp(40px,12vw,58px);
    }

    .intro-hero__description{
        font-size:14px;
        line-height:1.6;
    }

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

    .cta{
        width:100%;
    }

    .intro-hero__meta{
        gap:0;
        justify-content:space-between;
        margin-top:40px;
    }

    .hero-meta__value{
        font-size:18px;
    }

    .hero-meta__label{
        font-size:9px;
    }

    .intro-hero__scroll{
        display:none;
    }


    /* QUICK NAV */

    .quick-nav__wrap{
        display:block;
        padding:18px 0;
    }

    .quick-nav__heading{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        margin-bottom:12px;
    }

    .quick-nav__rail{
        margin-right:-14px;
        padding-right:14px;
        padding-bottom:4px;
    }


    /* CONTENT */

    .content-block,
    .games-section{
        padding:40px 0;
    }

    .content-heading{
        font-size:34px;
    }

    .content-lead{
        font-size:15px;
    }


    /* FACTS */

    .fact-strip{
        grid-template-columns:1fr;
    }

    .fact-strip__item{
        padding:18px;
    }

    .fact-strip__item + .fact-strip__item{
        border-top:1px solid var(--line);
        border-left:0;
    }


    /* TABLE */

    .data-table th,
    .data-table td{
        padding:15px;
    }


    /* GAMES */

    .games-section__heading{
        display:block;
    }

    .games-section__heading .text-link{
        margin-top:20px;
    }

    .games-catalog{
        grid-template-columns:1fr;
    }

    .game-tile__visual{
        height:230px;
    }

    .game-tile__body{
        min-height:200px;
        padding:20px;
    }


    /* CTA */

    .games-cta{
        min-height:340px;
        margin-bottom:50px;
        padding:30px 24px;
    }

    .games-cta__decor{
        font-size:80px;
        right:-15px;
    }


    /* EDITORIAL */

    .editorial-layout{
        gap:25px;
    }

    .editorial-note{
        padding:20px;
    }


    /* RESPONSIBLE */

    .responsible-block{
        padding-bottom:50px;
    }

    .responsible-block__inner{
        grid-template-columns:1fr;
        gap:25px;
        padding:28px 22px;
    }

    .responsible-block__mark{
        justify-content:flex-start;
        font-size:54px;
    }

    .responsible-block__content h2{
        font-size:32px;
    }


    /* FOOTER */

    .site-footer__main{
        grid-template-columns:1fr;
        gap:35px;
        padding:50px 0 30px;
    }

    .site-footer__navigation{
        gap:15px 20px;
    }

    .site-footer__bottom{
        flex-direction:column;
        padding-bottom:100px;
    }


    /* BOTTOM BAR */

    .bottom-actions{
        left:0;
        bottom:0;
        width:100%;
        transform:none;
        padding:
            8px
            8px
            calc(8px + env(safe-area-inset-bottom));
    }

    .bottom-actions__inner{
        width:100%;
        padding:6px;
        border-radius:15px;
    }

    .bottom-actions__button{
        min-height:48px;
        font-size:10px;
    }


    /* TOP BUTTON */

    .backtotop{
        right:14px;
        bottom:78px;
        width:40px;
        height:40px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:380px){

    .topbar__action{
        padding:9px 11px;
    }

    .intro-hero__title{
        font-size:38px;
    }

    .intro-hero__meta{
        gap:12px;
    }

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

    .hero-meta__label{
        font-size:8px;
    }

    .bottom-actions__button{
        padding:0 8px;
        font-size:9px;
    }

    .bottom-actions__icon{
        display:none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}