#mobile-controls.active {
    display: flex;
}

#joystick.active {
    display: block;
}

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

@media (pointer: coarse) {
    #mobile-controls.active {
        display: flex;
    }
    #joystick.active {
        display: block;
    }
}

@media (max-width: 1039px) and (orientation: portrait) {
    #rotate-overlay {
        display: flex;
    }
}


@media (max-width: 720px) {
    h1 {
        display: none;
    }

    #game-container {
        width: 100%;
        height: auto;
        padding-bottom: 66.666%;
        margin: 0;
    }

    canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .top-bar {
        top: 12px;
        right: 20px;
        gap: 12px;
    }

    .top-bar img {
        width: 24px;
    }

    .bottom-bar {
        bottom: 8px;
        left: 8px;
        gap: 12px;
    }

    .main-btn {
        padding: 8px 20px;
        white-space: nowrap;
    }

    .btn-row {
        gap: 12px;
    }

    .result-img {
        width: 80%;
        max-height: 60%;
        object-fit: contain;
        padding-top: 0;
    }

    .dialog-box {
        width: 85%;
        height: 55%;
        padding: 16px;
    }

    #mobile-controls .action-controls button {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #joystick {
        width: 100px !important;
        height: 100px !important;
    }

}

@media (max-height: 440px) and (orientation: landscape) {
    h1 {
        display: none;
    }

    .top-bar {
        top: 16px;
        right: 18px;
        gap: 12px;
    }

    .top-bar img {
        width: 24px;
    }

    .bottom-bar {
        bottom: 12px;
        left: 12px;
        font-size: 12px;
    }

    .main-btn {
        padding: 8px 20px;
        font-size: clamp(20px, 2.5vh, 20px);
        font-size: 16px;
    }

    #mobile-controls {
        bottom: 20px;
        left: 14px;
        right: 14px;
    }

    .action-controls {
        gap: 24px;
    }

    .action-controls button {
        width: 50px;
        height: 50px;
    }

    .action-controls button {
        width: 75px;
        height: 75px;
    }

    #joystick {
        width: 95px;
        height: 95px;
    }

    .result-img {
        width: 80%;
        max-height: 60%;
        object-fit: contain;
        padding-top: 0;
    }
}

@media (max-height: 375px) and (orientation: landscape) {
    .top-bar {
        top: 12px;
        right: 16px;
        gap: 10px;
    }

    .bottom-bar {
        bottom: 12px;
        left: 12px;
        font-size: 12px;
    }

    .main-btn {
        padding: 2.5vh 3.5vh;
        font-size: clamp(16px, 2.5vh, 20px);
    }

    #mobile-controls {
        bottom: 4px;
        left: 5px;
        right: 5px;
    }

    .action-controls {
        gap: 24px;
    }

    .action-controls button {
        width: 60px;
        height: 60px;
    }

    #joystick-base {
        width: 85px;
        height: 85px;
    }

    #joystick-knob {
        width: 35px !important;
        height: 35px !important;
        top: 25px !important;
        left: 25px !important;
    }

    #joystick {
        width: 75px;
        height: 75px;
        padding-bottom: 14px;
    }

    .top-bar img {
        width: 20px;
    }

    .result-img {
        width: 80%;
        max-height: 60%;
        object-fit: contain;
        padding-top: 0;
    }
}

@media (max-height: 500px) and (max-width: 720px) {
    #game-container {
        padding-bottom: 0;
        height: 100vh;
    }
    .main-btn {
        margin-bottom: 100px;
    }
    .action-controls button {
        width: 60px !important;
        height: 60px !important;
        font-size: 18px !important;
        
    }
    #joystick {
        width: 80px !important;
        height: 80px !important;
        padding-bottom: 8px;
    }
}