body {
    --pixel-size: calc(min(100vh, 133vw) / 20);
    --bg-color: #a2bf8f;
    --inactive-color: #9eb98c;
    --active-color: #333b2d;
    --color: var(--inactive-color);

    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}

.root {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: calc(var(--pixel-size) * 20);
    width: calc(var(--pixel-size) * 15);
    border: 1px solid black;
}

.field {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(20, 1fr);
    height: 100%;
    max-width: 66%;
    border: 1px solid black;   
}

.pixel {
    width: calc(var(--pixel-size) * 0.8);
    height: calc(var(--pixel-size) * 0.8);
    margin: calc(var(--pixel-size) * 0.05);
    color: var(--color);
    border-width: calc(var(--pixel-size) * 0.05);
    border-style: solid;
    position: relative;
    transition: color 100ms ease-out;

    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: calc(var(--pixel-size) * 0.4);
        height: calc(var(--pixel-size) * 0.4);
        background-color: var(--color);
        transition: background-color 100ms ease-out;
    }

    &.active {
        --color: var(--active-color);
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    height: 100%;
    width: 100%;

    .score {
        width: calc(100% - var(--pixel-size) * 0.4);
        text-align: right;
        font-size: calc(var(--pixel-size) * 0.8);
        margin: calc(var(--pixel-size) * 0.5) 0;
        font-family: 'LCD', monospace;
        font-style: italic;
        position: relative;

        &::before {
            content: '888888888';
            color: var(--inactive-color);
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }

    .miniField {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .speedLevel {
        display: flex;
        flex-direction: row;
        gap: calc(var(--pixel-size) * 0.4);
        font-size: calc(var(--pixel-size) * 0.6);

        .value {
            margin: calc(var(--pixel-size) * 0.4);
            text-align: right;
            position: relative;
            font-family: 'LCD', monospace;
            font-style: italic;
            position: relative;
    
            &::before {
                content: '18';
                color: var(--inactive-color);
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        }
    }
}

.text {
    text-transform: uppercase;
    font-family: monospace;
    transition: color 100ms ease-out;
}

.helpText {
    width: 100%;
    text-align: center;
    padding: calc(var(--pixel-size) * 2) calc(var(--pixel-size) * 0.3);
    font-size: calc(var(--pixel-size) * 0.4);
    box-sizing: border-box;
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: calc(var(--pixel-size) * 0.5) 0;
    .text {
        color: var(--inactive-color);
        font-size: calc(var(--pixel-size) * 0.8);
        &.active {
            animation: blink 1s steps(1, end);
            animation-iteration-count: infinite;
        }
    }
}

@keyframes blink {
    0% {
        color: var(--inactive-color);
    }
    50% {
        color: var(--active-color);
    }
}