html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400
}

ul {
    list-style: none
}

button,
input,
select,
textarea {
    margin: 0
}

html {
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent
}

*,
*:before,
*:after {
    box-sizing: inherit
}

img,
video {
    max-width: 100%;
    height: auto
}

iframe {
    border: 0
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

td,
th {
    padding: 0
}

td:not([align]),
th:not([align]) {
    text-align: left
}

a {
    text-decoration: none
}

img {
    display: block
}

button {
    padding: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: inherit
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none
}

::-ms-clear {
    display: none
}

html {
    --ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
    --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
    --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
    --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
    --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
    --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
    --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
    --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
    --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
    --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
    --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
    --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    --ease-in-out-quart: cubic-bezier(.77, 0 .175, 1);
    --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
    --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out-quint: cubic-bezier(.86, 0 .07, 1);
    --ease-in-sine: cubic-bezier(.47, 0 .745, .715);
    --ease-out-sine: cubic-bezier(.39, .575, .565, 1);
    --ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);
    --ease-in-back: cubic-bezier(.6, .28, .735, .045);
    --ease-out-back: cubic-bezier(.1, 1.1, .1, 1.01);
    --ease-in-out-back: cubic-bezier(.68, .55, .265, 1.55);
    --ease-out-swift: cubic-bezier(.55, 0, .1, 1);
    --ease-out-snap: cubic-bezier(0, .96, .22, 1);
    --ease-out-snap-2: cubic-bezier(0, .975, 0, 1)
}

html {
    --color-black: #000;
    --color-white: #fff;
    --color-yellow-a: #f1c40f;
    --color-yellow-b: #f39c12;
    --color-green-a: #2ecc71;
    --color-green-b: #27ae60;
    --color-red-a: #e74c3c;
    --color-red-b: #c0392b;
    --color-dark-blue-a: #34495e;
    --color-dark-blue-b: #2c3e50;
    --color-light-grey-a: #ecf0f1;
    --color-light-grey-b: #bdc3c7;
    --color-dark-grey-a: #919496;
    --color-dark-grey-b: #333;
    --color-purple-a: #9b59b6;
    --color-purple-b: #8e44ad;
    --color-orange-a: #e67e22;
    --color-orange-b: #d35400;
    --color-blue-a: #3498db;
    --color-blue-b: #2980b9;
    --color-dark-green-a: #2d5a58;
    --color-dark-green-b: #234847;
    --color-darkest-green-a: #142524;
    --color-darkest-green-b: #0d1a1a
}

html {
    --font-size-xxl: 2.441rem;
    --font-size-xl: 1.953rem;
    --font-size-l: 1.563rem;
    --font-size-m: 1.25rem;
    --font-size-s: .9rem;
    --font-size-xs: .8rem;
    --font-size-xxs: .6rem;
    --font-family: "Avenir Next Rounded Pro";
    -webkit-text-size-adjust: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--font-family);
    font-size: clamp(16px, 16px + .1vw, 22px);
    font-weight: 700
}

html h1,
html h2,
html h3,
html button {
    font-weight: 700
}

@font-face {
    font-family: Avenir Next Rounded Pro;
    src: url(./AvenirNextRoundedPro-Bold.woff2) format("woff2"), url(./AvenirNextRoundedPro-Bold.woff) format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    60% {
        transform: translateY(-15px)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1)
    }
}

@keyframes rubber {
    0% {
        transform: scale(1)
    }
    30% {
        transform: scaleX(1.25) scaleY(.75)
    }
    40% {
        transform: scaleX(.75) scaleY(1.25)
    }
    60% {
        transform: scaleX(1.15) scaleY(.85)
    }
    to {
        transform: scale(1)
    }
}

@keyframes shake {
    0%,
    to {
        transform: translate(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-10px)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate(10px)
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    to {
        transform: rotate(0)
    }
}

@keyframes wobble {
    0% {
        transform: translate(0)
    }
    15% {
        transform: translate(-25%) rotate(-5deg)
    }
    30% {
        transform: translate(20%) rotate(3deg)
    }
    45% {
        transform: translate(-15%) rotate(-3deg)
    }
    60% {
        transform: translate(10%) rotate(2deg)
    }
    75% {
        transform: translate(-5%) rotate(-1deg)
    }
    to {
        transform: translate(0)
    }
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    80% {
        transform: rotate(60deg) translateY(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }
    to {
        transform: translateY(700px)
    }
}

html,
body {
    -ms-scroll-chaining: none;
    overscroll-behavior: none
}

html {
    --banner-ad-height: 50px;
    --border-radius: 35px
}

html *:nth-child(1) {
    --index: 1
}

html *:nth-child(2) {
    --index: 2
}

html *:nth-child(3) {
    --index: 3
}

html *:nth-child(4) {
    --index: 4
}

html *:nth-child(5) {
    --index: 5
}

html *:nth-child(6) {
    --index: 6
}

html *:nth-child(7) {
    --index: 7
}

html *:nth-child(8) {
    --index: 8
}

html *:nth-child(9) {
    --index: 9
}

body,
.input-capture {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: auto;
    background-image: url(./Pattern.png);
    background-size: 500px;
    font-size: var(--font-size-s);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body.banner-displayed,
.input-capture.banner-displayed {
    padding-bottom: var(--banner-ad-height)
}

[data-animations=false] * {
    animation: none !important
}

.viewport {
    display: flex;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    width: 100%;
    max-width: 375px;
    height: 100%;
    max-height: 667px;
    border-radius: 15px;
    box-shadow: 0 10px 20px #00000017, 0 6px 6px #00000021
}

[data-fullscreen=true] .viewport {
    max-width: initial;
    max-height: initial;
    border-radius: initial;
    box-shadow: none
}

.viewport>canvas {
    position: absolute
}

.view {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none
}

.view--visible {
    display: flex
}

[data-transitions=false] .view--visible {
    display: none
}

.view.end-screen:before,
.view.store:before {
    height: 10vh;
    content: ""
}

.view.skins {
    justify-content: center
}

.view.skins .view__footer {
    flex-grow: initial
}

.view__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    width: 100%;
    max-width: 425px
}

[data-current-view=Home] .home,
[data-current-view=SkinSelector] .skin-selector,
[data-current-view=Store] .store,
[data-current-view=Game] .game,
[data-current-view=GameOver] .game-over,
[data-current-view=EndScreen] .end-screen {
    display: flex;
    pointer-events: all
}

.debug-tools {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    pointer-events: none
}

.debug-tools>div {
    display: flex;
    flex-direction: row
}

.debug-tools canvas {
    margin-left: 25px;
    margin-top: 25px;
    position: relative;
    border-radius: 15px;
    box-shadow: 0 10px 20px #00000017, 0 6px 6px #00000021
}

nav {
    display: none;
    position: fixed;
    z-index: 999;
    bottom: 15px;
    left: 15px;
    flex-direction: column;
    padding: 20px;
    background: #0b1415;
    border-radius: 15px;
    box-shadow: 0 10px 20px #00000017, 0 6px 6px #00000021;
    font-family: var(--font-family)
}

[data-debug=true] nav {
    display: flex
}

.navigation__link {
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--color-white)
}

.navigation__link:hover {
    color: var(--color-green-a)
}

[data-store=false] .navigation__link[href=store] {
    display: none
}

[data-current-view="Home home"] .navigation__link--Home home {
    color: var(--color-yellow-b);
    pointer-events: none
}

[data-current-view="SkinSelector skin-selector"] .navigation__link--SkinSelector skin-selector {
    color: var(--color-yellow-b);
    pointer-events: none
}

[data-current-view="Store store"] .navigation__link--Store store {
    color: var(--color-yellow-b);
    pointer-events: none
}

[data-current-view="Game game"] .navigation__link--Game game {
    color: var(--color-yellow-b);
    pointer-events: none
}

[data-current-view="GameOver game-over"] .navigation__link--GameOver game-over {
    color: var(--color-yellow-b);
    pointer-events: none
}

[data-current-view="EndScreen end-screen"] .navigation__link--EndScreen end-screen {
    color: var(--color-yellow-b);
    pointer-events: none
}

.splashscreen {
    display: flex;
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-black);
    transition: opacity 1s var(--ease-out-swift);
    pointer-events: none;
    perspective: 200px
}

.splashscreen svg {
    max-width: 200px;
    width: 100%;
    opacity: 0;
    transform: translateZ(-5px);
    fill: var(--color-white);
    transition: opacity 2s var(--ease-out-swift), transform 2s var(--ease-out-swift)
}

.splashscreen--enter svg {
    opacity: 1;
    transform: translateZ(0)
}

.splashscreen--hidden {
    opacity: 0;
    transition-delay: .75s
}

.splashscreen--hidden svg {
    opacity: 0;
    transform: translateZ(-5px)
}

.button {
    --color-a: var(--color-green-a);
    --color-b: var(--color-green-b);
    display: flex;
    position: relative;
    z-index: 0;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-s);
    color: var(--color-white);
    cursor: pointer;
    text-transform: uppercase
}

.button .button__content,
.button .shadow {
    transition: opacity .25s var(--ease-out-swift)
}

.button .button__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.button svg {
    z-index: 3;
    width: 70%;
    height: 70%;
    fill: var(--color-white)
}

.button--default .button__content,
.button--round .button__content,
.button--purchase .button__content {
    background: var(--color-a);
    box-shadow: 0 5px 0 var(--color-b);
    text-shadow: 0 2px 0 var(--color-b);
    color: #fff
}

.button--default .button__content:hover,
.button--round .button__content:hover,
.button--purchase .button__content:hover {
    box-shadow: 0 3.75px 0 var(--color-b);
    transform: translateY(1.25px)
}

.button--default .button__content:active,
.button--round .button__content:active,
.button--purchase .button__content:active {
    box-shadow: 0 1.25px 0 var(--color-b);
    transform: translateY(3.75px)
}

.button--default .button__content {
    min-width: 120px;
    padding: 10px 20px;
    border-radius: 25px
}

.button--disabled {
    pointer-events: none
}

.button--disabled .button__content,
.button--disabled .shadow--button {
    opacity: .25
}

.button--rectangle .button__content {
    width: 50px;
    height: 35px;
    border-radius: 10px;
    background: var(--color-a);
    box-shadow: 0 4px 0 var(--color-b);
    text-shadow: 0 2px 0 var(--color-b);
    color: #fff
}

.button--rectangle .button__content:hover {
    box-shadow: 0 3px 0 var(--color-b);
    transform: translateY(1px)
}

.button--rectangle .button__content:active {
    box-shadow: 0 1px 0 var(--color-b);
    transform: translateY(3px)
}

.button--rectangle .shadow--button {
    border-radius: 10px;
    transform: translateY(7px)
}

.button--round .button__content,
.button--round .shadow--button {
    border-radius: 50%
}

.button--purchase {
    width: 100%
}

.button--purchase .button__content {
    padding: 15px 20px;
    border: 2px solid var(--color-white)
}

.button--fixed-width {
    min-width: 230px
}

.shadow {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 25px;
    content: ""
}

.shadow--button {
    z-index: -1;
    background: rgba(0, 0, 0, .2);
    border-radius: 25px;
    transform: translateY(10px)
}

.shadow--icon {
    display: flex;
    z-index: 1;
    align-items: center;
    justify-content: center;
    transform: translateY(3px)
}

.shadow--icon svg {
    fill: var(--color-b)
}

.progress {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    width: 150px;
    height: 25px;
    background: rgba(0, 0, 0, .1);
    border-radius: var(--border-radius);
    will-change: transform
}

.progress .progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(-100%);
    transition: transform 1s var(--ease-out-back) .25s;
    content: ""
}

.progress .progress__bar:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 3px);
    border-radius: var(--border-radius);
    transform: translate(calc((100 - var(--progress)) * -1%));
    content: "";
    background: var(--color-yellow-a);
    box-shadow: 0 3px 0 var(--color-yellow-b)
}

.progress--only-radius-right {
    border-radius: 0;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}

.progress--only-radius-right .progress__bar:before {
    border-radius: 0;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}

.grab {
    cursor: grab
}

.pointer {
    cursor: pointer
}

.grabbing {
    cursor: grabbing
}

.joystick {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    transform: translate(var(--position));
    pointer-events: none
}

.joystick__bounds {
    display: flex;
    position: absolute;
    top: -50%;
    left: -50%;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .15);
    border-radius: 50%;
    transform: scale(0);
    transition: transform .5s var(--ease-out-swift)
}

[data-current-view=Game] .joystick--active .joystick__bounds {
    transform: scale(1)
}

.joystick__stick {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, .75);
    border-radius: 50%;
    transform: translate(var(--direction))
}

.joystick--active .joystick__stick {
    transition: none
}

.header {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: var(--font-size-s)
}

.header__coins {
    margin-left: 4px;
    color: var(--color-light-grey-a);
    will-change: contents
}

[data-current-view=Game] .header__coins,
[data-current-view=GameOver] .header__coins {
    color: #00000059
}

.game-title {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    opacity: 0;
    transform: scale(.95);
    transition: transform .5s var(--ease-out-swift), opacity .5s var(--ease-out-swift);
    pointer-events: none
}

.game-title img {
    height: 100%
}

[data-current-view=Home] .game-title,
[data-current-view=SkinSelector] .game-title,
[data-current-view=Store] .game-title,
[data-current-view=EndScreen] .game-title {
    opacity: 1;
    transform: scale(1);
    transition: transform .5s var(--ease-out-swift), opacity .5s var(--ease-out-swift)
}

.spritesheet {
    position: relative;
    overflow: visible;
    overflow: hidden;
    width: 20px;
    height: 20px
}

.spritesheet:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 800%;
    height: 800%;
    background-image: url(./Coin.png);
    background-size: 100%;
    transform: var(--translate);
    will-change: transform;
    content: ""
}

.placeholder {
    display: none;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: white;
    font-size: var(--font-size-s);
    text-align: center;
    text-transform: uppercase
}

.placeholder strong {
    font-size: var(--font-size-l)
}

.fb-warning-save {
    display: none;
    position: absolute;
    z-index: 900;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-transform: none;
    background: rgba(0, 0, 0, .2);
    font-size: var(--font-size-s);
    text-align: center;
    text-transform: uppercase
}

.fb-warning-save .warning-save-popin {
    background: var(--color-white);
    color: var(--color-black);
    border-radius: 10px;
    padding: 2em;
    max-width: 90vw
}

.fb-warning-save button {
    text-transform: uppercase;
    font-size: inherit;
    padding: .5em;
    margin-top: 1em;
    cursor: pointer;
    border-radius: 10px;
    color: var(--color-white);
    background: var(--color-blue-b)
}

body[data-fb-warning-save] .fb-warning-save {
    display: flex
}

.fb-spinner {
    display: none;
    position: absolute;
    z-index: 900;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .93);
    font-size: var(--font-size-s);
    text-align: center;
    text-transform: uppercase
}

body[data-fb-spinner] .fb-spinner {
    display: flex
}

.fb-spinner figure {
    width: 50px;
    max-width: 80vw;
    height: 50px;
    max-height: 80vw;
    border: 4px solid transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 500px;
    animation: rotate .6s linear infinite
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

[data-placeholder=Advertisement] .advertisment,
[data-placeholder=Share] .share,
[data-placeholder=Payment] .payment {
    display: flex
}

.button--ad {
    --color-a: var(--color-yellow-a);
    --color-b: var(--color-yellow-b)
}

[data-advertisment=false] .button--ad {
    display: none
}

.button--coins {
    --color-a: var(--color-red-a);
    --color-b: var(--color-red-b)
}

.button--coins .spritesheet {
    width: 15px;
    height: 15px
}

.device-orientation {
    display: flex;
    position: fixed;
    flex-direction: column;
    z-index: 100;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-darkest-green-b);
    transition: opacity 1s var(--ease-out-swift);
    pointer-events: none;
    display: none;
    visibility: hidden
}

.device-orientation h3 {
    font-size: var(--font-size-m);
    margin-bottom: 4px;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
    color: #fff
}

.device-orientation p {
    font-size: var(--font-size-s);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    color: var(--color-yellow-b)
}

.device-orientation__icon {
    --color-b: rgba(0, 0, 0, .2);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 80px;
    margin-bottom: 10px
}

.device-orientation__icon .shadow--icon {
    transform: translateY(4px)
}

.device-orientation__icon>svg {
    fill: #fff;
    z-index: 3;
    width: 100%;
    height: 100%
}

.device-orientation__icon>svg path:nth-child(1),
.device-orientation__icon>svg path:nth-child(3) {
    fill: var(--color-yellow-b)
}

.best-score {
    left: 0
}

.best-score .user-info__container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius)
}

.best-score__percent {
    margin-top: -2px;
    margin-bottom: 4px;
    padding-left: 10px;
    font-size: var(--font-size-xs);
    color: var(--color-yellow-b)
}

.best-score__percent:after {
    content: "%"
}

.best-score__progress {
    --progress: 0;
    width: 85%;
    height: 15px;
    margin-top: 2px;
    background: rgba(0, 0, 0, .5)
}

[data-current-view=Home] .best-score__progress .progress__bar {
    transform: translate(0)
}

.user-name-input {
    right: 0
}

.user-name-input .user-info__title {
    text-align: right
}

.user-name-input .user-info__container {
    position: relative;
    justify-content: flex-end;
    width: 100%;
    padding-right: 10px;
    border: none;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    outline: 0;
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 700;
    transform: translateZ(0);
    text-align: right;
    text-overflow: ellipsis
}

.user-name-input .user-info__container:focus::-moz-placeholder {
    opacity: .25
}

.user-name-input .user-info__container:focus:-ms-input-placeholder {
    opacity: .25
}

.user-name-input .user-info__container:focus::placeholder {
    opacity: .25
}

.user-name-input .user-info__container::-moz-placeholder {
    right: 0;
    max-width: 95%;
    padding-left: 25px;
    font-size: var(--font-size-s);
    color: var(--color-yellow-b);
    transform: translateZ(0);
    text-align: right
}

.user-name-input .user-info__container:-ms-input-placeholder {
    right: 0;
    max-width: 95%;
    padding-left: 25px;
    font-size: var(--font-size-s);
    color: var(--color-yellow-b);
    transform: translateZ(0);
    text-align: right
}

.user-name-input .user-info__container::placeholder {
    right: 0;
    max-width: 95%;
    padding-left: 25px;
    font-size: var(--font-size-s);
    color: var(--color-yellow-b);
    transform: translateZ(0);
    text-align: right
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: var(--color-darkest-green-a) !important;
    background-clip: content-box !important;
    box-shadow: 0 0 0 60px var(--color-darkest-green-a) inset !important;
    -webkit-text-fill-color: var(--color-yellow-b) !important
}

.buttons {
    display: flex;
    position: absolute;
    bottom: 6vh;
    align-items: center;
    justify-content: center
}

.buttons button {
    transform: translateY(25vh) rotate(180deg);
    transition: transform .35s var(--ease-out-back);
    transition-delay: 0s
}

.buttons button:not(:last-child) {
    margin-right: 15px
}

[data-current-view=Home] .buttons button {
    transform: none;
    transition-delay: calc(var(--index) * .1s)
}

.button--start {
    --color-a: var(--color-yellow-a);
    --color-b: var(--color-yellow-b)
}

.button--start .button__content {
    width: 90px;
    height: 90px
}

.button--start svg {
    animation: swing 2.5s both infinite
}

.button--store {
    --color-a: var(--color-blue-a);
    --color-b: var(--color-blue-b)
}

[data-store=false] .button--store {
    display: none
}

.button--store .button__content {
    width: 80px;
    height: 80px
}

.button--store svg {
    width: 50%;
    height: 50%;
    animation: swing 2.5s both infinite;
    animation-delay: 1s
}

.button--skins {
    --color-a: var(--color-darkest-green-a);
    --color-b: var(--color-darkest-green-b);
    position: absolute;
    top: 30%;
    right: calc(45% - 100px);
    margin: auto;
    transform: scale(0);
    transition: transform .5s var(--ease-out-expo);
    transition-delay: .1s
}

.button--skins>div {
    animation: pulse 2.5s both infinite
}

[data-current-view=Home] .button--skins,
[data-current-view=EndScreen] .button--skins {
    transform: none;
    transition: transform .5s var(--ease-out-back);
    transition-delay: 0s
}

.button--skins .shadow--button {
    transform: translateY(5px)
}

.button--skins .button__content {
    width: 50px;
    height: 50px;
    background: var(--color-a);
    box-shadow: 0 1px 0 var(--color-b)
}

.button--skins .button__content:hover {
    box-shadow: 0 .75px 0 var(--color-b);
    transform: translateY(.25px)
}

.button--skins .button__content:active {
    box-shadow: 0 .25px 0 var(--color-b);
    transform: translateY(.75px)
}

.button--skins .button__content svg {
    width: 45%;
    height: 45%;
    transform: rotate(180deg);
    transition: transform .5s var(--ease-out-expo);
    transition-delay: .15s
}

[data-current-view=Home] .button--skins .button__content svg {
    transition: transform .5s var(--ease-out-back)
}

[data-current-view=EndScreen] .button--skins .button__content svg {
    transition: transform .5s var(--ease-out-back)
}

[data-current-view=Home] .button--skins,
[data-current-view=EndScreen] .button--skins {
    visibility: visible
}

.button-skins__notification {
    --color-a: var(--color-yellow-b);
    --color-b: rgba(0, 0, 0, .15);
    position: absolute;
    top: -8px;
    right: -8px;
    transform: scale(0);
    transition: transform .5s var(--ease-out-back)
}

.button-skins__notification>div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: var(--color-yellow-b);
    border-radius: 50%;
    animation: pulse .5s both infinite
}

[data-current-view=Home] .button--notification .button-skins__notification,
[data-current-view=EndScreen] .button--notification .button-skins__notification {
    transform: none;
    transition-delay: .25s
}

.button-skins__notification svg {
    width: 70%;
    height: 70%
}

.button-skins__notification .shadow--icon {
    transform: translateY(2px)
}

.popins {
    display: flex;
    position: absolute;
    z-index: 999;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.popins:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, .65);
    transition: opacity .5s var(--ease-out-swift);
    content: ""
}

[data-current-view=EndScreen] .popins.notifications--visible:before {
    opacity: 1;
    pointer-events: all
}

[data-current-view=Home] .popins.notifications--visible:before {
    opacity: 1;
    pointer-events: all
}

.popin {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: translate(100%);
    transition: transform .85s var(--ease-out-back)
}

.popin:not(.notification--tournament) .popin__title--default,
.popin:not(.notification--tournament) .button__content--default {
    display: flex
}

.popin:not(.notification--tournament) .popin__title--tournament,
.popin:not(.notification--tournament) .button__content--tournament {
    display: none
}

.popin.notification--tournament .popin__title--default,
.popin.notification--tournament .button__content--default {
    display: none
}

.popin.notification--tournament .popin__title--tournament,
.popin.notification--tournament .button__content--tournament {
    display: flex
}

.popin.notification--tournament .button {
    --color-a: var(--color-blue-a);
    --color-b: var(--color-blue-b)
}

.popin.notification--tournament .popin__content {
    display: flex
}

.popin.notification--tournament canvas {
    display: none
}

[data-current-view=Home] .popin,
[data-current-view=EndScreen] .popin {
    transform: translate(100%)
}

[data-current-view=EndScreen] .popin.notification--visible,
[data-current-view=Home] .popin.notification--visible {
    transform: translate(0);
    transition: transform .95s var(--ease-out-back);
    pointer-events: all
}

.popin.notification--hidden {
    transform: translate(-100%)
}

.popin.notification--visible~.popin {
    transform: translate(100%)
}

.popin__container {
    display: flex;
    position: relative;
    right: 0;
    left: 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 300px;
    margin: 0 12.5%;
    padding: 20px 0;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 15px;
    transition: transform 1s var(--ease-out-back)
}

.popin__container>* {
    margin: 10px 0;
    transform: translate(25px)
}

.notification--visible .popin__container>* {
    transform: none;
    transition-duration: calc(.5s + var(--index) * .2s)
}

.popin__title {
    z-index: 2;
    font-size: var(--font-size-m);
    color: var(--color-white);
    text-transform: uppercase;
    text-shadow: 0 3px 0 var(--color-dark-grey-b);
    color: #fff;
    text-align: center;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.popin__title--tournament {
    display: none
}

.notification--tournament .popin__title {
    text-shadow: 0 3px 0 var(--color-dark-grey-b);
    color: var(--color-yellow-a)
}

.popin__subtitle {
    z-index: 2;
    font-size: var(--font-size-m);
    color: var(--color-white);
    text-align: center;
    text-transform: none;
    text-shadow: 0 3px 0 var(--color-dark-grey-b);
    color: #fff
}

.popin__content {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.popin__coins {
    display: flex;
    flex-direction: row
}

.popin__coins .spritesheet {
    height: 25px;
    width: 25px;
    margin-right: 2px
}

.popin__price {
    color: #fff;
    font-size: var(--font-size-m);
    margin: 5px 0
}

.popin__icon {
    width: 50px;
    height: 50px;
    position: relative
}

.popin__icon>svg path:first-child {
    fill: #fff
}

.popin__icon>svg path:last-child {
    fill: var(--color-yellow-a);
    animation: jump 1.5s both infinite
}

.popin__icon svg {
    height: 100%;
    width: 100%
}

.popin__image {
    width: 150px;
    height: 150px
}

.popin__image canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@keyframes jump {
    0% {
        transform: translateY(-2px)
    }
    55% {
        transform: translate(0)
    }
    60% {
        transform: translate(0)
    }
    65% {
        transform: translate(0)
    }
    to {
        transform: translateY(-2px)
    }
}

.user-info {
    position: absolute;
    bottom: 30%;
    width: 160px
}

[data-current-view=Home] .user-info {
    transform: none
}

.user-info__title,
.user-info__container {
    transition: transform .75s var(--ease-out-back)
}

.best-score .user-info__title,
.best-score .user-info__container {
    transform: translate(-100%)
}

.user-name-input .user-info__title,
.user-name-input .user-info__container {
    transform: translate(100%)
}

[data-current-view=Home] .user-info__title,
[data-current-view=Home] .user-info__container {
    transform: none
}

.user-info__title {
    padding: 5px 8px;
    font-size: var(--font-size-s);
    color: var(--color-darkest-green-b)
}

.user-info__container {
    display: flex;
    align-items: center;
    height: 55px;
    background: rgba(0, 0, 0, .5);
    color: var(--color-yellow-b);
    transition-delay: .1s
}

.bonus {
    position: absolute;
    inset: 0;
    width: 160px;
    height: 160px;
    margin: auto;
    transform: translate(-80%, -80%) scale(0);
    transform-origin: right bottom;
    transition: transform .25s var(--ease-out-snap);
    z-index: 1
}

[data-current-view=EndScreen]:not([data-pending-bonus]) .bonus {
    transform: translate(-80%, -80%) scale(1);
    transition: transform .35s var(--ease-out-back)
}

[data-current-view=Home]:not([data-pending-bonus]) .bonus {
    transform: translate(-80%, -80%) scale(1);
    transition: transform .35s var(--ease-out-back)
}

.bonus span {
    z-index: 1
}

.bonus__content {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: right bottom
}

.bonus__bubble path {
    display: none
}

.bonus__title,
.bonus__multiplier,
.bonus__mode,
.bonus__buttons button {
    transform: scale(0);
    transition: transform .5s var(--ease-out-back);
    transition-delay: calc(var(--index) * .01s)
}

[data-current-view=Home] .bonus__title,
[data-current-view=Home] .bonus__multiplier,
[data-current-view=Home] .bonus__mode,
[data-current-view=Home] .bonus__buttons button,
[data-current-view=EndScreen] .bonus__title,
[data-current-view=EndScreen] .bonus__multiplier,
[data-current-view=EndScreen] .bonus__mode,
[data-current-view=EndScreen] .bonus__buttons button {
    transform: scale(1)
}

.bonus__title {
    color: var(--color-yellow-a);
    text-transform: uppercase
}

.bonus__multiplier {
    font-size: var(--font-size-xl);
    line-height: .8
}

.bonus__multiplier,
.bonus__mode {
    display: none
}

.bonus__multiplier--bigger,
.bonus__mode--bigger {
    color: var(--color-red-a);
    text-transform: lowercase
}

[data-bonus=Bigger] .bonus__multiplier--bigger,
[data-bonus=Bigger] .bonus__mode--bigger {
    display: flex
}

.bonus__multiplier--speed-up,
.bonus__mode--speed-up {
    color: var(--color-green-a);
    text-transform: lowercase
}

[data-bonus=SpeedUp] .bonus__multiplier--speed-up,
[data-bonus=SpeedUp] .bonus__mode--speed-up {
    display: flex
}

.bonus__bubble {
    position: absolute;
    top: 12px;
    left: 4px;
    width: 100%;
    height: 100%
}

.bonus__bubble svg {
    fill: var(--color-darkest-green-a)
}

.bonus__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px
}

.bonus__buttons button {
    font-size: var(--font-size-xs)
}

.bonus__buttons button:not(:last-child) {
    margin-right: 5px
}

.skin-selector__slider {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin: 0
}

.skin-selector__slider .button--black {
    position: absolute;
    top: 0;
    right: 20px
}

.skin-selector__container {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: translate(var(--translate));
    max-width: var(--width)
}

.skin-selector__container::-webkit-scrollbar {
    display: none
}

.skin-selector__slide {
    --progress: 50;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    width: 100%;
    scroll-snap-align: center
}

.skin-selector__title {
    width: 100%;
    opacity: 0;
    font-size: var(--font-size-m);
    transform: scale(.8) rotate(-15deg);
    transition: transform .5s var(--ease-out-swift), opacity .2s var(--ease-out-swift);
    text-align: center;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
    color: #fff
}

[data-current-view=SkinSelector] .skin-selector__title {
    opacity: 1;
    transform: none;
    transition: transform .25s cubic-bezier(.175, .885, .32, 1.25), opacity .25s var(--ease-out-swift);
    transition-delay: .25s
}

.skin-selector__title div {
    text-align: center
}

.skin-selector__title div:not(:first-child) {
    position: absolute;
    opacity: 0
}

.skin-selector__placeholder {
    height: calc(var(--inner-height) * .3)
}

.skin-selector__buttons {
    display: flex;
    position: absolute;
    top: calc(100% + 30px)
}

.skin-selector__buttons button {
    transition: transform .5s var(--ease-out-snap)
}

.skin-selector__buttons button:first-child {
    --color-a: var(--color-dark-green-a);
    --color-b: var(--color-dark-green-b);
    margin-right: 20px;
    transform: translate(calc(var(--inner-width) * -1))
}

.skin-selector__buttons button:last-child {
    --color-a: var(--color-green-a);
    --color-b: var(--color-green-b);
    transform: translate(calc(var(--inner-width) * 1))
}

[data-current-view=SkinSelector] .skin-selector__buttons button {
    transform: none;
    transition-delay: .25s
}

.skin-selector__stats {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

.slide--unlocked .skin-selector__stats,
.skin-selector__stats[data-type=kingKilled],
.skin-selector__stats[data-type=default] {
    visibility: hidden
}

.skin-selector__progress,
.skin-selector__text {
    transition: transform .5s var(--ease-out-back)
}

[data-current-view=SkinSelector] .skin-selector__progress,
[data-current-view=SkinSelector] .skin-selector__text {
    transform: none
}

.skin-selector__progress {
    width: 150px;
    height: 15px;
    margin-bottom: 10px;
    transform: translateY(250px) rotate(10deg);
    transform-origin: left;
    transition-delay: .1s
}

[data-current-view=SkinSelector] .skin-selector__progress {
    transition-delay: 0s
}

[data-current-view=SkinSelector] .skin-selector__progress .progress__bar {
    transform: translate(0)
}

.skin-selector__text {
    font-size: var(--font-size-s);
    transform: translateY(250px) rotate(-10deg);
    transform-origin: right;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    color: var(--color-yellow-b)
}

.skin-selector__text:after {
    margin-left: 5px;
    content: attr(data-unit)
}

[data-type=percentCovered] .skin-selector__text:after,
[data-type=percentCoveredWithoutKill] .skin-selector__text:after {
    margin-left: 0
}

[data-current-view=SkinSelector] .skin-selector__text {
    transition-delay: .1s
}

.store {
    padding: 0 40px
}

.store button {
    --color-a: var(--color-dark-green-a);
    --color-b: var(--color-dark-green-b);
    margin-bottom: 10px
}

.store .spritesheet {
    max-width: 5vw;
    max-height: 5vw
}

.store .button--back {
    margin-top: 5vh
}

.store .button--purchase {
    --color-a: var(--color-darkest-green-a);
    --color-b: var(--color-darkest-green-b)
}

.store .view__content>* {
    transform: translateY(100vh) rotate(10deg);
    transition: transform .75s var(--ease-out-back)
}

[data-current-view=Store] .store .view__content>* {
    transform: translate(0);
    transition: transform .5s var(--ease-out-back);
    transition-delay: calc(var(--index) * 25ms)
}

.store__icon {
    --color-b: rgba(0, 0, 0, .2);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 50px
}

.store__icon .shadow--icon {
    transform: translateY(4px)
}

.store__icon>svg {
    fill: var(--color-yellow-a);
    z-index: 3
}

.store__icon svg {
    width: 70%;
    height: 70%
}

.store__title {
    margin: -5px 0 20px;
    font-size: var(--font-size-l);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
    color: #fff
}

.store__list__coins {
    display: flex;
    flex-grow: 1;
    margin-left: 10px
}

.store__list__price {
    color: var(--color-yellow-a)
}

.user-stats {
    position: absolute;
    top: 40px;
    left: 0
}

.user-stats>* {
    position: relative;
    transform: translate(-50vh);
    transition: transform .5s var(--ease-out-back);
    transition-duration: calc(1s + var(--index) * .1s)
}

[data-current-view=Game] .user-stats>* {
    transform: translate(0);
    transition-duration: calc(.75s + var(--index) * .1s)
}

.user-stats>*:not(:last-child) {
    margin-bottom: 8px
}

.user-stats__progress {
    background: rgba(0, 0, 0, .15)
}

[data-current-view=Game] .user-stats__progress .progress__bar {
    transform: translate(0)
}

.user-stats__progress span {
    position: relative;
    z-index: 1;
    margin-bottom: 3px;
    padding-left: 5px;
    font-size: var(--font-size-xs);
    color: var(--color-light-grey-a)
}

.user-stats__progress span:after {
    content: "%"
}

.user-stats__best-score {
    padding-left: 5px;
    font-size: var(--font-size-xs);
    color: #00000059
}

.user-stats__best-score span:last-child:after {
    content: "%"
}

.user-stats__kill-count {
    display: flex;
    position: relative;
    left: 0;
    align-items: center;
    justify-content: flex-start
}

.user-stats__kill-count span {
    margin-left: 5px;
    opacity: .35;
    font-size: var(--font-size-m)
}

.user-stats__kill-count span:before {
    content: "x"
}

.user-stats__kill-count-icon {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 5px 10px 5px 5px;
    background: rgba(0, 0, 0, .35);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    background: var(--color-red-a);
    box-shadow: 0 3px 0 var(--color-red-b)
}

.user-stats__kill-count-icon svg {
    height: 25px;
    animation: swing 2.5s both infinite;
    fill: var(--color-white)
}

.ranking {
    position: absolute;
    top: 40px;
    right: 0
}

.ranking>* {
    right: calc(var(--margin) * -1)
}

.ranking__rank {
    display: flex;
    position: relative;
    left: calc(var(--index) * 6px);
    align-items: center;
    justify-content: flex-start;
    width: 175px;
    height: 25px;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    color: var(--color-light-grey-a);
    will-change: contents;
    transition: transform 1s var(--ease-out-back);
    transition-duration: calc(1s + var(--index) * .1s);
    transform: translate(50vh);
    background: var(--color-background);
    box-shadow: 0 3px 0 var(--color-border)
}

[data-current-view=Game] .ranking__rank--visible {
    transform: translate(0)
}

.ranking__rank:nth-child(4) {
    margin-top: 25px
}

.ranking__rank span {
    margin-right: 5px
}

.ranking__rank:not(:last-child) {
    margin-bottom: 5px
}

.ranking__content {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    padding: 4px;
    font-size: calc(var(--font-size-xs) * .85)
}

.ranking__place {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    min-height: 20px;
    background: var(--color-border);
    border-radius: 50%;
    font-size: var(--font-size-xxs);
    color: var(--color-light-grey-a)
}

.ranking__percent:after {
    content: "%"
}

.ranking__name {
    width: 50px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.ranking__pic {
    position: fixed;
    width: 30px;
    border-radius: 16px;
    top: 17px;
    right: 7px
}

.banners {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 130px;
    pointer-events: none;
    perspective: 100px
}

.banner {
    display: flex;
    position: absolute;
    z-index: 1;
    bottom: 25px;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    margin: auto;
    padding: 10px 35px 10px 10px;
    opacity: 1;
    background: rgba(0, 0, 0, .6);
    border-radius: 100px;
    transform: translateY(200%) rotate(10deg);
    transform-origin: left;
    transition: transform .75s var(--ease-out-back), opacity .75s var(--ease-out-back)
}

.banner.notification--tournament canvas {
    display: none
}

[data-current-view=Game] .banner.notification--hidden {
    opacity: 0;
    transform: translateZ(-25px)
}

[data-current-view=Game] .banner.notification--visible {
    opacity: 1;
    transform: none
}

.banner.notification--visible~.banner {
    opacity: 1;
    transform: translateY(200%) rotate(10deg)
}

.banner__image {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: -2px 15px -2px -2px;
    height: 65px;
    width: 65px
}

.banner__image svg {
    --color-b: rgba(0, 0, 0, .35);
    display: none;
    margin-top: -10px;
    height: 40px;
    width: 40px
}

.notification--tournament .banner__image svg {
    display: flex
}

.banner__image svg path:last-child {
    animation: jump 1.5s both infinite
}

.banner__image>svg {
    z-index: 10
}

.banner__image>svg path:first-child {
    fill: #fff
}

.banner__image>svg path:last-child {
    fill: var(--color-yellow-a)
}

.banner__image:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    transform: scale(0);
    transition: transform .75s var(--ease-out-back) .15s;
    content: ""
}

[data-current-view=Game] .notification--visible .banner__image:before {
    transform: scale(1)
}

.notification--tournament .banner__image:before {
    background: var(--color-blue-a)
}

.banner__image canvas {
    transform: scale(0);
    transition: transform .75s var(--ease-out-back) .25s
}

[data-current-view=Game] .notification--visible .banner__image canvas {
    transform: scale(1)
}

.banner__title {
    color: var(--color-white);
    display: none
}

.notification--tournament .banner__title--tournament {
    display: flex
}

.notification--bonus .banner__title--tournament,
.notification--skin .banner__title--tournament {
    display: none
}

.notification--bonus .banner__title--bonus {
    display: flex
}

.notification--tournament .banner__title--bonus,
.notification--skin .banner__title--bonus {
    display: none
}

.notification--skin .banner__title--skin {
    display: flex
}

.notification--tournament .banner__title--skin,
.notification--bonus .banner__title--skin {
    display: none
}

.banner__achievement {
    opacity: .5;
    color: var(--color-white)
}

.bonus-timer {
    position: absolute;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .65);
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: transform .5s var(--ease-out-swift)
}

[data-current-view=Game][data-bonus=EagleEye] .bonus-timer,
[data-current-view=Game][data-bonus=SpeedUp] .bonus-timer,
[data-current-view=Game][data-bonus=Shield] .bonus-timer {
    transform: scale(1);
    transition: transform 1s var(--ease-out-back)
}

.bonus-timer svg {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    margin: auto;
    stroke: var(--color-yellow-a);
    fill: none;
    stroke-width: 3;
    transform: rotate(-90deg)
}

.game-over {
    justify-content: center
}

.game-over .button--continue {
    margin-top: 25px;
    transform: translateY(50vh) rotate(10deg);
    transition: transform .5s var(--ease-out-back);
    transition-delay: 0s
}

[data-current-view=GameOver] .game-over .button--continue {
    transform: none;
    transition-delay: .1s
}

.game-over__popin {
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    width: 75vw;
    margin-bottom: 30px;
    padding: 20px 40px 0;
    font-size: var(--font-size-m);
    color: var(--color-white);
    transform: translateY(100vh) rotate(10deg);
    transition: transform .75s var(--ease-out-back);
    text-shadow: 0 2px 0 var(--color-dark-grey-a);
    color: #fff
}

[data-current-view=GameOver] .game-over__popin {
    transform: translate(0);
    transition: transform .5s var(--ease-out-back)
}

.game-over__popin:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, .6);
    border-radius: 15px;
    transform: scale(.75);
    transition: opacity .5s var(--ease-out-snap), transform .5s var(--ease-out-snap);
    content: ""
}

[data-current-view=GameOver] .game-over__popin:before {
    opacity: 1;
    transform: scale(1);
    transition: opacity .5s var(--ease-out-snap), transform .5s var(--ease-out-back)
}

.game-over__popin>* {
    transform: translateY(50vh) rotate(10deg);
    transition: transform .5s var(--ease-out-snap);
    transition-delay: calc(var(--index) * 25ms)
}

[data-current-view=GameOver] .game-over__popin>* {
    transform: translate(0);
    transition: transform .5s var(--ease-out-back)
}

.game-over__title {
    margin-bottom: 15px;
    text-transform: uppercase
}

@keyframes bounce {
    0% {
        transform: scale()
    }
    to {
        transform: scale(1.05)
    }
}

.game-over__heart {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    font-size: 3rem;
    animation: bounce .25s;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.game-over__heart svg {
    position: absolute;
    top: 10px;
    right: 0;
    width: 100%;
    height: 100%
}

.game-over__heart svg path {
    stroke: var(--color-white);
    fill: none;
    stroke-width: 3
}

.game-over__heart svg rect {
    fill: var(--color-red-a)
}

.game-over__countdown {
    z-index: 1;
    animation: bounce .25s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
    color: #fff
}

.game-over__revive {
    margin-bottom: 10px
}

.game-over__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    margin-bottom: -15px
}

.game-over__buttons .spritesheet {
    width: 25px;
    height: 25px;
    margin-left: 2px
}

.game-over__buttons .button__content {
    width: 90px;
    height: 60px
}

.game-over__buttons button {
    font-size: var(--font-size-m)
}

.game-over__buttons button:not(:last-child) {
    margin-right: 10px
}

.end-screen .button--share {
    --color-a: var(--color-blue-a);
    --color-b: var(--color-blue-b)
}

[data-share=false] .end-screen .button--share {
    display: none
}

.end-screen .button--share-friend {
    margin-top: 1em;
    --color-a: var(--color-yellow-a);
    --color-b: var(--color-yellow-b)
}

[data-share=false] .end-screen .button--share-friend {
    display: none
}

.end-screen .button--retry {
    --color-a: var(--color-green-a);
    --color-b: var(--color-green-b);
    margin-top: 5vh
}

.end-screen .view__content>* {
    transform: scale(0);
    transition: transform .75s var(--ease-out-back)
}

[data-current-view=EndScreen] .end-screen .view__content>* {
    transform: scale(1);
    transition: transform .5s var(--ease-out-back);
    transition-delay: calc(var(--index) * 25ms)
}

.end-screen__territory {
    position: relative
}

.end-screen__territory canvas {
    position: relative;
    opacity: 1
}

.end-screen__territory:before {
    position: absolute;
    inset: 0;
    width: 80%;
    height: 80%;
    margin: auto;
    background-color: #00000040;
    border-radius: 50%;
    content: ""
}

.end-screen__score {
    display: flex;
    position: relative;
    align-items: flex-end;
    justify-content: space-between;
    width: 230px;
    margin-bottom: 15px
}

.end-screen__percent-covered,
.end-screen__kills,
.end-screen__text {
    text-shadow: 0 2px 0 var(--color-dark-grey-a);
    color: #fff
}

.end-screen__percent-covered {
    margin-right: 35px;
    font-size: var(--font-size-xxl);
    line-height: .8;
    color: var(--color-white);
    text-align: center
}

.end-screen__percent-covered:after {
    content: "%"
}

.end-screen__progress {
    width: 230px;
    margin-bottom: 10px
}

[data-current-view=EndScreen] .end-screen__progress .progress__bar {
    transform: translate(0)
}

.end-screen__kills {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: var(--font-size-m)
}

.end-screen__kills span:before {
    content: "x"
}

.end-screen__kills-icon {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-right: 3px
}

.end-screen__kills-icon svg {
    height: 25px;
    animation: swing 2.5s both infinite;
    fill: var(--color-white)
}

.end-screen__text {
    font-size: var(--font-size-m)
}

@media (max-height: 599px) {
    [data-current-view=Game] .progress {
        width: 130px
    }
    [data-current-view=EndScreen] .progress {
        height: 15px
    }
    .game-title {
        height: 85px
    }
    .button--start .button__content {
        width: 70px;
        height: 70px
    }
    .user-info {
        width: 140px
    }
    .bonus {
        width: 125px;
        height: 125px;
        top: 24px
    }
    .bonus__bubble {
        top: 8px;
        left: 0
    }
    .bonus__title {
        font-size: var(--font-size-xs)
    }
    .bonus__multiplier {
        font-size: calc(var(--font-size-l) * .75)
    }
    .bonus__buttons {
        margin-top: 6px
    }
    .bonus__buttons button .button__content {
        width: 37px;
        height: 25px;
        font-size: calc(var(--font-size-xs) * .75)
    }
    .bonus__buttons button .button__content .spritesheet {
        width: 12px;
        height: 12px
    }
    .skin-selector__title,
    .user-stats__kill-count span {
        font-size: calc(var(--font-size-m) * .85)
    }
    .user-stats__kill-count-icon svg {
        height: 20px
    }
    .game-over__heart {
        width: 100px;
        height: 100px
    }
    .game-over__buttons .spritesheet {
        width: 15px;
        height: 15px
    }
    .game-over__buttons .button__content {
        width: 65px;
        height: 43px;
        font-size: var(--font-size-s)
    }
    .end-screen .button--share-friend {
        margin-top: .5em
    }
    .end-screen .button--retry {
        margin-top: 4vh
    }
    .end-screen__percent-covered {
        font-size: var(--font-size-l)
    }
    .end-screen__kills-icon svg {
        height: 20px
    }
}

@media screen and (max-width: 450px),
(max-height: 650px) {
    .viewport {
        max-width: initial;
        max-height: initial;
        border-radius: initial;
        box-shadow: none
    }
    .viewport .device-orientation {
        visibility: visible
    }
}

@media screen and (orientation: landscape) {
    .device-orientation {
        display: flex
    }
}