@layer components {
  body {
    isolation: isolate;
  }

  .fishdle-ocean-canvas {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .page-shell,
  .site-footer,
  .discord-shell {
    position: relative;
    z-index: 1;
  }

  .discord-header {
    position: relative;
    z-index: 40;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fishdle-ocean-canvas {
    opacity: 0.72;
  }
}