/* Mouse pattern + purple wash — everywhere except the play table (#game-board) */
:root {
  --scene-bg-fallback: #a88cc8;
  --scene-bg-tile: url('../assets/bg.png');
  /* bg.png (1920×1145): full width = 5 mice; seamless vertical loop */
  --scene-bg-pattern-opacity: 0.62;
  --scene-bg-purple-overlay: rgba(168, 140, 200, 0.48);
  --scene-bg-pan-duration: 180s;
}

body.scene-bg {
  position: relative;
  overflow: hidden;
  background-color: var(--scene-bg-fallback);
}

/*
 * Wide strip of tiled bg (repeat x + y). GPU translate by exactly one tile
 * width (-100vw) loops seamlessly when the image edges match.
 */
body.scene-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: -2;
  pointer-events: none;
  background-image: var(--scene-bg-tile);
  background-repeat: repeat;
  background-size: 100vw auto;
  background-position: 0 0;
  opacity: var(--scene-bg-pattern-opacity);
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation: scene-bg-scroll-x var(--scene-bg-pan-duration) linear infinite;
}

@keyframes scene-bg-scroll-x {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100vw, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body.scene-bg::before {
    width: 100vw;
    animation: none;
    transform: none;
  }
}

/* Purple wash — brings the old solid purple feel back */
body.scene-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--scene-bg-purple-overlay);
}