.navigation-mode-switch {
    position: fixed;
    right: 18px;
    bottom: 70px;
    z-index: 730;
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    background: rgba(7, 25, 35, 0.88);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
}

.navigation-mode-switch button {
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    border-radius: 7px;
    color: #eaf7f4;
    background: transparent;
    font: 700 13px/1 Manrope, sans-serif;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}

.navigation-mode-switch button:hover,
.navigation-mode-switch button.active {
    color: #fff;
    background: rgba(75, 196, 165, 0.34);
}

.navigation-mode-switch button:focus-visible {
    outline: 2px solid #8be9cf;
    outline-offset: 2px;
}

#camera-navigation[hidden] {
    display: none;
}

#player-touch-controls[hidden] {
    display: none;
}

#player-touch-controls {
    display: none;
}

.player-joystick,
.player-touch-hint {
    display: none;
}

#camera-navigation {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 720;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    color: #eaf7f4;
    background: rgba(7, 25, 35, 0.88);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    font: 600 12px/1.3 Manrope, sans-serif;
}

#camera-navigation button {
    min-height: 34px;
    padding: 7px 11px;
    border: 0;
    border-radius: 6px;
    color: #eaf7f4;
    background: rgba(75, 196, 165, 0.2);
    cursor: pointer;
    font: 700 12px/1 Manrope, sans-serif;
}

#camera-navigation button:hover {
    background: rgba(75, 196, 165, 0.38);
}

#camera-navigation button:focus-visible {
    outline: 2px solid #8be9cf;
    outline-offset: 2px;
}

#camera-navigation .camera-command {
    width: 34px;
    padding: 7px;
    font-size: 17px;
}

@media (pointer: coarse) {
    #camera-navigation .camera-navigation-hint {
        font-size: 0;
    }

    #camera-navigation .camera-navigation-hint::after {
        content: " · 1 dito ruota · 2 dita sposta/zoom";
        font-size: 10px;
    }

    .navigation-player-mode #three-canvas {
        touch-action: none;
    }

    .navigation-player-mode #player-touch-controls:not([hidden]) {
        position: fixed;
        z-index: 725;
        inset: 0;
        display: block;
        pointer-events: none;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .navigation-player-mode .player-joystick {
        position: absolute;
        display: none;
        width: 92px;
        height: 92px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 50%;
        background: rgba(7, 25, 35, 0.38);
        box-shadow: inset 0 0 0 1px rgba(7, 25, 35, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(4px);
        transform: translate(-50%, -50%);
        pointer-events: none;
        touch-action: none;
    }

    .navigation-player-mode #player-touch-controls.is-active .player-joystick {
        display: block;
    }

    .navigation-player-mode .player-joystick::before {
        position: absolute;
        inset: 22%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

    .navigation-player-mode .player-joystick-thumb {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.62);
        border-radius: 50%;
        background: rgba(75, 196, 165, 0.82);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.32);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .navigation-player-mode .player-touch-hint {
        position: fixed;
        bottom: calc(142px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        display: block;
        padding: 6px 9px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 7px;
        color: #eaf7f4;
        background: rgba(7, 25, 35, 0.78);
        font: 600 10px/1.3 Manrope, sans-serif;
        pointer-events: none;
    }
}

@media (max-width: 680px) {
    .navigation-mode-switch {
        right: 10px;
        bottom: calc(132px + env(safe-area-inset-bottom, 0px));
    }

    .navigation-mode-switch button {
        min-height: 44px;
        padding: 10px 16px;
    }

    #camera-navigation {
        right: 10px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        gap: 5px;
        padding: 6px;
        font-size: 10px;
    }

    #camera-navigation button {
        min-height: 44px;
        padding: 9px 10px;
    }

    #camera-navigation .camera-command {
        width: auto;
        min-width: 44px;
    }

    .gx-phone-tab {
        left: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        padding: 0;
        transition: none;
    }

    .gx-phone-tab:hover {
        transform: none;
    }
}

@media (max-width: 520px) {
    body:not(.gx-phone-fullscreen) .gx-phone {
        top: calc(var(--gx-menu-stack-height, 92px) + 8px);
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
        height: auto;
        max-height: none;
    }
}

@media (max-height: 620px) and (max-width: 680px) {
    .navigation-mode-switch {
        bottom: calc(126px + env(safe-area-inset-bottom, 0px));
    }

    body:not(.gx-phone-fullscreen) .gx-phone {
        bottom: calc(126px + env(safe-area-inset-bottom, 0px));
    }

    .navigation-player-mode .player-touch-hint {
        bottom: calc(142px + env(safe-area-inset-bottom, 0px));
        font-size: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-mode-switch button {
        transition: none;
    }
}