#tunnel-movement { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:calc(20px + env(safe-area-inset-bottom)); z-index:8; display:grid; grid-template-columns:repeat(3,52px); gap:5px; user-select:none; -webkit-user-select:none; touch-action:none; }
#tunnel-movement[hidden] { display:none!important; }
#tunnel-movement [hidden] { display:none!important; }
#tunnel-movement button { display:grid; place-items:center; width:52px; height:52px; padding:0; border:1px solid #fff6ea99; border-radius:12px; background:#fff6eaed; color:#7d1f3a; font:600 25px/1 var(--font-ui); cursor:pointer; box-shadow:0 3px 14px #0005; touch-action:none; -webkit-touch-callout:none; }
#tunnel-movement [data-move="up"] { grid-column:2; grid-row:1; }
#tunnel-movement [data-move="left"] { grid-column:1; grid-row:2; }
#tunnel-movement [data-move="down"] { grid-column:2; grid-row:2; }
#tunnel-movement [data-move="right"] { grid-column:3; grid-row:2; }
#tunnel-movement button[aria-pressed="true"] { background:#7d1f3a; color:#fff6ea; border-color:#ff7a28; }
#tunnel-movement button:focus-visible { outline:3px solid #ff7a28; outline-offset:3px; }
#tunnel-movement p { grid-column:1/-1; margin:5px 0 0; text-align:center; color:#fff6ea; font:var(--font-size-small)/1.6 var(--font-ui); text-shadow:0 1px 4px #000; }
@media(max-width:600px) {
  #tunnel-movement { right:max(14px,env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); grid-template-columns:repeat(3,46px); gap:4px; }
  #tunnel-movement button { width:46px; height:46px; border-radius:10px; }
}

#tunnel-movement .movement-joystick { position:relative;display:block;width:140px;height:112px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;touch-action:none; }
.movement-stick-base { position:absolute;left:var(--stick-left,50%);top:var(--stick-top,50%);width:104px;height:104px;box-sizing:border-box;transform:translate(-50%,-50%);border:1px solid #fff6ea99;border-radius:50%;background:#18232e55;box-shadow:inset 0 0 0 12px #fff6ea12,0 3px 16px #0002;pointer-events:none;opacity:.65; }
.movement-stick-mark { position:absolute;color:#fff6ea;font:600 16px/1 var(--font-ui);text-shadow:0 1px 3px #0008; }
.movement-stick-mark.north { top:7px;left:50%;transform:translateX(-50%); }
.movement-stick-mark.south { bottom:7px;left:50%;transform:translateX(-50%); }
.movement-stick-mark.west { left:9px;top:50%;transform:translateY(-50%); }
.movement-stick-mark.east { right:9px;top:50%;transform:translateY(-50%); }
.movement-stick-thumb { position:absolute;left:50%;top:50%;width:44px;height:44px;box-sizing:border-box;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));border:2px solid #fff6ea;border-radius:50%;background:#fff6eadd;box-shadow:0 3px 10px #0005; }
.movement-joystick.is-active .movement-stick-base,.movement-joystick:focus-visible .movement-stick-base { opacity:1; }
#tunnel-movement .movement-joystick:focus-visible { outline:none; }
.movement-joystick:focus-visible .movement-stick-base { outline:3px solid #ff7a28;outline-offset:3px; }
.movement-joystick.is-active .movement-stick-thumb { background:#ffb079;border-color:#fff3e3; }