@font-face {
    font-family: "Pixeloid Sans";
    src: url("../fonts/PixeloidSans.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Pixeloid Sans";
  src: url("../fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: bold;
}

body {
    font-family: "Pixeloid Sans";
}

.game {
    display: flex;
    flex-direction: column;
    background: black;
    height: 100dvh;
    overflow: hidden;
    background-color: #fff;
    opacity: 0;
    position: relative;
    z-index: 1;
}

.game .decor {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.game .decor .pattern-top {
    position: absolute;
    background-image: url("../img/pattern_top.svg");
    background-repeat: repeat-x;
    inset: 0;
    opacity: 0.7;
}

.game .decor .clouds {
    position: absolute;
    width: 100%;
    aspect-ratio: 3.5/1;
    top: 20dvh;
    background-image: url("../img/clouds.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.game .decor #flakes1, .game .decor #flakes3, .game .decor #flakes2 {
    position: absolute;
    top: 36dvh;
    width: 33.3333%;
    height: 45dvh;
    background-image: url("../img/flakes1.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flip 1s linear infinite;
}

.game .decor #flakes2 {
    background-image: url("../img/flakes2.svg");
    left: 33.3333%;
}

.game .decor #flakes3 {
    background-image: url("../img/flakes3.svg");
    right: 0;
}

.game .statusbar {
    margin: 10px;
    position: relative;
    z-index: 1;
    display: flex;
    background-color: #fff;
}

.game .statusbar .left {
    display: flex;
    flex-direction: column;
    width: 17px;
}

.game .statusbar .left .tl {
    height: 8px;
    background-image: url("../img/controls-frame/tl.svg");
}

.game .statusbar .left .ttl {
    height: 12px;
    background-image: url("../img/controls-frame/ttl.svg");
}

.game .statusbar .left .l {
    background-image: url("../img/controls-frame/l.svg");
    flex-grow: 1;
}

.game .statusbar .left .bbl {
    height: 19px;
    background-image: url("../img/controls-frame/bbl.svg");
}

.game .statusbar .left .bl {
    background-image: url("../img/controls-frame/bl.svg");
    height: 8px;
}

.game .statusbar .middle {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.game .statusbar .middle .t {
    background-image: url("../img/controls-frame/t.svg");
    height: 8px;
}

.game .statusbar .middle .m {
    flex-grow: 1;
}

.game .statusbar .middle .b {
    background-image: url("../img/controls-frame/b.svg");
    height: 8px;
}

.game .statusbar .right {
    display: flex;
    flex-direction: column;
    width: 17px;
}

.game .statusbar .right .tr {
    background-image: url("../img/controls-frame/tr.svg");
    height: 8px;
}

.game .statusbar .right .ttr {
    background-image: url("../img/controls-frame/ttr.svg");
    height: 12px;
}

.game .statusbar .right .r {
    flex-grow: 1;
    background-image: url("../img/controls-frame/r.svg");
}

.game .statusbar .right .bbr {
    background-image: url("../img/controls-frame/bbr.svg");
    height: 19px;
}

.game .statusbar .right .br {
    height: 8px;
    background-image: url("../img/controls-frame/br.svg");
}

.game .statusbar .statusbar-content {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: clamp(3px, 2vw, 6px);
}

.game .statusbar .statusbar-content .small {
    font-size: 12px;
}

.game .statusbar .statusbar-content .val {
    font-size: clamp(18px, 2vw, 24px);
}

.game .statusbar .statusbar-content .game-data {
    display: flex;
    gap: 1rem;
}

.game .statusbar .statusbar-content .game-data .lives .val {
    display: flex;
}

.game .statusbar .statusbar-content .game-data .lives .val .heart {
    width: 2rem;
    height: 2rem;
    background-image: url("../img/heart.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% auto;
}

.game .statusbar .statusbar-content .game-data .scores .val {
    font-size: 1.6rem;
}

.game .statusbar .statusbar-content .name {
    flex-grow: 1;
}

.game .statusbar .statusbar-content .name .val {
    max-width: 100%;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game .statusbar-name-wrapper {
    text-align: center;
    background-image: url("../img/status-name-bg.svg");
    background-position: center center;
    font-size: 1rem;
    text-transform: uppercase;
    line-height: 2rem;
    margin: 4px 20px;
}

.game .statusbar-name-wrapper .statusbar-name {
    background-color: #f9f9f9;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    padding: 0 10px;
}

.game .statusbar-name-wrapper .statusbar-name .arrow {
    color: #45ae91;
}

.game .field {
    flex-grow: 1;
    display: flex;
    position: relative;
    z-index: 1;
}

.game .field .testy-svg {
    border: 1px solid red;
    position: absolute;
    inset: 0;
}

.game .field .left-eggs, .game .field .right-eggs {
    flex-grow: 1;
    position: relative;
    width: 50%;
}

.game .field .left-eggs .egg-wrapper, .game .field .right-eggs .egg-wrapper {
    height: 100%;
    position: relative;
    position: absolute;
    inset: 0;
}

.game .field .left-eggs .egg-wrapper#lt, .game .field .right-eggs .egg-wrapper#lt {
    background-image: url("../img/left_shelf.svg");
    background-repeat: no-repeat;
    background-position: top 30% left;
}

.game .field .left-eggs .egg-wrapper#lb, .game .field .right-eggs .egg-wrapper#lb {
    background-image: url("../img/left_shelf.svg");
    background-repeat: no-repeat;
    background-position: top 65% left;
}

.game .field .left-eggs .egg-wrapper#rt, .game .field .right-eggs .egg-wrapper#rt {
    background-image: url("../img/right_shelf.svg");
    background-repeat: no-repeat;
    background-position: top 30% right;
}

.game .field .left-eggs .egg-wrapper#rb, .game .field .right-eggs .egg-wrapper#rb {
    background-image: url("../img/right_shelf.svg");
    background-repeat: no-repeat;
    background-position: top 65% right;
}

.game .field .left-eggs .egg-wrapper path, .game .field .right-eggs .egg-wrapper path {
    stroke-width: 0px;
}

.game .field .left-eggs .egg-wrapper .egg, .game .field .right-eggs .egg-wrapper .egg {
    position: absolute;
    width: clamp(64px, 4vw, 120px);
    aspect-ratio: 1/1;
    offset-rotate: 0deg;
    top: 0;
    left: 0;
    offset-distance: 0%;
    background-position: center center;
    background-repeat: no-repeat;
}

.game .field .left-eggs .egg-wrapper .egg:not(.corrupted), .game .field .right-eggs .egg-wrapper .egg:not(.corrupted) {
    background-image: url("../img/lead.svg");
}

.game .field .left-eggs .egg-wrapper .egg.destroying, .game .field .right-eggs .egg-wrapper .egg.destroying {
    animation: none;
    background-image: url("../img/lead-destroing.webp");
}

.game .field .left-eggs .egg-wrapper .egg.corrupted, .game .field .right-eggs .egg-wrapper .egg.corrupted {
    background-image: url("../img/corrupted.svg");
}

.game .field .left-eggs .egg-wrapper .egg.corrupted.destroying, .game .field .right-eggs .egg-wrapper .egg.corrupted.destroying {
    background-image: url("../img/corrupted-destroing.webp");
}

.game .field .basket {
    position: absolute;
    width: clamp(72px, 5vw, 132px);
    aspect-ratio: 1/1;
    offset-rotate: 0deg;
    offset-distance: 80%;
    offset-path: var(--basketPath);
    background-image: url("../img/basket-idle.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.game .field .basket.lt, .game .field .basket.lb {
    left: 0;
}

.game .field .basket.lt {
    transform: rotate(-5deg);
}

.game .field .basket.lb {
    transform: rotate(-10deg);
}

.game .field .basket.rt {
    transform: rotate(5deg);
}

.game .field .basket.rb {
    transform: rotate(10deg);
}

.game .controls {
    box-sizing: border-box;
    display: flex;
    max-height: 179px;
    position: relative;
    margin: 0 10px;
    max-height: 20vh;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.game .controls:before, .game .controls:after {
    content: "";
    display: block;
    width: 27px;
    background-image: url("../img/bottom-bar-left.svg");
}

.game .controls:after {
    background-image: url("../img/bottom-bar-right.svg");
    background-position: top right;
}

.game .controls .buttons-wrapper {
    background-image: url("../img/bottom-bar-bg.svg");
    padding: 11px;
    padding-top: 31px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.game .controls .buttons-wrapper .top-buttons {
    flex-grow: 1;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.game .controls .buttons-wrapper .bottom-buttons {
    flex-grow: 1;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.game .controls .buttons-wrapper .button {
    min-width: 60px;
    max-width: 128px;
    width: 20vw;
    height: 56px;
    max-height: 6dvh;
    background-image: url("../img/button-bg.svg");
    background-size: 100% 100%;
    border: 0;
    background-color: transparent;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.game .controls .buttons-wrapper .button:focus, .game .controls .buttons-wrapper .button:active {
    background-image: url("../img/button-pressed-bg.svg");
}

.game .controls .buttons-wrapper .button:before, .game .controls .buttons-wrapper .button.controls:after {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.game .controls .buttons-wrapper .button#lt-trigger:before, .game .controls .buttons-wrapper .button#lt-trigger.controls:after {
    background-image: url("../img/arrow-up.svg");
}

.game .controls .buttons-wrapper .button#rt-trigger:before, .game .controls .buttons-wrapper .button#rt-trigger.controls:after {
    background-image: url("../img/arrow-up.svg");
}

.game .controls .buttons-wrapper .button#lb-trigger:before, .game .controls .buttons-wrapper .button#lb-trigger.controls:after {
    background-image: url("../img/arrow-left.svg");
}

.game .controls .buttons-wrapper .button#rb-trigger:before, .game .controls .buttons-wrapper .button#rb-trigger.controls:after {
    background-image: url("../img/arrow-right.svg");
}

.game .controls .buttons-wrapper .pause {
    background-image: url("../img/logo.svg");
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 60%;
    border: 0;
    min-width: 56px;
    max-width: 180px;
    width: 12vmax;
    max-height: 6dvh;
}

.modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1000;
    max-width: 600px;
    margin: auto;
    max-height: 100dvh;
    overflow: hidden;
    background-color: #eeeeee;
    background-size: 24px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s;
    transform: translateY(100%);
}

.modal-wrapper.shown {
    transform: translateY(0%);
}

.modal-wrapper .modal {
    width: 320px;
    max-width: 90vw;
    box-sizing: border-box;
    padding: 24px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 0 2px #686868 inset, 0 -4px 0 -2px #686868, 0 4px 0 -2px #686868, -4px 0 0 -2px #686868, 4px 0 0 -2px #686868;
}

.modal-wrapper .modal:after {
    content: "";
    display: block;
    width: calc(100% - 8px);
    position: absolute;
    top: calc(100% + 2px);
    height: 24px;
    background-image: url("../img/modal-shadow.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
}

.modal-wrapper .modal .modal-header {
    font-size: 40px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    animation: blink linear 1s infinite;
}

.modal-wrapper .modal .user-data {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-wrapper .modal .user-data .data-row .prefix {
    font-size: 12px;
    color: #777;
}

.modal-wrapper .modal .user-data .data-row .value {
    font-size: 24px;
}

.modal-wrapper .modal .modal-button-wrapper button {
    border-width: 12px;
    -o-border-image: url("../img/button-normal.svg");
    border-image: url("../img/button-normal.svg");
    border-image-slice: 20 fill;
    background-color: transparent;
    font-family: "Pixeloid Sans";
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(18px, 3vw, 21px);
    width: 100%;
}

.modal-wrapper .modal .modal-button-wrapper button:active {
    -o-border-image: url("../img/button-pressed.svg");
    border-image: url("../img/button-pressed.svg");
    border-image-slice: 20 fill;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    49.9% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flip {
    0% {
        transform: scaleX(1);
    }

    49.9% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(-1);
    }

    99.9% {
        transform: scaleX(-1);
    }
}

html {
    background: black;
}

body {
    margin: 0;
    max-width: 600px;
    margin: auto;
    max-height: 100dvh;
    overflow: hidden;
}

body * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: transform 0.4s ease-out;
    will-change: transform;
    backface-visibility: hidden;
    background-color: #eeeeee;
}

.splash form {
    width: 320px;
    max-width: 90vw;
    background-color: #fff;
    padding: 24px;
    display: block;
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px #686868 inset, 0 -4px 0 -2px #686868, 0 4px 0 -2px #686868, -4px 0 0 -2px #686868, 4px 0 0 -2px #686868;
}

.splash form:after {
    content: "";
    display: block;
    width: calc(100% - 8px);
    position: absolute;
    top: calc(100% + 2px);
    height: 24px;
    background-image: url("../img/modal-shadow.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    left: 50%;
    transform: translateX(-50%);
}

.splash form input[type=text] {
    -o-border-image: url("../img/text-frame.svg");
    border-image: url("../img/text-frame.svg");
    border-radius: 0;
    border-width: 9px;
    border-style: solid;
    border-image-slice: 9;
    font-family: "Pixeloid Sans";
    font-size: clamp(18px, 3vw, 21px);
}

.splash form input[type=text]:focus {
    outline: none;
}

.splash form button {
    border-width: 12px;
    -o-border-image: url("../img/button-normal.svg");
    border-image: url("../img/button-normal.svg");
    border-image-slice: 20 fill;
    background-color: transparent;
    font-family: "Pixeloid Sans";
    font-weight: bold;
    text-transform: uppercase;
    font-size: clamp(16px, 3vw, 21px);
}

.splash form button:active {
    -o-border-image: url("../img/button-pressed.svg");
    border-image: url("../img/button-pressed.svg");
    border-image-slice: 20 fill;
}

.splash.removed {
    transform: translateY(100%);
}

.splash .message {
    margin: 10px 0;
    text-align: center;
    font-weight: bold;
    width: 320px;
    max-width: 90vw;
}

.splash .message.success {
    color: #27ae60;
}

.splash .message.error {
    color: #e74c3c;
}

.splash input, .splash button, .splash hr {
    order: 1;
}

.splash .logo {
    width: 100%;
    aspect-ratio: 4/1.7;
    margin-bottom: 0.5em;
    background-image: url("../img/game-logo.webp");
    background-size: contain;
    background-repeat: no-repeat;
}

.splash form {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.splash form hr {
    width: 100%;
    border: 0;
    border-top: 1px solid;
}

.rules {
    max-height: 45vh;
    overflow: auto;
    margin-bottom: 1rem;
    font-size: clamp(16px, 2vmax, 18px);
}

.rules .sheet {
    padding-left: 1.5em;
    background-image: url("../img/corrupted.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}