@media (max-width: 700px) {    
    html, body {
        min-width: 0px;
        overflow: auto;
    }

    #main-content {
        height: auto;
        min-height: calc(100dvh - var(--header-height) -
            var(--footer-height));
    }
    
    #container {
        flex-direction: column;
    }

    #left-panel,
    #right-panel {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 10px;
    }

    #right-panel {
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        gap: 8px;

        min-width: 0;
        max-height: fit-content;
    }

    .controls {
        gap: 3px;
    }

    #timer-container {
        margin: 3px;
    }

    #scoreboard {
        min-width: 0;
    }

    #verse-display-container {
        height: var(--height-verse-box-mob);
    }

    #diamond {
        width: 40dvw;
    }

    .base {
        width: 7dvw;
    }

    .runner {
        width: 14px;
        height: 14px;
    }

    button, 
    .dropdown button
    {
        font-size: 1.1rem;
        padding: clamp(var(--height-button-mob), 2.4dvh, var(--height-button)) clamp(var(--width-button-mob), 3vw, var(--width-button));
        margin: 3px;
    }

    #header-bar {
        font-size: clamp(1.2rem, 6vw, 2rem);
    }

    .strike-box {
        width: var(--size-strbox-mob);
        height: var(--size-strbox-mob);
    }

    #game-main-menu-btn {
        display: none;
    }

    #left-panel .controls {
    margin: 3px 0px;
    }
}