/* The Sentinel's page styles. External file (not an inline <style>) so the
   site's strict Content-Security-Policy needs no 'unsafe-inline'. */
:root { color-scheme: dark; }
html, body {
  margin: 0; height: 100%;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  /* The page is the game: no scrolling, zooming or long-press menus. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}
/* #stage hugs the canvas box, so the overlay tracks the view's rendered
   size through CSS scaling, rotation and resize. */
#stage { position: relative; }
canvas {
  display: block;
  /* 320x256 internal, stretched to 4:3 like the original's display */
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#boot {
  position: fixed; color: #f6f6f6; font: 14px monospace;
}

/* ---- Touch overlay -------------------------------------------------
   Present only on touch devices (body.touch); semi-transparent HTML
   buttons injecting the same key codes the physical keyboard would.
   The Go side publishes window.sentinelMode each frame ("title" |
   "wait" | "play"); CSS shows and hides the layers from it. */
/* The overlay is anchored to the VIEWPORT, not the canvas: the 4:3
   view leaves letterbox borders around it, and the controls sit in
   those borders wherever they are wide enough (side borders in
   landscape, the bottom border in portrait), only falling back onto
   the view itself on narrow screens. #overlay never captures a
   pointer itself — only #tap and the buttons do. */
#overlay { display: none; position: fixed; inset: 0; pointer-events: none; }
body.touch #overlay { display: block; }
#overlay button {
  position: absolute; z-index: 2;
  box-sizing: border-box; margin: 0; padding: 0;
  min-width: 44px; min-height: 44px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 6px;
  color: #fff; font: 16px/1 monospace;
  opacity: .35;
  touch-action: none;
  pointer-events: auto;
}
#overlay button.on { opacity: .75; }
#overlay button small { font-size: 9px; display: block; opacity: .8; }

/* The tap-anywhere catcher sits behind the buttons: a tap on open
   canvas injects Enter (title advance, preview dismiss, game-over
   skip); during play it goes inert. */
#tap {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: auto;
}
#overlay[data-mode="play"] #tap { display: none; }

/* D-pad: lower-left cross of held pan keys. The containers carry
   z-index: 2 — the buttons themselves are position: static (to flow in
   their grids) so their own z-index would be ignored, and the #tap
   catcher below must not paint over them. The safe-area env() keeps
   the buttons clear of notch and gesture-bar insets. */
#pad { position: absolute; z-index: 2; left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template: repeat(3, 46px) / repeat(3, 46px); gap: 4px; }
#pad button { position: static; }
#pad .spacer { visibility: hidden; }
/* SIGHTS and SOUND stack above the d-pad. */
#aux { position: absolute; z-index: 2; left: calc(10px + env(safe-area-inset-left, 0px)); bottom: calc(168px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; }
#aux button { position: static; }

/* Actions: lower-right — creates row above the four main actions. */
#acts { position: absolute; z-index: 2; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; justify-items: end; }
#acts button, #acts .minorRow { position: static; }
#acts .minorRow { display: grid; grid-template-columns: repeat(3, 50px); gap: 4px; }
#acts .main { width: 58px; height: 46px; }
#acts .minor { width: 50px; height: 40px; min-height: 40px; font-size: 13px; }

/* Keypad: bottom-centre while the title screens ask for a landscape
   number or secret code. */
#keys {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template: repeat(4, 44px) / repeat(3, 58px); gap: 4px;
}
#keys button { position: static; }
/* The keypad's H button opens the how-to-play dialog from the title
   screens — the touch path to the keyboard's H. */
#keys button[data-tap="KeyH"] { grid-column: 1 / -1; }

/* Landscape: the 4:3 view leaves side borders — park the d-pad and
   SIGHTS/SOUND in the left one and the action buttons in the right one,
   clear of the playing field. On narrower landscape (16:9 phones, 4:3
   tablets) the borders are too thin and the controls simply overlap
   the view's edge again. */
@media (orientation: landscape) {
  #pad { top: 50%; bottom: auto; transform: translateY(-50%); left: calc(10px + env(safe-area-inset-left, 0px)); }
  #aux { top: auto; bottom: calc(50% + 85px); }
  #acts { top: 50%; bottom: auto; transform: translateY(-50%); right: calc(10px + env(safe-area-inset-right, 0px)); }
}
#overlay[data-mode="wait"] #keys, #overlay[data-mode="play"] #keys { display: none; }
/* The d-pad and actions answer only during play; on the title screens
   the keypad is the whole control surface, and during the preview and
   game-over a tap anywhere is the one gesture. */
#overlay:not([data-mode="play"]) #pad,
#overlay:not([data-mode="play"]) #aux,
#overlay:not([data-mode="play"]) #acts { display: none; }