/* ============================================================================
   HCGuide — coach marks for the new-player tutorial (see guide.js).
   The spotlight is a transparent box whose enormous box-shadow dims everything
   else, so there is no cut-out maths and no second overlay to keep in sync.
   ============================================================================ */
#hcg-root { display: none; }
#hcg-root.on { display: block; }

/* four dim rects tile around the spotlight, leaving an interactive hole */
.hcg-rect {
  position: fixed; z-index: 9000; background: rgba(4, 3, 6, .72);
  pointer-events: auto; /* swallow interaction on the dimmed area */
}

#hcg-spot {
  position: fixed; z-index: 9001; pointer-events: none;
  border-radius: 8px; border: 2px solid var(--gold, #c8a45a);
  box-shadow: 0 0 18px rgba(200, 164, 90, .55);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease, opacity .18s ease;
}
@keyframes hcg-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
#hcg-spot.hcg-pulse { animation: hcg-pulse .32s ease; }

#hcg-bubble {
  position: fixed; z-index: 9002; max-width: min(360px, calc(100vw - 24px));
  background: linear-gradient(180deg, #17131c, #0d0a12);
  border: 1px solid var(--gold, #c8a45a); border-radius: 10px;
  padding: 13px 15px; box-shadow: 0 10px 34px rgba(0, 0, 0, .7);
  pointer-events: auto;
}
#hcg-bubble p {
  margin: 0; color: var(--ink, #e7e2d8); font-size: 15px; line-height: 1.45;
  font-family: Georgia, serif;
}
#hcg-next {
  margin-top: 11px; width: 100%; padding: 9px 0; font-size: 14px; cursor: pointer;
  background: linear-gradient(180deg, #3a2418, #1d120b); color: var(--ink, #e7e2d8);
  border: 1px solid #5a3f2a; border-radius: 5px; font-family: inherit;
}
#hcg-next:hover { border-color: var(--gold, #c8a45a); }

/* the pointer hint on click-to-advance steps */
.hcg-rect { cursor: default; }

@media (max-width: 768px) {
  #hcg-bubble { max-width: calc(100vw - 20px); padding: 11px 13px; }
  #hcg-bubble p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #hcg-spot { transition: none; }
  #hcg-spot.hcg-pulse { animation: none; }
}