/*
 * dpad-navigation styles — the interactive primitive and its focus state.
 *
 * Owns how focusable controls look and, crucially, the highly-visible focus ring
 * the PRD requires (8.4). Other features (detail-screens, settings) build their
 * buttons on `.btn.focusable`.
 */

.btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--hud-fg);
  background: var(--hud-panel);
  border: 1px solid var(--hud-panel-border);
  border-radius: 14px;
  padding: 16px 20px;
  cursor: default;
}

/* No mouse on the glasses, so the focus ring is the only affordance. It must be
   unmistakable (PRD 8.4). `.is-focused` is driven by the focus manager so the
   ring shows regardless of document focus; `:focus-visible` is kept as a bonus
   for desktop keyboard users. */
.focusable {
  outline: none;
}

.focusable.is-focused,
.focusable:focus-visible {
  outline: none;
  border-color: var(--hud-accent);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.45);
}