@media only screen and (max-width: 720px) {

    #titleGame {
        display: none;
    }

    #startButton,
    .burger-btn,
    .fullscreen-btn,
    .game-over-btn,
    .next-level-text,
    .win-btn {
        padding: 6px 10px;
        font-size: 16px;
    }

    .audio-hud {
        top: 68px;
    }

    .attack {
        margin: 0 76px 0 64px;
    }

    #pauseBtn {
        right: 200px;
    }

    .icon-img {
        width: 30px;
        height: 30px;
    }

    .burger-overlay,
    .settings-overlay {
        gap: 12px;
    }

    .burger-overlay ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 64px;
        grid-auto-flow: row;
        gap: 12px;
        justify-content: center;
        align-content: center;
        justify-items: center;
        padding: 0;
        margin: 0;
    }

    .burger-overlay ul>li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .burger-overlay li {
        width: auto;
        display: flex;
        justify-content: center;
    }

    .menu-btn {
        flex-direction: column;
        justify-content: center;
        width: 120px;
        height: 64px;
        padding: 0;
        font-size: 12px;
        text-align: center;
        border-radius: 12px;
        white-space: normal;
        line-height: 1.1;
        gap: 8px;
        text-shadow: 0 0 1px black;
    }
}


@media only screen and (max-width: 560px) {

    .burger-overlay,
    .settings-overlay {
        padding: 12px;
    }

    .settings-header {
        padding: 0 0 12px 12px;
    }

    h2 {
        font-size: 16px;
    }

    .setting-row {
        font-size: 14px;
        padding-left: 12px;
    }

    .language-btn {
        font-size: 16px;
    }
}


@media only screen and (max-width: 530px) {

    .burger-header {
        padding: 8px;
    }

    .burger-overlay ul {
        gap: 8px;
    }

    .burger-overlay,
    .settings-overlay {
        gap: 8px;
        padding: 12px;
    }
}


@media only screen and (max-width: 500px) {

    #titleGame {
        display: none;
    }

    #gameContainer {
        border-radius: 0;
    }

    .attack {
        margin: 0 70px 0 64px;
    }

    #pauseBtn {
        right: 186px;
    }

    .burger-overlay,
    .settings-overlay {
        width: 60%;
        gap: 8px;
    }

    .burger-header,
    .settings-header {
        padding-bottom: 8px;
    }

    .icon-img {
        width: 24px;
        height: 24px;
    }

    .audio-hud {
        top: 62px;
    }

    .audio-hud-btn {
        padding: 6px 8px;
    }

    .audio-hud-btn img,
    .control-btn img {
        width: 20px;
        height: 20px;
    }

    .level-indicator {
        right: 45%;
        font-size: 12px;
    }

    .menu-btn {
        width: 76px;
        height: 44px;
    }

    .burger-overlay ul {
        grid-auto-rows: 56px;
        gap: 4px;
    }

    .menu-icon {
        width: 36px;
        height: 36px;
    }

    .menu-label {
        display: none;
    }

    .setting-block {
        padding-bottom: 12px;
    }
}


@media only screen and (max-width: 460px) {

    .burger-overlay ul {
        grid-auto-rows: 48px;
    }

    .burger-overlay,
    .settings-overlay {
        gap: 8px;
        padding: 8px;
    }
}


@media only screen and (max-width: 430px) {

    .burger-overlay,
    .settings-overlay {
        padding: 6px;
    }
}


@media only screen and (max-width: 400px) {

    .burger-header {
        padding: 0 0 8px;
    }

    .burger-overlay ul {
        grid-auto-rows: 36px;
    }

    .burger-overlay,
    .settings-overlay {
        gap: 6px;
    }

    .setting-block {
        gap: 12px;
    }

    .menu-btn {
        height: 32px;
    }

    .menu-icon {
        width: 24px;
        height: 24px;
    }

    .copyright {
        font-size: 8px;
    }

    h2,
    .setting-row,
    .language-btn {
        font-size: 12px;
    }

    #mobileControls {
        gap: 0;
    }

    .direction {
        gap: 6px;
    }

    #pauseBtn {
        right: 152px;
    }

    .attack {
        margin: 0 64px 0 64px;
        gap: 6px;
    }

    .control-btn img {
        width: 16px;
        height: 16px;
    }

    .control-btn {
        padding: 6px 10px;
    }

    .level-indicator {
        right: 40%;
    }
}


@media (pointer: coarse) and (min-width: 721px) and (max-width: 1280px) {
    #gameContainer {
        border-radius: 0;
    }
}



@media (orientation: landscape) and (max-height: 480px) {
    #titleGame {
        display: none;
    }

    #gameContainer {
        border-radius: 0;
        height: 100svh;
    }
}