.touch-move {
    display: none;
    position: absolute;
    z-index: 8;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 132px;
    height: 132px;
    grid-template-columns: repeat(3, 42px);
    grid-template-rows: repeat(3, 42px);
    gap: 3px;
    pointer-events: none;
}

.touch-move button {
    display: grid;
    place-items: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    background: rgba(7,11,18,.72);
    color: #fff;
    backdrop-filter: blur(8px);
    touch-action: none;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.touch-move button[data-move-key="KeyW"] { grid-column: 2; grid-row: 1; }
.touch-move button[data-move-key="KeyA"] { grid-column: 1; grid-row: 2; }
.touch-move button[data-move-key="KeyS"] { grid-column: 2; grid-row: 2; }
.touch-move button[data-move-key="KeyD"] { grid-column: 3; grid-row: 2; }
.touch-move button:active { background: rgba(216,181,107,.86); color: #17130a; transform: scale(.96); }

@media (pointer: coarse) {
    .touch-move { display: grid; }
    .game-crosshair { display: none; }
    .interaction-hint { bottom: max(18px, env(safe-area-inset-bottom)); left: auto; right: 14px; transform: none; max-width: calc(100% - 174px); }
}

@media (max-width: 760px) and (pointer: coarse) {
    .three-container { min-height: 430px; }
    .touch-move { width: 126px; height: 126px; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); }
    .touch-move button { min-width: 40px; min-height: 40px; border-radius: 11px; }
}