/* Base layout for /play/: a full-viewport game canvas with stacked UI layers on top. 100dvh so mobile browser chrome
   never crops the picture; layers respect the safe-area insets. Component CSS lives in later work packages. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-md) / 1.5 var(--font-sans);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--z-gl);
  outline: none;
}

/* UI layers are transparent to the pointer, and so is everything inside them (pointer-events is inherited): a full-size container must not
   swallow the mouse look on the canvas. Controls (buttons, links, form fields) and anything with class "hit" take pointer events again,
   and so do their descendants. A panel that should be clickable as a whole gets class "hit". */
.layer {
  position: absolute;
  inset: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  pointer-events: none;
}
.layer button, .layer a, .layer input, .layer select, .layer textarea, .layer [role="button"], .layer .hit { pointer-events: auto; }
#layer-hud { z-index: var(--z-hud); }
#layer-menus { z-index: var(--z-menus); }
#layer-toasts { z-index: var(--z-toasts); }
#layer-debug { z-index: var(--z-debug); }

/* Text that sits on the 3D scene (HUD lines, hints, timers, subtitles): readable whatever is behind it, 4.5:1 or better even over a white pixel (tokens.css --ink-scene on --scrim).
   --ink-dim is for panels only. A block of such text gets this class; a component with its own layout uses the two tokens. */
.on-scene { color: var(--ink-scene); background: var(--scrim); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); }

/* boot / error overlay, removed by js/main.js after the first frame */
.boot {
  position: absolute;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  background: var(--bg);
  color: var(--ink-dim);
  text-align: center;
  padding: var(--sp-5);
  transition: opacity var(--dur) var(--ease);
}
.boot[hidden] { display: none; }
.boot.done { opacity: 0; pointer-events: none; }
.boot .err { color: var(--danger); max-width: 40ch; margin-inline: auto; }
.boot #boot-webgl p { max-width: 46ch; margin-inline: auto; }        /* the no-WebGL panel: three centred lines of one width */
.boot button {
  font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--line-strong);
  border-radius: 999px; padding: var(--sp-2) var(--sp-5); cursor: pointer;
}

button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }