@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        touch-action: none;
        overscroll-behavior: none;
    }

    body {
        padding: 0 8px;
        padding-bottom: 145px;
        box-sizing: border-box;
    }

    h2 {
        font-size: 20px;
        margin: 12px 0 6px;
    }

	.game-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    #gameCanvas {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: calc(100vh - 230px);
        margin-top: 10px;
        box-sizing: border-box;
    }

    #buff-container {
        position: absolute;

        top: 10px;
        left: 10px;

        width: auto;
        max-width: 140px;

        margin-left: 0;
    }

    .info {
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.8;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 10px;
    }

    #life {
        font-size: 20px;
        letter-spacing: 2px;
    }

    #startBtn {
        margin-top: 8px;
        padding: 10px 24px;
        font-size: 16px;
    }

    .floating-btn {
        width: 42px;
        height: 42px;
        font-size: 20px;
        top: 10px;
        left: 10px;
        z-index: 1500;
    }

    #creditsBtn {
        top: 58px;
        left: 10px;
    }

    #settingsBtn {
        top: 10px;
        right: 10px;
    }

    .info-panel {
        top: 58px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 14px 16px;
        box-sizing: border-box;
    }

    .enemy-info img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

    .info-panel p {
        font-size: 13px;
    }

    #buff-container {
        top: 8px;
        left: 8px;
        margin-left: 0;
        width: auto;
        max-width: 150px;
        gap: 6px;
        pointer-events: none;
    }

    .buff-icon {
        padding: 5px 7px;
    }

    .buff-icon img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }

    .buff-icon .timer {
        font-size: 13px;
    }

    #touch-control {
        display: block;
        left: 16px;
        bottom: 16px;
        width: 110px;
        height: 110px;
    }

    #touch-stick {
        width: 110px;
        height: 110px;
    }

    #touch-knob {
        left: 37px;
        top: 37px;
        width: 36px;
        height: 36px;
    }

    .modal {
        width: calc(100vw - 32px);
        max-width: 360px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        padding: 22px 18px;
        box-sizing: border-box;
    }

    .modal h3 {
        font-size: 22px;
    }

    .modal p {
        font-size: 15px;
    }

    .modal-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .modal-buttons button {
        width: 100%;
        font-size: 16px;
        padding: 11px 16px;
    }

    .setting-item {
        flex-direction: column;
        gap: 10px;
    }

    .setting-item label {
        margin-right: 0;
        font-size: 16px;
    }

    input[type=range] {
        width: 100%;
    }

    #upgradeOptions button {
        width: 100%;
    }
}