@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter-Regular.woff2") format("woff2"), url("/fonts/Inter-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

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

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

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

@keyframes btn-start-shimmer{
    0%{
        background-position:0 -50%;
    }
    100%{
        background-position:0 150%;
    }
}

@keyframes loader-0{

    0%{
        opacity:0;
    }

    100%{
        opacity:1;
    }
}

@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 cursor-pulse{
    0%{
        background-color:var(--color-orange-2);
    }

    33%{
        background-color:#a74628c7;
    }

    66%{
        background-color:#5c1e119d;
    }

    100%{
        background-color:var(--color-orange-2);
    }
}

@keyframes cursor-vortex{
    from{
        transform:scale(1.9) rotate(0deg);
    }

    to{
        transform:scale(1.9) rotate(360deg);
    }
}

@keyframes cursor-vortex-reverse{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(-720deg);
    }
}

@keyframes cursor-vortex-pulse{
    0%, 100%{
        opacity:0.85;
        filter:drop-shadow(0 0 6px #ff4d4dc4);
    }

    50%{
        opacity:1;
        filter:drop-shadow(0 0 14px #ff4d4ddc) drop-shadow(0 0 22px rgba(255, 77, 77, 0.4));
    }
}

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

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

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

@keyframes float-box{
    0%, 100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-6px) scale(1.01125); }
}

@keyframes float-box-2{
    0%, 100%{ transform:translateY(0) scale(1) scaleX(-1); }
    50%{ transform:translateY(-6px) scale(1.01125) scaleX(-1); }
}

@keyframes slide-from-left{
    from{ opacity:0; transform:translateX(-60px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes slide-from-right{
    from{ opacity:0; transform:translateX(80px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes slide-from-right-box{
    from{ opacity:0; transform:translateY(-50%) translateX(80px); }
    to{ opacity:1; transform:translateY(-50%) translateX(0); }
}

@keyframes fall-in{
    0%{ opacity:0; transform:translateY(-800px) rotate(var(--base-rotate)) scale(2.25); }
    70%{ opacity:1; transform:translateY(8px) rotate(var(--base-rotate)) scale(1.05); }
    100%{ opacity:1; transform:translateY(0) rotate(var(--base-rotate)) scale(1); }
}

@keyframes slide-from-bottom{
    from{ opacity:0; transform:translateX(-50%) translateY(50px) scale(0.9); }
    to{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

@keyframes float-grenade{
    0%, 100%{ transform:translateY(0) rotate(-30deg) scale(1); }
    50%{ transform:translateY(-8px) rotate(-28deg) scale(1.04); }
}

@keyframes float-flash{
    0%, 100%{ transform:translateY(0) rotate(-132deg) scale(1); }
    50%{ transform:translateY(-6px) rotate(-130deg) scale(1.03); }
}

@keyframes float-smoke{
    0%, 100%{ transform:translateY(0) rotate(31deg) scale(1); }
    50%{ transform:translateY(-7px) rotate(33deg) scale(1.04); }
}

@keyframes box-glow-pulse{
    0%, 100%{ filter:drop-shadow(0 20px 40px rgba(255, 100, 20, 0.45)) drop-shadow(0 0 80px rgba(255, 60, 0, 0.2)); }
    50%{ filter:drop-shadow(0 30px 60px rgba(255, 120, 20, 0.75)) drop-shadow(0 0 120px rgba(255, 80, 0, 0.4)); }
}

@keyframes text-glow-pulse{
    0%, 100%{
        text-shadow:0 0 10px rgba(255, 100, 20, 0.45), 0 0 25px rgba(255, 70, 0, 0.35);
    }
    50%{
        text-shadow:0 0 18px rgba(255, 120, 30, 0.66), 0 0 45px rgba(255, 80, 0, 0.5), 0 0 80px rgba(255, 50, 0, 0.3);
    }
}

@keyframes ray-shimmer{

    0%,
    100%{
        opacity:0.3;
    }

    30%{
        opacity:0.9;
    }

    60%{
        opacity:0.4;
    }

    80%{
        opacity:0.7;
    }
}

@keyframes gun-sway-1{

    0%,
    100%{
        transform:translateX(-114%) rotate(30deg) translateY(5%);
    }

    50%{
        transform:translateX(-111%) rotate(26deg) translateY(11%);
    }
}

@keyframes gun-sway-2{

    0%,
    100%{
        transform:translateX(-110%) rotate(50deg) translateY(-22%);
    }

    50%{
        transform:translateX(-108%) rotate(47deg) translateY(-18%);
    }
}

@keyframes gun-sway-3{

    0%,
    100%{
        transform:translateX(16%) rotate(-44deg) translateY(-45%) scaleX(-1);
    }

    50%{
        transform:translateX(20%) rotate(-47deg) translateY(-42%) scaleX(-1);
    }
}

@keyframes gun-sway-4{

    0%,
    100%{
        transform:translateX(4%) rotate(-25deg) translateY(2%) scaleX(-1);
    }

    50%{
        transform:translateX(9%) rotate(-29deg) translateY(-5%) scaleX(-1);
    }
}

@keyframes screen-in{
    0%{
        opacity:0;
        transform:translateY(-50px) scale(0.75);
    }

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

@keyframes start__btn-in{
    0%{
        transform:translateY(100px) scale(1.5);
    }

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

@keyframes arrow-pulse{

    0%,
    100%{
        opacity:0.8;
        filter:drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
        transform:translateY(0) scale(1);
    }

    50%{
        opacity:1;
        filter:drop-shadow(0 0 10px rgba(255, 255, 255, 0.75));
        transform:translateY(4px) scale(1.2);

    }
}

@keyframes vignette-fade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes booth-glow{

    0%,
    100%{
        opacity:0.15;
    }

    50%{
        opacity:0.6;
    }
}

@keyframes booth-flicker{

    0%,
    100%{
        opacity:0.05;
    }

    5%{
        opacity:0.5;
    }

    10%{
        opacity:0.1;
    }

    15%{
        opacity:0.5;
    }

    20%{
        opacity:0.05;
    }

    40%{
        opacity:0.4;
    }

    42%{
        opacity:0.015;
    }

    44%{
        opacity:0.5;
    }

    60%{
        opacity:0.2;
    }

    80%{
        opacity:0.5;
    }

    82%{
        opacity:0.05;
    }

    85%{
        opacity:0.4;
    }
}

@keyframes key-shadow-pulse{

    0%,
    100%{
        filter:drop-shadow(0 0 15px rgba(120, 180, 140, 0.25)) drop-shadow(0 0 35px rgba(120, 180, 140, 0.1));
    }

    50%{
        filter:drop-shadow(0 0 25px rgba(120, 180, 140, 0.4)) drop-shadow(0 0 50px rgba(120, 180, 140, 0.25));
    }
}

@keyframes club-shadow-pulse{

    0%,
    100%{
        filter:drop-shadow(0 0 15px rgba(160, 80, 240, 0.25)) drop-shadow(0 0 35px rgba(160, 80, 240, 0.1));
    }

    50%{
        filter:drop-shadow(0 0 25px rgba(160, 80, 240, 0.3)) drop-shadow(0 0 50px rgba(160, 80, 240, 0.2));
    }
}

@keyframes hell-shadow-pulse{

    0%,
    100%{
        filter:drop-shadow(0 0 5px rgba(240, 140, 40, 0.2)) drop-shadow(0 0 25px rgba(240, 140, 40, 0.1));
    }

    50%{
        filter:drop-shadow(0 0 15px rgba(240, 140, 40, 0.25)) drop-shadow(0 0 35px rgba(240, 140, 40, 0.2));
    }
}

@keyframes embers-rise-1{
    0%{
        transform:translateY(50px);
        opacity:0.1;
    }

    60%{
        opacity:0.6;
    }

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

@keyframes embers-rise-2{
    0%{
        transform:translateY(0);
        opacity:0.1;
    }

    50%{
        opacity:0.5;
    }

    100%{
        transform:translateY(-150px);
        opacity:0;
    }
}

@keyframes crate-float{

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

    50%{
        transform:translateX(-50%) translateY(-10px);
    }
}

@keyframes booth-drop{
    0%{
        opacity:0;
        transform:translateY(-80px) scale(0.8);
    }

    60%{
        opacity:1;
        transform:translateY(10px) scale(1.02);
    }

    80%{
        transform:translateY(-5px) scale(1);
    }

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

@keyframes roulette-title-in{
    0%{
        opacity:0;
        transform:translateY(-2.5vw);
    }

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

@keyframes roulette-chevron-in{
    0%{
        opacity:0;
        transform:scale(0.4);
    }

    70%{
        opacity:1;
        transform:scale(1.15);
    }

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

@keyframes reel-entry{
    0%{
        opacity:0;
        transform:scale(1.25);
    }

    60%{
        opacity:1;
        transform:scale(0.96);
    }

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

@keyframes roulette-reel-A{
    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(
            calc(
                var(--reel-base, 46.5vw)
                - var(--card-step, 15.5vw) * (5 * var(--items-count--A, 0) + var(--random-num--A, 0))
            )
        );
    }
}

@keyframes roulette-auto-trigger{
    from{
        opacity:0;
    }

    to{
        opacity:0;
    }
}

@keyframes reel-card-winner{
    0%{
        transform:scale(1);
        filter:brightness(1);
    }

    45%{
        transform:scale(1.07);
        filter:brightness(1.8);
    }

    100%{
        transform:scale(1);
        filter:brightness(1);
    }
}

@keyframes smoke-backdrop-in{
    0%{
        opacity:0;
        backdrop-filter:blur(0px) sepia(0);
        -webkit-backdrop-filter:blur(0px) sepia(0);
    }

    100%{
        opacity:1;
        backdrop-filter:blur(22px) sepia(50%);
        -webkit-backdrop-filter:blur(22px) sepia(50%);
    }
}

@keyframes smoke-grenade-fall{
    0%{
        transform:translateX(-50%) translateY(-110vh) rotate(-30deg);
        opacity:0;
    }

    6%{
        opacity:1;
    }

    70%{
        transform:translateX(-50%) translateY(0) rotate(800deg);
        animation-timing-function:cubic-bezier(0.22, 1, 0.36, 1);
    }

    83%{
        transform:translateX(-47%) translateY(-1.2vh) rotate(808deg);
    }

    100%{
        transform:translateX(-46%) translateY(0) rotate(805deg);
        opacity:1;
    }
}

@keyframes smoke-enable-trigger{
    from{
        opacity:0;
    }

    to{
        opacity:0;
    }
}

@keyframes smoke-cloud-rise{
    0%{
        transform:var(--from, translateY(6vh) scale(0.72));
    }

    100%{
        transform:none;
    }
}

@keyframes smoke-cloud-fade{
    0%{
        opacity:0;
    }

    50%{
        opacity:0.5;
    }

    100%{
        opacity:1;
    }
}

@keyframes smoke-breathe{
    0%{
        transform:scale(1) translateY(0);
    }

    50%{
        transform:scale(1.028) translateY(-1.2%);
    }

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

@keyframes smoke-hint-in{
    0%{
        opacity:0;
        transform:translateX(-50%) translateY(-5rem);
    }

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

@keyframes drag-icon-sway{
    0%{ transform:translateX(-12px); }
    50%{ transform:translateX(12px); }
    100%{ transform:translateX(-12px); }
}

@keyframes card-drop-side{
    0%{
        opacity:0;
        transform:translateY(-120%) rotate(-6deg) scale(0.85);
    }

    60%{
        opacity:1;
        transform:translateY(4%) rotate(1deg) scale(1.02);
    }

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

@keyframes card-drop-side-r{
    0%{
        opacity:0;
        transform:translateY(-120%) rotate(6deg) scale(0.85);
    }

    60%{
        opacity:1;
        transform:translateY(4%) rotate(-1deg) scale(1.02);
    }

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

@keyframes card-drop-winner{
    0%{
        opacity:0;
        transform:translateY(-150%) rotate(0deg) scale(0.8);
    }

    65%{
        opacity:1;
        transform:translateY(2%) rotate(0deg) scale(1.03);
    }

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

@keyframes winner-glow-pulse{

    0%,
    100%{
        box-shadow:0 0 6px 0 #f65e34c4 inset, 0 0 96.5px 0 rgba(255, 121, 11, 0.3) inset, 0 0 35px 0 rgba(255, 81, 0, 0.4), 0 0 30px 0 rgba(255, 38, 0, 0.50), 0 0 12px 0 rgba(255, 38, 0, 0.70), 0 0 4px 0 #FFA191;
        border-color:rgba(255, 110, 20, 0.70);
    }

    50%{
        box-shadow:0 0 10px 0 #f65e34e8 inset, 0 0 96.5px 0 rgba(255, 121, 11, 0.45) inset, 0 0 50px 0 rgba(255, 81, 0, 0.55), 0 0 40px 0 rgba(255, 38, 0, 0.65), 0 0 18px 0 rgba(255, 38, 0, 0.85), 0 0 6px 0 #ffb891;
        border-color:rgba(255, 130, 40, 0.90);
    }
}

@keyframes reveal-case-in{
    from{
        opacity:0;
        transform:scale(0.9) translateY(20px);
    }

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

@keyframes reveal-bottom-in{
    from{
        opacity:0;
        transform:translateY(20px);
    }

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

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:"Inter", sans-serif;
    --color-bg:#0a0a0a;

    --color-white-1:#FFFFFF;
    --color-white-2:#B9C0D4;

    --color-black-1:#0E1016;
    --color-black-2:#1A1E27;
    --color-black-3:#202534;

    --color-orange-1:#FF8845;
    --color-orange-2:#F65E34;
    --z-consent:10000;
    --z-logo:9000;
    --z-overlay:8000;
    --z-popup:7000;
    --z-content:1;
    --footer-height-dk:75px;
    --footer-height-lp:75px;
    --footer-height-tb:75px;
    --footer-height-mb:70px;
}

body{
    position:relative;
    font-family:var(--font-primary);
    color:var(--color-white-1);
    background:radial-gradient(50% 55.69% at 50% 48.98%, #343442 0%, #0E1016 100%);
    min-height:100dvh;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

@media (max-width: 767px){

body{
}}

body::before{
        content:"";
        position:absolute;
        inset:0;
        background-image:radial-gradient(circle, #0e1016af 7px, transparent 5px);
        background-size:50px 50px;
        -webkit-mask-image:radial-gradient(circle at 50% 48.98%,
                #0E1016 0%,
                 
                #0E1016 100%
                 
            );
                mask-image:radial-gradient(circle at 50% 48.98%,
                #0E1016 0%,
                 
                #0E1016 100%
                 
            );

        pointer-events:none;
        z-index:0;
    }

body:has(.smoke-overlay__btn:hover) .custom-cursor{
    visibility:hidden;
}

body:has(.header__logo:hover) .custom-cursor{
    visibility:hidden;
}

body:has(.footer:hover) .custom-cursor{
    visibility:hidden;
}

.main{
    position:relative;
    width:100%;
    display:flex;
    justify-content:center;
    flex:1;
    min-height:0;
}

@media (max-width: 767px){

.main{
        overflow:hidden;
}
    }

.content{
    position:relative;
    width:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;

}

@media (max-width: 767px){

.content{
        overflow:hidden;

}
    }

.screen{
    flex:1;
    min-height:0;
    width:100%;
}

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

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

.loader .loader__inner{
        width:160px;
        aspect-ratio:1;
        --c:no-repeat linear-gradient(var(--color-orange-2) 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;
    }
        }

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

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

.custom-cursor{
    opacity:0;
    position:fixed;
    top:-15px;
    left:-15px;
    pointer-events:none;
    z-index:9999;

    will-change:transform;
}

@media (max-width: 767px){

.custom-cursor{
        display:none !important;
}
    }

.cursor-visual{
    width:50px;
    height:50px;
    background-color:var(--color-orange-1);
    border-radius:50%;
    box-shadow:0 0 15px var(--color-orange-2), 0 0 30px var(--color-orange-2);
    transition:box-shadow 0.35s ease, background 0.35s ease;

}

.custom-cursor.is-pressed .cursor-visual{
    transform:scale(1.9);
    background:conic-gradient(from 0deg,
            #F65E34 0deg, #F65E34 62deg, transparent 62deg,
            transparent 120deg, #F65E34 120deg, #F65E34 182deg, transparent 182deg,
            transparent 240deg, #F65E34 240deg, #F65E34 302deg, transparent 302deg,
            transparent 360deg);
    animation:cursor-vortex 0.5s linear infinite;
    box-shadow:none;
}

.custom-cursor.is-pressed .cursor-visual::after{
    content:'';
    position:absolute;
    inset:-10px;
    border-radius:50%;
    background:conic-gradient(
        from 0deg,
        rgba(172, 158, 154, 0.65) 0deg, rgba(172, 158, 154, 0.35) 20deg, rgba(172, 158, 154, 0.2) 20deg,
        transparent 60deg, rgba(172, 158, 154, 0.65) 60deg, rgba(172, 158, 154, 0.35) 80deg, rgba(172, 158, 154, 0.2)80deg,
        transparent 120deg, rgba(172, 158, 154, 0.65) 120deg, rgba(172, 158, 154, 0.35) 140deg, rgba(172, 158, 154, 0.2) 140deg,
        transparent 180deg, rgba(172, 158, 154, 0.65) 180deg, rgba(172, 158, 154, 0.35) 200deg, rgba(172, 158, 154, 0.2) 200deg,
        transparent 240deg, rgba(172, 158, 154, 0.65) 240deg, rgba(172, 158, 154, 0.35) 260deg, rgba(172, 158, 154, 0.2) 260deg,
        transparent 300deg, rgba(172, 158, 154, 0.65) 300deg, rgba(172, 158, 154, 0.35) 320deg, rgba(172, 158, 154, 0.2) 320deg,
        transparent 360deg
    );
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation:cursor-vortex-reverse 0.8s linear infinite;
}

body:has(.smoke-overlay__canvas.active) .custom-cursor{
        opacity:1;
    }

body:has(.smoke-overlay__canvas.active) .smoke-overlay__canvas{
        cursor:crosshair;
    }

.h2{
    font-family:var(--font-primary);
    font-size:clamp(3.625rem, 5.2vw, 6.25rem);
    color:var(--color-white-1);
    font-weight:700;
    line-height:1.1;
}

@media (max-width: 767px){

.h2{
        font-size:clamp(2rem, 6vh, 3.7rem);
}
    }

.h2 span{
        color:var(--color-orange-2);
    }

.h3{
    font-family:var(--font-primary);
    font-size:clamp(2.25rem, 1.683vw + 1.856rem, 3.875rem);
    color:var(--color-white-1);
    font-weight:700;
    line-height:1.1;
}

.h3 span{
        color:var(--color-orange-2);
    }

.h4{
    font-family:var(--font-primary);
    font-size:clamp(1.25rem, 1.77vw, 2.125rem);
    color:var(--color-white-1);
    font-weight:500;
    line-height:1.4;
}

@media (max-width: 767px){

.h4{
        font-size:clamp(0.875rem, 2.5vh, 1.25rem);
}
    }

.h4 span{
        color:var(--color-orange-2);
    }

.btn-start,
a.btn-start{
    cursor:pointer;
    text-decoration:none;
    transition:all 0.1s ease;
    outline:none;

    display:flex;
    width:clamp(18rem, 24vw, 29rem);
    padding:clamp(0.8rem, 1.1vw, 1.25rem) clamp(3rem, 5.2vw, 6.25rem);
    justify-content:center;
    align-items:center;
    gap:0.625rem;

    border-radius:31.25rem;
    border:2px solid #61a2b45e;
    background:radial-gradient(91.98% 144.95% at 50% 100%, #289ebe 0.96%, rgba(0, 7, 37, 0.00) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 1.721px 0 rgba(52, 143, 246, 0.96);
    position:relative;
    overflow:hidden;

    color:#80e3ff;
    font-family:var(--font-primary);
    font-size:clamp(1.5rem, 2vw, 2.4rem);
    font-style:normal;
    font-weight:500;
    line-height:1.4;
}

@media (max-width: 767px){

.btn-start,
a.btn-start{
        width:100%;
        padding:clamp(0.75rem, 3vw, 1.25rem) clamp(2rem, 8vw, 4rem);
        font-size:clamp(1.5rem, 6vw, 2.1rem);
}
    }

.btn-start::before,
a.btn-start::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg, transparent 20%, rgba(100, 210, 255, 0.12) 35%, rgba(140, 230, 255, 0.18) 50%, rgba(100, 210, 255, 0.12) 65%, transparent 80%);
    background-size:100% 300%;
    animation:btn-start-shimmer 3.5s ease-in-out infinite alternate;
    pointer-events:none;
}

.btn-start:hover,
a.btn-start:hover{
    border-color:rgba(141, 230, 255, 0.911);
    color:var(--color-white-1);
    background:radial-gradient(186.05% 293.18% at 50% 100%, #2eb4da 0.96%, rgba(0, 7, 37, 0.00) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 80px 0 #348ff6d5, 0 0 50px 0 #348ff6b9, 0 0 30px 0 #348ff6b0, 0 0 20px 0 #348ff6ab, 0 0 6px 0 #348ff6be, 0 0 2px 0 #348ff6a8;
}

.btn-reveal,
a.btn-reveal{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.25rem 6.25rem;
    border-radius:31.25rem;
    border:1px solid #f65e34;
    background:radial-gradient(91.98% 144.95% at 50% 100%, #f65e34 0.96%, rgba(0, 7, 37, 0.00) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 80px 0 #f65e34, 0 0 50px 0 #f65e34, 0 0 30px 0 #f65e34, 0 0 20px 0 #f65e34, 0 0 5px 0 #f65e34;
    color:#ff8563;
    font-family:var(--font-primary);
    font-size:2.125rem;
    font-weight:500;
    line-height:1.4;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none;
    transition:box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s ease;
    outline:none;
}

@media (max-width: 767px){

.btn-reveal,
a.btn-reveal{
        width:100%;
        padding:clamp(0.75rem, 3vw, 1.25rem) clamp(2rem, 8vw, 4rem);
        font-size:clamp(1.5rem, 6vw, 2.1rem);
}
    }

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

.btn-reveal,
a.btn-reveal{
        padding:clamp(0.6rem, 1vw, 0.9rem) clamp(2rem, 4vw, 4rem);
        font-size:clamp(1.1rem, 1.8vw, 1.6rem);
}
    }

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

.btn-reveal,
a.btn-reveal{
        padding:clamp(0.75rem, 1vw, 1.25rem) clamp(3rem, 4.5vw, 6.25rem);
        font-size:clamp(1.3rem, 1.7vw, 2.125rem);
}
    }

.btn-reveal:hover,
a.btn-reveal:hover{
    border-color:#ff8563;
    color:#fff;
    background:radial-gradient(91.98% 144.95% at 50% 100%, #f65e34 0.96%, rgba(0, 7, 37, 0.00) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 85px 0 #f65e34, 0 0 55px 0 #f65e34, 0 0 35px 0 #f65e34, 0 0 25px 0 #f65e34, 0 0 8px 0 #f65e34;
}

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

@media (max-width: 767px){

.header{
		padding:1rem;
}
	}

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

.header{
		padding:1.5rem;
}
	}

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

.header{
		padding:1.75rem;
}
	}

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

@media (max-width: 767px){

.header__logo{
		padding:0.3rem;
}
	}

.header__logo-img{
	height:4rem;
}

@media (max-width: 767px){

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

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

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

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

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

@media (min-width: 2560px){

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

@media (min-width: 3840px){

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

.footer{
    position:relative;
    z-index:5001;
    width:100%;
    height:var(--footer-height-dk);
    font-family:var(--font-secondary);
    font-size:clamp(0.875rem, 0.259vw + 0.814rem, 1.125rem);
    font-weight:400;
    color:var(--color-white-2);
    border-radius:20px 20px 0 0;
    background-color:var(--color-black-2);
    padding:1.7rem clamp(2rem, 9vw, 9.3rem);
    box-shadow:0 -10px 25px -10px rgba(0, 0, 0, 0.25);

    transition:transform 0.85s ease-in-out;
    transform:translateY(var(--footer-height-dk));
}

@media (max-width: 767px){

.footer{
        height:auto;
        min-height:var(--footer-height-mb);
        transform:translateY(calc(var(--footer-height-mb) * 2));
        padding:clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1.25rem);
        font-size:clamp(0.65rem, 2.8vw, 0.8rem);
        display:flex;
        align-items:center;
        justify-content:center;
}
    }

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

.footer{
        height:auto;
        min-height:var(--footer-height-tb);
        padding:1rem clamp(1.5rem, 4vw, 4rem);
        display:flex;
        align-items:center;
        font-size:clamp(0.65rem, 1.3vw, 0.85rem);
}
    }

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

.footer{
        height:auto;
        min-height:var(--footer-height-lp);
        padding:1rem clamp(1.5rem, 4vw, 4rem);
        display:flex;
        align-items:center;
}
    }

@media (min-width: 2560px){

.footer{
}
  
    }

@media (min-width: 3840px){

.footer{
}
   
    }

.footer .footer__content{

        display:flex;
        align-items:center;
    }

@media (max-width: 767px){

.footer .footer__content{
            flex-wrap:wrap;
            justify-content:center;
            align-content:center;
            min-height:100%;
            gap:clamp(0.2rem, 1vw, 0.4rem);
    }
        }

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

.footer .footer__content{
            display:grid;
            grid-template-columns:auto 1fr;
            grid-template-rows:auto auto;
            align-items:center;
            gap:0.3rem 1.5rem;
            width:100%;
    }
        }

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

.footer .footer__content{
            display:grid;
            grid-template-columns:auto 1fr;
            grid-template-rows:auto auto;
            align-items:center;
            gap:0.4rem 2rem;
            width:100%;
    }
        }

:is(.footer .footer__content) .footer__lang{
            display:none !important;
        }

:is(.footer .footer__content) .footer__steam{
            display:flex;
            align-items:center;
            gap:1.5rem;
            -webkit-user-select:none;
                    user-select:none;
        }

@media (max-width: 767px){

:is(.footer .footer__content) .footer__steam{
                gap:clamp(0.5rem, 2vw, 1rem);
                order:2;
        }
            }

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

:is(.footer .footer__content) .footer__steam{
                grid-column:1;
                grid-row:2;
                gap:clamp(0.4rem, 1vw, 1rem);
        }
            }

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

:is(.footer .footer__content) .footer__steam{
                grid-column:1;
                grid-row:2;
                gap:clamp(0.5rem, 1vw, 1.5rem);
        }
            }

:is(:is(.footer .footer__content) .footer__steam) span{
                color:#b9c0d479;
                font-size:calc(clamp(0.875rem, 0.259vw + 0.814rem, 1.125rem) - 0.575rem);
            }

@media (max-width: 767px){

:is(:is(.footer .footer__content) .footer__steam) span{
                    font-size:clamp(0.5rem, 2.2vw, 0.65rem);
            }
                }

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

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

:is(.footer .footer__content) .footer__copy{
            margin:0 auto;
            display:flex;
            align-items:center;
            gap:2.25rem;
            -webkit-user-select:none;
                    user-select:none;
        }

@media (max-width: 767px){

:is(.footer .footer__content) .footer__copy{
                gap:clamp(0.5rem, 2vw, 1rem);
                margin:0;
                order:3;
        }
            }

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

:is(.footer .footer__content) .footer__copy{
                grid-column:1;
                grid-row:1;
                margin:0;
                gap:clamp(0.5rem, 1.2vw, 1.5rem);
        }
            }

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

:is(.footer .footer__content) .footer__copy{
                grid-column:1;
                grid-row:1;
                margin:0;
                gap:clamp(0.75rem, 1.5vw, 2.25rem);
        }
            }

:is(:is(.footer .footer__content) .footer__copy) span{
                color:#b9c0d479;
            }

:is(.footer .footer__content) .footer__terms{
            display:flex;
            align-items:center;
            gap:2.25rem;
        }

@media (max-width: 767px){

:is(.footer .footer__content) .footer__terms{
                width:100%;
                justify-content:center;
                gap:clamp(1rem, 4vw, 2rem);
                order:1;
                margin-bottom:clamp(0.25rem, 1vw, 0.5rem);
        }
            }

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

:is(.footer .footer__content) .footer__terms{
                grid-column:2;
                grid-row:1 / 3;
                align-self:center;
                justify-self:end;
                gap:clamp(0.75rem, 1.5vw, 1.5rem);
        }
            }

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

:is(.footer .footer__content) .footer__terms{
                grid-column:2;
                grid-row:1 / 3;
                align-self:center;
                justify-self:end;
                gap:clamp(1rem, 2vw, 2.25rem);
        }
            }

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

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

.footer.show{
    transform:translateY(0);
}

.start-screen{

    position:relative;
    flex:1;
}

.start-screen .start-screen__bg{
        position:absolute;
        z-index:0;
        inset:0;
        background-image:url('/images/bg-dust.avif');
        background-size:contain;
        background-position:right center;
        background-repeat:no-repeat;
        filter:blur(4px);

        -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 20%, black 60%);
        mask-image:linear-gradient(to right, transparent 0%, transparent 20%, black 60%);
        opacity:0;
    }

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

.start-screen .start-screen__bg{
            background-size:cover;
    }
        }

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

.start-screen .start-screen__bg{
            background-size:cover;
    }
        }

@media (max-width: 767px){

.start-screen .start-screen__bg{
            background-size:cover;
            background-position:center center;
            -webkit-mask-image:none;
            mask-image:none;
            opacity:0;
    }
        }

.start-screen .start-screen__content{
        flex:1;
        position:relative;
        z-index:1;
        display:flex;
        align-items:center;
        padding:0 clamp(5rem, 15vw, 18rem);
    }

@media (max-width: 767px){

.start-screen .start-screen__content{
            flex-direction:column;
            align-items:flex-start;
            justify-content:flex-start;
            padding:clamp(4.25rem, 7vh, 5rem) clamp(1.25rem, 5vw, 1.75rem) clamp(0.5rem, 1.5vh, 1rem);
            min-height:100%;
            gap:clamp(1rem, 3vh, 2.5rem);
    }
        }

:is(.start-screen .start-screen__content) .start-screen__text{
            position:relative;
            z-index:1;
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            gap:clamp(1.5rem, 3vw, 3.5rem);
        }

@media (max-width: 767px){

:is(.start-screen .start-screen__content) .start-screen__text{
                position:static;
                gap:clamp(0.5rem, 1.5vh, 1rem);
                width:100%;
        }
            }

:is(:is(.start-screen .start-screen__content) .start-screen__text) h2{
                -webkit-user-select:none;
                        user-select:none;
                width:clamp(24rem, 46vw, 55rem);
            }

@media (max-width: 767px){

:is(:is(.start-screen .start-screen__content) .start-screen__text) h2{
                    width:100%;
            }
                }

:is(:is(.start-screen .start-screen__content) .start-screen__text) h4{
                -webkit-user-select:none;
                        user-select:none;
                width:clamp(16rem, 25vw, 30.5rem);
            }

@media (max-width: 767px){

:is(:is(.start-screen .start-screen__content) .start-screen__text) h4{
                    width:clamp(200px, 70vw, 295px);
            }
                }

:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area{
                position:absolute;
                inset:0;
            }

@media (max-width: 767px){

:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area{
                    inset:0;
                    pointer-events:none;
                    z-index:2;
            }
                }

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__grenade{
                    position:relative;
                    display:inline-block;
                    transform:rotate(-30deg);
                    aspect-ratio:105/142;
                    width:clamp(4rem, 5.5vw, 6.5625rem);
                    height:auto;
                    left:-8%;
                    top:16%;
                    pointer-events:none;
                    -webkit-user-select:none;
                            user-select:none;
                }

@media (max-width: 767px){

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__grenade{
                        position:absolute;
                        width:clamp(3rem, 10vw, 4.5rem);
                        height:auto;
                        left:82%;
                        right:auto;
                        top:15%;
                }
                    }

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__flash{
                    position:relative;
                    display:inline-block;
                    width:clamp(3.5rem, 5.5vw, 6.58106rem);
                    height:auto;
                    transform:rotate(-132.155deg);
                    aspect-ratio:67/106;
                    top:-16%;
                    left:7%;
                    pointer-events:none;
                    -webkit-user-select:none;
                            user-select:none;
                }

@media (max-width: 767px){

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__flash{
                        position:absolute;
                        width:clamp(2.5rem, 8vw, 3.5rem);
                        height:auto;
                        top:5%;
                        left:22%;
                        right:auto;
                }
                    }

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__smoke{
                    position:relative;
                    display:inline-block;
                    width:clamp(3rem, 4.8vw, 5.69819rem);
                    height:auto;
                    transform:rotate(31.374deg);
                    aspect-ratio:53/117;
                    top:48%;
                    right:-25%;
                    pointer-events:none;
                    -webkit-user-select:none;
                            user-select:none;
                }

@media (max-width: 767px){

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) .start-screen__smoke{
                        position:absolute;
                        width:clamp(2.2rem, 8vw, 3.5rem);
                        height:auto;
                        top:30%;
                        bottom:auto;
                        right:auto;
                        left:68%;
                }
                    }

:is(:is(:is(.start-screen .start-screen__content) .start-screen__text) .start-screen__drop-off-area) img{
                    width:100%;
                    height:auto;
                    display:block;
                    filter:drop-shadow(8px 16px 20px rgba(16, 17, 30, 0.85)) drop-shadow(2px 6px 8px rgba(16, 17, 30, 0.7));
                }

:is(.start-screen .start-screen__content) .start-screen__gun-box-area{
            position:absolute;
            right:14%;
            top:50%;
            transform:translateY(-50%);
            z-index:2;
            width:clamp(380px, 47vw, 900px);
        }

@media (max-width: 767px){

:is(.start-screen .start-screen__content) .start-screen__gun-box-area{
                position:relative;
                right:auto;
                top:25%;
                transform:none;
                width:clamp(300px, 85vw, 420px);
                align-self:center;
                display:flex;
                flex-direction:column;
                align-items:center;
        }
            }

:is(:is(.start-screen .start-screen__content) .start-screen__gun-box-area) .start-screen__gun-box{
                width:100%;
            }

:is(:is(.start-screen .start-screen__content) .start-screen__gun-box-area) img{
                width:100%;
                height:auto;
                display:block;
                -webkit-user-select:none;
                        user-select:none;
                pointer-events:none;
            }

@media (max-width: 767px){

:is(:is(.start-screen .start-screen__content) .start-screen__gun-box-area) img{
            }

                }

:is(:is(.start-screen .start-screen__content) .start-screen__gun-box-area) button{
                position:absolute;
                bottom:6%;
                left:50%;
                transform:translateX(-50%);
                width:55%;
                white-space:nowrap;
            }

@media (max-width: 767px){

:is(:is(.start-screen .start-screen__content) .start-screen__gun-box-area) button{
                    position:relative !important;
                    bottom:auto !important;
                    left:auto !important;
                    transform:none !important;
                    width:clamp(280px, 85vw, 400px);
                    align-self:center;
                    margin-top:clamp(0.5rem, 2vw, 1.5rem);
            }
                }

@media (max-width: 767px){

.start-screen.show{
        display:flex;
        flex-direction:column;
}
    }

.start-screen.show .start-screen__bg{
        animation:bg-fade-in 3.5s ease forwards;
    }

.start-screen.show .start-screen__text h2{
        animation:slide-from-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
    }

.start-screen.show .start-screen__text h4{
        animation:slide-from-left 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
    }

.start-screen.show .start-screen__gun-box-area{
        animation:slide-from-right-box 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
    }

.start-screen.show .start-screen__gun-box-area img{
        will-change:filter, transform;
        animation:box-glow-pulse 3s ease-in-out 0s infinite, float-box 5s ease-in-out 1s infinite;
    }

.start-screen.show .start-screen__gun-box-area button{
        animation:slide-from-bottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.45s both;
    }

.start-screen.show .start-screen__grenade{
        --base-rotate:-30deg;
        animation:fall-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both, float-grenade 4s ease-in-out 1.6s infinite;
    }

.start-screen.show .start-screen__flash{
        --base-rotate:-132deg;
        animation:fall-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both, float-flash 3.5s ease-in-out 1.75s infinite;
    }

.start-screen.show .start-screen__smoke{
        --base-rotate:31deg;
        animation:fall-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both, float-smoke 4.5s ease-in-out 1.9s infinite;
    }

.start-screen.show .start-screen__text h4 span{
        will-change:text-shadow;
        animation:text-glow-pulse 3s ease-in-out infinite;
    }

.roulette-screen{
    position:relative;
    z-index:2;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:0;
    --card-step:15.5vw;
    --reel-base:46.5vw;
    --elements-offset:-19.5vw;
}

@media (max-width: 767px){

.roulette-screen{
        --card-step:58vw;
        --reel-base:58vw;
        --elements-offset:-40.5vw;
}
    }

.roulette-screen__title{
    position:relative;
    z-index:8;
    margin:0 auto 1.5vw;
    color:#fff;
    font-family:var(--font-primary);
    font-size:3.5vw;
    font-weight:700;
    line-height:1;
    text-align:center;
    text-transform:uppercase;
    background:radial-gradient(79.87% 229.63% at 50% 174.07%, var(--color-white-1) 0%, var(--color-orange-1) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    opacity:0;
    transform:translateY(-3.5vw);
}

@media (max-width: 767px){

.roulette-screen__title{
        font-size:clamp(2rem, 4.5vw, 3rem);
        margin-bottom:clamp(1.5rem, 2vw, 2rem);
}
    }

.roulette-screen.show .roulette-screen__title{
    animation:roulette-title-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.roulette-screen__chevron{
    position:relative;
    z-index:15;


    display:flex;
    justify-content:center;
    opacity:0;
}

.roulette-screen__chevron img{
    width:100%;
    height:auto;
}

.roulette-screen__chevron--top{
    width:clamp(4.5rem, 6.2vw, 7.5rem);
    margin-bottom:-4.4vw;
}

@media (max-width: 767px){

.roulette-screen__chevron--top{
        width:clamp(4.5rem, 21vw, 6rem);
        margin-bottom:clamp(-3.5rem, -8vw, -2rem);
}
    }

.roulette-screen__chevron--bottom{
    width:clamp(2.5rem, 3.3vw, 4rem);
    margin-top:-1.8vw;
}

@media (max-width: 767px){

.roulette-screen__chevron--bottom{
        width:clamp(2.5rem, 11vw, 3.5rem);
        margin-top:clamp(-1.5rem, -3vw, -0.8rem);
}
    }

.roulette-screen.show .roulette-screen__chevron--top{
    animation:roulette-chevron-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

.roulette-screen.show .roulette-screen__chevron--bottom{
    animation:roulette-chevron-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards;
}

.roulette-screen__reel{
    position:relative;
    z-index:14;
    width:72vw;
    height:clamp(14rem, 19.5vw, 23.4rem);
    background:radial-gradient(ellipse 70% 90% at 50% 50%,
            rgba(255, 79, 10, 0.375) 0%,
            rgba(255, 50, 0, 0.08) 55%,
            transparent 100%);
    border-top:1px solid rgba(255, 102, 0, 0.233);
    border-bottom:1px solid rgba(255, 102, 0, 0.63);
    box-shadow:0 0 30px 0 rgba(255, 80, 10, 0.20), 0 0 60px 0 rgba(255, 50, 0, 0.10);
    opacity:0;

    border-radius:clamp(1rem, 1.8vw, 2.25rem);
    backdrop-filter:blur(25px);
    background-blend-mode:plus-lighter, normal;
}

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

.roulette-screen__reel{
        height:clamp(9rem, 19.5vw, 14rem);
}
    }

@media (max-width: 767px){

.roulette-screen__reel{
        width:94vw;
        height:clamp(14rem, 62vw, 20rem);
        border-radius:clamp(1rem, 4vw, 2rem);
}
    }

.roulette-screen.show .roulette-screen__reel{
    animation:reel-entry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}

.roulette-screen__bar{
    position:absolute;
    top:-2.5%;
    bottom:-2.5%;
    z-index:8;
    width:0.625rem;

    border-radius:0.625rem;
    background:#FFF9B9;
    box-shadow:0 0 2px 0 #FF6200 inset, 0 0 5px 0 #FFF9B9 inset, 0 0 2px 0 rgba(255, 38, 0, 0.80), 0 0 8px 0 rgba(255, 38, 0, 0.80), 0 0 20px 0 rgba(255, 98, 0, 0.70), 0 0 35px 0 rgba(255, 60, 0, 0.50);
    filter:blur(1px);
    mix-blend-mode:plus-lighter;


}

.roulette-screen__bar--left{
    left:2vw;
    border-radius:0.625rem;
}

@media (max-width: 767px){

.roulette-screen__bar--left{
        left:1.5vw;
        width:0.4rem;
}
    }

.roulette-screen__bar--left::before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        width:clamp(8rem, 16vw, 20rem);
        height:100%;
        background:linear-gradient(90deg, rgba(255, 165, 75, 0.7) 0%, rgba(255, 38, 0, 0.55) 30.29%, rgba(255, 38, 0, 0.00) 100%);
        mix-blend-mode:screen;
        border-radius:0.625rem;
    }

@media (max-width: 767px){

.roulette-screen__bar--left::before{
            width:8rem;
    }
        }

.roulette-screen__bar--right{
    right:2vw;
    border-radius:0.625rem;
}

@media (max-width: 767px){

.roulette-screen__bar--right{
        right:1.5vw;
        width:0.4rem;
}
    }

.roulette-screen__bar--right::before{
        content:"";
        position:absolute;
        top:0;
        right:0;
        z-index:8;
        width:clamp(8rem, 16vw, 20rem);
        height:100%;
        background:linear-gradient(90deg, rgba(255, 165, 75, 0.7) 0%, rgba(255, 38, 0, 0.55) 30.29%, rgba(255, 38, 0, 0.00) 100%);
        mix-blend-mode:screen;
        transform:scaleX(-1);
        border-radius:0.625rem;
    }

@media (max-width: 767px){

.roulette-screen__bar--right::before{
            width:8rem;
    }
        }

.roulette-screen__track{
    position:absolute;
    left:2vw;
    top:0;
    width:68vw;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
}

@media (max-width: 767px){

.roulette-screen__track{
        left:2vw;
        width:90vw;
}
    }

.roulette-screen__runner{
    width:fit-content;
    display:flex;
    transform:translateX(0);
}

.roulette-screen__runner.first{
    animation:roulette-reel-A 4s linear 1.2s forwards;
}

.roulette-screen__elements{
    display:flex;
    gap:1.5vw;
    transform:translateX(var(--elements-offset, -19.5vw));
}

@media (max-width: 767px){

.roulette-screen__elements{
        gap:3vw;
}
    }

.roulette-screen__trigger{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    z-index:-1;
}

.roulette-screen.show .roulette-screen__trigger{
    animation:roulette-auto-trigger 0.01s 1.2s forwards;
}

.reel-card{
    -webkit-user-select:none;
            user-select:none;
    position:relative;
    flex-shrink:0;
    width:14vw;
    height:15vw;
    background:radial-gradient(ellipse 80% 65% at 50% 35%,
            rgba(255, 75, 10, 0.3) 0%,
            rgba(16, 12, 6, 0.6) 75%);
    border:1px solid #f65e34a4;
    border-radius:clamp(0.6rem, 0.9vw, 1.125rem);
    box-shadow:0 0 0 1px rgba(255, 60, 0, 0.08) inset, 0 4px 20px 0 rgba(0, 0, 0, 0.55);
}

@media (max-width: 767px){

.reel-card{
        width:55vw;
        height:60vw;
        border-radius:clamp(0.75rem, 3vw, 1.125rem);
}
    }

.reel-card::before{
        content:"";
        position:absolute;
        inset:0;
        background-image:radial-gradient(circle, #744c3452 2px, transparent 2px);
        background-size:25px 25px;
        -webkit-mask-image:radial-gradient(circle at 50% 48.98%,
                #0E1016 0%,
                 
                #0E1016 100%
                 
            );
                mask-image:radial-gradient(circle at 50% 48.98%,
                #0E1016 0%,
                 
                #0E1016 100%
                 
            );

        pointer-events:none;
        z-index:0;
    }

.roulette-screen.done .reel-card.show{
    background:radial-gradient(ellipse 90% 70% at 50% 35%,
            rgba(255, 100, 20, 0.22) 0%,
            rgba(30, 16, 4, 0.97) 75%);
    border-color:rgba(255, 110, 20, 0.70);
    box-shadow:0 0 6px 0 #f65e34c4 inset, 0 0 96.5px 0 rgba(255, 121, 11, 0.3) inset, 0 0 35px 0 rgba(255, 81, 0, 0.4), 0 0 30px 0 rgba(255, 38, 0, 0.50), 0 0 12px 0 rgba(255, 38, 0, 0.70), 0 0 4px 0 #FFA191;
    border:2px solid #f65e34d0;
    will-change:filter, transform;
    animation:reel-card-winner 0.5s ease-out;
}

:is(.roulette-screen.done .reel-card.show) .reel-card__exterior{
        border:1px solid #ffb384d8;
        background:radial-gradient(103.41% 144.52% at 50% 99.57%, #f65e34c9 0.96%, rgba(37, 10, 0, 0.90) 100%), #1f160f;
        box-shadow:0 0 30px 0 rgba(255, 38, 0, 0.30), 0 0 16px 0 rgba(255, 38, 0, 0.40), 0 0 8px 0 rgba(255, 38, 0, 0.50), 0 0 2px 0 #36211d;
    }

.reel-card__img{
    width:95%;
    position:absolute;
    top:-1%;
    left:50%;
    transform:translate(-50%, 0);
    z-index:10;
    filter:drop-shadow(0 0 3px rgba(255, 170, 120, 0.4)) drop-shadow(0 0 8px rgba(255, 38, 0, 0.25));
}

.reel-card__name{
    position:absolute;
    left:50%;
    bottom:28%;
    transform:translateX(-50%);
    z-index:10;
    width:88%;
    color:#FF8873;
    font-family:var(--font-primary);
    font-size:clamp(0.55rem, 0.9vw, 1.125rem);
    font-weight:500;
    line-height:1.4;
    text-align:center;
    display:flex;
    align-items:center;
    gap:clamp(3px, 0.4vw, 8px);
    white-space:nowrap;
}

@media (max-width: 767px){

.reel-card__name{
        font-size:clamp(0.875rem, 4vw, 1.125rem);
        gap:8px;
}
    }

.reel-card__name::before{
        content:"";
        flex:1;
        height:1px;
        background:linear-gradient(90deg,
                transparent 0%,
                #FF8873 100%);
    }

.reel-card__name::after{
        content:"";
        flex:1;
        height:1px;
        background:linear-gradient(270deg,
                transparent 0%,
                #FF8873 100%);
    }

.reel-card__exterior{
    position:absolute;
    left:50%;
    bottom:8%;
    transform:translateX(-50%);
    z-index:10;
    width:85%;
    color:#FF8873;
    ;
    font-family:var(--font-primary);
    font-size:clamp(0.6rem, 1.08vw, 1.3rem);
    font-weight:700;
    line-height:1.4;
    text-align:center;
    text-shadow:0 0 12px rgba(255, 80, 0, 0.55);
    padding:clamp(0.3rem, 0.45vw, 0.55rem) 0.25rem;


    border-radius:clamp(0.3rem, 0.4vw, 0.5rem);
    border-top:1px solid #ffb38400;
    border-bottom:1px solid #ffb384b2;
    border-left:1px solid #ffb3843f;
    border-right:1px solid #ffb3843f;
    background:radial-gradient(103.41% 144.52% at 50% 99.57%, #a74f40 1%, rgba(37, 10, 0, 1) 100%), #2c1616;
    background-blend-mode:normal;
    backdrop-filter:blur(10px);
}

@media (max-width: 767px){

.reel-card__exterior{
        font-size:clamp(1rem, 4.5vw, 1.3rem);
        padding:clamp(0.4rem, 1.5vw, 0.55rem) 0.25rem;
        border-radius:0.5rem;
}
    }

.smoke-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:5000;
    pointer-events:none;
    opacity:0;
    overflow:hidden;
}

.smoke-overlay.blur-active{
    opacity:1;
    pointer-events:none;
}

.smoke-overlay.done{
    opacity:1;
    pointer-events:none;
}

.smoke-overlay.done.interactive{
    pointer-events:all;
}

.smoke-overlay__backdrop{
    position:absolute;
    inset:0;
    background:#0e1016a1;
    will-change:backdrop-filter, opacity;
    backdrop-filter:blur(0px) sepia(0);
    -webkit-backdrop-filter:blur(0px) sepia(0);
    opacity:0;
}

.smoke-overlay.blur-active .smoke-overlay__backdrop{
    animation:smoke-backdrop-in 1.5s ease-out 0s forwards;
    animation-delay:2.5s;
}

.smoke-overlay.done .smoke-overlay__backdrop{
    animation:smoke-backdrop-in 1.5s ease-out 0s forwards;
    animation-delay:2.5s;
}

.smoke-overlay.done.interactive .smoke-overlay__backdrop{
    animation:none;
    opacity:1;
    backdrop-filter:blur(8px) hue-rotate(0);
    -webkit-backdrop-filter:blur(8px) sepia(0);
    background:#0e101640;
    transition:backdrop-filter 0.8s ease, background 0.8s ease;
}

.smoke-overlay__grenade{
    position:absolute;
    left:50%;
    bottom:4vh;
    width:4.5vw;
    max-width:72px;
    min-width:40px;
    z-index:30;
    opacity:0;
    pointer-events:none;
    will-change:transform, opacity;
    transform:translateX(-50%) translateY(-110vh) rotate(-30deg);
}

@media (max-width: 767px){

.smoke-overlay__grenade{
        width:clamp(55px, 16vw, 80px);
        max-width:none;
        min-width:auto;
        bottom:clamp(3vh, 5vh, 7vh);
}
    }

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

.smoke-overlay__grenade{
        bottom:7vh;
}
    }

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

.smoke-overlay__grenade{
        bottom:7vh;
}
    }

.smoke-overlay__grenade img{
        width:100%;
        height:auto;
        display:block;
        filter:drop-shadow(0 0 28px rgba(255, 255, 255, 0.12)) drop-shadow(0 18px 48px rgba(0, 0, 0, 0.95)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.85)) drop-shadow(0 -4px 12px rgba(0, 0, 0, 0.6));
    }

.smoke-overlay.blur-active .smoke-overlay__grenade{
    animation:smoke-grenade-fall 1.95s cubic-bezier(0.4, 0, 0.6, 1) 2.6s forwards;
}

.smoke-overlay__enable-trigger{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
    z-index:-1;
}

.smoke-overlay.blur-active .smoke-overlay__enable-trigger{
    animation:smoke-enable-trigger 0.01s 6.2s forwards;
}

.smoke-overlay__canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:20;
    display:none;
    touch-action:none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
            user-select:none;
}

.smoke-overlay__canvas.active{
    display:block;
    cursor:crosshair;
}

.smoke-overlay__clouds{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.smoke-overlay__cloud{
    position:absolute;
    opacity:0;
    will-change:transform, opacity;
}

@media (max-width: 767px){

.smoke-overlay__cloud{
        transform-origin:center center;
}
    }

.smoke-overlay__cloud img{
        width:100%;
        height:auto;
        display:block;
        filter:drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
    }

.smoke-overlay.blur-active .smoke-overlay__cloud{
    animation:smoke-cloud-rise var(--dur, 2.2s) cubic-bezier(0.16, 1, 0.3, 1) calc(var(--delay, 1.4s) + 3.3s) both, smoke-cloud-fade var(--fade-dur, 1.6s) ease-out calc(var(--delay, 1.4s) + 3.3s) both, smoke-breathe var(--breathe-dur, 5s) ease-in-out calc(var(--breathe-delay, 3.5s) + 3.3s) infinite;
}

.smoke-overlay__cloud--l{
    width:30vw;
    left:-3vw;
    bottom:6vh;
    --from:translateX(-4vw) translateY(5vh) scale(0.7);
    --dur:2.6s;
    --delay:0.6s;
    --fade-dur:1.8s;
    --breathe-delay:3.2s;
    --breathe-dur:6.8s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--l{
        width:85vw;
        left:-14vw;
        bottom:2vh;
}
    }

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

.smoke-overlay__cloud--l{
        width:48vw;
        left:-8vw;
}
    }

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

.smoke-overlay__cloud--l{
        width:38vw;
        left:-5vw;
}
    }

.smoke-overlay__cloud--r{
    width:30vw;
    right:-3vw;
    bottom:6vh;
    --from:translateX(4vw) translateY(5vh) scale(0.7);
    --dur:2.8s;
    --delay:0.7s;
    --fade-dur:2.0s;
    --breathe-delay:4.5s;
    --breathe-dur:6.2s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--r{
        width:85vw;
        right:-14vw;
        bottom:2vh;
}
    }

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

.smoke-overlay__cloud--r{
        width:48vw;
        right:-8vw;
}
    }

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

.smoke-overlay__cloud--r{
        width:38vw;
        right:-5vw;
}
    }

.smoke-overlay__cloud--1{
    width:50vw;
    left:50%;
    bottom:6vh;
    margin-left:-25vw;
    --from:translateY(5vh) scale(0.68);
    --dur:2.4s;
    --delay:0.6s;
    --fade-dur:1.5s;
    --breathe-delay:3.8s;
    --breathe-dur:5.2s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--1{
        width:130vw;
        margin-left:-65vw;
        bottom:4vh;
}
    }

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

.smoke-overlay__cloud--1{
        width:78vw;
        margin-left:-39vw;
}
    }

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

.smoke-overlay__cloud--1{
        width:62vw;
        margin-left:-31vw;
}
    }

.smoke-overlay__cloud--2{
    width:36vw;
    left:0;
    bottom:10vh;
    --from:translateX(-3vw) translateY(6vh) scale(0.7);
    --dur:2.6s;
    --delay:0.8s;
    --fade-dur:1.9s;
    --breathe-delay:4.5s;
    --breathe-dur:5.8s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--2{
        width:110vw;
        left:-14vw;
        bottom:14vh;
}
    }

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

.smoke-overlay__cloud--2{
        width:56vw;
        left:-6vw;
}
    }

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

.smoke-overlay__cloud--2{
        width:44vw;
        left:-2vw;
}
    }

.smoke-overlay__cloud--3{
    width:36vw;
    right:0;
    bottom:8vh;
    --from:translateX(3vw) translateY(6vh) scale(0.7);
    --dur:2.7s;
    --delay:0.9s;
    --fade-dur:2.1s;
    --breathe-delay:3.4s;
    --breathe-dur:6.4s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--3{
        width:110vw;
        right:-14vw;
        bottom:12vh;
}
    }

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

.smoke-overlay__cloud--3{
        width:56vw;
        right:-6vw;
}
    }

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

.smoke-overlay__cloud--3{
        width:44vw;
        right:-2vw;
}
    }

.smoke-overlay__cloud--4{
    width:46vw;
    left:50%;
    bottom:18vh;
    margin-left:-23vw;
    --from:translateY(7vh) scale(0.68);
    --dur:2.5s;
    --delay:0.8s;
    --fade-dur:1.7s;
    --breathe-delay:5.2s;
    --breathe-dur:6.0s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--4{
        width:130vw;
        margin-left:-65vw;
        bottom:18vh;
}
    }

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

.smoke-overlay__cloud--4{
        width:72vw;
        margin-left:-36vw;
}
    }

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

.smoke-overlay__cloud--4{
        width:58vw;
        margin-left:-29vw;
}
    }

.smoke-overlay__cloud--5{
    width:44vw;
    left:8vw;
    bottom:20vh;
    --from:translateX(-3vw) translateY(8vh) scale(0.68);
    --dur:2.7s;
    --delay:0.85s;
    --fade-dur:2.0s;
    --breathe-delay:3.6s;
    --breathe-dur:5.5s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--5{
        width:120vw;
        left:-14vw;
        bottom:24vh;
}
    }

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

.smoke-overlay__cloud--5{
        width:68vw;
        left:-2vw;
}
    }

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

.smoke-overlay__cloud--5{
        width:54vw;
        left:4vw;
}
    }

.smoke-overlay__cloud--5 img{
        filter:brightness(1.65) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
    }

.smoke-overlay__cloud--6{
    width:44vw;
    right:6vw;
    bottom:18vh;
    --from:translateX(3vw) translateY(8vh) scale(0.68);
    --dur:2.7s;
    --delay:0.95s;
    --fade-dur:1.8s;
    --breathe-delay:4.9s;
    --breathe-dur:5.8s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--6{
        width:120vw;
        right:-14vw;
        bottom:22vh;
}
    }

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

.smoke-overlay__cloud--6{
        width:68vw;
        right:-4vw;
}
    }

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

.smoke-overlay__cloud--6{
        width:54vw;
        right:2vw;
}
    }

.smoke-overlay__cloud--7{
    width:54vw;
    left:50%;
    top:8vh;
    margin-left:-27vw;
    --from:translateY(9vh) scale(0.66);
    --dur:2.8s;
    --delay:1.0s;
    --fade-dur:2.2s;
    --breathe-delay:4.0s;
    --breathe-dur:7.2s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--7{
        width:140vw;
        margin-left:-70vw;
        top:4vh;
}
    }

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

.smoke-overlay__cloud--7{
        width:82vw;
        margin-left:-41vw;
}
    }

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

.smoke-overlay__cloud--7{
        width:66vw;
        margin-left:-33vw;
}
    }

.smoke-overlay__cloud--8{
    width:38vw;
    left:-2vw;
    top:12vh;
    --from:translateX(-4vw) translateY(8vh) scale(0.7);
    --dur:2.8s;
    --delay:1.1s;
    --fade-dur:1.6s;
    --breathe-delay:4.4s;
    --breathe-dur:5.4s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--8{
        width:110vw;
        left:-16vw;
        top:20vh;
}
    }

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

.smoke-overlay__cloud--8{
        width:58vw;
        left:-8vw;
}
    }

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

.smoke-overlay__cloud--8{
        width:46vw;
        left:-4vw;
}
    }

.smoke-overlay__cloud--9{
    width:38vw;
    right:-2vw;
    top:10vh;
    --from:translateX(4vw) translateY(8vh) scale(0.7);
    --dur:3.0s;
    --delay:1.05s;
    --fade-dur:2.0s;
    --breathe-delay:5.6s;
    --breathe-dur:6.6s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--9{
        width:110vw;
        right:-16vw;
        top:18vh;
}
    }

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

.smoke-overlay__cloud--9{
        width:58vw;
        right:-8vw;
}
    }

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

.smoke-overlay__cloud--9{
        width:46vw;
        right:-4vw;
}
    }

.smoke-overlay__cloud--10{
    width:36vw;
    left:14vw;
    top:26vh;
    --from:translateX(-3vw) translateY(9vh) scale(0.7);
    --dur:2.7s;
    --delay:1.25s;
    --fade-dur:1.7s;
    --breathe-delay:3.4s;
    --breathe-dur:5.2s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--10{
        width:120vw;
        left:-18vw;
        top:38vh;
}
    }

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

.smoke-overlay__cloud--10{
        width:56vw;
        left:0;
}
    }

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

.smoke-overlay__cloud--10{
        width:44vw;
        left:8vw;
}
    }

.smoke-overlay__cloud--11{
    width:36vw;
    right:10vw;
    top:24vh;
    --from:translateX(3vw) translateY(9vh) scale(0.7);
    --dur:2.7s;
    --delay:1.4s;
    --fade-dur:2.1s;
    --breathe-delay:4.7s;
    --breathe-dur:5.9s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--11{
        width:120vw;
        right:-18vw;
        top:36vh;
}
    }

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

.smoke-overlay__cloud--11{
        width:56vw;
        right:-2vw;
}
    }

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

.smoke-overlay__cloud--11{
        width:44vw;
        right:4vw;
}
    }

.smoke-overlay__cloud--12{
    width:30vw;
    left:-2vw;
    top:34vh;
    --from:translateX(-3vw) translateY(7vh) scale(0.72);
    --dur:2.6s;
    --delay:1.15s;
    --fade-dur:1.9s;
    --breathe-delay:3.8s;
    --breathe-dur:7.0s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--12{
        width:110vw;
        left:-20vw;
        top:44vh;
}
    }

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

.smoke-overlay__cloud--12{
        width:48vw;
        left:-8vw;
}
    }

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

.smoke-overlay__cloud--12{
        width:38vw;
        left:-4vw;
}
    }

.smoke-overlay__cloud--13{
    width:50vw;
    left:50%;
    top:-4vh;
    margin-left:-25vw;
    --from:translateY(12vh) scale(0.64);
    --dur:3.0s;
    --delay:1.4s;
    --fade-dur:2.2s;
    --breathe-delay:4.1s;
    --breathe-dur:7.4s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--13{
        width:115vw;
        margin-left:-57.5vw;
        top:-6vh;
}
    }

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

.smoke-overlay__cloud--13{
        width:78vw;
        margin-left:-39vw;
}
    }

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

.smoke-overlay__cloud--13{
        width:62vw;
        margin-left:-31vw;
}
    }

.smoke-overlay__cloud--14{
    width:32vw;
    right:-3vw;
    top:24vh;
    --from:translateX(4vw) translateY(8vh) scale(0.72);
    --dur:2.8s;
    --delay:1.4s;
    --fade-dur:1.5s;
    --breathe-delay:5.3s;
    --breathe-dur:5.6s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--14{
        width:110vw;
        right:-18vw;
        top:42vh;
}
    }

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

.smoke-overlay__cloud--14{
        width:52vw;
        right:-8vw;
}
    }

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

.smoke-overlay__cloud--14{
        width:40vw;
        right:-5vw;
}
    }

.smoke-overlay__cloud--15{
    width:30vw;
    left:-3vw;
    top:-2vh;
    --from:translateX(-3vw) translateY(12vh) scale(0.68);
    --dur:3.0s;
    --delay:1.6s;
    --fade-dur:2.0s;
    --breathe-delay:3.2s;
    --breathe-dur:6.2s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--15{
        width:70vw;
        left:-15vw;
        top:-4vh;
}
    }

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

.smoke-overlay__cloud--15{
        width:48vw;
        left:-8vw;
}
    }

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

.smoke-overlay__cloud--15{
        width:38vw;
        left:-5vw;
}
    }

.smoke-overlay__cloud--16{
    width:30vw;
    right:-3vw;
    top:-2vh;
    --from:translateX(3vw) translateY(12vh) scale(0.68);
    --dur:3.0s;
    --delay:1.45s;
    --fade-dur:1.8s;
    --breathe-delay:5.0s;
    --breathe-dur:5.9s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--16{
        width:70vw;
        right:-15vw;
        top:-4vh;
}
    }

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

.smoke-overlay__cloud--16{
        width:48vw;
        right:-8vw;
}
    }

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

.smoke-overlay__cloud--16{
        width:38vw;
        right:-5vw;
}
    }

.smoke-overlay__cloud--17{
    width:40vw;
    left:18vw;
    top:-5vh;
    --from:translateY(14vh) scale(0.64);
    --dur:3.2s;
    --delay:1.7s;
    --fade-dur:2.3s;
    --breathe-delay:4.3s;
    --breathe-dur:6.6s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--17{
        width:90vw;
        left:5vw;
        top:-6vh;
}
    }

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

.smoke-overlay__cloud--17{
        width:64vw;
        left:2vw;
}
    }

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

.smoke-overlay__cloud--17{
        width:50vw;
        left:10vw;
}
    }

.smoke-overlay__cloud--18{
    width:28vw;
    left:6vw;
    top:40vh;
    --from:translateX(-3vw) translateY(7vh) scale(0.72);
    --dur:2.6s;
    --delay:1.2s;
    --fade-dur:1.6s;
    --breathe-delay:5.9s;
    --breathe-dur:4.9s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--18{
        width:110vw;
        left:-16vw;
        top:48vh;
}
    }

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

.smoke-overlay__cloud--18{
        width:46vw;
        left:-4vw;
}
    }

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

.smoke-overlay__cloud--18{
        width:36vw;
        left:2vw;
}
    }

.smoke-overlay__cloud--19{
    width:28vw;
    right:4vw;
    top:38vh;
    --from:translateX(3vw) translateY(7vh) scale(0.72);
    --dur:2.6s;
    --delay:1.35s;
    --fade-dur:1.9s;
    --breathe-delay:3.6s;
    --breathe-dur:6.1s;
}

@media (max-width: 767px){

.smoke-overlay__cloud--19{
        width:110vw;
        right:-16vw;
        top:46vh;
}
    }

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

.smoke-overlay__cloud--19{
        width:46vw;
        right:-4vw;
}
    }

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

.smoke-overlay__cloud--19{
        width:36vw;
        right:0;
}
    }

.smoke-overlay__hint{
    position:absolute;
    top:8%;
    left:50%;
    transform:translateX(-50%) translateY(2rem);
    width:100%;
    text-align:center;
    z-index:30;
    opacity:0;
    pointer-events:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
}

@media (max-width: 767px){

.smoke-overlay__hint{
        top:10%;
}
    }

.smoke-overlay.blur-active .smoke-overlay__hint{
    animation:smoke-hint-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 6.6s forwards;
}

.smoke-overlay__title{

    width:clamp(35rem, 54vw, 65.3125rem);
    text-shadow:88px 144px 50px rgba(16, 17, 30, 0.10), 49px 81px 40px rgba(16, 17, 30, 0.40), 22px 36px 30px rgba(16, 17, 30, 0.60), 5px 9px 20px rgba(16, 17, 30, 0.60);
}

@media (max-width: 767px){

.smoke-overlay__title{
        width:90vw;
        font-size:clamp(2.5rem, 10vw, 4.25rem);
}
    }

.smoke-overlay__drag-icon{
    position:relative;
    z-index:9;
    display:flex;
    justify-content:center;
    margin-top:clamp(2rem, 4.2vw, 5rem);
    margin-bottom:0;
    filter:drop-shadow(0 10px 15px rgba(16, 17, 30, 0.30)) drop-shadow(0 30px 25px rgba(16, 17, 30, 0.20)) drop-shadow(0 30px 35px rgba(16, 17, 30, 0.15)) drop-shadow(0 50px 50px rgba(16, 17, 30, 0.10));
    will-change:transform;
    animation:drag-icon-sway 2s ease-in-out infinite;
}

.smoke-overlay__drag-icon img{
        width:clamp(8rem, 12.5vw, 15rem);
        height:100%;
    }

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

.smoke-overlay__drag-icon img{
            width:clamp(10rem, 18vw, 14rem);
    }
        }

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

.smoke-overlay__drag-icon img{
            width:clamp(10rem, 14vw, 15rem);
    }
        }

.smoke-overlay__drag-icon .mb{
        display:none;
    }

@media (max-width: 767px){

.smoke-overlay__drag-icon{
        margin-top:clamp(1.5rem, 4vh, 3rem);
}

        .smoke-overlay__drag-icon img{
            width:clamp(10rem, 38vw, 14rem);
        }

        .smoke-overlay__drag-icon .dk{
            display:none;
        }

        .smoke-overlay__drag-icon .mb{
            display:block;
        }
    }

.smoke-overlay__desc{
    font-family:var(--font-primary);
    margin-top:clamp(-3.5rem, -2.9vw, -2rem);
    display:inline-block;
    border-radius:clamp(0.75rem, 0.9vw, 1.125rem);
    border:1px solid #FFF;
    background:#F6F5F8;
    padding:clamp(0.75rem, 1vw, 1.25rem);
    color:#343442;
text-align:center;
font-family:Montserrat;
font-size:clamp(1rem, 1.15vw, 1.375rem);
font-style:normal;
font-weight:500;
line-height:140%;

filter:drop-shadow(0 10px 15px rgba(16, 17, 30, 0.40));
}

.smoke-overlay__desc span{
        color:var(--color-orange-1);
    }

@media (max-width: 767px){

.smoke-overlay__desc{
        margin-top:clamp(-2rem, -3vw, -1rem);
        font-size:clamp(0.85rem, 3.5vw, 1.1rem);
        padding:clamp(0.6rem, 2.5vw, 1rem);
        border-radius:clamp(0.75rem, 3vw, 1rem);
        max-width:85vw;
}
    }

.smoke-overlay.erasing .smoke-overlay__hint{
    opacity:0 !important;
    transition:opacity 0.18s ease;
}

.smoke-overlay:not(.erasing) .smoke-overlay__hint{
    transition:opacity 0.7s ease 0.25s;
}

.smoke-overlay__reveal{
    position:absolute;
    bottom:clamp(6rem, 9.2vw, 11rem);
    left:50%;
    transform:translateX(-50%);
    z-index:30;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(0.4rem, 0.6vw, 0.75rem);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.45s ease;
}

@media (max-width: 767px){

.smoke-overlay__reveal{
        bottom:clamp(5rem, 12vh, 8rem);
        width:clamp(280px, 85vw, 400px);
}
    }

.smoke-overlay__reveal.active{
    opacity:1;
    pointer-events:all;
}

.smoke-overlay__reveal-hint{
    font-family:var(--font-primary);
    font-size:0.95rem;
    color:rgba(255, 255, 255, 0.5);
    margin:0;
}

.smoke-overlay__reveal.active .smoke-overlay__reveal-hint{
    display:none;
}

.smoke-overlay__btn{
    opacity:0.35;
    pointer-events:none;
    transition:opacity 0.45s ease, box-shadow 0.45s ease;
}

.smoke-overlay__btn:hover{
        transform:scale(1.1);
    }

.smoke-overlay__reveal.active .smoke-overlay__btn{
    opacity:1;
    pointer-events:all;
}

.btn-reveal.smoke-overlay__btn{
}

.showcase-screen{
    position:fixed;
    inset:0;
    z-index:4999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.01s;
    overflow:hidden;
    background:radial-gradient(50% 55.69% at 50% 48.98%, #343442 0%, #21222c 50%, #0E1016 100%);
}

.showcase-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, #0e1016af 7px, transparent 5px);
    background-size:50px 50px;
    -webkit-mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
            mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
    pointer-events:none;
    z-index:0;
}

.showcase-screen::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url('/images/bg-dust.avif');
    background-size:cover;
    background-position:center;
    opacity:0.15;
    pointer-events:none;
    z-index:0;
}

.showcase-screen.active{
    opacity:1;
}

@media (min-width: 1024px) and (max-width: 1919px){
    .showcase-screen::before{
        background-size:36px 36px;
    }
}

.showcase-screen__case{
    position:relative;
    z-index:2;
    width:34vw;
    max-width:650px;
    display:flex;
    justify-content:center;
    margin-bottom:-8vw;
    pointer-events:none;
}

.showcase-screen__case-img{
    width:100%;
    height:auto;
    transform:scaleX(-1);
    will-change:filter, transform;
    animation:box-glow-pulse 3s ease-in-out 0s infinite, float-box-2 5s ease-in-out 1s infinite;
}

.showcase-screen__cards{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2vw;
    width:80vw;
    max-width:1520px;
}

.showcase-screen__cards .reel-card{
    flex-shrink:0;
    width:14.2vw;
    max-width:273px;
    height:auto;
    aspect-ratio:273 / 294;
    min-width:0;
}

@media (max-width: 767px){

    .showcase-screen{
        padding-top:clamp(2.5rem, 7vh, 4rem);
        justify-content:flex-start;
    }
    .showcase-screen::after{
        bottom:50%;
        -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
                mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
    }
    .showcase-screen__case{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -55%);
        width:clamp(360px, 130vw, 580px);
        max-width:none;
        margin-bottom:0;
        z-index:1;
    }

    .showcase-screen__cards{
        flex-wrap:wrap;
        width:92vw;
        gap:clamp(0.4rem, 2vw, 0.5rem);
        justify-content:center;
        z-index:3;
    }
    .showcase-screen__cards .reel-card.winner{
        width:min(46vw, 28vh);
        max-width:250px;
        aspect-ratio:298 / 276;
        flex-basis:100%;
        order:-1;
    }
    .showcase-screen__cards .reel-card:not(.winner){
        width:min(43vw, 20vh);
        max-width:196px;
        aspect-ratio:196 / 114;
        overflow:hidden;
    }
    .showcase-screen__cards .reel-card:not(.winner) .reel-card__img{
        width:80%;
        top:50%;
        transform:translate(-50%, -50%);
    }
    .showcase-screen__cards .reel-card:not(.winner) .reel-card__name,
    .showcase-screen__cards .reel-card:not(.winner) .reel-card__exterior{
        display:none;
    }
}

.reveal-screen{

 display:none;

    flex:1;
    min-height:0;
    width:100%;

    position:relative;
    z-index:2;
    width:100%;
    min-height:calc(100dvh - var(--footer-height-dk));
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    gap:0;
    background:radial-gradient(50% 55.69% at 50% 48.98%, #343442 0%, #21222c 50%, #0E1016 100%);
}

.reveal-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, #0e1016af 7px, transparent 5px);
    background-size:50px 50px;
    -webkit-mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
            mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
    pointer-events:none;
    z-index:0;
}

.reveal-screen::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url('/images/bg-dust.avif');
    background-size:cover;
    background-position:center;
    opacity:0.85;
    pointer-events:none;
    z-index:0;
}

.reveal-screen__case{
    position:relative;
    z-index:2;
    width:34vw;
    max-width:650px;
    display:flex;
    justify-content:center;
    margin-bottom:-10vw;
    pointer-events:none;
    opacity:0;
}

.reveal-screen.show .reveal-screen__case{
    animation:reveal-case-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.reveal-screen__case-img{
    width:100%;
    height:auto;
    transform:scaleX(-1);
    will-change:filter, transform;
    animation:box-glow-pulse 3s ease-in-out 0s infinite, float-box-2 5s ease-in-out 1s infinite;
}

.reveal-screen__cards{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2vw;
    width:80vw;
    max-width:1520px;
}

.reveal-screen__cards .reel-card{
    flex-shrink:0;
    width:14.2vw;
    max-width:273px;
    height:auto;
    aspect-ratio:273 / 294;
    opacity:0;
    transform:translateY(-120%) rotate(-8deg) scale(0.85);
}

.reveal-screen.show .reveal-screen__cards .reel-card:nth-child(1){
    animation:card-drop-side 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

.reveal-screen.show .reveal-screen__cards .reel-card:nth-child(5){
    animation:card-drop-side-r 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s forwards;
}

.reveal-screen.show .reveal-screen__cards .reel-card:nth-child(2){
    animation:card-drop-side 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s forwards;
}

.reveal-screen.show .reveal-screen__cards .reel-card:nth-child(4){
    animation:card-drop-side-r 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.29s forwards;
}

.reveal-screen.show .reveal-screen__cards .reel-card:nth-child(3){
    animation:card-drop-winner 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) 0.45s forwards;
}

.reveal-screen__cards .reel-card.winner{
    width:18vw;
    max-width:345px;
    aspect-ratio:345 / 370;
    background:radial-gradient(ellipse 90% 70% at 50% 35%,
            rgba(255, 100, 20, 0.22) 0%,
            rgba(30, 16, 4, 0.97) 75%);
    border-color:rgba(255, 110, 20, 0.70);
    border-style:solid;
    border-width:2px;
    box-shadow:0 0 6px 0 #f65e34c4 inset, 0 0 96.5px 0 rgba(255, 121, 11, 0.3) inset, 0 0 35px 0 rgba(255, 81, 0, 0.4), 0 0 30px 0 rgba(255, 38, 0, 0.50), 0 0 12px 0 rgba(255, 38, 0, 0.70), 0 0 4px 0 #FFA191;
    will-change:box-shadow;
    animation:winner-glow-pulse 2.5s ease-in-out 1s infinite;
}

.reveal-screen__cards .reel-card.winner .reel-card__img{
    filter:drop-shadow(0 0 6px rgba(255, 38, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 38, 0, 0.4));
}

.reveal-screen__cards .reel-card.winner .reel-card__exterior{
    border:1px solid #ffb384d8;
    background:radial-gradient(103.41% 144.52% at 50% 99.57%, #f65e34c9 0.96%, rgba(37, 10, 0, 0.90) 100%), #1f160f;
    box-shadow:0 0 30px 0 rgba(255, 38, 0, 0.30), 0 0 16px 0 rgba(255, 38, 0, 0.40), 0 0 8px 0 rgba(255, 38, 0, 0.50), 0 0 2px 0 #36211d;
}

.reveal-screen__bottom{
    position:relative;
    z-index:4;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2.5vw 10.4vw 0;
    opacity:0;
}

.reveal-screen.show .reveal-screen__bottom{
    animation:reveal-bottom-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s forwards;
}

.reveal-screen__text{
    max-width:60rem;
}

.reveal-screen__text .h2{
    line-height:1.1;
    font-size:clamp(2.5rem, 2.2vw + 1.8rem, 3.875rem);
}

.reveal-screen__text span{
    will-change:text-shadow;
    animation:text-glow-pulse 3s ease-in-out infinite;
}

.btn-steam{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.625rem;
    padding:1rem 3rem;
    border-radius:31.25rem;
    border:1px solid #8de6ff;
    background:radial-gradient(91.98% 144.95% at 50% 100%, #34ccf6 0.96%, rgba(0, 7, 37, 0) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 72.27px 0 #003f9a, 0 0 41.30px 0 #003f9a, 0 0 24.09px 0 #003f9a, 0 0 12.05px 0 #003f9a, 0 0 3.44px 0 #003f9a;
    color:#68deff;
    font-family:var(--font-primary);
    font-size:clamp(1.25rem, 0.8vw + 0.8rem, 2.125rem);
    font-weight:500;
    line-height:1.4;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.2s ease;
    flex-shrink:0;
    white-space:nowrap;
}

.btn-steam:hover{
    border-color:rgba(141, 230, 255, 0.9);
    color:var(--color-white-1);
    box-shadow:0 0 80px 0 #348ff6d5, 0 0 50px 0 #348ff6b9, 0 0 30px 0 #348ff6b0, 0 0 20px 0 #348ff6ab, 0 0 6px 0 #348ff6be;
}

.btn-steam:hover .btn__steam-icon{
        opacity:1;
    }

.btn__steam-icon{
    width:1.75rem;
    height:1.75rem;
    flex-shrink:0;
    opacity:0.75;
    transition:opacity 0.2s ease;
}

.reveal-screen.show{
    display:flex;
}

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

    .reveal-screen::before{
        background-size:36px 36px;
    }

    .reveal-screen__text .h2{
        font-size:clamp(2rem, 2.6vw, 3.875rem);
    }

    .reveal-screen__text{
        max-width:clamp(30rem, 50vw, 60rem);
    }

    .reveal-screen__bottom{
        padding-top:clamp(2.25rem, 2vw, 3vw);
    }

    .btn-steam{
        padding:clamp(0.7rem, 0.9vw, 1rem) clamp(1.5rem, 2.5vw, 3rem);
        font-size:clamp(1.1rem, 1.4vw, 2.125rem);
        gap:0.5rem;
    }

    .btn__steam-icon{
        width:clamp(1.2rem, 1.5vw, 1.75rem);
        height:clamp(1.2rem, 1.5vw, 1.75rem);
    }
}

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

    .reveal-screen::before{
        background-size:36px 36px;
    }

    .reveal-screen__case{
        width:42vw;
        margin-bottom:-12vw;
    }

    .reveal-screen__cards{
        gap:1vw;
    }

    .reveal-screen__cards .reel-card{
        width:16vw;
    }

    .reveal-screen__cards .reel-card.winner{
        width:20vw;
    }

    .reveal-screen__text .h2{
        font-size:clamp(1.8rem, 2.8vw, 3rem);
    }

    .reveal-screen__text{
        max-width:clamp(26rem, 55vw, 50rem);
    }

    .reveal-screen__bottom{
        padding-top:clamp(1.5rem, 2vw, 2.5rem);
    }

    .btn-steam{
        padding:clamp(0.6rem, 0.9vw, 0.9rem) clamp(1.2rem, 2.5vw, 2.5rem);
        font-size:clamp(1rem, 1.5vw, 1.6rem);
        gap:0.4rem;
    }

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

@media (max-width: 767px){

    .reveal-screen{
        min-height:calc(100dvh - var(--footer-height-mb));
        justify-content:flex-start;
        padding-top:clamp(4.5rem, 10vh, 6rem);
    }
    .reveal-screen::after{
        bottom:50%;
        -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
                mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
    }
    .reveal-screen__case{
        position:absolute;
        top:38%;
        left:50%;
        translate:-50% -50%;
        width:clamp(360px, 130vw, 580px);
        max-width:none;
        margin-bottom:0;
        z-index:1;
        opacity:0.5 !important;
    }
    .reveal-screen__cards{
        flex-wrap:wrap;
        width:92vw;
        gap:clamp(0.3rem, 1vw, 0.5rem);
        justify-content:center;
        z-index:3;
        margin-top:0;
    }
    .reveal-screen__cards .reel-card.winner{
        width:min(42vw, 24vh);
        max-width:220px;
        aspect-ratio:250 / 274;
        flex-basis:100%;
        order:-1;
    }
    .reveal-screen__cards .reel-card:not(.winner){
        width:min(43vw, 19vh);
        max-width:196px;
        aspect-ratio:196 / 114;
        overflow:hidden;
    }
    .reveal-screen__cards .reel-card:not(.winner) .reel-card__img{
        width:75%;
        top:50%;
        transform:translate(-50%, -50%);
    }
    .reveal-screen__cards .reel-card:not(.winner) .reel-card__name,
    .reveal-screen__cards .reel-card:not(.winner) .reel-card__exterior{
        display:none;
    }
    .reveal-screen__bottom{
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        padding:clamp(1rem, 3vh, 1.5rem) 5vw;
        gap:clamp(0.4rem, 1.5vh, 0.8rem);
        z-index:3;
        margin-top:auto;
        margin-bottom:clamp(0.5rem, 2vh, 1.5rem);
    }

    .reveal-screen__text{
        max-width:92vw;
    }

    .reveal-screen__text .h2{
        font-size:clamp(1.2rem, 4.5vw, 2rem);
    }
    .btn-steam{
        width:100%;
        padding:clamp(0.5rem, 2vw, 0.9rem) clamp(2rem, 8vw, 4rem);
        font-size:clamp(1.1rem, 4vw, 1.5rem);
    }
}

.activate-screen{
    display:none;
    flex:1;
    min-height:0;
    width:100%;
    position:relative;
    z-index:2;
    min-height:calc(100dvh - var(--footer-height-dk));
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    gap:0;
    background:radial-gradient(50% 55.69% at 50% 48.98%, #343442 0%, #21222c 50%, #0E1016 100%);
}

.activate-screen.show{
    display:flex;
}

.activate-screen::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle, #0e1016af 7px, transparent 5px);
    background-size:50px 50px;
    -webkit-mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
            mask-image:radial-gradient(circle at 50% 48.98%, #0E1016 0%, #0E1016 100%);
    pointer-events:none;
    z-index:0;
}

.activate-screen::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:url('/images/bg-dust.avif');
    background-size:cover;
    background-position:center;
    opacity:0.85;
    pointer-events:none;
    z-index:0;
}

.activate-screen__vitrine{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:80vw;
    max-width:1550px;
    opacity:0;
}

.activate-screen.show .activate-screen__vitrine{
    animation:reveal-case-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.activate-screen__case{
    position:relative;
    z-index:3;
    flex-shrink:0;
    width:42vw;
    max-width:905px;
    display:flex;
    justify-content:center;
    pointer-events:none;
    margin-right:-7vw;
    transition:transform 0.15s ease-out, opacity 0.25s ease;
}

.activate-screen__vitrine:has(.activate-screen__card .reel-card.show:hover) .activate-screen__case{
    opacity:0.75;
    transform:scale(0.85);
}

.activate-screen__case-img{
    width:100%;
    height:auto;
    transform:scaleX(-1);
    will-change:filter, transform;
    animation:box-glow-pulse 3s ease-in-out 0s infinite, float-box-2 5s ease-in-out 1s infinite;
}

.activate-screen__card{
    position:relative;
    z-index:2;
    opacity:0;
    transform:translateY(-150%) rotate(0deg) scale(0.8);
    cursor:pointer;


}

.activate-screen.show .activate-screen__card{
    animation:card-drop-winner 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) 0.35s forwards;
}

.activate-screen__card .reel-card{
    display:none;
}

.activate-screen__card .reel-card.show{
    display:flex;
    width:18vw;
    max-width:345px;
    height:auto;
    aspect-ratio:345 / 370;
    background:radial-gradient(ellipse 90% 70% at 50% 35%,
            rgba(255, 100, 20, 0.22) 0%,
            rgba(30, 16, 4, 0.97) 75%);
    border-color:rgba(255, 110, 20, 0.70);
    border-style:solid;
    border-width:2px;
    box-shadow:0 0 6px 0 #f65e34c4 inset, 0 0 96.5px 0 rgba(255, 121, 11, 0.3) inset, 0 0 35px 0 rgba(255, 81, 0, 0.4), 0 0 30px 0 rgba(255, 38, 0, 0.50), 0 0 12px 0 rgba(255, 38, 0, 0.70), 0 0 4px 0 #FFA191;
    will-change:box-shadow;
    animation:winner-glow-pulse 2.5s ease-in-out 1s infinite;
    transition:transform 0.15s ease-out;
}

:is(.activate-screen__card .reel-card.show):hover{
        transform:scale(1.1);
        background:radial-gradient(ellipse 90% 70% at 50% 35%,
                rgba(255, 100, 20, 0.22) 0%,
                rgba(94, 33, 18, 0.75) 75%);
    }

.activate-screen__card .reel-card.show .reel-card__img{
    filter:drop-shadow(0 0 6px rgba(255, 38, 0, 0.6)) drop-shadow(0 0 14px rgba(255, 38, 0, 0.4));
}

.activate-screen__card .reel-card.show .reel-card__exterior{
    border:1px solid #ffb384d8;
    background:radial-gradient(103.41% 144.52% at 50% 99.57%, #f65e34c9 0.96%, rgba(37, 10, 0, 0.90) 100%), #1f160f;
    box-shadow:0 0 30px 0 rgba(255, 38, 0, 0.30), 0 0 16px 0 rgba(255, 38, 0, 0.40), 0 0 8px 0 rgba(255, 38, 0, 0.50), 0 0 2px 0 #36211d;
}

.activate-screen__bottom{
    position:relative;
    z-index:4;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2.5vw 10.4vw 0;
    opacity:0;
}

.activate-screen.show .activate-screen__bottom{
    animation:reveal-bottom-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.activate-screen__text{
    max-width:66rem;
}

.activate-screen__text .h2{
    line-height:1.1;
    font-size:clamp(2.5rem, 2.2vw + 1.8rem, 3.875rem);
}

.activate-screen__text span{
    will-change:text-shadow;
    animation:text-glow-pulse 3s ease-in-out infinite;
}

.btn-promo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.625rem;
    padding:1rem 3rem;
    border-radius:31.25rem;
    border:1px solid #8de6ff;
    background:radial-gradient(91.98% 144.95% at 50% 100%, #34ccf6 0.96%, rgba(0, 7, 37, 0) 100%), #000925;
    background-blend-mode:screen, normal;
    box-shadow:0 0 72.27px 0 #003f9a, 0 0 41.30px 0 #003f9a, 0 0 24.09px 0 #003f9a, 0 0 12.05px 0 #003f9a, 0 0 3.44px 0 #003f9a;
    color:#68deff;
    font-family:var(--font-primary);
    font-size:clamp(1.25rem, 0.8vw + 0.8rem, 2.125rem);
    font-weight:500;
    line-height:1.4;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.2s ease;
    flex-shrink:0;
    white-space:nowrap;
}

.btn-promo:hover{
    border-color:rgba(141, 230, 255, 0.9);
    color:var(--color-white-1);
    box-shadow:0 0 80px 0 #348ff6d5, 0 0 50px 0 #348ff6b9, 0 0 30px 0 #348ff6b0, 0 0 20px 0 #348ff6ab, 0 0 6px 0 #348ff6be;
}

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

    .activate-screen::before{
        background-size:36px 36px;
    }

    .activate-screen__text .h2{
        font-size:clamp(2rem, 2.6vw, 3.875rem);
    }

    .activate-screen__text{
        max-width:clamp(30rem, 55vw, 66rem);
    }

    .btn-promo{
        padding:clamp(0.7rem, 0.9vw, 1rem) clamp(1.5rem, 2.5vw, 3rem);
        font-size:clamp(1.1rem, 1.4vw, 2.125rem);
    }
}

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

    .activate-screen::before{
        background-size:36px 36px;
    }

    .activate-screen__case{
        width:46vw;
    }

    .activate-screen__card .reel-card.show{
        width:20vw;
    }

    .activate-screen__text .h2{
        font-size:clamp(1.8rem, 2.8vw, 3rem);
    }

    .activate-screen__text{
        max-width:clamp(26rem, 55vw, 55rem);
    }

    .activate-screen__bottom{
        padding-top:clamp(1.5rem, 2vw, 2.5rem);
    }

    .btn-promo{
        padding:clamp(0.6rem, 0.9vw, 0.9rem) clamp(1.2rem, 2.5vw, 2.5rem);
        font-size:clamp(1rem, 1.5vw, 1.6rem);
    }
}

@media (max-width: 767px){

    .activate-screen{
        min-height:calc(100dvh - var(--footer-height-mb));
        justify-content:flex-start;
        padding-top:clamp(3rem, 7vh, 4.5rem);
    }
    .activate-screen::after{
        bottom:50%;
        -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
                mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
    }
    .activate-screen__vitrine{
        flex-direction:column-reverse;
        width:92vw;
        align-items:center;
        margin-top:2rem;
    }
    .activate-screen__case{
        width:clamp(300px, 100vw, 440px);
        max-width:none;
        margin-right:0;
        margin-top:clamp(-3rem, -8vw, -1.5rem);
        z-index:1;
    }
    .activate-screen__card{
        z-index:3;
    }

    .activate-screen__card .reel-card.show{
        width:min(72vw, 40vh);
        max-width:340px;
        aspect-ratio:298 / 320;
    }
    .activate-screen__bottom{
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        padding:clamp(0.5rem, 1.5vh, 1rem) 5vw;
        gap:clamp(0.4rem, 1.5vh, 0.8rem);
        margin-top:auto;
        z-index:3;
    }

    .activate-screen__text{
        max-width:92vw;
        margin-bottom:2rem;
    }

    .activate-screen__text .h2{
        font-size:clamp(1.2rem, 4.5vw, 2rem);
    }
    .btn-promo{
        width:100%;
        padding:clamp(0.5rem, 2vw, 0.9rem) clamp(2rem, 8vw, 4rem);
        font-size:clamp(1.1rem, 4vw, 1.5rem);
    }
}

.coockie-banner{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:var(--z-consent);
    background:rgba(57, 74, 97, 0.418);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    padding:1rem 1rem;
    border-top:3px solid var(--color-black-2);
    border-radius:20px 20px 0 0;
}

@media (max-width: 767px){

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

.coockie-banner{

    transform:translateY(300px);
}

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

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

@media (max-width: 767px){

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

.coockie-banner__inner h3{
        color:var(--color-orange-2);
        font-family:var(--font-primary);
        font-size:1.1rem;
        font-weight:700;
        line-height:normal;
        margin-bottom:12px;
        text-transform:uppercase;
    }

@media (max-width: 767px){

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

.coockie-banner__text{
    flex:1;
    font-size:0.9rem;
    line-height:1.3;
    color:rgba(255, 255, 255, 0.8);
    max-width:820px;
    font-family:var(--font-secondary);
}

@media (max-width: 767px){

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

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

.coockie-banner__btn{
    flex-shrink:0;
    padding:0.9rem 2.3rem !important;
    font-size:1.2rem !important;
    box-shadow:0 0 40px 0 #f65e349c, 0 0 20px 0 #f65e34b6, 0 0 5px 0 #f65e34ea !important;
}

@media (max-width: 767px){

.coockie-banner__btn{
        margin-top:1.5rem;
}
    }

.terms{
  max-width:900px;
  margin:2rem auto;
  padding:3rem 3rem;
    background:rgba(53, 72, 97, 0.418);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:4px double var(--color-orange-1);
    border-radius:5px;

    font-family:var(--font-secondary);
}

@media (max-width: 767px){

.terms{
		padding:2rem;
    margin:0 auto;
    border:1px solid #5c5345b0;
}
	}

.terms h1{
    font-family:var(--font-primary);
    font-size:1.5rem;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:1.5rem;
    text-align:center;
    color:var(--color-orange-2);
    text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
  }

.terms h2{
    font-family:var(--font-primary);
    font-size:1.1rem;
    font-weight:700;
    margin:1.5rem 0 0.75rem;
    color:var(--color-orange-1);
  }

.terms h3{
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:700;
    margin:1rem 0 0.5rem;
      color:var(--color-orange-1);
  }

.terms p{
    font-size:0.9rem;
    line-height:1.7;
    margin-bottom:0.75rem;
    color:rgba(255, 255, 255, 0.85);
  }

.terms ul,.terms ol{
    margin:0.5rem 0 1rem 1.5rem;
    list-style:disc;
  }

.terms ol{
    list-style:decimal;
  }

.terms li{
    font-size:0.9rem;
    line-height:1.7;
    margin-bottom:0.25rem;
    color:rgba(255, 255, 255, 0.85);
  }

.terms strong{
    font-weight:700;
  }

.terms a{
    color:var(--color-accent);
    text-decoration:underline;
  }