From 652bf86f4a605c0e313b7eeb34ff2fa442ba3597 Mon Sep 17 00:00:00 2001
From: Aqua <aqua@minds.aqua.gamecult.org>
Date: Tue, 10 Nov 2026 22:12:32 +0000
Subject: [PATCH] Pages: no horizontal overflow at 360px; trial hint names the
 play-both rule

Browser check (headless Chromium, 2026-11-10) found the dings page scrolling
to 846px and the playground to 381px at a 360px viewport, and the trial's
Next button staying disabled until both sounds are played while the hint
did not say so. Tables scroll inside themselves on narrow screens, the
playground select and labels may shrink, and the hint says to play both.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 tools/aqua-playground/web/styles.css | 2 ++
 tools/aqua-trial/web/index.html      | 2 +-
 tools/dings-voices/src/gen_page.py   | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/tools/aqua-playground/web/styles.css b/tools/aqua-playground/web/styles.css
index 3c7dcaf..0d65078 100644
--- a/tools/aqua-playground/web/styles.css
+++ b/tools/aqua-playground/web/styles.css
@@ -5,8 +5,10 @@ main { max-width:1200px; margin:0 auto; padding:24px; }
 .eyebrow { margin:0; color:var(--acc); text-transform:uppercase; letter-spacing:.12em; font-size:12px; }
 h1 { margin:.1em 0 .2em; } h2 { font-size:16px; margin:0 0 8px; } small { color:var(--dim); font-weight:400; }
 .lede { color:var(--dim); max-width:70ch; }
+.bar label { min-width:0; max-width:100%; }
 .bar { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; padding:12px 0; border-block:1px solid var(--line); margin-bottom:16px; }
 button, select { background:#10242b; color:var(--fg); border:1px solid var(--line); padding:6px 14px; border-radius:4px; font:inherit; }
+select { max-width:100%; }
 button:hover { border-color:var(--acc); } button:disabled { opacity:.4; }
 #status { color:var(--dim); }
 .cols { display:grid; grid-template-columns:minmax(280px,1fr) minmax(320px,1.4fr); gap:24px; }
diff --git a/tools/aqua-trial/web/index.html b/tools/aqua-trial/web/index.html
index 1569004..c3863d8 100644
--- a/tools/aqua-trial/web/index.html
+++ b/tools/aqua-trial/web/index.html
@@ -35,7 +35,7 @@
       </div>
       <button id="stop" type="button">Stop</button>
       <button id="next" type="button" disabled>Next</button>
-      <p class="hint">Rate both sounds and give each exactly one word (no spaces) to continue. You can replay as often as you like.</p>
+      <p class="hint">Play both sounds at least once, rate both and give each exactly one word (no spaces) to continue. You can replay as often as you like.</p>
     </section>
 
     <section id="done" hidden>
diff --git a/tools/dings-voices/src/gen_page.py b/tools/dings-voices/src/gen_page.py
index df139f0..a5d5633 100644
--- a/tools/dings-voices/src/gen_page.py
+++ b/tools/dings-voices/src/gen_page.py
@@ -70,7 +70,7 @@ page = f'''<!doctype html>
 body{{margin:0 auto;max-width:60rem;padding:1rem;font:1.05rem/1.5 system-ui,sans-serif;color:var(--fg);background:var(--bg)}}
 h1{{font-size:1.5rem}}h2{{font-size:1.2rem;margin-top:2rem}}h3{{font-size:1.05rem}}.sub{{font-size:.9rem;color:var(--mut);font-weight:400}}
 .notice{{border:2px solid var(--acc);padding:.75rem 1rem;border-radius:.4rem}}.caption{{margin:.25rem 0 .75rem}}
-table{{border-collapse:collapse;width:100%}}th,td{{border-top:1px solid var(--line);padding:.4rem .5rem;text-align:left;vertical-align:top}}
+table{{border-collapse:collapse;width:100%}}@media (max-width:40rem){{table{{display:block;overflow-x:auto}}}}th,td{{border-top:1px solid var(--line);padding:.4rem .5rem;text-align:left;vertical-align:top}}
 audio{{width:100%;min-width:10rem}}img{{max-width:100%;height:auto;width:48%}}figure{{margin:1rem 0}}a,summary{{color:var(--acc)}}:focus-visible{{outline:3px solid var(--acc);outline-offset:2px}}.sr{{position:absolute;left:-9999px}}label{{display:block;margin:.5rem 0}}
 </style></head><body>
 <header><h1>Ratatoskr dings: what changed after v3 (v4)</h1>
-- 
2.47.3