@media (pointer:coarse) and (orientation: landscape){
    .mobile-gameplay {
        display: flex !important;
        width: 100vw;
    }
    .devices-overlay {
        width: 0;
        overflow: hidden;
    }
    .refresh-button {
        display: none !important;
    }
    .refresh-button-image {
        display: none !important;
    }
    .settings-button {
        display: none !important;
    }  
    .overlay-buttons {
        right: 0 !important;
        top: 0;
    }
    .overlay-start-screen {
        top: 0 !important;
        width: 100vw !important;
    }   
    canvas {
        top: 0 !important;
        width: 100vw !important;
        bottom: 98px;
    }
    .end-overlay {
        top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
    }
    .end-overlay-lose {
        top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
    }
}

@media (pointer: coarse) and (orientation: portrait) {
    .devices-overlay {
        position: unset !important;
        width: 100% !important;
        justify-content: center;
    }
    canvas {
        display: none !important;
    }
    .mobile-hide {
        display: none !important;
    }
    .overlay-buttons {
        display: none !important;
    }
    .overlay-start-screen {
        display: none !important;
    }
    .end-overlay {
        display: flex !important;
        width: 1080px !important;
    }   
    .end-overlay * {
        display: none !important;
    }
    #smartphone {
        display: flex !important;
    }
    .devices-overlay {
        position: absolute; 
        top: 250px; 
        width: 100vw;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 931px) {
    canvas {
        height: 76vh !important;
        width: 100vw;
    }
    .overlay-start-screen {
        height: 76vh !important;
    }
    .lose-end-overlay-image {
        width: 100vw !important;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 933px) and (min-width: 932px) {
    canvas {
        height: 77vh !important;
        width: 100vw;
    }
    .overlay-start-screen {
        height: 77vh !important;
    }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1281px) {
    .settings-overlay-button {
        display: none;
    } 
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1369px) and (min-width: 934px) {
    canvas {
        height: 90vh !important;
        width: 100vw;
    }
    .overlay-start-screen {
        height: 90vh !important;
    }
    .settings-overlay-button {
        display: none;
    } 
}