/* ====== Lớp phủ hướng dẫn cho bản demo phòng thi ======
   CHỈ dùng cho static/demo-player.html. Phòng thi thật (player.html) không
   nạp file này. Mọi selector đều mang tiền tố #dm- hoặc .dm- để không bao giờ
   đụng vào style của phòng thi thật trong player.css. */

/* ---- Con trỏ giả ---- */
#dm-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 26px; height: 26px; pointer-events: none; opacity: 0;
  transform: translate(-80px, -80px);
  transition: opacity .25s ease, transform 1s cubic-bezier(.33,.02,.18,1);
}
#dm-cursor.show { opacity: 1; }
#dm-cursor.drag { transition: opacity .25s ease, transform .1s linear; }
#dm-cursor svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
/* vòng loé lúc bấm */
#dm-cursor::after {
  content: ""; position: absolute; left: -11px; top: -11px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid #f7d13d; opacity: 0; transform: scale(.3);
}
#dm-cursor.tap::after { animation: dm-tap .5s ease-out; }
@keyframes dm-tap {
  from { opacity: .95; transform: scale(.3); }
  to   { opacity: 0;   transform: scale(1.15); }
}

/* ---- Quét chọn chữ ----
   --p chạy 0%→100% để vệt xanh lan dần đúng như đang kéo chuột bôi đen.
   Xong thì .done đổi sang vàng, khớp màu .prose mark của player.css (#ffe95e). */
#dm-target {
  --p: 0%;
  background: linear-gradient(to right, #b4d5fe 0 var(--p), rgba(0,0,0,0) var(--p));
  border-radius: 2px;
}
#dm-target.done { background: #ffe95e; }

/* ---- Bong bóng hướng dẫn, bám vào nút đang giới thiệu ---- */
#dm-callout {
  position: fixed; z-index: 9998; max-width: 300px;
  padding: 11px 14px; border-radius: 10px;
  background: #0f172a; color: #fff;
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 12px 34px rgba(0,0,0,.42);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
#dm-callout.show { opacity: 1; transform: translateY(0); }
#dm-callout b {
  display: block; margin-bottom: 3px;
  font-size: 13.5px; font-weight: 800; color: #fbbf24;
}
/* mũi tên: .up = bong bóng nằm DƯỚI mục tiêu nên mũi tên chỉ lên trên */
#dm-callout::after {
  content: ""; position: absolute; left: var(--ax, 24px);
  border: 8px solid transparent;
}
#dm-callout.up::after   { top: -16px; border-bottom-color: #0f172a; }
#dm-callout.down::after { bottom: -16px; border-top-color: #0f172a; }

/* ---- Bảng điều khiển (ẩn được bằng phím H trước khi quay) ---- */
#dm-panel {
  position: fixed; right: 14px; bottom: 96px; z-index: 9999;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(15,23,42,.94); color: #e2e8f0;
  font: 12.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
#dm-panel.hidden { display: none; }
#dm-panel b { color: #fff; }
#dm-panel kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  border: 1px solid #475569; border-radius: 4px;
  background: #1e293b; font-family: ui-monospace, monospace; font-size: 11px;
}
#dm-panel .dm-row { margin-top: 6px; }
#dm-panel button {
  margin-right: 6px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid #475569; background: #1e293b; color: #e2e8f0;
  font-family: inherit; font-size: 12px;
}
#dm-panel button:hover { border-color: #94a3b8; color: #fff; }

/* Nhúng trong iframe ở /home: giấu bảng điều khiển, khung đã có nút riêng */
body.dm-embed #dm-panel { display: none; }

/* Ẩn thanh cuộn cho sạch khung hình khi quay */
html.dm-clean, body.dm-clean { scrollbar-width: none; }
html.dm-clean::-webkit-scrollbar, body.dm-clean::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  #dm-cursor { transition: opacity .25s ease; }
  #dm-callout { transition: opacity .2s ease; }
}