/* Fire button (sits above the 96 px action button) and the centre crosshair. Lives inside #ui. */

.fire-button {
  position: fixed;
  /* Centred over the action button: 24 + (96 - 84) / 2 from the edge, 24 + 96 + 16 from the bottom. */
  right: calc(30px + env(safe-area-inset-right, 0px));
  bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  width: 84px;
  height: 84px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(240, 236, 225, 0.6);
  background-color: rgba(20, 18, 16, 0.7);
  color: var(--text, #f0ece1);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 80ms ease, background-color 80ms ease, opacity 120ms ease;
}
.fire-button[hidden] { display: none; }
.fire-button:active,
.fire-button.is-pressed {
  transform: scale(0.92);
  background-color: rgba(70, 62, 52, 0.85);
  border-color: var(--text, #f0ece1);
}
.fire-button.is-cooling { opacity: 0.6; }

.fire-icon {
  position: absolute;
  inset: 16px;
  width: 52px;
  height: 52px;
  fill: rgba(240, 236, 225, 0.18);
  stroke: rgba(240, 236, 225, 0.9);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.fire-ring {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.fire-ring circle {
  fill: none;
  stroke: var(--text, #f0ece1);
  stroke-width: 5;
  stroke-linecap: round;
}

.fire-crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(240, 236, 225, 0.9);
  border: 1px solid rgba(20, 18, 16, 0.85);
  pointer-events: none;
}
.fire-crosshair[hidden] { display: none; }