@media only screen and (max-width: 720px) {
    .game-container {
        width: 100%;
        max-width: 720px;
        height: auto;
    }

    #game-over-screen,
    #you-won-screen {
        width: 100% !important;
        height: 100% !important;
        padding: 12px;
    }

    #game-over-screen img,
    #you-won-screen img {
        max-height: 45% !important;
        max-width: 90% !important;
        object-fit: contain;
    }

    .restart-btn,
    .menu-link-btn {
        padding: 6px 16px;
        font-size: 16px;
        margin-bottom: 0;
    }

    .game-end-btns {
        gap: 8px;
    }
}

@media only screen and (max-height: 580px) and (orientation: landscape) {
    body {
        overflow: hidden;
    }

    .game-container {
        width: auto;
        height: 100dvh;
        aspect-ratio: 720 / 480;
    }

    canvas {
        width: auto;
        height: 100%;
    }

    #mobile-controls {
        bottom: 12px;
        padding: 0 16px;
    }

    .mobile-btn-group button {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .menu-buttons {
        padding: 20px 20px 10px 20px;
    }

    .main-menu-group {
        margin-top: 0;
        gap: 16px;
    }

    #start-btn,
    #instruction-btn {
        padding: 8px 20px;
        font-size: 18px;
    }

    #imprint-btn,
    #privacy-btn {
        padding: 4px 12px;
        font-size: 16px;
    }
}

@media only screen and (max-width: 480px) {
    dialog {
        width: 90% !important;
        max-width: 90vw !important;
        margin: auto;
    }

    .dialog-container {
        padding: 12px;
    }

    dialog li {
        font-size: 16px;
        padding: 8px;
    }
    
    .rotate-message {
        font-size: 18px;
        padding: 16px;
    }
}

@media only screen and (orientation: portrait) {
    #rotate-screen {
        display: flex !important;
    }

    body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

@media only screen and (orientation: landscape) {
    #rotate-screen {
        display: none !important;
    }
}

@media (pointer: fine) {
    #mobile-controls {
        display: none !important;
    }
}