Deploy Hallway 8 (multi-arc memory game)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/audio/landing.ogg filter=lfs diff=lfs merge=lfs -text

CLAUDE.md

@@ -98,7 +98,9 @@ The **landing** screen has its own quiet theme (`_landing`): a soft, slow vi-IV-
 arpeggio, wistful fantasy, deliberately muted and background, never epic or eerie.
 `window.ambience.play(skin)` starts on entering a loop (or `"landing"` on the
 select screen); it stops/rebuilds on transitions. Landing audio starts on the
-first user gesture (autoplay policy). An always-visible mute toggle (`#sound-toggle`) persists to
+first user gesture (autoplay policy). An exported render of the landing theme is
+saved at `static/audio/landing.ogg` (mono OGG Vorbis, ~42s, normalized; rendered
+offline from the same synth via OfflineAudioContext). An always-visible mute toggle (`#sound-toggle`) persists to
 `localStorage` (`h8_muted`). Audio only starts from a user gesture (browser
 autoplay policy). To add a soundscape for a new arc, add a `_<skin>(bus)` builder
 and branch to it in `play()`.
@@ -113,6 +115,10 @@ and branch to it in `play()`.
 - **Doubt prompt** ("How certain are you?") appears randomly, more often near the
   exit. Certain (≥3) commits; guessing (≤2) returns for exactly one re-decide.
 - A "give up · back to start" link returns to the arc-selection landing.
+- **Mobile** (`@media max-width:640px`): the layout top-aligns (`align-items:
+  flex-start`) instead of centering, because centered flex clips the top HUD when
+  content is taller than the viewport. `#screen` gets `padding-top` to clear the
+  fixed sound toggle. Keep the progress HUD visible; don't reintroduce centering.
 
 ## Shared tuning (engine-wide; see docs/ARCS.md for detail)
 

static/audio.js

@@ -122,18 +122,18 @@ class Ambience {
     const now = this.ctx.currentTime;
     // mains buzz: a low hum plus a thin harmonic
     const hum = this._osc("sine", 120);
-    const humG = this._gain(0.03);
+    const humG = this._gain(0.021);
     hum.connect(humG).connect(bus);
     const harm = this._osc("triangle", 240);
-    const harmG = this._gain(0.012);
+    const harmG = this._gain(0.0084);
     harm.connect(harmG).connect(bus);
     // faint high whine
     const whine = this._osc("sine", 8200);
-    const whineG = this._gain(0.0025);
+    const whineG = this._gain(0.0018);
     whine.connect(whineG).connect(bus);
     // ventilation: brown-ish noise, low-passed
     const vent = this._noise(4);
-    const ventG = this._gain(0.05);
+    const ventG = this._gain(0.035);
     vent.connect(this._filter("lowpass", 320, 0.7)).connect(ventG).connect(bus);
     [hum, harm, whine, vent].forEach((s) => s.start(now));
     // a flicker, but rare (roughly once a minute) and soft: a small dip in the
@@ -141,13 +141,13 @@ class Ambience {
     this._every(50000, 90000, () => {
       const t = this.ctx.currentTime;
       humG.gain.setValueAtTime(humG.gain.value, t);
-      humG.gain.linearRampToValueAtTime(0.018, t + 0.04);
-      humG.gain.linearRampToValueAtTime(0.03, t + 0.25);
+      humG.gain.linearRampToValueAtTime(0.012, t + 0.04);
+      humG.gain.linearRampToValueAtTime(0.021, t + 0.25);
       const cr = this._noise(0.2);
       const crG = this._gain(0);
       cr.connect(this._filter("highpass", 2000)).connect(crG).connect(bus);
       cr.start(t);
-      crG.gain.setValueAtTime(0.02, t);
+      crG.gain.setValueAtTime(0.014, t);
       crG.gain.exponentialRampToValueAtTime(0.0004, t + 0.12);
       cr.stop(t + 0.2);
     });

static/audio/landing.ogg

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c3848234bf5e8eb9b66d050cd8c17ebd155bf651066719c30fd6baa279bffbc9
+size 295875

static/style.css

@@ -313,6 +313,37 @@ body {
 }
 
 @media (max-width: 640px) {
+  /* Top-align instead of centering: centered flex clips the top (the HUD) when
+     content is taller than the viewport. Top-align keeps the progress bar
+     visible and lets the page scroll naturally. */
+  body {
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+  #screen {
+    padding: 1.1rem;
+    padding-top: 3rem; /* clear the fixed sound toggle */
+  }
+
   .title { font-size: 2.2rem; }
-  #screen { padding: 1.2rem; }
+  .select-lead { font-size: 0.95rem; }
+  .brief { min-height: 0; margin-bottom: 1.5rem; }
+
+  /* progress bar: smaller, always readable, wraps rather than hides */
+  .hud {
+    font-size: 0.68rem;
+    letter-spacing: 0.12em;
+    margin-bottom: 1.6rem;
+    flex-wrap: wrap;
+    gap: 0.2rem 0.8rem;
+  }
+  .progress { font-weight: 500; }
+
+  .heading { font-size: 1.25rem; margin-bottom: 1.6rem; }
+  .prose { font-size: 1.02rem; line-height: 1.95; min-height: 7rem; }
+  .controls { margin-top: 1.8rem; }
+  .give-up-row { margin-top: 2.2rem; }
+  .arcs { margin-top: 1.5rem; }
+
+  .sound-toggle { top: 0.5rem; right: 0.5rem; opacity: 0.6; }
 }