/* Старый HUD убран — баланс рисует canvas-виджет игры. */
#hudBar { display: none !important; }

/* HUD-кнопки рисуются в canvas (canvas-hud.js). HTML-разметка оставлена,
   но скрыта, чтобы не мелькала до инициализации canvas-кнопок. */
#hudFloat { display: none !important; }

/* ───── Float-кнопки (legacy HTML, не используются) ───── */
#hudFloat {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  display: flex;
  gap: 10px;
  z-index: 200;
  font-family: var(--font-body);
}
#hudFloat button {
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, #2A1A47, #14092B);
  border: 1px solid rgba(212, 169, 92, 0.55);
  color: var(--gold-bright);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  isolation: isolate;
  box-shadow:
    0 8px 22px -8px rgba(0,0,0,0.85),
    0 0 0 2px rgba(20, 9, 43, 0.5),
    inset 0 1px 0 rgba(244, 213, 141, 0.22);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1),
              border-color 220ms ease,
              box-shadow 220ms ease;
}
#hudFloat button::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(244,213,141,0.22), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
#hudFloat button:hover {
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(244, 213, 141, 0.65);
  box-shadow:
    0 10px 28px -6px rgba(0,0,0,0.7),
    0 0 24px -4px rgba(244, 213, 141, 0.35),
    inset 0 1px 0 rgba(244, 213, 141, 0.30);
}
#hudFloat button:active { transform: translateY(0) scale(0.98); }
#hudFloat button svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 480px) {
  /* Stack on the same horizontal band as the canvas-rendered gear (~110px CSS),
     and leave room on the right for the gear itself (~60px from the right edge). */
  #hudFloat { top: calc(env(safe-area-inset-top, 0px) + 110px); right: 60px; gap: 8px; }
  #hudFloat button { width: 40px; height: 40px; }
  #hudFloat button svg { width: 16px; height: 16px; }
}