/*
 * One independently generated full background per game.
 * The PNGs in ./backgrounds are complete scenes: no atlas, sprite sheet,
 * runtime crop, or cross-game reuse. The visual-novel title page is managed
 * by its own artwork and is intentionally not overridden here.
 */
html { min-height: 100%; }

body[data-game-page] {
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Keep the image bright and low-contrast so the existing dark UI text stays readable. */
body[data-game-page="sudoku"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 42%)), url("backgrounds/sudoku-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="memory"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 44%)), url("backgrounds/memory-match-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="nonogram"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 44%)), url("backgrounds/nonogram-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="minesweeper"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 42%)), url("backgrounds/minesweeper-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="sokoban"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 30%), rgb(255 255 255 / 44%)), url("backgrounds/sokoban-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="gomoku"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 42%)), url("backgrounds/gomoku-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="maze"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 42%)), url("backgrounds/maze-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="tetris"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 42%)), url("backgrounds/tetris-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="perler-beads"] {
  background: linear-gradient(180deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 56%)), url("backgrounds/perler-beads-bg.png") center / cover fixed no-repeat !important;
}

body[data-game-page="tetris"] .canvas-stage {
  background: linear-gradient(135deg, rgb(255 255 255 / 62%), rgb(255 255 255 / 38%)), url("backgrounds/tetris-bg.png") center / cover no-repeat !important;
}

body[data-game-page="sokoban"] .board-stage {
  background: linear-gradient(135deg, rgb(255 255 255 / 64%), rgb(255 255 255 / 40%)), url("backgrounds/sokoban-bg.png") center / cover no-repeat !important;
}

@media (max-width: 720px) {
  body[data-game-page] { background-attachment: scroll !important; }
}