@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

html, body {
  margin: 0;
  height: 100%;
  background: #050208;
  color: #fff;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  overflow: hidden;
}

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

/*
 * Desktop default: fill the viewport while preserving the canvas's 880:600
 * aspect ratio (letterboxed on screens that don't match).
 */
#app canvas {
  display: block;
  width:  min(100vw, calc(100vh * 880 / 600));
  height: min(100vh, calc(100vw * 600 / 880));
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Mobile / touch devices: edge-to-edge fill, no letterbox. The game's logical
   880×600 still drives draw coordinates; the canvas transform stretches the
   output to whatever aspect the phone has. Slight horizontal squish in
   landscape (game is 1.47:1, most phones are 2:1+) but no black bars. */
@media (pointer: coarse) {
  html, body { overscroll-behavior: none; }
  #app {
    display: block;            /* drop the flex centring; we want full bleed */
    inset: 0;
  }
  #app canvas {
    width: 100vw !important;
    height: 100vh !important;
    /* Respect notch safe area on phones */
    width: 100dvw !important;
    height: 100dvh !important;
  }
}

/* When the page is in browser-fullscreen mode the body element becomes the
   fullscreen root; make sure the black backdrop covers everything. */
:fullscreen #app,
:fullscreen #app canvas { background: #000; }