.robicat-archery-crosshair {
  position: fixed;
  inset: 62% auto auto 58%;
  z-index: 30;
  width: 18px;
  height: 18px;
  margin: -9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
}
.robicat-archery-crosshair.is-active { opacity: .9; }
.robicat-archery-crosshair::before,
.robicat-archery-crosshair::after {
  content: "";
  position: absolute;
  background: #f0cf73;
  box-shadow: 0 0 4px #000;
}
.robicat-archery-crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
.robicat-archery-crosshair::after { left: 0; top: 8px; width: 18px; height: 2px; }
.robicat-archery-fire {
  display: none;
  position: fixed;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom) + 118px);
  z-index: 80;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(240,207,115,.75);
  border-radius: 50%;
  color: #f7e8bd;
  background: rgba(20,27,19,.78);
  font: 700 11px/1 sans-serif;
  letter-spacing: .06em;
  touch-action: none;
}
.robicat-archery-sword {
  display: none;
  position: fixed;
  right: 104px;
  bottom: calc(env(safe-area-inset-bottom) + 132px);
  z-index: 80;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(240,207,115,.75);
  border-radius: 50%;
  color: #f7e8bd;
  background: rgba(45,25,16,.84);
  font: 700 11px/1 sans-serif;
  letter-spacing: .06em;
  touch-action: none;
}
.robicat-archery-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 32;
  transform: translateX(-50%);
  padding: 7px 12px;
  border: 1px solid rgba(240,207,115,.35);
  border-radius: 8px;
  color: #f7e8bd;
  background: rgba(13,18,13,.68);
  font: 600 12px/1.2 sans-serif;
  letter-spacing: .025em;
  pointer-events: none;
}
@media (pointer: coarse), (max-width: 820px) {
  .robicat-archery-fire, .robicat-archery-sword { display: block; }
  .robicat-archery-hint { display: none; }
}