/* public/css/bg-fairy.css - Fairy / Rainbow Sprite (pointer-following) */
.kq-bg-fairy-overlay {
  position: absolute;
  inset: 0;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;           /* keep behind content */
  pointer-events: none !important;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* attached overlays stay absolute inside their attachEl */
.kq-bg-fairy-overlay[data-kq-bg-attached="1"] { position: absolute; }

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

.kq-fairy {
  position: fixed;
  left: 50%; top: 50%;
  width: 36px; height: 36px;
  margin-left: -18px; margin-top: -18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999; /* above page content */
  transform: translate3d(0,0,0);
  mix-blend-mode: screen; /* small, localized blend - content is forced to normal in core CSS */
  opacity: 0.98;
  will-change: transform, left, top;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms linear;
}

/* inner glow: soft rainbow radial */
.kq-fairy::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.88) 0%,
                                rgba(255,190,220,0.24) 10%,
                                rgba(200,240,255,0.12) 25%,
                                rgba(100,210,180,0.06) 42%,
                                rgba(0,0,0,0) 70%);
  filter: blur(6px);
  transform: scale(1.06);
  opacity: 0.95;
}

/* outer halo */
.kq-fairy::after {
  content: "";
  position: absolute;
  left: -16px; top: -16px;
  width: 68px; height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
              rgba(255,200,240,0.12), rgba(200,240,255,0.06), rgba(120,220,190,0.02), transparent 60%);
  filter: blur(12px);
  opacity: 0.88;
}

/* small "core" dot */
.kq-fairy .kq-core {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(120deg, #fff, #ffd6f0);
  box-shadow: 0 2px 8px rgba(120,200,255,0.28), 0 0 6px rgba(255,200,240,0.12);
}

/* ensure leaderboard and content sit above overlay (safe fallback) */
.kq-bg-section .kq-bg-content,
.kq-leaderboard {
  position: relative;
  z-index: 100 !important;
}

/* responsive — keep fairy smaller */
@media (max-width:760px) {
  .kq-fairy { width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; z-index: 999999; }
  .kq-fairy::after { left: -12px; top: -12px; width: 52px; height: 52px; filter: blur(10px); }
  .kq-fairy::before { filter: blur(5px); }
  .kq-fairy .kq-core { width:6px; height:6px; }
}