/*
  style.css - Fap-Bird

  The canvas is always 320x568 internally (a common phone resolution
  that makes the sprites feel right-sized). CSS transform scales it up
  to whatever screen the player is on. This way the game logic never
  has to care about screen size at all.

  The will-change: transform line is important - it tells the browser
  to put the canvas on its own GPU layer, which kills the jank.
*/

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #4ec0ca;
  touch-action: none;
  overscroll-behavior: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: pointer;
  will-change: transform;
  transform-origin: center center;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}