/* FX glue styles — ledger-compatible add-ons */
.fx-grid {
  position: fixed;
  inset: 0;
  /* canvas is a replaced element: without an explicit CSS size it sticks to
     its 300x150 intrinsic buffer (left/right/top/bottom never stretch it). */
  width: 100vw;
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
}
.fx-blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
}
@keyframes fxBlurIn {
  to { opacity: 1; filter: blur(0); }
}
.fx-spotlight {
  position: relative;
}
.fx-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease;
  background: radial-gradient(220px circle at var(--fx-sx, 50%) var(--fx-sy, 50%),
    rgba(var(--card-accent-rgb, var(--fx-rgb, 88, 214, 238)), 0.12), transparent 70%);
}
.fx-spotlight.fx-spot-active::after { opacity: 1; }
/* Question-area aurora: canvas sits behind the question cards */
#content-area { position: relative; }
.fx-aurora {
  position: absolute;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
}
#content-area > *:not(.fx-aurora) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .fx-aurora { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-blur-word { opacity: 1; filter: none; animation: none !important; }
}