.onboarding-tip {
  position: fixed;
  z-index: 1150;
  display: flex;
  gap: 12px;
  align-items: center;
  width: min(340px, calc(100vw - 24px));
  padding: 13px 14px;
  border: 1px solid #b7894f;
  border-radius: 10px;
  color: #f4e7d5;
  background: #211912;
  box-shadow: 0 14px 38px rgb(0 0 0 / 48%);
}
.onboarding-tip::after {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  border-right: 1px solid #b7894f;
  border-bottom: 1px solid #b7894f;
  background: #211912;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.onboarding-tip[data-placement="above"]::after { bottom: -6px; }
.onboarding-tip[data-placement="below"]::after { top: -6px; transform: translateX(-50%) rotate(225deg); }
.onboarding-tip p { flex: 1; margin: 0; white-space: pre-line; font-size: .88rem; font-weight: 700; line-height: 1.48; }
.onboarding-tip button { flex: 0 0 auto; min-width: 52px; min-height: 40px; padding: 8px 11px; border: 1px solid #d7aa67; border-radius: 7px; color: #1a120b; background: #d7aa67; font-weight: 900; cursor: pointer; }
.onboarding-tip button:focus-visible { outline: 3px solid #fff2d9; outline-offset: 2px; }
.onboarding-tip-target { outline: 3px solid #e0af67 !important; outline-offset: 4px; box-shadow: 0 0 0 6px rgb(224 175 103 / 18%) !important; }
@media (max-width: 767px) {
  .onboarding-tip { gap: 10px; padding: 12px; }
  .onboarding-tip p { font-size: .82rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .onboarding-tip { animation: onboarding-tip-enter .18s ease-out both; }
  @keyframes onboarding-tip-enter {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}