/* The design is authored at 640x360 and blown up with an integer transform, so
   every rule here is either the page frame or the scaling shell. Anything that
   belongs to the screen itself is set inline by js/view.js, mirroring the
   absolutely-positioned divs of the source document. */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #0B0D0E;
  font-family: 'Silkscreen', monospace;
  font-size: 8px;
  line-height: 8px;
  color: #B8AE9A;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  overflow: hidden;
  /* Cards are clicked repeatedly; without this a fast double click selects the
     card text instead of playing it twice. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen {
  position: relative;
  width: 640px;
  height: 360px;
  background: #0B0D0E;
  overflow: hidden;
  transform-origin: center center;
}

a { color: #F5A623; text-decoration: none; cursor: pointer; }
a:hover { color: #C4831B; }