/* Виджет точки удара: кружок-«биток» с точкой наклейки. Живёт первым
   элементом пульта (#ctlbar) и только там — жест всегда бьёт в центр.
   Размер задаёт рост всей панели: кнопки равняются на него, чтобы на
   мобильном всё нажималось пальцем. */

#tip {
  position: relative;
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  background:
    radial-gradient(circle at 38% 34%, #ffffff 0%, #e9e6da 55%, #b9b5a6 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 -4px 10px rgba(0, 0, 0, 0.18);
}

/* Прицельные риски по центру. */
#tip::before,
#tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(0, 0, 0, 0.18);
}
#tip::before { width: 1px; height: 100%; transform: translate(-0.5px, -50%); }
#tip::after { height: 1px; width: 100%; transform: translate(-50%, -0.5px); }

#tip .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #2456b0;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Смещение задано — подсветка, чтобы не забыть про винт. */
#tip.spun {
  border-color: var(--brass, #d4af37);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(212, 175, 55, 0.35);
}