/* Dracula 0 - Son of the Dragon :: css/style.css (engine) */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
}
body { cursor: default; }
/* #stage is positioned + sized by DZ.gfx.resize() (largest integer scale, letterboxed). */
#stage {
  position: absolute; left: 0; top: 0; width: 256px; height: 224px;
  background: #000;
}
#screen {
  display: block; width: 100%; height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;      /* Firefox */
  -ms-interpolation-mode: nearest-neighbor;
}
/* CRT overlay: 1 dark scanline per game pixel row (--px = current scale) + soft vignette.
   Toggled by DZ.gfx.setCRT(bool) / Tab (SELECT) / ?crt=1. */
#crt {
  --px: 3px;
  display: none; pointer-events: none;
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 62%, rgba(0,0,0,0.42) 100%),
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--px) * 0.55),
      rgba(0,0,0,0.30) calc(var(--px) * 0.55), rgba(0,0,0,0.30) var(--px));
  mix-blend-mode: multiply;
}
#stage:fullscreen { background: #000; }
.nojs { color: #c02028; font: 16px monospace; text-align: center; margin-top: 40vh; }

/* ---- mobile / touch (src/core/touch.js) --------------------------------------------------------------------------- */
html, body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body { position: fixed; inset: 0; }
#stage, #screen { touch-action: none; }
body.touch-on { touch-action: none; }
/* full-viewport layer that receives every touch while the on-screen pad is shown */
#touch {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 5;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#touch .tc {
  position: absolute; display: block; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
  opacity: 0.62; transition: opacity 60ms linear;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
#touch .tc.on { opacity: 0.95; }
#touch .tc-dpad, #touch .tc-stick { opacity: 0.7; }
#touch .tc-knob { opacity: 0.85; }
#touch .tc-pill, #touch .tc-full { opacity: 0.55; }
/* reads env(safe-area-inset-*) for the layout code */
#touch-safe {
  position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}