@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:"Unbounded";
  src:url("/fonts/unbounded-v12-latin-regular.woff2") format("woff2"), url("/fonts/unbounded-v12-latin-regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

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

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

@font-face{
  font-family:"Unbounded";
  src:url("/fonts/unbounded-v12-latin-800.woff2") format("woff2"), url("/fonts/unbounded-v12-latin-800.woff") format("woff");
  font-weight:800;
  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 btn-nudge{

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

    84%{
        transform:translateX(-0.3125rem);
    }

    88%{
        transform:translateX(0.3125rem);
    }

    92%{
        transform:translateX(-0.1875rem);
    }

    96%{
        transform:translateX(0.09375rem);
    }
}
@keyframes btn-shine{
    0%{
        transform:translateX(-200%) skewX(-20deg);
    }

    25%,
    100%{
        transform:translateX(400%) skewX(-20deg);
    }
}
@keyframes in-slide{
    from{
        opacity:0;
        transform:var(--in-from, none);
    }

    to{
        opacity:1;
        transform:var(--in-to, none);
    }
}
@keyframes title-in{
    from{
        opacity:0;
        transform:translate(0, -2.5rem) scale(1);
        animation-timing-function:cubic-bezier(0.45, 0, 0.9, 0.55);
    }

    55%{
        opacity:1;
        transform:translate(-0.625rem, 0) scale(1.03);
        animation-timing-function:ease-out;
    }

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

@keyframes hint-in{
    from{
        opacity:0;
        transform:translateY(0);
        filter:brightness(1) drop-shadow(0 0 0 rgba(var(--color-sky-7-rgb), 0));
    }

    40%{
        opacity:1;
        transform:translateY(-0.5rem);
        filter:brightness(1.3) drop-shadow(0 0 0.75rem rgba(var(--color-sky-7-rgb), 0.6));
    }

    to{
        opacity:1;
        transform:translateY(0);
        filter:brightness(1) drop-shadow(0 0 0 rgba(var(--color-sky-7-rgb), 0));
    }
}
@keyframes fade-in{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes fade-out{
    from{ opacity:1; }
    to{ opacity:0; }
}
@keyframes cta-arm{
    to{
        pointer-events:auto;
    }
}
@keyframes item-float{

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

    50%{
        transform:translateY(-0.625rem);
    }
}
@keyframes lock-glow{

    0%,
    100%{
        filter:drop-shadow(0 0 1.125rem rgba(var(--color-sky-6-rgb), 0.06));
    }

    50%{
        filter:drop-shadow(0 0 3.125rem rgba(var(--color-sky-6-rgb), 0.16));
    }
}
@keyframes lock-breath{

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

    50%{
        transform:scale(var(--lock-breath, 1.03));
    }
}
@keyframes swords-pulse{

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

    91%{
        transform:scale(1.055);
    }
}

@keyframes swords-glint{

    0%,
    86%,
    100%{
        filter:var(--swords-shadow) drop-shadow(0 0 0 rgba(198, 233, 255, 0)) brightness(1);
    }

    91%{
        filter:var(--swords-shadow) drop-shadow(0 0 1rem rgba(198, 233, 255, 0.4)) brightness(1.12);
    }
}

@keyframes swords-sweep{

    0%,
    84%{
        transform:translateY(250%);
    }

    98%,
    100%{
        transform:translateY(-130%);
    }
}
@keyframes title-nudge{

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

    4%{
        transform:translateX(-0.625rem) scale(1.03);
    }
}
@keyframes hint-jump{

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

    4%{
        transform:translateY(-0.5rem);
    }
}

@keyframes hint-shine{

    0%,
    10%,
    100%{
        filter:brightness(1) drop-shadow(0 0 0 rgba(var(--color-sky-7-rgb), 0));
    }

    4%{
        filter:brightness(1.3) drop-shadow(0 0 0.75rem rgba(var(--color-sky-7-rgb), 0.6));
    }
}

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

    to{
        transform:translateY(0);
        opacity:1;
    }
}
@keyframes lock-vanish{
    from{
        opacity:1;
        transform:rotate(0deg) scale(1);
    }

    to{
        opacity:0;
        transform:rotate(900deg) scale(0);
    }
}
@keyframes panel-shine{
    from{
        transform:translateX(0) skewX(-14deg);
    }

    to{
        transform:translateX(42rem) skewX(-14deg);
    }
}
@keyframes perk-in{
    0%{
        opacity:0;
        transform:translateY(-1.75rem) scale(0.92);
    }

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

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
@keyframes perk-spin{
    to{
        transform:rotate(360deg);
    }
}
@keyframes perk-pulse{

    0%,
    100%{
        filter:saturate(1) brightness(1);
    }

    50%{
        filter:saturate(1.4) brightness(1.2);
    }
}
@keyframes perk-bump{

    0%,
    100%{
        transform:scale(1);
        filter:var(--perk-shadow) brightness(1);
    }

    45%{
        transform:scale(1.07);
        filter:var(--perk-shadow) brightness(1.18);
    }
}
@keyframes perk-fade-out{
    to{
        opacity:0;
    }
}
@keyframes bonus-pop{
    0%{
        opacity:0;
        transform:scale(0.4) rotate(-9deg);
    }

    55%{
        opacity:1;
        transform:scale(1.18) rotate(4deg);
    }

    100%{
        opacity:1;
        transform:scale(1) rotate(0deg);
    }
}
@keyframes verdict-float{

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

    50%{
        transform:translateY(-0.4375rem);
    }
}
@keyframes spark-flash{
    0%{
        opacity:0;
        transform:scaleY(0.4);
    }

    12%{
        opacity:0.72;
        transform:scaleY(1);
    }

    35%{
        opacity:0.55;
        transform:scaleY(1);
    }

    100%{
        opacity:0;
        transform:scaleY(1);
    }
}
@keyframes line-reveal{
    from{
        opacity:1;
        clip-path:inset(0 0 0 100%);
    }

    to{
        opacity:1;
        clip-path:inset(0 0 0 0);
    }
}
@keyframes pack-jolt{

    0%,
    100%{
        transform:none;
    }

    20%{
        transform:translateY(-0.75rem) rotate(-2deg);
    }

    40%{
        transform:translateY(0) rotate(1.5deg);
    }

    60%{
        transform:translateY(-0.25rem) rotate(-0.75deg);
    }

    80%{
        transform:translateY(0) rotate(0.3deg);
    }
}
@keyframes sound-cue{

    from,
    to{
        opacity: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(15, 51, 94, 0.35) 0%,
            rgba(1, 12, 29, 0.88) 100%);
    gap:3.25rem;
}
.loader .loader__rhombus{
        width:3.25rem;
        height:3.25rem;
        background-color:var(--color-mint-2);
        transform:rotate(45deg);
        animation:loader-pulse 1.2s infinite ease-in-out;
        box-shadow:0 0 0.75rem rgba(var(--color-mint-2-rgb), 0.85), 0 0 1.75rem rgba(var(--color-mint-5-rgb), 0.45);
        border-radius:0.3rem;
    }
.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.hide{
    opacity:0;
    pointer-events:none;
}

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

    .loader__rhombus{
        width:1.5rem !important;
        height:1.5rem !important;
    }
}
.loader.hide .loader__rhombus{
    animation-play-state:paused !important;
}
html{
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

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:"Unbounded", sans-serif;
    --color-white-1:#FFFFFF;

    --color-grey-1:#B3C7E4;
    --color-grey-2:#8194B1;
    --color-grey-3:#4F5E73;
    --color-grey-4:#E9F3F6;
    --color-grey-5:#8C8C8C;
    --color-grey-6:#A6A7AA;

    --color-black-1:#090725;
    --color-black-1-rgb:9, 7, 37;
    --color-blue-1:#185EB3;
    --color-blue-2:#134C93;
    --color-blue-3:#0E3A73;
    --color-blue-4:#092852;
    --color-blue-5:#031632;
    --color-blue-5-rgb:3, 22, 50;
    --bg-page:radial-gradient(66.15% 46.85% at 50% 46.85%,
            var(--color-blue-1) 2.4%,
            var(--color-blue-2) 26.8%,
            var(--color-blue-3) 51.2%,
            var(--color-blue-4) 75.6%,
            var(--color-blue-5) 100%);
    --color-sky-1:#58C7FF;
    --color-sky-2:#59AFFF;
    --color-sky-3:#67C5FF;
    --color-sky-3-rgb:103, 197, 255;
    --glow-item-1-rgb:214, 240, 255;
    --glow-item-2-rgb:140, 205, 255;
    --glow-item-3-rgb:82, 171, 255;
    --color-sky-6-rgb:103, 204, 255;
    --color-sky-7-rgb:88, 199, 255;
    --color-mint-1:#8BFFDA;
    --color-mint-2:#46FFD4;
    --color-mint-3:#23E4C3;
    --color-mint-4:#11D7BA;
    --color-mint-5:#00C9B2;
    --color-mint-6:#072425;
    --color-mint-7:#58FFD8;
    --color-mint-2-rgb:70, 255, 212;
    --color-mint-5-rgb:0, 201, 178;
    --color-side-edge:#0F4BA3;
    --color-side-you:#18DFA0;
    --color-side-bot:#C258FF;
    --color-bot-accent:#A513F9;
    --color-side-you-low:#32E6E1;
    --color-side-bot-low:#C685FE;
    --color-gold-1:#FFED21;
    --color-gold-2:#FFA220;
    --color-gold-3:#FFF946;
    --color-amber-1:#FFB640;
    --color-amber-2:#FF883D;
    --color-amber-3:#FF773D;
    --color-win-1:#62FFCE;
    --color-win-1-rgb:98, 255, 206;
    --color-win-2-rgb:89, 255, 203;
    --color-lose-1:#E21C48;
    --color-lose-1-rgb:226, 28, 72;
    --color-lose-2-rgb:255, 55, 100;
    --color-lose-2:#FF889F;
    --color-lose-3:#D454B3;
    --color-item-name:#A9DEFF;
    --color-plate-edge:#1D53A1;
    --color-sky-5:#67CCFF;
    --grad-title:linear-gradient(90deg, var(--color-grey-4) 0%, var(--color-sky-2) 100%);
    --grad-heading:linear-gradient(94deg, var(--color-grey-4) 0%, var(--color-sky-1) 100%);
    --grad-cta:radial-gradient(70.32% 100.49% at 50% 100.49%,
            var(--color-mint-2) 0%,
            var(--color-mint-3) 50%,
            var(--color-mint-4) 75%,
            var(--color-mint-5) 100%);
    --grad-side:radial-gradient(232.25% 134.11% at 50% 22%,
            #086FDB 0%,
            #0655AA 25%,
            #043C79 50%,
            #022247 75%,
            #01162F 87.5%,
            #000916 100%);
    --grad-side-you:radial-gradient(68.89% 120.92% at 52.25% -20.92%,
            var(--color-side-you) 0%,
            #12B79D 25%,
            #0C8E9B 50%,
            #066698 75%,
            #003E96 100%);

    --grad-side-bot:radial-gradient(68.89% 120.92% at 52.25% -20.92%,
            var(--color-side-bot) 0%,
            #9152E5 25%,
            #614BCA 50%,
            #4948BD 62.5%,
            #3044B0 75%,
            #1841A3 87.5%,
            #0C3F9C 93.75%,
            #003E96 100%);
    --grad-gold:linear-gradient(180deg, var(--color-gold-2) 0%, var(--color-gold-1) 100%);

    --grad-perk:linear-gradient(180deg,
            var(--color-amber-1) 0%,
            var(--color-amber-2) 20%,
            var(--color-amber-3) 50%,
            var(--color-amber-2) 80%,
            var(--color-amber-1) 100%);
    --grad-win:radial-gradient(100% 790% at 50% 100%,
            #ACFFE5 0%,
            #87F7D3 25%,
            #62EFC2 50%,
            #3DE7B1 75%,
            #2AE3A9 87.5%,
            #18DFA0 100%);

    --grad-lose:radial-gradient(100% 790% at 50% 100%,
            #FF889F 0%,
            #F86D89 25%,
            #F15274 50%,
            #E9375E 75%,
            #E21C48 100%);

    --grad-price-top:linear-gradient(180deg, #00CFA6 0%, #009488 100%);
    --grad-price-low:linear-gradient(180deg, #CF004C 0%, #940048 100%);
    --grad-wear:radial-gradient(100% 315% at 50% 150%,
            #67CCFF 0%,
            #4393DA 50%,
            #3077C7 75%,
            #1E5AB4 100%);
    --grad-plate:radial-gradient(63.56% 115.79% at 50% 0%,
            #184D99 0%,
            #123D7B 50%,
            #0B2C5D 100%);
    --grad-plate-edge:linear-gradient(to top,
            var(--color-plate-edge) 0%,
            var(--color-sky-5) 100%);
    --grad-hint:radial-gradient(62.73% 305.69% at -1.3% 34.77%,
            #184D99 0%,
            #123D7B 50%,
            #0B2C5D 100%);

    --grad-hint-edge:linear-gradient(90deg,
            var(--color-sky-5) 0%,
            var(--color-plate-edge) 100%);
    --grad-bonus-edge:linear-gradient(180deg,
            var(--color-gold-2) 0%,
            var(--color-gold-3) 100%);
    --shadow-ink-rgb:0, 16, 43;
    --shadow-void-rgb:1, 10, 26;

    --shadow-panel:0 0.5rem 0.875rem rgba(var(--shadow-ink-rgb), 0.7), 0 1.25rem 2rem rgba(var(--shadow-ink-rgb), 0.8), 0 2.5rem 4rem rgba(var(--shadow-void-rgb), 0.7);

    --shadow-plate:0 1.875rem 1.875rem rgba(3, 16, 38, 0.1), 0 1.25rem 1.25rem rgba(0, 22, 59, 0.2), 0 0.625rem 1.25rem rgba(0, 22, 59, 0.4);
    --glow-item:drop-shadow(0 0.0625rem 0.125rem rgba(var(--glow-item-1-rgb), 0.95)) drop-shadow(0 0.125rem 0.3125rem rgba(var(--glow-item-2-rgb), 0.9)) drop-shadow(0 0.1875rem 0.625rem rgba(var(--glow-item-3-rgb), 0.7)) drop-shadow(0 0.25rem 0.9375rem rgba(var(--glow-item-3-rgb), 0.5));
    --texture-scale:5.4167%;
    --z-consent:10000;
    --z-logo:9000;
    --z-overlay:8000;
    --z-popup:7000;
    --z-content:1;
}
html,
body{
    overflow:hidden;
    overscroll-behavior:none;
}
body{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    font-family:var(--font-primary);
    color:var(--color-white-1);
    background-color:var(--color-blue-5);
    background-image:url("/images/bg/pattern-tile.avif"), var(--bg-page);
    background-repeat:repeat, no-repeat;
    background-size:11.25rem 11.25rem, 100% 100%;
    background-position:left top, center;
    background-blend-mode:multiply, normal;
}
.main{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    flex:1;
    width:100%;
    min-height:0;
    z-index:var(--z-content);
}

.content{
    position:relative;
    width:100%;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:0;
    padding-top:var(--stage-shift);
}
body{
    user-select:none;
    -webkit-user-select:none;
}

.popup-terms-content,
.popup-terms-content *{
    user-select:text;
    -webkit-user-select:text;
}

.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: 767.98px){
    .dk{
        display:none;
    }

    .mb{
        display:block;
    }
}
@media (max-width: 1023.98px){
    .main,
    .content{
        overflow-x:clip;
    }
    html,
    body{
        touch-action:pan-x pan-y;
    }
}

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

[data-stage]{
    display:none;
}

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

[data-section]{
    display:none;
}

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

[data-popup]{
    display:none;
}

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

[data-cookie="banner"].hide{
    display:none !important;
}
@media (min-width: 1024px){
    html{
        font-size:min(0.8333vw, 1.4815vh);
    }
}
:root{
    --stage-shift:0px;
}

@media (min-width: 1024px){
    :root{
        --stage-shift:max(0px, calc((100vh - 67.5rem) / 2));
    }
}
:root{
    --tx-xs:0.75rem;
    --tx-sm:1rem;
    --tx-md:1.25rem;
}

@media (min-width: 768px){
    :root{
        --tx-xs:max(10px, 0.75rem);
        --tx-sm:max(12px, 1rem);
        --tx-md:max(14px, 1.25rem);
    }
}
:root{
    --lap-pad:0rem;
}

@media (min-width: 1024px) and (max-width: 1919.98px){
    :root{
        --lap-pad:1.5rem;
    }
}
@media (max-width: 1023.98px){
    html{
        font-size:min(3.6364vw, 1.6736vh);
        font-size:min(3.6364vw, 1.6736svh);
    }
}

.header{
	position:absolute;
	top:0;
	left:0;
	z-index:var(--z-logo);
	display:flex;
	align-items:center;
	justify-content:flex-start;
	width:100%;
	height:4.5rem;
	padding:0 1.5rem;
	background-color:transparent;

	opacity:0;
	transition:opacity 1.25s ease;
}

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

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

body.show .header{
	opacity:1;
}
@media (max-width: 1023.98px){
	.header{
		padding:0 1.25rem;
	}

	.header__logo{
		padding:0;
	}

	.header__logo-img{
		height:1.75rem;
	}
}
@media (min-width: 768px) and (max-width: 1023.98px){
	.header{
		padding:0 2.5rem;
	}
}
.footer{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:var(--z-content);
    height:3.75rem;
    border-radius:1.25rem 1.25rem 0 0;
    background-color:var(--color-black-1);
    opacity:0;
}
.footer.show{
    animation:footer-rise 0.7s ease-out 0.25s forwards;
}
.footer__content{
    position:relative;
    width:100%;
    height:100%;
}

.footer__logo,
.footer__copy,
.footer__terms{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
.footer__logo{
    left:15rem;
    display:inline-flex;
    align-items:center;
}

.footer__logo-img{
    display:block;
    height:1.875rem;
    width:auto;
}
.footer__copy{
    left:18.125rem;
    display:flex;
    flex-direction:column;
    gap:0.375rem;
    font-size:var(--tx-xs);
    line-height:1;
    color:var(--color-grey-2);
    white-space:nowrap;
    font-weight:500;
}
@media (min-width: 1024px) and (max-width: 1919.98px){
.footer__copy{
           font-size:calc(var(--tx-xs) - 1px);
}
    }

.footer__copy-row{
    display:flex;
    align-items:center;
    gap:0.65rem;
}

.footer__copy-row b{
    font-weight:500;
}

.footer__copy-row a{
    color:inherit;
    text-decoration:none;
    color:var(--color-white-1);
    transition:color 0.2s ease;
}

:is(.footer__copy-row a):hover{
        color:var(--color-mint-1);
    }
.footer__terms{
    right:21.4375rem;
    display:flex;
    align-items:center;
    gap:1.65rem;
    font-size:var(--tx-sm);
    line-height:1;
    color:var(--color-white-1);
    white-space:nowrap;
}

.footer__terms p{
    cursor:pointer;
    transition:color 0.2s ease;
}

.footer__terms p:hover{
    color:var(--color-mint-1);
}
.btn{
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    --btn-k:1;
    height:calc(5.3125rem * var(--btn-k));
    padding:0 calc(3.125rem * var(--btn-k));
    border:0.125rem solid var(--color-mint-1);
    border-radius:calc(1.25rem * var(--btn-k));
    background-image:var(--grad-cta);
    cursor:pointer;
    animation:btn-nudge 5s ease-in-out infinite;
    transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.btn::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background-color:var(--color-mint-2);
    opacity:0;
    transition:opacity 0.2s ease;
    pointer-events:none;
}
.btn:hover::before{
    opacity:1;
    box-shadow:inset 0 0 0.625rem var(--color-mint-7);
}
.btn::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:30%;
    height:100%;
    background-image:linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation:btn-shine 4s linear infinite;
    pointer-events:none;
}

.btn__text{
    position:relative;
    z-index:1;
    font-family:var(--font-primary);
    font-weight:700;
    font-size:calc(1.5rem * var(--btn-k));
    line-height:1.4;
    color:var(--color-mint-6);
    text-align:center;
    white-space:nowrap;
    transition:color 0.2s ease;
    pointer-events:none;
}
.btn:hover{
    animation:none;
    box-shadow:0 0 0.3125rem var(--color-mint-2), 0 0 0.625rem var(--color-mint-2), 0 0 1.25rem rgba(70, 255, 212, 0.8), 0 0 2.5rem rgba(0, 212, 111, 0.99);
}

.btn:hover .btn__text{
    color:var(--color-black-1);
}
@media (prefers-reduced-motion: reduce){
    .btn{
        animation:none;
    }

    .btn::after{
        animation:none;
        opacity:0;
    }
}
.coockie-banner{
    position:fixed;
    --banner-edge:1rem;
    --footer-h:3.2rem;
    right:var(--banner-edge);
    bottom:calc(var(--footer-h) + var(--banner-edge));
    z-index:var(--z-consent);
    box-sizing:border-box;
    width:clamp(200px, 42%, 275px);
    padding:1.1rem clamp(1.25rem, 1.5vw, 1.6rem);
    border-radius:0.45rem;
    background-color:rgba(var(--color-blue-5-rgb), 0.85);
    border:1px solid var(--color-sky-3);
    box-shadow:0 0 18px rgba(var(--color-sky-3-rgb), 0.22), 0 0 15px 1px rgba(var(--color-black-1-rgb), 0.45), 0 12px 32px rgba(var(--color-black-1-rgb), 0.5);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    transform:translateX(120%);
    opacity:0;
}
@media (max-width: 1023.98px){
.coockie-banner{
        right:0.75rem;
        left:0.75rem;
        width:auto;
        bottom:calc(5.25rem + env(safe-area-inset-bottom, 0px));
        padding:0.625rem 0.85rem;
        gap:0.4rem;
        font-size:0.75rem;
}

        .coockie-banner .coockie-banner__inner{
            gap:0.4rem;
        }

        .coockie-banner h3{
            font-size:0.875rem;
            margin-bottom:0.25rem;
        }

        .coockie-banner p{
            font-size:0.75rem;
            line-height:1.25;
        }

        .coockie-banner .coockie-banner__btn{
            padding:0.375rem 1.25rem;
        }
    }
@media (min-width: 768px) and (max-width: 1023.98px){
.coockie-banner{
        left:auto;
        width:clamp(320px, 62%, 560px);
        bottom:calc(3.25rem + var(--banner-edge));
}
    }

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

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

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

        background:var(--grad-heading);
        background-clip:text;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }

@media (max-width: 767.98px){

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

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

@media (max-width: 767.98px){

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

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

@media (max-width: 767.98px){

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

.coockie-banner__link:hover{
        color:var(--color-mint-1);
    }
.coockie-banner__btn{
    margin-top:0.4rem;
    align-self:flex-end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:1.5rem;
    cursor:pointer;
    padding:0.55rem 1.45rem;
    background:var(--grad-cta);
    box-shadow:0 2px 12px rgba(var(--color-mint-2-rgb), 0.2), 0 0 20px rgba(var(--color-mint-2-rgb), 0.22);
    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.875rem;
        font-family:var(--font-primary);
        font-weight:500;
        color:var(--color-mint-6);
    }
@media (max-width: 767.98px){
.coockie-banner__btn span{
            font-size:0.8rem;
    }
        }
@media (min-width: 1024px) and (max-width: 1919.98px){
    .coockie-banner{
        --banner-edge:16px;
        --footer-h:40px;

        padding:17.6px 25.6px;
        border-radius:7.2px;
    }

    .coockie-banner__inner{
        gap:11.2px;
    }

        .coockie-banner__inner h3{
            font-size:16px;
            margin-bottom:8px;
        }

    .coockie-banner__text,
    .coockie-banner__link{
        font-size:12.8px;
    }

    .coockie-banner__btn{
        margin-top:6.4px;
        padding:8.8px 23.2px;
        border-radius:24px;
    }

        .coockie-banner__btn span{
            font-size:14px;
        }
}
.popup-terms-wrap{
  position:fixed;
  inset:0;
  z-index:9995;
  background:rgba(var(--color-black-1-rgb), 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%,
      var(--color-blue-4) 0%,
      var(--color-blue-5) 100%);
  border:2px solid var(--color-sky-3);
  border-radius:0.52vw;
  box-shadow:0 0 40px rgba(var(--color-sky-3-rgb), 0.3), 0 0 25px rgba(var(--color-sky-3-rgb), 0.36), inset 0 0 4px rgba(var(--color-sky-3-rgb), 0.18);
  cursor:default;
  display:none;
  animation:popup-slide-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  margin-top:10px;
}

.popup-terms.show{
  display:block;
}
.popup-terms::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:8vw;
  background:linear-gradient(to top,
      var(--color-blue-5) 0%,
      rgba(var(--color-blue-5-rgb), 0) 100%);
  pointer-events:none;
  z-index:1;
}
.popup-terms-content{
  max-height:80vh;
  overflow-y:auto;
  scrollbar-color:var(--color-sky-3) rgba(var(--color-blue-5-rgb), 0.5);
}

.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:rgba(var(--color-sky-3-rgb), 0.07);
  border:1px solid var(--color-sky-3);
  border-radius:0.26vw;
  color:var(--color-grey-1);
  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:rgba(var(--color-sky-3-rgb), 0.28);
  border-color:var(--color-sky-1);
  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-primary);
  font-size:1.2vw;
  font-weight:400;
  line-height:1.5;
}

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

  background:var(--grad-heading);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

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

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

  background:var(--grad-heading);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

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

  background:var(--grad-heading);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.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: 767.98px){
  .terms{
    font-size:3.73vw;
    padding:8vw 6.4vw 10vw;
    max-width:100%;
  }
  
  .terms h1{
    font-size:9.6vw;
  }

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

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

  .popup-terms{
    border-radius:0.3rem;
  }

  .popup-terms-close{
    width:5.2vw;
    height:5.2vw;
    border-radius:0.3rem;
  }

  .popup-terms-close svg{
    width:2.78vw;
    height:2.78vw;
  }
}
@media (max-width: 1023.98px){
  .popup-terms-wrap.show{
    animation:none;
  }
}
.scene{
    position:fixed;
    inset:0;
    top:var(--stage-shift);
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}
.scene__panel,
.scene__platform,
.scene__platform-edge{
    position:absolute;
    display:block;
}
.pedestal{
    position:absolute;
    inset:0;
    display:none;
    pointer-events:none;
}

.pedestal__layer{
    position:absolute;
    display:block;
    max-width:none;
}
.scene__panel--far-left,
.scene__panel--far-right{
    content:url("/images/bg/panel-2.avif");
    top:11.9375rem;
    width:58.125rem;
    height:73.5rem;
}

.scene__panel--far-left{
    left:-21.625rem;
}

.scene__panel--far-right{
    right:-21.625rem;
    transform:scaleX(-1);
}

.scene__panel--near-left,
.scene__panel--near-right{
    content:url("/images/bg/panel-1.avif");
    top:25.0625rem;
    width:51.25rem;
    height:62rem;
}

.scene__panel--near-left{
    left:-20.4375rem;
}

.scene__panel--near-right{
    right:-20.4375rem;
    transform:scaleX(-1);
}
.scene__platform--left,
.scene__platform--right{
    content:url("/images/bg/platform.avif");
    top:46.6875rem;
    width:53.125rem;
    height:27.4375rem;
}

.scene__platform--left{
    left:-3.3125rem;
}

.scene__platform--right{
    right:-3.3125rem;
    transform:scaleX(-1);
}

.scene__platform-edge--left,
.scene__platform-edge--right{
    content:url("/images/bg/platform-edge.svg");
    top:53.9375rem;
    width:10.25rem;
    height:19.0625rem;
}

.scene__platform-edge--left{
    left:39.5625rem;
}

.scene__platform-edge--right{
    right:39.5625rem;
    transform:scaleX(-1);
}
.scene__panel{
    transition:translate 0.9s cubic-bezier(0.33, 0.1, 0.2, 1), scale 0.9s cubic-bezier(0.33, 0.1, 0.2, 1);
}

.content[data-phase="duel"] .scene__panel--far-left{
    translate:-1.875rem 5.8125rem;
}

.content[data-phase="duel"] .scene__panel--far-right{
    translate:1.875rem 5.8125rem;
}

.content[data-phase="duel"] .scene__panel--near-left{
    translate:-1.875rem 7.6875rem;
}

.content[data-phase="duel"] .scene__panel--near-right{
    translate:1.875rem 7.6875rem;
}
.scene__platform,
.scene__platform-edge{
    transition:translate 0.8s cubic-bezier(0.33, 0.1, 0.2, 1);
}

.content[data-phase="result"] .scene__platform,
.content[data-phase="result"] .scene__platform-edge{
    translate:0 2.5rem;
}
@media (min-width: 1024px){
    .scene{
        --stage-gap:max(0px, calc((100vw - 120rem) / 2));
        left:calc(50% - 60rem);
        right:auto;
        width:120rem;
        overflow:visible;
    }
    .scene__panel--far-left{
        left:calc(-21.625rem - var(--stage-gap));
    }

    .scene__panel--far-right{
        right:calc(-21.625rem - var(--stage-gap));
    }

    .scene__panel--near-left{
        left:calc(-20.4375rem - var(--stage-gap));
    }

    .scene__panel--near-right{
        right:calc(-20.4375rem - var(--stage-gap));
    }
    .scene__platform--left,
    .scene__platform--right{
        width:calc(53.125rem + var(--stage-gap));
    }

    .scene__platform--left{
        left:calc(-3.3125rem - var(--stage-gap));
    }

    .scene__platform--right{
        right:calc(-3.3125rem - var(--stage-gap));
    }
}
.side{
    position:absolute;
    top:17.25rem;
    width:26.4375rem;
    height:24.9375rem;
    border:0.125rem solid transparent;
    border-radius:1.25rem;
    background-image:var(--grad-side), var(--grad-side-edge);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    box-shadow:var(--shadow-panel);
    transition:box-shadow 0.5s ease;
}
.side__body{
    position:absolute;
    inset:0;
    border-radius:1.125rem;
    overflow:hidden;
}
.side{
    --grad-side-edge:linear-gradient(to top,
            var(--color-side-edge) 0%,
            var(--color-sky-2) 50%,
            var(--side-accent) 100%);

    --grad-head-edge:linear-gradient(to top,
            var(--side-accent-low) 0%,
            var(--side-accent) 100%);
}

.side--you{
    --side-accent:var(--color-side-you);
    --side-accent-low:var(--color-side-you-low);
    --side-head-grad:var(--grad-side-you);
    left:26.5625rem;
}

.side--bot{
    --side-accent:var(--color-side-bot);
    --side-accent-low:var(--color-side-bot-low);
    --side-head-grad:var(--grad-side-bot);
    right:26.5625rem;
}
.side__body::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("/images/ui/texture-tile.avif");
    background-repeat:repeat;
    background-size:1.635rem 1.635rem;
    background-position:-1.90625rem -5.25rem;
    mix-blend-mode:color-burn;
    opacity:0.1;
    pointer-events:none;
}
.side__head{
    position:absolute;
    top:-0.25rem;
    left:-0.25rem;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5625rem;
    width:26.5625rem;
    height:6.125rem;
    border:0.125rem solid transparent;
    border-radius:1.25rem;
    background-image:var(--side-head-grad);
    background-origin:border-box;
    background-clip:padding-box;
    box-shadow:var(--shadow-plate), inset 0 0 0.625rem rgba(118, 39, 255, 0.8);
}
.side__head::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:1.125rem;
    background-image:url("/images/ui/head-texture-tile.avif");
    background-repeat:repeat;
    background-size:3.33rem 3.33rem;
    background-position:center;
    mix-blend-mode:multiply;
    opacity:0.1;
    pointer-events:none;
}
.side__head::after{
    content:"";
    position:absolute;
    inset:-0.125rem;
    border-radius:inherit;
    padding:0.125rem;
    background-image:var(--grad-head-edge);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.side__icon{
    position:relative;
    flex-shrink:0;
    display:block;
}

.side--you .side__icon{
    width:2.75rem;
    height:3.125rem;
}

.side--bot .side__icon{
    width:3.44375rem;
    height:2.8125rem;
}
.side__label{
    position:relative;
    top:0.0875rem;
    font-family:var(--font-secondary);
    font-weight:800;
    font-size:2rem;
    line-height:1.2;
    white-space:nowrap;
    background-image:linear-gradient(to top, var(--color-white-1) 0%, var(--side-accent) 170.83%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.side__reel{
    position:absolute;
    top:7.75rem;
    left:1.6875rem;
    width:22.6875rem;
    --reel-offset:0rem;
    --reel-time:0s;
    transform:translateY(var(--reel-offset));
    transition-property:transform;
    transition-duration:var(--reel-time);
    transition-timing-function:cubic-bezier(0.4, 0.5, 0.6, 1);
    transition-timing-function:linear(
            0, 0.0217 1%, 0.0427 2%, 0.0622 3%, 0.0810 4%, 0.0986 5%,
            0.1157 6%, 0.1317 7%, 0.1474 8%, 0.1622 9%, 0.1768 10%, 0.1908 11%,
            0.2047 12%, 0.2181 13%, 0.2316 14%, 0.2448 15%, 0.2583 16%, 0.2716 17%,
            0.2850 18%, 0.2986 19%, 0.3121 20%, 0.3465 22.5%, 0.3809 25%, 0.4155 27.5%,
            0.4502 30%, 0.4847 32.5%, 0.5188 35%, 0.5528 37.5%, 0.5859 40%, 0.6184 42.5%,
            0.6501 45%, 0.6809 47.5%, 0.7108 50%, 0.7394 52.5%, 0.7667 55%, 0.7927 57.5%,
            0.8172 60%, 0.8402 62.5%, 0.8619 65%, 0.8818 67.5%, 0.9001 70%, 0.9168 72.5%,
            0.9319 75%, 0.9454 77.5%, 0.9574 80%, 0.9677 82.5%, 0.9766 85%, 0.9839 87.5%,
            0.9898 90%, 0.9943 92.5%, 0.9975 95%, 0.9994 97.5%, 1);
}
.side--bot .side__reel{
    --reel-offset:-1210rem;
}
.item-card{
    position:relative;
    width:22.6875rem;
    height:15.125rem;
}
.item-card__polygon{
    position:absolute;
    top:50%;
    left:50%;
    translate:-50% -50%;
    display:block;
    width:9.6923rem;
    height:10.9725rem;
    opacity:0.7;
}
.item-card__art{
    position:absolute;
    top:50%;
    left:50%;
    translate:calc(-50% + 0.09375rem) calc(-50% + 0.15625rem);
    width:18.375rem;
    height:13.71875rem;
    filter:var(--glow-item);
    transition:scale 0.5s ease;
}
.item-card--result .item-card__art,
.side--you .side__run:first-child .item-card:first-child .item-card__art,
.side--bot .side__run:last-child .item-card:last-child .item-card__art{
    animation:item-float 5.5s ease-in-out infinite;
}
.side__shine{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.side__shine::before{
    content:"";
    position:absolute;
    top:-20%;
    bottom:-20%;
    left:-14rem;
    width:11rem;
    background-image:linear-gradient(90deg,
            rgba(var(--color-sky-3-rgb), 0) 0%,
            rgba(var(--color-sky-3-rgb), 0.4) 38%,
            rgba(255, 255, 255, 0.85) 50%,
            rgba(var(--color-sky-3-rgb), 0.4) 62%,
            rgba(var(--color-sky-3-rgb), 0) 100%);
    transform:translateX(0) skewX(-14deg);
}
.side__spark{
    position:absolute;
    top:50%;
    z-index:3;
    translate:0 -50%;
    width:0.75rem;
    height:18rem;
    border-radius:0.375rem;
    background-image:linear-gradient(to bottom,
            rgba(var(--color-sky-3-rgb), 0) 0%,
            var(--color-white-1) 18%,
            var(--color-white-1) 82%,
            rgba(var(--color-sky-3-rgb), 0) 100%);
    filter:drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.85)) drop-shadow(0 0 1.25rem rgba(232, 248, 255, 0.7)) drop-shadow(0 0 2.5rem rgba(180, 224, 255, 0.55));
    opacity:0;
    pointer-events:none;
}
.side__spark::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10rem;
    height:26rem;
    translate:-50% -50%;
    background-image:radial-gradient(closest-side,
            rgba(255, 255, 255, 0.35) 0%,
            rgba(var(--color-sky-3-rgb), 0.18) 45%,
            rgba(var(--color-sky-3-rgb), 0) 78%);
}

.side--you .side__spark{
    left:-0.5rem;
}

.side--bot .side__spark{
    right:-0.5rem;
}
.side__mark{
    position:absolute;
    top:50%;
    z-index:1;
    translate:0 -50%;
    display:flex;
    align-items:center;
    justify-content:center;
    height:2.3125rem;
    padding:0 0.5rem;
    border:0.125rem solid var(--role-edge);
    border-radius:0.625rem;
    background-image:var(--role-fill);
    box-shadow:0 0 0.625rem rgba(var(--role-glow-rgb), 0.8), 0 0 1.25rem rgba(var(--role-glow-rgb), 0.5), inset 0 0 0.25rem var(--color-mint-7);
    font-weight:700;
    font-size:1.5rem;
    line-height:1.2;
    color:var(--color-white-1);
    opacity:0;
    transition:opacity 0.35s ease 0.15s;
}

.side--you .side__mark{
    left:-1.25rem;
}

.side--bot .side__mark{
    right:-1.25rem;
}

.side__mark-text{
    display:none;
}

.side.is-top .side__mark-text--top,
.side.is-low .side__mark-text--low{
    display:inline;
}
.lock{
    position:absolute;
    top:27.1875rem;
    width:10.75rem;
    height:10.75rem;
    pointer-events:none;
    animation:lock-glow 3.1s ease-in-out infinite;
    will-change:filter;
}

.lock--you{
    left:34.4375rem;
}

.lock--bot{
    right:34.4375rem;
}

.lock__layer{
    position:absolute;
    display:block;
    max-width:none;
}
.lock__body{
    top:-3.319rem;
    left:-16.269rem;
    width:33.05rem;
    height:44.172rem;
    --lock-breath:1.02;
    transform-origin:65.5% 19.7%;
    animation:lock-breath 4.7s ease-in-out infinite;
}

.lock__shackle{
    top:-2.0625rem;
    left:-14.406rem;
    width:29.347rem;
    height:40.708rem;
    --lock-breath:1.045;
    transform-origin:67.4% 17.1%;
    animation:lock-breath 3.4s ease-in-out infinite;
}
.lock__tint{
    top:-6.4875rem;
    left:-9.956rem;
    width:30.656rem;
    height:23.728rem;
    mix-blend-mode:color;
}
@media (prefers-reduced-motion: reduce){

    .item-card__art,
    .lock,
    .lock__body,
    .lock__shackle{
        animation:none;
    }
}
.main-screen[data-phase="result"] .side.is-top{
    --side-accent:var(--color-mint-1);
    --side-accent-low:var(--color-side-you-low);
    --role-edge:var(--color-win-1);
    --role-fill:var(--grad-win);
    --role-glow-rgb:var(--color-win-2-rgb);
}

.main-screen[data-phase="result"] .side.is-low{
    --side-accent:var(--color-lose-2);
    --side-accent-low:var(--color-lose-3);
    --role-edge:var(--color-lose-1);
    --role-fill:var(--grad-lose);
    --role-glow-rgb:var(--color-lose-2-rgb);
}
.main-screen[data-phase="result"] .side.is-top,
.main-screen[data-phase="result"] .side.is-low{
    box-shadow:0 0 0.75rem rgba(var(--role-glow-rgb), 0.9), 0 0 2rem rgba(var(--role-glow-rgb), 0.5), var(--shadow-panel);
}

.main-screen[data-phase="result"] .side.is-top .side__head,
.main-screen[data-phase="result"] .side.is-low .side__head{
    box-shadow:0 0 0.75rem rgba(var(--role-glow-rgb), 0.9), 0 0 2rem rgba(var(--role-glow-rgb), 0.5), var(--shadow-plate), inset 0 0 0.625rem rgba(118, 39, 255, 0.8);
}
.item-card--result.is-top{
    --role-edge:var(--color-win-1);
    --role-fill:var(--grad-win);
    --role-glow-rgb:var(--color-win-2-rgb);
    --role-price-fill:var(--grad-price-top);
    --role-plate:url("/images/items/price-plate-top.svg");
    --role-coin:url("/images/items/coin-top.svg");
}

.item-card--result.is-low{
    --role-edge:var(--color-lose-1);
    --role-fill:var(--grad-lose);
    --role-glow-rgb:var(--color-lose-2-rgb);
    --role-price-fill:var(--grad-price-low);
    --role-plate:url("/images/items/price-plate-low.svg");
    --role-coin:url("/images/items/coin-low.svg");
}
.item-card__frame{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
}
.item-card--result .item-card__art{
    z-index:1;
}

.item-card__star,
.item-card__wear,
.item-card__weapon,
.item-card__skin{
    z-index:2;
}
.item-card__star{
    position:absolute;
    top:1rem;
    left:1.3125rem;
    width:1.875rem;
    height:1.875rem;
    background-image:url("/images/items/star-on.svg");
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.item-card__wear{
    position:absolute;
    top:0.875rem;
    left:18.6875rem;
    display:flex;
    align-items:center;
    height:2.1875rem;
    padding:0 0.5rem;
    border:0.0625rem solid var(--color-sky-5);
    border-radius:0.625rem;
    background-image:linear-gradient(rgba(var(--color-black-1-rgb), 0.25), rgba(var(--color-black-1-rgb), 0.25)), var(--grad-wear);
    font-weight:700;
    font-size:1.5rem;
    line-height:1.2;
    color:var(--color-sky-5);
}
.item-card__price{
    position:absolute;
    top:0;
    left:5.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:11.6875rem;
    height:2.6875rem;
}
.item-card__price::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:14.0219rem;
    height:5.1875rem;
    transform:translate(-50%, -50%) rotate(180deg);
    background-image:var(--role-plate);
    background-repeat:no-repeat;
    background-size:100% 100%;
}
.item-card__price-value{
    position:relative;
    display:none;
    align-items:center;
    gap:0.5rem;
    font-weight:700;
    font-size:1.5rem;
    line-height:1.4;
    background-image:var(--role-price-fill);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:brightness(0.78);
}

.item-card--result.is-top .item-card__price-value--top,
.item-card--result.is-low .item-card__price-value--low{
    display:flex;
}
.item-card__price-value::before{
    content:"";
    flex-shrink:0;
    width:1.25rem;
    height:1.375rem;
    background-image:var(--role-coin);
    background-repeat:no-repeat;
    background-size:100% 100%;
}
.item-card__weapon,
.item-card__skin{
    position:absolute;
    top:12.4rem;
    font-weight:700;
    font-size:var(--names-fs, 1.25rem);
    line-height:1.2;
    color:var(--color-item-name);
    white-space:nowrap;
    text-shadow:0 0 0.125rem var(--color-black-1);
}

.item-card__weapon{
    left:1.375rem;
}

.item-card__skin{
    right:1.375rem;
}
.pack{
    position:absolute;
    top:35.650625rem;
    width:28.625rem;
    height:21.61875rem;
    pointer-events:none;
    transform-origin:50% 100%;
    transition:translate 0.8s cubic-bezier(0.33, 0.1, 0.2, 1), scale 0.8s cubic-bezier(0.33, 0.1, 0.2, 1);
}

.pack--left{
    left:22.8025rem;
}

.pack--right{
    right:22.8025rem;
    transform:scaleX(-1);
}
.pack__layer{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    transition:opacity 0.55s ease;
}
.pack__open{
    transition:opacity 0.9s ease;
}

.pack__closed{
    transition:opacity 0.6s ease 0.4s;
}

.pack__layer.pack__glow{
    transition:opacity 1.4s ease 0.35s;
}
.pack__glow{
    mix-blend-mode:screen;
}
.pack__shade{
    mix-blend-mode:multiply;
}
.pack-name{
    position:absolute;
    top:50.4375rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:10.125rem;
    height:2.75rem;
    border:0.125rem solid transparent;
    border-radius:0.875rem;
    background-image:var(--grad-plate), var(--grad-plate-edge);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    box-shadow:var(--shadow-plate);
}

.pack-name--left{
    left:37.125rem;
}

.pack-name--right{
    right:37.125rem;
}
.pack-name::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:0.75rem;
    background-image:url("/images/ui/texture-tile.avif");
    background-repeat:repeat;
    background-size:0.5484rem 0.5484rem;
    background-position:center;
    opacity:0.5;
    pointer-events:none;
}

.pack-name__text{
    position:relative;
    font-weight:500;
    font-size:1.125rem;
    line-height:1.4;
    color:var(--color-white-1);
    white-space:nowrap;
}
.duel__pointer{
    position:absolute;
    top:29.125rem;
    display:block;
    width:7.125rem;
    height:7.5rem;
    opacity:0;
    transition:opacity 0.6s ease-out 0.15s, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.duel__pointer--left{
    left:24.28125rem;
    translate:-4rem 0;
    transform:rotate(90deg);
}

.duel__pointer--right{
    right:24.28125rem;
    translate:4rem 0;
    transform:rotate(-90deg);
}
.perk{
    position:absolute;
    top:17.25rem;
    left:0;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    opacity:0;
}

.perk__label{
    margin-top:-0.3125rem;
    font-weight:700;
    font-size:1.125rem;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    background-image:var(--grad-gold);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.perk__value{
    position:relative;
    margin-top:0.375rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.625rem;
    height:3.4375rem;
    padding:0 0.9375rem;
    border:0.125rem solid transparent;
    border-radius:0.875rem;
    background-image:var(--grad-perk), var(--grad-bonus-edge);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    --perk-shadow:drop-shadow(0 0 0.46875rem var(--color-amber-3));
    filter:var(--perk-shadow);
}
.perk__value::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:0.75rem;
    background-image:url("/images/ui/texture-tile.avif");
    background-repeat:repeat;
    background-size:0.6198rem 0.6198rem;
    background-position:center;
    mix-blend-mode:color-burn;
    opacity:0.1;
    pointer-events:none;
}
.perk__icon{
    position:relative;
    flex-shrink:0;
    display:block;
    width:1.4375rem;
    height:1.4375rem;
    animation:perk-pulse 2.4s ease-in-out infinite, perk-spin 8s linear infinite;
    will-change:filter, transform;
}
.perk__values{
    position:relative;
    display:inline-flex;
}

.perk__value-text{
    position:relative;
    display:inline-block;
    animation:perk-pulse 2.4s ease-in-out infinite;
    will-change:filter;
    font-weight:700;
    font-size:1.875rem;
    line-height:1.2;
    white-space:nowrap;
    background-image:var(--grad-gold);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.perk__value-text--win{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}
.verdict{
    position:absolute;
    top:12.125rem;
    left:27.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.5rem;
    width:24.5625rem;
    height:3.875rem;
    animation:verdict-float 2.6s ease-in-out infinite;
    opacity:0;
    transition:opacity 0.4s ease;
}

.verdict::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    z-index:-1;
    width:26.3961rem;
    height:5.75rem;
    transform:translate(-50%, -50%);
    background-image:var(--verdict-plate);
    background-repeat:no-repeat;
    background-size:100% 100%;
    filter:drop-shadow(0 0 0.5rem rgba(var(--verdict-glow-rgb), 0.65));
}

.verdict--top{
    --verdict-plate:url("/images/duel/badge-top-plate.svg");
    --verdict-text:url("/images/duel/badge-top-text.avif");
    --verdict-glow-rgb:var(--color-win-2-rgb);
}

.verdict--low{
    --verdict-plate:url("/images/duel/badge-low-plate.svg");
    --verdict-text:url("/images/duel/badge-low-text.avif");
    --verdict-glow-rgb:var(--color-lose-2-rgb);
}

.verdict__icon{
    position:relative;
    flex-shrink:0;
    display:block;
    width:1.875rem;
    height:1.875rem;
}
.verdict__text{
    position:relative;
    font-weight:700;
    font-size:1.5rem;
    line-height:1.4;
    white-space:nowrap;
    background-image:var(--verdict-text);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
@media (prefers-reduced-motion: reduce){

    .perk__icon,
    .perk__value-text,
    .verdict{
        animation:none;
    }
}
.main-screen{
    position:relative;
    box-sizing:border-box;
    width:100%;
    height:100%;
    overflow-x:clip;
    overflow-y:visible;
}

.main-screen.show{
    display:block;
}
@media (min-width: 1024px){
    .main-screen{
        width:120rem;
    }
}
.intro{
    position:absolute;
    top:6.25rem;
    right:15rem;
    left:15rem;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:2rem;
}
.intro__title{
    margin-top:-0.90625rem;
    transform-origin:left center;
    animation:title-nudge 6s ease-in-out infinite;
    font-family:var(--font-secondary);
    font-weight:800;
    font-size:4.375rem;
    line-height:1.2;
    white-space:nowrap;
    background-image:var(--grad-title);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.intro__hints{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
}
.hint{
    display:flex;
    align-items:flex-start;
    gap:0.375rem;
    animation:hint-jump 6s ease-in-out infinite, hint-shine 6s ease-in-out infinite;
}
.intro__hints .hint:nth-child(1){
    animation-delay:0.45s;
}

.intro__hints .hint:nth-child(2){
    animation-delay:0.9s;
}

.intro__hints .hint:nth-child(3){
    animation-delay:1.35s;
}

.hint__icon{
    flex-shrink:0;
    display:block;
    width:2rem;
    height:2rem;
}

.hint--item .hint__icon{
    width:1.875rem;
    height:1.875rem;
}
.hint--item{
    margin-right:0.125rem;
}

.hint__text{
    font-size:1.5rem;
    line-height:1.2;
    color:var(--color-grey-4);
}

.hint--pack .hint__text{
    width:8.375rem;
}

.hint--item .hint__text{
    width:8.75rem;
}

.hint--perk .hint__text{
    width:11.9375rem;
}

.hint__accent{
    color:var(--color-sky-1);
}
.duel__swords{
    position:absolute;
    top:22.3125rem;
    left:51.375rem;
    z-index:3;
    display:block;
    width:17.3125rem;
    height:18.8125rem;
    animation:swords-pulse 6s ease-in-out infinite;
    will-change:transform;
}

.duel__swords-img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    --swords-shadow:drop-shadow(0 0.5rem 0.75rem rgba(var(--shadow-ink-rgb), 0.8)) drop-shadow(0 1.125rem 1.875rem rgba(var(--shadow-void-rgb), 0.7));
    filter:var(--swords-shadow);
    animation:swords-glint 6s ease-in-out infinite;
    will-change:filter;
}
.duel__swords-shine{
    position:absolute;
    inset:0;
    overflow:hidden;
    -webkit-mask-image:url("/images/duel/swords.avif");
    mask-image:url("/images/duel/swords.avif");
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    pointer-events:none;
}

.duel__swords-shine::before{
    content:"";
    position:absolute;
    right:0;
    left:0;
    height:45%;
    background-image:linear-gradient(0deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation:swords-sweep 6s ease-in-out infinite;
}
.duel__line{
    content:url("/images/duel/line.svg");
    position:absolute;
    top:39.9375rem;
    display:block;
    width:27rem;
    height:9.125rem;
}

.duel__line--left{
    left:32.4375rem;
}

.duel__line--right{
    right:32.4375rem;
    transform:scaleX(-1);
}
.main-screen__cta{
    position:absolute;
    top:45.75rem;
    left:50%;
    translate:-50% 0;
}
.main-screen__cta-accent{
    color:var(--color-bot-accent);
    text-shadow:0 0 0.0625rem var(--color-white-1);
}

.main-screen__note{
    position:absolute;
    top:52.1875rem;
    left:0;
    width:100%;
    font-weight:700;
    font-size:1.125rem;
    line-height:1.1;
    color:var(--color-grey-4);
    text-align:center;
    white-space:nowrap;
}

.main-screen__note b{
    font-weight:inherit;
    color:var(--color-mint-2);
}
@media (prefers-reduced-motion: reduce){

    .hint,
    .intro__title,
    .duel__swords,
    .duel__swords-img,
    .duel__swords-shine::before{
        animation:none;
    }

    .duel__swords-shine{
        display:none;
    }
}
:root{
    --in-platforms:0s;
    --in-near:0.15s;
    --in-far:0.28s;
    --in-sides:0.6s;
    --in-swords:1.1s;
    --in-locks:1.25s;
    --in-title:1.9s;
    --in-hints:2.25s;
    --in-step:0.14s;
    --in-cta:3.3s;
    --loop-top:3.8s;
    --loop-step:0.45s;
}
.scene__platform,
.scene__platform-edge,
.scene__panel,
.pack,
.pack-name,
.duel__line,
.side,
.lock,
.duel__swords,
.intro__title,
.hint,
.main-screen__cta,
.main-screen__note{
    opacity:0;
}
.main-screen__cta{
    pointer-events:none;
}
.body.show .scene__platform--left,
.body.show .scene__platform-edge--left,
.body.show .pack--left{
    --in-from:translateY(75%);
    animation:in-slide 0.5s ease-out var(--in-platforms) both;
}

.body.show .scene__platform--right,
.body.show .scene__platform-edge--right,
.body.show .pack--right{
    --in-from:scaleX(-1) translateY(75%);
    --in-to:scaleX(-1);
    animation:in-slide 0.5s ease-out var(--in-platforms) both;
}
.body.show .scene__panel--far-left{
    --in-from:translate(-45%, 35%);
    animation:in-slide 0.9s ease-out var(--in-far) both;
}

.body.show .scene__panel--far-right{
    --in-from:scaleX(-1) translate(-45%, 35%);
    --in-to:scaleX(-1);
    animation:in-slide 0.9s ease-out var(--in-far) both;
}

.body.show .scene__panel--near-left{
    --in-from:translate(-45%, 35%);
    animation:in-slide 0.9s ease-out var(--in-near) both;
}

.body.show .scene__panel--near-right{
    --in-from:scaleX(-1) translate(-45%, 35%);
    --in-to:scaleX(-1);
    animation:in-slide 0.9s ease-out var(--in-near) both;
}
.body.show .side--you{
    --in-from:translate(-55%, -18%);
    animation:in-slide 0.7s ease-out var(--in-sides) both;
}

.body.show .side--bot{
    --in-from:translate(55%, -18%);
    animation:in-slide 0.7s ease-out var(--in-sides) both;
}

.body.show .pack-name{
    --in-from:translateY(0.75rem);
    animation:in-slide 0.5s ease-out var(--in-sides) both;
}

.body.show .duel__line--left{
    --in-from:translateX(-60%);
    animation:in-slide 0.6s ease-out var(--in-sides) both;
}

.body.show .duel__line--right{
    --in-from:scaleX(-1) translateX(-60%);
    --in-to:scaleX(-1);
    animation:in-slide 0.6s ease-out var(--in-sides) both;
}
.body.show .lock{
    --in-from:scale(1.35);
    animation:in-slide 0.5s ease-out var(--in-locks) both, lock-glow 3.1s ease-in-out calc(var(--in-locks) + 0.5s) infinite;
}
.body.show .duel__swords{
    --in-from:scale(4.5);
    animation:in-slide 0.45s cubic-bezier(0.7, 0, 0.35, 1) var(--in-swords) both, swords-pulse 6s ease-in-out calc(var(--in-swords) + 0.45s) infinite;
}
.body.show .duel__swords-img{
    animation:swords-glint 6s ease-in-out calc(var(--in-swords) + 0.45s) infinite;
}

.body.show .duel__swords-shine::before{
    animation:swords-sweep 6s ease-in-out calc(var(--in-swords) + 0.45s) infinite;
}
.body.show .intro__title{
    animation:title-in 0.65s linear var(--in-title) both, title-nudge 6s ease-in-out var(--loop-top) infinite;
}

.body.show .hint{
    animation:hint-in 0.6s ease-in-out var(--in-hints) both, hint-jump 6s ease-in-out calc(var(--loop-top) + var(--loop-step)) infinite, hint-shine 6s ease-in-out calc(var(--loop-top) + var(--loop-step)) infinite;
}

.body.show .intro__hints .hint:nth-child(2){
    animation-delay:calc(var(--in-hints) + var(--in-step)), calc(var(--loop-top) + var(--loop-step) * 2), calc(var(--loop-top) + var(--loop-step) * 2);
}

.body.show .intro__hints .hint:nth-child(3){
    animation-delay:calc(var(--in-hints) + var(--in-step) * 2), calc(var(--loop-top) + var(--loop-step) * 3), calc(var(--loop-top) + var(--loop-step) * 3);
}
.body.show .main-screen__cta{
    --in-from:translateY(2rem);
    animation:in-slide 1.1s ease-out var(--in-cta) both, cta-arm 0s linear calc(var(--in-cta) + 1.1s) forwards, btn-nudge 5s ease-in-out calc(var(--in-cta) + 1.1s) infinite;
}
.body.show .main-screen__cta:hover{
    animation:in-slide 1.1s ease-out var(--in-cta) both, cta-arm 0s linear calc(var(--in-cta) + 1.1s) forwards;
}

.body.show .main-screen__note{
    --in-from:translateY(0.75rem);
    animation:in-slide 0.6s ease-out calc(var(--in-cta) + 0.35s) both;
}
@media (prefers-reduced-motion: reduce){

    .scene__platform,
    .scene__platform-edge,
    .scene__panel,
    .pack,
    .pack-name,
    .duel__line,
    .side,
    .lock,
    .duel__swords,
    .intro__title,
    .hint,
    .main-screen__cta,
    .main-screen__note,
    .body.show .scene__platform--left,
    .body.show .scene__platform--right,
    .body.show .scene__platform-edge--left,
    .body.show .scene__platform-edge--right,
    .body.show .scene__panel--far-left,
    .body.show .scene__panel--far-right,
    .body.show .scene__panel--near-left,
    .body.show .scene__panel--near-right,
    .body.show .pack--left,
    .body.show .pack--right,
    .body.show .pack-name,
    .body.show .duel__line--left,
    .body.show .duel__line--right,
    .body.show .side--you,
    .body.show .side--bot,
    .body.show .lock,
    .body.show .duel__swords,
    .body.show .duel__swords-img,
    .body.show .intro__title,
    .body.show .hint,
    .body.show .main-screen__cta,
    .body.show .main-screen__note{
        animation:none;
        opacity:1;
    }
    .body.show .main-screen__cta{
        pointer-events:auto;
    }
    .body.show .duel__swords-shine::before{
        animation:none;
    }
}
.main-screen[data-phase="lobby"] .pack__open,
.main-screen[data-phase="lobby"] .item-card__polygon{
    opacity:0;
}
.main-screen[data-phase="duel"] .lock,
.main-screen[data-phase="result"] .lock{
    animation:lock-vanish 0.8s cubic-bezier(0.4, 0, 0.7, 0.2) both;
    will-change:auto;
}

.main-screen[data-phase="duel"] .lock__body,
.main-screen[data-phase="duel"] .lock__shackle,
.main-screen[data-phase="result"] .lock__body,
.main-screen[data-phase="result"] .lock__shackle{
    animation:none;
}

.main-screen[data-phase="duel"] .pack-name,
.main-screen[data-phase="result"] .pack-name{
    animation:fade-out 0.35s ease both;
}

.main-screen[data-phase="duel"] .pack__closed,
.main-screen[data-phase="result"] .pack__closed{
    opacity:0;
}

.main-screen[data-phase="duel"] .duel__pointer,
.main-screen[data-phase="result"] .duel__pointer{
    opacity:1;
    translate:0 0;
}
.main-screen[data-phase="duel"] .perk,
.main-screen[data-phase="result"] .perk{
    animation:perk-in 0.75s ease-out 0.1s both;
}
.side__spin-sound{
    position:absolute;
    width:0;
    height:0;
    pointer-events:none;
}

.main-screen.is-rolling .side__spin-sound{
    animation:sound-cue 0.1s linear;
}
.verdict__sound{
    position:absolute;
    width:0;
    height:0;
    pointer-events:none;
}

.main-screen.is-played.is-win[data-phase="result"] .verdict--top .verdict__sound,
.main-screen.is-played[data-phase="result"]:not(.is-win) .verdict--low .verdict__sound{
    animation:sound-cue 0.1s linear;
}
.main-screen.is-spark .side__spark{
    animation:spark-flash 1.2s ease-out both;
}
.main-screen[data-phase="duel"] .side__shine::before{
    animation:panel-shine 1.05s cubic-bezier(0.33, 0, 0.3, 1) 0.25s both;
}
.main-screen[data-phase="duel"] .main-screen__note,
.main-screen[data-phase="result"] .main-screen__note{
    animation:fade-out 0.3s ease both;
}
.main-screen[data-phase="duel"] .main-screen__cta,
.main-screen[data-phase="duel"] .main-screen__cta:hover{
    animation:fade-out 0.7s ease both;
    box-shadow:none;
    pointer-events:none;
}

.main-screen[data-phase="duel"] .main-screen__cta:hover::before{
    opacity:0;
    box-shadow:none;
}

.main-screen[data-phase="duel"] .main-screen__cta:hover .btn__text{
    color:var(--color-mint-6);
}
.main-screen[data-phase="result"] .main-screen__cta{
    top:48.25rem;
    animation:fade-in 0.45s ease 0.35s both, btn-nudge 5s ease-in-out 1.2s infinite;
    pointer-events:auto;
}

.main-screen[data-phase="result"] .main-screen__cta:hover{
    animation:fade-in 0.45s ease 0.35s both;
}
.main-screen__cta--result,
.main-screen__cta--replay{
    display:none;
}
.main-screen__cta--replay{
    top:48.25rem;
}

.main-screen[data-phase="result"] .main-screen__cta--lobby{
    display:none;
}
.main-screen.is-win[data-phase="result"] .main-screen__cta--result,
.main-screen[data-phase="result"]:not(.is-win) .main-screen__cta--replay{
    display:inline-flex;
}
.main-screen.is-replay[data-phase="duel"] .main-screen__cta--lobby{
    display:none;
}

.main-screen.is-replay[data-phase="duel"] .main-screen__cta--replay{
    display:inline-flex;
}
.item-card__frame,
.item-card__star,
.item-card__wear,
.item-card__price,
.item-card__weapon,
.item-card__skin{
    opacity:0;
    transition:opacity 0.35s ease 0.15s;
}

.main-screen[data-phase="result"] .item-card__frame,
.main-screen[data-phase="result"] .item-card__star,
.main-screen[data-phase="result"] .item-card__wear,
.main-screen[data-phase="result"] .item-card__price,
.main-screen[data-phase="result"] .item-card__weapon,
.main-screen[data-phase="result"] .item-card__skin,
.main-screen[data-phase="result"] .side__mark{
    opacity:1;
}
.main-screen[data-phase="result"] .pack{
    translate:0 4rem;
    scale:1.12;
}
.main-screen.is-rolling .item-card--result .item-card__art,
.main-screen.is-rolling .side--you .side__run:first-child .item-card:first-child .item-card__art,
.main-screen.is-rolling .side--bot .side__run:last-child .item-card:last-child .item-card__art{
    animation:none;
}
.main-screen[data-phase="result"] .item-card--result .item-card__art{
    scale:0.82;
}
.main-screen[data-phase="result"] .verdict--low{
    opacity:1;
}

.main-screen.is-win[data-phase="result"] .verdict--low{
    opacity:0;
}

.main-screen.is-win[data-phase="result"] .verdict--top{
    opacity:1;
}
.main-screen.is-win[data-phase="result"]{
    --perk-bonus:0.55s;
}

.main-screen.is-win[data-phase="result"] .perk__value-text--base{
    animation:perk-fade-out 0.4s ease-out var(--perk-bonus) both;
}

.main-screen.is-win[data-phase="result"] .perk__value-text--win{
    animation:bonus-pop 0.6s ease-out var(--perk-bonus) both, perk-pulse 2.4s ease-in-out calc(var(--perk-bonus) + 0.6s) infinite;
}

.main-screen.is-win[data-phase="result"] .perk__value{
    animation:perk-bump 0.6s ease-out var(--perk-bonus);
}
.reward-screen{
    position:relative;
    box-sizing:border-box;
    width:100%;
    height:100%;
    overflow:clip;
}
.reward-screen.show{
    display:block;
}
@media (min-width: 1024px){
    .reward-screen{
        width:120rem;
    }
}
.reward__title{
    position:absolute;
    top:6.25rem;
    left:50%;
    translate:-50% 0;
    margin-top:-0.90625rem;
    font-family:var(--font-secondary);
    font-weight:800;
    font-size:4.375rem;
    line-height:1.2;
    white-space:nowrap;
    background-image:var(--grad-title);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.reward__bonus{
    position:absolute;
    top:12.6875rem;
    left:39.9375rem;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    width:40.1875rem;
    height:11.1875rem;
    padding:0 1.875rem;
    border:0.125rem solid transparent;
    border-radius:2.5rem;
    background-image:var(--grad-perk), var(--grad-bonus-edge);
    background-origin:border-box;
    background-clip:padding-box, border-box;
    box-shadow:0 0 0.46875rem var(--color-amber-3);
}
.reward__bonus::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:2.375rem;
    background-image:url("/images/ui/texture-tile.avif");
    background-repeat:repeat;
    background-size:2.1768rem 2.1768rem;
    background-position:center;
    mix-blend-mode:color-burn;
    opacity:0.1;
    pointer-events:none;
}

.reward__bonus-icon{
    position:relative;
    flex-shrink:0;
    display:block;
    width:5.5625rem;
    height:5.5625rem;
}

.reward__bonus-value{
    position:relative;
    font-weight:700;
    font-size:6.0625rem;
    line-height:1.2;
    white-space:nowrap;
    background-image:var(--grad-gold);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.reward__bonus [data-item]{
    display:none;
}

.reward__bonus [data-item].show{
    display:inline;
}
.reward__bonus:not(:has([data-item].show)) [data-item="3"]{
    display:inline;
}
.reward__cta{
    position:absolute;
    top:27rem;
    left:50%;
    translate:-50% 0;
}
.reward__hint{
    position:absolute;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.625rem;
    height:4.4375rem;
    padding:0 1.875rem;
    border:0.125rem solid transparent;
    border-radius:0.875rem;
    background-image:var(--grad-hint), var(--grad-hint-edge);
    background-origin:border-box;
    background-clip:padding-box, border-box;
}
.reward__hint::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:0.75rem;
    background-image:url("/images/ui/texture-tile.avif");
    background-repeat:repeat;
    background-size:var(--hint-tile) var(--hint-tile);
    background-position:center;
    opacity:0.5;
    pointer-events:none;
}

.reward__hint-icon{
    position:relative;
    flex-shrink:0;
    display:block;
    width:2.3125rem;
    height:2.3125rem;
}

.reward__hint-text{
    position:relative;
    flex-shrink:0;
    font-weight:700;
    font-size:1.125rem;
    line-height:1.2;
    color:var(--color-grey-4);
}

.reward__hint-text b{
    font-weight:inherit;
    color:var(--color-sky-1);
}
.podium{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.podium__layer{
    position:absolute;
    display:block;
    max-width:none;
}

.podium__low-body{
    top:52.3044rem;
    left:22.5625rem;
    width:64.7198rem;
    height:59.3206rem;
}

.podium__low-face{
    top:47.4375rem;
    left:39.125rem;
    width:41.7198rem;
    height:12.1956rem;
}
.podium__shadow{
    top:47.4438rem;
    left:42.9913rem;
    width:33.7375rem;
    height:10.6125rem;
    mix-blend-mode:multiply;
}

.podium__high-body{
    top:47.2494rem;
    left:43.9838rem;
    width:32rem;
    height:9.375rem;
}

.podium__high-face{
    top:42.5619rem;
    left:43.9838rem;
    width:32rem;
    height:9.375rem;
}
.pack--podium{
    top:27.9481rem;
    left:40.6988rem;
    width:37.6665rem;
    height:28.4499rem;
}
.content:has(.reward-screen.show) .scene__platform,
.content:has(.reward-screen.show) .scene__platform-edge{
    animation:fade-out 0.5s ease both;
    pointer-events:none;
}
.reward-screen.show{
    --rw-podium:0.1s;
    --rw-pack:0.3s;
    --rw-title:0.45s;
    --rw-bonus:0.6s;
    --rw-lock:1s;
    --rw-cta:1.1s;
    --rw-hint:1.3s;
}

.reward__title,
.reward__bonus,
.reward__cta,
.reward__hint{
    opacity:0;
}
.podium,
.pack--podium{
    opacity:1;
}
.reward__cta{
    pointer-events:none;
}

.body.show .reward-screen.show .podium{
    --in-from:translateY(6rem);
    animation:in-slide 1.1s ease-out var(--rw-podium) backwards;
}

.body.show .reward-screen.show .pack--podium{
    --in-from:translateY(4rem);
    animation:in-slide 1.1s ease-out var(--rw-pack) backwards;
}

.body.show .reward-screen.show .reward__title{
    --in-from:translateY(-1.25rem);
    animation:in-slide 0.6s ease-out var(--rw-title) both;
}
.body.show .reward-screen.show .reward__bonus{
    --in-from:scale(0.75);
    animation:in-slide 0.6s cubic-bezier(0.2, 1.3, 0.45, 1) var(--rw-bonus) both;
}

.body.show .reward-screen.show .reward__cta{
    --in-from:translateY(1.25rem);
    animation:in-slide 0.6s ease-out var(--rw-cta) both, cta-arm 0s linear calc(var(--rw-cta) + 0.6s) forwards, btn-nudge 5s ease-in-out calc(var(--rw-cta) + 0.6s) infinite;
}
.body.show .reward-screen.show .reward__cta:hover{
    animation:in-slide 0.6s ease-out var(--rw-cta) both, cta-arm 0s linear calc(var(--rw-cta) + 0.6s) forwards;
}

.body.show .reward-screen.show .reward__hint{
    --in-from:translateY(0.75rem);
    animation:in-slide 0.5s ease-out var(--rw-hint) both;
}
.reward__bonus-icon{
    animation:perk-pulse 2.4s ease-in-out infinite, perk-spin 8s linear infinite;
    will-change:filter, transform;
}

.reward__bonus-value{
    animation:perk-pulse 2.4s ease-in-out infinite;
    will-change:filter;
}
@media (prefers-reduced-motion: reduce){

    .reward__bonus-icon,
    .reward__bonus-value,
    .body.show .reward-screen.show .podium,
    .body.show .reward-screen.show .pack--podium,
    .body.show .reward-screen.show .reward__title,
    .body.show .reward-screen.show .reward__bonus,
    .body.show .reward-screen.show .reward__cta,
    .body.show .reward-screen.show .reward__cta:hover,
    .body.show .reward-screen.show .reward__hint{
        animation:none;
        will-change:auto;
    }

    .reward__title,
    .reward__bonus,
    .reward__cta,
    .reward__hint{
        opacity:1;
    }

    .reward__cta{
        pointer-events:auto;
    }
}
.reward__lock{
    position:absolute;
    top:2.25rem;
    left:36.8125rem;
    width:6.5rem;
    height:6.5rem;
    transition:opacity 0.25s ease;
}
.auth-screen .reward__bonus{
    z-index:1;
}

.reward__lock-circle,
.reward__lock-shackle{
    position:absolute;
    display:block;
    max-width:none;
}

.reward__lock-circle{
    top:-0.64875rem;
    left:-0.64875rem;
    width:7.79725rem;
    height:7.79725rem;
}

.reward__lock-shackle{
    top:1.2244rem;
    left:1.6019rem;
    width:3.2971rem;
    height:3.4384rem;
}
.reward__line{
    content:url("/images/reward/line.svg");
    position:absolute;
    top:18.4394rem;
    left:59.9375rem;
    display:block;
    width:24.9375rem;
    height:8.0625rem;
    transition:opacity 0.25s ease;
}
.auth-screen:has(.reward__cta:hover) .reward__lock,
.auth-screen:has(.reward__cta:hover) .reward__line{
    opacity:0;
}
.reward__hint--steam{
    top:33.5625rem;
    left:50%;
    translate:-50% 0;
    width:18rem;
    --hint-tile:0.975rem;
}

.reward__hint--steam .reward__hint-text{
    width:12.75rem;
}
.content:has(.auth-screen.show) .scene__panel{
    transition:translate 1.2s cubic-bezier(0.4, 0, 0.2, 1), scale 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.content:has(.auth-screen.show) .scene__panel--far-left{
    translate:8.46875rem 14.78125rem;
    scale:1.5;
}

.content:has(.auth-screen.show) .scene__panel--far-right{
    translate:-8.46875rem 14.78125rem;
    scale:1.5;
}

.content:has(.auth-screen.show) .scene__panel--near-left{
    translate:5.08rem 18.5694rem;
    scale:1.56444;
}

.content:has(.auth-screen.show) .scene__panel--near-right{
    translate:-5.08rem 18.5694rem;
    scale:1.56444;
}
.body.show .auth-screen.show:has(.reward__cta:hover) .pack--podium{
    animation:in-slide 1.1s ease-out var(--rw-pack) backwards, pack-jolt 0.55s ease-out;
}
.body.show .auth-screen.show .reward__lock{
    --in-from:scale(0.4);
    animation:in-slide 0.45s cubic-bezier(0.2, 1.4, 0.45, 1) var(--rw-lock) backwards;
}

.body.show .auth-screen.show .reward__line{
    animation:line-reveal 0.7s ease-in-out calc(var(--rw-lock) + 0.25s) backwards;
}

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

    .body.show .auth-screen.show .reward__lock,
    .body.show .auth-screen.show .reward__line,
    .body.show .auth-screen.show:has(.reward__cta:hover) .pack--podium{
        animation:none;
    }

    .reward__lock,
    .reward__line{
        opacity:1;
    }
}
.activate-screen .reward__title{
    left:46.5rem;
}
.reward__hint--ready{
    top:5.6875rem;
    left:77.5rem;
    width:24.375rem;
    --hint-tile:1.3203rem;
}

.reward__hint--ready .reward__hint-text{
    white-space:nowrap;
    color:var(--color-white-1);
}
.content:has(.activate-screen.show) .scene__platform,
.content:has(.activate-screen.show) .scene__platform-edge{
    display:none;
}
.content:has(.activate-screen.show) .scene__panel{
    transition:none;
}

.content:has(.activate-screen.show) .scene__panel--far-left{
    translate:-3.40625rem 21.03125rem;
    scale:1.5;
}

.content:has(.activate-screen.show) .scene__panel--far-right{
    translate:3.40625rem 21.03125rem;
    scale:1.5;
}

.content:has(.activate-screen.show) .scene__panel--near-left{
    translate:-6.795rem 24.8194rem;
    scale:1.56444;
}

.content:has(.activate-screen.show) .scene__panel--near-right{
    translate:6.795rem 24.8194rem;
    scale:1.56444;
}

.body.show .content:has(.activate-screen.show) .scene__panel--near-left,
.body.show .content:has(.activate-screen.show) .scene__panel--near-right{
    animation:fade-in 1s ease-out var(--in-near) both;
}

.body.show .content:has(.activate-screen.show) .scene__panel--far-left,
.body.show .content:has(.activate-screen.show) .scene__panel--far-right{
    animation:fade-in 1s ease-out var(--in-far) both;
}
.activate-screen{
    --podium-drop:2rem;
    --podium-hover-drop:1.25rem;
}

.activate-screen .podium{
    translate:0 var(--podium-drop);
    transition:translate 0.45s cubic-bezier(0.33, 0.1, 0.2, 1);
}

.activate-screen .pack--podium .pack__layer{
    translate:0 var(--podium-drop);
    transform-origin:50% 80%;
    transition:translate 0.45s cubic-bezier(0.33, 0.1, 0.2, 1), scale 0.45s cubic-bezier(0.33, 0.1, 0.2, 1);
}

.activate-screen:has(.reward__cta:hover) .podium{
    translate:0 calc(var(--podium-drop) + var(--podium-hover-drop));
}

.activate-screen:has(.reward__cta:hover) .pack--podium .pack__layer{
    translate:0 calc(var(--podium-drop) + var(--podium-hover-drop));
    scale:1.08;
}

@media (max-width: 1023.98px){
    .main-screen,
    .reward-screen{
        width:27.5rem;
    }

    .scene{
        right:auto;
        left:calc(50% - 13.75rem);
        width:27.5rem;
        overflow:visible;
    }
    .scene__panel{
        max-width:none;
    }

    .scene__panel--far-left,
    .scene__panel--far-right{
        content:url("/images/bg/panel-2-mob.avif");
        top:10.5625rem;
        width:39.875rem;
        height:62.625rem;
    }

    .scene__panel--far-left{
        left:-22.5rem;
    }

    .scene__panel--far-right{
        right:-22.5rem;
    }

    .scene__panel--near-left,
    .scene__panel--near-right{
        content:url("/images/bg/panel-1-mob.avif");
        top:30.75rem;
        width:44.1875rem;
        height:54.3125rem;
    }

    .scene__panel--near-left{
        left:-26.6875rem;
    }

    .scene__panel--near-right{
        right:-26.6875rem;
    }
    .scene__platform,
    .scene__platform-edge{
        display:none;
    }

    .pedestal{
        display:block;
    }

    .pedestal__base-body{
        content:url("/images/podium/base-body.avif");
        top:47.2338rem;
        left:-13.4375rem;
        width:44.2673rem;
        height:49.1348rem;
    }

    .pedestal__base-face{
        content:url("/images/podium/base-face.avif");
        top:45.375rem;
        left:3.125rem;
        width:21.2673rem;
        height:6.2604rem;
    }

    .pedestal__mid-body{
        content:url("/images/podium/mid-body.avif");
        top:33.525rem;
        left:-12.5125rem;
        width:42.3742rem;
        height:47.5669rem;
    }

    .pedestal__mid-face{
        content:url("/images/podium/mid-face.avif");
        top:31.9438rem;
        left:4.0488rem;
        width:19.3742rem;
        height:5.7111rem;
    }
    .pedestal__top-shadow{
        content:url("/images/podium/top-shadow.svg");
        top:31.5469rem;
        left:5.4381rem;
        width:16.4793rem;
        height:5.7775rem;
    }

    .pedestal__top-body{
        content:url("/images/podium/top-body.avif");
        top:31.8569rem;
        left:6.2975rem;
        width:14.8761rem;
        height:4.4057rem;
    }

    .pedestal__top-face{
        content:url("/images/podium/top-face.avif");
        top:29.6875rem;
        left:6.2975rem;
        width:14.8761rem;
        height:4.4057rem;
    }
    .intro{
        top:5rem;
        right:0;
        left:0;
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    .intro__title{
        margin-top:-0.4663rem;
        transform-origin:center;
        font-size:2.25rem;
    }

    .intro__hints{
        position:absolute;
        top:2.9375rem;
        right:0;
        left:0;
        justify-content:space-between;
        gap:0;
        padding:0 1.25rem;
    }

    .hint{
        gap:0.25rem;
    }

    .hint--item{
        margin-right:0;
    }

    .hint__icon{
        width:1.375rem;
        height:1.375rem;
    }

    .hint--item .hint__icon{
        width:1.25rem;
        height:1.25rem;
    }

    .hint__text{
        font-size:1rem;
    }

    .hint--pack .hint__text{
        width:5.375rem;
    }

    .hint--item .hint__text{
        width:5.75rem;
    }

    .hint--perk .hint__text{
        width:8rem;
    }
    .side{
        top:15.875rem;
        width:12.1875rem;
        height:12.3125rem;
        border-width:0.0625rem;
        border-radius:0.625rem;
    }

    .side--you{
        left:1.25rem;
    }

    .side--bot{
        right:1.25rem;
    }

    .side__body{
        border-radius:0.5625rem;
    }
    .side__reel{
        top:3.7956rem;
        left:0.4281rem;
        transform-origin:0 0;
        transform:scale(0.4939) translateY(var(--reel-offset));
    }
    .side__body::before{
        background-size:0.7537rem 0.7537rem;
        background-position:-0.87891rem -2.42026rem;
    }

    .side__head{
        top:-0.1875rem;
        left:-0.0625rem;
        width:12.1875rem;
        height:3.0625rem;
        gap:0.28125rem;
        border-width:0.0625rem;
        border-radius:0.625rem;
    }

    .side__head::before{
        border-radius:0.5625rem;
        background-size:1.535rem 1.535rem;
    }

    .side--you .side__icon{
        width:1.3583rem;
        height:1.5438rem;
    }

    .side--bot .side__icon{
        width:1.7012rem;
        height:1.3894rem;
    }

    .side__label{
        top:0.04375rem;
        font-size:1.125rem;
    }
    .side__spark{
        top:7.544rem;
        width:0.3457rem;
        height:7.5rem;
        border-radius:0.1729rem;
        filter:drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.85)) drop-shadow(0 0 0.6rem rgba(232, 248, 255, 0.7)) drop-shadow(0 0 1.15rem rgba(180, 224, 255, 0.55));
    }

    .side__spark::before{
        width:4.6rem;
        height:12rem;
    }

    .side--you .side__spark{
        left:-0.25rem;
    }

    .side--bot .side__spark{
        right:-0.25rem;
    }
    .lock{
        top:20.1875rem;
        width:5.625rem;
        height:5.625rem;
    }

    .lock--you{
        left:4.5625rem;
    }

    .lock--bot{
        right:4.5rem;
    }
    .lock__body{
        top:-1.7367rem;
        left:-8.5128rem;
        width:17.2936rem;
        height:23.1133rem;
    }

    .lock__shackle{
        top:-1.0792rem;
        left:-7.538rem;
        width:15.356rem;
        height:21.3007rem;
    }

    .lock__tint{
        top:-3.3946rem;
        left:-5.2095rem;
        width:16.0409rem;
        height:12.4158rem;
    }

    .duel__swords{
        top:19.8125rem;
        left:calc(50% - 2.9375rem);
        width:5.875rem;
        height:6.375rem;
    }

    .duel__line{
        content:url("/images/duel/line-mob.svg");
        top:27.8125rem;
        width:8.0625rem;
        height:5.125rem;
    }

    .duel__line--left{
        left:1.84375rem;
    }

    .duel__line--right{
        right:1.6875rem;
    }
    .pack{
        top:21.7975rem;
        width:18.1938rem;
        height:13.7401rem;
    }

    .pack--left{
        left:4.4081rem;
    }

    .pack--right,
    .pack-name--right{
        display:none;
    }
    .pedestal{
        opacity:0;
    }

    .body.show .pedestal,
    .body.show .pack--left{
        --in-from:translateY(6rem);
        animation:in-slide 1.1s ease-out var(--in-platforms) both;
    }
    .body.show .scene__panel--far-left,
    .body.show .scene__panel--far-right{
        animation:in-slide 0.9s ease-out var(--in-far) both, fade-in 1.8s ease-out var(--in-far) both;
    }

    .body.show .scene__panel--near-left,
    .body.show .scene__panel--near-right{
        animation:in-slide 0.9s ease-out var(--in-near) both, fade-in 1.8s ease-out var(--in-near) both;
    }

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

        .body.show .pedestal,
        .body.show .pack--left{
            animation:none;
        }

        .pedestal{
            opacity:1;
        }
    }

    .pack-name{
        top:32.5625rem;
        width:8.25rem;
        height:2.1875rem;
        border-radius:0.625rem;
    }

    .pack-name::before{
        border-radius:0.5rem;
    }

    .pack-name--left{
        left:calc(50% - 4.125rem);
    }

    .pack-name__text{
        font-size:1rem;
    }
    .main-screen__cta{
        top:39.75rem;
        width:25rem;
    }

    .main-screen__note{
        top:46rem;
        font-size:1rem;
    }
    .content[data-phase="duel"] .scene__panel--far-left{
        translate:-7.5rem 0;
    }

    .content[data-phase="duel"] .scene__panel--far-right{
        translate:7.5rem 0;
    }

    .content[data-phase="duel"] .scene__panel--near-left,
    .content[data-phase="duel"] .scene__panel--near-right{
        translate:0 7.5rem;
    }
    .pedestal{
        transition:translate 0.8s cubic-bezier(0.33, 0.1, 0.2, 1);
    }

    .content[data-phase="duel"] .pedestal{
        translate:0 2.5rem;
    }

    .main-screen[data-phase="duel"] .pack{
        translate:0 2.5rem;
        scale:1;
    }
    .content[data-phase="result"] .pedestal{
        translate:0 3.5rem;
    }

    .main-screen[data-phase="result"] .pack{
        translate:0 3.5rem;
        scale:1;
    }

    .perk{
        transition:translate 0.8s cubic-bezier(0.33, 0.1, 0.2, 1);
    }

    .main-screen[data-phase="result"] .perk{
        translate:0 1rem;
    }
    .duel__swords{
        transition:scale 0.5s ease;
    }

    .main-screen[data-phase="duel"] .duel__swords,
    .main-screen[data-phase="result"] .duel__swords{
        scale:0.6596;
    }
    .duel__pointer{
        top:21.63rem;
        width:2.9rem;
        height:3.2375rem;
    }

    .duel__pointer--left{
        left:0.3rem;
        translate:-1.85rem 0;
    }

    .duel__pointer--right{
        right:0.3rem;
        translate:1.85rem 0;
    }
    .item-card__price-value{
        font-size:1.8rem;
    }

    .item-card__price-value::before{
        width:1.5rem;
        height:1.65rem;
    }
    .perk{
        top:34.3125rem;
        z-index:2;
    }

    .perk__value{
        margin-top:0;
        height:3.3125rem;
        padding:0 1.5rem;
        gap:0.625rem;
        border-radius:0.875rem;
    }

    .perk__icon{
        width:1.5rem;
        height:1.5rem;
    }

    .perk__value-text{
        font-size:1.4375rem;
    }

    .perk__label{
        order:1;
        margin-top:0.9375rem;
        font-size:1rem;
    }

    .main-screen[data-phase="result"] .perk__label{
        opacity:0;
    }
    .verdict{
        top:13.375rem;
        left:1.25rem;
        transform-origin:0 0;
        scale:0.4962;
    }
    .verdict__text{
        font-size:1.8rem;
    }
    .side__mark{
        height:1.0625rem;
        padding:0 0.25rem;
        border-width:0.0625rem;
        border-radius:0.3125rem;
        box-shadow:0 0 0.3125rem rgba(var(--role-glow-rgb), 0.8), 0 0 0.625rem rgba(var(--role-glow-rgb), 0.5), inset 0 0 0.125rem var(--color-mint-7);
        font-size:0.6875rem;
    }

    .side--you .side__mark{
        left:-0.5625rem;
    }

    .side--bot .side__mark{
        right:-0.5625rem;
    }
    .main-screen__cta--replay{
        top:39.75rem;
    }
    .main-screen[data-phase="result"] .main-screen__cta{
        top:39.75rem;
    }
    .podium{
        display:none;
    }

    .content:has(.auth-screen.show) .pedestal{
        translate:0 -2.5288rem;
    }

    .content:has(.activate-screen.show) .pedestal{
        translate:0 -6.1538rem;
    }
    .pack--podium{
        left:4.4081rem;
        width:18.1938rem;
        height:13.7401rem;
    }

    .auth-screen .pack--podium{
        top:19.2063rem;
    }

    .activate-screen .pack--podium{
        top:15.5813rem;
    }
    .content:has(.auth-screen.show) .scene__panel--far-left,
    .content:has(.auth-screen.show) .scene__panel--far-right{
        translate:0 12.1875rem;
        scale:1;
    }

    .content:has(.auth-screen.show) .scene__panel--near-left{
        translate:2.5rem -3.75rem;
        scale:1;
    }

    .content:has(.auth-screen.show) .scene__panel--near-right{
        translate:-2.5rem -3.75rem;
        scale:1;
    }

    .content:has(.activate-screen.show) .scene__panel--far-left{
        translate:-8.75rem 12.1875rem;
        scale:1;
    }

    .content:has(.activate-screen.show) .scene__panel--far-right{
        translate:8.75rem 12.1875rem;
        scale:1;
    }

    .content:has(.activate-screen.show) .scene__panel--near-left{
        translate:2.5rem 10rem;
        scale:1;
    }

    .content:has(.activate-screen.show) .scene__panel--near-right{
        translate:-2.5rem 10rem;
        scale:1;
    }
    .reward__title{
        top:8.3125rem;
        margin-top:-0.4663rem;
        font-size:2.25rem;
    }
    .activate-screen .reward__title{
        left:50%;
        margin-top:-0.3883rem;
        font-size:1.875rem;
    }
    .reward__bonus{
        top:11.875rem;
        left:1.25rem;
        width:25rem;
        height:5.4375rem;
        gap:0.625rem;
        padding:0 1.875rem;
        border-radius:0.875rem;
    }

    .reward__bonus::before{
        border-radius:0.75rem;
        background-size:1.3542rem 1.3542rem;
    }

    .reward__bonus-icon{
        width:2.75rem;
        height:2.75rem;
    }

    .reward__bonus-value{
        font-size:3.3125rem;
    }
    .reward__lock{
        top:3.4375rem;
        left:50%;
        translate:-50% 0;
        width:3.75rem;
        height:3.75rem;
    }

    .reward__lock-circle{
        top:-0.7713rem;
        left:-0.7713rem;
        width:5.2917rem;
        height:5.2917rem;
    }

    .reward__lock-shackle{
        top:0.7063rem;
        left:0.9238rem;
        width:1.9021rem;
        height:1.9838rem;
    }
    .reward__line{
        content:url("/images/reward/line-mob.svg");
        top:18.625rem;
        left:3.21875rem;
        width:10.59375rem;
        height:15.5625rem;
    }
    .reward__cta{
        top:34.6875rem;
        width:25rem;
    }

    .reward__hint--steam,
    .reward__hint--ready{
        top:40.625rem;
        right:auto;
        left:1.25rem;
        translate:0 0;
        width:25rem;
        --hint-tile:1.3542rem;
    }

    .reward__hint{
        height:4.4375rem;
        gap:0.625rem;
        padding:0 1.875rem;
    }
    .reward__hint--steam .reward__hint-text{
        width:15rem;
    }
    .footer{
        height:auto;
        padding:0.625rem 1.25rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    }

    .footer__content{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0.5rem;
        height:auto;
    }

    .footer__logo{
        display:none;
    }
    .footer__copy,
    .footer__terms{
        position:static;
        right:auto;
        left:auto;
        transform:none;
    }
    .footer__terms{
        order:-1;
        gap:1rem;
        font-size:1rem;
    }

    .footer__copy{
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:0.625rem;
        font-size:0.625rem;
    }
}