/* 화면 전체가 하나의 브라운관이다. 레이아웃이라 부를 것이 없고, 캔버스를 화면비대로
   키운 뒤 주사선만 얹는다. UI는 전부 캔버스 안에서 픽셀로 그려진다. */

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

html, body {
  height: 100%;
  background: #05050a;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  color: #8d939a;
}

.cabinet {
  position: relative;
  width: min(100vw, 177.78vh);   /* 16:9를 유지하며 창에 꽉 채운다 */
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 0 3px #14141b, 0 0 0 9px #08080c, 0 0 90px #000 inset;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* 확대는 최근접 이웃으로. 흐려지면 픽셀 게임이 아니게 된다. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 주사선. 화소 격자가 아니라 가로줄만 얹어야 원본 픽셀이 뭉개지지 않는다. */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(#0000 0 2px, #00000055 2px 4px);
}

.fallback {
  position: fixed;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  color: #ff5c4d;
}