/* public/css/bg-ocean.css - Ocean visuals (waves, fish, bubbles, ripples) */
.kq-bg-ocean-overlay {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;                 /* keep behind page content */
  pointer-events: none !important;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* attached variant uses absolute inside attachEl */
.kq-bg-ocean-overlay[data-kq-bg-attached="1"] { position: absolute; }

/* canvas fill */
.kq-bg-ocean-overlay .kq-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.98;
  background: transparent;
}

/* keep content above overlay (core also enforces this) */
.kq-bg-section .kq-bg-content,
.kq-leaderboard {
  position: relative;
  z-index: 100 !important;
}

/* ripple ring visual helper (not interactive) */
.kq-bg-ocean-overlay .kq-ripple {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* small responsive tweak */
@media (max-width:760px){
  .kq-bg-ocean-overlay .kq-bg-canvas { opacity: 0.99; }
}