#match {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas:
        "green top red"
        "green arena red";
    grid-template-rows: 120px 1fr;
    grid-template-columns: 250px 1fr 250px;
}

.match-top {
    grid-area: top;
    justify-content: center;
    border-bottom: 1px solid var(--border-color2);

    display: grid;
    grid-template-areas:
        "main main main"
        "green status red"
        "green status-sub red";
    grid-template-rows: 50px 40px 30px;
    grid-template-columns: 150px 1fr 150px;
}

.match-top-main {
    grid-area: main;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-top-main > div {
    width: 100%;
    max-width: 600px;
    height: 30px;
    margin: 0 8px;
    padding-right: 28px;
    border-radius: 15px;
    border: 1px solid var(--border-color1-5);
}

.match-top-main > div > div {
    position: relative;
    width: 100%;
    height: 100%;
}

.match-top-main > div > div > .round {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-top-main > div > div > .round-full {
    height: 30px;
    top: -1px;
    font-size: 1rem;
}

.match-top-main > div > div > .round-top {
    z-index: 1;
    margin-left: 7.5px;
    height: 15px;
    top: -8.5px;
    font-size: 0.75rem;
}

.match-top-main > div > div > .round-bottom {
    z-index: 1;
    margin-left: 7.5px;
    height: 15px;
    top: 21.5px;
    font-size: 0.75rem;
}

.match-top-main > div > div > .current-round {
    border: 2px solid var(--bg-color-accent-strong);
    background-color: var(--bg-color-accent-strong);
    color: var(--text-color-on-accent-strong);
}

.match-top-main > div > div > .regular-time-last-round {
    border: 2px solid var(--border-color2);
}

.match-top-main > div > div > .double-elixir-round {
    border: 2px solid transparent;
}

.match-top-main > div > div > .triple-elixir-round {
    border: 2px solid transparent;
}

.match-top-main > div > div > .last-round {
    border: 2px solid var(--border-color2);
}

.match-top-main > div > div > div > img {
    width: 300%;
    height: 300%;
}

.match-top-green {
    grid-area: green;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-top-red {
    grid-area: red;
    display: flex;
    justify-content: center;
    align-items: center;
}

.match-top-status {
    grid-area: status;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.match-top-status-sub {
    grid-area: status-sub;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
}

.match-side-green {
    grid-area: green;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color2);
    padding: 8px;
    overflow: auto;
}

.match-side-red {
    grid-area: red;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color2);
    padding: 8px;
    overflow: auto;
}

.match-elixir {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
}

.match-elixir > img {
    height: 100px;
    aspect-ratio: 1 / 1;
}

.match-hand {
    margin-top: 32px;
    display: flex;
}

.match-hand > .card {
    flex: 0 0 25%;
    aspect-ratio: 5 / 6;
}

.match-hand > .card > img {
    width: 100%;
    height: 100%;
}

.match-draw-pile {
    margin-top: 8px;
    display: flex;
}

.match-draw-pile > .card {
    flex: 0 0 25%;
    aspect-ratio: 5 / 6;
}

.match-draw-pile > .card > img {
    width: 100%;
    height: 100%;
}

.card.disabled > img {
    filter: grayscale(100%);
}

.match-deck-average {
    display: flex;
    justify-content: center;
    font-weight: bold;
    padding-top: 2px;
}

/*
Note: Arena layout with aspect ratio and centering is
very fragile. Do not change without testing at least Firefox and Chrome.
*/
.match-arena {
    grid-area: arena;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.arena {
    flex: 1;
    aspect-ratio: 26 / 16;
    max-height: 100%;

    padding: 8px;
    cursor: default;
}
.arena-inner {
    display: grid;
    grid-template-columns: repeat(26, 1fr);
    grid-auto-flow: row;

    border-top: 1px solid var(--border-color2);
    border-left: 1px solid var(--border-color2);

    aspect-ratio: 26 / 16;
    max-height: 100%;
    margin: auto;
    position: relative;
}
/* End Arena layout */

.arena-cell {
    flex: 1;
    aspect-ratio: 1 / 1;
    background-color: var(--bg-color-accent);
    position: relative;
}

.arena-cell-border {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
}
.arena-cell-border.arena-cell-border-bottom {
    border-bottom: 1px solid var(--border-color);
}
.arena-cell-border.arena-cell-border-right {
    border-right: 1px solid var(--border-color);
}
.arena-cell-border.arena-cell-border-bottom2 {
    border-bottom: 1px solid var(--border-color2);
}
.arena-cell-border.arena-cell-border-right2 {
    border-right: 1px solid var(--border-color2);
}

.arena-cell-road {
    background-color: var(--road-color);
}

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

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

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

.arena-cell-tower-destroyed-green {
    background-color: rgb(80, 131, 80);
}

.arena-cell-tower-destroyed-red {
    background-color: rgb(251, 151, 151);
}

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

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

.arena-cell-non-placeable::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: red;
    opacity: var(--non-placeable-opacity);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.arena-cell > .unit-translate {
    width: calc(100% - 0.5px);
    height: calc(100% - 0.5px);
    position: absolute;
    pointer-events: none;
}

.unit-translate > .unit-scale {
    width: 100%;
    height: 100%;
    position: relative;
}

.unit-scale0 {
    transform: scale(1) translate(0%, 0%);
}

.unit-scale1 {
    transform: scale(0.5) translate(-50%, -50%);
}

.unit-scale2 {
    transform: scale(0.5) translate(50%, -50%);
}

.unit-scale3 {
    transform: scale(0.5) translate(-50%, 50%);
}

.unit-scale4 {
    transform: scale(0.5) translate(50%, 50%);
}

.unit-scale > .unit {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: all;
}

.unit-scale > .unit:not(.tower) {
    border-radius: 10%;
}

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

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

.unit-scale > .unit > * {
    position: absolute;
}

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

.unit-scale > .unit > .health-bar {
    width: 100%;
    height: 4px;
    top: -10px;
    z-index: 3;
    display: flex;
    border: 1px solid var(--border-color2);
}

.unit-scale > .unit.team-green > .health-bar {
    background-color: rgb(0, 50, 0);
}
.unit-scale > .unit.team-red > .health-bar {
    background-color: rgb(80, 0, 0);
}

.unit-scale > .unit > .health-bar > * {
    height: 100%;
}

.unit-scale > .unit.team-green > .health-bar > * {
    background-color: green;
}
.unit-scale > .unit.team-red > .health-bar > * {
    background-color: red;
}

.unit-scale > .unit > .hp {
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    backdrop-filter: blur(1.5px) brightness(50%);
    color: #fff;
}

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

    font-size: 2rem;
}

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

    font-size: 2rem;
}

.bg-fill-green {
    background-color: green;
    width: 100%;
    height: 100%;
}

.bg-fill-red {
    background-color: red;
    width: 100%;
    height: 100%;
}

.unit-preview {
    position: absolute;
    z-index: 4;
    opacity: 0.5;
}

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

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

.unit-scale0-targeta {
    animation: scale0-targeta 0.5s ease-out forwards;
}
@keyframes scale0-targeta {
    to {
        transform: scale(1) translate(0%, 0%);
    }
}
.unit-scale0-targetb {
    animation: scale0-targetb 0.5s ease-out forwards;
}
@keyframes scale0-targetb {
    to {
        transform: scale(1) translate(0%, 0%);
    }
}

.unit-scale1-targeta {
    animation: scale1-targeta 0.5s ease-out forwards;
}
@keyframes scale1-targeta {
    to {
        transform: scale(0.5) translate(-50%, -50%);
    }
}
.unit-scale1-targetb {
    animation: scale1-targetb 0.5s ease-out forwards;
}
@keyframes scale1-targetb {
    to {
        transform: scale(0.5) translate(-50%, -50%);
    }
}

.unit-scale2-targeta {
    animation: scale2-targeta 0.5s ease-out forwards;
}
@keyframes scale2-targeta {
    to {
        transform: scale(0.5) translate(50%, -50%);
    }
}
.unit-scale2-targetb {
    animation: scale2-targetb 0.5s ease-out forwards;
}
@keyframes scale2-targetb {
    to {
        transform: scale(0.5) translate(50%, -50%);
    }
}

.unit-scale3-targeta {
    animation: scale3-targeta 0.5s ease-out forwards;
}
@keyframes scale3-targeta {
    to {
        transform: scale(0.5) translate(-50%, 50%);
    }
}
.unit-scale3-targetb {
    animation: scale3-targetb 0.5s ease-out forwards;
}
@keyframes scale3-targetb {
    to {
        transform: scale(0.5) translate(-50%, 50%);
    }
}

.unit-scale4-targeta {
    animation: scale4-targeta 0.5s ease-out forwards;
}
@keyframes scale4-targeta {
    to {
        transform: scale(0.5) translate(50%, 50%);
    }
}
.unit-scale4-targetb {
    animation: scale4-targetb 0.5s ease-out forwards;
}
@keyframes scale4-targetb {
    to {
        transform: scale(0.5) translate(50%, 50%);
    }
}

/*
TODO: move attacker slightly towards target in attack animation?
*/

.unit-attackeda {
    animation: attackeda 1.5s ease-out;
}

@keyframes attackeda {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.unit-attackedb {
    animation: attackedb 1.5s ease-out;
}

@keyframes attackedb {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.unit-scale > .unit > .health-bar > .health-bar-damageda {
    transform-origin: left center;
    transform: scale(0);
    animation: health-bar-damageda 1.5s ease-out;
}
@keyframes health-bar-damageda {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

.unit-scale > .unit > .health-bar > .health-bar-damagedb {
    transform-origin: left center;
    transform: scale(0);
    animation: health-bar-damagedb 1.5s ease-out;
}
@keyframes health-bar-damagedb {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    80% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

.unit-damageda {
    animation: damageda 1.5s ease-out;
}
@keyframes damageda {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    80% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
.unit-damageda::after {
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    opacity: 0;
    pointer-events: none;
    animation: damageda-after 1.5s ease-out;
}
@keyframes damageda-after {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

.unit-damagedb {
    animation: damagedb 1.5s ease-out;
}
@keyframes damagedb {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    80% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}
.unit-damagedb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    opacity: 0;
    pointer-events: none;
    animation: damagedb-after 1.5s ease-out;
}
@keyframes damagedb-after {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    80% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

.unit-killeda {
    transform: scale(0);
    animation: killeda 1.5s ease-out;
}

@keyframes killeda {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

.unit-killedb {
    transform: scale(0);
    animation: killedb 1.5s ease-out;
}

@keyframes killedb {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

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

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

.unit-movea_0_1 {
    animation: movea_0_1 0.5s linear;
}
.unit-moveb_0_1 {
    animation: moveb_0_1 0.5s linear;
}

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

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

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

.unit-movea_1_0 {
    animation: movea_1_0 0.5s linear;
}
.unit-moveb_1_0 {
    animation: moveb_1_0 0.5s linear;
}

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

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

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

.unit-movea_1_1 {
    animation: movea_1_1 0.5s linear;
}
.unit-moveb_1_1 {
    animation: moveb_1_1 0.5s linear;
}

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

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

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

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

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