/* Everything is drawn in the canvas. This file only frames it. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0d0812;
  overscroll-behavior: none;      /* no pull-to-refresh or rubber-banding */
}

body {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: default;
}

canvas#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #20301c;
}

/* faint CRT scanlines over the whole thing */
#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.11) 3px,
    rgba(0, 0, 0, 0.11) 4px
  );
  /* deliberately NOT mix-blend-mode: that forces a full-viewport compositor
     read-back every frame, which is exactly what the dpr cap exists to avoid */
}

@media (prefers-reduced-motion: reduce) {
  #scanlines { display: none; }
}