/* Knight Lore'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;
  /* 256x192 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.knightloreMode each frame ("title" |
   "game"); 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, 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); during play it goes inert. */
#tap {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: auto;
}
#overlay[data-mode="game"] #tap { display: none; }

/* D-pad: lower-left cross of held movement keys (Q forward, O left,
   P right, Space jump). Buttons flow in their grid so their own
   z-index would be ignored; the containers carry z-index: 2. 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; }

/* SOUND above the d-pad, PICK/JUMP lower-right. */
#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; }
#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 { position: static; }
#acts .main { width: 58px; height: 46px; }

/* Landscape: the 4:3 view leaves side borders — park the d-pad in the
   left one and the action buttons in the right one, clear of the
   playing field. On narrower landscape 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)); }
}
/* The d-pad and actions answer only during play; on the title screen
   a tap anywhere is the one gesture. */
#overlay:not([data-mode="game"]) #pad,
#overlay:not([data-mode="game"]) #aux,
#overlay:not([data-mode="game"]) #acts { display: none; }
/* The ?debug overlay: engine state, one line, over the canvas. */
#debug {
  position: absolute; z-index: 3; left: 4px; top: 4px;
  margin: 0; padding: 2px 4px; font: 10px/1.3 monospace;
  color: #cf4; background: rgba(0, 0, 0, .65); white-space: pre;
  pointer-events: none;
}