/*
 * FYRKA shared mobile aim — touch-aiming layer for mouse-aim shooters.
 * Right ~55% of the screen = drag-to-aim zone; fire/action buttons sit
 * bottom-right. Hidden by default; mobile-aim.js shows it on touch devices
 * during active play only.
 *
 * Coexistence with shared/mobile-controls.css (left joystick):
 *  - z-index is ONE BELOW .fmc-root (2147483000), so where the aim zone and
 *    the joystick stick-zone overlap (the 45-50% width strip) the stick wins.
 *  - The zone is 4 hit bands around a small hole at viewport (50%, 60%):
 *    both modules probe elementFromPoint at that point to detect game-own
 *    modals, and the probe must reach the canvas, not us.
 */

.fma-root {
  position: fixed;
  inset: 0;
  z-index: 2147482999; /* one below .fmc-root so the joystick zone wins overlap */
  display: none;
  pointer-events: none; /* only the zone bands + buttons catch touches */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.fma-root.fma-active { display: block; }

/* Right side = drag-to-aim zone (invisible). Width 55% reaches past centre so
 * the right thumb has room; height 70% leaves the top HUD strip tappable. */
.fma-zone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 70%;
  pointer-events: none;
}
.fma-zone-hit {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
}
/* 4 bands leaving a hit-test hole around viewport (50% w, 60% h) — in
 * zone-local coords that point is (9.09%, 42.86%). Hole: x 5-13%, y 38-47%
 * of the zone = viewport x 47.75-52.15%, y 56.6-62.9%. The probe used by
 * mobile-controls.js and mobile-aim.js passes through to the canvas there. */
.fma-zone-hit--top { left: 0; right: 0; top: 0; height: 38%; }
.fma-zone-hit--bottom { left: 0; right: 0; top: 47%; bottom: 0; }
.fma-zone-hit--left { left: 0; top: 38%; width: 5%; height: 9%; }
.fma-zone-hit--right { left: 13%; right: 0; top: 38%; height: 9%; }

/* Buttons bottom-right, stacked bottom-up (same spot as mobile-controls
 * buttons — configure that module with data-buttons=" " so it renders none). */
.fma-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;
  align-items: flex-end;
  gap: 3vmin;
  pointer-events: none;
}
.fma-btn {
  pointer-events: auto;
  touch-action: none;
  width: 16vmin;
  height: 16vmin;
  max-width: 92px;
  max-height: 92px;
  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.2vmin, 15px)/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);
}
.fma-btn:active,
.fma-btn.fma-btn-down {
  background: rgba(90, 120, 200, 0.85);
  transform: scale(0.94);
}
/* Primary = trigger: bigger, warm accent so it reads as FIRE at a glance. */
.fma-btn.fma-btn-primary {
  width: 22vmin;
  height: 22vmin;
  max-width: 124px;
  max-height: 124px;
  border-color: rgba(255, 168, 140, 0.85);
  background: rgba(64, 26, 20, 0.6);
}
.fma-btn.fma-btn-primary:active,
.fma-btn.fma-btn-primary.fma-btn-down {
  background: rgba(225, 92, 64, 0.9);
}