html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #1b1109; /* shows until the backdrop image loads */
}

body {
  display: flex;
  overflow: hidden; /* the game is scaled to fit the window (src/core/layout.js) */
  /* The game keeps its shape, so windows of a different shape leave space around it;
     fill that with the game's dusty desert texture, darkened so the game stands out. */
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("assets/backgrounds/dusty.jpg") center / cover no-repeat;
}

/* margin: auto centers the game, but unlike justify-content/align-items it
   never pushes the canvas off the top/left edge when the window is smaller.
   position: relative lets buttons be placed in canvas coordinates. */
main {
  position: relative;
  margin: auto;
  box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.7); /* soft frame around the game */
}

/* Title screen: instead of bars, the title drawing continues past the canvas edges
   (assets/backgrounds/title_wide.png, sized to match the canvas by src/core/layout.js). Sky and
   sand colors cover anything beyond even that, on extremely wide or tall windows. */
body.title-screen {
  background:
    url("assets/backgrounds/title_wide.png") center / var(--title-bg-size, auto) no-repeat,
    linear-gradient(to bottom, rgb(122, 106, 186) 50%, rgb(194, 185, 143) 50%);
}

/* Settings / How to Play: the wood-plank wall continues past the canvas edges
   (assets/backgrounds/wall_wide.png, made by tools/extend_wall.js, same size and layout). */
body.wood-screen {
  background:
    url("assets/backgrounds/wall_wide.png") center / var(--title-bg-size, auto) no-repeat,
    rgb(90, 55, 25);
}

body.title-screen main,
body.wood-screen main {
  box-shadow: none; /* the scene continues seamlessly, so no frame */
}

canvas {
  display: block;
  touch-action: none; /* touch drags place towers instead of scrolling/zooming the page */
}