GameState {
    width: 100%;
    top: 32px;
    left: 96px;
    position: absolute;

    .main {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .top {
        width: 100%;
        justify-content: space-between;
        align-items: flex-end;

        .timer {
            font-family: Open Sans;
            font-size: 24px;
            color: #f1a92c;
            font-weight: 600;
            mix-blend-mode: lighten;
        }

        .timer, .game {
            text-shadow: 0px 0px 2px #ff550086;
        }

        .game {
            font-family: Open Sans;
            font-size: 18px;
            color: #f1a92c;
            font-weight: 500;
            mix-blend-mode: lighten;
        }
    }

    .scorebars {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 360px;

        .bar-container {
            height: 24px;
            width: 100%;
            position: relative;
            background-color: rgba( 0, 0, 0, 0.4 );
            border: 0.25px solid rgba( black, 1 );

            &:before {
                left: 0;
                top: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #00000050;
                mask-position: center;
                mask-size: 32px;
                mask-image: url( ui/diag_line_mask.png );
            }

            .score {
                position: absolute;
                left: 12px;
                top: 50%;
                transform: translateY(-50%);
                color: #fc5;
                text-shadow: 0px 0px 10px #ffc94400;
                font-family: Open Sans;
                font-size: 16px;
                font-weight: 600;
                z-index: 1;
            }

            .score-bar {
                height: 100%;
                position: relative;
                transition: width 0.3s ease;
                background-color: #9e9e9e20;

                &:before {
                    left: 0;
                    top: 0;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-color: rgba( black, 0.25 );
                    mask-position: center;
                    mask-size: 32px;
                    mask-image: url( ui/diag_line_mask.png );
                }
            }

            &.me {
                height: 40px;

                .score {
                    font-size: 21px;
                }

                .score-bar {
                    overflow: visible;
                    background-image: radial-gradient(#ffc94400, #f4ab2cc6);
                    box-shadow: 0px 0px 50px #f802;
                    background-color: transparent;
                    align-items: center;

                    &.not-zero {
                        border: 1px solid #e6ad12;
                    }

                    &:before {
                        background-color: #ffaf007b;
                    }

                    &:after {
                        left: -24px;
                        position: absolute;
                        width: 12px;
                        height: 12px;
                        background-image: linear-gradient( to right, #ffaf007b, #ffaf007b );
                        transform: rotateZ(45deg);
                        box-shadow: 0px 0px 20px #ffaf003e;
                        border: 0.25px solid black;
                    }
                }
            }
        }
    }
}