/* Spotlight overlay with a "hole" around the highlighted element.
   We intentionally do NOT use a single full-screen backdrop because the game uses
   transformed containers (stacking contexts). A spotlight composed of 4 panels keeps
   the highlighted area undimmed and clickable without moving DOM nodes. */

#haSpotlight {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  pointer-events: none; /* never block clicks; JS gate decides */
}

.haShade {
  position: fixed;
  background: rgba(0,0,0,0.55);
  pointer-events: none; /* clicks are gated in JS */
}

/* UI layer that can receive clicks (cards/tooltips) */
.ha-onboarding-ui {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: none; /* only the actual UI widgets receive pointer events */
}

.ha-onboarding-card {
  width: min(520px, 100%);
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  color: #fff;
  pointer-events: auto;
}

.ha-onboarding-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.ha-onboarding-text {
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.92;
  margin: 0 0 12px 0;
}

.ha-onboarding-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.ha-onboarding-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.ha-onboarding-btn.primary {
  background: rgba(255,255,255,0.18);
}

/* no skip button in the new flow */

.ha-onboarding-highlight {
  position: relative;
  z-index: 100001;
  outline: 3px solid #ffd400;
  outline-offset: 3px;
  border-radius: 10px;
  animation: haPulse 1.2s ease-in-out infinite;
}

@keyframes haPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,212,0,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255,212,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,212,0,0); }
}

.ha-onboarding-tooltip {
  position: fixed;
  z-index: 100002;
  background: #5c4c0b;
  border: 1px solid #facc15;
  border-radius: 14px;
  padding: 12px;
  width: min(420px, calc(100vw - 24px));
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  pointer-events: auto;
}

.ha-onboarding-tooltip .ha-onboarding-title { margin-bottom: 6px; }