svg, .playing_field_box .overlay_box {
    --size1: calc(100vw - 1rem);
    --size2: min(var(--size1), 70rem, 90vh);
    height: var(--size2);
    width: var(--size2);
}
svg rect {
    fill: #4b0;
}
svg circle.pond {
    fill: #04c;
}
@media (prefers-color-scheme: dark) {
    svg rect {
        fill: #260;
    }
    svg circle.pond {
        fill: #038;
    }
}
button#reconnect {
    display: none;
    margin: 1rem 0;
}
.playing_field_box {
    position: relative;
}
.playing_field_box .overlay_box {
    align-items: center;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
}
#playing_field_overlay {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    color: var(--foreground);
    font-size: calc(0.05 * var(--size2));
    padding: calc(0.02 * var(--size2));
    visibility: hidden;
}
#playing_field_overlay.animated {
    font-size: calc(0.07 * var(--size2));
    padding: calc(0.028 * var(--size2));
    transition: 2s ease-out;
}