/*
 * FYRKA shared mobile controls — modern, minimal touch layer.
 * Virtual joystick (left) + a few action buttons (right).
 * Sizes are screen-relative (vmin/%) and respect device safe areas.
 * Hidden by default; only shown when the module decides this is a touch device.
 */

.fmc-root {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above game canvas + live game shell */
  display: none;
  pointer-events: none; /* only the controls themselves catch touches */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.fmc-root.fmc-active { display: block; }

/* Left half = joystick zone. Dynamic joystick spawns where the thumb lands. */
.fmc-stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 62%;
  pointer-events: auto;
  touch-action: none;
}

.fmc-base,
.fmc-thumb {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.fmc-base {
  width: 30vmin;
  height: 30vmin;
  max-width: 180px;
  max-height: 180px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.fmc-thumb {
  width: 13vmin;
  height: 13vmin;
  max-width: 78px;
  max-height: 78px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.fmc-root.fmc-stick-on .fmc-base,
.fmc-root.fmc-stick-on .fmc-thumb { opacity: 1; }

/* Right side = action buttons, stacked bottom-up. */
.fmc-buttons {
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 4vmin);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6vmin);
  display: flex;
  flex-direction: column-reverse;
  gap: 3vmin;
  pointer-events: none;
}
.fmc-btn {
  pointer-events: auto;
  touch-action: none;
  width: 17vmin;
  height: 17vmin;
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(20, 24, 34, 0.55);
  color: #fff;
  font: 600 clamp(11px, 3.4vmin, 16px)/1.1 system-ui, sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1vmin;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.fmc-btn:active,
.fmc-btn.fmc-btn-down {
  background: rgba(90, 120, 200, 0.85);
  transform: scale(0.94);
}
.fmc-btn.fmc-btn-primary {
  width: 21vmin;
  height: 21vmin;
  max-width: 120px;
  max-height: 120px;
  border-color: rgba(255, 255, 255, 0.8);
}