/* A small glass control; its centre follows the thumb without obscuring the map. */
.halo-preview .mobile-movement {
  display: none;
  width: 128px;
  height: 128px;
  right: max(var(--edge), env(safe-area-inset-right));
  bottom: max(71px, calc(env(safe-area-inset-bottom) + 59px));
  grid-template-columns: none;
  gap: 0;
}
.mobile-joystick {
  --stick-x: 0px;
  --stick-y: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(209 231 215 / 29%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(128 167 150 / 5%) 40%, rgb(18 36 33 / 18%) 100%);
  box-shadow: inset 0 0 20px rgb(169 204 184 / 5%), 0 3px 15px rgb(0 0 0 / 7%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  transition: border-color 180ms, background-color 180ms;
}
.mobile-joystick:focus-visible { outline: 2px solid rgb(207 230 210 / 75%); outline-offset: 5px; }
.joystick-orbit { position: absolute; inset: 12px; border: 1px solid rgb(209 231 215 / 12%); border-radius: 50%; pointer-events: none; }
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 1px solid rgb(221 238 224 / 48%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, rgb(204 230 211 / 26%), rgb(77 113 99 / 22%));
  box-shadow: inset 0 1px 7px rgb(225 242 229 / 9%), 0 2px 10px rgb(8 22 18 / 12%);
  transform: translate3d(var(--stick-x), var(--stick-y), 0);
  transition: transform 150ms ease-out, border-color 180ms, box-shadow 180ms;
  pointer-events: none;
}
.joystick-knob::after { content: ''; position: absolute; inset: 20px; border-radius: 50%; background: rgb(225 239 224 / 75%); box-shadow: 0 0 8px rgb(190 230 208 / 20%); }
.mobile-joystick.is-active { border-color: rgb(213 236 220 / 49%); background-color: rgb(128 174 150 / 7%); cursor: grabbing; }
.mobile-joystick.is-active .joystick-knob { border-color: rgb(229 246 235 / 72%); box-shadow: 0 0 18px rgb(166 212 185 / 15%), inset 0 1px 8px rgb(225 242 229 / 15%); transition: border-color 180ms, box-shadow 180ms; }
.mobile-joystick.is-moving::after {
  content: 'Marche';
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  color: rgb(221 238 224 / 85%);
  font: 500 8px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 1.6px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgb(0 0 0 / 55%);
  pointer-events: none;
}
.mobile-joystick.is-running { border-color: rgb(229 206 153 / 68%); background-color: rgb(198 161 97 / 9%); }
.mobile-joystick.is-running::after { content: 'Course'; color: #e5ce99; }
.mobile-joystick.is-running .joystick-orbit { border-color: rgb(229 206 153 / 30%); }
.mobile-joystick.is-running .joystick-knob { border-color: rgb(244 226 186 / 82%); box-shadow: 0 0 19px rgb(218 181 115 / 21%), inset 0 1px 8px rgb(249 230 183 / 17%); }
.halo-preview:is(.entry-open,.auth-open,.chat-typing,.backpack-open,.navigation-open,.refuge-storage-open,.shield-exit-open,.last-transmission-open,.combat-open) .mobile-movement,
.halo-preview:has(#general-menu[open]) .mobile-movement { visibility: hidden; pointer-events: none; }
@media (pointer: coarse), (max-width: 720px) {
  .halo-preview .mobile-movement { display: block; }
}
@media (max-width: 720px) and (orientation: portrait) {
  .halo-preview .hud-actions { min-height: 128px; }
}
@media (max-width: 360px), (max-height: 560px) {
  .halo-preview .mobile-movement { width: 116px; height: 116px; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .halo-preview .hud-actions { min-height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-joystick, .joystick-knob { transition: none; }
}