@moood/render 0.0.0 → 0.1.2

package/engine/nav.css

@@ -1,66 +1,66 @@
-/* Finding one's way, the same on every page: the crumbs — where I am: moood / a world / a game / … —
-   (templates/_crumbs.html), and the viewer — a scene looked at without leaving the page (viewer.js). */
-
-.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; font-family: Georgia, "Times New Roman", serif; }
-.crumbs a { color: inherit; text-decoration: none; }
-.crumbs a:hover { text-decoration: underline; }
-.crumbs .brand { font-style: italic; }
-.crumbs .brand .moon { color: #e8c98a; }
-/* a small moon over the m, as in the sign (drawn, not a letter: what is copied is still "moood.me") */
-.crumbs .brand .m { position: relative; }
-.crumbs .brand .m::after { content: ""; position: absolute; left: 0.46em; top: 0.15em; width: 0.15em; height: 0.15em; border-radius: 50%; background: #e8c98a; pointer-events: none; }
-.crumbs .brand .tld { opacity: 0.55; }
-.crumbs .sep { opacity: 0.35; }
-.crumbs .kind { margin-right: -3px; font-size: 0.78em; font-style: italic; opacity: 0.55; }
-.crumbs form { display: inline; }
-.crumbs button { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; opacity: 0.7; }
-.crumbs button:hover { opacity: 1; text-decoration: underline; }
-.crumbs .volume { margin-left: 4px; font-size: 0.85em; }
-.crumbs .volume:hover { text-decoration: none; }
-/* how loud: the music and the voices (volume.js) */
-#volume { position: fixed; z-index: 50; width: 220px; box-sizing: border-box; padding: 10px 12px; display: grid; gap: 8px;
-  border-radius: 10px; background: rgba(14, 17, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: rgba(236, 232, 224, 0.92); font: 14px/1.3 Georgia, "Times New Roman", serif; }
-#volume[hidden] { display: none; }
-#volume label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
-#volume input { width: 100%; accent-color: #e8c98a; }
-/* over a scene full-screen: top-left */
-#crumbs { position: fixed; left: 12px; top: 10px; z-index: 6; max-width: min(720px, calc(100vw - 24px)); padding: 4px 12px;
-  border-radius: 999px; background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(6px); font-size: 14px; line-height: 1.4;
-  color: rgba(236, 232, 224, 0.92); }
-
-/* a full-screen page whose thing is not there (shell.js lost) */
-.lost { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
-  padding: 16px; box-sizing: border-box; background: #0e1116; color: #d6dae1; font: 16px/1.5 Georgia, "Times New Roman", serif; }
-.lost a { color: #e8c98a; }
-.lost .crumbs { margin-bottom: 18px; font-size: 18px; }
-
-/* the viewer */
-.viewer-veil { position: fixed; inset: 0; z-index: 40; background: rgba(4, 6, 10, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
-.viewer-veil.open { opacity: 1; pointer-events: auto; }
-.viewer { position: fixed; z-index: 41; display: none; flex-direction: column; overflow: hidden; border-radius: 12px; background: #07080c;
-  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); }
-.viewer.open { display: flex; }
-.viewer { transform-origin: 0 0; }
-.viewer.moving { transition: transform 0.32s ease, clip-path 0.32s ease; }
-/* the scene's picture, standing in its place until the scene has drawn itself (then fading out),
-   and coming back over it as the view shrinks back into it */
-.viewer-still { position: absolute; object-fit: cover; pointer-events: none; }
-.viewer-still.gone { opacity: 0; transition: opacity 0.3s ease; }
-/* waiting for the scene, over its picture: a slow ring in the middle */
-.viewer-wait { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(255, 236, 200, 0.85); opacity: 0; pointer-events: none;
-  transition: opacity 0.3s ease; animation: viewer-wait 1s linear infinite; }
-.viewer.waiting .viewer-wait { opacity: 1; }
-@keyframes viewer-wait { to { transform: rotate(1turn); } }
-.viewer.closing .viewer-still { opacity: 1; transition: opacity 0.25s ease; }
-.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font: 14px/1.3 Georgia, "Times New Roman", serif;
-  color: rgba(236, 232, 224, 0.92); background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
-.viewer-bar button { border: 1px solid rgba(255, 255, 255, 0.18); background: none; color: inherit; font: inherit; border-radius: 999px;
-  padding: 1px 10px; cursor: pointer; }
-.viewer-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
-.viewer-bar button:disabled { opacity: 0.3; cursor: default; }
-.viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
-.viewer-page { color: inherit; opacity: 0.75; font-size: 13px; text-decoration: none; }
-.viewer-page:hover { opacity: 1; text-decoration: underline; }
-.viewer-frame { flex: 1; border: 0; width: 100%; background: #07080c; }
+/* Finding one's way, the same on every page: the crumbs — where I am: moood / a world / a game / … —
+   (templates/_crumbs.html), and the viewer — a scene looked at without leaving the page (viewer.js). */
+
+.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; font-family: Georgia, "Times New Roman", serif; }
+.crumbs a { color: inherit; text-decoration: none; }
+.crumbs a:hover { text-decoration: underline; }
+.crumbs .brand { font-style: italic; }
+.crumbs .brand .moon { color: #e8c98a; }
+/* a small moon over the m, as in the sign (drawn, not a letter: what is copied is still "moood.me") */
+.crumbs .brand .m { position: relative; }
+.crumbs .brand .m::after { content: ""; position: absolute; left: 0.46em; top: 0.15em; width: 0.15em; height: 0.15em; border-radius: 50%; background: #e8c98a; pointer-events: none; }
+.crumbs .brand .tld { opacity: 0.55; }
+.crumbs .sep { opacity: 0.35; }
+.crumbs .kind { margin-right: -3px; font-size: 0.78em; font-style: italic; opacity: 0.55; }
+.crumbs form { display: inline; }
+.crumbs button { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; opacity: 0.7; }
+.crumbs button:hover { opacity: 1; text-decoration: underline; }
+.crumbs .volume { margin-left: 4px; font-size: 0.85em; }
+.crumbs .volume:hover { text-decoration: none; }
+/* how loud: the music and the voices (volume.js) */
+#volume { position: fixed; z-index: 50; width: 220px; box-sizing: border-box; padding: 10px 12px; display: grid; gap: 8px;
+  border-radius: 10px; background: rgba(14, 17, 22, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: rgba(236, 232, 224, 0.92); font: 14px/1.3 Georgia, "Times New Roman", serif; }
+#volume[hidden] { display: none; }
+#volume label { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; }
+#volume input { width: 100%; accent-color: #e8c98a; }
+/* over a scene full-screen: top-left */
+#crumbs { position: fixed; left: 12px; top: 10px; z-index: 6; max-width: min(720px, calc(100vw - 24px)); padding: 4px 12px;
+  border-radius: 999px; background: rgba(10, 12, 18, 0.55); backdrop-filter: blur(6px); font-size: 14px; line-height: 1.4;
+  color: rgba(236, 232, 224, 0.92); }
+
+/* a full-screen page whose thing is not there (shell.js lost) */
+.lost { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  padding: 16px; box-sizing: border-box; background: #0e1116; color: #d6dae1; font: 16px/1.5 Georgia, "Times New Roman", serif; }
+.lost a { color: #e8c98a; }
+.lost .crumbs { margin-bottom: 18px; font-size: 18px; }
+
+/* the viewer */
+.viewer-veil { position: fixed; inset: 0; z-index: 40; background: rgba(4, 6, 10, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; }
+.viewer-veil.open { opacity: 1; pointer-events: auto; }
+.viewer { position: fixed; z-index: 41; display: none; flex-direction: column; overflow: hidden; border-radius: 12px; background: #07080c;
+  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.12); }
+.viewer.open { display: flex; }
+.viewer { transform-origin: 0 0; }
+.viewer.moving { transition: transform 0.32s ease, clip-path 0.32s ease; }
+/* the scene's picture, standing in its place until the scene has drawn itself (then fading out),
+   and coming back over it as the view shrinks back into it */
+.viewer-still { position: absolute; object-fit: cover; pointer-events: none; }
+.viewer-still.gone { opacity: 0; transition: opacity 0.3s ease; }
+/* waiting for the scene, over its picture: a slow ring in the middle */
+.viewer-wait { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.18); border-top-color: rgba(255, 236, 200, 0.85); opacity: 0; pointer-events: none;
+  transition: opacity 0.3s ease; animation: viewer-wait 1s linear infinite; }
+.viewer.waiting .viewer-wait { opacity: 1; }
+@keyframes viewer-wait { to { transform: rotate(1turn); } }
+.viewer.closing .viewer-still { opacity: 1; transition: opacity 0.25s ease; }
+.viewer-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font: 14px/1.3 Georgia, "Times New Roman", serif;
+  color: rgba(236, 232, 224, 0.92); background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
+.viewer-bar button { border: 1px solid rgba(255, 255, 255, 0.18); background: none; color: inherit; font: inherit; border-radius: 999px;
+  padding: 1px 10px; cursor: pointer; }
+.viewer-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
+.viewer-bar button:disabled { opacity: 0.3; cursor: default; }
+.viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: italic; }
+.viewer-page { color: inherit; opacity: 0.75; font-size: 13px; text-decoration: none; }
+.viewer-page:hover { opacity: 1; text-decoration: underline; }
+.viewer-frame { flex: 1; border: 0; width: 100%; background: #07080c; }

package/engine/render.html

@@ -1,50 +1,50 @@
-<!doctype html>
-<html lang="ru">
-<head>
-  <meta charset="utf-8">
-  <title>moood · render</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="scene.css">
-  <style>html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #scene { position: fixed; inset: 0; width: 100%; height: 100%; } .titles { right: 0; }</style>
-</head>
-<body>
-  <!-- A scene from its starting viewpoint, no UI — what the render service (services/render)
-       screenshots for the artist's look at its own work, the pictures of scenes and assistants (MCP).
-       The service hands the
-       spec in as window.__mooodSpec; errors the scene's code threw end up in
-       window.__mooodRenderErrors; the title turns "ready" when it is time to take the picture. -->
-  <canvas id="scene"></canvas>
-  <header class="titles"><h1 id="title"></h1><p id="caption"></p></header>
-  <script src="kit.js"></script>
-  <script src="engine.js"></script>
-  <script src="gl.js"></script>
-  <script src="captions.js"></script>
-  <script src="widgets.js"></script>
-  <script src="scenestate.js"></script>
-  <script>
-    (async () => {
-      const errors = [];
-      addEventListener('error', e => errors.push(String(e.message)));
-      try {
-        const spec = window.__mooodSpec;
-        const bare = new URLSearchParams(location.search).has('bare');  // a picture for the list: no text
-        if (!bare) {
-          document.getElementById('title').textContent = spec.title || '';
-          document.getElementById('caption').textContent = spec.caption || '';
-        }
-        const modules = { texts: window.__mooodModules || {} }; // the modules the scene lists, given (kit.js)
-        const canvas = document.getElementById('scene'), stage = Moood.mount(canvas);
-        stage.show(spec, modules);
-        MooodState.start(spec, {}, { stage, modules }); // the starting state, scripts running (their errors are reported)
-        if (!bare) MooodWidgets.create({ canvas, stage }).show({ ...spec, widgets: (spec.widgets || []).map(w => ({ ...w, at: 0, for: 0 })) });
-        // show every caption at once, so the reviewer reads them all
-        if (!bare) MooodCaptions.show((spec.captions || []).map(c => ({ ...c, at: 0, for: 0 })));
-      } catch (e) { errors.push(String(e.message || e)); }
-      await new Promise(r => setTimeout(r, 1500));
-      errors.push(...(window.__mooodErrors || []));
-      window.__mooodRenderErrors = errors;
-      document.title = 'ready';
-    })();
-  </script>
-</body>
-</html>
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <title>moood · render</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="scene.css">
+  <style>html, body { margin: 0; height: 100%; overflow: hidden; background: #000; } #scene { position: fixed; inset: 0; width: 100%; height: 100%; } .titles { right: 0; }</style>
+</head>
+<body>
+  <!-- A scene from its starting viewpoint, no UI — what the render service (services/render)
+       screenshots for the artist's look at its own work, the pictures of scenes and assistants (MCP).
+       The service hands the
+       spec in as window.__mooodSpec; errors the scene's code threw end up in
+       window.__mooodRenderErrors; the title turns "ready" when it is time to take the picture. -->
+  <canvas id="scene"></canvas>
+  <header class="titles"><h1 id="title"></h1><p id="caption"></p></header>
+  <script src="kit.js"></script>
+  <script src="engine.js"></script>
+  <script src="gl.js"></script>
+  <script src="captions.js"></script>
+  <script src="widgets.js"></script>
+  <script src="scenestate.js"></script>
+  <script>
+    (async () => {
+      const errors = [];
+      addEventListener('error', e => errors.push(String(e.message)));
+      try {
+        const spec = window.__mooodSpec;
+        const bare = new URLSearchParams(location.search).has('bare');  // a picture for the list: no text
+        if (!bare) {
+          document.getElementById('title').textContent = spec.title || '';
+          document.getElementById('caption').textContent = spec.caption || '';
+        }
+        const modules = { texts: window.__mooodModules || {} }; // the modules the scene lists, given (kit.js)
+        const canvas = document.getElementById('scene'), stage = Moood.mount(canvas);
+        stage.show(spec, modules);
+        MooodState.start(spec, {}, { stage, modules }); // the starting state, scripts running (their errors are reported)
+        if (!bare) MooodWidgets.create({ canvas, stage }).show({ ...spec, widgets: (spec.widgets || []).map(w => ({ ...w, at: 0, for: 0 })) });
+        // show every caption at once, so the reviewer reads them all
+        if (!bare) MooodCaptions.show((spec.captions || []).map(c => ({ ...c, at: 0, for: 0 })));
+      } catch (e) { errors.push(String(e.message || e)); }
+      await new Promise(r => setTimeout(r, 1500));
+      errors.push(...(window.__mooodErrors || []));
+      window.__mooodRenderErrors = errors;
+      document.title = 'ready';
+    })();
+  </script>
+</body>
+</html>

package/engine/scene.css

@@ -1,124 +1,124 @@
-/* Any page with a scene (web/scene, shared by every game): the living scene full-screen, its title,
-   timed captions, widgets, the lines said over whoever says them, the selection's glow, what can be
-   done with a thing picked, a strip of
-   the theme's scenes. Each page adds its own (its panels, the microphone). */
-html, body { margin: 0; height: 100%; overflow: hidden; background: #07080c; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif;
-  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
-#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 1.4s ease; }
-#scene.away { opacity: 0; }
-a { color: inherit; }
-
-.titles { position: fixed; top: 5vh; left: 0; right: 0; padding: 0 16px; text-align: center; pointer-events: none; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
-  transition: opacity 3s ease; }
-.titles.gone { opacity: 0; }
-/* in the Android app the app's own bar is over the top (--app-top) */
-body.app .titles { top: calc(var(--app-top, 0px) + 2vh); }
-.titles h1 { margin: 0; font-weight: normal; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: 0.04em; }
-.titles p { margin: 0.6em 0 0; font-style: italic; opacity: 0.75; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }
-
-/* the selection's glow (select.js) */
-#select-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
-
-/* what can be done with the thing picked (actions.js): beside it */
-#actions { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 280px;
-  padding: 8px; border-radius: 12px; background: rgba(10, 12, 18, 0.86); font: 15px/1.35 Georgia, 'Times New Roman', serif; color: #eee7da;
-  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45); }
-#actions[hidden] { display: none; }
-#actions b { padding: 2px 8px 4px; font-weight: normal; font-style: italic; font-size: 13px; opacity: 0.6; }
-#actions button { border: 0; border-radius: 8px; padding: 6px 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
-#actions button:hover, #actions button:focus-visible { background: rgba(255, 228, 170, 0.14); outline: none; }
-
-/* timed captions (spec.captions) */
-#captions { position: fixed; left: 0; right: 0; bottom: 14vh; z-index: 2; pointer-events: none; text-align: center; }
-#captions p { margin: 0.4em auto; max-width: 42em; padding: 0 16px; font: italic 400 clamp(17px, 2.1vw, 26px)/1.4 Georgia, 'Times New Roman', serif;
-  color: rgba(240, 236, 228, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 2.4s ease; }
-#captions p:not(.on) { position: absolute; left: 0; right: 0; }
-#captions p.on { opacity: 1; }
-
-/* widgets (spec.widgets) */
-#widgets { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
-#widgets .widget { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 1.2s ease; }
-#widgets .widget.on { opacity: 1; }
-
-/* lines said (speech.js): over the one who says it, glimmering while heard; the narrator's low in
-   the middle */
-#speech { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
-#speech .bubble { position: absolute; left: 0; top: 0; max-width: min(340px, 40vw); display: flex; gap: 6px; align-items: flex-start;
-  padding: 8px 12px; border-radius: 14px; background: rgba(12, 14, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
-  color: rgba(244, 240, 232, 0.95); font: 15px/1.4 Georgia, 'Times New Roman', serif; transition: opacity 1.2s ease, box-shadow 0.3s; }
-#speech .bubble.narrator { max-width: min(640px, 80vw); background: rgba(12, 14, 22, 0.55); border-color: transparent; font-style: italic; font-size: 17px; }
-#speech .bubble p { margin: 0; }
-#speech .bubble button { pointer-events: auto; flex: none; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 12px; padding: 2px; }
-#speech .bubble button:hover { opacity: 1; }
-#speech .bubble.speaking { animation: speaking 1.4s ease-in-out infinite; }
-#speech .bubble.fading { opacity: 0; }
-#speech .bubble.pending { padding: 4px 12px; letter-spacing: 0.2em; animation: working 1.2s ease-in-out infinite; }
-@keyframes speaking { 50% { box-shadow: 0 0 18px rgba(255, 220, 160, 0.45); border-color: rgba(255, 220, 160, 0.6); } }
-@keyframes working { 50% { opacity: 0.55; } }
-
-/* the microphone over what the player pressed on: hold to speak */
-#mic { position: fixed; left: 0; top: 0; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
-  border: 1px solid rgba(255, 228, 160, 0.6); background: rgba(12, 14, 22, 0.72); color: rgba(255, 236, 200, 0.95);
-  display: grid; place-items: center; cursor: pointer; touch-action: none; transition: transform 0.2s, background 0.2s, opacity 0.3s; }
-#mic svg { width: 26px; height: 26px; }
-#mic[hidden] { display: none; }
-#mic.on { transform: scale(1.18); background: rgba(150, 40, 30, 0.75); border-color: rgba(255, 170, 140, 0.9); animation: listening 1.1s ease-in-out infinite; }
-#mic.busy { opacity: 0.5; }
-@keyframes listening { 50% { box-shadow: 0 0 0 12px rgba(255, 140, 110, 0.15); } }
-
-/* what the player said, as it is heard */
-#heard { position: fixed; left: 50%; bottom: 6vh; z-index: 3; transform: translateX(-50%); max-width: min(640px, 86vw); padding: 8px 16px;
-  border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); font: 16px/1.4 Georgia, serif;
-  pointer-events: none; opacity: 0; transition: opacity 0.4s; }
-#heard.on { opacity: 1; }
-#heard.partial { color: rgba(255, 255, 255, 0.6); font-style: italic; }
-
-/* the theme's scenes and what is being drawn (strip.js), low on the right */
-#strip { position: fixed; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; max-width: 46vw; overflow-x: auto; padding: 4px; }
-#strip[hidden] { display: none; }
-#strip a { flex: none; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18);
-  background: rgba(12, 14, 22, 0.6); opacity: 0.75; transition: opacity 0.2s, border-color 0.2s; }
-#strip a:hover { opacity: 1; }
-#strip a.here { opacity: 1; border-color: rgba(255, 228, 170, 0.85); }
-#strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
-#strip img[hidden] { display: none; }
-/* a scene being drawn: its sketch as it is now, marked; waiting ones dashed */
-#strip a.sketch { position: relative; opacity: 1; border-color: rgba(255, 196, 120, 0.85); animation: drawing 1.6s ease-in-out infinite; }
-#strip a.sketch.waiting { border-style: dashed; animation: none; opacity: 0.75; }
-#strip .badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font: italic 10px/1.3 Georgia, serif; color: #ffe3c0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
-@keyframes drawing { 50% { box-shadow: 0 0 0 2px rgba(255, 176, 100, 0.35); } }
-
-/* around a scene on a page (the crumbs top-left: nav.css): the game stumbling, what a scene was
-   asked for, a drawing's work */
-
-/* the master stumbled (an error in its turn) */
-#trouble { position: fixed; left: 14px; bottom: 12px; z-index: 3; max-width: 60vw; font: italic 13px/1.4 Georgia, serif; color: rgba(255, 170, 150, 0.85);
-  pointer-events: none; opacity: 0; transition: opacity 0.6s; }
-#trouble.on { opacity: 1; }
-
-#about { position: fixed; left: 14px; top: 12px; z-index: 4; max-width: min(520px, 80vw); max-height: 70vh; overflow: auto; padding: 8px 12px;
-  border-radius: 12px; background: rgba(12, 14, 22, 0.78); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.9); }
-#about summary { cursor: pointer; font-style: italic; opacity: 0.8; }
-#about .note { white-space: pre-wrap; opacity: 0.75; font-size: 12px; }
-#crumbs ~ #about, #crumbs ~ #work { top: 48px; }
-
-/* a scene being drawn (drawing.html): what was asked, its state, what the artist says as it works */
-#work { position: fixed; left: 14px; top: 12px; z-index: 4; width: min(420px, 80vw); max-height: 60vh; display: flex; flex-direction: column; gap: 6px;
-  padding: 10px 14px; border-radius: 12px; background: rgba(12, 14, 22, 0.8); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.92); }
-#work .state { margin: 0; font-style: italic; color: #ffcf9a; }
-#work.drawing .state::before { content: '● '; animation: working 1.2s ease-in-out infinite; }
-#work .asked { margin: 0; opacity: 0.8; max-height: 9em; overflow: auto; }
-#work ol { margin: 0; padding: 0; list-style: none; overflow: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
-#work li { opacity: 0.85; }
-#work li.tool { opacity: 0.45; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
-
-/* the ways the scene can change (directions.js): a panel to try them */
-#directions { position: fixed; left: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
-  border-radius: 12px; background: rgba(8, 10, 16, 0.78); font-size: 13px; -webkit-user-select: none; user-select: none; }
-#directions[hidden] { display: none; }
-#directions .direction { white-space: nowrap; display: grid; grid-template-columns: 15em auto 10em auto; align-items: center; gap: 6px; }
-#directions .direction.blocked { opacity: 0.4; }
-#directions button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; opacity: 0.75; }
-#directions button:hover:not(:disabled) { opacity: 1; }
-#directions input { width: 100%; accent-color: #e8b86a; }
+/* Any page with a scene (web/scene, shared by every game): the living scene full-screen, its title,
+   timed captions, widgets, the lines said over whoever says them, the selection's glow, what can be
+   done with a thing picked, a strip of
+   the theme's scenes. Each page adds its own (its panels, the microphone). */
+html, body { margin: 0; height: 100%; overflow: hidden; background: #07080c; color: #e6e8ee; font-family: Georgia, "Times New Roman", serif;
+  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 1.4s ease; }
+#scene.away { opacity: 0; }
+a { color: inherit; }
+
+.titles { position: fixed; top: 5vh; left: 0; right: 0; padding: 0 16px; text-align: center; pointer-events: none; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
+  transition: opacity 3s ease; }
+.titles.gone { opacity: 0; }
+/* in the Android app the app's own bar is over the top (--app-top) */
+body.app .titles { top: calc(var(--app-top, 0px) + 2vh); }
+.titles h1 { margin: 0; font-weight: normal; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: 0.04em; }
+.titles p { margin: 0.6em 0 0; font-style: italic; opacity: 0.75; font-size: clamp(0.95rem, 1.6vw, 1.15rem); }
+
+/* the selection's glow (select.js) */
+#select-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+
+/* what can be done with the thing picked (actions.js): beside it */
+#actions { position: fixed; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 280px;
+  padding: 8px; border-radius: 12px; background: rgba(10, 12, 18, 0.86); font: 15px/1.35 Georgia, 'Times New Roman', serif; color: #eee7da;
+  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45); }
+#actions[hidden] { display: none; }
+#actions b { padding: 2px 8px 4px; font-weight: normal; font-style: italic; font-size: 13px; opacity: 0.6; }
+#actions button { border: 0; border-radius: 8px; padding: 6px 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+#actions button:hover, #actions button:focus-visible { background: rgba(255, 228, 170, 0.14); outline: none; }
+
+/* timed captions (spec.captions) */
+#captions { position: fixed; left: 0; right: 0; bottom: 14vh; z-index: 2; pointer-events: none; text-align: center; }
+#captions p { margin: 0.4em auto; max-width: 42em; padding: 0 16px; font: italic 400 clamp(17px, 2.1vw, 26px)/1.4 Georgia, 'Times New Roman', serif;
+  color: rgba(240, 236, 228, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 2.4s ease; }
+#captions p:not(.on) { position: absolute; left: 0; right: 0; }
+#captions p.on { opacity: 1; }
+
+/* widgets (spec.widgets) */
+#widgets { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
+#widgets .widget { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; transition: opacity 1.2s ease; }
+#widgets .widget.on { opacity: 1; }
+
+/* lines said (speech.js): over the one who says it, glimmering while heard; the narrator's low in
+   the middle */
+#speech { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
+#speech .bubble { position: absolute; left: 0; top: 0; max-width: min(340px, 40vw); display: flex; gap: 6px; align-items: flex-start;
+  padding: 8px 12px; border-radius: 14px; background: rgba(12, 14, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.14);
+  color: rgba(244, 240, 232, 0.95); font: 15px/1.4 Georgia, 'Times New Roman', serif; transition: opacity 1.2s ease, box-shadow 0.3s; }
+#speech .bubble.narrator { max-width: min(640px, 80vw); background: rgba(12, 14, 22, 0.55); border-color: transparent; font-style: italic; font-size: 17px; }
+#speech .bubble p { margin: 0; }
+#speech .bubble button { pointer-events: auto; flex: none; border: 0; background: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 12px; padding: 2px; }
+#speech .bubble button:hover { opacity: 1; }
+#speech .bubble.speaking { animation: speaking 1.4s ease-in-out infinite; }
+#speech .bubble.fading { opacity: 0; }
+#speech .bubble.pending { padding: 4px 12px; letter-spacing: 0.2em; animation: working 1.2s ease-in-out infinite; }
+@keyframes speaking { 50% { box-shadow: 0 0 18px rgba(255, 220, 160, 0.45); border-color: rgba(255, 220, 160, 0.6); } }
+@keyframes working { 50% { opacity: 0.55; } }
+
+/* the microphone over what the player pressed on: hold to speak */
+#mic { position: fixed; left: 0; top: 0; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
+  border: 1px solid rgba(255, 228, 160, 0.6); background: rgba(12, 14, 22, 0.72); color: rgba(255, 236, 200, 0.95);
+  display: grid; place-items: center; cursor: pointer; touch-action: none; transition: transform 0.2s, background 0.2s, opacity 0.3s; }
+#mic svg { width: 26px; height: 26px; }
+#mic[hidden] { display: none; }
+#mic.on { transform: scale(1.18); background: rgba(150, 40, 30, 0.75); border-color: rgba(255, 170, 140, 0.9); animation: listening 1.1s ease-in-out infinite; }
+#mic.busy { opacity: 0.5; }
+@keyframes listening { 50% { box-shadow: 0 0 0 12px rgba(255, 140, 110, 0.15); } }
+
+/* what the player said, as it is heard */
+#heard { position: fixed; left: 50%; bottom: 6vh; z-index: 3; transform: translateX(-50%); max-width: min(640px, 86vw); padding: 8px 16px;
+  border-radius: 14px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); font: 16px/1.4 Georgia, serif;
+  pointer-events: none; opacity: 0; transition: opacity 0.4s; }
+#heard.on { opacity: 1; }
+#heard.partial { color: rgba(255, 255, 255, 0.6); font-style: italic; }
+
+/* the theme's scenes and what is being drawn (strip.js), low on the right */
+#strip { position: fixed; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; max-width: 46vw; overflow-x: auto; padding: 4px; }
+#strip[hidden] { display: none; }
+#strip a { flex: none; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(12, 14, 22, 0.6); opacity: 0.75; transition: opacity 0.2s, border-color 0.2s; }
+#strip a:hover { opacity: 1; }
+#strip a.here { opacity: 1; border-color: rgba(255, 228, 170, 0.85); }
+#strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
+#strip img[hidden] { display: none; }
+/* a scene being drawn: its sketch as it is now, marked; waiting ones dashed */
+#strip a.sketch { position: relative; opacity: 1; border-color: rgba(255, 196, 120, 0.85); animation: drawing 1.6s ease-in-out infinite; }
+#strip a.sketch.waiting { border-style: dashed; animation: none; opacity: 0.75; }
+#strip .badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font: italic 10px/1.3 Georgia, serif; color: #ffe3c0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
+@keyframes drawing { 50% { box-shadow: 0 0 0 2px rgba(255, 176, 100, 0.35); } }
+
+/* around a scene on a page (the crumbs top-left: nav.css): the game stumbling, what a scene was
+   asked for, a drawing's work */
+
+/* the master stumbled (an error in its turn) */
+#trouble { position: fixed; left: 14px; bottom: 12px; z-index: 3; max-width: 60vw; font: italic 13px/1.4 Georgia, serif; color: rgba(255, 170, 150, 0.85);
+  pointer-events: none; opacity: 0; transition: opacity 0.6s; }
+#trouble.on { opacity: 1; }
+
+#about { position: fixed; left: 14px; top: 12px; z-index: 4; max-width: min(520px, 80vw); max-height: 70vh; overflow: auto; padding: 8px 12px;
+  border-radius: 12px; background: rgba(12, 14, 22, 0.78); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.9); }
+#about summary { cursor: pointer; font-style: italic; opacity: 0.8; }
+#about .note { white-space: pre-wrap; opacity: 0.75; font-size: 12px; }
+#crumbs ~ #about, #crumbs ~ #work { top: 48px; }
+
+/* a scene being drawn (drawing.html): what was asked, its state, what the artist says as it works */
+#work { position: fixed; left: 14px; top: 12px; z-index: 4; width: min(420px, 80vw); max-height: 60vh; display: flex; flex-direction: column; gap: 6px;
+  padding: 10px 14px; border-radius: 12px; background: rgba(12, 14, 22, 0.8); font: 13px/1.45 Georgia, serif; color: rgba(240, 236, 228, 0.92); }
+#work .state { margin: 0; font-style: italic; color: #ffcf9a; }
+#work.drawing .state::before { content: '● '; animation: working 1.2s ease-in-out infinite; }
+#work .asked { margin: 0; opacity: 0.8; max-height: 9em; overflow: auto; }
+#work ol { margin: 0; padding: 0; list-style: none; overflow: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
+#work li { opacity: 0.85; }
+#work li.tool { opacity: 0.45; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
+
+/* the ways the scene can change (directions.js): a panel to try them */
+#directions { position: fixed; left: 16px; bottom: 16px; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
+  border-radius: 12px; background: rgba(8, 10, 16, 0.78); font-size: 13px; -webkit-user-select: none; user-select: none; }
+#directions[hidden] { display: none; }
+#directions .direction { white-space: nowrap; display: grid; grid-template-columns: 15em auto 10em auto; align-items: center; gap: 6px; }
+#directions .direction.blocked { opacity: 0.4; }
+#directions button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; opacity: 0.75; }
+#directions button:hover:not(:disabled) { opacity: 1; }
+#directions input { width: 100%; accent-color: #e8b86a; }