footer.footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 48px 16px 32px;
}
footer.footer h2 {
        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 18px;
        line-height: 12px;
        letter-spacing: 0;
    }
footer.footer .socials {
        margin-top: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
footer.footer .socials a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            border-radius: 5px;
            background-color: #37393f;
        }
footer.footer .socials a img {
                width: 24px;
                display: block;
            }
footer.footer .socials a + a {
            margin-left: 8px;
        }
footer.footer .copyright {
        margin-top: 8px;
        color: var(--t2-color-secondary);
        font-family: T2 Rooftop;
        font-weight: 500;
        font-size: 12px;
        line-height: 12px;
        letter-spacing: 0;
    }


    .layout.root {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--t2-color-bg-page);
    }
.layout .card {
        width: 100%;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        border-radius: var(--t2-radius-lg);
        background-color: var(--t2-color-bg-card);
    }
.layout .content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }


    button.btn-primary {
        width: 100%;
        padding: 16px;
        border-radius: var(--t2-radius-lg);
        border: none;
        background-color: var(--t2-color-accent);
        color: #000000;
        cursor: pointer;
        text-align: center;

        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
    }
button.btn-secondary {
        width: 100%;
        padding: 16px;
        border-radius: var(--t2-radius-lg);
        border: none;
        background-color: var(--t2-color-primary);
        color: #000000;
        cursor: pointer;
        text-align: center;

        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
    }

.first-screen {
    display: flex;
    flex-direction: column;
    border-top-left-radius: var(--t2-radius-lg);
    border-top-right-radius: var(--t2-radius-lg);
    overflow: hidden;

    background: url(/media/intro_bg.f8ec3c069868752d1d62.webp) no-repeat top center;
    background-size: contain;
}
.first-screen .card {
        margin-top: 124px;
        border-top-left-radius: var(--t2-radius-lg);
        border-top-right-radius: var(--t2-radius-lg);
        position: relative;
        top: -12px;
        background: var(--t2-color-bg-card);
    }
.first-screen .card .tiny {
            padding: 0 12px;
        }
.first-screen .title {
        margin-top: 12px;
        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 22px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: var(--t2-color-primary);
    }
.first-screen .play-action {
        margin-top: 16px;
    }
.first-screen .rules {
        margin-top: 32px;
        padding: 24px 12px 40px;
        background: #ffffff;
        border-radius: var(--t2-radius-lg);
    }
.first-screen .rules-card {
        background: #f2f3f5;
        border-radius: var(--t2-radius-lg);
        color: #1f2229;
        padding: 12px;
    }
.first-screen .rules-card .rules-title {
            font-family: T2 Halvar Breit;
            font-weight: 800;
            font-size: 24px;
            line-height: 22px;
            letter-spacing: 0px;
            text-transform: uppercase;
        }
.first-screen .rules-card .rules-list {
            font-family: T2 Rooftop;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            letter-spacing: 0px;
        }
.first-screen .rules-card .rules-list li {
                margin-top: 8px;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
            }
.first-screen .rules-card .rules-list li span + p {
                    margin-left: 8px;
                }
.first-screen .rules-card .rules-cta {
            margin-top: 8px;
        }

.game-intro {
    background: #000000;
    border-radius: 12px;

    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    max-width: calc(400px - 24px);
}
.game-intro .title {
        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 22px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #ffffff;
    }
.game-intro p {
        margin-top: 8px;

        font-family: T2 Rooftop;
        font-weight: 400;
        font-style: Regular;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }
.game-intro button {
        margin-top: 16px;
    }

.game-screen {
    position: relative;
}

.game-screen .ui {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
    }

.game-screen .ui .hp {
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            align-items: center;
        }

.game-screen .ui .hp .row {
                display: flex;
                justify-content: center;
                align-items: flex-end;
            }

.game-screen .ui .hp .life {
                background: #ffffff;
                width: 16px;
                border-radius: 5px;
            }

.game-screen .ui .hp .life.active {
                    background: #00bfff;
                }

.game-screen .ui .hp .life:nth-child(1) {
                    height: 16.8px;
                }

.game-screen .ui .hp .life:nth-child(2) {
                    height: 25.2px;
                }

.game-screen .ui .hp .life:nth-child(3) {
                    height: 33.6px;
                }

.game-screen .ui .hp .life:nth-child(4) {
                    height: 42px;
                }

.game-screen .ui .hp .life + .life {
                margin-left: 3px;
            }

.game-screen .ui .hp span {
                margin-top: 2px;
                font-family: T2 Halvar Breit;
                font-weight: 800;
                font-size: 16px;
                line-height: 100%;
                letter-spacing: 0;
                text-align: center;
                text-transform: uppercase;
            }

.game-screen .ui .score {
            top: 12px;
            right: 12px;
            background: rgba(0,0,0,0.70196);
            padding: 14px 20px;
            border-radius: 32px;
            display: flex;
            align-items: center;
            flex-direction: column;

            font-family: T2 Halvar Breit;
            font-weight: 800;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0;
            text-transform: uppercase;
        }

.game-screen .container {
        position: relative;
        width: 100%;
        height: 100vh;
        /* Exclude browser UI height */
        height: 100dvh;
        height: calc(1vh * 100);
        height: calc(var(--vh, 1vh) * 100);
        max-height: 600px;
        border-radius: 12px;
        overflow: hidden;
        background: url(/media/sky.2b9a7f460b2df023d8ef.webp) no-repeat center center;
        background-size: cover;

        display: flex;
        flex-direction: column;
        justify-content: bottom;
    }

.game-screen .container .item {
            position: absolute;
            width: 47px;
            height: 47px;
            -o-object-fit: contain;
               object-fit: contain;
        }

.game-screen .container .vyshka {
            position: relative;
            margin-top: auto;
            width: 100px;
            bottom: -20px;
            -o-object-fit: contain;
               object-fit: contain;
            transform-origin: bottom;
            left: calc(50%);
            transform: translateX(-50%);
        }

.game-screen .container .earth {
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

.game-screen .container img.mode-changed {
            display: block;
            position: absolute;
            width: 100%;
            -o-object-fit: contain;
               object-fit: contain;
            top: 50%;
            transform: translateY(-50%);

            animation: modeChangedAnim 0.5s ease-in-out forwards;
        }

.game-screen .slider {
        position: absolute;
        z-index: 1;
        bottom: 32px;
        width: 92%;
        margin: 0 auto;
        left: 0;
        right: 0;
        height: 6px;
        border-radius: 3px;
        background: #ffffff;
        outline: none;
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
    }

.game-screen .slider::-webkit-slider-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ffffff;
            cursor: pointer;

            -webkit-appearance: none;

                    appearance: none;
        }

.game-screen .slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #ffffff;
            cursor: pointer;
            border: none;

            -moz-appearance: none;

                 appearance: none;
        }

@keyframes modeChangedAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.game-over {
    background: #000000;
    border-radius: 12px;

    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px;
    max-width: calc(400px - 24px);
}
.game-over .title {
        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 22px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #ffffff;
    }
.game-over p {
        margin-top: 8px;

        font-family: T2 Rooftop;
        font-weight: 400;
        font-style: Regular;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }
.game-over button {
        margin-top: 16px;
    }
.game-over button + button {
        margin-top: 8px;
    }

.end-screen {
    background: #000000;
    margin: 0 6px;
}
.end-screen img {
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
    }
.end-screen img:first-child {
            margin-top: -16px;
            position: relative;
            top: 16px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
.end-screen h1 {
        font-family: T2 Halvar Breit;
        font-weight: 800;
        font-size: 22px;
        line-height: 20px;
        letter-spacing: 0;
        text-transform: uppercase;
    }
.end-screen p {
        font-family: T2 Rooftop;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }
.end-screen .header {
        padding: 12px 0;
        border-radius: 12px;
        background: #000000;
        position: relative;
    }
.end-screen .header h1 {
            color: #ffffff;
            padding: 0 6px;
        }
.end-screen .header button {
            margin-top: 16px;
        }
.end-screen .card-container {
        margin-top: 8px;
        background: #f2f3f5;
        border-radius: 12px;
        padding: 12px;

        color: #000000;
    }
.end-screen .card-container p {
            margin-top: 27px;
        }
.end-screen .card-container + img {
        margin-top: 8px;
    }
.end-screen img + .card-container p {
        margin-top: 43px;
    }
.end-screen .content {
        margin-top: 20px;
        padding: 0 6px;
    }
.end-screen .content p {
            margin-top: 32px;
        }
.end-screen .actions {
        margin-top: 20px;
    }
.end-screen .actions button + button {
            margin-top: 8px;
        }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    line-height: 1.3em;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

@font-face {
    font-family: "T2 Rooftop";
    font-weight: 400;
    src: url(/fonts/t2-Rooftop-Regular.6a3b44050c547a826710.woff2) format("woff2"),
        url(/fonts/t2-Rooftop-Regular.531df591cdc087decb9b.woff) format("woff");
}

@font-face {
    font-family: "T2 Rooftop";
    font-weight: 500;
    src: url(/fonts/t2-Rooftop-Medium.89314c5b2dca4a37ec64.woff2) format("woff2"),
        url(/fonts/t2-Rooftop-Medium.aa75b922295b522e4008.woff) format("woff");
}

@font-face {
    font-family: "T2 Halvar Breit";
    font-weight: 800;
    src: url(/fonts/HalvarBreitt2-XBd.150bdce2d8a5cfb01923.woff2) format("woff2"),
        url(/fonts/HalvarBreitt2-XBd.f2d62c4638bbb5bbcd19.woff) format("woff");
}

:root {
    --t2-color-bg-page: #1d1d1d;
    --t2-color-bg-card: #000000;
    --t2-color-primary: #ffffff;
    --t2-color-secondary: #b3b3b3;
    --t2-color-accent: #a7fc00;

    --t2-radius-lg: 12px;
    --t2-radius-md: 12px;
    --t2-radius-sm: 8px;

    --t2-font-size-title: 28px;
    --t2-font-size-subtitle: 18px;
    --t2-font-size-body: 16px;
    --t2-font-size-caption: 13px;

    --t2-line-height-title: 1.2;
    --t2-line-height-body: 1.5;
    --t2-line-height-caption: 1.4;
}

html {
    background: black;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "T2 Rooftop", -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, "SF Pro Display", sans-serif;
    letter-spacing: 0;
    font-stretch: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--t2-color-primary);
    background-color: var(--t2-color-bg-page);
    color: var(--t2-color-primary);
    line-height: var(--t2-line-height-body);
}

.no-whitespace {
    white-space: nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--t2-line-height-title);
}