/* Bãi cọc Bạch Đằng — hiệu ứng thủy triều: canvas phủ viewport + HUD góc trái.
   CSS tách khỏi JS (bd_tide.js) — viewer dùng chung, hiệu ứng tự tắt nếu không bật. */

#bd-tide-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; pointer-events:none; z-index:5;
}

#bd-tide-hud{
  position:fixed; left:18px; top:126px; z-index:24; pointer-events:none;
  min-width:176px; padding:9px 13px; border-radius:12px;
  font-family:"Segoe UI",Roboto,Arial,sans-serif; font-size:12px;
  letter-spacing:.4px; color:#e8f4fb;
  background:rgba(8,18,28,.55); border:1px solid rgba(190,220,240,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
#bd-tide-hud .bd-tide-cap{ opacity:.75; font-size:10px; letter-spacing:1.2px; }
#bd-tide-hud .bd-tide-state{ font-size:14px; margin:2px 0 5px; }
#bd-tide-hud .bd-tide-track{
  height:5px; border-radius:3px; overflow:hidden;
  background:rgba(255,255,255,.16);
}
#bd-tide-hud .bd-tide-bar{
  height:100%; width:50%;
  background:linear-gradient(90deg,#4fa3d1,#8fe3ff);
}
#bd-tide-hud .bd-tide-foot{
  opacity:.5; font-size:9px; margin-top:6px; letter-spacing:.3px;
}

#bd-tide-dbg{
  position:fixed; right:14px; top:70px; z-index:24; pointer-events:none;
  font:12px/1.45 Consolas,monospace; color:#0f0;
  background:rgba(0,0,0,.55); padding:8px 10px; border-radius:8px; white-space:pre;
}

/* Màn hình hẹp: ẩn HUD để không đè UI */
@media (max-width:700px){
  #bd-tide-hud{ display:none !important; }
}