*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #0b0d20;
  color: #eaf3ff;
  -webkit-tap-highlight-color: transparent;
}
/* Deliberately NOT locking html/body overflow:hidden for the whole game
   session (an earlier version of this file did). That removes the
   browser's own scrollbar/pull-to-refresh entirely, which is exactly the
   wrong safety trade-off if the page ever needs to be scrolled or
   reloaded — e.g. if a tab hangs, the user should always retain the
   browser's normal scroll gesture as an escape hatch, never be trapped in
   a fixed viewport with no way to interact with browser chrome. Scroll
   prevention is scoped to just the game surface instead (touch-action:
   pan-y on #stage in game.css, which opts that element out of horizontal/
   pinch gestures before any JS runs while still allowing vertical page
   scroll through it) — this never affects the rest of the page's normal
   scrollability.

   overscroll-behavior is deliberately NOT set on #game-shell (an earlier
   version had `overscroll-behavior: contain` here). #game-shell itself has
   no internal scroll of its own (overflow: hidden, fixed size) — it is not
   a scrolling box, it just wraps one. Per spec, overscroll-behavior governs
   what happens when a scroll gesture reaches a scroll container's boundary:
   with "contain" on an element that itself is never scrollable, that
   boundary is reached instantly (zero scroll distance), so the browser
   never chains the gesture up to the real scroll container (html/body) at
   all — every drag starting inside the shell was swallowed right there,
   no matter what touch-action or preventDefault said further down in
   #stage. That silent chaining block is what was still stopping the page
   from scrolling specifically when the drag started over the game area,
   even after touch-action and preventDefault were both fixed. Leaving this
   unset lets scroll gestures that start inside the game shell chain
   normally to the page, exactly like a gesture starting anywhere else. */
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0 0 0.6em; }
ul { margin: 0; padding-left: 1.2em; }