html,
body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

.arena-row {
    display: flex;
    flex-direction: row;
}

.arena-cell {
    flex: 1;
    aspect-ratio: 1 / 1;
    background-color: #fefefe;
    border: 1px solid #eee;
    position: relative;
}

.arena-cell-top {
    border-top: 1px solid #444;
}

.arena-cell-bottom {
    border-bottom: 1px solid #444;
}

.arena-cell-left {
    border-left: 1px solid #444;
}

.arena-cell-right {
    border-right: 1px solid #444;
}

.arena-cell-road {
    background-color: #cccccc;
}

.arena-cell-river {
    background-color: #3582ce;
}

.arena-cell-bridge {
    background-color: #e69138;
}

.arena-cell-bridge-edge {
    background-color: #f6b26b;
}

.arena-cell-tower-green {
    background-color: green;
    border: 1px solid green !important;
}

.arena-cell-tower-green-range::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: green;
    opacity: 0.2;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.arena-cell-tower-red {
    background-color: red;
    border: 1px solid red !important;
}

.arena-cell-tower-red-range::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: 0.2;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.arena-cell > .unit {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.arena-cell > .unit.team-green {
    border: 2px solid green;
}

.arena-cell > .unit.team-red {
    border: 2px solid red;
}

.arena-cell > .unit > img {
    width: 100%;
    height: 100%;
}

.arena-cell > .king-tower-hp {
    width: 200%;
    height: 400%;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
}

.arena-cell > .princess-tower-hp {
    width: 200%;
    height: 200%;
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2rem;
}

/* ----------------------------------- */

.unit-move_0_-1 {
    animation: move_0_-1 0.5s linear;
}

@keyframes move_0_-1 {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.unit-move_0_1 {
    animation: move_0_1 0.5s linear;
}

@keyframes move_0_1 {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.unit-move_-1_0 {
    animation: move_-1_0 0.5s linear;
}

@keyframes move_-1_0 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.unit-move_1_0 {
    animation: move_1_0 0.5s linear;
}

@keyframes move_1_0 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.unit-move_-1_-1 {
    animation: move_-1_-1 0.5s linear;
}

@keyframes move_-1_-1 {
    from {
        transform: translateX(100%) translateY(100%);
    }
    to {
        transform: translateX(0) translateY(0);
    }
}

.unit-move_1_1 {
    animation: move_1_1 0.5s linear;
}

@keyframes move_1_1 {
    from {
        transform: translateX(-100%) translateY(-100%);
    }
    to {
        transform: translateX(0) translateY(0);
    }
}

.unit-move_-1_1 {
    animation: move_-1_1 0.5s linear;
}

@keyframes move_-1_1 {
    from {
        transform: translateX(100%) translateY(-100%);
    }
    to {
        transform: translateX(0) translateY(0);
    }
}

.unit-move_1_-1 {
    animation: move_1_-1 0.5s linear;
}

@keyframes move_1_-1 {
    from {
        transform: translateX(-100%) translateY(100%);
    }
    to {
        transform: translateX(0) translateY(0);
    }
}