@media (orientation: portrait) and (max-width: 1025px) {

    #canvas-container,
    h1 {
        display: none !important;
    }

    #turn-device-screen {
        display: flex !important;
    }
}

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

@media (max-height: 640px) and (orientation: landscape) {

    html,
    body {
        overflow: hidden !important;
        position: fixed;
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }

    .start-game-btn {
        font-size: 20px;
    }

    .mobile-btn {
        width: 65px !important;
        height: 65px !important;
    }

    #canvas-container {
        height: 100vh;
        width: auto;
    }

    h1 {
        display: none !important;
    }
}

@media (max-height: 375px) and (orientation: landscape) {

    #start-screen {
        padding-bottom: 10px;
    }

    .start-game-btn {
        font-size: 16px;
    }

    .menu-sub-btn {
        font-size: 16px;
        font-weight: normal;
    }

    .menu-top-right {
        position: absolute;
        top: 5px;
        right: 10px;
        display: flex;
        gap: 15px;
        z-index: 999;
    }

    .icon-btn {
        height: 15px;
        width: 15px;
    }
}