/* Bounce — Level 1 : page shell only. All game art is drawn on the canvas. */

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

html, body {
  height: 100%;
  overflow: hidden;               /* game keys must never scroll the page */
  background: #0a0b14;
  color: #8f98c8;
  font: 12px/1.5 monospace, monospace;
}

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

/* Frame around the crisp-scaled screen. The canvas backing store is set from
   JS to (128 x 144) * integerScale, and CSS matches it exactly, so every
   logical pixel maps to an integer number of device pixels. */
#frame {
  padding: 10px;
  background: #12142a;
  border: 1px solid #333a68;
  box-shadow: 0 0 0 1px #05060c, 0 12px 40px rgba(0, 0, 0, .6);
  line-height: 0;
}

#game {
  display: block;
  image-rendering: pixelated;      /* crisp nearest-neighbour upscaling */
  image-rendering: crisp-edges;
  background: #141627;
  outline: none;
}

#game:focus { box-shadow: 0 0 0 2px #4dffb8; }