@font-face{
  font-family:"Figtree";
  src:url("/fonts/figtree-v9-latin-regular.woff2") format("woff2"), url("/fonts/figtree-v9-latin-regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Figtree";
  src:url("/fonts/figtree-v9-latin-500.woff2") format("woff2"), url("/fonts/figtree-v9-latin-500.woff") format("woff");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Figtree";
  src:url("/fonts/figtree-v9-latin-600.woff2") format("woff2"), url("/fonts/figtree-v9-latin-600.woff") format("woff");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Figtree";
  src:url("/fonts/figtree-v9-latin-700.woff2") format("woff2"), url("/fonts/figtree-v9-latin-700.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@keyframes loader-0{

    0%{
        opacity:0;
    }

    100%{
        opacity:0.9;
    }
}

@keyframes loader-1{

    0%,
    100%{
        background-size:20% 100%;
    }

    33%,
    66%{
        background-size:20% 40%;
    }
}

@keyframes loader-2{

    0%,
    33%{
        background-position:0 0, 50% 100%, 100% 0;
    }

    66%,
    100%{
        background-position:0 100%, 50% 0, 100% 100%;
    }
}

@keyframes coockie-in{
    0%{
        transform:translateY(200px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes stepper-enter{
    0%{
        opacity:0;
        clip-path:inset(0 100% 0 0);
    }

    100%{
        opacity:1;
        clip-path:inset(0 0 0 0);
    }
}

@keyframes intro-title-in{
    0%{
        opacity:0;
        transform:translateY(1.25rem);
        text-shadow:0 0 0 rgba(169, 145, 255, 0);
    }

    55%{
        opacity:1;
        transform:translateY(-0.15rem);
        text-shadow:0 0 2rem rgba(169, 145, 255, 0.55);
    }

    100%{
        opacity:1;
        transform:translateY(0);
        text-shadow:0 0 0 rgba(169, 145, 255, 0);
    }
}

@keyframes intro-subtitle-in{
    0%{
        opacity:0;
        transform:translateY(0.75rem);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes btn-border-spin{
    to{
        transform:translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes btn-shimmer{
    0%{
        background-position:200% center, 0 0;
    }

    50%{
        background-position:-100% center, 0 0;
    }

    100%{
        background-position:200% center, 0 0;
    }
}

@keyframes step-image-sway{
    0%, 100%{
        transform:translateX(-0.15rem);
    }

    50%{
        transform:translateX(0.15rem);
    }
}

@keyframes step-image-drift{
    0%, 100%{
        transform:translateY(0.15rem) scale(0.985);
    }

    50%{
        transform:translateY(-0.3rem) scale(1.035);
    }
}

@keyframes step-arrow-shift-1{
    0%, 3%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }

    6%, 50%{
        transform:translateX(0.3rem) scale(1.1);
        opacity:1;
    }

    51%, 100%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }
}

@keyframes step-arrow-shift-2{
    0%, 9%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }

    12%, 48%{
        transform:translateX(0.3rem) scale(1.1);
        opacity:1;
    }

    49%, 100%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }
}

@keyframes step-arrow-shift-3{
    0%, 15%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }

    18%, 46%{
        transform:translateX(0.3rem) scale(1.1);
        opacity:1;
    }

    47%, 100%{
        transform:translateX(0) scale(1);
        opacity:0.85;
    }
}

@keyframes step-glow-1{
    0%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }

    3%, 51%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 2rem rgba(111, 82, 240, 0.22), 0 0 1.5rem rgba(169, 145, 255, 0.5), 0 0 3.25rem rgba(111, 82, 240, 0.4);
    }

    52%, 100%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }
}

@keyframes step-glow-2{
    0%, 6%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }

    9%, 49%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 2rem rgba(111, 82, 240, 0.22), 0 0 1.5rem rgba(169, 145, 255, 0.5), 0 0 3.25rem rgba(111, 82, 240, 0.4);
    }

    50%, 100%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }
}

@keyframes step-glow-3{
    0%, 12%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }

    15%, 47%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 2rem rgba(111, 82, 240, 0.22), 0 0 1.5rem rgba(169, 145, 255, 0.5), 0 0 3.25rem rgba(111, 82, 240, 0.4);
    }

    48%, 100%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }
}

@keyframes step-glow-4{
    0%, 18%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }

    21%, 45%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 2rem rgba(111, 82, 240, 0.22), 0 0 1.5rem rgba(169, 145, 255, 0.5), 0 0 3.25rem rgba(111, 82, 240, 0.4);
    }

    46%, 100%{
        box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08), 0 0 1.5rem rgba(169, 145, 255, 0), 0 0 3.25rem rgba(111, 82, 240, 0);
    }
}

@keyframes step-lift-1{
    0%{
        transform:translateY(0);
    }

    3%{
        transform:translateY(-0.4rem);
    }

    6%, 100%{
        transform:translateY(0);
    }
}

@keyframes step-lift-2{
    0%, 6%{
        transform:translateY(0);
    }

    9%{
        transform:translateY(-0.4rem);
    }

    12%, 100%{
        transform:translateY(0);
    }
}

@keyframes step-lift-3{
    0%, 12%{
        transform:translateY(0);
    }

    15%{
        transform:translateY(-0.4rem);
    }

    18%, 100%{
        transform:translateY(0);
    }
}

@keyframes step-lift-4{
    0%, 18%{
        transform:translateY(0);
    }

    21%{
        transform:translateY(-0.4rem);
    }

    24%, 100%{
        transform:translateY(0);
    }
}

@keyframes cases-loop-in{
    0%{
        opacity:0;
        transform:translateY(1.25rem) scale(0.85);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes cases-loop-scroll{
    from{
        transform:translateX(calc(50vw - var(--case-w) / 2 - var(--set-width)));
    }

    to{
        transform:translateX(calc(50vw - var(--case-w) / 2 - var(--set-width) * 2));
    }
}

@keyframes bg-glows-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes bg-glows-pulse{
    0%{ opacity:1;    filter:blur(50px) brightness(1); }
    50%{ opacity:0.75; filter:blur(50px) brightness(0.85); }
    100%{ opacity:1;    filter:blur(50px) brightness(1); }
}

@keyframes btn-preview-in{
    0%{
        opacity:0;
        transform:translateY(1.5rem) scale(0.92);
    }

    55%{
        opacity:1;
        filter:drop-shadow(0 0 1.5rem rgba(169, 145, 255, 0.55)) drop-shadow(0 0 3rem rgba(111, 82, 240, 0.45));
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.loader{
    position:fixed;
    inset:0;
    z-index:var(--z-overlay);
    transition:opacity 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(50% 55.69% at 50% 48.98%, #343442 0%, #0E1016 100%);
}

.loader .loader__inner{
        width:240px;
        aspect-ratio:1;
        --c:no-repeat linear-gradient(var(--color-violet-1) 0 0);
        background:var(--c), var(--c), var(--c);
        animation:loader-0 1s forwards, loader-1 1s infinite, loader-2 1s infinite;
    }

@media (max-width: 767px){

.loader .loader__inner{
            width:90px;
    }
        }

@media (min-width: 1024px) and (max-width: 1919px){

.loader .loader__inner{
            width:200px;
    }
        }

.loader::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:radial-gradient(89.91% 35.1% at 50% 64.9%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.24) 10%), linear-gradient(180deg, rgba(0, 0, 0, 0.18) 10%, rgba(0, 0, 0, 0.5) 99.81%);
}

.loader.hide{
    opacity:0;
    pointer-events:none;
}

html{
    scrollbar-width:none;
    -ms-overflow-style:none;

}

html::-webkit-scrollbar{
    display:none;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav{
    display:block;
}

body{
    line-height:1;
}

ol,
ul{
    list-style:none;
}

blockquote,
q{
    quotes:none;
}

blockquote::after,
blockquote::before,
q::after,
q::before{
    content:"";
    content:none;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

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

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

button{
    cursor:pointer;
    border:none;
    background:none;
    font:inherit;
    color:inherit;
}

:root{
    --font-primary:"Figtree", sans-serif;
    --color-bg:#0E1016;

    --color-white-1:#FFFFFF;
    --color-white-2:rgba(255, 255, 255, 0.625);
    --color-white-3:rgba(255, 255, 255, 0.425);
    --color-white-4:rgba(255, 255, 255, 0.225);

    --color-black-1:#0E1016;

    --color-violet-1:#6F52F0;

    --footer-height-dk:80px;
    --footer-height-mb:90px;
    --z-consent:10000;
    --z-logo:9000;
    --z-overlay:8000;
    --z-popup:7000;
    --z-content:1;
}

body{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    font-family:var(--font-primary);
    color:var(--color-white-1);
    background-color:#000;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.65) 30%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(ellipse 80% 70% at 50% 55%, rgba(0, 0, 0, 0) 0%, rgba(21, 4, 27, 0.55) 55%, rgba(11, 3, 14, 0.85) 85%, rgba(28, 10, 39, 0.95) 100%), url('/images/bg-main.avif');
    background-size:cover, cover, cover;
    background-position:center center, center center, center center;
    background-repeat:no-repeat, no-repeat, no-repeat;
}

.bg-glows{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.bg-glows__item{
    position:absolute;
    left:50%;
    top:82%;
    transform:translate(-50%, -50%);
    border-radius:50%;
    filter:blur(50px);
    pointer-events:none;
    will-change:filter, opacity;

    opacity:0;
}

@media (max-width: 767px){

.bg-glows__item{
        top:85%;
}
    }

.body:has(.building-screen.show) .bg-glows__item{
    top:70% !important;
}

@media (max-width: 767px){

.body:has(.building-screen.show) .bg-glows__item{
        top:68% !important;
}
    }

.body:has(.roulette-screen.show) .bg-glows__item{
    top:75% !important;
    
}

@media (max-width: 767px){

.body:has(.roulette-screen.show) .bg-glows__item{
        top:70% !important;
    
}
    }

.body:has(.final-screen.show) .bg-glows__item{
    top:62% !important;
}

@media (max-width: 767px){

.body:has(.final-screen.show) .bg-glows__item{
        top:60% !important;
}
    }

body:has(.loader.hide) .bg-glows__item--3{
    animation:bg-glows-in 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) 2.15s both, bg-glows-pulse 9s ease-in-out 3.05s infinite;
}

body:has(.loader.hide) .bg-glows__item--2{
    animation:bg-glows-in 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) 2.45s both, bg-glows-pulse 7.5s ease-in-out 3.35s infinite;
}

body:has(.loader.hide) .bg-glows__item--1{
    animation:bg-glows-in 0.9s cubic-bezier(0.2, 0.7, 0.25, 1) 2.75s both, bg-glows-pulse 6s ease-in-out 3.65s infinite;
}

.bg-glows__item--1{
    width:68.9375rem;
    height:24.9375rem;
    background:linear-gradient(0deg,
            rgba(255, 255, 255, 0.025) 40%,
            rgba(255, 255, 255, 0.10) 45%,
            rgba(255, 255, 255, 0.325) 100%);
}

.bg-glows__item--2{
    width:112.5rem;
    height:22.5rem;
    background:linear-gradient(0deg,
            rgba(255, 255, 255, 0.025) 65%,
            rgba(255, 255, 255, 0.12) 100%);
}

.bg-glows__item--3{
    width:112.5rem;
    height:46.5625rem;
    background:linear-gradient(0deg,
            rgba(255, 255, 255, 0.005) 80%,
            rgba(255, 255, 255, 0.1) 100%);
}

.main{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    min-height:0;
    z-index:var(--z-content);
}

@media (max-width: 767px){

.main{
        overflow:hidden;
}
    }

.content{
    position:relative;
    width:100%;
    height:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    padding-top:clamp(2.5rem, 6vh, 5rem);
    min-height:0;
}

@media (max-width: 767px){

.content{
        overflow:hidden;
}
    }

.intro{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:clamp(0.5rem, 1vw, 1rem);
    width:100%;
    padding:0 1.5rem;
    -webkit-user-select:none;
            user-select:none;
    flex-shrink:0;
}

.intro__title--default{
    display:block;
}

.intro__title--final{
    display:none;
}

.intro__title-accent{
    color:var(--color-violet-1);
}

.intro__subtitle span{
        color:var(--color-violet-1);
        font-weight:600;
    }

.intro__subtitle--default{
    display:block;
}

.intro__subtitle--sb{
    display:none;
}

.intro__subtitle--nr{
    display:none;
}

.intro__title,
.intro__subtitle--default{
    opacity:0;
    will-change:opacity, transform;
}

body:has(.loader.hide) .intro__title{
    animation:intro-title-in 1.35s cubic-bezier(0.2, 0.7, 0.25, 1) 0.35s both;
}

body:has(.loader.hide) .intro__subtitle--default{
    animation:intro-subtitle-in 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.75s both;
}

.unselectable{
    user-select:none;
    -webkit-user-select:none;
}

.undraggable{
    -webkit-user-drag:none;
}

.text-selectable{
    user-select:text;
    -webkit-user-select:text;
}

.dk{
    display:block;
}

.mb{
    display:none;
}

@media (max-width: 767px){
    .dk{
        display:none;
    }

    .mb{
        display:block;
    }
}

a,
button,
input,
textarea{
    -webkit-appearance:none;
}

[data-stage]{
    display:none;
}

[data-stage].show{
    display:flex;
    flex-direction:column;
}

[data-section]{
    display:none;
}

[data-section].show{
    display:block;
}

[data-popup]{
    display:none;
}

[data-popup].show{
    display:flex;
}

[data-cookie="banner"].hide{
    display:none !important;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .content{
        padding-top:clamp(1rem, 4vh, 2.25rem);
    }

    .intro{
        gap:clamp(0.35rem, 0.5vh, 0.6rem);
    }
    .intro .text-title-main{
        font-size:clamp(2.5rem, 3.25vw + 0.6rem, 4rem);
    }

    .intro .text-subtitle-main{
        font-size:clamp(1rem, 0.6vw + 0.65rem, 1.375rem);
    }
}

@media (max-width: 767px){
    .content{
        padding-top:clamp(1rem, 3.5vh, 2rem);
    }

    .intro{
        gap:clamp(0.4rem, 1vh, 0.8rem);
        padding:0 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .content{
        padding-top:clamp(1rem, 3.5vh, 2rem);
    }

    .intro{
        gap:clamp(0.4rem, 0.7vh, 0.8rem);
        padding:0 clamp(1rem, 2vw, 1.5rem);
    }
    .intro .text-title-main{
        font-size:clamp(2.5rem, 4vw + 0.75rem, 3.5rem);
    }

    .intro .text-subtitle-main{
        font-size:clamp(1rem, 0.6vw + 0.7rem, 1.25rem);
    }
}

.text-terms-link{
    font-family:var(--font-primary);
    font-size:clamp(0.75rem, 0.194vw + 0.704rem, 1rem);
    font-style:normal;
    font-weight:400;
    line-height:1.2;
    letter-spacing:0.56px;
    text-transform:uppercase;
    color:var(--color-white-3);
}

.text-footer-info{
    font-family:var(--font-primary);
    font-size:clamp(0.5rem, 0.129vw + 0.47rem, 0.625rem);
    font-style:normal;
    font-weight:400;
    line-height:2;
    letter-spacing:0.32px;
    text-transform:uppercase;
    color:var(--color-white-3);
}

.text-title-main{
    font-family:var(--font-primary);
    font-size:clamp(2.5rem, 2.589vw + 1.893rem, 5rem);
    font-style:normal;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    color:var(--color-white-1);
    text-shadow:0 0 5px var(--color-black-1);
}

.text-subtitle-main{
    font-family:var(--font-primary);
    font-size:clamp(1rem, 0.777vw + 0.818rem, 1.75rem);
    font-style:normal;
    font-weight:400;
    line-height:1.15;
    color:var(--color-white-2);
    text-shadow:0 0 3px var(--color-black-1);
}

.text-title-step{
    font-family:var(--font-primary);
    font-size:clamp(1rem, 0.777vw + 0.818rem, 1.75rem);
    font-style:normal;
    font-weight:600;
    line-height:1;
    color:var(--color-white-1);
}

.text-subtitle-step{
    font-family:var(--font-primary);
    font-size:clamp(0.875rem, 0.259vw + 0.814rem, 1.125rem);
    font-style:normal;
    font-weight:400;
    line-height:1;
    color:var(--color-white-2);
}

.text-case-component-name{
    font-family:var(--font-primary);
    font-size:clamp(1.5rem, 1.165vw + 1.227rem, 2.625rem);
    font-style:normal;
    font-weight:500;
    line-height:1;
    color:var(--color-white-1);
    text-shadow:0 0 3px var(--color-white-2);
}

.text-case-summary{
    font-family:var(--font-primary);
    font-size:clamp(0.875rem, 0.906vw + 0.663rem, 1.75rem);
    font-style:normal;
    font-weight:400;
    line-height:1;
    color:var(--color-white-2);
    text-shadow:0 0 3px var(--color-black-1);
}

.text-case-build-name{
    font-family:var(--font-primary);
    font-size:clamp(2.5rem, 1.683vw + 2.106rem, 4.125rem);
    font-style:normal;
    font-weight:600;
    line-height:1;
    color:var(--color-white-1);
    text-shadow:0 0 5px var(--color-white-2);
}

.text-item-name{
    font-family:var(--font-primary);
    font-size:clamp(0.875rem, 0.129vw + 0.845rem, 1rem);
    font-style:normal;
    font-weight:400;
    line-height:1;
    color:var(--color-white-2);
}

.text-item-exterior{
    font-family:var(--font-primary);
    font-size:clamp(1.125rem, 0.777vw + 0.943rem, 1.875rem);
    font-style:normal;
    font-weight:600;
    line-height:1;
    color:var(--color-white-1);
}

.text-title-popup{
    font-family:var(--font-primary);
    font-size:clamp(2.5rem, 1.553vw + 2.136rem, 4rem);
    font-style:normal;
    font-weight:600;
    line-height:1;
    color:var(--color-white-1);
    -webkit-user-select:none;
            user-select:none;
}

.text-subtitle-popup{
    font-family:var(--font-primary);
    font-size:clamp(0.875rem, 0.388vw + 0.784rem, 1.25rem);
    font-style:normal;
    font-weight:400;
    line-height:1;
    color:var(--color-white-2);
    -webkit-user-select:none;
            user-select:none;
}

.text-subtitle-popup span{
        color:var(--color-white-1);
        font-weight:600;
    }

.text-btn{
    font-family:var(--font-primary);
    font-size:clamp(1.375rem, 0.518vw + 1.254rem, 2rem);
    font-style:normal;
    font-weight:500;
    line-height:1;
    color:var(--color-white-1);
    letter-spacing:0.4px;
}

.btn-preview{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:clamp(1rem, 1.3vw, 1.5rem) clamp(2.5rem, 4vw, 4.5rem);
    min-height:clamp(3.5rem, 5vw, 5rem);
    min-width:clamp(12rem, 18vw, 18rem);
    border:none;
    border-radius:45px;
    background:none;
    color:var(--color-white-1);
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    -webkit-user-select:none;
            user-select:none;
    overflow:hidden;
    z-index:0;
    transition:box-shadow 0.25s ease-out, filter 0.25s ease-out;

    opacity:0;
    will-change:opacity, transform, filter;
}

.btn-preview:active{
        transform:translateY(1px);
    }

.btn-preview:focus-visible{
        outline:2px solid var(--color-white-1);
        outline-offset:3px;
    }

.btn-preview:hover{
        box-shadow:0 0 0.5rem rgba(169, 145, 255, 0.55), 0 0 2.5rem rgba(111, 82, 240, 0.55), inset 0 0 3.75rem rgba(169, 145, 255, 0.25), inset 0 0 1.25rem rgba(169, 145, 255, 0.35);
    }

.btn-preview::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:300%;
    aspect-ratio:1;
    transform:translate(-50%, -50%);
    background:conic-gradient(#6F52F0,
            #a991ff,
            #d6c7ff,
            #8e73ff,
            #5a3de0,
            #b39dff,
            #6F52F0);
    animation:btn-border-spin 3.5s linear infinite;
    will-change:transform;
    z-index:-2;
}

.btn-preview::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:inherit;
    background:linear-gradient(110deg,
            transparent 25%,
            rgba(255, 255, 255, 0.14) 37%,
            rgba(255, 255, 255, 0.28) 42%,
            transparent 55%), linear-gradient(113.92deg, #8b6fff 0%, #5a3de0 100%);
    background-size:300% 100%, 100% 100%;
    animation:btn-shimmer 5.5s ease-in-out infinite;
    will-change:background-position;
    z-index:-1;
}

.btn-preview>*{
    position:relative;
    z-index:1;
}

body:has(.loader.hide) .btn-preview{
    animation:btn-preview-in 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 2.75s both;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .btn-preview{
        padding:clamp(0.85rem, 1vw, 1.2rem) clamp(2rem, 3vw, 3.5rem);
        min-height:clamp(3rem, 3.75vw, 4rem);
        min-width:clamp(11rem, 14vw, 14.5rem);
    }
    .btn-preview .text-btn{
        font-size:clamp(1.25rem, 0.45vw + 1.1rem, 1.625rem);
    }
}

.header{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	z-index:var(--z-logo);
	width:100%;
	padding:1.75rem 1.75rem;
	pointer-events:none;
	transition:opacity 1.25s ease;
}

@media (max-width: 767px){

.header{
		padding:0.6rem 0.6rem;
}
	}

@media (min-width: 768px) and (max-width: 1023px){

.header{
		padding:1.5rem;
}
	}

@media (min-width: 1024px) and (max-width: 1919px){

.header{
		padding:1.25rem;
}
	}

.header__logo{
	display:inline-flex;
	align-items:center;
	pointer-events:auto;
	filter:drop-shadow(1px 1px 0 #000000);
}

@media (min-width: 768px) and (max-width: 1023px){

.header__logo{
		padding:0rem 0.3rem;
}
	}

@media (--mobile-only){

.header__logo{
		padding:0.8rem 1.2rem;
}
	}

.header__logo-img{
	height:3.45rem;
}

@media (max-width: 767px){

.header__logo-img{
		height:1.9rem;
}
	}

@media (min-width: 768px) and (max-width: 1023px){

.header__logo-img{
		height:1.4rem;
}
	}

@media (min-width: 1024px) and (max-width: 1919px){

.header__logo-img{
		height:3rem;
}
	}

@media (min-width: 2560px){

.header__logo-img{
		height:3.75rem;
}
	}

@media (min-width: 3840px){

.header__logo-img{
		height:4rem;
}
	}

body.show .header{
	opacity:1;
}

.footer{
    position:relative;
    z-index:5001;
    width:100%;
    flex-shrink:0;
    background:transparent;
    padding:1.5rem clamp(1.5rem, 3vw, 3rem);
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    -webkit-user-select:none;
            user-select:none;
}

@media (max-width: 767px){

.footer{
        padding:0.5rem clamp(0.5rem, 2.5vw, 1rem);
        padding-bottom:calc(0.5rem + env(safe-area-inset-bottom, 0px));
}
    }

.footer .footer__content{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        gap:clamp(1rem, 2vw, 2rem);
    }

@media (max-width: 767px){

.footer .footer__content{
            flex-wrap:wrap;
            justify-content:center;
            gap:0.25rem 0.75rem;
    }
        }

.footer .footer__lang{
        display:none !important;
        align-items:center;
        gap:0.375rem;
        font-family:var(--font-primary);
        font-size:clamp(0.75rem, 0.194vw + 0.704rem, 1rem);
        font-weight:400;
        letter-spacing:0.56px;
        text-transform:uppercase;
        color:var(--color-white-3);
        cursor:pointer;
        transition:color 0.2s ease;
    }

:is(.footer .footer__lang)::after{
            content:"";
            width:0.5rem;
            height:0.5rem;
            border-right:1px solid currentColor;
            border-bottom:1px solid currentColor;
            transform:translateY(-2px) rotate(45deg);
            transition:transform 0.2s ease;
        }

:is(.footer .footer__lang):hover{
            color:var(--color-white-1);
        }

.footer .footer__terms{
        display:flex;
        align-items:center;
        gap:clamp(1rem, 2vw, 2.25rem);
        margin-right:auto;
    }

:is(.footer .footer__terms) a{
            transition:color 0.2s ease-out;
        }

:is(:is(.footer .footer__terms) a):hover{
                color:var(--color-white-2);
            }

@media (max-width: 767px){

.footer .footer__terms{
            margin-right:0;
            width:100%;
            justify-content:space-around;
            order:1;
            gap:clamp(0.4rem, 1.6vw, 0.7rem);
            font-size:clamp(0.6rem, 0.6vw + 0.4rem, 0.625rem);
            letter-spacing:0.24px;
            margin-bottom:clamp(0.25rem, 1vh, 0.5rem);
    }

            :is(.footer .footer__terms) a{
                white-space:nowrap;
            }
        }

.footer .footer__steam{
        display:flex;
        align-items:center;
        gap:clamp(0.75rem, 1.5vw, 1.5rem);
    }

:is(.footer .footer__steam) span{
            white-space:nowrap;
        }

:is(.footer .footer__steam) a{
            color:var(--color-white-2);
            transition:color 0.2s ease-out;
        }

:is(:is(.footer .footer__steam) a):hover{
                color:var(--color-white-1);
            }

@media (max-width: 767px){

.footer .footer__steam{
            justify-content:center;
            width:100%;
            order:2;
            gap:clamp(0.3rem, 1.5vw, 0.7rem);
            font-size:clamp(0.35rem, 1.2vw + 0.35rem, 0.45rem);
            line-height:1.4;
            letter-spacing:0.24px;
    }
        }

.footer .footer__copy{
        display:flex;
        align-items:center;
        gap:clamp(0.75rem, 1.5vw, 1.5rem);
    }

:is(.footer .footer__copy) span{
            white-space:nowrap;
        }

@media (max-width: 767px){

.footer .footer__copy{
            justify-content:center;
            width:100%;
            order:3;
            gap:clamp(0.4rem, 1.5vw, 0.7rem);
            font-size:clamp(0.35rem, 1.2vw + 0.35rem, 0.45rem);
            line-height:1.4;
            letter-spacing:0.24px;
    }
        }

@media (min-width: 768px) and (max-width: 1023px){
    .footer{
        padding:clamp(0.75rem, 1.5vh, 1.25rem) clamp(1rem, 2vw, 2rem);
    }

    .footer .footer__content{
        gap:clamp(0.75rem, 1.5vw, 1.5rem);
    }

    .footer .footer__terms{
        gap:clamp(0.85rem, 1.75vw, 1.75rem);
    }

    .footer .footer__steam{
        gap:clamp(0.5rem, 1.25vw, 1.25rem);
    }

    .footer .footer__copy{
        gap:clamp(0.5rem, 1.25vw, 1.25rem);
    }
}

.coockie-banner{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:var(--z-consent);
    background:radial-gradient(circle at left,
    rgb(10, 8, 22) 0%,
    rgb(27, 19, 62) 30%,
    rgb(51, 37, 107) 55%,
    rgb(31, 30, 39)    75%);
    padding:0.15rem 1rem;
    border-top:1px solid rgba(111, 82, 240, 0.3);
}

@media (max-width: 767px){

.coockie-banner{
        padding:1rem 2rem;
}
    }

@media (min-width: 1024px) and (max-width: 1919px){

.coockie-banner{
        padding:1rem 1rem;
}
    }

.coockie-banner{


    transform:translateY(300px);
}

.coockie-banner.show{
    display:block;
    animation:coockie-in 0.5s forwards ease-in-out;
    animation-delay:3.75s;
}

.coockie-banner__inner{
    max-width:1300px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

@media (max-width: 767px){

.coockie-banner__inner{
        flex-direction:column;
        text-align:center;
}
    }

.coockie-banner__inner h3{
        color:var(--color-violet-1);
        font-family:var(--font-primary);
        font-size:1rem;
        font-weight:700;
        line-height:normal;
        margin-bottom:10px;
        text-transform:uppercase;
        -webkit-user-select:none;
                user-select:none;
    }

@media (max-width: 767px){

.coockie-banner__inner h3{
            font-size:1.2rem;
            text-align:left;
    }
        }

.coockie-banner__text{
    flex:1;
    font-size: 1.1rem;
    line-height: 1.4;
    color:var(--color-white-2);
    max-width:1000px;
    font-family:var(--font-primary);
    -webkit-user-select:none;
            user-select:none;
}

@media (max-width: 767px){

.coockie-banner__text{
        text-align:left;
}
    }

.coockie-banner__link{
    color:var(--color-white-2);
    text-decoration:underline;
    font-weight:700;
}

.coockie-banner__link:hover{
        color:var(--color-white-1);
    }

.coockie-banner__btn{
    align-self: flex-end;
    transform: scale(0.7) !important;
    animation: none !important;
    opacity: 1 !important;
}

.coockie-banner__btn::after{
        animation:none !important;
    }

@media (max-width: 767px){

.coockie-banner__btn{
}
    }

body:has(.terms-backdrop){
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
}

body:has(.terms-backdrop) .main{
    overflow:visible;
    flex:1 0 auto;
}

body:has(.terms-backdrop){
    scrollbar-width:none;
    -ms-overflow-style:none;
}

body:has(.terms-backdrop)::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}

.terms-backdrop{
    width:100%;
}


.auth-popup{
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:clamp(1rem, 2vw, 2rem);
}

.auth-popup.show{
    display:flex;
}

.auth-popup__overlay{
    position:absolute;
    inset:0;
    background:rgba(6, 7, 20, 0.65);
    backdrop-filter:blur(14px);
    cursor:pointer;
    opacity:0;
}

.auth-popup.show .auth-popup__overlay{
    animation:auth-popup-overlay-in 0.45s ease-out forwards;
}

@keyframes auth-popup-overlay-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

.auth-popup__modal{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(1.5rem, 2vw, 2.5rem);
    width:min(100%, clamp(40rem, 55vw, 56rem));
    padding:clamp(2rem, 2.75vw, 2.75rem) clamp(2.5rem, 3.4vw, 3.4rem) clamp(1.75rem, 2.5vw, 2.5rem);
    background:rgba(255, 255, 255, 0.04);
    border:1px solid var(--color-white-4);
    border-radius:clamp(2.5rem, 3.5vw, 4rem);
    backdrop-filter:blur(60px);
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1.5rem 3rem rgba(0, 0, 0, 0.5), 0 0 4rem rgba(111, 82, 240, 0.12);

    opacity:0;
    transform:translateY(8px) scale(0.96);
    will-change:opacity, transform;
}

.auth-popup__modal::before,
.auth-popup__modal::after{
    content:"";
    position:absolute;
    width:clamp(14rem, 18vw, 18rem);
    height:clamp(14rem, 18vw, 18rem);
    pointer-events:none;
    z-index:0;
    background:radial-gradient(circle at center,
        rgba(111, 82, 240, 0.45) 0%,
        rgba(111, 82, 240, 0.20) 30%,
        rgba(111, 82, 240, 0.08) 55%,
        rgba(111, 82, 240, 0)    75%);
    filter:blur(8px);
}

.auth-popup__modal::before{
    top:0;
    left:0;
    transform:translate(-50%, -50%);
}

.auth-popup__modal::after{
    bottom:0;
    right:0;
    transform:translate(50%, 50%);
}

.auth-popup.show .auth-popup__modal{
    animation:auth-popup-modal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

@keyframes auth-popup-modal-in{
    from{
        opacity:0;
        transform:translateY(8px) scale(0.96);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.auth-popup__modal > .auth-popup__title,
.auth-popup__modal > .auth-popup__subtitle,
.auth-popup__modal > .auth-popup__btn{
    position:relative;
    z-index:1;
}

.auth-popup__title{
    margin:0;
    text-align:center;
    color:var(--color-white-1);
    white-space:nowrap;
    text-shadow:0 0 3px var(--color-white-1);
}

.auth-popup__subtitle{
    margin:0;
    margin-top:clamp(0.75rem, 1vw, 1.25rem);
    text-align:center;
    color:rgba(255, 255, 255, 0.6);
    line-height:1.45;
}

.auth-popup__subtitle span{
    color:var(--color-white-1);
    font-weight:600;
}

.auth-popup__close{
    position:absolute;
    top:clamp(0.85rem, 1.1vw, 1.1rem);
    right:clamp(2rem, 1.3vw, 3rem);
    z-index:2;
    width:clamp(1.75rem, 2vw, 2rem);
    height:clamp(1.75rem, 2vw, 2rem);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-primary);
    font-size:clamp(1rem, 1.1vw, 1.25rem);
    line-height:1;
    color:rgba(255, 255, 255, 0.55);
    text-decoration:none;
    border-radius:50%;
    transition:color 0.2s ease-out, background 0.2s ease-out;
    cursor:pointer;
}

.auth-popup__close:hover,
.auth-popup__close:focus-visible{
    color:var(--color-white-1);
    background:rgba(255, 255, 255, 0.08);
    outline:none;
}

.auth-popup__btn{
    margin-top:clamp(0.25rem, 0.5vw, 0.5rem);
    gap:clamp(0.5rem, 0.7vw, 0.75rem);
    animation:none !important;
    opacity:1;
}

.auth-popup__steam-icon{
    width:clamp(1.25rem, 1.4vw, 1.5rem);
    height:clamp(1.25rem, 1.4vw, 1.5rem);
    transform:scale(1.2);
    object-fit:contain;
    pointer-events:none;
    -webkit-user-drag:none;
    position:relative;
    z-index:1;
    flex:0 0 auto;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .auth-popup__modal{
        width:min(100%, clamp(38rem, 50vw, 50rem));
        padding:clamp(1.75rem, 2.25vw, 2.25rem) clamp(2.25rem, 3vw, 3rem) clamp(1.5rem, 2vw, 2rem);
        gap:clamp(1.25rem, 1.6vw, 2rem);
        border-radius:clamp(2rem, 2.75vw, 3rem);
    }

    .auth-popup__steam-icon{
        width:clamp(1.15rem, 1.25vw, 1.35rem);
        height:clamp(1.15rem, 1.25vw, 1.35rem);
    }
}

@media (max-width: 767px){
    .auth-popup__modal{
        width:min(100%, 100vw);
        padding:clamp(1.5rem, 5vw, 2rem) clamp(1.25rem, 4.5vw, 1.75rem) clamp(1.25rem, 4vw, 1.75rem);
        gap:clamp(1rem, 3vw, 1.5rem);
        border-radius:clamp(1.75rem, 5vw, 2.5rem);
    }

    .auth-popup__modal::before,
    .auth-popup__modal::after{
        width:clamp(10rem, 50vw, 14rem);
        height:clamp(10rem, 50vw, 14rem);
    }

    .auth-popup__title{
        white-space:normal;
        max-width:7em;
        margin-left:auto;
        margin-right:auto;
        line-height:1.05;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .auth-popup__modal{
        width:min(100%, clamp(28rem, 70vw, 40rem));
        padding:clamp(1.75rem, 2.5vw, 2.25rem) clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 2vw, 2rem);
        gap:clamp(1.25rem, 1.75vw, 2rem);
        border-radius:clamp(2rem, 3vw, 3.25rem);
    }

    .auth-popup__modal::before,
    .auth-popup__modal::after{
        width:clamp(12rem, 22vw, 16rem);
        height:clamp(12rem, 22vw, 16rem);
    }

    .auth-popup__steam-icon{
        width:clamp(1.15rem, 1.4vw, 1.4rem);
        height:clamp(1.15rem, 1.4vw, 1.4rem);
    }
}

.preview-screen{
    width:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(1.25rem, 2vw, 2rem);
}

[data-section].show.preview-screen{
    display:flex;
    flex:1 1 0;
    min-height:0;
}

.stepper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(0.5rem, 1vw, 1.25rem);
    width:100%;
    padding:0 clamp(1rem, 2vw, 2rem);
}

.stepper__arrow{
    flex-shrink:0;
    width:clamp(1rem, 1.5vw, 1.75rem);
    height:auto;
    opacity:0.85;
    -webkit-user-select:none;
            user-select:none;
    will-change:transform, opacity, clip-path;
    animation-duration:7s, 0.2s;
    animation-timing-function:ease-in-out, ease-out;
    animation-iteration-count:infinite, 1;
    animation-fill-mode:none, backwards;
}

.stepper__arrow--1{
    animation-name:step-arrow-shift-1, stepper-enter;
    animation-delay:2.1s, 1.48s;
}

.stepper__arrow--2{
    animation-name:step-arrow-shift-2, stepper-enter;
    animation-delay:2.1s, 1.64s;
}

.stepper__arrow--3{
    animation-name:step-arrow-shift-3, stepper-enter;
    animation-delay:2.1s, 1.8s;
}

.step{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(0.25rem, 0.5vw, 0.5rem);
    padding:clamp(0.9rem, 1.4vw, 1.4rem) clamp(1rem, 1.6vw, 1.6rem);
    -webkit-user-select:none;
            user-select:none;
    width:clamp(11rem, 15.5vw, 15.5rem);
    height:clamp(9.5rem, 11.5vw, 11.25rem);
    flex-shrink:0;
    overflow:hidden;

    border-radius:1rem;
    border:1px solid var(--color-white-4);
    background:radial-gradient(ellipse 90% 70% at 50% -10%, rgba(111, 82, 240, 0.35) 0%, rgba(111, 82, 240, 0.12) 35%, rgba(111, 82, 240, 0) 70%), linear-gradient(180deg, rgba(111, 82, 240, 0.05) 0%, rgba(14, 16, 22, 0) 60%), rgba(14, 16, 22, 0.25);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08);
    will-change:box-shadow, transform, opacity, clip-path;
    animation-duration:7s, 7s, 0.15s;
    animation-timing-function:ease-in-out, ease-in-out, ease-out;
    animation-iteration-count:infinite, infinite, 1;
    animation-fill-mode:none, none, backwards;
}

.step:nth-of-type(1){
    animation-name:step-glow-1, step-lift-1, stepper-enter;
    animation-delay:2.1s, 2.1s, 1.4s;
}

.step:nth-of-type(2){
    animation-name:step-glow-2, step-lift-2, stepper-enter;
    animation-delay:2.1s, 2.1s, 1.56s;
}

.step:nth-of-type(3){
    animation-name:step-glow-3, step-lift-3, stepper-enter;
    animation-delay:2.1s, 2.1s, 1.72s;
}

.step:nth-of-type(4){
    animation-name:step-glow-4, step-lift-4, stepper-enter;
    animation-delay:2.1s, 2.1s, 1.88s;
}

.step__title{
    margin:0;
}

.step__subtitle{
    margin:0;
}

.step__images{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(0.15rem, 0.3vw, 0.4rem);
    margin-top:auto;
    min-width:0;
    width:calc(100% + clamp(4.5rem, 7vw, 7.5rem));
    margin-left:calc(clamp(4.5rem, 7vw, 7.5rem) / -2);
    margin-right:calc(clamp(4.5rem, 7vw, 7.5rem) / -2);
}

.step__image{
    flex:1 1 0;
    min-width:0;
    width:100%;
    height:auto;
    max-height:clamp(2.75rem, 4vw, 4.25rem);
    object-fit:contain;
    -webkit-user-select:none;
            user-select:none;
    -webkit-user-drag:none;
    will-change:transform;
}

.step__images:not(.step__images--single){
    animation:step-image-sway 5s ease-in-out infinite;
    will-change:transform;
}

.step:nth-of-type(1) .step__images:not(.step__images--single){
    animation-delay:0s;
}

.step:nth-of-type(2) .step__images:not(.step__images--single){
    animation-delay:-1.7s;
}

.step:nth-of-type(3) .step__images:not(.step__images--single){
    animation-delay:-3.3s;
}

.step__images--single{
    justify-content:center;
    width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    position:relative;
}

.step__image--single{
    flex:0 1 auto;
    width:auto;
    max-width:75%;
    max-height:clamp(3.25rem, 5vw, 5rem);
    will-change:transform;
    animation:step-image-drift 4.5s ease-in-out infinite;
    position:relative;
    z-index:1;
}

.step__weapon-pos{
    position:absolute;
    left:52%;
    top:40%;
    z-index:3;
    pointer-events:none;
    transform:translate(-50%, -50%);
    line-height:0;
}

.step__weapon{
    display:block;
    width:auto;
    height:clamp(2.75rem, 4.5vw, 4.5rem);
    max-width:clamp(8.5rem, 14vw, 14rem);
    -webkit-user-drag:none;
    will-change:transform;
    animation:step-weapon-drift 4.5s ease-in-out infinite;
    filter:drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.5)) drop-shadow(0 0.1rem  0.25rem rgba(0, 0, 0, 0.35)) drop-shadow(0 0 0.4rem rgba(180, 155, 255, 0.4));
}

@keyframes step-weapon-drift{
    0%, 100%{ transform:translateY(0.075rem) scale(0.985); }
    50%{ transform:translateY(-0.15rem) scale(1.035); }
}

.step__case-glow{
    position:absolute;
    left:52%;
    top:40%;
    width:4.5rem;
    height:1.8rem;
    transform:translate(-50%, -50%);
    z-index:2;
    pointer-events:none;

    border-radius:50%;
    background:radial-gradient(ellipse at center,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(180, 155, 255, 0.9) 18%,
            rgba(111, 82, 240, 0.75) 42%,
            rgba(111, 82, 240, 0.28) 68%,
            rgba(111, 82, 240, 0) 100%);

    filter:blur(5px);
    opacity:0.85;

    box-shadow:0 0 10px rgba(111, 82, 240, 0.884), 0 0 22px rgba(111, 82, 240, 0.699), 0 0 38px rgba(151, 106, 255, 0.45);

    animation:caseGlowPulse 2.2s ease-in-out infinite;
}

@media (max-width: 767px){

.step__case-glow{
        width:2.5rem;
        height:0.5rem;
}
    }

@keyframes caseGlowPulse{

    0%,
    100%{
        opacity:0.9;
        transform:translate(-50%, -50%) scale(0.92);
        filter:blur(5px);

        box-shadow:0 0 8px rgba(150, 82, 240, 0.65), 0 0 18px rgba(240, 224, 82, 0.377), 0 0 30px rgba(245, 230, 92, 0.3);
    }

    50%{
        opacity:1;
        transform:translate(-50%, -50%) scale(1.08);
        filter:blur(6px);

        box-shadow:0 0 14px rgba(255, 245, 155, 0.836), 0 0 30px rgba(240, 229, 82, 0.795), 0 0 52px rgba(151, 106, 255, 0.726);
    }
}

.preview-cases-loop-wrap{
    width:100%;
    opacity:0;
    will-change:opacity, transform, filter;
}

.preview-cases-loop{
    --case-w:clamp(18.5rem, 27vw, 29rem);
    --case-gap:clamp(0.15rem, 0.35vw, 0.5rem);
    --case-count:15;
    --set-width:calc(var(--case-count) * (var(--case-w) + var(--case-gap)));

    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
    padding:clamp(0.5rem, 1vw, 1rem) 0;
    mask-image:linear-gradient(90deg,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%);
}

.preview-cases-loop__track{
    display:flex;
    align-items:center;
    gap:var(--case-gap);
    width:max-content;
    animation:cases-loop-scroll 100s linear 2.15s infinite backwards;
    will-change:transform;
}

.preview-cases-loop__case{
    width:var(--case-w);
    height:auto;
    flex-shrink:0;
    -webkit-user-select:none;
            user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
    filter:drop-shadow(0 0.35rem 0.45rem rgba(0, 0, 0, 0.55)) drop-shadow(0 1rem 1.25rem rgba(0, 0, 0, 0.75));
}

.preview-cases-loop__track{
    animation-play-state:paused;
}

body:has(.loader.hide) .preview-cases-loop-wrap{
    animation:cases-loop-in 1.15s cubic-bezier(0.2, 0.7, 0.25, 1) 2.15s both;
}

body:has(.loader.hide) .preview-cases-loop__track{
    animation-play-state:running;
}

.step,
.stepper__arrow{
    animation-play-state:paused;
}

body:has(.loader.hide) .step,
body:has(.loader.hide) .stepper__arrow{
    animation-play-state:running;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .preview-screen{
        gap:clamp(0.85rem, 1.5vh, 1.5rem);
    }
    .stepper{
        gap:clamp(0.4rem, 0.7vw, 1rem);
    }

    .stepper__arrow{
        width:clamp(0.85rem, 1.1vw, 1.4rem);
    }
    .step{
        gap:clamp(0.2rem, 0.35vw, 0.8rem);
        padding:clamp(0.7rem, 1vw, 1.1rem) clamp(0.85rem, 1.25vw, 1.25rem);
        width:clamp(9.5rem, 12.75vw, 13rem);
        height:clamp(8rem, 9.5vw, 9.75rem);
        border-radius:0.875rem;
    }

    .step__images{
        gap:clamp(0.1rem, 0.2vw, 0.3rem);
        width:calc(100% + clamp(3.5rem, 5.5vw, 6rem));
        margin-left:calc(clamp(3.5rem, 5.5vw, 6rem) / -2);
        margin-right:calc(clamp(3.5rem, 5.5vw, 6rem) / -2);
    }

    .step__image{
        max-height:clamp(2.25rem, 3.25vw, 3.5rem);
    }

    .step__image--single{
        max-height:clamp(2.75rem, 4vw, 4.25rem);
    }
    .preview-cases-loop{
        --case-w:clamp(15rem, 21vw, 22rem);
        --case-gap:clamp(0.1rem, 0.3vw, 0.4rem);
        padding:clamp(0.25rem, 0.5vh, 0.5rem) 0;
    }
    .preview-cases-loop-wrap{
        margin-top:clamp(1.5rem, 3vh, 2.5rem);
    }
}

@media (max-width: 767px){
    .preview-screen{
        gap:clamp(0.75rem, 2.5vh, 1.5rem);
    }

    .stepper{
        flex-wrap:wrap;
        justify-content:center;
        gap:clamp(0.5rem, 1.5vw, 0.85rem) clamp(0.35rem, 1.2vw, 0.6rem);
        padding:0 clamp(0.5rem, 2vw, 1rem);
    }
    .stepper__arrow--2{
        display:none;
    }

    .stepper__arrow{
        width:clamp(0.75rem, 3vw, 1.1rem);
        animation:none !important;
        opacity:0.85;
    }
    .step{
        width:clamp(7.5rem, 36vw, 11rem);
        height:auto;
        padding:clamp(0.55rem, 2vw, 0.85rem) clamp(0.65rem, 2.2vw, 1rem);
        gap:clamp(0.15rem, 0.5vw, 0.3rem);
        border-radius:0.75rem;
    }
    .step__title{
        font-size:clamp(0.875rem, 3vw, 1rem);
    }

    .step__subtitle{
        font-size:clamp(0.7rem, 2.4vw, 0.85rem);
    }
    .step__images{
        gap:clamp(0.1rem, 0.4vw, 0.25rem);
        width:calc(100% + clamp(2rem, 8vw, 4rem));
        margin-left:calc(clamp(2rem, 8vw, 4rem) / -2);
        margin-right:calc(clamp(2rem, 8vw, 4rem) / -2);
        margin-top:clamp(0.2rem, 0.8vw, 0.4rem);
    }

    .step__image{
        max-height:clamp(1.85rem, 7vw, 2.5rem);
    }

    .step__images--single{
        padding-left:0.5rem;
    }

    .step__image--single{
        max-height:clamp(2.25rem, 9vw, 3.25rem);
    }
    .preview-cases-loop{
        --case-w:clamp(13rem, 56vw, 18rem);
        --case-gap:clamp(0.15rem, 0.4vw, 0.45rem);
        padding:clamp(1rem, 2.5vh, 2rem) 0;
    }

    .preview-cases-loop-wrap{
        margin-top:clamp(0.5rem, 1.5vh, 1rem);
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .preview-screen{
        gap:clamp(0.85rem, 2vh, 1.75rem);
    }

    .stepper{
        gap:clamp(0.4rem, 0.7vw, 0.85rem);
        padding:0 clamp(0.75rem, 1.5vw, 1.5rem);
    }

    .stepper__arrow{
        width:clamp(0.875rem, 1.4vw, 1.25rem);
    }

    .step{
        gap:clamp(0.2rem, 0.4vw, 0.4rem);
        padding:clamp(0.6rem, 1vw, 1rem) clamp(0.7rem, 1.2vw, 1.1rem);
        width:clamp(8.5rem, 16vw, 11rem);
        height:clamp(7rem, 12vw, 9.5rem);
        border-radius:0.875rem;
    }

    .step__images{
        gap:clamp(0.1rem, 0.25vw, 0.3rem);
        width:calc(100% + clamp(2.5rem, 5vw, 4rem));
        margin-left:calc(clamp(2.5rem, 5vw, 4rem) / -2);
        margin-right:calc(clamp(2.5rem, 5vw, 4rem) / -2);
    }

    .step__image{
        max-height:clamp(2rem, 3.25vw, 2.75rem);
    }

    .step__image--single{
        max-height:clamp(2.5rem, 4vw, 3.5rem);
    }

    .preview-cases-loop{
        --case-w:clamp(13rem, 22vw, 19rem);
        --case-gap:clamp(0.15rem, 0.35vw, 0.4rem);
        padding:clamp(0.5rem, 1.25vh, 1rem) 0;
    }

    .preview-cases-loop-wrap{
        margin-top:clamp(1rem, 2.5vh, 2rem);
    }
}

.building-screen{
    width:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(0.75rem, 1.5vh, 1.5rem);
}

[data-section].show.building-screen{
    display:flex;
    flex:1 1 0;
    min-height:0;
}

.builder{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(0.4rem, 0.7vh, 0.85rem);
    width:100%;
    max-width:clamp(60rem, 80vw, 85rem);
    padding:0 clamp(1rem, 2vw, 2rem);
    -webkit-user-select:none;
            user-select:none;
}

.builder__badge{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(0.2rem, 0.4vw, 0.4rem);
    padding:clamp(0.7rem, 1.1vw, 1.5rem) clamp(1.75rem, 3vw, 3.5rem);
    min-width:clamp(13rem, 18vw, 18rem);
    border:1px solid var(--color-white-4);
    border-radius:1.5rem;
    background:rgba(255, 255, 255, 0.045);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 1.5rem rgba(111, 82, 240, 0.08);
    
}

.builder__badge-halo{
    position:absolute;
    top:-60%;
    left:50%;
    transform:translateX(-50%);
    width:clamp(6rem, 9vw, 10rem);
    height:clamp(6rem, 9vw, 10rem);
    background:radial-gradient(circle,
            rgba(111, 82, 240, 0.45) 0%,
            rgba(111, 82, 240, 0.25) 25%,
            rgba(111, 82, 240, 0) 70%);
    pointer-events:none;
    z-index:-1;
    
}

.builder__badge-step{
    margin:0;
    color:var(--color-white-1);
}

.builder__badge-subtitle{
    margin:0;
    margin-top:3px;
    color:var(--color-white-2);
}

.builder__stage{
    position:relative;
    width:100vw;
    margin-top:clamp(-0.75rem, 1.5vh, -1.5rem);
    height:calc(clamp(20rem, 45vw, 37.5rem) * 400 / 600);
    overflow:hidden;
    touch-action:pan-y;
    mask-image:linear-gradient(90deg,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%);
}

.builder__track{
    position:absolute;
    top:0;
    left:50%;
    display:flex;
    align-items:center;
    gap:clamp(1rem, 2vw, 2rem);
    height:100%;
    transform:translateX(var(--track-tx, 0px));
    transition:transform 0.45s cubic-bezier(0.2, 0.7, 0.25, 1);
    will-change:transform;
    z-index:2;
}

.builder__track-item{
    flex:0 0 auto;
    width:clamp(20rem, 45vw, 37.5rem);
    height:100%;
    object-fit:contain;
    opacity:0.4;
    transform:scale(0.8);
    transition:opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    -webkit-user-select:none;
            user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
    filter:drop-shadow(0 0.35rem 0.55rem rgba(0, 0, 0, 0.45)) drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.55));
}

.builder__track-item.is-active{
    opacity:1;
    transform:scale(1);
    filter:drop-shadow(0 0.5rem 0.75rem rgba(0, 0, 0, 0.6)) drop-shadow(0 1.5rem 2.75rem rgba(0, 0, 0, 0.7));
}

.builder__fixed{
    position:absolute;
    top:0;
    left:50%;
    width:clamp(20rem, 45vw, 37.5rem);
    height:100%;
    object-fit:contain;
    pointer-events:none;
    -webkit-user-select:none;
            user-select:none;
    -webkit-user-drag:none;
    transform:translateX(-50%);
    filter:drop-shadow(0 0.5rem 0.75rem rgba(0, 0, 0, 0.55)) drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.65));
}

.builder__fixed--bottom{ z-index:1; }

.builder__fixed--top{ z-index:3; }

.builder[data-builder-mode="step-1"] .builder__fixed--bottom,
.builder[data-builder-mode="step-1"] .builder__fixed--top{
    display:none;
}

.builder[data-builder-mode="step-2"] .builder__fixed--top{
    display:none;
}

.builder[data-builder-mode="step-3"] .builder__fixed--bottom{
    display:none;
}

.builder[data-builder-mode="step-4"] .builder__track{
    display:none;
}

.builder[data-builder-mode="step-2"] .builder__track-item.is-active{
    transform:translateY(-25%) scale(1);
}

.builder[data-builder-mode="step-3"] .builder__fixed--top{
    transform:translate(-50%, -25%);
}

.builder[data-builder-mode="step-4"] .builder__fixed--top{
    transform:translate(-50%, -13%);
    animation:case-violet-pulse-top 3.5s ease-in-out infinite, case-bob-top 5s ease-in-out infinite;
    will-change:filter, transform;
    pointer-events:auto;
    cursor:pointer;
}

.builder[data-builder-mode="step-4"] .builder__fixed--bottom{
    pointer-events:auto;
    cursor:pointer;
}

.builder[data-builder-mode="step-4"] .builder__fixed--bottom{
    animation:case-violet-pulse 3.5s ease-in-out infinite, case-bob-bottom 5s ease-in-out infinite;
    will-change:filter, transform;
}

@keyframes case-bob-top{
    0%, 100%{
        transform:translate(-50.25%, -14%);
    }
    50%{
        transform:translate(-50.5%, -15.25%);
    }
}

@keyframes case-bob-bottom{
    0%, 100%{
        transform:translateX(-50%) translateY(0);
    }
    50%{
        transform:translateX(-50%) translateY(0.8%);
    }
}

.builder__case-inner-glow{
    position:absolute;
    left:50%;
    top:50%;
    width:clamp(10rem, 22vw, 18rem);
    height:clamp(3rem, 7vw, 6rem);
    transform:translate(-50%, -50%);
    z-index:2;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(ellipse at center,
            rgba(230, 220, 255, 0.8) 0%,
            rgba(160, 130, 255, 0.8) 15%,
            rgba(111, 82, 240, 0.55) 45%,
            rgba(111, 82, 240, 0.25) 55%,
            rgba(111, 82, 240, 0) 100%);
    filter:blur(8px);
    mix-blend-mode:screen;
    will-change:opacity;
}

.builder[data-builder-mode="step-4"] .builder__case-inner-glow{
    animation:case-inner-glow-pulse 5s ease-in-out infinite;
}

@keyframes case-inner-glow-pulse{
    0%, 100%{
        opacity:0;
        transform:translate(-40%, -50%) scaleX(0.75) scaleY(0.55);
    }
    50%{
        opacity:1;
        transform:translate(-40%, -60%) scaleX(1.15) scaleY(1.1);
    }
}

@keyframes case-violet-pulse{
    0%, 100%{
        filter:drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0.45rem rgba(111, 82, 240, 0.22)) drop-shadow(0 0 1.2rem rgba(111, 82, 240, 0.12));
    }
    50%{
        filter:drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0.75rem rgba(111, 82, 240, 0.35)) drop-shadow(0 0 1.5rem rgba(111, 82, 240, 0.22));
    }
}

@keyframes case-violet-pulse-top{
    0%, 100%{
        filter:drop-shadow(0 0 0.35rem rgba(111, 82, 240, 0.22)) drop-shadow(0 0 1rem rgba(111, 82, 240, 0.12));
    }
    50%{
        filter:drop-shadow(0 0 0.6rem rgba(111, 82, 240, 0.35)) drop-shadow(0 0 1.25rem rgba(111, 82, 240, 0.22));
    }
}

.builder__info{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:clamp(0.35rem, 0.7vh, 0.7rem);
    width:100%;
}

.builder__label-row{
    min-height:clamp(3.25rem, 5vw, 5rem);
}

.builder[data-builder-mode="step-4"] .builder__summary-line,
.builder[data-builder-mode="step-4"] .builder__summary-build{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:100%;
    margin:0;
}

.builder[data-builder-mode="step-4"] .builder__summary-line{
    top:-25%;
}

.builder[data-builder-mode="step-4"] .builder__summary-build{
    top:20%;
}

.builder__label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(1rem, 2vw, 2rem);
    width:clamp(22rem, 36vw, 36rem);
    max-width:100%;
}

.builder__label[hidden],
.builder__summary-line[hidden],
.builder__summary-build[hidden]{
    display:none;
}

.builder__label{
    margin:0;
    color:var(--color-white-1);
    flex:1 1 auto;
    text-align:center;
    font-size:clamp(1.875rem, 1.5vw + 1.5rem, 3.5rem);
    text-shadow:0 0 20px var(--color-white-2);
}

.builder__summary-line{
    margin:0;
    color:var(--color-white-2);
}

.builder__summary-build{
    margin:0;
    color:var(--color-white-1);
    text-shadow:0 0 20px var(--color-white-2);
}

.builder__arrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:clamp(3.25rem, 5vw, 5rem);
    height:clamp(3.25rem, 5vw, 5rem);
    padding:0;
    border:0.5px solid var(--color-white-4);
    border-radius:1.5rem;
    background:rgba(255, 255, 255, 0.03);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    cursor:pointer;
    color:var(--color-white-1);
    transition:background 0.2s ease, opacity 0.2s ease, transform 0.125s ease-out;
}

.builder__arrow:hover:not(.is-disabled){
        background:rgba(255, 255, 255, 0.08);
    }

.builder__arrow:active:not(.is-disabled){
        transform:scale(0.95);
    }

.builder__arrow.is-disabled{
    opacity:0.3;
    cursor:default;
    pointer-events:none;
}

.builder__arrow[hidden]{
    display:none;
}

.builder__arrow-icon{
    width:clamp(0.9rem, 1.25vw, 2.5rem);
    height:auto;
    opacity:0.875;
    pointer-events:none;
}

.builder__arrow--prev .builder__arrow-icon{
    transform:rotate(180deg);
}

.builder__cta{
    margin-top:clamp(0.1rem, 1vh, 0.5rem);
}

@keyframes builder-badge-enter{
    0%{
        opacity:0;
        clip-path:inset(0 100% 0 0);
    }

    100%{
        opacity:1;
        clip-path:inset(0 0 0 0);
    }
}

@keyframes builder-stage-enter{
    0%{
        opacity:0;
        filter:blur(4px);
    }

    100%{
        opacity:1;
        filter:blur(0);
    }
}

@keyframes builder-label-enter{
    0%{
        opacity:0;
        transform:translateY(0.5rem);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes builder-summary-enter{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(0.5rem);
    }

    100%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
    }
}

@keyframes builder-controls-enter{
    0%{
        opacity:0;
        transform:translateY(0.5rem) scale(0.94);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@property --arrow-entrance-target{
    syntax:'<number>';
    inherits:true;
    initial-value:1;
}

@keyframes builder-arrow-enter{
    0%{
        opacity:0;
        transform:translateY(0.5rem) scale(0.94);
    }

    100%{
        opacity:var(--arrow-entrance-target, 1);
        transform:translateY(0) scale(1);
    }
}

[data-section].show.building-screen .builder__badge{
    animation:builder-badge-enter 0.45s cubic-bezier(0.2, 0.7, 0.25, 1) 0.05s both;
}

[data-section].show.building-screen .builder__stage{
    animation:builder-stage-enter 0.55s cubic-bezier(0.2, 0.7, 0.25, 1) 0.35s both;
}

[data-section].show.building-screen .builder[data-builder-mode="step-4"] .builder__stage{
    transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor:pointer;
    will-change:transform;
}

[data-section].show.building-screen .builder[data-builder-mode="step-4"] .builder__stage:hover{
    transform:scale(1.04);
}

[data-section].show.building-screen .builder__label{
    animation:builder-label-enter 0.45s cubic-bezier(0.2, 0.7, 0.25, 1) 0.45s both;
}

[data-section].show.building-screen .builder__summary-line,
[data-section].show.building-screen .builder__summary-build{
    animation:builder-summary-enter 0.45s cubic-bezier(0.2, 0.7, 0.25, 1) 0.45s both;
}

[data-section].show.building-screen .builder__arrow{
    animation:builder-arrow-enter 0.4s cubic-bezier(0.2, 0.7, 0.25, 1) 0.8s backwards;
}

.builder__arrow.is-disabled{
    --arrow-entrance-target:0.3;
}

[data-section].show.building-screen .builder__cta{
    animation:builder-controls-enter 0.4s cubic-bezier(0.2, 0.7, 0.25, 1) 0.8s both;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .builder{
        gap:clamp(0.4rem, 0.8vh, 0.85rem);
        max-width:clamp(50rem, 80vw, 80rem);
        padding:0 clamp(0.85rem, 1.5vw, 1.5rem);
    }

    .builder__badge{
        padding:clamp(0.55rem, 0.85vw, 1.1rem) clamp(1.4rem, 2.25vw, 2.5rem);
        min-width:clamp(11rem, 14.5vw, 14.5rem);
        border-radius:1.125rem;
    }

    .builder__badge-halo{
        width:clamp(5rem, 7vw, 7.5rem);
        height:clamp(5rem, 7vw, 7.5rem);
    }
    .builder__stage{
        margin-top:clamp(0.4rem, 1vh, 1rem);
        height:calc(clamp(15rem, 30vw, 26rem) * 400 / 600);
    }

    .builder__track-item,
    .builder__fixed{
        width:clamp(15rem, 30vw, 26rem);
    }
    .builder__case-inner-glow{
        width:clamp(7.5rem, 15vw, 13rem);
        height:clamp(2.25rem, 4.5vw, 4.25rem);
    }
    .builder__label-row{
        min-height:clamp(2.75rem, 4vw, 4rem);
        width:clamp(20rem, 30vw, 30rem);
    }

    .builder__label{
        font-size:clamp(1.5rem, 1.25vw + 0.85rem, 2.25rem);
    }
    .builder[data-builder-mode="step-4"] .builder__summary-line{
        font-size:clamp(0.875rem, 0.75vw + 0.55rem, 1.25rem);
    }

    .builder[data-builder-mode="step-4"] .builder__summary-build{
        font-size:clamp(2rem, 1.5vw + 1.25rem, 3rem);
    }

    .builder__arrow{
        width:clamp(2.75rem, 4vw, 4rem);
        height:clamp(2.75rem, 4vw, 4rem);
        border-radius:1.125rem;
    }

    .builder__arrow-icon{
        width:clamp(0.8rem, 1vw, 1.5rem);
    }

    .builder__cta{
        margin-top:clamp(0.4rem, 1vh, 1rem);
    }
}

@media (max-width: 767px){
    .builder{
        gap:0.6rem;
        padding:0 0.75rem;
    }

    .builder__badge{
        padding:0.6rem 1.25rem;
        min-width:10rem;
    }

    .builder__stage{
        height:calc(78vw * 400 / 600);
    }

    .builder__track-item,
    .builder__fixed{
        width:78vw;
    }

    .builder__arrow{
        width:3rem;
        height:3rem;
        border-radius:0.875rem;
    }

    .builder__label-row{
        gap:0.75rem;
        width:100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .builder{
        gap:clamp(0.4rem, 0.8vh, 0.75rem);
        max-width:clamp(40rem, 90vw, 70rem);
        padding:0 clamp(0.75rem, 1.25vw, 1.25rem);
    }

    .builder__badge{
        padding:clamp(0.5rem, 0.85vw, 0.85rem) clamp(1.25rem, 2vw, 2rem);
        min-width:clamp(10rem, 13vw, 13rem);
        border-radius:1rem;
    }

    .builder__badge-halo{
        width:clamp(4.5rem, 6vw, 6rem);
        height:clamp(4.5rem, 6vw, 6rem);
    }
    .builder__stage{
        margin-top:clamp(0.4rem, 1vh, 0.85rem);
        height:calc(clamp(15rem, 38vw, 22rem) * 400 / 600);
    }

    .builder__track-item,
    .builder__fixed{
        width:clamp(15rem, 38vw, 22rem);
    }

    .builder__case-inner-glow{
        width:clamp(7rem, 15vw, 11rem);
        height:clamp(2.25rem, 4.5vw, 3.75rem);
    }

    .builder__label-row{
        min-height:clamp(2.5rem, 4vw, 3.5rem);
        width:clamp(18rem, 38vw, 26rem);
        gap:clamp(0.5rem, 1vw, 1rem);
    }

    .builder__label{
        font-size:clamp(1.4rem, 1.25vw + 0.85rem, 2rem);
    }

    .builder[data-builder-mode="step-4"] .builder__summary-line{
        font-size:clamp(0.875rem, 0.75vw + 0.55rem, 1.125rem);
    }

    .builder[data-builder-mode="step-4"] .builder__summary-build{
        font-size:clamp(1.875rem, 1.5vw + 1.25rem, 2.5rem);
    }

    .builder__arrow{
        width:clamp(2.5rem, 3.5vw, 3.5rem);
        height:clamp(2.5rem, 3.5vw, 3.5rem);
        border-radius:1rem;
    }

    .builder__arrow-icon{
        width:clamp(0.75rem, 1vw, 1.25rem);
    }

    .builder__cta{
        margin-top:clamp(0.4rem, 1vh, 0.85rem);
    }
}

.roulette-screen{
    width:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(0.75rem, 1.5vh, 1.5rem);
}

[data-section].show.roulette-screen{
    display:flex;
    flex:1 1 0;
    min-height:0;
}

.roulette{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(0.65rem, 1.5vh, 1.5rem);
    width:100%;
    max-width:clamp(60rem, 80vw, 90rem);
    padding:0 clamp(1rem, 2vw, 2rem);
    -webkit-user-select:none;
            user-select:none;
}

.roulette__reel-wrap{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
}

.roulette__decor{
    position:absolute;
    left:50%;
    width:clamp(7.5rem, 10vw, 12rem);
    aspect-ratio:240 / 63;
    z-index:3;
    pointer-events:none;
    -webkit-mask:url('/images/subtract.svg') center / 100% 100% no-repeat;
            mask:url('/images/subtract.svg') center / 100% 100% no-repeat;
    background:radial-gradient(ellipse at 50% 100%,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(255, 255, 255, 0.70) 35%,
            rgba(255, 255, 255, 0.35) 70%,
            rgba(255, 255, 255, 0.10) 100%);
    transition:background 0.45s ease-out, opacity 0.55s ease-out;
}

.roulette__decor--top{
    top:0;
    transform:translate(-50%, 25%);
}

.roulette__decor--bottom{
    bottom:0;
    transform:translate(-50%, -25%) rotate(180deg);
}

.roulette.is-revealed .roulette__decor{
    background:radial-gradient(ellipse at 50% 100%,
            #e791ff 0%,
            #8e73ff 40%,
            #6F52F0 75%,
            #5a3de0 100%);
}

.roulette.is-revealed .roulette__decor--bottom{
    opacity:0;
}

.roulette__reel{
    position:relative;
    width:100%;
    max-width:clamp(50rem, 80vw, 86rem);
    padding:clamp(2.25rem, 4vh, 4rem) 0;

    border:1px solid rgba(255, 255, 255, 0.05);
    border-radius:4rem;
    background:#1B1B22;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
}

.roulette__reel::before,
.roulette__reel::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:clamp(2.5rem, 5%, 5rem);
    z-index:2;
    pointer-events:none;
}

.roulette__reel::before{
    left:0;
    background:linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 45%,
        rgba(0, 0, 0, 0)    100%);
}

.roulette__reel::after{
    right:0;
    background:linear-gradient(
        270deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.30) 45%,
        rgba(0, 0, 0, 0)    100%);
}

.roulette__track{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:clamp(0.35rem, 0.5vw, 0.6rem);
    will-change:transform;
    transform:translate3d(var(--roulette-start-tx, 0px), 0, 0);
}

.roulette__track.is-spinning{
    transition:transform var(--roulette-duration, 9.5s) cubic-bezier(0.4, 0.05, 0.12, 1);
    transform:translate3d(var(--roulette-final-tx, 0px), 0, 0);
}

.reel-card{
    position:relative;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    width:clamp(11rem, 14vw, 14rem);
    height:clamp(13rem, 16vw, 16rem);
    padding:clamp(0.7rem, 1vw, 1rem) clamp(0.6rem, 0.8vw, 0.85rem) clamp(1rem, 1.4vw, 1.4rem);
    border:1px solid color-mix(in srgb, var(--card-gradient, #6F52F0) 55%, transparent);
    border-radius:1rem;
    background:radial-gradient(ellipse 105% 75% at 50% 108%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 85%, transparent) 0%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 35%, transparent) 35%,
            transparent 75%), linear-gradient(180deg,
            rgba(34, 30, 50, 0.92) 0%,
            rgba(22, 18, 32, 0.95) 60%,
            rgba(16, 14, 24, 0.95) 100%);
    overflow:hidden;
    transition:transform 0.4s ease-out, filter 0.5s ease-out, box-shadow 0.4s ease-out;
}

.reel-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,
            rgba(255, 255, 255, 0.07) 0%,
            transparent 35%);
    pointer-events:none;
}

.reel-card__img{
    position:relative;
    z-index:1;
    width:100%;
    height:clamp(9rem, 11.5vw, 11.5rem);
    object-fit:contain;
    margin-top:clamp(0.4rem, 1vw, 1rem);
    pointer-events:none;
    -webkit-user-drag:none;
    filter:drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.5));
    transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-card__name{
    position:relative;
    z-index:1;
    margin-top:auto;
    font-size:clamp(0.7rem, 0.65vw + 0.3rem, 0.875rem);
    font-weight:500;
    line-height:1.2;
    letter-spacing:0.02em;
    color:var(--color-white-2);
    text-align:center;
}

.reel-card__exterior{
    position:relative;
    z-index:1;
    margin-top:clamp(0.2rem, 0.4vw, 0.45rem);
    font-size:clamp(1.05rem, 1.05vw + 0.25rem, 1.375rem);
    font-weight:700;
    line-height:1.15;
    color:var(--color-white-1);
    text-align:center;
    text-shadow:0 0.15rem 0.5rem rgba(0, 0, 0, 0.5);
}

.reel-card__revealed-label{
    position:absolute;
    top:clamp(1.25rem, 1.75vw, 2rem);
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    padding:clamp(0.25rem, 0.4vw, 0.4rem) clamp(0.6rem, 0.85vw, 0.85rem);
    border-radius:999px;
    background:rgba(111, 82, 240, 0.35);
    border:1px solid rgba(169, 145, 255, 0.6);
    font-size:clamp(0.7rem, 0.7vw, 0.8rem);
    font-weight:600;
    color:var(--color-white-1);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.5s ease-out 0.1s;
}

.roulette.is-revealed .reel-card{
    filter:grayscale(0.85) brightness(0.35) saturate(0.7);
    opacity:0.55;
}

.roulette.is-revealed .reel-card.is-winner{
    filter:none;
    opacity:1;
    transform:scale(1.18);
    transform-origin:50% 50%;
    border:1.5px solid transparent;
    background:radial-gradient(ellipse 105% 75% at 50% 108%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 85%, transparent) 0%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 35%, transparent) 35%,
            transparent 75%) padding-box, linear-gradient(180deg,
            rgba(34, 30, 50, 0.92) 0%,
            rgba(22, 18, 32, 0.95) 60%,
            rgba(16, 14, 24, 0.95) 100%) padding-box, conic-gradient(from var(--winner-rotor, 0deg),
            #6F52F0,
            #a991ff,
            #d6c7ff,
            #8e73ff,
            #5a3de0,
            #b39dff,
            #6F52F0) border-box;
    animation:roulette-winner-rotor 3.5s linear infinite, roulette-winner-reveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow:0 0 0 2px rgba(169, 145, 255, 0.65), 0 0 2.25rem rgba(111, 82, 240, 0.75), 0 0 5rem rgba(169, 145, 255, 0.55), 0 0 8rem rgba(111, 82, 240, 0.35);
    z-index:2;
}

@property --winner-rotor{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

@keyframes roulette-winner-rotor{
    to{ --winner-rotor:360deg; }
}

@keyframes roulette-winner-reveal{
    from{ transform:scale(1); }
    to{ transform:scale(1.18); }
}

.roulette.is-revealed .reel-card.is-winner .reel-card__img{
    transform:translateY(1.85rem) scale(1.12);
    transform-origin:50% 50%;
}

.roulette.is-revealed .reel-card.is-winner .reel-card__name{
    font-size:clamp(0.85rem, 0.7vw + 0.4rem, 1rem);
}

.roulette.is-revealed .reel-card.is-winner .reel-card__exterior{
    font-size:clamp(1.25rem, 1.2vw + 0.3rem, 1.6rem);
}

.roulette.is-revealed .reel-card.is-winner .reel-card__revealed-label{
    opacity:1;
}

.reel-card__revealed-label--final{
    top:12px;
}

.roulette.is-revealed .reel-card.is-winner::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    pointer-events:none;
    animation:roulette-winner-pulse 3.4s ease-in-out infinite;
    will-change:box-shadow, opacity;
}

@keyframes roulette-winner-pulse{
    0%, 100%{
        opacity:0.7;
        box-shadow:0 0 1.5rem rgba(169, 145, 255, 0.45), 0 0 3.5rem rgba(111, 82, 240, 0.35), 0 0 6rem rgba(169, 145, 255, 0.20);
    }
    50%{
        opacity:1;
        box-shadow:0 0 2.5rem rgba(169, 145, 255, 0.85), 0 0 6rem rgba(111, 82, 240, 0.70), 0 0 10rem rgba(169, 145, 255, 0.45);
    }
}

.roulette__cta{
    animation:none !important;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.5s ease-out, transform 0.5s ease-out, box-shadow 0.25s ease-out, filter 0.25s ease-out;
}

.roulette__cta.is-shown{
    opacity:1;
    transform:translateY(0);
}

[data-section].show.roulette-screen .roulette{
    animation:roulette-section-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin:50% 50%;
    will-change:transform, opacity, filter;
}

@keyframes roulette-section-in{
    0%{
        opacity:0;
        transform:translateY(-8px) scale(1.35);
        filter:blur(6px);
    }
    60%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@media (min-width: 1024px) and (max-width: 1919px){
    .roulette{
        gap:clamp(0.5rem, 1vh, 1rem);
    }

    .roulette__decor{
        width:clamp(8rem, 8vw, 11.5rem);
    }

    .roulette__reel{
        padding:clamp(1.85rem, 3.25vh, 3.25rem) 0;
        max-width:clamp(52rem, 84vw, 82rem);
    }

    .reel-card{
        width:clamp(11rem, 14vw, 14rem);
        height:clamp(13.5rem, 16.5vw, 16.5rem);
        padding:clamp(0.7rem, 0.95vw, 1rem) clamp(0.55rem, 0.7vw, 0.8rem) clamp(1rem, 1.3vw, 1.4rem);
        border-radius:1rem;
    }

    .reel-card__img{
        height:clamp(8.75rem, 10.75vw, 10.75rem);
        margin-top:clamp(0.4rem, 0.8vw, 0.8rem);
    }

    .reel-card__name{
        font-size:clamp(0.75rem, 0.45vw + 0.4rem, 0.9rem);
    }

    .reel-card__exterior{
        font-size:clamp(1.05rem, 0.85vw + 0.5rem, 1.3rem);
    }

    .reel-card__revealed-label{
        top:clamp(1.1rem, 1.5vw, 1.75rem);
        font-size:clamp(0.65rem, 0.5vw + 0.3rem, 0.75rem);
        padding:clamp(0.2rem, 0.3vw, 0.3rem) clamp(0.5rem, 0.7vw, 0.7rem);
    }
    .roulette.is-revealed .reel-card.is-winner .reel-card__img{
        transform:scale(1.1);
    }

    .roulette.is-revealed .reel-card.is-winner .reel-card__name{
        font-size:clamp(0.85rem, 0.55vw + 0.45rem, 1rem);
    }

    .roulette.is-revealed .reel-card.is-winner .reel-card__exterior{
        font-size:clamp(1.2rem, 1vw + 0.55rem, 1.5rem);
    }

}

@media (min-width: 768px) and (max-width: 1023px){
    .roulette{
        gap:clamp(0.5rem, 1vh, 1rem);
        max-width:clamp(40rem, 95vw, 60rem);
        padding:0 clamp(0.5rem, 1vw, 1rem);
    }

    .roulette__decor{
        width:clamp(5.5rem, 8vw, 8rem);
    }

    .roulette__reel{
        max-width:100%;
        padding:clamp(1.25rem, 2.5vh, 2.25rem) 0;
        border-radius:clamp(2rem, 3vw, 3rem);
    }

    .reel-card{
        width:clamp(7.5rem, 13vw, 10rem);
        height:clamp(9.5rem, 15vw, 12rem);
        padding:clamp(0.55rem, 0.85vw, 0.85rem) clamp(0.45rem, 0.6vw, 0.7rem) clamp(0.85rem, 1.2vw, 1.2rem);
        border-radius:0.875rem;
    }

    .reel-card__img{
        height:clamp(6rem, 9.5vw, 7.75rem);
        margin-top:clamp(0.3rem, 0.7vw, 0.7rem);
    }

    .reel-card__name{
        font-size:clamp(0.7rem, 0.5vw + 0.4rem, 0.85rem);
    }

    .reel-card__exterior{
        font-size:clamp(0.95rem, 0.75vw + 0.5rem, 1.2rem);
    }

    .reel-card__revealed-label{
        top:clamp(0.85rem, 1.25vw, 1.4rem);
        font-size:clamp(0.6rem, 0.5vw + 0.3rem, 0.7rem);
        padding:clamp(0.2rem, 0.3vw, 0.3rem) clamp(0.45rem, 0.6vw, 0.65rem);
    }
    .roulette.is-revealed .reel-card.is-winner .reel-card__img{
        transform:scale(1.08);
    }

    .roulette.is-revealed .reel-card.is-winner .reel-card__name{
        font-size:clamp(0.8rem, 0.6vw + 0.45rem, 0.95rem);
    }

    .roulette.is-revealed .reel-card.is-winner .reel-card__exterior{
        font-size:clamp(1.1rem, 0.85vw + 0.55rem, 1.4rem);
    }
}

.final-screen{
    width:100%;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(0.6rem, 1.2vh, 1.2rem);
    padding-top:clamp(1rem, 2.5vh, 2.5rem);
}

[data-section].show.final-screen{
    display:flex;
    flex:1 1 0;
    min-height:0;
}

body:has(.final-screen.show) .intro__title--default{
    display:none;
}

body:has(.final-screen.show) .intro__title--final{
    display:block;
}

body:has(.final-screen.show) .intro__subtitle--default{
    display:none;
}

body[data-build="Stealth Build"]:has(.final-screen.show) .intro__subtitle--sb,
body[data-build="Neon Rush"]:has(.final-screen.show) .intro__subtitle--nr{
    display:block;
    opacity:0;
    animation:intro-subtitle-in 1.1s cubic-bezier(0.2, 0.7, 0.25, 1) 0.75s both;
    will-change:opacity, transform;
}

body:has(.loader.hide):has(.final-screen.show) .bg-glows__item--3{
    animation:bg-glows-in 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) 0.45s both, bg-glows-pulse 9s ease-in-out 1.15s infinite;
}

body:has(.loader.hide):has(.final-screen.show) .bg-glows__item--2{
    animation:bg-glows-in 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) 0.65s both, bg-glows-pulse 7.5s ease-in-out 1.35s infinite;
}

body:has(.loader.hide):has(.final-screen.show) .bg-glows__item--1{
    animation:bg-glows-in 0.7s cubic-bezier(0.2, 0.7, 0.25, 1) 0.85s both, bg-glows-pulse 6s ease-in-out 1.55s infinite;
}

.final{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    gap:clamp(0.6rem, 0.9vh, 1rem);
}

.final[data-final-stage="1"] .builder{
    cursor:pointer;
    transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation:final-builder-stylish-in 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
    will-change:opacity, filter, transform;
}

@keyframes final-builder-stylish-in{
    0%{
        opacity:0;
        filter:blur(10px) brightness(0.55) saturate(0.6) drop-shadow(0 0 0 rgba(111, 82, 240, 0));
    }
    55%{
        opacity:1;
        filter:blur(2.5px) brightness(1.35) saturate(1.15) drop-shadow(0 0 1.75rem rgba(111, 82, 240, 0.7));
    }
    100%{
        opacity:1;
        filter:blur(0) brightness(1) saturate(1) drop-shadow(0 0 0.65rem rgba(111, 82, 240, 0.25));
    }
}

.final[data-final-stage="1"] .builder:hover,
.final[data-final-stage="1"]:has(.final__cta--open:hover) .builder{
    transform:scale(1.045);
    filter:blur(0) brightness(1.08) saturate(1.05) drop-shadow(0 0 1.1rem rgba(111, 82, 240, 0.45));
}

.final[data-final-stage="1"] .builder__stage{
    animation:final-case-shake 2.4s cubic-bezier(0.36, 0, 0.66, 1) 1.5s infinite;
    transform-origin:50% 65%;
    will-change:transform;
}

@keyframes final-case-shake{
    0%, 80%, 100%{ transform:translate3d(0, 0, 0) rotate(0deg); }
    82%{ transform:translate3d(-1.4%, 0, 0) rotate(-1.6deg); }
    85%{ transform:translate3d( 1.4%, 0, 0) rotate( 1.6deg); }
    88%{ transform:translate3d(-1.1%, 0, 0) rotate(-1.2deg); }
    91%{ transform:translate3d( 1.1%, 0, 0) rotate( 1.2deg); }
    94%{ transform:translate3d(-0.6%, 0, 0) rotate(-0.6deg); }
}

.final[data-final-stage="2"] .builder__stage,
.final[data-final-stage="3"] .builder__stage{
    animation:none;
}

.final[data-final-stage="1"] .builder__fixed--bottom,
.final[data-final-stage="1"] .builder__fixed--top{
    cursor:pointer;
}

.final[data-final-stage="2"] .builder,
.final[data-final-stage="3"] .builder{
    cursor:default;
    transform:none;
}

.final__opened{
    position:absolute;
    top:50%;
    left:50%;
    width:clamp(24rem, 52vw, 44rem);
    height:auto;
    aspect-ratio:600 / 400;
    object-fit:contain;
    pointer-events:none;
    -webkit-user-select:none;
            user-select:none;
    -webkit-user-drag:none;
    transform:translate(-50%, -50%) scale(0.92);
    z-index:4;
    opacity:0;
    transition:opacity 0.9s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease-out;
    filter:drop-shadow(0 0.5rem 0.75rem rgba(0, 0, 0, 0.55)) drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.65)) drop-shadow(0 0 1.25rem rgba(111, 82, 240, 0.3));
}

.final[data-final-stage="1"] .final__opened{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.92);
}

.final[data-final-stage="2"] .final__opened,
.final[data-final-stage="3"] .final__opened{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
}

.final__opened-glow{
    position:absolute;
    top:50%;
    left:50%;
    width:clamp(20rem, 44vw, 38rem);
    height:clamp(13rem, 28vw, 24rem);
    transform:translate(-50%, -50%) scale(0.85);
    z-index:3;
    pointer-events:none;
    opacity:0;
    transition:opacity 0.9s cubic-bezier(0.2, 0.7, 0.25, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    background:radial-gradient(ellipse 55% 65% at 50% 50%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(220, 200, 255, 0.85) 12%,
            rgba(169, 145, 255, 0.65) 28%,
            rgba(111, 82, 240, 0.45) 48%,
            rgba(70, 50, 180, 0.18) 70%,
            rgba(0, 0, 0, 0) 92%);
    filter:blur(8px);
    mix-blend-mode:screen;
    will-change:opacity, transform, filter;
}

.final[data-final-stage="1"] .final__opened-glow{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.7);
}

.final[data-final-stage="2"] .final__opened-glow,
.final[data-final-stage="3"] .final__opened-glow{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
    animation:final-opened-glow-pulse 4.2s ease-in-out 0.4s infinite;
}

@keyframes final-opened-glow-pulse{
    0%, 100%{
        opacity:0.85;
        transform:translate(-50%, -50%) scale(1);
        filter:blur(8px);
    }
    50%{
        opacity:1;
        transform:translate(-50%, -50%) scale(1.08);
        filter:blur(12px);
    }
}

.final[data-final-stage="2"] .builder__fixed,
.final[data-final-stage="3"] .builder__fixed,
.final[data-final-stage="2"] .builder__case-inner-glow,
.final[data-final-stage="3"] .builder__case-inner-glow{
    opacity:0;
    animation:none !important;
    transition:opacity 0.55s ease-out;
}

.final[data-final-stage="2"] .builder__stage,
.final[data-final-stage="3"] .builder__stage{
    overflow:visible;
    mask-image:none;
    -webkit-mask-image:none;
}

.final__info{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(0.4rem, 1vh, 1rem);
    width:100%;
}

.final__summary-line,
.final__summary-build{
    margin:0;
    text-align:center;
    opacity:0;
    will-change:opacity, transform;
}

[data-section].show.final-screen .final__summary-line{
    animation:final-summary-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.30s both;
}

[data-section].show.final-screen .final__summary-build{
    animation:final-summary-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.55s both;
}

@keyframes final-summary-in{
    0%{ opacity:0; transform:translateY(0.5rem); }
    100%{ opacity:1; transform:translateY(0); }
}

.final[data-final-stage="1"] .final__cta--open{
    display:inline-flex;
    animation:final-cta-open-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.95s both;
    will-change:opacity, transform;
}

@keyframes final-cta-open-in{
    0%{ opacity:0; transform:translateY(0.7rem) scale(0.94); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
}

.final[data-final-stage="1"] .final__continue{
    display:none;
}

.final[data-final-stage="2"] .final__cta--open,
.final[data-final-stage="2"] .final__continue{
    display:none;
}

.final[data-final-stage="3"] .final__cta--open{
    display:none;
}

.final[data-final-stage="3"] .final__continue{
    display:flex;
    animation:final-continue-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
    will-change:opacity, transform;
}

.final__cta--continue{
    animation:none !important;
    opacity:1;
}

@keyframes final-continue-in{
    0%{ opacity:0; transform:translateY(0.6rem); }
    100%{ opacity:1; transform:translateY(0); }
}

.final__continue{
    flex-direction:column;
    align-items:center;
    gap:clamp(0.4rem, 0.8vh, 0.7rem);
}

.final__cta-subtext{
    margin:0;
    text-align:center;
    font-size:clamp(0.625rem, 0.5vw + 0.25rem, 0.8rem);
    line-height:1.3;
    color:var(--color-white-2);
    opacity:0.75;
    letter-spacing:0.01em;
    pointer-events:none;
}

.final__pool{
    display:none;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:center;
    gap:clamp(0.6rem, 1vw, 1.1rem);
    width:100%;
    max-width:clamp(60rem, 92vw, 96rem);
    padding:0 clamp(0.5rem, 1vw, 1rem);
    overflow:visible;
}

.final[data-final-stage="3"] .final__pool{
    display:flex;
    margin-top:calc(-0.85 * clamp(20rem, 45vw, 37.5rem) * 400 / 600);
    z-index:5;
    position:relative;
}

.final__pool .reel-card{
    opacity:0;
    transform:translateY(1rem) scale(0.94);
    animation:final-pool-card-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay:calc(var(--i, 0) * 80ms + 200ms);
}

.final__pool .reel-card__name,
.final__pool .reel-card__exterior,
.final__pool .reel-card__revealed-label,
.final__pool .reel-card__img{
    pointer-events:none;
}

@keyframes final-pool-card-in{
    from{ opacity:0; transform:translateY(1rem) scale(0.94); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.final[data-final-stage="3"] .final__pool .reel-card.is-winner{
    transform-origin:50% 50%;
    cursor:pointer;
    border:1.5px solid transparent;
    background:radial-gradient(ellipse 105% 75% at 50% 108%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 85%, transparent) 0%,
            color-mix(in srgb, var(--card-gradient, #6F52F0) 35%, transparent) 35%,
            transparent 75%) padding-box, linear-gradient(180deg,
            rgba(34, 30, 50, 0.92) 0%,
            rgba(22, 18, 32, 0.95) 60%,
            rgba(16, 14, 24, 0.95) 100%) padding-box, conic-gradient(from var(--winner-rotor, 0deg),
            #6F52F0,
            #a991ff,
            #d6c7ff,
            #8e73ff,
            #5a3de0,
            #b39dff,
            #6F52F0) border-box;
    animation:final-pool-card-winner-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, roulette-winner-rotor 3.5s linear infinite, final-winner-bob 3.4s ease-in-out infinite;
    animation-delay:calc(var(--i, 0) * 80ms + 200ms), 0s, calc(var(--i, 0) * 80ms + 850ms);
    box-shadow:0 0 0 2px rgba(169, 145, 255, 0.65), 0 0 2.25rem rgba(111, 82, 240, 0.75), 0 0 5rem rgba(169, 145, 255, 0.55), 0 0 8rem rgba(111, 82, 240, 0.35);
    z-index:2;
}

@keyframes final-pool-card-winner-in{
    from{ opacity:0; transform:translateY(1rem) scale(0.94); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes final-winner-bob{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-0.35rem); }
}

.final[data-final-stage="3"] .final__pool .reel-card.is-winner .reel-card__revealed-label{
    opacity:1;
}

.final[data-final-stage="3"] .final__pool .reel-card.is-winner::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    pointer-events:none;
    animation:roulette-winner-pulse 3.4s ease-in-out infinite;
    will-change:box-shadow, opacity;
}

.final[data-final-stage="3"] .final__info{
    margin-top:clamp(0.4rem, 1vh, 1rem);
    transition:margin 0.6s cubic-bezier(0.2, 0.7, 0.25, 1);
}

[data-section].show.final-screen .final{
    animation:final-section-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin:50% 50%;
    will-change:transform, opacity, filter;
}

@keyframes final-section-in{
    0%{
        opacity:0;
        transform:translateY(0.5rem) scale(0.985);
        filter:blur(4px);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

@media (min-width: 1024px) and (max-width: 1919px){
    .final{
        gap:clamp(0.3rem, 0.7vh, 0.7rem);
    }

    .final__opened{
        width:clamp(18rem, 36vw, 30rem);
    }

    .final__opened-glow{
        width:clamp(15rem, 30vw, 26rem);
        height:clamp(10rem, 20vw, 17rem);
    }

    .final__pool{
        max-width:clamp(50rem, 95vw, 92rem);
        gap:clamp(0.5rem, 0.9vw, 1rem);
    }
    .final[data-final-stage="3"] .final__pool{
        margin-top:calc(-0.85 * clamp(15rem, 30vw, 26rem) * 400 / 600);
    }
}

@media (max-width: 767px){
    .final-screen{
        padding-top:clamp(0.25rem, 1vh, 0.75rem);
    }

    .final__opened{
        width:80vw;
    }

    .final__opened-glow{
        width:70vw;
        height:calc(70vw * 0.5);
    }
    .final__pool{
        max-width:100vw;
        gap:0.4rem;
        overflow-x:auto;
        overflow-y:visible;
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
        padding-top:2px;
        padding-bottom:2px;
        justify-content:flex-start;
    }

    .final__pool::-webkit-scrollbar{
        display:none;
        width:0;
        height:0;
    }
    .final[data-final-stage="3"] .final__pool{
        margin-top:calc(-0.95 * 78vw * 400 / 600);
    }
    .final[data-final-stage="3"] .final__pool .reel-card.is-winner{
        box-shadow:none;
        animation:final-pool-card-winner-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards, roulette-winner-rotor 3.5s linear infinite;
        animation-delay:calc(var(--i, 0) * 80ms + 200ms), 0s;
    }

    .final[data-final-stage="3"] .final__pool .reel-card.is-winner::after{
        animation:none;
        box-shadow:none;
        opacity:0;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .final{
        gap:clamp(0.4rem, 0.7vh, 0.7rem);
    }

    .final__opened{
        width:clamp(20rem, 50vw, 30rem);
    }

    .final__opened-glow{
        width:clamp(16rem, 40vw, 24rem);
        height:clamp(11rem, 25vw, 17rem);
    }

    .final__pool{
        max-width:clamp(40rem, 95vw, 60rem);
        gap:clamp(0.4rem, 0.8vw, 0.85rem);
    }
    .final[data-final-stage="3"] .final__pool{
        margin-top:calc(-0.7 * clamp(15rem, 38vw, 22rem) * 400 / 600);
    }
}





.popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 9995;
  background: rgba(5, 4, 18, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  cursor: pointer;
}
.popup-wrap.show {
  display: block;
  animation: popupFadeIn 0.25s ease;
}
@keyframes popupFadeIn {
  from {
    opacity: 0;
  }
  to   {
    opacity: 1;
  }
}
 
.popup-terms {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9996;
  width: min(74vw, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid rgba(111, 82, 240, 0.4);
  border-radius: 0.52vw;
  box-shadow: 0 0 3vw rgba(111, 82, 240, 0.15), 0 0 2vw rgba(111, 82, 240, 0.10);
  cursor: default;
  display: none;
  animation: popupSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.popup-terms.show {
  display: block;
}
.popup-terms-close {
  position: sticky;
  top: 1vw;
  margin-left: auto;
  margin-right: 1vw;
  width: 2.2vw;
  height: 2.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 82, 240, 0.1);
  border: 1px solid rgba(111, 82, 240, 0.35);
  border-radius: 0.26vw;
  color: var(--color-white-3);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
  z-index: 1;
}
.popup-terms-close svg {
  width: 0.78vw;
  height: 0.78vw;
}
.popup-terms-close:hover {
  background: rgba(111, 82, 240, 0.22);
  border-color: rgba(111, 82, 240, 0.8);
  color: var(--color-white-1);
}
@keyframes popupSlideIn {
  from {
    transform: translate(-50%, calc(-50% + 1.5vw));
    opacity: 0;
  }
  to   {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}


.terms {
  width: 100%;
  max-width: 74vw;
  margin: 0 auto;
  padding: 3vw 3vw 5vw;
  color: var(--color-white-2);
  font-family: var(--font-primary);
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.5;
}
.terms h2 {
  color: var(--color-white-1);
  text-align: center;
  font-family: var(--font-primary);
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.terms h2:after {
  content: "";
  position: relative;
  width: 12vw;
  height: 1px;
  display: block;
  background: linear-gradient(90deg, transparent 0%, var(--color-violet-1) 50%, transparent 100%);
  border: none;
  margin: 1rem auto 2.5rem;
}
.terms h3 {
  margin: 2rem 0 0.75rem;
  color: var(--color-violet-1);
  font-family: var(--font-primary);
  font-size: 1.8vw;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.terms h4 {
  margin: 1.5rem 0 0.5rem;
  color: var(--color-white-1);
  font-family: var(--font-primary);
  font-size: 1.2vw;
  font-weight: 700;
  line-height: 1.2;
}
.terms :is(li, p) {
  margin: 0.4rem 0;
}
.terms strong {
  font-weight: 700;
  color: var(--color-white-1);
}
.terms ol {
  list-style-type: decimal;
  padding-left: 2vw;
}
.terms ul {
  list-style-type: disc;
  padding-left: 2vw;
}

.cookies-text {
  margin-top: 1rem;
  color: var(--color-white-2);
  font-family: var(--font-primary);
  font-size: 1vw;
  font-weight: 400;
  line-height: 1.2;
}
.cookie-link {
  color: var(--color-violet-1);
  text-decoration: none;
  font-weight: 400;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: var(--font-primary);
}

.rules-link {
    color: var(--color-white-2);
    text-decoration: none;
    font-weight: 400;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 0.7rem;
    font-family: var(--font-primary);
    text-transform: uppercase;
}

@media (max-width: 767px) {
  .terms {
    font-size: 3.73vw;
    padding: 8vw 6.4vw 10vw;
    max-width: 100%;
  }
  .terms h1 {
    font-size: 9.6vw;
  }
  .terms h2 {
    font-size: 7.8vw;
  }
  .terms h3 {
    font-size: 4.27vw;
  }
  
  .popup-terms-close {
      width: 5.2vw;
      height: 5.2vw;
  }
  .popup-terms-close svg {
    width: 2.78vw;
    height: 2.78vw;
  }
  .cookies-text {
    font-size: 3.73vw;
  }
}