.hfpesca {
  --hfpesca-accent: #38bdf8;
  position: fixed;
  left: 16px;
  bottom: 12px;
  width: 150px;
  height: 108px;
  z-index: 9997;
  cursor: pointer;
  filter: drop-shadow(0 6px 14px rgba(2, 52, 88, .28));
  transition: transform .2s ease;
}
.hfpesca:hover { transform: translateY(-3px); }
.hfpesca:focus-visible { outline: 3px solid var(--hfpesca-accent); outline-offset: 4px; border-radius: 12px; }
.hfpesca canvas { width: 100%; height: 100%; display: block; }

.hfpesca-bubble {
  position: absolute;
  left: 74px;
  bottom: 92px;
  background: #fff;
  color: #0f172a;
  border: 1px solid #dbe3ee;
  border-radius: 12px 12px 12px 3px;
  padding: 6px 10px;
  font: 600 12.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(2, 52, 88, .18);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.hfpesca.show-bubble .hfpesca-bubble { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .hfpesca { width: 118px; height: 86px; left: 8px; bottom: 8px; }
  .hfpesca-bubble { left: 58px; bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .hfpesca { transition: none; }
}