/* style.css — HELLBREAK page chrome.
 *
 * Black page, the 640x400 (8:5) canvas centered and scaled to fit the viewport
 * with nearest-neighbour (pixelated) upscaling, a subtle radial vignette over
 * the canvas, hidden cursor over the play surface, a fixed red-on-black crash
 * box, and a touch-device "keyboard required" note. No layout math in JS — the
 * canvas backing store always stays 640x400; only CSS scales it. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #cfc6a5;                         /* bone */
  font-family: "Courier New", Courier, monospace;
  overflow: hidden;                        /* letterbox bars stay black, never scroll */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* Stage matches the scaled canvas exactly so the vignette overlays it 1:1.
 * width:min(100vw,160vh) keeps the 8:5 aspect: at 160vh wide, height = 100vh. */
#stage {
  position: relative;
  width: min(100vw, 160vh);
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: 8 / 5;
  background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
  line-height: 0;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  cursor: none;                            /* the game draws its own crosshair */
  image-rendering: pixelated;              /* chunky, DOOM-style upscale */
  image-rendering: crisp-edges;            /* firefox fallback */
  -ms-interpolation-mode: nearest-neighbor;
  touch-action: none;
}

/* Subtle darkening toward the corners, multiplied over the rendered frame. */
#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0) 55%,
              rgba(0, 0, 0, 0.35) 82%,
              rgba(0, 0, 0, 0.70) 100%);
  mix-blend-mode: multiply;
}

/* Fixed crash overlay — populated by window.onerror. Hidden until needed. */
#errbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  margin: 0;
  padding: 10px 14px;
  background: #000;
  color: #ff3b3b;
  font: 13px/1.4 "Courier New", Courier, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 2px solid #7a1010;        /* blood */
  max-height: 60vh;
  overflow: auto;
}

/* Keyboard-required note — only surfaces on coarse-pointer / hover-less devices. */
#touchnote {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px 16px;
  background: rgba(12, 0, 0, 0.92);
  color: #cfc6a5;
  font: 12px/1.5 "Courier New", Courier, monospace;
  text-align: center;
  letter-spacing: 0.05em;
  border-top: 1px solid #7a1010;
}

@media (hover: none) and (pointer: coarse) {
  #touchnote { display: block; }
}

/* No-JavaScript fallback. */
#noscript-note {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #ff3b3b;
  font: bold 16px/1.5 "Courier New", Courier, monospace;
  text-align: center;
  padding: 24px;
}