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

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

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

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

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

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

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

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

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

@keyframes loader-pulse{
     0%,
     100%{
         transform:rotate(45deg) scale(0.5);
         opacity:0.4;
         filter:hue-rotate(-15deg);
     }

     50%{
         transform:rotate(45deg) scale(1.2);
         opacity:0.9;
         filter:hue-rotate(0deg);
     }
 }

@keyframes coockie-in{
     from{
         opacity:0;
         transform:translateX(120%);
     }

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

@keyframes bg-overlay-fade-out{
     from{
         opacity:1;
     }

     to{
         opacity:0;
     }
 }

@keyframes bg-overlay-flash-offer{
     from{
         opacity:1;
     }

     to{
         opacity:0;
     }
 }

@keyframes status-in-center{
     from{
         opacity:0;
         transform:translate(-50%, -50%) scale(1.35);
     }

     to{
         opacity:1;
         transform:translate(-50%, -50%) scale(1);
     }
 }

@keyframes offer-top-glow-pulse{

     0%,
     100%{
         opacity:0.5;
     }

     50%{
         opacity:1;
     }
 }

@keyframes activate-case-blink{

     0%,
     100%{
         filter:brightness(1) drop-shadow(0 0 20px rgba(255, 180, 70, 0.35));
     }

     50%{
         filter:brightness(1.18) drop-shadow(0 0 50px rgba(255, 180, 70, 0.7));
     }
 }

@keyframes activate-dot-1{

     0%,
     15%{
         opacity:0;
     }

     17%,
     100%{
         opacity:1;
     }
 }

@keyframes activate-dot-2{

     0%,
     32%{
         opacity:0;
     }

     34%,
     100%{
         opacity:1;
     }
 }

@keyframes activate-dot-3{

     0%,
     49%{
         opacity:0;
     }

     51%,
     100%{
         opacity:1;
     }
 }

@keyframes activate-case-scale-pulse{

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

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

@keyframes popup-slide-up-center{
     from{
         opacity:0;
         transform:translate(-50%, calc(-50% + 2.2rem)) scale(0.97);
     }

     to{
         opacity:1;
         transform:translate(-50%, -50%) scale(1);
     }
 }

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

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

@keyframes case-glow-pulse{

     0%,
     100%{
         opacity:0.3;
     }

     50%{
         opacity:1;
     }
 }

@keyframes case-saturate-pulse{

     0%,
     100%{
         transform:scale(1) translateY(0) rotate(0deg);
         filter:contrast(100%) brightness(100%) saturate(1);
     }

     50%{
         transform:scale(1.025) translateY(-8px) rotate(3deg);
         filter:contrast(105%) brightness(120%) saturate(1.035);
     }
 }

@keyframes cta-glow-pulse{

     0%,
     100%{
         box-shadow:0 0 6px rgba(255, 139, 56, 0.25), 0 0 12px rgba(255, 139, 56, 0.15);
     }

     50%{
         box-shadow:0 0 20px rgba(255, 139, 56, 0.6), 0 0 35px rgba(255, 139, 56, 0.4);
     }
 }

@keyframes timer-glow-pulse{

     0%,
     100%{
         box-shadow:0 0 40px rgba(255, 73, 56, 0.55), 0 0 25px rgba(252, 101, 87, 0.6), inset 0 0 4px var(--color-red-1);
     }

     50%{
         box-shadow:0 0 56px rgba(255, 73, 56, 0.78), 0 0 34px rgba(252, 101, 87, 0.82), inset 0 0 4px var(--color-red-1);
     }
 }

@keyframes intro-title-in{
     from{
         opacity:0;
         transform:scale(var(--intro-title-scale, 1.8));
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-slide-left{
     from{
         opacity:0;
         transform:translateX(-55%);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-slide-right{
     from{
         opacity:0;
         transform:translateX(55%);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-hero-settle{
     from{
         transform:translateY(var(--hero-shift, 30vh)) scale(var(--intro-hero-scale, 1.3));
     }

     to{
         transform:none;
     }
 }

@keyframes intro-badges-drop{
     from{
         opacity:0;
         transform:translateY(-1.4rem);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-case-in{
     from{
         opacity:0;
         transform:translateY(1.6rem) scale(0.9);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-label-in{
     from{
         opacity:0;
         transform:translateY(-0.8rem);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes intro-rise-in{
     from{
         opacity:0;
         transform:translateY(2rem);
     }

     to{
         opacity:1;
         transform:none;
     }
 }

@keyframes pick-btn-rise-in{
     from{
         opacity:0;
         transform:translateX(-50%) translateY(0.75rem);
     }

     to{
         opacity:1;
         transform:translateX(-50%) translateY(-1.75rem);
     }
 }

@keyframes case-hover-shake{

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

     20%{
         transform:translateX(-0.35rem);
     }

     40%{
         transform:translateX(0.35rem);
     }

     60%{
         transform:translateX(-0.2rem);
     }

     80%{
         transform:translateX(0.2rem);
     }
 }

@keyframes intro-shake{

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

     15%{
         transform:translateX(-0.6rem);
     }

     30%{
         transform:translateX(0.6rem);
     }

     45%{
         transform:translateX(-0.45rem);
     }

     60%{
         transform:translateX(0.45rem);
     }

     75%{
         transform:translateX(-0.25rem);
     }

     90%{
         transform:translateX(0.25rem);
     }
 }

@keyframes cta-enable{
     to{
         pointer-events:auto;
     }
 }

@keyframes cta-shake-loop{
     0%{
         transform:translateX(0);
     }

     1.7%{
         transform:translateX(-0.6rem);
     }

     3.3%{
         transform:translateX(0.6rem);
     }

     5%{
         transform:translateX(-0.45rem);
     }

     6.7%{
         transform:translateX(0.45rem);
     }

     8.3%{
         transform:translateX(-0.25rem);
     }

     10%{
         transform:translateX(0.25rem);
     }

     11.1%,
     100%{
         transform:translateX(0);
     }
 }

@keyframes reveal-pulse{

     0%,
     100%{
         transform:translateX(-50%) scale(1);
         filter:drop-shadow(0 0 6px rgba(255, 180, 70, 0.35));
     }

     50%{
         transform:translateX(-50%) scale(1.03);
         filter:drop-shadow(0 0 18px rgba(255, 180, 70, 0.7));
     }
 }

@keyframes bottom-exit{
     0%{
         opacity:1;
         transform:translateY(0);
     }

     22%{
         opacity:1;
         transform:translateY(-0.7rem);
     }

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

@keyframes note-in-top{
     from{
         opacity:0;
         transform:translateY(-2rem);
     }

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

@keyframes status-in-right{
     from{
         opacity:0;
         transform:translateX(5.25rem) scale(1.65);
     }

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

@keyframes countdown-digit{
     0%{
         opacity:0;
         transform:translateX(15rem);
     }

     17%{
         opacity:1;
         transform:translateX(0);
     }

     83%{
         opacity:1;
         transform:translateX(0);
     }

     100%{
         opacity:0;
         transform:translateX(-15rem);
     }
 }

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

     to{
         opacity:1;
     }
 }

@keyframes popup-slide-in{
     from{
         transform:translate(-50%, calc(-50% + 1.5vw));
         opacity:0;
     }

     to{
         transform:translate(-50%, -50%);
         opacity:1;
     }
 }

@keyframes popup-slide-up-auth{
     from{
         opacity:0;
         transform:translateY(2.2rem) scale(0.97);
     }

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

.loader{
    position:fixed;
    inset:0;
    z-index:var(--z-overlay);
    transition:opacity 0.3s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(50% 55.69% at 50% 48.98%, rgba(29, 22, 17, 0.315) 0%, #090F17 100%);
    gap:3.25rem;
}

.loader .loader__rhombus{
      width:3.25rem;
      height:3.25rem;
      background-color:#FF8B38;
      transform:rotate(45deg);
      animation:loader-pulse 1.2s infinite ease-in-out;
      box-shadow:0 0 15px #ff49384d;
    }

.loader .loader__rhombus:nth-child(1){ animation-delay:-0.36s; }

.loader .loader__rhombus:nth-child(2){ animation-delay:-0.24s; }

.loader .loader__rhombus:nth-child(3){ animation-delay:-0.12s; }

.loader .loader__rhombus:nth-child(4){ animation-delay:0s; }

.loader::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
}

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

@media (max-width: 767px){
    .loader{
        gap:1.5rem;
    }

    .loader__rhombus{
        width:1.5rem !important;
        height:1.5rem !important;
    }
}

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-white-1:#FFFFFF;

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

    --color-black-1:#090F17;

    --color-orange-1:#FF8B38;
    --color-orange-2:#FFE1A2;

    --color-red-1:#FF4938;
    --color-red-2:#FFE5E3;
    --z-consent:10000;
    --z-logo:9000;
    --z-overlay:8000;
    --z-popup:7000;
    --z-content:1;
}

body{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    font-family:var(--font-primary);
    color:var(--color-grey-4);
    background-color:#11161D;
    background-image:url("/images/bg/bg-main-1.avif");
    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background: radial-gradient(50% 55.69% at 50% 48.98%, #ff8b3867 0%, #11161D 100%);
    opacity:1;
}

body.show::before{
    animation:bg-overlay-fade-out 2s ease-out 0.3s forwards;
}

body:has(.main-screen[data-phase="offer"]){
    background-image:url("/images/bg/bg-main-2.avif");
}

body:has(.main-screen[data-phase="offer"])::before{
    animation:bg-overlay-flash-offer 1.1s ease-out forwards;
}

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

@media (max-width: 767px){

.main{
        overflow:hidden;
}
    }

.content{
    position:relative;
    width:100%;
    height:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:0;
}

@media (max-width: 767px){

.content{
        overflow:hidden;
}
    }

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

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

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

.dk{
    display:block;
}

.mb{
    display:none;
}

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

    .mb{
        display:block;
    }
    html,
    body,
    .main,
    .content{
        overflow-x:hidden;
    }
    html,
    body{
        overscroll-behavior:none;
        touch-action:pan-x pan-y;
    }
}

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

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

[data-stage]{
    display:none;
}

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

[data-section]{
    display:none;
}

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

[data-popup]{
    display:none;
}

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

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

.text-title-main{
    font-family:var(--font-primary);
    font-size:clamp(2.5rem, 2.201vw + 1.984rem, 4.625rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    -webkit-user-select:none;
            user-select:none;
    background:radial-gradient(87.91% 285% at 50% 232%, var(--color-orange-1) 0%, var(--color-grey-4) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    user-select:none;
}

.text-status-main{
    font-family:var(--font-primary);
    font-size:clamp(1.25rem, 0.906vw + 1.038rem, 2.125rem);
    font-style:normal;
    font-weight:500;
    line-height:1.2;
    color:var(--color-grey-4);
    -webkit-user-select:none;
            user-select:none;
}

.text-status-main span{
        color:var(--color-red-1);
        -webkit-user-select:none;
                user-select:none;
    }

.text-status-main i{
        color:var(--color-orange-1);
        -webkit-user-select:none;
                user-select:none;
    }

.text-btn-1{
    font-family:var(--font-primary);
    font-size:clamp(1.5rem, 1.036vw + 1.257rem, 2.5rem);
    font-style:normal;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    color:var(--color-orange-2);
}

.text-btn-2{
    font-family:var(--font-primary);
    font-size:clamp(1.5rem, 1.036vw + 1.257rem, 2.5rem);
    font-style:normal;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    background:radial-gradient(86.94% 264.81% at 45.45% -164.81%, var(--color-red-1) 0%, var(--color-red-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-btn-mini{
    font-family:var(--font-primary);
    font-size:clamp(1.125rem, 0.259vw + 1.064rem, 1.375rem);
    font-style:normal;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    color:var(--color-orange-2);
    -webkit-user-select:none;
            user-select:none;
    pointer-events:none;
}

.text-casual{
    font-family:var(--font-primary);
    font-size:clamp(1rem, 0.259vw + 0.939rem, 1.25rem);
    font-style:normal;
    font-weight:400;
    line-height:1.4;
    color:var(--color-grey-4);
    text-shadow:0 0 2px var(--color-black-1);
    -webkit-user-select:none;
            user-select:none;
}

.text-casual span{
        color:var(--color-orange-1);
        text-shadow:0 0 2px var(--color-black-1);
        -webkit-user-select:none;
                user-select:none;
    }

.text-info{
    font-family:var(--font-primary);
    font-size:clamp(1.5rem, 0.647vw + 1.348rem, 2.125rem);
    font-style:normal;
    font-weight:700;
    line-height:1.2;
    background:radial-gradient(86.94% 264.81% at 45.45% -164.81%, var(--color-red-1) 0%, var(--color-red-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    -webkit-user-select:none;
            user-select:none;
}

.text-notifi-desc{
    font-family:var(--font-primary);
    font-size:clamp(0.75rem, 0.777vw + 0.568rem, 1.5rem);
    font-style:normal;
    font-weight:600;
    line-height:1.1;
    color:var(--color-white-1);
    -webkit-user-select:none;
            user-select:none;
}

.text-notifi-subdesc{
    font-family:var(--font-primary);
    font-size:clamp(0.625rem, 0.518vw + 0.504rem, 1.125rem);
    font-style:normal;
    font-weight:600;
    line-height:1.1;
    color:var(--color-white-1);
    -webkit-user-select:none;
            user-select:none;
}

.text-notifi-subdesc span{
        color:var(--color-red-1);
        -webkit-user-select:none;
                user-select:none;
    }

.text-popup-title{
    font-family:var(--font-primary);
    font-size:clamp(1.75rem, 1.5vw + 1.4rem, 2.375rem);
    font-style:normal;
    font-weight:700;
    line-height:1.1;
    text-transform:uppercase;
    -webkit-user-select:none;
            user-select:none;
    background:radial-gradient(86.94% 264.81% at 45.45% -164.81%, var(--color-red-1) 0%, var(--color-red-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.text-popup-desc{
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-style:normal;
    font-weight:500;
    line-height:1.3;
    color:var(--color-grey-4);
    -webkit-user-select:none;
            user-select:none;
}

.text-popup-desc span{
        color:var(--color-red-1);
    }

.text-popup-btn{
    font-family:var(--font-primary);
    font-size:1.25rem;
    font-style:normal;
    font-weight:700;
    line-height:1.2;
    text-transform:uppercase;
    color:var(--color-orange-2);
}

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

@media (max-width: 767px){

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

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

.header{
		padding:1.5rem;
}
	}

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

.header{
		padding:1.25rem;
}
	}

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

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

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

@media (max-width: 767px){

.header__logo{
		padding:0.3rem;
}
	}

.header__logo-img{
	height:3.5rem;
}

@media (max-width: 767px){

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

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

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

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

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

@media (min-width: 2560px){

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

@media (min-width: 3840px){

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

body.show .header{
	opacity:1;
}

.footer{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:5001;
    width:100%;
    flex-shrink:0;
    box-sizing:border-box;
    -webkit-user-select:none;
            user-select:none;

    display:flex;
    align-items:center;
    min-height:3.75rem;

    padding:0 clamp(1.5rem, 12.5vw, 15rem);
    padding-bottom:env(safe-area-inset-bottom, 0px);

    background-color:#090F17;
    font-family:var(--font-secondary);
    transform:translateY(100%);
    opacity:0;
}

.footer.show{
        animation:footer-rise 0.8s ease-out 4.45s forwards;
    }

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

.footer .footer__logo{
        display:flex;
        align-items:center;
        flex-shrink:0;
    }

.footer .footer__logo-img{
        height:1.75rem;
        width:auto;
    }

.footer .footer__brand{
        display:flex;
        align-items:center;
        flex-shrink:0;
    }

.footer .footer__copy{
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:1.25rem;
        line-height:1.2;
        color:var(--color-grey-2);
        font-weight:500;
        font-size:0.7rem;
    }

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

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

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

:is(:is(.footer .footer__copy) a):hover{
                color:var(--color-orange-2);
            }

.footer .footer__terms{
        display:flex;
        align-items:center;
        gap:2.25rem;
        color:var(--color-orange-1);
        font-size:1.125rem;
        font-weight:400;
    }

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

:is(:is(.footer .footer__terms) p):hover{
                color:var(--color-orange-2);
            }

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

.footer{
        padding:0 1.5rem;
        padding-bottom:env(safe-area-inset-bottom, 0px);
}
        .footer .footer__copy{
            flex-direction:column;
            align-items:flex-start;
            gap:0.1rem;
            font-size:0.6rem;
            line-height:1.2;
        }

            :is(.footer .footer__copy) > div{
                flex-direction:row;
                align-items:center;
                flex-wrap:nowrap;
                gap:0.4rem;
            }

        .footer .footer__terms{
            gap:clamp(0.9rem, 1.6vw, 1.5rem);
            font-size:0.85rem;
        }
    }

@media (max-width: 767px){

.footer{
        min-height:0;
        padding:0.55rem 1rem;
        padding-bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
        .footer .footer__logo{ display:none; }
        .footer .footer__content{
            flex-direction:row;
            align-items:flex-start;
            justify-content:space-between;
            gap:1rem;
        }

        .footer .footer__brand{
            flex-direction:column;
            align-items:flex-start;
            gap:0.4rem;
            padding-right:0;
        }
        .footer .footer__copy{
            flex-direction:column;
            align-items:flex-start;
            gap:0.25rem;
            font-size:0.45rem;
        }

            :is(.footer .footer__copy) > div{
                flex-direction:row;
                align-items:center;
                flex-wrap:nowrap;
                gap:0.35rem;
            }

            :is(.footer .footer__copy) > div:nth-child(2){
                flex-direction:column;
                align-items:flex-start;
                gap:0.1rem;
            }
        .footer .footer__terms{
            flex-direction:column;
            align-items:flex-end;
            gap:0.5rem;
            font-size:0.5rem;
        }

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

.coockie-banner{
    position:fixed;
    --banner-edge:1rem;
    --footer-h:3.75rem;
    right:var(--banner-edge);
    bottom:calc(var(--footer-h) + var(--banner-edge));
    z-index:var(--z-consent);
    box-sizing:border-box;
    width:clamp(180px, 42%, 360px);
    padding:1.1rem clamp(1.25rem, 1.5vw, 1.6rem);
    border-radius:0.625rem;
    background-color:#11161D;
    background-image:url("/images/bg/bg-main-1.avif");
    background-position:center center;
    background-size:auto;
    background-repeat:no-repeat;
    border:1px solid var(--color-orange-1);
    box-shadow:0 0 15px 1px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 150, 29, 0.12), inset 0 1px 0 rgba(255, 131, 29, 0.14);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transform:translateX(120%);
    opacity:0;
}

.coockie-banner::before{
        content:"";
        position:absolute;
        inset:0;
        border-radius:inherit;
        background:linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%);
        pointer-events:none;
        z-index:-1;
    }

@media (max-width: 767px){

.coockie-banner{
        right:0.75rem;
        left:0.75rem;
        width:auto;
        bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px));
        padding:1rem 1.1rem;
}
    }

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

.coockie-banner{
        width:clamp(320px, 62%, 560px);
        bottom:4.5rem;
}
    }

.coockie-banner.show{
    animation:coockie-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 8.5s forwards;
}

.coockie-banner__inner{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0.7rem;
}

.coockie-banner__inner h3{
        color:var(--color-orange-1);
        font-family:var(--font-primary);
        font-size:1rem;
        font-weight:700;
        line-height:1.1;
        margin-bottom:0.5rem;
        text-transform:uppercase;
        letter-spacing:0.02em;
        -webkit-user-select:none;
                user-select:none;
    }

@media (max-width: 767px){

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

.coockie-banner__text{
    font-size:0.8rem;
    color:var(--color-grey-4);
    font-family:var(--font-secondary);
    -webkit-user-select:none;
            user-select:none;
    line-height:1.5;
    display:inline;
}

@media (max-width: 767px){

.coockie-banner__text{
        font-size:0.72rem;
}
    }

.coockie-banner__link{
    color:var(--color-grey-4);
    text-decoration:underline;
    text-underline-offset:3px;
    font-weight:600;
    cursor:pointer;
    display:inline;
    transition:color 0.2s ease, text-shadow 0.2s ease;
    font-family:var(--font-secondary);
    margin-left:2px;
}

.coockie-banner__link:hover{
        color:var(--color-orange-2);
    }

.coockie-banner__btn{
    align-self:flex-end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:0.625rem;
    cursor:pointer;
    padding:0.55rem 1.55rem;
    background:linear-gradient(180deg, #FF8B38 0%, #854619 100%);
    box-shadow:0 2px 12px #ff8b383b, 0 0 20px rgba(156, 78, 255, 0);
    transition:transform 0.15s ease;
}

.coockie-banner__btn:hover{
        transform:translateY(-1px);
    }

.coockie-banner__btn:active{
        transform:translateY(1px);
    }

.coockie-banner__btn span{
        font-size:0.85rem;
        font-family:var(--font-secondary);
        font-weight:700;
        text-transform:uppercase;
        color:var(--color-orange-2);
    }

@media (max-width: 767px){

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

.popup-terms-wrap{
  position:fixed;
  inset:0;
  z-index:9995;
  background:rgba(5, 9, 12, 0.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
}

.popup-terms-wrap.show{
  display:block;
  animation:popup-fade-in 0.25s ease;
}

.popup-terms{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:9996;
  width:min(74vw, 90vw);
  max-height:80vh;
  overflow:hidden;
  background:radial-gradient(50% 55.69% at 50% 48.98%, #090F17 0%, #11161D 100%);
  border:2px solid #FF4938;
  border-radius:0.52vw;
    box-shadow:0 0 40px rgba(255, 73, 56, 0.45), 0 0 25px rgba(252, 101, 87, 0.5), inset 0 0 4px var(--color-red-1);
  cursor:default;
  display:none;
  animation:popup-slide-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.popup-terms.show{
  display:block;
}

.popup-terms::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8vw;
  background:linear-gradient(to top, #05090C 0%, rgba(5, 9, 12, 0) 100%);
  pointer-events:none;
  z-index:1;
}

.popup-terms-content{
  max-height:80vh;
  overflow-y:auto;
}

.popup-terms-close{
  position:absolute;
  top:1vw;
  right:1.6vw;
  width:2.2vw;
  height:2.2vw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff493811;
  border:1px solid #ff49387a;
  border-radius:0.26vw;
  color:rgba(255, 255, 255, 0.5);
  cursor:pointer;
  transition:background-color 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink:0;
  z-index:2;
}

.popup-terms-close svg{
  width:0.78vw;
  height:0.78vw;
}

.popup-terms-close:hover{
  background:#ff493849;
  border-color:#FF4938;
  color:var(--color-white-1);
}

.terms{
  width:100%;
  max-width:70vw;
  margin:0 auto;
  padding:3vw 3vw 5vw;
  color:var(--color-grey-1);
  font-family:var(--font-secondary);
  font-size:1.2vw;
  font-weight:400;
  line-height:1.5;
}

.terms h2{
  color:#FF8B38;
  text-align:center;
  font-family:var(--font-primary);
  font-size:2.5vw;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.terms h2:after{
  content:"";
  position:relative;
  width:20vw;
  height:1px;
  display:block;
  background:linear-gradient(90deg, transparent 0%, #FF8B38 50%, transparent 100%);
  border:none;
  margin:1rem auto 2.5rem;
}

.terms h3{
  margin:2rem 0 0.75rem;
  color:#FF8B38;
  font-family:var(--font-primary);
  font-size:1.8vw;
  font-weight:700;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.terms h4{
  margin:1.5rem 0 0.5rem;
  color:#FF8B38;
  font-family:var(--font-primary);
  font-size:1.2vw;
  font-weight:700;
  line-height:1.2;
}

.terms :is(li, p){
  margin:0.4rem 0;
}

.terms strong{
  font-weight:700;
  color:var(--color-white-1);
}

.terms ol{
  list-style-type:decimal;
  padding-left:2vw;
}

.terms ul{
  list-style-type:disc;
  padding-left:2vw;
}

@media (max-width: 767px){
  .terms{
    font-size:3.73vw;
    padding:8vw 6.4vw 10vw;
    max-width:100%;
  }

  .terms h1{
    font-size:9.6vw;
  }

  .terms h2{
    font-size:7.8vw;
  }

  .terms h3{
    font-size:4.27vw;
  }

  .popup-terms-close{
    width:5.2vw;
    height:5.2vw;
  }

  .popup-terms-close svg{
    width:2.78vw;
    height:2.78vw;
  }
}

.popup-auth{
    display:none;
    position:fixed;
    inset:0;
    z-index:var(--z-popup);
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}

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

.popup-auth__overlay{
    position:absolute;
    inset:0;
    background:rgba(9, 15, 23, 0.85);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.popup-auth__modal{
    position:relative;
    width:min(48rem, 100%);
    padding:3.5rem 3rem;
    border-radius:0.625rem;
    border:1px solid var(--color-red-1);
    background-color:#11161D;
    background-image:linear-gradient(90deg, var(--color-black-1) 0%, var(--color-black-1) 35%, var(--color-red-1) 140%);
    box-shadow:0 0 120px rgba(255, 73, 56, 0.25), 0 0 70px rgba(255, 73, 56, 0.3), 0 0 30px rgba(255, 73, 56, 0.4);
    overflow:hidden;
    animation:popup-slide-up-auth 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.popup-auth__modal::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background-image:url("/images/bg/bg-popup.avif");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0.035;
    filter:grayscale(1);
}

.popup-auth__close{
    position:absolute;
    top:0.85rem;
    right:1.25rem;
    z-index:2;
    color:var(--color-grey-4);
    font-size:1.125rem;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    transition:color 0.2s ease;
}

.popup-auth__close:hover{
    color:var(--color-orange-2);
}

.popup-auth__content{
    position:relative;
}

.popup-auth__info{
    position:relative;
    z-index:1;
}

.popup-auth__title{
    margin-bottom:1.25rem;
    max-width:20rem;
}

.popup-auth__desc{
    margin-bottom:1.5rem;
    max-width:12rem;
}

.popup-auth__btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    padding:0.65rem 1.85rem;
    cursor:pointer;
    transition:box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
    animation:cta-glow-pulse 1.1s ease infinite;
    will-change:box-shadow;
}

.popup-auth__btn:hover{
    background-image:none;
    background-color:var(--color-orange-1);
    border:1px solid var(--color-orange-2);
    box-shadow:0 0 2px 0 #FF8B38 inset, 0 0 30px 0 rgba(255, 139, 56, 0.50), 0 0 20px 0 rgba(255, 139, 56, 0.80), 0 0 10px 0 #FF8B38;
}

.popup-auth__btn:hover .text-popup-btn{
    color:var(--color-white-1);
}

.popup-auth__steam-icon{
    width:3.1rem;
    height:3.1rem;
    object-fit:contain;
}

.popup-auth__case{
    position:absolute;
    right:-4.2rem;
    bottom:-7rem;
    width:33rem;
    max-width:85%;
    opacity:0.9;
    pointer-events:none;
    transform:scaleX(-1);
    filter:drop-shadow(0 0 20px rgba(255, 180, 70, 0.4)) drop-shadow(0 0 40px rgba(255, 139, 56, 0.25));
}

.popup-auth__case-art,
.popup-auth__case-shadow{
    display:block;
    width:100%;
    height:auto;
}

.popup-auth__case-shadow{
    position:absolute;
    inset:0;
    z-index:0;
}

.popup-auth__case-art{
    position:relative;
    z-index:1;
}

@media (max-width: 767px){
    .popup-auth__modal{
        padding:2.5rem 1.75rem;
    }

    .popup-auth__close{
        font-size:1rem;
        top:0.7rem;
        right:0.7rem;
    }

    .popup-auth__case{
        right:-9.5rem;
        bottom:0.5rem;
        max-width:100%;
    }

    .popup-auth__info{
        max-width:none;
    }

    .popup-auth__btn{
        width:100%;
        padding:clamp(0.2rem, 1.9vh, 0.4rem) 1rem;
    }

    .popup-auth__btn .text-popup-btn{
        font-size:clamp(0.65rem, 5.2vw, 1rem);
    }
}

.popup-email-push-wrap{
    display:none;
    position:fixed;
    inset:0;
    z-index:var(--z-popup);
    background:rgba(9, 15, 23, 0.85);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.popup-email-push-wrap.show{
    display:block;
}

.popup-sub{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    z-index:calc(var(--z-popup) + 1);
    width:min(28rem, 90vw);
    padding:3rem 2.5rem;
    border-radius:0.625rem;
    border:1px solid var(--color-red-1);
    background-color:#11161D;
    background-image:linear-gradient(90deg, var(--color-black-1) 0%, var(--color-black-1) 35%, var(--color-red-1) 140%);
    box-shadow:0 0 120px rgba(255, 73, 56, 0.25), 0 0 70px rgba(255, 73, 56, 0.3), 0 0 30px rgba(255, 73, 56, 0.4);
    overflow:hidden;
    text-align:center;
}

.popup-sub::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background-image:url("/images/bg/bg-popup.avif");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0.03;
    filter:grayscale(1);
}

.popup-sub.show{
    display:flex;
    flex-direction:column;
    align-items:center;
    animation:popup-slide-up-center 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.popup-sub__close{
    position:absolute;
    top:1.25rem;
    right:1.5rem;
    z-index:2;
    color:var(--color-grey-4);
    font-size:1.125rem;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    background:none;
    border:none;
    padding:0;
    transition:color 0.2s ease;
}

.popup-sub__close:hover{
    color:var(--color-orange-1);
}

.popup-sub__content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.popup-sub__icon{
    width:5.5rem;
    height:5.5rem;
    margin-bottom:1rem;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(255, 139, 56, 0.5));
}

.popup-sub__title{
    font-family:var(--font-primary);
    font-size:1.75rem;
    font-weight:700;
    line-height:1.1;
    text-transform:uppercase;
    margin-bottom:0.75rem;
    -webkit-user-select:none;
            user-select:none;
    background:radial-gradient(86.94% 264.81% at 45.45% -164.81%, var(--color-red-1) 0%, var(--color-red-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.popup-sub__text{
    font-family:var(--font-primary);
    font-size:1rem;
    font-weight:500;
    line-height:1.4;
    color:var(--color-grey-4);
    margin-bottom:1.75rem;
}

.popup-sub__text span{
    color:var(--color-red-1);
}

.popup-sub__text--sent{
    display:none;
}

.popup-sub--mail.sent .popup-sub__text--form,
.popup-sub--mail.sent .popup-sub__form{
    display:none;
}

.popup-sub--mail.sent .popup-sub__text--sent{
    display:block;
}

.popup-sub__form{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    width:100%;
}

.popup-sub__input{
    width:100%;
    box-sizing:border-box;
    padding:0.9375rem 1.25rem;
    border-radius:0.625rem;
    border:1px solid rgba(255, 139, 56, 0.4);
    background-color:rgba(9, 15, 23, 0.6);
    font-family:var(--font-primary);
    font-size:1rem;
    color:var(--color-white-1);
    transition:border-color 0.2s ease;
}

.popup-sub__input::placeholder{
    color:var(--color-grey-4);
}

.popup-sub__input:focus{
    outline:none;
    border-color:var(--color-orange-1);
}

.popup-sub__form.is-invalid .popup-sub__submit{
    opacity:0.5;
    pointer-events:none;
}

.popup-sub__submit{
    position:relative;
    overflow:visible;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:0.9375rem 2rem;
    border-radius:0.625rem;
    border:1px solid var(--color-orange-1);
    background-color:#844d28;
    background-image:url("/images/bg/bg-btn-brown.avif");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    cursor:pointer;
    transition:box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.popup-sub__submit span{
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:700;
    text-transform:uppercase;
    color:var(--color-orange-2);
    transition:color 0.25s ease;
}

.popup-sub__submit:hover{
    background-image:none;
    background-color:var(--color-orange-1);
    border-color:var(--color-orange-2);
    box-shadow:0 0 2px 0 #FF8B38 inset, 0 0 20px 0 rgba(255, 139, 56, 0.5), 0 0 10px 0 #FF8B38;
}

.popup-sub__submit:hover span{
    color:var(--color-white-1);
}

@media (max-width: 767px){
    .popup-sub{
        padding:2.5rem 1.5rem;
    }
}

.main-screen{
    position:relative;
    box-sizing:border-box;
    width:100%;
    height:100%;
    overflow:hidden;
}

.main-screen.show{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:clamp(2.5rem, 6vh, 4.5rem) clamp(1.5rem, 3vw, 4rem) 3.75rem;
}

.game-panel{
    position:relative;
    box-sizing:border-box;
    border:1px solid var(--panel-accent);
    border-radius:0.625rem;
    background-color:var(--panel-mid);
    background-image:var(--panel-texture);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
}

.game-panel--orange{
    --panel-accent:var(--color-orange-1);
    --panel-mid:#844d28;
    --panel-texture:url("/images/bg/bg-btn-brown.avif");
}

.game-panel--red{
    --panel-accent:var(--color-red-1);
    --panel-mid:#842c28;
    --panel-texture:url("/images/bg/bg-btn-red.avif");
}

.main-screen__badges{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    margin-bottom:clamp(0.75rem, 1.4vh, 1.875rem);
}

.main-badge{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
}

.main-badge__icon{
    width:2.25rem;
    height:2.25rem;
    object-fit:contain;
}

.main-badge__text{
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:400;
    line-height:1.4;
    white-space:nowrap;
    -webkit-user-select:none;
            user-select:none;
    background:radial-gradient(110% 400% at 0% 50%,
            var(--color-orange-1) 0%,
            var(--color-grey-4) 60%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.main-screen__title{
    text-align:center;
    margin-bottom:clamp(1rem, 1vh, 1.5rem);
}

.main-screen__title--offer{
    display:none;
}

.main-screen[data-phase="offer"] .main-screen__title--intro{
    display:none;
}

.main-screen[data-phase="offer"] .main-screen__title--offer{
    display:block;
    transform-origin:center;
    animation:status-in-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

.main-screen__hero{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:clamp(5rem, 11vh, 8.5rem);
}

.main-screen__statusbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(2.5rem, 1.5vw, 3.5rem);
}

.game-timer{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0.3rem;
    padding:0.85rem 2.125rem;
    border-radius:0.875rem;
    box-shadow:0 0 40px rgba(255, 73, 56, 0.55), 0 0 25px rgba(252, 101, 87, 0.6), inset 0 0 4px var(--color-red-1);
}

.game-timer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg,
            rgba(9, 15, 23, 0.85) 0%,
            rgba(9, 15, 23, 0.55) 40%,
            rgba(253, 88, 67, 0.315) 100%);
}

.game-timer > *{
    position:relative;
    z-index:1;
}

.game-timer__label{
    white-space:nowrap;
    color:var(--color-red-2);
    animation:popup-fade-in 0.5s forwards 1s;
}

.game-timer__value{
    font-family:var(--font-primary);
    font-size:clamp(2rem, 1.2vw + 1.7rem, 3rem);
    font-weight:500;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    -webkit-user-select:none;
            user-select:none;
    background:radial-gradient(51.97% 188.24% at 45.45% 157.35%, var(--color-red-1) 10%, var(--color-red-2) 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.main-status{
    width:290px;
    text-align:left;
}

.main-screen__cases{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0.3125rem;
    margin-bottom:clamp(2.5rem, 7vh, 5.5rem);
}

.case{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.1rem;
    width:clamp(17rem, 28vw, 32rem);
}

.case__label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.7rem 0.95rem;
    border:1px solid var(--color-orange-1);
    border-radius:0.625rem;
    background:radial-gradient(128.74% 176.83% at 50% -25.61%, var(--color-orange-1) 0%, #090F17 100%);
    font-family:var(--font-primary);
    font-size:1.125rem;
    font-weight:400;
    line-height:1.4;
    white-space:nowrap;
    color:var(--color-orange-2);
    -webkit-user-select:none;
            user-select:none;
    margin-left:1.5rem;
    transition:opacity 0.4s ease;
}

.case__stage{
    position:relative;
    width:100%;
}

.case__stage::after{
    content:"";
    position:absolute;
    left:46%;
    bottom:9%;
    transform:translateX(-50%) rotate(-12deg);
    width:100%;
    height:44%;
    z-index:0;
    opacity:0.3;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%,
            rgba(238, 170, 43, 0.6) 0%,
            rgba(190, 111, 38, 0.15) 45%,
            rgba(255, 139, 56, 0) 75%);
    filter:blur(7px);
    animation:case-glow-pulse 4.5s ease-in-out infinite;
    -webkit-user-select:none;
            user-select:none;
}

.case__shadow{
    position:absolute;
    bottom:-10px;
    left:-1.5%;
    width:100%;
    height:auto;
    z-index:0;
    pointer-events:none;
}

.case__art{
    display:block;
    width:100%;
    height:auto;
}

.case__art--closed{
    position:relative;
    z-index:1;
    transform:scale(1) translateY(0) rotate(0deg);
    filter:contrast(100%) brightness(100%) saturate(1);
    animation:case-saturate-pulse 4.5s ease-in-out infinite;
    will-change:transform, filter;
}

.case__art--opened{
    position:absolute;
    left:50%;
    bottom:-1.9rem;
    transform:translateX(-50%);
    width:100%;
    z-index:2;
    opacity:0;
    pointer-events:none;
}

.main-cta,
.claim-reward-btn{
    position:relative;
    overflow:visible;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1.25rem 3.75rem;
    border-radius:0.625rem;
    pointer-events:none;
    transition:box-shadow 0.25s ease, transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.main-cta::after,
.claim-reward-btn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    animation:cta-glow-pulse 2.8s ease-in-out infinite;
    transition:opacity 0.25s ease;
    will-change:box-shadow;
}

.main-cta .text-btn-1,
.claim-reward-btn .text-btn-1{
    transition:color 0.25s ease, -webkit-text-fill-color 0.25s ease;
}

.main-cta:hover,
.claim-reward-btn:hover{
    background-image:none;
    background-color:var(--color-orange-1);
    border:1px solid var(--color-orange-2);
    border-radius:0.625rem;
    box-shadow:0 0 2px 0 #FF8B38 inset, 0 0 30px 0 rgba(255, 139, 56, 0.50), 0 0 20px 0 rgba(255, 139, 56, 0.80), 0 0 10px 0 #FF8B38;
}

.main-cta:hover::after,
.claim-reward-btn:hover::after{
    opacity:0;
}

.main-cta:hover .text-btn-1,
.claim-reward-btn:hover .text-btn-1{
    color:var(--color-white-1);
    -webkit-text-fill-color:var(--color-white-1);
}

.main-cta:active,
.claim-reward-btn:active{
    transform:translateY(2px);
}

.main-screen__hint{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    margin-top:clamp(0.75rem, 1.4vh, 1.25rem);
}

.main-hint__icon{
    width:2.25rem;
    height:2.25rem;
    object-fit:contain;
}

.main-hint__text{
    text-shadow:none;
}

.main-screen.show .main-screen__hero{
    animation:intro-hero-settle 0.75s cubic-bezier(0.22, 1, 0.36, 1) 4.5s backwards;
}

.main-screen.show .main-screen__title{
    animation:intro-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.main-screen.show .game-timer{
    animation:intro-slide-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards, intro-shake 0.55s ease 2.2s;
}

.main-screen .game-timer.is-urgent{
    animation:cta-shake-loop 4.5s ease-in-out infinite, timer-glow-pulse 2.6s ease-in-out infinite;
}

.main-screen.show .main-status--intro{
    animation:intro-slide-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.45s backwards;
}

.main-screen.show .main-screen__badges{
    animation:intro-badges-drop 0.6s ease 4.5s backwards;
}

.main-screen.show .case{
    animation:intro-case-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.main-screen.show .case[data-case="1"]{ animation-delay:5.2s; }

.main-screen.show .case[data-case="2"]{ animation-delay:5.45s; }

.main-screen.show .case[data-case="3"]{ animation-delay:5.7s; }

.main-screen.show .case__label{
    animation:intro-label-in 0.35s ease 6.2s backwards;
}

.main-screen.show .main-cta{
    animation:intro-rise-in 0.55s ease 6.7s backwards, cta-enable 0.01s linear 7.25s forwards, cta-shake-loop 4.5s ease-in-out 7.35s infinite;
}

.main-screen.show .main-screen__hint{
    animation:intro-rise-in 0.55s ease 6.8s backwards;
}

.main-screen__bottom{
    display:grid;
    grid-template-areas:"slot";
    place-items:start center;
}

.main-cta-group,
.main-reveal-note{
    grid-area:slot;
}

.main-cta-group{
    display:flex;
    flex-direction:column;
    align-items:center;
    opacity:0;
    pointer-events:none;
}

.main-screen[data-phase="intro"] .main-cta-group{
    opacity:1;
}

.main-screen[data-phase="reveal"] .main-cta-group{
    animation:bottom-exit 0.55s ease forwards;
}

.main-screen:not([data-phase="intro"]) .main-cta,
.main-screen:not([data-phase="intro"]) .main-cta::after{
    animation:none;
}

.main-status{ display:none; }

.main-screen[data-phase="intro"] .main-status--intro{ display:block; }

.main-screen[data-phase="reveal"] .main-status--reveal{
    display:block;
    transform-origin:left center;
    animation:status-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s backwards;
}

.main-reveal-note{
    align-items:center;
    justify-content:center;
    padding:1.25rem 3.75rem;
    border-color:rgba(255, 73, 56, 0.4);
    opacity:0;
    pointer-events:none;
}

.main-reveal-note__text{
    white-space:nowrap;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .main-reveal-note:not(.main-pick-note){
    opacity:1;
    animation:note-in-top 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s backwards;
}

.main-screen[data-phase="reveal"][data-reveal="closed"] .main-reveal-note:not(.main-pick-note){
    animation:bottom-exit 0.35s ease forwards;
}

.main-screen:not([data-phase="intro"]) .case__label{
    opacity:0;
    pointer-events:none;
}

.case{
    transition:filter 0.5s ease, transform 0.6s ease;
}

.case__art--closed,
.case__art--opened{
    transition:opacity 0.7s ease;
}

.case__stage::after{
    transition:opacity 0.5s ease;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case__stage::after{
    animation:none;
    opacity:0;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case__art--closed{
    animation:none;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case[data-case="2"]{
    transform:scale(1.05);
    transform-origin:bottom center;
    z-index:2;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case[data-case="2"] .case__art--closed{
    opacity:0;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case[data-case="2"] .case__art--opened{
    opacity:1;
    animation:reveal-pulse 1.6s ease-in-out infinite;
    will-change:transform, filter;
}

.main-screen[data-phase="reveal"][data-reveal="open"] .case[data-case="1"],
.main-screen[data-phase="reveal"][data-reveal="open"] .case[data-case="3"]{
    filter:brightness(0.4) saturate(0.85);
}

.main-screen.is-shuffling .case{
    transition:none;
}

.main-screen.is-shuffling .case__art--closed,
.main-screen.is-shuffling .case__stage::after{
    animation:none;
}

.main-countdown{
    grid-area:slot;
    display:grid;
    grid-template-areas:"digit";
    place-items:center;
    pointer-events:none;
}

.main-countdown__digit{
    border-radius:50% !important;
    grid-area:digit;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:7rem;
    padding:1.25rem 1rem;
    border-color:rgba(255, 73, 56, 0.4);
    opacity:0;
    box-shadow:0 0 40px rgba(255, 73, 56, 0.55), 0 0 25px rgba(252, 101, 87, 0.6), inset 0 0 4px var(--color-red-1);
}

.main-countdown__digit span{
        font-size:3.5rem;
        font-variant-numeric:tabular-nums;
    }

.main-screen[data-phase="shuffle"] .main-status--shuffle{
    display:block;
    transform-origin:left center;
    animation:status-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.main-screen[data-phase="pick"] .main-status--pick{
    display:block;
    transform-origin:left center;
    animation:status-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
}

.main-status--offer{
    position:absolute;
    left:50%;
    top:50%;
    width:max-content;
    max-width:90vw;
    text-align:center;
}

.main-screen[data-phase="offer"] .main-status--offer{
    display:block;
    animation:status-in-center 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.main-screen[data-phase="shuffle"] .main-countdown__digit[data-count="3"]{
    animation:countdown-digit 2s ease 0.1s backwards;
}

.main-screen[data-phase="shuffle"] .main-countdown__digit[data-count="2"]{
    animation:countdown-digit 2s ease 1.7s backwards;
}

.main-screen[data-phase="shuffle"] .main-countdown__digit[data-count="1"]{
    animation:countdown-digit 2s ease 3.3s backwards;
}

.main-screen[data-phase="shuffle"] .main-countdown__digit[data-count="0"]{
    opacity:0 !important;
    animation:countdown-digit 2s ease 4.9s backwards;
}

.main-screen[data-phase="pick"] .case__label{
    opacity:1;
    animation:intro-label-in 0.35s ease 0.4s backwards;
}

.case__pick-btn{
    z-index:5;
    position:absolute;
    left:50%;
    top:105%;
    width:90%;
    max-width:17.75rem;
    overflow:visible;
    padding:1rem 2rem;
    opacity:0;
    pointer-events:none;
    transition:box-shadow 0.25s ease, border-color 0.25s ease;
}

.case__pick-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    pointer-events:none;
    background-color:var(--color-orange-1);
    opacity:0;
    transition:opacity 0.25s ease;
}

.case__pick-btn:hover::before{
    opacity:1;
}

.main-screen[data-phase="pick"] .case__pick-btn{
    opacity:1;
    pointer-events:auto;
    animation:pick-btn-rise-in 0.5s ease 0.7s both;
}

.case__pick-btn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    animation:cta-glow-pulse 2.8s ease-in-out infinite;
    transition:opacity 0.25s ease;
    will-change:box-shadow;
}

.case[data-case="1"] .case__pick-btn::after{ animation-delay:0s; }

.case[data-case="2"] .case__pick-btn::after{ animation-delay:-0.9s; }

.case[data-case="3"] .case__pick-btn::after{ animation-delay:-1.8s; }

.case__pick-btn:hover{
    border:1px solid var(--color-orange-2);
    border-radius:0.625rem;
    box-shadow:0 0 2px 0 #FF8B38 inset, 0 0 30px 0 rgba(255, 139, 56, 0.50), 0 0 20px 0 rgba(255, 139, 56, 0.80), 0 0 10px 0 #FF8B38;
}

.case__pick-btn:hover .text-btn-mini{
    color:var(--color-white-1);
    -webkit-text-fill-color:var(--color-white-1);
}

.case__pick-btn:hover::after{
    opacity:0;
}

.main-screen[data-phase="pick"] .case:has(.case__pick-btn:hover) .case__stage{
    animation:case-hover-shake 0.4s ease;
}

.main-screen[data-phase="pick"] .main-screen__cases:has(.case__pick-btn:hover) .case:not(:has(.case__pick-btn:hover)){
    filter:brightness(0.32) saturate(0.8);
}

.main-screen[data-phase="pick"] .main-pick-note{
    margin-top:2.5rem;
    opacity:1;
    animation:note-in-top 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards;
}

.main-screen[data-phase="offer"]::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:46vh;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(75% 100% at 50% 0%, rgba(255, 139, 56, 0.28) 0%, rgba(255, 139, 56, 0) 75%);
    animation:offer-top-glow-pulse 3.5s ease-in-out infinite;
}

.main-screen[data-phase="offer"] .game-timer{
    visibility:hidden;
}

.main-screen[data-phase="offer"] .main-screen__badges{
    opacity:0;
    pointer-events:none;
}

.main-screen[data-phase="offer"] .case__stage::after{
    animation:none;
    opacity:0;
}

.main-screen[data-phase="offer"] .case__art--closed{
    animation:none;
}

.main-screen[data-phase="offer"] .case--picked{
    transform:scale(1.05);
    transform-origin:bottom center;
    z-index:2;
}

.main-screen[data-phase="offer"] .case--picked .case__art--closed{
    opacity:0;
}

.main-screen[data-phase="offer"] .case--picked .case__art--opened{
    opacity:1;
    width:110%;
    max-width:110%;
    animation:reveal-pulse 1.6s ease-in-out infinite;
    will-change:transform, filter;
}

.main-screen[data-phase="offer"] .case:not(.case--picked){
    filter:brightness(0.4) saturate(0.85);
}

.claim-reward-btn{
    grid-area:slot;
    opacity:0;
    pointer-events:none;
}

.main-screen[data-phase="offer"] .claim-reward-btn{
    opacity:1;
    pointer-events:auto;
    animation:intro-rise-in 0.55s ease 0.9s backwards, cta-enable 0.01s linear 1.45s forwards, cta-shake-loop 4.5s ease-in-out 1.55s infinite;
}

.main-screen:not([data-phase="offer"]) .claim-reward-btn,
.main-screen:not([data-phase="offer"]) .claim-reward-btn::after{
    animation:none;
}

@media (max-width: 767px){
    .main-screen.show{
        justify-content:space-between;
        gap:clamp(0.4rem, 1.2vh, 0.9rem);
        padding:clamp(1rem, 2.5vh, 1.5rem) 1.25rem clamp(4rem, 9vh, 4.5rem);
    }
    .main-screen__badges{
        gap:clamp(0.9rem, 4vw, 1.25rem);
        margin-bottom:0;
    }

    .main-badge__icon{
        width:clamp(1.6rem, 7vw, 2rem);
        height:clamp(1.6rem, 7vw, 2rem);
    }

    .main-badge__text{
        font-size:clamp(0.85rem, 3.7vw, 1rem);
    }
    .main-screen__hero{
        width:100%;
        gap:clamp(0.6rem, 2vh, 1rem);
        margin-bottom:0;
    }

    .main-screen__title{
        font-size:clamp(2rem, 9vw, 2.75rem);
        line-height:1.05;
        margin-bottom:0;
    }

    .main-screen__statusbar{
        margin-left:2.25rem;
        width:100%;
        gap:clamp(0.75rem, 4vw, 1.25rem);
    }

    .game-timer{
        gap:0.15rem;
        padding:clamp(0.3rem, 1vh, 0.5rem) clamp(0.9rem, 4vw, 1.3rem);
        border-radius:0.75rem;
    }

    .game-timer__label{
        font-size:clamp(0.6rem, 2.6vw, 0.75rem);
    }

    .game-timer__value{
        font-size:clamp(1.5rem, 7vw, 2rem);
    }

    .main-status{
        width:clamp(8.5rem, 40vw, 12rem);
        font-size:clamp(1rem, 4.6vw, 1.25rem);
    }

    .main-status--offer{
        width:100%;
        max-width:90vw;
        font-size:clamp(1rem, 4.6vw, 1.25rem);
    }
    .main-screen__cases{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:clamp(0.15rem, 0.6vh, 0.5rem);
        margin-top:clamp(0.4rem, 1.2vh, 0.75rem);
        margin-bottom:0;
        width:100%;
    }

    .case{
        align-items:stretch;
        gap:0;
        width:min(62vw, calc((100dvh - 22.2rem - 12vw) / 1.37), 30rem);
    }

    .case__art--opened{
        margin-left:10px;
    }

    .case__label{
        position:absolute;
        top:clamp(0.15rem, 0.8vw, 0.4rem);
        left:clamp(-1rem, 0.75vw, -1.5rem);
        z-index:3;
        margin-left:0;
        padding:clamp(0.22rem, 1vw, 0.38rem) clamp(0.4rem, 1.8vw, 0.6rem);
        font-size:clamp(0.65rem, 2.8vw, 0.78rem);
    }
    .main-screen__bottom{
        width:100%;
        margin-top:clamp(0.4rem, 1.2vh, 0.75rem);
    }

    .main-cta-group{
        width:100%;
    }

    .main-cta{
        width:min(84%, 22rem);
        padding:clamp(0.7rem, 1.9vh, 1rem) 1rem;
    }

    .main-cta .text-btn-1{
        font-size:clamp(1.1rem, 5.2vw, 1.35rem);
    }

    .main-screen__hint{
        margin-top:clamp(0.4rem, 1.4vh, 0.75rem);
        gap:0.5rem;
    }

    .main-hint__icon{
        width:clamp(1.6rem, 7vw, 2rem);
        height:clamp(1.6rem, 7vw, 2rem);
    }

    .main-hint__text{
        font-size:clamp(0.8rem, 3.6vw, 1rem);
    }
    .main-reveal-note{
        width:min(84%, 22rem);
        padding:clamp(0.7rem, 1.9vh, 1rem) 1rem;
        text-align:center;
    }

    .main-reveal-note__text{
        white-space:normal;
        text-align:center;
        font-size:clamp(1.1rem, 5vw, 1.35rem);
    }
    .main-countdown__digit{
        min-width:0;
        width:clamp(4.5rem, 20vw, 6rem);
        height:clamp(4.5rem, 20vw, 6rem);
        padding:0;
    }

    .main-countdown__digit span{
        font-size:clamp(2.25rem, 11vw, 3rem);
    }
    .main-pick-note .main-reveal-note__text{
        font-size:clamp(0.85rem, 4vw, 1.1rem);
    }
    .main-pick-note__nl::before{
        content:"\A";
        white-space:pre;
    }
    .main-screen[data-phase="pick"] .main-pick-note{
        margin-top:clamp(0.25rem, 1.2vh, 0.6rem);
    }
    .case__pick-btn{
        left:auto;
        top:auto;
        right:-3.5rem;
        bottom:15px;
        width:auto;
        max-width:none;
        padding:clamp(0.5rem, 2.2vw, 0.7rem) clamp(0.9rem, 4vw, 1.4rem);
    }

    .case__pick-btn .text-btn-mini{
        font-size:clamp(0.8rem, 3.6vw, 1rem);
    }

    .claim-reward-btn{
        width:min(75%, 15rem);
        padding:clamp(0.7rem, 1.9vh, 1rem) 1rem;
    }

    .claim-reward-btn .text-btn-1{
        font-size:clamp(1.1rem, 5.2vw, 1.35rem);
    }
    .main-screen[data-phase="pick"] .case__pick-btn{
        animation:intro-rise-in 0.5s ease 0.7s both;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .main-screen.show{
        padding-top:clamp(1.5rem, 4vh, 3rem);
    }

    .main-screen__hero{
        margin-bottom:clamp(2rem, 6vh, 5rem);
        --intro-hero-scale:1.08;
    }
    .main-screen__title{
        --intro-title-scale:1.08;
    }
    .main-screen__cases{
        margin-top:clamp(1.5rem, 4vh, 3rem);
        margin-bottom:clamp(1.25rem, 4vh, 3.5rem);
    }

    .case{
        width:clamp(13.5rem, 25vw, 18rem);
    }
    .case__label{
        padding:0.55rem 0.85rem;
        font-size:0.95rem;
    }
    .case__pick-btn{
        max-width:15.5rem;
        padding:0.85rem 1.75rem;
    }

    .case__pick-btn .text-btn-mini{
        font-size:1.05rem;
    }
}

@media (min-width: 1024px) and (max-width: 1919px){
    .main-screen.show{
        padding-top:clamp(1.25rem, 4vh, 3rem);
    }
    .main-screen__hero{
        margin-bottom:clamp(1.5rem, 5vh, 4rem);
    }

    .main-screen__cases{
        margin-top:clamp(1.25rem, 1.2vh, 2rem);
        margin-bottom:clamp(1rem, 3.5vh, 3rem);
    }
    .main-screen__title{
        font-size:clamp(2.2rem, 2vw + 1.6rem, 4rem);
    }

    .case{
        width:clamp(13rem, 24vw, 30rem);
    }
    .case__label{
        padding:0.5rem 0.8rem;
        font-size:clamp(0.9rem, 0.4vw + 0.72rem, 1.05rem);
    }
    .game-timer{
        gap:0.2rem;
        padding:0.65rem 1.6rem;
        border-radius:0.75rem;
    }

    .game-timer__value{
        font-size:clamp(1.6rem, 1vw + 1.35rem, 2.5rem);
    }

    .game-timer__label{
        font-size:clamp(0.85rem, 0.2vw + 0.72rem, 1.05rem);
    }
    .main-cta,
    .claim-reward-btn,
    .main-reveal-note{
        padding:0.95rem 2.75rem;
    }

    .main-cta .text-btn-1,
    .claim-reward-btn .text-btn-1{
        font-size:clamp(1.3rem, 0.85vw + 1.1rem, 2.1rem);
    }

    .main-reveal-note__text{
        font-size:clamp(1.25rem, 0.65vw + 1.05rem, 1.85rem);
    }

    .main-hint__icon{
        width:1.85rem;
        height:1.85rem;
    }

    .main-hint__text{
        font-size:clamp(0.85rem, 0.2vw + 0.72rem, 1.05rem);
    }
    .main-countdown__digit{
        min-width:5.75rem;
        padding:1rem 0.85rem;
    }

    .main-countdown__digit span{
        font-size:2.9rem;
    }
    .case__pick-btn{
        max-width:15rem;
        padding:0.8rem 1.7rem;
    }

    .case__pick-btn .text-btn-mini{
        font-size:clamp(1rem, 0.2vw + 0.88rem, 1.2rem);
    }
    
    .main-screen[data-phase="pick"] .main-pick-note{
        margin-top:3rem;
    }
}

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

body:has(.activate-screen.claimed)::before{
    animation:bg-overlay-flash-offer 1.1s ease-out forwards;
}

.activate-screen{
    position:relative;
    box-sizing:border-box;
    width:100%;
    height:100%;
    overflow:hidden;
}

.activate-screen.show{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(2rem, 5vh, 4rem);
    padding:clamp(2rem, 5vh, 4rem) clamp(1.5rem, 3vw, 4rem) 3.75rem;
}

.activate-screen::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:46vh;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(75% 100% at 50% 0%, rgba(255, 73, 56, 0.28) 0%, rgba(255, 73, 56, 0) 75%);
    animation:offer-top-glow-pulse 3.5s ease-in-out infinite;
}

.activate-screen__row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(1.25rem, 2.5vw, 2.5rem);
    flex-wrap:wrap;
}

.activate-case{
    position:relative;
    flex-shrink:0;
    width:clamp(22rem, 36vw, 38rem);
    animation:intro-case-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}

.activate-case__shadow{
    position:absolute;
    inset:0;
    z-index:0;
    width:96%;
    height:auto;
    pointer-events:none;
}

.activate-case__art{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    animation:activate-case-blink 3.5s ease-in-out infinite, activate-case-scale-pulse 3.5s ease-in-out infinite;
    will-change:filter, transform;
}

.activate-screen__right{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:49rem;
    max-width:100%;
}

.activate-screen__content{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    text-align:left;
}

.activate-screen__title{
    text-align:left;
    margin-bottom:clamp(1rem, 2vh, 1.5rem);
    animation:intro-rise-in 0.55s ease 0.3s backwards;
}

.activate-screen__title--saved{
    display:none;
}

.activate-screen.claimed .activate-screen__title--granted{
    display:none;
}

.activate-screen.claimed .activate-screen__title--saved{
    display:block;
    animation:status-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.activate-screen__desc{
    text-align:left;
    margin-bottom:clamp(1.5rem, 3vh, 2.25rem);
    animation:intro-rise-in 0.55s ease 0.45s backwards;
}

.activate-screen.claimed .activate-screen__desc{
    display:none;
}

.activate-screen__redirect{
    display:none;
    position:absolute;
    top:2.35rem;
    right:0;
    align-items:center;
    font-family:var(--font-primary);
    font-size:clamp(1.25rem, 1vw + 1rem, 2rem);
    font-weight:500;
    line-height:1.2;
    color:var(--color-orange-1);
    -webkit-user-select:none;
            user-select:none;
}

.activate-screen.claimed .activate-screen__redirect{
    display:flex;
    animation:status-in-right 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.activate-screen__dots{
    display:inline-block;
    white-space:nowrap;
}

.activate-screen__dot{
    opacity:0;
}

.activate-screen__dot:nth-child(1){
    animation:activate-dot-1 1.6s linear infinite;
}

.activate-screen__dot:nth-child(2){
    animation:activate-dot-2 1.6s linear infinite;
}

.activate-screen__dot:nth-child(3){
    animation:activate-dot-3 1.6s linear infinite;
}

.activate-screen__actions{
    animation:intro-rise-in 0.55s ease 0.6s backwards;
}

.activate-screen.claimed .activate-screen__actions{
    display:none;
}

.activate-claim-btn,
.activate-screen__proceed{
    position:relative;
    overflow:visible;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1.25rem 3.75rem;
    border-radius:0.625rem;
    transition:box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    animation:cta-shake-loop 4.5s ease-in-out 1s infinite;
}

.activate-claim-btn::after,
.activate-screen__proceed::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    animation:cta-glow-pulse 2.8s ease-in-out infinite;
    transition:opacity 0.25s ease;
    will-change:box-shadow;
}

.activate-claim-btn .text-btn-1,
.activate-screen__proceed .text-btn-1{
    transition:color 0.25s ease, -webkit-text-fill-color 0.25s ease;
}

.activate-claim-btn:hover,
.activate-screen__proceed:hover{
    background-image:none;
    background-color:var(--color-orange-1);
    border:1px solid var(--color-orange-2);
    box-shadow:0 0 2px 0 #FF8B38 inset, 0 0 30px 0 rgba(255, 139, 56, 0.50), 0 0 20px 0 rgba(255, 139, 56, 0.80), 0 0 10px 0 #FF8B38;
}

.activate-claim-btn:hover::after,
.activate-screen__proceed:hover::after{
    opacity:0;
}

.activate-claim-btn:hover .text-btn-1,
.activate-screen__proceed:hover .text-btn-1{
    color:var(--color-white-1);
    -webkit-text-fill-color:var(--color-white-1);
}

.activate-claim-btn:active,
.activate-screen__proceed:active{
    transform:translateY(2px);
}

.activate-screen__proceed{
    width:100%;
    padding:1.375rem 2rem;
}

.activate-screen__subs{
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:1.25rem;
    width:100%;
}

.activate-screen.claimed .activate-screen__subs{
    display:flex;
    animation:intro-rise-in 0.55s ease 0.15s backwards;
}

.activate-subs-cards{
    display:flex;
    gap:1.25rem;
    width:100%;
}

.activate-sub{
    position:relative;
    flex:1 1 0;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:0.75rem;
    row-gap:0;
    text-align:left;
    border:1px solid var(--color-red-1);
    background-image:none;
    background:linear-gradient(to right, #74231c 0%, #090F17 100%);
    padding:1.25rem;
}

.activate-sub__icon{
    grid-row:1;
    grid-column:1;
    width:6.5rem;
    height:6.4375rem;
    object-fit:contain;
    filter:drop-shadow(0 0 10px rgba(255, 139, 56, 0.5));
    animation:activate-case-scale-pulse 3s ease-in-out infinite;
}

.activate-sub__text{
    grid-row:1;
    grid-column:2;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
}

.activate-sub__title{
    font-family:var(--font-primary);
    font-size:1.375rem;
    font-weight:600;
    line-height:1.1;
    color:var(--color-white-1);
    -webkit-user-select:none;
            user-select:none;
}

.activate-sub__desc{
    font-family:var(--font-secondary);
    font-size:1rem;
    font-weight:400;
    line-height:1.3;
    color:var(--color-grey-4);
    -webkit-user-select:none;
            user-select:none;
}

.activate-sub__desc span{
    color:var(--color-red-1);
}

.activate-sub__btn{
    grid-row:2;
    grid-column:1 / -1;
    position:relative;
    overflow:visible;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:1.75rem;
    padding:1rem 1.75rem;
    transition:box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.activate-sub__btn:hover{
    background-image:none;
    background-color:var(--color-red-1);
    border-color:var(--color-red-2);
    box-shadow:0 0 2px 0 #FF4938 inset, 0 0 20px 0 rgba(255, 73, 56, 0.5), 0 0 10px 0 #FF4938;
}

.activate-sub__btn:hover .text-info{
    background:none;
    -webkit-text-fill-color:var(--color-white-1);
    color:var(--color-white-1);
}

@media (max-width: 767px){
    .activate-screen.show{
        justify-content:flex-start;
        gap:clamp(0.75rem, 2.5vh, 1.5rem);
        padding:clamp(2.5rem, 9vh, 5rem) 1.25rem clamp(4rem, 9vh, 4.5rem);
    }

    .activate-screen__row{
        flex-direction:column;
        text-align:center;
        width:100%;
    }

    .activate-screen__right{
        align-items:center;
        width:100%;
    }

    .activate-screen__content{
        align-items:center;
        text-align:center;
    }

    .activate-case{
        width:min(72vw, calc((100dvh - 29rem) / 0.76));
        margin-left:35px;
    }

    .activate-screen__title,
    .activate-screen__desc{
        text-align:center;
    }

    .activate-claim-btn{
        width:100%;
        padding:clamp(1.15rem, 1.9vh, 1.25rem) 2rem;
    }

    .activate-claim-btn .text-btn-1{
        font-size:clamp(1.1rem, 5.2vw, 1.35rem);
    }
    .activate-screen__redirect{
        position:absolute;
        top:-22px;
        left:40%;
        margin:0 0 0.1rem;
        font-size:clamp(0.8rem, 4.4vw, 1rem);
    }
    .activate-screen__subs{
        gap:clamp(0.625rem, 2.5vw, 0.875rem);
    }

    .activate-subs-cards{
        flex-direction:column;
        gap:0.625rem;
    }

    .activate-sub{
        flex:0 0 auto;
        grid-template-columns:auto 1fr auto;
        grid-template-rows:1fr;
        align-items:center;
        justify-items:stretch;
        column-gap:clamp(0.5rem, 2.5vw, 0.75rem);
        row-gap:0;
        text-align:left;
        padding:clamp(0.5rem, 2.4vw, 0.7rem) clamp(0.6rem, 3vw, 0.9rem);
    }

    .activate-sub__icon{
        grid-row:1;
        grid-column:1;
        width:clamp(2.5rem, 13vw, 3.25rem);
        height:clamp(2.5rem, 13vw, 3.25rem);
    }

    .activate-sub__text{
        grid-row:1;
        grid-column:2;
        align-items:flex-start;
        gap:0.15rem;
    }

    .activate-sub__title{
        font-size:clamp(0.75rem, 3.4vw, 0.9375rem);
    }

    .activate-sub__desc{
        font-size:clamp(0.62rem, 2.9vw, 0.8125rem);
    }

    .activate-sub__btn{
        grid-row:1;
        grid-column:3;
        width:auto;
        margin-top:0;
        padding:clamp(0.5rem, 2.4vw, 0.7rem) clamp(0.85rem, 4.5vw, 1.4rem);
    }

    .activate-sub__btn .text-info{
        font-size:clamp(0.7rem, 3.2vw, 0.875rem);
    }
    .activate-screen__proceed{
        padding:clamp(1rem, 1.7vh, 1.25rem) 1.5rem;
    }

    .activate-screen__proceed .text-btn-1{
        font-size:clamp(0.9rem, 4.2vw, 1.1rem);
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    .activate-screen.show{
        justify-content:flex-start;
        gap:clamp(1rem, 3vh, 2rem);
        padding:clamp(2rem, 6vh, 3.5rem) 2rem clamp(3rem, 7vh, 4rem);
    }

    .activate-screen__row{
        flex-direction:column;
        text-align:center;
        width:100%;
    }

    .activate-screen__right{
        align-items:center;
        width:min(92%, 42rem);
    }

    .activate-screen__content{
        align-items:center;
        text-align:center;
    }

    .activate-case{
        width:min(30vw, calc((100dvh - 31.5rem) / 0.76), 18rem);
    }

    .activate-screen__title,
    .activate-screen__desc{
        text-align:center;
    }

    .activate-claim-btn{
        width:min(60%, 22rem);
        padding:1rem 2.5rem;
    }

    .activate-claim-btn .text-btn-1,
    .activate-screen__proceed .text-btn-1{
        font-size:clamp(1.35rem, 1.6vw + 1rem, 1.75rem);
    }
    .activate-screen__redirect{
        position:static;
        order:-1;
        justify-content:center;
        margin:0 0 0.35rem;
        font-size:1.15rem;
    }

    .activate-screen__subs{
        gap:1rem;
    }

    .activate-subs-cards{
        gap:1rem;
    }

    .activate-sub{
        padding:1rem;
    }

    .activate-sub__icon{
        width:3.5rem;
        height:3.5rem;
    }

    .activate-sub__btn{
        margin-top:1.25rem;
        padding:0.75rem 1.25rem;
    }

    .activate-sub__btn .text-info{
        font-size:1.15rem;
    }

    .activate-screen__proceed{
        padding:1rem 1.75rem;
    }
}

@media (min-width: 1024px) and (max-width: 1919px){
    .activate-case{
        width:clamp(16rem, 30vw, 34rem);
    }
    .activate-screen__right{
        width:40rem;
    }
    .activate-screen.show{
        gap:clamp(1rem, 3vh, 2rem);
        padding-top:clamp(1.5rem, 4vh, 3rem);
    }

    .activate-screen__row{
        gap:clamp(1rem, 2vw, 2rem);
    }

    .activate-screen__title{
        margin-bottom:clamp(0.5rem, 1.2vh, 1rem);
    }

    .activate-screen__desc{
        margin-bottom:clamp(0.75rem, 1.8vh, 1.5rem);
    }
    .activate-claim-btn,
    .activate-screen__proceed{
        padding:0.95rem 2.75rem;
    }

    .activate-claim-btn .text-btn-1,
    .activate-screen__proceed .text-btn-1{
        font-size:clamp(1.3rem, 0.85vw + 1.1rem, 2.1rem);
    }
    .activate-screen__subs{
        gap:clamp(0.75rem, 1.5vh, 1.1rem);
    }

    .activate-subs-cards{
        gap:1rem;
    }

    .activate-sub{
        padding:0.9rem;
    }

    .activate-sub__icon{
        width:5rem;
        height:5rem;
    }

    .activate-sub__btn{
        margin-top:1.1rem;
        padding:0.7rem 1.4rem;
    }

    .activate-sub__btn .text-info{
        font-size:clamp(1.05rem, 0.5vw + 0.9rem, 1.55rem);
    }
}