/* Пульт — альтернативное управление ударом. Показывается классом padctl на
   body; переключатель-пилюля виден всегда. Палитра — от табло (board.css). */

/* Переключатель режима: пилюля снизу по центру. Нарочно не .dial — у того
   ряда позиции расписаны в board.css поштучно, и чужая кнопка в нём наступит
   на грабли, о которых там же и написано. */
#ctl-toggle {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 21;
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(14, 18, 16, 0.85);
  color: var(--chalk-mute, #9b978c);
  font: 500 12px/1 Rubik, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#ctl-toggle:hover { color: var(--brass, #d4af37); border-color: rgba(212, 175, 55, 0.6); }

/* Сам пульт. */
#ctlbar { display: none; }

body.padctl #ctlbar {
  position: fixed;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(14, 18, 16, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  max-width: calc(100vw - 24px);
}

/* Кнопка удара — круглая, ростом с прицел: на мобильном жмётся пальцем. */
#ctl-fire {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.8);
  font: 600 15px/1 Rubik, system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a12;
  background: linear-gradient(160deg, #e8c964, var(--brass, #d4af37));
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
#ctl-fire:hover { background: linear-gradient(160deg, #f2d878, #dcbc45); }
#ctl-fire:disabled {
  opacity: 0.35;
  cursor: default;
  filter: saturate(0.4);
}

/* Шкала силы: ростом с прицел, чтобы палец не промахивался; дорожка с
   градиентом от тихого к разбою лежит по центру зоны нажатия. */
#ctl-power {
  position: relative;
  width: min(300px, 38vw);
  height: 96px;
  flex: none;
  cursor: pointer;
  touch-action: none;
}
#ctl-power::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 22px;
  margin-top: -11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#ctl-power .fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 22px;
  margin-top: -11px;
  width: 45%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f8f57, #b9a13a 55%, #c96b45);
  pointer-events: none;
}
#ctl-power .knob {
  position: absolute;
  top: 50%;
  left: 45%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff, #d9d5c7 60%, #a8a494);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* В пульте прицельный жест не действует — подсказку про Esc не показываем. */
body.padctl #hint { display: none !important; }

/* В лобби пульту делать нечего. */
body.lobby #ctl-toggle,
body.lobby #ctlbar { display: none; }