*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

/* ── Fluid root — the whole UI is sized in rem; this makes 1rem == 1/192 of
   the viewport width, i.e. 1rem = 10px at the 1920px design width. Every
   dimension therefore scales linearly with the actual screen width, so the
   layout FILLS any display edge-to-edge (no letterbox, no zoom) and is
   immune to device DPI / reported-viewport quirks. Vertical slack is taken
   up by the map cell (grid 1fr). Pixel-identical to the original design on a
   1920-wide screen; scales up on the 4K kiosk, down on a laptop window. */
html { font-size: calc(100vw / 192); }
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
img, svg { display: block; max-width: 100%; }
input, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.2rem; }