/* =========================================================
   HAND//SCOPE × SANDBOXELS — lớp phủ điều khiển bằng tay
   Không đổi bất kỳ style nào của Sandboxels gốc; toàn bộ ở
   đây đều namespace bằng tiền tố "hb-" và pointer-events:none
   (trừ khi cố ý) để không bao giờ chặn tương tác chuột thật.
   ========================================================= */
#hb-root {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Thanh trạng thái nhỏ góc dưới ---------- */
#hb-video { display: none; }
#hb-status {
  position: fixed;
  right: 14px;
  bottom: 14px;
  font: 10px/1.4 'JetBrains Mono', ui-monospace, monospace;
  color: #6b8a84;
  background: rgba(10,13,14,0.85);
  border: 1px solid #2a3638;
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  gap: 8px;
  z-index: 999999;
  pointer-events: none;
}
#hb-status #hb-gesture { color: #ffb454; font-weight: 500; }
#hb-status #hb-fps { color: #5eead4; }
#hb-status #hb-gazeStatus { font-size: 9px; }
#hb-status #hb-gazeStatus.gs-ok { color: #5eead4; }
#hb-status #hb-gazeStatus.gs-init { color: #ffb454; }
#hb-status #hb-headPose { font-size: 8px; color: #b79bff; }
/* ---------- Gaze dot ---------- */
#hb-gazeDot {
  position: fixed;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,50,0.9), rgba(255,180,50,0.4));
  box-shadow: 0 0 12px rgba(255, 200, 50, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 999999;
}
#hb-gazeDot.hb-visible { opacity: 1; }

/* ---------- Gaze calibration hint ---------- */
#hb-gazeHint {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,13,14,0.9);
  border: 1px solid #ffb454;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  color: #ffb454;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}


/* ---------- RealEye calibration dot ---------- */
@keyframes hb-re-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}
.hb-re-cal-dot {
  animation: hb-re-pulse 1s ease-in-out infinite;
}