html, body {
    margin: 0;
    padding: 0;
}
body {
    min-width: 440px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
@media only screen and (max-width: 440px) {
    body {
        zoom: .8;
    }
    body .jar {
        left: 15%;
        right: 10%;
    }
}
@media only screen and (max-width: 352px) {
    body {
        zoom: .7;
    }
}

.stage {
    position: absolute;
    top: 5%;
    left: 5%;
    right: 5%;
    bottom: calc(5% + 84px);
}

.controls {
    position: absolute;
    z-index: 1000;
    height: 83px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: solid 1px #f2f2f2;
    display: flex;
    justify-content: center;
    gap: 60px;
}

.control {
    width: 83px;
    height: 83px;
    cursor: pointer;
    box-sizing: border-box;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-position: center center;
}
.control.selected {
    border-bottom: solid 2px #33aaee;
    cursor: default;
}

.control1 {
    background-image: url("./i-clicker.png");
}
.control2 {
    background-image: url("./i-jar.png");
}

.stage2 {
    top: 35%;
}

.jar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("./jar.png") no-repeat center center;
    background-size: contain;
}

.jar.bounce {
    animation-duration: 2s;
    animation-iteration-count: 1;
    transform-origin: bottom;
    animation-name: bounce;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.jar.down {
    background-position-y: 31vh;
    transition: background-position .2s ease-in-out;
}

@keyframes bounce {
    0% {
        transform: scale(1, 1) translateY(0);
    }
    10% {
        transform: scale(1.1, .9) translateY(0);
    }
    30% {
        transform: scale(.9, 1.1) translateY(-100px);
    }
    50% {
        transform: scale(1.05, .95) translateY(0);
    }
    57% {
        transform: scale(1, 1) translateY(-7px);
    }
    64% {
        transform: scale(1, 1) translateY(0);
    }
    100% {
        transform: scale(1, 1) translateY(0);
    }
}

.stage1 {
    display: block;
}

.stage2 {
    display: none;
}

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

.counter {
    display: block;
    position: relative;
    background: url("./clicker.png") no-repeat center center;
    background-size: 390px 387px;
    width: 390px;
    height: 387px;
}

.digit {
    position: absolute;
    top: 179px;
    left: 10px;
    width: 22px;
    height: 35px;
    background: url("./digits.png") no-repeat top left;
    background-size: 22px 350px;
    overflow: hidden;
}

.digit.assigned {
    transition: background-position 1s ease-in-out;
}

.digit1 {
    left: 133px;
}

.digit2 {
    left: 168px;
}

.digit3 {
    left: 204px;
}

.digit4 {
    left: 236px;
}

.text {
    align-items: center;
    justify-content: center;
    zoom: .7;
    background-color: rgba(255,255,255,0);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    transition: background-color .3s ease-in-out;
}
.text.visible {
    background-color: rgba(255,255,255,.9);
    transition: background-color .3s ease-in-out;
}
.text .img {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 9000px;
    position: absolute;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    transition: all .5s ease-in-out;
    zoom: .1;
}
.text.visible .img {
    zoom: .5;
    transition: all .5s ease-in-out;
    background-position: center top;
}