#mobileControls {
    display: none;
}

@media (max-width: 768px) {

    #playerWrap {
        bottom: 96px;
        width: 96px;
        height: 196px;
    }

    #player {
        width: 96px;
        transform: scale(.5);
    }

    .ground {
        height: 125px;
    }

    .world-object {
        bottom: 90px;
    }

    #coords {
        font-size: 14px;
        top: 10px;
        left: 10px;
    }

    .heroTooltip {
        width: 80vw;
        padding: 20px;
    }

    .heroTooltip h1 {
        font-size: 2rem;
    }

    .heroTooltip h2 {
        font-size: 1.2rem;
    }

    .popup-content {
        width: 82vw;
        min-height: 300px;
        padding: 55px 35px;
    }

    .before,
    .next {
        width: 48px;
        height: 48px;
    }

    .before {
        left: -20px;
    }

    .next {
        right: -20px;
    }

    #mobileControls {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        z-index: 999;
        pointer-events: none;
    }

    .mobileBtn {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .4);
        background: rgba(0, 0, 0, .35);
        color: white;
        font-size: 34px;
        font-weight: bold;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
    }
    
    #mobileControls {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        z-index: 10000;
        pointer-events: none;
    }
    
    .mobileBtn {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .4);
        background: rgba(0, 0, 0, .35);
        color: white;
        font-size: 34px;
        font-weight: bold;
        pointer-events: auto;
        touch-action: none;
        user-select: none;
    }
}