.ma-arena {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #111a29;

    .ping {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 2;
        padding: 5px 10px;
        border: #566F9D 1px solid;
        background: rgba(15, 41, 113, .27);
    }

    .leaderboard {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 2;
        width: 230px;
        padding: 10px;
        border: #566F9D 1px solid;
        background: rgba(15, 41, 113, .27);
        font-size: 14px;
        .player {
            display: flex;
            .name {
                flex: 1;
            }
            .score {
                white-space: nowrap;
                font-weight: 500;
            }
        }
    }

    .minimap {
        position: absolute;
        bottom: 5px;
        left: 5px;
        z-index: 2;
        width: 250px;
        height: 250px;
        border: #566F9D 1px solid;
        background: rgb(39 64 113);
        .player {
            display: block;
            width: 6px;
            height: 6px;
            background: #5374af;
            position: absolute;
        }
        .self {
            background: #fff;
        }
    }

    .player-local,
    .player-remote {
        position: absolute;
        top: calc(50% - 40px);
        left: calc(50% - 40px);
        width: 80px;
        height: 80px;
        background: #fff;
        border-radius: 50%;
        z-index: 1;
        transition: all .1s;

        .name {
            position: absolute;
            background: #fff;
            color: #000;
            top: 50%;
            border-radius: 20px;
            padding: 2px 8px;
            transform: translate(-50%,-50%);
            left: 50%;
            font-size: 18px;
            font-weight: 700;
            white-space: nowrap;
        }

        .score {
            position: absolute;
            color: #000;
            left: 0;
            right: 0;
            bottom: 4px;
            text-align: center;
        }
    }

    .problem {
        position: absolute;
        width: 300px;
        height: 300px;
        .background {
            width: 300px;
            height: 300px;
            background: rgba(1, 115, 104, .39);
            border-radius: 50%;
            border: 4px dashed #7cccc4;
            animation: rotate 8s linear infinite;
            @keyframes rotate {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(359.9deg);
                }
            }
        }
    }

    .field {
        position: absolute;
        top: calc(50%);
        left: calc(50%);
        width: 2500px;
        height: 2500px;
        border: #566F9D 1px solid;
        background-image: url(/images/hex.png);
        background-color: #334B78;
        transition: all .1s;
    }
}
