/* Devil's Deathroll canonical background/effects system.
   Keep this file linked last in the head of every public HTML page so the
   checker, overlay dimming, wave distortion, and mobile behavior stay identical. */
:root { --vh: 1vh; --overlay-alpha: 0.46; --checker-alpha: 0.56; --checker-size: 32px; --checker-color-r: 120; --checker-color-g: 0; --checker-color-b: 0; --checker2-color-r: 255; --checker2-color-g: 90; --checker2-color-b: 0; --glow-alpha: 0.12; --warp-opacity: 0.52; }
html, body { min-height: 100%; }
body { position: relative; background-color: #080000; }
.container, .game-container, .main-container, main, nav, header, section, .board-wrap, .boardgame-page, .lobby-panel { position: relative; z-index: 2; }
body.bg-checker { background-image: none !important; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(10,0,0,var(--overlay-alpha)), rgba(26,0,0,var(--overlay-alpha)), rgba(51,0,0,var(--overlay-alpha))); background-size: 400% 400%; animation: gradientShift 8s ease infinite; z-index: 1; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%), linear-gradient(-45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%), linear-gradient(45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%), linear-gradient(-45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%), radial-gradient(circle at center, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--glow-alpha)), rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 60%); background-size: var(--checker-size) var(--checker-size); background-position: 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2), calc(-1 * var(--checker-size) / 2) 0, center; opacity: 1; z-index: 0; display: none; animation: checkerFlowA 20s ease-in-out infinite; will-change: background-position; }
body.bg-checker::after { display: block; animation-play-state: running; }
#checkerWarp { animation-play-state: running; position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none; will-change: transform, background-position, filter; --warp-size: calc(var(--checker-size) * 1.25); background-image: linear-gradient(45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%), linear-gradient(-45deg, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), var(--checker-alpha)) 25%, rgba(var(--checker-color-r), var(--checker-color-g), var(--checker-color-b), 0) 25%), linear-gradient(45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%), linear-gradient(-45deg, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--checker-alpha)) 25%, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 25%), radial-gradient(circle at center, rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), var(--glow-alpha)), rgba(var(--checker2-color-r), var(--checker2-color-g), var(--checker2-color-b), 0) 60%); background-size: var(--warp-size) var(--warp-size); opacity: var(--warp-opacity, 0.52); animation: checkerFlowB 28s ease-in-out infinite alternate !important; filter: url(#checkerWaves); }
body.bg-checker #checkerWarp { display: block; animation-play-state: running; }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes checkerFlowA { 0% { background-position: 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2), calc(-1 * var(--checker-size) / 2) 0, center; } 50% { background-position: calc(var(--checker-size) * 0.9) calc(var(--checker-size) * 0.9), calc(var(--checker-size) * -0.5) calc(var(--checker-size) * 0.5), calc(var(--checker-size) * 1.8) 0px, calc(var(--checker-size) * -1.1) calc(var(--checker-size) * -1.1), center; } 100% { background-position: calc(var(--checker-size) * 1.8) calc(var(--checker-size) * 1.8), calc(var(--checker-size) * -1.0) calc(var(--checker-size) * 1.2), calc(var(--checker-size) * 2.6) calc(var(--checker-size) * 1.3), calc(var(--checker-size) * -1.8) calc(var(--checker-size) * -1.4), center; } }
@keyframes checkerFlowB { 0% { background-position: 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(-1 * var(--checker-size) / 2), calc(-1 * var(--checker-size) / 2) 0, center; transform: translate3d(0,0,0) scale(1) rotate(0deg); } 50% { background-position: calc(var(--checker-size) * -0.6) calc(var(--checker-size) * 0.6), calc(var(--checker-size) * 0.7) calc(var(--checker-size) * -0.4), calc(var(--checker-size) * 1.6) calc(var(--checker-size) * 0.8), calc(var(--checker-size) * -1.0) calc(var(--checker-size) * -0.8), center; transform: translate3d(4%, -2.5%, 0) scale(1.06) rotate(0.8deg); } 100% { background-position: calc(var(--checker-size) * -1.4) calc(var(--checker-size) * 1.4), calc(var(--checker-size) * 1.1) calc(var(--checker-size) * -1.1), calc(var(--checker-size) * 2.2) calc(var(--checker-size) * 1.1), calc(var(--checker-size) * -1.3) calc(var(--checker-size) * -1.3), center; transform: translate3d(-2%, 1%, 0) scale(1.02) rotate(-0.6deg); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after, #checkerWarp { animation-play-state: paused; animation: none !important; transform: none !important; filter: none !important; } }
@media (max-width: 480px), (pointer: coarse) {
  body::before { animation-duration: 20s !important; }
  body::after {
    animation-duration: 28s !important;
    will-change: background-position !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }
  #checkerWarp {
    display: none !important;
    animation: none !important;
    filter: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}
body.force-repaint::after, body.force-repaint::before { animation: none !important; }


/* Resource saver mode: automatically enabled on mobile, reduced-motion, save-data, or low-core devices. */
html.ddr-lite-fx body::before {
  animation: none !important;
  background-size: 100% 100% !important;
}
html.ddr-lite-fx body::after {
  animation-duration: 60s !important;
  will-change: auto !important;
}
html.ddr-lite-fx #checkerWarp {
  display: none !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}
html.ddr-lite-fx *,
html.ddr-lite-fx *::before,
html.ddr-lite-fx *::after {
  scroll-behavior: auto !important;
}
html.ddr-lite-fx .glow-text,
html.ddr-lite-fx .active-player,
html.ddr-lite-fx .tile-icon-spin,
html.ddr-lite-fx .tile-icon-float,
html.ddr-lite-fx .tile-icon-pulse {
  animation: none !important;
}
html.ddr-lite-fx .particles,
html.ddr-lite-fx .fx-particle {
  display: none !important;
}
html.ddr-lite-fx .modal-content,
html.ddr-lite-fx #uiPolishControls,
html.ddr-lite-fx .game-container,
html.ddr-lite-fx .container {
  backdrop-filter: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}