:root {
    --game-line-w-coeff: 0.17175;
    --game-win-line-w-coeff: 0.7118;
}

.game {
    position: relative;
    aspect-ratio: 1048 / 720;
    max-width: 1048px;
    width: var(--game-w);
}

.game__frame {
    aspect-ratio: 1048 / 720;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.game__field {
    aspect-ratio: 1048 / 720;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 99%;
    overflow: hidden;
}

.game__win-line {
    position: absolute;
    inset: 0;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -59%);
    z-index: 1;
    aspect-ratio: 746 / 535;
    max-width: 746px;
    width: calc(var(--game-w) * var(--game-win-line-w-coeff));
    height: auto;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
}

.game__line {
    position: absolute;
    z-index: 2;
    width: calc(var(--game-w) * var(--game-line-w-coeff));
    top: 59%;
    transform: translateY(-59%);
    aspect-ratio: 180 / 529;
    max-width: 180px;
    transition: top 0.65s ease-in-out;
}

.game__line-1,
.game__line-5 {
    left: 15%;
}

.game__line-2,
.game__line-6 {
    left: 33%;
}

.game__line-3,
.game__line-7 {
    left: 50.5%;
}

.game__line-4,
.game__line-8 {
    left: 68%;
}

.game__line-5,
.game__line-6,
.game__line-7,
.game__line-8 {
    top: -120%;
}

.game__win-highlight {
    -webkit-animation: game-win-highlight 1.0s ease-in-out infinite;
    animation: game-win-highlight 1.0s ease-in-out infinite;
}

.game__frame {
    background: image-set(
            url("../../img/game/game_frame_desktop@1x.webp") 1x,
            url("../../img/game/game_frame_desktop@1x.webp") 2x
    ) center/contain no-repeat;
}

.game__field {
    background: image-set(
            url("../../img/game/game_bg_desktop@1x.webp") 1x,
            url("../../img/game/game_bg_desktop@1x.webp") 2x
    ) center/contain no-repeat;
}

.game__win-line {
    background: image-set(
            url("../../img/game/win_line@1x.webp") 1x,
            url("../../img/game/win_line@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-1 {
    background: image-set(
            url("../../img/game/line_1@1x.webp") 1x,
            url("../../img/game/line_1@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-2 {
    background: image-set(
            url("../../img/game/line_2@1x.webp") 1x,
            url("../../img/game/line_2@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-3 {
    background: image-set(
            url("../../img/game/line_3@1x.webp") 1x,
            url("../../img/game/line_3@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-4 {
    background: image-set(
            url("../../img/game/line_4@1x.webp") 1x,
            url("../../img/game/line_4@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-5 {
    background: image-set(
            url("../../img/game/line_5@1x.webp") 1x,
            url("../../img/game/line_5@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-6 {
    background: image-set(
            url("../../img/game/line_6@1x.webp") 1x,
            url("../../img/game/line_6@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-7 {
    background: image-set(
            url("../../img/game/line_7@1x.webp") 1x,
            url("../../img/game/line_7@2x.webp") 2x
    ) center/contain no-repeat;
}

.game__line-8 {
    background: image-set(
            url("../../img/game/line_8@1x.webp") 1x,
            url("../../img/game/line_8@2x.webp") 2x
    ) center/contain no-repeat;
}

@media (orientation: portrait) and (min-width: 0px) {
    :root {
        --game-w: clamp(100px, min(100vw, 60svh), 800px);
    }
}

@media (orientation: portrait) and (min-width: 0px) and (min-height: 800px) {

}

@media (orientation: portrait) and (min-width: 768px) and (min-height: 800px) {
    :root {

    }
}

@media (orientation: landscape) and (min-width: 0px) {
    :root {
        --game-w: clamp(100px, min(51vw, 80svh), 1048px);
    }
}

@media (orientation: landscape) and (min-width: 1024px) {

}

@media (orientation: landscape) and (min-width: 1440px) {

}