@font-face {
  font-family: 'ArcadeClassic';
  src: url('../fonts/ARCADECLASSIC.TTF') format('truetype');
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; 
  background: black;

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


.game-wrapper {
  position: relative;
  width: 1920px; 
  height: 1080px;
}


canvas {
 position: absolute;
  left: 322px;
  top: 180px;

  width: 1280px;
  height: 720px;
  z-index: 1;

  image-rendering: pixelated;
  border-radius: 20px;
  filter: drop-shadow(-1px 0 red) drop-shadow(1px 0 cyan);
}

/* CRT scanlines */
.crt-overlay {
 position: absolute;
  left: 322px;
  top: 180px;

  width: 1280px;
  height: 720px;
  z-index: 1;

  image-rendering: pixelated;
  border-radius: 20px;
  z-index: 2;
  pointer-events: none;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.2) 0px,
    rgba(0,0,0,0.2) 1px,
    transparent 2px,
    transparent 4px
  );

  animation: flicker 0.12s infinite;
}


/* Flicker */
@keyframes flicker {
  0%   { opacity: 1; }
  95%  { opacity: 1; }
  97%  { opacity: 0.98; }
  100% { opacity: 1; }
}