/* --- игра в ЕНОТА-ЗАХВАТЧИКА, клиентский UI --- */
.invader-container {
}

.invader-field-container {

}

.invader-field-row {
    display: flex;
    justify-content: center;
}

.invader-field-cell {
    aspect-ratio: 1 / 1;
    flex: 1;
    max-width: 32px;
    max-height: 32px;
}

    .invader-field-cell.grass {
        background: url('/img/invader/grass.png') center/cover no-repeat;
        cursor: pointer;
    }
    .invader-field-cell.wall {
        background: url('/img/invader/wall.png') center/cover no-repeat;
    }
    .invader-field-cell.block {
        background: url('/img/invader/block-with-background.png') center/cover no-repeat;
        cursor: pointer;
    }
    .invader-field-cell.acquired {
        background: url('/img/invader/acquired.png') center/cover no-repeat;
    }
    .invader-field-cell.raccoon {
        background: url('/img/invader/raccoon-with-background.png') center/cover no-repeat;
    }
    .invader-field-cell.raccoon-acquired {
        background: url('/img/invader/raccoon-with-acquired-background.png') center/cover no-repeat;
    }

.invader-stat-container {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.invader-stat-blocks-left {
    display: flex;
    margin: auto 0;
    padding-right: 2rem;
}

.invader-stat-blocks-left-icon {
    background: url('/img/invader/block-without-background.png') center/cover no-repeat;
    width: 32px;
    height: 32px;
}

.invader-stat-blocks-left-value, .invader-stat-last-score-value, .invader-stat-best-score-value {
    display: flex;
    font-weight: bold;
    margin: auto 0;
    padding-left: 1rem;
}

.invader-stat-blocks-reset {
    display: flex;
    margin: auto 0;
}

.invader-stat-score {
    display: block;
    padding-left: 2rem;
}

.invader-stat-last-score, .invader-stat-best-score {
    display: flex;
}
.invader-stat-last-score-title, .invader-stat-best-score-title {
    margin: auto;
}