Scraplandia on a phone: with touch controls showing, the hotbar sits above the buttons, the bars above the stick, the waypoint under the OpenVibe button and a compact first-steps panel at the top right (the controls covered the panel and the bars sat on the hotbar) (#125)

ddiff --git a/CHANGELOG.md b/CHANGELOG.md
iindex 359aa4d..2458fe1 100644
---- a/CHANGELOG.md
++++ b/CHANGELOG.md
@@@ -8,6 +8,14 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
  
  ### Fixed
  
++- **Touch play's HUD was buried under the controls.** On a phone, the stick (bottom left) and the button grid (bottom
++  right) covered the first-steps panel, and the HP, food, water and stamina bars sat on the hotbar. While the touch
++  controls show:
++  - the hotbar sits above the buttons, in smaller slots;
++  - the bars sit above the stick;
++  - the waypoint sits under the OpenVibe button;
++  - the first-steps panel sits at the top right and shows only the step in progress;
++  - the debug status line hides.
  - **An empty pile kept saying "E — gather".** When a node had nothing left (the gate piles empty fast when several new
    scrappers arrive together), its prompt still offered to gather and E did nothing. It now says so, for example
    "Loose Stones — picked clean, back within 2 mins" or "Oak Tree — felled, grows back within … mins". A production
ddiff --git a/apps/client/src/ui/styles.css b/apps/client/src/ui/styles.css
iindex f20238c..ddd613b 100644
---- a/apps/client/src/ui/styles.css
++++ b/apps/client/src/ui/styles.css
@@@ -1091,6 +1091,46 @@ body:has(#ovg-frame-toggle:not([hidden])) .status {
    }
  }
  
++/*
++ * Touch play: the stick (bottom-left, 144 px) and the button grid (bottom-right, ~230 px) own the bottom of the
++ * screen. The hotbar, the vitals and the first-steps panel used to sit under them, and the bars covered the hotbar.
++ */
++body:has(.ov-touch:not([hidden])) .hotbar {
++  bottom: 244px;
++  gap: 4px;
++}
++body:has(.ov-touch:not([hidden])) .slot {
++  width: 46px;
++  height: 46px;
++}
++body:has(.ov-touch:not([hidden])) .slot-icon {
++  width: 42px;
++  height: 42px;
++}
++body:has(.ov-touch:not([hidden])) .vitals {
++  bottom: 156px;
++  left: 12px;
++  width: 136px;
++}
++body:has(.ov-touch:not([hidden])) .status {
++  display: none;
++}
++body:has(.ov-touch:not([hidden])) .waypoint {
++  top: 52px;
++  font-size: 12px;
++}
++body:has(.ov-touch:not([hidden])) .first-steps {
++  top: 92px;
++  bottom: auto;
++  right: 8px;
++  width: min(250px, calc(100vw - 16px));
++  font-size: 12px;
++}
++/* Only the step in progress: the list would cover a phone's view. */
++body:has(.ov-touch:not([hidden])) .first-steps li:not(.current) {
++  display: none;
++}
++
  /* ── Death screen ─────────────────────────────────────────────────── */
  .death-screen {
    position: absolute;