/* Канвас по центру, целочисленный масштаб, никакого сглаживания.
   Всё остальное — чёрные поля: они честнее, чем размытые пиксели. */

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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  /* Отключаем всё, чем браузер мешает игре на телефоне. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

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

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;   /* запасной вариант для старых движков */
  background: #000;
  /* Размеры задаёт JS: всегда кратные логическому разрешению. */
}

/* Стекло монитора: строки развёртки поверх канваса. Единственный HTML
   поверх игры — и он не ловит события, так что интерфейсом не является.
   Период полос (background-size) выставляет JS по масштабу; здесь только
   форма одной полосы: верхняя половина прозрачна, нижняя чуть темнее.
   Показ/скрытие — G.RETRO.applyCrt (кнопка CRT на листе героя). */
#crt {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: none;
  pointer-events: none;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.28) 50%,
    rgba(0, 0, 0, 0.28) 100%
  );
  background-size: 100% 4px;   /* переопределяется в resize() */
  /* Лёгкое затемнение к краям — кинескоп, а не плоская панель. */
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
}