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

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

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

@font-face{
  font-family:"Montserrat";
  src:url("/fonts/montserrat-v31-latin-900.woff2") format("woff2"), url("/fonts/montserrat-v31-latin-900.woff") format("woff");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

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

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

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

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

@font-face{
  font-family:"Roboto";
  src:url("/fonts/roboto-v51-latin-900.woff2") format("woff2"), url("/fonts/roboto-v51-latin-900.woff") format("woff");
  font-weight:900;
  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:translate(-50%, 300px);
    }

    100%{
        transform:translate(-50%, 0);
    }
}

@keyframes footer-rise{
    from{
        transform:translateY(100%);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }
}

@keyframes case-light-pulse{
    0%, 100%{
        opacity:0.4;
    }

    50%{
        opacity:0.55;
    }
}

@keyframes preview-title-in{
    from{
        opacity:0;
        translate:0 -1.5rem;
        scale:0.93;
        filter:blur(8px);
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
        filter:blur(0);
    }
}

@keyframes preview-case-in{
    from{
        opacity:0;
        translate:0 4rem;
        scale:0.72;
        filter:blur(6px);
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
        filter:none;
    }
}

@keyframes preview-btn-in{
    from{
        opacity:0;
        translate:0 1.5rem;
        scale:0.85;
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
    }
}

@keyframes preview-ambient-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes roulette-stage-in{
    from{
        opacity:0;
        translate:0 -2rem;
        scale:0.92;
        filter:blur(8px);
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
        filter:blur(0);
    }
}

@keyframes roulette-btns-in{
    from{
        opacity:0;
        translate:0 1.5rem;
    }

    to{
        opacity:1;
        translate:0 0;
    }
}

@keyframes roulette-title-in{
    from{
        opacity:0;
        translate:0 1rem;
    }

    to{
        opacity:1;
        translate:0 0;
    }
}

@keyframes roulette-catalog-in{
    from{
        opacity:0;
        translate:0 2rem;
    }

    to{
        opacity:1;
        translate:0 0;
    }
}

@keyframes preview-unlock-items{
    from{ visibility:hidden; }
    to{ visibility:visible; }
}

@keyframes preview-unlock-pointer{
    from{ pointer-events:none; }
    to{ pointer-events:auto; }
}

@keyframes case-hover-glow-pulse{
    0%, 100%{
        filter:brightness(0.85);
        transform:scale(1);
    }

    50%{
        filter:brightness(1.15);
        transform:scale(1.05);
    }
}

@keyframes item-hover-glow-pulse-dc{
    0%, 100%{
        filter:brightness(0.9) drop-shadow(0 0 1px rgba(255, 165, 55, 0.85)) drop-shadow(0 0 2px rgba(255, 150, 45, 0.8)) drop-shadow(0 0 5px rgba(246, 120, 35, 0.5));
        transform:scale(1);
    }

    50%{
        filter:brightness(1.2) drop-shadow(0 0 1px rgba(255, 165, 55, 0.85)) drop-shadow(0 0 2px rgba(255, 150, 45, 0.8)) drop-shadow(0 0 5px rgba(246, 120, 35, 0.5));
        transform:scale(1.03);
    }
}

@keyframes activate-card-in{
    from{
        opacity:0;
        translate:0 2.5rem;
        scale:0.92;
        filter:blur(6px);
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
        filter:blur(0);
    }
}

@keyframes activate-hover-glow-pulse{
    0%, 100%{
        filter:brightness(1);
    }

    50%{
        filter:brightness(1.2);
    }
}

@keyframes item-hover-glow-pulse-v{
    0%, 100%{
        filter:brightness(0.9) drop-shadow(0 0 1px rgba(120, 50, 200, 1)) drop-shadow(0 0 2px rgba(120, 50, 200, 0.9)) drop-shadow(0 0 5px rgba(85, 35, 160, 0.5));
        transform:scale(1);
    }

    50%{
        filter:brightness(1.2) drop-shadow(0 0 1px rgba(120, 50, 200, 1)) drop-shadow(0 0 2px rgba(120, 50, 200, 0.9)) drop-shadow(0 0 5px rgba(85, 35, 160, 0.5));
        transform:scale(1.03);
    }
}

@keyframes case-hover-glow-pulse-scale{
    0%, 100%{
        filter:brightness(0.85);
        scale:1;
    }

    50%{
        filter:brightness(1.15);
        scale:1.05;
    }
}

@keyframes case-breathe{
    0%, 100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.018);
    }
}

@keyframes case-breathe-scale{
    0%, 100%{
        scale:1;
    }

    50%{
        scale:1.01;
    }
}

@keyframes case-breathe-transform{
    0%, 100%{
        transform:translate(-50%, -50%) scale(1);
    }

    50%{
        transform:translate(-50%, -50%) scale(1.01);
    }
}

@keyframes case-picked-flicker{
    0%, 100%{
        opacity:0;
    }

    50%{
        opacity:1;
    }
}

@keyframes case-closed-glint{
    0%, 80%, 100%{
        filter:brightness(1) saturate(1);
    }

    90%{
        filter:brightness(1.15) saturate(1.15) contrast(1.1);
    }
}

@keyframes btn-preview-glow{
    0%, 100%{
        opacity:0.22;
        transform:scale(1);
    }

    50%{
        opacity:0.55;
        transform:scale(1.04);
    }
}

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

@keyframes auth-popup-modal-in{
    from{
        opacity:0;
        translate:0 1rem;
        scale:0.94;
    }

    to{
        opacity:1;
        translate:0 0;
        scale:1;
    }
}

@keyframes roulette-roll-dc{
    0%{
        transform:translateX(0);
        animation-timing-function:cubic-bezier(0.3, 0, 0.55, 1);
    }

    8%{
        transform:translateX(8rem);
        animation-timing-function:cubic-bezier(0.55, 0, 0.08, 1);
    }

    100%{
        transform:translateX(calc(-2 * var(--items-count--DC, 22) * var(--item-step)));
    }
}

@keyframes roulette-roll-v{
    0%{
        transform:translateX(0);
        animation-timing-function:cubic-bezier(0.3, 0, 0.55, 1);
    }

    8%{
        transform:translateX(8rem);
        animation-timing-function:cubic-bezier(0.55, 0, 0.08, 1);
    }

    100%{
        transform:translateX(calc(-2 * var(--items-count--V, 16) * var(--item-step)));
    }
}

.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%, #07080D 0%, #131E30 100%);
}

.loader .loader__inner{
        width:220px;
        aspect-ratio:1;
        --c:no-repeat linear-gradient(var(--color-orange-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:"Montserrat", sans-serif;
    --font-secondary:"Roboto", sans-serif;
    --color-white-1:#FFFFFF;

    --color-grey-1:#B3C7E4;
    --color-grey-2:#8194B1;
    --color-grey-3:#4F5E73;

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

    --color-orange-1:#F69B34;
    --color-orange-2:#F65E34;
    --color-orange-3:#FEBCA8;

    --color-pink-1:#FF42F2;
    --color-pink-2:#B934F6;
    --color-pink-3:#FFACF9;
    --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;
    font-family:var(--font-primary);
    color:var(--color-white-1);
    background-color:#000;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.1) 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;
}

.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;
    min-height:0;
}

@media (max-width: 767px){

.content{
        overflow:hidden;
}
    }

.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;
    }
    html,
    body,
    .main,
    .content{
        overflow-x:hidden;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    html,
    body,
    .main,
    .content{
        overflow-x:hidden;
    }
}

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

.text-btn{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.75rem, 1.294vw + 1.447rem, 3rem);
    font-style:normal;
    font-weight:600;
    line-height:1.1;
    text-transform:uppercase;
}

.text-terms-link{
    font-family:var(--font-primary);
    font-size:clamp(0.875rem, 0.388vw + 0.784rem, 1.25rem);
    font-style:normal;
    font-weight:500;
    line-height:1;
    color:var(--color-grey-1);
}

.text-footer-info{
    font-family:var(--font-primary);
    font-size:clamp(0.5rem, 0.129vw + 0.47rem, 0.65rem);
    font-style:normal;
    font-weight:400;
    line-height:1;
    text-transform:uppercase;
    color:var(--color-grey-2);
}

.text-preview-title{
    font-family:var(--font-secondary);
    font-size:clamp(2.5rem, 3.107vw + 1.272rem, 5rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-user-select:none;
            user-select:none;
}

.text-preview-title span{
        background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-orange-1) 0%, var(--color-orange-2) 100%);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

.text-preview-title i{
        font-size:clamp(1rem, 3.107vw + 1.272rem, 2.25rem);
        text-transform:uppercase;
        display:block;
    }

.text-preview-openings-1{
    font-family:var(--font-primary);
    color:var(--color-orange-2);
    font-size:clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
    text-transform:uppercase;
}

.text-preview-openings-2{
    font-family:var(--font-primary);
    color:var(--color-pink-1);
    font-size:clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
    text-transform:uppercase;
}

.text-preview-casename{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
}

.text-preview-of-last-month-1{
    color:var(--color-white-1);
    font-family:var(--font-primary);
    font-size:clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
}

.text-preview-of-last-month-1 span{
        color:var(--color-orange-2);
    }

.text-preview-of-last-month-2{
    color:var(--color-white-1);
    font-family:var(--font-primary);
    font-size:clamp(0.75rem, 0.647vw + 0.598rem, 1.375rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
}

.text-preview-of-last-month-2 span{
        color:var(--color-pink-1);
    }

.text-preview-gun-info{
    font-family:var(--font-primary);
    color:var(--color-grey-2);
    font-size:clamp(1rem, 0.129vw + 0.97rem, 1.125rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
}

.text-roulette-casename{
    font-family:var(--font-secondary);
    font-size:clamp(2rem, 2.265vw + 2.282rem, 4rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-roulette-title-1{
    font-family:var(--font-secondary);
    font-size:clamp(2.813rem, 2.265vw + 2.282rem, 5rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-user-select:none;
            user-select:none;
}

.text-roulette-title-1 span{
        background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-orange-1) 0%, var(--color-orange-2) 100%);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

.text-roulette-title-2{
    font-family:var(--font-secondary);
    font-size:clamp(2.813rem, 2.265vw + 2.282rem, 5rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-user-select:none;
            user-select:none;
}

.text-roulette-title-2 span{
        background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-pink-1) 0%, var(--color-pink-2) 100%);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

.text-roulette-gun-card-info-1{
    font-family:var(--font-primary);
    color:var(--color-orange-3);
    font-size:clamp(1rem, 0.129vw + 0.97rem, 1.125rem);
    font-style:normal;
    font-weight:500;
    line-height:1.4;
}

.text-roulette-gun-card-value-1{
    font-family:var(--font-primary);
    font-size:clamp(1rem, 0.129vw + 0.97rem, 1.125rem);
    font-style:normal;
    font-weight:600;
    line-height:1.4;
    background:radial-gradient(74.87% 100% at 50% 0%, var(--color-orange-1) 0%, var(--color-orange-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-roulette-gun-card-exterior-1{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(0.8rem, 0.129vw + 1.095rem, 1rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
    text-shadow:0 0 5px rgba(255, 227, 17, 0.90);
}

.text-roulette-gun-card-info-2{
    font-family:var(--font-primary);
    color:var(--color-pink-3);
    font-size:clamp(1rem, 0.129vw + 0.97rem, 1.125rem);
    font-style:normal;
    font-weight:500;
    line-height:1.4;
}

.text-roulette-gun-card-value-2{
    font-family:var(--font-primary);
    font-size:clamp(1rem, 0.129vw + 0.97rem, 1.125rem);
    font-style:normal;
    font-weight:600;
    line-height:1.4;
    background:radial-gradient(74.87% 100% at 50% 0%, var(--color-pink-1) 0%, var(--color-pink-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-roulette-gun-card-exterior-2{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(0.8rem, 0.129vw + 1.095rem, 1rem);
    font-style:normal;
    font-weight:500;
    line-height:1.1;
    text-shadow:0 0 5px rgba(246, 52, 233, 0.90);
}

.text-popup-title{
    font-family:var(--font-secondary);
    font-size:clamp(2.25rem, 0.777vw + 2.068rem, 3rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-user-select:none;
            user-select:none;
}

.text-popup-title span{
        background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-orange-1) 0%, var(--color-orange-2) 100%);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

.text-popup-btn{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.625rem, 0.129vw + 1.595rem, 1.75rem);
    font-style:normal;
    font-weight:600;
    line-height:1.1;
    text-shadow:0 0 5px rgba(246, 94, 52, 0.90);
}

.text-activate-card-title-1{
    font-family:var(--font-secondary); 
    font-size:clamp(2.25rem, 0.906vw + 2.038rem, 3.125rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, #FFF 0%, #29EA96 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-activate-card-info-1{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.125rem, 0.129vw + 1.095rem, 1.25rem);
    font-style:normal;
    font-weight:500;
    line-height:1.2;
}

.text-activate-card-info-1 span{
        color:#34F67E;
    }

.text-activate-card-btn-1{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.5rem, 0.129vw + 1.47rem, 1.625rem);
    font-style:normal;
    font-weight:600;
    line-height:1.4;
    text-shadow:0 0 5px rgba(52, 246, 126, 0.90);
}

.text-activate-card-title-2{
    font-family:var(--font-secondary); 
    font-size:clamp(2.25rem, 0.906vw + 2.038rem, 3.125rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-activate-card-info-2{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.125rem, 0.129vw + 1.095rem, 1.25rem);
    font-style:normal;
    font-weight:500;
    line-height:1.2;
}

.text-activate-card-info-2 span{
        color:var(--color-orange-1);
    }

.text-activate-card-btn-2{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.5rem, 0.129vw + 1.47rem, 1.625rem);
    font-style:normal;
    font-weight:600;
    line-height:1.4;
    text-shadow:0 0 5px rgba(255, 227, 17, 0.90);
}

.text-activate-card-title-3{
    font-family:var(--font-secondary); 
    font-size:clamp(2.25rem, 0.906vw + 2.038rem, 3.125rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    background:radial-gradient(308.1% 47.08% at 50% 50%, var(--color-white-1) 0%, var(--color-grey-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-activate-card-info-3{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.125rem, 0.129vw + 1.095rem, 1.25rem);
    font-style:normal;
    font-weight:500;
    line-height:1.2;
}

.text-activate-card-info-3 span{
        color:#F634E9;
    }

.text-activate-card-btn-3{
    font-family:var(--font-primary);
    color:var(--color-white-1);
    font-size:clamp(1.5rem, 0.129vw + 1.47rem, 1.625rem);
    font-style:normal;
    font-weight:600;
    line-height:1.4;
    text-shadow:0 0 5px rgba(246, 52, 233, 0.90);
}

.btn-preview{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1.125rem clamp(2.5rem, 4vw, 4rem);
    min-width:clamp(16rem, 19vw, 22rem);
    border-radius:9999px;
    border:1px solid;
    background:#131E30;
    color:var(--color-white-1);
    cursor:pointer;
    isolation:isolate;
    white-space:nowrap;
    transition:box-shadow 0.5s ease, text-shadow 0.5s ease, filter 0.4s ease, transform 0.25s ease;
    will-change:transform;
    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transform:translateZ(0);
}

.btn-preview > *{
    white-space:nowrap;
}

.btn-preview:hover{
    transform:scale(1.03) translateZ(0);
}

.btn-preview::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    mix-blend-mode:screen;
    border-radius:inherit;
    z-index:-1;
}

.btn-preview::after{
    content:"";
    position:absolute;
    inset:-0.125rem;
    pointer-events:none;
    border-radius:inherit;
    z-index:-2;
    will-change:opacity, transform;
}

.btn-preview--dc{
    border-color:var(--color-orange-2);
    box-shadow:inset 0 0 0.75rem rgba(246, 94, 52, 0.85);
    text-shadow:0 0 0.3125rem rgba(246, 94, 52, 0.9);

}

.btn-preview--dc::before{
    background:radial-gradient(ellipse 90% 110% at 50% 100%,
            rgba(246, 94, 52, 1) 0%,
            rgba(246, 94, 52, 0) 70%);
}

.btn-preview--dc::after{
    box-shadow:0 0 2rem var(--color-orange-3);
    animation:btn-preview-glow 3.2s ease-in-out infinite;
}

.btn-preview--v{
    border-color:#F634E3;
    box-shadow:inset 0 0 0.75rem rgba(246, 52, 227, 0.85);
    text-shadow:0 0 0.3125rem rgba(246, 52, 227, 0.9);
}

.btn-preview--v::before{
    background:radial-gradient(ellipse 90% 110% at 50% 100%,
            rgba(246, 52, 227, 1) 0%,
            rgba(246, 52, 227, 0) 70%);
}

.btn-preview--v::after{
    box-shadow:0 0 2rem var(--color-pink-3);
    animation:btn-preview-glow 3.2s ease-in-out infinite -1.1s;
}

.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .btn-preview--dc,
.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .btn-preview--dc{
    box-shadow:inset 0 0 0.125rem var(--color-orange-2), inset 0 0 0.625rem var(--color-orange-2), inset 0 0 1.25rem var(--color-orange-2), 0 0 0.375rem rgba(246, 94, 52, 0.95), 0 0 0.875rem rgba(246, 94, 52, 0.85), 0 0 1.75rem rgba(246, 94, 52, 0.6);
    text-shadow:0 0 0.3125rem rgba(246, 94, 52, 0.95), 0 0 0.625rem rgba(246, 94, 52, 0.85), 0 0 1.25rem rgba(246, 94, 52, 0.7), 0 0 1.875rem rgba(246, 94, 52, 0.45);
}

.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .btn-preview--v,
.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .btn-preview--v{
    box-shadow:inset 0 0 0.125rem #F634E3, inset 0 0 0.625rem #F634E3, inset 0 0 1.25rem #F634E3, 0 0 0.375rem rgba(246, 52, 227, 0.95), 0 0 0.875rem rgba(246, 52, 227, 0.85), 0 0 1.75rem rgba(246, 52, 227, 0.6);
    text-shadow:0 0 0.3125rem rgba(255, 65, 236, 0.95), 0 0 0.625rem rgba(255, 65, 236, 0.85), 0 0 1.25rem rgba(255, 65, 236, 0.7), 0 0 1.875rem rgba(255, 65, 236, 0.45);
}

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

@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;
    box-sizing:border-box;
    -webkit-user-select:none;
            user-select:none;

    padding:1.25rem clamp(1.5rem, 2.6vw, 3.125rem);
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom, 0px));

    border-radius:1.25rem 1.25rem 0 0;
    background:linear-gradient(180deg, #131E30 0%, #07080D 100%);
    transform:translateY(100%);
    opacity:0;
}

.footer.show{
        animation:footer-rise 0.6s ease-out 0.5s forwards;
    }

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

.footer .footer__brand{
        display:flex;
        align-items:center;
        gap:clamp(1rem, 2vw, 2rem);
        flex-shrink:0;
    }

.footer .footer__logo{
        font-family:var(--font-primary);
        font-weight:700;
        font-size:clamp(1.125rem, 0.388vw + 1.034rem, 1.5rem);
        line-height:1;
        color:var(--color-grey-1);
        letter-spacing:0.02em;
        white-space:nowrap;
    }

.footer .footer__copy{
        display:flex;
        flex-direction:column;
        gap:0.375rem;
    }

:is(.footer .footer__copy) > div{
            display:flex;
            align-items:center;
            gap:0.5rem;
        }

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

:is(.footer .footer__copy) a{
            color:var(--color-grey-1);
            transition:color 0.2s ease;
        }

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

.footer .footer__terms{
        display:flex;
        align-items:center;
        gap:clamp(1.75rem, 1.04vw + 0.5rem, 2.75rem);
        color:var(--color-grey-1);
    }

:is(.footer .footer__terms) p{
            transition:color 0.2s ease;
            cursor:pointer;
        }

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

:is(.footer .footer__terms) .footer__terms-age{
            font-family:var(--font-primary);
            font-weight:500;
            color:inherit;
        }

.footer .footer__lang{
        position:relative;
        flex-shrink:0;
    }

.footer .footer__lang-backdrop{
        position:fixed;
        inset:0;
        z-index:5050;
        display:none;
        background:transparent;
    }

.footer .show[data-flags^="selector"] .footer__lang-backdrop{
        display:block;
    }

.footer .footer__lang-current{
        position:relative;
        z-index:5060;
        display:flex;
        align-items:center;
        justify-content:center;
        height:2.75rem;
        min-width:3.75rem;
        padding:0.625rem 0.9375rem;
        border:1px solid var(--color-grey-3);
        border-radius:0.9375rem;
        background:transparent;
        color:var(--color-grey-1);
        cursor:pointer;
        transition:border-color 0.2s ease, background-color 0.2s ease;
    }

:is(.footer .footer__lang-current):hover{
            border-color:var(--color-grey-1);
            background-color:rgba(179, 199, 228, 0.05);
        }

:is(.footer .footer__lang-current) img{
            display:block;
            width:1.5rem;
            height:auto;
            -webkit-user-drag:none;
        }

.footer .footer__lang-list{
        position:absolute;
        right:0;
        bottom:calc(100% + 0.5rem);
        z-index:5100;

        display:flex;
        flex-direction:column;
        gap:0.25rem;
        padding:0.375rem;
        border:1px solid var(--color-grey-3);
        border-radius:0.75rem;
        background-color:rgba(10, 16, 26, 0.95);
        backdrop-filter:blur(8px);
        list-style:none;

        opacity:0;
        visibility:hidden;
        transform:translateY(4px);
        transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        pointer-events:none;
    }

.footer .show[data-flags^="selector"] .footer__lang-list{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

.footer .footer__lang-item{
        display:flex;
        align-items:center;
        justify-content:center;
        width:3rem;
        height:2rem;
        padding:0.25rem 0.5rem;
        border-radius:0.5rem;
        background:transparent;
        cursor:pointer;
        transition:background-color 0.18s ease;
    }

:is(.footer .footer__lang-item):hover{
            background-color:rgba(179, 199, 228, 0.1);
        }

:is(.footer .footer__lang-item) img{
            display:block;
            width:1.5rem;
            height:auto;
            -webkit-user-drag:none;
        }

.footer .footer__lang-item.hide{
        display:none;
    }

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

.footer{
        padding:1rem 1.25rem;
        padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
        border-radius:1rem 1rem 0 0;
}

        .footer .footer__content{
            flex-direction:column;
            align-items:stretch;
            gap:0.875rem;
        }

        .footer .footer__brand{
            flex-direction:column;
            align-items:flex-start;
            gap:0.5rem;
            padding-right:5rem;
        }

        .footer .footer__logo{
            font-size:1.25rem;
        }

        .footer .footer__copy{
            gap:0.3rem;
            align-items:flex-start;
        }

            :is(.footer .footer__copy) > div{
                flex-wrap:wrap;
                gap:0.5rem;
            }

        .footer .footer__terms{
            justify-content:flex-start;
            flex-wrap:nowrap;
            gap:1rem;
            margin-top:0.5rem;
            margin-bottom:1.5rem;
            order:2;
            font-size:0.75rem;
        }

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

        .footer .footer__lang{
            position:absolute;
            top:1rem;
            right:1.25rem;
        }

        .footer .footer__lang-current{
            height:2.5rem;
            min-width:3.5rem;
            padding:0.5rem 0.75rem;
            border-radius:0.75rem;
        }

            :is(.footer .footer__lang-current) img{
                width:1.25rem;
                height:1.25rem;
                object-fit:contain;
            }

        .footer .footer__lang-list{
            top:calc(100% + 0.5rem);
            bottom:auto;
            padding:0;
            gap:0.5rem;
            border:none;
            background:transparent;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
        }

        .footer .footer__lang-item{
            width:3.5rem;
            height:2.5rem;
            padding:0.5rem 0.75rem;
            border:1px solid var(--color-grey-3);
            border-radius:0.75rem;
            background-color:rgba(10, 16, 26, 0.95);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
        }

            :is(.footer .footer__lang-item) img{
                width:1.25rem;
                height:1.25rem;
                object-fit:contain;
            }
    }

@media (max-width: 767px){

.footer{
        padding:0.75rem 1rem;
        padding-bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-radius:0.875rem 0.875rem 0 0;
}

        .footer .footer__content{
            flex-direction:column;
            align-items:stretch;
            gap:0.625rem;
        }
        .footer .footer__brand{
            flex-direction:column;
            align-items:flex-start;
            gap:0.4rem;
            padding-right:4rem;
        }

        .footer .footer__logo{
            font-size:1.125rem;
        }
        .footer .footer__copy{
            gap:0.25rem;
            align-items:flex-start;
        }

            :is(.footer .footer__copy) > div{
                flex-wrap:wrap;
                gap:0.375rem;
            }
        .footer .footer__terms{
            justify-content:center;
            flex-wrap:nowrap;
            gap:0.625rem;
            margin-top:0.5rem;
            order:2;
            font-size:0.55rem;
        }

            :is(.footer .footer__terms) p{
                white-space:nowrap;
            }
        .footer .footer__lang{
            position:absolute;
            top:0.75rem;
            right:1rem;
        }

        .footer .footer__lang-current{
            height:2.25rem;
            min-width:3rem;
            padding:0.375rem 0.625rem;
            border-radius:0.625rem;
        }

            :is(.footer .footer__lang-current) img{
                width:1.125rem;
                height:1.125rem;
                object-fit:contain;
            }
        .footer .footer__lang-list{
            top:calc(100% + 0.375rem);
            bottom:auto;
            padding:0;
            gap:0.375rem;
            border:none;
            background:transparent;
            backdrop-filter:none;
            -webkit-backdrop-filter:none;
        }
        .footer .footer__lang-item{
            width:3rem;
            height:2.25rem;
            padding:0.375rem 0.625rem;
            border:1px solid var(--color-grey-3);
            border-radius:0.625rem;
            background-color:rgba(10, 16, 26, 0.95);
            backdrop-filter:blur(8px);
            -webkit-backdrop-filter:blur(8px);
        }

            :is(.footer .footer__lang-item) img{
                width:1.125rem;
                height:1.125rem;
                object-fit:contain;
            }
    }

.coockie-banner{
    position:fixed;
    width:74%;
    height:auto;
    bottom:0;
    z-index:var(--z-consent);
    background:linear-gradient(180deg, #1C1040 0%, #0A061C 100%);
    border-top:1px solid rgba(185, 52, 246, 0.3);
    padding:0.72rem clamp(2rem, 2.6vw, 3rem);

    border-radius:1.25rem 1.25rem 0 0;
    left:50%;
    transform:translate(-50%, 300px);
 
}

@media (max-width: 767px){

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

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

.coockie-banner{
        width:70%;
 
}
    }

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

.coockie-banner{
        width:85%;
        left:41%;
 
}
    }

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

.coockie-banner__inner{
    
    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;
}
    }

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

.coockie-banner__inner{
        margin-bottom:1.5rem;
}
    }

.coockie-banner__inner h3{
        color:var(--color-pink-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:0.8rem;
            text-align:left;
    }
        }

.coockie-banner__text{
    flex:1;
    font-size:0.8rem;
    color:var(--color-grey-1);
    max-width:1000px;
    font-family:var(--font-primary);
    -webkit-user-select:none;
            user-select:none;
    line-height:1.4;
    display:inline-block;
}

@media (max-width: 767px){

.coockie-banner__text{
        font-size:0.7rem;
        text-align:left;
}
    }

.coockie-banner__link{
    color:var(--color-grey-1);
    text-decoration:underline;
    font-weight:700;
    cursor:pointer;
    display:inline;
}

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

@media (max-width: 767px){

.coockie-banner__link{
         font-size:0.8rem;
}
    }

.coockie-banner__btn{
    align-self:flex-end;

    border:1px solid rgba(185, 52, 246, 0.45);
    background:rgba(28, 16, 64, 0.8);
    color:var(--color-white-1);

    padding:1rem clamp(1.5rem, 4vw, 2rem);
 
    border-radius:9999px;

    transition:background 0.15s ease-out, border-color 0.15s ease-out;
}

.coockie-banner__btn:hover{
        background:rgba(46, 20, 100, 0.9);
        border-color:rgba(185, 52, 246, 0.8);
    }

@media (max-width: 767px){

.coockie-banner__btn{
        padding:0.5rem clamp(1rem, 4vw, 1.5rem);
}
    }

.coockie-banner__btn span{
        font-size:1.5rem;
        font-family:var(--font-primary);
        text-transform:uppercase;
        font-weight:500;
    }

@media (max-width: 767px){

.coockie-banner__btn span{
             font-size:0.8rem;
    }
        }

.policy-popup{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;


  width:100vw;
  height:auto;
  background:rgba(0, 0, 0, 0.75);


}

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

.policy-popup__overlay{
  position:absolute;
  inset:0;
  z-index:0;
  cursor:pointer;
}

.policy-popup__close{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:10;

  font-size:1.5rem;
  color:var(--color-grey-1);
  cursor:pointer;
  transition:color 0.2s ease;
  text-decoration:none;
}

.policy-popup__close:hover{
    color:var(--color-white-1);
  }

@media (max-width: 767px){

.policy-popup__close{
    font-size:1.1rem;
    top:0.625rem;
    right:0.75rem;
}
  }

.preview-screen{
    position:relative;
    width:100%;
    height:100%;
    padding:0 clamp(2rem, 3vw, 4rem) 0;
    box-sizing:border-box;
}

.preview-screen::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background-image:radial-gradient(ellipse 22% 30% at 30% 70%,
            rgba(255, 165, 80, 0.45) 0%,
            rgba(255, 178, 60, 0.20) 30%,
            rgba(246, 155, 52, 0.05) 60%,
            rgba(246, 155, 52, 0) 80%), radial-gradient(ellipse 22% 30% at 70% 70%,
            rgba(95, 195, 255, 0.45) 0%,
            rgba(70, 160, 245, 0.20) 30%,
            rgba(50, 120, 220, 0.05) 60%,
            rgba(50, 120, 220, 0) 80%), radial-gradient(ellipse 55% 70% at 35% 75%,
            rgba(255, 159, 70, 0.22) 0%,
            rgba(255, 178, 60, 0.10) 25%,
            rgba(246, 155, 52, 0.03) 50%,
            rgba(246, 155, 52, 0) 70%), radial-gradient(ellipse 55% 70% at 65% 75%,
            rgba(70, 175, 255, 0.22) 0%,
            rgba(60, 145, 240, 0.10) 25%,
            rgba(50, 120, 220, 0.03) 50%,
            rgba(50, 120, 220, 0) 70%);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.preview-screen.show{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.preview-screen .preview-screen__title{
    position:relative;
    max-width:75rem;
    text-align:center;
    opacity:0;
    font-size:clamp(2.25rem, 2.8vw + 0.9rem, 4.25rem);
}

:is(.preview-screen .preview-screen__title) i{
        font-size:clamp(1rem, 2.2vw + 0.45rem, 1.9rem);
    }

.preview-screen .preview-screen__cases{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1rem;
    width:100%;
    max-width:96rem;
}

.preview-screen .preview-case__core{
    opacity:0;
}

.preview-screen .preview-case__btn-wrap{
    opacity:0;
}

.preview-screen.show .preview-screen__title{
    animation:preview-title-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}

.preview-screen.show .preview-case__core{
    animation:preview-case-in 1s cubic-bezier(0.34, 1.25, 0.5, 1) 1s forwards;
}

.preview-screen.show::before{
    animation:preview-ambient-in 1.4s ease-out 1s forwards;
}

.preview-screen.show .preview-case__btn-wrap{
    animation:preview-btn-in 0.9s cubic-bezier(0.34, 1.3, 0.5, 1) 1.7s forwards;
}

.preview-screen .preview-case__items{
    visibility:hidden;
}

.preview-screen.show .preview-case__items{
    animation:preview-unlock-items 0.001s linear 2.6s forwards;
}

.preview-screen .preview-item{
    visibility:hidden;
}

.preview-screen.show .preview-item{
    animation:preview-unlock-items 0.001s linear 2.6s forwards;
}

.preview-screen .preview-case .preview-case__stage,
.preview-screen .preview-case .preview-case__topbadge{
    pointer-events:none;
}

.preview-screen.show .preview-case .preview-case__stage,
.preview-screen.show .preview-case .preview-case__topbadge{
    animation:preview-unlock-pointer 0.001s linear 2s forwards;
}

.preview-screen .preview-case__btn{
    pointer-events:none;
}

.preview-screen.show .preview-case__btn{
    animation:preview-unlock-pointer 0.001s linear 2.6s forwards;
}

.preview-case{
    position:relative;
    width:clamp(28rem, 40vw, 48rem);
    transition:filter 0.4s ease;
}

.preview-case .preview-case__core{
    position:relative;
    width:100%;
    transition:transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.preview-case .preview-case__core::before{
    content:"";
    position:absolute;
    inset:-8% -10%;
    pointer-events:none;
    opacity:0;
    will-change:filter, transform;
    transition:opacity 0.4s ease;
}

.preview-case--dc .preview-case__core::before{
    background:radial-gradient(ellipse 65% 55% at 50% 60%,
            rgba(255, 165, 70, 0.55) 0%,
            rgba(246, 155, 52, 0.30) 25%,
            rgba(246, 94, 52, 0.10) 55%,
            rgba(246, 94, 52, 0) 80%);
}

.preview-case--v .preview-case__core::before{
    background:radial-gradient(ellipse 65% 55% at 50% 60%,
            rgba(110, 200, 255, 0.55) 0%,
            rgba(70, 160, 245, 0.30) 25%,
            rgba(50, 120, 220, 0.10) 55%,
            rgba(50, 120, 220, 0) 80%);
}

.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core::before,
.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core::before,
.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core::before,
.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core::before{
    opacity:1;
    animation:case-hover-glow-pulse 2.4s ease-in-out infinite;
}

.preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--v,
.preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--v,
.preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--dc,
.preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--dc{
    filter:brightness(0.35) saturate(0.55) blur(1px);
}

.preview-case .preview-case__stage{
    position:relative;
    width:100%;
    aspect-ratio:1579 / 1272;
}

.preview-case .preview-case__stage::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:22%;
    width:66%;
    height:11%;
    background:radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.78) 35%,
            rgba(0, 0, 0, 0.4) 65%,
            transparent 90%);
    filter:blur(10px);
    pointer-events:none;
}

.preview-case--dc .preview-case__stage::before{
    transform:translateX(calc(-50% + 0.75rem)) rotate(-12deg);
}

.preview-case--v .preview-case__stage::before{
    transform:translateX(calc(-50% - 0.75rem)) rotate(12deg);
}

.preview-case .preview-case__img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
    -webkit-user-drag:none;
}

.preview-case .preview-case__img--closed{
    opacity:1;
    transition:opacity 0.45s ease;
    animation:case-closed-glint 5.5s ease-in-out infinite;
    will-change:filter;
}

.preview-case--v .preview-case__img--closed{
    animation-delay:1.05s;
}

.preview-case .preview-case__img--light{
    position:absolute;
    inset:auto;

    transform:translate(-50%, -50%);
    width:50%;
    height:auto;
    opacity:0.55;
    mix-blend-mode:screen;
    animation:case-light-pulse 0.015s ease-in-out infinite;
    transition:opacity 0.45s ease;
    will-change:opacity;
}

.preview-case .preview-case__img--light--dc{
    top:67%;
    left:57%;
    animation-delay:0.3;
}

.preview-case .preview-case__img--light--v{
    top:66%;
    left:44%;
}

.preview-case .preview-case__img--opened{
    opacity:0;
    transition:opacity 0.45s ease;
}

.preview-case .preview-case__img--picked{
    opacity:0;
    transition:opacity 0.2s ease;
}

.preview-case .preview-case__badges{
    position:absolute;
    top:22%;
    left:50%;
    display:flex;
    gap:0.9rem;
    white-space:nowrap;
    z-index:2;
    opacity:1;
    transform:translate(-50%, 0);
    transition:opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
    -webkit-user-select:none;
            user-select:none;
}

.preview-case .preview-case__pill{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:1.25rem 1.5625rem;
    border-radius:0.9375rem;
    border:1px solid var(--color-grey-3);
    position:relative;
    isolation:isolate;
    background:radial-gradient(588.3% 37.4% at 50.13% 50%,
            rgba(47, 71, 107, 0.55) 0%,
            rgba(20, 28, 42, 0.45) 100%);
    backdrop-filter:blur(18px) saturate(160%);
}

.preview-case .preview-case__pill--name{
    background:none;
    backdrop-filter:none;
}

.preview-case--dc .preview-case__pill--openings{
    border-color:rgba(246, 94, 52, 0.7);
    background:radial-gradient(946% 60.14% at 50% 50%,
            rgba(20, 28, 42, 0.45) 0%,
            rgba(246, 94, 52, 0.35) 100%);
    backdrop-filter:blur(18px) saturate(160%);
}

.preview-case--v .preview-case__pill--openings{
    border:1px solid rgba(246, 52, 233, 0.7);
    background:radial-gradient(946% 60.14% at 50% 50%,
            rgba(20, 28, 42, 0.45) 0%,
            rgba(246, 52, 233, 0.35) 100%);
    backdrop-filter:blur(18px) saturate(160%);
}

.preview-case .preview-case__pill-icon{
    width:1.375rem;
    height:1.375rem;
    flex-shrink:0;
}

.preview-case .preview-case__pill-sep{
    margin:0 0.375rem;
    opacity:0.55;
}

.preview-case .preview-case__pill-value{
    color:var(--color-white-1);
}

.preview-case .preview-case__pill--name,
.preview-case .preview-case__topbadge{
    text-shadow:0 0 1px rgba(0, 0, 0, 0.95), 0 1px 1px rgba(0, 0, 0, 0.8);
}

.preview-case .preview-case__topbadge{
    position:absolute;
    top:10%;
    left:50%;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:1.25rem 1.5625rem;
    border:1px solid var(--color-grey-3);
    border-radius:0.9375rem;

    white-space:nowrap;
    z-index:2;
    opacity:0;
    transform:translate(-50%, 0.4rem);
    pointer-events:none;
    transition:opacity 0.15s ease, transform 0.15s ease;
    -webkit-user-select:none;
            user-select:none;
    isolation:isolate;
    background:none;
    backdrop-filter:none;
}

.preview-case .preview-case__topbadge--dc{

    transform:translate(-50%, 0.4rem) rotate(-10deg);

}

.preview-case .preview-case__topbadge--v{

    transform:translate(-50%, 0.4rem) rotate(10deg);

}

.preview-case .preview-case__topbadge-icon{
    width:1.375rem;
    height:1.375rem;
    flex-shrink:0;
}

:is(.preview-case .preview-case__pill,.preview-case .preview-case__topbadge) > :not(.preview-case__backdrop){
        position:relative;
        z-index:1;
    }

.preview-case .preview-case__backdrop{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    z-index:-1;
    pointer-events:none;
}

.preview-case .preview-case__backdrop::before{
    content:"";
    position:absolute;
    inset:-1rem;
    background:url('/images/bg-main.avif') center/cover fixed;
    filter:blur(3px);
    opacity:0.6;
}

.preview-case .preview-case__backdrop::after{
    content:"";
    position:absolute;
    inset:0;
background:radial-gradient(588.3% 37.4% at 50.13% 50%, rgba(53, 74, 107, 0.6) 0%, rgba(47, 71, 107, 0.2) 100%);
}

.preview-case .preview-case__items{
    position:absolute;
    top:50%;
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    z-index:3;
    pointer-events:none;
    transition:transform 0.2s ease;
}

.preview-case .preview-case__items .preview-item{
    opacity:0;
    transition:opacity 0.25s ease, transform 0.3s ease;
}

.preview-case--dc .preview-case__items .preview-item{
    transform:translateX(-1rem);
}

.preview-case--v .preview-case__items .preview-item{
    transform:translateX(1rem);
}

.preview-case--dc .preview-case__items{
    left:calc(90% - 1.5rem);
    transform:translate(-0.75rem, -50%);
}

.preview-case--v .preview-case__items{
    right:calc(90% - 1.5rem);
    transform:translate(0.75rem, -50%);
}

.preview-case .preview-case__btn-wrap{
    position:absolute;
    bottom:0;
    z-index:10;
    display:flex;
    justify-content:center;
    width:100%;
}

.preview-case .preview-case__btn{
    transition:box-shadow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), text-shadow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
.preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
    transform:translateX(-3rem);
}

.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
.preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
    transform:translateX(3rem);
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__badges,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__badges{
    opacity:0;
    transform:translate(-50%, -0.4rem);
    pointer-events:none;
    transition:opacity 0.15s ease, transform 0.15s ease;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--closed,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--closed{
    opacity:0;
    transition:opacity 0.45s ease;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--light,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--light{
    opacity:0;
    animation:none;
    transition:opacity 0.45s ease;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--opened,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--opened{
    opacity:1;
    animation:case-breathe 3.6s ease-in-out infinite;
    transition:opacity 0.45s ease;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--picked,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--picked{
    animation:case-picked-flicker 2.4s ease-in-out infinite 0.5s, case-breathe 3.6s ease-in-out infinite;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__topbadge,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__topbadge{
    opacity:1;
    transform:translate(-50%, 0);
    pointer-events:auto;
    transition:opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__items,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__items{
    pointer-events:auto;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-item,
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-item{
    opacity:1;
    transform:translateX(0);
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-item:nth-child(1),
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-item:nth-child(1){
    transition:opacity 0.25s ease 0.25s, transform 0.3s ease 0.25s;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-item:nth-child(2),
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-item:nth-child(2){
    transition:opacity 0.25s ease 0.4s, transform 0.3s ease 0.4s;
}

.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-item:nth-child(3),
.preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-item:nth-child(3){
    transition:opacity 0.25s ease 0.55s, transform 0.3s ease 0.55s;
}

.preview-item{
    display:flex;
    padding:0.75rem 1.25rem;
    justify-content:center;
    align-items:center;
    gap:0.75rem;
    border-radius:0.9375rem;
    -webkit-user-select:none;
            user-select:none;
}

.preview-item--dc{
    border:2px solid rgba(247, 60, 13, 0.1);
    background:linear-gradient(to left,
            rgba(26, 38, 58, 0) 0%,
            rgba(26, 38, 58, 0.3) 30%,
            rgba(246, 94, 52, 0.30) 100%) padding-box, linear-gradient(to right,
            rgba(241, 103, 65, 0.45) 0%,
            rgba(246, 94, 52, 0) 100%) border-box;
    backdrop-filter:blur(20px);
}

.preview-item--v{
    border:2px solid rgba(161, 13, 247, 0.1);
    background:linear-gradient(to left,
            rgba(26, 38, 58, 0) 0%,
            rgba(26, 38, 58, 0.3) 30%,
            rgba(246, 52, 233, 0.25) 100%) padding-box, linear-gradient(to right,
            rgba(248, 77, 237, 0.35) 0%,
            rgba(246, 52, 233, 0) 100%) border-box;
    backdrop-filter:blur(20px);
}

.preview-item .preview-item__img{
    object-fit:contain;
    flex-shrink:0;
    -webkit-user-drag:none;

    width:8.3125rem;
    height:6.25rem;
    aspect-ratio:133/100;
}

.preview-item--dc .preview-item__img{
    filter:drop-shadow(0 0 1px rgba(255, 165, 55, 1)) drop-shadow(0 0 2px rgba(255, 150, 45, 0.9)) drop-shadow(0 0 5px rgba(246, 120, 35, 0.5));
}

.preview-item--v .preview-item__img{
    filter:drop-shadow(0 0 1px rgba(120, 50, 200, 1)) drop-shadow(0 0 2px rgba(120, 50, 200, 0.9)) drop-shadow(0 0 5px rgba(85, 35, 160, 0.5));
}

.preview-item .preview-item__info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    justify-content:center;
    gap:0.625rem;
    min-width:0;
    flex:1;
}

.preview-item .preview-item__name,
.preview-item .preview-item__exterior,
.preview-item .preview-item__wear{
    display:inline-flex;
    align-items:center;
    gap:0.25rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.preview-item--dc .preview-item__exterior{
    color:var(--color-orange-1);
}

.preview-item--v .preview-item__exterior{
    color:var(--color-pink-3);
}

.preview-item .preview-item__icon{
    width:1rem;
    height:1rem;
    flex-shrink:0;
}

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

    .preview-screen{
        padding:0 clamp(1.25rem, 2vw, 2.5rem) 0;
    }
    .preview-screen .preview-screen__title{
        font-size:clamp(2.125rem, 2.3vw + 0.7rem, 3.625rem);
        line-height:1.15;
        max-width:clamp(38rem, 55vw, 62rem);
    }

        :is(.preview-screen .preview-screen__title) i{
            font-size:clamp(1rem, 1.4vw + 0.3rem, 1.75rem);
        }
    .preview-screen .preview-screen__cases{
        gap:0.75rem;
        max-width:86rem;
    }
    .preview-case{
        width:clamp(26rem, 34vw, 42rem);
    }
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
        transform:translateX(-2.5rem);
    }

    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
        transform:translateX(2.5rem);
    }
    .preview-case .preview-case__pill{
        padding:clamp(0.875rem, 1vw, 1.25rem) clamp(1rem, 1.2vw, 1.5rem);
        border-radius:clamp(0.625rem, 0.7vw, 0.9375rem);
    }

    .preview-case .preview-case__pill-icon{
        width:clamp(1rem, 1.2vw, 1.375rem);
        height:clamp(1rem, 1.2vw, 1.375rem);
    }

    .preview-case .preview-case__topbadge{
        padding:clamp(0.875rem, 1vw, 1.25rem) clamp(1rem, 1.2vw, 1.5rem);
        border-radius:clamp(0.625rem, 0.7vw, 0.9375rem);
    }

    .preview-case .preview-case__topbadge-icon{
        width:clamp(1rem, 1.2vw, 1.375rem);
        height:clamp(1rem, 1.2vw, 1.375rem);
    }
    .preview-case .preview-case__btn{
        padding:clamp(0.875rem, 1vw, 1.125rem) clamp(2rem, 3vw, 4rem);
    }

    .preview-case .preview-case__btn .text-btn{
        font-size:clamp(1.5rem, 1.5vw + 0.5rem, 2.75rem);
    }
    .preview-item{
        padding:clamp(0.625rem, 0.75vw, 1rem) clamp(0.875rem, 1.1vw, 1.5rem);
        gap:clamp(0.5rem, 0.75vw, 1rem);
        border-radius:clamp(0.625rem, 0.7vw, 0.9375rem);
    }

    .preview-item .preview-item__img{
        width:clamp(6rem, 6.5vw, 8.3125rem);
        height:auto;
    }
}

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

    .preview-screen{
        padding:0;
    }

    .preview-screen.show{
        flex-direction:column;
        justify-content:flex-start;
        gap:clamp(1rem, 2vw, 1.75rem);
        padding:clamp(1rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.25rem);
        overflow:hidden;
    }
    .preview-screen::before{
        background-image:radial-gradient(ellipse 65% 18% at 50% 45%,
                rgba(255, 165, 80, 0.45) 0%,
                rgba(255, 178, 60, 0.20) 30%,
                rgba(246, 155, 52, 0.05) 60%,
                rgba(246, 155, 52, 0) 80%), radial-gradient(ellipse 65% 18% at 50% 82%,
                rgba(110, 200, 255, 0.45) 0%,
                rgba(70, 160, 245, 0.20) 30%,
                rgba(50, 120, 220, 0.05) 60%,
                rgba(50, 120, 220, 0) 80%), radial-gradient(ellipse 80% 32% at 50% 45%,
                rgba(255, 159, 70, 0.22) 0%,
                rgba(255, 178, 60, 0.10) 25%,
                rgba(246, 155, 52, 0.03) 50%,
                rgba(246, 155, 52, 0) 70%), radial-gradient(ellipse 80% 32% at 50% 82%,
                rgba(70, 175, 255, 0.22) 0%,
                rgba(60, 145, 240, 0.10) 25%,
                rgba(50, 120, 220, 0.03) 50%,
                rgba(50, 120, 220, 0) 70%);
    }
    .preview-screen .preview-screen__title{
        max-width:clamp(28rem, 70vw, 44rem);
        padding:0 0.5rem;
        margin:clamp(0.5rem, 1.5vw, 1.25rem) auto clamp(2rem, 5vw, 3rem);
        font-size:clamp(1.75rem, 4vw, 2.75rem);
        line-height:1.2;
    }

        :is(.preview-screen .preview-screen__title) i{
            font-size:clamp(1rem, 2vw, 1.5rem);
        }

        :is(.preview-screen .preview-screen__title) br{ display:none; }
    .preview-screen .preview-screen__cases{
        flex-direction:column;
        gap:clamp(3.5rem, 8vw, 5.5rem);
        max-width:100%;
        flex:1;
        min-height:0;
        justify-content:space-evenly;
    }
    .preview-case{
        width:100%;
        max-width:clamp(38rem, 90vw, 52rem);
        margin:0 auto;
        align-self:center;
        display:flex;
        flex-direction:column;
        flex:1;
        min-height:0;
    }
    .preview-case .preview-case__core{
        display:grid;
        grid-template-columns:1fr auto;
        grid-template-rows:auto auto;
        column-gap:clamp(0.75rem, 2vw, 1.5rem);
        row-gap:clamp(0.4rem, 0.8vw, 0.75rem);
        align-items:center;
        justify-content:center;
        transform:none !important;
        flex:1;
        min-height:0;
    }
    .preview-case .preview-case__core::before{
        opacity:1;
        animation:case-hover-glow-pulse-scale 2.4s ease-in-out infinite;
        position:absolute;
        inset:auto;
        top:70%;
        left:50%;
        width:clamp(22rem, 55vw, 32rem);
        height:clamp(14rem, 36vw, 22rem);
        transform:translate(-50%, -50%);
        z-index:0;
        pointer-events:none;
    }

    .preview-case--dc .preview-case__core::before{
        top:78%;
    }

    .preview-case .preview-case__stage{
        z-index:1;
    }
    .preview-case .preview-case__topbadge{
        grid-column:2;
        grid-row:1;
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
        transform:none !important;
        opacity:1;
        pointer-events:auto;
        padding:clamp(0.5rem, 1.2vw, 0.75rem) clamp(0.75rem, 1.4vw, 1.125rem);
        border-radius:clamp(0.5rem, 1vw, 0.75rem);
        width:auto;
        max-width:100%;
        justify-content:center;
        backdrop-filter:blur(11px);
        justify-self:end;
        align-self:end;
        z-index:2;
    }

    .preview-case .preview-case__topbadge-icon{
        width:clamp(0.875rem, 1.5vw, 1.125rem);
        height:clamp(0.875rem, 1.5vw, 1.125rem);
    }
    .preview-case .preview-case__badges{
        grid-column:2;
        grid-row:2;
        position:relative;
        top:auto;
        left:auto;
        right:auto;
        bottom:auto;
        transform:none;
        opacity:1;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:clamp(0.3rem, 0.6vw, 0.5rem);
        width:auto;
        max-width:100%;
        margin-bottom:0;
        justify-self:end;
        align-self:start;
        z-index:2;
    }

    .preview-case .preview-case__pill{
        padding:clamp(0.5rem, 1.2vw, 0.75rem) clamp(0.75rem, 1.4vw, 1.125rem);
        border-radius:clamp(0.5rem, 1vw, 0.75rem);
        flex:0 0 auto;
        justify-content:flex-start;
        backdrop-filter:blur(11px);
    }

    .preview-case .preview-case__pill-icon{
        width:clamp(0.875rem, 1.5vw, 1.125rem);
        height:clamp(0.875rem, 1.5vw, 1.125rem);
    }
    .preview-case .preview-case__stage{
        grid-column:1;
        grid-row:1 / span 2;
        width:clamp(22rem, 50vw, 38rem);
        max-width:100%;
        aspect-ratio:1579 / 1272;
        align-self:center;
        justify-self:end;
        margin:0;
    }
    .preview-case .preview-case__img--closed,
    .preview-case .preview-case__img--light{
        display:none;
    }

    .preview-case .preview-case__img--opened{
        opacity:1;
        animation:case-breathe 3.6s ease-in-out infinite;
        object-fit:contain;
    }

    .preview-case .preview-case__img--picked{
        animation:case-picked-flicker 2.4s ease-in-out infinite 0.5s, case-breathe 3.6s ease-in-out infinite;
        object-fit:contain;
    }
    .preview-case--dc .preview-case__stage::before,
    .preview-case--v .preview-case__stage::before{
        bottom:18%;
        width:50%;
        height:8%;
        transform:translateX(-50%) rotate(0);
    }
    .preview-case .preview-case__items{
        display:none;
    }
    .preview-case .preview-case__btn-wrap{
        position:static;
        margin-top:clamp(-3rem, -5vw, -1.5rem);
        z-index:4;
    }

    .preview-case .preview-case__btn{
        width:50%;
        min-width:0;
        padding:clamp(0.875rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
    }

    .preview-case .preview-case__btn .text-btn{
        font-size:clamp(1.375rem, 3vw, 2rem);
    }
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core,
    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
        transform:none;
    }

    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__badges,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__badges{
        opacity:1;
        transform:none;
    }

    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__topbadge,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__topbadge{
        opacity:1;
        transform:none;
    }

    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--closed,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--closed,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--light,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--light{
        display:none;
    }

    .preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--v,
    .preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--v,
    .preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--dc,
    .preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--dc{
        filter:none;
    }
}

@media (max-width: 767px){
    .preview-screen{
        padding:0;
    }

    .preview-screen.show{
        flex-direction:column;
        justify-content:flex-start;
        gap:clamp(0.5rem, 1.8vw, 1rem);
        padding:clamp(0.75rem, 2.4vw, 1.25rem) clamp(0.75rem, 3vw, 1.25rem) clamp(0.5rem, 1.8vw, 0.875rem);
        overflow-y:auto;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .preview-screen.show::-webkit-scrollbar{
        display:none;
    }
    .preview-screen::before{
        background-image:radial-gradient(ellipse 70% 16% at 50% 45%,
                rgba(255, 165, 80, 0.45) 0%,
                rgba(255, 178, 60, 0.20) 30%,
                rgba(246, 155, 52, 0.05) 60%,
                rgba(246, 155, 52, 0) 80%), radial-gradient(ellipse 70% 16% at 50% 82%,
                rgba(110, 200, 255, 0.45) 0%,
                rgba(70, 160, 245, 0.20) 30%,
                rgba(50, 120, 220, 0.05) 60%,
                rgba(50, 120, 220, 0) 80%), radial-gradient(ellipse 90% 32% at 50% 45%,
                rgba(255, 159, 70, 0.22) 0%,
                rgba(255, 178, 60, 0.10) 25%,
                rgba(246, 155, 52, 0.03) 50%,
                rgba(246, 155, 52, 0) 70%), radial-gradient(ellipse 90% 32% at 50% 82%,
                rgba(70, 175, 255, 0.22) 0%,
                rgba(60, 145, 240, 0.10) 25%,
                rgba(50, 120, 220, 0.03) 50%,
                rgba(50, 120, 220, 0) 70%);
    }
    .preview-screen .preview-screen__title{
        max-width:90%;
        padding:0 0.25rem;
        margin:clamp(0.5rem, 1.8vw, 1rem) 0 clamp(3rem, 4.5vw, 2.25rem);
        font-size:clamp(1.125rem, 4vw, 1.75rem);
        line-height:1.2;
    }

        :is(.preview-screen .preview-screen__title) i{
            font-size:clamp(0.75rem, 2.6vw, 1.125rem);
        }
        :is(.preview-screen .preview-screen__title) br{
            display:none;
        }
    .preview-screen .preview-screen__cases{
        flex-direction:column;
        gap:clamp(3rem, 8vw, 4.5rem);
        max-width:100%;
        flex:1;
        min-height:0;
        justify-content:space-evenly;

    }
    .preview-case{
        width:100%;
        max-width:28rem;
        margin:0 auto;
        display:flex;
        flex-direction:column;
        flex:1;
        min-height:0;
    }
    .preview-case .preview-case__core{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:clamp(0.3rem, 0.8vw, 0.5rem);
        transform:none !important;
        flex:1;
        min-height:0;
    }
    .preview-case .preview-case__badges{
        position:relative;
        z-index:2;
        margin-bottom:clamp(-2rem, -5vw, -0.75rem);
    }
    .preview-case .preview-case__topbadge{
        position:relative;
        z-index:2;
    }
    .preview-case .preview-case__core::before{
        opacity:1;
        animation:case-hover-glow-pulse-scale 2.4s ease-in-out infinite;
        position:absolute;
        inset:auto;
        top:70%;
        left:50%;
        width:clamp(15rem, 70vw, 24rem);
        height:clamp(10rem, 50vw, 18rem);
        transform:translate(-50%, -50%);
        z-index:0;
        pointer-events:none;
    }
    .preview-case--dc .preview-case__core::before{
        top:78%;
    }

    .preview-case .preview-case__stage{
        z-index:1;
    }
    .preview-case .preview-case__badges{
        position:static;
        transform:none;
        opacity:1;
        order:2;
        gap:clamp(0.3rem, 1vw, 0.75rem);
        width:100%;
        justify-content:center;
    }

    .preview-case .preview-case__pill{
        padding:clamp(0.4rem, 1.2vw, 0.625rem) clamp(0.5rem, 1.5vw, 0.875rem);
        border-radius:clamp(0.4rem, 1.2vw, 0.625rem);
        flex:1;
        justify-content:center;
        backdrop-filter:blur(11px);
    }

    .preview-case .preview-case__pill-icon{
        width:clamp(0.75rem, 2vw, 1rem);
        height:clamp(0.75rem, 2vw, 1rem);
    }
    .preview-case .preview-case__topbadge{
        position:static;
        transform:none !important;
        opacity:1;
        pointer-events:auto;
        order:1;
        padding:clamp(0.4rem, 1.2vw, 0.625rem) clamp(0.5rem, 1.5vw, 0.875rem);
        border-radius:clamp(0.4rem, 1.2vw, 0.625rem);
        width:100%;
        justify-content:center;
        backdrop-filter:blur(11px);
    }

    .preview-case .preview-case__topbadge-icon{
        width:clamp(0.75rem, 2vw, 1rem);
        height:clamp(0.75rem, 2vw, 1rem);
    }
    .preview-case .preview-case__stage{
        order:3;
        width:clamp(15rem, 65vw, 22rem);
        max-width:100%;
        flex:0 0 auto;
        aspect-ratio:1579 / 1272;
        margin:0 auto;
    }

    .preview-case .preview-case__img--opened,
    .preview-case .preview-case__img--picked{
        object-fit:contain;
        object-position:center;
    }
    .preview-case--dc .preview-case__stage::before,
    .preview-case--v .preview-case__stage::before{
        bottom:18%;
        width:50%;
        height:8%;
        transform:translateX(-50%) rotate(0);
    }
    .preview-case .preview-case__img--closed,
    .preview-case .preview-case__img--light{
        display:none;
    }
    .preview-case .preview-case__img--opened{
        opacity:1;
        animation:case-breathe 3.6s ease-in-out infinite;
    }

    .preview-case .preview-case__img--picked{
        animation:case-picked-flicker 2.4s ease-in-out infinite 0.5s, case-breathe 3.6s ease-in-out infinite;
    }
    .preview-case .preview-case__items{
        display:none;
    }
    .preview-case .preview-case__btn-wrap{
        position:static;
        margin-top:clamp(-3rem, -6vw, -1.25rem);
        z-index:4;
    }

    .preview-case .preview-case__btn{
        width:60%;
        padding:clamp(0.75rem, 2.5vw, 1.25rem) 0.1rem;
    }
    .preview-case .preview-case__btn .text-btn{
        font-size:clamp(1.125rem, 4.4vw, 1.75rem);
    }
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--dc:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core,
    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__core,
    .preview-case--v:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__core{
        transform:none;
    }
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__badges,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__badges{
        opacity:1;
        transform:none;
    }

    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__topbadge,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__topbadge{
        opacity:1;
        transform:none;
    }
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--closed,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--closed,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case__img--light,
    .preview-case:has(:is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case__img--light{
        display:none;
    }
    .preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--v,
    .preview-screen__cases:has(.preview-case--dc :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--v,
    .preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):hover) .preview-case--dc,
    .preview-screen__cases:has(.preview-case--v :is(.preview-case__stage, .preview-case__btn, .preview-case__items, .preview-case__topbadge):focus-within) .preview-case--dc{
        filter:none;
    }
}

.roulette{
    width:100%;
    height:100%;
    padding:0 clamp(1.5rem, 3vw, 3rem);
    box-sizing:border-box;
}

.roulette.show{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:clamp(1.25rem, 2.5vh, 2rem);
    padding-top:clamp(2rem, 4vh, 4rem);
    padding-bottom:clamp(2rem, 4vh, 4rem);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    background-color:#000;
    background-image:linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.1) 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;
    background-repeat:no-repeat, no-repeat, no-repeat;
}

.roulette.show::-webkit-scrollbar{
    display:none;
}

.roulette.show .roulette__stage{
    animation:roulette-stage-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0s forwards;
}

.roulette.show .roulette__btns{
    opacity:0;
    animation:roulette-btns-in 0.7s cubic-bezier(0.34, 1.25, 0.5, 1) 0.5s forwards;
}

.roulette.show .roulette__title{
    opacity:0;
    animation:roulette-title-in 0.6s ease-out 0.7s forwards;
}

.roulette.show .roulette__catalog{
    opacity:0;
    animation:roulette-catalog-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards;
}

.roulette--dc{
    --theme-primary:var(--color-orange-2);
    --theme-secondary:var(--color-orange-1);
    --theme-border:rgba(246, 94, 52, 0.7);
    --theme-glow:rgba(246, 94, 52, 0.55);
    --theme-glow-strong:rgba(246, 94, 52, 0.9);
    --theme-fill:rgba(246, 94, 52, 0.18);
}

.roulette--v{
    --theme-primary:#F634E3;
    --theme-secondary:var(--color-pink-2);
    --theme-border:rgba(246, 52, 233, 0.7);
    --theme-glow:rgba(246, 52, 233, 0.55);
    --theme-glow-strong:rgba(246, 52, 233, 0.9);
    --theme-fill:rgba(246, 52, 233, 0.18);
}

.roulette .roulette__stage{
    position:relative;
    width:100%;
    max-width:75rem;
    height:24rem;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:10px;
}

.roulette__case-name{
    opacity:0;
    animation:preview-title-in 0.75s ease-in-out forwards;
}

.roulette .roulette__case-art{
    position:absolute;
    top:50%;
    left:50%;
    height:165%;
    width:auto;
    pointer-events:none;
    -webkit-user-drag:none;
    z-index:3;
    transform:translate(-50%, -50%) scale(1);
    transition:opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.5, 0, 0.55, 0.3);
}

.roulette .roulette__case-art--opened{
    opacity:1;
    animation:case-breathe-transform 5s ease-in-out infinite;
    will-change:transform;
}

.roulette .roulette__case-art--picked{
    opacity:0;
    animation:case-picked-flicker 2.4s ease-in-out infinite 0.5s, case-breathe-transform 5s ease-in-out infinite;
    will-change:opacity, transform;
}

.roulette .roulette__case-glow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:55%;
    height:60%;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(ellipse at center,
        var(--theme-glow) 0%,
        rgba(0, 0, 0, 0) 65%);
    filter:blur(18px);
    opacity:0.55;
    transition:opacity 0.45s ease;
}

.roulette .roulette__case-shadow{
    position:absolute;
    top:90%;
    left:50%;
    width:60%;
    height:7%;
    transform:translateX(-50%) rotate(-6deg);
    z-index:2;
    pointer-events:none;
    background:radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.78) 25%,
            rgba(0, 0, 0, 0.4) 55%,
            transparent 90%);
    filter:blur(12px);
    transition:opacity 0.4s ease;
}

.roulette--v .roulette__case-shadow{
    transform:translateX(-50%) rotate(6deg);
}

.roulette.roll-active .roulette__case-art,
.roulette.roll-result .roulette__case-art{
    animation:none;
    opacity:0;
    transform:translate(-50%, -50%) scale(0);
}

.roulette.roll-active .roulette__case-glow,
.roulette.roll-result .roulette__case-glow,
.roulette.roll-active .roulette__case-shadow,
.roulette.roll-result .roulette__case-shadow{
    opacity:0;
}

.roulette .roulette__bar{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:clamp(41rem, 28vw, 45rem);
    height:100%;
    border-radius:1.25rem;
    background:rgba(26, 32, 34, 0.65);
    overflow:hidden;
    z-index:1;
    transition:width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease, border-color 0.4s ease;
    border:1px solid var(--theme-border);
    box-shadow:inset 0 0 1.1rem var(--theme-glow), 0 0 1rem var(--theme-glow);
}

.roulette.roll-active .roulette__bar,
.roulette.roll-result .roulette__bar{
    width:100%;

        box-shadow:inset 18rem 0 7rem -2rem rgba(0, 0, 0, 0.85), inset -18rem 0 7rem -2rem rgba(0, 0, 0, 0.85);
 
}

.roulette .roulette__track{
    position:absolute;
    inset:0;
    transform:translateX(0);
    will-change:transform;
}

.roulette .roulette__strip{
    position:absolute;
    top:50%;
    left:0;
    display:flex;
    align-items:center;
    gap:var(--item-gap);
    padding:0 var(--item-gap);
    height:100%;
    box-sizing:border-box;
    transform:translateY(-50%) translateX(0);
    will-change:transform;
    opacity:0;
    transition:opacity 0.3s ease, transform 5.06s cubic-bezier(0.55, 0, 0.08, 1) 0.44s;
}

.roulette.roll-active .roulette__strip,
.roulette.roll-result .roulette__strip{
    opacity:1;
}

.roulette .roulette__pointer{
    position:absolute;
    left:50%;
    opacity:0;
    pointer-events:none;
    -webkit-user-drag:none;
    filter:drop-shadow(0 0 0.5rem var(--theme-glow-strong));
    transition:opacity 0.4s ease 0.3s;
}

.roulette .roulette__pointer--top,
.roulette .roulette__pointer--bottom{
    z-index:5;
}

.roulette .roulette__pointer--top{
    bottom:calc(100% - 4rem);
    transform:translateX(-50%);
    width:5.875rem;
    height:6.4375rem;
}

.roulette .roulette__pointer--top-2{
    bottom:calc(100% - 1.4rem);
    transform:translateX(-50%) scale(1.1);
    width:3.75rem;
    height:4.10906rem;
    z-index:7;
}

.roulette .roulette__pointer--bottom{
    top:calc(100% - 2rem);
    transform:translateX(-50%) rotate(180deg) scale(1.1);
    width:3.75rem;
    height:4.10906rem;
}

.roulette .roulette__pointer--left,
.roulette .roulette__pointer--right{
    top:50%;
    z-index:0;
    width:5.875rem;
    height:6.4375rem;
    filter:blur(2px) drop-shadow(0 0 0.5rem var(--theme-glow-strong));;
}

.roulette .roulette__pointer--left{
    left:calc(-2 * clamp(1.5rem, 2vw, 2.5rem));
    transform:translateY(-50%) rotate(90deg);
}

.roulette .roulette__pointer--right{
    left:auto;
    right:calc(-2 * clamp(1.5rem, 2vw, 2.5rem));
    transform:translateY(-50%) rotate(-90deg);
}

.roulette.roll-active .roulette__pointer,
.roulette.roll-result .roulette__pointer{
    opacity:1;
}

.roulette .roulette__stage::before,
.roulette .roulette__stage::after{
    content:"";
    position:absolute;
    top:50%;
    width:0.65rem;
    height:110%;
    background:var(--theme-primary);
    box-shadow:0 0 0.625rem var(--theme-glow-strong), 0 0 1.25rem var(--theme-glow);
    border-radius:0.5rem;
    opacity:1;
    z-index:4;
    pointer-events:none;
    transform:translate(-50%, -50%);
    transition:left 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    filter:blur(2px);
}

.roulette .roulette__stage::before{
    left:calc(47% - clamp(15rem, 14vw, 17rem));
}

.roulette .roulette__stage::after{
    left:calc(53% + clamp(15rem, 14vw, 17rem));
}

.roulette.roll-active .roulette__stage::before,
.roulette.roll-result .roulette__stage::before{
    left:0.5%;
}

.roulette.roll-active .roulette__stage::after,
.roulette.roll-result .roulette__stage::after{
    left:99.5%;
}

.roulette .roulette__bracket{
    position:absolute;
    top:50%;
    width:clamp(1rem, 5vw, 2.5rem);
    height:100%;
    background:rgba(24, 31, 34, 0.65);
    backdrop-filter:blur(2px);
    border:1px solid transparent;
 
    z-index:1;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s ease 0.35s;
}

.roulette .roulette__bracket--left{
    left:0;
    transform:translate(-100%, -50%);
    border-radius:2.25rem 0 0 2.25rem;
}

.roulette .roulette__bracket--right{
    right:0;
    transform:translate(100%, -50%);
    border-radius:0 2.25rem 2.25rem 0;
}

.roulette.roll-active .roulette__bracket,
.roulette.roll-result .roulette__bracket{
    opacity:1;
}

.roulette{
    --item-width:clamp(11rem, 14vw, 14rem);
    --item-gap:0.5rem;
    --item-step:calc(var(--item-width) + var(--item-gap));
    --bar-vpad:2.25rem;
    --bar-wide-half:37.5rem;
}

.roulette--dc .roulette__strip{
    transform:translateY(-50%) translateX(calc(var(--bar-wide-half) - var(--item-gap) - var(--item-step) * (var(--items-count--DC, 22) + var(--random-num--DC, 0)) - (var(--item-width) / 2)));
}

.roulette--v .roulette__strip{
    transform:translateY(-50%) translateX(calc(var(--bar-wide-half) - var(--item-gap) - var(--item-step) * (var(--items-count--V, 16) + var(--random-num--V, 0)) - (var(--item-width) / 2)));
}

.roulette--dc .roulette__bar.bar-scrolling .roulette__track{
    animation:roulette-roll-dc 8.5s forwards;
}

.roulette--v .roulette__bar.bar-scrolling .roulette__track{
    animation:roulette-roll-v 7.5s forwards;
}

.roulette .roulette__btns{
    display:flex;
    gap:clamp(0.75rem, 1.5vw, 1.5rem);
    margin-top:clamp(0.5rem, 1.5vh, 1.5rem);
}

.roulette .roulette__btn{
    transition:box-shadow 0.5s ease, text-shadow 0.5s ease, filter 0.35s ease, opacity 0.35s ease, transform 0.25s ease;
}

.roulette.roll-active:not(.roll-result) .roulette__btn,
.roulette .roulette__btn.random_end{
    pointer-events:none;
    filter:brightness(0.45) saturate(0.5);
    opacity:0.7;
}

.roulette .btn-text-open{
    display:inline;
}

.roulette .btn-text-try{
    display:none;
}

.roulette .roulette__btn.roll-btn-try .btn-text-open{
    display:none;
}

.roulette .roulette__btn.roll-btn-try .btn-text-try{
    display:inline;
}

.roulette .roulette__btn-claim{
    display:none;
}

.roulette.has-rolled .roulette__btn-claim,
.roulette:has(.roulette__btn.random_end) .roulette__btn-claim{
    display:inline-flex;
}

.btn-preview--dc:hover{
    box-shadow:inset 0 0 0.125rem var(--color-orange-2), inset 0 0 0.625rem var(--color-orange-2), inset 0 0 1.25rem var(--color-orange-2), 0 0 0.375rem rgba(246, 94, 52, 0.95), 0 0 0.875rem rgba(246, 94, 52, 0.85), 0 0 1.75rem rgba(246, 94, 52, 0.6);
    text-shadow:0 0 0.3125rem rgba(246, 94, 52, 0.95), 0 0 0.625rem rgba(246, 94, 52, 0.85), 0 0 1.25rem rgba(246, 94, 52, 0.7);
}

.btn-preview--v:hover{
    box-shadow:inset 0 0 0.125rem #F634E3, inset 0 0 0.625rem #F634E3, inset 0 0 1.25rem #F634E3, 0 0 0.375rem rgba(246, 52, 227, 0.95), 0 0 0.875rem rgba(246, 52, 227, 0.85), 0 0 1.75rem rgba(246, 52, 227, 0.6);
    text-shadow:0 0 0.3125rem rgba(255, 65, 236, 0.95), 0 0 0.625rem rgba(255, 65, 236, 0.85), 0 0 1.25rem rgba(255, 65, 236, 0.7);
}

.roulette .item{
    flex-shrink:0;
    width:var(--item-width);
    height:calc(100% - 2 * var(--bar-vpad));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    gap:0.375rem;
    padding:1.25rem;
    border-radius:0.875rem;
    list-style:none;
    box-sizing:border-box;
    position:relative;
    transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; 

    cursor:default !important;
}

.roulette .item--dc{
    border:1px solid rgba(245, 134, 104, 0.5);
    background:radial-gradient(82.56% 55.88% at 50% 44.21%, rgba(246, 94, 52, 0.35) 0%, rgba(47, 71, 107, 0.2) 100%);
    background-blend-mode:screen;
    backdrop-filter:blur(15px);
}

:is(.roulette .item--dc) .item__name,:is(.roulette .item--dc) .item__wear{
        color:var(--color-orange-3);



    }

:is(.roulette .item--dc) .item__value{
        color:var(--color-orange-2);

    }

:is(.roulette .item--dc) .item__exterior{
        border:3px solid transparent;
        background:radial-gradient(74.87% 100% at 50% 0%, #F69B34 0%, #f65134 100%);
    }

:is(.roulette .item--dc) .item__img{
        filter:drop-shadow(0 0 1px rgba(255, 165, 55, 0.85)) drop-shadow(0 0 2px rgba(255, 150, 45, 0.8)) drop-shadow(0 0 5px rgba(246, 120, 35, 0.5));
    }

:is(.roulette .item--dc):hover{
        box-shadow:0 0 0.5rem rgba(255, 165, 55, 0.7), 0 0 1.25rem rgba(255, 150, 45, 0.6), 0 0 2.5rem rgba(246, 120, 35, 0.5) !important;
        transform:translateY(-3px);


    }

:is(.roulette .item--dc):hover .item__img{
            animation:item-hover-glow-pulse-dc 1.5s ease-in-out infinite;
        }

.roulette .item--v{
    border:1px solid rgba(240, 112, 231, 0.5);
    background:radial-gradient(82.56% 55.88% at 50% 44.21%, rgba(246, 52, 233, 0.35) 0%, rgba(47, 71, 107, 0.2) 100%);
    background-blend-mode:screen;
    backdrop-filter:blur(15px);
}

:is(.roulette .item--v) .item__name,:is(.roulette .item--v) .item__wear{
        color:var(--color-pink-3);
    }

:is(.roulette .item--v) .item__exterior{
        border:3px solid transparent;
        background:radial-gradient(74.87% 100% at 50% 0%, #F634E9 0%, #9129c2 100%)
    }

:is(.roulette .item--v) .item__img{
        filter:drop-shadow(0 0 1px rgba(120, 50, 200, 0.85)) drop-shadow(0 0 2px rgba(137, 57, 228, 0.7)) drop-shadow(0 0 5px rgba(85, 35, 160, 0.5));
    }

:is(.roulette .item--v):hover{
        box-shadow:0 0 0.5rem rgba(120, 50, 200, 0.7), 0 0 1.25rem rgba(120, 50, 200, 0.6), 0 0 2.5rem rgba(85, 35, 160, 0.5) !important;
        transform:translateY(-3px);
    }

:is(.roulette .item--v):hover .item__img{
            animation:item-hover-glow-pulse-v 1.5s ease-in-out infinite;
        }

.roulette .item__img{
    width:14.0625rem;
    height:10.54688rem;
    aspect-ratio:4/3;
    object-fit:contain;
    flex-shrink:0;
    -webkit-user-drag:none;
}

.roulette .item__info{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    width:100%;
}

.item__wear-value{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.roulette .item__name,
.roulette .item__wear,
.roulette .item__value{
    display:inline-flex;
    align-items:center;
    gap:0.125rem;
    white-space:nowrap;
}

.item__wear{
    font-size:0.715rem !important;
}

.roulette .item__icon{
    width:1rem;
    height:1rem;
    aspect-ratio:1/1;
    flex-shrink:0;
}

.roulette .item__exterior{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:0.5rem 5.85rem;
    border-radius:0.4375rem;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.roulette .roulette__strip .item{
    pointer-events:none;
}

.roulette.roll-result .roulette__strip .item.show{
    background:radial-gradient(ellipse at center,
            var(--theme-glow) 0%,
            rgba(0, 0, 0, 0.3) 100%);
    box-shadow:0 0 1.5rem var(--theme-glow-strong), inset 0 0 1rem var(--theme-glow);
    border-color:var(--theme-primary);
    transform:scale(1.04);
}

.roulette--dc.roll-result .roulette__strip .item.show .item__img{
    animation:item-hover-glow-pulse-dc 1.5s ease-in-out infinite;
}

.roulette--v.roll-result .roulette__strip .item.show .item__img{
    animation:item-hover-glow-pulse-v 1.5s ease-in-out infinite;
}

.roulette.roll-result .roulette__strip .item:not(.show){
    opacity:0.4;
    filter:saturate(0.7);
    transition:opacity 0.35s ease 0.05s, filter 0.35s ease 0.05s;
}

.roulette .roulette__title{
    text-align:center;
    margin-top:clamp(1rem, 2vh, 2rem);
}

.roulette .roulette__catalog{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:1rem;
    width:100%;
    max-width:90rem;
    padding:0;
    margin:0;
    list-style:none;
}

.roulette .roulette__catalog .item{
    width:clamp(11rem, 14vw, 14rem);
    height:auto;
    min-height:13rem;
}

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

    .roulette{
        padding:0 clamp(1.25rem, 2vw, 2.5rem);
    }

    .roulette.show{
        gap:clamp(0.75rem, 1.5vh, 1.5rem);
        padding-top:clamp(1rem, 3vh, 2.5rem);
        padding-bottom:clamp(1rem, 3vh, 2.5rem);
    }
    .roulette .roulette__stage{
        height:clamp(21rem, 27vh, 24rem);
        max-width:56rem;
    }
    .roulette .roulette__case-art{
        height:clamp(135%, 14vw + 60%, 155%);
    }
    .roulette{
        --bar-vpad:clamp(1.5rem, 2vw, 2.25rem);
    }
    .roulette .roulette__strip .item .item__img{
        width:100%;
        height:auto;
        max-height:clamp(6.5rem, 8vw, 8.75rem);
    }
    .roulette .roulette__strip .item{
        padding:clamp(0.75rem, 1vw, 1.125rem);
        gap:clamp(0.25rem, 0.4vw, 0.5rem);
    }

    .roulette .roulette__strip .item .item__exterior{
        padding:0.4rem 1rem;
    }
    .roulette{
        --item-width:clamp(13rem, 13vw, 15rem);
    }
    .roulette .roulette__case-name{
        font-size:clamp(1.75rem, 1.2vw + 1rem, 3rem);
    }
    .roulette .roulette__title,
    .roulette .roulette__title.text-roulette-title-1,
    .roulette .roulette__title.text-roulette-title-2{
        font-size:clamp(2rem, 1.6vw + 1rem, 3.5rem);
        margin-top:clamp(0.75rem, 2vh, 1.75rem);
    }
    .roulette .roulette__bar{
        width:clamp(36rem, 30vw, 45rem);
    }
    .roulette{
        --bar-wide-half:28rem;
    }
    .roulette .roulette__btn{
        min-width:clamp(13rem, 15vw, 19rem);
        padding:clamp(1rem, 1.2vw, 1.375rem) clamp(2.5rem, 3.4vw, 4.5rem);
    }

    .roulette .roulette__btn .text-btn{
        font-size:clamp(1.5rem, 1.3vw + 0.5rem, 2.625rem);
    }
    .roulette .roulette__catalog{
        gap:clamp(0.625rem, 0.8vw, 1rem);
        max-width:clamp(48rem, 78vw, 80rem);
    }
    .roulette .roulette__bracket{
        width:clamp(0.75rem, 1.5vw, 2rem);
    }
}

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

    .roulette{
        padding:0 clamp(1rem, 2vw, 1.75rem);
    }

    .roulette.show{
        gap:clamp(1rem, 2vh, 1.75rem);
        padding-top:clamp(1rem, 3vh, 2rem);
        padding-bottom:clamp(1rem, 3vh, 2rem);
    }
    .roulette .roulette__stage{
        height:clamp(18rem, 25vh, 21rem);
        max-width:44rem;
    }
    .roulette .roulette__case-art{
        height:clamp(130%, 14vw + 50%, 150%);
    }
    .roulette{
        --bar-wide-half:22rem;
        --bar-vpad:clamp(1.5rem, 2.5vw, 2rem);
        --item-width:clamp(12rem, 17vw, 15rem);
    }
    .roulette .roulette__strip .item .item__img{
        width:100%;
        height:auto;
        max-height:clamp(6rem, 11vw, 8.5rem);
    }

    .roulette .roulette__strip .item{
        padding:clamp(0.625rem, 1.2vw, 0.9rem);
        gap:clamp(0.25rem, 0.6vw, 0.45rem);
    }

    .roulette .roulette__strip .item .item__exterior{
        padding:0.35rem 0.6rem;
        font-size:clamp(0.65rem, 1.2vw, 0.85rem);
    }

    .roulette .roulette__strip .item .item__name{
        font-size:clamp(0.85rem, 1.5vw, 1rem);
    }

    .roulette .roulette__strip .item .item__wear,
    .roulette .roulette__strip .item .item__value{
        font-size:clamp(0.6rem, 1.1vw, 0.8rem);
    }
    .roulette .roulette__case-name{
        font-size:clamp(1.5rem, 3vw, 2.25rem);
    }
    .roulette .roulette__title,
    .roulette .roulette__title.text-roulette-title-1,
    .roulette .roulette__title.text-roulette-title-2{
        font-size:clamp(1.75rem, 3.5vw, 2.5rem);
        margin-top:clamp(0.75rem, 2vh, 1.5rem);
    }
    .roulette .roulette__bar{
        width:clamp(28rem, 35vw, 36rem);
    }
    .roulette .roulette__btn{
        min-width:0;
        padding:clamp(1rem, 2vw, 1.375rem) clamp(2.5rem, 4.5vw, 4rem);
    }

    .roulette .roulette__btn .text-btn{
        font-size:clamp(1.5rem, 3vw, 2.25rem);
    }

    .roulette .roulette__btns{
        gap:clamp(1rem, 2vw, 1.75rem);
    }
    .roulette .roulette__catalog{
        gap:clamp(0.75rem, 1.5vw, 1rem);
        max-width:100%;
        padding:0 clamp(0.75rem, 1.5vw, 1.5rem);
    }
    .roulette .roulette__catalog .item{
        width:calc((100% - 2 * clamp(0.75rem, 1.5vw, 1rem)) / 3);
        max-width:none;
        min-height:clamp(13rem, 20vw, 17rem);
        padding:clamp(0.75rem, 1.5vw, 1.125rem);
    }

    .roulette .roulette__catalog .item .item__img{
        width:100%;
        height:auto;
        max-height:clamp(6rem, 12vw, 9rem);
    }

    .roulette .roulette__catalog .item .item__exterior{
        padding:0.35rem 0.6rem;
        font-size:clamp(0.7rem, 1.3vw, 0.9rem);
        border-width:2px;
    }

    .roulette .roulette__catalog .item .item__name{
        font-size:clamp(0.85rem, 1.5vw, 1rem);
    }

    .roulette .roulette__catalog .item .item__wear,
    .roulette .roulette__catalog .item .item__value{
        font-size:clamp(0.65rem, 1.2vw, 0.85rem);
    }

    .roulette .roulette__catalog .item .item__icon{
        width:clamp(0.75rem, 1.3vw, 1rem);
        height:clamp(0.75rem, 1.3vw, 1rem);
    }
}

@media (max-width: 767px){
    .roulette{
        padding:0;
    }

    .roulette.show{
        gap:clamp(0.75rem, 2.5vw, 1.5rem);
        padding-top:clamp(1rem, 4vh, 2rem);
        padding-bottom:clamp(1rem, 4vh, 2rem);
    }
    .roulette .roulette__stage{
        width:100%;
        max-width:100%;
        height:clamp(19rem, 60vw, 23rem);
        margin-top:0;
    }
    .roulette{
        --bar-wide-half:50vw;
        --bar-vpad:clamp(2.5rem, 7vw, 4rem);
    }
    .roulette .roulette__case-art{
        height:auto;
        width:clamp(24rem, 115vw, 34rem);
        max-width:110%;
    }
    .roulette .roulette__bar{
        width:100%;
        border-radius:0;
    }
    .roulette.roll-active .roulette__bar,
    .roulette.roll-result .roulette__bar{
        width:100%;
        box-shadow:inset 6rem 0 4rem -2rem rgba(0, 0, 0, 0.85), inset -6rem 0 4rem -2rem rgba(0, 0, 0, 0.85);
    }
    .roulette .roulette__bracket{
        opacity:1;
        width:clamp(0.75rem, 2.5vw, 1.25rem);
        height:105%;
        background:var(--theme-primary);
        box-shadow:0 0 0.5rem var(--theme-glow-strong), 0 0 1rem var(--theme-glow);
        backdrop-filter:none;
        z-index:4;
    }

    .roulette .roulette__bracket--left{
        left:0;
        transform:translate(0, -50%);
        border-radius:0 0.375rem 0.375rem 0;
    }

    .roulette .roulette__bracket--right{
        right:0;
        left:auto;
        transform:translate(0, -50%);
        border-radius:0.375rem 0 0 0.375rem;
    }
    .roulette .roulette__pointer--left,
    .roulette .roulette__pointer--right{
        display:none;
    }
    .roulette .roulette__stage::before,
    .roulette .roulette__stage::after{
        display:none;
    }
    .roulette .roulette__pointer--top{
        bottom:calc(100% - 2.5rem);
        width:3.5rem;
        height:3.83rem;
    }

    .roulette .roulette__pointer--top-2{
        bottom:calc(100% - 0.75rem);
        width:2.25rem;
        height:2.46rem;
    }

    .roulette .roulette__pointer--bottom{
        top:calc(100% - 1.25rem);
        width:2.25rem;
        height:2.46rem;
    }
    .roulette .roulette__btns{
        gap:clamp(0.4rem, 1.5vw, 0.875rem);
        margin-top:clamp(0.5rem, 1.5vw, 1rem);
        flex-wrap:nowrap;
    }

    .roulette .roulette__btn{
        min-width:0;
        padding:clamp(0.85rem, 3vw, 1.35rem) clamp(2rem, 5.5vw, 2.75rem);
    }

    .roulette .roulette__btn .text-btn{
        font-size:clamp(1.25rem, 4.6vw, 1.75rem);
    }
    .roulette .roulette__case-name{
        font-size:clamp(1.5rem, 4vw, 2.25rem);
        margin-bottom:clamp(1.25rem, 1.5vw, 2rem);
    }
    .roulette .roulette__title{
        font-size:clamp(1.25rem, 5vw, 2rem);
        margin-top:clamp(0.5rem, 2vw, 1rem);
        padding:0 1rem;
    }

    .roulette .roulette__title.text-roulette-title-1,
    .roulette .roulette__title.text-roulette-title-2{
        font-size:clamp(1.25rem, 5vw, 2rem);
    }
    .roulette .roulette__strip .item{
        padding:clamp(0.5rem, 1.8vw, 1rem);
        gap:clamp(0.25rem, 1vw, 0.5rem);
        border-radius:clamp(0.5rem, 1.5vw, 0.75rem);
    }
    .roulette .roulette__strip .item .item__img{
        width:100%;
        height:auto;
        max-height:clamp(6.5rem, 26vw, 10rem);
    }
    .roulette .roulette__strip .item .item__name{
        font-size:clamp(0.9rem, 3.4vw, 1.25rem);
    }

    .roulette .roulette__strip .item .item__wear{
        font-size:clamp(0.7rem, 2.5vw, 0.95rem) !important;
    }

    .roulette .roulette__strip .item .item__value{
        font-size:clamp(0.75rem, 2.7vw, 1rem);
    }

    .roulette .roulette__strip .item .item__exterior{
        padding:clamp(0.35rem, 1.3vw, 0.6rem) clamp(0.4rem, 1.5vw, 0.75rem);
        font-size:clamp(0.75rem, 2.8vw, 1.05rem);
        border-radius:clamp(0.3rem, 1vw, 0.4375rem);
        border-width:2px;
    }

    .roulette .roulette__strip .item .item__icon{
        width:clamp(0.85rem, 3vw, 1.15rem);
        height:clamp(0.85rem, 3vw, 1.15rem);
    }

    .roulette .roulette__strip .item .item__info{
        gap:clamp(0.25rem, 1vw, 0.5rem);
        width:100%;
    }
    .roulette .roulette__catalog{
        gap:clamp(0.4rem, 1.5vw, 0.75rem);
        padding:0 clamp(0.75rem, 3vw, 1.25rem);
    }
    .roulette .roulette__catalog .item{
        width:clamp(6rem, 28vw, 9rem);
        min-height:clamp(8.5rem, 36vw, 12rem);
        padding:clamp(0.4rem, 1.8vw, 0.875rem);
        gap:clamp(0.2rem, 0.8vw, 0.4rem);
        border-radius:clamp(0.4rem, 1.5vw, 0.625rem);
        overflow:hidden;
    }
    .roulette .roulette__catalog .item .item__img{
        width:100%;
        height:auto;
        max-height:clamp(3.5rem, 16vw, 5.5rem);
    }
    .roulette .roulette__catalog .item .item__icon{
        width:clamp(0.6rem, 2vw, 0.9rem);
        height:clamp(0.6rem, 2vw, 0.9rem);
    }
    .roulette .roulette__catalog .item .item__exterior{
        padding:clamp(0.25rem, 1vw, 0.45rem) clamp(0.3rem, 1.2vw, 0.6rem);
        border-radius:clamp(0.25rem, 1vw, 0.4375rem);
        border-width:2px;
        font-size:clamp(0.5rem, 2vw, 0.75rem);
    }
    .roulette .roulette__catalog .item .item__info{
        gap:clamp(0.2rem, 0.8vw, 0.4rem);
    }
    .roulette .roulette__catalog .item .item__name{
        font-size:clamp(0.65rem, 2.4vw, 0.95rem);
    }

    .roulette .roulette__catalog .item .item__wear{
        font-size:clamp(0.45rem, 1.7vw, 0.65rem) !important;
    }

    .roulette .roulette__catalog .item .item__value{
        font-size:clamp(0.45rem, 1.7vw, 0.65rem);
    }

    .roulette .roulette__catalog .item .item__wear-value{
        gap:clamp(0.2rem, 0.6vw, 0.4rem);
    }
}

body:has(.activate-screen.show) [data-section]:not(.activate-screen){
   display:none !important;
}

.activate-screen{
   position:relative;
   width:100%;
   height:100%;
   padding:0 clamp(2rem, 3vw, 4rem) 0;
   box-sizing:border-box;
}

.activate-screen .activate-screen__arrows{
      position:absolute;
      top:15%;
      left:50%;
      transform:translate(-50%, -50%);
      width:7rem;
      height:3.1rem;
      opacity:0;
      z-index:0;
   }

.activate-screen.show{
   display:flex;
   align-items:center;
   justify-content:center;
   gap:3rem;
}

.activate-screen__card{
   opacity:0;
}

.activate-screen.show .activate-screen__card--star{
   animation:activate-card-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}

.activate-screen.show .activate-screen__card--mail{
   animation:activate-card-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s forwards;
}

.activate-screen.show .activate-screen__card--bell{
   animation:activate-card-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
}

.activate-screen.show .activate-screen__arrows{
   animation:roulette-stage-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 1.5s forwards;
}

.activate-screen__card{
   border-radius:0.875rem;
   width:31rem;
   height:32rem;

   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:space-between;

   background-blend-mode:screen;
   backdrop-filter:blur(10px);

   padding:3rem 1.5rem 1.5rem 1.5rem;
}

.activate-screen__card .activate-screen__icon{
      width:4.875rem;
      height:4.875rem;
      transition:transform 0.4s ease-in-out;
      z-index:5;
      -webkit-user-select:none;
              user-select:none;
   }

.activate-screen__card .activate-screen__info{
      display:flex;
      flex-direction:column;
      gap:1.5rem;
      transition:transform 0.35s ease-in-out, opacity 0.35s ease-in-out;
      z-index:2;
      -webkit-user-select:none;
              user-select:none;
   }

.activate-screen__card .activate-screen__title{
      text-align:center;

   }

.activate-screen__card .activate-screen__desc{
      text-align:center;
   }

.activate-screen__card .activate-screen__btn{
      width:100%;
      padding:0.5rem 6.25rem;
      border-radius:0.4375rem;
      transition:transform 0.15s ease-out, box-shadow 0.15s ease-out;
      white-space:nowrap;
   }

.activate-screen__card .activate-screen__btn:hover{
      transform:translateY(-2px);
   }

.activate-screen__card--star{
   border:1px solid rgba(52, 246, 126, 0.4);
   background:radial-gradient(149.47% 100% at 50% 100%, rgba(52, 246, 126, 0.40) 0%, rgba(47, 71, 107, 0.2) 100%);
   box-shadow:0 0 10px 0 #34f67ec9 inset, 0 0 80px 0 rgba(52, 246, 126, 0.40);
}

.activate-screen__card--star .activate-screen__info{
      width:22rem;
   }

.activate-screen__card--star .activate-screen__btn{
      border:2px solid #29EA96;
      background:radial-gradient(74.87% 100% at 50% 0%, #29EA96 0%, #00A287 100%);
   }

.activate-screen__card--star .activate-screen__btn:hover{
      box-shadow:0 0 10px 0 #29EA96, 0 0 20px 0 rgba(41, 234, 150, 0.80), 0 0 30px 0 rgba(41, 234, 150, 0.70), 0 0 40px 0 rgba(41, 234, 150, 0.60), 0 0 10px 0 #29EA96 inset;
   }

.activate-screen__card--star:has(.activate-screen__btn:hover) .activate-screen__icon{
   transform:scale(3.2) translateY(2.45rem);
   animation:activate-hover-glow-pulse 0.5s ease-in-out infinite;
}

.activate-screen__card--star:has(.activate-screen__btn:hover) .activate-screen__info{
   transform:scale(0) translateY(-5rem);
   opacity:0;
}

.activate-screen__card--mail{
   border:1px solid rgba(246, 94, 52, 0.4);
   background:radial-gradient(149.47% 100% at 50% 100%, rgba(246, 94, 52, 0.40) 0%, rgba(47, 71, 107, 0.2) 100%);
}

.activate-screen__card--mail .activate-screen__info{
      width:28.5rem;
   }

.activate-screen__card--mail .activate-screen__btn{
      border:2px solid #fd714a;
      background:radial-gradient(74.87% 100% at 50% 0%, #F69B34 0%, #F65E34 100%);
   }

.activate-screen__card--mail .activate-screen__btn:hover{
      box-shadow:0 0 10px 0 #F65E34 inset, 0 0 10px 0 #F65E34, 0 0 20px 0 rgba(246, 94, 52, 0.70), 0 0 30px 0 rgba(246, 94, 52, 0.60), 0 0 40px 0 rgba(246, 94, 52, 0.50);


   }

.activate-screen__card--mail:has(.activate-screen__btn:hover) .activate-screen__icon{
   transform:scale(3.2) translateY(2.45rem);
   animation:activate-hover-glow-pulse 0.5s ease-in-out infinite;
}

.activate-screen__card--mail:has(.activate-screen__btn:hover) .activate-screen__info{
   transform:scale(0) translateY(-5rem);
   opacity:0;
}

.activate-screen__card--bell{
   border:1px solid rgba(246, 52, 233, 0.4);
   background:radial-gradient(149.47% 100% at 50% 100%, rgba(246, 52, 233, 0.40) 0%, rgba(47, 71, 107, 0.2) 100%);
}

.activate-screen__card--bell .activate-screen__info{
      width:28.5rem;
   }

.activate-screen__card--bell .activate-screen__btn{
      border:2px solid #c651fc;
      background:radial-gradient(74.87% 100% at 50% 0%, #F634E9 0%, #B934F6 100%);
   }

.activate-screen__card--bell .activate-screen__btn:hover{
      box-shadow:0 0 10px 0 #B934F6, 0 0 20px 0 rgba(185, 52, 246, 0.80), 0 0 30px 0 rgba(185, 52, 246, 0.70), 0 0 40px 0 rgba(185, 52, 246, 0.60), 0 0 10px 0 #B934F6 inset;
   }

.activate-screen__card--bell:has(.activate-screen__btn:hover) .activate-screen__icon{
   transform:scale(3.2) translateY(2.45rem);
   animation:activate-hover-glow-pulse 0.5s ease-in-out infinite;
}

.activate-screen__card--bell:has(.activate-screen__btn:hover) .activate-screen__info{
   transform:scale(0) translateY(-5rem);
   opacity:0;
}

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

    .activate-screen{
        padding:0 clamp(1.25rem, 2vw, 2.5rem);
    }

    .activate-screen.show{
        gap:clamp(1rem, 1.6vw, 2.5rem);
    }
    .activate-screen__card{
        width:clamp(20rem, 21vw, 30rem);
        height:clamp(24rem, 25vw, 31rem);
        padding:clamp(1.75rem, 2.2vw, 3rem) clamp(1rem, 1.2vw, 1.5rem) clamp(1rem, 1.2vw, 1.5rem);
    }
        .activate-screen__card .activate-screen__icon{
            width:clamp(3.5rem, 3.7vw, 4.875rem);
            height:clamp(3.5rem, 3.7vw, 4.875rem);
        }
        .activate-screen__card .activate-screen__info{
            gap:clamp(0.875rem, 1.2vw, 1.5rem);
        }
        .activate-screen__card .activate-screen__btn{
            padding:clamp(0.4rem, 0.5vw, 0.5rem) clamp(1.5rem, 2.5vw, 4rem);
        }
    .activate-screen__card .text-activate-card-title-1,
    .activate-screen__card .text-activate-card-title-2,
    .activate-screen__card .text-activate-card-title-3{
        font-size:clamp(1.5rem, 1.4vw + 0.4rem, 2.75rem);
        line-height:1.1;
    }

    .activate-screen__card .text-activate-card-info-1,
    .activate-screen__card .text-activate-card-info-2,
    .activate-screen__card .text-activate-card-info-3{
        font-size:clamp(0.9375rem, 0.6vw + 0.4rem, 1.25rem);
        line-height:1.2;
    }
    .activate-screen__card .text-activate-card-btn-1,
    .activate-screen__card .text-activate-card-btn-2,
    .activate-screen__card .text-activate-card-btn-3{
        font-size:clamp(0.9375rem, 0.8vw + 0.3rem, 1.375rem);
        line-height:1.3;
    }
    .activate-screen__card--star .activate-screen__info,
    .activate-screen__card--mail .activate-screen__info,
    .activate-screen__card--bell .activate-screen__info{
        width:auto;
        max-width:100%;
    }
    .activate-screen__card--star:has(.activate-screen__btn:hover) .activate-screen__icon,
    .activate-screen__card--mail:has(.activate-screen__btn:hover) .activate-screen__icon,
    .activate-screen__card--bell:has(.activate-screen__btn:hover) .activate-screen__icon{
        transform:scale(2.6) translateY(2.2rem);
    }
}

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

    .activate-screen{
        padding:0;
    }

    .activate-screen.show{
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(1rem, 2.5vw, 1.75rem);
        padding:0 clamp(1.25rem, 3vw, 2rem);
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        scroll-padding-left:clamp(1.25rem, 3vw, 2rem);
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
    }

    .activate-screen.show::-webkit-scrollbar{
        display:none;
    }
    .activate-screen__card{
        flex:0 0 auto;
        width:clamp(22rem, 45vw, 30rem);
        height:clamp(26rem, 50vh, 32rem);
        max-width:none;
        padding:clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1rem, 1.5vw, 1.5rem);
        scroll-snap-align:start;
    }

    .activate-screen__card .activate-screen__icon{
        width:clamp(3.5rem, 5vw, 4.875rem);
        height:clamp(3.5rem, 5vw, 4.875rem);
    }

    .activate-screen__card .activate-screen__info{
        gap:clamp(0.875rem, 1.5vw, 1.5rem);
    }

    .activate-screen__card .activate-screen__btn{
        padding:clamp(0.45rem, 0.8vw, 0.5rem) clamp(2rem, 4vw, 4rem);
    }
    .activate-screen__card .text-activate-card-title-1,
    .activate-screen__card .text-activate-card-title-2,
    .activate-screen__card .text-activate-card-title-3{
        font-size:clamp(1.75rem, 3vw, 2.75rem);
        line-height:1.1;
    }

    .activate-screen__card .text-activate-card-info-1,
    .activate-screen__card .text-activate-card-info-2,
    .activate-screen__card .text-activate-card-info-3{
        font-size:clamp(1rem, 1.4vw, 1.25rem);
        line-height:1.2;
    }

    .activate-screen__card .text-activate-card-btn-1,
    .activate-screen__card .text-activate-card-btn-2,
    .activate-screen__card .text-activate-card-btn-3{
        font-size:clamp(1.125rem, 1.6vw, 1.5rem);
        line-height:1.3;
    }
    .activate-screen__card--star .activate-screen__info,
    .activate-screen__card--mail .activate-screen__info,
    .activate-screen__card--bell .activate-screen__info{
        width:auto;
        max-width:100%;
    }
    .activate-screen__card--star:has(.activate-screen__btn:hover) .activate-screen__icon,
    .activate-screen__card--mail:has(.activate-screen__btn:hover) .activate-screen__icon,
    .activate-screen__card--bell:has(.activate-screen__btn:hover) .activate-screen__icon{
        transform:scale(2.8) translateY(2.3rem);
    }
    .activate-screen .activate-screen__arrows{
        position:fixed;
        top:clamp(5rem, 10vh, 8rem);
        left:50%;
        transform:translate(-50%, 0);
        width:clamp(4rem, 7vw, 5.5rem);
        height:auto;
        opacity:0;
        z-index:5;
        pointer-events:none;
    }

    .activate-screen.show .activate-screen__arrows{
        animation:activate-arrows-fade-in 0.6s ease-out 0.4s forwards, activate-arrows-pulse 2.2s ease-in-out 1s infinite;
    }
}

@media (max-width: 767px){
    .activate-screen{
        padding:0;
    }

    .activate-screen.show{
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(0.75rem, 3vw, 1.25rem);
        padding:0 clamp(1rem, 4vw, 1.5rem);
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        scroll-padding-left:clamp(1rem, 4vw, 1.5rem);
        scrollbar-width:none;
        -ms-overflow-style:none;
        -webkit-overflow-scrolling:touch;
    }

    .activate-screen.show::-webkit-scrollbar{
        display:none;
    }
    .activate-screen__card{
        flex:0 0 80%;
        max-width:22rem;
        width:80%;
        height:clamp(20rem, 60vh, 28rem);
        padding:clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
        scroll-snap-align:start;
    }
    .activate-screen__card .activate-screen__icon{
        width:clamp(3rem, 12vw, 4.5rem);
        height:clamp(3rem, 12vw, 4.5rem);
    }

    .activate-screen__card .activate-screen__info{
        gap:clamp(0.875rem, 3vw, 1.25rem);
        width:100% !important;
    }

    .activate-screen__card .activate-screen__btn{
        padding:clamp(0.5rem, 2vw, 0.875rem) clamp(0.75rem, 3vw, 1.5rem);
    }
    .activate-screen__card .activate-screen__title,
    .activate-screen__card .text-activate-card-title-1,
    .activate-screen__card .text-activate-card-title-2,
    .activate-screen__card .text-activate-card-title-3{
        font-size:clamp(2rem, 8vw, 3rem);
        line-height:1.15;
    }

    .activate-screen__card .activate-screen__desc,
    .activate-screen__card .text-activate-card-info-1,
    .activate-screen__card .text-activate-card-info-2,
    .activate-screen__card .text-activate-card-info-3{
        font-size:clamp(0.875rem, 3.2vw, 1.125rem);
        line-height:1.25;
    }

    .activate-screen__card .text-activate-card-btn-1,
    .activate-screen__card .text-activate-card-btn-2,
    .activate-screen__card .text-activate-card-btn-3{
        font-size:clamp(1rem, 3.6vw, 1.375rem);
        line-height:1.2;
    }
    .activate-screen .activate-screen__arrows{
        position:fixed;
        top:clamp(0.75rem, 12vh, 2.2rem);
        left:50%;
        transform:translate(-50%, 0);
        width:clamp(4.5rem, 12vw, 6rem);
        height:auto;
        opacity:0;
        z-index:5;
        pointer-events:none;
    }
    .activate-screen.show .activate-screen__arrows{
        animation:activate-arrows-fade-in 0.6s ease-out 0.4s forwards, activate-arrows-pulse 2.2s ease-in-out 1s infinite;
    }
}

@keyframes activate-arrows-fade-in{
    from{
        opacity:0;
        transform:translate(-50%, -0.5rem);
    }
    to{
        opacity:0.85;
        transform:translate(-50%, 0);
    }
}

@keyframes activate-arrows-pulse{
    0%, 100%{
        opacity:0.85;
        scale:1;
    }
    50%{
        opacity:1;
        scale:1.06;
    }
}

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

.auth-popup.show{
    display:flex;
    animation:auth-popup-fade-in 0.35s ease forwards;
}

.auth-popup__overlay{
    position:absolute;
    inset:0;
    background:rgba(5, 7, 13, 0.9);
    backdrop-filter:blur(10px);
}

.auth-popup__modal{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(1.5rem, 3vw, 3rem);
    width:100%;
    max-width:58rem;
    min-height:24rem;
    padding:clamp(0.1rem, 3vw, 0.5rem) clamp(1rem, 3.5vw, 3rem);
    border-radius:1.25rem;
    border:1px solid rgba(57, 46, 66, 0.61);
    background:rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    backdrop-filter:blur(16px);
    box-shadow:0 0 1.5rem rgba(74, 103, 126, 0.349), 0 0 3rem rgba(0, 0, 0, 0.25);
    animation:auth-popup-modal-in 0.4s cubic-bezier(0.34, 1.25, 0.5, 1) forwards;
}

.auth-popup__close{
    position:absolute;
    top:clamp(0.75rem, 1.5vw, 1.25rem);
    right:clamp(0.75rem, 1.5vw, 1.25rem);
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    font-weight:400;
    line-height:1;
    color:var(--color-grey-1);
    text-decoration:none;
    border-radius:50%;
    cursor:pointer;
    transition:color 0.2s ease, background-color 0.2s ease;
    z-index:2;
}

.auth-popup__close:hover{
    color:var(--color-white-1);
    background-color:rgba(179, 199, 228, 0.1);
}

.auth-popup__content{
    display:flex;
    flex-direction:column;
    gap:clamp(1.5rem, 2.5vw, 2.5rem);
    flex:1;
    min-width:0;
    max-width:32rem;
}

.auth-popup__title{
    line-height:1.15;
    text-align:left;
}

.auth-popup__title strong{
        font-weight:inherit;
        color:var(--color-white-1);
    }

.auth-popup__btn{
    align-self:flex-start;
    gap:0.625rem;
    min-width:0;
    width:auto;
    padding:1rem 3rem;

    line-height:1;
    position:relative;
    z-index:2;
}

.auth-popup__btn span{
        font-size:2.25rem;
        text-transform:none;
    }

.auth-popup__steam-icon{
    width:1.8rem;
    height:1.8rem;
    flex-shrink:0;
    -webkit-user-drag:none;
    transition:filter 0.35s ease, transform 0.35s ease;
}

.auth-popup__btn:hover .auth-popup__steam-icon{
    filter:drop-shadow(0 0 0.25rem rgba(246, 94, 52, 0.95)) drop-shadow(0 0 0.625rem rgba(246, 94, 52, 0.8)) drop-shadow(0 0 1.25rem rgba(246, 94, 52, 0.55));
    transform:scale(1.06);
}

.auth-popup__cases{
    position:relative;
    flex-shrink:0;
    width:clamp(14rem, 24vw, 22rem);
    height:clamp(17rem, 28vw, 26rem);
    z-index:1;
}

.auth-popup__case{
    position:absolute;
    width:100%;
    height:auto;
    -webkit-user-drag:none;
    pointer-events:none;
}

.auth-popup__case--dc{
    top:0;
    left:0;
    filter:drop-shadow(0 0 1.5rem rgba(246, 94, 52, 0.45));
}

.auth-popup__case--v{
    bottom:0;
    left:0;
    filter:drop-shadow(0 0 1.5rem rgba(246, 52, 233, 0.45));
}

@media (max-width: 767px){

    .auth-popup{
        padding:clamp(0.5rem, 2vw, 1rem);
    }
    .auth-popup__modal{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(0.5rem, 2vw, 1.25rem);
        width:100%;
        max-width:32rem;
        min-height:0;
        padding:clamp(1.25rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem);
        border-radius:1.25rem;
        margin-bottom:4rem;

        box-shadow:0 0 1.5rem rgba(74, 103, 126, 0.349), 0 0 3rem rgba(0, 0, 0, 0.25);
        background:linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 38%,
                rgba(0, 0, 0, 0.55) 62%,
                rgba(0, 0, 0, 0.92) 85%,
                rgba(0, 0, 0, 0.97) 100%), rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    }
    .auth-popup__close{
        top:0.5rem;
        right:0.625rem;
        width:2rem;
        height:2rem;
        font-size:1.125rem;
    }
    .auth-popup__cases{
        order:1;
        width:100%;
        max-width:22rem;
        height:clamp(14rem, 50vw, 20rem);
        margin:0 auto;
    }
    .auth-popup__case{
        width:78%;
        height:auto;
    }

    .auth-popup__case--dc{
        top:0;
        left:0;
    }

    .auth-popup__case--v{
        bottom:clamp(-2.5rem, -5vw, -0.75rem);
        left:auto;
        right:0;
    }
    .auth-popup__content{
        order:2;
        gap:clamp(0.875rem, 3vw, 1.5rem);
        max-width:100%;
        align-items:center;
        width:100%;
    }
    .auth-popup__title{
        text-align:center;
        line-height:1.15;
    }
    .auth-popup__btn{
        align-self:stretch;
        justify-content:center;
        gap:0.5rem;
        padding:clamp(0.75rem, 3vw, 1.25rem) clamp(1rem, 4vw, 2rem);
    }

        .auth-popup__btn span{
            font-size:clamp(1.125rem, 4.4vw, 1.75rem);
        }

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

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

.mail-popup.show{
    display:flex;
    animation:mail-popup-fade-in 0.35s ease forwards;
}

.mail-popup__overlay{
    position:absolute;
    inset:0;
    background:rgba(5, 7, 13, 0.9);
    backdrop-filter:blur(10px);
}

.mail-popup__modal{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(1.5rem, 3vw, 3rem);
    width:100%;
    max-width:45rem;
    min-height:28rem;
    padding:clamp(0.1rem, 3vw, 0.5rem) clamp(1rem, 3.5vw, 3rem);
    border-radius:1.25rem;
    border:1px solid rgba(57, 46, 66, 0.61);
    background:linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.3) 78%,
            rgba(0, 0, 0, 0.6) 100%), rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    backdrop-filter:blur(16px);
    box-shadow:0 0 10px 0 #F65E34, 0 0 20px 0 rgba(246, 94, 52, 0.60), 0 0 30px 0 rgba(246, 94, 52, 0.50), 0 0 40px 0 rgba(246, 94, 52, 0.4), 0 0 10px 0 #F65E34 inset;
    animation:mail-popup-modal-in 0.4s cubic-bezier(0.34, 1.25, 0.5, 1) forwards;
}

.mail-popup__close{
    position:absolute;
    top:clamp(0.75rem, 1.5vw, 1.25rem);
    right:clamp(0.75rem, 1.5vw, 1.25rem);
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    font-weight:400;
    line-height:1;
    color:var(--color-grey-1);
    text-decoration:none;
    border-radius:50%;
    cursor:pointer;
    transition:color 0.2s ease, background-color 0.2s ease;
    z-index:2;
}

.mail-popup__close:hover{
    color:var(--color-white-1);
    background-color:rgba(179, 199, 228, 0.1);
}

.mail-popup__content{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    row-gap:clamp(1.5rem, 2.5vw, 2.5rem);
    flex:1;
    min-width:0;
    max-width:42rem;
}

.mail-popup__content .mail-popup__title:not(.mail-popup__title--sended){
    grid-column:1;
    grid-row:1;
}

.mail-popup__content .mail-popup__form,
.mail-popup__content .mail-popup__title--sended{
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:stretch;
}

.mail-popup__title{
    line-height:1.15;
    text-align:left;
}

.mail-popup__title strong{
        font-weight:inherit;
        color:var(--color-white-1);
    }

.mail-popup .mail-popup__title--sended{
    display:none;
    font-size:clamp(1.375rem, 1vw + 1rem, 2.125rem);
    line-height:1.35;
}

.mail-popup.sent .mail-popup__form{
    display:none;
}

.mail-popup.sent .mail-popup__title--sended{
    display:block;
    animation:mail-popup-sent-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes mail-popup-sent-in{
    from{
        opacity:0;
        transform:translateY(0.75rem) scale(0.96);
        filter:blur(4px);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

.mail-popup .mail-popup__form{
    display:flex;
    flex-direction:column;
    gap:clamp(0.875rem, 1.5vw, 1.5rem);
    width:100%;
}

.mail-popup .mail-popup__input{
    width:100%;
    padding:clamp(1rem, 1.4vw, 1.375rem) clamp(1.25rem, 1.6vw, 1.625rem);
    border-radius:0.625rem;
    border:1px solid rgba(246, 94, 52, 0.5);
    background:radial-gradient(149.47% 100% at 50% 100%,
        rgba(246, 94, 52, 0.15) 0%,
        rgba(14, 16, 22, 0.85) 100%);
    color:var(--color-white-1);
    font-family:var(--font-primary);
    font-size:clamp(1rem, 1.1vw, 1.25rem);
    font-weight:500;
    line-height:1.2;
    outline:none;
    box-shadow:inset 0 0 0.5rem rgba(246, 94, 52, 0.15);
    transition:border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    appearance:none;
}

.mail-popup .mail-popup__input::placeholder{
    color:rgba(179, 199, 228, 0.55);
}

.mail-popup .mail-popup__input:hover{
    border-color:rgba(246, 94, 52, 0.75);
}

.mail-popup .mail-popup__input:focus{
    border-color:var(--color-orange-2);
    box-shadow:inset 0 0 0.625rem rgba(246, 94, 52, 0.3), 0 0 0.625rem rgba(246, 94, 52, 0.5), 0 0 1.25rem rgba(246, 94, 52, 0.3);
}

.mail-popup .mail-popup__input:not(:placeholder-shown):invalid{
    border-color:rgba(220, 53, 69, 0.8);
    box-shadow:inset 0 0 0.5rem rgba(220, 53, 69, 0.2), 0 0 0.5rem rgba(220, 53, 69, 0.35);
}

.mail-popup .mail-popup__submit{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:clamp(0.75rem, 1.2vw, 1.125rem) clamp(2rem, 3vw, 4rem);
    border:2px solid #fd714a;
    border-radius:0.625rem;
    background:radial-gradient(74.87% 100% at 50% 0%, #F69B34 0%, #F65E34 100%);
    color:var(--color-white-1);
    cursor:pointer;
    font:inherit;
    text-shadow:0 0 5px rgba(255, 227, 17, 0.9);
    transition:box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.mail-popup .mail-popup__submit:hover{
    box-shadow:0 0 10px 0 #F65E34 inset, 0 0 10px 0 #F65E34, 0 0 20px 0 rgba(246, 94, 52, 0.7), 0 0 30px 0 rgba(246, 94, 52, 0.6), 0 0 40px 0 rgba(246, 94, 52, 0.5);
    transform:translateY(-2px);
}

.mail-popup .mail-popup__submit:active{
    transform:translateY(0);
}

.mail-popup .mail-popup__form.is-invalid .mail-popup__submit{
    pointer-events:none;
    opacity:0.45;
    filter:saturate(0.55);
    cursor:not-allowed;
}

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

    .mail-popup{
        padding:clamp(1rem, 2.5vw, 1.75rem);
    }

    .mail-popup__modal{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(1rem, 2vw, 1.5rem);
        width:100%;
        max-width:36rem;
        min-height:0;
        padding:clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
        border-radius:1.25rem;
    }

    .mail-popup__close{
        top:0.75rem;
        right:0.875rem;
        width:2.25rem;
        height:2.25rem;
        font-size:1.25rem;
    }

    .mail-popup__content{
        gap:clamp(1.25rem, 2.5vw, 2rem);
        max-width:100%;
        align-items:center;
        width:100%;
    }

    .mail-popup__title{
        text-align:center;
        line-height:1.15;
    }

    .mail-popup__title--sended{
        font-size:clamp(1.5rem, 2vw, 1.875rem);
    }
    .mail-popup__input{
        padding:1rem 1.25rem;
        font-size:1.0625rem;
    }

    .mail-popup__submit{
        padding:0.9rem 2rem;
    }
}

@media (max-width: 767px){

    .mail-popup{
        padding:clamp(0.5rem, 2vw, 1rem);
    }
    .mail-popup__modal{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(0.5rem, 2vw, 1.25rem);
        width:100%;
        max-width:32rem;
        min-height:0;
        padding:clamp(1.25rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem);
        border-radius:1.25rem;
        margin-bottom:4rem;

        box-shadow:0 0 1.5rem rgba(74, 103, 126, 0.349), 0 0 3rem rgba(0, 0, 0, 0.25);
        background:linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 38%,
                rgba(0, 0, 0, 0.55) 62%,
                rgba(0, 0, 0, 0.92) 85%,
                rgba(0, 0, 0, 0.97) 100%), rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    }
    .mail-popup__close{
        top:0.5rem;
        right:0.625rem;
        width:2rem;
        height:2rem;
        font-size:1.125rem;
    }
    .mail-popup__content{
        order:2;
        gap:clamp(0.875rem, 3vw, 1.5rem);
        max-width:100%;
        align-items:center;
        width:100%;
    }
    .mail-popup__title{
        text-align:center;
        line-height:1.15;
    }
    .mail-popup__title--sended{
        font-size:clamp(1.125rem, 4.5vw, 1.5rem);
        line-height:1.35;
    }
    .mail-popup__input{
        padding:0.875rem 1rem;
        font-size:1rem;
    }

    .mail-popup__submit{
        padding:0.8rem 1.5rem;
    }
}

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

.bell-popup.show{
    display:flex;
    animation:bell-popup-fade-in 0.35s ease forwards;
}

.bell-popup__overlay{
    position:absolute;
    inset:0;
    background:rgba(5, 7, 13, 0.9);
    backdrop-filter:blur(10px);
}

.bell-popup__modal{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(1.5rem, 3vw, 3rem);
    width:100%;
    max-width:45rem;
    min-height:28rem;
    padding:clamp(0.1rem, 3vw, 0.5rem) clamp(1rem, 3.5vw, 3rem);
    border-radius:1.25rem;
    border:1px solid rgba(57, 46, 66, 0.61);
    background:linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.3) 78%,
            rgba(0, 0, 0, 0.6) 100%), rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    backdrop-filter:blur(16px);
    box-shadow:0 0 10px 0 #B934F6, 0 0 20px 0 rgba(185, 52, 246, 0.60), 0 0 30px 0 rgba(185, 52, 246, 0.50), 0 0 40px 0 rgba(185, 52, 246, 0.4), 0 0 10px 0 #B934F6 inset;
    animation:bell-popup-modal-in 0.4s cubic-bezier(0.34, 1.25, 0.5, 1) forwards;
}

.bell-popup__close{
    position:absolute;
    top:clamp(0.75rem, 1.5vw, 1.25rem);
    right:clamp(0.75rem, 1.5vw, 1.25rem);
    width:2rem;
    height:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    font-weight:400;
    line-height:1;
    color:var(--color-grey-1);
    text-decoration:none;
    border-radius:50%;
    cursor:pointer;
    transition:color 0.2s ease, background-color 0.2s ease;
    z-index:2;
}

.bell-popup__close:hover{
    color:var(--color-white-1);
    background-color:rgba(179, 199, 228, 0.1);
}

.bell-popup__content{
    display:flex;
    flex-direction:column;
    gap:clamp(1.5rem, 2.5vw, 2.5rem);
    flex:1;
    min-width:0;
    max-width:42rem;
}

.bell-popup__title{
    line-height:1.15;
    text-align:left;
}

.bell-popup__title strong{
        font-weight:inherit;
        color:var(--color-white-1);
    }

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

    .bell-popup{
        padding:clamp(1rem, 2.5vw, 1.75rem);
    }

    .bell-popup__modal{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(1rem, 2vw, 1.5rem);
        width:100%;
        max-width:36rem;
        min-height:0;
        padding:clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
        border-radius:1.25rem;
    }

    .bell-popup__close{
        top:0.75rem;
        right:0.875rem;
        width:2.25rem;
        height:2.25rem;
        font-size:1.25rem;
    }

    .bell-popup__content{
        gap:clamp(1.25rem, 2.5vw, 2rem);
        max-width:100%;
        align-items:center;
        width:100%;
    }

    .bell-popup__title{
        text-align:center;
        line-height:1.15;
    }
        .bell-popup__title.text-popup-title{
            font-size:clamp(1.0625rem, 1.4vw, 1.375rem);
        }
}

@media (max-width: 767px){

    .bell-popup{
        padding:clamp(0.5rem, 2vw, 1rem);
    }
    .bell-popup__modal{
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:clamp(0.5rem, 2vw, 1.25rem);
        width:100%;
        max-width:32rem;
        min-height:0;
        padding:clamp(1.25rem, 4vw, 2rem) clamp(1rem, 4vw, 1.5rem);
        border-radius:1.25rem;
        margin-bottom:4rem;

        box-shadow:0 0 1.5rem rgba(74, 103, 126, 0.349), 0 0 3rem rgba(0, 0, 0, 0.25);
        background:linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0) 38%,
                rgba(0, 0, 0, 0.55) 62%,
                rgba(0, 0, 0, 0.92) 85%,
                rgba(0, 0, 0, 0.97) 100%), rgba(14, 16, 22, 0.92) url('/images/bg-main.avif') no-repeat center/cover;
    }
    .bell-popup__close{
        top:0.5rem;
        right:0.625rem;
        width:2rem;
        height:2rem;
        font-size:1.125rem;
    }
    .bell-popup__content{
        order:2;
        gap:clamp(0.875rem, 3vw, 1.5rem);
        max-width:100%;
        align-items:center;
        width:100%;
    }
    .bell-popup__title{
        text-align:center;
        line-height:1.15;
    }
        .bell-popup__title.text-popup-title{
            font-size:clamp(0.9375rem, 3.8vw, 1.25rem);
            line-height:1.35;
        }
}


.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: radial-gradient(50% 55.69% at 50% 48.98%, #1C1040 0%, #0A061C 100%);
  border: 1px solid rgba(185, 52, 246, 0.3);
  border-radius: 0.52vw;
  box-shadow: 0 0 3vw rgba(185, 52, 246, 0.15), 0 0 2vw rgba(185, 52, 246, 0.1);
  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(185, 52, 246, 0.1);
  border: 1px solid rgba(185, 52, 246, 0.35);
  border-radius: 0.26vw;
  color: rgba(255, 255, 255, 0.5);
  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(185, 52, 246, 0.22);
  border-color: rgba(185, 52, 246, 0.8);
  color: #ffffff;
}
@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: rgba(255, 255, 255, 0.75);
  font-family: "Montserrat", sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1.5;
}
.terms h2 {
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  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-pink-2) 50%, transparent 100%);
  border: none;
  margin: 1rem auto 2.5rem;
}
.terms h3 {
  margin: 2rem 0 0.75rem;
  color: var(--color-pink-1);
  font-family: "Montserrat", sans-serif;
  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: #ffffff;
  font-family: "Montserrat", sans-serif;
  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: #ffffff;
}
.terms ol {
  list-style-type: decimal;
  padding-left: 2vw;
}
.terms ul {
  list-style-type: disc;
  padding-left: 2vw;
}

.cookie-link {
  color: var(--color-pink-1);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: 400;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  transition: color 0.2s;
}
.cookie-link:hover {
  color: var(--color-pink-2);
}

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

  .rules-link {
    font-size: 3vw;
  }
}