/* TILE MACHINE — stylesheet.
   The whole UI is drawn on the 480x270 canvas, the DOM only provides the
   viewport, the (always-on-top) letterbox / pillarbox bars and a hidden
   element used for system clipboard access. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  /* the app is pixel art: never smooth anything */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#screen {
  position: absolute;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  cursor: none;
  touch-action: none;
}

/* Letterboxing / Pillarboxing.
   These bars are ALWAYS painted over the application. */
.bar {
  position: absolute;
  background: #000;
  pointer-events: none;
  z-index: 10;
}
#bar-top    { left: 0; right: 0; top: 0;    height: 0; }
#bar-bottom { left: 0; right: 0; bottom: 0; height: 0; }
#bar-left   { top: 0; bottom: 0; left: 0;   width: 0; }
#bar-right  { top: 0; bottom: 0; right: 0;  width: 0; }

#clip {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  border: 0;
  padding: 0;
  resize: none;
}