/* Mobile-fullscreen shell. Starting point, not a straitjacket — edit or
   replace if the app needs something else. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  height: 100vh;
  height: 100dvh; /* not 100vh alone — that hides the bottom behind the mobile address bar */
  overflow: hidden;
  overscroll-behavior: none;
  display: grid;
  place-items: center;
  /* Keep content clear of the notch and home bar. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* No accidental text selection on taps and drags. Re-enable per element
     where the app is about reading or copying text. */
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

/* #stage (the <main> element) is the app surface.
   Default: fills the screen — right for tools and full-bleed apps.
   Fixed-aspect app or game: set --stage-w/--stage-h to the target viewport in
   px (e.g. #stage { --stage-w: 393px; --stage-h: 727px; }); stage.js then
   centers, letterboxes, and scales it to fit any window, so the app also
   looks right when shared to a desktop screen. */
#stage {
  position: relative;
  width: var(--stage-w, 100%);
  height: var(--stage-h, 100%);
  overflow: hidden;
}

/* Applied by stage.js when --stage-w/--stage-h are set: absolute centering,
   because grid-centering an oversized item clamps to the top edge and would
   mis-place the scaled stage. */
body { position: relative; }
#stage.stage-fit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
}

canvas { display: block; touch-action: none; }
button, a { touch-action: manipulation; }