@media (max-width: 768px) {
    html {
        height: 100%;
        overflow: hidden;
    }

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

    #overlay {
        bottom: 5px !important;
        width: 95vw !important;
        position: fixed !important;
    }

    #guessInput {
        padding: 8px 10px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .suggestions-list {
        max-height: 105px !important;
        font-size: 0.95rem !important;
    }

    .suggestion-item {
        padding: 8px 14px !important;
        min-height: 34px !important;
    }

    #minimap {
        width: 85vw !important;
        max-width: 380px !important;
        height: 65vh !important;
        max-height: 400px !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        position: fixed !important;
    }

    #valider-coord {
        width: 85vw !important;
        max-width: 384px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 15px !important;
        z-index: 3000 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #helpBtn {
        bottom: 15px !important;
        left: 15px !important;
    }

    #quitBtn {
        z-index: 9999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

@media (max-width: 480px) {
    #overlay {
        bottom: 5px !important;
        width: 98vw !important;
        position: fixed !important;
    }

    #guessInput {
        padding: 8px 10px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }

    .suggestions-list {
        max-height: 90px !important;
        font-size: 0.9rem !important;
    }

    .suggestion-item {
        padding: 7px 12px !important;
        min-height: 32px !important;
    }

    #minimap {
        width: 92vw !important;
        height: 58vh !important;
        max-height: 380px !important;
        max-width: 420px !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        position: fixed !important;
    }

    #valider-coord {
        width: 92vw !important;
        max-width: 420px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        bottom: 12px !important;
        z-index: 3000 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    #helpBtn {
        bottom: 10px !important;
        left: 10px !important;
        font-size: 0.9rem !important;
        padding: 8px 20px !important;
    }
}