#touch-controls {
    display: none;
}

@media (pointer: coarse), (max-width: 760px) {
    #touch-controls {
        position: fixed;
        right: max(12px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        z-index: 7;
        display: grid;
        grid-template-columns: repeat(2, minmax(112px, 1fr));
        gap: 9px;
        width: min(250px, 52vw);
        pointer-events: auto;
    }

    .touch-action {
        min-height: 54px;
        padding: 10px 8px;
        border: 1px solid rgba(221, 204, 166, .55);
        border-radius: 8px;
        color: #f0e7d6;
        background: rgba(20, 21, 21, .76);
        box-shadow: 0 4px 16px #0008;
        font: bold 11px "Courier New", monospace;
        letter-spacing: .04em;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .touch-action.pressed {
        color: #fff2ce;
        background: rgba(125, 91, 48, .92);
        border-color: #e4c58d;
        box-shadow: 0 0 18px #d7b67c77;
        transform: scale(.97);
    }

    #gaze-status {
        bottom: max(145px, calc(env(safe-area-inset-bottom) + 132px));
        left: 12px;
        transform: none;
        max-width: 44vw;
        white-space: normal;
    }

    #controls-hint {
        display: none;
    }
}