From ec7b82bd815f5a777531728b710621d5be88896e Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 11:04:13 +0400
Subject: [PATCH 01/35] =?UTF-8?q?Checkpoint:=20realism=20pass,=20caf=C3=A9?=
 =?UTF-8?q?=20rooftop,=20garden,=20ambience,=20chess?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 README.md                                     |   2 +-
 docs/code-layout.md                           |   2 +-
 docs/features.md                              |   5 +-
 docs/how-it-works.md                          |   2 +-
 docs/maps.md                                  |   2 +-
 src/client/core/arrival.ts                    |   8 +-
 src/client/core/context.ts                    |   2 +
 src/client/core/ctx.ts                        |   3 +
 src/client/core/loop.ts                       |   8 +-
 src/client/core/maps.ts                       |   2 +-
 src/client/core/post.ts                       |  53 ++
 src/client/core/scene.ts                      |  30 +-
 src/client/core/travel.ts                     |   7 +-
 src/client/features/ambience/engine.ts        | 142 +++
 src/client/features/ambience/forest.ts        | 155 ++++
 src/client/features/ambience/index.ts         |  41 +
 src/client/features/ambience/noise.ts         | 137 +++
 src/client/features/ambience/rig.ts           |  99 +++
 src/client/features/ambience/ui.css           |  20 +
 src/client/features/ambience/ui.ts            |  64 ++
 src/client/features/ambience/water.ts         | 103 +++
 src/client/features/bar/booze.ts              |   9 +-
 src/client/features/bar/drunk.ts              |   1 +
 src/client/features/bar/index.ts              | 180 ++--
 src/client/features/bar/sound.ts              | 159 +---
 src/client/features/bar/ui.ts                 |  91 +-
 src/client/features/bargames/world.ts         |   8 +-
 src/client/features/basketball/world.ts       |   2 +-
 src/client/features/bookshelf/book.ts         |   4 +-
 src/client/features/carrying/card.ts          |   2 +-
 src/client/features/chess/board.ts            | 455 ++++++++++
 src/client/features/chess/controller.ts       | 228 +++++
 src/client/features/chess/index.ts            |  47 +
 src/client/features/chess/pieces.ts           | 202 +++++
 src/client/features/chess/ui.css              |   3 +
 src/client/features/chess/world.ts            | 178 ++++
 src/client/features/dog/coat.ts               |   2 +-
 src/client/features/dog/world.ts              |   4 +-
 src/client/features/golf/world.ts             |   7 +-
 src/client/features/hud/index.ts              |   2 +-
 src/client/features/jukebox/sound.ts          |   2 +-
 src/client/features/peers/index.ts            |   8 +-
 src/client/features/rooftop/cafe-seating.ts   |  82 ++
 src/client/features/rooftop/cafe.ts           | 311 +++++++
 src/client/features/rooftop/garden.ts         | 264 ++++++
 src/client/features/rooftop/garden/ground.ts  |  85 ++
 src/client/features/rooftop/garden/leaves.ts  | 262 ++++++
 src/client/features/rooftop/garden/plants.ts  | 250 ++++++
 src/client/features/rooftop/garden/seats.ts   |  51 ++
 .../features/rooftop/garden/structures.ts     |  88 ++
 src/client/features/rooftop/index.ts          |  25 +-
 src/client/features/rooftop/kit.ts            |  46 +
 src/client/features/rooftop/world.ts          | 833 ++----------------
 src/client/features/workers/leaving.ts        |   4 +-
 src/client/lab/props.ts                       |   2 +-
 src/client/main.ts                            |  13 +-
 src/client/sound/index.ts                     |  34 +-
 src/client/ui/elevator.ts                     |   6 +-
 src/client/ui/floormenu.ts                    |   6 +-
 src/client/ui/help.ts                         |   5 +-
 src/client/ui/people.ts                       |   2 +-
 src/client/ui/settings.ts                     |  10 +-
 src/client/ui/whereabouts.ts                  |  10 +-
 src/client/world/castle/kit.ts                |   2 +-
 src/client/world/castle/props.ts              |   2 +-
 src/client/world/castle/textures.ts           |   2 +-
 src/client/world/character/index.ts           |   2 +-
 src/client/world/character/person-hair.ts     |   2 +-
 src/client/world/character/person.ts          |  20 +-
 src/client/world/character/props.ts           |  93 +-
 src/client/world/character/rig.ts             |   4 +-
 src/client/world/character/serving.ts         | 182 ++++
 src/client/world/character/worker.ts          |   4 +-
 src/client/world/city.ts                      |   7 +-
 src/client/world/costumes.ts                  |  10 +-
 src/client/world/hand/fire.ts                 |  20 +
 src/client/world/hand/pose.ts                 |  60 ++
 src/client/world/hand/rig.ts                  | 248 ++++++
 src/client/world/hands.ts                     | 134 +--
 src/client/world/holiday.ts                   |   9 +-
 src/client/world/office/balcony.ts            |   2 +-
 src/client/world/office/build.ts              |   2 +-
 src/client/world/office/loft.ts               |   2 +-
 src/client/world/office/materials.ts          |   4 +-
 src/client/world/outside.ts                   |  16 +-
 src/client/world/scenic/kit.ts                |   4 +-
 src/client/world/scenic/water.ts              |   4 +-
 src/client/world/sky.ts                       |  10 +-
 src/client/world/station/textures.ts          |   2 +-
 src/client/world/toon.ts                      |  29 +-
 src/client/world/tower.ts                     |  33 +-
 src/server/chess.ts                           | 103 +++
 src/server/office/context.ts                  |   2 +-
 src/server/office/navigation.ts               |   2 +-
 src/server/office/views.ts                    |   2 +-
 src/server/ws/handlers/chess.ts               | 107 +++
 src/server/ws/handlers/index.ts               |   4 +-
 src/server/ws/handlers/presence.ts            |   6 +-
 src/server/ws/handlers/rooftop.ts             |   3 +-
 src/shared/bargames.ts                        |   2 +-
 src/shared/chess-seats.ts                     |  40 +
 src/shared/chess.ts                           | 309 +++++++
 src/shared/garden.ts                          |  21 +
 src/shared/layout.ts                          |  51 +-
 src/shared/protocol.ts                        |   8 +-
 src/shared/protocol/chess.ts                  |  52 ++
 src/shared/protocol/presence.ts               |  14 +-
 src/shared/protocol/rooftop.ts                |   8 +-
 src/shared/rooftop.ts                         |  88 +-
 src/shared/theme.ts                           |   6 +-
 tests/ambience.test.ts                        |  70 ++
 tests/chess-board.test.ts                     | 134 +++
 tests/chess-pieces.test.ts                    |  31 +
 tests/chess-tables.test.ts                    | 193 ++++
 tests/chess.test.ts                           | 214 +++++
 tests/size.test.ts                            |   1 -
 tests/whereabouts.test.ts                     |   8 +-
 117 files changed, 5739 insertions(+), 1519 deletions(-)
 create mode 100644 src/client/core/post.ts
 create mode 100644 src/client/features/ambience/engine.ts
 create mode 100644 src/client/features/ambience/forest.ts
 create mode 100644 src/client/features/ambience/index.ts
 create mode 100644 src/client/features/ambience/noise.ts
 create mode 100644 src/client/features/ambience/rig.ts
 create mode 100644 src/client/features/ambience/ui.css
 create mode 100644 src/client/features/ambience/ui.ts
 create mode 100644 src/client/features/ambience/water.ts
 create mode 100644 src/client/features/chess/board.ts
 create mode 100644 src/client/features/chess/controller.ts
 create mode 100644 src/client/features/chess/index.ts
 create mode 100644 src/client/features/chess/pieces.ts
 create mode 100644 src/client/features/chess/ui.css
 create mode 100644 src/client/features/chess/world.ts
 create mode 100644 src/client/features/rooftop/cafe-seating.ts
 create mode 100644 src/client/features/rooftop/cafe.ts
 create mode 100644 src/client/features/rooftop/garden.ts
 create mode 100644 src/client/features/rooftop/garden/ground.ts
 create mode 100644 src/client/features/rooftop/garden/leaves.ts
 create mode 100644 src/client/features/rooftop/garden/plants.ts
 create mode 100644 src/client/features/rooftop/garden/seats.ts
 create mode 100644 src/client/features/rooftop/garden/structures.ts
 create mode 100644 src/client/features/rooftop/kit.ts
 create mode 100644 src/client/world/character/serving.ts
 create mode 100644 src/client/world/hand/fire.ts
 create mode 100644 src/client/world/hand/pose.ts
 create mode 100644 src/client/world/hand/rig.ts
 create mode 100644 src/server/chess.ts
 create mode 100644 src/server/ws/handlers/chess.ts
 create mode 100644 src/shared/chess-seats.ts
 create mode 100644 src/shared/chess.ts
 create mode 100644 src/shared/garden.ts
 create mode 100644 src/shared/protocol/chess.ts
 create mode 100644 tests/ambience.test.ts
 create mode 100644 tests/chess-board.test.ts
 create mode 100644 tests/chess-pieces.test.ts
 create mode 100644 tests/chess-tables.test.ts
 create mode 100644 tests/chess.test.ts

diff --git a/README.md b/README.md
index 0c8d672ba..77b8793c0 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ curl -fsSL https://raw.githubusercontent.com/AgentSystemLabs/agent-office/main/i
 
 - **Other maps.** Turn the whole building into a castle: sit on a throne of iron blades while your workers line up before you when they're done, send new ones off through the Hand of the King, and watch their beards grow long and grey as they toil. Send one home and the Kingsguard runs up from the dungeon, marches it down the stairs and throws it in a cell, where it starves, dies and rots down to a skeleton. Or into a space station in orbit, the Earth turning outside its windows: you run it from the captain's chair on the bridge, and a worker sent home is marched to the airlock and blown out into space, to drift off past the observation windows with everyone who went before it. Or make a map of your own, with its own way of seeing workers off in JSON ([docs/maps.md](docs/maps.md)).
 
-There's a lot more (a rooftop bar, an office dog, an arcade, supercars in the garage to drive round a scenic loop past a farm, pines, mountains and a beach): see [docs/features.md](docs/features.md).
+There's a lot more (a rooftop café, an office dog, an arcade, supercars in the garage to drive round a scenic loop past a farm, pines, mountains and a beach): see [docs/features.md](docs/features.md).
 
 ## Requirements
 
diff --git a/docs/code-layout.md b/docs/code-layout.md
index d76e3d42a..6d1edbb20 100644
--- a/docs/code-layout.md
+++ b/docs/code-layout.md
@@ -25,7 +25,7 @@ They're in `core/registry.ts`, and each is a field of `ctx`. Every registration
 | `ctx.ticks` | What runs each frame. `add(phase, fn)`, where the phases run in `TICK_PHASES` order: `pre`, `steer`, `vehicles`, `move`, `moved`, `play`, `me`, `others`, `world`, `env`, `aim`, `hud`, `render`. Within a phase, ticks run in install order. |
 | `ctx.activities` | Something you're in the middle of that takes over the controls (the ladder, the golf tee, a car). It gets keys before the office's own, draws the hint bar, and is stopped by `stopAll(why)` when you start something else. Its place among the others is `ACTIVITY_ORDER` in `core/ctx.ts`. |
 | `ctx.interactions` | What each kind of thing you can use does: `define(kind, { reach, hint, use })`, once per kind. |
-| `ctx.view` | What what you're doing does to your view each frame: something you hold on to, the field of view, covering the screen, or a filter (the drunk vision). |
+| `ctx.view` | What what you're doing does to your view each frame: something you hold on to, the field of view, covering the screen, or a filter. |
 | `ctx.windowOpened` | What lets go when a window opens (a shot being wound up, the emote wheel). |
 | `ctx.usables` | Things to use that aren't part of the building and move about (the pictures, the dog, the ball): what each has to use, and what the aim can land on. |
 
diff --git a/docs/features.md b/docs/features.md
index f320d9b99..dbd4185d3 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -65,8 +65,9 @@ Everything in the office, room by room. Back to the [README](../README.md).
 - **Office sounds.** Busy workers clatter away at their keyboards, footsteps knock across the planks (and tick on the garage's concrete, swish through the grass and echo off the castle's flagstones, quicker and harder at a run), the fridge hums, birds chirp outside the windows by day and crickets at night, rain patters on the glass, thunder rolls in a storm, the coffee machine grinds and gurgles, the gong booms when a PR merges and the dog barks. It's all synthesized in the browser and placed where it happens, so it gets louder as you walk closer. Turn it down or mute it under **⚙️**, which also covers the worker dings but not voice chat.
 - **Arcade cabinet.** Workers take minutes, so there's an arcade cabinet in the lounge, next to the jukebox. Press **E** at it and the camera glides up to its screen to play BLOCKFALL, a falling-blocks game: arrows (or WASD) move and turn, **Space** drops, **C** holds a piece for later, **P** pauses. Everyone else on your floor sees your game on the cabinet as you play, and anyone can walk up and press **E** to watch it up close over your shoulder. When one of your workers needs input, the game pauses and says which one, with a button to its terminal. Walk away and your game waits, paused, until you come back. The high-score table is the whole building's: it shows on every floor's cabinet, and it survives restarts.
 - **Basketball.** Every floor has a hoop on the west wall, by the exit door, with a key painted on the floor in front of it and a ball waiting underneath. Walk up to the ball and press **E** to pick it up. Hold **E** (or the mouse button, in first person) to wind up: a meter runs up and down, and letting go in its green band sinks it, while a little late banks in off the glass and too early or too late misses. In first person the ball goes where you look, so put the crosshair on the rim. In third person your character squares up to the hoop when you're facing roughly its way. **Q** drops the ball. Everyone on the floor sees the ball in your hands and the same shot fly, bounce off the rim and swish through the net, and grab the rebound (**E**, even in mid-air). A basket from past 6.75 m is worth three, and you're told how many you've sunk in a row. The ball stays on its floor: take the elevator with it and it goes back under the hoop.
-- **The rooftop bar.** The elevator goes up to the roof, over every floor. A DJ plays drum and bass on a stage under a rig of moving lights and lasers, with an LED wall behind and a dance floor lighting up in front, all flashing in time with the music. The Sky Bar is under a pergola hung with string lights, there's a lounge round a fire pit, and sun loungers look out over the street. The city goes on all around, and its windows, street lamps and traffic light up at night. Press **E** at the bar (or sitting on a stool at it) for a drink: a beer, wine, a cocktail or a shot goes to your head for a minute or so, and the view sways, doubles and smears while you stagger a little. The more you have, the worse it gets, until the bartender pours you a water. Everyone up there sees the glass in your hand and hears the same bar of music. Press **E** at the DJ booth to blow the air horn for all of them.
-- **Darts and axe throwing.** In the rooftop bar's north-west corner, past the DJ, there's a wooden axe-throwing booth with a target on its back wall, and a dart board in a cabinet on the outside of it. Walk up to either and press **E** to step up to the line: the camera looks over your shoulder at the target. Move the mouse (or use the arrow keys) to aim; your hand wanders a little, and more after a few drinks from the bar. Hold **Space** (or the mouse button) to draw back while a meter runs up and down, and let go in its green: a dart flies true, too soft and it drops, too hard and it sails high. An axe let go in the green turns over just right and sticks; off it, it comes in handle first, bounces off and clanks onto the mat. A visit is three darts (180 is the most) and an axe round five throws, scored 1 to 4 in the rings, 6 for the bullseye and 8 for either blue killshot dot. Everyone up there sees you throw, the darts and axes stuck in the target, and your round chalked up on the board beside it. Your best round at each is kept in your browser. **E** steps back from the line.
+- **The rooftop café.** The elevator goes up to the roof, over every floor. It's a calm, alcohol-free café (and nothing on the menu has pork in it): a plaster and timber counter along the east edge with an espresso machine, a grinder, a glass case of croissants and a chalkboard menu, a barista in an apron, and a whitewashed pergola hung with warm string lights and pendant lamps. Round tables with a chair either side of each, tall tables to stand at and stools along the counter fill the middle, and sun loungers look out over the street. The city goes on all around, and its windows, street lamps and traffic light up at night. Press **E** at the counter (or sitting on a stool at it) for the menu: espresso, cappuccino, flat white, mint or black tea, fresh orange juice, lemonade, sparkling water or hot chocolate, and a butter or almond croissant, a pain au chocolat, a cheese and tomato toastie, avocado toast, a fruit cup, a bagel with cream cheese or a falafel wrap. The barista makes it and slides it over, and you hold it for a minute (a cup, a tall glass or a plate), sipping or nibbling. Everyone up there sees what's in your hand. The south-west corner and a patch against the north edge are kept clear for other things (`ROOF_CLEAR` in `src/shared/layout.ts`).
+- **Darts and axe throwing.** In the rooftop café's north-west corner there's a wooden axe-throwing booth with a target on its back wall, and a dart board in a cabinet on the outside of it. Walk up to either and press **E** to step up to the line: the camera looks over your shoulder at the target. Move the mouse (or use the arrow keys) to aim; your hand wanders a little. Hold **Space** (or the mouse button) to draw back while a meter runs up and down, and let go in its green: a dart flies true, too soft and it drops, too hard and it sails high. An axe let go in the green turns over just right and sticks; off it, it comes in handle first, bounces off and clanks onto the mat. A visit is three darts (180 is the most) and an axe round five throws, scored 1 to 4 in the rings, 6 for the bullseye and 8 for either blue killshot dot. Everyone up there sees you throw, the darts and axes stuck in the target, and your round chalked up on the board beside it. Your best round at each is kept in your browser. **E** steps back from the line.
+- **Chess at the Merge Conflict corner.** Where the DJ used to play, on the roof's north side, there are three chess tables on a rug under a sign ("Merge Conflict — resolve it over a game of chess"), each with a polished board inlaid in its top and a chair either side. Sit in a chair (**E**) to take that side: the south chair is White, the north chair Black. Whoever sits across from you plays you, and everyone else up there can watch (and sees what's been taken laid out along the table's edges). It's a full game: castling, en passant, promotion (to a queen), check, checkmate, stalemate and draws for too little material or fifty moves without a capture or a pawn move. Look at your own pieces to light them, click one (or press **E** while looking at it) and then one of the glowing squares to move it; the last move and a king in check are lit for everyone. The little flag on your edge of the table resigns (click it twice) and the gold coin sets the pieces up again once a game is over. **W A S D** gets you up, and the game waits for whoever sits there next; a table goes back to the start once everyone has left it. Games live in the office's memory only.
 - **Jukebox.** A jukebox glows in the corner of the lounge. Walk up and press **E** to put on one of its four lo-fi tunes, skip to the next, turn it off, or paste a link to internet radio or an audio file. Everyone on the floor hears the same song from the same bar, coming from the jukebox: loud on the couch, faint at the desks. The tunes are synthesized in the browser like the office sounds, and it keeps playing when you switch tabs. The jukebox has its own volume under **⚙️**, just for you.
 - **Screen sharing.** Your screen appears on the lounge TV for everyone, and there's a full-screen viewer.
 - **An account for everyone.** Open **🔑 Accounts** from the **☰** menu and make an invite link. Whoever opens it picks a password and gets an account in their own name. That name is the one on their character, in chat and on every terminal they type into (**⌨️** in the terminal header shows who typed last), and nobody else can take it. Admins see everyone's accounts there, can make someone an admin, and can revoke an account, which signs that person out at once. The shared office password keeps working alongside the accounts until an admin switches it off. Sessions are signed cookies, and login attempts are rate limited.
diff --git a/docs/how-it-works.md b/docs/how-it-works.md
index 471783328..e9e375d97 100644
--- a/docs/how-it-works.md
+++ b/docs/how-it-works.md
@@ -39,7 +39,7 @@ browser ──HTTPS/WSS──▶ agent-office (Node)
 - **Golf.** A shot is three numbers, its heading, loft and power, sent to everyone on the floor. Each browser works out the flight from those the same way, a fixed 240 steps a second: gravity and a little drag, the balcony's railing and wall, the neighbours' walls and roofs, the balconies further down, then bounces and a roll that depend on what it lands on (green, fringe, fairway, rough, sand or road), and the cup. So everyone sees the same ball land in the same place without it being streamed. The hitter's browser adds a little mishit to the numbers before sending them, so no two swings are exactly alike.
 - **Jukebox.** Each floor's `jukebox.json` says only what's on and when it started, so it keeps playing through a restart. Every browser plays it for itself: a tune is decided note by note by its bar and step, so starting from the same moment is enough for everyone to hear the same thing. To agree on that moment, each page pings the office a few times on arriving and keeps the quickest answer to line its clock up with the office's. A tune is drums, bass, an FM electric piano and a melody picked from the chord tones, with record crackle and tape wobble, in 32-bar rounds. It's scheduled a second ahead on a timer rather than each frame, which lets it carry on in a background tab. It goes through a panner at the jukebox and a filter that muffles it with distance. Most streams can't be routed through Web Audio without CORS, so a stream plays in a plain `<audio>` element, turned down by hand on the same distance curve. An audio file seeks to where everyone else is.
 - **Floors.** `floors.json` in the office's `.agent-office/` lists the floors: each one's checkout and colors. Adding one runs `gh repo view` (does this login see it, and what's its exact name), then `gh repo clone` into the projects folder; a checkout that's already there from the same repository is used as it is (one whose clone was cut off, with nothing checked out, isn't). The clone runs in a session of its own with no terminal, so nothing can stop to ask a question nobody sees, and git's progress goes to a log in `.agent-office/clones/`, which the office reads every second for the elevator panel. A log that stops growing for 3 minutes means the clone is stuck, and it's stopped. The clones under way are kept in `cloning.json`: an office restarted mid-clone (tsx watch, systemd) picks them up and carries on, while Ctrl+C stops them. Each floor runs its own workers, GitHub boards, queue and changes watcher in its checkout. A floor nobody is on, with nothing running, asks GitHub about its boards every 10 minutes instead of every 90 seconds. People get only the moves, worker updates and terminal frames of the floor they're on; the chat, voice connections and the budget are the building's.
-- **The rooftop.** Nobody works up there, so the roof isn't a floor: it's a place (`@roof`, which no floor id can be) that people are on, with none of a floor's workers, boards or queue. The DJ's set is endless and needs no state: its tracks, their keys, grooves and basslines, and where each one is follow from the office's clock, like the jukebox's tunes, so everyone up there hears the same bar, and the lights flash on the same kicks and snares even for someone with the music off. Drum and bass at 172 BPM, synthesized in the browser: a two-step break, a reese bass through a filter that opens and closes on the eighths, a sub, pads, an arpeggio, risers into each drop and an air horn when one lands. Being drunk is just your own browser's: while you are, the frame is drawn into a texture and onto the screen through a shader that doubles, smears and ripples it. With reduced motion on, nothing sways or strobes.
+- **The rooftop.** Nobody works up there, so the roof isn't a floor: it's a place (`@roof`, which no floor id can be) that people are on, with none of a floor's workers, boards or queue. What's in your hand from the café (`drink` on `act` and `peer.act`, an `ItemId` from `src/shared/rooftop.ts`) is the only state the café has: the menu is in the shared file, the barista and the tables are the client's, and the chairs are `SEATING` like any other seat, so the server checks them the usual way.
 - **State.** The office's `.agent-office/` (in `~/agent-office`, or in the project you started it in) holds the password, the signing secret, the accounts and open invites (`accounts.json`), each account's own Claude, GitHub and git sign-ins (`homes/<account>/`), the floors (`floors.json`) and the clones on their way (`cloning.json`), the chat, the spend and whether workers go home once their PR merges (`leave-on-merge.json`). Each floor's checkout has its own `.agent-office/` with the hook settings, the saved workers and their scrollback, the task queue, the pictures on the walls (`decor.json`), the dog's name (`dog.json`), the jukebox (`jukebox.json`), the whiteboard (`whiteboard/`) and the meetings (`meetings.json`, and each meeting's notes in `meetings/`) and, for DeepSeek Harness workers, the profile patch (`dsh-patch.yml`) with their session logs under `dsh-sessions/`. It is added to `.git/info/exclude` automatically, so it never shows up in `git status`. The one thing the office writes outside it is a Cursor worker's hooks, which the Cursor CLI only reads from `.cursor/hooks.json` in the folder it runs in: they're there while the worker runs, and excluded from git the same way (see [Choosing an agent](agents.md)).
 
 ## Security notes
diff --git a/docs/maps.md b/docs/maps.md
index de2254c09..3693f37e6 100644
--- a/docs/maps.md
+++ b/docs/maps.md
@@ -4,7 +4,7 @@ Back to the [README](../README.md).
 
 The office is one map the building can be. Under **⚙️ Settings → 🏢 Building → Map**, anyone can change it for everyone, on every floor: to the **🏰 Castle**, to the **🚀 Space station**, or to a map of your own. Everything that makes the office work comes along: the workers and their terminals, the issues and PR boards, the task queue and its agent, the services board, meetings, the merge gong, the budget and the limits. Workers keep their seats, since every map places the same seats (see [Seats](#seats)), so a map can change while they work.
 
-The office has plenty of its own that a map doesn't (the elevator, the balcony, the rooftop bar, the lounge, the dog, pictures on the walls). On another map you go to another project from the floor list in the top-left corner (or **☰ → Floors**), and each project's hall is dressed in its own colors: the castle's banners and shields, the station's lines of light.
+The office has plenty of its own that a map doesn't (the elevator, the balcony, the rooftop café, the lounge, the dog, pictures on the walls). On another map you go to another project from the floor list in the top-left corner (or **☰ → Floors**), and each project's hall is dressed in its own colors: the castle's banners and shields, the station's lines of light.
 
 ## The castle
 
diff --git a/src/client/core/arrival.ts b/src/client/core/arrival.ts
index 3ace505c9..6653351f7 100644
--- a/src/client/core/arrival.ts
+++ b/src/client/core/arrival.ts
@@ -106,8 +106,8 @@ export function installArrival(ctx: Ctx, core: CoreState, parts: ArrivalParts) {
     if (player.seat) net.send({ t: 'sit', seat: player.seat.key });
     const carrying = core.carrying;
     if (carrying) net.send({ t: 'carry', issue: carrying.issue, title: carrying.title });
-    const shownDrink = parts.bar.shownDrink();
-    if (shownDrink) net.send({ t: 'act', drink: shownDrink });
+    const shownItem = parts.bar.shownItem();
+    if (shownItem) net.send({ t: 'act', drink: shownItem });
     if (parts.golf.golf.active) net.send({ t: 'act', golf: true });
     const { thrower } = parts.bargames;
     if (thrower.playing) net.send({ t: 'act', throwing: thrower.playing });
@@ -181,8 +181,8 @@ export function installArrival(ctx: Ctx, core: CoreState, parts: ArrivalParts) {
     if (store.floor === ROOF) {
       const n = builtFloors().length;
       $('project-meta').classList.remove('lobby');
-      $('project-name').textContent = `🍸 ${ROOF_NAME}`;
-      $('project-meta').textContent = `🛗 on top of ${n} floor${n === 1 ? '' : 's'} · 🎧 drum & bass`;
+      $('project-name').textContent = `☕ ${ROOF_NAME}`;
+      $('project-meta').textContent = `🛗 on top of ${n} floor${n === 1 ? '' : 's'} · 🌇 the city all around`;
       return;
     }
     if (!p) {
diff --git a/src/client/core/context.ts b/src/client/core/context.ts
index b16368063..76201dfdc 100644
--- a/src/client/core/context.ts
+++ b/src/client/core/context.ts
@@ -72,6 +72,8 @@ export interface Ctx {
   readonly scene: THREE.Scene;
   readonly camera: THREE.PerspectiveCamera;
   readonly renderer: THREE.WebGLRenderer;
+  /** The picture's finish (occlusion, bloom, tone mapping); see core/post.ts. */
+  readonly post: import('./post').Post;
   /** What the office is drawn on (the renderer's canvas), where the mouse aims and clicks. */
   readonly canvas: HTMLCanvasElement;
   /** The office building, whichever map is up (see world()). */
diff --git a/src/client/core/ctx.ts b/src/client/core/ctx.ts
index 0af2c7871..a532c69d1 100644
--- a/src/client/core/ctx.ts
+++ b/src/client/core/ctx.ts
@@ -44,6 +44,9 @@ export function createCtx(parts: Parts): { ctx: Ctx; core: CoreState } {
     get renderer() {
       return parts.stage.renderer;
     },
+    get post() {
+      return parts.stage.post;
+    },
     get canvas() {
       return parts.stage.canvas;
     },
diff --git a/src/client/core/loop.ts b/src/client/core/loop.ts
index d78dfad8d..02524d8e7 100644
--- a/src/client/core/loop.ts
+++ b/src/client/core/loop.ts
@@ -189,10 +189,10 @@ export function installLoop(ctx: Ctx, core: CoreState, parts: Pick<Parts, 'stage
   /** The scene, then your hands on top of it. */
   function drawScene() {
     const { player, hands, sky, camera, renderer } = ctx;
-    const { effect, scene } = parts.stage;
+    const { post, scene } = parts.stage;
     const firstPerson = player.view === 'first';
     const unhide = firstBody?.hideExtras();
-    effect.render(scene, camera);
+    post.render(scene, camera);
     unhide?.();
     // Not while something has the screen to itself (the telescope, the boss's monitor or the arcade up close), where they'd cover it.
     if (firstPerson && !ctx.view.covered() && !ctx.activities.any('hidesHands')) {
@@ -201,7 +201,9 @@ export function installLoop(ctx: Ctx, core: CoreState, parts: Pick<Parts, 'stage
       renderer.clearDepth();
       hands.setLight(sky.lightAt(camera.position));
       sky.shading(false);
-      effect.render(hands.scene, hands.camera);
+      renderer.autoClear = false;
+      renderer.render(hands.scene, hands.camera);
+      renderer.autoClear = true;
       sky.shading(true);
     }
   }
diff --git a/src/client/core/maps.ts b/src/client/core/maps.ts
index b9adbe085..4fc6616ee 100644
--- a/src/client/core/maps.ts
+++ b/src/client/core/maps.ts
@@ -108,7 +108,7 @@ export function installMaps(ctx: Ctx, core: CoreState, parts: MapsParts) {
     const f = builtFloors()[0];
     if (!f) return;
     parts.travel.leaveRoofFor(f.id);
-    toast(`The building's ${plan().icon} ${plan().name} now, with no rooftop bar: down you go`);
+    toast(`The building's ${plan().icon} ${plan().name} now, with no rooftop café: down you go`);
   }
 
   ctx.messages.on('floors', () => noticeWaiting());
diff --git a/src/client/core/post.ts b/src/client/core/post.ts
new file mode 100644
index 000000000..52aea92f6
--- /dev/null
+++ b/src/client/core/post.ts
@@ -0,0 +1,53 @@
+/**
+ * The picture's finish: the scene is drawn in high range, gets ambient occlusion (the soft dark where
+ * things meet), a gentle bloom on what's bright (windows, lamps, the sun on a wall) and is then tone
+ * mapped to the screen, like a camera's. Drawn straight to the screen instead while something else has
+ * the render target (the drunk blur, see features/bar/drunk.ts).
+ */
+import * as THREE from 'three';
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { GTAOPass } from 'three/examples/jsm/postprocessing/GTAOPass.js';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
+
+export class Post {
+  private composer: EffectComposer;
+  private pass: RenderPass;
+  private ao: GTAOPass;
+
+  constructor(
+    private renderer: THREE.WebGLRenderer,
+    scene: THREE.Scene,
+    camera: THREE.PerspectiveCamera,
+  ) {
+    const size = renderer.getSize(new THREE.Vector2());
+    const target = new THREE.WebGLRenderTarget(size.x, size.y, { type: THREE.HalfFloatType, samples: 4 });
+    this.composer = new EffectComposer(renderer, target);
+    this.composer.setPixelRatio(Math.min(renderer.getPixelRatio(), 1.5));
+    this.pass = new RenderPass(scene, camera);
+    this.ao = new GTAOPass(scene, camera, size.x, size.y);
+    this.ao.updateGtaoMaterial({ radius: 0.7, distanceExponent: 1.4, thickness: 1.2, scale: 1.2, samples: 12, distanceFallOff: 1, screenSpaceRadius: false });
+    this.ao.blendIntensity = 0.9;
+    const bloom = new UnrealBloomPass(size, 0.22, 0.7, 1.0);
+    this.composer.addPass(this.pass);
+    this.composer.addPass(this.ao);
+    this.composer.addPass(bloom);
+    this.composer.addPass(new OutputPass());
+  }
+
+  setSize(w: number, h: number) {
+    this.composer.setSize(w, h);
+  }
+
+  render(scene: THREE.Scene, camera: THREE.PerspectiveCamera) {
+    if (this.renderer.getRenderTarget()) {
+      this.renderer.autoClear = true;
+      this.renderer.render(scene, camera);
+      return;
+    }
+    this.pass.scene = this.ao.scene = scene;
+    this.pass.camera = this.ao.camera = camera;
+    this.composer.render();
+  }
+}
diff --git a/src/client/core/scene.ts b/src/client/core/scene.ts
index 23c6c60f3..0e922bcb4 100644
--- a/src/client/core/scene.ts
+++ b/src/client/core/scene.ts
@@ -3,14 +3,14 @@
  * camera, the office building, the sky and the holiday decorations.
  */
 import * as THREE from 'three';
-import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect.js';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 import { store } from '../state';
 import { Holiday } from '../world/holiday';
 import { buildOffice } from '../world/office';
 import type { Office } from '../world/types';
 import { HAZE_MAX, Sky } from '../world/sky';
 import type { Ctx } from './context';
-import { noOutline } from './outline';
+import { Post } from './post';
 
 /** How far the camera sees in the office: as far as the haze ever is, from the top floor. */
 export const FAR = HAZE_MAX + 20;
@@ -21,8 +21,8 @@ export const FOV = 55;
 export interface Stage {
   readonly canvas: HTMLCanvasElement;
   readonly renderer: THREE.WebGLRenderer;
-  /** Draws the scene with the toon outline (see drawFrame in core/loop.ts). */
-  readonly effect: OutlineEffect;
+  /** Draws the scene with its finish: occlusion, bloom, tone mapping (see drawFrame in core/loop.ts). */
+  readonly post: Post;
   readonly scene: THREE.Scene;
   readonly camera: THREE.PerspectiveCamera;
   readonly hemi: THREE.HemisphereLight;
@@ -56,22 +56,30 @@ export function createScene(canvas: HTMLCanvasElement, renderer: THREE.WebGLRend
   renderer.shadowMap.enabled = true;
   renderer.shadowMap.type = THREE.PCFShadowMap;
   renderer.outputColorSpace = THREE.SRGBColorSpace;
-  const effect = new OutlineEffect(renderer, { defaultThickness: 0.0032, defaultColor: [0.17, 0.18, 0.26] });
+  // Realistic look: filmic tone mapping, applied by the post pass (core/post.ts).
+  renderer.toneMapping = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 0.72;
 
   const scene = new THREE.Scene();
   // The sky's color and the fog change with the time of day and the weather (world/sky.ts).
   scene.background = new THREE.Color('#bfe3ff');
   scene.fog = new THREE.Fog('#bfe3ff', 40, 90);
   const camera = new THREE.PerspectiveCamera(FOV, 1, 0.1, FAR);
+  // Image-based light: soft sky and bounce reflections on every surface.
+  const pmrem = new THREE.PMREMGenerator(renderer);
+  scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+  scene.environmentIntensity = 0.3;
+  pmrem.dispose();
 
-  const hemi = new THREE.HemisphereLight('#fff5e6', '#c9a27a', 1.5);
-  const ambient = new THREE.AmbientLight('#ffffff', 0.5);
+  const hemi = new THREE.HemisphereLight('#fff5e6', '#c9a27a', 0.5);
+  const ambient = new THREE.AmbientLight('#ffffff', 0.15);
   scene.add(hemi, ambient);
   // The sun by day and the moon by night; the sky moves it (world/sky.ts).
   const sun = new THREE.DirectionalLight('#fff1d6', 2.2);
   sun.position.set(-8, 18, 10);
   sun.castShadow = true;
-  sun.shadow.mapSize.set(2048, 2048);
+  sun.shadow.mapSize.set(4096, 4096);
+  sun.shadow.radius = 3;
   // Wide enough for the office, the garage under it and the balcony and lot out front, from wherever the sun is.
   Object.assign(sun.shadow.camera, { left: -32, right: 32, top: 30, bottom: -30, near: 1, far: 100 });
   sun.shadow.bias = -0.0008;
@@ -85,9 +93,8 @@ export function createScene(canvas: HTMLCanvasElement, renderer: THREE.WebGLRend
   const holiday = new Holiday(office);
   scene.add(holiday.group);
 
-  noOutline(office.group);
-  noOutline(holiday.group);
-  return { canvas, renderer, effect, scene, camera, hemi, ambient, sun, office, sky, holiday };
+  const post = new Post(renderer, scene, camera);
+  return { canvas, renderer, post, scene, camera, hemi, ambient, sun, office, sky, holiday };
 }
 
 /** The sky follows the office's weather and time of day, and its thunder is heard. */
@@ -103,6 +110,7 @@ export function fitWindow(ctx: Ctx) {
     const w = window.innerWidth;
     const hgt = window.innerHeight;
     ctx.renderer.setSize(w, hgt, false);
+    ctx.post.setSize(w, hgt);
     ctx.camera.aspect = w / hgt;
     ctx.camera.updateProjectionMatrix();
     ctx.hands.setAspect(w / hgt);
diff --git a/src/client/core/travel.ts b/src/client/core/travel.ts
index dc7c74a44..15553bb40 100644
--- a/src/client/core/travel.ts
+++ b/src/client/core/travel.ts
@@ -120,7 +120,7 @@ export function installTravel(ctx: Ctx, core: CoreState, parts: TravelParts) {
     if (!inOffice()) {
       if (to === ROOF || to === GARAGE) {
         parts.walking.stopWalkingTo();
-        toast(`There's no ${to === ROOF ? 'rooftop bar' : 'garage'} on this map (${plan().icon} ${plan().name})`, 'warn');
+        toast(`There's no ${to === ROOF ? 'rooftop café' : 'garage'} on this map (${plan().icon} ${plan().name})`, 'warn');
         return;
       }
       // Still up on a roof this map doesn't have: straight down to that floor.
@@ -279,12 +279,11 @@ export function installTravel(ctx: Ctx, core: CoreState, parts: TravelParts) {
     player.colliders = up ? r!.colliders : world.colliders;
     sky.setRoof(up, roofDrop(rooftop.roofFloors()));
     sound.setOutdoors(up);
-    sound.setDj(up ? rooftop.djAt : null);
     // You can see the whole city from up there (and its clouds); from the top floors, as far as the haze.
     camera.far = up ? 700 : FAR;
     camera.updateProjectionMatrix();
-    // Drinks stay at the bar (what you've had comes down with you).
-    if (!up) parts.bar.booze.putDown();
+    // What you ordered stays at the café.
+    if (!up) parts.bar.putDown();
     // Whatever was thrown up there while you were away, you didn't see: the boards start clean.
     if (up) parts.bargames.freshBoards(r!);
     const { hanger } = parts.hanging;
diff --git a/src/client/features/ambience/engine.ts b/src/client/features/ambience/engine.ts
new file mode 100644
index 000000000..cf5e04a3b
--- /dev/null
+++ b/src/client/features/ambience/engine.ts
@@ -0,0 +1,142 @@
+/**
+ * The thinking spot's sounds: ocean waves, rain or a forest, made with Web Audio (see water.ts and
+ * forest.ts), one at a time with a slow crossfade between them. It goes out through the office's own
+ * sound (so Settings' volume and mute still apply) and only while you're up on the roof.
+ */
+import { forest } from './forest';
+import { Rig } from './rig';
+import { ocean, rain } from './water';
+
+export type AmbienceKind = 'ocean' | 'rain' | 'forest';
+
+export const KINDS: readonly AmbienceKind[] = ['ocean', 'rain', 'forest'];
+
+/** Where the sound goes: the office's audio context and the bus to join it on. Null until the page has been touched. */
+export interface AudioBus {
+  ctx: AudioContext;
+  out: AudioNode;
+}
+
+const SCENES: Record<AmbienceKind, (rig: Rig) => void> = { ocean, rain, forest };
+/** Seconds to crossfade between scenes, and to fade out on leaving the roof. */
+const CROSSFADE = 2;
+const FADE_OUT = 1.5;
+const KEY = 'ambience';
+
+interface Layer {
+  kind: AmbienceKind;
+  rig: Rig;
+  fader: GainNode;
+}
+
+interface Saved {
+  kind: AmbienceKind | null;
+  volume: number;
+}
+
+function load(): Saved {
+  try {
+    const v = JSON.parse(localStorage.getItem(KEY) ?? '{}') as Partial<Saved>;
+    return { kind: KINDS.find((k) => k === v.kind) ?? null, volume: typeof v.volume === 'number' ? Math.max(0, Math.min(1, v.volume)) : 0.6 };
+  } catch {
+    return { kind: null, volume: 0.6 };
+  }
+}
+
+export class Ambience {
+  private kind: AmbienceKind | null;
+  private vol: number;
+  private here = false;
+  private top: Layer | null = null;
+  private master: GainNode | null = null;
+
+  constructor(private readonly bus: () => AudioBus | null) {
+    ({ kind: this.kind, volume: this.vol } = load());
+  }
+
+  /** What's chosen (it keeps going off the roof only in the sense that it comes back when you do). */
+  current(): AmbienceKind | null {
+    return this.kind;
+  }
+
+  volume(): number {
+    return this.vol;
+  }
+
+  /** Switches to `kind` (null: off), crossfading from what's playing. */
+  play(kind: AmbienceKind | null) {
+    this.kind = kind;
+    this.save();
+    this.sync();
+  }
+
+  /** 0 to 1. */
+  setVolume(v: number) {
+    this.vol = Math.max(0, Math.min(1, v));
+    this.save();
+    this.applyVolume();
+  }
+
+  /** On the roof or not: leaving fades it out and stops it, coming back starts it again. Cheap enough to call every frame. */
+  setHere(here: boolean) {
+    this.here = here;
+    this.sync();
+  }
+
+  /** Fades out whatever's playing and stops it for good. */
+  dispose() {
+    this.here = false;
+    this.sync();
+  }
+
+  /** Brings what's playing in line with what's wanted: the chosen scene while you're on the roof, once there's audio to play on. */
+  private sync() {
+    const want = this.here ? this.kind : null;
+    if ((this.top?.kind ?? null) === want) return;
+    const bus = want ? this.bus() : null;
+    if (want && !bus) return;
+    const old = this.top;
+    this.top = null;
+    if (old) this.release(old, want ? CROSSFADE : FADE_OUT);
+    if (want && bus) this.top = this.start(want, bus);
+  }
+
+  private start(kind: AmbienceKind, bus: AudioBus): Layer {
+    const { ctx } = bus;
+    if (!this.master || this.master.context !== ctx) {
+      this.master = ctx.createGain();
+      this.master.connect(bus.out);
+      this.applyVolume();
+    }
+    const fader = ctx.createGain();
+    fader.gain.setValueAtTime(0, ctx.currentTime);
+    fader.gain.setTargetAtTime(1, ctx.currentTime, CROSSFADE / 3.3);
+    fader.connect(this.master);
+    const rig = new Rig(ctx, fader);
+    SCENES[kind](rig);
+    return { kind, rig, fader };
+  }
+
+  /** Fades a scene out over `secs`, then takes it apart. */
+  private release(layer: Layer, secs: number) {
+    const ctx = layer.rig.ctx;
+    layer.fader.gain.setTargetAtTime(0, ctx.currentTime, secs / 3.3);
+    setTimeout(() => {
+      layer.rig.stop();
+      layer.fader.disconnect();
+    }, (secs + 0.6) * 1000);
+  }
+
+  private applyVolume() {
+    // Squared, as the office's own volume is, so the slider feels even to the ear.
+    if (this.master) this.master.gain.setTargetAtTime(this.vol * this.vol, this.master.context.currentTime, 0.05);
+  }
+
+  private save() {
+    try {
+      localStorage.setItem(KEY, JSON.stringify({ kind: this.kind, volume: this.vol } satisfies Saved));
+    } catch {
+      // storage is blocked: the choice just doesn't outlast the page
+    }
+  }
+}
diff --git a/src/client/features/ambience/forest.ts b/src/client/features/ambience/forest.ts
new file mode 100644
index 000000000..3fb19a975
--- /dev/null
+++ b/src/client/features/ambience/forest.ts
@@ -0,0 +1,155 @@
+/** The thinking spot's forest: wind in the leaves, birds, crickets and the odd rustle. */
+import { biquad, rand } from '../../sound/dsp';
+import { birdCall, gap, loopNoise, pickSpecies, type Note, type Species } from './noise';
+import { chain, noiseBuffer, Rig } from './rig';
+
+const rnd = Math.random;
+
+function gain(ctx: BaseAudioContext, value: number): GainNode {
+  const g = ctx.createGain();
+  g.gain.value = value;
+  return g;
+}
+
+/** A slow oscillator that moves `param` by up to `depth` either side of where it is. */
+function drift(rig: Rig, param: AudioParam, hz: number, depth: number) {
+  chain(rig.osc('sine', hz), gain(rig.ctx, depth)).connect(param);
+}
+
+/** A short, dark room for the birds to sound far off in: noise that dies away over a second and a half. */
+function air(rig: Rig): ConvolverNode {
+  const { ctx } = rig;
+  const conv = ctx.createConvolver();
+  const sr = ctx.sampleRate;
+  const buf = ctx.createBuffer(2, Math.floor(sr * 1.5), sr);
+  for (let c = 0; c < 2; c++) {
+    const d = loopNoise('white', buf.length, 0, rnd);
+    for (let i = 0; i < d.length; i++) d[i] *= Math.exp((-3.2 * i) / sr) * 0.5;
+    buf.copyToChannel(d, c);
+  }
+  conv.buffer = buf;
+  const wet = gain(ctx, 0.6);
+  chain(conv, biquad(ctx, 'lowpass', 4500, 0.5), wet, rig.bus);
+  return conv;
+}
+
+/** One note of a bird's call, from somewhere off in the trees. */
+function chirp(rig: Rig, n: Note, t: number, to: AudioNode, level: number) {
+  const { ctx } = rig;
+  const o = ctx.createOscillator();
+  o.frequency.setValueAtTime(n.f0, t);
+  o.frequency.exponentialRampToValueAtTime(n.f1, t + n.dur);
+  const soft = n.f1 < 700;
+  const g = ctx.createGain();
+  g.gain.setValueAtTime(0, t);
+  g.gain.linearRampToValueAtTime(n.gain * level, t + (soft ? n.dur * 0.4 : Math.min(0.012, n.dur * 0.3)));
+  g.gain.exponentialRampToValueAtTime(0.0001, t + n.dur);
+  chain(o, g, to);
+  const end = t + n.dur + 0.05;
+  if (n.fm) {
+    const m = ctx.createOscillator();
+    m.frequency.value = 90;
+    chain(m, gain(ctx, n.fm * 3)).connect(o.frequency);
+    m.start(t);
+    m.stop(end);
+  }
+  o.start(t);
+  o.stop(end);
+}
+
+/** A bird calls from one spot: panned, a little muffled by the distance, with some of it bounced off the trees. */
+function call(rig: Rig, species: Species, t: number, verb: AudioNode): number {
+  const { ctx } = rig;
+  const notes = birdCall(species, rnd);
+  const pan = ctx.createStereoPanner();
+  pan.pan.value = rand(-0.85, 0.85);
+  const far = biquad(ctx, 'lowpass', rand(5500, 9000), 0.4);
+  const send = gain(ctx, 0.5);
+  chain(pan, far, rig.bus);
+  chain(far, send, verb);
+  const level = (species === 'dove' ? 0.1 : 0.05) * rand(0.6, 1.2);
+  for (const n of notes) chirp(rig, n, t + n.at, pan, level);
+  const last = notes[notes.length - 1];
+  return last.at + last.dur;
+}
+
+/** A cricket in the grass: three quick pulses of a high tone, over and over, for a while, then quiet for a while. */
+function cricket(rig: Rig, startIn: number) {
+  const { ctx } = rig;
+  const f = rand(4300, 4900);
+  const period = rand(0.45, 0.65);
+  const pan = ctx.createStereoPanner();
+  pan.pan.value = rand(-0.9, 0.9);
+  pan.connect(rig.bus);
+  let singing = false;
+  let switchAt = 0;
+  rig.events(startIn, (t) => {
+    if (t >= switchAt) {
+      singing = !singing;
+      switchAt = t + (singing ? rand(7, 18) : rand(5, 16));
+    }
+    if (!singing) return switchAt - t;
+    const o = ctx.createOscillator();
+    o.frequency.value = f;
+    const g = ctx.createGain();
+    g.gain.value = 0;
+    for (let k = 0; k < 3; k++) {
+      const s = t + k * 0.045;
+      g.gain.setValueAtTime(0, s);
+      g.gain.linearRampToValueAtTime(0.014, s + 0.008);
+      g.gain.linearRampToValueAtTime(0, s + 0.032);
+    }
+    chain(o, g, pan);
+    o.start(t);
+    o.stop(t + 0.2);
+    return period * rand(0.9, 1.1);
+  });
+}
+
+/** Something stirring in the leaves: a few soft crackles, and now and then a twig. */
+function rustle(rig: Rig, t: number) {
+  const { ctx } = rig;
+  const pan = ctx.createStereoPanner();
+  pan.pan.value = rand(-0.8, 0.8);
+  pan.connect(rig.bus);
+  const twig = rnd() < 0.12;
+  let at = t;
+  const bursts = twig ? 1 : 2 + Math.floor(rnd() * 4);
+  for (let k = 0; k < bursts; k++) {
+    const dur = twig ? 0.012 : rand(0.04, 0.09);
+    const s = ctx.createBufferSource();
+    s.buffer = noiseBuffer(ctx, 'white');
+    const f = biquad(ctx, 'bandpass', twig ? 1500 : rand(3000, 6000), twig ? 4 : 1.2);
+    const g = ctx.createGain();
+    const peak = twig ? 0.2 : rand(0.04, 0.1);
+    g.gain.setValueAtTime(0, at);
+    g.gain.linearRampToValueAtTime(peak, at + 0.004);
+    g.gain.exponentialRampToValueAtTime(0.0001, at + dur);
+    chain(s, f, g, pan);
+    s.start(at, rand(0, 6), dur + 0.02);
+    at += dur + rand(0.02, 0.12);
+  }
+}
+
+export function forest(rig: Rig) {
+  const { ctx } = rig;
+  // Wind in the leaves: two bands of noise that come and go, slowly and out of step.
+  const low = gain(ctx, 0.28);
+  chain(rig.loop('pink'), biquad(ctx, 'bandpass', 600, 0.5), low, rig.bus);
+  drift(rig, low.gain, 0.07, 0.16);
+  const leaves = gain(ctx, 0.12);
+  chain(rig.loop('pink'), biquad(ctx, 'bandpass', 1900, 0.8), leaves, rig.bus);
+  drift(rig, leaves.gain, 0.13, 0.07);
+  // Birds, now and then, sometimes answered by another.
+  const verb = air(rig);
+  rig.events(1.5, (t) => {
+    const len = call(rig, pickSpecies(rnd), t, verb);
+    if (rnd() < 0.3) call(rig, pickSpecies(rnd), t + len + rand(0.5, 1.5), verb);
+    return len + gap(rnd, 2.5, 13);
+  });
+  for (let i = 0; i < 3; i++) cricket(rig, rand(0.5, 8));
+  rig.events(6, (t) => {
+    rustle(rig, t);
+    return gap(rnd, 7, 22);
+  });
+}
diff --git a/src/client/features/ambience/index.ts b/src/client/features/ambience/index.ts
new file mode 100644
index 000000000..645ac97d5
--- /dev/null
+++ b/src/client/features/ambience/index.ts
@@ -0,0 +1,41 @@
+/**
+ * The thinking spot on the roof: E there opens a small window to pick the sound to think to (ocean
+ * waves, rain or a forest, all made with Web Audio: see engine.ts). It plays across the whole roof and
+ * stops when you go back inside.
+ */
+import { THINK_SPOT } from '../../../shared/garden';
+import type { Ctx } from '../../core/context';
+import { aside, hintTitle, key, onE } from '../../core/hint';
+import type { Interactable } from '../../world/types';
+import { Ambience } from './engine';
+import { nowPlaying, openAmbience } from './ui';
+
+// The kinds of thing you can use that this defines (see InteractKinds in world/types.ts).
+declare module '../../world/types' {
+  interface InteractKinds {
+    ambience: true;
+  }
+}
+
+/** The seat to put in the roof's interactables (see features/rooftop): E there opens the sound picker. */
+export function thinkSpotInteractable(): Interactable {
+  return { kind: 'ambience', x: THINK_SPOT.x, y: 0, z: THINK_SPOT.z, radius: 2.2 };
+}
+
+export function installAmbience(ctx: Ctx) {
+  const amb = new Ambience(() => ctx.sound.audioBus());
+
+  ctx.interactions.define('ambience', {
+    reach: 3.5,
+    hint: () => {
+      const cur = amb.current();
+      return { k: String(cur), parts: [hintTitle('🎧 Thinking spot'), aside(cur ? nowPlaying(cur) : 'pick a sound'), key('E', 'Choose sounds')] };
+    },
+    use: onE(() => openAmbience(amb)),
+  });
+
+  // Plays everywhere on the roof; leaving it fades the sound out and stops it.
+  ctx.ticks.add('env', () => amb.setHere(ctx.upTop()));
+
+  return { amb };
+}
diff --git a/src/client/features/ambience/noise.ts b/src/client/features/ambience/noise.ts
new file mode 100644
index 000000000..727719d43
--- /dev/null
+++ b/src/client/features/ambience/noise.ts
@@ -0,0 +1,137 @@
+/**
+ * The raw material of the thinking spot's sounds, with no Web Audio in it (so tests/ambience.test.ts can
+ * run it): seamless loops of white, pink and brown noise, the swell of a wave, and the calls of the birds.
+ */
+
+export type NoiseKind = 'white' | 'pink' | 'brown';
+
+/** How loud a noise loop is made (RMS), so every scene starts from the same level. */
+const NOISE_RMS = 0.25;
+
+/**
+ * `length` samples of `kind` that loop with no click: it's made `fade` samples longer, and the extra
+ * tail is faded into the start (equal power, as the two are unrelated) so the end runs on into the beginning.
+ */
+export function loopNoise(kind: NoiseKind, length: number, fade: number, rnd: () => number): Float32Array<ArrayBuffer> {
+  const raw = new Float32Array(length + fade);
+  let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0, brown = 0;
+  for (let i = 0; i < raw.length; i++) {
+    const w = rnd() * 2 - 1;
+    if (kind === 'white') raw[i] = w;
+    else if (kind === 'brown') {
+      brown = (brown + 0.02 * w) / 1.02;
+      raw[i] = brown;
+    } else {
+      // Paul Kellet's pink filter: white noise tilted down 3 dB an octave.
+      b0 = 0.99886 * b0 + w * 0.0555179;
+      b1 = 0.99332 * b1 + w * 0.0750759;
+      b2 = 0.969 * b2 + w * 0.153852;
+      b3 = 0.8665 * b3 + w * 0.3104856;
+      b4 = 0.55 * b4 + w * 0.5329522;
+      b5 = -0.7616 * b5 - w * 0.016898;
+      raw[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + w * 0.5362;
+      b6 = w * 0.115926;
+    }
+  }
+  const out = raw.slice(0, length);
+  for (let i = 0; i < fade; i++) {
+    const x = (i / fade) * (Math.PI / 2);
+    out[i] = raw[i] * Math.sin(x) + raw[length + i] * Math.cos(x);
+  }
+  let sum = 0;
+  for (const v of out) sum += v * v;
+  const k = NOISE_RMS / (Math.sqrt(sum / length) || 1);
+  for (let i = 0; i < length; i++) out[i] = Math.max(-1, Math.min(1, out[i] * k));
+  return out;
+}
+
+/**
+ * A wave breaking and running back up the beach, `n` points from 0 to 1: a floor of wash, a swell to the
+ * crest `peakAt` of the way through, and a long fall. It starts and ends on the floor, so waves run on
+ * from one to the next.
+ */
+export function waveEnvelope(n: number, peakAt = 0.38, floor = 0.14): Float32Array {
+  const out = new Float32Array(n);
+  for (let i = 0; i < n; i++) {
+    const x = i / (n - 1);
+    const shape = x < peakAt ? Math.sin((Math.PI / 2) * (x / peakAt)) ** 2 : (0.5 + 0.5 * Math.cos((Math.PI * (x - peakAt)) / (1 - peakAt))) ** 1.6;
+    out[i] = floor + (1 - floor) * shape;
+  }
+  return out;
+}
+
+/** Seconds to wait before the next of something, `min` to `max`, usually nearer `min`. */
+export function gap(rnd: () => number, min: number, max: number): number {
+  const r = rnd();
+  return min + (max - min) * r * r;
+}
+
+// ---- Birds ------------------------------------------------------------------------------------
+
+export type Species = 'robin' | 'dove' | 'tit' | 'warbler';
+
+/** One note of a call: `at` seconds into it, gliding from `f0` to `f1` Hz over `dur` seconds. */
+export interface Note {
+  at: number;
+  f0: number;
+  f1: number;
+  dur: number;
+  gain: number;
+  /** How hard a second oscillator bends the pitch (0 for a pure whistle), for the chirpier birds. */
+  fm: number;
+}
+
+const between = (rnd: () => number, a: number, b: number) => a + (b - a) * rnd();
+
+/** A call of `species`: the same bird says it a little differently every time. */
+export function birdCall(species: Species, rnd: () => number): Note[] {
+  const notes: Note[] = [];
+  let at = 0;
+  if (species === 'robin') {
+    // A liquid phrase of high and low whistles, falling and rising.
+    const count = 4 + Math.floor(rnd() * 4);
+    for (let i = 0; i < count; i++) {
+      const high = i % 2 === 0;
+      const f = high ? between(rnd, 3000, 4200) : between(rnd, 2100, 2800);
+      const up = rnd() < 0.5;
+      const dur = between(rnd, 0.09, 0.2);
+      notes.push({ at, f0: up ? f * 0.8 : f, f1: up ? f : f * 0.75, dur, gain: between(rnd, 0.6, 1), fm: 0 });
+      at += dur + between(rnd, 0.04, 0.16);
+    }
+  } else if (species === 'dove') {
+    // Soft low hoots: coo, COO, coo, coo.
+    const count = 3 + Math.floor(rnd() * 3);
+    const f = between(rnd, 380, 520);
+    for (let i = 0; i < count; i++) {
+      const dur = i === 1 ? 0.42 : 0.28;
+      notes.push({ at, f0: f * 0.92, f1: f * (i === 1 ? 1.08 : 0.97), dur, gain: i === 1 ? 1 : 0.7, fm: 0 });
+      at += dur + between(rnd, 0.1, 0.22);
+    }
+  } else if (species === 'tit') {
+    // A tight run of bright "tsee"s.
+    const count = 3 + Math.floor(rnd() * 4);
+    const f = between(rnd, 5200, 6600);
+    for (let i = 0; i < count; i++) {
+      const dur = between(rnd, 0.05, 0.08);
+      notes.push({ at, f0: f * 0.85, f1: f * between(rnd, 1.05, 1.2), dur, gain: between(rnd, 0.7, 1), fm: 80 });
+      at += dur + between(rnd, 0.06, 0.11);
+    }
+  } else {
+    // A fast trill that swaps between two pitches.
+    const count = 10 + Math.floor(rnd() * 9);
+    const f = between(rnd, 3300, 4600);
+    for (let i = 0; i < count; i++) {
+      const dur = between(rnd, 0.025, 0.04);
+      const fr = i % 2 ? f * 1.12 : f;
+      notes.push({ at, f0: fr, f1: fr * 0.97, dur, gain: 0.55 + 0.45 * Math.sin((Math.PI * i) / count), fm: 30 });
+      at += dur + between(rnd, 0.015, 0.03);
+    }
+  }
+  return notes;
+}
+
+/** Which bird calls next, the gentle ones more often than the sharp ones. */
+export function pickSpecies(rnd: () => number): Species {
+  const r = rnd();
+  return r < 0.34 ? 'robin' : r < 0.58 ? 'dove' : r < 0.82 ? 'warbler' : 'tit';
+}
diff --git a/src/client/features/ambience/rig.ts b/src/client/features/ambience/rig.ts
new file mode 100644
index 000000000..8720640f2
--- /dev/null
+++ b/src/client/features/ambience/rig.ts
@@ -0,0 +1,99 @@
+import { mulberry32 } from '../../../shared/rng';
+import { loopNoise, type NoiseKind } from './noise';
+
+/** How far ahead (seconds) a scene schedules what it does next, so a throttled background tab still plays on. */
+const LOOKAHEAD = 3;
+const LOOP_SECONDS = 8;
+const LOOP_FADE = 1;
+
+const cache = new WeakMap<BaseAudioContext, Map<NoiseKind, AudioBuffer>>();
+
+/** A stereo loop of noise (the two channels unrelated, for width), made once per context and shared. */
+export function noiseBuffer(ctx: BaseAudioContext, kind: NoiseKind): AudioBuffer {
+  let kinds = cache.get(ctx);
+  if (!kinds) cache.set(ctx, (kinds = new Map()));
+  let buf = kinds.get(kind);
+  if (!buf) {
+    const sr = ctx.sampleRate;
+    buf = ctx.createBuffer(2, Math.floor(sr * LOOP_SECONDS), sr);
+    const seed = 7919 * (['white', 'pink', 'brown'].indexOf(kind) + 1);
+    for (let c = 0; c < 2; c++) buf.copyToChannel(loopNoise(kind, buf.length, Math.floor(sr * LOOP_FADE), mulberry32(seed + c * 104729)), c);
+    kinds.set(kind, buf);
+  }
+  return buf;
+}
+
+/** Connects the nodes one after another, and gives back the last. */
+export function chain<T extends AudioNode>(first: AudioNode, ...rest: [...AudioNode[], T]): T {
+  let from = first;
+  for (const n of rest) {
+    from.connect(n);
+    from = n;
+  }
+  return from as T;
+}
+
+/**
+ * What a scene is built on: a bus that goes out through the scene's fader, the noise loops and oscillators
+ * it runs (stopped with it) and the things it does now and then. `stop` takes all of it away.
+ */
+export class Rig {
+  /** Everything the scene makes goes here. */
+  readonly bus: GainNode;
+  private readonly sources: AudioScheduledSourceNode[] = [];
+  private readonly timers: number[] = [];
+
+  constructor(readonly ctx: AudioContext, out: AudioNode) {
+    this.bus = ctx.createGain();
+    this.bus.connect(out);
+  }
+
+  /** A looping noise, started somewhere different in its loop each time so two of one kind aren't the same. */
+  loop(kind: NoiseKind): AudioBufferSourceNode {
+    const s = this.ctx.createBufferSource();
+    s.buffer = noiseBuffer(this.ctx, kind);
+    s.loop = true;
+    s.start(0, Math.random() * LOOP_SECONDS);
+    this.sources.push(s);
+    return s;
+  }
+
+  osc(type: OscillatorType, freq: number): OscillatorNode {
+    const o = this.ctx.createOscillator();
+    o.type = type;
+    o.frequency.value = freq;
+    o.start();
+    this.sources.push(o);
+    return o;
+  }
+
+  /**
+   * Calls `play(t)` for each moment `t` (context time) something should happen, `startIn` seconds from now and
+   * then as far apart as `play` says it is (the seconds to the next), always scheduling a little ahead.
+   */
+  events(startIn: number, play: (t: number) => number) {
+    let next = this.ctx.currentTime + startIn;
+    const run = () => {
+      const now = this.ctx.currentTime;
+      while (next < now + LOOKAHEAD) {
+        // From when it actually played, if a throttled tab ran late, so one wave's curve never overlaps the next.
+        const t = Math.max(next, now);
+        next = t + Math.max(0.01, play(t));
+      }
+    };
+    run();
+    this.timers.push(window.setInterval(run, 250));
+  }
+
+  stop() {
+    for (const t of this.timers) clearInterval(t);
+    for (const s of this.sources) {
+      try {
+        s.stop();
+      } catch {
+        // already stopped
+      }
+    }
+    this.bus.disconnect();
+  }
+}
diff --git a/src/client/features/ambience/ui.css b/src/client/features/ambience/ui.css
new file mode 100644
index 000000000..117bd2506
--- /dev/null
+++ b/src/client/features/ambience/ui.css
@@ -0,0 +1,20 @@
+/* The thinking spot's window: three big scene buttons, Off, and a volume. */
+.modal.ambience { width: min(440px, 100%); }
+.ambience .scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.ambience .scene { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; font: inherit; font-size: 14px; font-weight: 800; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
+.ambience .scene .emoji { font-size: 38px; line-height: 1; }
+.ambience .scene:hover { background: var(--paper-2); }
+.ambience .scene.on { background: #fff1de; border-color: var(--accent); }
+.ambience .scene:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
+.ambience .now { margin: 14px 0 0; font-size: 15px; font-weight: 800; }
+.ambience .level { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
+.ambience .level .btn { flex: none; }
+.ambience .level .pct { flex: none; width: 3.2em; text-align: right; font-weight: 800; font-size: 14px; }
+.ambience input[type=range] { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fill: 60%; }
+.ambience input[type=range]:focus { outline: none; }
+.ambience input[type=range]::-webkit-slider-runnable-track { height: 14px; border: 3px solid var(--ink); border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), #fff var(--fill)); }
+.ambience input[type=range]::-moz-range-track { height: 8px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
+.ambience input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
+.ambience input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
+.ambience input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
+.ambience input[type=range]:focus-visible::-webkit-slider-thumb { border-color: var(--accent); }
diff --git a/src/client/features/ambience/ui.ts b/src/client/features/ambience/ui.ts
new file mode 100644
index 000000000..03bf397f2
--- /dev/null
+++ b/src/client/features/ambience/ui.ts
@@ -0,0 +1,64 @@
+import { h, openModal } from '../../ui/dom';
+import type { Ambience, AmbienceKind } from './engine';
+import './ui.css';
+
+export const SCENES: readonly { kind: AmbienceKind; emoji: string; label: string }[] = [
+  { kind: 'ocean', emoji: '🌊', label: 'Ocean waves' },
+  { kind: 'rain', emoji: '🌧️', label: 'Rain' },
+  { kind: 'forest', emoji: '🌲', label: 'Forest' },
+];
+
+/** What the thinking spot is playing, in words. */
+export function nowPlaying(kind: AmbienceKind | null): string {
+  const s = SCENES.find((x) => x.kind === kind);
+  return s ? `${s.emoji} ${s.label}` : 'Silence';
+}
+
+/** E at the thinking spot: pick the sound to think to. It keeps playing after the window closes. */
+export function openAmbience(amb: Ambience) {
+  const close = h('button.btn.close', { 'aria-label': 'Close' }, '✕');
+  const buttons = SCENES.map((s) => {
+    const b = h('button.scene', { type: 'button', 'aria-pressed': 'false' }, h('span.emoji', {}, s.emoji), s.label);
+    b.addEventListener('click', () => {
+      amb.play(s.kind);
+      paint();
+    });
+    return b;
+  });
+  const off = h('button.btn', { type: 'button' }, '🔇 Off');
+  off.addEventListener('click', () => {
+    amb.play(null);
+    paint();
+  });
+  const now = h('p.now');
+  const slider = h('input', { type: 'range', min: 0, max: 100, step: 1, 'aria-label': 'Volume' });
+  const pct = h('span.pct');
+  const paint = () => {
+    const cur = amb.current();
+    SCENES.forEach((s, i) => {
+      buttons[i].classList.toggle('on', s.kind === cur);
+      buttons[i].setAttribute('aria-pressed', String(s.kind === cur));
+    });
+    off.classList.toggle('on', cur === null);
+    now.textContent = `Now playing: ${nowPlaying(cur)}`;
+    const v = Math.round(amb.volume() * 100);
+    slider.value = String(v);
+    slider.style.setProperty('--fill', `${v}%`);
+    pct.textContent = `${v}%`;
+  };
+  slider.addEventListener('input', () => {
+    amb.setVolume(Number(slider.value) / 100);
+    paint();
+  });
+  const el = h(
+    'div.modal.ambience',
+    { role: 'dialog', 'aria-label': 'Thinking spot' },
+    h('header', {}, h('h2', {}, '🎧 Thinking spot'), close),
+    h('div.body', {}, h('div.scenes', {}, ...buttons), now, h('div.level', {}, off, slider, pct)),
+    h('footer', {}, h('span.grow', {}, 'It keeps playing while you wander the roof, and stops when you go back inside.')),
+  );
+  const modal = openModal(el);
+  close.addEventListener('click', () => modal.close());
+  paint();
+  setTimeout(() => (buttons.find((b) => b.classList.contains('on')) ?? buttons[0]).focus(), 30);
+}
diff --git a/src/client/features/ambience/water.ts b/src/client/features/ambience/water.ts
new file mode 100644
index 000000000..2e7ce632e
--- /dev/null
+++ b/src/client/features/ambience/water.ts
@@ -0,0 +1,103 @@
+/** The thinking spot's ocean and rain, made from noise (see noise.ts) and a few oscillators. */
+import { biquad, rand } from '../../sound/dsp';
+import { gap, waveEnvelope } from './noise';
+import { chain, Rig } from './rig';
+
+const rnd = Math.random;
+const POINTS = 160;
+
+/** One stretch of surf, off to one side: waves that swell, break and run back, each 8 to 14 s, never quite alike. */
+function surf(rig: Rig, pan: number, level: number) {
+  const { ctx } = rig;
+  const lp = biquad(ctx, 'lowpass', 220, 0.6);
+  const body = ctx.createGain();
+  const hiss = ctx.createGain();
+  const out = ctx.createStereoPanner();
+  out.pan.value = pan;
+  chain(rig.loop('pink'), lp, body, out);
+  // The faint high hiss on the crest, as the foam breaks.
+  chain(rig.loop('white'), biquad(ctx, 'highpass', 4200, 0.5), hiss, out);
+  out.connect(rig.bus);
+  const floor = waveEnvelope(2)[0];
+  body.gain.value = floor * level;
+  lp.frequency.value = 220 * 8 ** floor;
+  hiss.gain.value = 0;
+  const bodyCurve = new Float32Array(POINTS);
+  const lpCurve = new Float32Array(POINTS);
+  const hissCurve = new Float32Array(POINTS);
+  rig.events(rand(0.1, 4), (t) => {
+    const period = rand(8, 14);
+    const env = waveEnvelope(POINTS, rand(0.3, 0.46));
+    for (let i = 0; i < POINTS; i++) {
+      bodyCurve[i] = env[i] * level;
+      lpCurve[i] = 220 * 8 ** env[i];
+      hissCurve[i] = env[i] ** 5 * 0.09 * level;
+    }
+    body.gain.setValueCurveAtTime(bodyCurve, t, period);
+    lp.frequency.setValueCurveAtTime(lpCurve, t, period);
+    hiss.gain.setValueCurveAtTime(hissCurve, t, period);
+    return period + 0.05;
+  });
+}
+
+export function ocean(rig: Rig) {
+  const { ctx } = rig;
+  surf(rig, -0.55, 1.5);
+  surf(rig, 0.55, 1.5);
+  // The sea beyond the waves: a low steady wash.
+  chain(rig.loop('brown'), biquad(ctx, 'lowpass', 260, 0.5), gain(ctx, 0.5), rig.bus);
+}
+
+function gain(ctx: BaseAudioContext, value: number): GainNode {
+  const g = ctx.createGain();
+  g.gain.value = value;
+  return g;
+}
+
+/** A drop landing on a leaf: a quick tick whose pitch falls (or, now and then, a fatter one that bubbles up). */
+function drip(rig: Rig, t: number) {
+  const { ctx } = rig;
+  const big = rnd() < 0.12;
+  const o = ctx.createOscillator();
+  const f = big ? rand(700, 1300) : rand(1800, 4800);
+  const dur = big ? 0.07 : rand(0.015, 0.04);
+  o.frequency.setValueAtTime(f, t);
+  o.frequency.exponentialRampToValueAtTime(big ? f * 1.7 : f * 0.45, t + dur);
+  const g = ctx.createGain();
+  const peak = big ? rand(0.03, 0.06) : rand(0.02, 0.07);
+  g.gain.setValueAtTime(0, t);
+  g.gain.linearRampToValueAtTime(peak, t + 0.003);
+  g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
+  const pan = ctx.createStereoPanner();
+  pan.pan.value = rand(-0.9, 0.9);
+  chain(o, g, pan, rig.bus);
+  o.start(t);
+  o.stop(t + dur + 0.02);
+}
+
+export function rain(rig: Rig) {
+  const { ctx } = rig;
+  // The steady fall: pink noise with its mud taken off and the top lifted, so it hisses softly rather than roars.
+  const shelf = ctx.createBiquadFilter();
+  shelf.type = 'highshelf';
+  shelf.frequency.value = 3000;
+  shelf.gain.value = 6;
+  chain(rig.loop('pink'), biquad(ctx, 'highpass', 300, 0.5), shelf, biquad(ctx, 'lowpass', 9000, 0.5), gain(ctx, 0.55), rig.bus);
+  // Drops on the leaves around you, the density rising and falling slowly.
+  const patter = gain(ctx, 0.1);
+  chain(rig.loop('white'), biquad(ctx, 'bandpass', 5500, 0.6), patter, rig.bus);
+  const lfo = chain(rig.osc('sine', 0.11), gain(ctx, 0.04));
+  lfo.connect(patter.gain);
+  // Single drops, sparse and unevenly spaced.
+  rig.events(0.2, (t) => {
+    drip(rig, t);
+    return gap(rnd, 0.06, 0.55);
+  });
+  // Thunder a long way off: a low rumble that swells and fades by itself.
+  const rumble = gain(ctx, 0.1);
+  chain(rig.loop('brown'), biquad(ctx, 'lowpass', 140, 0.7), rumble, rig.bus);
+  rig.events(1, (t) => {
+    rumble.gain.setTargetAtTime(rand(0.08, 0.55), t, rand(2.5, 5));
+    return rand(7, 20);
+  });
+}
diff --git a/src/client/features/bar/booze.ts b/src/client/features/bar/booze.ts
index d90a58047..134a10888 100644
--- a/src/client/features/bar/booze.ts
+++ b/src/client/features/bar/booze.ts
@@ -1,10 +1,17 @@
+// Retired: the rooftop is an alcohol-free café now, and nothing imports this any more.
 /**
  * Drinks from the rooftop bar: each goes to your head over a few seconds, then wears off over a
  * minute or so. They add up, and the more you've had, the more the view sways, doubles and smears
  * (drunk.ts) and the more you stagger (see sway in player/effects.ts). Water helps a little.
  * Times are seconds, on whichever clock the caller passes in as `now`.
  */
-import { BOOZE_LIMIT, type Drink } from '../../../shared/rooftop';
+
+/** How drunk you could get: past this the bartender cut you off (the bar has no alcohol now: kept for reference). */
+const BOOZE_LIMIT = 1.6;
+interface Drink {
+  id: string;
+  strength: number;
+}
 
 /** A drink kicks in over about this long. */
 const KICK_IN = 4;
diff --git a/src/client/features/bar/drunk.ts b/src/client/features/bar/drunk.ts
index 0fb2d2119..c5a3cea6b 100644
--- a/src/client/features/bar/drunk.ts
+++ b/src/client/features/bar/drunk.ts
@@ -1,3 +1,4 @@
+// Retired: the rooftop is an alcohol-free café now, and nothing imports this any more.
 import * as THREE from 'three';
 
 /**
diff --git a/src/client/features/bar/index.ts b/src/client/features/bar/index.ts
index 79fa78c76..16d47c3c2 100644
--- a/src/client/features/bar/index.ts
+++ b/src/client/features/bar/index.ts
@@ -1,176 +1,110 @@
 /**
- * The rooftop bar: drinks from the bartender, how they go to your head (a glass in hand, hiccups, the
- * world swaying and the frame drawn through the drunk vision), and the DJ's air horn.
+ * The rooftop café: order a drink or a bite from the barista, who makes it and slides it over, and
+ * you hold it for a while (a cup, a glass or a plate in your hand, shown to everyone else too).
  */
-import { DRINK_BY_ID, type Drink, type DrinkId } from '../../../shared/rooftop';
-import { Booze, type Stage as Feeling } from './booze';
+import type { ItemId, MenuItem } from '../../../shared/rooftop';
 import type { Ctx } from '../../core/context';
 import { aside, hintTitle, key, onE } from '../../core/hint';
-import { djFrame } from '../../dnb';
-import { store } from '../../state';
-import { openBar } from './ui';
+import { openMenu } from './ui';
 import { toast } from '../../ui/dom';
-import { DrunkVision } from './drunk';
 import type { Rooftop } from '../rooftop/world';
 
 // The kinds of thing you can use that this defines (see InteractKinds in world/types.ts).
 declare module '../../world/types' {
   interface InteractKinds {
     bar: true;
-    dj: true;
   }
 }
 
 export interface BarDeps {
   /** The roof, once it's built (see features/rooftop). */
   roof(): Rooftop | null;
-  /** How far into the DJ's set it is (see features/rooftop). */
-  djAt(): number;
   /** Plays the reach on your hands and your character, and shows it to everyone else. */
   reach(): void;
 }
 
+/** You hold what you ordered for this long, sipping or nibbling, and then it's gone. */
+const HOLD_SECONDS = 60;
+
 export function installBar(ctx: Ctx, deps: BarDeps) {
-  /** Drinks from the bar, and how they make the world look (see booze.ts, drunk.ts). */
-  const booze = new Booze();
-  /** What they do to you (see player/effects.ts): how drunk you are, as drinking has it each frame. */
-  const tipsy = ctx.player.effects.add();
-  const drunkVision = new DrunkVision(ctx.renderer);
+  /** What's in your hand, and when you've finished it. */
+  let held: MenuItem | null = null;
+  let heldUntil = 0;
+  /** What everyone else was last told is in your hand. */
+  let shownItem: ItemId | null = null;
+  let nextSip = 0;
 
-  /** What the bartender says as they slide it over. */
-  const CHEERS: Record<string, string> = {
-    beer: 'Cheers! 🍻',
-    wine: 'Salud!',
-    martini: 'Shaken, not stirred',
-    maitai: 'Aloha!',
-    shot: 'Salt, shot, lime… whoa',
-    mojito: 'Fresh and minty',
-    water: 'Good call. Stay hydrated',
+  /** What the barista says as they slide it over. */
+  const SAYS: Partial<Record<ItemId, string>> = {
+    espresso: 'Short and strong',
+    cappuccino: 'Extra foam',
+    flatwhite: 'One flat white',
+    mintTea: 'Fresh and minty',
+    blackTea: 'Mind, it’s hot',
+    orangeJuice: 'Freshly squeezed',
+    lemonade: 'Nice and tart',
+    sparkling: 'With a slice of lime',
+    hotChocolate: 'Careful, it’s hot',
+    croissant: 'Still warm',
+    almondCroissant: 'Still warm',
+    painAuChocolat: 'Still warm',
+    toastie: 'Hot from the press',
+    avocadoToast: 'With chilli flakes',
+    fruitCup: 'Fresh this morning',
+    bagel: 'Toasted, with cream cheese',
+    falafelWrap: 'Hummus and crunchy salad',
   };
 
-  /** E at the bar: the menu. */
+  /** E at the counter: the menu. */
   function showBar() {
-    openBar({ cutOff: booze.cutOff(performance.now() / 1000), order: orderDrink });
+    openMenu({ order });
   }
 
-  /** The bartender comes over and pours it (a water, if you've had enough), and slides it across to you. */
-  function orderDrink(d: Drink) {
+  /** The barista makes it, and slides it across to you. */
+  function order(item: MenuItem) {
     const r = deps.roof();
     if (!r || !ctx.upTop()) return;
-    const cut = d.strength > 0 && booze.cutOff(performance.now() / 1000);
-    const drink = cut ? DRINK_BY_ID.get('water')! : d;
     r.serve(ctx.player.pos.z);
-    ctx.sound.pour(r.pourAt);
-    if (cut) toast("🙅 The bartender slides you a water instead: you've had enough", 'warn');
+    ctx.sound.serve(r.pourAt, item.kind === 'drink');
     setTimeout(() => {
       if (!ctx.upTop()) return;
-      booze.drink(drink, performance.now() / 1000);
+      held = item;
+      heldUntil = performance.now() / 1000 + HOLD_SECONDS;
       deps.reach();
       if (ctx.player.view === 'first') ctx.hands.sip();
-      if (!cut) toast(`${drink.emoji} ${drink.name}. ${CHEERS[drink.id] ?? 'Enjoy!'}`);
+      toast(`${item.emoji} ${item.name}. ${SAYS[item.id] ?? 'Enjoy!'}`);
     }, 1500);
   }
 
-  ctx.messages.on('horn', (msg) => {
-    if (!ctx.upTop()) return;
-    ctx.sound.horn();
-    if (msg.by !== store.profile.name) toast(`📯 ${msg.by} blew the air horn!`);
-  });
-  let lastHorn = 0;
-  /** E at the DJ booth: the air horn, for everyone on the roof. */
-  function blowHorn() {
-    const now = performance.now();
-    if (now - lastHorn < 1500) return;
-    lastHorn = now;
-    ctx.net.send({ t: 'horn' });
-  }
-
   ctx.interactions.define('bar', {
     reach: 3.5,
-    hint: () => {
-      const cut = booze.cutOff(performance.now() / 1000);
-      return { k: String(cut), parts: [hintTitle('🍸 Sky Bar'), aside(cut ? "you've had enough" : 'drinks on the house'), key('E', cut ? 'Ask for water' : 'Order a drink')] };
-    },
+    hint: () => ({ k: 'cafe', parts: [hintTitle('☕ Rooftop café'), aside('on the house'), key('E', 'See the menu')] }),
     use: onE(() => showBar()),
   });
-  ctx.interactions.define('dj', {
-    reach: 6,
-    hint: () => {
-      const f = djFrame(deps.djAt());
-      const what = f.part === 'drop' ? '🔥 the drop' : f.part === 'build' ? 'building up…' : f.part === 'breakdown' ? 'the breakdown' : 'mixing in the next track';
-      return { k: what, parts: [hintTitle('🎧 DJ Merge Conflict'), aside(`drum & bass · ${what}`), key('E', '📯 Air horn!')] };
-    },
-    use: onE(() => blowHorn()),
-  });
-
-  /** How it's going to your head, the last time it changed, and when the next hiccup comes. */
-  let feeling: Feeling = 0;
-  let nextHiccup = 0;
-  let nextSip = 0;
-  /** The drink in your hand everyone else was last told about. */
-  let shownDrink: DrinkId | null = null;
-  const FEELINGS = ['😌 You feel sober again', '🥴 You’re feeling a little tipsy', '🌀 Whoa… is the city spinning?', '🤪 You’re wasted. Maybe have some water'];
 
-  /** Every frame: how drunk you are, the glass in your hand, hiccups and the odd sip. */
-  function drinking(now: number) {
-    const secs = now / 1000;
-    const amount = booze.amount(secs);
-    const player = ctx.player;
-    const hands = ctx.hands;
-    tipsy.sway = ctx.reduceMotion.matches ? 0 : Math.min(1.3, amount);
-    const glass = booze.holding(secs);
-    ctx.me.holdDrink(glass);
-    hands.holdDrink(glass);
-    const id = glass?.id ?? null;
-    if (id !== shownDrink) {
-      shownDrink = id;
+  /** Every frame: what's in your hand, told to everyone else, and the odd sip. */
+  ctx.ticks.add('pre', ({ now }) => {
+    if (held && now / 1000 > heldUntil) held = null;
+    ctx.me.holdDrink(held);
+    ctx.hands.holdDrink(held);
+    const id = held?.id ?? null;
+    if (id !== shownItem) {
+      shownItem = id;
       ctx.net.send({ t: 'act', drink: id });
     }
-    if (glass && player.view === 'first' && now > nextSip) {
-      if (nextSip) hands.sip();
+    if (held && ctx.player.view === 'first' && now > nextSip) {
+      if (nextSip) ctx.hands.sip();
       nextSip = now + 9000 + Math.random() * 9000;
     }
-    const stage = booze.stage(secs);
-    if (stage !== feeling) {
-      if (stage > feeling || stage === 0) toast(FEELINGS[stage], stage >= 3 ? 'warn' : 'info');
-      feeling = stage;
-    }
-    if (amount > 0.5 && now > nextHiccup) {
-      if (nextHiccup) {
-        ctx.sound.hiccup();
-        ctx.shake(0.25);
-      }
-      nextHiccup = now + 5000 + Math.random() * 12000;
-    }
-    return amount;
-  }
-  /** How drunk you are this frame (see drinking), for the drunk vision the frame's drawn through. */
-  let drunkNow = 0;
-  ctx.ticks.add('pre', ({ now }) => {
-    // Drinks from the rooftop bar: a glass in hand, and the world swaying.
-    drunkNow = drinking(now);
-  });
-
-  /** Last frame went through the drunk vision. */
-  let drunkVisionOn = false;
-  ctx.view.add({
-    filter: {
-      // A few drinks in, the frame goes to the screen through the drunk vision (see drunk.ts).
-      begin: () => {
-        const blurry = drunkNow > 0.01;
-        if (blurry) drunkVision.begin();
-        else if (drunkVisionOn) drunkVision.release();
-        drunkVisionOn = blurry;
-        return blurry;
-      },
-      end: ({ t }) => drunkVision.end(drunkNow, t, !ctx.reduceMotion.matches),
-    },
   });
 
   return {
-    booze,
     showBar,
-    /** The drink in your hand, as everyone else was last told (see drinking). */
-    shownDrink: () => shownDrink,
+    /** Puts what's in your hand down (leaving the roof: it stays at the café). */
+    putDown() {
+      held = null;
+    },
+    /** What's in your hand, as everyone else was last told (see the tick above). */
+    shownItem: () => shownItem,
   };
 }
diff --git a/src/client/features/bar/sound.ts b/src/client/features/bar/sound.ts
index eea7e7574..1fd1614f4 100644
--- a/src/client/features/bar/sound.ts
+++ b/src/client/features/bar/sound.ts
@@ -1,126 +1,53 @@
-import { DJ_BOOTH } from '../../../shared/layout';
-import { DjPlayer } from '../../dnb';
 import type { AudioCore } from '../../sound/core';
-import { biquad, envelope, rand } from '../../sound/dsp';
+import { biquad, envelope } from '../../sound/dsp';
 import type { Pos } from '../../sound/places';
 
-// The rooftop bar: the DJ's set, the air horn, drinks poured, and one too many.
+// The rooftop café: a drink made and slid over the counter, or a plate set down.
 
-/** The DJ on the roof, through the speakers by the booth, at your music volume. */
-export class Dj {
-  private djIn!: PannerNode;
-  private dj: DjPlayer | null = null;
-  /** How far into the DJ's set it is (see djTime), while you're up there. */
-  private djClock: (() => number) | null = null;
-  private djTimer = 0;
-
-  constructor(private readonly a: AudioCore) {}
-
-  /** The speakers by the booth, into the jukebox's bus (see Jukebox.connect). */
-  connect(musicBus: GainNode) {
-    // Loud enough to hear from anywhere on the roof, and loudest on the dance floor.
-    this.djIn = this.a.panner({ x: DJ_BOOTH.x, y: 2.2, z: DJ_BOOTH.z }, 7, 0.8);
-    this.djIn.connect(musicBus);
-  }
-
-  /** The DJ's set on the roof, `clock` saying how far into it it is (see djTime); null stops it. */
-  setDj(clock: (() => number) | null) {
-    const was = !!this.djClock;
-    this.djClock = clock;
-    if (was !== !!clock) this.applyDj();
-  }
-
-  applyDj() {
-    const ctx = this.a.ctx;
-    if (!ctx) return;
-    if (!this.djClock) {
-      this.dj?.stop();
-      this.dj = null;
-      clearInterval(this.djTimer);
-      return;
-    }
-    if (this.dj) return;
-    const dj = (this.dj = new DjPlayer(ctx, this.djIn));
-    this.a.count('dj');
-    // On a timer rather than every frame, so it carries on in a background tab.
-    const tick = () => {
-      if (this.djClock) dj.tick(this.djClock());
-    };
-    tick();
-    this.djTimer = window.setInterval(tick, 150);
-  }
-
-  /** Someone at the DJ booth blew the air horn. */
-  horn() {
-    if (!this.dj) return;
-    this.dj.horn();
-    this.a.count('horn');
-  }
-
-}
-
-/** A drink poured at the bar: ice into the glass, a splash, and a clink. */
-export function pour(a: AudioCore, at: Pos) {
+/** The barista's machine: a burst of steam, then (for a drink) the pour and a clink of china; a plate is just set down. */
+export function serve(a: AudioCore, at: Pos, drink: boolean) {
   const ctx = a.ctx;
   if (!ctx) return;
-  a.count('pour');
+  a.count('serve');
   const out = a.panner(at, 1.2, 1);
   out.connect(a.ambience);
   const t0 = ctx.currentTime + 0.05;
-  // Ice cubes knocking in.
-  for (let i = 0; i < 3; i++) a.clink(out, t0 + i * rand(0.07, 0.12), rand(2200, 3200), 0.05);
-  // The pour: filtered noise that rises in pitch as the glass fills.
-  const pour = a.noise(a.buf.white);
-  const tone = biquad(ctx, 'bandpass', 700, 1.4);
-  tone.frequency.setValueAtTime(700, t0 + 0.35);
-  tone.frequency.linearRampToValueAtTime(1500, t0 + 1.15);
-  const g = ctx.createGain();
-  envelope(g.gain, t0 + 0.35, [
-    [0.06, 0.09],
-    [0.7, 0.08],
-    [0.85, 0],
-  ]);
-  const wobble = a.noise(a.buf.gurgle, true);
-  wobble.playbackRate.value = 4;
-  const amp = ctx.createGain();
-  amp.gain.value = 0.6;
-  wobble.connect(amp.gain);
-  pour.connect(tone).connect(amp).connect(g).connect(out);
-  pour.start(t0 + 0.35);
-  pour.stop(t0 + 1.3);
-  wobble.start(t0 + 0.35);
-  wobble.stop(t0 + 1.3);
-  // Slid across the bar to you.
-  a.clink(out, t0 + 1.45, 3900, 0.08);
-}
-
-/** Hic! One too many. */
-export function hiccup(a: AudioCore) {
-  const ctx = a.ctx;
-  if (!ctx) return;
-  a.count('hiccup');
-  const t0 = ctx.currentTime + 0.02;
-  const o = ctx.createOscillator();
-  o.type = 'sawtooth';
-  o.frequency.setValueAtTime(260, t0);
-  o.frequency.exponentialRampToValueAtTime(420, t0 + 0.06);
-  const g = ctx.createGain();
-  envelope(g.gain, t0, [
-    [0.008, 0.12],
-    [0.05, 0.08],
-    [0.11, 0],
-  ]);
-  o.connect(biquad(ctx, 'bandpass', 1100, 2.5)).connect(g).connect(a.ambience);
-  o.start(t0);
-  o.stop(t0 + 0.14);
-  // The catch in the throat, just before it.
-  const n = a.noise(a.buf.white);
-  const ng = ctx.createGain();
-  envelope(ng.gain, t0 - 0.015, [
-    [0.004, 0.08],
-    [0.02, 0],
-  ]);
-  n.connect(biquad(ctx, 'bandpass', 1800, 1)).connect(ng).connect(a.ambience);
-  n.start(t0 - 0.015);
-  n.stop(t0 + 0.02);
+  if (drink) {
+    // Steam from the wand: a soft hiss that rises and fades.
+    const hiss = a.noise(a.buf.white);
+    const tone = biquad(ctx, 'highpass', 3600, 0.7);
+    const hg = ctx.createGain();
+    envelope(hg.gain, t0, [
+      [0.25, 0.05],
+      [0.8, 0.04],
+      [1.0, 0],
+    ]);
+    hiss.connect(tone).connect(hg).connect(out);
+    hiss.start(t0);
+    hiss.stop(t0 + 1.1);
+    // Poured into the cup: filtered noise that rises in pitch as it fills.
+    const pour = a.noise(a.buf.white);
+    const band = biquad(ctx, 'bandpass', 700, 1.4);
+    band.frequency.setValueAtTime(700, t0 + 0.35);
+    band.frequency.linearRampToValueAtTime(1500, t0 + 1.15);
+    const g = ctx.createGain();
+    envelope(g.gain, t0 + 0.35, [
+      [0.06, 0.07],
+      [0.7, 0.06],
+      [0.85, 0],
+    ]);
+    const wobble = a.noise(a.buf.gurgle, true);
+    wobble.playbackRate.value = 4;
+    const amp = ctx.createGain();
+    amp.gain.value = 0.6;
+    wobble.connect(amp.gain);
+    pour.connect(band).connect(amp).connect(g).connect(out);
+    pour.start(t0 + 0.35);
+    pour.stop(t0 + 1.3);
+    wobble.start(t0 + 0.35);
+    wobble.stop(t0 + 1.3);
+  }
+  // Slid across the counter to you: china on wood.
+  a.clink(out, t0 + 1.45, drink ? 3100 : 2200, 0.07);
+  if (!drink) a.clink(out, t0 + 1.52, 1800, 0.04);
 }
diff --git a/src/client/features/bar/ui.ts b/src/client/features/bar/ui.ts
index 3cdd3ada9..90283585d 100644
--- a/src/client/features/bar/ui.ts
+++ b/src/client/features/bar/ui.ts
@@ -1,67 +1,48 @@
-import { DRINKS, type Drink } from '../../../shared/rooftop';
+import { DRINKS, FOODS, type MenuItem } from '../../../shared/rooftop';
 import { h, openModal } from '../../ui/dom';
 
-export interface BarOptions {
-  /** Had enough: nothing stronger than water or a mocktail. */
-  cutOff: boolean;
-  order(d: Drink): void;
+export interface MenuOptions {
+  order(item: MenuItem): void;
 }
 
-/** How hard a drink hits, for the menu. */
-function kick(d: Drink): string {
-  if (d.strength < 0) return '💧 sobers you up a little';
-  if (d.strength === 0) return 'no alcohol';
-  return d.strength >= 0.55 ? '🌀🌀🌀 strong' : d.strength >= 0.4 ? '🌀🌀 goes to your head' : '🌀 light';
-}
-
-/** The rooftop bar's menu: pick a drink and the bartender pours it. */
-export function openBar(opts: BarOptions) {
+/** The rooftop café's menu: pick a drink or a bite and the barista makes it. */
+export function openMenu(opts: MenuOptions) {
   const close = h('button.btn.close', { 'aria-label': 'Close' }, '✕');
-  const list = h(
-    'ul.svc-list',
-    {},
-    ...DRINKS.map((d) => {
-      const refused = opts.cutOff && d.strength > 0;
-      const li = h(
-        'li',
-        {
-          tabindex: refused ? -1 : 0,
-          role: 'button',
-          'aria-disabled': String(refused),
-          title: refused ? "The bartender won't pour you another" : `Order a ${d.name.toLowerCase()}`,
-          style: refused ? 'opacity:.45;cursor:not-allowed' : '',
-        },
-        h('span.jb-icon', { style: 'font-size:26px' }, d.emoji),
-        h('div.svc-main', {}, h('div.svc-title', {}, d.name), h('div.svc-meta', {}, `${d.blurb} · ${kick(d)}`)),
-      );
-      const pick = () => {
-        if (refused) return;
-        modal.close();
-        opts.order(d);
-      };
-      li.addEventListener('click', pick);
-      li.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          pick();
-        }
-      });
-      return li;
-    }),
-  );
-  const el = h(
-    'div.modal.jukebox',
-    { role: 'dialog', 'aria-label': 'Bar' },
-    h('header', {}, h('h2', {}, '🍸 Sky Bar'), close),
+  const section = (title: string, items: readonly MenuItem[]) => [
+    h('h3', { style: 'margin:14px 0 6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.7' }, title),
     h(
-      'div.body',
+      'ul.svc-list',
       {},
-      opts.cutOff ? h('p.setting-note', { style: 'margin:0 0 12px;font-weight:800' }, "🙅 The bartender thinks you've had enough. Water's on the house.") : null,
-      list,
+      ...items.map((item) => {
+        const li = h(
+          'li',
+          { tabindex: 0, role: 'button', title: `Order ${item.name.toLowerCase()}` },
+          h('span.jb-icon', { style: 'font-size:26px' }, item.emoji),
+          h('div.svc-main', {}, h('div.svc-title', {}, item.name), h('div.svc-meta', {}, item.blurb)),
+        );
+        const pick = () => {
+          modal.close();
+          opts.order(item);
+        };
+        li.addEventListener('click', pick);
+        li.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            pick();
+          }
+        });
+        return li;
+      }),
     ),
-    h('footer', {}, h('span.grow', {}, 'Drinks go to your head for a minute or so, and the view goes with them. Everything is on the house.')),
+  ];
+  const el = h(
+    'div.modal.jukebox',
+    { role: 'dialog', 'aria-label': 'Café menu' },
+    h('header', {}, h('h2', {}, '☕ Rooftop café'), close),
+    h('div.body', {}, ...section('Drinks', DRINKS), ...section('Food', FOODS)),
+    h('footer', {}, h('span.grow', {}, 'Everything is on the house, and all of it is alcohol-free and pork-free.')),
   );
   const modal = openModal(el);
   close.addEventListener('click', () => modal.close());
-  setTimeout(() => (list.querySelector('li[tabindex="0"]') as HTMLElement | null)?.focus(), 30);
+  setTimeout(() => (el.querySelector('li[tabindex="0"]') as HTMLElement | null)?.focus(), 30);
 }
diff --git a/src/client/features/bargames/world.ts b/src/client/features/bargames/world.ts
index e735d146b..3b4cd8104 100644
--- a/src/client/features/bargames/world.ts
+++ b/src/client/features/bargames/world.ts
@@ -28,8 +28,8 @@ const INK = '#2b2d42';
 const CHALK = '#f1f1ea';
 
 /** A toon material with a picture on it, banded like everything else. */
-function toonMap(map: THREE.Texture): THREE.MeshToonMaterial {
-  const m = new THREE.MeshToonMaterial({ map, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+function toonMap(map: THREE.Texture): THREE.MeshStandardMaterial {
+  const m = new THREE.MeshStandardMaterial({ map });
   m.userData.outlineParameters = { visible: false };
   return m;
 }
@@ -157,8 +157,8 @@ function axeTargetTexture(): THREE.CanvasTexture {
 }
 
 /** A toon material of its own, left out of the outlines (they'd swamp something as thin as a dart). */
-function plain(color: string, side: THREE.Side = THREE.FrontSide): THREE.MeshToonMaterial {
-  const m = new THREE.MeshToonMaterial({ color, side, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+function plain(color: string, side: THREE.Side = THREE.FrontSide): THREE.MeshStandardMaterial {
+  const m = new THREE.MeshStandardMaterial({ color, side });
   m.userData.outlineParameters = { visible: false };
   return m;
 }
diff --git a/src/client/features/basketball/world.ts b/src/client/features/basketball/world.ts
index e9438d908..bbbd0b3d3 100644
--- a/src/client/features/basketball/world.ts
+++ b/src/client/features/basketball/world.ts
@@ -182,7 +182,7 @@ function texture(): THREE.CanvasTexture {
 
 /** A basketball, `r` meters round (its own size unless given): in the room, or in your hands. */
 export function ballMesh(r: number = BALL.r): THREE.Mesh {
-  const mat = new THREE.MeshToonMaterial({ map: texture(), gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+  const mat = new THREE.MeshStandardMaterial({ map: texture() });
   const m = mesh(new THREE.SphereGeometry(r, 20, 14), mat);
   m.rotation.z = 0.4;
   return m;
diff --git a/src/client/features/bookshelf/book.ts b/src/client/features/bookshelf/book.ts
index b6bf62553..a1a4a45d9 100644
--- a/src/client/features/bookshelf/book.ts
+++ b/src/client/features/bookshelf/book.ts
@@ -18,10 +18,10 @@ const STRIPS = 8;
 
 const COVERS = ['#b5413b', '#2a6f97', '#2d6a4f', '#6a4c93', '#bc6c25', '#264653'];
 
-let pages: { print: THREE.MeshToonMaterial; leaf: THREE.MeshToonMaterial } | null = null;
+let pages: { print: THREE.MeshStandardMaterial; leaf: THREE.MeshStandardMaterial } | null = null;
 
 /** Printed pages: a heading, then rows of words in grey lines, drawn once and shared by every book. */
-function pageMaterials(): { print: THREE.MeshToonMaterial; leaf: THREE.MeshToonMaterial } {
+function pageMaterials(): { print: THREE.MeshStandardMaterial; leaf: THREE.MeshStandardMaterial } {
   if (pages) return pages;
   const W = 128;
   const H = 172;
diff --git a/src/client/features/carrying/card.ts b/src/client/features/carrying/card.ts
index f05027c0f..9b35c35d1 100644
--- a/src/client/features/carrying/card.ts
+++ b/src/client/features/carrying/card.ts
@@ -62,7 +62,7 @@ export class HeldCard {
     if (this.mesh) {
       this.parent.remove(this.mesh);
       this.mesh.geometry.dispose();
-      const face = (this.mesh.material as THREE.MeshToonMaterial[])[4];
+      const face = (this.mesh.material as THREE.MeshStandardMaterial[])[4];
       face.map?.dispose();
       face.dispose();
       this.mesh = null;
diff --git a/src/client/features/chess/board.ts b/src/client/features/chess/board.ts
new file mode 100644
index 000000000..48dce4405
--- /dev/null
+++ b/src/client/features/chess/board.ts
@@ -0,0 +1,455 @@
+import * as THREE from 'three';
+import { fileOf, parseFen, rankOf, squareAt } from '../../../shared/chess';
+import type { ChessTable } from '../../../shared/protocol';
+import { canvasTexture } from '../../world/texture';
+import { PIECE_SQUARE, makePiece, pieceKind, woodMaterials } from './pieces';
+
+// One table's board and men: the board inlaid in the table's top, the pieces standing on it (sliding
+// from square to square as moves come in), the glows that show what you can do, the men taken laid out
+// along the table's edges, and the little flag and coin to resign or start again. Local space: the
+// table's middle at the origin, White's side toward +z, so files run along +x and ranks away from White along -z.
+
+/** A square's side, in meters, and the whole board's. */
+export const SQUARE = 0.085;
+export const BOARD = SQUARE * 8;
+/** The inlaid border round the squares. */
+const BORDER = SQUARE / 4;
+export const TABLE_SIZE = 1.0;
+/** How high the table's top is, and so the board. */
+export const TABLE_H = 0.75;
+const TOP = TABLE_H + 0.0008;
+/** The men are drawn for a smaller board (see pieces.ts). */
+const SCALE = SQUARE / PIECE_SQUARE;
+const TAKEN_SCALE = 0.62;
+
+/** Where a square's middle is, on the table. */
+export function squarePos(sq: number): { x: number; z: number } {
+  return { x: (fileOf(sq) - 3.5) * SQUARE, z: (3.5 - rankOf(sq)) * SQUARE };
+}
+
+/** The square a point on the table (its local x, z) is over, or -1 off the squares. */
+export function squareAtPoint(x: number, z: number): number {
+  const file = Math.floor(x / SQUARE + 4);
+  const rank = Math.floor(4 - z / SQUARE);
+  return file < 0 || file > 7 || rank < 0 || rank > 7 ? -1 : squareAt(file, rank);
+}
+
+/** The board's top, drawn: light and dark squares of wood, a border with an inlaid line, the files and ranks lettered. */
+function boardTexture(): THREE.CanvasTexture {
+  const sq = 128;
+  const b = sq / 4;
+  const size = sq * 8 + b * 2;
+  return canvasTexture(size, size, (g) => {
+    g.fillStyle = '#4a2c19';
+    g.fillRect(0, 0, size, size);
+    g.strokeStyle = '#d9b97c';
+    g.lineWidth = 2;
+    g.strokeRect(b * 0.42, b * 0.42, size - b * 0.84, size - b * 0.84);
+    g.fillStyle = '#d9b97c';
+    g.font = `700 ${b * 0.5}px Nunito, ui-rounded, system-ui, sans-serif`;
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    for (let i = 0; i < 8; i++) {
+      g.fillText('abcdefgh'[i], b + sq * (i + 0.5), size - b * 0.5);
+      g.fillText(String(8 - i), b * 0.5, b + sq * (i + 0.5));
+    }
+    for (let r = 0; r < 8; r++) {
+      for (let f = 0; f < 8; f++) {
+        // a1 is dark: the top row is rank 8, so a8 (row 0, column 0) is light.
+        const light = (r + f) % 2 === 0;
+        const x = b + f * sq;
+        const y = b + r * sq;
+        g.fillStyle = light ? '#e8d3a6' : '#7c5233';
+        g.fillRect(x, y, sq, sq);
+        g.strokeStyle = light ? 'rgba(150,105,55,0.22)' : 'rgba(30,15,5,0.3)';
+        for (let k = 0; k < 7; k++) {
+          const gx = x + ((k * 41 + r * 13 + f * 29) % sq);
+          g.lineWidth = 0.7 + (k % 3) * 0.5;
+          g.beginPath();
+          g.moveTo(gx, y);
+          g.bezierCurveTo(gx + 4, y + sq * 0.35, gx - 5, y + sq * 0.65, gx + 2, y + sq);
+          g.stroke();
+        }
+      }
+    }
+  });
+}
+
+// ---- The glows ----------------------------------------------------------------------------------------
+
+/** What a glow on a square says. */
+export type MarkKind = 'last' | 'check' | 'hover' | 'select' | 'move' | 'take';
+
+function glowTexture(draw: (g: CanvasRenderingContext2D, s: number) => void): THREE.CanvasTexture {
+  return canvasTexture(128, 128, (g) => draw(g, 128));
+}
+
+let marks: Record<MarkKind, THREE.MeshBasicMaterial> | null = null;
+/** The glows' materials, made once: unlit, so they glow whatever the light. */
+function markMaterials() {
+  if (marks) return marks;
+  const radial = (c0: string, c1: string, stop: number) =>
+    glowTexture((g, s) => {
+      const grad = g.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);
+      grad.addColorStop(0, c0);
+      grad.addColorStop(stop, c0);
+      grad.addColorStop(Math.min(1, stop + 0.35), c1);
+      grad.addColorStop(1, c1);
+      g.fillStyle = grad;
+      g.fillRect(0, 0, s, s);
+    });
+  const frame = (color: string, width: number, fill: string) =>
+    glowTexture((g, s) => {
+      g.fillStyle = fill;
+      g.fillRect(0, 0, s, s);
+      g.strokeStyle = color;
+      g.lineWidth = width;
+      g.shadowColor = color;
+      g.shadowBlur = 14;
+      g.strokeRect(width, width, s - width * 2, s - width * 2);
+    });
+  const mat = (map: THREE.Texture | null, color = '#ffffff', opacity = 1) => {
+    const m = new THREE.MeshBasicMaterial({ map, color, transparent: true, opacity, depthWrite: false, polygonOffset: true, polygonOffsetFactor: -2, polygonOffsetUnits: -2 });
+    m.toneMapped = false;
+    m.userData.outlineParameters = { visible: false };
+    return m;
+  };
+  marks = {
+    last: mat(null, '#f2d45c', 0.38),
+    check: mat(radial('rgba(255,50,40,0.95)', 'rgba(255,50,40,0)', 0.1)),
+    hover: mat(frame('#ffffff', 7, 'rgba(255,255,255,0.14)')),
+    select: mat(frame('#ffd23f', 10, 'rgba(255,210,63,0.34)')),
+    move: mat(radial('rgba(72,255,140,0.95)', 'rgba(72,255,140,0)', 0.2)),
+    take: mat(
+      glowTexture((g, s) => {
+        g.strokeStyle = 'rgba(72,255,140,0.95)';
+        g.lineWidth = 11;
+        g.shadowColor = '#48ff8c';
+        g.shadowBlur = 14;
+        g.beginPath();
+        g.arc(s / 2, s / 2, s * 0.38, 0, Math.PI * 2);
+        g.stroke();
+      }),
+    ),
+  };
+  return marks;
+}
+const MARK_Y: Record<MarkKind, number> = { last: 0.0002, check: 0.0006, hover: 0.001, select: 0.0014, move: 0.0018, take: 0.0018 };
+
+/** What's lit up on the board. */
+export interface Marks {
+  /** The squares the last move went from and to. */
+  last?: readonly number[];
+  /** The king in check. */
+  check?: number;
+  /** The square under your aim, if it's yours to move. */
+  hover?: number;
+  selected?: number;
+  /** Where the selected piece may go: onto an empty square, or taking. */
+  moves?: readonly number[];
+  takes?: readonly number[];
+}
+
+// ---- The men -------------------------------------------------------------------------------------------
+
+interface Man {
+  letter: string;
+  group: THREE.Group;
+  sq: number;
+  /** Sliding from one square to another. */
+  slide?: { fx: number; fz: number; t: number; dur: number; hop: number };
+  /** Done sliding: what's still to happen (the man it took going off the board, a pawn turning into a queen). */
+  arrive?: () => void;
+  /** How far it's lifted off the board, for the one under your aim. */
+  lift: number;
+}
+
+const VALUE = 'qrbnp';
+export type Act = 'resign' | 'new';
+
+/** What a click on the table landed on. */
+export interface Picked {
+  sq?: number;
+  act?: Act;
+}
+
+export class ChessTableView {
+  readonly group = new THREE.Group();
+  /** The board's inlaid top: its square is what clicks aim at. */
+  readonly top: THREE.Mesh;
+  private readonly mats = woodMaterials();
+  private readonly men = new Map<number, Man>();
+  private readonly pieces = new THREE.Group();
+  private readonly takenGroup = new THREE.Group();
+  private readonly glow: THREE.Mesh[] = [];
+  private glowUsed = 0;
+  private lifted = -1;
+  private tokens: Record<Act, THREE.Group[]>;
+  private tokenLit: Act | null = null;
+  private shownFen = '';
+  private shownMoves = -1;
+  private shownTaken = '';
+
+  constructor(readonly n: number) {
+    const mat = new THREE.MeshStandardMaterial({ map: boardTexture(), roughness: 0.42, metalness: 0 });
+    this.top = new THREE.Mesh(new THREE.PlaneGeometry(BOARD + BORDER * 2, BOARD + BORDER * 2).rotateX(-Math.PI / 2), mat);
+    this.top.position.y = TOP;
+    this.top.receiveShadow = true;
+    this.group.add(this.top, this.pieces, this.takenGroup);
+    this.tokens = { resign: [flag(1), flag(-1)], new: [coin(1), coin(-1)] };
+    for (const t of [...this.tokens.resign, ...this.tokens.new]) {
+      t.visible = false;
+      this.group.add(t);
+    }
+  }
+
+  /** The things a click can land on: the board, the men, the flag and the coin. */
+  pickable(): THREE.Object3D[] {
+    return [this.top, this.pieces, ...this.tokens.resign, ...this.tokens.new];
+  }
+
+  /** What the ray lands on: a square (over the board, or on a man standing on it), or one of the tokens. */
+  pick(ray: THREE.Raycaster): Picked | null {
+    for (const hit of ray.intersectObjects(this.pickable(), true)) {
+      // (A ray doesn't skip what's hidden: the flag and the coin, when they're not out.)
+      let shown = true;
+      for (let o: THREE.Object3D | null = hit.object; o; o = o.parent) if (!o.visible) shown = false;
+      if (!shown) continue;
+      if (hit.object === this.top) {
+        const p = this.group.worldToLocal(hit.point.clone());
+        const sq = squareAtPoint(p.x, p.z);
+        return sq < 0 ? null : { sq };
+      }
+      for (let o: THREE.Object3D | null = hit.object; o && o !== this.group; o = o.parent) {
+        if (typeof o.userData.chessSq === 'number') return { sq: o.userData.chessSq };
+        if (o.userData.chessAct) return { act: o.userData.chessAct as Act };
+      }
+    }
+    return null;
+  }
+
+  /** The table's game as it is now. A move on from what's shown slides; anything else is just set up. */
+  show(t: ChessTable) {
+    const state = parseFen(t.fen);
+    if (!state) return;
+    const board = state.board;
+    const oneMore = t.moves === this.shownMoves + 1 && !!t.last && this.shownFen !== '';
+    if (oneMore) this.slide(t.last![0], t.last![1], board);
+    // Everything else comes to stand where the position says.
+    for (let sq = 0; sq < 64; sq++) {
+      const letter = board[sq];
+      const man = this.men.get(sq);
+      if (man && man.letter === letter) continue;
+      if (man && letter && man.slide) {
+        // A pawn on its way to the last rank: it turns into what it's becoming on arrival.
+        const arrive = man.arrive;
+        man.arrive = () => {
+          arrive?.();
+          this.replace(man, letter);
+        };
+      } else {
+        if (man) this.remove(man);
+        if (letter) this.put(letter, sq);
+      }
+    }
+    this.shownFen = t.fen;
+    this.shownMoves = t.moves;
+    if (t.taken !== this.shownTaken) this.layOutTaken(t.taken);
+    this.shownTaken = t.taken;
+    const playing = t.moves > 0 && !t.end;
+    for (const f of this.tokens.resign) f.visible = playing;
+    for (const c of this.tokens.new) c.visible = !!t.end || (t.moves > 0 && !(t.w && t.b));
+  }
+
+  /** The man on `from` slides to `to` (taking what's there, castling, or taking en passant on the way). */
+  private slide(from: number, to: number, after: readonly string[]) {
+    const man = this.men.get(from);
+    if (!man || after[from]) return;
+    const prey: Man[] = [];
+    const there = this.men.get(to);
+    if (there) prey.push(there);
+    else if (pieceKind(man.letter) === 'p' && fileOf(from) !== fileOf(to)) {
+      const passed = this.men.get(squareAt(fileOf(to), rankOf(from)));
+      if (passed) prey.push(passed);
+    }
+    this.men.delete(from);
+    for (const p of prey) this.men.delete(p.sq);
+    this.start(man, to, pieceKind(man.letter) === 'n' ? 0.05 : 0.014, () => prey.forEach((p) => this.remove(p, true)));
+    if (pieceKind(man.letter) === 'k' && Math.abs(to - from) === 2) {
+      const row = rankOf(from) * 8;
+      const rook = this.men.get(row + (to > from ? 7 : 0));
+      if (rook) {
+        this.men.delete(rook.sq);
+        this.start(rook, row + (to > from ? 5 : 3), 0.014);
+      }
+    }
+  }
+
+  private start(man: Man, to: number, hop: number, arrive?: () => void) {
+    const here = this.at(man);
+    const goes = squarePos(to);
+    this.men.set(to, man);
+    man.sq = to;
+    man.group.userData.chessSq = to;
+    const dist = Math.hypot(goes.x - here.x, goes.z - here.z);
+    man.slide = { fx: here.x, fz: here.z, t: 0, dur: THREE.MathUtils.clamp(0.2 + dist * 0.7, 0.25, 0.6), hop };
+    man.arrive = arrive;
+  }
+
+  /** Where a man is on the table now. */
+  private at(man: Man): { x: number; z: number } {
+    return { x: man.group.position.x, z: man.group.position.z };
+  }
+
+  private put(letter: string, sq: number) {
+    const group = makePiece(letter, this.mats);
+    group.scale.setScalar(SCALE);
+    // A knight looks across the board.
+    if (pieceKind(letter) === 'n') group.rotation.y = letter === letter.toUpperCase() ? Math.PI / 2 : -Math.PI / 2;
+    const p = squarePos(sq);
+    group.position.set(p.x, TOP, p.z);
+    group.userData.chessSq = sq;
+    this.pieces.add(group);
+    this.men.set(sq, { letter, group, sq, lift: 0 });
+  }
+
+  private remove(man: Man, taken = false) {
+    this.pieces.remove(man.group);
+    if (!taken && this.men.get(man.sq) === man) this.men.delete(man.sq);
+  }
+
+  /** A man is something else now (a pawn made a queen). */
+  private replace(man: Man, letter: string) {
+    if (this.men.get(man.sq) !== man) return;
+    this.pieces.remove(man.group);
+    this.put(letter, man.sq);
+  }
+
+  /** The men taken, along the table's edges: White's on the west, Black's on the east, the big ones first. */
+  private layOutTaken(taken: string) {
+    this.takenGroup.clear();
+    const order = (l: string) => VALUE.indexOf(l.toLowerCase());
+    for (const white of [true, false]) {
+      const mine = [...taken].filter((l) => (l === l.toUpperCase()) === white).sort((a, b) => order(a) - order(b));
+      mine.forEach((letter, i) => {
+        const g = makePiece(letter, this.mats);
+        g.scale.setScalar(SCALE * TAKEN_SCALE);
+        if (pieceKind(letter) === 'n') g.rotation.y = white ? Math.PI / 2 : -Math.PI / 2;
+        const side = white ? -1 : 1;
+        g.position.set(side * (BOARD / 2 + BORDER + 0.045 + (i % 2) * 0.04), TOP, 0.3 - Math.floor(i / 2) * 0.04);
+        this.takenGroup.add(g);
+      });
+    }
+  }
+
+  // ---- What's lit ----------------------------------------------------------------------------------------
+
+  /** The glows on the board, from scratch. */
+  setMarks(m: Marks) {
+    this.glowUsed = 0;
+    const mats = markMaterials();
+    const lay = (kind: MarkKind, sq: number | undefined) => {
+      if (sq === undefined || sq < 0) return;
+      let g = this.glow[this.glowUsed];
+      if (!g) {
+        g = new THREE.Mesh(GLOW_GEO, mats.last);
+        g.renderOrder = 2;
+        this.glow.push(g);
+        this.group.add(g);
+      }
+      this.glowUsed++;
+      const p = squarePos(sq);
+      g.material = mats[kind];
+      g.position.set(p.x, TOP + MARK_Y[kind], p.z);
+      g.visible = true;
+    };
+    for (const sq of m.last ?? []) lay('last', sq);
+    lay('check', m.check);
+    for (const sq of m.moves ?? []) lay('move', sq);
+    for (const sq of m.takes ?? []) lay('take', sq);
+    lay('hover', m.hover);
+    lay('select', m.selected);
+    for (let i = this.glowUsed; i < this.glow.length; i++) this.glow[i].visible = false;
+    // The man under your aim lifts a little off the board.
+    this.lifted = m.hover ?? -1;
+  }
+
+  /** The flag or the coin under your aim (or none). */
+  lightToken(act: Act | null) {
+    if (act === this.tokenLit) return;
+    this.tokenLit = act;
+    for (const a of ['resign', 'new'] as const) for (const t of this.tokens[a]) t.scale.setScalar(a === act ? 1.25 : 1);
+  }
+
+  /** Slides the men and settles the lifted one. */
+  update(dt: number) {
+    for (const man of this.men.values()) {
+      const target = man.sq === this.lifted && !man.slide ? 0.008 : 0;
+      man.lift += (target - man.lift) * Math.min(1, dt * 14);
+      const p = squarePos(man.sq);
+      const s = man.slide;
+      if (!s) {
+        man.group.position.set(p.x, TOP + man.lift, p.z);
+        continue;
+      }
+      s.t = Math.min(1, s.t + dt / s.dur);
+      const e = s.t * s.t * (3 - 2 * s.t);
+      man.group.position.set(s.fx + (p.x - s.fx) * e, TOP + Math.sin(Math.PI * s.t) * s.hop, s.fz + (p.z - s.fz) * e);
+      if (s.t >= 1) {
+        man.slide = undefined;
+        const done = man.arrive;
+        man.arrive = undefined;
+        done?.();
+      }
+    }
+  }
+}
+
+const GLOW_GEO = new THREE.PlaneGeometry(SQUARE, SQUARE).rotateX(-Math.PI / 2);
+
+// ---- The flag and the coin ---------------------------------------------------------------------------------
+
+const wood = () => new THREE.MeshStandardMaterial({ color: '#6b4328', roughness: 0.4 });
+
+/** A little white flag on a stand: click it to resign. `side` is 1 on White's edge of the table, -1 on Black's. */
+function flag(side: number): THREE.Group {
+  const g = new THREE.Group();
+  const w = wood();
+  g.add(new THREE.Mesh(new THREE.CylinderGeometry(0.017, 0.019, 0.006, 20), w).translateY(0.003));
+  g.add(new THREE.Mesh(new THREE.CylinderGeometry(0.0022, 0.0022, 0.07, 8), w).translateY(0.04));
+  const cloth = new THREE.Mesh(new THREE.BoxGeometry(0.036, 0.024, 0.0016), new THREE.MeshStandardMaterial({ color: '#f6f1e7', roughness: 0.8 }));
+  cloth.position.set(0.019, 0.063, 0);
+  g.add(cloth);
+  for (const m of g.children) m.castShadow = true;
+  g.position.set(side * 0.22, TOP, side * (BOARD / 2 + BORDER + 0.07));
+  g.rotation.y = side > 0 ? 0 : Math.PI;
+  g.userData.chessAct = 'resign';
+  return g;
+}
+
+/** A gold coin with a circling arrow on it: click it to set the pieces up again. */
+function coin(side: number): THREE.Group {
+  const g = new THREE.Group();
+  const gold = new THREE.MeshStandardMaterial({ color: '#d9a441', roughness: 0.35, metalness: 0.6 });
+  const face = new THREE.MeshStandardMaterial({
+    roughness: 0.35,
+    metalness: 0.4,
+    map: canvasTexture(128, 128, (c) => {
+      c.fillStyle = '#d9a441';
+      c.fillRect(0, 0, 128, 128);
+      c.fillStyle = '#5a3a0c';
+      c.font = '700 84px system-ui, sans-serif';
+      c.textAlign = 'center';
+      c.textBaseline = 'middle';
+      c.fillText('↻', 64, 68);
+    }),
+  });
+  const disc = new THREE.Mesh(new THREE.CylinderGeometry(0.024, 0.024, 0.007, 28), [gold, face, gold]);
+  disc.position.y = 0.0035;
+  disc.castShadow = true;
+  g.add(disc);
+  g.position.set(side * -0.22, TOP, side * (BOARD / 2 + BORDER + 0.07));
+  g.rotation.y = side > 0 ? 0 : Math.PI;
+  g.userData.chessAct = 'new';
+  return g;
+}
diff --git a/src/client/features/chess/controller.ts b/src/client/features/chess/controller.ts
new file mode 100644
index 000000000..a0d8453a6
--- /dev/null
+++ b/src/client/features/chess/controller.ts
@@ -0,0 +1,228 @@
+import * as THREE from 'three';
+import { inCheck, kingSquare, legalMoves, parseFen, squareName, type ChessState, type Color } from '../../../shared/chess';
+import { chessSeatOf } from '../../../shared/chess-seats';
+import type { ChessTable } from '../../../shared/protocol';
+import type { Ctx } from '../../core/context';
+import { $, h, toast } from '../../ui/dom';
+import type { ChessTableView, Marks, Picked } from './board';
+import { chessCorner } from './world';
+
+// Playing chess at one of the roof's tables (see world.ts, and server/chess.ts for the game itself):
+// sitting in a chair is taking that side, and while you do, looking at your own pieces lights them, a
+// click on one picks it up (its legal squares glow), and a click on a glowing square moves it. The table's
+// flag resigns (click it twice) and its coin sets the pieces up again. The server judges every move; the
+// page only shows where one may go.
+
+/** How the game stands, in a few words, for the hint and the line at the top of the screen. */
+export function statusOf(t: ChessTable | undefined, side: Color | null): string {
+  if (!t) return 'waiting for the game';
+  const names = { w: t.w?.name ?? 'nobody', b: t.b?.name ?? 'nobody' };
+  const mine = (c: Color) => (c === side ? 'you' : names[c]);
+  if (t.end) {
+    const e = t.end;
+    if (e.kind === 'checkmate' || e.kind === 'resign') {
+      const win = e.winner!;
+      const how = e.kind === 'checkmate' ? 'Checkmate' : `${e.winner === 'w' ? 'Black' : 'White'} resigned`;
+      return `${how} — ${win === side ? 'you win!' : `${mine(win)} wins`}`;
+    }
+    return e.kind === 'stalemate' ? 'Stalemate — a draw' : e.kind === 'insufficient' ? 'Draw — neither side can mate' : 'Draw — fifty moves without a capture or a pawn move';
+  }
+  if (!t.w || !t.b) return `${t.w ? 'White' : 'Black'} is waiting for an opponent`;
+  const state = parseFen(t.fen);
+  const turn = state?.turn ?? 'w';
+  const check = state && inCheck(state) ? ' (check!)' : '';
+  if (!t.moves && side === null) return `${names.w} (White) vs ${names.b} (Black) — White to move`;
+  return turn === side ? `your move${check}` : `${turn === 'w' ? 'White' : 'Black'} (${names[turn]}) to move${check}`;
+}
+
+export class ChessController {
+  /** Each table's game, as the server last said (by table number). */
+  readonly tables = new Map<number, ChessTable>();
+  /** The chair you're in, as the server knows it (what you last told it). */
+  private joined: { table: number; side: Color } | null = null;
+  private selected = -1;
+  /** Which version of each table its board shows (see tick). */
+  private shown = new Map<number, ChessTable>();
+  private markKey = new Map<number, string>();
+  private armedAt = 0;
+  private ndc: THREE.Vector2 | null = null;
+  private readonly ray = new THREE.Raycaster();
+  private readonly lineEl = h('div.chess-line');
+  private readonly tipEl = h('div.chess-tip');
+  private readonly hud = h('div.chess-hud.panel.hidden', { id: 'chess', 'aria-label': 'Chess' }, this.lineEl, this.tipEl);
+  private parsed = { fen: '', state: null as ChessState | null };
+
+  constructor(private readonly ctx: Ctx) {
+    $('hud').append(this.hud);
+    ctx.canvas.addEventListener('pointermove', (e) => {
+      const r = ctx.canvas.getBoundingClientRect();
+      (this.ndc ??= new THREE.Vector2()).set(((e.clientX - r.left) / r.width) * 2 - 1, -((e.clientY - r.top) / r.height) * 2 + 1);
+    });
+    ctx.canvas.addEventListener('pointerleave', () => (this.ndc = null));
+  }
+
+  /** Which side of which table you're sitting at, if you are. */
+  get seat(): { table: number; side: Color } | null {
+    return this.joined;
+  }
+
+  /** A table's game, from the server. */
+  apply(t: ChessTable) {
+    const before = this.tables.get(t.n);
+    this.tables.set(t.n, t);
+    if (this.joined?.table !== t.n) return;
+    if (before && (before.moves !== t.moves || before.end !== t.end || !before.w !== !t.w || !before.b !== !t.b)) this.selected = -1;
+    if (!before?.end && t.end) toast(`♟ ${statusOf(t, this.joined.side)}`);
+    this.ctx.hint.invalidate();
+  }
+
+  private state(t: ChessTable): ChessState | null {
+    if (this.parsed.fen !== t.fen) this.parsed = { fen: t.fen, state: parseFen(t.fen) };
+    return this.parsed.state;
+  }
+
+  /** The ray through the crosshair (first person) or the mouse (third). */
+  private aim(): THREE.Raycaster | null {
+    const ndc = this.ctx.player.view === 'first' ? CENTER : this.ndc;
+    if (!ndc) return null;
+    this.ray.setFromCamera(ndc, this.ctx.camera);
+    return this.ray;
+  }
+
+  /** E or a click at the table you're at: pick up a piece, put it down, resign, or set up again. */
+  click() {
+    const my = this.joined;
+    const corner = chessCorner();
+    const t = my && this.tables.get(my.table);
+    const ray = this.aim();
+    const view = my && corner?.tables[my.table - 1];
+    if (!my || !t || !ray || !view) return;
+    const hit = view.pick(ray);
+    const net = this.ctx.net;
+    if (hit?.act === 'new') {
+      net.send({ t: 'chess.new', table: my.table });
+      return;
+    }
+    if (hit?.act === 'resign') {
+      // A flag that's easy to knock: it takes two clicks.
+      const now = performance.now();
+      if (now - this.armedAt < 3000) {
+        this.armedAt = 0;
+        net.send({ t: 'chess.resign', table: my.table });
+      } else {
+        this.armedAt = now;
+        toast('Click the flag again to resign', 'warn');
+      }
+      return;
+    }
+    const state = this.state(t);
+    if (hit?.sq === undefined || !state || t.end || !t.w || !t.b || state.turn !== my.side) return this.deselect();
+    const sq = hit.sq;
+    if (this.selected >= 0 && legalMoves(state, this.selected).some((m) => m.to === sq)) {
+      net.send({ t: 'chess.move', table: my.table, from: this.selected, to: sq });
+      this.deselect();
+    } else if (state.board[sq] && (state.board[sq] === state.board[sq].toUpperCase()) === (my.side === 'w') && sq !== this.selected) {
+      this.selected = sq;
+    } else this.deselect();
+  }
+
+  private deselect() {
+    this.selected = -1;
+  }
+
+  /** What the hint says at a table: who's playing and how it stands, and what to do about it. */
+  describe(n: number): { status: string; playing: boolean } {
+    const t = this.tables.get(n);
+    const mine = this.joined?.table === n ? this.joined.side : null;
+    return { status: t && (t.w || t.b) ? statusOf(t, mine) : 'nobody playing — sit in a chair to start', playing: mine !== null };
+  }
+
+  /** Every frame, up on the roof: the boards show what the server says, you sit and get up, and what's lit follows your aim. */
+  tick(t: number, dt: number) {
+    const { ctx } = this;
+    const corner = chessCorner();
+    if (!corner) return;
+    corner.update(t, dt);
+    for (const [n, table] of this.tables) {
+      const view = corner.tables[n - 1];
+      if (view && this.shown.get(n) !== table) {
+        view.show(table);
+        this.shown.set(n, table);
+      }
+    }
+    // Sitting down at a chair is taking that side; getting up leaves it.
+    const chair = chessSeatOf(ctx.player.seat?.seatId);
+    if (chair?.table !== this.joined?.table || chair?.side !== this.joined?.side) {
+      if (this.joined) ctx.net.send({ t: 'chess.leave' });
+      this.joined = chair ?? null;
+      this.selected = -1;
+      if (chair) {
+        ctx.net.send({ t: 'chess.join', table: chair.table, side: chair.side });
+        // Look down at the board.
+        if (ctx.player.view === 'first') ctx.player.lookPitch = -0.7;
+      }
+      ctx.hint.invalidate();
+    }
+    this.light(corner.tables);
+    this.draw();
+  }
+
+  /** What's lit on each board: the last move and a king in check on all of them, and for yours, what you aim at and can do. */
+  private light(views: readonly ChessTableView[]) {
+    const my = this.joined;
+    let aimed: Picked | null = null;
+    if (my) {
+      const ray = this.aim();
+      aimed = ray ? (views[my.table - 1]?.pick(ray) ?? null) : null;
+    }
+    for (const view of views) {
+      const t = this.tables.get(view.n);
+      const state = t && this.state(t);
+      if (!t || !state) continue;
+      const mine = my?.table === view.n;
+      const hover = mine ? aimed?.sq : undefined;
+      const piece = hover !== undefined ? state.board[hover] : '';
+      const live = mine && !t.end && !!t.w && !!t.b;
+      const ownPiece = !!piece && (piece === piece.toUpperCase()) === (my?.side === 'w');
+      const picked = live && this.selected >= 0 && state.turn === my.side;
+      const dests = picked ? [...new Set(legalMoves(state, this.selected).map((m) => m.to))] : [];
+      const pawn = picked && state.board[this.selected].toLowerCase() === 'p';
+      const takes = (to: number) => !!state.board[to] || (pawn && to === state.ep);
+      const marks: Marks = {
+        last: t.last,
+        check: inCheck(state) ? kingSquare(state, state.turn) : undefined,
+        hover: live && hover !== undefined && (ownPiece || dests.includes(hover)) ? hover : undefined,
+        selected: picked ? this.selected : undefined,
+        moves: dests.filter((to) => !takes(to)),
+        takes: dests.filter(takes),
+      };
+      const key = `${t.fen}|${t.moves}|${t.end?.kind}|${marks.hover}|${marks.selected}|${aimed?.act}`;
+      if (this.markKey.get(view.n) !== key) {
+        this.markKey.set(view.n, key);
+        view.setMarks(marks);
+      }
+      view.lightToken(mine ? (aimed?.act ?? null) : null);
+    }
+  }
+
+  /** Off the roof: nobody's at a table. */
+  hide() {
+    this.joined = null;
+    this.selected = -1;
+    this.hud.classList.add('hidden');
+  }
+
+  /** The line at the top of the screen while you're sitting at a table. */
+  private draw() {
+    const my = this.joined;
+    this.hud.classList.toggle('hidden', !my);
+    if (!my) return;
+    const t = this.tables.get(my.table);
+    const line = `♟ Table ${my.table} · you're ${my.side === 'w' ? 'White' : 'Black'} — ${statusOf(t, my.side)}`;
+    const tip = t?.end ? 'Click the coin to play again' : this.selected >= 0 ? `${squareName(this.selected)} picked up — click a glowing square, or another piece` : 'Click a piece, then where it goes · W A S D gets you up';
+    if (this.lineEl.textContent !== line) this.lineEl.textContent = line;
+    if (this.tipEl.textContent !== tip) this.tipEl.textContent = tip;
+  }
+}
+
+const CENTER = new THREE.Vector2(0, 0);
diff --git a/src/client/features/chess/index.ts b/src/client/features/chess/index.ts
new file mode 100644
index 000000000..7f6c49b9f
--- /dev/null
+++ b/src/client/features/chess/index.ts
@@ -0,0 +1,47 @@
+/**
+ * Chess on the rooftop, in the 'Merge Conflict' corner: three tables where teammates play while they
+ * think about (or wait out) a merge conflict. Sitting in a chair takes that side; E or a click at the
+ * board picks a piece up and puts it down (see controller.ts). Everyone up there sees every game. The
+ * corner itself (tables, chairs, sign) is built by the roof (world.ts's buildChessCorner).
+ */
+import { ROOF } from '../../../shared/rooftop';
+import type { Ctx } from '../../core/context';
+import { aside, hintTitle, key, onE } from '../../core/hint';
+import { store } from '../../state';
+import { ChessController } from './controller';
+import './ui.css';
+
+// The kinds of thing you can use that this defines (see InteractKinds in world/types.ts).
+declare module '../../world/types' {
+  interface InteractKinds {
+    chess: true;
+  }
+  interface Interactable {
+    /** Which chess table (from 1), for a chess table. */
+    chessTable?: number;
+  }
+}
+
+export function installChess(ctx: Ctx) {
+  const chess = new ChessController(ctx);
+
+  ctx.messages.on('chess.tables', (msg) => msg.tables.forEach((t) => chess.apply(t)));
+  ctx.messages.on('chess.table', (msg) => chess.apply(msg.table));
+  // Up on the roof (by elevator, or back there after a reload): ask how the games stand.
+  for (const t of ['welcome', 'floor.enter'] as const) ctx.messages.on(t, () => store.floor === ROOF && ctx.net.send({ t: 'chess.sync' }));
+
+  ctx.interactions.define('chess', {
+    reach: 3.6,
+    hint: (it) => {
+      const n = it.chessTable ?? 0;
+      const { status, playing } = chess.describe(n);
+      return { k: `${n}|${status}|${playing}`, parts: [hintTitle(`♟ Chess · table ${n}`), aside(status), playing ? key('E / Click', 'Pick up a piece, put it down') : aside('sit in a chair to play')] };
+    },
+    // Each table is yours to play at only from a chair; E there is a click on whatever you're looking at.
+    use: onE(() => chess.click()),
+  });
+
+  ctx.ticks.add('world', ({ t, dt }) => (ctx.upTop() ? chess.tick(t, dt) : chess.hide()));
+
+  return { chess };
+}
diff --git a/src/client/features/chess/pieces.ts b/src/client/features/chess/pieces.ts
new file mode 100644
index 000000000..4c3a3010c
--- /dev/null
+++ b/src/client/features/chess/pieces.ts
@@ -0,0 +1,202 @@
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { canvasTexture } from '../../world/texture';
+
+// The chessmen: Staunton pieces turned on a lathe (a profile spun round, as a woodturner makes them), the
+// knight's head cut from a flat silhouette and rounded off. Drawn for a board with 0.08 m squares
+// (a king 0.12 m tall, a pawn 0.065), and scaled to the board's (see ChessTableView).
+
+/** What a piece looks like, by FEN letter (case ignored). */
+export type PieceKind = 'p' | 'r' | 'n' | 'b' | 'q' | 'k';
+
+/** The squares the pieces are drawn for (meters); a board with bigger ones scales them up. */
+export const PIECE_SQUARE = 0.08;
+
+type Profile = [number, number][];
+
+/** A quarter-turn-ish arc of a ball: points (radius from the axis, height) round a circle at height `cy`, from angle `a0` to `a1` (degrees, 0 out, 90 up). */
+function ball(radius: number, cy: number, a0: number, a1: number, steps = 10, cx = 0): Profile {
+  const out: Profile = [];
+  for (let i = 0; i <= steps; i++) {
+    const a = ((a0 + ((a1 - a0) * i) / steps) * Math.PI) / 180;
+    out.push([Math.max(0, cx + radius * Math.cos(a)), cy + radius * Math.sin(a)]);
+  }
+  return out;
+}
+
+/** The same, squashed or stretched: `ry` tall where `rx` is wide. */
+const ellipse = (rx: number, ry: number, cy: number, a0: number, a1: number, steps = 12): Profile => ball(1, 0, a0, a1, steps).map(([r, y]) => [r * rx, cy + y * ry]);
+
+/** The part of a profile above `from`, moved up `dy`: a longer stem. */
+const lift = (p: Profile, dy: number, from = 0.03): Profile => p.map(([r, y]) => [r, y > from ? y + dy : y]);
+
+/** A flat foot with a rounded rim, `r` wide: the base all of them stand on. */
+const foot = (r: number): Profile => [[0, 0], [r, 0], [r, 0.0035], [r - 0.0022, 0.0066], [r - 0.0062, 0.0092]];
+
+/** Turned on a lathe: the profile spun `segments` times round the axis. */
+function turn(profile: Profile, segments = 28): THREE.BufferGeometry {
+  const g = new THREE.LatheGeometry(profile.map(([r, y]) => new THREE.Vector2(r, y)), segments);
+  return g;
+}
+
+const sphere = (r: number, x: number, y: number, z: number) => new THREE.SphereGeometry(r, 12, 8).translate(x, y, z);
+const bar = (w: number, h: number, d: number, x: number, y: number, z = 0) => new THREE.BoxGeometry(w, h, d).translate(x, y, z);
+
+/** A rook's battlements: `n` blocks of a ring, `h` tall from `y`, with a gap the width of about half a block between them. */
+function crenellations(r0: number, r1: number, y: number, h: number, n = 6): THREE.BufferGeometry {
+  const parts: THREE.BufferGeometry[] = [];
+  const span = (Math.PI * 2) / n;
+  for (let i = 0; i < n; i++) {
+    const a0 = i * span;
+    const a1 = a0 + span * 0.62;
+    const s = new THREE.Shape();
+    s.absarc(0, 0, r0, a0, a1, false);
+    s.absarc(0, 0, r1, a1, a0, true);
+    s.closePath();
+    // Extruded along z, then stood up so z is up.
+    parts.push(new THREE.ExtrudeGeometry(s, { depth: h, bevelEnabled: false, curveSegments: 4 }).rotateX(-Math.PI / 2).translate(0, y, 0));
+  }
+  return mergeGeometries(parts.map((p) => p.toNonIndexed()))!;
+}
+
+/** The knight's head: a horse's, in profile (looking along +x), thickened and rounded, standing on a base of its own. */
+function knightHead(): THREE.BufferGeometry {
+  const outline: [number, number][] = [
+    [-0.0165, 0.0225], [-0.0175, 0.035], [-0.016, 0.05], [-0.0135, 0.062], [-0.01, 0.071], [-0.006, 0.079], [-0.004, 0.084], [-0.0005, 0.083],
+    [0.001, 0.077], [0.0045, 0.0765], [0.009, 0.0735], [0.015, 0.0645], [0.0215, 0.0545], [0.0255, 0.0475], [0.0262, 0.043], [0.0225, 0.0405],
+    [0.016, 0.0425], [0.011, 0.044], [0.0085, 0.041], [0.0105, 0.033], [0.016, 0.026], [0.015, 0.0222],
+  ];
+  const curve = new THREE.CatmullRomCurve3(outline.map(([x, y]) => new THREE.Vector3(x, y, 0)), true, 'centripetal');
+  const shape = new THREE.Shape(curve.getPoints(90).map((p) => new THREE.Vector2(p.x, p.y)));
+  const depth = 0.012;
+  const g = new THREE.ExtrudeGeometry(shape, { depth, bevelEnabled: true, bevelThickness: 0.0045, bevelSize: 0.0035, bevelSegments: 3, curveSegments: 1 });
+  g.translate(0, 0, -depth / 2);
+  // The grain runs up the neck: its texture is laid on by height, across by depth.
+  const pos = g.attributes.position;
+  const uv = new Float32Array(pos.count * 2);
+  for (let i = 0; i < pos.count; i++) {
+    uv[i * 2] = (pos.getZ(i) + 0.02) * 12 + pos.getX(i) * 4;
+    uv[i * 2 + 1] = pos.getY(i) * 9;
+  }
+  g.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
+  return g;
+}
+
+/** What a piece is made of: its wood, and the dark bits (a knight's eye, the slit in a bishop's mitre). */
+export interface PieceParts {
+  wood: THREE.BufferGeometry;
+  ink?: THREE.BufferGeometry;
+}
+
+const merge = (parts: THREE.BufferGeometry[]) => mergeGeometries(parts.map((p) => (p.index ? p.toNonIndexed() : p)))!;
+
+const CACHE = new Map<PieceKind, PieceParts>();
+
+/** The pieces' shapes, made once. Standing on y = 0, round the origin, a knight looking along +x. */
+export function pieceParts(kind: PieceKind): PieceParts {
+  const hit = CACHE.get(kind);
+  if (hit) return hit;
+  let parts: PieceParts;
+  switch (kind) {
+    case 'p':
+      parts = {
+        wood: turn([...foot(0.0215), [0.012, 0.0115], [0.01, 0.0175], [0.0088, 0.026], [0.0088, 0.031], [0.0125, 0.0325], [0.0125, 0.0355], [0.01, 0.0375], [0.0078, 0.039], ...ball(0.0135, 0.0505, -55, 90)]),
+      };
+      break;
+    case 'r':
+      parts = {
+        wood: merge([
+          turn([...foot(0.0255), [0.015, 0.014], [0.0132, 0.023], [0.0132, 0.032], [0.016, 0.0345], [0.02, 0.04], [0.0205, 0.047], [0.0235, 0.0485], [0.0235, 0.0525], [0.0165, 0.0525], [0, 0.0525]]),
+          crenellations(0.0235, 0.0165, 0.0525, 0.0205),
+        ]),
+      };
+      break;
+    case 'n':
+      parts = {
+        wood: merge([turn([...foot(0.0255), [0.015, 0.014], [0.014, 0.019], [0.017, 0.0215], [0.017, 0.0235], [0, 0.0235]]), knightHead()]),
+        // An eye on each side of the head.
+        ink: merge([sphere(0.0026, 0.0092, 0.0665, 0.0104), sphere(0.0026, 0.0092, 0.0665, -0.0104)]),
+      };
+      break;
+    case 'b':
+      parts = {
+        wood: merge([
+          turn([...foot(0.0245), [0.0125, 0.014], [0.01, 0.024], [0.009, 0.034], [0.014, 0.0355], [0.014, 0.0385], [0.0095, 0.0405], [0.0085, 0.0415], ...ellipse(0.0152, 0.022, 0.06, -60, 72, 14), [0.003, 0.083]]),
+          sphere(0.005, 0, 0.0855, 0),
+        ]),
+        // The slit across the mitre.
+        ink: bar(0.036, 0.0032, 0.016, 0, 0.062, 0.003).rotateX(-0.85),
+      };
+      break;
+    case 'q':
+      parts = {
+        wood: merge([
+          turn(lift([...foot(0.0275), [0.014, 0.015], [0.0108, 0.026], [0.0092, 0.04], [0.0088, 0.05], [0.014, 0.0515], [0.014, 0.0545], [0.01, 0.0565], [0.0105, 0.0585], [0.017, 0.068], [0.0235, 0.08], [0.0248, 0.0845], [0.021, 0.0858], [0.0165, 0.0848], [0.0125, 0.0866], [0, 0.0872]], 0.006)),
+          // A crown: a ring of beads on the rim, and an orb on top.
+          ...Array.from({ length: 9 }, (_, i) => sphere(0.0043, Math.cos((i / 9) * Math.PI * 2) * 0.0228, 0.0928, Math.sin((i / 9) * Math.PI * 2) * 0.0228)),
+          sphere(0.0072, 0, 0.0978, 0),
+        ]),
+      };
+      break;
+    case 'k':
+      parts = {
+        wood: merge([
+          turn(lift([...foot(0.0285), [0.0145, 0.015], [0.011, 0.026], [0.0094, 0.042], [0.009, 0.054], [0.0145, 0.0555], [0.0145, 0.0585], [0.0102, 0.0605], [0.0108, 0.0625], [0.0168, 0.072], [0.0232, 0.084], [0.024, 0.0885], [0.0195, 0.09], [0.0125, 0.0895], [0, 0.0895]], 0.003)),
+          // The cross.
+          bar(0.0058, 0.0285, 0.0058, 0, 0.1065),
+          bar(0.0195, 0.0058, 0.0058, 0, 0.111),
+        ]),
+      };
+      break;
+  }
+  CACHE.set(kind, parts);
+  return parts;
+}
+
+// ---- Wood ------------------------------------------------------------------------------------------
+
+/** Wood grain: streaks running up the texture, drawn over `base` in `streak`. */
+function grain(base: string, streak: string, seed: number): THREE.CanvasTexture {
+  return canvasTexture(128, 256, (g) => {
+    g.fillStyle = base;
+    g.fillRect(0, 0, 128, 256);
+    g.strokeStyle = streak;
+    for (let i = 0; i < 46; i++) {
+      const x = ((i * 53 + seed * 17) % 128) + 0.5;
+      g.globalAlpha = 0.08 + (((i * 7 + seed) % 5) / 5) * 0.16;
+      g.lineWidth = 0.6 + ((i * 3 + seed) % 4) * 0.55;
+      g.beginPath();
+      g.moveTo(x, 0);
+      g.bezierCurveTo(x + 5 * Math.sin(i + seed), 80, x - 6 * Math.cos(i * 2 + seed), 170, x + 2 * Math.sin(i), 256);
+      g.stroke();
+    }
+  });
+}
+
+/** The two sets' wood, polished: pale maple for White and dark walnut for Black. */
+export function woodMaterials(): Record<'w' | 'b', THREE.MeshStandardMaterial> & { ink: THREE.MeshStandardMaterial } {
+  const mat = (map: THREE.Texture, roughness: number) => new THREE.MeshStandardMaterial({ map, roughness, metalness: 0 });
+  return {
+    w: mat(grain('#ecd7a8', '#b88b4a', 1), 0.36),
+    b: mat(grain('#5a3722', '#2a150b', 2), 0.34),
+    ink: new THREE.MeshStandardMaterial({ color: '#1d1209', roughness: 0.5, metalness: 0 }),
+  };
+}
+
+export const pieceKind = (letter: string): PieceKind => letter.toLowerCase() as PieceKind;
+
+/** A piece, standing at the group's origin. The knight looks along +x; turn the group to face it. */
+export function makePiece(letter: string, mats: ReturnType<typeof woodMaterials>): THREE.Group {
+  const parts = pieceParts(pieceKind(letter));
+  const g = new THREE.Group();
+  const wood = new THREE.Mesh(parts.wood, letter === letter.toUpperCase() ? mats.w : mats.b);
+  wood.castShadow = true;
+  wood.receiveShadow = true;
+  g.add(wood);
+  if (parts.ink) {
+    const ink = new THREE.Mesh(parts.ink, mats.ink);
+    ink.castShadow = false;
+    g.add(ink);
+  }
+  return g;
+}
diff --git a/src/client/features/chess/ui.css b/src/client/features/chess/ui.css
new file mode 100644
index 000000000..8b6f36911
--- /dev/null
+++ b/src/client/features/chess/ui.css
@@ -0,0 +1,3 @@
+.chess-hud { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 8px 14px 9px; display: grid; gap: 3px; text-align: center; pointer-events: none !important; }
+.chess-line { font-size: 14px; font-weight: 900; }
+.chess-tip { font-size: 12px; font-weight: 700; opacity: .75; }
diff --git a/src/client/features/chess/world.ts b/src/client/features/chess/world.ts
new file mode 100644
index 000000000..3702827b8
--- /dev/null
+++ b/src/client/features/chess/world.ts
@@ -0,0 +1,178 @@
+import * as THREE from 'three';
+import { CHESS_SEATS, CHESS_TABLES } from '../../../shared/chess-seats';
+import type { SeatDef } from '../../../shared/layout';
+import { canvasTexture } from '../../world/texture';
+import type { Collider, Interactable } from '../../world/types';
+import { mesh, roundedBox } from '../../world/toon';
+import { ChessTableView, TABLE_H, TABLE_SIZE } from './board';
+
+// The 'Merge Conflict' corner of the rooftop, where the DJ's stage was (see shared/chess-seats.ts): three
+// chess tables on a rug, a chair either side of each, and a sign. The game on each table is
+// ChessTableView's (board.ts); what's played on it is controller.ts's.
+
+export interface ChessCorner {
+  group: THREE.Group;
+  colliders: Collider[];
+  interactables: Interactable[];
+  /** What looking or clicking can land on: the tables, with their men, and the chairs. */
+  pickables: THREE.Object3D[];
+  /** Each table's board and men, by table number - 1. */
+  tables: ChessTableView[];
+  /** Slides the men. (features/chess ticks this itself while you're up on the roof.) */
+  update(t: number, dt: number): void;
+}
+
+const WALNUT = '#5a3a22';
+const MAPLE = '#c99a5b';
+const CUSHION = '#4f6f64';
+
+const wood = (color: string, roughness = 0.5) => new THREE.MeshStandardMaterial({ color, roughness, metalness: 0 });
+
+/** A rug woven in a border and a lattice, in the deep green and gold of a games room. */
+function rugTexture(): THREE.CanvasTexture {
+  return canvasTexture(1024, 560, (g) => {
+    g.fillStyle = '#2f453f';
+    g.fillRect(0, 0, 1024, 560);
+    g.strokeStyle = '#c9a96e';
+    g.lineWidth = 10;
+    g.strokeRect(26, 26, 972, 508);
+    g.lineWidth = 3;
+    g.strokeRect(54, 54, 916, 452);
+    g.strokeStyle = 'rgba(201,169,110,0.22)';
+    g.lineWidth = 2;
+    for (let i = -10; i < 30; i++) {
+      g.beginPath();
+      g.moveTo(i * 56, 60);
+      g.lineTo(i * 56 + 460, 500);
+      g.moveTo(i * 56 + 460, 60);
+      g.lineTo(i * 56, 500);
+      g.stroke();
+    }
+    // Fringe.
+    g.strokeStyle = '#e6d6ad';
+    g.lineWidth = 3;
+    for (let y = 8; y < 560; y += 12) {
+      for (const [x0, x1] of [[0, 14], [1024, 1010]]) {
+        g.beginPath();
+        g.moveTo(x0, y);
+        g.lineTo(x1, y);
+        g.stroke();
+      }
+    }
+  });
+}
+
+function signTexture(): THREE.CanvasTexture {
+  return canvasTexture(1024, 300, (g) => {
+    g.fillStyle = '#33241a';
+    g.fillRect(0, 0, 1024, 300);
+    g.strokeStyle = '#d9b97c';
+    g.lineWidth = 6;
+    g.strokeRect(14, 14, 996, 272);
+    g.fillStyle = '#f1dfb8';
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    g.font = '900 120px Nunito, ui-rounded, system-ui, sans-serif';
+    g.fillText('♞ Merge Conflict', 512, 118);
+    g.fillStyle = '#d9b97c';
+    g.font = '700 50px Nunito, ui-rounded, system-ui, sans-serif';
+    g.fillText('resolve it over a game of chess', 512, 214);
+  });
+}
+
+/** A dining chair at the seat's spot, its back away from the table: you sit facing the way the seat does. */
+function chair(seat: SeatDef): THREE.Group {
+  const g = new THREE.Group();
+  const frame = wood(MAPLE, 0.55);
+  const cushion = wood(CUSHION, 0.85);
+  g.add(mesh(roundedBox(0.44, 0.04, 0.42, 0.04), frame, 0, 0.43, 0));
+  g.add(mesh(roundedBox(0.4, 0.035, 0.38, 0.05), cushion, 0, 0.4675, 0.005));
+  for (const sx of [-1, 1]) {
+    for (const sz of [-1, 1]) g.add(mesh(new THREE.BoxGeometry(0.036, 0.41, 0.036), frame, sx * 0.19, 0.205, sz * 0.18));
+    // The back's posts, going on up from the rear legs.
+    g.add(mesh(new THREE.BoxGeometry(0.036, 0.48, 0.036), frame, sx * 0.19, 0.66, -0.18));
+  }
+  g.add(mesh(roundedBox(0.42, 0.075, 0.03, 0.012), frame, 0, 0.9, -0.18));
+  g.add(mesh(roundedBox(0.36, 0.2, 0.022, 0.02), cushion, 0, 0.72, -0.175));
+  g.position.set(seat.x, seat.y, seat.z);
+  g.rotation.y = seat.rotY;
+  return g;
+}
+
+/** A table with a chess board in its top, at (x, z). */
+function table(n: number, x: number, z: number): { root: THREE.Group; view: ChessTableView; collider: Collider } {
+  const root = new THREE.Group();
+  const walnut = wood(WALNUT, 0.45);
+  root.add(mesh(roundedBox(TABLE_SIZE, 0.04, TABLE_SIZE, 0.035), walnut, 0, TABLE_H - 0.02, 0));
+  const legAt = TABLE_SIZE / 2 - 0.07;
+  for (const sx of [-1, 1]) {
+    for (const sz of [-1, 1]) root.add(mesh(new THREE.CylinderGeometry(0.026, 0.017, TABLE_H - 0.04, 14), walnut, sx * legAt, (TABLE_H - 0.04) / 2, sz * legAt));
+    root.add(mesh(new THREE.BoxGeometry(0.022, 0.07, legAt * 2), walnut, sx * legAt, TABLE_H - 0.075, 0));
+    root.add(mesh(new THREE.BoxGeometry(legAt * 2, 0.07, 0.022), walnut, 0, TABLE_H - 0.075, sx * legAt));
+  }
+  const view = new ChessTableView(n);
+  root.add(view.group);
+  root.position.set(x, 0, z);
+  const half = TABLE_SIZE / 2;
+  return { root, view, collider: { minX: x - half, maxX: x + half, minZ: z - half, maxZ: z + half, top: TABLE_H } };
+}
+
+let current: ChessCorner | null = null;
+/** The corner as last built (there's only the one, on the roof). */
+export const chessCorner = (): ChessCorner | null => current;
+
+/**
+ * The games corner: three tables, their chairs, a rug under them and a sign over them. Add its group,
+ * colliders, interactables and pickables to the roof's (the chairs are `seat`s, the tables `chess`).
+ */
+export function buildChessCorner(): ChessCorner {
+  const group = new THREE.Group();
+  const colliders: Collider[] = [];
+  const interactables: Interactable[] = [];
+  const pickables: THREE.Object3D[] = [];
+  const tables: ChessTableView[] = [];
+
+  const xs = CHESS_TABLES.map((t) => t.x);
+  const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+  const cz = CHESS_TABLES[0].z;
+  const rugMat = new THREE.MeshStandardMaterial({ map: rugTexture(), roughness: 0.95, metalness: 0 });
+  rugMat.userData.outlineParameters = { visible: false };
+  const rug = mesh(roundedBox(Math.max(...xs) - Math.min(...xs) + 3.6, 0.012, 4.5, 0.1), rugMat, cx, 0.006, cz, false);
+  group.add(rug);
+
+  for (const { n, x, z } of CHESS_TABLES) {
+    const t = table(n, x, z);
+    const it: Interactable = { kind: 'chess', x, y: 0, z, radius: 1.1, chessTable: n };
+    t.root.userData.interact = it;
+    group.add(t.root);
+    interactables.push(it);
+    pickables.push(t.root);
+    colliders.push(t.collider);
+    tables.push(t.view);
+  }
+  for (const seat of CHESS_SEATS) {
+    const c = chair(seat);
+    const it: Interactable = { kind: 'seat', seatId: seat.id, x: seat.x, y: seat.y, z: seat.z, radius: 1.1 };
+    c.userData.interact = it;
+    group.add(c);
+    interactables.push(it);
+    pickables.push(c);
+    colliders.push({ minX: seat.x - 0.23, maxX: seat.x + 0.23, minZ: seat.z - 0.23, maxZ: seat.z + 0.23, top: 0.46 });
+  }
+
+  // The sign, on a post at the back of the rug, facing the tables.
+  const signZ = cz - 2.55;
+  const post = wood(WALNUT, 0.5);
+  group.add(mesh(new THREE.CylinderGeometry(0.035, 0.045, 1.9, 10), post, cx, 0.95, signZ));
+  group.add(mesh(new THREE.CylinderGeometry(0.13, 0.15, 0.04, 14), post, cx, 0.02, signZ));
+  const face = new THREE.MeshStandardMaterial({ map: signTexture(), roughness: 0.6, metalness: 0 });
+  const board = new THREE.Mesh(new THREE.BoxGeometry(2.2, 0.64, 0.05), [post, post, post, post, face, post]);
+  board.position.set(cx, 1.55, signZ + 0.06);
+  board.castShadow = true;
+  group.add(board);
+  colliders.push({ minX: cx - 0.1, maxX: cx + 0.1, minZ: signZ - 0.1, maxZ: signZ + 0.1, top: 99 });
+
+  const corner: ChessCorner = { group, colliders, interactables, pickables, tables, update: (_t, dt) => tables.forEach((v) => v.update(dt)) };
+  current = corner;
+  return corner;
+}
diff --git a/src/client/features/dog/coat.ts b/src/client/features/dog/coat.ts
index b5f47a094..5298692c7 100644
--- a/src/client/features/dog/coat.ts
+++ b/src/client/features/dog/coat.ts
@@ -2,7 +2,7 @@ import type * as THREE from 'three';
 import { DOG_COATS, DOG_COAT_GLOW } from '../../../shared/dog';
 
 /** Paints the dog's three coat materials (see Dog's coatMats) in coat `n`, the white one glowing a little so it stays white at dusk. */
-export function paintCoat(mats: readonly THREE.MeshToonMaterial[], n: number) {
+export function paintCoat(mats: readonly THREE.MeshStandardMaterial[], n: number) {
   const coat = n % DOG_COATS.length;
   DOG_COATS[coat].forEach((c, i) => {
     mats[i].color.set(c);
diff --git a/src/client/features/dog/world.ts b/src/client/features/dog/world.ts
index 84fc630c5..46b1cb63b 100644
--- a/src/client/features/dog/world.ts
+++ b/src/client/features/dog/world.ts
@@ -153,7 +153,7 @@ export class Dog {
    * it; unlike `ready`, a later breed never makes it wait again. Never rejects.
    */
   readonly firstReady = new Promise<void>((resolve) => (this.firstIn = resolve));
-  private coatMats: [THREE.MeshToonMaterial, THREE.MeshToonMaterial, THREE.MeshToonMaterial];
+  private coatMats: [THREE.MeshStandardMaterial, THREE.MeshStandardMaterial, THREE.MeshStandardMaterial];
   private coat = -1;
   private tag: THREE.Sprite | null = null;
   private tagName = '';
@@ -176,7 +176,7 @@ export class Dog {
   private costume: Theme | null = null;
   private outfit: THREE.Object3D[] = [];
   private wings: THREE.Object3D[] = [];
-  private rudolph: THREE.MeshToonMaterial | null = null;
+  private rudolph: THREE.MeshStandardMaterial | null = null;
 
   constructor(
     private sounds: DogSounds,
diff --git a/src/client/features/golf/world.ts b/src/client/features/golf/world.ts
index 12c85e2fb..6f1c8054f 100644
--- a/src/client/features/golf/world.ts
+++ b/src/client/features/golf/world.ts
@@ -137,7 +137,7 @@ export function buildTee(group: THREE.Group, colliders: Collider[], interactable
   const mat = new THREE.Mesh(new THREE.BoxGeometry(size, MAT_H, size), [
     toon('#3f8f45'),
     toon('#3f8f45'),
-    new THREE.MeshToonMaterial({ map: mownTexture('#7ed957', '#6cc24a', 6, '#fffaf3'), gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap }),
+    new THREE.MeshStandardMaterial({ map: mownTexture('#7ed957', '#6cc24a', 6, '#fffaf3') }),
     toon('#3f8f45'),
     toon('#3f8f45'),
     toon('#3f8f45'),
@@ -206,8 +206,7 @@ export function buildGreen(ground: THREE.Group, colliders: Collider[], night: Ni
   const fairTex = mownTexture('#8fd16f', '#7fc463', 2);
   fairTex.wrapT = THREE.RepeatWrapping;
   fairTex.repeat.set(1, fairLen / 4);
-  const gradient = (toon('#fff') as THREE.MeshToonMaterial).gradientMap;
-  const fairway = flat(new THREE.PlaneGeometry(fx1 - fx0, fairLen), new THREE.MeshToonMaterial({ map: fairTex, gradientMap: gradient }), (fx0 + fx1) / 2, G + 0.004, FAIRWAY_Z0 + fairLen / 2);
+  const fairway = flat(new THREE.PlaneGeometry(fx1 - fx0, fairLen), new THREE.MeshStandardMaterial({ map: fairTex }), (fx0 + fx1) / 2, G + 0.004, FAIRWAY_Z0 + fairLen / 2);
   fairway.receiveShadow = true;
   ground.add(fairway);
 
@@ -255,7 +254,7 @@ export function buildGreen(ground: THREE.Group, colliders: Collider[], night: Ni
   const flagGeo = new THREE.PlaneGeometry(1.2, 0.75, 8, 1);
   flagGeo.translate(0.6, 0, 0);
   const rest = Float32Array.from(flagGeo.getAttribute('position').array);
-  const flag = mesh(flagGeo, new THREE.MeshToonMaterial({ color: '#ef476f', side: THREE.DoubleSide, gradientMap: gradient }), px + 0.03, G + STICK - 0.42, pz, false);
+  const flag = mesh(flagGeo, new THREE.MeshStandardMaterial({ color: '#ef476f', side: THREE.DoubleSide }), px + 0.03, G + STICK - 0.42, pz, false);
   ground.add(flag);
   return {
     update(t: number) {
diff --git a/src/client/features/hud/index.ts b/src/client/features/hud/index.ts
index a54730173..f0a1c3d7b 100644
--- a/src/client/features/hud/index.ts
+++ b/src/client/features/hud/index.ts
@@ -69,7 +69,7 @@ export function installHud(ctx: Ctx, core: CoreState, parts: HudParts) {
       // The office has its bookshelf for them; a map of its own may not.
       { id: 'docs', icon: '📚', label: 'Docs', section: 'Open', shown: () => !inOffice(), title: () => 'Read the project’s docs', run: parts.bookshelf.showBookshelf },
       { id: 'elevator', icon: '🛗', label: () => (inOffice() ? 'Elevator' : 'Floors'), section: 'Open', count: () => store.floors.reduce((n, f) => n + (f.id === store.floor ? 0 : f.waiting), 0), title: () => (inOffice() ? 'Ride to another project' : 'Go to another project, or add one'), run: travel.showElevator },
-      { id: 'roof', icon: '🍸', label: 'Rooftop bar', section: 'Open', shown: () => !core.upTop && inOffice() && builtFloors().length > 0, title: () => 'Ride the elevator up to the roof: a DJ, drinks and the city', run: () => travel.ride(ROOF) },
+      { id: 'roof', icon: '☕', label: 'Rooftop café', section: 'Open', shown: () => !core.upTop && inOffice() && builtFloors().length > 0, title: () => 'Ride the elevator up to the roof: a café and the city', run: () => travel.ride(ROOF) },
       // In voice, V is push to talk, so leaving is only from here.
       { id: 'voice', icon: '🎙️', label: () => (voice.inVoice ? 'Leave voice' : 'Join voice'), section: 'Together', key: () => (voice.inVoice ? undefined : 'V'), on: () => voice.inVoice, blocked: noMedia, run: () => void talk.toggleVoice() },
       // While you're in voice, the top bar keeps the mute button handy. Muted is the usual with push to talk, so it doesn't stand out then.
diff --git a/src/client/features/jukebox/sound.ts b/src/client/features/jukebox/sound.ts
index bd4595df8..2cefe9148 100644
--- a/src/client/features/jukebox/sound.ts
+++ b/src/client/features/jukebox/sound.ts
@@ -25,7 +25,7 @@ export class Jukebox {
   private musicIn!: PannerNode;
   private musicTone!: BiquadFilterNode;
   private musicCutoff = 16000;
-  /** Your music volume, which the DJ on the roof plays through too. */
+  /** Your music volume. */
   musicBus!: GainNode;
   private musicMeter!: AnalyserNode;
   private musicVolume = 0.5;
diff --git a/src/client/features/peers/index.ts b/src/client/features/peers/index.ts
index 2bda9b39d..f78abade8 100644
--- a/src/client/features/peers/index.ts
+++ b/src/client/features/peers/index.ts
@@ -7,7 +7,7 @@ import * as THREE from 'three';
 import { sameLook } from '../../../shared/avatar';
 import { seatOn } from '../../../shared/maps';
 import type { PeerInfo } from '../../../shared/protocol';
-import { DRINK_BY_ID } from '../../../shared/rooftop';
+import { ITEM_BY_ID } from '../../../shared/rooftop';
 import { SEAT_HIPS } from '../../../shared/garage';
 import { gripOf, type Grip } from '../climbing/controller';
 import type { Ctx } from '../../core/context';
@@ -79,7 +79,7 @@ export function installPeers(ctx: Ctx, core: CoreState, parts: Pick<Parts, 'puff
       r.person.setSmoking(!!peer.smoking);
       r.person.setGolf(!!peer.golfing);
       r.person.setThrowing(peer.throwing ?? null);
-      r.person.holdDrink(peer.drink ? (DRINK_BY_ID.get(peer.drink) ?? null) : null);
+      r.person.holdDrink(peer.drink ? (ITEM_BY_ID.get(peer.drink) ?? null) : null);
       r.person.carry(peer.carrying);
       r.person.read(!!peer.reading);
       r.person.sit(store.carOf(id) ? SEAT_HIPS : peer.seat ? (seatOn(plan(), peer.seat)?.hips ?? null) : null);
@@ -169,14 +169,14 @@ export function installPeers(ctx: Ctx, core: CoreState, parts: Pick<Parts, 'puff
   ctx.messages.on('peer.act', (msg) => {
     const r = remotes.get(msg.id);
     if (msg.drink !== undefined) {
-      // A drink from the rooftop bar in their hand, or put down.
+      // A drink or a bite from the rooftop café in their hand, or put down.
       const p = store.peers.get(msg.id);
       if (p) {
         if (msg.drink) p.drink = msg.drink;
         else delete p.drink;
       }
       if (msg.drink) r?.person.reach();
-      r?.person.holdDrink(msg.drink ? (DRINK_BY_ID.get(msg.drink) ?? null) : null);
+      r?.person.holdDrink(msg.drink ? (ITEM_BY_ID.get(msg.drink) ?? null) : null);
       return;
     }
     if (msg.throwing !== undefined) {
diff --git a/src/client/features/rooftop/cafe-seating.ts b/src/client/features/rooftop/cafe-seating.ts
new file mode 100644
index 000000000..f59516959
--- /dev/null
+++ b/src/client/features/rooftop/cafe-seating.ts
@@ -0,0 +1,82 @@
+import * as THREE from 'three';
+import { CAFE_TABLES, ROOF_TABLES, SEATING_BY_ID } from '../../../shared/layout';
+import { bulb } from '../../world/outside';
+import { mesh, roundedBox, toon } from '../../world/toon';
+import { TIMBER, TIMBER_DARK, seatable, type RoofSite } from './kit';
+
+// The café's tables: round ones with a chair either side to sit at (the chairs are SEATING's
+// roof-chair-N), tall ones to stand at, and the stools along the counter.
+
+const CUSHION = '#a8c3a0';
+
+/** A little wooden chair, seat at y 0.45, its back to -z (turned to face whoever sits there). */
+function chair(): THREE.Group {
+  const g = new THREE.Group();
+  const wood = toon(TIMBER);
+  g.add(mesh(roundedBox(0.42, 0.04, 0.42, 0.05), wood, 0, 0.45, 0));
+  g.add(mesh(roundedBox(0.36, 0.03, 0.36, 0.05), toon(CUSHION), 0, 0.48, 0.01));
+  for (const sx of [-1, 1]) {
+    for (const sz of [-1, 1]) g.add(mesh(new THREE.CylinderGeometry(0.018, 0.014, 0.45, 6), wood, sx * 0.17, 0.225, sz * 0.17, false));
+    g.add(mesh(new THREE.CylinderGeometry(0.016, 0.016, 0.4, 6), wood, sx * 0.17, 0.68, -0.19, false));
+  }
+  g.add(mesh(new THREE.BoxGeometry(0.4, 0.05, 0.03), wood, 0, 0.84, -0.19, false));
+  g.add(mesh(new THREE.BoxGeometry(0.4, 0.05, 0.03), wood, 0, 0.7, -0.19, false));
+  return g;
+}
+
+export function buildCafeSeating({ group, statics, colliders, interactables, night }: RoofSite) {
+  const top = toon('#f6f1e7');
+  const wood = toon(TIMBER);
+  const iron = toon('#3a3f47');
+  const jar = bulb(night, '#ffd9a0', 0.5);
+  const stem = toon('#5fb760');
+
+  // Round tables, each with a flower in a bud vase or a candle in a jar, and a chair either side.
+  CAFE_TABLES.forEach(({ x, z }, i) => {
+    statics.add(mesh(new THREE.CylinderGeometry(0.22, 0.26, 0.03, 16), iron, x, 0.015, z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.7, 8), iron, x, 0.37, z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.46, 0.46, 0.04, 24), top, x, 0.74, z));
+    statics.add(mesh(new THREE.TorusGeometry(0.46, 0.014, 6, 24).rotateX(Math.PI / 2), wood, x, 0.74, z, false));
+    if (i % 2) {
+      statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.07, 10), jar, x, 0.8, z, false));
+    } else {
+      statics.add(mesh(new THREE.CylinderGeometry(0.022, 0.028, 0.09, 8), toon('#dfe8ee'), x, 0.805, z, false));
+      statics.add(mesh(new THREE.CylinderGeometry(0.004, 0.004, 0.1, 4), stem, x, 0.89, z, false));
+      statics.add(mesh(new THREE.SphereGeometry(0.028, 8, 6), toon(['#f4a6b8', '#ffd166', '#fff3b0'][i % 3]), x, 0.95, z, false));
+    }
+    colliders.push({ minX: x - 0.46, maxX: x + 0.46, minZ: z - 0.46, maxZ: z + 0.46, top: 0.76 });
+    [0, 1].forEach((j) => {
+      const id = `roof-chair-${i * 2 + j + 1}`;
+      const s = SEATING_BY_ID.get(id)!;
+      const c = chair();
+      c.position.set(s.x, 0, s.z);
+      c.rotation.y = s.rotY;
+      seatable(c, id, 0.9, interactables);
+      group.add(c);
+    });
+  });
+
+  // Tall tables to stand at, with a candle each.
+  const candle = bulb(night, '#ffbf69', 0.5);
+  for (const { x, z } of ROOF_TABLES) {
+    statics.add(mesh(new THREE.CylinderGeometry(0.28, 0.32, 0.04, 16), iron, x, 0.02, z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 1.05, 8), iron, x, 0.55, z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.42, 0.42, 0.05, 20), top, x, 1.08, z));
+    statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.1, 8), candle, x, 1.16, z, false));
+    colliders.push({ minX: x - 0.3, maxX: x + 0.3, minZ: z - 0.3, maxZ: z + 0.3, top: 1.1 });
+  }
+
+  // Stools along the counter, a sage cushion on a timber seat.
+  for (let i = 1; i <= 6; i++) {
+    const s = SEATING_BY_ID.get(`roof-stool-${i}`)!;
+    const stool = new THREE.Group();
+    stool.add(mesh(new THREE.CylinderGeometry(0.2, 0.25, 0.03, 16), iron, 0, 0.015, 0, false));
+    stool.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.66, 8), iron, 0, 0.36, 0, false));
+    stool.add(mesh(new THREE.TorusGeometry(0.16, 0.015, 6, 16).rotateX(Math.PI / 2), iron, 0, 0.32, 0, false));
+    stool.add(mesh(new THREE.CylinderGeometry(0.22, 0.2, 0.05, 16), toon(TIMBER_DARK), 0, 0.7, 0));
+    stool.add(mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.05, 16), toon(CUSHION), 0, 0.75, 0));
+    stool.position.set(s.x, 0, s.z);
+    seatable(stool, s.id, 0.75, interactables);
+    group.add(stool);
+  }
+}
diff --git a/src/client/features/rooftop/cafe.ts b/src/client/features/rooftop/cafe.ts
new file mode 100644
index 000000000..97e70080f
--- /dev/null
+++ b/src/client/features/rooftop/cafe.ts
@@ -0,0 +1,311 @@
+import * as THREE from 'three';
+import { DRINKS, FOODS, type MenuItem } from '../../../shared/rooftop';
+import { FLOOR, ROOF_BAR } from '../../../shared/layout';
+import { Worker } from '../../world/character';
+import { bulb } from '../../world/outside';
+import { canvasTexture } from '../../world/texture';
+import { mesh, toon } from '../../world/toon';
+import { BRASS, PLASTER, TIMBER, TIMBER_DARK, fitFont, unpickable, type RoofSite } from './kit';
+
+// The café along the east edge (ROOF_BAR is its counter): a plaster counter fluted with timber, an
+// espresso machine and a grinder on it, a glass case of pastries, shelves of jars and cups behind it
+// with a chalkboard menu, a barista, and a whitewashed pergola over it all hung with warm string lights
+// and pendant lamps. Where it's lit by lamps, they're all the one warm white.
+
+/** What the café does each frame (see update) and what ordering at it does. */
+export interface Cafe {
+  /** Where drinks are made, for the sound of one. */
+  pourAt: { x: number; y: number; z: number };
+  /** Someone ordered, standing (or sitting) at `z` along the counter: the barista comes over. */
+  serve(z: number): void;
+  /** `dark` is 0 by day to 1 at night: the lamps show up more. */
+  update(t: number, dt: number, dark: number): void;
+}
+
+/** The chalkboard: both halves of the menu in chalk on slate. */
+function menuBoard(): THREE.CanvasTexture {
+  return canvasTexture(1408, 512, (g) => {
+    g.fillStyle = '#2f3b36';
+    g.fillRect(0, 0, 1408, 512);
+    g.strokeStyle = 'rgba(255,255,255,0.12)';
+    g.lineWidth = 6;
+    g.strokeRect(14, 14, 1380, 484);
+    g.fillStyle = '#f4efe6';
+    g.textBaseline = 'middle';
+    const column = (title: string, items: readonly MenuItem[], x: number) => {
+      g.textAlign = 'left';
+      fitFont(g, title, 54, 520);
+      g.fillStyle = '#ffd9a0';
+      g.fillText(title, x, 62);
+      g.fillStyle = '#f4efe6';
+      items.forEach((it, i) => {
+        fitFont(g, it.name, 36, 560);
+        g.fillText(it.name, x, 134 + i * 42);
+      });
+    };
+    column('Drinks', DRINKS, 70);
+    column('Food', FOODS, 770);
+    g.fillStyle = 'rgba(255,255,255,0.35)';
+    g.fillRect(704, 50, 4, 410);
+  });
+}
+
+export function buildCafe({ group, statics, colliders, interactables, night }: RoofSite): Cafe {
+  const bar = new THREE.Group();
+  const bx = ROOF_BAR.x;
+  const blen = ROOF_BAR.maxZ - ROOF_BAR.minZ;
+  const bz = (ROOF_BAR.minZ + ROOF_BAR.maxZ) / 2;
+  const front = bx - ROOF_BAR.depth / 2;
+  const top = ROOF_BAR.height;
+  const timber = toon(TIMBER);
+  const plaster = toon(PLASTER);
+  const chrome = toon('#cfd6dc');
+  const dark = toon('#2f3640');
+  const china = toon('#fffaf3');
+
+  // The counter: plaster with timber battens up the front, a pale oak top, and a brass foot rail.
+  bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth, top - 0.06, blen), plaster, bx, (top - 0.06) / 2, bz));
+  for (let z = ROOF_BAR.minZ + 0.15; z < ROOF_BAR.maxZ; z += 0.3) bar.add(mesh(new THREE.BoxGeometry(0.03, top - 0.2, 0.12), timber, front - 0.012, top / 2, z, false));
+  bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth + 0.2, 0.06, blen + 0.2), toon('#dcb888'), bx - 0.05, top - 0.03, bz));
+  const footRail = mesh(new THREE.CylinderGeometry(0.03, 0.03, blen, 8), toon(BRASS), front - 0.2, 0.22, bz, false);
+  footRail.rotation.x = Math.PI / 2;
+  bar.add(footRail);
+  const underGlow = new THREE.MeshBasicMaterial({ color: '#ffb870' });
+  underGlow.toneMapped = false;
+  group.add(mesh(new THREE.BoxGeometry(0.02, 0.04, blen), underGlow, front - 0.02, 0.07, bz, false));
+  colliders.push({ minX: front, maxX: bx + ROOF_BAR.depth / 2, minZ: ROOF_BAR.minZ, maxZ: ROOF_BAR.maxZ, top });
+  const barIts = [-3.6, -0.6, 2.4].map((z) => ({ kind: 'bar' as const, x: front - 0.7, z, radius: 1.7 }));
+  interactables.push(...barIts);
+  bar.userData.interact = barIts[1];
+
+  // On the counter. The espresso machine, group heads and portafilters toward the barista…
+  const mz = -2.6;
+  bar.add(mesh(new THREE.BoxGeometry(0.5, 0.4, 0.8), chrome, bx, top + 0.2, mz));
+  bar.add(mesh(new THREE.BoxGeometry(0.52, 0.04, 0.82), dark, bx, top + 0.42, mz, false));
+  bar.add(mesh(new THREE.BoxGeometry(0.02, 0.1, 0.7), toon('#c9772e'), bx - 0.26, top + 0.22, mz, false));
+  bar.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.02, 14).rotateZ(Math.PI / 2), dark, bx - 0.26, top + 0.32, mz, false));
+  bar.add(mesh(new THREE.BoxGeometry(0.2, 0.025, 0.7), dark, bx + 0.34, top + 0.015, mz, false));
+  for (const dz of [-0.2, 0.2]) {
+    bar.add(mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.07, 12), dark, bx + 0.22, top + 0.26, mz + dz, false));
+    bar.add(mesh(new THREE.BoxGeometry(0.2, 0.03, 0.04), toon('#1d1d1d'), bx + 0.34, top + 0.26, mz + dz, false));
+    bar.add(mesh(new THREE.CylinderGeometry(0.04, 0.034, 0.06, 12), china, bx + 0.34, top + 0.07, mz + dz, false));
+  }
+  // …a grinder with a hopper of beans…
+  bar.add(mesh(new THREE.BoxGeometry(0.22, 0.36, 0.26), dark, bx, top + 0.18, -3.6));
+  bar.add(mesh(new THREE.CylinderGeometry(0.1, 0.05, 0.22, 14), toon('#6b4a2e'), bx, top + 0.47, -3.6, false));
+  // …stacks of cups…
+  for (const [z, n] of [
+    [-4.5, 4],
+    [-4.9, 3],
+    [-5.3, 4],
+  ] as const)
+    for (let k = 0; k < n; k++) bar.add(mesh(new THREE.CylinderGeometry(0.05, 0.04, 0.045, 12), china, bx - 0.05, top + 0.0225 + k * 0.04, z, false));
+  // …and a pot of herbs by the till.
+  bar.add(mesh(new THREE.CylinderGeometry(0.12, 0.09, 0.15, 12), toon('#c4703f'), bx - 0.1, top + 0.075, 3.4));
+  for (const [x, y, z] of [
+    [-0.06, 0.22, 0],
+    [0.05, 0.25, 0.05],
+    [0.02, 0.2, -0.07],
+    [0.08, 0.2, -0.03],
+  ])
+    bar.add(mesh(new THREE.SphereGeometry(0.075, 8, 6), toon('#5fb760'), bx - 0.1 + x, top + y, 3.4 + z, false));
+
+  // The pastry case: a plaster base, glass all round, two shelves of croissants and pains au chocolat.
+  const cz = 1.2;
+  const caseLen = 1.8;
+  bar.add(mesh(new THREE.BoxGeometry(0.62, 0.3, caseLen), plaster, bx - 0.05, top + 0.15, cz));
+  const glass = new THREE.MeshBasicMaterial({ color: '#d6f1ff', transparent: true, opacity: 0.16, depthWrite: false, side: THREE.DoubleSide });
+  glass.userData.outlineParameters = { visible: false };
+  group.add(mesh(new THREE.BoxGeometry(0.6, 0.5, caseLen - 0.04), glass, bx - 0.05, top + 0.55, cz, false));
+  bar.add(mesh(new THREE.BoxGeometry(0.64, 0.03, caseLen), timber, bx - 0.05, top + 0.815, cz, false));
+  const golds = ['#d9953b', '#cf8a2e', '#e0a64a'];
+  for (const [y, shelf] of [
+    [0.3, 0],
+    [0.55, 1],
+  ] as const) {
+    bar.add(mesh(new THREE.BoxGeometry(0.5, 0.015, caseLen - 0.1), toon('#f6f1e7'), bx - 0.05, top + y, cz, false));
+    for (let i = 0; i < 5; i++) {
+      const z = cz - caseLen / 2 + 0.25 + i * 0.33;
+      const x = bx - 0.05 + (i % 2 ? 0.1 : -0.1);
+      if ((i + shelf) % 3 === 2) {
+        // A pain au chocolat.
+        const p = mesh(new THREE.CapsuleGeometry(0.045, 0.1, 4, 8), toon(golds[1]), x, top + y + 0.06, z, false);
+        p.rotation.x = Math.PI / 2;
+        bar.add(p);
+        bar.add(mesh(new THREE.BoxGeometry(0.012, 0.012, 0.13), toon('#3b2214'), x, top + y + 0.108, z, false));
+      } else {
+        // A croissant: a crescent of puffed segments.
+        for (let k = -2; k <= 2; k++) {
+          const r = 0.034 - Math.abs(k) * 0.006;
+          const seg = mesh(new THREE.SphereGeometry(r, 8, 6), toon(golds[(i + k + 3) % 3]), x + k * 0.075 * 0.5, top + y + 0.012 + r, z + Math.abs(k) * 0.025, false);
+          seg.scale.set(1.1, 0.9, 1);
+          bar.add(seg);
+        }
+      }
+    }
+  }
+  group.add(bar);
+
+  // The back counter and its wall, in plaster, with the shelves behind the barista…
+  const back = FLOOR.maxX - 0.35;
+  const wall = FLOOR.maxX - 0.08;
+  statics.add(mesh(new THREE.BoxGeometry(0.6, 1.0, blen - 0.6), timber, back, 0.5, bz));
+  statics.add(mesh(new THREE.BoxGeometry(0.66, 0.05, blen - 0.5), toon('#dcb888'), back, 1.02, bz));
+  statics.add(mesh(new THREE.BoxGeometry(0.12, 2.9, blen - 0.4), plaster, wall + 0.02, 1.45, bz));
+  const bagColors = ['#c9a27a', '#b88a5f', '#e3cfae'];
+  const jarColors = ['#f4efe6', '#a8c3a0', '#e1b04a', '#c4703f'];
+  let k = 0;
+  for (const y of [1.55, 2.05]) {
+    statics.add(mesh(new THREE.BoxGeometry(0.34, 0.04, 3.4), timber, wall - 0.2, y, 1.9, false));
+    for (let z = 0.4; z < 3.5; z += 0.28) {
+      k++;
+      if (k % 3 === 0) statics.add(mesh(new THREE.BoxGeometry(0.1, 0.24, 0.17), toon(bagColors[k % 3]), wall - 0.2, y + 0.14, z, false));
+      else if (k % 3 === 1) statics.add(mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.2 + (k % 2) * 0.04, 10), toon(jarColors[k % 4]), wall - 0.2, y + 0.12, z, false));
+      else statics.add(mesh(new THREE.CylinderGeometry(0.05, 0.04, 0.07, 10), china, wall - 0.2, y + 0.055, z, false));
+    }
+  }
+  colliders.push({ minX: back - 0.3, maxX: FLOOR.maxX, minZ: ROOF_BAR.minZ + 0.3, maxZ: ROOF_BAR.maxZ - 0.3, top: 99 });
+  // …and the chalkboard menu over the other half, on a timber frame.
+  const board = new THREE.MeshStandardMaterial({ map: menuBoard() });
+  board.userData.outlineParameters = { visible: false };
+  const boardX = wall - 0.1;
+  statics.add(mesh(new THREE.BoxGeometry(0.08, 1.74, 4.84), timber, boardX + 0.03, 2.2, -2.9, false));
+  group.add(mesh(new THREE.PlaneGeometry(4.4, 1.6).rotateY(-Math.PI / 2), board, boardX - 0.02, 2.2, -2.9, false));
+
+  // The pergola: whitewashed posts, a timber frame and slats, and a painted sign facing the tables.
+  const white = toon('#f1ebdf');
+  const p0 = { x: front - 0.9, z: ROOF_BAR.minZ - 0.8 };
+  const p1 = { x: FLOOR.maxX - 0.1, z: ROOF_BAR.maxZ + 0.8 };
+  const roofY = 3.3;
+  for (const x of [p0.x, p1.x]) {
+    for (const z of [p0.z, p1.z]) {
+      statics.add(mesh(new THREE.BoxGeometry(0.16, roofY, 0.16), white, x, roofY / 2, z));
+      colliders.push({ minX: x - 0.1, maxX: x + 0.1, minZ: z - 0.1, maxZ: z + 0.1, top: 99 });
+    }
+    statics.add(mesh(new THREE.BoxGeometry(0.16, 0.22, p1.z - p0.z + 0.3), white, x, roofY, (p0.z + p1.z) / 2));
+  }
+  for (let z = p0.z; z <= p1.z + 0.01; z += 0.55) statics.add(mesh(new THREE.BoxGeometry(p1.x - p0.x + 0.4, 0.08, 0.1), timber, (p0.x + p1.x) / 2, roofY + 0.15, z));
+  const sign = canvasTexture(768, 192, (g) => {
+    g.fillStyle = '#f1e6d3';
+    g.fillRect(0, 0, 768, 192);
+    g.strokeStyle = '#6b4428';
+    g.lineWidth = 10;
+    g.strokeRect(10, 10, 748, 172);
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    g.fillStyle = '#6b4428';
+    fitFont(g, '☕ ROOFTOP CAFÉ', 96, 680);
+    g.fillText('☕ ROOFTOP CAFÉ', 384, 100);
+  });
+  const signMat = new THREE.MeshStandardMaterial({ map: sign, roughness: 0.9 });
+  signMat.userData.outlineParameters = { visible: false };
+  group.add(mesh(new THREE.PlaneGeometry(3.2, 0.8).rotateY(-Math.PI / 2), signMat, p0.x - 0.1, roofY - 0.55, bz, false));
+  for (const dz of [-1.4, 1.4]) statics.add(mesh(new THREE.CylinderGeometry(0.01, 0.01, 0.35, 4), toon(TIMBER_DARK), p0.x - 0.08, roofY - 0.2, bz + dz, false));
+  // Pendant lamps along the counter, and pots hanging from the front beam.
+  const pendant = bulb(night, '#ffd9a0', 0.55);
+  for (const z of [-4.6, -2.3, 0, 2.3, 3.8]) {
+    statics.add(mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.75, 4), dark, bx + 0.1, roofY - 0.35, z, false));
+    statics.add(mesh(new THREE.ConeGeometry(0.17, 0.2, 14, 1, true), toon('#e9d3b0'), bx + 0.1, 2.5, z, true));
+    statics.add(mesh(new THREE.SphereGeometry(0.06, 8, 6), pendant, bx + 0.1, 2.46, z, false));
+  }
+  for (const z of [-4.2, -1.1, 2.0]) {
+    statics.add(mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.5, 4), dark, p0.x + 0.05, roofY - 0.3, z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.13, 0.09, 0.14, 10), toon('#c4703f'), p0.x + 0.05, 2.75, z));
+    for (const [dx, dy, dz] of [
+      [0, 0.1, 0],
+      [0.1, 0, 0.08],
+      [-0.1, -0.1, -0.06],
+      [0.05, -0.2, 0.05],
+    ])
+      statics.add(mesh(new THREE.SphereGeometry(0.1, 8, 6), toon('#5fb760'), p0.x + 0.05 + dx, 2.82 + dy, z + dz, false));
+  }
+
+  // String lights: over the pergola, and criss-crossing the tables from a pair of poles on their far side.
+  const bulbMats = ['#ffd9a0', '#ffe9c4'].map((c) => bulb(night, c, 0.45));
+  const glowAt: number[] = [];
+  const wire = toon('#2b2d42');
+  const festoon = (a: THREE.Vector3, b: THREE.Vector3, sag: number) => {
+    const mid = a.clone().add(b).multiplyScalar(0.5);
+    mid.y -= sag * 2;
+    const curve = new THREE.QuadraticBezierCurve3(a, mid, b);
+    statics.add(mesh(new THREE.TubeGeometry(curve, 20, 0.012, 4), wire, 0, 0, 0, false));
+    const n = Math.max(2, Math.round(curve.getLength() / 0.6));
+    for (let i = 1; i < n; i++) {
+      const p = curve.getPoint(i / n);
+      statics.add(mesh(new THREE.SphereGeometry(0.06, 8, 6), bulbMats[i % 2], p.x, p.y - 0.06, p.z, false));
+      glowAt.push(p.x, p.y - 0.06, p.z);
+    }
+  };
+  for (let z = p0.z + 0.6; z < p1.z; z += 2.9) festoon(new THREE.Vector3(p0.x, roofY - 0.1, z), new THREE.Vector3(p1.x, roofY - 0.1, z + 1.4), 0.25);
+  const poles = [-7.2, 4.2].map((z) => new THREE.Vector3(2.6, 3.4, z));
+  for (const p of poles) {
+    statics.add(mesh(new THREE.CylinderGeometry(0.05, 0.07, 3.4, 8), toon(TIMBER_DARK), p.x, 1.7, p.z, false));
+    statics.add(mesh(new THREE.CylinderGeometry(0.25, 0.3, 0.1, 12), dark, p.x, 0.05, p.z, false));
+    colliders.push({ minX: p.x - 0.12, maxX: p.x + 0.12, minZ: p.z - 0.12, maxZ: p.z + 0.12, top: 99 });
+  }
+  const corner = (z: number) => new THREE.Vector3(p0.x, roofY - 0.1, z);
+  festoon(poles[0], poles[1], 0.4);
+  festoon(poles[0], corner(p0.z), 0.35);
+  festoon(poles[1], corner(p1.z), 0.35);
+  festoon(poles[0], corner(p1.z), 0.45);
+  festoon(poles[1], corner(p0.z), 0.45);
+  // Their glow at night.
+  const glowGeo = new THREE.BufferGeometry();
+  glowGeo.setAttribute('position', new THREE.Float32BufferAttribute(glowAt, 3));
+  const halo = canvasTexture(64, 64, (g) => {
+    const grad = g.createRadialGradient(32, 32, 0, 32, 32, 32);
+    grad.addColorStop(0, 'rgba(255,255,255,1)');
+    grad.addColorStop(0.3, 'rgba(255,255,255,0.45)');
+    grad.addColorStop(1, 'rgba(255,255,255,0)');
+    g.fillStyle = grad;
+    g.fillRect(0, 0, 64, 64);
+  });
+  const glows = unpickable(new THREE.Points(glowGeo, new THREE.PointsMaterial({ size: 0.55, map: halo, color: '#ffd9a0', transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending })));
+  group.add(glows);
+  const counterLight = new THREE.PointLight('#ffc98a', 0, 11, 1.2);
+  counterLight.position.set(bx + 1.2, 2.8, bz);
+  group.add(counterLight);
+  const tableLight = new THREE.PointLight('#ffd9a0', 0, 13, 1.2);
+  tableLight.position.set(7, 3.2, -1);
+  group.add(tableLight);
+
+  // The barista, behind the counter, facing it, in an apron.
+  const barista = new Worker('Barista', '#8ecae6');
+  barista.setStatus('idle', false);
+  barista.setTask({ name: '☕ Barista', summary: "What'll it be? E at the counter" });
+  // (The worker's body is the first thing in it: the apron goes on that, so it moves with it.)
+  const apron = new THREE.Group();
+  const cloth = new THREE.MeshStandardMaterial({ color: '#b5651d', roughness: 0.8, side: THREE.DoubleSide });
+  apron.add(mesh(new THREE.CylinderGeometry(0.295, 0.295, 0.3, 16, 1, true, -Math.PI * 0.42, Math.PI * 0.84), cloth, 0, 0.53, 0, false));
+  apron.add(mesh(new THREE.BoxGeometry(0.16, 0.09, 0.02), toon('#8f4e15'), 0, 0.5, 0.3, false));
+  (barista.root.children[0] ?? barista.root).add(apron);
+  barista.root.position.set(bx + ROOF_BAR.depth / 2 + 0.7, 0, bz);
+  barista.root.rotation.y = -Math.PI / 2;
+  group.add(barista.root);
+  let tendZ = bz;
+  let wander = 0;
+
+  return {
+    pourAt: { x: bx + 0.2, y: top + 0.2, z: bz },
+    serve(z: number) {
+      tendZ = THREE.MathUtils.clamp(z, ROOF_BAR.minZ + 0.6, ROOF_BAR.maxZ - 0.6);
+      wander = 6;
+      barista.cheer(1.2);
+    },
+    update(t, dt, dusk) {
+      // The barista drifts along the counter between customers, and comes over when someone orders.
+      wander -= dt;
+      if (wander <= 0) {
+        wander = 5 + Math.random() * 6;
+        tendZ = ROOF_BAR.minZ + 1 + Math.random() * (ROOF_BAR.maxZ - ROOF_BAR.minZ - 2);
+      }
+      const bp = barista.root.position;
+      bp.z += THREE.MathUtils.clamp(tendZ - bp.z, -dt * 1.6, dt * 1.6);
+      barista.update(dt, t);
+      counterLight.intensity = 0.6 + 2.2 * dusk;
+      tableLight.intensity = 1.6 * dusk;
+      glows.material.opacity = dusk * 0.85;
+      glows.visible = dusk > 0.02;
+    },
+  };
+}
diff --git a/src/client/features/rooftop/garden.ts b/src/client/features/rooftop/garden.ts
new file mode 100644
index 000000000..6c87a6f39
--- /dev/null
+++ b/src/client/features/rooftop/garden.ts
@@ -0,0 +1,264 @@
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { GARDEN, GARDEN_POND, GARDEN_SEATS, THINK_SPOT } from '../../../shared/garden';
+import type { SeatDef } from '../../../shared/layout';
+import type { Collider, Interactable } from '../../world/types';
+import { boulder, moss, pond, steppingStones } from './garden/ground';
+import { FoliageBatch, Solids, hash3, rng } from './garden/leaves';
+import * as P from './garden/plants';
+import { bench, lounge } from './garden/seats';
+import { SOIL, lantern, pergola, planterBed, soundStone } from './garden/structures';
+
+// The thinking garden (see shared/garden.ts): a quiet clearing in the south-west of the roof, woven round
+// with timber planter beds of tree ferns, palms, banana plants, monstera, bamboo and tall grass, a
+// stepping-stone path from the east side, a small pond with benches and lounge chairs round it, and a
+// pergola hung with ivy over them. It's merged into a handful of meshes: the leaves (which sway), the
+// solids, the lantern glass. Whatever you can use (the seats, the sound stone) is a group of its own.
+
+export interface Garden {
+  group: THREE.Group;
+  colliders: Collider[];
+  /** The seats (kind 'seat'). The sound stone is for the caller to make usable: it's `soundStone`. */
+  interactables: Interactable[];
+  /** What the crosshair can land on: the seats and the sound stone. The plants don't get in its way. */
+  pickables: THREE.Object3D[];
+  /** Stands at THINK_SPOT: set its `userData.interact` to make it the ambient-sound control. */
+  soundStone: THREE.Object3D;
+  /** How dark it is, 0 by day to 1 at night: the lanterns glow brighter. */
+  setDark(dark: number): void;
+  update(t: number, dt: number, motion: boolean): void;
+}
+
+/** Smooth value noise, 0..1: soft patches where hash3 alone would be speckle. */
+function smooth(x: number, z: number): number {
+  const [ix, iz] = [Math.floor(x), Math.floor(z)];
+  const [fx, fz] = [x - ix, z - iz].map((v) => v * v * (3 - 2 * v));
+  const h = (a: number, b: number) => hash3(ix + a, 7, iz + b);
+  return THREE.MathUtils.lerp(THREE.MathUtils.lerp(h(0, 0), h(1, 0), fx), THREE.MathUtils.lerp(h(0, 1), h(1, 1), fx), fz);
+}
+
+const PERGOLA = { minX: -14, maxX: -7.4, minZ: 4.6, maxZ: 11.4, top: 2.5 } as const;
+
+/** Makes `obj` somewhere to sit (see SEATING): walk up to it, or look at it, and press E. */
+function seatable(obj: THREE.Object3D, seatId: string, radius: number, interactables: Interactable[], seat: SeatDef) {
+  const it: Interactable = { kind: 'seat', seatId, x: seat.x, y: seat.y, z: seat.z, radius };
+  interactables.push(it);
+  obj.userData.interact = it;
+}
+
+/** A collider round a `w` x `d` footprint at the seat, turned like it is. */
+function seatCollider(s: SeatDef, w: number, d: number, dz: number, top: number): Collider {
+  const [c, n] = [Math.abs(Math.cos(s.rotY)), Math.abs(Math.sin(s.rotY))];
+  const hw = (c * w + n * d) / 2;
+  const hd = (n * w + c * d) / 2;
+  const x = s.x + Math.sin(s.rotY) * dz;
+  const z = s.z + Math.cos(s.rotY) * dz;
+  return { minX: x - hw, maxX: x + hw, minZ: z - hd, maxZ: z + hd, top };
+}
+
+export function buildGarden(): Garden {
+  const group = new THREE.Group();
+  const interactables: Interactable[] = [];
+  const g: P.Grow = { f: new FoliageBatch(new THREE.Box3(new THREE.Vector3(GARDEN.minX - 0.4, 0, GARDEN.minZ - 0.5), new THREE.Vector3(GARDEN.maxX + 0.4, 0, GARDEN.maxZ + 0.4))), s: new Solids(), r: rng(20261003), t: P.templates(), colliders: [], glow: [] };
+  const { r } = g;
+  const jit = (v: number) => (r() - 0.5) * v;
+
+  // The ground: earth and moss in soft patches, a little uneven, fading into the deck on the east.
+  const ground = new THREE.PlaneGeometry(12.5, 9, 25, 18).rotateX(-Math.PI / 2).translate((GARDEN.minX - 5) / 2, 0, (GARDEN.minZ + GARDEN.maxZ) / 2);
+  const gp = ground.attributes.position;
+  const gcol = new Float32Array(gp.count * 4);
+  const [earth, mossy, lush, c] = [new THREE.Color('#4a3b2c'), new THREE.Color('#4a7a38'), new THREE.Color('#5f8f45'), new THREE.Color()];
+  for (let i = 0; i < gp.count; i++) {
+    const [x, z] = [gp.getX(i), gp.getZ(i)];
+    const n = smooth(x / 1.8, z / 1.8) * 0.65 + smooth(x / 0.7 + 9, z / 0.7) * 0.35;
+    c.copy(earth).lerp(mossy, THREE.MathUtils.smoothstep(n, 0.35, 0.6)).lerp(lush, THREE.MathUtils.smoothstep(n, 0.65, 0.85));
+    gcol.set([c.r, c.g, c.b, 1 - THREE.MathUtils.smoothstep(x + 0.8 * smooth(z * 1.3, 4), -6.4, -5.1)], i * 4);
+    gp.setY(i, 0.014 + 0.01 * smooth(x * 2, z * 2));
+  }
+  ground.setAttribute('color', new THREE.BufferAttribute(gcol, 4));
+  ground.computeVertexNormals();
+  const soil = new THREE.MeshStandardMaterial({ vertexColors: true, transparent: true, roughness: 1, polygonOffset: true, polygonOffsetFactor: -2, polygonOffsetUnits: -2 });
+  const dirt = new THREE.Mesh(ground, soil);
+  dirt.receiveShadow = true;
+  group.add(dirt);
+
+  // ---- Beds along the north, west and south sides, and a pair flanking the way in from the east --------
+  const beds: [number, number, number, number][] = [
+    [-17.4, -6.0, 3.55, 4.4],
+    [-17.4, -16.5, 4.4, 12.45],
+    [-16.5, -8.5, 11.6, 12.45],
+    [-5.6, -4.6, 3.6, 5.0],
+    [-5.6, -4.6, 11.2, 12.45],
+  ];
+  for (const b of beds) planterBed(g, ...b);
+  const y = SOIL;
+  // Which way plants at each edge fan their leaves: into the garden (yaw 0 is south).
+  const [S, N, E, W] = [0, Math.PI, Math.PI / 2, -Math.PI / 2];
+
+  /** A few flowers of one colour, bunched together. */
+  const bunch = (x: number, z: number, color: string, n: number, kind: 'head' | 'spike' = 'head', yy = y) => {
+    for (let i = 0; i < n; i++) P.flower(g, x + jit(0.35), yy, z + jit(0.3), 0.25 + 0.2 * r() + (kind === 'spike' ? 0.15 : 0), color, kind);
+  };
+
+  // North bed, west to east.
+  P.bamboo(g, -16.3, y, 3.95, 9, 3.4);
+  P.banana(g, -14.4, y, 3.95, 3.3, S, true);
+  P.treeFern(g, -12.5, y, 4.0, 2.1, S);
+  P.monstera(g, -10.5, y, 4.0, 1.25, S);
+  P.palm(g, -8.7, y, 3.95, 3.3, S);
+  P.treeFern(g, -7.0, y, 4.05, 1.6, S);
+  for (const x of [-15.4, -13.4, -11.6, -9.6, -7.9]) P.broadleaf(g, x, y, 4.2, 7, 0.55);
+  P.grass(g, -15.4, y, 3.8, 22, 1.5);
+  P.grass(g, -9.5, y, 3.75, 20, 1.3);
+  for (const [x, c] of [
+    [-13.4, P.PETALS.red],
+    [-11.7, P.PETALS.orange],
+    [-8.0, P.PETALS.purple],
+    [-15.5, P.PETALS.white],
+  ] as const)
+    bunch(x, 4.2, c, 4);
+
+  // West bed, south from the corner.
+  P.banana(g, -16.95, y, 6.3, 2.8, E);
+  P.grass(g, -16.95, y, 7.6, 24, 1.4);
+  P.palm(g, -16.95, y, 9.0, 3.1, E);
+  P.monstera(g, -16.95, y, 10.3, 1.0, E);
+  P.treeFern(g, -16.95, y, 11.5, 2.2, E);
+  for (const z of [5.4, 7.0, 8.2, 9.8, 11.0]) P.groundFern(g, -16.75, y, z, 1);
+  bunch(-16.8, 5.2, P.PETALS.orange, 4);
+  bunch(-16.8, 8.3, P.PETALS.purple, 4, 'spike');
+  bunch(-16.8, 10.0, P.PETALS.red, 4);
+
+  // South bed, west to east.
+  P.treeFern(g, -15.7, y, 12.0, 2.5, N);
+  P.grass(g, -14.5, y, 12.0, 22, 1.6);
+  P.bamboo(g, -12.8, y, 12.0, 8, 3.0);
+  P.monstera(g, -11.2, y, 12.0, 1.1, N);
+  P.palm(g, -9.2, y, 12.0, 3.0, N);
+  for (const x of [-15.1, -13.6, -11.9, -10.3, -9.0]) P.broadleaf(g, x, y, 11.85, 6, 0.5);
+  for (const [x, c] of [
+    [-15.0, P.PETALS.white],
+    [-13.4, P.PETALS.red],
+    [-10.0, P.PETALS.orange],
+  ] as const)
+    bunch(x, 11.85, c, 4);
+  bunch(-11.6, 11.8, P.PETALS.purple, 4, 'spike');
+
+  // The two beds either side of the way in.
+  P.palm(g, -5.1, y, 4.2, 3.0, W);
+  P.grass(g, -5.1, y, 4.7, 16, 1.2);
+  bunch(-5.1, 3.9, P.PETALS.orange, 3);
+  P.banana(g, -5.1, y, 11.9, 2.6, W);
+  P.groundFern(g, -5.1, y, 11.35, 1);
+  bunch(-5.1, 12.2, P.PETALS.red, 3);
+
+  // ---- On the ground: boulders, ferns and flowers in the corners, the pond and its path --------------
+  for (const [x, z, rr, h] of [
+    [-15.4, 6.5, 0.55, 0.5],
+    [-14.7, 7.0, 0.38, 0.35],
+    [-15.9, 7.1, 0.3, 0.3],
+    [-14.6, 10.3, 0.45, 0.4],
+    [-13.9, 10.7, 0.28, 0.26],
+  ] as const)
+    boulder(g, x, z, rr, h);
+  P.treeFern(g, -15.0, 0, 8.9, 1.9);
+  for (const [x, z] of [
+    [-14.9, 5.6],
+    [-16.0, 6.3],
+    [-14.2, 7.7],
+    [-15.7, 8.0],
+    [-14.2, 9.6],
+    [-15.3, 11.0],
+    [-13.2, 11.0],
+  ])
+    P.groundFern(g, x, 0, z, 1.1);
+  P.grass(g, -15.4, 0, 9.9, 18, 1.2);
+  P.grass(g, -14.9, 0, 5.2, 16, 1.0);
+  bunch(-14.2, 8.4, P.PETALS.purple, 3, 'spike', 0);
+  bunch(-14.1, 6.0, P.PETALS.white, 3, 'head', 0);
+  bunch(-13.0, 10.9, P.PETALS.orange, 3, 'head', 0);
+
+  const spot = GARDEN_POND;
+  const water = pond(g, spot.x, spot.z, spot.r);
+  P.flower(g, spot.x - 0.2, 0.1, spot.z + 0.12, 0.1, P.PETALS.pink, 'head');
+  P.flower(g, spot.x + 0.18, 0.1, spot.z - 0.2, 0.08, P.PETALS.white, 'head');
+  g.colliders.push({ minX: spot.x - 0.85, maxX: spot.x + 0.85, minZ: spot.z - 0.85, maxZ: spot.z + 0.85, top: 99 });
+  for (let i = 0; i < 6; i++) {
+    const a = 3.6 + i * 0.5;
+    P.groundFern(g, spot.x + Math.cos(a) * 1.25, 0, spot.z + Math.sin(a) * 1.25 + (Math.sin(a) > 0.4 ? 0.1 : -0.1), 0.8);
+  }
+  steppingStones(g, [
+    [-4.6, 9.0],
+    [-6.0, 8.5],
+    [-7.4, 9.0],
+    [-8.9, 9.1],
+    [-10.5, 9.4],
+    [-12.0, 9.0],
+    [-12.5, 8.3],
+  ]);
+  steppingStones(g, [
+    [-7.6, 8.7],
+    [-8.2, 7.5],
+    [-9.0, 6.8],
+    [-10.0, 6.4],
+  ]);
+  for (let i = 0; i < 16; i++) moss(g, -16 + r() * 11, 4.8 + r() * 6.4, 0.18 + 0.2 * r());
+  for (let i = 0; i < 12; i++) P.clover(g, -16.2 + r() * 11, 0, 4.6 + r() * 6.6, 0.3 + 0.2 * r(), 26);
+
+  // ---- The seats, under a pergola hung with ivy and lanterns, and the sound stone -----------------------
+  pergola(g, PERGOLA.minX, PERGOLA.maxX, PERGOLA.minZ, PERGOLA.maxZ, PERGOLA.top);
+  for (const [x, z] of [
+    [-12.3, PERGOLA.minZ],
+    [-9.2, PERGOLA.minZ],
+    [-8.9, PERGOLA.maxZ],
+    [-12.4, PERGOLA.maxZ],
+  ])
+    lantern(g, x, z, PERGOLA.top);
+  for (const [x, z] of [
+    [-5.7, 9.9],
+    [-8.0, 10.2],
+    [-12.2, 10.0],
+    [-12.4, 6.5],
+    [-7.2, 5.2],
+  ])
+    lantern(g, x, z);
+
+  const seats: THREE.Object3D[] = [];
+  for (const s of GARDEN_SEATS) {
+    const isBench = s.places.length > 1;
+    const obj = isBench ? bench() : lounge();
+    obj.position.set(s.x, 0, s.z);
+    obj.rotation.y = s.rotY;
+    seatable(obj, s.id, isBench ? 1.5 : 1.1, interactables, s);
+    g.colliders.push(isBench ? seatCollider(s, 1.7, 0.6, -0.08, 0.5) : seatCollider(s, 0.85, 1.25, -0.14, 0.5));
+    group.add(obj);
+    seats.push(obj);
+  }
+  const stone = soundStone(g, THINK_SPOT.x, THINK_SPOT.z);
+  group.add(stone);
+
+  // ---- Merge it all --------------------------------------------------------------------------------------
+  const wind = { value: 0 };
+  group.add(g.s.build(), g.f.build(wind), water);
+  const glowMat = new THREE.MeshStandardMaterial({ color: '#ffe2b0', emissive: '#ff9f45', emissiveIntensity: 0.9, roughness: 0.35 });
+  const glow = new THREE.Mesh(mergeGeometries(g.glow)!, glowMat);
+  group.add(glow);
+  const light = new THREE.PointLight('#ffb36b', 0, 9, 1.4);
+  light.position.set(-10.6, 2.1, 8);
+  group.add(light);
+
+  return {
+    group,
+    colliders: g.colliders,
+    interactables,
+    pickables: [...seats, stone],
+    soundStone: stone,
+    setDark(dark) {
+      glowMat.emissiveIntensity = 0.9 + 1.6 * dark;
+      light.intensity = 0.15 + 1.9 * dark;
+    },
+    update(t, _dt, motion) {
+      if (motion) wind.value = t;
+    },
+  };
+}
diff --git a/src/client/features/rooftop/garden/ground.ts b/src/client/features/rooftop/garden/ground.ts
new file mode 100644
index 000000000..83ab06615
--- /dev/null
+++ b/src/client/features/rooftop/garden/ground.ts
@@ -0,0 +1,85 @@
+import * as THREE from 'three';
+import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { hash3 } from './leaves';
+import { tint, type Grow } from './plants';
+
+// The garden's ground: boulders, moss, stepping stones and the pond.
+
+const TAU = Math.PI * 2;
+
+function at(x: number, y: number, z: number, rotY = 0, sx = 1, sy = 1, sz = 1): THREE.Matrix4 {
+  return new THREE.Matrix4().compose(new THREE.Vector3(x, y, z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), rotY), new THREE.Vector3(sx, sy, sz));
+}
+
+/** A rock: a roughened ball squashed to `h` high, half sunk in the ground, grey with moss on top. */
+export function boulder(g: Grow, x: number, z: number, r: number, h: number, hex = '#7d807b', collide = true) {
+  const geo = new THREE.IcosahedronGeometry(1, 2);
+  geo.deleteAttribute('uv');
+  geo.deleteAttribute('normal');
+  const ball = mergeVertices(geo);
+  const p = ball.attributes.position;
+  for (let i = 0; i < p.count; i++) {
+    const k = 1 + 0.26 * (hash3(p.getX(i) * 2.1, p.getY(i) * 2.1, p.getZ(i) * 2.1) - 0.5) + 0.08 * (hash3(p.getX(i) * 7, p.getY(i) * 7, p.getZ(i) * 7) - 0.5);
+    p.setXYZ(i, p.getX(i) * k, Math.max(p.getY(i) * k, -0.4), p.getZ(i) * k);
+  }
+  ball.computeVertexNormals();
+  g.s.add('stone', ball, tint(g, hex, 0.1), at(x, h * 0.32, z, g.r() * TAU, r, h, r * (0.85 + 0.2 * g.r())), 0.12, 0, 0.75);
+  if (collide) g.colliders.push({ minX: x - r * 0.85, maxX: x + r * 0.85, minZ: z - r * 0.85, maxZ: z + r * 0.85, top: h * 0.8 });
+}
+
+/** A low cushion of moss on the ground (or on a soil bed, at height `y`). */
+export function moss(g: Grow, x: number, z: number, r: number, y = 0) {
+  const geo = new THREE.SphereGeometry(1, 10, 5, 0, TAU, 0, Math.PI / 2);
+  const p = geo.attributes.position;
+  for (let i = 0; i < p.count; i++) {
+    const k = 1 + 0.3 * (hash3(p.getX(i) * 3, 0, p.getZ(i) * 3) - 0.5);
+    p.setXYZ(i, p.getX(i) * k, p.getY(i), p.getZ(i) * k);
+  }
+  geo.computeVertexNormals();
+  g.s.add('moss', geo, tint(g, ['#4e8a3a', '#5a9640', '#3f7a38'][Math.floor(g.r() * 3)], 0.1), at(x, y, z, g.r() * TAU, r, 0.03 + 0.05 * g.r(), r * (0.7 + 0.3 * g.r())), 0.14);
+}
+
+/** Flat stepping stones along a winding line through `pts`. */
+export function steppingStones(g: Grow, pts: [number, number][]) {
+  const curve = new THREE.CatmullRomCurve3(pts.map(([x, z]) => new THREE.Vector3(x, 0, z)));
+  const n = Math.round(curve.getLength() / 0.62);
+  for (let i = 0; i <= n; i++) {
+    const c = curve.getPoint(i / n);
+    const r = 0.17 + 0.07 * g.r();
+    const geo = new THREE.CylinderGeometry(1, 1.06, 1, 8);
+    g.s.add('stone', geo, tint(g, ['#8c908c', '#7d827e', '#9a9a92'][i % 3], 0.1), at(c.x + (g.r() - 0.5) * 0.12, 0.018, c.z + (g.r() - 0.5) * 0.12, g.r() * TAU, r * 1.15, 0.036, r * (0.8 + 0.2 * g.r())), 0.14, 0, 0.35);
+    if (g.r() < 0.4) moss(g, c.x + (g.r() - 0.5) * 0.5, c.z + (g.r() - 0.5) * 0.5, 0.1 + 0.08 * g.r());
+  }
+}
+
+/** A tiny pond: a ring of stones round dark water with lily pads and a pink lotus. Returns the water, to go in the scene as it is. */
+export function pond(g: Grow, x: number, z: number, r: number): THREE.Mesh {
+  g.s.add('soil', new THREE.CylinderGeometry(r + 0.05, r + 0.05, 0.06, 24), '#232a26', at(x, 0.03, z), 0.08);
+  const n = 12;
+  for (let i = 0; i < n; i++) {
+    const a = (i / n) * TAU;
+    const rr = 0.17 + 0.07 * g.r();
+    const geo = new THREE.IcosahedronGeometry(1, 1);
+    geo.deleteAttribute('uv');
+    geo.deleteAttribute('normal');
+    const s = mergeVertices(geo);
+    s.computeVertexNormals();
+    g.s.add('stone', s, tint(g, ['#8c908c', '#7a7f7a', '#9d9b92'][i % 3], 0.1), at(x + Math.cos(a) * (r + 0.1), 0.07, z + Math.sin(a) * (r + 0.1), g.r() * TAU, rr * 1.2, rr * 0.8, rr), 0.12, 0, 0.5);
+  }
+  const water = new THREE.Mesh(
+    new THREE.CircleGeometry(r, 32).rotateX(-Math.PI / 2),
+    new THREE.MeshStandardMaterial({ color: '#2f5b5a', roughness: 0.04, metalness: 0, transparent: true, opacity: 0.9, envMapIntensity: 1.6 }),
+  );
+  water.position.set(x, 0.095, z);
+  water.receiveShadow = true;
+  for (const [dx, dz, s] of [
+    [-0.25, 0.1, 0.14],
+    [0.2, -0.22, 0.12],
+    [0.12, 0.28, 0.1],
+    [-0.1, -0.3, 0.09],
+  ]) {
+    const pad = new THREE.CircleGeometry(s, 12, 0.4, 5.6).rotateX(-Math.PI / 2);
+    g.s.add('moss', pad, tint(g, '#3f7d3c', 0.1), at(x + dx * (r / 0.72), 0.099, z + dz * (r / 0.72), g.r() * TAU), 0.1);
+  }
+  return water;
+}
diff --git a/src/client/features/rooftop/garden/leaves.ts b/src/client/features/rooftop/garden/leaves.ts
new file mode 100644
index 000000000..12cd38fbb
--- /dev/null
+++ b/src/client/features/rooftop/garden/leaves.ts
@@ -0,0 +1,262 @@
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+
+// What the thinking garden is grown from: shaped leaf geometry (curved, tapered, folded along the midrib),
+// and two batches that merge everything into a few meshes, so hundreds of leaves cost one draw call. The
+// foliage batch bakes colour (a lighter midrib, darker edges and tips) and a sway weight into its vertices;
+// a vertex shader injection turns that into wind (see foliageMaterial).
+
+/** A small deterministic random, so the garden grows the same way on every load. */
+export function rng(seed: number): () => number {
+  return () => {
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export interface LeafShape {
+  rows: number;
+  /** Vertices across (odd): 3 is a V with a midrib, 5 a gentler curve. */
+  cols?: number;
+  length: number;
+  width: number;
+  /** Half-width at `t` along the leaf (0..1), for row `row`: lanceolate, ovate, or notched like a monstera. */
+  profile: (t: number, row: number) => number;
+  /** How far the tip droops, in radians of bend over the whole length. */
+  arch?: number;
+  /** How far the edges fall away from the midrib, as a fraction of the half-width. */
+  fold?: number;
+  /** The base lobes of a heart-shaped leaf reach back past the stalk by this fraction of the length. */
+  heart?: number;
+}
+
+/** (sin(pi * t^p))^q: a leaf that starts and ends at a point, fullest where `p` says. */
+export const lance = (p: number, q = 1) => (t: number) => Math.pow(Math.max(0, Math.sin(Math.PI * Math.pow(t, p))), q);
+
+/**
+ * One leaf lying along +z from the origin, its face up (+y). `uv` is (t along it, |u| across it from its
+ * midrib): what FoliageBatch colours it by.
+ */
+export function leafGeometry(s: LeafShape): THREE.BufferGeometry {
+  const { rows, length: L, width: W, arch = 0, fold = 0.25, cols = 3, heart = 0 } = s;
+  const pos: number[] = [];
+  const uv: number[] = [];
+  const idx: number[] = [];
+  let y = 0;
+  let z = 0;
+  for (let i = 0; i <= rows; i++) {
+    const t = i / rows;
+    if (i > 0) {
+      const a = arch * (t - 0.5 / rows);
+      z += (Math.cos(a) * L) / rows;
+      y -= (Math.sin(a) * L) / rows;
+    }
+    const a = arch * t;
+    const hw = (W / 2) * s.profile(t, i);
+    const back = heart * L * Math.pow(Math.max(0, 1 - t / 0.3), 2);
+    for (let c = 0; c < cols; c++) {
+      const u = (c / (cols - 1)) * 2 - 1;
+      const au = Math.abs(u);
+      const drop = fold * hw * Math.pow(au, 1.3);
+      const b = back * au;
+      // The centreline runs (0, -sin a, cos a) and its up is (0, cos a, sin a).
+      pos.push(u * hw, y - Math.cos(a) * drop + Math.sin(a) * b, z - Math.sin(a) * drop - Math.cos(a) * b);
+      uv.push(t, au);
+    }
+  }
+  for (let i = 0; i < rows; i++)
+    for (let c = 0; c < cols - 1; c++) {
+      const a = i * cols + c;
+      idx.push(a, a + cols, a + 1, a + 1, a + cols, a + cols + 1);
+    }
+  const g = new THREE.BufferGeometry();
+  g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+  g.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
+  g.setIndex(idx);
+  g.computeVertexNormals();
+  return g;
+}
+
+export interface FrondShape {
+  length: number;
+  pairs: number;
+  /** The longest leaflet, and its width as a fraction of that. */
+  leaflet: number;
+  ratio: number;
+  /** How the rachis (the frond's spine) arches, and how its leaflets fan out and droop. */
+  arch: number;
+  spread: number;
+  droop: number;
+  /** Rachis thickness. */
+  spine?: number;
+}
+
+/** A pinnate frond (a fern's, a palm's) along +z: an arched spine with a leaflet pair at every step. */
+export function frondGeometry(f: FrondShape): THREE.BufferGeometry {
+  const parts: THREE.BufferGeometry[] = [];
+  parts.push(leafGeometry({ rows: 6, length: f.length, width: f.spine ?? 0.03, profile: (t) => 1 - 0.7 * t, arch: f.arch, fold: 0 }));
+  const leaflet = leafGeometry({ rows: 3, length: 1, width: f.ratio, profile: lance(0.7, 0.8), arch: f.droop, fold: 0.5 });
+  const a = f.arch || 1e-4;
+  const [d, n, p, side, basis, scale] = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Matrix4(), new THREE.Vector3()];
+  const [xv, yv, zv] = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()];
+  for (let i = 0; i < f.pairs; i++) {
+    const t = 0.1 + (0.88 * i) / Math.max(1, f.pairs - 1);
+    const ang = a * t;
+    p.set(0, (-f.length * (1 - Math.cos(ang))) / a, (f.length * Math.sin(ang)) / a);
+    d.set(0, -Math.sin(ang), Math.cos(ang));
+    n.set(0, Math.cos(ang), Math.sin(ang));
+    const len = f.leaflet * Math.pow(Math.sin(Math.PI * (0.08 + 0.9 * t)), 0.6) * (1 - 0.25 * t);
+    for (const sx of [-1, 1]) {
+      side.set(sx, 0, 0);
+      zv.copy(d).multiplyScalar(Math.cos(f.spread)).addScaledVector(side, Math.sin(f.spread)).normalize();
+      yv.copy(n).addScaledVector(zv, -n.dot(zv)).normalize();
+      xv.crossVectors(yv, zv);
+      basis.makeBasis(xv, yv, zv).setPosition(p).scale(scale.set(len, len, len));
+      const g = leaflet.clone().applyMatrix4(basis);
+      const uv = g.attributes.uv;
+      for (let k = 0; k < uv.count; k++) uv.setX(k, 0.5 * t + 0.5 * uv.getX(k));
+      parts.push(g);
+    }
+  }
+  return mergeGeometries(parts)!;
+}
+
+const V = new THREE.Vector3();
+const Q = new THREE.Quaternion();
+const E = new THREE.Euler();
+const S = new THREE.Vector3();
+
+/** Where a leaf goes: at (x, y, z), growing along `yaw` (0 = +z), tipped `pitch` radians up, `s` times its size and `w` times as wide. */
+export function place(x: number, y: number, z: number, yaw: number, pitch: number, s = 1, roll = 0, w = 1): THREE.Matrix4 {
+  E.set(-pitch, yaw, roll, 'YXZ');
+  return new THREE.Matrix4().compose(V.set(x, y, z), Q.setFromEuler(E), S.set(s * w, s, s));
+}
+
+const ribDefault = new THREE.Color('#cbdc8e');
+const tmp = new THREE.Color();
+
+/** Every leaf of the garden: merged into one mesh, each vertex carrying its colour, how far it sways and its phase. */
+export class FoliageBatch {
+  private geos: THREE.BufferGeometry[] = [];
+  count = 0;
+
+  /** `limit` is the most room leaves may take on the deck (x, z): a leaf that reaches past it is held there, so nothing hangs over the glass. */
+  constructor(private limit: THREE.Box3) {}
+
+  /** `sway` is how far (m) the tip moves in the wind; the base stays put. */
+  add(tpl: THREE.BufferGeometry, m: THREE.Matrix4, color: THREE.Color, sway: number, phase: number, rib: THREE.Color = ribDefault) {
+    const g = tpl.clone().applyMatrix4(m);
+    const uv = g.attributes.uv;
+    const n = uv.count;
+    const pos = g.attributes.position;
+    for (let i = 0; i < n; i++) pos.setXYZ(i, THREE.MathUtils.clamp(pos.getX(i), this.limit.min.x, this.limit.max.x), pos.getY(i), THREE.MathUtils.clamp(pos.getZ(i), this.limit.min.z, this.limit.max.z));
+    const col = new Float32Array(n * 3);
+    const sw = new Float32Array(n);
+    for (let i = 0; i < n; i++) {
+      const t = uv.getX(i);
+      const u = uv.getY(i);
+      tmp.copy(color).multiplyScalar((0.84 + 0.24 * (1 - u)) * (1 - 0.12 * t));
+      if (u < 0.01) tmp.lerp(rib, 0.34 * (1 - 0.6 * t));
+      col.set([tmp.r, tmp.g, tmp.b], i * 3);
+      sw[i] = sway * (0.12 + 0.88 * t * t);
+    }
+    g.deleteAttribute('uv');
+    g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+    g.setAttribute('aSway', new THREE.BufferAttribute(sw, 1));
+    g.setAttribute('aPhase', new THREE.BufferAttribute(new Float32Array(n).fill(phase), 1));
+    this.geos.push(g);
+    this.count++;
+  }
+
+  build(wind: { value: number }): THREE.Mesh {
+    const m = new THREE.Mesh(mergeGeometries(this.geos)!, foliageMaterial(wind));
+    for (const g of this.geos) g.dispose();
+    m.castShadow = true;
+    m.receiveShadow = true;
+    // The wind moves vertices past the bounds they were measured with.
+    m.frustumCulled = false;
+    return m;
+  }
+}
+
+/** Leaves, double-sided and a little glossy, swaying in a wind that gusts and eases (`wind.value` is the time). */
+export function foliageMaterial(wind: { value: number }): THREE.MeshStandardMaterial {
+  const m = new THREE.MeshStandardMaterial({ vertexColors: true, side: THREE.DoubleSide, roughness: 0.52, metalness: 0 });
+  m.onBeforeCompile = (shader) => {
+    shader.uniforms.uTime = wind;
+    shader.vertexShader = shader.vertexShader
+      .replace('#include <common>', '#include <common>\nattribute float aSway;\nattribute float aPhase;\nuniform float uTime;')
+      .replace(
+        '#include <begin_vertex>',
+        `#include <begin_vertex>
+        float gust = 0.65 + 0.35 * sin(uTime * 0.37 + position.x * 0.35 + position.z * 0.27);
+        float ph = uTime * 1.35 + aPhase;
+        transformed.x += (sin(ph) + 0.4 * sin(ph * 2.3 + position.z)) * aSway * gust;
+        transformed.z += (cos(ph * 0.83) + 0.3 * sin(ph * 1.9)) * aSway * gust * 0.7;
+        transformed.y -= abs(sin(ph)) * aSway * 0.15;`,
+      );
+  };
+  return m;
+}
+
+export type Kind = 'wood' | 'stone' | 'soil' | 'moss' | 'iron' | 'cloth';
+
+const KINDS: Record<Kind, { roughness: number; metalness: number; cast: boolean }> = {
+  wood: { roughness: 0.8, metalness: 0, cast: true },
+  stone: { roughness: 0.92, metalness: 0, cast: true },
+  soil: { roughness: 1, metalness: 0, cast: false },
+  moss: { roughness: 1, metalness: 0, cast: false },
+  iron: { roughness: 0.42, metalness: 0.85, cast: true },
+  cloth: { roughness: 0.95, metalness: 0, cast: true },
+};
+
+/** A cheap hash of a point, 0..1: the grain that stops flat colours looking plastic. */
+export function hash3(x: number, y: number, z: number): number {
+  const s = Math.sin(x * 127.1 + y * 311.7 + z * 74.7) * 43758.5453;
+  return s - Math.floor(s);
+}
+
+/** Everything solid (trunks, timber, stone, soil, cloth): merged per material, colour in the vertices. */
+export class Solids {
+  private by = new Map<Kind, THREE.BufferGeometry[]>();
+
+  /** `noise` varies the colour from vertex to vertex; `grain` varies it in vertical streaks (bark, boards); `moss` greens whatever faces up (rocks). */
+  add(kind: Kind, geo: THREE.BufferGeometry, color: THREE.ColorRepresentation, m?: THREE.Matrix4, noise = 0.1, grain = 0, moss = 0) {
+    const g = geo.index ? geo.toNonIndexed() : geo.clone();
+    for (const k of Object.keys(g.attributes)) if (k !== 'position' && k !== 'normal') g.deleteAttribute(k);
+    if (m) g.applyMatrix4(m);
+    const base = new THREE.Color(color);
+    const green = new THREE.Color('#4b7d38');
+    const c = new THREE.Color();
+    const p = g.attributes.position;
+    const nrm = g.attributes.normal;
+    const col = new Float32Array(p.count * 3);
+    for (let i = 0; i < p.count; i++) {
+      const x = p.getX(i);
+      const y = p.getY(i);
+      const z = p.getZ(i);
+      const k = 1 + noise * (hash3(x * 9, y * 9, z * 9) - 0.5) * 2 + grain * (hash3(Math.round(x * 40), 0, Math.round(z * 40)) - 0.5) * 2;
+      c.copy(base).multiplyScalar(k);
+      if (moss) c.lerp(green, moss * THREE.MathUtils.smoothstep(nrm.getY(i) + 0.25 * hash3(x * 5, y * 5, z * 5), 0.35, 0.85));
+      col.set([c.r, c.g, c.b], i * 3);
+    }
+    g.setAttribute('color', new THREE.BufferAttribute(col, 3));
+    (this.by.get(kind) ?? this.by.set(kind, []).get(kind)!).push(g);
+  }
+
+  build(): THREE.Group {
+    const out = new THREE.Group();
+    for (const [kind, geos] of this.by) {
+      const o = KINDS[kind];
+      const mat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: o.roughness, metalness: o.metalness });
+      const m = new THREE.Mesh(mergeGeometries(geos)!, mat);
+      m.castShadow = o.cast;
+      m.receiveShadow = true;
+      out.add(m);
+      for (const g of geos) g.dispose();
+    }
+    return out;
+  }
+}
diff --git a/src/client/features/rooftop/garden/plants.ts b/src/client/features/rooftop/garden/plants.ts
new file mode 100644
index 000000000..1e769ae1a
--- /dev/null
+++ b/src/client/features/rooftop/garden/plants.ts
@@ -0,0 +1,250 @@
+import * as THREE from 'three';
+import type { Collider } from '../../../world/types';
+import { FoliageBatch, Solids, frondGeometry, lance, leafGeometry, place } from './leaves';
+
+// The garden's plants, one function each. They add leaves to the foliage batch and trunks and stems to
+// the solids, and leave a collider behind for what you can't walk through. (x, y, z) is where each
+// stands, y being the soil it grows from.
+
+/** The shaped leaves, each made once and stamped wherever a plant wants one. */
+export function templates() {
+  const notched = (t: number, row: number) => lance(0.62, 0.7)(t) * (row >= 3 && row <= 9 && row % 2 === 1 ? 0.42 : 1);
+  const ragged = (t: number, row: number) => lance(0.55, 0.5)(t) * (row >= 2 && row % 2 === 1 ? 0.84 : 1);
+  return {
+    fern: frondGeometry({ length: 1, pairs: 15, leaflet: 0.2, ratio: 0.2, arch: 1.15, spread: 1.15, droop: 0.7 }),
+    smallFern: frondGeometry({ length: 1, pairs: 9, leaflet: 0.22, ratio: 0.22, arch: 0.9, spread: 1.1, droop: 0.6 }),
+    palm: frondGeometry({ length: 1, pairs: 20, leaflet: 0.3, ratio: 0.07, arch: 1.05, spread: 0.85, droop: 0.9, spine: 0.025 }),
+    banana: leafGeometry({ rows: 8, cols: 5, length: 1, width: 0.36, profile: ragged, arch: 1.2, fold: 0.35 }),
+    monstera: leafGeometry({ rows: 12, cols: 5, length: 1, width: 0.95, profile: notched, arch: 0.55, fold: 0.3, heart: 0.14 }),
+    broad: leafGeometry({ rows: 5, cols: 3, length: 1, width: 0.5, profile: lance(0.6, 0.8), arch: 0.8, fold: 0.3 }),
+    bamboo: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.14, profile: lance(0.8, 0.8), arch: 0.3, fold: 0.5 }),
+    blade: leafGeometry({ rows: 6, cols: 3, length: 1, width: 0.03, profile: (t) => Math.pow(1 - t, 0.7), arch: 1.0, fold: 0.5 }),
+    ivy: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.95, profile: lance(0.6, 0.7), arch: 0.4, fold: 0.3, heart: 0.18 }),
+    petal: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.55, profile: lance(0.5, 0.7), arch: -0.6, fold: -0.3 }),
+    clover: leafGeometry({ rows: 4, cols: 3, length: 1, width: 1, profile: lance(0.5, 0.45), arch: 0.2, fold: 0.3 }),
+  };
+}
+
+export interface Grow {
+  f: FoliageBatch;
+  s: Solids;
+  r: () => number;
+  t: ReturnType<typeof templates>;
+  colliders: Collider[];
+  /** Lantern glass: the geometry that glows. */
+  glow: THREE.BufferGeometry[];
+}
+
+const lerp = THREE.MathUtils.lerp;
+
+/** A colour a little different from `hex` each time: no two leaves quite alike. */
+export function tint(g: Grow, hex: string | THREE.Color, amt = 0.07): THREE.Color {
+  return new THREE.Color(hex).offsetHSL((g.r() - 0.5) * 0.035, (g.r() - 0.5) * 0.12, (g.r() - 0.5) * amt);
+}
+
+const pick = <T>(g: Grow, list: readonly T[]): T => list[Math.floor(g.r() * list.length)];
+
+const fixed = (x: number, z: number, r: number): Collider => ({ minX: x - r, maxX: x + r, minZ: z - r, maxZ: z + r, top: 99 });
+
+/** A thin curved stem, a petiole or a vine, as a tube through `pts`. */
+export function stem(g: Grow, pts: THREE.Vector3[], radius: number, color: string, kind: 'moss' | 'wood' = 'moss') {
+  const geo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts), pts.length * 3, radius, 4);
+  g.s.add(kind, geo, color, undefined, 0.12);
+}
+
+interface TrunkOpts {
+  color: string;
+  grain?: number;
+  /** A ring (a node, a leaf scar) every `seg` meters, standing out by `bump`. */
+  seg?: number;
+  bump?: number;
+  /** How far the top leans off the foot, as a fraction of the height. */
+  lean?: THREE.Vector2;
+}
+
+/** A tapered, ringed trunk bending as it rises. Returns its top. */
+function trunk(g: Grow, x: number, y: number, z: number, h: number, r0: number, r1: number, o: TrunkOpts): THREE.Vector3 {
+  const pts: THREE.Vector2[] = [new THREE.Vector2(r0 * 1.1, 0)];
+  const seg = o.seg ?? h;
+  const n = Math.max(1, Math.round(h / seg));
+  for (let k = 0; k < n; k++) {
+    for (const [a, b] of [
+      [0.04, 1],
+      [0.94, 1],
+      [1, 1 + (o.bump ?? 0)],
+    ]) {
+      const t = Math.min(1, (k + a) / n);
+      pts.push(new THREE.Vector2(lerp(r0, r1, t) * (b as number), t * h));
+    }
+  }
+  const geo = new THREE.LatheGeometry(pts, 9);
+  const lean = o.lean ?? new THREE.Vector2();
+  const p = geo.attributes.position;
+  for (let i = 0; i < p.count; i++) {
+    const t = p.getY(i) / h;
+    p.setX(i, p.getX(i) + lean.x * h * t * t);
+    p.setZ(i, p.getZ(i) + lean.y * h * t * t);
+  }
+  geo.computeVertexNormals();
+  g.s.add('wood', geo, o.color, new THREE.Matrix4().makeTranslation(x, y, z), 0.1, o.grain ?? 0.15);
+  return new THREE.Vector3(x + lean.x * h, y + h, z + lean.y * h);
+}
+
+/** A ring of fronds or big leaves round `top`: the young ones steep in the middle, the old ones low and long. */
+function rosette(g: Grow, tpl: THREE.BufferGeometry, top: THREE.Vector3, n: number, len: [number, number], pitch: [number, number], hex: string, sway: number, face?: number) {
+  const phase = g.r() * 6.28;
+  for (let i = 0; i < n; i++) {
+    const k = i / Math.max(1, n - 1);
+    const yaw = face === undefined ? i * 2.39996 + g.r() * 0.3 : face + (((i * 0.618034 + g.r() * 0.08) % 1) - 0.5) * 3.8;
+    const s = lerp(len[0], len[1], 0.35 + 0.65 * k) * (0.9 + 0.2 * g.r());
+    g.f.add(tpl, place(top.x, top.y, top.z, yaw, lerp(pitch[0], pitch[1], k) + (g.r() - 0.5) * 0.15, s, (g.r() - 0.5) * 0.3), tint(g, hex), sway, phase + g.r() * 0.6);
+  }
+}
+
+/** A tree fern: a fibrous trunk under a crown of arching fronds, with a fiddlehead or two unfurling. (`face`, here and below: the way its leaves fan, when it stands at an edge; 0 is +z.) */
+export function treeFern(g: Grow, x: number, y: number, z: number, h: number, face?: number) {
+  const lean = new THREE.Vector2((g.r() - 0.5) * 0.08, (g.r() - 0.5) * 0.08);
+  const top = trunk(g, x, y, z, h, 0.14, 0.09, { color: '#4d3626', grain: 0.3, seg: 0.16, bump: 0.1, lean });
+  rosette(g, g.t.fern, top, 15, [1.0, 1.55], [1.2, 0.35], '#3f8236', 0.075, face);
+  for (let i = 0; i < 2; i++) {
+    const a = g.r() * 6.28;
+    const dx = Math.cos(a) * 0.1;
+    const dz = Math.sin(a) * 0.1;
+    stem(g, [new THREE.Vector3(top.x, top.y, top.z), new THREE.Vector3(top.x + dx, top.y + 0.22, top.z + dz), new THREE.Vector3(top.x + dx * 2.2, top.y + 0.36, top.z + dz * 2.2), new THREE.Vector3(top.x + dx * 2.6, top.y + 0.3, top.z + dz * 2.6), new THREE.Vector3(top.x + dx * 2.2, top.y + 0.27, top.z + dz * 2.2)], 0.014, '#8aa84a');
+  }
+  g.colliders.push(fixed(top.x * 0.5 + x * 0.5, top.z * 0.5 + z * 0.5, 0.18));
+}
+
+/** A palm: a ringed grey-brown trunk, a green crownshaft, and feathery fronds arching out and down. */
+export function palm(g: Grow, x: number, y: number, z: number, h: number, face?: number) {
+  const lean = new THREE.Vector2((g.r() - 0.5) * 0.14, (g.r() - 0.5) * 0.14);
+  const top = trunk(g, x, y, z, h, 0.1, 0.07, { color: '#7a6a55', grain: 0.2, seg: 0.1, bump: 0.12, lean });
+  g.s.add('wood', new THREE.CylinderGeometry(0.065, 0.07, 0.34, 8), '#8bb04e', new THREE.Matrix4().makeTranslation(top.x, top.y - 0.03, top.z), 0.08);
+  rosette(g, g.t.palm, top.clone().setY(top.y + 0.1), 11, [1.45, 1.85], [1.1, -0.1], '#3f8a3a', 0.09, face);
+  g.colliders.push(fixed(x + lean.x * h * 0.4, z + lean.y * h * 0.4, 0.15));
+}
+
+/** A banana plant: a thick pseudostem under a few huge, ragged, arching leaves; `bud` hangs a purple flower from it. */
+export function banana(g: Grow, x: number, y: number, z: number, h: number, face?: number, bud = false) {
+  const top = trunk(g, x, y, z, h * 0.72, 0.15, 0.09, { color: '#8aa45a', grain: 0.22, lean: new THREE.Vector2((g.r() - 0.5) * 0.06, (g.r() - 0.5) * 0.06) });
+  rosette(g, g.t.banana, top, 8, [1.5, 2.05], [1.15, 0.4], '#5f9e36', 0.11, face);
+  if (bud) {
+    const a = g.r() * 6.28;
+    const p = (r: number, dy: number) => new THREE.Vector3(top.x + Math.cos(a) * r, top.y + dy, top.z + Math.sin(a) * r);
+    stem(g, [p(0, -0.1), p(0.2, 0), p(0.4, -0.15), p(0.42, -0.4)], 0.022, '#7a8f4a');
+    g.s.add('cloth', new THREE.SphereGeometry(1, 10, 8), '#5a1d4c', new THREE.Matrix4().compose(p(0.42, -0.58), new THREE.Quaternion(), new THREE.Vector3(0.07, 0.17, 0.07)), 0.12);
+  }
+  g.colliders.push(fixed(x, z, 0.2));
+}
+
+/** A monstera: big glossy split leaves on long arching stalks. */
+export function monstera(g: Grow, x: number, y: number, z: number, scale: number, face?: number) {
+  const phase = g.r() * 6.28;
+  const n = 9;
+  for (let i = 0; i < n; i++) {
+    const yaw = face === undefined ? i * 2.39996 + g.r() * 0.4 : face + (((i * 0.618034 + g.r() * 0.08) % 1) - 0.5) * 3.4;
+    const reach = (0.35 + 0.5 * g.r()) * scale;
+    const rise = (0.45 + 0.5 * g.r()) * scale;
+    const [dx, dz] = [Math.sin(yaw), Math.cos(yaw)];
+    stem(g, [new THREE.Vector3(x, y, z), new THREE.Vector3(x + dx * reach * 0.2, y + rise * 0.7, z + dz * reach * 0.2), new THREE.Vector3(x + dx * reach, y + rise, z + dz * reach)], 0.011 * scale, '#5b8f3d');
+    const s = (0.42 + 0.2 * g.r()) * scale;
+    g.f.add(g.t.monstera, place(x + dx * reach, y + rise, z + dz * reach, yaw + (g.r() - 0.5) * 0.5, 0.1 + g.r() * 0.35, s, (g.r() - 0.5) * 0.25), tint(g, '#2a6a3a', 0.08), 0.03, phase + g.r() * 0.5, new THREE.Color('#b6cf86'));
+  }
+}
+
+/** A clump of bamboo: slim ringed culms leaning a little apart, leafy only near the top. */
+export function bamboo(g: Grow, x: number, y: number, z: number, culms: number, h: number) {
+  const phase = g.r() * 6.28;
+  for (let i = 0; i < culms; i++) {
+    const a = g.r() * 6.28;
+    const off = 0.05 + g.r() * 0.3;
+    const ch = h * (0.75 + 0.25 * g.r());
+    const lean = new THREE.Vector2(Math.cos(a) * (0.03 + 0.07 * g.r()), Math.sin(a) * (0.03 + 0.07 * g.r()));
+    const bx = x + Math.cos(a) * off;
+    const bz = z + Math.sin(a) * off;
+    const top = trunk(g, bx, y, bz, ch, 0.026, 0.014, { color: pick(g, ['#8aa84a', '#a3b45a', '#6f9440']), grain: 0.1, seg: 0.32, bump: 0.45, lean });
+    const phase2 = phase + g.r() * 0.5;
+    for (let h2 = ch * 0.55; h2 < ch; h2 += 0.3) {
+      const t = h2 / ch;
+      const px = bx + lean.x * h2 * t;
+      const pz = bz + lean.y * h2 * t;
+      for (let k = 0; k < 3; k++) {
+        const yaw = g.r() * 6.28;
+        const pitch = -0.3 + g.r() * 0.7;
+        const s = (0.2 + 0.1 * g.r()) * (1.2 - 0.5 * t + 0.3);
+        g.f.add(g.t.bamboo, place(px, y + h2, pz, yaw, pitch, s, 0, 1.2), tint(g, pick(g, ['#5f9a3a', '#78a843', '#4f8a38']), 0.1), 0.05, phase2 + g.r() * 0.7);
+      }
+    }
+    g.f.add(g.t.bamboo, place(top.x, top.y, top.z, g.r() * 6.28, 1.2, 0.26, 0, 1.2), tint(g, '#78a843'), 0.06, phase2);
+  }
+  g.colliders.push(fixed(x, z, 0.28 + culms * 0.012));
+}
+
+/** A tuft of tall grass: blades fanning up and arching over. `golds` mixes in some dry, straw-coloured ones. */
+export function grass(g: Grow, x: number, y: number, z: number, n: number, h: number, golds = 0.15) {
+  const phase = g.r() * 6.28;
+  for (let i = 0; i < n; i++) {
+    const a = g.r() * 6.28;
+    const off = g.r() * 0.12;
+    const hex = g.r() < golds ? pick(g, ['#c3b560', '#b5a552']) : pick(g, ['#86a64a', '#6f9a44', '#9ab455']);
+    g.f.add(g.t.blade, place(x + Math.cos(a) * off, y, z + Math.sin(a) * off, a, 1.0 + g.r() * 0.45, h * (0.6 + 0.5 * g.r()), (g.r() - 0.5) * 0.4, 0.8 + g.r() * 0.9), tint(g, hex, 0.1), 0.16, phase + g.r() * 0.9, new THREE.Color('#d9e3a2'));
+  }
+}
+
+/** A mound of broad leaves, a hosta or an aspidistra. */
+export function broadleaf(g: Grow, x: number, y: number, z: number, n: number, s: number, hex = '#3f8a3e') {
+  const phase = g.r() * 6.28;
+  for (let i = 0; i < n; i++) {
+    const k = i / n;
+    g.f.add(g.t.broad, place(x + (g.r() - 0.5) * 0.12, y, z + (g.r() - 0.5) * 0.12, i * 2.39996, lerp(1.25, 0.55, k), s * (0.7 + 0.5 * g.r()), (g.r() - 0.5) * 0.4), tint(g, hex), 0.04, phase + g.r() * 0.5);
+  }
+}
+
+/** A small fern for the ground: a rosette of low fronds. */
+export function groundFern(g: Grow, x: number, y: number, z: number, s: number) {
+  rosette(g, g.t.smallFern, new THREE.Vector3(x, y, z), 9, [0.5 * s, 0.8 * s], [0.95, 0.3], '#4a8f3c', 0.045);
+}
+
+/** A patch of clover or sorrel: little round leaves lying on the ground. */
+export function clover(g: Grow, x: number, y: number, z: number, radius: number, n: number) {
+  for (let i = 0; i < n; i++) {
+    const a = g.r() * 6.28;
+    const d = Math.sqrt(g.r()) * radius;
+    g.f.add(g.t.clover, place(x + Math.cos(a) * d, y + 0.02 + g.r() * 0.04, z + Math.sin(a) * d, g.r() * 6.28, 0.05 + g.r() * 0.2, 0.08 + g.r() * 0.06, g.r() * 6.28), tint(g, pick(g, ['#5e9e44', '#6aa94c', '#4e8f3e']), 0.1), 0.01, g.r() * 6.28, new THREE.Color('#a8cf7e'));
+  }
+}
+
+export const PETALS = { red: '#9d1128', orange: '#e86a1b', purple: '#6d3a9c', white: '#f4efe4', pink: '#d94f7a', gold: '#f0b429' } as const;
+
+/** A flower on a stalk: a ring of petals round a gold eye (`head`), or a spike of small blooms up the top of the stem (`spike`). */
+export function flower(g: Grow, x: number, y: number, z: number, h: number, color: string, kind: 'head' | 'spike' = 'head') {
+  const sx = (g.r() - 0.5) * 0.12;
+  const sz = (g.r() - 0.5) * 0.12;
+  stem(g, [new THREE.Vector3(x, y, z), new THREE.Vector3(x + sx * 0.4, y + h * 0.5, z + sz * 0.4), new THREE.Vector3(x + sx, y + h, z + sz)], 0.006, '#4f7f35');
+  const [tx, tz] = [x + sx, z + sz];
+  const phase = g.r() * 6.28;
+  if (kind === 'head') {
+    const s = 0.06 + g.r() * 0.04;
+    const n = 8;
+    for (let i = 0; i < n; i++) g.f.add(g.t.petal, place(tx, y + h, tz, (i / n) * 6.28 + g.r() * 0.2, 0.55 + g.r() * 0.2, s), tint(g, color, 0.12), 0.012, phase, new THREE.Color(color).multiplyScalar(0.8));
+    for (let i = 0; i < 3; i++) g.f.add(g.t.petal, place(tx, y + h + 0.004, tz, (i / 3) * 6.28, 1.35, s * 0.35), new THREE.Color('#e8b92f'), 0.01, phase);
+  } else {
+    for (let k = 0; k < 14; k++) {
+      const t = 0.5 + 0.5 * (k / 14);
+      const a = k * 2.4;
+      g.f.add(g.t.petal, place(x + sx * t * t + Math.cos(a) * 0.012, y + h * t, z + sz * t * t + Math.sin(a) * 0.012, a, 0.9 - 0.9 * (k / 14), 0.05 * (1.2 - k / 20), 0), tint(g, color, 0.12), 0.012, phase);
+    }
+  }
+}
+
+/** A hanging strand of ivy: a thin vine with heart-shaped leaves along it. */
+export function ivyStrand(g: Grow, x: number, y: number, z: number, len: number) {
+  const sway = (g.r() - 0.5) * 0.15;
+  const pt = (t: number) => new THREE.Vector3(x + sway * t * t + Math.sin(t * 5 + x) * 0.025, y - len * t, z + Math.cos(t * 4 + z) * 0.025);
+  stem(g, [pt(0), pt(0.33), pt(0.66), pt(1)], 0.006, '#4a6b32');
+  const phase = g.r() * 6.28;
+  for (let d = 0.05; d < len; d += 0.09 + g.r() * 0.05) {
+    const p = pt(d / len);
+    g.f.add(g.t.ivy, place(p.x, p.y, p.z, g.r() * 6.28, -0.5 - g.r() * 0.6, 0.07 + 0.04 * g.r(), g.r() - 0.5), tint(g, pick(g, ['#2f6b34', '#3d7d3a', '#4a8a40']), 0.1), 0.025, phase + g.r() * 0.4, new THREE.Color('#9cc47a'));
+  }
+}
diff --git a/src/client/features/rooftop/garden/seats.ts b/src/client/features/rooftop/garden/seats.ts
new file mode 100644
index 000000000..a1d220891
--- /dev/null
+++ b/src/client/features/rooftop/garden/seats.ts
@@ -0,0 +1,51 @@
+import * as THREE from 'three';
+import { Solids } from './leaves';
+import { box } from './structures';
+
+// The garden's seats. Each is a group of its own (its seat's interactable hangs on it), local +z the way
+// you face, with its few meshes merged by material.
+
+/** A low wooden bench with a slatted back and a linen cushion, 1.6 m long. */
+export function bench(): THREE.Group {
+  const s = new Solids();
+  const wood = '#8f6038';
+  for (const sx of [-1, 1]) {
+    for (const sz of [-1, 1]) box(s, 'wood', '#6e4528', 0.07, 0.4, 0.07, sx * 0.7, 0.2, sz * 0.17);
+    box(s, 'wood', '#6e4528', 0.06, 0.5, 0.06, sx * 0.7, 0.62, -0.23, 0, -0.1);
+    box(s, 'wood', '#6e4528', 0.05, 0.05, 0.42, sx * 0.7, 0.3, 0);
+  }
+  for (const z of [-0.18, -0.06, 0.06, 0.18]) box(s, 'wood', wood, 1.62, 0.035, 0.105, 0, 0.42, z);
+  for (const y of [0.58, 0.7, 0.82]) box(s, 'wood', wood, 1.62, 0.1, 0.025, 0, y, -0.24 - (y - 0.58) * 0.12, 0, -0.1);
+  box(s, 'cloth', '#c9b99a', 1.3, 0.05, 0.4, 0, 0.465, 0.03, 0, 0, 0.05, 0);
+  box(s, 'cloth', '#7f9a6b', 0.36, 0.3, 0.09, -0.42, 0.65, -0.16, 0, -0.5, 0.06, 0);
+  return finish(s);
+}
+
+/** A reclined timber lounge chair with arms and cushions. */
+export function lounge(): THREE.Group {
+  const s = new Solids();
+  const wood = '#946440';
+  for (const sx of [-1, 1]) {
+    box(s, 'wood', '#6e4528', 0.05, 0.05, 0.9, sx * 0.31, 0.22, 0.02, 0, -0.14);
+    box(s, 'wood', '#6e4528', 0.05, 0.3, 0.05, sx * 0.31, 0.15, 0.32);
+    box(s, 'wood', '#6e4528', 0.05, 0.28, 0.05, sx * 0.31, 0.14, -0.28);
+    // The back posts reach up and back, the arm rests on a post at the front.
+    box(s, 'wood', '#6e4528', 0.05, 0.85, 0.04, sx * 0.31, 0.62, -0.52, 0, -0.52);
+    box(s, 'wood', '#6e4528', 0.045, 0.28, 0.045, sx * 0.34, 0.34, 0.3);
+    box(s, 'wood', wood, 0.09, 0.03, 0.85, sx * 0.34, 0.49, -0.02);
+  }
+  for (let i = 0; i < 6; i++) box(s, 'wood', wood, 0.62, 0.03, 0.09, 0, 0.25 + i * 0.012, -0.22 + i * 0.1, 0, -0.14);
+  for (let i = 0; i < 5; i++) {
+    const d = 0.18 + i * 0.16;
+    box(s, 'wood', wood, 0.62, 0.1, 0.025, 0, 0.27 + d * 0.87, -0.3 - d * 0.5, 0, -0.52);
+  }
+  box(s, 'cloth', '#c4683f', 0.54, 0.07, 0.56, 0, 0.3, 0.02, 0, -0.14, 0.05, 0);
+  box(s, 'cloth', '#c4683f', 0.54, 0.62, 0.07, 0, 0.65, -0.47, 0, -0.52, 0.05, 0);
+  return finish(s);
+}
+
+function finish(s: Solids): THREE.Group {
+  const g = new THREE.Group();
+  g.add(s.build());
+  return g;
+}
diff --git a/src/client/features/rooftop/garden/structures.ts b/src/client/features/rooftop/garden/structures.ts
new file mode 100644
index 000000000..c5100a1ff
--- /dev/null
+++ b/src/client/features/rooftop/garden/structures.ts
@@ -0,0 +1,88 @@
+import * as THREE from 'three';
+import type { Kind, Solids } from './leaves';
+import { ivyStrand, tint, type Grow } from './plants';
+
+// What the garden is built with: timber planter beds, the pergola over the seats, lanterns, and the
+// sound stone.
+
+const TIMBER = ['#8a5a36', '#9a6a42', '#7a4d2e', '#936240'];
+
+/** A box of `w` x `h` x `d` centred at (x, y, z), turned about y and then tipped about x. */
+export function box(s: Solids, kind: Kind, color: string, w: number, h: number, d: number, x: number, y: number, z: number, rotY = 0, rotX = 0, noise = 0.08, grain = 0.12) {
+  const m = new THREE.Matrix4().compose(new THREE.Vector3(x, y, z), new THREE.Quaternion().setFromEuler(new THREE.Euler(rotX, rotY, 0, 'YXZ')), new THREE.Vector3(1, 1, 1));
+  s.add(kind, new THREE.BoxGeometry(w, h, d), color, m, noise, grain);
+}
+
+/** How high a planter bed's soil is. */
+export const SOIL = 0.42;
+
+/** A raised planter bed of timber boards filled with dark soil. */
+export function planterBed(g: Grow, x0: number, x1: number, z0: number, z1: number) {
+  const [w, d, cx, cz] = [x1 - x0, z1 - z0, (x0 + x1) / 2, (z0 + z1) / 2];
+  const wood = () => TIMBER[Math.floor(g.r() * TIMBER.length)];
+  for (const row of [0, 1]) {
+    const y = 0.12 + row * 0.23;
+    for (const sz of [-1, 1]) box(g.s, 'wood', wood(), w, 0.21, 0.05, cx, y, cz + sz * (d / 2 - 0.025));
+    for (const sx of [-1, 1]) box(g.s, 'wood', wood(), 0.05, 0.21, d - 0.1, cx + sx * (w / 2 - 0.025), y, cz);
+  }
+  for (const sx of [-1, 1])
+    for (const sz of [-1, 1]) box(g.s, 'wood', '#6e4528', 0.08, 0.5, 0.08, cx + sx * (w / 2 - 0.04), 0.25, cz + sz * (d / 2 - 0.04));
+  // The cap along the top, a little proud of the boards.
+  for (const sz of [-1, 1]) box(g.s, 'wood', '#a06f48', w + 0.04, 0.035, 0.1, cx, 0.475, cz + sz * (d / 2 - 0.04));
+  for (const sx of [-1, 1]) box(g.s, 'wood', '#a06f48', 0.1, 0.035, d - 0.06, cx + sx * (w / 2 - 0.04), 0.475, cz);
+  box(g.s, 'soil', '#3a281c', w - 0.1, 0.1, d - 0.1, cx, SOIL - 0.05, cz, 0, 0, 0.18, 0);
+  g.colliders.push({ minX: x0, maxX: x1, minZ: z0, maxZ: z1, top: 0.48 });
+}
+
+/** A lantern: iron frame round a glowing glass, standing on the ground, or hung from `hangFrom` on a short chain. */
+export function lantern(g: Grow, x: number, z: number, hangFrom?: number) {
+  const y = hangFrom === undefined ? 0 : hangFrom - 0.62;
+  const iron = '#2a2623';
+  box(g.s, 'iron', iron, 0.17, 0.03, 0.17, x, y + 0.015, z);
+  for (const sx of [-1, 1]) for (const sz of [-1, 1]) box(g.s, 'iron', iron, 0.015, 0.22, 0.015, x + sx * 0.075, y + 0.14, z + sz * 0.075);
+  g.s.add('iron', new THREE.ConeGeometry(0.13, 0.09, 4).rotateY(Math.PI / 4), iron, new THREE.Matrix4().makeTranslation(x, y + 0.295, z), 0);
+  g.s.add('iron', new THREE.TorusGeometry(0.035, 0.007, 5, 10), iron, new THREE.Matrix4().makeTranslation(x, y + 0.36, z), 0);
+  if (hangFrom !== undefined) box(g.s, 'iron', iron, 0.01, hangFrom - y - 0.36, 0.01, x, (hangFrom + y + 0.36) / 2, z);
+  g.glow.push(new THREE.BoxGeometry(0.12, 0.2, 0.12).translate(x, y + 0.14, z));
+}
+
+/** The pergola over the seats: timber posts, two beams, a lattice of rafters and slats, and ivy hanging from it. */
+export function pergola(g: Grow, x0: number, x1: number, z0: number, z1: number, top: number) {
+  for (const x of [x0, (x0 + x1) / 2, x1])
+    for (const z of [z0, z1]) {
+      box(g.s, 'wood', '#7a4d2e', 0.13, top, 0.13, x, top / 2, z);
+      box(g.s, 'wood', '#5e3a22', 0.2, 0.06, 0.2, x, 0.03, z);
+      g.colliders.push({ minX: x - 0.1, maxX: x + 0.1, minZ: z - 0.1, maxZ: z + 0.1, top: 99 });
+    }
+  for (const z of [z0, z1]) box(g.s, 'wood', '#8a5a36', x1 - x0 + 0.5, 0.2, 0.12, (x0 + x1) / 2, top + 0.1, z);
+  for (let x = x0 - 0.15; x <= x1 + 0.2; x += 0.55) box(g.s, 'wood', '#9a6a42', 0.08, 0.12, z1 - z0 + 0.5, x, top + 0.26, (z0 + z1) / 2);
+  for (let z = z0; z <= z1 + 0.01; z += 0.4) box(g.s, 'wood', '#a06f48', x1 - x0 + 0.7, 0.04, 0.04, (x0 + x1) / 2, top + 0.34, z);
+  // Ivy hanging from the beams and rafters.
+  for (let i = 0; i < 26; i++) {
+    const onBeam = i % 2 === 0;
+    const x = x0 + g.r() * (x1 - x0);
+    const z = onBeam ? (g.r() < 0.5 ? z0 : z1) + (g.r() - 0.5) * 0.1 : z0 + g.r() * (z1 - z0);
+    ivyStrand(g, x, top + (onBeam ? 0 : 0.2), z, 0.55 + g.r() * 1.0);
+  }
+}
+
+/**
+ * The sound stone: a standing stone with a wooden cap and two faint glowing rings round it. The meshes go
+ * into the garden's merged ones; the group returned is what you aim at (a hit volume, nothing visible).
+ */
+export function soundStone(g: Grow, x: number, z: number): THREE.Group {
+  const rock = new THREE.IcosahedronGeometry(0.4, 1);
+  rock.deleteAttribute('uv');
+  const turn = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.6);
+  g.s.add('stone', rock, tint(g, '#7b7f7a'), new THREE.Matrix4().compose(new THREE.Vector3(x, 0.36, z), turn, new THREE.Vector3(0.85, 1.0, 0.8)), 0.12, 0, 0.6);
+  box(g.s, 'wood', '#8a5a36', 0.34, 0.05, 0.34, x, 0.76, z, 0.6);
+  g.s.add('wood', new THREE.CylinderGeometry(0.07, 0.08, 0.04, 12), '#5e3a22', new THREE.Matrix4().makeTranslation(x, 0.8, z), 0.05);
+  g.glow.push(new THREE.TorusGeometry(0.27, 0.012, 6, 28).rotateX(Math.PI / 2).translate(x, 0.5, z));
+  g.glow.push(new THREE.TorusGeometry(0.37, 0.008, 6, 32).rotateX(Math.PI / 2).translate(x, 0.34, z));
+  g.colliders.push({ minX: x - 0.36, maxX: x + 0.36, minZ: z - 0.36, maxZ: z + 0.36, top: 0.85 });
+  const target = new THREE.Group();
+  const hit = new THREE.Mesh(new THREE.CylinderGeometry(0.42, 0.45, 0.85, 10), new THREE.MeshBasicMaterial({ visible: false }));
+  hit.position.set(x, 0.42, z);
+  target.add(hit);
+  return target;
+}
diff --git a/src/client/features/rooftop/index.ts b/src/client/features/rooftop/index.ts
index 3afbb00ee..a977c4d2c 100644
--- a/src/client/features/rooftop/index.ts
+++ b/src/client/features/rooftop/index.ts
@@ -1,24 +1,16 @@
 /**
  * Up on the roof: the roof itself, built the first time anyone goes up there and standing on as many
- * floors as the building has, and everything up there moving to the DJ's set. The bar, the DJ's booth
- * and the games up there are features/bar's and features/bargames'.
+ * floors as the building has. The café counter and its menu are features/bar's, and the games up there
+ * are features/bargames'.
  */
-import type * as THREE from 'three';
 import { roofDrop } from '../../../shared/layout';
 import type { Ctx } from '../../core/context';
 import { builtFloors, floorWings } from '../../core/floors';
 import { noOutline } from '../../core/outline';
-import { djFrame, djTime } from '../../dnb';
 import { store } from '../../state';
 import { buildRooftop, type Rooftop } from './world';
 
-export interface RooftopDeps {
-  /** The office's lights, which the roof's strobes flash as a drop lands. */
-  ambient: THREE.AmbientLight;
-  hemi: THREE.HemisphereLight;
-}
-
-export function installRooftop(ctx: Ctx, deps: RooftopDeps) {
+export function installRooftop(ctx: Ctx) {
   /** Up on the roof: built the first time anyone goes up there. */
   let roof: Rooftop | null = null;
   function theRoof(): Rooftop {
@@ -44,16 +36,9 @@ export function installRooftop(ctx: Ctx, deps: RooftopDeps) {
     if (ctx.upTop()) ctx.sky.setRoof(true, roofDrop(floors));
   }
   store.on('floors', syncRoof);
-  /** How far into the DJ's set it is, on the office's clock, so everyone up there hears the same bar. */
-  const djAt = () => djTime(store.officeNow());
   ctx.ticks.add('env', ({ dt, t }) => {
-    if (ctx.upTop() && roof) {
-      // Everything up there moves to the DJ's set; strobes flash the whole roof as a drop lands.
-      const strobe = roof.update(t, dt, djFrame(djAt()), { dark: ctx.sky.lampsOn, motion: !ctx.reduceMotion.matches });
-      deps.ambient.intensity += strobe * 1.5;
-      deps.hemi.intensity += strobe * 0.8;
-    }
+    if (ctx.upTop() && roof) roof.update(t, dt, { dark: ctx.sky.lampsOn, motion: !ctx.reduceMotion.matches });
   });
 
-  return { roof: () => roof, theRoof, roofFloors, syncRoof, djAt };
+  return { roof: () => roof, theRoof, roofFloors, syncRoof };
 }
diff --git a/src/client/features/rooftop/kit.ts b/src/client/features/rooftop/kit.ts
new file mode 100644
index 000000000..816b3cf47
--- /dev/null
+++ b/src/client/features/rooftop/kit.ts
@@ -0,0 +1,46 @@
+import type * as THREE from 'three';
+import { SEATING_BY_ID } from '../../../shared/layout';
+import type { Collider, Interactable } from '../../world/types';
+import type { NightParts } from '../../world/outside';
+
+// What the roof's pieces (world.ts, cafe.ts, cafe-seating.ts) are built with and into.
+
+/** Where a piece of the roof is built into: `statics` is merged into a few meshes once everything's in. */
+export interface RoofSite {
+  group: THREE.Group;
+  statics: THREE.Group;
+  colliders: Collider[];
+  interactables: Interactable[];
+  night: NightParts;
+}
+
+/** Warm timber, plaster and brass: the café's palette. */
+export const TIMBER = '#c89a63';
+export const TIMBER_DARK = '#8a5a3b';
+export const PLASTER = '#efe8dc';
+export const BRASS = '#d9a441';
+
+/**
+ * Leaves light out of looking and clicking, so the crosshair goes through it (a line of glow would
+ * otherwise be in the way of whatever's behind).
+ */
+export function unpickable<T extends THREE.Object3D>(obj: T): T {
+  obj.raycast = () => {};
+  return obj;
+}
+
+/** Makes `obj` somewhere to sit (see SEATING): walk up to it, or look at it, and press E. */
+export function seatable(obj: THREE.Object3D, seatId: string, radius: number, interactables: Interactable[]) {
+  const seat = SEATING_BY_ID.get(seatId)!;
+  const it: Interactable = { kind: 'seat', seatId, x: seat.x, y: seat.y, z: seat.z, radius };
+  interactables.push(it);
+  obj.userData.interact = it;
+}
+
+/** Sets `g`'s font to `px` pixels, or smaller so `text` fits in `width`. */
+export function fitFont(g: CanvasRenderingContext2D, text: string, px: number, width: number) {
+  const font = (n: number) => `900 ${n}px Nunito, ui-rounded, system-ui, sans-serif`;
+  g.font = font(px);
+  const w = g.measureText(text).width;
+  if (w > width) g.font = font(Math.floor((px * width) / w));
+}
diff --git a/src/client/features/rooftop/world.ts b/src/client/features/rooftop/world.ts
index bb589c7cd..3804824f2 100644
--- a/src/client/features/rooftop/world.ts
+++ b/src/client/features/rooftop/world.ts
@@ -1,32 +1,33 @@
 import * as THREE from 'three';
 import { AXE_LANE } from '../../../shared/bargames';
-import { DANCE_FLOOR, DJ_BOOTH, ELEVATOR, ELEVATOR_FRONT, FIRE_PIT, FLOOR, ROOF_BAR, ROOF_TABLES, SEATING_BY_ID, STAGE, WALL_HEIGHT, WALL_T } from '../../../shared/layout';
-import type { DjFrame } from '../../dnb';
+import { ELEVATOR, ELEVATOR_FRONT, FLOOR, SEATING_BY_ID, WALL_HEIGHT, WALL_T } from '../../../shared/layout';
 import { buildBarGames, type BarGamesView } from '../bargames/world';
-import { Worker } from '../../world/character';
 import { buildCity, type City } from '../../world/city';
 import { buildElevator, type Elevator } from '../../world/elevator';
 import type { Collider, Interactable } from '../../world/types';
 import { bulb, type NightParts } from '../../world/outside';
 import { canvasTexture } from '../../world/texture';
-import { mergeByMaterial, mesh, roundedBox, toon, toonUnique } from '../../world/toon';
-
-// The rooftop bar, on top of the building (see shared/rooftop.ts): a deck with a glass railing round
-// it and the city all around, the elevator's housing where you arrive, a DJ on a stage under a rig
-// of moving lights and lasers with an LED wall behind and a dance floor in front, a bar with a
-// bartender under a pergola hung with string lights, a lounge round a fire pit, sun loungers along
-// the south edge, and an axe-throwing lane and a dart board in the north-west corner (features/bargames/world.ts).
-// Everything that flashes goes by the DJ's set (see djFrame), so it's in time with the music and the
-// same for everyone up there.
+import { mergeByMaterial, mesh, toon } from '../../world/toon';
+import { THINK_SPOT } from '../../../shared/garden';
+import { buildCafe } from './cafe';
+import { buildCafeSeating } from './cafe-seating';
+import { buildChessCorner } from '../chess/world';
+import { buildGarden } from './garden';
+import { seatable } from './kit';
+
+// The rooftop café, on top of the building (see shared/rooftop.ts): a deck with a glass railing round
+// it and the city all around, the elevator's housing where you arrive, a café along the east edge
+// (cafe.ts) with tables and chairs to sit at (cafe-seating.ts), sun loungers along the south edge, and
+// an axe-throwing lane and a dart board in the north-west corner (features/bargames/world.ts). Two
+// parts of the roof are kept free for others (ROOF_CLEAR in shared/layout.ts).
 
 /** The building, walls included: the roof's edge. */
 const B = { minX: FLOOR.minX - WALL_T, maxX: FLOOR.maxX + WALL_T, minZ: FLOOR.minZ - WALL_T, maxZ: FLOOR.maxZ + WALL_T } as const;
-const INK = '#2b2d42';
 
 export interface RoofEnv {
   /** How dark it is, 0 by day to 1 at night: lights show up more. */
   dark: number;
-  /** Things may sweep and pulse (off when the system asks for less motion). */
+  /** Things may spin (off when the system asks for less motion). */
   motion: boolean;
 }
 
@@ -43,36 +44,14 @@ export interface Rooftop {
   setFloors(floors: number, wings?: readonly number[]): void;
   /** What looking or clicking can land on: everything but the city far below. */
   pickables: THREE.Object3D[];
-  /** Where drinks are poured, for the sound of one. */
+  /** Where drinks are made, for the sound of one. */
   pourAt: { x: number; y: number; z: number };
   /** The axe lane and the dart board, and what's thrown at them. */
   games: BarGamesView;
-  /** Someone ordered a drink at the bar, standing (or sitting) at `z` along it: the bartender comes over. */
+  /** Someone ordered at the counter, standing (or sitting) at `z` along it: the barista comes over. */
   serve(z: number): void;
-  /**
-   * Moves everything to the music. Returns how hard the strobes flash right now (0–1), for the
-   * scene's lights: on the snares as a drop lands, never quicker than a couple of times a second.
-   */
-  update(t: number, dt: number, f: DjFrame, env: RoofEnv): number;
-}
-
-/** 0–1, the same for the same tile on the same beat. */
-function sparkle(c: number, r: number, beat: number): number {
-  const x = Math.sin(c * 12.9898 + r * 78.233 + beat * 37.719) * 43758.5453;
-  return x - Math.floor(x);
-}
-
-/** Sets `g`'s font to `px` pixels, or smaller so `text` fits in `width`. */
-function fitFont(g: CanvasRenderingContext2D, text: string, px: number, width: number) {
-  const font = (n: number) => `900 ${n}px Nunito, ui-rounded, system-ui, sans-serif`;
-  g.font = font(px);
-  const w = g.measureText(text).width;
-  if (w > width) g.font = font(Math.floor((px * width) / w));
-}
-
-/** A color round the wheel (0–1) at full saturation, as an sRGB color. */
-function hue(c: THREE.Color, h: number, l = 0.55): THREE.Color {
-  return c.setHSL(((h % 1) + 1) % 1, 1, l, THREE.SRGBColorSpace);
+  /** Moves what moves: the city, the lamps as it gets dark, the barista, the fans. */
+  update(t: number, dt: number, env: RoofEnv): void;
 }
 
 /** Teak decking, the boards running east–west. */
@@ -95,146 +74,6 @@ function deckTexture(): THREE.CanvasTexture {
   });
 }
 
-/** A beam of light: a cone that fades along its length and toward its edges, added onto what's behind. */
-function beamMaterial(): THREE.ShaderMaterial {
-  const m = new THREE.ShaderMaterial({
-    uniforms: { color: { value: new THREE.Color() }, opacity: { value: 0 } },
-    vertexShader: `
-      varying float vAlong;
-      varying vec3 vN;
-      varying vec3 vView;
-      void main() {
-        vAlong = uv.y;
-        vec4 mv = modelViewMatrix * vec4( position, 1.0 );
-        vN = normalize( normalMatrix * normal );
-        vView = normalize( -mv.xyz );
-        gl_Position = projectionMatrix * mv;
-      }`,
-    fragmentShader: `
-      uniform vec3 color;
-      uniform float opacity;
-      varying float vAlong;
-      varying vec3 vN;
-      varying vec3 vView;
-      void main() {
-        float edge = pow( abs( dot( normalize( vN ), normalize( vView ) ) ), 1.6 );
-        float a = opacity * vAlong * vAlong * edge;
-        gl_FragColor = vec4( color * a, a );
-      }`,
-    transparent: true,
-    depthWrite: false,
-    blending: THREE.AdditiveBlending,
-    side: THREE.DoubleSide,
-  });
-  m.userData.outlineParameters = { visible: false };
-  return m;
-}
-
-/**
- * Leaves light out of looking and clicking, so the crosshair goes through it: a beam or a laser
- * (a line picks from a meter off it) would otherwise be in the way of whatever's behind.
- */
-function unpickable<T extends THREE.Object3D>(obj: T): T {
-  obj.raycast = () => {};
-  return obj;
-}
-
-/** Makes `obj` somewhere to sit (see SEATING): walk up to it, or look at it, and press E. */
-function seatable(obj: THREE.Object3D, seatId: string, radius: number, interactables: Interactable[]) {
-  const seat = SEATING_BY_ID.get(seatId)!;
-  const it: Interactable = { kind: 'seat', seatId, x: seat.x, y: seat.y, z: seat.z, radius };
-  interactables.push(it);
-  obj.userData.interact = it;
-}
-
-/** A collider round a box `w` wide and `d` deep at (x, z), turned by `rotY` (square turns only). */
-function boxCollider(x: number, z: number, w: number, d: number, rotY: number, top: number): Collider {
-  const turned = Math.abs(Math.sin(rotY)) > 0.5;
-  const hw = (turned ? d : w) / 2;
-  const hd = (turned ? w : d) / 2;
-  return { minX: x - hw, maxX: x + hw, minZ: z - hd, maxZ: z + hd, top };
-}
-
-// ---- The DJ ----------------------------------------------------------------------------------------
-
-/** The DJ: headphones on, cap on backwards, sunglasses at night, moving to the music. Faces +z. */
-class Dj {
-  readonly root = new THREE.Group();
-  private body = new THREE.Group();
-  private head = new THREE.Group();
-  /** Arms on the -x and +x sides (their right and left, facing +z). */
-  private armR: THREE.Group;
-  private armL: THREE.Group;
-
-  constructor() {
-    const skin = toon('#8d5524');
-    const shirt = toonUnique('#1d1d1d');
-    const pants = toon('#3d405b');
-    const ink = toon('#111111');
-    this.root.add(this.body);
-    this.body.add(mesh(new THREE.CapsuleGeometry(0.26, 0.28, 6, 12), shirt, 0, 0.72, 0));
-    // A print on the front of the tee.
-    this.body.add(mesh(new THREE.CircleGeometry(0.1, 16), toon('#06d6a0'), 0, 0.78, 0.262, false));
-    const head = this.head;
-    head.position.y = 1.32;
-    head.add(mesh(new THREE.SphereGeometry(0.34, 20, 16), skin));
-    // The cap, on backwards.
-    const capMat = toon('#ef476f');
-    const cap = mesh(new THREE.SphereGeometry(0.36, 18, 10, 0, Math.PI * 2, 0, Math.PI / 2), capMat, 0, 0.04, 0);
-    head.add(cap);
-    head.add(mesh(new THREE.BoxGeometry(0.3, 0.03, 0.22), capMat, 0, 0.06, -0.4));
-    // Sunglasses.
-    head.add(mesh(new THREE.BoxGeometry(0.44, 0.09, 0.05), ink, 0, 0.04, 0.31, false));
-    const smile = mesh(new THREE.TorusGeometry(0.06, 0.015, 6, 12, Math.PI), ink, 0, -0.1, 0.31, false);
-    smile.rotation.z = Math.PI;
-    head.add(smile);
-    // Headphones: a band over the cap and a cup on each ear.
-    const band = mesh(new THREE.TorusGeometry(0.39, 0.035, 8, 24, Math.PI), ink, 0, 0.02, 0, false);
-    head.add(band);
-    for (const s of [-1, 1]) {
-      const cup = mesh(new THREE.CylinderGeometry(0.12, 0.12, 0.09, 16), toon('#3d405b'), s * 0.36, 0.02, 0, false);
-      cup.rotation.z = Math.PI / 2;
-      head.add(cup);
-    }
-    this.body.add(head);
-    const limb = (len: number, r: number, mat: THREE.Material, x: number, y: number) => {
-      const pivot = new THREE.Group();
-      pivot.position.set(x, y, 0);
-      pivot.add(mesh(new THREE.CapsuleGeometry(r, len, 4, 8), mat, 0, -len / 2 - r / 2, 0));
-      this.body.add(pivot);
-      return pivot;
-    };
-    limb(0.22, 0.1, pants, -0.12, 0.42);
-    limb(0.22, 0.1, pants, 0.12, 0.42);
-    this.armR = limb(0.24, 0.08, shirt, -0.33, 0.9);
-    this.armL = limb(0.24, 0.08, shirt, 0.33, 0.9);
-    for (const arm of [this.armR, this.armL]) arm.add(mesh(new THREE.SphereGeometry(0.085, 12, 10), skin, 0, -0.38, 0));
-  }
-
-  update(t: number, f: DjFrame, motion: boolean) {
-    const e = f.energy;
-    const phase = f.beats % 1;
-    const m = motion ? 1 : 0.3;
-    // Bouncing on every beat, and nodding along.
-    this.body.position.y = -0.05 * e * m * Math.sin(phase * Math.PI);
-    this.head.rotation.x = 0.28 * m * (0.35 + 0.65 * e) * Math.max(0, Math.sin(phase * Math.PI * 2));
-    this.head.rotation.z = 0.06 * m * Math.sin(f.beats * Math.PI * 0.5);
-    // Their right hand's on the mixer, riding the faders.
-    this.armR.rotation.set(-1.15 + 0.05 * Math.sin(t * 7), 0, 0.25 + 0.06 * Math.sin(t * 3.1));
-    const fist = f.sinceDrop < 3.2 && motion;
-    if (fist) {
-      // The drop: a fist in the air, pumping on the beat.
-      this.armL.rotation.set(0, 0, 2.9 - 0.3 * Math.sin(phase * Math.PI));
-    } else if (f.part === 'build' || f.part === 'intro' || (f.part === 'breakdown' && f.beats % 16 < 8)) {
-      // One cup of the headphones held to their ear, listening for the next track.
-      this.armL.rotation.set(-0.2, 0, 2.55);
-    } else {
-      // Working the jog wheel.
-      this.armL.rotation.set(-1.2 + 0.08 * Math.sin(t * 11), 0, -0.2 + 0.12 * Math.sin(t * 5.3));
-    }
-  }
-}
-
 // ---- The rooftop --------------------------------------------------------------------------------
 
 export function buildRooftop(night: NightParts, floors: number): Rooftop {
@@ -246,13 +85,12 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   const d = B.maxZ - B.minZ;
   const cx = (B.minX + B.maxX) / 2;
   const cz = (B.minZ + B.maxZ) / 2;
-
   const city = buildCity(night);
   city.setFloors(floors);
   group.add(city.group);
 
   // The deck, and the slab it's laid on (the top of the building).
-  const deckMat = new THREE.MeshToonMaterial({ map: deckTexture(), gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+  const deckMat = new THREE.MeshStandardMaterial({ map: deckTexture() });
   deckMat.userData.outlineParameters = { visible: false };
   const deck = new THREE.Mesh(new THREE.PlaneGeometry(w, d).rotateX(-Math.PI / 2), deckMat);
   deck.position.set(cx, 0.002, cz);
@@ -293,7 +131,7 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
 
   // The elevator, in its housing: a back wall and a roof over the shaft (as tall as a floor), with a light on top.
   const elevator = buildElevator();
-  elevator.setSign('🍸 Rooftop bar');
+  elevator.setSign('☕ Rooftop café');
   group.add(elevator.group);
   colliders.push(...elevator.colliders);
   interactables.push(elevator.interactable);
@@ -305,404 +143,19 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   statics.add(mesh(new THREE.SphereGeometry(0.12, 10, 8), beacon, ELEVATOR.x, WALL_HEIGHT + 0.4, (B.minZ + ELEVATOR_FRONT) / 2, false));
   colliders.push({ minX: ELEVATOR.x - hw, maxX: ELEVATOR.x + hw, minZ: B.minZ, maxZ: FLOOR.minZ, top: 99 });
 
-  // ---- The stage ----------------------------------------------------------------------------------
-  const stageMat = toon('#2b2d42');
-  const sw = STAGE.maxX - STAGE.minX;
-  const sd = STAGE.maxZ - STAGE.minZ;
-  const scx = (STAGE.minX + STAGE.maxX) / 2;
-  const scz = (STAGE.minZ + STAGE.maxZ) / 2;
-  statics.add(mesh(new THREE.BoxGeometry(sw, STAGE.height, sd), stageMat, scx, STAGE.height / 2, scz));
-  colliders.push({ minX: STAGE.minX, maxX: STAGE.maxX, minZ: STAGE.minZ, maxZ: STAGE.maxZ, top: STAGE.height });
-  // A step up at its east end.
-  statics.add(mesh(new THREE.BoxGeometry(0.7, STAGE.height / 2, 1.8), stageMat, STAGE.maxX + 0.35, STAGE.height / 4, -10.7));
-  colliders.push({ minX: STAGE.maxX, maxX: STAGE.maxX + 0.7, minZ: -11.6, maxZ: -9.8, top: STAGE.height / 2 });
-  // An LED strip along its front edge.
-  const stripMat = new THREE.MeshBasicMaterial({ color: '#ff4fd8' });
-  stripMat.toneMapped = false;
-  group.add(mesh(new THREE.BoxGeometry(sw, 0.06, 0.02), stripMat, scx, STAGE.height - 0.08, STAGE.maxZ + 0.011, false));
-
-  // The DJ's table: decks and a mixer on it, and the DJ's name across the front. The DJ stands on a
-  // riser behind it, so the dance floor sees more than the top of their cap.
-  const table = new THREE.Group();
-  const tableY = STAGE.height;
-  const TH = 0.8;
-  const tz = DJ_BOOTH.z + 0.75;
-  const riser = 0.25;
-  table.add(mesh(new THREE.BoxGeometry(3.4, TH, 0.7), toon('#1d1d1d'), DJ_BOOTH.x, tableY + TH / 2, tz));
-  statics.add(mesh(new THREE.BoxGeometry(1.8, riser, 0.9), toon('#3d405b'), DJ_BOOTH.x, tableY + riser / 2, DJ_BOOTH.z - 0.05));
-  const nameplate = canvasTexture(512, 128, (g) => {
-    g.fillStyle = '#111018';
-    g.fillRect(0, 0, 512, 128);
-    fitFont(g, 'DJ MERGE CONFLICT', 64, 470);
-    g.textAlign = 'center';
-    g.textBaseline = 'middle';
-    g.shadowColor = '#ff4fd8';
-    g.shadowBlur = 18;
-    g.fillStyle = '#ffe3fb';
-    g.fillText('DJ MERGE CONFLICT', 256, 66);
-  });
-  const plateMat = new THREE.MeshBasicMaterial({ map: nameplate });
-  plateMat.toneMapped = false;
-  table.add(mesh(new THREE.PlaneGeometry(3.2, 0.8), plateMat, DJ_BOOTH.x, tableY + TH / 2, tz + 0.352, false));
-  const jog = new THREE.MeshBasicMaterial({ color: '#4cc9f0' });
-  jog.toneMapped = false;
-  for (const s of [-1, 1]) {
-    table.add(mesh(new THREE.BoxGeometry(0.62, 0.07, 0.5), toon('#3d405b'), DJ_BOOTH.x + s * 0.95, tableY + TH + 0.035, tz, false));
-    table.add(mesh(new THREE.CylinderGeometry(0.19, 0.19, 0.02, 24), jog, DJ_BOOTH.x + s * 0.95, tableY + TH + 0.08, tz - 0.03, false));
-  }
-  table.add(mesh(new THREE.BoxGeometry(0.5, 0.09, 0.45), toon('#565a75'), DJ_BOOTH.x, tableY + TH + 0.045, tz, false));
-  for (let i = 0; i < 4; i++) table.add(mesh(new THREE.CylinderGeometry(0.025, 0.025, 0.04, 8), toon('#ffd166'), DJ_BOOTH.x - 0.18 + i * 0.12, tableY + TH + 0.1, tz - 0.1, false));
-  group.add(table);
-  colliders.push({ minX: DJ_BOOTH.x - 1.7, maxX: DJ_BOOTH.x + 1.7, minZ: tz - 0.35, maxZ: tz + 0.35, top: 99 });
-  const djIt: Interactable = { kind: 'dj', x: DJ_BOOTH.x, z: STAGE.maxZ + 0.4, radius: 2.4 };
-  interactables.push(djIt);
-  table.userData.interact = djIt;
-
-  const dj = new Dj();
-  dj.root.position.set(DJ_BOOTH.x, STAGE.height + riser, DJ_BOOTH.z);
-  dj.root.userData.interact = djIt;
-  group.add(dj.root);
-
-  // Speaker stacks at either front corner of the stage; their cones thump with the kick.
-  const cones: THREE.Mesh[] = [];
-  const box = toon('#1d1d1d');
-  const coneMat = toon('#3d405b');
-  for (const sx of [STAGE.minX + 1.1, STAGE.maxX - 1.1]) {
-    const z = STAGE.maxZ - 0.55;
-    statics.add(mesh(new THREE.BoxGeometry(1.2, 1.0, 0.9), box, sx, STAGE.height + 0.5, z));
-    statics.add(mesh(new THREE.BoxGeometry(0.95, 1.35, 0.8), box, sx, STAGE.height + 1.675, z));
-    for (const [y, r] of [
-      [STAGE.height + 0.5, 0.36],
-      [STAGE.height + 1.35, 0.26],
-      [STAGE.height + 2.0, 0.16],
-    ]) {
-      const cone = mesh(new THREE.CylinderGeometry(r, r * 0.6, 0.06, 20), coneMat, sx, y, z + (y > STAGE.height + 1 ? 0.41 : 0.46), false);
-      cone.rotation.x = Math.PI / 2;
-      group.add(cone);
-      cones.push(cone);
-    }
-    colliders.push({ minX: sx - 0.6, maxX: sx + 0.6, minZ: z - 0.45, maxZ: z + 0.45, top: 99 });
-  }
-
-  // The LED wall behind the DJ.
-  const led = canvasTexture(512, 256);
-  const ledMat = new THREE.MeshBasicMaterial({ map: led });
-  ledMat.toneMapped = false;
-  const ledW = 8;
-  const ledH = 4;
-  group.add(mesh(new THREE.PlaneGeometry(ledW, ledH), ledMat, scx, STAGE.height + 0.35 + ledH / 2, STAGE.minZ + 0.2, false));
-  statics.add(mesh(new THREE.BoxGeometry(ledW + 0.3, ledH + 0.3, 0.25), toon('#1d1d1d'), scx, STAGE.height + 0.35 + ledH / 2, STAGE.minZ + 0.06));
-  colliders.push({ minX: scx - ledW / 2, maxX: scx + ledW / 2, minZ: STAGE.minZ, maxZ: STAGE.minZ + 0.35, top: 99 });
-  const ledCtx = (led.image as HTMLCanvasElement).getContext('2d')!;
-  let ledAt = -1;
-
-  // The rig: a truss tower either side of the stage and a beam across, with moving heads hanging off it.
-  const truss = toon('#c9d1d9');
-  const rigZ = STAGE.maxZ - 0.15;
-  const rigTop = 5.6;
-  for (const x of [STAGE.minX + 0.2, STAGE.maxX - 0.2]) {
-    for (const [dx, dz] of [
-      [-0.15, -0.15],
-      [0.15, -0.15],
-      [-0.15, 0.15],
-      [0.15, 0.15],
-    ])
-      statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, rigTop - STAGE.height, 6), truss, x + dx, (rigTop + STAGE.height) / 2, rigZ + dz, false));
-    for (let y = STAGE.height + 0.4; y < rigTop; y += 0.6) statics.add(mesh(new THREE.BoxGeometry(0.34, 0.03, 0.34), truss, x, y, rigZ, false));
-  }
-  for (const dy of [0, 0.3]) {
-    for (const dz of [-0.15, 0.15]) {
-      const bar = mesh(new THREE.CylinderGeometry(0.035, 0.035, sw - 0.4, 6), truss, scx, rigTop - dy, rigZ + dz, false);
-      bar.rotation.z = Math.PI / 2;
-      statics.add(bar);
-    }
-  }
-  interface Head {
-    pan: THREE.Group;
-    tilt: THREE.Group;
-    beam: THREE.Mesh<THREE.CylinderGeometry, THREE.ShaderMaterial>;
-    lens: THREE.MeshBasicMaterial;
-    i: number;
-  }
-  const heads: Head[] = [];
-  const beamLen = 18;
-  const beamGeo = new THREE.CylinderGeometry(0.09, 1.7, beamLen, 20, 1, true).translate(0, -beamLen / 2, 0);
-  for (let i = 0; i < 5; i++) {
-    const pan = new THREE.Group();
-    pan.position.set(STAGE.minX + 1.4 + i * ((sw - 2.8) / 4), rigTop - 0.45, rigZ);
-    const yoke = mesh(new THREE.BoxGeometry(0.34, 0.06, 0.12), toon('#1d1d1d'), 0, 0.18, 0, false);
-    pan.add(yoke);
-    const tilt = new THREE.Group();
-    tilt.add(mesh(new THREE.CylinderGeometry(0.13, 0.16, 0.36, 12).translate(0, -0.05, 0), toon('#1d1d1d'), 0, 0, 0, false));
-    const lens = new THREE.MeshBasicMaterial({ color: '#ffffff' });
-    lens.toneMapped = false;
-    tilt.add(mesh(new THREE.CircleGeometry(0.11, 16).rotateX(Math.PI / 2), lens, 0, -0.232, 0, false));
-    const beam = unpickable(new THREE.Mesh(beamGeo, beamMaterial()));
-    beam.position.y = -0.24;
-    beam.frustumCulled = false;
-    tilt.add(beam);
-    pan.add(tilt);
-    group.add(pan);
-    heads.push({ pan, tilt, beam, lens, i });
-  }
-
-  // Lasers from the front corners of the stage, fanning out over the dance floor into the sky.
-  const LASER_RAYS = 7;
-  const lasers = [STAGE.minX + 2.2, STAGE.maxX - 2.2].map((x, k) => {
-    const geo = new THREE.BufferGeometry();
-    geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(LASER_RAYS * 6), 3).setUsage(THREE.DynamicDrawUsage));
-    const mat = new THREE.LineBasicMaterial({ color: k ? '#ff2bd6' : '#39ff14', transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending });
-    const lines = unpickable(new THREE.LineSegments(geo, mat));
-    lines.frustumCulled = false;
-    group.add(lines);
-    statics.add(mesh(new THREE.BoxGeometry(0.3, 0.18, 0.3), toon('#1d1d1d'), x, STAGE.height + 0.09, STAGE.maxZ - 0.25, false));
-    return { lines, mat, from: new THREE.Vector3(x, STAGE.height + 0.2, STAGE.maxZ - 0.25), k };
-  });
-
-  // ---- The dance floor ----------------------------------------------------------------------------
-  const cols = Math.round(DANCE_FLOOR.maxX - DANCE_FLOOR.minX);
-  const rows = Math.round(DANCE_FLOOR.maxZ - DANCE_FLOOR.minZ);
-  const tileMat = new THREE.MeshBasicMaterial({ color: '#ffffff' });
-  tileMat.toneMapped = false;
-  const tiles = new THREE.InstancedMesh(new THREE.PlaneGeometry(0.94, 0.94).rotateX(-Math.PI / 2), tileMat, cols * rows);
-  const tileAt = new THREE.Matrix4();
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      tileAt.makeTranslation(DANCE_FLOOR.minX + c + 0.5, 0.012, DANCE_FLOOR.minZ + r + 0.5);
-      tiles.setMatrixAt(r * cols + c, tileAt);
-      tiles.setColorAt(r * cols + c, new THREE.Color('#222'));
-    }
-  }
-  tiles.receiveShadow = false;
-  group.add(tiles);
-  const underFloor = mesh(
-    new THREE.PlaneGeometry(cols, rows).rotateX(-Math.PI / 2),
-    toon('#15141c'),
-    (DANCE_FLOOR.minX + DANCE_FLOOR.maxX) / 2,
-    0.008,
-    (DANCE_FLOOR.minZ + DANCE_FLOOR.maxZ) / 2,
-    false,
-  );
-  group.add(underFloor);
-
-  // Colored washes over the dance floor.
-  const washes = [-1, 1].map((s) => {
-    const l = new THREE.PointLight('#ff4fd8', 0, 15, 1.2);
-    l.position.set((DANCE_FLOOR.minX + DANCE_FLOOR.maxX) / 2 + s * 2.6, 3.6, (DANCE_FLOOR.minZ + DANCE_FLOOR.maxZ) / 2);
-    group.add(l);
-    return l;
-  });
-
-  // ---- The bar ------------------------------------------------------------------------------------
-  const bar = new THREE.Group();
-  const bx = ROOF_BAR.x;
-  const blen = ROOF_BAR.maxZ - ROOF_BAR.minZ;
-  const bz = (ROOF_BAR.minZ + ROOF_BAR.maxZ) / 2;
-  const front = bx - ROOF_BAR.depth / 2;
-  bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth, ROOF_BAR.height - 0.06, blen), toon('#6b3f2a'), bx, (ROOF_BAR.height - 0.06) / 2, bz));
-  // Slats up the front of it.
-  for (let z = ROOF_BAR.minZ + 0.25; z < ROOF_BAR.maxZ; z += 0.5) bar.add(mesh(new THREE.BoxGeometry(0.03, ROOF_BAR.height - 0.3, 0.08), toon('#8a5a3b'), front - 0.012, ROOF_BAR.height / 2, z, false));
-  bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth + 0.2, 0.06, blen + 0.2), toon('#f4f1ea'), bx - 0.05, ROOF_BAR.height - 0.03, bz));
-  const footRail = mesh(new THREE.CylinderGeometry(0.03, 0.03, blen, 8), toon('#e9b949'), front - 0.2, 0.22, bz, false);
-  footRail.rotation.x = Math.PI / 2;
-  bar.add(footRail);
-  // A glow along its foot that shifts color with the music.
-  const barGlow = new THREE.MeshBasicMaterial({ color: '#4cc9f0' });
-  barGlow.toneMapped = false;
-  group.add(mesh(new THREE.BoxGeometry(0.02, 0.05, blen), barGlow, front - 0.02, 0.06, bz, false));
-  // Beer taps, and a few glasses waiting on the counter.
-  for (const z of [-0.6, 0, 0.6]) {
-    bar.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.4, 8), toon('#e9b949'), bx + 0.12, ROOF_BAR.height + 0.2, z, false));
-    bar.add(mesh(new THREE.BoxGeometry(0.03, 0.16, 0.03), toon(['#ef476f', '#06d6a0', '#ffd166'][Math.round(z / 0.6) + 1]), bx + 0.05, ROOF_BAR.height + 0.46, z, false));
-  }
-  group.add(bar);
-  colliders.push({ minX: front, maxX: bx + ROOF_BAR.depth / 2, minZ: ROOF_BAR.minZ, maxZ: ROOF_BAR.maxZ, top: ROOF_BAR.height });
-  const barIts = [-3.6, -0.6, 2.4].map((z): Interactable => ({ kind: 'bar', x: front - 0.7, z, radius: 1.7 }));
-  interactables.push(...barIts);
-  bar.userData.interact = barIts[1];
-
-  // The back bar: shelves of bottles against a warm glow, along the east edge.
-  const back = FLOOR.maxX - 0.35;
-  const shelf = toon('#4a2c1d');
-  bar.add(mesh(new THREE.BoxGeometry(0.6, 1.0, blen - 0.6), shelf, back, 0.5, bz));
-  const glowMat = new THREE.MeshBasicMaterial({ color: '#ffb55a' });
-  const glowPanel = mesh(new THREE.PlaneGeometry(blen - 1, 1.5).rotateY(-Math.PI / 2), glowMat, FLOOR.maxX - 0.08, 1.85, bz, false);
-  group.add(glowPanel);
-  const bottles = new THREE.Group();
-  const bottleColors = ['#2a9d8f', '#e9c46a', '#8ecae6', '#6a994e', '#bc4749', '#f4a261', '#dda15e'];
-  let k = 0;
-  for (const y of [1.15, 1.65, 2.15]) {
-    bar.add(mesh(new THREE.BoxGeometry(0.4, 0.04, blen - 1), shelf, FLOOR.maxX - 0.24, y - 0.02, bz, false));
-    for (let z = ROOF_BAR.minZ + 0.8; z < ROOF_BAR.maxZ - 0.6; z += 0.24) {
-      const h = 0.26 + ((k * 7) % 5) * 0.03;
-      const c = bottleColors[k++ % bottleColors.length];
-      bottles.add(mesh(new THREE.CylinderGeometry(0.045, 0.05, h, 8), toon(c), FLOOR.maxX - 0.25, y + h / 2, z, false));
-      bottles.add(mesh(new THREE.CylinderGeometry(0.015, 0.03, 0.08, 6), toon(c), FLOOR.maxX - 0.25, y + h + 0.04, z, false));
-    }
-  }
-  group.add(mergeByMaterial(bottles));
-  colliders.push({ minX: back - 0.3, maxX: FLOOR.maxX, minZ: ROOF_BAR.minZ + 0.3, maxZ: ROOF_BAR.maxZ - 0.3, top: 99 });
-
-  // A pergola over it, hung with string lights, and a neon sign facing the dance floor.
-  const wood = toon('#8a5a3b');
-  const p0 = { x: front - 0.9, z: ROOF_BAR.minZ - 0.8 };
-  const p1 = { x: FLOOR.maxX - 0.1, z: ROOF_BAR.maxZ + 0.8 };
-  const roofY = 3.3;
-  for (const x of [p0.x, p1.x]) {
-    for (const z of [p0.z, p1.z]) {
-      statics.add(mesh(new THREE.BoxGeometry(0.16, roofY, 0.16), wood, x, roofY / 2, z));
-      colliders.push({ minX: x - 0.1, maxX: x + 0.1, minZ: z - 0.1, maxZ: z + 0.1, top: 99 });
-    }
-    statics.add(mesh(new THREE.BoxGeometry(0.16, 0.22, p1.z - p0.z + 0.3), wood, x, roofY, (p0.z + p1.z) / 2));
-  }
-  for (let z = p0.z; z <= p1.z + 0.01; z += 0.55) statics.add(mesh(new THREE.BoxGeometry(p1.x - p0.x + 0.4, 0.08, 0.1), wood, (p0.x + p1.x) / 2, roofY + 0.15, z));
-  const neon = canvasTexture(768, 192, (g) => {
-    g.clearRect(0, 0, 768, 192);
-    g.font = '900 104px Nunito, ui-rounded, system-ui, sans-serif';
-    g.textAlign = 'center';
-    g.textBaseline = 'middle';
-    for (const [blur, color] of [
-      [36, '#ff4fd8'],
-      [14, '#ff4fd8'],
-      [0, '#ffe3fb'],
-    ] as const) {
-      g.shadowColor = '#ff4fd8';
-      g.shadowBlur = blur;
-      g.fillStyle = color;
-      g.fillText('🍸 SKY BAR', 384, 100);
-    }
-  });
-  const neonMat = new THREE.MeshBasicMaterial({ map: neon, transparent: true, depthWrite: false });
-  neonMat.toneMapped = false;
-  const sign = mesh(new THREE.PlaneGeometry(3.6, 0.9).rotateY(-Math.PI / 2), neonMat, p0.x - 0.1, roofY - 0.4, bz, false);
-  group.add(sign);
-
-  // The bartender, behind the bar, facing the counter.
-  const bartender = new Worker('Bartender', '#e76f51');
-  bartender.setStatus('idle', false);
-  bartender.setTask({ name: '🍸 Bartender', summary: "What'll it be? E at the bar" });
-  const tendX = bx + ROOF_BAR.depth / 2 + 0.7;
-  bartender.root.position.set(tendX, 0, bz);
-  bartender.root.rotation.y = -Math.PI / 2;
-  group.add(bartender.root);
-  let tendZ = bz;
-  let wander = 0;
-
-  // Bar stools along the counter.
-  for (let i = 1; i <= 6; i++) {
-    const s = SEATING_BY_ID.get(`roof-stool-${i}`)!;
-    const stool = new THREE.Group();
-    stool.add(mesh(new THREE.CylinderGeometry(0.2, 0.25, 0.03, 16), steel, 0, 0.015, 0, false));
-    stool.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.66, 8), steel, 0, 0.36, 0, false));
-    stool.add(mesh(new THREE.TorusGeometry(0.16, 0.015, 6, 16).rotateX(Math.PI / 2), steel, 0, 0.32, 0, false));
-    stool.add(mesh(new THREE.CylinderGeometry(0.22, 0.2, 0.1, 16), toon('#c1121f'), 0, 0.72, 0));
-    stool.position.set(s.x, 0, s.z);
-    seatable(stool, s.id, 0.75, interactables);
-    group.add(stool);
-  }
-
-  // String lights: over the pergola, and criss-crossing the dance floor from the rig to poles along the south side of it.
-  const bulbColors = ['#ffd166', '#ff8fa3', '#8ecae6', '#caffbf'];
-  const bulbMats = bulbColors.map((c) => bulb(night, c, 0.45));
-  const glowAt: number[] = [];
-  const glowColor: number[] = [];
-  const wire = toon(INK);
-  const festoon = (a: THREE.Vector3, b: THREE.Vector3, sag: number) => {
-    const mid = a.clone().add(b).multiplyScalar(0.5);
-    mid.y -= sag * 2;
-    const curve = new THREE.QuadraticBezierCurve3(a, mid, b);
-    statics.add(mesh(new THREE.TubeGeometry(curve, 20, 0.012, 4), wire, 0, 0, 0, false));
-    const n = Math.max(2, Math.round(curve.getLength() / 0.6));
-    for (let i = 1; i < n; i++) {
-      const p = curve.getPoint(i / n);
-      const j = i % bulbMats.length;
-      statics.add(mesh(new THREE.SphereGeometry(0.06, 8, 6), bulbMats[j], p.x, p.y - 0.06, p.z, false));
-      glowAt.push(p.x, p.y - 0.06, p.z);
-      const c = new THREE.Color(bulbColors[j]);
-      glowColor.push(c.r, c.g, c.b);
-    }
-  };
-  for (let z = p0.z + 0.6; z < p1.z; z += 2.9) festoon(new THREE.Vector3(p0.x, roofY - 0.1, z), new THREE.Vector3(p1.x, roofY - 0.1, z + 1.4), 0.25);
-  // (Two poles, one either side, so nothing stands between the dance floor and the DJ.)
-  const poles = [DANCE_FLOOR.minX - 0.6, DANCE_FLOOR.maxX + 0.6].map((x) => new THREE.Vector3(x, 3.4, DANCE_FLOOR.maxZ + 0.6));
-  for (const p of poles) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.05, 0.07, 3.4, 8), toon(INK), p.x, 1.7, p.z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.25, 0.3, 0.1, 12), toon(INK), p.x, 0.05, p.z, false));
-    colliders.push({ minX: p.x - 0.12, maxX: p.x + 0.12, minZ: p.z - 0.12, maxZ: p.z + 0.12, top: 99 });
-  }
-  const rigCorners = [new THREE.Vector3(STAGE.minX + 0.2, rigTop - 0.6, rigZ), new THREE.Vector3(STAGE.maxX - 0.2, rigTop - 0.6, rigZ)];
-  festoon(rigCorners[0], poles[1], 0.35);
-  festoon(rigCorners[1], poles[0], 0.35);
-  festoon(rigCorners[0], poles[0], 0.3);
-  festoon(rigCorners[1], poles[1], 0.3);
-  festoon(poles[0], poles[1], 0.4);
-  festoon(poles[1], new THREE.Vector3(p0.x, roofY - 0.1, p0.z), 0.35);
-  // Their glow at night.
-  const glowGeo = new THREE.BufferGeometry();
-  glowGeo.setAttribute('position', new THREE.Float32BufferAttribute(glowAt, 3));
-  glowGeo.setAttribute('color', new THREE.Float32BufferAttribute(glowColor, 3));
-  const halo = canvasTexture(64, 64, (g) => {
-    const grad = g.createRadialGradient(32, 32, 0, 32, 32, 32);
-    grad.addColorStop(0, 'rgba(255,255,255,1)');
-    grad.addColorStop(0.3, 'rgba(255,255,255,0.45)');
-    grad.addColorStop(1, 'rgba(255,255,255,0)');
-    g.fillStyle = grad;
-    g.fillRect(0, 0, 64, 64);
-  });
-  const glows = unpickable(new THREE.Points(glowGeo, new THREE.PointsMaterial({ size: 0.55, map: halo, vertexColors: true, transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending })));
-  group.add(glows);
-
-  const barLight = new THREE.PointLight('#ffc98a', 0, 11, 1.2);
-  barLight.position.set(bx + 1.2, 2.8, bz);
-  group.add(barLight);
-
-  // ---- The lounge: sofas round a fire pit, open to the view ----------------------------------------
-  const cushion = toon('#2a9d8f');
-  const frame = toon('#f4f1ea');
-  const sofa = (id: string, len: number) => {
-    const s = SEATING_BY_ID.get(id)!;
-    const g = new THREE.Group();
-    g.add(mesh(roundedBox(len, 0.3, 0.9, 0.08), frame, 0, 0.15, 0));
-    g.add(mesh(roundedBox(len - 0.1, 0.16, 0.8, 0.08), cushion, 0, 0.38, 0.03));
-    g.add(mesh(roundedBox(len, 0.5, 0.2, 0.08), cushion, 0, 0.6, -0.36));
-    for (const sx of [-1, 1]) g.add(mesh(roundedBox(0.16, 0.5, 0.9, 0.06), frame, sx * (len / 2 - 0.08), 0.35, 0));
-    g.position.set(s.x, 0, s.z);
-    g.rotation.y = s.rotY;
-    seatable(g, id, 1.6, interactables);
-    group.add(g);
-    colliders.push(boxCollider(s.x, s.z, len, 0.9, s.rotY, 0.5));
-  };
-  sofa('roof-sofa-1', 3.4);
-  sofa('roof-sofa-2', 2.2);
-  sofa('roof-sofa-3', 2.2);
-  statics.add(mesh(new THREE.CylinderGeometry(3.3, 3.3, 0.01, 40), toon('#f2cc8f'), FIRE_PIT.x, 0.006, FIRE_PIT.z + 0.3, false));
-  statics.add(mesh(new THREE.CylinderGeometry(FIRE_PIT.r, FIRE_PIT.r + 0.05, 0.42, 20), toon('#8d99ae'), FIRE_PIT.x, 0.21, FIRE_PIT.z));
-  statics.add(mesh(new THREE.CylinderGeometry(FIRE_PIT.r - 0.12, FIRE_PIT.r - 0.12, 0.02, 20), toon('#3d405b'), FIRE_PIT.x, 0.43, FIRE_PIT.z, false));
-  colliders.push({ minX: FIRE_PIT.x - FIRE_PIT.r, maxX: FIRE_PIT.x + FIRE_PIT.r, minZ: FIRE_PIT.z - FIRE_PIT.r, maxZ: FIRE_PIT.z + FIRE_PIT.r, top: 0.42 });
-  const flames: THREE.Mesh[] = [];
-  const flameMats = ['#ff9f1c', '#ffbf69', '#ff5d2b'].map((c) => {
-    const m = new THREE.MeshBasicMaterial({ color: c, transparent: true, opacity: 0.9 });
-    m.toneMapped = false;
-    return m;
-  });
-  for (let i = 0; i < 7; i++) {
-    const a = (i / 7) * Math.PI * 2;
-    const r = i === 0 ? 0 : 0.32;
-    const flame = mesh(new THREE.ConeGeometry(0.16, 0.6, 8).translate(0, 0.3, 0), flameMats[i % 3], FIRE_PIT.x + Math.cos(a) * r, 0.42, FIRE_PIT.z + Math.sin(a) * r, false);
-    flames.push(flame);
-    group.add(flame);
-  }
-  const fireLight = new THREE.PointLight('#ff8a3d', 0, 8, 1.3);
-  fireLight.position.set(FIRE_PIT.x, 1.1, FIRE_PIT.z);
-  group.add(fireLight);
+  // The café, and its tables and chairs.
+  const site = { group, statics, colliders, interactables, night };
+  const cafe = buildCafe(site);
+  buildCafeSeating(site);
 
   // Sun loungers along the south edge, a parasol between each pair, facing out over the street.
+  const frame = toon('#f4f1ea');
   for (let i = 1; i <= 3; i++) {
     const s = SEATING_BY_ID.get(`roof-lounger-${i}`)!;
     const g = new THREE.Group();
     g.add(mesh(new THREE.BoxGeometry(0.72, 0.28, 1.9), frame, 0, 0.14, 0.15));
-    g.add(mesh(new THREE.BoxGeometry(0.66, 0.08, 1.3), toon('#f4a261'), 0, 0.32, 0.45));
-    const backrest = mesh(new THREE.BoxGeometry(0.66, 0.08, 0.8), toon('#f4a261'), 0, 0.55, -0.5);
+    g.add(mesh(new THREE.BoxGeometry(0.66, 0.08, 1.3), toon('#e8c9a0'), 0, 0.32, 0.45));
+    const backrest = mesh(new THREE.BoxGeometry(0.66, 0.08, 0.8), toon('#e8c9a0'), 0, 0.55, -0.5);
     backrest.rotation.x = 0.75;
     g.add(backrest);
     g.position.set(s.x, 0, s.z);
@@ -713,22 +166,12 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   for (const x of [-0.8, 2]) {
     const z = FLOOR.maxZ - 1.1;
     statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 2.6, 8), frame, x, 1.3, z, false));
-    statics.add(mesh(new THREE.ConeGeometry(1.5, 0.5, 12, 1, true), toon('#ef476f'), x, 2.6, z, true));
+    statics.add(mesh(new THREE.ConeGeometry(1.5, 0.5, 12, 1, true), toon('#e9b872'), x, 2.6, z, true));
     statics.add(mesh(new THREE.CylinderGeometry(0.22, 0.22, 0.45, 12), frame, x, 0.225, z, false));
     statics.add(mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.04, 12), frame, x, 0.47, z, false));
     colliders.push({ minX: x - 0.3, maxX: x + 0.3, minZ: z - 0.3, maxZ: z + 0.3, top: 0.49 });
   }
 
-  // Tall tables to stand at between the elevator and the bar, with a candle each.
-  const candle = bulb(night, '#ffbf69', 0.5);
-  for (const { x, z } of ROOF_TABLES) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.28, 0.32, 0.04, 16), toon(INK), x, 0.02, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 1.05, 8), toon(INK), x, 0.55, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.42, 0.42, 0.05, 20), toon('#f4f1ea'), x, 1.08, z));
-    statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.1, 8), candle, x, 1.16, z, false));
-    colliders.push({ minX: x - 0.3, maxX: x + 0.3, minZ: z - 0.3, maxZ: z + 0.3, top: 1.1 });
-  }
-
   // Planters along the edges, and the air conditioning behind a screen in the north-east corner.
   const planter = toon('#6d6875');
   const leaf = toon('#5fb760');
@@ -746,7 +189,6 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   };
   // Down the west edge from the axe lane's booth, which has the corner.
   planterRow(FLOOR.minX, FLOOR.minX + 0.7, FLOOR.minZ + AXE_LANE.depth + 0.3, 3.2);
-  planterRow(FLOOR.minX + 0.4, -6.2, FLOOR.maxZ - 0.7, FLOOR.maxZ);
   planterRow(5.2, FLOOR.maxX - 0.4, FLOOR.maxZ - 0.7, FLOOR.maxZ);
   const screenX = 10.9;
   const screenZ = -8.2;
@@ -781,59 +223,20 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   colliders.push(...games.colliders);
   interactables.push(...games.interactables);
 
-  // ---- Moving it all to the music ---------------------------------------------------------------
-  const tmp = new THREE.Color();
-  const tmp2 = new THREE.Color();
-  /** `calm`: the slow washes whatever the set is doing, for anyone who'd rather nothing flashed. */
-  const drawLed = (f: DjFrame, t: number, calm: boolean) => {
-    const g = ledCtx;
-    const W = 512;
-    const H = 256;
-    g.globalAlpha = 1;
-    g.fillStyle = '#07060d';
-    g.fillRect(0, 0, W, H);
-    const base = f.hue * 360;
-    if (!calm && f.part === 'drop') {
-      // An equalizer, jumping with the kick.
-      const n = 24;
-      for (let i = 0; i < n; i++) {
-        const v = 0.25 + 0.75 * Math.abs(Math.sin(i * 1.7 + t * 4.3 + f.beats * 0.9)) * (0.55 + 0.45 * f.kick);
-        g.fillStyle = `hsl(${(base + i * 7) % 360}, 95%, 58%)`;
-        g.fillRect(i * (W / n) + 3, H - v * H, W / n - 6, v * H);
-      }
-      g.globalAlpha = 0.35 + 0.65 * f.snare;
-    } else if (!calm && f.part === 'build') {
-      // Stripes racing up, faster and faster, and a bar filling up to the drop.
-      const speed = 60 + 420 * f.rise;
-      for (let y = -40; y < H; y += 40) {
-        g.fillStyle = `hsla(${(base + y) % 360}, 90%, 55%, ${0.25 + 0.5 * f.rise})`;
-        g.fillRect(0, (y + ((t * speed) % 40) + H) % (H + 40) - 40, W, 14);
-      }
-      g.fillStyle = '#ffffff';
-      g.fillRect(40, H - 34, (W - 80) * f.rise, 12);
-      g.globalAlpha = 0.6 + 0.4 * f.beat;
-    } else {
-      // Slow washes of color.
-      for (let i = 0; i < 3; i++) {
-        const x = W / 2 + Math.sin(t * 0.4 + i * 2.1) * W * 0.35;
-        const y = H / 2 + Math.cos(t * 0.3 + i * 1.7) * H * 0.3;
-        const grad = g.createRadialGradient(x, y, 0, x, y, 170);
-        grad.addColorStop(0, `hsla(${(base + i * 60) % 360}, 90%, 55%, 0.8)`);
-        grad.addColorStop(1, 'hsla(0, 0%, 0%, 0)');
-        g.fillStyle = grad;
-        g.fillRect(0, 0, W, H);
-      }
-      g.globalAlpha = 0.85;
-    }
-    const words = f.part === 'drop' ? 'AGENT OFFICE' : f.part === 'build' ? 'GET READY' : 'DJ MERGE CONFLICT';
-    fitFont(g, words, 60, W - 40);
-    g.textAlign = 'center';
-    g.textBaseline = 'middle';
-    g.fillStyle = '#ffffff';
-    g.fillText(words, W / 2, H * 0.42);
-    g.globalAlpha = 1;
-    led.needsUpdate = true;
-  };
+  // The Merge Conflict games corner: chess tables where the stage was (features/chess).
+  const chess = buildChessCorner();
+  group.add(chess.group);
+  colliders.push(...chess.colliders);
+  interactables.push(...chess.interactables);
+
+  // The thinking garden, with a stone at its heart that opens the ambient sounds (features/ambience).
+  const garden = buildGarden();
+  group.add(garden.group);
+  colliders.push(...garden.colliders);
+  interactables.push(...garden.interactables);
+  const soundSpot: Interactable = { kind: 'ambience', x: THINK_SPOT.x, y: 0, z: THINK_SPOT.z, radius: 2.2 };
+  interactables.push(soundSpot);
+  garden.soundStone.userData.interact = soundSpot;
 
   return {
     group,
@@ -842,148 +245,18 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
     elevator,
     city,
     setFloors: (n, wings) => city.setFloors(n, wings),
-    pickables: group.children.filter((c) => c !== city.group),
-    pourAt: { x: bx + 0.2, y: ROOF_BAR.height + 0.2, z: bz },
+    pickables: [...group.children.filter((c) => c !== city.group && c !== garden.group && c !== chess.group), ...garden.pickables, ...chess.pickables],
+    pourAt: cafe.pourAt,
     games,
-    serve(z: number) {
-      tendZ = THREE.MathUtils.clamp(z, ROOF_BAR.minZ + 0.6, ROOF_BAR.maxZ - 0.6);
-      wander = 6;
-      bartender.cheer(1.2);
-    },
-    update(t, dt, f, env) {
-      const { dark, motion } = env;
-      const m = motion ? 1 : 0;
-      const e = f.energy;
-      const drop = f.part === 'drop';
-      // How much the lights stand out: faint in the sun, blazing at night.
-      const show = 0.3 + 0.7 * dark;
-      city.update(t, dt, dark);
+    serve: cafe.serve,
+    update(t, dt, env) {
+      city.update(t, dt, env.dark);
       elevator.update(dt);
-      games.update(dt, dark);
-      dj.update(t, f, motion);
-
-      // The bartender drifts along the bar between customers, and comes over when someone orders.
-      wander -= dt;
-      if (wander <= 0) {
-        wander = 5 + Math.random() * 6;
-        tendZ = ROOF_BAR.minZ + 1 + Math.random() * (ROOF_BAR.maxZ - ROOF_BAR.minZ - 2);
-      }
-      const bp = bartender.root.position;
-      bp.z += THREE.MathUtils.clamp(tendZ - bp.z, -dt * 1.6, dt * 1.6);
-      bartender.update(dt, t);
-
-      // Speaker cones thump.
-      for (const c of cones) c.scale.setScalar(1 + 0.12 * f.kick * m);
-      for (const fan of fans) fan.rotation.y += dt * 9;
-
-      // Moving heads: sweeping down onto the dance floor and up into the sky in the drops, slowly
-      // searching the sky in a breakdown, and all rising together through a build.
-      heads.forEach((h) => {
-        const i = h.i;
-        const side = i - 2;
-        // Across (radians either side of straight out over the dance floor), and up: -1 down onto the floor, 1 high into the sky.
-        let pan = side * 0.25;
-        let aim = 0.4;
-        if (!motion) {
-          // Held still.
-        } else if (drop) {
-          const bar = Math.floor(f.beats / 4);
-          pan = side * 0.25 + Math.sin(f.beats * Math.PI * 0.5 + i) * 0.55;
-          aim = 0.85 * Math.sin(f.beats * Math.PI * 0.25 + (bar % 2 ? i : -i));
-        } else if (f.part === 'build') {
-          pan = side * (0.35 - 0.3 * f.rise) + Math.sin(t * (1 + 6 * f.rise) + i) * 0.3 * (1 - f.rise);
-          aim = 0.2 + 0.8 * f.rise;
-        } else {
-          pan = side * 0.3 + Math.sin(t * 0.35 + i * 0.9) * 0.4;
-          aim = 0.5 + 0.3 * Math.sin(t * 0.27 + i);
-        }
-        h.pan.rotation.y = pan;
-        // The beam hangs straight down at 0; turned back past level, out over the dance floor (+z) and up.
-        h.tilt.rotation.x = -(1.8 + 0.8 * aim);
-        const color = hue(tmp, f.hue + (drop && Math.floor(f.beats) % 2 ? 0.5 : 0) + i * 0.04, 0.6);
-        const level = (drop ? 0.55 + 0.45 * f.beat : f.part === 'build' ? 0.3 + 0.6 * f.rise : 0.25) * show;
-        h.beam.material.uniforms.color.value.copy(color);
-        h.beam.material.uniforms.opacity.value = level * 0.55;
-        h.lens.color.copy(color).multiplyScalar(0.6 + 0.8 * level);
-      });
-
-      // Lasers: a fan of rays sweeping back and forth, in the drops and the builds.
-      for (const l of lasers) {
-        const on = drop ? 1 : f.part === 'build' ? f.rise : 0;
-        // Only once it's getting dark: in the sun they'd just be scratches on the sky.
-        l.mat.opacity = on * 0.9 * dark;
-        l.lines.visible = l.mat.opacity > 0.01;
-        if (!l.lines.visible) continue;
-        const pos = l.lines.geometry.attributes.position as THREE.BufferAttribute;
-        const a = pos.array as Float32Array;
-        const sweep = Math.sin(t * (drop ? 1.3 : 0.6) * (motion ? 1 : 0) + l.k * Math.PI) * 0.45;
-        const lift = 0.12 + 0.28 * (0.5 + 0.5 * Math.sin(t * 0.9 * (motion ? 1 : 0) + l.k));
-        for (let r = 0; r < LASER_RAYS; r++) {
-          const yaw = sweep + (r / (LASER_RAYS - 1) - 0.5) * 1.1 + (l.k ? -0.2 : 0.2);
-          const dx = Math.sin(yaw) * Math.cos(lift);
-          const dz = Math.cos(yaw) * Math.cos(lift);
-          const dy = Math.sin(lift);
-          const L = 70;
-          a.set([l.from.x, l.from.y, l.from.z, l.from.x + dx * L, l.from.y + dy * L, l.from.z + dz * L], r * 6);
-        }
-        pos.needsUpdate = true;
-      }
-
-      // The dance floor: a checkerboard, ripples, stripes or sparkles, changing every four bars.
-      const beat = Math.floor(f.beats);
-      const pattern = Math.floor(f.beats / 16) % 4;
-      // With reduced motion it keeps to the slow wash, whatever the set is doing.
-      const pulse = !motion ? 0.3 : drop ? 0.45 + 0.55 * f.beat : f.part === 'build' ? 0.35 + 0.5 * f.beat * f.rise : 0.3;
-      for (let r = 0; r < rows; r++) {
-        for (let c = 0; c < cols; c++) {
-          let on: number;
-          let h = f.hue;
-          if (!motion || (!drop && f.part !== 'build')) {
-            // Slow color washing across it.
-            on = 0.5 + 0.5 * Math.sin(c * 0.6 + r * 0.4 - t * 1.2);
-            h += c * 0.02 + r * 0.03;
-          } else if (pattern === 0) on = (c + r + beat) % 2;
-          else if (pattern === 1) {
-            const dist = Math.hypot(c - cols / 2 + 0.5, r - rows / 2 + 0.5);
-            on = 0.5 + 0.5 * Math.sin(dist * 1.3 - f.beats * Math.PI);
-            h += dist * 0.04;
-          } else if (pattern === 2) on = (c + beat) % 3 === 0 ? 1 : 0.1;
-          else on = sparkle(c, r, beat) > 0.45 ? 1 : 0.05;
-          const l = 0.08 + 0.5 * Math.abs(on) * pulse * (0.6 + 0.4 * e);
-          tiles.setColorAt(r * cols + c, hue(tmp, h + (on > 0.5 ? 0 : 0.5), l));
-        }
-      }
-      if (tiles.instanceColor) tiles.instanceColor.needsUpdate = true;
-
-      // Washes, the stage's strip, the glow under the bar, the fire and the bulbs' halos.
-      washes.forEach((w, i) => {
-        w.color.copy(hue(tmp, f.hue + i * 0.33 + (drop ? Math.floor(f.beats / 2) * 0.17 : t * 0.02), 0.5));
-        w.intensity = (1.2 + 5 * e * (drop ? f.beat : 0.4)) * show;
-      });
-      stripMat.color.copy(hue(tmp, f.hue + 0.5, 0.45 + 0.2 * f.beat));
-      barGlow.color.copy(hue(tmp2, f.hue + 0.15 + t * 0.01, 0.5));
-      glowMat.color.set('#ffb55a').multiplyScalar(0.75 + 0.35 * dark);
-      barLight.intensity = 0.6 + 2.6 * dark;
-      const flicker = 0.85 + 0.15 * Math.sin(t * 17) * Math.sin(t * 7.3 + 1);
-      for (let i = 0; i < flames.length; i++) {
-        const fl = flames[i];
-        fl.scale.set(1, (0.75 + 0.35 * Math.abs(Math.sin(t * (5 + i) + i * 1.7))) * flicker, 1);
-      }
-      fireLight.intensity = (1.2 + 1.6 * dark) * flicker;
-      glows.material.opacity = dark * 0.85;
-      glows.visible = dark > 0.02;
-      neonMat.opacity = 0.9 + 0.1 * Math.sin(t * 3);
-      jog.color.copy(hue(tmp, f.hue + 0.6, 0.55));
-      // The LED wall redraws twenty times a second.
-      if (t - ledAt > 0.05) {
-        ledAt = t;
-        drawLed(f, t, !motion);
-      }
-      // Strobes: on each snare as the drop lands and through the build's last bar, a couple a second at most.
-      if (!motion) return 0;
-      if (drop && f.sinceDrop < 6) return f.snare;
-      if (f.part === 'build' && f.rise > 7 / 8) return f.beat;
-      return 0;
+      games.update(dt, env.dark);
+      cafe.update(t, dt, env.dark);
+      garden.update(t, dt, env.motion);
+      garden.setDark(env.dark);
+      if (env.motion) for (const fan of fans) fan.rotation.y += dt * 9;
     },
   };
 }
diff --git a/src/client/features/workers/leaving.ts b/src/client/features/workers/leaving.ts
index aa7c924fa..c08c5cbf0 100644
--- a/src/client/features/workers/leaving.ts
+++ b/src/client/features/workers/leaving.ts
@@ -41,8 +41,8 @@ const JUMPS = ['🪂 geronimo!', '🪂 see ya!', '🪂 wheee!', '🪂 bye bye!',
 const CANOPIES = ['#ef476f', '#ffd166', '#06d6a0', '#118ab2', '#8338ec', '#ff8a5b'];
 
 /** Seen from below too, so both sides of the fabric. */
-const fabric = new Map<string, THREE.MeshToonMaterial>();
-function cloth(color: string): THREE.MeshToonMaterial {
+const fabric = new Map<string, THREE.MeshStandardMaterial>();
+function cloth(color: string): THREE.MeshStandardMaterial {
   let m = fabric.get(color);
   if (!m) {
     m = toonUnique(color);
diff --git a/src/client/lab/props.ts b/src/client/lab/props.ts
index 20823c8de..be0a4ac37 100644
--- a/src/client/lab/props.ts
+++ b/src/client/lab/props.ts
@@ -132,7 +132,7 @@ function facts() {
       const m = o as THREE.Mesh;
       if (!m.isMesh || !m.visible) return;
       draws += Array.isArray(m.material) ? m.material.length : 1;
-      for (const mat of Array.isArray(m.material) ? m.material : [m.material]) materials.add(mat.name || (mat as THREE.MeshToonMaterial).color?.getHexString?.() || mat.type);
+      for (const mat of Array.isArray(m.material) ? m.material : [m.material]) materials.add(mat.name || (mat as THREE.MeshStandardMaterial).color?.getHexString?.() || mat.type);
       const g = m.geometry;
       tris += (g.index ? g.index.count : g.attributes.position.count) / 3;
     });
diff --git a/src/client/main.ts b/src/client/main.ts
index 7cc7da7d8..1efd3ab24 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -5,7 +5,6 @@ import { store, loadProfile, loadSettings } from './state';
 import { PlayerController, groundAt } from './player';
 import { Hands } from './world/hands';
 import { Confetti } from './world/confetti';
-import { djFrame } from './dnb';
 import { Voice } from './voice';
 import { $ } from './ui/dom';
 import { openCharacter } from './ui/character';
@@ -27,6 +26,7 @@ import { installHintBar } from './core/hintbar';
 import { installKeyboard, installKeyGuards } from './input/keyboard';
 import { installFocus } from './input/focus';
 import { installPointer } from './input/pointer';
+import { installAmbience } from './features/ambience';
 import { installArcade } from './features/arcade';
 import { installBar } from './features/bar';
 import { installBarGames } from './features/bargames';
@@ -37,6 +37,7 @@ import { installCabinet } from './features/cabinet';
 import { installCarrying } from './features/carrying';
 import { installCars } from './features/cars';
 import { installChat } from './features/chat';
+import { installChess } from './features/chess';
 import { installClimbing } from './features/climbing';
 import { installCoffee } from './features/coffee';
 import { installDictation } from './features/dictation';
@@ -102,7 +103,7 @@ parts.confetti = new Confetti((x, z, y) => groundAt(ctx.player.colliders, x, z,
 ctx.scene.add(parts.confetti.mesh);
 parts.tv = installTv(ctx, { shares: () => parts.talk.currentShares(), watch: () => parts.talk.watchShare() });
 parts.arcade = installArcade(ctx);
-parts.rooftop = installRooftop(ctx, { ambient: parts.stage.ambient, hemi: parts.stage.hemi });
+parts.rooftop = installRooftop(ctx);
 
 // You, and how you talk to the office.
 parts.net = new Net(() => store.profile, () => parts.arrival.whereNow());
@@ -132,6 +133,7 @@ const personOf = (id: string) => parts.peers.remotes.get(id)?.person;
 const reach = () => parts.you.reach();
 parts.golf = installGolf(ctx, { standUp, stopWalking, stopSmoking: () => parts.smoking.stop(), personOf });
 parts.bargames = installBarGames(ctx, { roof: parts.rooftop.roof, standUp, stopWalking, personOf });
+installChess(ctx);
 parts.hanging = installHanging(ctx, { gallery: parts.gallery, reach });
 parts.climbing = installClimbing(ctx, { travel: (floorId, how, at) => parts.travel.travel(floorId, how, at), standUp, stopWalking });
 parts.cars = installCars(ctx, { standUp, stopWalking });
@@ -150,7 +152,8 @@ parts.meeting = installMeeting(ctx, parts);
 parts.bookshelf = installBookshelf(ctx);
 installHerald(ctx, parts);
 
-parts.bar = installBar(ctx, { roof: parts.rooftop.roof, djAt: parts.rooftop.djAt, reach });
+parts.bar = installBar(ctx, { roof: parts.rooftop.roof, reach });
+installAmbience(ctx);
 parts.coffee = installCoffee(ctx);
 parts.smoking = installSmoke(ctx);
 installLamplight(ctx, parts);
@@ -237,8 +240,8 @@ void whoami().then(() => {
 });
 
 // Debug handle for quick checks from the console / headless screenshots.
-const { worlds, views, rooftop, bar, coffee, golf, bargames, hanging, climbing, cars, emotes, hoops } = parts;
-(window as any).__office = { world: () => worlds.world(), court: () => worlds.court(), sendoffs: views.sendoffs, jail: views.jail, adrift: views.adrift, plan: worlds.plan, applyMap: parts.maps.applyMap, roof: rooftop.roof, booze: bar.booze, dj: () => djFrame(rooftop.djAt()), store, player: parts.player, caffeine: coffee.caffeine, camera: ctx.camera, arcade: parts.arcade, cabinet: parts.cabinet, workerViews: views.workerViews, departures: views.departures, arrivals: views.arrivals, scene: ctx.scene, net: parts.net, renderer: ctx.renderer, hands: parts.hands, me: parts.me, remotes: parts.peers.remotes, settings: parts.settings, gallery: parts.gallery, hanger: hanging.hanger, office: ctx.office, ride: parts.travel.ride, switchFloor: parts.travel.switchFloor, climber: climbing.climber, driver: cars.driver, getIn: cars.getIn, getOut: cars.getOut, golf: golf.golf, balls: golf.balls, thrower: bargames.thrower, elevatorPanelOpen, confetti: parts.confetti, dog: parts.dog, sky: ctx.sky, holiday: parts.stage.holiday, carried: () => core.carrying, emoteWheel: emotes.emoteWheel, emote: emotes.emote, ball: hoops.ball };
+const { worlds, views, rooftop, coffee, golf, bargames, hanging, climbing, cars, emotes, hoops } = parts;
+(window as any).__office = { world: () => worlds.world(), court: () => worlds.court(), sendoffs: views.sendoffs, jail: views.jail, adrift: views.adrift, plan: worlds.plan, applyMap: parts.maps.applyMap, roof: rooftop.roof, store, player: parts.player, caffeine: coffee.caffeine, camera: ctx.camera, arcade: parts.arcade, cabinet: parts.cabinet, workerViews: views.workerViews, departures: views.departures, arrivals: views.arrivals, scene: ctx.scene, net: parts.net, renderer: ctx.renderer, hands: parts.hands, me: parts.me, remotes: parts.peers.remotes, settings: parts.settings, gallery: parts.gallery, hanger: hanging.hanger, office: ctx.office, ride: parts.travel.ride, switchFloor: parts.travel.switchFloor, climber: climbing.climber, driver: cars.driver, getIn: cars.getIn, getOut: cars.getOut, golf: golf.golf, balls: golf.balls, thrower: bargames.thrower, elevatorPanelOpen, confetti: parts.confetti, dog: parts.dog, sky: ctx.sky, holiday: parts.stage.holiday, carried: () => core.carrying, emoteWheel: emotes.emoteWheel, emote: emotes.emote, ball: hoops.ball };
 (window as any).__voice = parts.voice;
 (window as any).__sound = parts.sound;
 (window as any).__notify = parts.notifier;
diff --git a/src/client/sound/index.ts b/src/client/sound/index.ts
index 321c2ea74..a83c66e91 100644
--- a/src/client/sound/index.ts
+++ b/src/client/sound/index.ts
@@ -3,7 +3,7 @@
  * humming fridge, workers typing while they work, footsteps, the coffee machine, birds outside the
  * windows by day and crickets at night, rain and thunder, the odd rustle, the gong, the dog
  * barking, and the dings when a worker needs you. And the lounge jukebox, whose tunes are in music.ts,
- * and up on the roof, the wind, the city far below and the DJ's drum and bass (../dnb.ts).
+ * and up on the roof, the wind and the city far below.
  *
  * Everything goes through one master gain that Settings turns down or mutes. Voice chat doesn't, and
  * the jukebox has a volume of its own.
@@ -18,7 +18,7 @@ import { birdsong, Fridge, nightCrickets, startRoomTone, startWind } from './amb
 import { ding } from './alerts';
 import { arcade } from '../features/cabinet/sound';
 import { ball, type BallSound } from '../features/basketball/sound';
-import { Dj, hiccup, pour } from '../features/bar/sound';
+import { serve } from '../features/bar/sound';
 import { carDoor, crash, honk, Motors, type Engine } from '../features/cars/sound';
 import { bonk, hatch, poleLanding, rung, slide, twirl } from '../features/climbing/sound';
 import { coffee } from '../features/coffee/sound';
@@ -38,7 +38,6 @@ import { Rain, thunder } from './weather';
 export class OfficeSound {
   private readonly a: AudioCore = new AudioCore({ start: (ctx) => this.start(ctx), touched: () => this.music.touched() });
   private readonly music = new Jukebox(this.a, (text) => this.onMusicError?.(text));
-  private readonly dj = new Dj(this.a);
   private readonly typing = new Typing(this.a);
   private readonly feet = new Footsteps(this.a);
   private readonly motors = new Motors(this.a);
@@ -63,10 +62,9 @@ export class OfficeSound {
     this.a.every((now) => this.fidgets.tick(now));
   }
 
-  /** Audio has just started (see AudioCore.unlock): the jukebox and the DJ join the graph, and the room starts up. */
+  /** Audio has just started (see AudioCore.unlock): the jukebox joins the graph, and the room starts up. */
   private start(ctx: AudioContext) {
     this.music.connect(ctx);
-    this.dj.connect(this.music.musicBus);
     this.a.applyVolume();
     this.music.applyMusicVolume();
     this.music.applyJukebox();
@@ -75,7 +73,6 @@ export class OfficeSound {
     this.fridge.startFridge();
     startWind(this.a);
     this.a.applyOutdoors();
-    this.dj.applyDj();
     const now = ctx.currentTime;
     this.birds.start(now);
     this.crickets.start(now);
@@ -94,6 +91,11 @@ export class OfficeSound {
     this.a.setWeather(rain, night);
   }
 
+  /** What a feature with sounds of its own (features/ambience) joins the office's on: the audio context and the room's bus. Null until the page has been touched. */
+  audioBus(): { ctx: AudioContext; out: AudioNode } | null {
+    return this.a.ctx ? { ctx: this.a.ctx, out: this.a.ambience } : null;
+  }
+
   /** Output level (RMS) right now, for headless checks. */
   level(): number {
     return this.a.level();
@@ -273,23 +275,11 @@ export class OfficeSound {
     needsYou(this.a, again);
   }
 
-  // ---- The rooftop bar (features/bar) -------------------------------------------------------------
-
-  /** The DJ's set on the roof, `clock` saying how far into it it is (see djTime); null stops it. */
-  setDj(clock: (() => number) | null) {
-    this.dj.setDj(clock);
-  }
-
-  horn() {
-    this.dj.horn();
-  }
-
-  pour(at: Pos) {
-    pour(this.a, at);
-  }
+  // ---- The rooftop café (features/bar) ------------------------------------------------------------
 
-  hiccup() {
-    hiccup(this.a);
+  /** The barista making a drink (or setting down a plate) at the counter, heard from `at`. */
+  serve(at: Pos, drink = true) {
+    serve(this.a, at, drink);
   }
 
   // ---- The jukebox (features/jukebox) -------------------------------------------------------------
diff --git a/src/client/ui/elevator.ts b/src/client/ui/elevator.ts
index 36f6c92a9..a8dc7b442 100644
--- a/src/client/ui/elevator.ts
+++ b/src/client/ui/elevator.ts
@@ -175,15 +175,15 @@ export function openElevator(opts: ElevatorOptions): void {
     confirmDialog(`Take ${f.name} off the building?`, `${workers}${people}Nothing is deleted: its checkout stays in ${f.dir}, .agent-office folder and all.${own}`, '🗑 Remove floor', () => net.send({ t: 'floor.remove', floor: f.id }));
   };
 
-  /** The roof, over every floor: the rooftop bar. */
+  /** The roof, over every floor: the rooftop café. */
   const roofButton = () => {
     const here = store.floor === ROOF;
     const people = [...store.peers.values()].filter((p) => p.floor === ROOF).length;
     const btn = h(
       'button.floor-btn',
       { type: 'button', class: here ? 'here' : '', disabled: here, title: here ? "You're up on the roof" : `Ride up to the ${ROOF_NAME.toLowerCase()}` },
-      h('span.floor-no', { style: 'background:#2b2d42' }, '🍸'),
-      h('span.floor-text', {}, h('span.floor-name', {}, ROOF_NAME, here ? h('span.here-tag', {}, 'you are here') : null), h('span.floor-sub', {}, 'The roof: a DJ playing drum and bass, a bar, and the city all around')),
+      h('span.floor-no', { style: 'background:#2b2d42' }, '☕'),
+      h('span.floor-text', {}, h('span.floor-name', {}, ROOF_NAME, here ? h('span.here-tag', {}, 'you are here') : null), h('span.floor-sub', {}, 'The roof: a café, tables under string lights, and the city all around')),
       h('span.floor-stats', {}, people ? h('span', { title: 'People up there' }, `🧑 ${people}`) : ''),
     );
     btn.addEventListener('click', () => {
diff --git a/src/client/ui/floormenu.ts b/src/client/ui/floormenu.ts
index f35d9030f..28651d873 100644
--- a/src/client/ui/floormenu.ts
+++ b/src/client/ui/floormenu.ts
@@ -16,7 +16,7 @@ export interface FloorMenuOptions {
   indoors(): boolean;
   /** Open the elevator's panel, to add a project. */
   elevator(): void;
-  /** Up to the rooftop bar, by elevator; null on a map with no roof to go up to. */
+  /** Up to the rooftop café, by elevator; null on a map with no roof to go up to. */
   roof: (() => void) | null;
 }
 
@@ -78,8 +78,8 @@ export function toggleFloorMenu(anchor: HTMLElement, opts: FloorMenuOptions): vo
     const roof = h(
       'button.floor-item',
       { type: 'button', role: 'menuitem', class: onRoof ? 'here' : '', disabled: onRoof, title: onRoof ? "You're up on the roof" : 'Take the elevator up to the roof' },
-      h('span.floor-no', { style: 'background:#2b2d42' }, '🍸'),
-      h('span.floor-text', {}, h('span.floor-name', {}, ROOF_NAME), h('span.floor-sub', {}, onRoof ? 'you are here' : 'A DJ, drinks and the city')),
+      h('span.floor-no', { style: 'background:#2b2d42' }, '☕'),
+      h('span.floor-text', {}, h('span.floor-name', {}, ROOF_NAME), h('span.floor-sub', {}, onRoof ? 'you are here' : 'A café and the city')),
       h('span.floor-stats', {}, people ? h('span', { title: 'People up there' }, `🧑 ${people}`) : ''),
     );
     roof.addEventListener('click', () => {
diff --git a/src/client/ui/help.ts b/src/client/ui/help.ts
index ac1f51c5a..a1a6cdf81 100644
--- a/src/client/ui/help.ts
+++ b/src/client/ui/help.ts
@@ -18,8 +18,9 @@ export const HELP_ROWS: readonly (readonly [string, string])[] = [
   ['N', "Next worker that needs you: go to whoever needs input (they have a red beacon over their desk, and a banner up top says what each is asking), then whoever is done and nobody's looked at, longest-waiting first, and again for the next one. Arrows at the edge of the screen point to the ones out of sight"],
   ['🏀', 'The hoop on the west wall, by the exit door: E at the ball picks it up. Hold E (or the mouse, in first person) and let go when the meter is in the green to sink it. In first person it goes where you look. Q drops it. Everyone on your floor sees your shot'],
   ['🏎️', "The Lambos and Ferraris in the garage: E at one gets you behind the wheel, or beside whoever's driving it. W is the gas, S brakes and reverses, A and D steer, Space brakes, H honks and E gets you out. Everyone on your floor sees you drive by"],
-  ['🍸', 'The elevator goes up to the rooftop bar: a DJ playing drum and bass under the lights, and the city all around. Press E at the bar for a drink (it goes to your head for a bit) and at the DJ booth for the air horn'],
-  ['🎯', 'Up on the roof, in the corner past the DJ: a dart board and an axe-throwing lane. E at either steps up to the line. The mouse (or the arrow keys) aims, and your hand wanders more after a few drinks. Hold Space (or the mouse button) and let go in the green: three darts a visit, five axes a round, chalked up for everyone up there. E steps back'],
+  ['🥐', 'The elevator goes up to the rooftop café: a counter, tables under string lights, and the city all around. Press E at the counter (or on a stool at it) for the menu: coffee, tea, juice, pastries and more, all alcohol-free and pork-free'],
+  ['🎯', 'Up on the roof, in the north-west corner: a dart board and an axe-throwing lane. E at either steps up to the line. The mouse (or the arrow keys) aims. Hold Space (or the mouse button) and let go in the green: three darts a visit, five axes a round, chalked up for everyone up there. E steps back'],
+  ['♟️', "Up on the roof, in the Merge Conflict corner: three chess tables, a chair either side. Sit in a chair (E) to take that side, White's or Black's, and whoever sits across plays you; everyone up there can watch. Look at your own pieces to light them, click one (or press E) and then a glowing square to move it. The little flag resigns (click it twice) and the coin sets the pieces up again. W A S D gets you up"],
   ['Drag / wheel', 'Orbit and zoom the camera in third person'],
   ['P', 'Prompt: give a task to a new or existing worker at the desk you face'],
   ['C', 'Changes: what the worker at the desk you face changed — files and diff, commit, discard, open a PR'],
diff --git a/src/client/ui/people.ts b/src/client/ui/people.ts
index 327e2b886..77b966ea5 100644
--- a/src/client/ui/people.ts
+++ b/src/client/ui/people.ts
@@ -31,7 +31,7 @@ export function renderPeople(voice: Voice, onEditProfile: () => void, onWalkTo:
       // Somewhere else in the building: which floor.
       !you && !store.onMyFloor(p)
         ? p.floor === ROOF
-          ? h('span.where', { title: 'Up on the roof' }, `🍸 ${ROOF_NAME}`)
+          ? h('span.where', { title: 'Up on the roof' }, `☕ ${ROOF_NAME}`)
           : h('span.where', { title: 'On another floor' }, `🛗 ${store.floors.find((f) => f.id === p.floor)?.name ?? 'lobby'}`)
         : null,
       p.sharing ? h('span', { title: 'Sharing screen' }, '🖥️') : null,
diff --git a/src/client/ui/settings.ts b/src/client/ui/settings.ts
index ba8dae5c2..b9c1a2add 100644
--- a/src/client/ui/settings.ts
+++ b/src/client/ui/settings.ts
@@ -150,12 +150,10 @@ export function openSettings(net: Net, settings: Settings, onChange: (s: Setting
       ),
     );
     const now =
-      active === 'halloween'
-        ? 'Halloween: the workers are zombies, your hands are an undead warlock’s, the dog’s in costume, the sky’s gone creepy and there are jack-o’-lanterns everywhere.'
-        : active === 'christmas'
-          ? 'Christmas: the workers are elves, your hands are in mittens, the dog’s Rudolph, and it’s snowing outside.'
-          : 'No decorations up right now.';
-    const how = pick === 'auto' ? ' By the calendar it’s Halloween through October and Christmas through December.' : '';
+      active === 'christmas'
+        ? 'Christmas: the workers are elves, your hands are in mittens, the dog’s Rudolph, and it’s snowing outside.'
+        : 'No decorations up right now.';
+    const how = pick === 'auto' ? ' By the calendar it’s Christmas through December.' : '';
     themeNote.textContent = `${now}${how} It’s the same for everyone in the building${by ? `, set by ${by}${at ? ` ${timeAgo(at)}` : ''}` : ''}.`;
   };
   paintTheme();
diff --git a/src/client/ui/whereabouts.ts b/src/client/ui/whereabouts.ts
index 429e56975..c3805399a 100644
--- a/src/client/ui/whereabouts.ts
+++ b/src/client/ui/whereabouts.ts
@@ -1,4 +1,4 @@
-import { BALCONY, DANCE_FLOOR, FIRE_PIT, FLOOR, LOFT, MEETING_ROOM, ROOF_BAR, ROOF_TABLES, SEATING_BY_ID, STAGE, WING, inWing, seatAt } from '../../shared/layout';
+import { BALCONY, CAFE_TABLES, FLOOR, LOFT, MEETING_ROOM, ROOF_BAR, ROOF_TABLES, SEATING_BY_ID, WING, inWing, seatAt } from '../../shared/layout';
 import type { PeerInfo } from '../../shared/protocol';
 import { ROOF } from '../../shared/rooftop';
 import { CARS, type CarSeat } from '../../shared/garage';
@@ -43,12 +43,10 @@ export function whereabouts(p: PeerInfo, car?: { car: number; seat: CarSeat }, p
   return undefined;
 }
 
-/** Somewhere on the rooftop bar worth saying they are, standing up. */
+/** Somewhere on the rooftop café worth saying they are, standing up. */
 function onTheRoof(p: PeerInfo): string | undefined {
-  if (p.x > STAGE.minX && p.x < STAGE.maxX && p.z < STAGE.maxZ) return '🎧 up on the stage';
-  if (p.x > DANCE_FLOOR.minX && p.x < DANCE_FLOOR.maxX && p.z > DANCE_FLOOR.minZ && p.z < DANCE_FLOOR.maxZ) return '🪩 on the dance floor';
-  if (p.x > ROOF_BAR.x - 2.5 && p.z > ROOF_BAR.minZ - 0.5 && p.z < ROOF_BAR.maxZ + 0.5) return '🍸 at the bar';
+  if (p.x > ROOF_BAR.x - 2.5 && p.z > ROOF_BAR.minZ - 0.5 && p.z < ROOF_BAR.maxZ + 0.5) return '☕ at the café counter';
   if (ROOF_TABLES.some((t) => Math.hypot(p.x - t.x, p.z - t.z) < 1.3)) return '🕯️ at a tall table';
-  if (Math.hypot(p.x - FIRE_PIT.x, p.z - FIRE_PIT.z) < 3.5) return '🔥 by the fire';
+  if (CAFE_TABLES.some((t) => Math.hypot(p.x - t.x, p.z - t.z) < 1.3)) return '☕ at a café table';
   return undefined;
 }
diff --git a/src/client/world/castle/kit.ts b/src/client/world/castle/kit.ts
index 8d853c568..e2c6e1693 100644
--- a/src/client/world/castle/kit.ts
+++ b/src/client/world/castle/kit.ts
@@ -35,7 +35,7 @@ export interface Kit {
   /** What paints itself over later: the stained glass (dimmer at night), the banners and the shields (in a floor's colors). */
   glass: THREE.MeshBasicMaterial[];
   banners: Banner[];
-  shields: THREE.MeshToonMaterial[];
+  shields: THREE.MeshStandardMaterial[];
   /** How many windows so far, so each one's glass is its own pattern. */
   windows: number;
   gong?: Gong;
diff --git a/src/client/world/castle/props.ts b/src/client/world/castle/props.ts
index 433118ce2..5414a4615 100644
--- a/src/client/world/castle/props.ts
+++ b/src/client/world/castle/props.ts
@@ -174,7 +174,7 @@ function banner(kit: Kit, p: PropConfig, color: string) {
   const uv = geo.attributes.uv as THREE.BufferAttribute;
   const pos = geo.attributes.position as THREE.BufferAttribute;
   for (let i = 0; i < uv.count; i++) uv.setXY(i, (pos.getX(i) + w / 2) / w, 1 + pos.getY(i) / h);
-  const cloth = new THREE.MeshToonMaterial({ map: tex, side: THREE.DoubleSide, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+  const cloth = new THREE.MeshStandardMaterial({ map: tex, side: THREE.DoubleSide });
   g.add(mesh(geo, cloth, 0, 0, 0.08, false));
   // The pole it hangs from, with a gold knob either end.
   g.add(mesh(new THREE.CylinderGeometry(0.045, 0.045, w + 0.4, 8).rotateZ(Math.PI / 2), kit.mats.woodDark, 0, 0.05, 0.1, false));
diff --git a/src/client/world/castle/textures.ts b/src/client/world/castle/textures.ts
index c1ccc37ef..72a7f74c6 100644
--- a/src/client/world/castle/textures.ts
+++ b/src/client/world/castle/textures.ts
@@ -200,7 +200,7 @@ export function paintBanner(g: CanvasRenderingContext2D, w: number, h: number, c
 }
 
 /** A toon material with a picture on it (stone, flagstones, boards). */
-export const toonMap = (map: THREE.Texture) => new THREE.MeshToonMaterial({ color: '#ffffff', map, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+export const toonMap = (map: THREE.Texture) => new THREE.MeshStandardMaterial({ color: '#ffffff', map });
 
 /** A floor's colors as heraldry: its trim's hue, deep and rich, for the banners and the shields. */
 export function heraldry(p: FloorPalette): string {
diff --git a/src/client/world/character/index.ts b/src/client/world/character/index.ts
index c7b73b681..88ae906b2 100644
--- a/src/client/world/character/index.ts
+++ b/src/client/world/character/index.ts
@@ -5,4 +5,4 @@ export { Worker } from './worker';
 export type { Stage } from './worker-dance';
 export { BACKSWING_TIME, IMPACT } from './person-golf';
 export { EXHALE_AT, REACH_TIME, SMOKE_CYCLE, dragCurve, emoteEnvelope, popCurve, reachCurve } from './curves';
-export { boxOfStuff, cigarette, coffeeMug, drinkGlass, putDownGlass } from './props';
+export { boxOfStuff, cigarette, coffeeMug, putDownGlass, serving } from './props';
diff --git a/src/client/world/character/person-hair.ts b/src/client/world/character/person-hair.ts
index 7fbede92b..c44e62ea9 100644
--- a/src/client/world/character/person-hair.ts
+++ b/src/client/world/character/person-hair.ts
@@ -3,7 +3,7 @@ import { HAIR_STYLES } from '../../../shared/avatar';
 import { mesh } from '../toon';
 
 /** Hair is a set of shapes on the head (whose center is 0,0,0; the face looks down +z), in `style` (of HAIR_STYLES). */
-export function styleHair(hair: THREE.Group, m: THREE.MeshToonMaterial, style: number) {
+export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, style: number) {
   for (const o of hair.children) (o as THREE.Mesh).geometry.dispose();
   hair.clear();
   const add = (geo: THREE.BufferGeometry, x: number, y: number, z: number, rx = 0, rz = 0) => {
diff --git a/src/client/world/character/person.ts b/src/client/world/character/person.ts
index 06af1d3bf..09e8b88d1 100644
--- a/src/client/world/character/person.ts
+++ b/src/client/world/character/person.ts
@@ -3,7 +3,7 @@ import { HAIR_COLORS, HAIR_STYLES, SKIN_TONES, type Look } from '../../../shared
 import { EMOTE_BY_ID, type EmoteId } from '../../../shared/emotes';
 import type { CarriedIssue, Theme } from '../../../shared/protocol';
 import type { BarGame } from '../../../shared/bargames';
-import type { Drink } from '../../../shared/rooftop';
+import type { MenuItem } from '../../../shared/rooftop';
 import { HIPS, type PersonRig } from './rig';
 import { axeModel, dartModel } from '../../features/bargames/world';
 import { OpenBook } from '../../features/bookshelf/book';
@@ -12,7 +12,7 @@ import { UNDEAD_SKIN } from '../costumes';
 import { HolidayOutfit } from './person-outfit';
 import { disposeSprite, mesh, textSprite, toon, toonUnique } from '../toon';
 import { EXHALE_AT, REACH_TIME, SMOKE_CYCLE, dragCurve, reachCurve } from './curves';
-import { cigarette, coffeeMug, drinkGlass, putDownGlass } from './props';
+import { cigarette, coffeeMug, putDownGlass, serving } from './props';
 import { styleHair } from './person-hair';
 import { clubSwing, strike, swingStep, type Golf } from './person-golf';
 import { propPosition, throwStep, type Oche } from './person-throw';
@@ -40,9 +40,9 @@ export class Person {
   private legR: THREE.Object3D;
   private armL: THREE.Object3D;
   private armR: THREE.Object3D;
-  private shirt: THREE.MeshToonMaterial;
-  private skin: THREE.MeshToonMaterial;
-  private hairMat: THREE.MeshToonMaterial;
+  private shirt: THREE.MeshStandardMaterial;
+  private skin: THREE.MeshStandardMaterial;
+  private hairMat: THREE.MeshStandardMaterial;
   private hair = new THREE.Group();
   private look: Look;
   private label: THREE.Sprite | null = null;
@@ -65,7 +65,7 @@ export class Person {
   private mug = new THREE.Group();
   private cup: THREE.Group;
   private wantsMug = false;
-  /** A drink from the rooftop bar, in the mug's place. */
+  /** A drink or a bite from the rooftop café, in the mug's place. */
   private glass: { id: string; group: THREE.Group } | null = null;
   /** An issue card off the board, held out in front in both hands. */
   private card: HeldCard;
@@ -78,7 +78,7 @@ export class Person {
   private shootT = -1;
   pose: Pose = 'stand';
   private cig: THREE.Group;
-  private ember: THREE.MeshToonMaterial;
+  private ember: THREE.MeshStandardMaterial;
   /** Seconds into a smoke break, or -1 when not on one. */
   private smokeT = -1;
   private wispIn = 0;
@@ -348,15 +348,15 @@ export class Person {
     this.mug.visible = (on || !!this.glass) && !this.card.held && !this.book && !this.ball && this.oche?.game !== 'axe';
   }
 
-  /** A drink from the rooftop bar in the left hand (in place of a mug), or none (null). */
-  holdDrink(d: Drink | null) {
+  /** A drink or a bite from the rooftop café in the left hand (in place of a mug), or none (null). */
+  holdDrink(d: MenuItem | null) {
     if ((d?.id ?? null) === (this.glass?.id ?? null)) return;
     if (this.glass) {
       putDownGlass(this.glass.group);
       this.glass = null;
     }
     if (d) {
-      const group = drinkGlass(d, 1.4);
+      const group = serving(d, 1.4);
       group.position.set(0.02, -0.08, 0.1);
       this.mug.add(group);
       this.glass = { id: d.id, group };
diff --git a/src/client/world/character/props.ts b/src/client/world/character/props.ts
index 9e9686bd5..febeef549 100644
--- a/src/client/world/character/props.ts
+++ b/src/client/world/character/props.ts
@@ -1,8 +1,9 @@
 import * as THREE from 'three';
-import type { Drink } from '../../../shared/rooftop';
 import { mesh, toon, toonUnique } from '../toon';
 
-// What people hold and carry (a mug of coffee, a drink, a cigarette, a box of their things), and taking
+export { serving } from './serving';
+
+// What people hold and carry (a mug of coffee, a cigarette, a box of their things), and taking
 // off what they wore.
 
 /** A full mug of coffee standing on y = 0, with its handle on the -x side. */
@@ -17,98 +18,14 @@ export function coffeeMug(scale = 1): THREE.Group {
   return mug;
 }
 
-/** Clear glass, faintly blue; no cartoon outline, so the drink inside shows through it. */
-const GLASS = new THREE.MeshBasicMaterial({ color: '#e8f6ff', transparent: true, opacity: 0.38, depthWrite: false });
-GLASS.userData.outlineParameters = { visible: false };
-
-/** A drink from the rooftop bar in its glass, standing on y = 0. */
-export function drinkGlass(d: Drink, scale = 1): THREE.Group {
-  const g = new THREE.Group();
-  const S = scale;
-  const cyl = (rTop: number, rBottom: number, h: number, mat: THREE.Material, y: number, x = 0) => {
-    g.add(mesh(new THREE.CylinderGeometry(rTop * S, rBottom * S, h * S, 14), mat, x * S, y * S, 0, false));
-  };
-  const liquid = toon(d.color);
-  // A stem and a foot, for the glasses that have them.
-  const stem = (h: number) => {
-    cyl(0.032, 0.034, 0.006, GLASS, 0.003);
-    cyl(0.005, 0.005, h, GLASS, h / 2);
-  };
-  switch (d.glass) {
-    case 'pint':
-      cyl(0.044, 0.036, 0.15, GLASS, 0.075);
-      cyl(0.041, 0.034, 0.115, liquid, 0.06);
-      cyl(0.043, 0.041, 0.022, toon('#fffaf0'), 0.128);
-      break;
-    case 'wine':
-      stem(0.07);
-      cyl(0.042, 0.03, 0.075, GLASS, 0.107);
-      cyl(0.036, 0.028, 0.035, liquid, 0.088);
-      break;
-    case 'martini': {
-      stem(0.075);
-      cyl(0.065, 0.005, 0.07, GLASS, 0.11);
-      cyl(0.052, 0.005, 0.055, liquid, 0.103);
-      // An olive on a stick.
-      const olive = mesh(new THREE.SphereGeometry(0.013 * S, 10, 8), toon('#7a9a3a'), 0.012 * S, 0.12 * S, 0, false);
-      g.add(olive);
-      const pick = mesh(new THREE.CylinderGeometry(0.002 * S, 0.002 * S, 0.09 * S, 6), toon('#c98b5a'), 0.02 * S, 0.14 * S, 0, false);
-      pick.rotation.z = -0.35;
-      g.add(pick);
-      break;
-    }
-    case 'highball': {
-      cyl(0.034, 0.032, 0.15, GLASS, 0.075);
-      cyl(0.031, 0.029, 0.12, liquid, 0.062);
-      // Ice, and a straw.
-      for (const [x, y] of [
-        [-0.01, 0.11],
-        [0.012, 0.095],
-      ]) {
-        const cube = mesh(new THREE.BoxGeometry(0.02 * S, 0.02 * S, 0.02 * S), toon('#f4fbff'), x * S, y * S, 0.004 * S, false);
-        cube.rotation.set(0.4, 0.6, 0.2);
-        g.add(cube);
-      }
-      if (d.id !== 'water') {
-        const straw = mesh(new THREE.CylinderGeometry(0.004 * S, 0.004 * S, 0.19 * S, 6), toon(d.id === 'maitai' ? '#ef476f' : '#06d6a0'), 0.012 * S, 0.13 * S, 0, false);
-        straw.rotation.z = -0.22;
-        g.add(straw);
-      }
-      if (d.id === 'maitai') {
-        // A paper umbrella, and a wedge of pineapple on the rim.
-        const umbrella = mesh(new THREE.ConeGeometry(0.035 * S, 0.018 * S, 10), toon('#ffd166'), -0.018 * S, 0.19 * S, 0, false);
-        umbrella.rotation.z = 0.4;
-        g.add(umbrella);
-        g.add(mesh(new THREE.BoxGeometry(0.028 * S, 0.02 * S, 0.01 * S), toon('#ffd166'), 0.03 * S, 0.148 * S, 0, false));
-      } else if (d.id === 'mojito') {
-        for (const [x, z] of [
-          [-0.012, 0.006],
-          [0.006, -0.01],
-          [0.01, 0.01],
-        ])
-          g.add(mesh(new THREE.SphereGeometry(0.009 * S, 6, 5), toon('#3f8f45'), x * S, 0.117 * S, z * S, false));
-        g.add(mesh(new THREE.CylinderGeometry(0.018 * S, 0.018 * S, 0.006 * S, 10, 1, false, 0, Math.PI), toon('#9bc53d'), 0.022 * S, 0.15 * S, 0, false));
-      }
-      break;
-    }
-    case 'shot':
-      cyl(0.026, 0.022, 0.06, GLASS, 0.03);
-      cyl(0.023, 0.02, 0.042, liquid, 0.024);
-      // A wedge of lime balanced on the rim.
-      g.add(mesh(new THREE.CylinderGeometry(0.016 * S, 0.016 * S, 0.008 * S, 10, 1, false, 0, Math.PI), toon('#9bc53d'), 0.022 * S, 0.065 * S, 0, false));
-      break;
-  }
-  return g;
-}
-
-/** Takes a glass from drinkGlass out of the hand holding it, and frees what it was made of (its materials are shared). */
+/** Takes something from `serving` out of the hand holding it, and frees what it was made of (its materials are shared). */
 export function putDownGlass(g: THREE.Group) {
   g.removeFromParent();
   g.traverse((o) => (o as THREE.Mesh).geometry?.dispose());
 }
 
 /** A cigarette, lit end toward +z, and the material of its glowing tip. */
-export function cigarette(): { group: THREE.Group; ember: THREE.MeshToonMaterial } {
+export function cigarette(): { group: THREE.Group; ember: THREE.MeshStandardMaterial } {
   const group = new THREE.Group();
   group.add(mesh(new THREE.CylinderGeometry(0.016, 0.016, 0.12, 8).rotateX(Math.PI / 2), toon('#fffaf3'), 0, 0, 0.01, false));
   group.add(mesh(new THREE.CylinderGeometry(0.017, 0.017, 0.045, 8).rotateX(Math.PI / 2), toon('#e9a03b'), 0, 0, -0.07, false));
diff --git a/src/client/world/character/rig.ts b/src/client/world/character/rig.ts
index 7337412e0..199f4100d 100644
--- a/src/client/world/character/rig.ts
+++ b/src/client/world/character/rig.ts
@@ -26,12 +26,12 @@ export interface PersonRig {
 export interface WorkerRig {
   root: THREE.Group;
   body: THREE.Group;
-  skin: THREE.MeshToonMaterial;
+  skin: THREE.MeshStandardMaterial;
   armL: THREE.Object3D;
   armR: THREE.Object3D;
   feet: THREE.Mesh[];
   pupils: THREE.Mesh[];
-  bulb: THREE.MeshToonMaterial;
+  bulb: THREE.MeshStandardMaterial;
   bulbMesh: THREE.Mesh;
   /** What it acts out with: the papers in its hands and the globe beside its laptop (see worker-props.ts). */
   props: THREE.Object3D[];
diff --git a/src/client/world/character/serving.ts b/src/client/world/character/serving.ts
new file mode 100644
index 000000000..580b83c0b
--- /dev/null
+++ b/src/client/world/character/serving.ts
@@ -0,0 +1,182 @@
+import * as THREE from 'three';
+import type { MenuItem } from '../../../shared/rooftop';
+import { mesh, toon } from '../toon';
+
+// What the rooftop café serves, as it looks in a hand: a cup, a mug, a tall glass or a plate, standing
+// on y = 0 and about a hand's size.
+
+/** Clear glass, faintly blue; no cartoon outline, so the drink inside shows through it. */
+const GLASS = new THREE.MeshBasicMaterial({ color: '#e8f6ff', transparent: true, opacity: 0.38, depthWrite: false });
+GLASS.userData.outlineParameters = { visible: false };
+
+const CHINA = '#fffaf3';
+const BREAD = '#e3b76f';
+
+/** A drink or a bite from the café, standing on y = 0 (`scale` makes it bigger, for a worker's small hand). */
+export function serving(item: MenuItem, scale = 1): THREE.Group {
+  const g = new THREE.Group();
+  const S = scale;
+  const cyl = (rTop: number, rBottom: number, h: number, mat: THREE.Material, y: number, x = 0, z = 0) => {
+    g.add(mesh(new THREE.CylinderGeometry(rTop * S, rBottom * S, h * S, 14), mat, x * S, y * S, z * S, false));
+  };
+  const ball = (r: number, color: string, x: number, y: number, z: number, sy = 1) => {
+    const m = mesh(new THREE.SphereGeometry(r * S, 10, 8), toon(color), x * S, y * S, z * S, false);
+    m.scale.y = sy;
+    g.add(m);
+  };
+  const liquid = toon(item.color);
+  const china = toon(CHINA);
+  switch (item.id) {
+    case 'espresso':
+    case 'cappuccino': {
+      // A small cup on its saucer, with the handle on the -x side, and foam on a cappuccino.
+      cyl(0.055, 0.05, 0.008, china, 0.004);
+      cyl(0.038, 0.028, 0.05, china, 0.033);
+      cyl(0.033, 0.033, 0.004, liquid, 0.056);
+      if (item.id === 'cappuccino') cyl(0.031, 0.031, 0.008, toon('#f5ead9'), 0.058);
+      g.add(mesh(new THREE.TorusGeometry(0.014 * S, 0.005 * S, 6, 12), china, -0.04 * S, 0.035 * S, 0, false));
+      break;
+    }
+    case 'flatwhite':
+    case 'blackTea':
+    case 'hotChocolate': {
+      // A mug, handle on the -x side.
+      cyl(0.04, 0.036, 0.085, china, 0.0425);
+      cyl(0.035, 0.035, 0.004, liquid, 0.08);
+      g.add(mesh(new THREE.TorusGeometry(0.022 * S, 0.006 * S, 6, 12), china, -0.045 * S, 0.045 * S, 0, false));
+      if (item.id === 'hotChocolate') cyl(0.03, 0.03, 0.006, toon('#f5ead9'), 0.084);
+      if (item.id === 'flatwhite') cyl(0.024, 0.024, 0.005, toon('#f5ead9'), 0.0835);
+      break;
+    }
+    case 'mintTea':
+    case 'orangeJuice':
+    case 'lemonade':
+    case 'sparkling': {
+      // A tall glass with ice, a straw and a slice on the rim; the tea has a sprig of mint.
+      cyl(0.034, 0.032, 0.15, GLASS, 0.075);
+      cyl(0.031, 0.029, item.id === 'mintTea' ? 0.13 : 0.115, liquid, 0.062);
+      if (item.id !== 'mintTea') {
+        for (const [x, y] of [
+          [-0.01, 0.11],
+          [0.012, 0.095],
+        ]) {
+          const cube = mesh(new THREE.BoxGeometry(0.02 * S, 0.02 * S, 0.02 * S), toon('#f4fbff'), x * S, y * S, 0.004 * S, false);
+          cube.rotation.set(0.4, 0.6, 0.2);
+          g.add(cube);
+        }
+        const straw = mesh(new THREE.CylinderGeometry(0.004 * S, 0.004 * S, 0.19 * S, 6), toon('#f4f1ea'), 0.012 * S, 0.13 * S, 0, false);
+        straw.rotation.z = -0.22;
+        g.add(straw);
+        const slice = item.id === 'orangeJuice' ? '#ff9f1c' : item.id === 'lemonade' ? '#f7e26b' : '#9bc53d';
+        g.add(mesh(new THREE.CylinderGeometry(0.016 * S, 0.016 * S, 0.008 * S, 10, 1, false, 0, Math.PI), toon(slice), 0.026 * S, 0.15 * S, 0, false));
+      } else {
+        for (const [x, z] of [
+          [-0.012, 0.006],
+          [0.006, -0.01],
+          [0.01, 0.012],
+        ])
+          ball(0.012, '#3f8f45', x, 0.14, z, 0.5);
+      }
+      break;
+    }
+    default: {
+      // Everything else goes on a plate.
+      cyl(0.075, 0.06, 0.01, china, 0.005);
+      plated(item, g, S, ball);
+    }
+  }
+  return g;
+}
+
+/** The bite on its plate (the plate's top is at y = 0.01). */
+function plated(item: MenuItem, g: THREE.Group, S: number, ball: (r: number, color: string, x: number, y: number, z: number, sy?: number) => void) {
+  const gold = toon(item.color);
+  const add = (geo: THREE.BufferGeometry, mat: THREE.Material, x: number, y: number, z: number) => {
+    const m = mesh(geo, mat, x * S, y * S, z * S, false);
+    g.add(m);
+    return m;
+  };
+  switch (item.id) {
+    case 'croissant':
+    case 'almondCroissant': {
+      // A crescent of puffed segments, fattest in the middle.
+      const n = 7;
+      for (let i = 0; i < n; i++) {
+        const a = ((i - (n - 1) / 2) / ((n - 1) / 2)) * 1.0;
+        const r = 0.02 + 0.014 * (1 - Math.abs(a));
+        const seg = add(new THREE.SphereGeometry(r * S, 10, 8), gold, Math.sin(a) * 0.05, 0.01 + r * 0.9, 0.012 - Math.cos(a) * 0.035);
+        seg.scale.set(1, 0.85, 1.15);
+        seg.rotation.y = a;
+      }
+      if (item.id === 'almondCroissant') {
+        // Icing sugar on top, and flaked almonds.
+        add(new THREE.CylinderGeometry(0.03 * S, 0.03 * S, 0.004 * S, 10), toon('#fffaf0'), 0, 0.058, -0.022);
+        for (const [x, z] of [
+          [-0.025, -0.018],
+          [0.022, -0.02],
+          [0, -0.032],
+          [0.035, -0.002],
+        ])
+          add(new THREE.BoxGeometry(0.014 * S, 0.003 * S, 0.008 * S), toon('#f2dcb3'), x, 0.062, z);
+      }
+      break;
+    }
+    case 'painAuChocolat': {
+      const body = add(new THREE.CapsuleGeometry(0.026 * S, 0.06 * S, 4, 10), gold, 0, 0.038, 0);
+      body.rotation.z = Math.PI / 2;
+      body.scale.set(1, 1, 0.85);
+      add(new THREE.BoxGeometry(0.075 * S, 0.006 * S, 0.012 * S), toon('#3b2214'), 0, 0.066, 0.004);
+      break;
+    }
+    case 'toastie': {
+      // Two triangles of toasted bread, one leaning on the other, the cheese showing.
+      const tri = new THREE.CylinderGeometry(0.05 * S, 0.05 * S, 0.026 * S, 3);
+      add(tri, toon(BREAD), -0.012, 0.025, 0).rotation.y = Math.PI / 6;
+      const upper = add(tri, toon(BREAD), 0.014, 0.043, 0.006);
+      upper.rotation.y = Math.PI / 6 + 0.3;
+      add(new THREE.CylinderGeometry(0.047 * S, 0.047 * S, 0.008 * S, 3), toon('#f5c542'), -0.012, 0.039, 0).rotation.y = Math.PI / 6;
+      ball(0.012, '#d9372b', 0.03, 0.062, 0.012, 0.5);
+      break;
+    }
+    case 'avocadoToast': {
+      add(new THREE.BoxGeometry(0.09 * S, 0.016 * S, 0.07 * S), toon(BREAD), 0, 0.018, 0);
+      add(new THREE.BoxGeometry(0.078 * S, 0.01 * S, 0.058 * S), gold, 0, 0.03, 0);
+      for (const [x, z] of [
+        [-0.02, 0.01],
+        [0.015, -0.012],
+        [0.025, 0.014],
+      ])
+        ball(0.008, '#d9372b', x, 0.038, z, 0.5);
+      break;
+    }
+    case 'fruitCup': {
+      // A little glass of strawberries, orange and blueberries.
+      const tall = add(new THREE.CylinderGeometry(0.036 * S, 0.028 * S, 0.06 * S, 14), GLASS, 0, 0.04, 0);
+      tall.castShadow = false;
+      for (const [x, y, z, c] of [
+        [-0.014, 0.05, 0.006, '#e5484d'],
+        [0.014, 0.052, -0.006, '#ff9f1c'],
+        [0, 0.07, 0.012, '#e5484d'],
+        [-0.012, 0.072, -0.012, '#3a4a9f'],
+        [0.016, 0.07, 0.01, '#3a4a9f'],
+      ] as const)
+        ball(0.013, c, x, y, z);
+      break;
+    }
+    case 'bagel': {
+      const ring = add(new THREE.TorusGeometry(0.036 * S, 0.016 * S, 8, 16), gold, 0, 0.026, 0);
+      ring.rotation.x = Math.PI / 2;
+      const spread = add(new THREE.TorusGeometry(0.036 * S, 0.01 * S, 6, 16), toon('#fff7ea'), 0, 0.04, 0);
+      spread.rotation.x = Math.PI / 2;
+      break;
+    }
+    case 'falafelWrap': {
+      // A wrapped tortilla in paper, leaning, with salad poking out of the top.
+      add(new THREE.CylinderGeometry(0.03 * S, 0.022 * S, 0.1 * S, 12), toon('#f2e3c2'), 0, 0.04, 0).rotation.z = Math.PI / 2 - 0.3;
+      add(new THREE.CylinderGeometry(0.031 * S, 0.026 * S, 0.05 * S, 12), toon('#c9b99a'), -0.015, 0.037, 0).rotation.z = Math.PI / 2 - 0.3;
+      ball(0.016, '#5fb760', 0.045, 0.062, 0, 0.7);
+      ball(0.01, '#8a6a3a', 0.04, 0.07, 0.012);
+      break;
+    }
+  }
+}
diff --git a/src/client/world/character/worker.ts b/src/client/world/character/worker.ts
index 128f5f9c4..3a748c715 100644
--- a/src/client/world/character/worker.ts
+++ b/src/client/world/character/worker.ts
@@ -20,7 +20,7 @@ export class Worker {
   private body = new THREE.Group();
   /** Its moving parts, for what poses them from the other files here (a dance, a cell, a costume). */
   private rig: WorkerRig;
-  private bulb: THREE.MeshToonMaterial;
+  private bulb: THREE.MeshStandardMaterial;
   private bulbMesh: THREE.Mesh;
   private armL: THREE.Object3D;
   private armR: THREE.Object3D;
@@ -70,7 +70,7 @@ export class Worker {
   private globe: ReturnType<typeof globe>;
   /** Beside its laptop, where the globe floats (see setPropSpot). */
   private spot = new THREE.Vector3(-1, 1.1, 1.3);
-  private skin: THREE.MeshToonMaterial;
+  private skin: THREE.MeshStandardMaterial;
   /** Dressed up for a holiday (see setCostume), and what it's wearing. */
   private costume: Theme | null = null;
   private outfit: THREE.Object3D[] = [];
diff --git a/src/client/world/city.ts b/src/client/world/city.ts
index 17233d006..8a36cf451 100644
--- a/src/client/world/city.ts
+++ b/src/client/world/city.ts
@@ -270,7 +270,7 @@ export function buildCity(night: NightParts): City {
   const gp = groundGeo.getAttribute('position') as THREE.BufferAttribute;
   // Line the texture up with the streets: a road down its middle falls on x = STREET_X, z = STREET_Z.
   for (let i = 0; i < uv.count; i++) uv.setXY(i, (gp.getX(i) - STREET_X) / PERIOD + 0.5, (gp.getZ(i) - STREET_Z) / PERIOD + 0.5);
-  const ground = new THREE.Mesh(groundGeo, new THREE.MeshToonMaterial({ map: groundTexture(), gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap }));
+  const ground = new THREE.Mesh(groundGeo, new THREE.MeshStandardMaterial({ map: groundTexture() }));
   ground.receiveShadow = false;
   street.add(ground);
 
@@ -384,15 +384,14 @@ export function buildCity(night: NightParts): City {
   street.add(mergeByMaterial(parks));
 
   // The buildings' walls (a material for each paint), their roofs, and what's on them.
-  const gradient = (toon('#fff') as THREE.MeshToonMaterial).gradientMap;
-  const paintMats = new Map<number, THREE.MeshToonMaterial>();
+  const paintMats = new Map<number, THREE.MeshStandardMaterial>();
   const paintOf = (i: number) => {
     let m = paintMats.get(i);
     if (!m) {
       const p = PAINTS[i];
       const lit = litTexture(p, i + 1);
       lit.repeat.set(1 / 16, 1 / 16);
-      m = new THREE.MeshToonMaterial({ map: bayTexture(p), emissive: '#ffffff', emissiveMap: lit, emissiveIntensity: 0, gradientMap: gradient });
+      m = new THREE.MeshStandardMaterial({ map: bayTexture(p), emissive: '#ffffff', emissiveMap: lit, emissiveIntensity: 0 });
       night.windows.push(m);
       paintMats.set(i, m);
     }
diff --git a/src/client/world/costumes.ts b/src/client/world/costumes.ts
index d074678d4..61535c1d2 100644
--- a/src/client/world/costumes.ts
+++ b/src/client/world/costumes.ts
@@ -11,9 +11,9 @@ import { mesh, toon, toonUnique } from './toon';
 /** What undead skin is mixed toward, for Halloween: a warlock's hands and face. */
 export const UNDEAD_SKIN = new THREE.Color('#a3bf98');
 
-const details = new Map<string, THREE.MeshToonMaterial>();
+const details = new Map<string, THREE.MeshStandardMaterial>();
 /** A material for small bits (stitches, bells), drawn without the cartoon outline, which would swallow them. */
-function detail(color: string): THREE.MeshToonMaterial {
+function detail(color: string): THREE.MeshStandardMaterial {
   let m = details.get(color);
   if (!m) {
     m = toonUnique(color);
@@ -207,7 +207,7 @@ export interface PeasantGarb {
   /** The linen coif on its head (off while a holiday hat's on). */
   cap: THREE.Group;
   /** The smock's cloth, which gets grubby (see Worker.setAge), and the color it started out. */
-  cloth: THREE.MeshToonMaterial;
+  cloth: THREE.MeshStandardMaterial;
   clean: THREE.Color;
   /** Patches sewn on as it wears through: each shows once the worker's this worn (0–1). */
   patches: { part: THREE.Object3D; at: number }[];
@@ -267,7 +267,7 @@ export function peasantGarb(seed: number): PeasantGarb {
 /** A beard and brows, grown out as the worker toils (see Worker.setAge). */
 export interface Beard {
   group: THREE.Group;
-  hair: THREE.MeshToonMaterial;
+  hair: THREE.MeshStandardMaterial;
   mustache: THREE.Group;
   chin: THREE.Mesh;
   /** What hangs off the chin: its length is its y scale. */
@@ -481,7 +481,7 @@ export function dogAntlers(): THREE.Group {
 }
 
 /** Rudolph's nose, which glows (head-local, over the dog's own). */
-export function dogRedNose(): { nose: THREE.Mesh; glow: THREE.MeshToonMaterial } {
+export function dogRedNose(): { nose: THREE.Mesh; glow: THREE.MeshStandardMaterial } {
   const glow = toonUnique('#ff3030');
   glow.emissive.set('#ff1a1a');
   glow.emissiveIntensity = 0.8;
diff --git a/src/client/world/hand/fire.ts b/src/client/world/hand/fire.ts
new file mode 100644
index 000000000..9c37525c3
--- /dev/null
+++ b/src/client/world/hand/fire.ts
@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+
+/** Witch-fire curling up round the fingers of each arm that has it, and flickering (retired with Halloween). */
+export function burnFire(arms: readonly { side: 1 | -1; fire: THREE.Points<THREE.BufferGeometry, THREE.PointsMaterial> | null }[], t: number) {
+  for (const arm of arms) {
+    const fire = arm.fire;
+    if (!fire) continue;
+    const pos = fire.geometry.attributes.position as THREE.BufferAttribute;
+    const n = pos.count;
+    for (let i = 0; i < n; i++) {
+      const rise = (t * 0.45 + i / n) % 1;
+      const a = t * 2.4 * arm.side + (i / n) * Math.PI * 2;
+      const r = 0.055 + Math.sin(t * 3 + i * 1.7) * 0.012 - rise * 0.02;
+      pos.setXYZ(i, Math.cos(a) * r, -0.015 + rise * 0.11, -0.05 + Math.sin(a) * r * 1.3);
+    }
+    pos.needsUpdate = true;
+    fire.material.opacity = 0.6 + 0.25 * Math.sin(t * 9 + arm.side) + 0.1 * Math.sin(t * 23);
+    fire.material.size = 0.028 + 0.006 * Math.sin(t * 5 + arm.side);
+  }
+}
diff --git a/src/client/world/hand/pose.ts b/src/client/world/hand/pose.ts
new file mode 100644
index 000000000..6a0590165
--- /dev/null
+++ b/src/client/world/hand/pose.ts
@@ -0,0 +1,60 @@
+import { relaxedPose, type HandPose } from './rig';
+
+/** What a hand is doing, from the hands' state (see Hands.fingers in world/hands.ts). */
+export interface HandState {
+  /** How far it grips a card, book or ball, 0–1. */
+  grip: number;
+  /** Round a mug or glass. */
+  glass: boolean;
+  /** Holding a cigarette. */
+  smoking: boolean;
+  /** How far it grips a ladder rung or the pole, 0–1. */
+  hold: number;
+  emote?: string;
+}
+
+/** The pose the hand on `side` (1 right, -1 left) wants right now, at time `t`. */
+export function wantedPose(side: 1 | -1, t: number, s: HandState): HandPose {
+  const want = relaxedPose();
+  const idle = (i: number) => 0.09 * Math.sin(t * 1.1 + i * 0.9 + side) + 0.04 * Math.sin(t * 2.3 + i * 1.7);
+  for (let i = 0; i < 4; i++) want.curl[i] = 1 + idle(i);
+  // Round the card, book or ball.
+  const grip = s.grip;
+  for (let i = 0; i < 4; i++) want.curl[i] += 1.3 * grip;
+  want.thumbCurl += 0.8 * grip;
+  // Round a mug or glass in the left hand.
+  if (s.glass) {
+    for (let i = 0; i < 4; i++) want.curl[i] = 1.9 + idle(i) * 0.3;
+    want.thumbCurl = 1.4;
+  }
+  // Holding the cigarette between the first two fingers.
+  if (s.smoking) {
+    want.curl = [0.55, 0.65, 2.4, 2.8];
+    want.thumbCurl = 1.6;
+  }
+  // Gripping a ladder rung or the pole.
+  const hold = s.hold;
+  for (let i = 0; i < 4; i++) want.curl[i] += (2.8 - want.curl[i]) * hold;
+  want.thumbCurl += (2 - want.thumbCurl) * hold;
+  want.thumbOut -= 0.7 * hold;
+  const id = s.emote;
+  if (id === 'wave' || id === 'facepalm') {
+    want.curl = [0.25, 0.25, 0.3, 0.35];
+    want.thumbOut = 1.1;
+  } else if (id === 'clap') {
+    want.curl = [0.15, 0.15, 0.2, 0.25];
+    want.thumbOut = 0.5;
+  } else if (side > 0 && id === 'thumbs') {
+    // A fist with the thumb straight up.
+    want.curl = [3.4, 3.4, 3.4, 3.4];
+    want.thumbUp = 1;
+    want.thumbCurl = 0.1;
+    want.roll = 1;
+  } else if (side > 0 && id === 'point') {
+    // Three fingers curled, the index out straight, the thumb tucked.
+    want.curl = [0.05, 3.2, 3.3, 3.4];
+    want.thumbOut = 0.4;
+    want.thumbCurl = 1.8;
+  }
+  return want;
+}
diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
new file mode 100644
index 000000000..ebd31d94f
--- /dev/null
+++ b/src/client/world/hand/rig.ts
@@ -0,0 +1,248 @@
+import * as THREE from 'three';
+
+/**
+ * A procedural first-person hand: wrist, palm with thenar and hypothenar pads, four fingers of three
+ * segments each (index longest after the middle, pinky shortest), and a thumb set off at an angle. Camera
+ * space as everywhere in the hands scene: -z is forward (where the fingers point), +y is the back of the hand.
+ * Built for the right hand and mirrored by `side` for the left: the thumb is on -x for the right hand.
+ */
+
+export interface HandMaterials {
+  skin: THREE.MeshStandardMaterial;
+  /** A touch redder than the skin, for the knuckles. */
+  knuckle: THREE.MeshStandardMaterial;
+  nail: THREE.MeshStandardMaterial;
+  sleeve: THREE.MeshStandardMaterial;
+}
+
+/** How the hand is held: how curled each finger is (1 = relaxed, 0 = straight, ~3.4 = fist) and the thumb. */
+export interface HandPose {
+  curl: [number, number, number, number];
+  /** 0 tucked in against the palm, 1 relaxed out to the side. */
+  thumbOut: number;
+  /** 0 → 1: the thumb sticks right out (with `roll` turning the hand on its side, a thumbs up). */
+  thumbUp: number;
+  /** How bent the thumb is (1 = relaxed). */
+  thumbCurl: number;
+  /** 0 → 1: the hand turns on the wrist, thumb side up. */
+  roll: number;
+}
+
+export function relaxedPose(): HandPose {
+  return { curl: [1, 1, 1, 1], thumbOut: 1, thumbUp: 0, thumbCurl: 1, roll: 0 };
+}
+
+interface Digit {
+  base: THREE.Group;
+  prox: THREE.Group;
+  mid: THREE.Group;
+  dist: THREE.Group;
+}
+
+export interface HandRig {
+  /** The wrist, hand and fingers (turns for `roll`). */
+  hand: THREE.Group;
+  /** Forearm, wrist and hand in skin: hidden when a costume dresses the hand. */
+  skinned: THREE.Object3D[];
+  /** The rolled sleeve and the cloth above it. */
+  sleeve: THREE.Object3D[];
+  apply(p: HandPose): void;
+}
+
+const geoCache = new Map<string, THREE.BufferGeometry>();
+
+function cached(key: string, make: () => THREE.BufferGeometry): THREE.BufferGeometry {
+  let g = geoCache.get(key);
+  if (!g) {
+    g = make();
+    geoCache.set(key, g);
+  }
+  return g;
+}
+
+/** A capsule that tapers from radius r0 (round end at the origin) to r1 (round end L along -z). */
+function taperedCapsule(r0: number, r1: number, L: number): THREE.BufferGeometry {
+  return cached(`cap|${r0}|${r1}|${L}`, () => {
+    const pts: THREE.Vector2[] = [];
+    const cap = 6;
+    for (let i = 0; i <= cap; i++) {
+      const a = (i / cap) * (Math.PI / 2);
+      pts.push(new THREE.Vector2(Math.max(1e-4, r0 * Math.sin(a)), -r0 * Math.cos(a)));
+    }
+    for (let i = 0; i <= cap; i++) {
+      const a = (i / cap) * (Math.PI / 2);
+      pts.push(new THREE.Vector2(Math.max(1e-4, r1 * Math.cos(a)), L + r1 * Math.sin(a)));
+    }
+    return new THREE.LatheGeometry(pts, 14).rotateX(-Math.PI / 2);
+  });
+}
+
+const UNIT_SPHERE = () => cached('sphere', () => new THREE.SphereGeometry(1, 22, 16));
+
+function blob(mat: THREE.Material, hx: number, hy: number, hz: number, x: number, y: number, z: number): THREE.Mesh {
+  const m = new THREE.Mesh(UNIT_SPHERE(), mat);
+  m.scale.set(hx, hy, hz);
+  m.position.set(x, y, z);
+  return m;
+}
+
+/** Fingers sit a little flatter top to bottom than side to side. */
+const FLAT = 0.86;
+
+function seg(mat: THREE.Material, r0: number, r1: number, L: number): THREE.Mesh {
+  const m = new THREE.Mesh(taperedCapsule(r0, r1, L), mat);
+  m.scale.y = FLAT;
+  return m;
+}
+
+/** A sleeve hanging loose, with folds in the cloth. Runs along +z from the roll. */
+function sleeveTube(): THREE.BufferGeometry {
+  return cached('sleeve', () => {
+    const g = new THREE.CylinderGeometry(1, 1, 1, 40, 30, true).rotateX(Math.PI / 2);
+    const p = g.attributes.position as THREE.BufferAttribute;
+    const z0 = 0.14;
+    const z1 = 0.56;
+    for (let i = 0; i < p.count; i++) {
+      const a = Math.atan2(p.getY(i), p.getX(i));
+      const t = p.getZ(i) + 0.5;
+      const fold = 1 + 0.05 * (0.4 + t) * Math.sin(a * 5 + t * 9) + 0.03 * Math.sin(a * 9 - t * 17) + 0.025 * Math.sin(a * 3 + t * 31);
+      // Gathers in tight at the roll and falls looser further up.
+      const r = (0.064 + 0.014 * t) * fold;
+      p.setXYZ(i, Math.cos(a) * r, Math.sin(a) * r, z0 + t * (z1 - z0));
+    }
+    g.computeVertexNormals();
+    return g;
+  });
+}
+
+/** A roll of cloth: a lumpy torus around the forearm. */
+function clothRoll(R: number, r: number, seed: number): THREE.BufferGeometry {
+  return cached(`roll|${R}|${r}|${seed}`, () => {
+    const g = new THREE.TorusGeometry(R, r, 14, 44);
+    const p = g.attributes.position as THREE.BufferAttribute;
+    for (let i = 0; i < p.count; i++) {
+      const x = p.getX(i);
+      const y = p.getY(i);
+      const a = Math.atan2(y, x);
+      const k = 1 + 0.045 * Math.sin(a * 4 + seed) + 0.03 * Math.sin(a * 7 + seed * 2.3);
+      p.setXYZ(i, x * k, y * k, p.getZ(i) * (1 + 0.1 * Math.sin(a * 3 + seed)));
+    }
+    g.computeVertexNormals();
+    return g;
+  });
+}
+
+// Finger lengths (proximal, middle, distal) and base radius: index, middle, ring, pinky.
+const FINGERS = [
+  { x: -0.0295, z: -0.092, len: [0.04, 0.024, 0.02], r: 0.0098, fan: 0.07 },
+  { x: -0.0098, z: -0.097, len: [0.044, 0.027, 0.021], r: 0.0102, fan: 0.01 },
+  { x: 0.0098, z: -0.093, len: [0.041, 0.025, 0.02], r: 0.0095, fan: -0.04 },
+  { x: 0.0285, z: -0.085, len: [0.032, 0.018, 0.017], r: 0.0082, fan: -0.12 },
+] as const;
+// How far each joint folds per unit of curl (the pinky and ring curl most).
+const PROX = [0.28, 0.32, 0.38, 0.45];
+const MID = [0.45, 0.5, 0.55, 0.6];
+const DIST = [0.28, 0.3, 0.32, 0.34];
+const THUMB = { meta: 0.032, prox: 0.032, dist: 0.027 };
+
+export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
+  const hand = new THREE.Group();
+  const skin = m.skin;
+  const wrist = blob(skin, 0.031, 0.0185, 0.024, 0, 0, -0.004);
+  const palm = blob(skin, 0.043, 0.0165, 0.047, 0, 0, -0.05);
+  const thenar = blob(skin, 0.019, 0.013, 0.032, -side * 0.027, -0.007, -0.034);
+  thenar.rotation.y = side * 0.35;
+  const hypo = blob(skin, 0.013, 0.012, 0.033, side * 0.032, -0.003, -0.045);
+  const ridge = blob(skin, 0.043, 0.011, 0.012, 0, 0.004, -0.093);
+  hand.add(wrist, palm, thenar, hypo, ridge);
+
+  const digits: Digit[] = [];
+  FINGERS.forEach((f, i) => {
+    const [l1, l2, l3] = f.len;
+    const r = f.r;
+    const base = new THREE.Group();
+    base.position.set(side * f.x, 0.003, f.z);
+    base.rotation.y = side * f.fan;
+    const prox = new THREE.Group();
+    prox.add(seg(skin, r, r * 0.9, l1));
+    const mid = new THREE.Group();
+    mid.position.z = -l1;
+    mid.add(seg(skin, r * 0.9, r * 0.82, l2));
+    const dist = new THREE.Group();
+    dist.position.z = -l2;
+    dist.add(seg(skin, r * 0.82, r * 0.64, l3));
+    // A natural, short nail on the back of the tip.
+    const s = r / 0.0098;
+    const nail = blob(m.nail, 0.0054 * s, 0.0011, 0.0072 * s, 0, r * 0.74 * FLAT, -l3 * 0.62);
+    nail.rotation.x = 0.06;
+    dist.add(nail);
+    // Knuckles: a faint tint over the big joint and the middle one.
+    const k1 = blob(m.knuckle, r * 1.04, r * 0.9, r * 0.95, 0, r * 0.28, 0.001);
+    base.add(k1);
+    mid.add(blob(m.knuckle, r * 0.86, r * 0.74, r * 0.8, 0, r * 0.22, 0));
+    mid.add(dist);
+    prox.add(mid);
+    base.add(prox);
+    hand.add(base);
+    digits.push({ base, prox, mid, dist });
+  });
+
+  // The thumb: set off at an angle from the palm, rolled a little so its nail faces up and out.
+  const tRoot = new THREE.Group();
+  tRoot.position.set(-side * 0.027, -0.006, -0.022);
+  tRoot.rotation.order = 'YXZ';
+  tRoot.add(seg(skin, 0.0135, 0.0118, THUMB.meta));
+  const j1 = new THREE.Group();
+  j1.position.z = -THUMB.meta;
+  j1.add(seg(skin, 0.0118, 0.0108, THUMB.prox));
+  const j2 = new THREE.Group();
+  j2.position.z = -THUMB.prox;
+  j2.add(seg(skin, 0.0108, 0.0086, THUMB.dist));
+  const tNail = blob(m.nail, 0.0066, 0.0012, 0.0082, 0, 0.0086 * FLAT * 0.78, -THUMB.dist * 0.6);
+  j2.add(tNail);
+  j2.add(blob(m.knuckle, 0.0098, 0.0082, 0.009, 0, 0.002, 0));
+  j1.add(j2);
+  tRoot.add(j1);
+  hand.add(tRoot);
+
+  // The forearm, tapering up into the sleeve.
+  const forearm = new THREE.Mesh(taperedCapsule(0.0285, 0.043, 0.22).clone().rotateY(Math.PI), skin);
+  forearm.scale.y = 0.82;
+  forearm.position.z = 0.005;
+
+  // Sleeve rolled up to the forearm: two rolls of cloth, then it hangs loose with folds.
+  const roll1 = new THREE.Mesh(clothRoll(0.054, 0.017, 1), m.sleeve);
+  roll1.position.z = 0.12;
+  const roll2 = new THREE.Mesh(clothRoll(0.059, 0.018, 2.4), m.sleeve);
+  roll2.position.z = 0.152;
+  roll2.rotation.x = 0.05;
+  const tube = new THREE.Mesh(sleeveTube(), m.sleeve);
+
+  const rig: HandRig = {
+    hand,
+    skinned: [forearm, hand],
+    sleeve: [roll1, roll2, tube],
+    apply(p) {
+      for (let i = 0; i < 4; i++) {
+        const c = p.curl[i];
+        const d = digits[i];
+        d.prox.rotation.x = -Math.min(PROX[i] * c, 1.45);
+        d.mid.rotation.x = -Math.min(MID[i] * c, 1.75);
+        d.dist.rotation.x = -Math.min(DIST[i] * c, 1.3);
+      }
+      const up = p.thumbUp;
+      tRoot.rotation.set(-0.12 + 0.22 * up, side * (0.2 + 0.4 * p.thumbOut + 0.85 * up), side * (0.45 - 0.35 * up));
+      j1.rotation.x = -0.2 * p.thumbCurl * (1 - up * 0.8);
+      j2.rotation.x = -0.28 * p.thumbCurl * (1 - up * 0.8);
+      hand.rotation.z = -side * 1.2 * p.roll;
+    },
+  };
+  rig.apply(relaxedPose());
+  return rig;
+}
+
+/** Wipes the shared geometry cache (never needed in play: the geometry is tiny and shared by every hand). */
+export function disposeHandGeometry() {
+  for (const g of geoCache.values()) g.dispose();
+  geoCache.clear();
+}
diff --git a/src/client/world/hands.ts b/src/client/world/hands.ts
index 2580e88b8..31e8c8646 100644
--- a/src/client/world/hands.ts
+++ b/src/client/world/hands.ts
@@ -1,12 +1,15 @@
 import * as THREE from 'three';
 import { EMOTE_BY_ID, type Emote, type EmoteId } from '../../shared/emotes';
 import type { CarriedIssue, Theme } from '../../shared/protocol';
-import type { Drink } from '../../shared/rooftop';
+import type { MenuItem } from '../../shared/rooftop';
 import { OpenBook } from '../features/bookshelf/book';
 import { HeldCard } from '../features/carrying/card';
-import { REACH_TIME, SMOKE_CYCLE, cigarette, coffeeMug, dragCurve, drinkGlass, emoteEnvelope, putDownGlass, reachCurve } from './character';
+import { REACH_TIME, SMOKE_CYCLE, cigarette, coffeeMug, dragCurve, emoteEnvelope, putDownGlass, reachCurve, serving } from './character';
 import { UNDEAD_SKIN, raggedCuff, warlockHand, witchFire } from './costumes';
 import { mesh, toon, toonUnique } from './toon';
+import { buildHand, relaxedPose, type HandPose, type HandRig } from './hand/rig';
+import { burnFire } from './hand/fire';
+import { wantedPose } from './hand/pose';
 import { ballMesh } from '../features/basketball/world';
 
 export interface HandsInput {
@@ -24,6 +27,10 @@ export interface HandsInput {
 /** Where the hands rest for holding, throwing, a drag or an emote (see classic): out wider than at rest. */
 const CLASSIC = { x: 0.25, y: -0.185, z: -0.44, rx: 0.2, ry: 0.22, rz: -0.25 } as const;
 
+/** A faint flush over the knuckles, and the pale pink of a fingernail, mixed into the skin tone. */
+const KNUCKLE_FLUSH = new THREE.Color('#c4605a');
+const NAIL_PINK = new THREE.Color('#f6cfc4');
+
 /** Lifting the mug for a sip and lowering it again, in seconds. */
 const SIP_TIME = 1.1;
 
@@ -34,9 +41,11 @@ interface Arm {
   side: 1 | -1;
   /** The white cuff at the wrist. */
   cuff: THREE.Mesh;
-  /** The hand: a round one like your character's, and on the right a pointing finger, out only to point. */
-  mitten: THREE.Mesh[];
-  finger: THREE.Mesh | null;
+  /** The real hand and forearm (see hand/rig), and the pose its fingers are easing toward. */
+  rig: HandRig;
+  pose: HandPose;
+  /** A fat green mitten in place of the fingers, for Christmas. */
+  mitten: THREE.Group;
   /** A holiday hand in place of the mitten (see setCostume), and the witch-fire round it. */
   dressed: THREE.Group | null;
   fire: THREE.Points<THREE.BufferGeometry, THREE.PointsMaterial> | null;
@@ -49,14 +58,17 @@ interface Arm {
 export class Hands {
   readonly scene = new THREE.Scene();
   readonly camera = new THREE.PerspectiveCamera(55, 1, 0.01, 5);
-  private sleeve: THREE.MeshToonMaterial;
-  private skin: THREE.MeshToonMaterial;
+  private sleeve: THREE.MeshStandardMaterial;
+  private skin: THREE.MeshStandardMaterial;
+  /** A shade redder over the knuckles, and the nails a shade paler and glossier than the skin. */
+  private knuckle: THREE.MeshStandardMaterial;
+  private nail: THREE.MeshStandardMaterial;
   private right: Arm;
   private left: Arm;
   private reachT = -1;
   private mug: THREE.Group;
   private wantsMug = false;
-  /** A drink from the rooftop bar, held where the mug goes (and in its place). */
+  /** A drink or a bite from the rooftop café, held where the mug goes (and in its place). */
   private glass: { id: string; group: THREE.Group } | null = null;
   /** An issue card off the board, held low in front of you in both hands. */
   private holder = new THREE.Group();
@@ -83,7 +95,7 @@ export class Hands {
   private ladderK = 0;
   private poleK = 0;
   private cig: THREE.Group;
-  private ember: THREE.MeshToonMaterial;
+  private ember: THREE.MeshStandardMaterial;
   /** Each light, and how bright it is where it's brightest. */
   private lights: [THREE.Light, number][] = [];
   private lightLevel = 1;
@@ -91,8 +103,8 @@ export class Hands {
   private smokeT = -1;
   /** The emote your character is doing, and how far into it (see Person.emote). */
   private emoting: { emote: Emote; t: number } | null = null;
-  /** Sticks up out of the right fist for a thumbs up. */
-  private thumbUp: THREE.Mesh;
+  /** How tightly the hands grip whatever they hold (card, book, ball), 0–1, for the fingers. */
+  private gripK = 0;
   /** Your shirt and skin, under whatever costume the hands wear. */
   private shirt: string;
   private skinTone: string;
@@ -104,7 +116,13 @@ export class Hands {
     this.shirt = shirt;
     this.skinTone = skin;
     this.sleeve = toonUnique(shirt);
+    this.sleeve.roughness = 0.92;
     this.skin = toonUnique(skin);
+    this.skin.roughness = 0.55;
+    this.knuckle = toonUnique(skin);
+    this.knuckle.roughness = 0.6;
+    this.nail = toonUnique(skin);
+    this.nail.roughness = 0.35;
     this.rags.side = THREE.DoubleSide;
     const sun = new THREE.DirectionalLight('#fff1d6', 2);
     sun.position.set(-0.6, 1.4, 0.9);
@@ -129,10 +147,7 @@ export class Hands {
     this.cig.position.set(-0.035, 0.03, -0.075);
     this.cig.visible = false;
     this.right.group.add(this.cig);
-    this.thumbUp = mesh(new THREE.CapsuleGeometry(0.027, 0.035, 4, 10), this.skin, -0.035, 0.065, -0.005, false);
-    this.thumbUp.rotation.z = 0.3;
-    this.thumbUp.visible = false;
-    this.right.group.add(this.thumbUp);
+    this.paint();
     // Tipped back, so you look down onto its front.
     this.holder.rotation.x = -0.35;
     this.scene.add(this.holder);
@@ -205,7 +220,9 @@ export class Hands {
         arm.fire?.material.dispose();
         arm.dressed = arm.fire = null;
       }
-      for (const m of arm.mitten) m.visible = !warlock;
+      // The fingers go for a mitten at Christmas, and for the warlock's own hand at Halloween.
+      arm.rig.hand.visible = theme !== 'christmas' && !warlock;
+      arm.mitten.visible = theme === 'christmas';
       // A mitten's fluffy cuff.
       arm.cuff.visible = theme === 'christmas';
       arm.cuff.scale.set(1.3, 1.3, 1.9);
@@ -225,6 +242,8 @@ export class Hands {
     this.sleeve.color.set(c === 'halloween' ? '#3b1d5a' : c === 'christmas' ? '#d62828' : this.shirt);
     this.skin.color.set(c === 'christmas' ? '#2e9e48' : this.skinTone);
     if (c === 'halloween') this.skin.color.lerp(UNDEAD_SKIN, 0.8);
+    this.knuckle.color.copy(this.skin.color).lerp(KNUCKLE_FLUSH, 0.16);
+    this.nail.color.copy(this.skin.color).lerp(NAIL_PINK, 0.42);
   }
 
   /** How lit it is where you stand, 0–1 (see Sky.lightAt): your hands go dark out on a night street. */
@@ -253,15 +272,15 @@ export class Hands {
     if (this.glass) this.glass.group.visible = !full;
   }
 
-  /** A drink from the rooftop bar in the left hand, or none (null). */
-  holdDrink(d: Drink | null) {
+  /** A drink or a bite from the rooftop café in the left hand, or none (null). */
+  holdDrink(d: MenuItem | null) {
     if ((d?.id ?? null) === (this.glass?.id ?? null)) return;
     if (this.glass) {
       putDownGlass(this.glass.group);
       this.glass = null;
     }
     if (d) {
-      const group = drinkGlass(d);
+      const group = serving(d);
       group.position.set(0.09, -0.035, -0.03);
       group.quaternion.setFromEuler(this.left.baseRot).invert();
       this.left.group.add(group);
@@ -303,8 +322,6 @@ export class Hands {
   emote(id: EmoteId) {
     const emote = EMOTE_BY_ID.get(id);
     this.emoting = emote ? { emote, t: 0 } : null;
-    this.thumbUp.visible = id === 'thumbs';
-    if (this.right.finger) this.right.finger.visible = id === 'point' && this.costume !== 'halloween' && this.costume !== 'christmas';
   }
 
   /** Raise the mug for a sip, once the right hand is back from the coffee machine. */
@@ -314,48 +331,52 @@ export class Hands {
 
   private arm(side: 1 | -1): Arm {
     const group = new THREE.Group();
-    // Sleeve runs from the wrist back past the camera, so its far end is always off screen.
-    group.add(mesh(new THREE.CapsuleGeometry(0.058, 0.42, 6, 14).rotateX(Math.PI / 2), this.sleeve, 0, 0, 0.29, false));
-    // A mitten's fluffy cuff, only at Christmas (see setCostume).
+    // A real hand at the end of a forearm in a rolled-up sleeve (see hand/rig); the sleeve runs back past
+    // the camera, so its far end is always off screen.
+    const rig = buildHand(side, { skin: this.skin, knuckle: this.knuckle, nail: this.nail, sleeve: this.sleeve });
+    for (const o of [...rig.skinned, ...rig.sleeve]) {
+      o.traverse((c) => {
+        const m = c as THREE.Mesh;
+        if (m.isMesh) m.castShadow = false;
+      });
+      group.add(o);
+    }
     const cuff = mesh(new THREE.CylinderGeometry(0.068, 0.068, 0.045, 18).rotateX(Math.PI / 2), toon('#fffaf3'), 0, 0, 0.075, false);
     cuff.visible = false;
     group.add(cuff);
-    // A round hand at the end of the sleeve, as your character has (see character/person.ts), a little
-    // bigger round than the sleeve; the right one points a finger only to point (see emote).
-    const palm = mesh(new THREE.SphereGeometry(0.056, 20, 16), this.skin, 0, 0, -0.012, false);
-    palm.scale.set(1, 0.94, 1.04);
-    group.add(palm);
-    const finger = side === 1 ? mesh(new THREE.CapsuleGeometry(0.017, 0.045, 4, 10).rotateX(Math.PI / 2), this.skin, -0.01, 0.01, -0.08, false) : null;
-    if (finger) {
-      finger.visible = false;
-      group.add(finger);
-    }
-    // Out from the bottom corners of the view, the sleeves angled in toward the hands.
+    // The mitten: a fat bag for the fingers and a stubby thumb.
+    const mitten = new THREE.Group();
+    const bag = mesh(new THREE.SphereGeometry(0.058, 20, 16), this.skin, 0, 0, -0.06, false);
+    bag.scale.set(1, 0.7, 1.35);
+    const thumb = mesh(new THREE.CapsuleGeometry(0.021, 0.03, 4, 10).rotateX(Math.PI / 2), this.skin, -side * 0.05, -0.005, -0.04, false);
+    thumb.rotation.y = side * 0.5;
+    mitten.add(bag, thumb);
+    mitten.visible = false;
+    group.add(mitten);
     const base = new THREE.Vector3(side * 0.18, -0.17, -0.5);
     const baseRot = new THREE.Euler(0.45, side * 0.55, side * -0.2);
     group.position.copy(base);
     group.rotation.copy(baseRot);
     this.scene.add(group);
-    return { group, base, baseRot, side, cuff, mitten: [palm], finger, dressed: null, fire: null };
+    return { group, base, baseRot, side, cuff, rig, pose: relaxedPose(), mitten, dressed: null, fire: null };
   }
 
-  /** Witch-fire curling up round your fingers, and flickering. */
-  private burn(t: number) {
-    for (const arm of [this.right, this.left]) {
-      const fire = arm.fire;
-      if (!fire) continue;
-      const pos = fire.geometry.attributes.position as THREE.BufferAttribute;
-      const n = pos.count;
-      for (let i = 0; i < n; i++) {
-        const rise = (t * 0.45 + i / n) % 1;
-        const a = t * 2.4 * arm.side + (i / n) * Math.PI * 2;
-        const r = 0.055 + Math.sin(t * 3 + i * 1.7) * 0.012 - rise * 0.02;
-        pos.setXYZ(i, Math.cos(a) * r, -0.015 + rise * 0.11, -0.05 + Math.sin(a) * r * 1.3);
-      }
-      pos.needsUpdate = true;
-      fire.material.opacity = 0.6 + 0.25 * Math.sin(t * 9 + arm.side) + 0.1 * Math.sin(t * 23);
-      fire.material.size = 0.028 + 0.006 * Math.sin(t * 5 + arm.side);
-    }
+  /**
+   * Eases `arm`'s fingers toward the pose its hand is in: relaxed and curled a touch (breathing a little),
+   * wrapped round whatever it holds, a fist for a thumbs up or a point, open for a wave.
+   */
+  private fingers(arm: Arm, dt: number, t: number) {
+    const side = arm.side;
+    const holdingGlass = side < 0 && (this.mug.visible || !!this.glass?.group.visible);
+    const want = wantedPose(side, t, { grip: this.gripK, glass: holdingGlass, smoking: side > 0 && this.smokeT >= 0, hold: Math.max(this.ladderK, this.poleK), emote: this.emoting?.emote.id });
+    const e = Math.min(1, dt * 12);
+    const p = arm.pose;
+    for (let i = 0; i < 4; i++) p.curl[i] += (want.curl[i] - p.curl[i]) * e;
+    p.thumbOut += (want.thumbOut - p.thumbOut) * e;
+    p.thumbUp += (want.thumbUp - p.thumbUp) * e;
+    p.thumbCurl += (want.thumbCurl - p.thumbCurl) * e;
+    p.roll += (want.roll - p.roll) * e;
+    arm.rig.apply(p);
   }
 
   update(dt: number, t: number, s: HandsInput) {
@@ -487,7 +508,10 @@ export class Hands {
       this.ember.emissiveIntensity += ((d > 0.9 ? 1.4 : 0.3) - this.ember.emissiveIntensity) * Math.min(1, dt * 6);
     }
     if (this.emoting) this.emoteStep(dt, l);
-    if (this.costume === 'halloween') this.burn(t);
+    this.gripK = Math.max(carry, held);
+    this.fingers(this.right, dt, t);
+    this.fingers(this.left, dt, t);
+    if (this.costume === 'halloween') burnFire([this.right, this.left], t);
   }
 
   /**
@@ -513,8 +537,6 @@ export class Hands {
     const { seconds, id } = e.emote;
     if (u >= seconds) {
       this.emoting = null;
-      this.thumbUp.visible = false;
-      if (this.right.finger) this.right.finger.visible = false;
       return;
     }
     const k = emoteEnvelope(u, seconds);
diff --git a/src/client/world/holiday.ts b/src/client/world/holiday.ts
index a5201e2a3..b9f23e063 100644
--- a/src/client/world/holiday.ts
+++ b/src/client/world/holiday.ts
@@ -357,7 +357,7 @@ function bat(mat: THREE.Material, scale: number): { root: THREE.Group; wings: TH
  * A decorated Christmas tree `h` tall standing at 0,0,0: tiers of branches, baubles, lights and a
  * star. `lit` collects where each light is, for their glow at night.
  */
-function christmasTree(h: number, lights: THREE.MeshToonMaterial[], lit?: THREE.Vector3[], trunk = false): THREE.Group {
+function christmasTree(h: number, lights: THREE.MeshStandardMaterial[], lit?: THREE.Vector3[], trunk = false): THREE.Group {
   const g = new THREE.Group();
   const greens = [toon('#1f7a3a'), toon('#2a9d4b'), toon('#23884a')];
   const tiers = 4;
@@ -469,13 +469,13 @@ export class Holiday {
   theme: Theme | null = null;
   private halloween = new THREE.Group();
   private christmas = new THREE.Group();
-  private pumpkin: THREE.MeshToonMaterial;
+  private pumpkin: THREE.MeshStandardMaterial;
   private pumpkinGlow: THREE.Points<THREE.BufferGeometry, THREE.PointsMaterial>[] = [];
   private treeGlow: THREE.Points<THREE.BufferGeometry, THREE.PointsMaterial>[] = [];
   private bats: Bat[] = [];
   /** Bats far off round the moon, which ride along with you like the moon does. */
   private moonBats = new THREE.Group();
-  private lights: THREE.MeshToonMaterial[];
+  private lights: THREE.MeshStandardMaterial[];
   private colliders: Record<Theme, Collider[]> = { halloween: [], christmas: [] };
   /**
    * Each holiday's things down on the street (and on the landing outside the bottom floor's exit),
@@ -496,8 +496,7 @@ export class Holiday {
 
     // ---- Halloween ----
     const [skin, glow] = pumpkinTextures();
-    const gradientMap = (toon('#fff') as THREE.MeshToonMaterial).gradientMap;
-    this.pumpkin = new THREE.MeshToonMaterial({ map: skin, emissive: '#ffffff', emissiveMap: glow, emissiveIntensity: 0.5, gradientMap });
+    this.pumpkin = new THREE.MeshStandardMaterial({ map: skin, emissive: '#ffffff', emissiveMap: glow, emissiveIntensity: 0.5 });
     const stem = new THREE.CylinderGeometry(0.09, 0.15, 0.4, 7).rotateZ(0.12).translate(0, 1.6, 0);
     // In the office and out on its balcony, which every floor has; and down on the street, or out
     // past the west wall on the bottom floor's landing.
diff --git a/src/client/world/office/balcony.ts b/src/client/world/office/balcony.ts
index 89d558113..c5632b27e 100644
--- a/src/client/world/office/balcony.ts
+++ b/src/client/world/office/balcony.ts
@@ -42,7 +42,7 @@ export function buildBalcony(group: THREE.Group, colliders: Collider[], interact
   // Everything that doesn't move and isn't textured goes in here, merged at the end.
   const parts = new THREE.Group();
   parts.add(mesh(box(w, SLAB - 0.01, d), toon(PALETTE.wallTrim), cx, -SLAB / 2 - 0.005, cz));
-  const deck = new THREE.Mesh(new THREE.PlaneGeometry(w, d), new THREE.MeshToonMaterial({ map: floorTexture(w, d), color: '#d6a574', gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap }));
+  const deck = new THREE.Mesh(new THREE.PlaneGeometry(w, d), new THREE.MeshStandardMaterial({ map: floorTexture(w, d), color: '#d6a574' }));
   deck.rotation.x = -Math.PI / 2;
   deck.position.set(cx, 0.002, cz);
   deck.receiveShadow = true;
diff --git a/src/client/world/office/build.ts b/src/client/world/office/build.ts
index 15c0e6237..3874e1e35 100644
--- a/src/client/world/office/build.ts
+++ b/src/client/world/office/build.ts
@@ -89,7 +89,7 @@ export function buildOffice(): Office {
   // The floor's planks, which the stack lays the floor with (and the back office its own).
   const floorTex = floorTexture();
   looks.planks.push(floorTex);
-  const planks = new THREE.MeshToonMaterial({ map: floorTex, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+  const planks = new THREE.MeshStandardMaterial({ map: floorTex });
   const desks = new Map<string, DeskView>();
   const doors: Door[] = [];
   /** What the fixtures built so far give the office. */
diff --git a/src/client/world/office/loft.ts b/src/client/world/office/loft.ts
index a3c988f74..317c215ae 100644
--- a/src/client/world/office/loft.ts
+++ b/src/client/world/office/loft.ts
@@ -29,7 +29,7 @@ export function buildLoft(group: THREE.Group, colliders: Collider[], interactabl
   group.add(mesh(box(w, SLAB, d), trimMat, cx, floorY - SLAB / 2, cz));
   const planks = floorTexture(w, d);
   looks.planks.push(planks);
-  const floor = new THREE.Mesh(new THREE.PlaneGeometry(w, d), new THREE.MeshToonMaterial({ map: planks, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap }));
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(w, d), new THREE.MeshStandardMaterial({ map: planks }));
   floor.rotation.x = -Math.PI / 2;
   floor.position.set(cx, floorY + 0.005, cz);
   floor.receiveShadow = true;
diff --git a/src/client/world/office/materials.ts b/src/client/world/office/materials.ts
index f917b689c..873418c1f 100644
--- a/src/client/world/office/materials.ts
+++ b/src/client/world/office/materials.ts
@@ -130,7 +130,7 @@ export function box(w: number, h: number, d: number) {
 
 /** The materials and textures a floor paints in its own colors. */
 export interface Looks {
-  wall: THREE.MeshToonMaterial;
-  trim: THREE.MeshToonMaterial;
+  wall: THREE.MeshStandardMaterial;
+  trim: THREE.MeshStandardMaterial;
   planks: THREE.CanvasTexture[];
 }
diff --git a/src/client/world/outside.ts b/src/client/world/outside.ts
index 36c4505c7..951399cf0 100644
--- a/src/client/world/outside.ts
+++ b/src/client/world/outside.ts
@@ -29,15 +29,15 @@ export interface Lamp {
 /** Everything that changes between day and night and with the weather, for the sky to drive. */
 export interface NightParts {
   /** Bulbs whose glow goes from `day` (emissive intensity by day) up to full at night. */
-  bulbs: { mat: THREE.MeshToonMaterial; day: number }[];
+  bulbs: { mat: THREE.MeshStandardMaterial; day: number }[];
   /** Where each bulb's soft halo goes at night, and its color; `ground` as for a Lamp. */
   halos: { at: THREE.Vector3; size: number; color: string; ground?: boolean }[];
   lamps: Lamp[];
   /** How far below the floor you're on the street is (see streetBelow): what the `ground` lamps drop with. */
   street: number;
   /** The neighbours' walls, whose windows light up at night. */
-  windows: THREE.MeshToonMaterial[];
-  clouds: THREE.MeshToonMaterial;
+  windows: THREE.MeshStandardMaterial[];
+  clouds: THREE.MeshStandardMaterial;
   /** Rain running down the office windows. */
   wetGlass: THREE.MeshBasicMaterial;
   /** Light you only see at night (the lighthouse's beam): see-through, `max` opaque when it's dark. */
@@ -45,7 +45,7 @@ export interface NightParts {
 }
 
 /** A bulb that glows `day` much by day and fully at night. */
-export function bulb(night: NightParts, color: string, day = 0): THREE.MeshToonMaterial {
+export function bulb(night: NightParts, color: string, day = 0): THREE.MeshStandardMaterial {
   const mat = toonUnique(color);
   mat.emissive.set(color);
   mat.emissiveIntensity = day;
@@ -57,7 +57,7 @@ const box = (w: number, h: number, d: number) => new THREE.BoxGeometry(w, h, d);
 
 /** A flat, textured toon plane lying on the ground. */
 function groundPlane(w: number, d: number, x: number, y: number, z: number, map: THREE.Texture | null, color = '#ffffff'): THREE.Mesh {
-  const mat = new THREE.MeshToonMaterial({ color, map, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+  const mat = new THREE.MeshStandardMaterial({ color, map });
   const m = new THREE.Mesh(new THREE.PlaneGeometry(w, d), mat);
   m.rotation.x = -Math.PI / 2;
   m.position.set(x, y, z);
@@ -192,7 +192,7 @@ export function tree(scale: number): THREE.Group {
 }
 
 /** A building across the street or out back: a painted block with rows of windows and a roof cap. */
-function building(w: number, h: number, d: number, color: string, lit: THREE.MeshToonMaterial[]): THREE.Group {
+function building(w: number, h: number, d: number, color: string, lit: THREE.MeshStandardMaterial[]): THREE.Group {
   const g = new THREE.Group();
   // Where the windows go across a floor (in 256ths): each column's middle half, 70 to 190 up.
   const face = (n: number) =>
@@ -223,7 +223,7 @@ function building(w: number, h: number, d: number, color: string, lit: THREE.Mes
     const t = face(n);
     t.wrapT = THREE.RepeatWrapping;
     t.repeat.set(1, floors);
-    const m = new THREE.MeshToonMaterial({ map: t, emissive: '#ffffff', emissiveMap: lights(n, floors), emissiveIntensity: 0, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap });
+    const m = new THREE.MeshStandardMaterial({ map: t, emissive: '#ffffff', emissiveMap: lights(n, floors), emissiveIntensity: 0 });
     lit.push(m);
     return m;
   };
@@ -238,7 +238,7 @@ function building(w: number, h: number, d: number, color: string, lit: THREE.Mes
 }
 
 /** A street lamp on the sidewalk at (x, z), its arm reaching out over the road toward `toward` (±1 in z). */
-export function streetLamp(parts: THREE.Group, night: NightParts, glass: THREE.MeshToonMaterial, colliders: Collider[], x: number, z: number, toward: number) {
+export function streetLamp(parts: THREE.Group, night: NightParts, glass: THREE.MeshStandardMaterial, colliders: Collider[], x: number, z: number, toward: number) {
   const ink = toon('#3d405b');
   const H = 5;
   parts.add(mesh(new THREE.CylinderGeometry(0.2, 0.24, 0.5, 10), ink, x, G + 0.25, z));
diff --git a/src/client/world/scenic/kit.ts b/src/client/world/scenic/kit.ts
index 3aeb16d55..bb7eb91db 100644
--- a/src/client/world/scenic/kit.ts
+++ b/src/client/world/scenic/kit.ts
@@ -16,8 +16,8 @@ export const box = (w: number, h: number, d: number) => new THREE.BoxGeometry(w,
  * For something lying flat on the ground: drawn over whatever's under it (the higher `over`, the more
  * it wins), and never outlined, which would ink a flat strip's edges up off the ground.
  */
-export function flat(color: string, over: number, map: THREE.Texture | null = null, opts: { transparent?: boolean; opacity?: number } = {}): THREE.MeshToonMaterial {
-  const m = new THREE.MeshToonMaterial({ color, map, gradientMap: (toon('#fff') as THREE.MeshToonMaterial).gradientMap, polygonOffset: true, polygonOffsetFactor: -over, polygonOffsetUnits: -over * 2, ...opts });
+export function flat(color: string, over: number, map: THREE.Texture | null = null, opts: { transparent?: boolean; opacity?: number } = {}): THREE.MeshStandardMaterial {
+  const m = new THREE.MeshStandardMaterial({ color, map, polygonOffset: true, polygonOffsetFactor: -over, polygonOffsetUnits: -over * 2, ...opts });
   m.userData.outlineParameters = { visible: false };
   return m;
 }
diff --git a/src/client/world/scenic/water.ts b/src/client/world/scenic/water.ts
index e88b56133..12dcf7c40 100644
--- a/src/client/world/scenic/water.ts
+++ b/src/client/world/scenic/water.ts
@@ -8,7 +8,7 @@ import { G, beside, box, flat, flatMesh, indexAt, strip, withTangents, type Alon
 import type { Road } from './road';
 
 /** The creek under the bridge, the lake under the mountains and the sea past the beach. Returns the water's ripples and the surf, to move. */
-export function buildWater(kit: ScenicKit, road: Road): { waters: THREE.Texture[]; surf: THREE.MeshToonMaterial[] } {
+export function buildWater(kit: ScenicKit, road: Road): { waters: THREE.Texture[]; surf: THREE.MeshStandardMaterial[] } {
   const { root, rand, parts, colliders, cullable, taken } = kit;
   const { creekLine, bridge } = road;
   const ripples = (base: string, light: string) =>
@@ -93,7 +93,7 @@ export function buildWater(kit: ScenicKit, road: Road): { waters: THREE.Texture[
     }
   }
   // The sea, west past the beach as far as you can see, the sand sloping down into it, and surf.
-  const surf: THREE.MeshToonMaterial[] = [];
+  const surf: THREE.MeshStandardMaterial[] = [];
   {
     const t = ripples('#2a9bd4', '#62c2e8');
     t.repeat.set(90, 125);
diff --git a/src/client/world/sky.ts b/src/client/world/sky.ts
index 2d0434f5c..ad4d57dc5 100644
--- a/src/client/world/sky.ts
+++ b/src/client/world/sky.ts
@@ -695,19 +695,19 @@ export class Sky {
     }
     this.lightning(t, dt);
     const flash = this.flash;
-    const sunI = 2.2 * smooth(-3, 10, elD) * (1 - 0.8 * this.cover) * (1 - 0.6 * this.fog) * (1 - 0.65 * sp);
+    const sunI = 1.7 * smooth(-3, 10, elD) * (1 - 0.8 * this.cover) * (1 - 0.6 * this.fog) * (1 - 0.65 * sp);
     const moonI = 0.4 * smooth(-4, -12, elD) * (1 - 0.75 * this.cover);
-    const hemiI = lerp(0.38, 1.5 * (1 - 0.25 * this.cover) * (1 - 0.35 * this.storm), day);
-    const ambI = lerp(0.12, 0.5, day);
+    const hemiI = lerp(0.2, 0.55 * (1 - 0.25 * this.cover) * (1 - 0.35 * this.storm), day);
+    const ambI = lerp(0.06, 0.15, day);
     const { sun, hemi, ambient } = this.lights;
     hemi.intensity = hemiI + flash * 3;
     hemi.color.copy(C.hemiSkyNight).lerp(C.hemiSky, day).lerp(SPOOKY.hemiSky, sp * 0.5);
     hemi.groundColor.copy(C.hemiGroundNight).lerp(C.hemiGround, day).lerp(SPOOKY.hemiGround, sp * 0.5);
     ambient.intensity = ambI + flash;
     ambient.color.copy(C.ambientNight).lerp(C.white, day);
-    // A cartoon sun: never so low its shadows fill the room. At night the moon lights things, from across the sky.
+    // A real sun, low enough for long shadows and slanting light through the windows. At night the moon lights things, from across the sky.
     const moonlit = elD < -4;
-    const lightEl = (moonlit ? 50 : 25 + Math.max(0, elD) * 0.6) * DEG;
+    const lightEl = (moonlit ? 50 : 14 + Math.max(0, elD) * 0.65) * DEG;
     const lightAz = moonlit ? az + Math.PI : az;
     this.dir.set(Math.cos(lightEl) * Math.sin(lightAz), Math.sin(lightEl), -Math.cos(lightEl) * Math.cos(lightAz));
     sun.position.copy(sun.target.position).addScaledVector(this.dir, 45);
diff --git a/src/client/world/station/textures.ts b/src/client/world/station/textures.ts
index ee6b2e1da..663ecf309 100644
--- a/src/client/world/station/textures.ts
+++ b/src/client/world/station/textures.ts
@@ -15,7 +15,7 @@ export function seeded(seed: number): () => number {
 }
 
 /** A toon material with `map` painted on it. */
-export function toonMap(map: THREE.Texture): THREE.MeshToonMaterial {
+export function toonMap(map: THREE.Texture): THREE.MeshStandardMaterial {
   const m = toonUnique('#ffffff');
   m.map = map;
   return m;
diff --git a/src/client/world/toon.ts b/src/client/world/toon.ts
index 18255dbe5..f68be3dbd 100644
--- a/src/client/world/toon.ts
+++ b/src/client/world/toon.ts
@@ -1,26 +1,13 @@
 import * as THREE from 'three';
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 
-let gradient: THREE.DataTexture | null = null;
+const cache = new Map<string, THREE.MeshStandardMaterial>();
 
-/** Three-step ramp that gives MeshToonMaterial its flat cartoon banding. */
-function gradientMap(): THREE.DataTexture {
-  if (gradient) return gradient;
-  const data = new Uint8Array([90, 90, 90, 255, 185, 185, 185, 255, 255, 255, 255, 255]);
-  gradient = new THREE.DataTexture(data, 3, 1, THREE.RGBAFormat);
-  gradient.minFilter = THREE.NearestFilter;
-  gradient.magFilter = THREE.NearestFilter;
-  gradient.needsUpdate = true;
-  return gradient;
-}
-
-const cache = new Map<string, THREE.MeshToonMaterial>();
-
-export function toon(color: THREE.ColorRepresentation, opts: { emissive?: THREE.ColorRepresentation; transparent?: boolean; opacity?: number } = {}): THREE.MeshToonMaterial {
+export function toon(color: THREE.ColorRepresentation, opts: { emissive?: THREE.ColorRepresentation; transparent?: boolean; opacity?: number } = {}): THREE.MeshStandardMaterial {
   const key = `${new THREE.Color(color).getHexString()}|${opts.emissive ?? ''}|${opts.opacity ?? 1}`;
   const hit = cache.get(key);
   if (hit) return hit;
-  const m = new THREE.MeshToonMaterial({ color, gradientMap: gradientMap() });
+  const m = new THREE.MeshStandardMaterial({ color, roughness: 0.7, metalness: 0 });
   if (opts.emissive !== undefined) m.emissive = new THREE.Color(opts.emissive);
   if (opts.transparent || (opts.opacity ?? 1) < 1) {
     m.transparent = true;
@@ -31,8 +18,8 @@ export function toon(color: THREE.ColorRepresentation, opts: { emissive?: THREE.
 }
 
 /** A fresh (uncached) toon material, for things whose color animates. */
-export function toonUnique(color: THREE.ColorRepresentation): THREE.MeshToonMaterial {
-  return new THREE.MeshToonMaterial({ color, gradientMap: gradientMap() });
+export function toonUnique(color: THREE.ColorRepresentation): THREE.MeshStandardMaterial {
+  return new THREE.MeshStandardMaterial({ color, roughness: 0.7, metalness: 0 });
 }
 
 export function mesh(geo: THREE.BufferGeometry, mat: THREE.Material, x = 0, y = 0, z = 0, shadow = true): THREE.Mesh {
@@ -286,7 +273,7 @@ export function mergeByMaterial(root: THREE.Object3D): THREE.Group {
   return out;
 }
 
-let painted: THREE.MeshToonMaterial | null = null;
+let painted: THREE.MeshStandardMaterial | null = null;
 
 /**
  * Like mergeByMaterial, but every plain toon mesh under `root` (one color, no texture, no glow, not
@@ -303,7 +290,7 @@ export function mergeByColor(root: THREE.Object3D): THREE.Group {
     if (!m.isMesh) return;
     const rel = new THREE.Matrix4().multiplyMatrices(inv, m.matrixWorld);
     const mat = m.material as THREE.Material;
-    const plain = mat instanceof THREE.MeshToonMaterial && !mat.map && !mat.transparent && !mat.vertexColors && mat.emissive.getHex() === 0 && mat.side === THREE.FrontSide;
+    const plain = mat instanceof THREE.MeshStandardMaterial && !mat.map && !mat.transparent && !mat.vertexColors && mat.emissive.getHex() === 0 && mat.side === THREE.FrontSide;
     if (!plain) {
       const copy = new THREE.Mesh(m.geometry, mat);
       copy.applyMatrix4(rel);
@@ -322,7 +309,7 @@ export function mergeByColor(root: THREE.Object3D): THREE.Group {
     (m.castShadow ? geos.cast : geos.still).push(geo);
   });
   const out = other.children.length ? mergeByMaterial(other) : new THREE.Group();
-  painted ??= new THREE.MeshToonMaterial({ vertexColors: true, gradientMap: gradientMap() });
+  painted ??= new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.7, metalness: 0 });
   for (const [list, cast] of [
     [geos.cast, true],
     [geos.still, false],
diff --git a/src/client/world/tower.ts b/src/client/world/tower.ts
index 9ee7b91b3..8722ce5c8 100644
--- a/src/client/world/tower.ts
+++ b/src/client/world/tower.ts
@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { BALCONY, BALCONY_DOOR, ELEVATOR, ELEVATOR_FRONT, EXIT_DOOR, FLOOR, ROOF_BAR, SLAB, STAGE, STOREY, STREET_Y, WALL_HEIGHT, WALL_T, WINDOWS, WING, wingMinZ, wingRowZ, type Opening, type Side } from '../../shared/layout';
+import { BALCONY, BALCONY_DOOR, ELEVATOR, ELEVATOR_FRONT, EXIT_DOOR, FLOOR, ROOF_BAR, SLAB, STOREY, STREET_Y, WALL_HEIGHT, WALL_T, WINDOWS, WING, wingMinZ, wingRowZ, type Opening, type Side } from '../../shared/layout';
 import type { Collider } from './types';
 import type { Fixture } from './office/fixture';
 import { bulb, type NightParts } from './outside';
@@ -7,7 +7,7 @@ import { mergeByMaterial, mesh, toon, toonUnique } from './toon';
 
 // The rest of the building, from outside: a floor per project, stacked into a tower. Only the floor
 // you're on is really there; the others are its outside (walls, windows, a balcony off each, a
-// cornice round the top and the rooftop bar over it, roughly), rebuilt whenever floors come and go or
+// cornice round the top and the rooftop café over it, roughly), rebuilt whenever floors come and go or
 // you change floors. Up on the roof it's every floor, under your feet.
 
 /** The building, walls included. */
@@ -179,25 +179,21 @@ export function buildTower(colliders: Collider[], night: NightParts): Tower {
     }
   };
 
-  // The rooftop bar, as it looks from down below (features/rooftop/world.ts has the real one).
+  // The rooftop café, as it looks from down below (features/rooftop/world.ts has the real one).
   const curb = toon('#d8d3ca');
   const steel = toon('#b8c1cc');
   const steelDark = toon('#8d99ae');
   const beacon = bulb(night, '#ff5d5d', 0.6);
-  const stage = toon('#2b2d42');
-  const black = toon('#1d1d1d');
-  const led = bulb(night, '#7b2ff7', 0.35);
-  const truss = toon('#c9d1d9');
   const barWood = toon('#6b3f2a');
   const counter = toon('#f4f1ea');
   const shelf = toon('#4a2c1d');
   const pergola = toon('#8a5a3b');
-  const parasol = toon('#ef476f');
+  const parasol = toon('#e9b872');
 
   /**
-   * The rooftop bar on the roof, `y` up, roughly: a curb round the edge with glass on it and a steel
-   * rail along the top, the elevator's housing, the DJ's stage with the LED wall behind it and the
-   * rig over it, the bar and its back bar under a pergola, and the parasols along the south edge.
+   * The rooftop café on the roof, `y` up, roughly: a curb round the edge with glass on it and a steel
+   * rail along the top, the elevator's housing, the counter and its shelves under a pergola, and the
+   * parasols along the south edge.
    */
   const roofTop = (parts: THREE.Group, y: number) => {
     const box = (w: number, h: number, d: number, mat: THREE.Material, x: number, y0: number, z: number) => parts.add(mesh(new THREE.BoxGeometry(w, h, d), mat, x, y0 + h / 2, z, false));
@@ -226,18 +222,7 @@ export function buildTower(colliders: Collider[], night: NightParts): Tower {
     box(ELEVATOR.width + 0.3, 0.3, ELEVATOR_FRONT - B.minZ + 0.2, steelDark, ELEVATOR.x, y + WALL_HEIGHT, hz + 0.05);
     parts.add(mesh(new THREE.SphereGeometry(0.12, 10, 8), beacon, ELEVATOR.x, y + WALL_HEIGHT + 0.4, hz, false));
 
-    // The stage, the LED wall behind the DJ, and the rig: a truss tower either side and a beam across.
-    const sw = STAGE.maxX - STAGE.minX;
-    const scx = (STAGE.minX + STAGE.maxX) / 2;
-    box(sw, STAGE.height, STAGE.maxZ - STAGE.minZ, stage, scx, y, (STAGE.minZ + STAGE.maxZ) / 2);
-    box(8.3, 4.3, 0.25, black, scx, y + STAGE.height + 0.2, STAGE.minZ + 0.06);
-    parts.add(mesh(new THREE.PlaneGeometry(8, 4), led, scx, y + STAGE.height + 2.35, STAGE.minZ + 0.2, false));
-    const rigZ = STAGE.maxZ - 0.15;
-    const rigTop = 5.6;
-    for (const x of [STAGE.minX + 0.2, STAGE.maxX - 0.2]) box(0.34, rigTop - STAGE.height, 0.34, truss, x, y + STAGE.height, rigZ);
-    box(sw - 0.4, 0.34, 0.34, truss, scx, y + rigTop - 0.34, rigZ);
-
-    // The bar along the east side, the shelves of bottles behind it, and the pergola over both.
+    // The counter along the east side, the shelves behind it, and the pergola over both.
     const blen = ROOF_BAR.maxZ - ROOF_BAR.minZ;
     const bz = (ROOF_BAR.minZ + ROOF_BAR.maxZ) / 2;
     const front = ROOF_BAR.x - ROOF_BAR.depth / 2;
@@ -350,7 +335,7 @@ export function buildTower(colliders: Collider[], night: NightParts): Tower {
         parts.add(back);
       }
     }
-    // On top, a cornice, and the rooftop bar over it; but up on the roof, it's the roof's own.
+    // On top, a cornice, and the rooftop café over it; but up on the roof, it's the roof's own.
     if (index < count) {
       const top = (count - 1 - index) * STOREY + WALL_HEIGHT;
       crown(parts, top);
diff --git a/src/server/chess.ts b/src/server/chess.ts
new file mode 100644
index 000000000..50c367747
--- /dev/null
+++ b/src/server/chess.ts
@@ -0,0 +1,103 @@
+// The rooftop's chess tables (see shared/chess-seats.ts): who sits at each, and the game they play.
+// Kept in memory, per office: a table goes back to the start when everyone's left it. Every move is
+// judged by the shared rules, so a page can only play what's legal, and only on its own turn.
+import { START_FEN, outcome, parseFen, playMove, toFen, other, type Color, type Promo } from '../shared/chess.js';
+import { CHESS_TABLES } from '../shared/chess-seats.js';
+import type { ChessEnd, ChessPlayer, ChessTable } from '../shared/protocol.js';
+
+interface Game {
+  fen: string;
+  w?: ChessPlayer;
+  b?: ChessPlayer;
+  moves: number;
+  last?: [number, number];
+  taken: string;
+  end?: ChessEnd;
+}
+
+const fresh = (): Game => ({ fen: START_FEN, moves: 0, taken: '' });
+
+export class ChessTables {
+  private readonly games = new Map<number, Game>(CHESS_TABLES.map((t) => [t.n, fresh()]));
+
+  has(table: number): boolean {
+    return this.games.has(table);
+  }
+
+  view(table: number): ChessTable {
+    const g = this.games.get(table)!;
+    return { n: table, ...g };
+  }
+
+  all(): ChessTable[] {
+    return [...this.games.keys()].map((n) => this.view(n));
+  }
+
+  /** The table and side `id` is sitting at, if they're at one. */
+  seatOf(id: string): { table: number; side: Color } | undefined {
+    for (const [table, g] of this.games) for (const side of ['w', 'b'] as const) if (g[side]?.id === id) return { table, side };
+  }
+
+  /** Takes a chair. Returns what's wrong, or undefined when it's theirs; the tables that changed are in `changed`. */
+  join(table: number, side: Color, who: ChessPlayer, changed: Set<number>): string | undefined {
+    const g = this.games.get(table);
+    if (!g) return 'There is no such table';
+    if (g[side] && g[side]!.id !== who.id) return `${g[side]!.name} is sitting there`;
+    if (g[side]?.id === who.id) return undefined;
+    // One chair at a time.
+    this.leave(who.id, changed);
+    g[side] = who;
+    changed.add(table);
+    return undefined;
+  }
+
+  /** Gets up from whichever chair `id` is in. The game stays as it is for whoever sits there next, unless the table's empty. */
+  leave(id: string, changed: Set<number>) {
+    const at = this.seatOf(id);
+    if (!at) return;
+    const g = this.games.get(at.table)!;
+    delete g[at.side];
+    if (!g.w && !g.b) this.games.set(at.table, fresh());
+    changed.add(at.table);
+  }
+
+  /** `id` plays `from` to `to` at `table`. Returns what's wrong, or undefined once it's played. */
+  move(id: string, table: number, from: number, to: number, promo: Promo | undefined): string | undefined {
+    const at = this.seatOf(id);
+    const g = this.games.get(table);
+    if (!g || at?.table !== table) return "You aren't playing at that table";
+    if (g.end) return 'The game is over';
+    if (!g.w || !g.b) return 'Waiting for an opponent';
+    const state = parseFen(g.fen)!;
+    if (state.turn !== at.side) return "It isn't your move";
+    if (!Number.isInteger(from) || !Number.isInteger(to) || from < 0 || from > 63 || to < 0 || to > 63) return 'That move is not allowed';
+    const played = playMove(state, from, to, promo);
+    if (!played) return 'That move is not allowed';
+    g.fen = toFen(played.state);
+    g.moves++;
+    g.last = [from, to];
+    g.taken += played.captured;
+    const done = outcome(played.state);
+    if (done.over) g.end = done.kind === 'checkmate' ? { kind: 'checkmate', winner: done.winner } : { kind: done.kind };
+    return undefined;
+  }
+
+  resign(id: string, table: number): string | undefined {
+    const at = this.seatOf(id);
+    const g = this.games.get(table);
+    if (!g || at?.table !== table) return "You aren't playing at that table";
+    if (g.end || !g.moves) return 'There is no game to resign';
+    g.end = { kind: 'resign', winner: other(at.side) };
+    return undefined;
+  }
+
+  /** Sets the pieces up again: once the game's over, before anything's been played, or with nobody in the other chair. */
+  newGame(id: string, table: number): string | undefined {
+    const at = this.seatOf(id);
+    const g = this.games.get(table);
+    if (!g || at?.table !== table) return "You aren't playing at that table";
+    if (!g.end && g.moves && g.w && g.b) return 'Finish the game first (or resign)';
+    this.games.set(table, { ...fresh(), w: g.w, b: g.b });
+    return undefined;
+  }
+}
diff --git a/src/server/office/context.ts b/src/server/office/context.ts
index 96090a2e0..742f42633 100644
--- a/src/server/office/context.ts
+++ b/src/server/office/context.ts
@@ -144,7 +144,7 @@ export interface Navigation {
    * everything. They arrive in the elevator, or `at` the spot they came by.
    */
   goToFloor(c: Client, floor: Floor, at?: Spot): void;
-  /** Up to the rooftop bar, by elevator. */
+  /** Up to the rooftop café, by elevator. */
   goToRoof(c: Client): void;
   /** Out to the lobby, where the elevator has nowhere to go: the building's last floor was taken off. */
   toLobby(c: Client): void;
diff --git a/src/server/office/navigation.ts b/src/server/office/navigation.ts
index a504d4f36..932ff5449 100644
--- a/src/server/office/navigation.ts
+++ b/src/server/office/navigation.ts
@@ -25,7 +25,7 @@ export function navigation(ctx: Ctx): Navigation {
     ctx.floorsChanged();
   };
 
-  /** Up to the rooftop bar, by elevator. */
+  /** Up to the rooftop café, by elevator. */
   const goToRoof = (c: Client) => {
     if (c.peer.floor === ROOF) return;
     const left = leave(c);
diff --git a/src/server/office/views.ts b/src/server/office/views.ts
index 3d21fc424..7969d87ab 100644
--- a/src/server/office/views.ts
+++ b/src/server/office/views.ts
@@ -11,7 +11,7 @@ export const floorView = (ctx: Ctx, floor: Floor | undefined): FloorView => {
   for (const [key, piece] of Object.entries(views)) view[key] = piece(ctx, floor);
   return view as unknown as FloorView;
 };
-/** The rooftop bar: nobody works up there, so it has none of a floor's things. */
+/** The rooftop café: nobody works up there, so it has none of a floor's things. */
 export const roofView = (ctx: Ctx): FloorView => ({ ...floorView(ctx, undefined), floor: ROOF });
 export const screensOf = (ctx: Ctx, c: Client, floor: Floor | undefined) => {
   for (const { workerId, frame } of floor?.workers.fullScreens() ?? []) ctx.sendTo(c, { t: 'screen', workerId, ...frame, full: true });
diff --git a/src/server/ws/handlers/chess.ts b/src/server/ws/handlers/chess.ts
new file mode 100644
index 000000000..788a7b0ca
--- /dev/null
+++ b/src/server/ws/handlers/chess.ts
@@ -0,0 +1,107 @@
+// The rooftop's chess tables: sitting down at one, moving, resigning, starting again.
+import type { ChessClientMsg } from '../../../shared/protocol.js';
+import { chessSeatKey } from '../../../shared/chess-seats.js';
+import { ROOF } from '../../../shared/rooftop.js';
+import { ChessTables } from '../../chess.js';
+import { throttle, type Client } from '../../office/client.js';
+import type { Ctx } from '../../office/context.js';
+import { num } from '../../office/input.js';
+import type { FeatureHooks, HandlerMap } from './types.js';
+
+/** The office's tables, made the first time anyone asks. */
+const offices = new WeakMap<Ctx, ChessTables>();
+export const chessTables = (ctx: Ctx): ChessTables => {
+  let t = offices.get(ctx);
+  if (!t) offices.set(ctx, (t = new ChessTables()));
+  return t;
+};
+
+/** Tells everyone on the roof how these tables stand now. */
+function changed(ctx: Ctx, tables: ChessTables, which: Iterable<number>) {
+  for (const n of which) for (const o of ctx.clients.values()) if (o.peer.floor === ROOF) ctx.sendTo(o, { t: 'chess.table', table: tables.view(n) });
+}
+
+/** Whoever has a chair but isn't in it any more (stood up, or took another seat) gets up from it. */
+function prune(ctx: Ctx, tables: ChessTables, out: Set<number>) {
+  for (const t of tables.all()) {
+    for (const side of ['w', 'b'] as const) {
+      const who = t[side];
+      const c = who && ctx.clients.get(who.id);
+      if (who && (!c || c.peer.floor !== ROOF || c.peer.seat !== chessSeatKey(t.n, side))) tables.leave(who.id, out);
+    }
+  }
+}
+
+/** Runs what a message does to the tables, then tells the roof about each one it changed (and `c` what was wrong). */
+function act(ctx: Ctx, c: Client, fn: (tables: ChessTables, out: Set<number>) => string | undefined) {
+  const tables = chessTables(ctx);
+  const out = new Set<number>();
+  prune(ctx, tables, out);
+  const wrong = fn(tables, out);
+  changed(ctx, tables, out);
+  if (wrong) ctx.warn(c, wrong);
+}
+
+const tableOf = (n: unknown) => num(n) | 0;
+
+export const chessHandlers = {
+  'chess.sync'(ctx, c) {
+    const tables = chessTables(ctx);
+    const out = new Set<number>();
+    prune(ctx, tables, out);
+    changed(ctx, tables, out);
+    if (c.peer.floor === ROOF) ctx.sendTo(c, { t: 'chess.tables', tables: tables.all() });
+  },
+  'chess.join'(ctx, c, msg) {
+    const side = msg.side === 'b' ? 'b' : 'w';
+    const table = tableOf(msg.table);
+    // Only from the chair itself: sitting there is what puts someone at the table.
+    if (c.peer.floor !== ROOF || c.peer.seat !== chessSeatKey(table, side)) return;
+    act(ctx, c, (tables, out) => tables.join(table, side, { id: c.id, name: c.peer.name }, out));
+  },
+  'chess.leave'(ctx, c) {
+    act(ctx, c, (tables, out) => void tables.leave(c.id, out));
+  },
+  'chess.move'(ctx, c, msg) {
+    if (!throttle(c, 'chess.move', 150)) return;
+    const promo = msg.promo === 'r' || msg.promo === 'b' || msg.promo === 'n' ? msg.promo : undefined;
+    act(ctx, c, (tables, out) => {
+      const table = tableOf(msg.table);
+      const wrong = tables.move(c.id, table, num(msg.from), num(msg.to), promo);
+      if (!wrong) out.add(table);
+      return wrong;
+    });
+  },
+  'chess.resign'(ctx, c, msg) {
+    act(ctx, c, (tables, out) => {
+      const table = tableOf(msg.table);
+      const wrong = tables.resign(c.id, table);
+      if (!wrong) out.add(table);
+      return wrong;
+    });
+  },
+  'chess.new'(ctx, c, msg) {
+    act(ctx, c, (tables, out) => {
+      const table = tableOf(msg.table);
+      const wrong = tables.newGame(c.id, table);
+      if (!wrong) out.add(table);
+      return wrong;
+    });
+  },
+} satisfies HandlerMap<ChessClientMsg>;
+
+/** Leaving the roof, or the office, gets you up from your chair (the game waits there for whoever sits next). */
+export const chessHooks: FeatureHooks = {
+  leaving(ctx, c) {
+    const tables = chessTables(ctx);
+    const out = new Set<number>();
+    tables.leave(c.id, out);
+    changed(ctx, tables, out);
+  },
+  closed(ctx, c) {
+    const tables = chessTables(ctx);
+    const out = new Set<number>();
+    tables.leave(c.id, out);
+    changed(ctx, tables, out);
+  },
+};
diff --git a/src/server/ws/handlers/index.ts b/src/server/ws/handlers/index.ts
index dd119c2ea..15991df31 100644
--- a/src/server/ws/handlers/index.ts
+++ b/src/server/ws/handlers/index.ts
@@ -6,6 +6,7 @@ import { ballHandlers, ballHooks, ballView } from './ball.js';
 import { cabinetHandlers, cabinetHooks, cabinetView } from './cabinet.js';
 import { carHandlers, carHooks, carsView } from './car.js';
 import { changesHandlers, changesHooks } from './changes.js';
+import { chessHandlers, chessHooks } from './chess.js';
 import { decorHandlers, decorView } from './decor.js';
 import { dogHandlers, dogView } from './dog.js';
 import { floorHandlers, projectView } from './floors.js';
@@ -31,6 +32,7 @@ export const handlers: HandlerMap<ClientMsg> = {
   ...cabinetHandlers,
   ...carHandlers,
   ...changesHandlers,
+  ...chessHandlers,
   ...decorHandlers,
   ...dogHandlers,
   ...floorHandlers,
@@ -53,7 +55,7 @@ export const handlers: HandlerMap<ClientMsg> = {
  * The features that keep something per person on a floor, in the order they let go of it when
  * someone leaves the floor or the office (see FeatureHooks): the order the office has always done it in.
  */
-export const features: readonly FeatureHooks[] = [workerHooks, changesHooks, whiteboardHooks, ballHooks, carHooks, cabinetHooks];
+export const features: readonly FeatureHooks[] = [workerHooks, changesHooks, whiteboardHooks, ballHooks, carHooks, cabinetHooks, chessHooks];
 
 /** What someone arriving on a floor is sent (see office/views.ts): a piece from each feature, in the order it has always gone out. */
 export const views: ViewPieces = {
diff --git a/src/server/ws/handlers/presence.ts b/src/server/ws/handlers/presence.ts
index 4e339bcab..1b0da5dfa 100644
--- a/src/server/ws/handlers/presence.ts
+++ b/src/server/ws/handlers/presence.ts
@@ -4,7 +4,7 @@ import type { ChatLine, PresenceClientMsg } from '../../../shared/protocol.js';
 import { seatHereOn } from '../../../shared/maps/index.js';
 import { sanitizeLook } from '../../../shared/avatar.js';
 import { isEmote } from '../../../shared/emotes.js';
-import { ROOF, isDrink } from '../../../shared/rooftop.js';
+import { ROOF, isItem } from '../../../shared/rooftop.js';
 import { isBarGame } from '../../../shared/bargames.js';
 import { throttle } from '../../office/client.js';
 import { COLOR_RE, issueNumber, num, str } from '../../office/input.js';
@@ -22,8 +22,8 @@ export const presenceHandlers = {
   },
   act(ctx, c, msg) {
     if (msg.drink !== undefined) {
-      // A drink from the rooftop bar, which stays up there.
-      const drink = isDrink(msg.drink) && c.peer.floor === ROOF ? msg.drink : undefined;
+      // A drink or a bite from the rooftop café, which stays up there.
+      const drink = isItem(msg.drink) && c.peer.floor === ROOF ? msg.drink : undefined;
       if (drink === c.peer.drink) return;
       if (drink) c.peer.drink = drink;
       else delete c.peer.drink;
diff --git a/src/server/ws/handlers/rooftop.ts b/src/server/ws/handlers/rooftop.ts
index 7a747b0ca..f5642f1c6 100644
--- a/src/server/ws/handlers/rooftop.ts
+++ b/src/server/ws/handlers/rooftop.ts
@@ -1,4 +1,4 @@
-// The balcony and the roof: the golf tee, the dart board and the axe lane, the gong and the DJ's air horn.
+// The balcony and the roof: the golf tee, the dart board and the axe lane, the gong and the retired air horn.
 import type { RooftopClientMsg } from '../../../shared/protocol.js';
 import { ROOF } from '../../../shared/rooftop.js';
 import { tossOk, type BarGame } from '../../../shared/bargames.js';
@@ -27,6 +27,7 @@ export const rooftopHandlers = {
     if (!floor || !throttle(c, 'gong', 500)) return;
     ctx.toFloor(floor, { t: 'gong', why: 'hit', by: who });
   },
+  // Retired: the DJ is gone, and no page sends this any more. Harmless, so it stays.
   horn(ctx, c) {
     const who = c.peer.name;
     if (c.peer.floor !== ROOF || !throttle(c, 'horn', 1500)) return;
diff --git a/src/shared/bargames.ts b/src/shared/bargames.ts
index 86de2a893..c10185ddb 100644
--- a/src/shared/bargames.ts
+++ b/src/shared/bargames.ts
@@ -1,4 +1,4 @@
-// The games in the rooftop bar's north-west corner: an axe-throwing lane and a dart board. You step
+// The games in the rooftop café's north-west corner: an axe-throwing lane and a dart board. You step
 // up to the line (or the oche) and throw. Your page works out where it lands; the office passes that
 // on to everyone else up there (see the client's features/bargames/controller.ts), and every page scores it the same way
 // from here. Shared by the server (which checks a throw is one anyone could make) and the client.
diff --git a/src/shared/chess-seats.ts b/src/shared/chess-seats.ts
new file mode 100644
index 000000000..5522be52f
--- /dev/null
+++ b/src/shared/chess-seats.ts
@@ -0,0 +1,40 @@
+// Where the rooftop's three chess tables stand, and the two chairs at each: the 'Merge Conflict' games
+// corner, in the old DJ stage's spot (see features/chess). Add CHESS_SEATS to SEATING in layout.ts:
+// the server only lets someone sit on a seat it knows of, and the chess table seats whoever sits there.
+import type { SeatDef } from './layout.js';
+import type { Color } from './chess.js';
+
+/** The tables, numbered from 1, each standing at (x, z) with White's chair on its south side and Black's on its north. */
+export const CHESS_TABLES: readonly { n: number; x: number; z: number }[] = [
+  { n: 1, x: -7, z: -7.5 },
+  { n: 2, x: -4, z: -7.5 },
+  { n: 3, x: -1, z: -7.5 },
+];
+/** How far a chair stands from its table's middle. */
+export const CHESS_CHAIR = 0.78;
+
+export const chessSeatId = (table: number, side: Color) => `roof-chess-${table}-${side}`;
+/** What a peer's `seat` says while they're in that chair (see SeatPlace.key). */
+export const chessSeatKey = (table: number, side: Color) => `${chessSeatId(table, side)}:0`;
+/** Which table and side a seat id is, if it's one of the chess chairs. */
+export function chessSeatOf(seatId: string | undefined): { table: number; side: Color } | undefined {
+  const m = /^roof-chess-(\d+)-([wb])$/.exec(seatId ?? '');
+  return m ? { table: Number(m[1]), side: m[2] as Color } : undefined;
+}
+
+/** The chairs, in the shape of SEATING's entries: White faces north at the table's south side, Black faces south. */
+export const CHESS_SEATS: SeatDef[] = CHESS_TABLES.flatMap(({ n, x, z }) =>
+  (['w', 'b'] as const).map((side) => ({
+    id: chessSeatId(n, side),
+    label: side === 'w' ? '♟️ Chess chair (White)' : '♟️ Chess chair (Black)',
+    x,
+    y: 0,
+    z: z + (side === 'w' ? CHESS_CHAIR : -CHESS_CHAIR),
+    rotY: side === 'w' ? Math.PI : 0,
+    places: [0],
+    hips: 0.5,
+    depth: 0,
+    out: -0.8,
+    roof: true,
+  })),
+);
diff --git a/src/shared/chess.ts b/src/shared/chess.ts
new file mode 100644
index 000000000..6ed254fbc
--- /dev/null
+++ b/src/shared/chess.ts
@@ -0,0 +1,309 @@
+// Chess, for the 'Merge Conflict' tables on the rooftop (features/chess, server/chess.ts): the board
+// and its rules, as pure code the server judges every move with and the page uses to show where a
+// piece may go. A position is a ChessState, which round-trips through FEN (toFen / parseFen).
+
+export type Color = 'w' | 'b';
+/** What a pawn becomes on the last rank. */
+export type Promo = 'q' | 'r' | 'b' | 'n';
+
+/**
+ * A position. Squares count from 0 at a1 along each rank: 8 is a2, 63 is h8. `board` has a FEN letter
+ * for each (capitals for White) or '' for an empty one, and `castling` the FEN rights ("KQkq", "-" for none).
+ * `ep` is the square a pawn that just moved two could be taken on (-1 for none).
+ */
+export interface ChessState {
+  board: string[];
+  turn: Color;
+  castling: string;
+  ep: number;
+  /** Moves since a pawn moved or something was taken (the fifty-move rule counts these). */
+  halfmove: number;
+  fullmove: number;
+}
+
+export interface Move {
+  from: number;
+  to: number;
+  /** For a pawn reaching the last rank: what it becomes. */
+  promo?: Promo;
+}
+
+export type Outcome =
+  | { over: false }
+  | { over: true; kind: 'checkmate'; winner: Color }
+  | { over: true; kind: 'stalemate' | 'insufficient' | 'fifty' };
+
+export const START_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
+
+const FILES = 'abcdefgh';
+export const fileOf = (sq: number) => sq & 7;
+export const rankOf = (sq: number) => sq >> 3;
+export const squareAt = (file: number, rank: number) => rank * 8 + file;
+export const squareName = (sq: number) => `${FILES[fileOf(sq)]}${rankOf(sq) + 1}`;
+/** "e4" is 28; -1 for anything that isn't a square. */
+export function parseSquare(name: string): number {
+  const m = /^([a-h])([1-8])$/.exec(name);
+  return m ? squareAt(FILES.indexOf(m[1]), Number(m[2]) - 1) : -1;
+}
+
+/** Whose piece a FEN letter is (null for an empty square). */
+export const colorOf = (piece: string): Color | null => (!piece ? null : piece === piece.toUpperCase() ? 'w' : 'b');
+export const other = (c: Color): Color => (c === 'w' ? 'b' : 'w');
+
+export function parseFen(fen: string): ChessState | null {
+  const parts = fen.trim().split(/\s+/);
+  if (parts.length < 4) return null;
+  const rows = parts[0].split('/');
+  if (rows.length !== 8) return null;
+  const board: string[] = new Array(64).fill('');
+  for (let i = 0; i < 8; i++) {
+    let file = 0;
+    for (const ch of rows[i]) {
+      if (/[1-8]/.test(ch)) file += Number(ch);
+      else if (/[pnbrqkPNBRQK]/.test(ch) && file < 8) board[squareAt(file++, 7 - i)] = ch;
+      else return null;
+    }
+    if (file !== 8) return null;
+  }
+  if (parts[1] !== 'w' && parts[1] !== 'b') return null;
+  if (!/^(-|K?Q?k?q?)$/.test(parts[2])) return null;
+  const ep = parts[3] === '-' ? -1 : parseSquare(parts[3]);
+  if (parts[3] !== '-' && ep < 0) return null;
+  const s: ChessState = { board, turn: parts[1], castling: parts[2], ep, halfmove: Number(parts[4] ?? 0) || 0, fullmove: Number(parts[5] ?? 1) || 1 };
+  // One king each, or there is nothing to judge a move by.
+  if (board.filter((p) => p === 'K').length !== 1 || board.filter((p) => p === 'k').length !== 1) return null;
+  return s;
+}
+
+export function toFen(s: ChessState): string {
+  const rows: string[] = [];
+  for (let r = 7; r >= 0; r--) {
+    let row = '';
+    let gap = 0;
+    for (let f = 0; f < 8; f++) {
+      const p = s.board[squareAt(f, r)];
+      if (!p) gap++;
+      else {
+        if (gap) row += gap;
+        gap = 0;
+        row += p;
+      }
+    }
+    rows.push(row + (gap || ''));
+  }
+  return `${rows.join('/')} ${s.turn} ${s.castling || '-'} ${s.ep < 0 ? '-' : squareName(s.ep)} ${s.halfmove} ${s.fullmove}`;
+}
+
+export const startState = (): ChessState => parseFen(START_FEN)!;
+
+// ---- Attacks and moves -----------------------------------------------------------------------------
+
+const KNIGHT: readonly (readonly [number, number])[] = [[1, 2], [2, 1], [2, -1], [1, -2], [-1, -2], [-2, -1], [-2, 1], [-1, 2]];
+const DIAGONAL: readonly (readonly [number, number])[] = [[1, 1], [1, -1], [-1, 1], [-1, -1]];
+const STRAIGHT: readonly (readonly [number, number])[] = [[1, 0], [-1, 0], [0, 1], [0, -1]];
+const AROUND = [...DIAGONAL, ...STRAIGHT];
+const PROMOS: readonly Promo[] = ['q', 'r', 'b', 'n'];
+
+/** Whether any of `by`'s pieces attacks `sq`. */
+function attacked(board: readonly string[], sq: number, by: Color): boolean {
+  const f = fileOf(sq);
+  const r = rankOf(sq);
+  const own = (p: string, letter: string) => p === (by === 'w' ? letter.toUpperCase() : letter);
+  const at = (df: number, dr: number) => {
+    const nf = f + df;
+    const nr = r + dr;
+    return nf < 0 || nf > 7 || nr < 0 || nr > 7 ? undefined : board[squareAt(nf, nr)];
+  };
+  // A pawn attacks one rank on from itself, so it's one back from `sq` that it stands.
+  const back = by === 'w' ? -1 : 1;
+  for (const df of [-1, 1]) if (at(df, back) !== undefined && own(at(df, back)!, 'p')) return true;
+  for (const [df, dr] of KNIGHT) if (at(df, dr) !== undefined && own(at(df, dr)!, 'n')) return true;
+  for (const [df, dr] of AROUND) if (at(df, dr) !== undefined && own(at(df, dr)!, 'k')) return true;
+  for (const [dirs, a, b] of [[DIAGONAL, 'b', 'q'], [STRAIGHT, 'r', 'q']] as const) {
+    for (const [df, dr] of dirs) {
+      for (let n = 1; ; n++) {
+        const p = at(df * n, dr * n);
+        if (p === undefined) break;
+        if (!p) continue;
+        if (own(p, a) || own(p, b)) return true;
+        break;
+      }
+    }
+  }
+  return false;
+}
+
+export function kingSquare(s: ChessState, color: Color): number {
+  return s.board.indexOf(color === 'w' ? 'K' : 'k');
+}
+
+/** Whether `color` (whoever's turn it is, by default) is in check. */
+export function inCheck(s: ChessState, color: Color = s.turn): boolean {
+  return attacked(s.board, kingSquare(s, color), other(color));
+}
+
+/** Every move the side to move could make if leaving its king in check were allowed (castling still can't pass through it). */
+function pseudoMoves(s: ChessState, only?: number): Move[] {
+  const out: Move[] = [];
+  const me = s.turn;
+  const enemy = other(me);
+  const { board } = s;
+  for (let from = 0; from < 64; from++) {
+    if (only !== undefined && from !== only) continue;
+    const piece = board[from];
+    if (!piece || colorOf(piece) !== me) continue;
+    const f = fileOf(from);
+    const r = rankOf(from);
+    const kind = piece.toLowerCase();
+    const add = (to: number) => out.push({ from, to });
+    // Onto an empty square or an enemy's: false once something's in the way, for sliders.
+    const step = (df: number, dr: number): boolean => {
+      const nf = f + df;
+      const nr = r + dr;
+      if (nf < 0 || nf > 7 || nr < 0 || nr > 7) return false;
+      const to = squareAt(nf, nr);
+      const there = board[to];
+      if (there && colorOf(there) === me) return false;
+      add(to);
+      return !there;
+    };
+    if (kind === 'p') {
+      const dir = me === 'w' ? 1 : -1;
+      const last = me === 'w' ? 7 : 0;
+      const push = (to: number) => {
+        if (rankOf(to) === last) for (const promo of PROMOS) out.push({ from, to, promo });
+        else add(to);
+      };
+      const ahead = squareAt(f, r + dir);
+      if (!board[ahead]) {
+        push(ahead);
+        if (r === (me === 'w' ? 1 : 6) && !board[squareAt(f, r + 2 * dir)]) add(squareAt(f, r + 2 * dir));
+      }
+      for (const df of [-1, 1]) {
+        if (f + df < 0 || f + df > 7) continue;
+        const to = squareAt(f + df, r + dir);
+        if ((board[to] && colorOf(board[to]) === enemy) || to === s.ep) push(to);
+      }
+    } else if (kind === 'n') {
+      for (const [df, dr] of KNIGHT) step(df, dr);
+    } else if (kind === 'k') {
+      for (const [df, dr] of AROUND) step(df, dr);
+      castles(s, from, add);
+    } else {
+      const dirs = kind === 'b' ? DIAGONAL : kind === 'r' ? STRAIGHT : AROUND;
+      for (const [df, dr] of dirs) for (let n = 1; step(df * n, dr * n); n++);
+    }
+  }
+  return out;
+}
+
+/** The king's castling moves, if he may: unmoved, not in check, nothing between him and the rook, and not through an attacked square. */
+function castles(s: ChessState, from: number, add: (to: number) => void) {
+  const me = s.turn;
+  const home = me === 'w' ? 4 : 60;
+  if (from !== home) return;
+  const enemy = other(me);
+  const { board } = s;
+  const rook = me === 'w' ? 'R' : 'r';
+  const rights = me === 'w' ? 'KQ' : 'kq';
+  if (!rights.split('').some((c) => s.castling.includes(c)) || attacked(board, home, enemy)) return;
+  if (s.castling.includes(rights[0]) && board[home + 3] === rook && !board[home + 1] && !board[home + 2] && !attacked(board, home + 1, enemy) && !attacked(board, home + 2, enemy)) add(home + 2);
+  if (s.castling.includes(rights[1]) && board[home - 4] === rook && !board[home - 1] && !board[home - 2] && !board[home - 3] && !attacked(board, home - 1, enemy) && !attacked(board, home - 2, enemy)) add(home - 2);
+}
+
+/** What taking a move does to the castling rights: a king or rook moving, or a rook being taken, loses them. */
+function rightsAfter(rights: string, from: number, to: number): string {
+  let out = rights;
+  for (const sq of [from, to]) {
+    if (sq === 4) out = out.replace(/[KQ]/g, '');
+    if (sq === 60) out = out.replace(/[kq]/g, '');
+    if (sq === 0) out = out.replace('Q', '');
+    if (sq === 7) out = out.replace('K', '');
+    if (sq === 56) out = out.replace('q', '');
+    if (sq === 63) out = out.replace('k', '');
+  }
+  return out || '-';
+}
+
+/** The position after `m`, which must be one of legalMoves (or at least a move the rules allow: nothing here checks). */
+export function applyMove(s: ChessState, m: Move): ChessState {
+  const board = s.board.slice();
+  const piece = board[m.from];
+  const kind = piece.toLowerCase();
+  const me = s.turn;
+  const taken = board[m.to];
+  board[m.from] = '';
+  board[m.to] = m.promo ? (me === 'w' ? m.promo.toUpperCase() : m.promo) : piece;
+  let ep = -1;
+  if (kind === 'p') {
+    // Took en passant: the pawn it passed is a rank behind where this one lands.
+    if (m.to === s.ep && !taken) board[squareAt(fileOf(m.to), rankOf(m.from))] = '';
+    if (Math.abs(rankOf(m.to) - rankOf(m.from)) === 2) ep = (m.from + m.to) / 2;
+  } else if (kind === 'k' && Math.abs(m.to - m.from) === 2) {
+    // Castled: the rook hops over.
+    const rank = rankOf(m.from) * 8;
+    const long = m.to < m.from;
+    board[rank + (long ? 3 : 5)] = board[rank + (long ? 0 : 7)];
+    board[rank + (long ? 0 : 7)] = '';
+  }
+  return {
+    board,
+    turn: other(me),
+    castling: rightsAfter(s.castling, m.from, m.to),
+    ep,
+    halfmove: kind === 'p' || taken ? 0 : s.halfmove + 1,
+    fullmove: s.fullmove + (me === 'b' ? 1 : 0),
+  };
+}
+
+/** Every legal move for the side to move, or just from `from`. A promotion comes once for each piece it may become. */
+export function legalMoves(s: ChessState, from?: number): Move[] {
+  const me = s.turn;
+  return pseudoMoves(s, from).filter((m) => !attacked(applyMove(s, m).board, kingSquare(s, me) === m.from ? m.to : kingSquare(s, me), other(me)));
+}
+
+export interface Played {
+  state: ChessState;
+  move: Move;
+  /** The FEN letter of what it took, or '' (an en passant capture counts). */
+  captured: string;
+}
+
+/**
+ * `from` to `to` if that's legal: the position after it, and what it took. A pawn that reaches the
+ * last rank becomes `promo`, a queen if it isn't said.
+ */
+export function playMove(s: ChessState, from: number, to: number, promo?: Promo): Played | null {
+  const moves = legalMoves(s, from).filter((m) => m.to === to);
+  if (!moves.length) return null;
+  const move = moves.find((m) => (m.promo ?? 'q') === (promo ?? 'q'));
+  if (!move) return null;
+  const passed = s.board[move.from].toLowerCase() === 'p' && move.to === s.ep && !s.board[move.to];
+  return { state: applyMove(s, move), move, captured: passed ? (s.turn === 'w' ? 'p' : 'P') : s.board[move.to] };
+}
+
+// ---- How it ends -----------------------------------------------------------------------------------
+
+/** No one could checkmate from what's left: bare kings, a king and one minor piece, or bishops all on one color of square. */
+export function insufficientMaterial(s: ChessState): boolean {
+  const rest = s.board.map((p, sq) => ({ kind: p.toLowerCase(), sq })).filter((p) => p.kind && p.kind !== 'k');
+  if (rest.every((p) => p.kind === 'b' || p.kind === 'n') && rest.length <= 1) return true;
+  return rest.length > 0 && rest.every((p) => p.kind === 'b') && new Set(rest.map((p) => (fileOf(p.sq) + rankOf(p.sq)) % 2)).size === 1;
+}
+
+export function outcome(s: ChessState): Outcome {
+  if (!legalMoves(s).length) return inCheck(s) ? { over: true, kind: 'checkmate', winner: other(s.turn) } : { over: true, kind: 'stalemate' };
+  if (insufficientMaterial(s)) return { over: true, kind: 'insufficient' };
+  if (s.halfmove >= 100) return { over: true, kind: 'fifty' };
+  return { over: false };
+}
+
+/** How many ways there are to play `depth` moves from `s` (a check on the move generator: the counts are well known). */
+export function perft(s: ChessState, depth: number): number {
+  if (depth === 0) return 1;
+  const moves = legalMoves(s);
+  if (depth === 1) return moves.length;
+  let n = 0;
+  for (const m of moves) n += perft(applyMove(s, m), depth - 1);
+  return n;
+}
diff --git a/src/shared/garden.ts b/src/shared/garden.ts
new file mode 100644
index 000000000..7e1e948fd
--- /dev/null
+++ b/src/shared/garden.ts
@@ -0,0 +1,21 @@
+import type { SeatDef } from './layout.js';
+
+// The thinking garden: a quiet corner of the roof, in the south-west, for sitting and thinking among
+// plants (client/features/rooftop/garden.ts builds it). Its seats join SEATING (shared/layout.ts).
+
+/** Where it lies on the roof: open along its east side (x = maxX), with a bed of plants along each of the others. */
+export const GARDEN = { minX: -17.5, maxX: -4.5, minZ: 3.5, maxZ: 12.5 } as const;
+
+/** The little pond the seats look onto. */
+export const GARDEN_POND = { x: -10.5, z: 8, r: 0.75 } as const;
+
+/** The sound stone, where the ambient sound is turned on and off: stand here to use it. */
+export const THINK_SPOT = { x: -6.6, z: 6.8 } as const;
+
+/** Two low benches either side of the pond, and two lounge chairs, all turned towards it (one of the chairs from the side). */
+export const GARDEN_SEATS: SeatDef[] = [
+  { id: 'roof-garden-bench-1', label: '🪑 Garden bench', x: GARDEN_POND.x, y: 0, z: 5.6, rotY: 0, places: [-0.45, 0.45], hips: 0.52, depth: 0, out: 0.85, roof: true },
+  { id: 'roof-garden-bench-2', label: '🪑 Garden bench', x: GARDEN_POND.x, y: 0, z: 10.4, rotY: Math.PI, places: [-0.45, 0.45], hips: 0.52, depth: 0, out: 0.85, roof: true },
+  { id: 'roof-garden-lounge-1', label: '🌿 Lounge chair', x: -13.4, y: 0, z: GARDEN_POND.z, rotY: Math.PI / 2, places: [0], hips: 0.38, depth: -0.05, out: 0.9, roof: true },
+  { id: 'roof-garden-lounge-2', label: '🌿 Lounge chair', x: -8.2, y: 0, z: 6.7, rotY: -Math.PI / 2, places: [0], hips: 0.38, depth: -0.05, out: 0.9, roof: true },
+];
diff --git a/src/shared/layout.ts b/src/shared/layout.ts
index a9e3bba45..b310ce44c 100644
--- a/src/shared/layout.ts
+++ b/src/shared/layout.ts
@@ -2,6 +2,9 @@
 // Units are meters; +y is up. The office floor spans FLOOR.minX..maxX / minZ..maxZ at y = 0,
 // upstairs over a garage whose floor is level with the street (STREET_Y).
 
+import { CHESS_SEATS } from './chess-seats.js';
+import { GARDEN_SEATS } from './garden.js';
+
 export const FLOOR = { minX: -18, maxX: 18, minZ: -13, maxZ: 13 } as const;
 /** How high the ceiling is: a meter over the loft's roof (LOFT.y + LOFT.height), all the way across the room. */
 export const WALL_HEIGHT = 6.8;
@@ -392,7 +395,7 @@ export const GOLF_HOLE = { x: -5, z: 58, green: 5.5, fairway: [-11, 0] } as cons
  */
 export const PARACHUTE = { jump: { x: BALCONY_DOOR.u, z: BALCONY.maxZ - 0.45 }, railTop: 1.09, out: 1.2, east: [0.6, 1.8] } as const;
 
-// ---- The rooftop bar (see shared/rooftop.ts) ------------------------------------------------------
+// ---- The rooftop café (see shared/rooftop.ts) -------------------------------------------------------
 // The roof of the building, level with the office floor's y = 0 and the same size, so the elevator
 // comes up in its usual spot. A glass railing runs round the edge, and the city is far below.
 
@@ -403,17 +406,27 @@ export const PARACHUTE = { jump: { x: BALCONY_DOOR.u, z: BALCONY.maxZ - 0.45 },
 export function roofDrop(floors: number): number {
   return -streetBelow(Math.max(1, floors));
 }
-/** The DJ's stage, against the north edge west of the elevator, with the dance floor in front of it. */
-export const STAGE = { minX: -8, maxX: 2, minZ: FLOOR.minZ, maxZ: -9.2, height: 0.6 } as const;
-/** Where the DJ stands behind the decks, facing the dance floor (+z). */
-export const DJ_BOOTH = { x: -3, z: -11.3 } as const;
-/** LED tiles, a meter each, lighting up with the music. */
-export const DANCE_FLOOR = { minX: -8, maxX: 2, minZ: -9.2, maxZ: -2.2 } as const;
-/** The bar along the east side: its counter (x is its middle), with the bartender and the bottles behind it. */
+/**
+ * Two parts of the roof kept free of the café for other things to be built in (nothing is there yet
+ * but the roof's own deck and railing): a garden in the south-west corner, and a games corner against
+ * the north edge, where the DJ's stage and the dance floor used to be.
+ */
+export const ROOF_CLEAR = {
+  garden: { minX: -17.8, maxX: -4, minZ: 3, maxZ: 12.8 },
+  games: { minX: -9, maxX: 1, minZ: -12.5, maxZ: -2.5 },
+} as const;
+/** The café counter along the east side: its middle (x), with the barista and the shelves behind it. */
 export const ROOF_BAR = { x: 12.95, minZ: -6, maxZ: 4, depth: 0.7, height: 1.1 } as const;
-/** The fire pit in the lounge, in the south-west corner, with sofas round three sides of it. */
-export const FIRE_PIT = { x: -12, z: 8.2, r: 0.9 } as const;
-/** Tall tables to stand at, between the elevator and the bar. */
+/** Round café tables to sit at, each with a chair either side of it (x-wise), between the elevator and the counter. */
+export const CAFE_TABLES: readonly { x: number; z: number }[] = [
+  { x: 4.2, z: -5.8 },
+  { x: 4.2, z: -1.6 },
+  { x: 4.2, z: 2.6 },
+  { x: 10, z: -4.8 },
+  { x: 10, z: -0.8 },
+  { x: 10, z: 3 },
+];
+/** Tall tables to stand at, south of the café tables. */
 export const ROOF_TABLES: readonly { x: number; z: number }[] = [
   { x: 6.6, z: 5.2 },
   { x: 9.6, z: 8.8 },
@@ -446,9 +459,9 @@ export interface SeatDef {
   tv?: boolean;
   /** It faces the boss's monitor: E there, sitting down, plays Minesweeper on it. */
   game?: boolean;
-  /** Up on the rooftop bar, not in the office. */
+  /** Up on the rooftop café, not in the office. */
   roof?: boolean;
-  /** At the bar: E there, sitting down, orders a drink. */
+  /** At the counter: E there, sitting down, opens the menu. */
   bar?: boolean;
 }
 
@@ -469,15 +482,17 @@ export const SEATING: SeatDef[] = [
   { id: 'bench', label: '🪑 Bench', x: -9, y: 0, z: BALCONY.minZ + 0.3, rotY: 0, places: [-0.5, 0.5], hips: 0.47, depth: 0, out: 0.8 },
   { id: 'stool-1', label: '🪑 Stool', x: -0.6, y: 0, z: (BALCONY.minZ + BALCONY.maxZ) / 2 + 0.2, rotY: Math.PI / 2, places: [0], hips: 0.5, depth: 0, out: -0.7 },
   { id: 'stool-2', label: '🪑 Stool', x: 1, y: 0, z: (BALCONY.minZ + BALCONY.maxZ) / 2 + 0.2, rotY: -Math.PI / 2, places: [0], hips: 0.5, depth: 0, out: -0.7 },
-  // On the roof: bar stools along the counter, facing the bar…
+  // On the roof: stools along the café counter, facing it…
   ...[0, 1, 2, 3, 4, 5].map((i) => ({ id: `roof-stool-${i + 1}`, label: '🪑 Bar stool', x: ROOF_BAR.x - ROOF_BAR.depth / 2 - 0.45, y: 0, z: ROOF_BAR.minZ + 0.9 + i * 1.64, rotY: Math.PI / 2, places: [0], hips: 0.78, depth: 0, out: -0.75, roof: true, bar: true })),
-  // …sofas round the fire pit, open to the view on the south…
-  { id: 'roof-sofa-1', label: '🛋️ Sofa', x: FIRE_PIT.x, y: 0, z: FIRE_PIT.z - 2.3, rotY: 0, places: [-1.1, 0, 1.1], hips: 0.5, depth: -0.05, out: 0.8, roof: true },
-  { id: 'roof-sofa-2', label: '🛋️ Sofa', x: FIRE_PIT.x - 2.9, y: 0, z: FIRE_PIT.z + 0.4, rotY: Math.PI / 2, places: [-0.6, 0.6], hips: 0.5, depth: -0.05, out: 0.8, roof: true },
-  { id: 'roof-sofa-3', label: '🛋️ Sofa', x: FIRE_PIT.x + 2.9, y: 0, z: FIRE_PIT.z + 0.4, rotY: -Math.PI / 2, places: [-0.6, 0.6], hips: 0.5, depth: -0.05, out: 0.8, roof: true },
+  // …a chair either side of each café table, facing it…
+  ...CAFE_TABLES.flatMap(({ x, z }, i) =>
+    [-1, 1].map((s, j) => ({ id: `roof-chair-${i * 2 + j + 1}`, label: '🪑 Café chair', x: x + s * 0.78, y: 0, z, rotY: -s * (Math.PI / 2), places: [0], hips: 0.5, depth: 0, out: -0.7, roof: true })),
+  ),
   // …and sun loungers facing out over the city.
   ...LOUNGERS.map((x, i) => ({ id: `roof-lounger-${i + 1}`, label: '🏖️ Lounger', x, y: 0, z: FLOOR.maxZ - 1.5, rotY: 0, places: [0], hips: 0.42, depth: -0.2, out: -1, roof: true })),
 ];
+// The thinking garden's benches and loungers (shared/garden.ts) and the chess chairs (shared/chess-seats.ts).
+SEATING.push(...GARDEN_SEATS, ...CHESS_SEATS);
 export const SEATING_BY_ID = new Map(SEATING.map((s) => [s.id, s]));
 
 /** One place on a seat: where your feet go on its floor, the way you face, and the rest of what sitting there takes. */
diff --git a/src/shared/protocol.ts b/src/shared/protocol.ts
index ee0d258ef..a739f7156 100644
--- a/src/shared/protocol.ts
+++ b/src/shared/protocol.ts
@@ -6,6 +6,7 @@
 
 import type { AccountsClientMsg, AccountsServerMsg, SignInsClientMsg, TeamClientMsg } from './protocol/accounts.js';
 import type { ChangesClientMsg, ChangesServerMsg } from './protocol/changes.js';
+import type { ChessClientMsg, ChessServerMsg } from './protocol/chess.js';
 import type { FloorClientMsg, FloorServerMsg, PlanClientMsg } from './protocol/floors.js';
 import type { GitHubClientMsg, GitHubServerMsg } from './protocol/github.js';
 import type { MeetingClientMsg, MeetingServerMsg } from './protocol/meetings.js';
@@ -20,6 +21,7 @@ import type { WorkerClientMsg, WorkerServerMsg } from './protocol/workers.js';
 export * from './protocol/accounts.js';
 export * from './protocol/agents.js';
 export * from './protocol/changes.js';
+export * from './protocol/chess.js';
 export * from './protocol/floors.js';
 export * from './protocol/github.js';
 export * from './protocol/meetings.js';
@@ -52,7 +54,8 @@ export type ClientMsg =
   | WhiteboardClientMsg
   | BallClientMsg
   | CarClientMsg
-  | DogClientMsg;
+  | DogClientMsg
+  | ChessClientMsg;
 
 export type ServerMsg =
   | PresenceServerMsg
@@ -66,4 +69,5 @@ export type ServerMsg =
   | AccountsServerMsg
   | SettingsServerMsg
   | UsageServerMsg
-  | ToysServerMsg;
+  | ToysServerMsg
+  | ChessServerMsg;
diff --git a/src/shared/protocol/chess.ts b/src/shared/protocol/chess.ts
new file mode 100644
index 000000000..1cb6c38ff
--- /dev/null
+++ b/src/shared/protocol/chess.ts
@@ -0,0 +1,52 @@
+// The chess tables on the rooftop: who's sitting at each, and the game they're playing.
+
+import type { Color, Promo } from '../chess.js';
+
+/** Who has a chair at a table. */
+export interface ChessPlayer {
+  id: string;
+  name: string;
+}
+
+/** How a game ended: someone mated, resigned, or it's a draw. */
+export interface ChessEnd {
+  kind: 'checkmate' | 'resign' | 'stalemate' | 'insufficient' | 'fifty';
+  /** Who won (not for a draw). */
+  winner?: Color;
+}
+
+/** One table's game, as everyone up on the roof sees it. */
+export interface ChessTable {
+  /** The table's number, from 1 (see CHESS_TABLES). */
+  n: number;
+  /** The position, in FEN. */
+  fen: string;
+  w?: ChessPlayer;
+  b?: ChessPlayer;
+  /** Half moves played this game (so a page can tell one more move from a whole new game). */
+  moves: number;
+  /** The squares the last move went from and to. */
+  last?: [number, number];
+  /** What's been taken so far, as FEN letters (a "P" is a White pawn Black took), in order. */
+  taken: string;
+  end?: ChessEnd;
+}
+
+export type ChessClientMsg =
+  /** On arriving up on the roof: send every table's game. */
+  | { t: 'chess.sync' }
+  /** You've sat in a table's chair (the chair is the side: White's or Black's). */
+  | { t: 'chess.join'; table: number; side: Color }
+  /** You've got up from it. */
+  | { t: 'chess.leave' }
+  /** Move a piece (squares count from 0 at a1, see shared/chess.ts); a pawn reaching the last rank becomes `promo`, a queen if it isn't said. */
+  | { t: 'chess.move'; table: number; from: number; to: number; promo?: Promo }
+  | { t: 'chess.resign'; table: number }
+  /** Set the pieces up again, once the game's over (or nothing has been played, or the other chair is empty). */
+  | { t: 'chess.new'; table: number };
+
+export type ChessServerMsg =
+  /** Every table (to whoever just asked, with chess.sync). */
+  | { t: 'chess.tables'; tables: ChessTable[] }
+  /** One table changed: someone sat or got up, moved, resigned or started again (to everyone on the roof). */
+  | { t: 'chess.table'; table: ChessTable };
diff --git a/src/shared/protocol/presence.ts b/src/shared/protocol/presence.ts
index 8bc66a2f1..3f29c0b91 100644
--- a/src/shared/protocol/presence.ts
+++ b/src/shared/protocol/presence.ts
@@ -3,7 +3,7 @@
 import type { Look } from '../avatar.js';
 import type { BarGame } from '../bargames.js';
 import type { EmoteId } from '../emotes.js';
-import type { DrinkId } from '../rooftop.js';
+import type { ItemId } from '../rooftop.js';
 import type { Me } from './accounts.js';
 import type { FloorInfo, FloorView, ProjectsDirState } from './floors.js';
 import type { LeaveOnMergeState, MachineState, MapState, NotifyState, PromptsState, SkyState, ThemeState, UpgradeState } from './settings.js';
@@ -33,14 +33,14 @@ export interface PeerInfo {
   smoking?: boolean;
   /** At the golf tee on the balcony, club in hand. */
   golfing?: boolean;
-  /** At the rooftop bar's dart board or axe lane, a dart or an axe in hand. */
+  /** At the rooftop café's dart board or axe lane, a dart or an axe in hand. */
   throwing?: BarGame;
   /** Sitting down: the place they're in (see seatAt in layout), like "couch:1". */
   seat?: string;
   /** An issue card they took off the issues board, on its way to a desk or the queue. */
   carrying?: CarriedIssue;
-  /** A drink from the rooftop bar in their hand. */
-  drink?: DrinkId;
+  /** A drink or a bite from the rooftop café in their hand. */
+  drink?: ItemId;
   /** Signed in with their own account, so `name` is theirs and nobody else can take it. */
   account?: boolean;
   /** The floor they're on (see FloorInfo); none while the building has no floors yet. */
@@ -87,10 +87,10 @@ export type PresenceClientMsg =
   /**
    * You reached out to use something; everyone else sees your character's arm do it. With `smoke`,
    * you lit a cigarette (or put it out) on the balcony instead; with `golf`, you took a club out at
-   * the tee (or put it back); with `drink`, you took a drink from the rooftop bar (or finished it,
+   * the tee (or put it back); with `drink`, you took a drink or a bite from the rooftop café (or finished it,
    * null); with `throwing`, you stepped up to the dart board or the axe lane up there (or back, null).
    */
-  | { t: 'act'; smoke?: boolean; golf?: boolean; drink?: DrinkId | null; throwing?: BarGame | null }
+  | { t: 'act'; smoke?: boolean; golf?: boolean; drink?: ItemId | null; throwing?: BarGame | null }
   /** You sat down in a place on a couch, a beanbag, a chair or the bench (see seatAt in layout), or got up again (no seat). */
   | { t: 'sit'; seat?: string }
   /** You picked an issue card up off the board (or put it down again, no issue): everyone sees it in your hands. */
@@ -140,7 +140,7 @@ export type PresenceServerMsg =
   | { t: 'peer.update'; peer: PeerInfo }
   | { t: 'peer.move'; id: string; x: number; y: number; z: number; rotY: number; moving: boolean }
   | { t: 'peer.leave'; id: string }
-  | { t: 'peer.act'; id: string; smoke?: boolean; golf?: boolean; drink?: DrinkId | null; throwing?: BarGame | null }
+  | { t: 'peer.act'; id: string; smoke?: boolean; golf?: boolean; drink?: ItemId | null; throwing?: BarGame | null }
   | { t: 'peer.emote'; id: string; emote: EmoteId }
   | { t: 'rtc'; from: string; data: unknown }
   | ({ t: 'chat' } & ChatLine)
diff --git a/src/shared/protocol/rooftop.ts b/src/shared/protocol/rooftop.ts
index fa46a2b36..8a154839a 100644
--- a/src/shared/protocol/rooftop.ts
+++ b/src/shared/protocol/rooftop.ts
@@ -1,4 +1,4 @@
-// The balcony and the roof: golf, darts and axes, the gong and the air horn.
+// The balcony and the roof: golf, darts and axes, the gong and the (retired) air horn.
 
 import type { BarGame } from '../bargames.js';
 
@@ -12,13 +12,13 @@ export type RooftopClientMsg =
    */
   | { t: 'golf'; yaw: number; loft: number; power: number }
   /**
-   * You threw a dart or an axe at the rooftop bar: where it lands on the target (u right, v up, in
+   * You threw a dart or an axe at the rooftop café: where it lands on the target (u right, v up, in
    * meters from its middle), whether an axe sticks, and which throw of the round it is (from 1).
    */
   | { t: 'toss'; game: BarGame; u: number; v: number; stick: boolean; n: number }
   /** Hit the office gong (E at the gong); everyone on the floor hears it. */
   | { t: 'gong' }
-  /** Blow the DJ's air horn on the roof; everyone up there hears it. */
+  /** Retired (the DJ is gone, and the client never sends it): blow the air horn on the roof; everyone up there hears it. */
   | { t: 'horn' };
 
 export type RooftopServerMsg =
@@ -31,5 +31,5 @@ export type RooftopServerMsg =
    * over the desk it came from), or the last task on the queue just finished (a bigger party).
    */
   | { t: 'gong'; why: GongWhy; by?: string; pr?: number }
-  /** Someone on the roof blew the DJ's air horn (sent to everyone up there, them too). */
+  /** Retired: someone on the roof blew the air horn (sent to everyone up there, them too). */
   | { t: 'horn'; by: string };
diff --git a/src/shared/rooftop.ts b/src/shared/rooftop.ts
index d4e471125..7379d71ef 100644
--- a/src/shared/rooftop.ts
+++ b/src/shared/rooftop.ts
@@ -1,51 +1,77 @@
-// The rooftop bar: the roof of the building, over its top floor. Nobody works up there. There's a DJ
-// playing drum and bass under a rig of lights, a bar to drink at, and the city all around. The
-// elevator goes up there from every floor. Shared by the server (who's up there, what they're
-// holding) and the client (which builds it and plays the music).
+// The rooftop café: the roof of the building, over its top floor. Nobody works up there. There's a café
+// counter to order a coffee or a bite at, tables under string lights, sun loungers, a couple of games
+// and the city all around. No alcohol, and nothing with pork in it. The elevator goes up there from
+// every floor. Shared by the server (who's up there, what they're holding) and the client (which builds it).
 
 /**
  * Where you are while you're on the roof (a peer's `floor`, and `floor.go`'s). It can never be a
  * project floor's id, which is only ever lowercase letters, digits and dashes.
  */
 export const ROOF = '@roof';
-export const ROOF_NAME = 'Rooftop bar';
+export const ROOF_NAME = 'Rooftop café';
 
-/** What a drink comes in: a pint, a wine glass, a martini glass, a tall glass or a shot glass. */
-export type Glass = 'pint' | 'wine' | 'martini' | 'highball' | 'shot';
+/** What an item comes in: an espresso-sized cup, a mug, a tall glass or a plate. */
+export type Vessel = 'cup' | 'mug' | 'tall' | 'plate';
 
-export type DrinkId = 'beer' | 'wine' | 'martini' | 'maitai' | 'shot' | 'mojito' | 'water';
+export type ItemId =
+  | 'espresso'
+  | 'cappuccino'
+  | 'flatwhite'
+  | 'mintTea'
+  | 'blackTea'
+  | 'orangeJuice'
+  | 'lemonade'
+  | 'sparkling'
+  | 'hotChocolate'
+  | 'croissant'
+  | 'almondCroissant'
+  | 'painAuChocolat'
+  | 'toastie'
+  | 'avocadoToast'
+  | 'fruitCup'
+  | 'bagel'
+  | 'falafelWrap';
 
-export interface Drink {
-  id: DrinkId;
+export interface MenuItem {
+  id: ItemId;
+  kind: 'drink' | 'food';
   name: string;
   emoji: string;
   /** What the menu says about it. */
   blurb: string;
-  /**
-   * How much it goes to your head. About 0.3 a drink is tipsy for half a minute or so; they add up,
-   * and past BOOZE_LIMIT the bartender pours you a water instead. Water takes some of it away again.
-   */
-  strength: number;
-  /** The drink in the glass. */
+  /** The drink in the cup, or the main color of the food. */
   color: string;
-  glass: Glass;
+  vessel: Vessel;
 }
 
-export const DRINKS: readonly Drink[] = [
-  { id: 'beer', name: 'Lager', emoji: '🍺', blurb: 'Cold, from the tap', strength: 0.28, color: '#f2b134', glass: 'pint' },
-  { id: 'wine', name: 'Red wine', emoji: '🍷', blurb: 'A generous pour', strength: 0.34, color: '#8e1c3c', glass: 'wine' },
-  { id: 'martini', name: 'Martini', emoji: '🍸', blurb: 'Shaken, with an olive', strength: 0.45, color: '#e6f0c8', glass: 'martini' },
-  { id: 'maitai', name: 'Mai tai', emoji: '🍹', blurb: 'Rum, lime, a little umbrella', strength: 0.45, color: '#ff8c42', glass: 'highball' },
-  { id: 'shot', name: 'Tequila shot', emoji: '🥃', blurb: 'Salt, shot, lime. Careful', strength: 0.6, color: '#f7d488', glass: 'shot' },
-  { id: 'mojito', name: 'Virgin mojito', emoji: '🍃', blurb: 'All of the mint, none of the rum', strength: 0, color: '#b7e4a0', glass: 'highball' },
-  { id: 'water', name: 'Water', emoji: '💧', blurb: 'Clears your head a little', strength: -0.3, color: '#d6f1ff', glass: 'highball' },
+export const DRINKS: readonly MenuItem[] = [
+  { id: 'espresso', kind: 'drink', name: 'Espresso', emoji: '☕', blurb: 'Short, dark and a little sweet', color: '#4a2c1a', vessel: 'cup' },
+  { id: 'cappuccino', kind: 'drink', name: 'Cappuccino', emoji: '☕', blurb: 'Steamed milk, a cloud of foam', color: '#c89f78', vessel: 'cup' },
+  { id: 'flatwhite', kind: 'drink', name: 'Flat white', emoji: '☕', blurb: 'Velvety milk over a double shot', color: '#b98a62', vessel: 'mug' },
+  { id: 'mintTea', kind: 'drink', name: 'Mint tea', emoji: '🍵', blurb: 'Fresh leaves, hot water, nothing else', color: '#c5dd8c', vessel: 'tall' },
+  { id: 'blackTea', kind: 'drink', name: 'Black tea', emoji: '🫖', blurb: 'Strong, with a splash of milk if you like', color: '#9a5b2e', vessel: 'mug' },
+  { id: 'orangeJuice', kind: 'drink', name: 'Fresh orange juice', emoji: '🍊', blurb: 'Squeezed this morning', color: '#ffa62b', vessel: 'tall' },
+  { id: 'lemonade', kind: 'drink', name: 'Lemonade', emoji: '🍋', blurb: 'Tart, sweet and very cold', color: '#f7e26b', vessel: 'tall' },
+  { id: 'sparkling', kind: 'drink', name: 'Sparkling water', emoji: '💧', blurb: 'With a slice of lime', color: '#d6f1ff', vessel: 'tall' },
+  { id: 'hotChocolate', kind: 'drink', name: 'Hot chocolate', emoji: '🍫', blurb: 'Thick, dark and properly hot', color: '#5a3320', vessel: 'mug' },
 ];
 
-export const DRINK_BY_ID = new Map(DRINKS.map((d) => [d.id, d]));
+export const FOODS: readonly MenuItem[] = [
+  { id: 'croissant', kind: 'food', name: 'Butter croissant', emoji: '🥐', blurb: 'Flaky, golden, still warm', color: '#d9953b', vessel: 'plate' },
+  { id: 'almondCroissant', kind: 'food', name: 'Almond croissant', emoji: '🥐', blurb: 'Filled with almond cream, dusted with sugar', color: '#cf9a52', vessel: 'plate' },
+  { id: 'painAuChocolat', kind: 'food', name: 'Pain au chocolat', emoji: '🍫', blurb: 'Two bars of dark chocolate inside', color: '#c98430', vessel: 'plate' },
+  { id: 'toastie', kind: 'food', name: 'Cheese & tomato toastie', emoji: '🥪', blurb: 'Melted cheddar, sliced tomato, toasted', color: '#e0a64a', vessel: 'plate' },
+  { id: 'avocadoToast', kind: 'food', name: 'Avocado toast', emoji: '🥑', blurb: 'Sourdough, lime and chilli flakes', color: '#8fb85a', vessel: 'plate' },
+  { id: 'fruitCup', kind: 'food', name: 'Fruit cup', emoji: '🍓', blurb: 'Strawberries, orange and blueberries', color: '#e5484d', vessel: 'plate' },
+  { id: 'bagel', kind: 'food', name: 'Bagel with cream cheese', emoji: '🥯', blurb: 'Plain, toasted, a thick spread', color: '#d8a964', vessel: 'plate' },
+  { id: 'falafelWrap', kind: 'food', name: 'Falafel wrap', emoji: '🌯', blurb: 'Chickpea falafel, hummus, crunchy salad', color: '#d9b779', vessel: 'plate' },
+];
 
-export function isDrink(v: unknown): v is DrinkId {
-  return typeof v === 'string' && DRINK_BY_ID.has(v as DrinkId);
-}
+/** The whole menu: drinks, then food. */
+export const MENU: readonly MenuItem[] = [...DRINKS, ...FOODS];
 
-/** How drunk you can get: past this the bartender cuts you off and pours you a water. */
-export const BOOZE_LIMIT = 1.6;
+export const ITEM_BY_ID = new Map(MENU.map((i) => [i.id, i]));
+
+export function isItem(v: unknown): v is ItemId {
+  return typeof v === 'string' && ITEM_BY_ID.has(v as ItemId);
+}
diff --git a/src/shared/theme.ts b/src/shared/theme.ts
index f721ffd1c..6b63078ac 100644
--- a/src/shared/theme.ts
+++ b/src/shared/theme.ts
@@ -3,7 +3,7 @@ import type { Theme, ThemePick } from './protocol.js';
 // Holiday themes: the whole building dresses up for Halloween or Christmas. The server keeps
 // what's picked (server/theme.ts); every browser dresses its own scene up from that.
 
-export const THEME_PICKS: readonly ThemePick[] = ['auto', 'halloween', 'christmas', 'off'];
+export const THEME_PICKS: readonly ThemePick[] = ['auto', 'christmas', 'off'];
 
 /**
  * The holiday it is on the office's calendar, if any: Halloween all through October, Christmas all
@@ -11,11 +11,13 @@ export const THEME_PICKS: readonly ThemePick[] = ['auto', 'halloween', 'christma
  */
 export function calendarTheme(ms: number, utcOffset: number): Theme | null {
   const month = new Date(ms + utcOffset * 60_000).getUTCMonth();
-  return month === 9 ? 'halloween' : month === 11 ? 'christmas' : null;
+  // Halloween is retired here (its code is kept, but nothing turns it on).
+  return month === 11 ? 'christmas' : null;
 }
 
 /** What a pick puts up at `ms` on the office's clock. */
 export function activeTheme(pick: ThemePick, ms: number, utcOffset: number): Theme | null {
+  if (pick === 'halloween') return null;
   return pick === 'auto' ? calendarTheme(ms, utcOffset) : pick === 'off' ? null : pick;
 }
 
diff --git a/tests/ambience.test.ts b/tests/ambience.test.ts
new file mode 100644
index 000000000..012e7958d
--- /dev/null
+++ b/tests/ambience.test.ts
@@ -0,0 +1,70 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mulberry32 } from '../src/shared/rng.js';
+import { birdCall, gap, loopNoise, pickSpecies, waveEnvelope, type Species } from '../src/client/features/ambience/noise.js';
+
+const rmsOf = (d: Float32Array) => Math.sqrt(d.reduce((s, v) => s + v * v, 0) / d.length);
+/** How much each sample follows the one before: near 0 for white noise, near 1 for a rumble. */
+const follow = (d: Float32Array) => {
+  let num = 0;
+  for (let i = 1; i < d.length; i++) num += d[i] * d[i - 1];
+  return num / (rmsOf(d) ** 2 * d.length);
+};
+
+test('noise loops come out at one level, tilted as white, pink and brown are, and never clip', () => {
+  const white = loopNoise('white', 20000, 2000, mulberry32(1));
+  const pink = loopNoise('pink', 20000, 2000, mulberry32(1));
+  const brown = loopNoise('brown', 20000, 2000, mulberry32(1));
+  for (const d of [white, pink, brown]) {
+    assert.equal(d.length, 20000);
+    assert.ok(Math.abs(rmsOf(d) - 0.25) < 0.01);
+    assert.ok(d.every((v) => Math.abs(v) <= 1));
+  }
+  assert.ok(follow(white) < 0.1);
+  assert.ok(follow(pink) > 0.3 && follow(pink) < follow(brown));
+  assert.ok(follow(brown) > 0.9);
+});
+
+test('a noise loop joins its end to its start without a jump', () => {
+  const brown = loopNoise('brown', 20000, 2000, mulberry32(5));
+  let biggest = 0;
+  for (let i = 1; i < brown.length; i++) biggest = Math.max(biggest, Math.abs(brown[i] - brown[i - 1]));
+  assert.ok(Math.abs(brown[0] - brown[brown.length - 1]) <= biggest * 1.5);
+});
+
+test('a wave starts and ends on the wash and crests once, a third or so of the way through', () => {
+  const env = waveEnvelope(200, 0.4, 0.15);
+  assert.ok(Math.abs(env[0] - 0.15) < 1e-6 && Math.abs(env[199] - 0.15) < 1e-6);
+  assert.ok(Math.max(...env) <= 1 && Math.min(...env) >= 0.15 - 1e-6);
+  const crest = env.indexOf(Math.max(...env));
+  assert.ok(crest > 60 && crest < 100);
+  for (let i = 1; i <= crest; i++) assert.ok(env[i] >= env[i - 1]);
+  for (let i = crest + 1; i < 200; i++) assert.ok(env[i] <= env[i - 1]);
+});
+
+test('every bird calls in tune, in order and briefly, and no two calls come out the same', () => {
+  const species: Species[] = ['robin', 'dove', 'tit', 'warbler'];
+  const rnd = mulberry32(42);
+  for (const s of species) {
+    const a = birdCall(s, rnd);
+    const b = birdCall(s, rnd);
+    assert.ok(a.length >= 2);
+    let prev = -1;
+    for (const n of a) {
+      assert.ok(n.at > prev && n.dur > 0 && n.f0 > 200 && n.f0 < 8000 && n.f1 > 200 && n.f1 < 8000 && n.gain > 0 && n.gain <= 1);
+      prev = n.at;
+    }
+    const last = a[a.length - 1];
+    assert.ok(last.at + last.dur < 4, `${s} runs ${last.at + last.dur}s`);
+    assert.notDeepEqual(a, b);
+    assert.deepEqual(birdCall(s, mulberry32(9)), birdCall(s, mulberry32(9)));
+  }
+});
+
+test('the gaps between sounds are irregular and stay in range, and every species gets its turn', () => {
+  const rnd = mulberry32(3);
+  const gaps = Array.from({ length: 200 }, () => gap(rnd, 3, 13));
+  assert.ok(gaps.every((g) => g >= 3 && g <= 13));
+  assert.ok(new Set(gaps.map((g) => g.toFixed(2))).size > 150);
+  assert.equal(new Set(Array.from({ length: 200 }, () => pickSpecies(rnd))).size, 4);
+});
diff --git a/tests/chess-board.test.ts b/tests/chess-board.test.ts
new file mode 100644
index 000000000..a627fd68a
--- /dev/null
+++ b/tests/chess-board.test.ts
@@ -0,0 +1,134 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as THREE from 'three';
+import { parseSquare, playMove, startState, toFen, parseFen, type ChessState } from '../src/shared/chess.js';
+import type { ChessTable } from '../src/shared/protocol.js';
+
+// A canvas that takes every drawing call and ignores it: the board's textures are for the GPU, not this.
+const noop: unknown = new Proxy(function () {}, { get: () => noop, apply: () => noop, set: () => true });
+(globalThis as unknown as { document: unknown }).document = { createElement: () => ({ width: 0, height: 0, getContext: () => noop }) };
+const { ChessTableView, SQUARE, TABLE_H, squareAtPoint, squarePos } = await import('../src/client/features/chess/board.js');
+
+const sq = (name: string) => parseSquare(name);
+const table = (s: ChessState, moves: number, last?: [number, number], extra: Partial<ChessTable> = {}): ChessTable => ({ n: 1, fen: toFen(s), moves, last, taken: '', ...extra });
+const run = (v: InstanceType<typeof ChessTableView>, seconds = 1) => {
+  for (let t = 0; t < seconds; t += 1 / 60) v.update(1 / 60);
+};
+const men = (v: InstanceType<typeof ChessTableView>) => (v as unknown as { pieces: THREE.Group }).pieces.children;
+/** Where a square's man stands, on the table. */
+const stands = (v: InstanceType<typeof ChessTableView>, name: string) => {
+  const p = squarePos(sq(name));
+  return men(v).find((g) => Math.hypot(g.position.x - p.x, g.position.z - p.z) < 1e-6 && g.position.y < TABLE_H + 0.02);
+};
+
+test('squares: a1 is the near left corner for White; files run along +x and ranks away along -z', () => {
+  assert.deepEqual(squarePos(sq('a1')), { x: -3.5 * SQUARE, z: 3.5 * SQUARE });
+  assert.equal(squareAtPoint(...(Object.values(squarePos(sq('h8'))) as [number, number])), sq('h8'));
+  assert.equal(squareAtPoint(0.01, 0.01), sq('e4'));
+  assert.equal(squareAtPoint(0.5, 0), -1);
+});
+
+test('a board shows the position and slides a move, taking en passant, castling and promoting as it goes', () => {
+  const v = new ChessTableView(1);
+  const s = startState();
+  v.show(table(s, 0));
+  assert.equal(men(v).length, 32);
+  assert.ok(stands(v, 'e2'));
+  // One move on slides: mid-flight it's between the squares, afterwards on the new one.
+  const e4 = playMove(s, sq('e2'), sq('e4'))!;
+  v.show(table(e4.state, 1, [sq('e2'), sq('e4')]));
+  v.update(0.1);
+  const g = men(v).find((m) => m.userData.chessSq === sq('e4'))!;
+  assert.ok(g.position.z < squarePos(sq('e2')).z && g.position.z > squarePos(sq('e4')).z, 'on its way');
+  run(v);
+  assert.ok(stands(v, 'e4') && !stands(v, 'e2'));
+
+  // A capture: the taken man goes once the other arrives.
+  let st = e4.state;
+  let n = 1;
+  const go = (...moves: string[]) => {
+    for (const m of moves) {
+      const p = playMove(st, sq(m.slice(0, 2)), sq(m.slice(2, 4)), m[4] as 'q' | undefined)!;
+      st = p.state;
+      v.show(table(st, ++n, [sq(m.slice(0, 2)), sq(m.slice(2, 4))]));
+      run(v);
+    }
+  };
+  go('d7d5', 'e4d5');
+  assert.equal(men(v).length, 31);
+  // En passant: the pawn it passed goes.
+  go('c7c5', 'd5c6');
+  assert.equal(men(v).length, 30);
+  assert.ok(!stands(v, 'c5'), 'the passed pawn is gone');
+  assert.ok(stands(v, 'c6'));
+  // Castling moves the rook too.
+  go('g8f6', 'g1f3', 'e7e6', 'f1e2', 'f8e7', 'e1g1');
+  assert.ok(stands(v, 'g1') && stands(v, 'f1'), 'king and rook');
+  assert.ok(!stands(v, 'h1'));
+  // Promotion: the pawn arrives, then turns into what it's become.
+  const promo = parseFen('4k3/P7/8/8/8/8/8/4K3 w - - 0 1')!;
+  const w = new ChessTableView(1);
+  w.show(table(promo, 0));
+  const after = playMove(promo, sq('a7'), sq('a8'))!;
+  w.show(table(after.state, 1, [sq('a7'), sq('a8')]));
+  const pawn = men(w).find((m) => m.userData.chessSq === sq('a8'))!;
+  run(w);
+  const queen = men(w).find((m) => m.userData.chessSq === sq('a8'))!;
+  assert.notEqual(queen, pawn, 'swapped for a queen');
+  assert.equal(men(w).length, 3);
+});
+
+test('a board that jumps (a new game, arriving late) just sets the pieces up', () => {
+  const v = new ChessTableView(1);
+  const s = startState();
+  const moved = playMove(playMove(s, sq('e2'), sq('e4'))!.state, sq('e7'), sq('e5'))!.state;
+  v.show(table(moved, 2, [sq('e7'), sq('e5')]));
+  assert.ok(stands(v, 'e4') && stands(v, 'e5'), 'no sliding: they are where they should be');
+  v.show(table(s, 0));
+  assert.ok(stands(v, 'e2') && stands(v, 'e7'));
+  assert.equal(men(v).length, 32);
+});
+
+test('men taken are laid out along the edges, and the flag and the coin come out when they should', () => {
+  const v = new ChessTableView(1);
+  const taken = (v as unknown as { takenGroup: THREE.Group }).takenGroup;
+  const tokens = (v as unknown as { tokens: Record<'resign' | 'new', THREE.Group[]> }).tokens;
+  v.show(table(startState(), 0));
+  assert.equal(taken.children.length, 0);
+  assert.ok(tokens.resign.every((t) => !t.visible) && tokens.new.every((t) => !t.visible), 'nothing to resign or restart yet');
+  const after = playMove(startState(), sq('e2'), sq('e4'))!.state;
+  v.show(table(after, 1, [sq('e2'), sq('e4')], { taken: 'Pnp', w: { id: 'a', name: 'A' }, b: { id: 'b', name: 'B' } }));
+  assert.equal(taken.children.length, 3);
+  assert.ok(tokens.resign.every((t) => t.visible) && tokens.new.every((t) => !t.visible), 'a game on: the flag');
+  v.show(table(after, 2, undefined, { taken: 'Pnp', end: { kind: 'resign', winner: 'w' } }));
+  assert.ok(tokens.resign.every((t) => !t.visible) && tokens.new.every((t) => t.visible), 'over: the coin');
+});
+
+test('aiming at the board finds the square, or the man standing on it, or the flag', () => {
+  const v = new ChessTableView(1);
+  v.show(table(startState(), 1, undefined, { w: { id: 'a', name: 'A' }, b: { id: 'b', name: 'B' } }));
+  v.group.updateMatrixWorld(true);
+  const ray = new THREE.Raycaster();
+  const down = (x: number, z: number) => {
+    ray.set(new THREE.Vector3(x, 2, z), new THREE.Vector3(0, -1, 0));
+    return v.pick(ray);
+  };
+  assert.deepEqual(down(squarePos(sq('e4')).x, squarePos(sq('e4')).z), { sq: sq('e4') }, 'an empty square');
+  assert.deepEqual(down(squarePos(sq('e2')).x, squarePos(sq('e2')).z), { sq: sq('e2') }, 'a pawn on its square');
+  assert.deepEqual(down(squarePos(sq('g1')).x, squarePos(sq('g1')).z), { sq: sq('g1') }, 'a knight on its');
+  assert.equal(down(0.45, 0.2), null, 'the table beside the board');
+  const flag = (v as unknown as { tokens: Record<'resign', THREE.Group[]> }).tokens.resign[0];
+  assert.deepEqual(down(flag.position.x, flag.position.z), { act: 'resign' });
+  flag.visible = false;
+  assert.equal(down(flag.position.x, flag.position.z), null, 'a flag that is not out is not there');
+});
+
+test('what is lit is laid on the right squares, and cleared again', () => {
+  const v = new ChessTableView(1);
+  v.show(table(startState(), 0));
+  v.setMarks({ last: [sq('e2'), sq('e4')], selected: sq('g1'), moves: [sq('f3')], takes: [sq('h3')], hover: sq('g1'), check: sq('e1') });
+  const lit = () => v.group.children.filter((c) => (c as THREE.Mesh).isMesh && c.visible && c !== v.top && (c as THREE.Mesh).geometry.type === 'PlaneGeometry' && c.position.y > TABLE_H && c.position.y < TABLE_H + 0.01);
+  assert.equal(lit().length, 7);
+  v.setMarks({});
+  assert.equal(lit().length, 0);
+});
diff --git a/tests/chess-pieces.test.ts b/tests/chess-pieces.test.ts
new file mode 100644
index 000000000..f5355ed32
--- /dev/null
+++ b/tests/chess-pieces.test.ts
@@ -0,0 +1,31 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import * as THREE from 'three';
+import { PIECE_SQUARE, pieceParts, type PieceKind } from '../src/client/features/chess/pieces.js';
+
+const KINDS: PieceKind[] = ['p', 'r', 'n', 'b', 'q', 'k'];
+const box = (kind: PieceKind) => new THREE.Box3().setFromBufferAttribute(pieceParts(kind).wood.attributes.position as THREE.BufferAttribute);
+
+test('every piece stands on the board and fits in its square, and has the normals to be lit', () => {
+  for (const k of KINDS) {
+    const b = box(k);
+    const wood = pieceParts(k).wood;
+    assert.ok(Math.abs(b.min.y) < 1e-6, `${k} stands on y = 0`);
+    assert.ok(b.max.x - b.min.x < PIECE_SQUARE * 0.8 && b.max.z - b.min.z < PIECE_SQUARE * 0.8, `${k} fits its square`);
+    assert.ok(wood.attributes.normal && wood.attributes.uv, `${k} has normals and uvs`);
+    for (const v of wood.attributes.position.array) assert.ok(Number.isFinite(v), `${k} has no NaNs`);
+  }
+});
+
+test('Staunton heights: pawn < rook < knight < bishop < queen < king', () => {
+  const h = KINDS.map((k) => box(k).max.y);
+  for (let i = 1; i < h.length; i++) assert.ok(h[i] > h[i - 1], `${KINDS[i]} (${h[i].toFixed(3)}) is taller than ${KINDS[i - 1]} (${h[i - 1].toFixed(3)})`);
+  assert.ok(h[5] < 0.13 && h[5] > 0.11, 'a king is about 12 cm on a board with 8 cm squares');
+});
+
+test('the knight has a head to one side of its base (looking along +x) and eyes; the bishop its slit', () => {
+  const b = box('n');
+  assert.ok(b.max.x > 0.025 && b.min.x > -0.03);
+  assert.ok(pieceParts('n').ink && pieceParts('b').ink);
+  assert.equal(pieceParts('q').ink, undefined);
+});
diff --git a/tests/chess-tables.test.ts b/tests/chess-tables.test.ts
new file mode 100644
index 000000000..eb42c6ca8
--- /dev/null
+++ b/tests/chess-tables.test.ts
@@ -0,0 +1,193 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { parseSquare } from '../src/shared/chess.js';
+import { chessSeatKey } from '../src/shared/chess-seats.js';
+import { ROOF } from '../src/shared/rooftop.js';
+import type { ServerMsg } from '../src/shared/protocol.js';
+import { ChessTables } from '../src/server/chess.js';
+import { chessHandlers, chessHooks } from '../src/server/ws/handlers/chess.js';
+import type { Client } from '../src/server/office/client.js';
+import type { Ctx } from '../src/server/office/context.js';
+
+const sq = (name: string) => parseSquare(name);
+const noChange = () => new Set<number>();
+
+/** Two people at table 1, White and Black. */
+function seated() {
+  const t = new ChessTables();
+  assert.equal(t.join(1, 'w', { id: 'ann', name: 'Ann' }, noChange()), undefined);
+  assert.equal(t.join(1, 'b', { id: 'bob', name: 'Bob' }, noChange()), undefined);
+  return t;
+}
+
+test('the chair is the side: the first to sit takes it, and nobody else can', () => {
+  const t = new ChessTables();
+  const changed = new Set<number>();
+  assert.equal(t.join(2, 'b', { id: 'ann', name: 'Ann' }, changed), undefined);
+  assert.deepEqual([...changed], [2]);
+  assert.deepEqual(t.view(2).b, { id: 'ann', name: 'Ann' });
+  assert.equal(t.join(2, 'b', { id: 'bob', name: 'Bob' }, noChange()), 'Ann is sitting there');
+  assert.equal(t.join(9, 'w', { id: 'bob', name: 'Bob' }, noChange()), 'There is no such table');
+  assert.deepEqual(t.seatOf('ann'), { table: 2, side: 'b' });
+  // Sitting down again at the chair you're in changes nothing; moving to another one leaves the first.
+  assert.equal(t.join(2, 'b', { id: 'ann', name: 'Ann' }, noChange()), undefined);
+  t.join(3, 'w', { id: 'ann', name: 'Ann' }, noChange());
+  assert.equal(t.view(2).b, undefined);
+  assert.deepEqual(t.seatOf('ann'), { table: 3, side: 'w' });
+});
+
+test('moves must be legal and on your own turn, and only for the two playing', () => {
+  const t = seated();
+  assert.equal(t.move('bob', 1, sq('e7'), sq('e5'), undefined), "It isn't your move");
+  assert.equal(t.move('ann', 1, sq('e2'), sq('e5'), undefined), 'That move is not allowed');
+  assert.equal(t.move('ann', 1, -1, 99, undefined), 'That move is not allowed');
+  assert.equal(t.move('cat', 1, sq('e2'), sq('e4'), undefined), "You aren't playing at that table");
+  assert.equal(t.move('ann', 2, sq('e2'), sq('e4'), undefined), "You aren't playing at that table");
+  assert.equal(t.move('ann', 1, sq('e2'), sq('e4'), undefined), undefined);
+  assert.equal(t.view(1).moves, 1);
+  assert.deepEqual(t.view(1).last, [sq('e2'), sq('e4')]);
+  assert.equal(t.move('ann', 1, sq('d2'), sq('d4'), undefined), "It isn't your move");
+  assert.equal(t.move('bob', 1, sq('d7'), sq('d5'), undefined), undefined);
+  assert.equal(t.move('ann', 1, sq('e4'), sq('d5'), undefined), undefined);
+  assert.equal(t.view(1).taken, 'p');
+});
+
+test('nobody moves until there are two of them', () => {
+  const t = new ChessTables();
+  t.join(1, 'w', { id: 'ann', name: 'Ann' }, noChange());
+  assert.equal(t.move('ann', 1, sq('e2'), sq('e4'), undefined), 'Waiting for an opponent');
+});
+
+test("a mate ends the game, and then nothing more can be played, until a new one's set up", () => {
+  const t = seated();
+  for (const [who, from, to] of [['ann', 'f2', 'f3'], ['bob', 'e7', 'e5'], ['ann', 'g2', 'g4'], ['bob', 'd8', 'h4']] as const) assert.equal(t.move(who, 1, sq(from), sq(to), undefined), undefined);
+  assert.deepEqual(t.view(1).end, { kind: 'checkmate', winner: 'b' });
+  assert.equal(t.move('ann', 1, sq('a2'), sq('a3'), undefined), 'The game is over');
+  assert.equal(t.resign('ann', 1), 'There is no game to resign');
+  assert.equal(t.newGame('cat', 1), "You aren't playing at that table");
+  assert.equal(t.newGame('bob', 1), undefined);
+  const v = t.view(1);
+  assert.equal(v.moves, 0);
+  assert.equal(v.end, undefined);
+  assert.equal(v.taken, '');
+  assert.deepEqual([v.w?.id, v.b?.id], ['ann', 'bob'], 'the same two, in the same chairs');
+});
+
+test('resigning hands the win to the other side; a new game mid-game has to wait for that', () => {
+  const t = seated();
+  assert.equal(t.resign('ann', 1), 'There is no game to resign', 'nothing played yet');
+  t.move('ann', 1, sq('e2'), sq('e4'), undefined);
+  assert.equal(t.newGame('ann', 1), 'Finish the game first (or resign)');
+  assert.equal(t.resign('bob', 1), undefined);
+  assert.deepEqual(t.view(1).end, { kind: 'resign', winner: 'w' });
+});
+
+test('getting up leaves the game for whoever sits there next, and an empty table starts over', () => {
+  const t = seated();
+  t.move('ann', 1, sq('e2'), sq('e4'), undefined);
+  const changed = new Set<number>();
+  t.leave('bob', changed);
+  assert.deepEqual([...changed], [1]);
+  assert.equal(t.view(1).b, undefined);
+  assert.equal(t.view(1).moves, 1, 'the game waits');
+  assert.equal(t.join(1, 'b', { id: 'cat', name: 'Cat' }, noChange()), undefined);
+  assert.equal(t.move('cat', 1, sq('e7'), sq('e5'), undefined), undefined, 'and Cat carries on from where Bob was');
+  t.leave('ann', noChange());
+  t.leave('cat', noChange());
+  assert.equal(t.view(1).moves, 0);
+  assert.equal(t.view(1).fen.startsWith('rnbqkbnr/'), true);
+  t.leave('nobody', noChange());
+});
+
+// ---- The handlers, with a stand-in for the office ---------------------------------------------------------
+
+function office() {
+  const clients = new Map<string, Client>();
+  const sent: { to: string; msg: ServerMsg }[] = [];
+  const warned: string[] = [];
+  const ctx = {
+    clients,
+    sendTo: (c: Client, msg: ServerMsg) => void sent.push({ to: c.id, msg }),
+    warn: (_c: Client, error: string | undefined) => void (error && warned.push(error)),
+  } as unknown as Ctx;
+  const join = (id: string, floor: string | null = ROOF): Client => {
+    const c = { id, peer: { id, name: id, floor: floor ?? undefined }, throttles: new Map() } as unknown as Client;
+    clients.set(id, c);
+    return c;
+  };
+  return { ctx, clients, sent, warned, join, tables: (c: Client) => sent.filter((s) => s.to === c.id).map((s) => s.msg) };
+}
+
+test('chess.join only counts from the chair itself, and tells everyone up on the roof', () => {
+  const o = office();
+  const ann = o.join('ann');
+  const bob = o.join('bob');
+  const down = o.join('dan', '__floor');
+  // Not sitting there yet: nothing.
+  chessHandlers['chess.join'](o.ctx, ann, { t: 'chess.join', table: 1, side: 'w' });
+  assert.equal(o.sent.length, 0);
+  ann.peer.seat = chessSeatKey(1, 'w');
+  chessHandlers['chess.join'](o.ctx, ann, { t: 'chess.join', table: 1, side: 'w' });
+  assert.deepEqual(o.sent.map((s) => s.to).sort(), ['ann', 'bob'], 'not dan, who is on a floor');
+  assert.deepEqual(down.peer.floor, '__floor');
+  const msg = o.sent[0].msg;
+  assert.equal(msg.t, 'chess.table');
+  assert.ok(msg.t === 'chess.table' && msg.table.w?.id === 'ann');
+  // Sitting on the other side of the table says so too.
+  bob.peer.seat = chessSeatKey(1, 'w');
+  chessHandlers['chess.join'](o.ctx, bob, { t: 'chess.join', table: 1, side: 'b' });
+  assert.equal(o.sent.length, 2, "bob isn't in black's chair");
+});
+
+test('chess.move: a move goes out to the roof, a bad one is only said to the one who tried it', () => {
+  const o = office();
+  const ann = o.join('ann');
+  const bob = o.join('bob');
+  for (const [c, side] of [[ann, 'w'], [bob, 'b']] as const) {
+    c.peer.seat = chessSeatKey(2, side);
+    chessHandlers['chess.join'](o.ctx, c, { t: 'chess.join', table: 2, side });
+  }
+  o.sent.length = 0;
+  chessHandlers['chess.move'](o.ctx, bob, { t: 'chess.move', table: 2, from: sq('e7'), to: sq('e5') });
+  assert.deepEqual(o.warned, ["It isn't your move"]);
+  assert.equal(o.sent.length, 0);
+  chessHandlers['chess.move'](o.ctx, ann, { t: 'chess.move', table: 2, from: sq('e2'), to: sq('e4') });
+  assert.equal(o.sent.length, 2);
+  const last = o.sent[0].msg;
+  assert.ok(last.t === 'chess.table' && last.table.moves === 1 && last.table.fen.includes(' b '));
+});
+
+test('chess.sync sends every table to whoever asks, and only up on the roof', () => {
+  const o = office();
+  const ann = o.join('ann');
+  const dan = o.join('dan', null);
+  chessHandlers['chess.sync'](o.ctx, dan, { t: 'chess.sync' });
+  assert.equal(o.sent.length, 0);
+  chessHandlers['chess.sync'](o.ctx, ann, { t: 'chess.sync' });
+  const [reply] = o.tables(ann);
+  assert.ok(reply.t === 'chess.tables' && reply.tables.length === 3);
+});
+
+test('whoever gets out of the chair (or goes down in the elevator, or off the net) is out of the game', () => {
+  const o = office();
+  const ann = o.join('ann');
+  ann.peer.seat = chessSeatKey(3, 'b');
+  chessHandlers['chess.join'](o.ctx, ann, { t: 'chess.join', table: 3, side: 'b' });
+  const sees = () => (o.sent.at(-1)!.msg as Extract<ServerMsg, { t: 'chess.table' }>).table;
+  assert.equal(sees().b?.id, 'ann');
+  // Stood up without saying so (the next message anyone sends notices).
+  delete ann.peer.seat;
+  chessHandlers['chess.sync'](o.ctx, ann, { t: 'chess.sync' });
+  const tables = o.tables(ann).find((m) => m.t === 'chess.tables');
+  assert.ok(tables && tables.t === 'chess.tables' && !tables.tables[2].b);
+  // On the elevator down.
+  ann.peer.seat = chessSeatKey(3, 'b');
+  chessHandlers['chess.join'](o.ctx, ann, { t: 'chess.join', table: 3, side: 'b' });
+  chessHooks.leaving!(o.ctx, ann, undefined);
+  assert.equal(sees().b, undefined);
+  // The socket closing.
+  chessHandlers['chess.join'](o.ctx, ann, { t: 'chess.join', table: 3, side: 'b' });
+  assert.equal(sees().b?.id, 'ann');
+  chessHooks.closed!(o.ctx, ann);
+  assert.equal(sees().b, undefined);
+});
diff --git a/tests/chess.test.ts b/tests/chess.test.ts
new file mode 100644
index 000000000..f32c9c924
--- /dev/null
+++ b/tests/chess.test.ts
@@ -0,0 +1,214 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { START_FEN, applyMove, inCheck, insufficientMaterial, legalMoves, outcome, parseFen, parseSquare, perft, playMove, squareName, startState, toFen, type ChessState } from '../src/shared/chess.js';
+
+const fen = (f: string): ChessState => {
+  const s = parseFen(f);
+  assert.ok(s, `parses: ${f}`);
+  return s;
+};
+/** "e2e4" or "e7e8q" played from `s`, which has to be legal. */
+const play = (s: ChessState, ...moves: string[]): ChessState => {
+  for (const m of moves) {
+    const p = playMove(s, parseSquare(m.slice(0, 2)), parseSquare(m.slice(2, 4)), m[4] as 'q' | undefined);
+    assert.ok(p, `${m} is legal in ${toFen(s)}`);
+    s = p.state;
+  }
+  return s;
+};
+const dests = (s: ChessState, from: string) => legalMoves(s, parseSquare(from)).map((m) => squareName(m.to)).sort();
+
+test('squares: a1 is 0, h8 is 63, and names go both ways', () => {
+  assert.equal(parseSquare('a1'), 0);
+  assert.equal(parseSquare('e4'), 28);
+  assert.equal(parseSquare('h8'), 63);
+  assert.equal(squareName(12), 'e2');
+  assert.equal(parseSquare('i9'), -1);
+});
+
+test('FEN: the start position round-trips, and nonsense is turned away', () => {
+  assert.equal(toFen(startState()), START_FEN);
+  const f = 'r3k2r/p1ppqpb1/bn2pnp1/3PN3/1p2P3/2N2Q1p/PPPBBPPP/R3K2R w KQkq - 0 1';
+  assert.equal(toFen(fen(f)), f);
+  assert.equal(parseFen('nonsense'), null);
+  assert.equal(parseFen('8/8/8/8/8/8/8 w - - 0 1'), null);
+  assert.equal(parseFen('8/8/8/8/8/8/8/8 w - - 0 1'), null, 'no kings');
+  assert.equal(parseFen('rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR x KQkq - 0 1'), null);
+});
+
+test('perft from the start: 20, 400, 8902', () => {
+  const s = startState();
+  assert.equal(perft(s, 1), 20);
+  assert.equal(perft(s, 2), 400);
+  assert.equal(perft(s, 3), 8902);
+});
+
+test('perft: kiwipete, a position with every special move in it', () => {
+  const s = fen('r3k2r/p1ppqpb1/bn2pnp1/3PN3/1p2P3/2N2Q1p/PPPBBPPP/R3K2R w KQkq - 0 1');
+  assert.equal(perft(s, 1), 48);
+  assert.equal(perft(s, 2), 2039);
+  assert.equal(perft(s, 3), 97862);
+});
+
+test('perft: the well-known positions that trip up en passant, castling and promotion', () => {
+  // En passant along a rank with a rook behind it (taking would expose the king), and pins.
+  const rooks = fen('8/2p5/3p4/KP5r/1R3p1k/8/4P1P1/8 w - - 0 1');
+  assert.deepEqual([1, 2, 3].map((d) => perft(rooks, d)), [14, 191, 2812]);
+  // Promotions, taking onto the back rank, castling out of and into check.
+  const promo = fen('r3k2r/Pppp1ppp/1b3nbN/nP6/BBP1P3/q4N2/Pp1P2PP/R2Q1RK1 w kq - 0 1');
+  assert.deepEqual([1, 2, 3].map((d) => perft(promo, d)), [6, 264, 9467]);
+  assert.deepEqual([1, 2].map((d) => perft(fen('r2q1rk1/pP1p2pp/Q4n2/bbp1p3/Np6/1B3NBn/pPPP1PPP/R3K2R b KQ - 0 1'), d)), [6, 264]);
+  assert.deepEqual([1, 2, 3].map((d) => perft(fen('rnbq1k1r/pp1Pbppp/2p5/8/2B5/8/PPP1NnPP/RNBQK2R w KQ - 1 8'), d)), [44, 1486, 62379]);
+  assert.deepEqual([1, 2].map((d) => perft(fen('r4rk1/1pp1qppp/p1np1n2/2b1p1B1/2B1P1b1/P1NP1N2/1PP1QPPP/R4RK1 w - - 0 10'), d)), [46, 2079]);
+});
+
+test('pawns: a double step from the home rank only, blocked by anything in front', () => {
+  const s = startState();
+  assert.deepEqual(dests(s, 'e2'), ['e3', 'e4']);
+  assert.deepEqual(dests(play(s, 'e2e4', 'a7a6'), 'e4'), ['e5']);
+  assert.deepEqual(dests(fen('4k3/8/8/8/8/4p3/4P3/4K3 w - - 0 1'), 'e2'), []);
+  assert.deepEqual(dests(fen('4k3/8/8/8/4p3/8/4P3/4K3 w - - 0 1'), 'e2'), ['e3']);
+});
+
+test('you can only move your own pieces, on your own turn', () => {
+  const s = startState();
+  assert.equal(playMove(s, parseSquare('e7'), parseSquare('e5')), null);
+  assert.equal(playMove(s, parseSquare('e2'), parseSquare('e5')), null, 'three steps');
+  assert.equal(playMove(s, parseSquare('e4'), parseSquare('e5')), null, 'an empty square');
+  assert.equal(playMove(s, parseSquare('a1'), parseSquare('a3')), null, 'a rook through its own pawn');
+  assert.ok(playMove(s, parseSquare('g1'), parseSquare('f3')));
+});
+
+test('en passant: only straight after the double step, and the passed pawn goes', () => {
+  let s = play(startState(), 'e2e4', 'a7a6', 'e4e5', 'd7d5');
+  assert.equal(squareName(s.ep), 'd6');
+  assert.deepEqual(dests(s, 'e5'), ['d6', 'e6']);
+  const took = playMove(s, parseSquare('e5'), parseSquare('d6'))!;
+  assert.equal(took.captured, 'p');
+  assert.equal(took.state.board[parseSquare('d5')], '', 'the pawn it passed is gone');
+  assert.equal(took.state.board[parseSquare('d6')], 'P');
+  // Wait a move and the chance is gone.
+  s = play(s, 'h2h3', 'h7h6');
+  assert.deepEqual(dests(s, 'e5'), ['e6']);
+});
+
+test('en passant that would leave your own king in check is not allowed', () => {
+  // Both pawns come off the fifth rank at once, opening it to the rook.
+  const s = fen('8/8/8/KPp4r/8/8/8/7k w - c6 0 1');
+  assert.deepEqual(dests(s, 'b5'), ['b6']);
+});
+
+test('castling: both sides, and what stops it', () => {
+  const s = fen('r3k2r/8/8/8/8/8/8/R3K2R w KQkq - 0 1');
+  assert.deepEqual(dests(s, 'e1'), ['c1', 'd1', 'd2', 'e2', 'f1', 'f2', 'g1']);
+  const short = play(s, 'e1g1');
+  assert.equal(short.board[parseSquare('f1')], 'R');
+  assert.equal(short.board[parseSquare('h1')], '');
+  assert.equal(short.castling, 'kq', 'White has lost both');
+  const long = play(s, 'e1c1');
+  assert.equal(long.board[parseSquare('d1')], 'R');
+  assert.equal(long.board[parseSquare('c1')], 'K');
+  assert.equal(long.castling, 'kq');
+  // (Black's long side is covered now by the rook on d1.)
+  assert.ok(!dests(long, 'e8').includes('c8'));
+  assert.ok(dests(long, 'e8').includes('g8'));
+  // Through an attacked square, out of check, a piece in the way, or the rights gone: no.
+  assert.ok(!dests(fen('r3k2r/8/8/8/8/5r2/8/R3K2R w KQkq - 0 1'), 'e1').includes('g1'), 'f1 is attacked');
+  assert.ok(dests(fen('r3k2r/8/8/8/8/5r2/8/R3K2R w KQkq - 0 1'), 'e1').includes('c1'), 'the long side is clear of it');
+  assert.ok(!dests(fen('r3k2r/8/8/8/8/4r3/8/R3K2R w KQkq - 0 1'), 'e1').some((d) => d === 'g1' || d === 'c1'), 'in check');
+  assert.ok(!dests(fen('r3k2r/8/8/8/8/8/8/RN2K2R w KQkq - 0 1'), 'e1').includes('c1'), 'a knight in the way');
+  // The rook that's attacked (not the king's path) doesn't matter on the long side.
+  assert.ok(dests(fen('1r2k2r/8/8/8/8/8/8/R3K2R w KQk - 0 1'), 'e1').includes('c1'));
+  assert.ok(!dests(fen('r3k2r/8/8/8/8/8/8/R3K2R w Qkq - 0 1'), 'e1').includes('g1'));
+});
+
+test('castling rights go when the king or a rook moves, or the rook is taken', () => {
+  let s = startState();
+  s = play(s, 'a2a4', 'a7a5', 'a1a2');
+  assert.equal(s.castling, 'Kkq');
+  s = play(s, 'h7h5', 'h2h4', 'h8h6');
+  assert.equal(s.castling, 'Kq');
+  s = play(fen('r3k2r/8/8/8/8/8/6B1/R3K2R w KQkq - 0 1'), 'g2a8');
+  assert.equal(s.castling, 'KQk', 'a rook taken on its own square');
+  s = play(fen('r3k2r/8/8/8/8/8/8/R3K2R w KQkq - 0 1'), 'e1e2');
+  assert.equal(s.castling, 'kq');
+});
+
+test('promotion: a queen unless another piece is asked for, and it comes once for each', () => {
+  const s = fen('4k3/P7/8/8/8/8/8/4K3 w - - 0 1');
+  assert.deepEqual(legalMoves(s, parseSquare('a7')).map((m) => m.promo).sort(), ['b', 'n', 'q', 'r']);
+  assert.equal(playMove(s, parseSquare('a7'), parseSquare('a8'))!.state.board[parseSquare('a8')], 'Q');
+  assert.equal(playMove(s, parseSquare('a7'), parseSquare('a8'), 'n')!.state.board[parseSquare('a8')], 'N');
+  const black = fen('4k3/8/8/8/8/8/p7/1R2K3 b - - 0 1');
+  assert.equal(play(black, 'a2b1r').board[parseSquare('b1')], 'r', 'taking a piece and promoting at once, as Black');
+  assert.equal(playMove(black, parseSquare('a2'), parseSquare('b1'))!.captured, 'R');
+});
+
+test('pins and check: a pinned piece stays on its line, and a check has to be answered', () => {
+  // The bishop is pinned to its king by the rook.
+  assert.deepEqual(dests(fen('4r3/8/8/8/8/8/4B3/4K2k w - - 0 1'), 'e2'), []);
+  assert.deepEqual(dests(fen('4r3/8/8/8/8/8/4R3/4K2k w - - 0 1'), 'e2'), ['e3', 'e4', 'e5', 'e6', 'e7', 'e8']);
+  // In check from a knight: take it, or move the king (not onto f2, which it also covers).
+  const s = fen('4k3/8/8/8/8/3n4/4P3/R3K3 w - - 0 1');
+  assert.ok(inCheck(s));
+  assert.deepEqual(legalMoves(s).map((m) => `${squareName(m.from)}${squareName(m.to)}`).sort(), ['e1d1', 'e1d2', 'e1f1', 'e2d3']);
+  assert.ok(!inCheck(startState()));
+});
+
+test("fool's mate: Black mates in two moves", () => {
+  const s = play(startState(), 'f2f3', 'e7e5', 'g2g4', 'd8h4');
+  assert.ok(inCheck(s));
+  assert.deepEqual(legalMoves(s), []);
+  assert.deepEqual(outcome(s), { over: true, kind: 'checkmate', winner: 'b' });
+  assert.deepEqual(outcome(startState()), { over: false });
+});
+
+test("scholar's mate, from the other side", () => {
+  const s = play(startState(), 'e2e4', 'e7e5', 'd1h5', 'b8c6', 'f1c4', 'g8f6', 'h5f7');
+  assert.deepEqual(outcome(s), { over: true, kind: 'checkmate', winner: 'w' });
+});
+
+test('stalemate: no legal move and not in check', () => {
+  const s = fen('7k/5Q2/6K1/8/8/8/8/8 b - - 0 1');
+  assert.ok(!inCheck(s));
+  assert.deepEqual(legalMoves(s), []);
+  assert.deepEqual(outcome(s), { over: true, kind: 'stalemate' });
+});
+
+test('insufficient material: bare kings, one minor piece, bishops on one color; not a pawn, a rook, or bishops on both', () => {
+  assert.ok(insufficientMaterial(fen('4k3/8/8/8/8/8/8/4K3 w - - 0 1')));
+  assert.ok(insufficientMaterial(fen('4k3/8/8/8/8/8/8/3NK3 w - - 0 1')));
+  assert.ok(insufficientMaterial(fen('4kb2/8/8/8/8/8/8/2B1K3 w - - 0 1')), 'c1 and f8 are both dark');
+  assert.ok(!insufficientMaterial(fen('4k1b1/8/8/8/8/8/8/2B1K3 w - - 0 1')), 'c1 dark, g8 light');
+  assert.ok(!insufficientMaterial(fen('4k3/8/8/8/8/8/P7/4K3 w - - 0 1')));
+  assert.ok(!insufficientMaterial(fen('4k3/8/8/8/8/8/8/R3K3 w - - 0 1')));
+  assert.deepEqual(outcome(fen('4k3/8/8/8/8/8/8/3NK3 w - - 0 1')), { over: true, kind: 'insufficient' });
+});
+
+test('the fifty-move rule: a hundred half moves without a pawn move or a capture', () => {
+  assert.deepEqual(outcome(fen('4k3/8/8/8/8/8/8/R3K3 w - - 99 80')), { over: false });
+  assert.deepEqual(outcome(fen('4k3/8/8/8/8/8/8/R3K3 w - - 100 80')), { over: true, kind: 'fifty' });
+  // A move that takes or moves a pawn starts the count again, any other adds to it.
+  assert.equal(play(fen('4k3/8/8/8/8/8/8/R3K3 w - - 40 50'), 'a1a2').halfmove, 41);
+  assert.equal(play(fen('4k3/8/8/8/8/8/P7/R3K3 w - - 40 50'), 'a2a4').halfmove, 0);
+  assert.equal(play(fen('r3k3/8/8/8/8/8/8/R3K3 w - - 40 50'), 'a1a8').halfmove, 0);
+});
+
+test('turns and move numbers advance, and a capture is reported', () => {
+  const a = play(startState(), 'e2e4');
+  assert.equal(a.turn, 'b');
+  assert.equal(a.fullmove, 1);
+  assert.equal(toFen(a), 'rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1');
+  const b = play(a, 'd7d5');
+  assert.equal(b.fullmove, 2);
+  const c = playMove(b, parseSquare('e4'), parseSquare('d5'))!;
+  assert.equal(c.captured, 'p');
+  assert.equal(playMove(b, parseSquare('e4'), parseSquare('e5'))!.captured, '');
+});
+
+test('applyMove leaves the position it was given alone', () => {
+  const s = startState();
+  const before = toFen(s);
+  applyMove(s, legalMoves(s)[0]);
+  assert.equal(toFen(s), before);
+});
diff --git a/tests/size.test.ts b/tests/size.test.ts
index be8ce888f..9c533b829 100644
--- a/tests/size.test.ts
+++ b/tests/size.test.ts
@@ -22,7 +22,6 @@ const BUDGET = 600;
 const CEILINGS: Readonly<Record<string, number>> = {
   'src/server/dsh.ts': 1148,
   'src/server/workers/manager.ts': 1029,
-  'src/client/features/rooftop/world.ts': 989,
   'src/client/world/sky.ts': 966,
   'src/server/meetings.ts': 764,
   'src/client/world/holiday.ts': 702,
diff --git a/tests/whereabouts.test.ts b/tests/whereabouts.test.ts
index 73b97bb4d..58a8ef0ec 100644
--- a/tests/whereabouts.test.ts
+++ b/tests/whereabouts.test.ts
@@ -1,7 +1,7 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import { whereabouts } from '../src/client/ui/whereabouts.js';
-import { DANCE_FLOOR, ROOF_TABLES } from '../src/shared/layout.js';
+import { CAFE_TABLES, ROOF_TABLES } from '../src/shared/layout.js';
 import type { PeerInfo } from '../src/shared/protocol.js';
 import { ROOF } from '../src/shared/rooftop.js';
 
@@ -15,9 +15,9 @@ test("the roof's corner over the meeting room is a tall table, not the meeting r
   assert.equal(whereabouts(peer(t.x + 0.7, t.z, ROOF)), '🕯️ at a tall table');
 });
 
-test('up on the roof, the dance floor and the bar have their own words, and the rest none', () => {
-  assert.equal(whereabouts(peer((DANCE_FLOOR.minX + DANCE_FLOOR.maxX) / 2, (DANCE_FLOOR.minZ + DANCE_FLOOR.maxZ) / 2, ROOF)), '🪩 on the dance floor');
-  assert.equal(whereabouts(peer(11.5, 0, ROOF)), '🍸 at the bar');
+test('up on the roof, the café counter and its tables have their own words, and the rest none', () => {
+  assert.equal(whereabouts(peer(CAFE_TABLES[0].x, CAFE_TABLES[0].z, ROOF)), '☕ at a café table');
+  assert.equal(whereabouts(peer(11.5, 0, ROOF)), '☕ at the café counter');
   assert.equal(whereabouts(peer(0, 3, ROOF)), undefined);
   assert.equal(whereabouts({ ...peer(12, 0, ROOF), seat: 'roof-stool-3:0' }), '🪑 on the bar stool');
 });

From d5400225a955a7a0258106cf0d589342a3667d7d Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 14:36:06 +0400
Subject: [PATCH 02/35] Local snapshot of existing visuals for isolated preview
 build

---
 src/client/core/post.ts              |  17 +++++++++++++++++
 src/client/models/chair-desk.glb     | Bin 0 -> 39016 bytes
 src/client/world/models.ts           |   2 ++
 src/client/world/office/materials.ts |  10 +++++-----
 src/client/world/office/seats.ts     |  20 +++++++++++++++++++-
 src/shared/floors.ts                 |   2 +-
 6 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 src/client/models/chair-desk.glb

diff --git a/src/client/core/post.ts b/src/client/core/post.ts
index 52aea92f6..0c68c45c2 100644
--- a/src/client/core/post.ts
+++ b/src/client/core/post.ts
@@ -8,9 +8,25 @@ import * as THREE from 'three';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 import { GTAOPass } from 'three/examples/jsm/postprocessing/GTAOPass.js';
 import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';
+import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
 
+/** The camera's finish after tone mapping: a warm lift, a little more colour, a soft vignette and fine grain. */
+const GRADE = {
+  uniforms: { tDiffuse: { value: null as THREE.Texture | null } },
+  vertexShader: 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); }',
+  fragmentShader: `uniform sampler2D tDiffuse; varying vec2 vUv;
+    float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); }
+    void main(){ vec4 c = texture2D(tDiffuse, vUv); vec3 col = c.rgb;
+      float l = dot(col, vec3(.2126, .7152, .0722));
+      col = mix(col, col * vec3(1.05, 1.0, .93), 1.0 - smoothstep(0.0, 1.0, l));
+      col = mix(vec3(l), col, 1.08);
+      col *= mix(.72, 1., smoothstep(1.1, .4, length(vUv - .5) * 1.25));
+      col += (h(vUv * 1600.) - .5) * .012;
+      gl_FragColor = vec4(col, c.a); }`,
+};
+
 export class Post {
   private composer: EffectComposer;
   private pass: RenderPass;
@@ -34,6 +50,7 @@ export class Post {
     this.composer.addPass(this.ao);
     this.composer.addPass(bloom);
     this.composer.addPass(new OutputPass());
+    this.composer.addPass(new ShaderPass(GRADE));
   }
 
   setSize(w: number, h: number) {
diff --git a/src/client/models/chair-desk.glb b/src/client/models/chair-desk.glb
new file mode 100644
index 0000000000000000000000000000000000000000..131101f3dbc72f41ca624ddd77ce53d8bafea9ed
GIT binary patch
literal 39016
zcmeI52Y6Lg*8Zb{1r@PiM<5oem=00z%|WmshzJPS14M{Iz$74wU~I@(uwX;5U_ory
z$C{fH%h-Dv#NG=Q#)94X)^BI6>q_K8nDYOg@Bf&2-g)1(?%L(-y>>YlBxA-6*=x<L
ztgNw@W@UZbDl4ns;DP&3%`Tf#T~<+5KB1y&XjR$h>|GDZ-fy1+j~HKCT~=9MI<D%7
zNfqPDtFsU5o?Tj1RaTw7>(uNqWff(WrPUKEvv<uNT2a1t{~>$roZBO>AiI0^<g!Yt
zk`MBF<YZ6lo;`BXQAdeSs-2oW^7!hq{$&+os>f#UnqQRLt6-Yc+7NJ1dD(Fq6bfYT
znj;@c{J^7*3azSX#d8aa3c6=kmsXCUOZf%GMS0V@OA9M5+z{=XU%m2q#d*CNx?}AZ
z_bh6D^ZCU&(plepuiPfZ^H<XQf}Ve9y`Zp3`ISGt40Yr7i&v|Hy!@hqCgWd}&m%Q=
z{PT*73!3yGH@9g8D;t7*iEc6jg}M1n#vq?`DjhYdtg32)Wn9Pyl50f?Rek)#GRf3~
z_Uw}{sXJ=I_=yuL$||ad1b1O>p42~T!lVjGu-v@7?%Cr@r$`#-^vKW6&FfjvGrwo|
zoF2Kw-FMFEk&{#0Gq<2PuTVNLzFe|jqH<)^dKTst78Z8TAttX^eqMgBe2J)-P&vMI
zT=@wswxeW)mHj^V4L!~ML+Y<)PgmK3JWZ3u^?M6>%^8bTwveBxg~5G#_wRk+3fm}5
zk9Qu)vC1|yrQ8<r`%|oHMtk;>e6ktMEt2_^dFoM++q1B^n8htqTa=znnLZ0)Dsu}9
zB%^ck30P$(<)JbTb+bCT$`&L|Gq$j*$qd7=$`*QNYN2_P$zHk2HgtLaaWb3LMs6Nk
z+#efZ3hg8dXHZ4yc-H**vg*=t1Ik91PZ}?&IB{g<0374WM;$m}(wMOovW0NajV!Gy
z>oZ~8gvz~2M}^~#)nC-BNS1$LG3ip&@Y7i5(x_Hv1!eoJw3^MAJFR<m+4%CRs`ANY
z<~t-uc8eUTVDyAZBgd5uE+3uVC1h_KH*sv~fC-~{fPn|}9yD}MIbo+}>m!XSt(+)_
z;p#n2aY25*oSpJ4vRje-MeJ(%1$jjUy^6a3KYfxgYE@&)8m<BQPy@=U#&#GrwzRym
zZ&}qbJX~e@`0{EQv4*hmVKijw%PU5g%g!%%0U4+2>dNwwld3VNW*;zc@V-O#9k_ou
z0rnqw;DFx!Wkc_tJ!H?}eFhFZu<sE$*}KZ|na&f5n|7ER*WbI)oaSYzWNKb|Y0b-~
z;F~XM)V$=y)a*Y#m@JTgw`LwphPgrptzq~^jV&KHy0VNDi@CN;vhnWRXPlgfUF5l|
zD@!Y?#+6owyInd-D<@Ppa)pGc8dW+@GW3w#?(#pWbi7O<W9l-M`u|vIdXLppHEh7E
z(L^rKRy9g4rwtEhkC_u5I($GsI&>I*PFB_)`|h9BBehvluESZ2w*RHp^oVZlAN)4C
zN7`>1|M}Cq1^<*S`le1^w06)Z4)2n>YX1Y$`oX#hLC<S(e(IyW&kVZ#b*H8-7<OsU
z1CF?>cFYl12Hk&h%hWGDw@T0l{PVu9-yMzr=@Xs}e(Jep$!S4TkM9q9w~71jzM?+w
zxb_+ep3C<Qjh{aIzM-jy`gulTct-!cJQp$a$3LTw_c2Y|vif~l-v?jT_lJ40XY_M~
zwr4ay&+Eq-P1&Yn&iLbJoPE5Ft<_^?@mpKWm-(B{oz>~*(QBVG_$?m4&5Li#k73hi
zv9f-CeO~#p{&~qI$}-pF7@9fteeiSYbFXPmuBsmYyuMvur=L4No_>D)m}eR{ALGmV
z9QM!UpT&=Z<p68S`ey5k=QV#OZFxdH7USoXF*)?yJ(8?J`h#Yz(H5HAGe4TL=4Vc=
ztgq8QuaD1EXQsK%)HmOjuixjG@0)Me_s!RzsSmzR8wbY6*UuiAl~q&6|DpbG=$ev-
zzS8Ga>)LGwhWIUy-@K%mn(@ez_&SMSrM~8)M-ziiJF(>a+;vmU(e#7*sk=E^=Y%3P
z&C$nBsS5R<(DRC9bF{>zsGQj5Xo(ABqV=y*yE^Ndqrcj^Lz3}a-1dM(b2R<X{!{-d
zwaihio3B-B@__nvzE-JS&X8{*o_WrsU7s0$>wiWqW0G>?vq~-Pme7BmqdA(`hM)A>
z5_9F6{uB=H9QxiIt@YKocK$_84J+@PYokF*{OZnWbJkIlm@x0mXLHsI`9bH%k>==5
zS@*<06;6)f<!!esdEw_TgAHT<^6QIn=iV>G<L<mJE*f!Lyw?s{^>AwHruEB@&aPj(
zW7qoMmTz2NKYq9RuAjAwx7)05{lNUw;@3}punznE%PZ=ze^_^VO#I@i?PKCMefeRT
z<C+q<#hPoB{JQnr2pe9!bW*B#PW#^2F!mPfjtMqQy!h)iuAVsY*W-t=r?wwcSKPI0
zZ+PfMmAwn<y2RKpHh$u;EuQk&u=Fcs%;(atnD$`o+{4}s{e_9ExVcs6AB;V7+m68=
zddQt24jVr<^;CRO7}|lUZ{*h(1RKWQr{{KokNEM;v`u+z%G2)Aqo0gu55^vJ`Odwu
zVQD9nlXk;+U{ek|^mmV}`om9N7WIj?4O}61zk^DG4P(;}K8LX>hYgQ8uyv>p=JT)C
zel_$T#+H6Yusla#Y}&`BJkNRCc@NdWWhd0fi~}}|E%k<SFy*A)V8fJ`{0z3_ZD4Ht
z*v4beY!&Rq>zx$yIW~+f`5ckQlHU>eO*z&9HcT8W`QDqjP)_<m9R0zrJ^Z;)4yGK;
zIPp2-1Y_gJhM6b)aEO=r3UR{0mghId&-h@&*yJrto|?_)*f4*Vw1$8m7<(-Y`Dr1*
zhWTkJFnev$>j+>zH+x;x>j@JJ^O^inRo40f>fi^)-az$+!qfxvS!=<@f;NJUl(9Dv
zv=wY7*i;#NbHP@EEd^UBV{a{JC)if7jWYIjf{ua?g7(VT*@7JfI|#N{#@<QLMbKH$
zNg2DVU}r&hK{sXW9)es!j$jvM>^woCpg@qXj9nxs7W5MIRL0&_z!wL6sj!<eHV0mB
zK_n<q#@<7)r=YK(k23aNf_(-12=-RS?k5-^=r7n$8GC=hAi)8Gfy&qi3Wf@X2nH)-
zA0!wd7%mv5jD4`+Fu|dMLzJ-(7nBN)6da+9JyJD1N;N!MFh+2cpiCKitO8vw7$-PJ
zaI`Y^c)>)$1VM!|_OXI$L6x9V8GDjoir_fGWM%B*1@_Z^^H#}LUDrrnztxkq=$a3I
zOgvrre9&8NeoUgn+iwK@;Eu}@CqMm4(62o3VdA(uUkiHXTT2pMHf@Oc;&0ET<6G~X
zmwbGkT4GX8C(k~wK3R6-JHfv)eSX$<sk&VruD$WOS3<mL{M70CoO1n4x&EhIpHr^S
zDc9$e^;zmC9kW{fefuPBIh~OHC(Q4)#n2!0#kVg{P}XAf*%SDiYKu4jgjq{M%>DPS
zlbE~vi$N2k<DbI+=%Qz8>8Bf$pmj|A*amH5#rUk%VN1p>>2#QvJ$Bh3_?aWGb?zF~
z>0_8XYj^3`>}1>B>zUK!sXuf~PQU8mpx>Y0F8R}KF9rQX&X&n1N4yvGi}f2P-yQH(
z&`(ZomF%|fPeHeuyk_$InQMgpBwzX_u|{o+pqKsfZsPS@*A9BSb6-e&yw^HGyJrc{
z<^48pE;oFh`}|3|{->Ny^1Lg^VaBb|oHBPSn)fMRJ|3Qncr<f|CYKm1S5MHE1May(
zZu{rbdGt9Sp54|dWr?RhE>D7HzE+YyA&0G=73Cg%wmcLa#-ZsmHhnIa&usN!jS%DN
z_s`z6{zl`k`I&0EZ&;qYxl6e`Ou0Nvxjam{JWRPfOu0Nvxjam{JWRPf^m7!n&5_J+
zqc!FGZ)?Za5%a>B=swdZPw?v=;&Z0ao?~U17j)Bk^!3~LTb)hEll{3#o}_b$vcAvc
zn2o>lr}K^Y+Os!H_Dvm~KyUi(PRaFum>RxUG(X?1nV*<9+wGWq<itC|+Oat$#`|r4
z@tdZs*Ea7y25o-g$F9*S`QDXRg|@7IV$6>=zwbY~Xilf({bOc@XR-bhZ+?kM^}XYT
zMBA(0O^83O@o%y4gTzVG7YD!BKCetu*5{tnNy|^#HBH|vhw+=v)Gq$B*I%Ca?wY4V
zf4p{WrTajCTw7izyA5rf-15~qVLa#G-a466+b}-nr$6S;)Gq#o53ZTqc}Obs$7?sv
zDL>BUr>yzur!RX||MilezH<wCnD(QcKbdo0>tu(8bBRgrQ@%;^vyErchqNDUeqwws
z+1^5o`O)5gz+(#&$NlhGsNXa(BQLH^%zF9b;CDLp<pZ-5@BH{#7zfkz*_CaiE&rv?
zM*E)mDeL>@+Di9<{#f4fj9yzl5M!Dc%Ln|X@n3!Ay2)3U-CK*^w(t7MuRGmZON{x^
z=Jzq^>w0XM9DC2TA>Lw$_kLSD#G59@au~nYoJX9G#F!?=&Q1Kb?(mz&@9vXnjo;ll
z(|Tq8uSczsocz!eVNBdTHfes!+P#!Mn8xq!u8p*f3GsfdnV+)eC&tb@{HF2SnTX%(
z6}3x@yH_{Tw&xIIdS&gpJt4XM9<7rtu0J)*yZNcd{M2LX8g1*B81tjePmJveXur3c
zpLp{V<LBKpe#?2{y?$@;w8TS;8`iIBV%(ZdYy5sqnZ|E9Oj}<2XR$qsc=MypPg$Sa
zXx<%&Y3k=)!~FW*k=$lr%jAN$8t(IcotmF`@Ar3X)5KWb(jU|Kci3e_;>i5>!d_<@
zzl|I5Ui<yl-x<tLS@ToY))CtG+5E(tpBUSp(LU$RPrUhw;TfMFep~3je_rzw@BJ%U
zBgACdPnaW{3)95gSkVXG9rS%6?I$KvzS(&}S<}S(z0ov&TSvq@-RP{bdL$-g=ZKU|
z>y`Ok&ZqB1ly&);*7)5T40mjOCu-!k@gd$ceXv}@Z+c~Z8$;r~c4tt^_EqXJKid41
zb!#)_)@IsIy!namedPU#4Wc{AtF*?yY|vwgA8%>6x0uH7@-1lp&a3&E_7mS_=C_IR
z(N(PX)SWMVnRxrc8KEun)2{i6x%|ab5=%F_JH(jA-)7-?iB5I*1ixwgwm+l4i+)I4
zSU5byn4kL1PmDWv(i*>8YmKy93n4e`dlFj<l=bs&8o%W*`p5^bNOT`|Zx{zZN88oi
zoS5_SUxVM~f_OjXe!hD4dnu8hToB^#Y4KK~V4KT>-l^}$i5|ya5VYH)8jY>(SJZFg
zkM`qZcUt^5hG=(YrQG?Lvh#}=JL}OtC+%GZzvV63?dR!tXZ*HLqTT-K?~v*5+=#I~
z4ej>N^!IQ0?Jj|K=R%`gwS9mXpXWXYd``N(tI@la-)DS2`2EWE1lqDa4ei&y&vVO9
zVl0QzcF#fE9T@HI3F-X`zt0WJ2iA!B(cbUJ$}};4JiYdLX!%LJ`O)U5KR)*?Cy6mX
z+Wf@ZnBX^!-_{p?)A(&3@tekP^N8Q{%IdLoO1#(9$sTBJ*?wqah2Lwx7X15>`KjN&
ze?VId_1OI4H;vzN0Ke&#`7M8lH%+`>%f3J6C*J$*9fY!`Lm%|Jef+k5@q6ua#xyZ@
zZ=tN$eowG{gLw0!%}-hPzM0+=h%rCf?-hQ(vVDvg^P|mA{l2WNO<yP4{KWgc#r6|o
z%x~Jx7yR6x@%wQwjo<HkUi*I9UQN9D(dMUb{(SNKfcc3xKk>e-oe{oHwD<eInI^_^
zhC02r{Rh9DN5q>SZGK|>yxaLgjQP>#C*JZ9?eoX{#G9WOfA;ycV1DAAKWX<F@h5HH
zlX}vAwDULGPi$|YUAqrZztc&#zoj*8xw2`E-|iu3D~q;!h%bxwZP`5pzsrZD-9zx(
zevY>1LR-$D{g}9UOxoT~jN9`YeK+fJsnI*N<soJL_`5t$y7k-WJ5|dE%DO!9e=d`>
z93aN!hW|62M(;j$rW0>xI@->CwA}~Lc27XteG={8!R^el82hsiJG1cHJp^rMBHGR-
zwA)XD_J6)(+K<1@3%P23wE3mZ^j!t*p10Baj(he-_hk3%DfjH@dlYrLXAd#@?CJBG
z829Yy`v88I^XdD5)oEw68<R%+FzwpAo?9c0)~Q<~>AO1hyET$>Yb1T=A;ztd^uCJU
zt&v81ogZ_X3*v1LM7uST-mmbxHRAWEMrVOrBaO~?w?-Q6rT%{6)<}9^rCt9Wqva&|
zV_IU;dl7!WFIjHmH%+{iZCa0wGk(*=+rEU~=|=Nn@e<Q$j(oh$3o(A~%+K>We|rC<
zU6&_G+e`7Ark|PiZ7bWf9yiyG)~5N1w>&|+cZ&4Bgx~fnw5?OL?NMl3r)bs-_Y<`3
zQD|F(XqzvztzR@{SyN~~kG4+nTMk%Ry;nE-9?#vo(%+8}@9web?|$*Sdvc@iPVKuL
zVr-40{apC*xA`K*);QYbkI%96IY^A1gJ{bcw4H-!TjOXycecjy`}wuI2Yy@QXgded
zb`GL#jic=jkG3_AwsR2e-aFFgAbvXs(RP<cyZc-EJ4XC=Uq#zJAMJC)a)z~Fezf=d
z@i$G3AAhGC?a3A|?XGa`Q;&^5+Ru^s>9hHX@$22~6=^^5=FgJ9o5`P#%TLXJPG@C3
zmbECc?xrV&x>u#YX;D}wAhxDCTEgn+u>92g=X9u#Ds4Pgs_7>s=y!AUf2yC_o{bf4
zuT;~=%N~C!QGfsR(BD<-^z+xavG_lvv$8%Px=w1_`e}^Ie?{xK$e8dG#;YdC|D0y7
ztj>Q&GX_@AD)oss9Fd&=!tu11^{?yySpI~5H1z+!vEKjNb%s5#R`$T~9I^+lRO>pn
z{e-z%spfN;TI#Mr{d+o;4{e63nzsjr=hFC<>K5&%m9*J@tMGT+nxp5poLsW`Ip>7G
zw{`EJi6w_lye(+&pI=&DGX0nr8~hn`);GgSexABs=$nuC{`2NdD;ast`hTcDlmCXI
zlS(F+Ulsmt+RWchD*0{h>-_cYtW5s)Z68Pu>t7MZ*6T69{xf;;U55p~*B9M)LE@5O
z4LRfW#v?XKCXbjFp2h1ai_c3we&(d$_qyF#uOuJ8X>9O&?c4JD)=S!#9M*N8&>ydT
zTVDINyq0mRlkrS4CNe&CGCmKWGx>d6UavKOw~~81_Xz#*I@363^82zgP8eL0-?z;l
z>h%7f=N?tkdEi^2|LrcVF8Q_nB|&HM`&>G-?H(obzS=2_c_#mJC(TLRuy@0~$m{-D
zqmzHX;P}utub&%#X>D;ojrTf3J(==6li#=Hwa-<reGYi-bHHmEhdNn<;kl#_b+Tr|
zcxLkZ7+LRivJZs#On#rkUi)0~nq1VqvO)fSmt3V^)=^5<RCpGz@A#rs-McM^1%Gq&
zwYzn$d*!<*#4rDGtGcq&`Uma(vi56b9|(T0Wz18u4+Ov0eysdj%jB1SmPnuL7zD4S
z4<*vK;P=|M<+aRpO7@@7AFutM<F#+gYrj{>TCS5lHvBgSnf$A}uKix^_x4PFzxR4A
z&%VNac=!pUQpaD`uztPHw0`}X^4jOH*O~UHO#Xl8J|O#8o$O;_PW?K~<ZoC=>3bjR
zsG)55;E(#NyDm;$xv)CKc<sl{YrhY#G3)q}Cx(pv!~X33ejWKfXY%`f+vj{Hzdm1$
zd+wELzb?G?dx+QFU%5Z^-tdMy!|Lix`R30Wul?TWwO?Oe`?6m9v!glM=e*ZCrgaU>
z|EKTitJFT1y!N@&9Gz(lGo3-1{F&BfCjYs2El9n+L1lP$uM5BXJhkl0k-_iv>gM6O
z-Hxq0{DGTNjOu>3mDZhc<3EDV<p1=U8OcT8PY&&Rz1s(0Ca#PczEAL4?)G(Z&kuDr
zNBjNXYrh7)Ufs3udwe>FYFs}3sYwJGkUz)de`6fvzh8Fm7ykUp<oEYLul;?@>*u=-
zsGGa>R$=`P*tDQ-_;(H8S!VKo`pM+FpNh};!=8}I@7KQ9*PPL^w%eNx@33A!H|VD1
zfyrY-f4ug4i`Txa*U96GQ`<f=HPqvEn8j7xJ$y{Y?-Me8|KPr7kaK*s-n;!B*lWM<
zdF}70zMq-=Qg(&!Aer7T{9VZBjMx6I;<dk1HS2!pzK8L5Dk+=(e#ZMVy|ZNU`?CJL
z$mG}kPWC;1R_{ABKMr2|`<vJPUCh7BWb$YFo*|Rp*V&x+Cf_%&Gv!ZnzOVB!J|FzO
zD3jmkq0CqMy(5!9)B9Q`zrW}BeJ_*W?<ZdS`<T~$U-H_Q{aycg4`IRmdEa2)S=l&b
zWo0^ZSL{!}V>7lTq4tLQ|I~kugUbQ=w`MZDyZOD#Ykwc}I#WFzmv3HobG(1Jn|bZ;
zpI-YIuYHWynfC2We!o|H?cbxl{(Y~Oe~ZW6GksaFoAaLgd(59}Q};cWlYfrM|L&M%
zWo3F7%jEa##cRKQz4kF)`xvh?eIJ#{@9%YfuUL_P-gQ%=elJanXY5)N&8n)3zj*76
z=*wN_*KK?HsnJi>W8(QsPmeac?%;S*=^0VM-UGttm(DMVAAkRb=-&R1z_D`lOs7%x
z*l>Blneks1-W#7V`k}zst=s)G*s!!4)2_4^)1I^+)4sGDYrC<w8*95U?QXoo#E3Ip
zI9869j4P_ch9{r#k*uYfk`uc=Bk%1sCD{0};W71>gm{?Ghg8l8_D(}ij$U3mH${K&
zf3xAV7+d-sX}<$w>vIKW94asCTE}xMM;9z#7{&$8K7VX9zUYCNa)})eufKZA&B2y&
z3HIRH@zGt+UmriVXkt{p*Y$DF;!~pEzM3CDkvJ=Am7E*jRX96}2hWbT_<l}w&%tNL
z6Ar&J+UAs+_@IH;L_>Z)CT@H8b<siV9TYFESP(6Fv3ESC%L8Hluo+kScgp=chyE!?
zZ*)I6^iMhJa`45$R*qg;dPA^{$JE~w@q9xn7etKnPP0D^_UVN^iHl(7Mg5V+N5u2_
zm@ace+|r5}u=KIPUQ#<S*v5QL{V$Fk68MDCSBHAlj<Bh3hr5@TP>*u7PVN@LR*vSK
zpOfTsSmrt8h0Jf5Pi*FwJlFXTpUZrQ`Iq^MnJ<~Az~n9SMjpd5U$M?ttn(G?e8oCn
zvCdbl^A+oS#X4WH&R5KQ$vlPpmw5}!^S!jm6JcDGqa|mSg>?l>KFeJq<aM3qbrM_h
zJBdws#^29}jW6uy&*q8eV!U9=ZQJ@dIEJ0y?2xw>M|-cd+cJWu-@bYH_a3qNcOS7S
z-!FSjK936~x5b~fpT9K3#W0`WbKlKj9v@opTKM->v5Cj#^Q{MU4{=vMwnwN3o6oW3
z^QdUdcj5WRf8RQ$eQX$;^3VQMf*lz9kw<3-TRG}`Ko{ZyQ*QGM6Tw!F&z$pgh=(bE
z;fx=H4P!^cW~Znh#vZ<VZund|n)BYep+1=U+mC1;Y~vlaJ1V06nG=TdToE>mO?~|@
z8<M1c82i$N`-b+6^?74^ULB8MQ*P+>#U*gj&ew+W*wmwTbi*g_V@Lfv+(ulmVQk{Y
z&FvJp{{EU!4>t9w9YsezQb&21a`QU>5NzeR&EZS&2M+Dd-iUFCiyAo6`HpnHgH3&!
z577nZUli(tssGCnPXt>z)^QC?{fsO1+xRYi>-iGuyZYq2>34(;W8;6LV6!m((Tugj
zxMTCV**dS0&U3`PQcgMSFSN(GLHq2#*sODGnEK`|of*o(*e~yMZLneN#osNVd|>Q@
z3wH>gFFU4VU~K%SpWKal17mm0DGs*rjiZv`c{aK`Cp-r>aoF@H=hb^c{=mV0v@rBH
zr-7qcdu<r%gDKbbyRCz*9N)2hO^AmnpK5bUuwm>evs)1#-}^+vI>DBDf-U|?^DiR*
zs9*Cl*p!>S{*chmtxh?beg_-I=5y97wyxWlb&9PVZU1VE&|g^m(V+Xc3pR|+en3BT
zUx?TTu#MlIcvT5@i$Nnwh{uMpY2VJXZ#Hab*X*5!%#S24hAF@3!wI3Ds9RWn!KNOw
z?VQ$piR^v_6L;5~jYGd-?2Ymp_9^2R-q<9x^ZAVBp?}!KVblI;k56U2M>$j1O5n$a
zv3ZUTr?jnwKU-@){$Rt{l<PkA>`*`F2j#F~v#U#AsUr@?e`9J{uwm@4cV8TA82hk)
zbPUgPWVeR>5F0=H1NG=W5wR~|+y0>YUZneA#J<Pp%CYV{fyE!Q??}CYv31`FjLp8m
z=gQ&yr#{v%{n2%szDL<Q)_I6^USj5fdUQTw&9}g`qxqI*-B)7v6+YK}C)m`Zc@|rq
zX&wffe$9G(d>AJfd)@Qr1RJKj&QEOTzRq8;iSN<tiV}F)2XP6{iw$Fk&yQ`Gmmb2{
zvmV<j%ma*_sM##=f|uLU|6s$|e6IUR;9$#s!sqNO!m;K-U~KY0;$qE<z-_x89sRnv
zCSLRDk<pp^trdUt`OxUyr8DEBmK_-#HgmH$o_T1r^?)7Y-4+dvek?AG>rO6-o-I2!
z{`HLhQP#J8;(q;lM{PO{iiZ~#MDZDi#<z{_6g}SY!uY+}J4TzoQWj4f(<U17@Wt_o
z_qB~adu?2NcUH@&bH%aoj#=Bp^<!>{2mjbHeyruW@j3;&#GmIaio0FDOZ?5ObK|jB
z>=}2Sa!Xv=HxcKyJ2%d~zF++69p}W;FFhnK+3}{h_esOz!NbmqH~Pz{c!Mowa<32f
z#G$8G#9OR&T71y1Q{umsPUoH<?u|{~d*t39?ve7|wZiuwdtc(-NS+Q`K0M^7y}wL;
z`0!}WPwMM#dvt0v<F6I*c{`sTy*y|{eD+gkMqB>YJMO&GSy6StS#@{Mn-yIcb&2=8
za#r-tz<cWwXPp<#U9eHS&DrNgOHNx__hXxpQNh>m*U9_GYTaj<N8Nv7-G743Je$qA
zMVy{rG3OPwa&&FWaL<XB-2H9Xf3V3PY>A876~En(zh7sC{KMw+Wn%OB2aA@6e1oxH
zx@CiqzcBWwciIFS#(tzIJJ>LGs|Q~S<zein$2QcboIcle-wyAk5@#H7-=&=1YlBVy
zxc|a>?~U{x8JKvzM+U~$b2Tuwo~wbe_5K^#{a5eDX2;wkBrdSD8*_ia*84=7^?Z-@
zypK8Gi8JQ>!sfi99zD;3E&fRFff4sWo=@+I!KR$vJ7T+c=)EM^l;`|`?Yz<RDA@Qp
zS7AF(^_)%HoWJx-&!529dj6zY@6)l}r}e%aY^guy{tMfESMS5YrhUD?MBHb1PQBll
z9qWBAFzxGoF3tL06x(}|zBdJ%cJ)3Q>wPrX)T8&+SkLX)&TT!{gH8XqFTr|03O4<;
z`%>qDy~6z6yl`50PHfs$JF0$RVR$Z>dJ3jL6>Q~L*F#|X#d@GT{Qt{-ZSVI@_iOvU
z%J#>m`=;%uw!hkbYu_)~K5YB->4nFI?;V=%*S7E4K5ySc*?w=|7cl<1@5Q?B1)KT6
zmVU<U<Fc>E?Ca9sn0;RQ8ME(8KV!}T>1WKjApH#ek$%RU7t+tL&q+TczE_Zb#(J*A
zoGa4LnDasAJ=SwN=A7nx74}8@K1KQ)?o%*+Imcr?$74OmV?D=XJ;!4`$74OmV?D=X
zJ;!4`$74OmV?D=XJ;!4`$0I$*BR$6>J;x(G$0I$*BR$6>J;x(G$0I$*BhGRAo=);2
z(sMlG9JlXJnGZd00%PlW6Bt|XQ-QJdJ{1@{tLuUXnLikNVcUzs{;eFTKQQYPzr+Q`
z*7Y2*p7HB?H#^q*VqogG`=Z_-V_o-w`J8o6e{B78@58V6yjbsn!Cu{bv+v_9-{ig$
z^2+ke^3U>TRryBV@xJu0esB7JH81UZ<ED9O-y_@i`kB7ZXMXh_6ze@G*vzxp@9gzU
z$U_+aw<q=qd7&JsKQMWSU*e2oeZPqH{UX@3tM4DN-tS_)-vyh`vDeI6@$YR}OZ<G+
zLV<3nK=Zp;))Vl1TGmm<ZY9`Iuz_HGW$f01jRkE48!2ONq8i>*HN2T>xUFDI0l$xB
zb7kzU1orz_`28%~sNGJugP^@&J7w&Ss^M$}dV2xCmt{x64$9b_1YHGP1pK}h7`vOG
zhhS$xcV+Bd1UUjUei%DfHJqm!&Q}c=sD=ww!$qoLexD0<!o5_(#R`7M3!lUI_zwl;
z%j@*-ec?YM#O4n}0Xk9*_g0|yP!0DH>?PP!&{r9IZv~p)2LsUis)qZihW8WfFBl-`
zuZ%rVfj&Ti9wZnd7%VtY8GEQ;xL}yzAZ6?k3N*hj1{*#^aJb+w0lz;6#y-N?M~cRe
zuT(Hv!0(G0sf=Bw`Y83o#PB;~0D7zfU9LbMtw0~6K#x<P$1Bhk3iJd8dZGe-te{#@
zC8$)!o+OweI8HEG8T)v_iGrzu6O^&1sfMR3&?gB_5u7ZjQN})1Fhg*<;523IGX!S}
z{vw#EjD411mf#%0*~-}GD$wT%W(zJ5oUe?1q2Ln1#e$2Ju`d<O6<j8mql`UIaHZf1
z!R5->R|&2WTrHTdjD4-(dcgw0b;{Ta1vd$96x^VUeY4<J!6Lye%GkFF?iAc1xLq0h
zF2Oy5zY6YF#=ckZfZ%??eahGm3hD$YL9H@&EO=P(kf2@}`w_uog1-qKRmOf?@RZ<5
z!4t~ZPYa$CJS%uc8T)y`OM({#FDPTbEcm<NRlzID*oy_P3zi68Q^tNn@V4MB!JEq1
z?+D%(yeD{98T$jl$AXUpA1Y&iB3LT;Oz^2P_U8)p7lLJiuLNHzWB)_&t>7EM*UH%6
zDbULWKMH;je6NiCli*juFM^+yv40b+u?GK_mGw^{7<)}YOF;|4TFTgK3)T~?D_BPv
zyOm%=!3Ki$m9bk3HWsuIY^036iJ+}uGr^|H*qaNs5^O2hLK%B&K|8^=f^C$sw-a;}
zbP%*x#?BV(DA+-;y)yPrf-Zv2f=<fVT@~nVf*yjM1>KdgcM;?Xas@fc*!hAYL7|{P
z8M~)oS3$9$mooNlf}|iJ*j*XBM6idTw;)o+?jzVsu&1D}GWOnreu8}k`zT}YC)i&w
zK+s<qd!Pb+fMBrTK*1no>>+|-f`bG@m9d8l4iOwI7@>@PsNe{};ex}Iv5ypt5{wj-
zDr1jUpvwef1!Dw9DPxxl#tDuQ9IcE!UNBKGK~SNLeXO8bP$j5T#-1dYA~;SkSsD9y
z!HI&Yf)kXnrwM8VCkdu2W1lQIO>nB<6lLtw1v3R_2xcf_|3z@N;4HzJ%Gl=!&J&y~
zn5B$;z5;!L;3C0=g4xR07c0=0DA1QG&~sG7mnqP573g^i^yRAID-`G}Rl`>)(DN1O
zt5w6-DA3ochObkg7pR7>SD+Uv&^M@tZ&aXfQlM{E4d0?bFH)dyRSn;!K;N!F-=P}5
zQ-QuqfxcUT{;S{~Wo-1lYTu_CANqc^(GRGNeo$?6t=cKo_|SD~$Exw6>(z#_9}>_G
z^*^jYlQY<sJM@YEJ|aNFkE(|MrW$@sHT<}0_zA(&f~N#eDq}w*cwX?F;8|tt7X&X0
zUJ|^hjQxsWvEc85SCz3}6TBgKU9dzM`%S?+g0}^4DPzAY_(1T!;5}vR4+WnHJ{EkW
zjQy$LbHP%<XUf=L2)<Ms{SU!1!B@)IUkknyd@J}y8GE_lN5Kz*@0GEC68tLoMewsS
z_HPRGKLu;9Dd((!mr)pdEy3D?mVy?_*y{*d3Dy&=tBk$AptWE_!3N6M8woZMY%FM_
zjJ>H~b3t3dX3E%GD9~F9wh?SC*h(3DTS0rlc7k@w*c}Ah3$g_rm9cjabQ0_&*ijj~
zv!I)xtDuWAc6Y%pf*yjMm9cXK`GPz_t}=Fkpr@cnP^gUEOR$?@S3$8d_U?ib0bdLx
zl(8d0AHg1i-pbg01$ztj66~pry^ml&K|jI1%GmuC=m84!{tEO!)$jod^dJTLKm~fR
zYIukOJybP(kODnSfgY|J9-%-VtQtN<fj(3<e3$}#xB`8IYWPS6x>SK4sTv-oK#x|S
z%LHQuV+2PjW0$Ljk5-_MQ4Nn%pvS9*D^$Z1)W$zifj(9>T&X}akJvEtYUQg`!_^A(
zBn5i1;CR6l!EwsiCkUnqP83X4#-6S~pQIYDQJ_y&4WFVwpQ=Egrha^<tA=MN&}XQI
zXDZNt5m1gg&Qze!QVpN28a_urnOOqrfw9k34WFkPK3_F_fdV~SHGH9J_#)Nt#R~K#
zs^Lo&=sBw4%T&X273g`Y;mZ~1D^$Z*D$rM{hUcq>uU4S1Q4L?K8oo|}UZ5JjUNyW>
zaFgIh!41mTHw$hREE3$JjD4HnPQe|5+m*5J65J#BtKe>B?0W?d2<{i$r;PoepiYny
z)GA}gf`<hU3F?)x9}zqz_?zHSW$ecVPYIqBJfV#Jv;zH%YWP_N`Z?9`^9u9}3iOK#
z^h*l#%L3x~{1w&ks|xhr1(YFnu>$>?0=-0meqDinLxFx%fqqMYep`WlM?ib;3g`oj
z{hn(0ebw*>s^Je6=#NyxAFGBxQ4N2pK!2thUaCNUt{VPAHT<Ol{grBXnF9R})$rE}
z^f#*EZ&kzJDbUMR!{4ihe^8)*R1N>68va><{zWzXt7_Qh3;mng@IO_<%<r0O$^A*d
xFJ*_Z*AlEPXenr+jJ=Mam0&%=y2{w=3t9^{6l|c3y^&xO!N!6%%GjF<{s*m8JJ<jK

literal 0
HcmV?d00001

diff --git a/src/client/world/models.ts b/src/client/world/models.ts
index 51568aaea..9d54f3b10 100644
--- a/src/client/world/models.ts
+++ b/src/client/world/models.ts
@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { GLTFLoader, type GLTF } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { clone } from 'three/examples/jsm/utils/SkeletonUtils.js';
+import chairDeskUrl from '../models/chair-desk.glb?url';
 import deskPropsUrl from '../models/desk_props.glb?url';
 import dogCorgiUrl from '../models/dog-corgi.glb?url';
 import dogDachshundUrl from '../models/dog-dachshund.glb?url';
@@ -24,6 +25,7 @@ const MODELS = {
   'dog-pug': { url: dogPugUrl, preload: false },
   'dog-shiba': { url: dogShibaUrl, preload: false },
   'dog-pomeranian': { url: dogPomeranianUrl, preload: false },
+  'chair-desk': { url: chairDeskUrl, preload: true },
   desk_props: { url: deskPropsUrl, preload: true },
   kitchen: { url: kitchenUrl, preload: true },
   lounge: { url: loungeUrl, preload: true },
diff --git a/src/client/world/office/materials.ts b/src/client/world/office/materials.ts
index 873418c1f..d6171d935 100644
--- a/src/client/world/office/materials.ts
+++ b/src/client/world/office/materials.ts
@@ -11,18 +11,18 @@ export const PALETTE = {
   floorAlt: FLOOR_PALETTES[0].floorAlt,
   wall: FLOOR_PALETTES[0].wall,
   wallTrim: FLOOR_PALETTES[0].trim,
-  desk: '#f7f3ea',
+  desk: '#f3ece0',
   deskLeg: '#3d405b',
   wood: '#c98b5a',
   cork: '#d8a86a',
-  chairs: ['#ff8a5b', '#5bc0eb', '#9bc53d', '#b388eb', '#ffb400', '#f7aef8'],
-  rugs: ['#bde0fe', '#ffd6a5', '#caffbf', '#ffc6ff'],
+  chairs: ['#f2c4ae', '#bcd8e6', '#cfdcb5', '#d9c8ee', '#f3dca1', '#f1cde0'],
+  rugs: ['#d8e6ef', '#f4e1c8', '#dfead3', '#eadcee'],
   plant: '#5fb760',
   plantDark: '#3f8f45',
-  pot: '#e76f51',
+  pot: '#d99a82',
   ink: '#2b2d42',
   /** The building's outside paint. */
-  exterior: '#e07a5f',
+  exterior: '#e6b8a2',
 };
 
 /** Window glass: faintly blue and see-through. */
diff --git a/src/client/world/office/seats.ts b/src/client/world/office/seats.ts
index 64e0ecb30..e4db74121 100644
--- a/src/client/world/office/seats.ts
+++ b/src/client/world/office/seats.ts
@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { BEANBAGS, DESKS, DESK_SIZE, FLOOR, KIOSK, SEATING_BY_ID, STATIONS, STATION_AGENT, deskSeat, type DeskDef, type StationKind } from '../../../shared/layout';
 import { deskPoint } from '../../../shared/nav';
+import { model, paintModel, palette } from '../models';
 import { mesh, roundedBox, textPlane, toon } from '../toon';
 import type { Collider, DeskView, Interactable } from '../types';
 import type { Fixture } from './fixture';
@@ -35,6 +36,23 @@ export function chair(color: string): THREE.Group {
   return g;
 }
 
+/**
+ * A scanned-style office chair (Kenney's Furniture Kit, CC0) in `color`, with the old hand-built one as the
+ * fallback if its model didn't load. Part of the pastel realism test: delete this and use chair() to undo.
+ */
+export function officeChair(color: string): THREE.Group {
+  const m = model('chair-desk');
+  if (!m) return chair(color);
+  const g = new THREE.Group();
+  paintModel(m.scene, palette({ carpet: color, metalMedium: '#cfc8bd' }));
+  m.scene.scale.setScalar(OFFICE_CHAIR_SCALE);
+  m.scene.rotation.y = OFFICE_CHAIR_TURN;
+  g.add(m.scene);
+  return g;
+}
+const OFFICE_CHAIR_SCALE = 1.1;
+const OFFICE_CHAIR_TURN = Math.PI;
+
 /**
  * The `index`th desk (of DESKS) at `def`: its top, legs and modesty panel (in `trimMat`), its knick-knack,
  * its chair, and the anchors its worker and laptop go in.
@@ -89,7 +107,7 @@ export function buildDesk(def: DeskDef, index: number, trimMat: THREE.Material):
   stage.position.set(0.72, height - 0.07, 0.18);
   group.add(stage);
 
-  const ch = chair(PALETTE.chairs[index % PALETTE.chairs.length]);
+  const ch = officeChair(PALETTE.chairs[index % PALETTE.chairs.length]);
   ch.position.set(0, 0, 0.9);
   group.add(ch);
 
diff --git a/src/shared/floors.ts b/src/shared/floors.ts
index 3a7792aa1..f357bfc63 100644
--- a/src/shared/floors.ts
+++ b/src/shared/floors.ts
@@ -19,7 +19,7 @@ export interface FloorPalette {
 
 /** The first is the office as it always looked; every new floor takes the next one nobody has. */
 export const FLOOR_PALETTES: FloorPalette[] = [
-  { name: 'Maple', wall: '#fff6ea', trim: '#e8a87c', floor: '#f2d7b0', floorAlt: '#e9c89a', seam: '#d9b88c' },
+  { name: 'Maple', wall: '#f7efe3', trim: '#dcb596', floor: '#e6d2b6', floorAlt: '#dcc7a8', seam: '#cdb695' },
   { name: 'Mint', wall: '#e3f6ec', trim: '#40a878', floor: '#cfe6d9', floorAlt: '#bcdcc9', seam: '#9fc6b0' },
   { name: 'Sky', wall: '#e7f0ff', trim: '#4f7fe0', floor: '#d6dde9', floorAlt: '#c5cedd', seam: '#aab5c8' },
   { name: 'Lavender', wall: '#f2eaff', trim: '#9470e0', floor: '#e1d7ef', floorAlt: '#d2c4e7', seam: '#b8a6d6' },

From c54fca2ba88615159a79621df05b501eb243edd2 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 14:35:29 +0400
Subject: [PATCH 03/35] Refine office characters and furnishings with fine
 voxel geometry

---
 src/client/features/workers/laptop.ts      | 11 +--
 src/client/world/character/person-hair.ts  | 15 ++--
 src/client/world/character/person.ts       | 30 ++++----
 src/client/world/character/worker-model.ts | 48 +++++++++++++
 src/client/world/character/worker.ts       | 53 ++------------
 src/client/world/office/props.ts           | 62 +++--------------
 src/client/world/office/seats.ts           | 22 ++----
 src/client/world/office/voxel-furniture.ts | 61 +++++++++++++++++
 src/client/world/office/voxel-props.ts     | 80 ++++++++++++++++++++++
 src/client/world/voxel.ts                  | 65 ++++++++++++++++++
 tests/size.test.ts                         |  1 -
 tests/voxel.test.ts                        | 41 +++++++++++
 12 files changed, 347 insertions(+), 142 deletions(-)
 create mode 100644 src/client/world/character/worker-model.ts
 create mode 100644 src/client/world/office/voxel-furniture.ts
 create mode 100644 src/client/world/office/voxel-props.ts
 create mode 100644 src/client/world/voxel.ts
 create mode 100644 tests/voxel.test.ts

diff --git a/src/client/features/workers/laptop.ts b/src/client/features/workers/laptop.ts
index 2b713d590..669eb499f 100644
--- a/src/client/features/workers/laptop.ts
+++ b/src/client/features/workers/laptop.ts
@@ -1,3 +1,5 @@
+import { laptopKeys } from '../../world/office/voxel-furniture';
+import { voxelBox, voxelMaterial } from '../../world/voxel';
 import * as THREE from 'three';
 import { FLAG_BOLD, FLAG_DIM, FLAG_INVERSE, RGB_FLAG, type Run } from '../../../shared/protocol';
 import { mesh, roundedBox, toon } from '../../world/toon';
@@ -176,13 +178,14 @@ export class Laptop {
       // A ribbon bookmark hanging out of the pages.
       this.root.add(mesh(new THREE.BoxGeometry(0.03, 0.004, 0.16), toon('#9b1c1c'), 0.2, 0.06, 0.28, false));
     } else {
-      const shell = toon('#c9ced6');
+      const shell = voxelMaterial(toon('#f0e8db'));
       const dark = toon('#2b2d42');
-      // Base with keyboard
-      this.root.add(mesh(roundedBox(0.78, 0.035, 0.52, 0.04), shell, 0, 0.018, 0.02));
+      // Base with fine keycaps
+      this.root.add(laptopKeys());
+      this.root.add(mesh(voxelBox(0.78, 0.035, 0.52, 0.025), shell, 0, 0.018, 0.02));
       this.root.add(mesh(new THREE.BoxGeometry(0.66, 0.006, 0.24), dark, 0, 0.037, 0.0, false));
       this.root.add(mesh(new THREE.BoxGeometry(0.2, 0.004, 0.11), toon('#aab1bb'), 0, 0.037, 0.19, false));
-      const lidShell = mesh(roundedBox(0.78, 0.025, 0.5, 0.04), shell, 0, 0.25, 0);
+      const lidShell = mesh(voxelBox(0.78, 0.025, 0.5, 0.025), shell, 0, 0.25, 0);
       lidShell.rotation.x = Math.PI / 2;
       this.lid.add(lidShell);
       // Sticker on the back of the lid
diff --git a/src/client/world/character/person-hair.ts b/src/client/world/character/person-hair.ts
index c44e62ea9..7120749a9 100644
--- a/src/client/world/character/person-hair.ts
+++ b/src/client/world/character/person-hair.ts
@@ -1,3 +1,4 @@
+import { voxelBall, voxelCapsule, voxelGeometry } from '../voxel';
 import * as THREE from 'three';
 import { HAIR_STYLES } from '../../../shared/avatar';
 import { mesh } from '../toon';
@@ -12,7 +13,7 @@ export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, styl
     hair.add(part);
     return part;
   };
-  const cap = () => add(new THREE.SphereGeometry(0.355, 20, 12, 0, Math.PI * 2, 0, Math.PI * 0.45), 0, 0.02, -0.02, -0.25);
+  const cap = () => add(voxelGeometry('cap', 0.71, 0.71, 0.71), 0, 0.02, -0.02, -0.25);
   switch (HAIR_STYLES[style]) {
     case 'Short':
       cap();
@@ -21,13 +22,13 @@ export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, styl
       cap();
       // A curtain down the back, open at the front so the face shows.
       // Around the head from ear to ear the back way, leaving the face open (phi = π/2 is the face).
-      const back = add(new THREE.SphereGeometry(0.37, 20, 14, Math.PI * 0.93, Math.PI * 1.14, Math.PI * 0.3, Math.PI * 0.5), 0, -0.06, -0.03);
+      const back = add(voxelGeometry('curtain', 0.74, 0.5, 0.74), 0, -0.06, -0.03);
       back.scale.set(1.02, 1.35, 1);
       break;
     }
     case 'Bun':
       cap();
-      add(new THREE.SphereGeometry(0.14, 14, 12), 0, 0.3, -0.2);
+      add(voxelBall(0.14), 0, 0.3, -0.2);
       break;
     case 'Spiky':
       cap();
@@ -38,7 +39,7 @@ export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, styl
       ] as const) {
         for (let i = 0; i < n; i++) {
           const a = -0.85 + (i / (n - 1)) * 1.7;
-          const spike = add(new THREE.ConeGeometry(0.1, 0.3, 8), Math.sin(a) * 0.24, 0.33 - Math.abs(a) * 0.08 - row * 0.02, z);
+          const spike = add(voxelGeometry('ellipsoid', 0.15, 0.3, 0.15), Math.sin(a) * 0.24, 0.33 - Math.abs(a) * 0.08 - row * 0.02, z);
           spike.rotation.set(tilt, 0, -a * 0.9);
         }
       }
@@ -53,14 +54,14 @@ export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, styl
         const px = Math.cos(th) * r;
         const pz = Math.sin(th) * r;
         if (y < -0.15 || (pz > 0.35 && y < 0.55)) continue;
-        add(new THREE.SphereGeometry(0.1, 8, 6), px * 0.36, y * 0.36 + 0.04, pz * 0.36 - 0.02);
+        add(voxelBall(0.1), px * 0.36, y * 0.36 + 0.04, pz * 0.36 - 0.02);
       }
       break;
     }
     case 'Ponytail': {
       cap();
-      add(new THREE.SphereGeometry(0.075, 10, 8), 0, 0.12, -0.34);
-      const tail = add(new THREE.CapsuleGeometry(0.085, 0.3, 6, 10), 0, -0.1, -0.42, 0.35);
+      add(voxelBall(0.075), 0, 0.12, -0.34);
+      const tail = add(voxelCapsule(0.085, 0.3), 0, -0.1, -0.42, 0.35);
       tail.scale.set(1, 1, 0.8);
       break;
     }
diff --git a/src/client/world/character/person.ts b/src/client/world/character/person.ts
index 09e8b88d1..e9d90bd01 100644
--- a/src/client/world/character/person.ts
+++ b/src/client/world/character/person.ts
@@ -1,3 +1,4 @@
+import { voxelBall, voxelCapsule, voxelMaterial } from '../voxel';
 import * as THREE from 'three';
 import { HAIR_COLORS, HAIR_STYLES, SKIN_TONES, type Look } from '../../../shared/avatar';
 import { EMOTE_BY_ID, type EmoteId } from '../../../shared/emotes';
@@ -118,39 +119,38 @@ export class Person {
   private gripping = false;
   /** Something they're saying (see say), and for how many more seconds. */
   private speech: { sprite: THREE.Sprite; left: number } | null = null;
-
   constructor(
     private name: string,
     color: string,
     look: Look,
   ) {
     this.look = { ...look };
-    this.shirt = toonUnique(color);
-    const skin = (this.skin = toonUnique(SKIN_TONES[look.skin]));
-    this.hairMat = toonUnique(HAIR_COLORS[look.hair]);
+    this.shirt = voxelMaterial(toonUnique(color));
+    const skin = (this.skin = voxelMaterial(toonUnique(SKIN_TONES[look.skin])));
+    this.hairMat = voxelMaterial(toonUnique(HAIR_COLORS[look.hair]));
     this.hairMat.side = THREE.DoubleSide;
     const pants = toon('#3d405b');
     const ink = toon('#1d1d1d');
 
     this.root.add(this.body);
-    const torso = mesh(new THREE.CapsuleGeometry(0.26, 0.28, 6, 12), this.shirt, 0, 0.72, 0);
+    const torso = mesh(voxelCapsule(0.26, 0.28), this.shirt, 0, 0.72, 0);
     this.body.add(torso);
     // Head
     const head = (this.head = new THREE.Group());
     head.position.y = 1.32;
-    head.add(mesh(new THREE.SphereGeometry(0.34, 20, 16), skin));
+    head.add(mesh(voxelBall(0.34), skin));
     head.add(this.hair);
     this.buildHair();
     for (const sx of [-1, 1]) {
-      head.add(mesh(new THREE.SphereGeometry(0.055, 10, 8), ink, sx * 0.12, 0.02, 0.3, false));
-      head.add(mesh(new THREE.SphereGeometry(0.05, 10, 8), toon('#ff9f9f'), sx * 0.2, -0.08, 0.27, false));
+      head.add(mesh(voxelBall(0.055), ink, sx * 0.12, 0.02, 0.3, false));
+      head.add(mesh(voxelBall(0.05), toon('#ff9f9f'), sx * 0.2, -0.08, 0.27, false));
     }
     const smile = (this.smile = mesh(new THREE.TorusGeometry(0.06, 0.015, 6, 12, Math.PI), ink, 0, -0.08, 0.32, false));
     smile.rotation.z = Math.PI;
     head.add(smile);
     // Talking mouth: a flattened ball pressed into the face, scaled open and shut with the voice.
-    this.mouth = mesh(new THREE.SphereGeometry(1, 16, 12), toon('#7a2635'), 0, -0.1, 0.295, false);
-    const tongue = mesh(new THREE.SphereGeometry(1, 12, 10), toon('#ff8fa3'), 0, -0.5, 0, false);
+    this.mouth = mesh(voxelBall(1), toon('#7a2635'), 0, -0.1, 0.295, false);
+    const tongue = mesh(voxelBall(1), toon('#ff8fa3'), 0, -0.5, 0, false);
     tongue.scale.set(0.6, 0.45, 1.15);
     this.mouth.add(tongue);
     this.mouth.visible = false;
@@ -160,7 +160,7 @@ export class Person {
     const limb = (len: number, r: number, mat: THREE.Material, x: number, y: number) => {
       const pivot = new THREE.Group();
       pivot.position.set(x, y, 0);
-      pivot.add(mesh(new THREE.CapsuleGeometry(r, len, 4, 8), mat, 0, -len / 2 - r / 2, 0));
+      pivot.add(mesh(voxelCapsule(r, len), mat, 0, -len / 2 - r / 2, 0));
       this.body.add(pivot);
       return pivot;
     };
@@ -168,7 +168,7 @@ export class Person {
     this.legR = limb(0.22, 0.1, pants, 0.12, HIPS);
     this.armL = limb(0.24, 0.08, this.shirt, -0.33, 0.9);
     this.armR = limb(0.24, 0.08, this.shirt, 0.33, 0.9);
-    for (const arm of [this.armL, this.armR]) arm.add(mesh(new THREE.SphereGeometry(0.085, 12, 10), skin, 0, -0.38, 0));
+    for (const arm of [this.armL, this.armR]) arm.add(mesh(voxelBall(0.085), skin, 0, -0.38, 0));
     // Forward is +z, so the character's left arm is the one on +x. The handle faces the hand.
     const cup = (this.cup = coffeeMug(1.4));
     cup.position.set(0.02, -0.08, 0.1);
@@ -201,15 +201,15 @@ export class Person {
     this.body.add(this.bookHolder);
     // Along the arm (the fist's -y) the finger points; the thumb sticks out of the front of the fist,
     // which is up once the arm is out in front.
-    this.thumb = mesh(new THREE.CapsuleGeometry(0.035, 0.07, 4, 8).rotateX(Math.PI / 2), skin, 0, -0.38, 0.1, false);
-    this.finger = mesh(new THREE.CapsuleGeometry(0.03, 0.09, 4, 8), skin, 0, -0.5, 0.02, false);
+    this.thumb = mesh(voxelCapsule(0.035, 0.07).rotateX(Math.PI / 2), skin, 0, -0.38, 0.1, false);
+    this.finger = mesh(voxelCapsule(0.03, 0.09), skin, 0, -0.5, 0.02, false);
     for (const m of [this.thumb, this.finger]) {
       m.visible = false;
       this.armL.add(m);
     }
 
     // Little mic icon that pops up while speaking
-    this.mic = mesh(new THREE.SphereGeometry(0.09, 10, 8), toon('#7cf29a', { emissive: '#2a9d4b' }), 0, 2.25, 0, false);
+    this.mic = mesh(voxelBall(0.09), toon('#7cf29a', { emissive: '#2a9d4b' }), 0, 2.25, 0, false);
     this.mic.visible = false;
     this.root.add(this.mic);
 
diff --git a/src/client/world/character/worker-model.ts b/src/client/world/character/worker-model.ts
new file mode 100644
index 000000000..5c2669814
--- /dev/null
+++ b/src/client/world/character/worker-model.ts
@@ -0,0 +1,48 @@
+import * as THREE from 'three';
+import { mesh, toon } from '../toon';
+import { voxelBall, voxelBox, voxelCapsule, voxelMaterial } from '../voxel';
+import { STATUS_BULB } from './worker-badges';
+
+/** A fine voxel office worker on the existing rig: +z is its face and its typing direction. */
+export function workerModel(body: THREE.Group, skin: THREE.MeshToonMaterial, bulb: THREE.MeshToonMaterial) {
+  const face = voxelMaterial(toon('#f3caa4')), ink = voxelMaterial(toon('#293348'));
+  const white = voxelMaterial(toon('#fff9ef')), pants = voxelMaterial(toon('#35475e'));
+  voxelMaterial(skin); voxelMaterial(bulb);
+  body.add(mesh(voxelCapsule(0.24, 0.12), skin, 0, 0.48, 0));
+  body.add(mesh(voxelGeometryHead(), face, 0, 0.76, 0));
+  // Collar, tiny nose and a lanyard badge make the small silhouette readable at a desk.
+  body.add(mesh(voxelBox(0.22, 0.035, 0.055, 0.015), white, 0, 0.6, 0.22));
+  body.add(mesh(voxelBox(0.055, 0.065, 0.04, 0.0125), face, 0, 0.65, 0.245));
+  body.add(mesh(voxelBox(0.11, 0.1, 0.025, 0.0125), white, 0.11, 0.43, 0.23));
+  body.add(mesh(voxelBox(0.06, 0.015, 0.03, 0.0125), ink, 0.11, 0.445, 0.245));
+  const eyes: THREE.Mesh[] = [], pupils: THREE.Mesh[] = [], feet: THREE.Mesh[] = [], headset: THREE.Object3D[] = [];
+  for (const sx of [-1, 1]) {
+    const eye = mesh(voxelBox(0.13, 0.115, 0.035, 0.0125), white, sx * 0.11, 0.7, 0.23, false);
+    const pupil = mesh(voxelBox(0.05, 0.07, 0.025, 0.0125), ink, sx * 0.11, 0.7, 0.26, false);
+    body.add(eye, pupil); eyes.push(eye, pupil); pupils.push(pupil);
+    const foot = mesh(voxelBox(0.135, 0.15, 0.23), pants, sx * 0.12, 0.2, 0.05);
+    body.add(foot); feet.push(foot);
+    const cup = mesh(voxelBox(0.075, 0.14, 0.13), ink, sx * 0.255, 0.74, 0, false);
+    body.add(cup); headset.push(cup);
+  }
+  for (let i = -5; i <= 5; i++) {
+    const x = i * 0.05, y = 0.73 + Math.sqrt(Math.max(0, 0.27 ** 2 - x ** 2));
+    const band = mesh(voxelBox(0.055, 0.035, 0.05, 0.015), ink, x, y, 0, false);
+    body.add(band); headset.push(band);
+  }
+  const mic = mesh(voxelBox(0.14, 0.025, 0.025, 0.0125), ink, -0.2, 0.63, 0.19, false);
+  body.add(mic); headset.push(mic);
+  body.add(mesh(voxelBox(0.025, 0.22, 0.025, 0.0125), ink, 0, 1.07, 0, false));
+  bulb.emissive = new THREE.Color(STATUS_BULB.starting).multiplyScalar(0.6);
+  const bulbMesh = mesh(voxelBall(0.075, 0.015), bulb, 0, 1.2, 0, false);
+  body.add(bulbMesh);
+  const arm = (x: number) => {
+    const pivot = new THREE.Group(); pivot.position.set(x, 0.55, 0.05);
+    pivot.add(mesh(voxelCapsule(0.055, 0.12, 0.02), skin, 0, -0.09, 0));
+    pivot.add(mesh(voxelBox(0.105, 0.08, 0.105, 0.015), face, 0, -0.205, 0));
+    body.add(pivot); return pivot;
+  };
+  return { eyes, pupils, feet, headset, bulbMesh, armL: arm(-0.3), armR: arm(0.3) };
+}
+
+function voxelGeometryHead() { return voxelCapsule(0.225, 0.025, 0.025); }
diff --git a/src/client/world/character/worker.ts b/src/client/world/character/worker.ts
index 3a748c715..0a6c5d834 100644
--- a/src/client/world/character/worker.ts
+++ b/src/client/world/character/worker.ts
@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import type { Theme, WorkerAction, WorkerStatus, WorkerTask } from '../../../shared/protocol';
 import { isAsleep, type WorkerPr } from '../../../shared/status';
 import { beard, grime, peasantGarb, type Beard, type PeasantGarb } from '../costumes';
-import { disposeSprite, mesh, textSprite, toon, toonUnique } from '../toon';
+import { disposeSprite, textSprite, toonUnique } from '../toon';
 import type { WorkerRig } from './rig';
 import { ease, popIn } from './curves';
 import { undress } from './props';
@@ -13,6 +13,7 @@ import { DANCE, groove, type Dancing, type Stage } from './worker-dance';
 import { DEAD, STARVED, bones, crossedEyes, slump } from './worker-jail';
 import { packUp, waddle, type Leaving } from './worker-leave';
 import { dressUp, growBeard, wearGarb } from './worker-dress';
+import { workerModel } from './worker-model';
 
 /** The little Claude worker that sits at a desk. Forward is +z. */
 export class Worker {
@@ -103,54 +104,12 @@ export class Worker {
     private color: string,
   ) {
     const skin = (this.skin = toonUnique(color));
-    const white = toon('#ffffff');
-    const ink = toon('#1d1d1d');
-
     this.root.add(this.body);
-    // Bean-shaped body
-    const bean = mesh(new THREE.CapsuleGeometry(0.28, 0.3, 8, 16), skin, 0, 0.55, 0);
-    this.body.add(bean);
-    // Big cartoon eyes
-    for (const sx of [-1, 1]) {
-      const eye = mesh(new THREE.SphereGeometry(0.09, 12, 10), white, sx * 0.11, 0.7, 0.23, false);
-      eye.scale.z = 0.6;
-      this.body.add(eye);
-      const pupil = mesh(new THREE.SphereGeometry(0.045, 10, 8), ink, sx * 0.11, 0.7, 0.29, false);
-      this.body.add(pupil);
-      this.eyes.push(eye, pupil);
-      this.pupils.push(pupil);
-    }
-    // Headset: band + mic
-    const band = mesh(new THREE.TorusGeometry(0.29, 0.025, 6, 20, Math.PI), toon('#2b2d42'), 0, 0.72, 0, false);
-    band.rotation.y = Math.PI / 2;
-    this.body.add(band);
-    this.headset.push(band);
-    for (const sx of [-1, 1]) {
-      const cup = mesh(new THREE.SphereGeometry(0.07, 10, 8), toon('#2b2d42'), sx * 0.29, 0.72, 0, false);
-      this.body.add(cup);
-      this.headset.push(cup);
-    }
-    // Antenna with status bulb
-    this.body.add(mesh(new THREE.CylinderGeometry(0.015, 0.015, 0.22, 6), toon('#2b2d42'), 0, 1.07, 0, false));
     this.bulb = toonUnique(STATUS_BULB.starting);
-    this.bulb.emissive = new THREE.Color(STATUS_BULB.starting).multiplyScalar(0.6);
-    this.bulbMesh = mesh(new THREE.SphereGeometry(0.075, 12, 10), this.bulb, 0, 1.2, 0, false);
-    this.body.add(this.bulbMesh);
-
-    const arm = (x: number) => {
-      const pivot = new THREE.Group();
-      pivot.position.set(x, 0.55, 0.05);
-      pivot.add(mesh(new THREE.CapsuleGeometry(0.055, 0.16, 4, 8), skin, 0, -0.12, 0));
-      this.body.add(pivot);
-      return pivot;
-    };
-    this.armL = arm(-0.3);
-    this.armR = arm(0.3);
-    for (const sx of [-1, 1]) {
-      const foot = mesh(new THREE.CapsuleGeometry(0.06, 0.1, 4, 8), skin, sx * 0.12, 0.2, 0.05);
-      this.body.add(foot);
-      this.feet.push(foot);
-    }
+    const model = workerModel(this.body, skin, this.bulb);
+    this.armL = model.armL; this.armR = model.armR;
+    this.eyes = model.eyes; this.pupils = model.pupils; this.feet = model.feet;
+    this.headset = model.headset; this.bulbMesh = model.bulbMesh;
 
     // What it acts out with: papers in its hands, and a globe beside its laptop.
     this.papers = papers();
diff --git a/src/client/world/office/props.ts b/src/client/world/office/props.ts
index 6b7c3c3d6..86f33e2f1 100644
--- a/src/client/world/office/props.ts
+++ b/src/client/world/office/props.ts
@@ -1,32 +1,17 @@
+import { finePlant, fineMug, fineBooks, fineSofa } from './voxel-props';
 import * as THREE from 'three';
 import { mesh, roundedBox, toon } from '../toon';
 import { palette, piece } from '../models';
 import { PALETTE } from './materials';
 
-// The office's furnishings: the potted plants, the desks' knick-knacks and the lounge's furniture (all
-// modelled in Blender), the pendant lamps and the framed boards on the walls. The lab (lab/props.ts), the
-// holidays and the castle use some of them too.
-
-// The potted plants are modelled in Blender (blender/scripts/build_plants.py): each plant is a painted
-// copy of one species in plants.glb (see piece()). A species is its pot, named after it, with everything that
-// grows out of the pot hung under it as `<species>_leaves` (see plantLeaves()). The colors are the old
-// code-built plants' pot and greens, the Christmas tree's trunk brown for the soil, the street trees'
-// trunk brown for the ficus's, and the kitchen cupboards' blue for the snake plant's glazed pot.
+// Fine procedural furnishings share the existing placement and holiday hooks.
 export type PlantSpecies = 'monstera' | 'snake_plant' | 'ficus' | 'succulent';
 /** The species that stand on the floor, which a row of plants takes turns with (see floorPlant()). */
 export const FLOOR_PLANTS = ['monstera', 'snake_plant', 'ficus'] as const satisfies readonly PlantSpecies[];
-const PLANT_COLORS = { Pot: PALETTE.pot, Glaze: '#8ecae6', Soil: '#6b4226', Bark: '#8a5a3b', Leaf: PALETTE.plant, LeafDark: PALETTE.plantDark };
-const paintPlant = palette(PLANT_COLORS);
-
-/**
- * A potted plant of `species`, `scale` times its modelled size, its origin on the floor in the middle of
- * its pot. At scale 1 a floor species' pot is the old one's size (0.28 round at the top, 0.5 tall, its
- * soil at 0.45), so colliders of 0.3 * scale still fit it; the succulent is desk-sized as it is. If the
- * model didn't load, an empty group: the office opens without it.
- */
+/** A fine voxel plant at the existing scale, with named leaves for holiday decorations. */
 export function plant(species: PlantSpecies, scale = 1): THREE.Group {
   const g = new THREE.Group();
-  g.add(piece('plants', species, paintPlant));
+  g.add(finePlant(species));
   g.scale.setScalar(scale);
   return g;
 }
@@ -49,35 +34,20 @@ export function plantLeaves(potted: THREE.Object3D): THREE.Object3D[] {
   return leaves;
 }
 
-// The desks' knick-knacks are modelled in Blender (blender/scripts/build_desk_props.py): a mug of coffee,
-// and books in a few arrangements, each a piece of desk_props.glb (see piece()). The colors are the old
-// code-built books' covers, features/bookshelf/book.ts's page edges and the coffee in a worker's mug (coffeeMug() in
-// character/props.ts); the mug itself is painted whatever color it's given.
-const DESK_PROP_COLORS = { CoverRed: '#e63946', CoverBlue: '#457b9d', CoverOrange: '#f4a261', Pages: '#f3ead8', Coffee: '#6f4518' };
-const paintDeskProp = palette(DESK_PROP_COLORS);
 /** The arrangements of books, which the desks with books take turns with (see deskBooks()). */
 export const DESK_BOOKS = ['books_upright', 'books_leaning', 'books_stack'] as const;
 
-/**
- * A mug of coffee, its body `color`, its origin on the desk under the middle of its body and its handle out
- * to +x. The body is the old code-built mug's size (0.06 round at the top, 0.12 tall). If the model didn't
- * load, an empty group.
- */
+/** Fine mug and visible coffee; the handle points +x and the origin stays on the desk. */
 export function deskMug(color: string): THREE.Object3D {
-  const body = toon(color);
-  return piece('desk_props', 'mug', (name) => (name === 'Mug' ? body : paintDeskProp(name)));
+  return fineMug(color);
 }
 
-/**
- * The `i`th arrangement of books (they take turns, see DESK_BOOKS), spines to +z, its origin on the desk in
- * the middle of its footprint, which is at most the old code-built books' 0.26 by 0.18, and 0.24 tall. If
- * the model didn't load, an empty group.
- */
+/** Fine books at the existing desk footprint, with their spines facing +z. */
 export function deskBooks(i: number): THREE.Object3D {
-  return piece('desk_props', DESK_BOOKS[i % DESK_BOOKS.length], paintDeskProp);
+  return fineBooks(i);
 }
 
-// The lounge's furniture is modelled in Blender (blender/scripts/build_lounge.py): the sofa, a throw pillow, a
+// The remaining lounge props are modelled in Blender: a throw pillow, a
 // floor pouf and the coffee table, each a piece of lounge.glb placed on its own (see piece()), so they can be
 // moved round one by one. Sofa is the old couch's blue, Wood and Frame the old coffee table's top and pedestal,
 // and WoodDark the sofa's feet (the desk furniture's darker wood). A pillow's or a pouf's Cloth is each copy's
@@ -98,19 +68,7 @@ function upholstered(part: 'pillow' | 'pouf', color: string): THREE.Object3D {
  * cushions' tops are 0.47 up. The pillows hang under it, so a click on one is a click on the couch.
  */
 export function loungeCouch(): THREE.Group {
-  const g = new THREE.Group();
-  g.add(piece('lounge', 'sofa', paintLounge));
-  for (const [x, color] of [
-    [0.6, '#ffd166'],
-    [-0.6, '#ef476f'],
-  ] as const) {
-    const pillow = upholstered('pillow', color);
-    // Standing on the seat, sunk in a little, its top tipped back onto the back cushions.
-    pillow.position.set(x, 0.46, -0.08);
-    pillow.rotation.x = -0.15;
-    g.add(pillow);
-  }
-  return g;
+  return fineSofa();
 }
 
 /** A floor pouf in `color`, about 1.05 round and 0.4 tall, its origin on the floor under its middle. */
diff --git a/src/client/world/office/seats.ts b/src/client/world/office/seats.ts
index e4db74121..7abbc2ff0 100644
--- a/src/client/world/office/seats.ts
+++ b/src/client/world/office/seats.ts
@@ -1,3 +1,5 @@
+import { fineChair, deskDrawers } from './voxel-furniture';
+import { voxelBox, voxelMaterial } from '../voxel';
 import * as THREE from 'three';
 import { BEANBAGS, DESKS, DESK_SIZE, FLOOR, KIOSK, SEATING_BY_ID, STATIONS, STATION_AGENT, deskSeat, type DeskDef, type StationKind } from '../../../shared/layout';
 import { deskPoint } from '../../../shared/nav';
@@ -20,20 +22,7 @@ export function seatable(obj: THREE.Object3D, seatId: string, radius: number, in
 }
 
 export function chair(color: string): THREE.Group {
-  const g = new THREE.Group();
-  const mat = toon(color);
-  g.add(mesh(roundedBox(0.62, 0.1, 0.58, 0.12), mat, 0, 0.5, 0));
-  const back = mesh(roundedBox(0.62, 0.1, 0.6, 0.12), mat, 0, 0.86, 0.27);
-  back.rotation.x = Math.PI / 2 - 0.12;
-  g.add(back);
-  g.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.42, 8), toon(PALETTE.deskLeg), 0, 0.26, 0));
-  for (let i = 0; i < 5; i++) {
-    const a = (i / 5) * Math.PI * 2;
-    const leg = mesh(box(0.05, 0.04, 0.32), toon(PALETTE.deskLeg), Math.sin(a) * 0.15, 0.05, Math.cos(a) * 0.15);
-    leg.rotation.y = a;
-    g.add(leg);
-  }
-  return g;
+  return fineChair(color);
 }
 
 /**
@@ -62,13 +51,14 @@ export function buildDesk(def: DeskDef, index: number, trimMat: THREE.Material):
   group.position.set(def.x, 0, def.z);
   group.rotation.y = def.rotY;
   const { width, depth, height } = DESK_SIZE;
-  group.add(mesh(roundedBox(width - 0.06, 0.08, depth - 0.04, 0.08), toon(PALETTE.desk), 0, height - 0.04, 0));
+  group.add(mesh(voxelBox(width - 0.06, 0.08, depth - 0.04, 0.04), voxelMaterial(toon('#e4c99f')), 0, height - 0.04, 0));
   const legMat = toon('#8d99ae');
   for (const sx of [-1, 1]) {
     for (const sz of [-1, 1]) {
-      group.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, height - 0.08, 8), legMat, sx * (width / 2 - 0.14), (height - 0.08) / 2, sz * (depth / 2 - 0.12)));
+      group.add(mesh(voxelBox(0.07, height - 0.08, 0.07, 0.04), legMat, sx * (width / 2 - 0.14), (height - 0.08) / 2, sz * (depth / 2 - 0.12)));
     }
   }
+  group.add(deskDrawers(width, depth, height));
   // Modesty panel facing away from the worker
   group.add(mesh(box(width - 0.3, 0.32, 0.03), trimMat, 0, height - 0.26, -depth / 2 + 0.06));
   // Little desk decorations. Which desk gets which stays as it is: the holiday present goes in whichever
diff --git a/src/client/world/office/voxel-furniture.ts b/src/client/world/office/voxel-furniture.ts
new file mode 100644
index 000000000..49c77101e
--- /dev/null
+++ b/src/client/world/office/voxel-furniture.ts
@@ -0,0 +1,61 @@
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { toon } from '../toon';
+import { voxelBox, voxelGeometry, voxelMaterial } from '../voxel';
+
+/** Batch static parts by paint; a keyboard or a whole chair takes only a few draw calls. */
+export class VoxelFurniture {
+  private parts = new Map<string, THREE.BufferGeometry[]>();
+  add(color: string, w: number, h: number, d: number, x: number, y: number, z: number, round = false, size = 0.035) {
+    const geometry = (round ? voxelGeometry('ellipsoid', w, h, d, size) : voxelBox(w, h, d, size)).translate(x, y, z);
+    const parts = this.parts.get(color) ?? []; parts.push(geometry); this.parts.set(color, parts);
+    return this;
+  }
+  build(): THREE.Group {
+    const group = new THREE.Group();
+    for (const [color, parts] of this.parts) {
+      const geometry = mergeGeometries(parts)!;
+      for (const p of parts) p.dispose();
+      const mesh = new THREE.Mesh(geometry, voxelMaterial(toon(color)));
+      mesh.castShadow = mesh.receiveShadow = true; group.add(mesh);
+    }
+    return group;
+  }
+}
+
+export function fineChair(color: string) {
+  const v = new VoxelFurniture(), frame = '#455468';
+  v.add(color, 0.62, 0.1, 0.58, 0, 0.5, 0);
+  v.add(color, 0.6, 0.55, 0.12, 0, 0.84, 0.27);
+  v.add(color, 0.54, 0.05, 0.52, 0, 0.565, -0.015);
+  v.add(frame, 0.07, 0.42, 0.07, 0, 0.26, 0);
+  for (const sx of [-1, 1]) {
+    v.add(frame, 0.04, 0.18, 0.04, sx * 0.3, 0.64, 0.04);
+    v.add(frame, 0.075, 0.04, 0.3, sx * 0.3, 0.73, 0.015);
+  }
+  for (let i = 0; i < 5; i++) {
+    const a = i * Math.PI * 2 / 5;
+    for (let r = 0.03; r < 0.28; r += 0.035) v.add(frame, 0.055, 0.04, 0.055, Math.sin(a) * r, 0.075, Math.cos(a) * r);
+    v.add('#263344', 0.07, 0.075, 0.07, Math.sin(a) * 0.27, 0.04, Math.cos(a) * 0.27);
+  }
+  return v.build();
+}
+
+/** A small drawer pedestal fits within the desk's existing collision box. */
+export function deskDrawers(width: number, depth: number, height: number) {
+  const v = new VoxelFurniture(), x = -width / 2 + 0.32;
+  v.add('#d1b389', 0.46, height - 0.14, depth - 0.22, x, (height - 0.14) / 2, 0);
+  for (const y of [0.14, 0.34, 0.54]) {
+    v.add('#ad8458', 0.4, 0.015, 0.025, x, y + 0.08, depth / 2 - 0.1, false, 0.0125);
+    v.add('#536478', 0.12, 0.035, 0.045, x, y, depth / 2 - 0.07, false, 0.0125);
+  }
+  return v.build();
+}
+
+/** Individual keycaps, merged into one mesh rather than sixty extra objects per laptop. */
+export function laptopKeys() {
+  const v = new VoxelFurniture();
+  for (let r = 0; r < 4; r++) for (let c = 0; c < 12; c++) v.add('#ece5d8', 0.044, 0.008, 0.035, -0.29 + c * 0.053, 0.044, -0.085 + r * 0.055, false, 0.0125);
+  v.add('#ece5d8', 0.25, 0.008, 0.032, 0, 0.044, 0.12, false, 0.0125);
+  return v.build();
+}
diff --git a/src/client/world/office/voxel-props.ts b/src/client/world/office/voxel-props.ts
new file mode 100644
index 000000000..648624f4f
--- /dev/null
+++ b/src/client/world/office/voxel-props.ts
@@ -0,0 +1,80 @@
+import * as THREE from 'three';
+import { VoxelFurniture } from './voxel-furniture';
+
+export function finePlant(species: string) {
+  const group = new THREE.Group(), pot = new VoxelFurniture(), leaves = new VoxelFurniture();
+  const small = species === 'succulent', scale = small ? 0.24 : 1;
+  const color = species === 'snake_plant' ? '#8ecae6' : '#ce795b';
+  for (let i = 0; i < 8; i++) {
+    const w = 0.36 + i * 0.023;
+    pot.add(color, w, 0.055, w, 0, 0.028 + i * 0.055, 0, false, 0.025);
+  }
+  pot.add('#e4c9a1', 0.56, 0.055, 0.56, 0, 0.46, 0, false, 0.025);
+  pot.add('#62412d', 0.45, 0.025, 0.45, 0, 0.48, 0, false, 0.025);
+  if (species === 'snake_plant') {
+    for (let i = 0; i < 9; i++) {
+      const a = i * 2.3999, r = 0.06 + (i % 3) * 0.065, h = 0.55 + (i % 4) * 0.16;
+      leaves.add(i % 2 ? '#4b9c69' : '#76b97b', 0.12, h, 0.09, Math.cos(a) * r, 0.48 + h / 2, Math.sin(a) * r, true, 0.025);
+    }
+  } else if (small) {
+    for (let i = 0; i < 12; i++) {
+      const a = i * 2.3999, r = i < 6 ? 0.14 : 0.06;
+      leaves.add(i % 2 ? '#5eaf79' : '#83c18a', 0.25, 0.12, 0.24, Math.cos(a) * r, 0.55 + (i % 3) * 0.08, Math.sin(a) * r, true, 0.025);
+    }
+  } else {
+    leaves.add('#8a6443', 0.045, 0.95, 0.045, 0, 0.95, 0, false, 0.025);
+    for (let i = 0; i < 15; i++) {
+      const a = i * 2.3999, r = 0.18 + (i % 3) * 0.095, y = 0.7 + i * 0.055;
+      const x = Math.cos(a) * r, z = Math.sin(a) * r;
+      for (let j = 1; j <= 5; j++) leaves.add('#8a6443', 0.035, 0.035, 0.035, x * j / 5, y - 0.15 + j * 0.03, z * j / 5, false, 0.025);
+      leaves.add(i % 2 ? '#4d9765' : '#7abd7c', species === 'ficus' ? 0.28 : 0.4, 0.1, 0.3, x, y, z, true, 0.025);
+    }
+  }
+  group.add(pot.build());
+  const foliage = leaves.build(); foliage.name = `${species}_leaves`; group.add(foliage);
+  group.scale.setScalar(scale);
+  return group;
+}
+
+export function fineMug(color: string) {
+  const v = new VoxelFurniture();
+  // Four walls leave the rim open around a visible surface of coffee.
+  v.add(color, 0.12, 0.02, 0.12, 0, 0.01, 0, false, 0.0125);
+  for (const s of [-1, 1]) {
+    v.add(color, 0.12, 0.1, 0.015, 0, 0.07, s * 0.0525, false, 0.0125);
+    v.add(color, 0.015, 0.1, 0.09, s * 0.0525, 0.07, 0, false, 0.0125);
+  }
+  v.add('#60402c', 0.09, 0.0125, 0.09, 0, 0.105, 0, false, 0.0125);
+  for (const y of [0.04, 0.1]) v.add(color, 0.06, 0.015, 0.025, 0.08, y, 0, false, 0.0125);
+  v.add(color, 0.015, 0.075, 0.025, 0.11, 0.07, 0, false, 0.0125);
+  return v.build();
+}
+
+export function fineBooks(index: number) {
+  const v = new VoxelFurniture(), colors = ['#de8066', '#579eb6', '#e3b85f'];
+  for (let i = 0; i < 3; i++) {
+    if (index % 3 === 2) {
+      v.add(colors[i], 0.24, 0.018, 0.17, 0, 0.015 + i * 0.042, 0, false, 0.0125);
+      v.add('#f2e9d7', 0.23, 0.025, 0.15, 0, 0.035 + i * 0.042, 0, false, 0.0125);
+    } else {
+      const x = -0.075 + i * 0.075, h = 0.18 + i * 0.025;
+      v.add(colors[i], 0.06, h, 0.16, x, h / 2, 0, false, 0.0125);
+      for (const y of [0.05, h - 0.04]) v.add('#eee2c8', 0.045, 0.015, 0.015, x, y, 0.085, false, 0.0125);
+    }
+  }
+  return v.build();
+}
+
+export function fineSofa() {
+  const v = new VoxelFurniture();
+  v.add('#4d9b86', 4.2, 0.22, 1, 0, 0.31, 0);
+  v.add('#5caf98', 4.2, 0.65, 0.2, 0, 0.69, -0.4);
+  for (const x of [-1.9, 1.9]) v.add('#4d9b86', 0.4, 0.52, 1, x, 0.54, 0);
+  for (const x of [-1.2, 0, 1.2]) {
+    v.add('#75c4ab', 1.15, 0.11, 0.76, x, 0.415, 0.03);
+    v.add('#65b59e', 1.15, 0.45, 0.13, x, 0.705, -0.25);
+  }
+  for (const x of [-1.85, 1.85]) for (const z of [-0.35, 0.35]) v.add('#885e42', 0.12, 0.2, 0.12, x, 0.1, z);
+  for (const [x, color] of [[-0.6, '#e98d71'], [0.6, '#f7e5c9']] as const) v.add(color, 0.38, 0.36, 0.15, x, 0.65, -0.12);
+  return v.build();
+}
diff --git a/src/client/world/voxel.ts b/src/client/world/voxel.ts
new file mode 100644
index 000000000..63b73f8bc
--- /dev/null
+++ b/src/client/world/voxel.ts
@@ -0,0 +1,65 @@
+import * as THREE from 'three';
+
+type Form = 'box' | 'ellipsoid' | 'capsule' | 'cap' | 'curtain';
+const cache = new Map<string, THREE.BufferGeometry>();
+const directions = [[1, 0, 0], [-1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 1], [0, 0, -1]];
+
+/** Fine solid voxels, with only exposed faces emitted. Bounds stay inside the original silhouette. */
+export function voxelGeometry(form: Form, width: number, height: number, depth: number, size = 0.025): THREE.BufferGeometry {
+  if ([width, height, depth, size].some((n) => !Number.isFinite(n) || n <= 0)) throw new Error('Voxel dimensions must be positive and finite');
+  const key = `${form}:${width}:${height}:${depth}:${size}`;
+  const hit = cache.get(key);
+  // Each caller owns its copy: hair changes and prop disposal must not invalidate another character.
+  if (hit) return hit.clone();
+  const nx = Math.max(1, Math.ceil(width / size)), ny = Math.max(1, Math.ceil(height / size)), nz = Math.max(1, Math.ceil(depth / size));
+  const dx = width / nx, dy = height / ny, dz = depth / nz;
+  const cells = new Uint8Array(nx * ny * nz);
+  const at = (i: number, j: number, k: number) => (i * ny + j) * nz + k;
+  const has = (i: number, j: number, k: number) => i >= 0 && i < nx && j >= 0 && j < ny && k >= 0 && k < nz && !!cells[at(i, j, k)];
+  for (let i = 0; i < nx; i++) for (let j = 0; j < ny; j++) for (let k = 0; k < nz; k++) {
+    const x = ((i + 0.5) / nx - 0.5) * 2, y = ((j + 0.5) / ny - 0.5) * height, z = ((k + 0.5) / nz - 0.5) * 2;
+    const r = Math.min(width, depth) / 2;
+    const cy = form === 'capsule' ? Math.max(0, Math.abs(y) - Math.max(0, height / 2 - r)) / r : y * 2 / height;
+    if (form === 'box' || (x * x + cy * cy + z * z <= 1 && (form !== 'cap' || y >= 0) && (form !== 'curtain' || z < 0.45))) cells[at(i, j, k)] = 1;
+  }
+  const positions: number[] = [], normals: number[] = [], colors: number[] = [];
+  for (let i = 0; i < nx; i++) for (let j = 0; j < ny; j++) for (let k = 0; k < nz; k++) {
+    if (!has(i, j, k)) continue;
+    const shade = 0.94 + ((i * 13 + j * 7 + k * 19) % 11) * 0.006;
+    for (const n of directions) {
+      if (has(i + n[0], j + n[1], k + n[2])) continue;
+      const u = n[0] ? [0, 1, 0] : n[1] ? [0, 0, 1] : [1, 0, 0];
+      const v = n[0] ? [0, 0, 1] : n[1] ? [1, 0, 0] : [0, 1, 0];
+      const corners = [[-1, -1], [1, -1], [1, 1], [-1, 1]];
+      const order = n[0] + n[1] + n[2] > 0 ? [0, 1, 2, 0, 2, 3] : [0, 2, 1, 0, 3, 2];
+      for (const c of order) {
+        const [a, b] = corners[c];
+        positions.push((i + 0.5 + (n[0] + a * u[0] + b * v[0]) / 2) * dx - width / 2,
+          (j + 0.5 + (n[1] + a * u[1] + b * v[1]) / 2) * dy - height / 2,
+          (k + 0.5 + (n[2] + a * u[2] + b * v[2]) / 2) * dz - depth / 2);
+        normals.push(...n);
+        const side = has(i + n[0] + a * u[0], j + n[1] + a * u[1], k + n[2] + a * u[2]);
+        const other = has(i + n[0] + b * v[0], j + n[1] + b * v[1], k + n[2] + b * v[2]);
+        const ao = shade * (side && other ? 0.68 : side || other ? 0.86 : 1);
+        colors.push(ao, ao, ao);
+      }
+    }
+  }
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+  geometry.computeBoundingBox(); geometry.computeBoundingSphere();
+  cache.set(key, geometry);
+  return geometry.clone();
+}
+
+export const voxelBox = (w: number, h: number, d: number, s = 0.025) => voxelGeometry('box', w, h, d, s);
+export const voxelBall = (r: number, s = 0.025) => voxelGeometry('ellipsoid', r * 2, r * 2, r * 2, s);
+export const voxelCapsule = (r: number, length: number, s = 0.025) => voxelGeometry('capsule', r * 2, length + r * 2, r * 2, s);
+
+/** Keep the material reference intact: worker colors and status bulbs animate this very material. */
+export function voxelMaterial<T extends THREE.Material>(material: T): T {
+  if ('vertexColors' in material) { material.vertexColors = true; material.needsUpdate = true; }
+  return material;
+}
diff --git a/tests/size.test.ts b/tests/size.test.ts
index 9c533b829..c54f01b1c 100644
--- a/tests/size.test.ts
+++ b/tests/size.test.ts
@@ -32,7 +32,6 @@ const CEILINGS: Readonly<Record<string, number>> = {
   'src/client/features/golf/world.ts': 635,
   'src/client/features/bargames/world.ts': 617,
   'src/client/world/city.ts': 613,
-  'src/client/world/character/worker.ts': 605,
   'src/client/world/costumes.ts': 603,
 };
 
diff --git a/tests/voxel.test.ts b/tests/voxel.test.ts
new file mode 100644
index 000000000..c4d83f9d2
--- /dev/null
+++ b/tests/voxel.test.ts
@@ -0,0 +1,41 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import * as THREE from 'three';
+import { voxelBox, voxelCapsule, voxelGeometry } from '../src/client/world/voxel';
+import { fineChair, laptopKeys } from '../src/client/world/office/voxel-furniture';
+import { finePlant, fineSofa } from '../src/client/world/office/voxel-props';
+
+test('solid voxel volumes emit the outside surface, with outward triangles and exact bounds', () => {
+  const geometry = voxelBox(0.1, 0.1, 0.1, 0.025);
+  // Four cells along each edge: six sides, sixteen exposed faces per side, six vertices each.
+  assert.equal(geometry.getAttribute('position').count, 6 * 16 * 6);
+  assert.deepEqual(geometry.boundingBox!.min.toArray().map((v) => Number(v.toFixed(4))), [-0.05, -0.05, -0.05]);
+  const positions = geometry.getAttribute('position'), normals = geometry.getAttribute('normal');
+  for (let i = 0; i < positions.count; i += 3) {
+    const a = new THREE.Vector3().fromBufferAttribute(positions, i);
+    const b = new THREE.Vector3().fromBufferAttribute(positions, i + 1);
+    const c = new THREE.Vector3().fromBufferAttribute(positions, i + 2);
+    assert.ok(b.sub(a).cross(c.sub(a)).dot(new THREE.Vector3().fromBufferAttribute(normals, i)) > 0);
+  }
+});
+
+test('fine capsules retain rig dimensions and each cached copy owns its geometry', () => {
+  const a = voxelCapsule(0.08, 0.24), b = voxelCapsule(0.08, 0.24);
+  assert.notEqual(a, b);
+  assert.notEqual(a.getAttribute('position').array, b.getAttribute('position').array);
+  a.translate(2, 0, 0); a.dispose();
+  assert.ok(b.boundingBox!.max.x <= 0.08001);
+  assert.ok(b.boundingBox!.max.y <= 0.20001);
+  assert.throws(() => voxelGeometry('box', 1, 1, 1, 0));
+});
+
+test('refined furniture preserves seating heights, leaf hooks, and batches keycaps', () => {
+  const chair = fineChair('#66aa99');
+  const chairBounds = new THREE.Box3().setFromObject(chair);
+  assert.ok(chairBounds.max.x <= 0.35 && chairBounds.min.x >= -0.35);
+  const sofaBounds = new THREE.Box3().setFromObject(fineSofa());
+  assert.ok(sofaBounds.max.x <= 2.10001 && sofaBounds.min.x >= -2.10001);
+  assert.equal(laptopKeys().children.length, 1);
+  const plant = finePlant('monstera');
+  assert.ok(plant.getObjectByName('monstera_leaves'));
+});

From 6805572ca04ecba656618e85e3cd6b3f762774fc Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 14:41:10 +0400
Subject: [PATCH 04/35] Use voxel chairs with existing local standard materials

---
 src/client/world/character/worker-model.ts | 2 +-
 src/client/world/office/seats.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/world/character/worker-model.ts b/src/client/world/character/worker-model.ts
index 5c2669814..2f00a1600 100644
--- a/src/client/world/character/worker-model.ts
+++ b/src/client/world/character/worker-model.ts
@@ -4,7 +4,7 @@ import { voxelBall, voxelBox, voxelCapsule, voxelMaterial } from '../voxel';
 import { STATUS_BULB } from './worker-badges';
 
 /** A fine voxel office worker on the existing rig: +z is its face and its typing direction. */
-export function workerModel(body: THREE.Group, skin: THREE.MeshToonMaterial, bulb: THREE.MeshToonMaterial) {
+export function workerModel(body: THREE.Group, skin: THREE.MeshToonMaterial | THREE.MeshStandardMaterial, bulb: THREE.MeshToonMaterial | THREE.MeshStandardMaterial) {
   const face = voxelMaterial(toon('#f3caa4')), ink = voxelMaterial(toon('#293348'));
   const white = voxelMaterial(toon('#fff9ef')), pants = voxelMaterial(toon('#35475e'));
   voxelMaterial(skin); voxelMaterial(bulb);
diff --git a/src/client/world/office/seats.ts b/src/client/world/office/seats.ts
index 7abbc2ff0..ff9935572 100644
--- a/src/client/world/office/seats.ts
+++ b/src/client/world/office/seats.ts
@@ -97,7 +97,7 @@ export function buildDesk(def: DeskDef, index: number, trimMat: THREE.Material):
   stage.position.set(0.72, height - 0.07, 0.18);
   group.add(stage);
 
-  const ch = officeChair(PALETTE.chairs[index % PALETTE.chairs.length]);
+  const ch = chair(PALETTE.chairs[index % PALETTE.chairs.length]);
   ch.position.set(0, 0, 0.9);
   group.add(ch);
 

From ae075502d646b50cf77eae48f86afd23e3571d88 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 15:05:51 +0400
Subject: [PATCH 05/35] Restyle dialogs, buttons and popups with a voxel block
 theme

---
 src/client/claim.html                 |  2 +-
 src/client/features/bookshelf/ui.css  |  6 +--
 src/client/features/emotes/ui.css     |  6 +--
 src/client/features/hanging/ui.css    |  4 +-
 src/client/features/jukebox/ui.css    |  2 +-
 src/client/features/needsyou/ui.css   |  6 +--
 src/client/features/whiteboard/ui.css |  6 +--
 src/client/join.html                  |  2 +-
 src/client/lite.css                   |  5 +-
 src/client/lite.html                  |  2 +-
 src/client/login.css                  | 24 +++++----
 src/client/login.html                 |  2 +-
 src/client/style.css                  |  2 +
 src/client/styles/base.css            | 48 +++++++-----------
 src/client/styles/hud.css             | 42 ++++++++--------
 src/client/styles/loading.css         |  6 +--
 src/client/styles/voxel-tokens.css    | 21 ++++++++
 src/client/styles/voxel-ui.css        | 71 +++++++++++++++++++++++++++
 src/client/ui/accounts.css            |  4 +-
 src/client/ui/ask.css                 |  2 +-
 src/client/ui/boards.css              | 24 ++++-----
 src/client/ui/changes.css             | 10 ++--
 src/client/ui/character.css           |  2 +-
 src/client/ui/compass.css             |  4 +-
 src/client/ui/dictate.css             |  4 +-
 src/client/ui/elevator.css            |  8 +--
 src/client/ui/floormenu.css           |  4 +-
 src/client/ui/floorplan.css           |  4 +-
 src/client/ui/github/pulldiff.css     | 16 +++---
 src/client/ui/github/windows.css      | 26 +++++-----
 src/client/ui/markdown.css            | 12 ++---
 src/client/ui/meeting.css             | 14 +++---
 src/client/ui/menu.css                | 14 +++---
 src/client/ui/palette.css             |  4 +-
 src/client/ui/prompt.css              |  6 +--
 src/client/ui/prompts.css             |  4 +-
 src/client/ui/provider.css            |  6 +--
 src/client/ui/queue.css               |  6 +--
 src/client/ui/repos.css               |  2 +-
 src/client/ui/search.css              |  4 +-
 src/client/ui/services.css            |  4 +-
 src/client/ui/settings.css            | 16 +++---
 src/client/ui/signins.css             |  2 +-
 src/client/ui/team.css                |  6 +--
 src/client/ui/terminal.css            |  8 +--
 src/client/ui/termtabs.css            |  8 +--
 src/client/ui/upgrade.css             |  6 +--
 47 files changed, 287 insertions(+), 200 deletions(-)
 create mode 100644 src/client/styles/voxel-tokens.css
 create mode 100644 src/client/styles/voxel-ui.css

diff --git a/src/client/claim.html b/src/client/claim.html
index d654cb3f2..504131580 100644
--- a/src/client/claim.html
+++ b/src/client/claim.html
@@ -10,7 +10,7 @@
   <body>
     <main class="card">
       <div class="logo" aria-hidden="true">
-        <svg viewBox="0 0 64 64" width="72" height="72"><rect x="6" y="30" width="52" height="8" rx="3" fill="#e0a96d"/><rect x="18" y="14" width="28" height="18" rx="3" fill="#2b2d42"/><rect x="21" y="17" width="22" height="12" rx="1" fill="#7cf29a"/><circle cx="32" cy="50" r="9" fill="#ff8a5b"/><circle cx="29" cy="48" r="1.8" fill="#222"/><circle cx="35" cy="48" r="1.8" fill="#222"/></svg>
+        <svg viewBox="0 0 64 64" width="72" height="72" shape-rendering="crispEdges"><rect x="6" y="30" width="52" height="8" fill="#b88a58"/><rect x="6" y="38" width="52" height="3" fill="#8a6339"/><rect x="18" y="12" width="28" height="18" fill="#29464a"/><rect x="21" y="15" width="22" height="12" fill="#8fe3b0"/><rect x="24" y="19" width="4" height="4" fill="#29464a"/><rect x="36" y="19" width="4" height="4" fill="#29464a"/><rect x="23" y="41" width="18" height="16" fill="#216c70"/><rect x="26" y="45" width="4" height="4" fill="#fff9ee"/><rect x="34" y="45" width="4" height="4" fill="#fff9ee"/></svg>
       </div>
       <h1 id="title">Your office is ready 🎉</h1>
       <p class="sub" id="sub">Unlocking…</p>
diff --git a/src/client/features/bookshelf/ui.css b/src/client/features/bookshelf/ui.css
index a31dce25b..c69b27f63 100644
--- a/src/client/features/bookshelf/ui.css
+++ b/src/client/features/bookshelf/ui.css
@@ -8,7 +8,7 @@
 .modal .bs-find input[type=text] { font-size: 14px; padding: 8px 12px; }
 .bs-count { font-size: 12px; font-weight: 800; color: var(--muted); padding: 0 16px 6px; min-height: 20px; }
 .bs-list { list-style: none; margin: 0; padding: 0 8px 12px; overflow: auto; flex: 1; min-height: 0; }
-.bs-item { padding: 7px 10px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; min-width: 0; }
+.bs-item { padding: 7px 10px; border-radius: var(--radius-control); cursor: pointer; border: 2px solid transparent; min-width: 0; }
 .bs-item + .bs-item { margin-top: 2px; }
 .bs-item:hover { background: rgba(255, 255, 255, .7); }
 .bs-item.sel { border-color: var(--accent); background: #fff; }
@@ -17,7 +17,7 @@
 .bs-item.open .bs-title::before { content: '📖 '; }
 .bs-title { font-weight: 800; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .bs-path { font: 11.5px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bs-item mark { background: var(--warn); color: var(--ink); border-radius: 3px; padding: 0 1px; }
+.bs-item mark { background: var(--warn); color: var(--ink); border-radius: var(--radius-control); padding: 0 1px; }
 .bs-none { padding: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
 .bs-reader { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fffdf8; }
 .bs-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 2px solid rgba(43, 45, 66, .12); min-height: 44px; }
@@ -26,7 +26,7 @@
 .bs-meta { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 700; font-size: 12px; white-space: nowrap; }
 .bs-meta a { color: #1d6fd6; font-weight: 800; text-decoration: none; }
 .bs-meta a:hover { text-decoration: underline; }
-.bs-toc { font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; padding: 4px 8px; max-width: 220px; background: #fff; cursor: pointer; }
+.bs-toc { font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 4px 8px; max-width: 220px; background: #fff; cursor: pointer; }
 .bs-page { flex: 1; overflow: auto; min-height: 0; outline: none; }
 .bs-page .md { max-width: 860px; margin: 0 auto; padding: 28px 44px 72px; font-size: 15.5px; line-height: 1.7; }
 .bs-page .md h1 { font-size: 28px; }
diff --git a/src/client/features/emotes/ui.css b/src/client/features/emotes/ui.css
index 34f48c020..688f0214f 100644
--- a/src/client/features/emotes/ui.css
+++ b/src/client/features/emotes/ui.css
@@ -1,17 +1,17 @@
 /* The emote wheel (hold G): six emotes round a ring in the middle of the screen, over the crosshair. */
 .emote-wheel { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(43,45,66,.28), transparent 45%); }
 .emote-wheel .ring {
-  position: relative; width: 288px; height: 288px; border-radius: 50%;
+  position: relative; width: 288px; height: 288px; border-radius: var(--radius-control);
   background: rgba(255,250,243,.88); border: 3px solid var(--ink); box-shadow: var(--shadow); animation: wheel-in .12s ease-out;
 }
 .emote-wheel .emote {
   position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
-  transform: translate(var(--x), var(--y)); border-radius: 50%; border: 3px solid var(--ink); background: #fff;
+  transform: translate(var(--x), var(--y)); border-radius: var(--radius-control); border: 3px solid var(--ink); background: #fff;
   font-size: 32px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--ink); transition: transform .08s, background .08s;
 }
 .emote-wheel .emote.on { background: var(--accent); transform: translate(var(--x), var(--y)) scale(1.18); }
 .emote-wheel .num {
-  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; border-radius: 999px; background: var(--ink); color: var(--paper);
+  position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; border-radius: var(--radius-control); background: var(--ink); color: var(--paper);
   font-size: 12px; font-weight: 900; line-height: 20px;
 }
 .emote-wheel .middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
diff --git a/src/client/features/hanging/ui.css b/src/client/features/hanging/ui.css
index d23a5198b..3d0153c1d 100644
--- a/src/client/features/hanging/ui.css
+++ b/src/client/features/hanging/ui.css
@@ -8,9 +8,9 @@
 .hang-preview img { display: block; max-width: 100%; max-height: 240px; border: 12px solid var(--frame, #c98b5a); outline: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: #fff; }
 .hang-status { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.45; }
 .hang-status:empty { display: none; }
-.hang-status.error { color: var(--ink); background: #ffd6e0; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 12px; }
+.hang-status.error { color: var(--ink); background: #ffd6e0; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 8px 12px; }
 .modal.picture { width: min(980px, 100%); }
-.picture-stage { display: grid; place-items: center; min-height: 200px; padding: 16px; background: #2b2d42; border: 3px solid var(--ink); border-radius: 14px; }
+.picture-stage { display: grid; place-items: center; min-height: 200px; padding: 16px; background: #2b2d42; border: 3px solid var(--ink); border-radius: var(--radius-control); }
 .picture-stage img { display: block; max-width: 100%; max-height: calc(100vh - 260px); object-fit: contain; }
 .picture-stage .spinner { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
 .picture-meta { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
diff --git a/src/client/features/jukebox/ui.css b/src/client/features/jukebox/ui.css
index 2867960c5..e96ae2975 100644
--- a/src/client/features/jukebox/ui.css
+++ b/src/client/features/jukebox/ui.css
@@ -1,6 +1,6 @@
 /* The jukebox */
 .modal.jukebox { width: min(520px, 100%); }
-.jb-now { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--paper-2); }
+.jb-now { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: var(--paper-2); }
 .jb-now .btn { flex: none; padding: 4px 10px; font-size: 13px; }
 .jb-disc { flex: none; font-size: 30px; line-height: 1; }
 .jb-disc.spin { animation: jb-spin 2.4s linear infinite; }
diff --git a/src/client/features/needsyou/ui.css b/src/client/features/needsyou/ui.css
index 61e82a447..a840bf77c 100644
--- a/src/client/features/needsyou/ui.css
+++ b/src/client/features/needsyou/ui.css
@@ -2,15 +2,15 @@
    screen when one starts asking, and the pulse on what else says so (the top bar's button, the Workers panel). */
 .needs-you { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: stretch; max-width: min(640px, calc(100vw - 24px)); border: 3px solid var(--ink); border-radius: var(--radius); background: var(--bad); color: #fff; --rest: var(--shadow); box-shadow: var(--rest); animation: needs-you-in .3s cubic-bezier(.2, 1.4, .4, 1), needs-you-ring 1.6s ease-out .3s infinite; }
 .needs-you button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
-.needs-you-go { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 6px 8px 14px; text-align: left; border-radius: 12px 0 0 12px; }
+.needs-you-go { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 6px 8px 14px; text-align: left; border-radius: var(--radius-control); }
 .needs-you-go:hover, .needs-you-x:hover { background: rgba(43, 45, 66, .18); }
 .needs-you-icon { font-size: 26px; line-height: 1; animation: needs-you-wave 1.2s ease-in-out infinite; transform-origin: 50% 90%; }
 .needs-you-text { display: grid; min-width: 0; }
 .needs-you-text strong { font-size: 17px; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .needs-you-ask { font-size: 13px; font-weight: 700; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.needs-you-more { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--ink); font-size: 12px; font-weight: 900; white-space: nowrap; }
+.needs-you-more { flex: none; padding: 2px 8px; border-radius: var(--radius-control); background: var(--ink); font-size: 12px; font-weight: 900; white-space: nowrap; }
 .needs-you .key { flex: none; margin: 0; box-shadow: 0 2px 0 var(--ink); }
-.needs-you-x { flex: none; width: 34px; font-size: 13px; font-weight: 900; border-left: 2px solid rgba(43, 45, 66, .35); border-radius: 0 12px 12px 0; }
+.needs-you-x { flex: none; width: 34px; font-size: 13px; font-weight: 900; border-left: 2px solid rgba(43, 45, 66, .35); border-radius: var(--radius-control); }
 /* The toasts come out under it, and it steps down from under the golf and darts meters. */
 #hud:has(.needs-you:not(.hidden)) #toasts { translate: 0 64px; }
 #hud:has(:is(.golf, .throw):not(.hidden)) .needs-you { translate: 0 48px; }
diff --git a/src/client/features/whiteboard/ui.css b/src/client/features/whiteboard/ui.css
index 6d6dc4960..c413bb02e 100644
--- a/src/client/features/whiteboard/ui.css
+++ b/src/client/features/whiteboard/ui.css
@@ -1,11 +1,11 @@
 /* ---------- Whiteboard ---------- */
 /* Its own window rather than a .modal, whose rules for labels, inputs and textareas would restyle Excalidraw's. */
-.wb-window { background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); width: min(1600px, 100%); height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .18s ease-out; }
+.wb-window { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 6px 0 var(--ink); width: min(1600px, 100%); height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .18s ease-out; }
 .wb-window > header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 3px solid var(--ink); background: var(--paper-2); }
 .wb-window > header h2 { margin: 0; font-size: 18px; font-weight: 900; flex: none; }
 .wb-people { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; font-weight: 800; }
-.wb-live { flex: none; background: var(--bad); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 11px; letter-spacing: .06em; }
-.wb-person { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 9px 1px 4px; white-space: nowrap; }
+.wb-live { flex: none; background: var(--bad); color: #fff; border-radius: var(--radius-control); padding: 1px 6px; font-size: 11px; letter-spacing: .06em; }
+.wb-person { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 1px 9px 1px 4px; white-space: nowrap; }
 .wb-person .dot { width: 11px; height: 11px; }
 .wb-alone { color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .wb-host { flex: 1; min-height: 0; position: relative; background: #fff; }
diff --git a/src/client/join.html b/src/client/join.html
index eaa42adab..8e4fcaa84 100644
--- a/src/client/join.html
+++ b/src/client/join.html
@@ -10,7 +10,7 @@
   <body>
     <main class="card">
       <div class="logo" aria-hidden="true">
-        <svg viewBox="0 0 64 64" width="72" height="72"><rect x="6" y="30" width="52" height="8" rx="3" fill="#e0a96d"/><rect x="18" y="14" width="28" height="18" rx="3" fill="#2b2d42"/><rect x="21" y="17" width="22" height="12" rx="1" fill="#7cf29a"/><circle cx="32" cy="50" r="9" fill="#ff8a5b"/><circle cx="29" cy="48" r="1.8" fill="#222"/><circle cx="35" cy="48" r="1.8" fill="#222"/></svg>
+        <svg viewBox="0 0 64 64" width="72" height="72" shape-rendering="crispEdges"><rect x="6" y="30" width="52" height="8" fill="#b88a58"/><rect x="6" y="38" width="52" height="3" fill="#8a6339"/><rect x="18" y="12" width="28" height="18" fill="#29464a"/><rect x="21" y="15" width="22" height="12" fill="#8fe3b0"/><rect x="24" y="19" width="4" height="4" fill="#29464a"/><rect x="36" y="19" width="4" height="4" fill="#29464a"/><rect x="23" y="41" width="18" height="16" fill="#216c70"/><rect x="26" y="45" width="4" height="4" fill="#fff9ee"/><rect x="34" y="45" width="4" height="4" fill="#fff9ee"/></svg>
       </div>
       <h1 id="title">You're invited 🎉</h1>
       <p class="sub" id="sub">Checking your invite…</p>
diff --git a/src/client/lite.css b/src/client/lite.css
index 0cf69877b..6fbf07e82 100644
--- a/src/client/lite.css
+++ b/src/client/lite.css
@@ -1,4 +1,5 @@
 @import './styles/base.css';
+@import './styles/voxel-ui.css';
 
 /* The 2D view (lite.html): a page that scrolls, made for a phone, rather than a HUD over the 3D office. */
 html, body { height: auto; min-height: 100%; overflow: auto; }
@@ -33,7 +34,7 @@ body.lite { min-height: 100dvh; background: var(--paper); -webkit-tap-highlight-
 .lite-card { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
 .lite-card:active { background: var(--paper-2); }
 .lite-card:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
-.lite-card .dot { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--ink); }
+.lite-card .dot { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: var(--radius-control); border: 2px solid var(--ink); }
 .lite-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
 .lite-name { font-size: 16px; font-weight: 900; }
 .lite-task { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
@@ -48,7 +49,7 @@ body.lite { min-height: 100dvh; background: var(--paper); -webkit-tap-highlight-
 .lite-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--paper-2); border-top: 3px solid var(--ink); }
 .lite-nav .btn { min-height: 48px; padding: 6px; justify-content: center; flex-wrap: wrap; gap: 4px; white-space: normal; text-align: center; line-height: 1.15; font-size: 14px; }
 .lite-nav .n:empty { display: none; }
-.lite-nav .n { min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
+.lite-nav .n { min-width: 20px; padding: 0 5px; border-radius: var(--radius-control); background: var(--ink); color: #fff; font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
 .lite-nav .btn.primary .n { background: #fff; color: var(--ink); }
 /* A wide window: the bars line up with the list. */
 @media (min-width: 761px) { .lite-bar, .lite-nav { padding-left: calc(50% - 368px); padding-right: calc(50% - 368px); } }
diff --git a/src/client/lite.html b/src/client/lite.html
index 50f7f23fe..d0c057007 100644
--- a/src/client/lite.html
+++ b/src/client/lite.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="#fff1de" />
+    <meta name="theme-color" content="#eee7d8" />
     <title>Agent Office</title>
     <link rel="icon" href="/favicon.svg" />
     <link rel="stylesheet" href="./lite.css" />
diff --git a/src/client/login.css b/src/client/login.css
index be78989e0..e9b23b326 100644
--- a/src/client/login.css
+++ b/src/client/login.css
@@ -1,25 +1,28 @@
-:root { --bg: #ffe8cc; --ink: #2b2d42; --card: #fffaf3; --accent: #ff8a5b; --muted: #7a6f65; --border: #2b2d42; }
+@import './styles/voxel-tokens.css';
+:root { --bg: #e4ebdc; --card: var(--paper); --border: var(--ink); }
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
 html, body { margin: 0; height: 100%; }
 body {
-  background: radial-gradient(circle at 20% 20%, #ffd6a5 0, transparent 40%), radial-gradient(circle at 80% 70%, #caffbf 0, transparent 45%), var(--bg);
-  font-family: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
+  background-color: var(--bg);
+  background-image: linear-gradient(90deg, rgba(41,70,74,.07) 1px, transparent 1px), linear-gradient(rgba(41,70,74,.07) 1px, transparent 1px);
+  background-size: 24px 24px;
+  font-family: var(--font);
   color: var(--ink); display: grid; place-items: center; padding: 16px;
 }
-.card { width: min(380px, 100%); background: var(--card); border: 3px solid var(--border); border-radius: 22px; padding: 28px; box-shadow: 0 8px 0 var(--border); text-align: center; }
+.card { width: min(380px, 100%); background: var(--card); border: 3px solid var(--border); border-radius: var(--radius-control); padding: 28px; box-shadow: var(--shadow); text-align: center; }
 .logo { display: grid; place-items: center; }
 h1 { margin: 8px 0 4px; font-size: 28px; }
 .sub { margin: 0 0 20px; color: var(--muted); }
 label { display: block; text-align: left; font-weight: 700; font-size: 14px; }
-input { width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 16px; border: 3px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); outline: none; }
+input { width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 16px; border: 3px solid var(--border); border-radius: var(--radius-control); background: #fff; color: var(--ink); outline: none; }
 input:focus { border-color: var(--accent); }
-button { margin-top: 16px; width: 100%; padding: 12px; font-size: 16px; font-weight: 800; border: 3px solid var(--border); border-radius: 12px; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--border); }
+button { margin-top: 16px; width: 100%; padding: 12px; font-size: 16px; font-weight: 800; border: 3px solid var(--border); border-radius: var(--radius-control); background: var(--accent); color: #fff; cursor: pointer; box-shadow: 2px 3px 0 #174c50; }
 button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
 button:disabled { opacity: .6; cursor: default; }
 .error { min-height: 1.2em; color: #c3423f; font-weight: 700; margin: 12px 0 0; }
-.warn { text-align: left; background: #fff3c4; border: 3px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; }
-.secret { display: flex; gap: 8px; align-items: center; justify-content: center; background: #fff; border: 3px dashed var(--border); border-radius: 12px; padding: 14px; }
+.warn { text-align: left; background: #fff3c4; border: 3px solid var(--border); border-radius: var(--radius-control); padding: 10px 12px; margin: 0 0 14px; font-size: 14px; }
+.secret { display: flex; gap: 8px; align-items: center; justify-content: center; background: #fff; border: 3px dashed var(--border); border-radius: var(--radius-control); padding: 14px; }
 .secret code { font: 800 26px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; word-break: break-all; }
 button.mini { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; box-shadow: 0 2px 0 var(--border); }
 .check { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; font-weight: 800; }
@@ -27,4 +30,7 @@ button.mini { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; box-sh
 a { color: var(--ink); font-weight: 800; }
 label + label { margin-top: 12px; }
 .note { text-align: left; color: var(--muted); font-size: 13px; margin: 8px 0 0; }
-.role { display: inline-block; background: #fff3c4; border: 2px solid var(--border); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 800; }
+.role { display: inline-block; background: #fff3c4; border: 2px solid var(--border); border-radius: var(--radius-control); padding: 0 8px; font-size: 13px; font-weight: 800; }
+
+button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
diff --git a/src/client/login.html b/src/client/login.html
index 36bf87e83..0ac424a3c 100644
--- a/src/client/login.html
+++ b/src/client/login.html
@@ -10,7 +10,7 @@
   <body>
     <main class="card">
       <div class="logo" aria-hidden="true">
-        <svg viewBox="0 0 64 64" width="72" height="72"><rect x="6" y="30" width="52" height="8" rx="3" fill="#e0a96d"/><rect x="18" y="14" width="28" height="18" rx="3" fill="#2b2d42"/><rect x="21" y="17" width="22" height="12" rx="1" fill="#7cf29a"/><circle cx="32" cy="50" r="9" fill="#ff8a5b"/><circle cx="29" cy="48" r="1.8" fill="#222"/><circle cx="35" cy="48" r="1.8" fill="#222"/></svg>
+        <svg viewBox="0 0 64 64" width="72" height="72" shape-rendering="crispEdges"><rect x="6" y="30" width="52" height="8" fill="#b88a58"/><rect x="6" y="38" width="52" height="3" fill="#8a6339"/><rect x="18" y="12" width="28" height="18" fill="#29464a"/><rect x="21" y="15" width="22" height="12" fill="#8fe3b0"/><rect x="24" y="19" width="4" height="4" fill="#29464a"/><rect x="36" y="19" width="4" height="4" fill="#29464a"/><rect x="23" y="41" width="18" height="16" fill="#216c70"/><rect x="26" y="45" width="4" height="4" fill="#fff9ee"/><rect x="34" y="45" width="4" height="4" fill="#fff9ee"/></svg>
       </div>
       <h1>Agent Office</h1>
       <p class="sub" id="sub">Knock knock. What's the password?</p>
diff --git a/src/client/style.css b/src/client/style.css
index 2325d5ea9..d86b5836c 100644
--- a/src/client/style.css
+++ b/src/client/style.css
@@ -5,3 +5,5 @@
 @import './styles/base.css';
 @import './styles/hud.css';
 @import './styles/loading.css';
+
+@import './styles/voxel-ui.css';
diff --git a/src/client/styles/base.css b/src/client/styles/base.css
index c39824a75..d08998eee 100644
--- a/src/client/styles/base.css
+++ b/src/client/styles/base.css
@@ -3,21 +3,7 @@
    The office adds its HUD and loading screen (style.css); each window's own look sits next to its
    module in ui/ and comes in with it. */
 
-:root {
-  --ink: #2b2d42;
-  --paper: #fffaf3;
-  --paper-2: #fff1de;
-  --accent: #ff8a5b;
-  --accent-ink: #ffffff;
-  --muted: #7a6f65;
-  --good: #06d6a0;
-  --warn: #ffd166;
-  --bad: #ef476f;
-  --info: #5bc0eb;
-  --shadow: 0 4px 0 var(--ink);
-  --radius: 16px;
-  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
-}
+@import './voxel-tokens.css';
 
 * { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe3ff; }
@@ -35,7 +21,7 @@ button { font-family: inherit; }
 .btn {
   display: inline-flex; align-items: center; gap: 6px;
   padding: 7px 12px; font-size: 14px; font-weight: 800; color: var(--ink);
-  background: #fff; border: 3px solid var(--ink); border-radius: 12px; cursor: pointer;
+  background: #fff; border: 3px solid var(--ink); border-radius: var(--radius-control); cursor: pointer;
   box-shadow: 0 3px 0 var(--ink); transition: transform .05s;
   white-space: nowrap;
 }
@@ -48,8 +34,8 @@ button { font-family: inherit; }
 
 /* Status dots and pills, empty lists, key caps, toasts and the reconnecting banner: the office's HUD
    and windows show them, and so does the 2D view. */
-.dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
-.pill { font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap; }
+.dot { width: 12px; height: 12px; border-radius: var(--radius-control); border: 2px solid var(--ink); flex: none; }
+.pill { font-size: 11px; font-weight: 900; padding: 2px 7px; border-radius: var(--radius-control); border: 2px solid var(--ink); white-space: nowrap; }
 .pill.starting, .pill.idle { background: #e0f2fe; }
 .pill.working { background: var(--warn); }
 .pill.needs_input { background: var(--bad); color: #fff; animation: pulse 1s infinite; }
@@ -58,27 +44,27 @@ button { font-family: inherit; }
 .pill.lost { background: #ffb703; }
 .empty { color: var(--muted); font-size: 13px; font-weight: 600; }
 @keyframes pulse { 50% { transform: scale(1.08); } }
-.key { display: inline-block; min-width: 26px; padding: 1px 7px; margin-right: 5px; border-radius: 7px; background: var(--paper); color: var(--ink); text-align: center; font-weight: 900; box-shadow: 0 2px 0 #999; }
+.key { display: inline-block; min-width: 26px; padding: 1px 7px; margin-right: 5px; border-radius: var(--radius-control); background: var(--paper); color: var(--ink); text-align: center; font-weight: 900; box-shadow: 0 2px 0 #999; }
 
 #toasts { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none !important; }
-.toast { background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); animation: toast-in .25s ease-out; }
+.toast { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 8px 14px; font-weight: 800; font-size: 14px; box-shadow: var(--shadow); animation: toast-in .25s ease-out; }
 .toast.warn { background: #fff3c4; }
 .toast.error { background: #ffd6e0; }
 @keyframes toast-in { from { transform: translateY(-10px); opacity: 0; } }
 
-.conn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; font-weight: 900; padding: 6px 14px; border-radius: 12px; border: 3px solid var(--ink); }
+.conn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--bad); color: #fff; font-weight: 900; padding: 6px 14px; border-radius: var(--radius-control); border: 3px solid var(--ink); }
 
 /* ---------- Modals ---------- */
 .backdrop { position: fixed; inset: 0; background: rgba(43, 45, 66, .45); display: grid; place-items: center; padding: 16px; z-index: 50; animation: fade .15s; }
 @keyframes fade { from { opacity: 0; } }
-.modal { background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .18s ease-out; }
+.modal { background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 6px 0 var(--ink); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .18s ease-out; }
 @keyframes pop { from { transform: scale(.96); opacity: .5; } }
 .modal header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 3px solid var(--ink); background: var(--paper-2); }
 .modal header h2 { margin: 0; font-size: 18px; font-weight: 900; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .modal .body { padding: 16px; overflow: auto; }
 .modal footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 3px solid var(--ink); background: var(--paper-2); align-items: center; }
 .modal footer .grow { flex: 1; font-size: 12px; color: var(--muted); font-weight: 700; }
-.modal textarea, .modal input[type=text], .modal input[type=password] { width: 100%; font: inherit; font-size: 15px; border: 3px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: #fff; outline: none; resize: vertical; }
+.modal textarea, .modal input[type=text], .modal input[type=password] { width: 100%; font: inherit; font-size: 15px; border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 10px 12px; background: #fff; outline: none; resize: vertical; }
 .modal textarea:focus, .modal input[type=text]:focus, .modal input[type=password]:focus { border-color: var(--accent); }
 .modal label { font-weight: 800; font-size: 14px; display: block; margin-bottom: 6px; }
 .close { width: 34px; height: 34px; padding: 0; justify-content: center; }
@@ -94,15 +80,15 @@ button { font-family: inherit; }
 .webhook input[type=text] { flex: 1; min-width: 0; }
 
 .swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
-.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; }
+.swatch { width: 34px; height: 34px; border-radius: var(--radius-control); border: 3px solid var(--ink); cursor: pointer; }
 .swatch.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
 
 .svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-.svc-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
+.svc-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
 .svc-list li:hover { background: var(--paper-2); }
-.svc-list li.on { background: #fff1de; border-color: var(--accent); }
+.svc-list li.on { background: var(--paper-2); border-color: var(--accent); }
 .svc-list li:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
-.svc-list .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
+.svc-list .dot { width: 14px; height: 14px; border-radius: var(--radius-control); border: 2px solid var(--ink); flex: none; }
 .svc-main { flex: 1; min-width: 0; }
 .svc-title { font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .svc-meta { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -119,10 +105,10 @@ a.when:hover { text-decoration: underline; }
 .provider-choice label { margin: 0; white-space: nowrap; }
 .provider-model label { margin: 0; font-size: 12px; }
 .provider-model input:invalid { border-color: var(--bad); }
-.provider-summary .btn { padding: 3px 9px; font-size: 12px; border-width: 2px; border-radius: 9px; box-shadow: 0 2px 0 var(--ink); }
+.provider-summary .btn { padding: 3px 9px; font-size: 12px; border-width: 2px; border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); }
 .charsel-opts label { margin: 14px 0 8px; }
-.col-search input[type=text] { font-size: 13px; border-width: 2px; border-radius: 9px; padding: 5px 26px 5px 9px; }
+.col-search input[type=text] { font-size: 13px; border-width: 2px; border-radius: var(--radius-control); padding: 5px 26px 5px 9px; }
 .gh-label-edit { padding: 1px 9px; font-size: 12px; box-shadow: 0 2px 0 var(--ink); }
-.pd-side input[type=text] { width: 100%; font: inherit; font-size: 13px; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 9px; background: #fff; outline: none; }
-.elevator .dir-change { margin-left: 6px; padding: 1px 8px; font-size: 12px; border-width: 2px; border-radius: 9px; box-shadow: 0 2px 0 var(--ink); vertical-align: baseline; }
+.pd-side input[type=text] { width: 100%; font: inherit; font-size: 13px; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 5px 9px; background: #fff; outline: none; }
+.elevator .dir-change { margin-left: 6px; padding: 1px 8px; font-size: 12px; border-width: 2px; border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); vertical-align: baseline; }
 .meeting-field label { margin: 0; }
diff --git a/src/client/styles/hud.css b/src/client/styles/hud.css
index a223d6486..eaed38f96 100644
--- a/src/client/styles/hud.css
+++ b/src/client/styles/hud.css
@@ -27,13 +27,13 @@
 .dock-menu { width: 44px; padding: 0; justify-content: center; }
 .dock-menu[aria-expanded=true] { background: var(--paper-2); }
 .burger { display: flex; flex-direction: column; gap: 3px; }
-.burger i { display: block; width: 18px; height: 3px; border-radius: 2px; background: var(--ink); }
+.burger i { display: block; width: 18px; height: 3px; border-radius: var(--radius-control); background: var(--ink); }
 
 /* Panels you turned off from the ☰ menu. The chat still shows while you type in it. */
 .hud-off { display: none !important; }
 .chat.hud-off.peek { display: flex !important; }
 .project-meta.hud-off.lobby { display: block !important; }
-.panel-x { flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 900 12px/1 var(--font); cursor: pointer; opacity: 0; transition: opacity .12s; align-self: center; }
+.panel-x { flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); font: 900 12px/1 var(--font); cursor: pointer; opacity: 0; transition: opacity .12s; align-self: center; }
 .side h3 :is(.cost, .plan) ~ .panel-x { margin-left: 2px; }
 .side section:hover .panel-x, .panel-x:focus-visible { opacity: 1; }
 .panel-x:hover { background: var(--paper-2); color: var(--ink); }
@@ -45,7 +45,7 @@
 .side .count { color: var(--muted); font-weight: 700; }
 .side section { padding: 10px 12px; overflow: auto; }
 .side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
-.people li, .workers li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 3px 4px; border-radius: 8px; }
+.people li, .workers li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 3px 4px; border-radius: var(--radius-control); }
 .workers li { cursor: pointer; }
 .workers li:hover { background: var(--paper-2); }
 .people .you { color: var(--muted); font-weight: 600; }
@@ -69,7 +69,7 @@
 .usage .row b { font-weight: 900; font-variant-numeric: tabular-nums; }
 .usage .muted { color: var(--muted); font-weight: 600; }
 .usage.over .row b { color: var(--bad); }
-.budget, .meter { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
+.budget, .meter { height: 10px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; overflow: hidden; }
 .budget .fill, .meter .fill { height: 100%; background: var(--good); transition: width .3s; }
 .budget.near .fill, .meter.near .fill { background: var(--warn); }
 .budget.over .fill, .meter.over .fill { background: var(--bad); }
@@ -86,7 +86,7 @@
 .limits .muted { color: var(--muted); font-weight: 600; }
 
 /* Workers waiting on you: a count in the Workers panel (click or N to go to them) and arrows at the edge of the screen. */
-#waiting { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 8px; padding: 5px 8px; border: 2px solid var(--ink); border-radius: 10px; background: #ffe3ea; color: var(--ink); font: inherit; font-size: 13px; font-weight: 900; text-align: left; cursor: pointer; }
+#waiting { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 8px; padding: 5px 8px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #ffe3ea; color: var(--ink); font: inherit; font-size: 13px; font-weight: 900; text-align: left; cursor: pointer; }
 #waiting:hover { background: #ffd0dc; }
 /* Someone in it needs you (features/needsyou pulses it): the count in red, and that worker's row on top, in red too. */
 #waiting.needs-you-now { background: var(--bad); color: #fff; }
@@ -105,18 +105,18 @@
 #hud > .chat { pointer-events: none; }
 #chat-log { list-style: none; margin: 0; padding: 0 0 3px; max-height: 190px; width: 100%; overflow: auto; font-size: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; scrollbar-width: none; }
 #chat-log:empty { display: none; }
-#chat-log li { max-width: 100%; padding: 3px 9px; background: rgba(255, 250, 243, .94); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); overflow-wrap: anywhere; animation: chat-out .6s ease-in forwards; }
+#chat-log li { max-width: 100%; padding: 3px 9px; background: rgba(255, 250, 243, .94); border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); overflow-wrap: anywhere; animation: chat-out .6s ease-in forwards; }
 @keyframes chat-out { to { opacity: 0; visibility: hidden; } }
 .chat:is(:hover, :focus-within) #chat-log { pointer-events: auto; scrollbar-width: thin; }
 .chat:is(:hover, :focus-within) #chat-log li { animation: none; }
 #chat-log b { font-weight: 900; }
 #chat-log .sys { color: var(--muted); font-style: italic; }
-#chat-input { pointer-events: auto; width: 180px; border: 2px solid var(--ink); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 0 var(--ink); outline: none; transition: width .15s; }
+#chat-input { pointer-events: auto; width: 180px; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 7px 10px; font: inherit; font-size: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 0 var(--ink); outline: none; transition: width .15s; }
 #chat-input:focus { width: 100%; border-color: var(--accent); background: #fff; }
 
 .hint {
   position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
-  background: var(--ink); color: var(--paper); border: 3px solid var(--paper); border-radius: 14px;
+  background: var(--ink); color: var(--paper); border: 3px solid var(--paper); border-radius: var(--radius-control);
   padding: 10px 16px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
   display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: min(720px, calc(100vw - 380px));
   pointer-events: none !important;
@@ -126,7 +126,7 @@
 /* Winding up a shot with the basketball: the marker runs up and down; let go in the green. */
 .shot-meter {
   position: absolute; left: 50%; bottom: 92px; width: 240px; height: 18px; transform: translateX(-50%);
-  background: var(--ink); border: 3px solid var(--paper); border-radius: 10px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
+  background: var(--ink); border: 3px solid var(--paper); border-radius: var(--radius-control); box-shadow: 0 4px 0 rgba(0,0,0,.35);
   overflow: hidden; pointer-events: none !important;
 }
 .shot-meter .sweet {
@@ -141,13 +141,13 @@
 
 .crosshair {
   position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
-  border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); opacity: .85;
+  border-radius: var(--radius-control); background: var(--paper); border: 2px solid var(--ink); opacity: .85;
   transition: transform .1s, background .1s; pointer-events: none !important;
 }
 .crosshair.on { transform: scale(1.6); background: var(--accent); opacity: 1; }
 .crosshair .look-hint {
   display: none; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap;
-  background: var(--ink); color: var(--paper); border-radius: 10px; padding: 4px 10px; font-size: 13px; font-weight: 800;
+  background: var(--ink); color: var(--paper); border-radius: var(--radius-control); padding: 4px 10px; font-size: 13px; font-weight: 800;
 }
 .crosshair.free .look-hint { display: block; }
 .crosshair.on .look-hint { transform: translateX(-50%) scale(.625); transform-origin: top center; }
@@ -159,11 +159,11 @@
   background: radial-gradient(circle at center, transparent 0, transparent 39vmin, rgba(8,10,18,.72) 43vmin, #080a12 48vmin);
 }
 .telescope-glass {
-  position: absolute; inset: 5vmin; border-radius: 50%;
+  position: absolute; inset: 5vmin; border-radius: var(--radius-control);
   background: radial-gradient(circle, transparent 52%, rgba(8,18,28,.3) 72%, rgba(3,7,14,.76) 100%);
   box-shadow: inset 0 0 4vmin rgba(100,190,220,.2); mix-blend-mode: multiply;
 }
-.telescope-reticle { position: absolute; left: 50%; top: 50%; width: 8vmin; height: 8vmin; transform: translate(-50%,-50%); border: 1px solid rgba(230,245,245,.3); border-radius: 50%; }
+.telescope-reticle { position: absolute; left: 50%; top: 50%; width: 8vmin; height: 8vmin; transform: translate(-50%,-50%); border: 1px solid rgba(230,245,245,.3); border-radius: var(--radius-control); }
 .telescope-reticle::before, .telescope-reticle::after { content: ''; position: absolute; background: rgba(230,245,245,.28); }
 .telescope-reticle::before { left: 50%; top: -2vmin; width: 1px; height: 12vmin; }
 .telescope-reticle::after { top: 50%; left: -2vmin; height: 1px; width: 12vmin; }
@@ -186,12 +186,12 @@ body.telescope-active #hud { visibility: hidden; }
 #shares { position: absolute; left: 12px; top: 72px; display: flex; flex-direction: column; gap: 8px; }
 /* Coffee: how much of the buzz is left, under the project name (screen shares move down under it). */
 .caffeine { position: absolute; left: 12px; top: 72px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; font-weight: 900; pointer-events: none !important; }
-.caffeine .bar { width: 96px; height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: #f1e4d3; overflow: hidden; }
+.caffeine .bar { width: 96px; height: 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #f1e4d3; overflow: hidden; }
 .caffeine .bar span { display: block; width: 0; height: 100%; background: #9c6644; transition: width 1s linear; }
 .caffeine .left { min-width: 24px; font-variant-numeric: tabular-nums; }
 .caffeine.jittery { animation: jitters .1s steps(2) infinite; }
 .golf { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(300px, calc(100vw - 32px)); padding: 8px 12px 9px; display: grid; gap: 6px; font-size: 13px; font-weight: 900; text-align: center; pointer-events: none !important; }
-.golf-meter { position: relative; height: 16px; border: 3px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, #caffbf, #ffd166 70%, #ef476f); overflow: hidden; }
+.golf-meter { position: relative; height: 16px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: linear-gradient(90deg, #caffbf, #ffd166 70%, #ef476f); overflow: hidden; }
 /* Covers the part of the meter's colors that isn't filled, from the right. */
 .golf-rest { position: absolute; inset: 0 0 0 auto; width: 100%; background: #f1e4d3; }
 .golf-last { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--ink); }
@@ -199,7 +199,7 @@ body.telescope-active #hud { visibility: hidden; }
 #hud:has(.golf:not(.hidden)) #toasts { translate: 0 48px; }
 /* At the rooftop bar's dart board or axe lane (see features/bargames/controller.ts): the meter with its green, and the round so far. */
 .throw { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: min(320px, calc(100vw - 32px)); padding: 8px 12px 9px; display: grid; gap: 6px; font-size: 13px; font-weight: 900; text-align: center; pointer-events: none !important; }
-.throw-meter { position: relative; height: 16px; border: 3px solid var(--ink); border-radius: 999px; background: #f1e4d3; overflow: hidden; }
+.throw-meter { position: relative; height: 16px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #f1e4d3; overflow: hidden; }
 .throw-sweet { position: absolute; top: 0; bottom: 0; background: var(--good); }
 .throw-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255,209,102,.3), rgba(255,138,91,.75)); border-right: 3px solid var(--ink); }
 .throw-last { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: var(--ink); opacity: .45; }
@@ -211,9 +211,9 @@ body.telescope-active #hud { visibility: hidden; }
 .caffeine:not(.hidden) ~ #shares { top: 120px; }
 /* The floor details make the name taller: what's under it moves down. */
 #hud:has(#project-meta:not(.hud-off)) :is(.caffeine, #shares) { translate: 0 16px; }
-.share-thumb { width: 220px; border: 3px solid var(--ink); border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--shadow); cursor: pointer; position: relative; }
+.share-thumb { width: 220px; border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; background: #000; box-shadow: var(--shadow); cursor: pointer; position: relative; }
 .share-thumb video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: contain; background: #111; }
-.share-thumb .who { position: absolute; left: 6px; bottom: 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; font-size: 12px; font-weight: 800; }
+.share-thumb .who { position: absolute; left: 6px; bottom: 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 1px 6px; font-size: 12px; font-weight: 800; }
 
 /* Screen share viewer */
 .modal.viewer { width: min(1400px, 100%); background: #111; }
@@ -230,7 +230,7 @@ body.telescope-active #hud { visibility: hidden; }
 /* A teammate with their own account, in the people panel. */
 .acct { font-size: 11px; color: var(--good); font-weight: 900; }
 /* A count on a dock button or a ☰ menu item, and by the floor's name the floors waiting on you. */
-.svc-count { margin-left: 6px; background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
+.svc-count { margin-left: 6px; background: var(--accent); color: #fff; border-radius: var(--radius-control); padding: 0 7px; font-size: 12px; }
 
 /* Sliding down a fire pole: streaks of speed round the edge of the screen. */
 #whoosh { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .55) 0deg 1.2deg, transparent 1.2deg 9deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 78%); mask: radial-gradient(circle at 50% 50%, transparent 38%, #000 78%); }
@@ -253,10 +253,10 @@ body.telescope-active #hud { visibility: hidden; }
 .arcade { position: relative; animation: fade .25s .3s both; }
 .arcade-screen { width: 100%; height: 100%; overflow: hidden; background: #0b1320; }
 .arcade canvas { display: block; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
-.arcade-bar { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 6px 6px 6px 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 14px; }
+.arcade-bar { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; padding: 6px 6px 6px 14px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 4px 0 var(--ink); font-weight: 800; font-size: 14px; }
 .arcade-bar .tip { color: var(--muted); font-size: 12px; }
 /* Its ✕ hangs off the screen's top right corner rather than over the game. */
 .arcade > .close.corner { top: 0; right: auto; left: calc(100% + 10px); }
 /* The arcade cabinet in the lounge (features/cabinet/ui.ts) plays on the keyboard, and says so over the game when a worker of yours needs input. */
 .arcade.cabinet canvas { cursor: default; }
-.cabinet-call { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 6px 6px 6px 14px; background: var(--warn); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); font-weight: 900; font-size: 15px; animation: pop .18s ease-out; }
+.cabinet-call { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 6px 6px 6px 14px; background: var(--warn); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 4px 0 var(--ink); font-weight: 900; font-size: 15px; animation: pop .18s ease-out; }
diff --git a/src/client/styles/loading.css b/src/client/styles/loading.css
index c302129a6..032e059d6 100644
--- a/src/client/styles/loading.css
+++ b/src/client/styles/loading.css
@@ -3,10 +3,10 @@
 #loading.gone { opacity: 0; pointer-events: none; }
 .loading-card { width: min(320px, 100%); padding: 22px 26px 20px; text-align: center; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
 .loading-paw { display: block; width: 54px; height: 54px; margin: 0 auto; fill: var(--accent); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; transform-origin: 50% 100%; animation: loading-hop 1.1s ease-in-out infinite; }
-.loading-shadow { display: block; width: 38px; height: 7px; margin: 3px auto 12px; border-radius: 50%; background: rgba(43, 45, 66, .18); animation: loading-shadow 1.1s ease-in-out infinite; }
+.loading-shadow { display: block; width: 38px; height: 7px; margin: 3px auto 12px; border-radius: var(--radius-control); background: rgba(43, 45, 66, .18); animation: loading-shadow 1.1s ease-in-out infinite; }
 .loading-name { margin-bottom: 14px; font-size: 26px; font-weight: 900; }
-.loading-bar { height: 18px; padding: 2px; background: #fff; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; }
-.loading-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
+.loading-bar { height: 18px; padding: 2px; background: #fff; border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; }
+.loading-fill { display: block; width: 0; height: 100%; border-radius: var(--radius-control); background: var(--accent); transition: width .3s ease; }
 .loading-say { margin: 12px 0 0; font-size: 14px; font-weight: 800; color: var(--muted); }
 /* A hop: squashed on landing, up and tipped over at the top. Its shadow shrinks as it goes up. */
 @keyframes loading-hop {
diff --git a/src/client/styles/voxel-tokens.css b/src/client/styles/voxel-tokens.css
new file mode 100644
index 000000000..d662bd74b
--- /dev/null
+++ b/src/client/styles/voxel-tokens.css
@@ -0,0 +1,21 @@
+/* Shared by the office, lite view and sign-in pages. World and UI use the same warm voxel palette. */
+:root {
+  --ink: #29464a;
+  --paper: #fff9ee;
+  --paper-2: #eee7d8;
+  --accent: #216c70;
+  --accent-ink: #ffffff;
+  --muted: #56675f;
+  --good: #287a62;
+  --warn: #edbd65;
+  --bad: #b7463f;
+  --info: #247389;
+  --edge: #8a9e93;
+  --tile: #e5eddf;
+  --button-shadow: 2px 3px 0 #84998e;
+  --shadow: 4px 4px 0 #789389, 7px 7px 0 rgba(41, 70, 74, .2);
+  --radius: 2px;
+  --radius-control: 2px;
+  --font: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
+  --font-label: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+}
diff --git a/src/client/styles/voxel-ui.css b/src/client/styles/voxel-ui.css
new file mode 100644
index 000000000..b3ec3b141
--- /dev/null
+++ b/src/client/styles/voxel-ui.css
@@ -0,0 +1,71 @@
+/* Surface treatments sit on the shared frame; feature layouts and event handling remain their own. */
+:root {
+.modal {
+  border-color: var(--ink);
+  border-width: 2px;
+  box-shadow: 5px 5px 0 var(--accent), 9px 9px 0 rgba(41, 70, 74, .24), 0 18px 48px rgba(23, 44, 43, .2);
+}
+.modal header {
+  background-color: var(--paper-2);
+  background-image: linear-gradient(90deg, rgba(138, 158, 147, .1) 1px, transparent 1px), linear-gradient(rgba(138, 158, 147, .1) 1px, transparent 1px);
+  background-size: 16px 16px;
+  border-bottom: 2px solid var(--edge);
+  min-height: 58px;
+}
+.modal header h2 { font-family: var(--font-label); font-size: 16px; letter-spacing: -.035em; }
+.modal footer { border-top: 2px solid var(--edge); background: var(--paper-2); }
+.modal :is(textarea, input[type=text], input[type=password]) { border-width: 2px; border-color: var(--edge); box-shadow: inset 2px 2px 0 #ede8dc; }
+.modal :is(textarea, input[type=text], input[type=password]):focus { border-color: var(--accent); box-shadow: inset 2px 2px 0 #e5eddf, 0 0 0 2px rgba(33, 108, 112, .15); }
+.modal .close { border-width: 2px; background: var(--paper); box-shadow: var(--button-shadow); }
+.modal .close:hover { background: var(--tile); }
+.modal .close:active { box-shadow: 0 1px 0 var(--edge); }
+.backdrop:not(.menu-backdrop) { background: rgba(26, 46, 45, .52); }
+
+.btn { border-width: 2px; box-shadow: var(--button-shadow); background: var(--paper); transition: background-color .12s, transform .08s, box-shadow .08s; }
+.btn:hover:not(:disabled) { background: var(--tile); border-color: var(--accent); }
+.btn:active:not(:disabled) { box-shadow: 1px 1px 0 var(--edge); }
+.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 2px 3px 0 #174c50; }
+.btn.primary:hover:not(:disabled) { background: #19585c; border-color: #19585c; }
+.btn.on { background: var(--good); border-color: #205e4e; color: #fff; }
+.btn.on:hover:not(:disabled) { background: #20674f; border-color: #205e4e; }
+.btn.danger { background: var(--bad); border-color: #8c3733; color: #fff; box-shadow: 2px 3px 0 #8c3733; }
+.btn.danger:hover:not(:disabled) { background: #983b36; border-color: #8c3733; }
+.btn:disabled { opacity: .55; box-shadow: none; transform: none; cursor: not-allowed; }
+.btn[aria-pressed=true]:not(.primary, .danger, .on) { background: var(--tile); border-color: var(--accent); }
+:is(button, a, input, textarea, select, [role=button], [role=menuitem], [role=option], [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+
+.panel { border-width: 2px; }
+.toast { border-width: 2px; border-left: 6px solid var(--accent); box-shadow: var(--shadow); }
+.toast.warn { background: #fff0d2; border-left-color: #9b651c; }
+.toast.error { background: #fce5dc; border-left-color: var(--bad); }
+.conn { border-width: 2px; box-shadow: var(--shadow); }
+.key, kbd { font-family: var(--font-label); box-shadow: 2px 2px 0 var(--edge); }
+.pill { border-width: 1px; letter-spacing: .025em; }
+.swatch { box-shadow: inset 0 0 0 2px rgba(255, 249, 238, .4), 2px 2px 0 rgba(41, 70, 74, .2); }
+.swatch.sel { outline-offset: 3px; }
+.svc-list li { border-width: 2px; border-color: var(--edge); box-shadow: 2px 3px 0 #bdc7b9; }
+.svc-list li.on { background: var(--tile); border-color: var(--accent); }
+.charsel-stage { border-width: 2px; border-color: var(--edge); background: linear-gradient(0deg, #e0e9d8 0 23%, #f5f0e4 23%); }
+.charsel-stage .tip { background: var(--paper); padding: 5px 8px; bottom: 0; border-top: 1px solid var(--edge); }
+.modal.settings .setting { border-color: var(--edge); background: var(--paper); box-shadow: 2px 2px 0 #dedfd0; }
+.modal.settings .settings-tab.on { background: var(--tile); border-color: var(--accent); box-shadow: 2px 2px 0 var(--edge); }
+.modal.settings .scope { border-width: 1px; }
+.hud-menu { border-width: 2px; box-shadow: var(--shadow); }
+.hud-menu .menu-item:hover, .hud-menu .menu-item:focus-visible { background: var(--tile); }
+.hud-menu .menu-item.primary .mi-label { color: var(--accent); }
+.hud-menu .menu-sec, .floor-menu-head { font-family: var(--font-label); font-weight: 700; letter-spacing: .1em; }
+.hud-menu .menu-foot { border-top: 1px solid var(--edge); }
+.switch { border-width: 2px; }
+.floor-item { border-width: 2px; border-color: var(--edge); box-shadow: var(--button-shadow); }
+.floor-item.here { background: var(--tile); border-color: var(--accent); }
+.floor-item .floor-no { border-width: 2px; box-shadow: 2px 2px 0 var(--edge); }
+.dock-panel[aria-pressed=true] { background: var(--tile); border-color: var(--accent); }
+.palette-row.on { background: var(--tile); }
+.loading-card { border-width: 2px; }
+#loading { background: #dce5d6; }
+
+@media (prefers-reduced-motion: reduce) {
+  .modal, .toast, .hud-menu, .floor-menu, .backdrop { animation: none; }
+  .btn, .switch, .switch::after { transition: none; }
+}
+}
diff --git a/src/client/ui/accounts.css b/src/client/ui/accounts.css
index b5713f141..74f0eb39b 100644
--- a/src/client/ui/accounts.css
+++ b/src/client/ui/accounts.css
@@ -2,8 +2,8 @@
 .accounts .dot { background: #dee2e6; }
 .accounts .dot.on { background: var(--good); }
 .accounts .you { color: var(--muted); font-weight: 600; }
-.accounts .invite-row select { font: inherit; font-weight: 800; border: 3px solid var(--ink); border-radius: 12px; padding: 0 8px; background: #fff; color: var(--ink); }
+.accounts .invite-row select { font: inherit; font-weight: 800; border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 0 8px; background: #fff; color: var(--ink); }
 .accounts .cmd { margin-top: 10px; }
 .accounts .team-head .btn { padding: 3px 10px; font-size: 13px; }
-.role { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 999px; border: 2px solid var(--ink); background: #e0f2fe; }
+.role { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: var(--radius-control); border: 2px solid var(--ink); background: #e0f2fe; }
 .role.admin { background: var(--warn); }
diff --git a/src/client/ui/ask.css b/src/client/ui/ask.css
index 2d23402ab..c670da32c 100644
--- a/src/client/ui/ask.css
+++ b/src/client/ui/ask.css
@@ -7,5 +7,5 @@
 .ask-to .btn .dot { width: 10px; height: 10px; }
 .ask-context { margin-top: 12px; font-size: 13px; }
 .ask-context summary { cursor: pointer; font-weight: 800; color: var(--muted); }
-.ask-context pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--paper-2); border: 2px solid rgba(43, 45, 66, .2); border-radius: 10px; padding: 8px 10px; }
+.ask-context pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--paper-2); border: 2px solid rgba(43, 45, 66, .2); border-radius: var(--radius-control); padding: 8px 10px; }
 .modal label.ask-wt { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; cursor: pointer; }
diff --git a/src/client/ui/boards.css b/src/client/ui/boards.css
index de610b8d7..9a1bbd272 100644
--- a/src/client/ui/boards.css
+++ b/src/client/ui/boards.css
@@ -1,7 +1,7 @@
 /* Boards */
 .modal.board { width: min(1400px, 100%); height: min(860px, calc(100vh - 32px)); }
 .modal.board .body { flex: 1; display: flex; gap: 12px; padding: 12px; background: #d8a86a; background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.5px); background-size: 9px 9px; }
-.column { flex: 1; min-width: 220px; display: flex; flex-direction: column; background: rgba(255, 250, 243, .55); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
+.column { flex: 1; min-width: 220px; display: flex; flex-direction: column; background: rgba(255, 250, 243, .55); border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; }
 .column h4 { margin: 0; font-size: 14px; font-weight: 900; background: var(--paper); border-bottom: 3px solid var(--ink); }
 /* Click a column's header to filter it by label. */
 .col-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
@@ -22,34 +22,34 @@
 .col-filter { flex-direction: column; align-items: stretch; gap: 8px; max-height: 45%; flex-shrink: 0; }
 .col-labels { display: flex; flex-wrap: wrap; gap: 5px; overflow: auto; min-height: 0; }
 .col-labels > small { color: var(--muted); font-weight: 700; }
-.label-pick { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 2px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; opacity: .55; }
+.label-pick { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border: 2px solid transparent; border-radius: var(--radius-control); background: none; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; opacity: .55; }
 .label-pick:hover { opacity: 1; }
 .label-pick[aria-pressed="true"] { opacity: 1; border-color: var(--ink); background: #fff; color: var(--ink); }
 .label-pick:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
 .col-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
-.col-filter-foot .btn.small { padding: 2px 8px; font-size: 12px; border-width: 2px; border-radius: 9px; }
+.col-filter-foot .btn.small { padding: 2px 8px; font-size: 12px; border-width: 2px; border-radius: var(--radius-control); }
 .column ul { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; }
-.card { background: #fff7b0; border: 2px solid var(--ink); border-radius: 6px; padding: 10px 10px 8px; box-shadow: 0 3px 0 rgba(43,45,66,.6); cursor: pointer; position: relative; transform: rotate(var(--tilt, 0deg)); transition: transform .1s; }
+.card { background: #fff7b0; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 10px 10px 8px; box-shadow: 0 3px 0 rgba(43,45,66,.6); cursor: pointer; position: relative; transform: rotate(var(--tilt, 0deg)); transition: transform .1s; }
 .card:hover { transform: rotate(0deg) scale(1.02); }
-.card::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pin, #ef476f); border: 2px solid var(--ink); }
+.card::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: var(--radius-control); background: var(--pin, #ef476f); border: 2px solid var(--ink); }
 .card .num { font-size: 12px; font-weight: 900; color: var(--muted); }
 .card .ttl { font-weight: 800; font-size: 14px; line-height: 1.25; margin: 2px 0 6px; word-break: break-word; }
 .card .meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); align-items: center; }
 /* The desk a PR came from, with a dot in the worker's color. */
-.desk-link { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; white-space: nowrap; }
-.desk-link::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--accent)); border: 1px solid var(--ink); }
+.desk-link { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; color: var(--ink); font-weight: 800; white-space: nowrap; }
+.desk-link::before { content: ''; width: 8px; height: 8px; border-radius: var(--radius-control); background: var(--dot, var(--accent)); border: 1px solid var(--ink); }
 /* A card's 🏷️ (the label picker) shows on hover or focus; touch screens always show it. */
-.card-labels { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 13px; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; opacity: 0; transition: opacity .1s; }
+.card-labels { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 13px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); cursor: pointer; opacity: 0; transition: opacity .1s; }
 .card:hover .card-labels, .card:focus-within .card-labels { opacity: 1; }
 .card-labels:hover { background: var(--paper-2); }
 @media (hover: none) { .card-labels { opacity: 1; } }
 .board-status { font-size: 12px; font-weight: 700; color: var(--muted); }
-.board-error { margin: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 18px 22px; font-weight: 800; max-width: 520px; text-align: center; }
-.detail pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, Menlo, monospace; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 10px; max-height: 45vh; overflow: auto; margin: 10px 0 0; }
+.board-error { margin: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 18px 22px; font-weight: 800; max-width: 520px; text-align: center; }
+.detail pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, Menlo, monospace; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 10px; max-height: 45vh; overflow: auto; margin: 10px 0 0; }
 .detail .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
 .detail a { color: #1d6fd6; font-weight: 800; }
 
 /* A card's chip for the task queue: waiting, running or done. */
-.qchip { padding: 1px 6px; border-radius: 999px; border: 1.5px solid var(--ink); background: #e0f2fe; color: var(--ink); font-size: 10px; font-weight: 900; }
+.qchip { padding: 1px 6px; border-radius: var(--radius-control); border: 1.5px solid var(--ink); background: #e0f2fe; color: var(--ink); font-size: 10px; font-weight: 900; }
 .qchip.running { background: #d8f5e3; }
-.qchip.done { background: #fff1de; }
+.qchip.done { background: var(--paper-2); }
diff --git a/src/client/ui/changes.css b/src/client/ui/changes.css
index 4151fbe6f..554f978a2 100644
--- a/src/client/ui/changes.css
+++ b/src/client/ui/changes.css
@@ -10,11 +10,11 @@
 .changes-files { width: 320px; flex: none; border-right: 3px solid var(--ink); display: flex; flex-direction: column; background: var(--paper-2); min-height: 0; }
 .changes-files h4 { margin: 0; padding: 8px 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid rgba(43,45,66,.15); }
 .changes-files ul { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
-.changes-files li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; border: 2px solid transparent; min-width: 0; }
+.changes-files li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-control); cursor: pointer; font-size: 13px; font-weight: 700; border: 2px solid transparent; min-width: 0; }
 .changes-files li:hover { background: rgba(255,255,255,.7); }
 .changes-files li.on { background: #fff; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
 .changes-files li.empty { cursor: default; justify-content: center; }
-.st { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--ink); font: 900 11px/16px ui-monospace, Menlo, monospace; text-align: center; flex: none; background: #fff; }
+.st { width: 20px; height: 20px; border-radius: var(--radius-control); border: 2px solid var(--ink); font: 900 11px/16px ui-monospace, Menlo, monospace; text-align: center; flex: none; background: #fff; }
 .st.M { background: var(--warn); }
 .st.A { background: var(--good); color: #fff; }
 .st.D { background: var(--bad); color: #fff; }
@@ -25,7 +25,7 @@
 .pm .add { color: #2a9d4b; }
 .pm .del { color: #c3423f; }
 .pm .bin { color: var(--muted); }
-.changes-files .dirty { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--ink); flex: none; }
+.changes-files .dirty { width: 8px; height: 8px; border-radius: var(--radius-control); background: var(--accent); border: 1.5px solid var(--ink); flex: none; }
 .changes-diff { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
 .changes-diff .dh { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 2px solid rgba(43,45,66,.15); font-weight: 800; font-size: 13px; }
 .changes-diff .dh:empty { display: none; }
@@ -48,9 +48,9 @@
 .img-preview figcaption { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
 .img-preview figcaption b { text-transform: uppercase; letter-spacing: .04em; font-weight: 900; }
 /* A checkerboard behind the picture, so its transparent parts show. */
-.img-frame { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 8px; border: 2px solid rgba(43,45,66,.15); border-radius: 10px; background: repeating-conic-gradient(#eeeae4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
+.img-frame { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 8px; border: 2px solid rgba(43,45,66,.15); border-radius: var(--radius-control); background: repeating-conic-gradient(#eeeae4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
 .img-frame img { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
-.img-frame p { margin: 0; color: var(--muted); font-weight: 700; font-size: 13px; background: #fff; padding: 4px 8px; border-radius: 8px; }
+.img-frame p { margin: 0; color: var(--muted); font-weight: 700; font-size: 13px; background: #fff; padding: 4px 8px; border-radius: var(--radius-control); }
 .changes-empty { margin: auto; text-align: center; padding: 24px; color: var(--muted); font-weight: 700; max-width: 460px; }
 .changes-empty .big { font-size: 48px; line-height: 1; margin-bottom: 8px; }
 .changes-empty p { margin: 6px 0 0; }
diff --git a/src/client/ui/character.css b/src/client/ui/character.css
index dfcad702e..7de4e79cd 100644
--- a/src/client/ui/character.css
+++ b/src/client/ui/character.css
@@ -2,7 +2,7 @@
 .modal.charsel { width: min(780px, 100%); }
 .charsel .body { display: grid; grid-template-columns: 250px 1fr; gap: 18px; }
 .charsel-stage {
-  position: relative; min-height: 360px; overflow: hidden; border: 3px solid var(--ink); border-radius: 16px;
+  position: relative; min-height: 360px; overflow: hidden; border: 3px solid var(--ink); border-radius: var(--radius-control);
   background: radial-gradient(circle at 50% 30%, #ffffff 0, #e3f3ff 55%, #bfe3ff 100%);
 }
 .charsel-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
diff --git a/src/client/ui/compass.css b/src/client/ui/compass.css
index ac34976f7..8cf11dfae 100644
--- a/src/client/ui/compass.css
+++ b/src/client/ui/compass.css
@@ -3,8 +3,8 @@
 .compass-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; --mark: var(--bad); }
 .compass-mark.done { --mark: var(--good); }
 /* A pin whose point (its square corner) turns to face the worker, with the emoji upright on top. */
-.compass-arrow { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50% 50% 50% 0; border: 3px solid var(--ink); background: var(--mark); }
+.compass-arrow { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: var(--radius-control); border: 3px solid var(--ink); background: var(--mark); }
 .compass-dial { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 17px; line-height: 1; }
 .compass-mark.needs_input .compass-dial { animation: pulse 1s infinite; }
-.compass-who { position: absolute; top: 24px; left: 0; transform: translateX(-50%); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 900; }
+.compass-who { position: absolute; top: 24px; left: 0; transform: translateX(-50%); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: var(--radius-control); background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 900; }
 @media (prefers-reduced-motion: reduce) { .compass-mark.needs_input .compass-dial { animation: none; } }
diff --git a/src/client/ui/dictate.css b/src/client/ui/dictate.css
index ea3ef2f52..708a63eab 100644
--- a/src/client/ui/dictate.css
+++ b/src/client/ui/dictate.css
@@ -11,10 +11,10 @@
 .dictate-field textarea { display: block; }
 .modal .dictate-field textarea { padding-right: 50px; }
 .modal .dictate-field.line input[type=text] { padding-right: 46px; }
-.dictate-field .btn.dictate-mic { position: absolute; top: 8px; right: 8px; padding: 2px 6px; font-size: 15px; border-width: 2px; border-radius: 9px; box-shadow: 0 2px 0 var(--ink); }
+.dictate-field .btn.dictate-mic { position: absolute; top: 8px; right: 8px; padding: 2px 6px; font-size: 15px; border-width: 2px; border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); }
 .dictate-field.line .btn.dictate-mic { top: 5px; right: 6px; }
 
 /* What it hears, over the bottom of the box (above a one-line box) or of the terminal. */
-.dictate-live { position: absolute; left: 10px; bottom: 10px; z-index: 11; max-width: calc(100% - 20px); padding: 4px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 800; pointer-events: none; }
+.dictate-live { position: absolute; left: 10px; bottom: 10px; z-index: 11; max-width: calc(100% - 20px); padding: 4px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 2px solid var(--ink); border-radius: var(--radius-control); background: var(--paper-2); color: var(--ink); font-size: 13px; font-weight: 800; pointer-events: none; }
 .dictate-field.line .dictate-live { bottom: calc(100% + 6px); left: 0; max-width: 100%; }
 .term-host .dictate-live { left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 40px); font-size: 14px; }
diff --git a/src/client/ui/elevator.css b/src/client/ui/elevator.css
index 8aaea1d78..731bcf9c2 100644
--- a/src/client/ui/elevator.css
+++ b/src/client/ui/elevator.css
@@ -2,7 +2,7 @@
 .modal.elevator { width: min(640px, 100%); }
 .elevator .intro { margin: 0 0 12px; font-weight: 700; }
 .elevator .floors { display: grid; gap: 8px; }
-.elevator .floor-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .05s; }
+.elevator .floor-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .05s; }
 .elevator .floor-btn:hover:not(:disabled) { background: var(--paper-2); }
 .elevator .floor-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
 .elevator .floor-btn:disabled { cursor: default; }
@@ -10,21 +10,21 @@
 .elevator .floor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
 .elevator .floor-off { padding: 0 12px; font-size: 16px; }
 .elevator .floor-off:hover { background: #ffe3d6; }
-.elevator .floor-no { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
+.elevator .floor-no { width: 34px; height: 34px; border-radius: var(--radius-control); border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
 .elevator .floor-text { display: flex; flex-direction: column; min-width: 0; }
 .elevator .floor-name { font-weight: 900; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
 .elevator .here-tag { font-size: 11px; font-weight: 800; color: var(--muted); }
 .elevator .floor-sub { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .elevator .floor-stats { font-size: 13px; font-weight: 800; white-space: nowrap; }
 .elevator .floor-stats .waiting { color: var(--bad); }
-.elevator .clone-bar { display: block; height: 7px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); overflow: hidden; }
+.elevator .clone-bar { display: block; height: 7px; margin-top: 5px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: var(--paper-2); overflow: hidden; }
 .elevator .clone-bar > span { display: block; height: 100%; background: var(--good); transition: width .6s ease; }
 .elevator .note + .clone-bar { margin-top: 6px; }
 .elevator .add { margin-top: 16px; }
 .elevator .add h3 { margin: 0 0 8px; font-size: 15px; font-weight: 900; }
 .elevator .repo-search { display: flex; gap: 8px; }
 .elevator .repo-search input { flex: 1; }
-.elevator .repo-list { margin-top: 8px; max-height: 280px; overflow: auto; border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
+.elevator .repo-list { margin-top: 8px; max-height: 280px; overflow: auto; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; }
 .elevator .repo { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-bottom: 2px solid var(--paper-2); cursor: pointer; }
 .elevator .repo:last-child { border-bottom: 0; }
 .elevator .repo:hover { background: var(--paper-2); }
diff --git a/src/client/ui/floormenu.css b/src/client/ui/floormenu.css
index 760e1472d..1b872e727 100644
--- a/src/client/ui/floormenu.css
+++ b/src/client/ui/floormenu.css
@@ -3,13 +3,13 @@
 .floor-menu { position: fixed; z-index: 30; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 110px); overflow: auto; padding: 8px; display: grid; gap: 6px; animation: floor-menu-in .12s ease-out; }
 @keyframes floor-menu-in { from { opacity: 0; transform: translateY(-6px); } }
 .floor-menu-head { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px 0; }
-.floor-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .05s; }
+.floor-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 7px 10px; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 3px 0 var(--ink); cursor: pointer; transition: transform .05s; }
 .floor-item:hover:not(:disabled) { background: var(--paper-2); }
 .floor-item:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
 .floor-item:disabled { cursor: default; }
 .floor-item.here { background: var(--paper-2); box-shadow: none; transform: translateY(2px); }
 .floor-item.add { background: var(--paper); border-style: dashed; box-shadow: none; }
-.floor-item .floor-no { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
+.floor-item .floor-no { width: 30px; height: 30px; border-radius: var(--radius-control); border: 3px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
 .floor-item.add .floor-no { background: #fff; text-shadow: none; }
 .floor-item .floor-text { display: flex; flex-direction: column; min-width: 0; }
 .floor-item .floor-name { font-weight: 900; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
diff --git a/src/client/ui/floorplan.css b/src/client/ui/floorplan.css
index 605517495..956072ea2 100644
--- a/src/client/ui/floorplan.css
+++ b/src/client/ui/floorplan.css
@@ -1,6 +1,6 @@
 /* Signs over the desks, and the back office */
 .modal.desklabel { width: min(520px, 100%); }
-.sign-preview { display: grid; place-items: center; min-height: 92px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: 14px; box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .18); font-size: 34px; font-weight: 900; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
+.sign-preview { display: grid; place-items: center; min-height: 92px; padding: 12px 18px; border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .18); font-size: 34px; font-weight: 900; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
 .sign-preview.placeholder { opacity: .45; }
 .label-ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
 .label-ideas .btn { padding: 3px 10px; font-size: 13px; }
@@ -8,5 +8,5 @@
 .modal.expand { width: min(500px, 100%); }
 .expand-status p { margin: 0 0 10px; font-weight: 700; }
 .expand-rows { display: flex; gap: 8px; margin: 4px 0 12px; }
-.expand-rows span { flex: 1; text-align: center; padding: 8px 0; border: 3px dashed var(--muted); border-radius: 12px; font-weight: 800; color: var(--muted); }
+.expand-rows span { flex: 1; text-align: center; padding: 8px 0; border: 3px dashed var(--muted); border-radius: var(--radius-control); font-weight: 800; color: var(--muted); }
 .expand-rows span.on { border-style: solid; border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
diff --git a/src/client/ui/github/pulldiff.css b/src/client/ui/github/pulldiff.css
index fda178d12..600006d40 100644
--- a/src/client/ui/github/pulldiff.css
+++ b/src/client/ui/github/pulldiff.css
@@ -6,13 +6,13 @@
 /* .seg.pd-mode outranks the shared .seg row, whatever order the sheets load in. */
 .seg.pd-mode { gap: 6px; flex-wrap: nowrap; }
 .pd-mode .btn { flex: 1; justify-content: center; padding: 3px 10px; font-size: 13px; }
-.pd-bar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
+.pd-bar { height: 10px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; overflow: hidden; }
 .pd-bar i { display: block; height: 100%; width: 0; background: var(--good); transition: width .25s; }
 .pd-done-txt { font-size: 12px; font-weight: 800; color: var(--muted); }
 /* The filter box is styled in styles/base.css, after the frame's text box rule. */
 .pd-side input[type=text]:focus { border-color: var(--accent); }
 .pd-files { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
-.pd-files li { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px calc(6px + var(--depth, 0) * 14px); border: 2px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; min-width: 0; }
+.pd-files li { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px calc(6px + var(--depth, 0) * 14px); border: 2px solid transparent; border-radius: var(--radius-control); font-size: 13px; font-weight: 700; cursor: pointer; min-width: 0; }
 .pd-files li:hover { background: rgba(255, 255, 255, .75); }
 .pd-files li.on { background: #fff; border-color: var(--ink); }
 .pd-files li.reviewed .pd-path { color: var(--muted); }
@@ -22,11 +22,11 @@
 .pd-path .dir { color: var(--muted); font-weight: 600; }
 .pd-done { color: #2a9d4b; font-weight: 900; }
 .pd-c { font-size: 11px; white-space: nowrap; }
-.pd-tick { width: 18px; height: 18px; flex: none; padding: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: #fff; font: 900 11px/1 var(--font); cursor: pointer; }
+.pd-tick { width: 18px; height: 18px; flex: none; padding: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; color: #fff; font: 900 11px/1 var(--font); cursor: pointer; }
 .pd-tick:hover { background: #d8f5e3; }
 .pd-tick.reviewed { background: var(--good); }
 .pd-tick.stale { background: var(--warn); color: var(--ink); }
-.pd-st { width: 18px; height: 18px; flex: none; border: 2px solid var(--ink); border-radius: 5px; background: #fff; font: 900 10px/14px ui-monospace, Menlo, monospace; text-align: center; }
+.pd-st { width: 18px; height: 18px; flex: none; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; font: 900 10px/14px ui-monospace, Menlo, monospace; text-align: center; }
 .pd-st.M { background: var(--warn); }
 .pd-st.A { background: var(--good); color: #fff; }
 .pd-st.D { background: var(--bad); color: #fff; }
@@ -35,7 +35,7 @@
 .pd-keys .key { min-width: 18px; padding: 0 5px; margin-right: 3px; background: #fff; border: 1.5px solid var(--ink); box-shadow: none; font-size: 11px; }
 .pd-main { flex: 1; min-width: 0; overflow: auto; position: relative; padding: 0 12px 16px; background: #efe6da; outline: none; }
 .pd-main > .pd-note { margin-top: 12px; }
-.pd-file { margin-top: 12px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); overflow: clip; }
+.pd-file { margin-top: 12px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 3px 0 var(--ink); overflow: clip; }
 .pd-fh { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--paper-2); border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 800; }
 .pd-file.closed .pd-fh { border-bottom: 0; }
 .pd-file.closed .pd-fbody { display: none; }
@@ -44,8 +44,8 @@
 .pd-fold::before { content: '▾'; }
 .pd-file.closed .pd-fold::before { content: '▸'; }
 .pd-fpath { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px ui-monospace, Menlo, monospace; }
-.pd-stale { font-size: 11px; background: var(--warn); border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
-.modal label.pd-viewed { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 9px; font-size: 12.5px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; user-select: none; white-space: nowrap; }
+.pd-stale { font-size: 11px; background: var(--warn); border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 0 8px; white-space: nowrap; }
+.modal label.pd-viewed { display: flex; align-items: center; gap: 6px; margin: 0; padding: 2px 9px; font-size: 12.5px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); cursor: pointer; user-select: none; white-space: nowrap; }
 .pd-file.reviewed label.pd-viewed { background: var(--good); color: #fff; }
 .pd-viewed input { margin: 0; accent-color: #2a9d4b; }
 .pd-lines { font: 12.5px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; tab-size: 4; }
@@ -66,7 +66,7 @@
 @keyframes pd-flash { 0%, 50% { background: #ffe8a3; box-shadow: inset 4px 0 0 var(--accent); } }
 .pd-note, .pd-big { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
 .pd-big .btn { padding: 3px 10px; font-size: 13px; }
-.pd-thread { margin: 6px 12px 8px 108px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); overflow: clip; font-family: var(--font); }
+.pd-thread { margin: 6px 12px 8px 108px; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 2px 0 var(--ink); overflow: clip; font-family: var(--font); }
 .pd-comment + .pd-comment { border-top: 1.5px solid #ebe1d4; }
 .pd-comment-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 12px 0; font-size: 12.5px; }
 .pd-comment-head b { font-weight: 900; }
diff --git a/src/client/ui/github/windows.css b/src/client/ui/github/windows.css
index de2a99da7..aa9992333 100644
--- a/src/client/ui/github/windows.css
+++ b/src/client/ui/github/windows.css
@@ -6,7 +6,7 @@
 .pill.merged { background: #9d4edd; color: #fff; }
 .gh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 2px solid rgba(43, 45, 66, .15); }
 .gh-meta b { color: var(--ink); font-weight: 900; }
-.gh-meta code { font: 12px ui-monospace, Menlo, monospace; background: #e0f2fe; color: #1d4f91; border-radius: 6px; padding: 1px 6px; }
+.gh-meta code { font: 12px ui-monospace, Menlo, monospace; background: #e0f2fe; color: #1d4f91; border-radius: var(--radius-control); padding: 1px 6px; }
 .gh-pm { font: 800 12px ui-monospace, Menlo, monospace; white-space: nowrap; }
 .gh-pm .add { color: #2a9d4b; }
 .gh-pm .del { color: #c3423f; }
@@ -15,7 +15,7 @@
 .gh-tab { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 800; color: var(--muted); background: none; border: 0; border-bottom: 4px solid transparent; padding: 9px 12px 7px; margin-bottom: -3px; cursor: pointer; }
 .gh-tab:hover { color: var(--ink); }
 .gh-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
-.gh-count { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 999px; padding: 0 7px; font-size: 11px; color: var(--ink); }
+.gh-count { background: var(--paper-2); border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 0 7px; font-size: 11px; color: var(--ink); }
 .gh-progress { font-size: 11px; font-weight: 900; color: var(--muted); }
 .gh-progress.all { color: #2a9d4b; }
 .gh-body { flex: 1; min-height: 0; display: flex; }
@@ -25,8 +25,8 @@
 .modal.gh-window footer a.grow { font-size: 14px; color: #1d6fd6; font-weight: 800; text-decoration: none; }
 /* Many actions on a narrow window: they wrap onto a second row rather than run off the edge. */
 .modal.gh-window footer { flex-wrap: wrap; row-gap: 8px; }
-.gh-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--ink); color: #fff; font-size: 12px; font-weight: 900; display: inline-grid; place-items: center; }
-.gh-card { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); overflow: clip; }
+.gh-avatar { width: 24px; height: 24px; flex: none; border-radius: var(--radius-control); border: 2px solid var(--ink); color: #fff; font-size: 12px; font-weight: 900; display: inline-grid; place-items: center; }
+.gh-card { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 3px 0 var(--ink); overflow: clip; }
 /* article.gh-card outranks the frame's .modal header, whatever order the sheets load in. */
 article.gh-card > header { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--paper-2); border-bottom: 2px solid rgba(43, 45, 66, .15); font-size: 13px; font-weight: 700; color: var(--muted); }
 .gh-card > header:last-child { border-bottom: 0; }
@@ -36,27 +36,27 @@ article.gh-card > header { display: flex; align-items: center; gap: 8px; padding
 .gh-card > header code { font: 12px ui-monospace, Menlo, monospace; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .gh-card.is-ok > header { background: #d8f5e3; }
 .gh-card.is-bad > header { background: #ffe3ea; }
-.gh-badge { font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); white-space: nowrap; }
+.gh-badge { font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: var(--radius-control); border: 2px solid var(--ink); background: #fff; color: var(--ink); white-space: nowrap; }
 .gh-badge.ok { background: var(--good); color: #fff; }
 .gh-badge.bad { background: var(--bad); color: #fff; }
 .gh-badge.muted { background: #dee2e6; }
 .gh-thread .pd-thread { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
 .gh-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; font-weight: 800; color: var(--muted); }
-.gh-error { margin: 16px auto; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #ffd6e0; border: 3px solid var(--ink); border-radius: 14px; padding: 14px 18px; font-weight: 800; }
+.gh-error { margin: 16px auto; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #ffd6e0; border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 14px 18px; font-weight: 800; }
 .gh-quiet { text-align: center; color: var(--muted); font-weight: 700; margin: 4px 0; }
-.gh-mergebox { background: #fff; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+.gh-mergebox { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 3px 0 var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
 .gh-mergebox-go { display: flex; justify-content: flex-end; }
 /* The redrawn part of a conversation; its cards still space out in .gh-col's gap. */
 .gh-items { display: contents; }
 .gh-compose .seg { gap: 4px; }
 .gh-compose-body { padding: 10px 12px 0; }
 .gh-compose textarea { display: block; min-height: 96px; }
-.gh-compose-preview { min-height: 96px; background: #fff; border: 3px dashed rgba(43, 45, 66, .25); border-radius: 12px; }
+.gh-compose-preview { min-height: 96px; background: #fff; border: 3px dashed rgba(43, 45, 66, .25); border-radius: var(--radius-control); }
 .gh-compose-preview .gh-quiet { padding: 12px; }
 .gh-compose .gh-merge-result { margin: 10px 12px 0; }
 .gh-compose-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
 .gh-compose-foot .grow { flex: 1; min-width: 0; }
-.gh-status { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; font-size: 14px; line-height: 1.4; background: #eef0f2; }
+.gh-status { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); font-weight: 800; font-size: 14px; line-height: 1.4; background: #eef0f2; }
 .gh-status.ok { background: #d8f5e3; }
 .gh-status.warn { background: #fff3c4; }
 .gh-status.bad { background: #ffd6e0; }
@@ -72,16 +72,16 @@ article.gh-card > header { display: flex; align-items: center; gap: 8px; padding
 .gh-merge .seg .btn { padding: 5px 10px; font-size: 13px; }
 .modal label.gh-check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; cursor: pointer; }
 .gh-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
-.gh-merge-result { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; background: #e0f2fe; }
+.gh-merge-result { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); font-weight: 800; background: #e0f2fe; }
 .gh-merge-result.error { display: block; background: #ffd6e0; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 700; font-size: 13px; }
 /* A label chip (labelChip): on a board's cards, in the windows and in the label picker. */
-.label { padding: 1px 6px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); font-size: 10px; font-weight: 800; }
+.label { padding: 1px 6px; border-radius: var(--radius-control); border: 1.5px solid var(--ink); color: var(--ink); font-size: 10px; font-weight: 800; }
 /* The label picker (openLabels) */
 /* The ✏️ button next to the labels: styles/base.css, after the button rules it restyles. */
 .gh-labeler .body { min-height: 0; }
-.gh-labels { list-style: none; margin: 0; padding: 4px; max-height: min(420px, 50vh); overflow: auto; border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
+.gh-labels { list-style: none; margin: 0; padding: 4px; max-height: min(420px, 50vh); overflow: auto; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; }
 .gh-labels li + li { border-top: 1px solid rgba(43, 45, 66, .1); }
-.gh-labels label.gh-check { padding: 7px 8px; border-radius: 8px; flex-wrap: wrap; }
+.gh-labels label.gh-check { padding: 7px 8px; border-radius: var(--radius-control); flex-wrap: wrap; }
 .gh-labels label.gh-check:hover { background: var(--paper-2); }
 .gh-labels .label { font-size: 12px; }
 .gh-labels small { flex-basis: 100%; padding-left: 24px; color: var(--muted); font-weight: 600; font-size: 12px; }
diff --git a/src/client/ui/markdown.css b/src/client/ui/markdown.css
index e9bfc34e6..7f3a8e87d 100644
--- a/src/client/ui/markdown.css
+++ b/src/client/ui/markdown.css
@@ -12,8 +12,8 @@
 .md strong { font-weight: 900; }
 .md a { color: #1d6fd6; font-weight: 700; text-decoration: none; }
 .md a:hover { text-decoration: underline; }
-.md code { font: 12.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: #f3ebe0; border-radius: 6px; padding: 1px 5px; }
-.md pre { background: #1e1f2e; color: #e9ecef; border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; overflow: auto; }
+.md code { font: 12.5px ui-monospace, 'SF Mono', Menlo, Consolas, monospace; background: #f3ebe0; border-radius: var(--radius-control); padding: 1px 5px; }
+.md pre { background: #1e1f2e; color: #e9ecef; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 12px 14px; overflow: auto; }
 .md pre code { background: none; padding: 0; color: inherit; font-size: 12.5px; line-height: 1.5; }
 .md blockquote { margin-left: 0; margin-right: 0; padding: 2px 14px; border-left: 4px solid #d9cbb8; color: var(--muted); }
 .md ul, .md ol { padding-left: 26px; }
@@ -25,15 +25,15 @@
 .md th, .md td { border: 1.5px solid #ddd0bf; padding: 6px 11px; text-align: left; }
 .md th { background: var(--paper-2); font-weight: 900; }
 .md tr:nth-child(2n) td { background: #fffaf3; }
-.md img { max-width: 100%; border-radius: 6px; }
+.md img { max-width: 100%; border-radius: var(--radius-control); }
 .md hr { border: 0; border-top: 2px dashed #ddd0bf; margin: 18px 0; }
-.md details { border: 2px solid #ebe1d4; border-radius: 10px; padding: 6px 12px; }
+.md details { border: 2px solid #ebe1d4; border-radius: var(--radius-control); padding: 6px 12px; }
 .md details[open] > summary { margin-bottom: 6px; }
 .md summary { cursor: pointer; font-weight: 800; }
-.md kbd { font: 11.5px ui-monospace, Menlo, monospace; border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 6px; padding: 0 5px; background: #fff; }
+.md kbd { font: 11.5px ui-monospace, Menlo, monospace; border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: var(--radius-control); padding: 0 5px; background: #fff; }
 .md .none { color: var(--muted); font-style: italic; }
 .md a.mention, .md a.ref { font-weight: 800; }
-.md blockquote.alert { color: var(--ink); border-radius: 0 10px 10px 0; padding: 8px 14px; }
+.md blockquote.alert { color: var(--ink); border-radius: var(--radius-control); padding: 8px 14px; }
 .md .alert-title { font-weight: 900; margin-bottom: 2px; }
 .md .alert.note { border-color: #1d6fd6; background: #eaf3ff; }
 .md .alert.tip { border-color: #2a9d4b; background: #e6f8ec; }
diff --git a/src/client/ui/meeting.css b/src/client/ui/meeting.css
index b59187267..79f27f15a 100644
--- a/src/client/ui/meeting.css
+++ b/src/client/ui/meeting.css
@@ -2,18 +2,18 @@
 .modal.meeting-window { width: min(780px, 100%); }
 .meeting-window .muted { color: var(--muted); font-weight: 700; font-size: 12px; }
 .meeting-window .bad { color: var(--bad); }
-.meeting-window .btn.small { padding: 3px 8px; font-size: 12px; border-width: 2px; border-radius: 9px; }
+.meeting-window .btn.small { padding: 3px 8px; font-size: 12px; border-width: 2px; border-radius: var(--radius-control); }
 .meeting-form { display: flex; flex-direction: column; gap: 12px; }
 .meeting-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
-.meeting-pattern { text-align: left; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
+.meeting-pattern { text-align: left; font: inherit; color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
 .meeting-pattern b { font-size: 14px; }
 .meeting-pattern small { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.3; }
 .meeting-pattern.on { background: var(--warn); box-shadow: 0 3px 0 var(--ink); }
 .meeting-pattern.on small { color: var(--ink); }
 .meeting-field { display: flex; flex-direction: column; gap: 4px; }
 /* The fields' labels: styles/base.css, after the frame's label rule. */
-.meeting-field input[type=number] { width: 150px; font: inherit; font-size: 15px; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; background: #fff; }
-.meeting-field .meeting-rounds { align-self: flex-start; min-width: 150px; font-size: 15px; border-width: 3px; border-radius: 12px; padding: 8px 10px; }
+.meeting-field input[type=number] { width: 150px; font: inherit; font-size: 15px; border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 8px 10px; background: #fff; }
+.meeting-field .meeting-rounds { align-self: flex-start; min-width: 150px; font-size: 15px; border-width: 3px; border-radius: var(--radius-control); padding: 8px 10px; }
 .meeting-fixed { align-self: flex-start; padding: 11px 0; font-size: 15px; font-weight: 800; cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
 .meeting-count { display: flex !important; align-items: center; gap: 8px; }
 .meeting-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
@@ -27,11 +27,11 @@
 .meeting-line { margin: 8px 0; font-weight: 700; }
 .meeting-spend { margin: 0; font-weight: 800; font-size: 13px; }
 .meeting-seats { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
-.meeting-seats li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 6px 10px; }
-.meeting-seats .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
+.meeting-seats li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 6px 10px; }
+.meeting-seats .dot { width: 12px; height: 12px; border-radius: var(--radius-control); border: 2px solid var(--ink); flex: none; }
 .meeting-seats .btn { margin-left: auto; }
 .meeting-part { font-weight: 800; font-size: 13px; }
-.meeting-out { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; background: #fff; }
+.meeting-out { border: 2px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; background: #fff; }
 .meeting-out-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: var(--paper-2); border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 700; }
 .meeting-preview { margin: 0; padding: 10px; max-height: 240px; overflow: auto; white-space: pre-wrap; font-size: 12.5px; }
 .meeting-past { margin-top: 12px; }
diff --git a/src/client/ui/menu.css b/src/client/ui/menu.css
index 9ffaeba2c..9bcfaee76 100644
--- a/src/client/ui/menu.css
+++ b/src/client/ui/menu.css
@@ -3,7 +3,7 @@
 .hud-menu {
   position: absolute; width: min(560px, calc(100vw - 16px)); overflow: auto;
   display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 8px 10px 6px;
-  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink);
+  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 5px 0 var(--ink);
   animation: menu-in .14s ease-out; transform-origin: top right;
 }
 @keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@@ -11,20 +11,20 @@
 .menu-sec { margin: 10px 8px 3px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .menu-sec:first-child { margin-top: 4px; }
 .menu-row { display: flex; align-items: center; gap: 2px; }
-.menu-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
+.menu-item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: var(--radius-control); background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
 .menu-item:hover { background: var(--paper-2); }
 .menu-item:focus-visible, .menu-pin:focus-visible { outline: none; background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--accent); }
 .mi-icon { flex: none; width: 22px; text-align: center; font-size: 16px; }
 .mi-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .mi-label small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
 .menu-item .svc-count { margin-left: 0; }
-.mi-key, .menu-foot kbd { flex: none; min-width: 20px; padding: 0 5px; font: 800 11px/16px ui-monospace, Menlo, monospace; text-align: center; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: 6px; }
+.mi-key, .menu-foot kbd { flex: none; min-width: 20px; padding: 0 5px; font: 800 11px/16px ui-monospace, Menlo, monospace; text-align: center; color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-bottom-width: 3px; border-radius: var(--radius-control); }
 /* On right now: in voice, sharing, hanging a picture. */
-.menu-item.on .mi-label::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: 50%; background: var(--good); border: 1.5px solid var(--ink); vertical-align: 1px; }
+.menu-item.on .mi-label::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-radius: var(--radius-control); background: var(--good); border: 1.5px solid var(--ink); vertical-align: 1px; }
 .menu-item.on.danger .mi-label::after { background: var(--bad); }
 .menu-item.primary .mi-label { color: #d9480f; }
 /* Pins lean over until they're in; a pinned one stands up in orange. */
-.menu-pin { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .12s; }
+.menu-pin { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: none; color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .12s; }
 .menu-pin svg { transform: rotate(45deg); transition: transform .15s; }
 .menu-pin svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
 .menu-row:hover .menu-pin { opacity: .5; }
@@ -33,8 +33,8 @@
 .menu-pin[aria-pressed=true] svg { transform: none; }
 .menu-pin[aria-pressed=true] svg path { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
 @media (hover: none) { .menu-pin { opacity: .45; } }
-.switch { flex: none; position: relative; width: 34px; height: 20px; border: 2px solid var(--ink); border-radius: 999px; background: #dee2e6; transition: background .15s; }
-.switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: transform .15s; }
+.switch { flex: none; position: relative; width: 34px; height: 20px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #dee2e6; transition: background .15s; }
+.switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: var(--radius-control); background: #fff; border: 2px solid var(--ink); transition: transform .15s; }
 .menu-toggle[aria-checked=true] .switch { background: var(--good); }
 .menu-toggle[aria-checked=true] .switch::after { transform: translateX(14px); }
 .menu-foot { grid-column: 1 / -1; margin: 8px 0 0; padding: 8px 8px 2px; border-top: 2px dashed rgba(43, 45, 66, .18); font-size: 12px; font-weight: 700; color: var(--muted); }
diff --git a/src/client/ui/palette.css b/src/client/ui/palette.css
index cc2b3070a..cf41112f3 100644
--- a/src/client/ui/palette.css
+++ b/src/client/ui/palette.css
@@ -3,12 +3,12 @@
 .modal.palette { width: min(640px, 100%); max-height: min(560px, calc(100vh - 12vh - 16px)); }
 .palette-find { padding: 12px 12px 8px; }
 .palette-list { list-style: none; margin: 0; padding: 0 8px 8px; overflow: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
-.palette-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 2px solid transparent; border-radius: 10px; cursor: pointer; min-width: 0; }
+.palette-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 2px solid transparent; border-radius: var(--radius-control); cursor: pointer; min-width: 0; }
 .palette-row.on { background: #fff; border-color: var(--accent); }
 .palette-icon { font-size: 18px; width: 24px; text-align: center; flex: none; }
 .palette-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
 .palette-title { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .palette-detail { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .palette-kind { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; flex: none; }
-.palette-row mark { background: var(--warn); color: var(--ink); border-radius: 3px; padding: 0 1px; }
+.palette-row mark { background: var(--warn); color: var(--ink); border-radius: var(--radius-control); padding: 0 1px; }
 .palette-empty { margin: 4px 20px 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
diff --git a/src/client/ui/prompt.css b/src/client/ui/prompt.css
index bad6fddcc..cd96ea427 100644
--- a/src/client/ui/prompt.css
+++ b/src/client/ui/prompt.css
@@ -1,15 +1,15 @@
 /* Send-home dialog: what becomes of a worker's worktree */
 .choices { display: flex; flex-direction: column; gap: 8px; }
-.modal label.choice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; cursor: pointer; }
+.modal label.choice { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; cursor: pointer; }
 .modal label.choice:has(input:checked) { border-color: var(--accent); background: var(--paper-2); }
 .choice input { margin: 3px 0 0; accent-color: var(--accent); flex: none; }
 .choice small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; line-height: 1.4; }
 .wt-status { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.45; }
-.wt-status.warn { color: var(--ink); background: #fff3c4; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; }
+.wt-status.warn { color: var(--ink); background: #fff3c4; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 8px 10px; }
 
 /* Hiring across repositories: the other floors' projects to take on too. */
 .repo-picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 26px; font-size: 13px; font-weight: 800; }
 .repo-picks > span { color: var(--muted); margin-right: 2px; }
-.modal label.repo-pick { display: inline-flex; gap: 5px; align-items: center; margin: 0; padding: 2px 10px 2px 6px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 800; }
+.modal label.repo-pick { display: inline-flex; gap: 5px; align-items: center; margin: 0; padding: 2px 10px 2px 6px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; cursor: pointer; font-weight: 800; }
 .modal label.repo-pick:has(input:checked) { border-color: var(--accent); background: var(--paper-2); }
 .repo-pick input { margin: 0; accent-color: var(--accent); }
diff --git a/src/client/ui/prompts.css b/src/client/ui/prompts.css
index 184534fba..ce53aba4b 100644
--- a/src/client/ui/prompts.css
+++ b/src/client/ui/prompts.css
@@ -4,7 +4,7 @@
 .prompt-list { display: flex; flex-direction: column; gap: 2px; padding: 10px; overflow: auto; background: var(--paper-2); border-right: 3px solid var(--ink); }
 .prompt-list h4 { margin: 12px 6px 4px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
 .prompt-list h4:first-child { margin-top: 2px; }
-.prompt-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; text-align: left; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); background: none; border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
+.prompt-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; text-align: left; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink); background: none; border: 2px solid transparent; border-radius: var(--radius-control); cursor: pointer; }
 .prompt-item > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .prompt-item:hover { background: #fff; }
 .prompt-item.on { background: #fff; border-color: var(--ink); }
@@ -19,7 +19,7 @@
 .modal textarea.prompt-text[readonly] { background: var(--paper-2); }
 .prompt-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .prompt-vars-head { flex-basis: 100%; font-size: 12px; font-weight: 800; color: var(--muted); }
-.prompt-var { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 8px; font: inherit; background: #fff; border: 2px solid rgba(43, 45, 66, .25); border-radius: 8px; cursor: pointer; }
+.prompt-var { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 8px; font: inherit; background: #fff; border: 2px solid rgba(43, 45, 66, .25); border-radius: var(--radius-control); cursor: pointer; }
 .prompt-var:hover:not(:disabled) { border-color: var(--accent); }
 .prompt-var:disabled { cursor: default; }
 .prompt-var code { font: 700 12px ui-monospace, Menlo, monospace; color: var(--ink); }
diff --git a/src/client/ui/provider.css b/src/client/ui/provider.css
index 04e4f9b45..b66b81799 100644
--- a/src/client/ui/provider.css
+++ b/src/client/ui/provider.css
@@ -2,11 +2,11 @@
    Its labels, the model box's red border when it's wrong and the ✏️ Edit button are in
    styles/base.css, after the frame's rules they restyle. */
 .provider-choice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-width: 190px; }
-.provider-select { min-width: 132px; padding: 6px 9px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; }
+.provider-select { min-width: 132px; padding: 6px 9px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; }
 .provider-note { display: block; flex: 1 1 160px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.25; }
 .provider-model { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; flex: 1 1 220px; min-width: 180px; margin-top: 4px; }
 .provider-model label { white-space: nowrap; }
-.provider-model input, .provider-model select { width: 100%; min-width: 0; padding: 6px 9px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
+.provider-model input, .provider-model select { width: 100%; min-width: 0; padding: 6px 9px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: #fff; color: var(--ink); font: inherit; font-size: 13px; }
 .provider-model select { font-weight: 800; }
 .provider-model select:disabled { opacity: .55; cursor: not-allowed; }
 .provider-model-hint { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.25; }
@@ -15,7 +15,7 @@
 .provider-pick > .provider-choice { margin-top: 0; }
 .provider-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
 .provider-label { font-weight: 800; font-size: 14px; white-space: nowrap; }
-.provider-current { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; font-size: 13px; font-weight: 800; background: var(--paper-2); border: 2px dashed rgba(43, 45, 66, .35); border-radius: 9px; }
+.provider-current { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; font-size: 13px; font-weight: 800; background: var(--paper-2); border: 2px dashed rgba(43, 45, 66, .35); border-radius: var(--radius-control); }
 .modal.gh-window.issue footer .provider-pick { margin: 0; gap: 4px; }
 .modal.gh-window.issue footer .provider-label { font-size: 12px; }
 .modal.gh-window.issue footer .provider-choice { margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
diff --git a/src/client/ui/queue.css b/src/client/ui/queue.css
index 2dd65e195..52d8b0688 100644
--- a/src/client/ui/queue.css
+++ b/src/client/ui/queue.css
@@ -9,7 +9,7 @@
 .queue-add .provider-choice > label:first-child { margin-left: 0; }
 /* A zero basis keeps the row from wrapping: the pickers shrink first (down to a readable floor) and grow back to their natural width when there's room. */
 .queue-add .provider-select, .queue-add .provider-model select { flex: 1 1 0; width: auto; min-width: 84px; max-width: max-content; }
-.queue-add .provider-model input[type=text] { flex: 1 1 0; width: auto; min-width: 140px; padding: 6px 9px; border-width: 2px; border-radius: 9px; font-size: 13px; }
+.queue-add .provider-model input[type=text] { flex: 1 1 0; width: auto; min-width: 140px; padding: 6px 9px; border-width: 2px; border-radius: var(--radius-control); font-size: 13px; }
 .queue-add .provider-note, .queue-add .provider-model-hint { order: 2; flex: 1 1 100%; }
 .queue-add button[type=submit] { margin-left: auto; }
 /* Too narrow for one line: each label and its picker take a row, so a label never ends up stranded from its picker. */
@@ -22,7 +22,7 @@
 .queue h4 .btn { margin-left: auto; padding: 3px 10px; font-size: 13px; text-transform: none; letter-spacing: 0; }
 .queue .note { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; }
 .queue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-.queue-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--ink); }
+.queue-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; box-shadow: 0 3px 0 var(--ink); }
 .queue-list li.running { background: #e7f8ee; }
 .queue-list li.done { background: var(--paper-2); }
 .queue-list .pos { min-width: 24px; text-align: center; font-weight: 900; color: var(--muted); }
@@ -36,7 +36,7 @@
 .queue-limit { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; }
 .queue-limit .btn { padding: 1px 9px; font-size: 15px; }
 .queue-limit b { min-width: 58px; text-align: center; color: var(--ink); font-size: 15px; }
-.queue-empty { margin-top: 16px; text-align: center; padding: 18px 8px; border: 3px dashed var(--muted); border-radius: 14px; font-weight: 800; }
+.queue-empty { margin-top: 16px; text-align: center; padding: 18px 8px; border: 3px dashed var(--muted); border-radius: var(--radius-control); font-weight: 800; }
 @media (max-width: 640px) {
   .queue-limit span { display: none; }
 }
diff --git a/src/client/ui/repos.css b/src/client/ui/repos.css
index 67f55deb1..a35a3f727 100644
--- a/src/client/ui/repos.css
+++ b/src/client/ui/repos.css
@@ -1,6 +1,6 @@
 /* O at the desk of a worker across repositories: a row per repository. */
 .repo-pulls { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
-.repo-pulls li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; font-weight: 800; }
+.repo-pulls li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; font-weight: 800; }
 .repo-pulls li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .repo-pulls li .name small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
 .repo-pulls li .none { color: var(--muted); font-weight: 700; font-size: 13px; }
diff --git a/src/client/ui/search.css b/src/client/ui/search.css
index c8becdd58..0cd43e19c 100644
--- a/src/client/ui/search.css
+++ b/src/client/ui/search.css
@@ -5,10 +5,10 @@
 .search-results { overflow: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 2px; }
 .search-group h4 { margin: 0 0 6px; font-size: 13px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
 .search-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
-.search-hit { padding: 6px 10px; border: 2px solid rgba(43,45,66,.15); border-radius: 10px; background: #fff; font-size: 14px; min-width: 0; }
+.search-hit { padding: 6px 10px; border: 2px solid rgba(43,45,66,.15); border-radius: var(--radius-control); background: #fff; font-size: 14px; min-width: 0; }
 .search-hit.term { background: #1e1f2e; color: #e6e6f0; border-color: #1e1f2e; cursor: pointer; }
 .search-hit.term:hover, .search-hit.term:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
 .search-hit code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
 .search-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; font-weight: 700; color: var(--muted); }
 .search-text { overflow-wrap: anywhere; }
-.search-hit mark { background: var(--warn); color: var(--ink); border-radius: 3px; padding: 0 1px; }
+.search-hit mark { background: var(--warn); color: var(--ink); border-radius: var(--radius-control); padding: 0 1px; }
diff --git a/src/client/ui/services.css b/src/client/ui/services.css
index 4c92e5925..439ae5586 100644
--- a/src/client/ui/services.css
+++ b/src/client/ui/services.css
@@ -1,10 +1,10 @@
 /* Services board */
 .svc-port { font: 800 14px ui-monospace, Menlo, monospace; }
-.svc-empty { text-align: center; padding: 18px 8px; border: 3px dashed var(--muted); border-radius: 14px; }
+.svc-empty { text-align: center; padding: 18px 8px; border: 3px dashed var(--muted); border-radius: var(--radius-control); }
 .svc-empty p { margin: 0; font-weight: 800; }
 .services .team-status { margin-top: 12px; }
 .modal header .os-tabs { margin-right: 4px; }
-.svc-auto { margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-2); }
+.svc-auto { margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); background: var(--paper-2); }
 .svc-auto > p:first-child { margin: 0; font-weight: 800; }
 .services .svc-auto .note { margin-top: 4px; }
 .svc-auto code { white-space: nowrap; }
diff --git a/src/client/ui/settings.css b/src/client/ui/settings.css
index 61cf03502..d0482906a 100644
--- a/src/client/ui/settings.css
+++ b/src/client/ui/settings.css
@@ -2,7 +2,7 @@
 .modal.settings { width: min(960px, 100%); height: min(760px, calc(100vh - 32px)); }
 .settings-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
 .settings-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; overflow: auto; background: var(--paper-2); border-right: 3px solid var(--ink); }
-.settings-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); background: none; border: 2px solid transparent; border-radius: 12px; cursor: pointer; }
+.settings-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; text-align: left; font: inherit; font-size: 15px; font-weight: 800; color: var(--ink); background: none; border: 2px solid transparent; border-radius: var(--radius-control); cursor: pointer; }
 .settings-tab .icon { flex: none; width: 22px; font-size: 18px; text-align: center; }
 .settings-tab:hover { background: #fff; }
 .settings-tab.on { background: #fff; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
@@ -10,10 +10,10 @@
 .settings-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 18px 22px 24px; overflow: auto; }
 .settings-head h3 { margin: 0; font-size: 20px; font-weight: 900; }
 .settings-head p { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--muted); }
-.setting { flex: none; padding: 14px 16px; background: #fff; border: 2px solid rgba(43, 45, 66, .18); border-radius: 14px; }
+.setting { flex: none; padding: 14px 16px; background: #fff; border: 2px solid rgba(43, 45, 66, .18); border-radius: var(--radius-control); }
 .setting-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
 .setting-head h4 { margin: 0; font-size: 15px; font-weight: 900; }
-.scope { margin-left: auto; padding: 1px 8px; font-size: 11px; font-weight: 900; white-space: nowrap; border: 2px solid var(--ink); border-radius: 999px; cursor: default; }
+.scope { margin-left: auto; padding: 1px 8px; font-size: 11px; font-weight: 900; white-space: nowrap; border: 2px solid var(--ink); border-radius: var(--radius-control); cursor: default; }
 .scope.you { background: #dff3fb; }
 .scope.floor { background: #d7f7ec; }
 .scope.office { background: #ffe6d9; }
@@ -31,10 +31,10 @@
 .vol-pct { flex: none; min-width: 52px; text-align: right; font-weight: 900; font-size: 14px; }
 .volume input[type=range] { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fill: 70%; }
 .volume input[type=range]:focus { outline: none; }
-.volume input[type=range]::-webkit-slider-runnable-track { height: 14px; border: 3px solid var(--ink); border-radius: 999px; background: linear-gradient(to right, var(--accent) var(--fill), #fff var(--fill)); }
-.volume input[type=range]::-moz-range-track { height: 8px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
-.volume input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--accent); }
-.volume input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
-.volume input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
+.volume input[type=range]::-webkit-slider-runnable-track { height: 14px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: linear-gradient(to right, var(--accent) var(--fill), #fff var(--fill)); }
+.volume input[type=range]::-moz-range-track { height: 8px; border: 3px solid var(--ink); border-radius: var(--radius-control); background: #fff; }
+.volume input[type=range]::-moz-range-progress { height: 8px; border-radius: var(--radius-control); background: var(--accent); }
+.volume input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -8px; border-radius: var(--radius-control); border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
+.volume input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: var(--radius-control); border: 3px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); }
 .volume input[type=range]:focus-visible::-webkit-slider-thumb { border-color: var(--accent); }
 .volume.muted input[type=range], .volume.muted .vol-pct { opacity: .45; }
diff --git a/src/client/ui/signins.css b/src/client/ui/signins.css
index c2f00be7d..f9ad01e77 100644
--- a/src/client/ui/signins.css
+++ b/src/client/ui/signins.css
@@ -1,6 +1,6 @@
 /* Signing the office's agents in to their providers. */
 .signins { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
-.signin { border: 3px solid var(--ink); border-radius: 14px; padding: 4px 14px 14px; background: #fff; }
+.signin { border: 3px solid var(--ink); border-radius: var(--radius-control); padding: 4px 14px 14px; background: #fff; }
 .signin.ok { background: #f3fbf6; }
 .signin .team-head { margin-top: 10px; }
 .signin-who { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; text-align: right; }
diff --git a/src/client/ui/team.css b/src/client/ui/team.css
index 95c726bb0..2b58de66f 100644
--- a/src/client/ui/team.css
+++ b/src/client/ui/team.css
@@ -2,10 +2,10 @@
 .team h4 { margin: 18px 0 8px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
 .team h4 .count { color: var(--muted); }
 .team .note { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; }
-.team code { font: 12px ui-monospace, Menlo, monospace; background: var(--paper-2); border-radius: 5px; padding: 1px 4px; color: var(--ink); word-break: break-all; }
+.team code { font: 12px ui-monospace, Menlo, monospace; background: var(--paper-2); border-radius: var(--radius-control); padding: 1px 4px; color: var(--ink); word-break: break-all; }
 .invite-row { display: flex; gap: 8px; }
 .invite-row input { flex: 1; min-width: 0; }
-.team-status { margin: 10px 0 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; font-size: 14px; background: #e0f2fe; }
+.team-status { margin: 10px 0 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); font-weight: 800; font-size: 14px; background: #e0f2fe; }
 .team-status.ok { background: #d8f5e3; }
 .team-status.error { background: #ffd6e0; }
 .team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; }
@@ -13,7 +13,7 @@
 .os-tabs { display: flex; gap: 4px; }
 .os-tabs .btn { padding: 3px 10px; font-size: 13px; }
 .cmd { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
-.cmd pre { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, Menlo, monospace; background: #1e1f2e; color: #e9ecef; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; user-select: all; }
+.cmd pre { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, Menlo, monospace; background: #1e1f2e; color: #e9ecef; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 10px 12px; user-select: all; }
 .team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .team-list li { display: flex; align-items: center; gap: 10px; font-weight: 800; }
 .team-list .name { flex: 1; }
diff --git a/src/client/ui/terminal.css b/src/client/ui/terminal.css
index 12c7a93a7..c0496dce1 100644
--- a/src/client/ui/terminal.css
+++ b/src/client/ui/terminal.css
@@ -7,13 +7,13 @@
 .modal.term .term-host .xterm { height: 100%; }
 /* Files dragged over a terminal, and on their way to the office: they go in where its cursor is. */
 .modal.term .term-host { position: relative; }
-.modal.term.dropping .term-host::after, .modal.term.uploading .term-host::after { content: attr(data-drop); position: absolute; inset: 10px; z-index: 10; display: grid; place-items: center; padding: 16px; text-align: center; border: 3px dashed var(--accent); border-radius: 14px; background: rgba(30, 31, 46, .85); color: #fff; font-size: 18px; font-weight: 900; pointer-events: none; }
+.modal.term.dropping .term-host::after, .modal.term.uploading .term-host::after { content: attr(data-drop); position: absolute; inset: 10px; z-index: 10; display: grid; place-items: center; padding: 16px; text-align: center; border: 3px dashed var(--accent); border-radius: var(--radius-control); background: rgba(30, 31, 46, .85); color: #fff; font-size: 18px; font-weight: 900; pointer-events: none; }
 .modal.term.uploading:not(.dropping) .term-host::after { content: '📎 Putting it in the terminal…'; }
 /* Who's in the terminal: a face per person, and a pencil on whoever's typing. */
 .viewers { display: flex; align-items: center; gap: 4px; }
-.avatar { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); cursor: default; }
+.avatar { position: relative; width: 26px; height: 26px; border-radius: var(--radius-control); border: 2px solid var(--ink); display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); cursor: default; }
 .avatar.typing { margin-right: 4px; animation: typing-bob .9s ease-in-out infinite; }
-.avatar.typing::after { content: '✎'; position: absolute; right: -9px; bottom: -7px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-size: 7px; line-height: 11px; text-align: center; }
+.avatar.typing::after { content: '✎'; position: absolute; right: -9px; bottom: -7px; width: 11px; height: 11px; border-radius: var(--radius-control); background: var(--paper); border: 2px solid var(--ink); font-size: 7px; line-height: 11px; text-align: center; }
 @keyframes typing-bob { 50% { transform: translateY(-3px); } }
 .modal.term header .typed.now { color: var(--ink); }
 @media (prefers-reduced-motion: reduce) { .avatar.typing { animation: none; } }
@@ -27,7 +27,7 @@
 /* Under a terminal on the 2D view (TerminalOptions.keypad): the keys a phone's keyboard hasn't got, and a prompt box. */
 .term-keypad { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--paper); border-top: 3px solid var(--ink); }
 .term-keys { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; }
-.term-keys .btn { flex: 1 1 0; min-width: 34px; height: 42px; padding: 0 4px; justify-content: center; border-radius: 10px; font-variant-numeric: tabular-nums; }
+.term-keys .btn { flex: 1 1 0; min-width: 34px; height: 42px; padding: 0 4px; justify-content: center; border-radius: var(--radius-control); font-variant-numeric: tabular-nums; }
 .term-say { display: flex; gap: 8px; }
 .modal .term-say input[type=text] { flex: 1; min-width: 0; padding: 8px 10px; }
 .modal.term header .typed { font-size: 12px; font-weight: 800; color: var(--muted); white-space: nowrap; }
diff --git a/src/client/ui/termtabs.css b/src/client/ui/termtabs.css
index 543a67827..70921fd7c 100644
--- a/src/client/ui/termtabs.css
+++ b/src/client/ui/termtabs.css
@@ -1,15 +1,15 @@
 /* Tabs on a terminal: the terminal itself, plus any web pages pinned open beside it (a linked chat, say). */
 .term-tabbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; background: var(--paper); border-bottom: 3px solid var(--ink); }
 .term-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
-.term-tab { display: flex; align-items: center; border: 2px solid transparent; border-radius: 10px; flex: none; }
+.term-tab { display: flex; align-items: center; border: 2px solid transparent; border-radius: var(--radius-control); flex: none; }
 .term-tab.on { background: #fff; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
 .term-tab-label { padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: none; border: none; cursor: pointer; white-space: nowrap; }
-.term-tab-close { width: 22px; height: 22px; margin-right: 3px; padding: 0; border: none; background: none; border-radius: 50%; font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; }
+.term-tab-close { width: 22px; height: 22px; margin-right: 3px; padding: 0; border: none; background: none; border-radius: var(--radius-control); font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; }
 .term-tab-close:hover { background: rgba(0, 0, 0, .08); color: var(--ink); }
-.term-tab-add { flex: none; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: none; border: 2px dashed var(--ink); border-radius: 10px; cursor: pointer; white-space: nowrap; }
+.term-tab-add { flex: none; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 800; color: var(--ink); background: none; border: 2px dashed var(--ink); border-radius: var(--radius-control); cursor: pointer; white-space: nowrap; }
 .term-tab-out { flex: none; font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; }
 .term-tab-form { display: flex; gap: 6px; flex-wrap: wrap; flex-basis: 100%; padding-top: 6px; }
-.term-tab-form input { padding: 6px 8px; border: 2px solid var(--ink); border-radius: 8px; font: inherit; font-size: 13px; }
+.term-tab-form input { padding: 6px 8px; border: 2px solid var(--ink); border-radius: var(--radius-control); font: inherit; font-size: 13px; }
 .term-tab-form input[type=url] { flex: 1; min-width: 160px; }
 .modal.term .term-webhost { flex: 1; min-height: 0; position: relative; background: #fff; }
 .term-webframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
diff --git a/src/client/ui/upgrade.css b/src/client/ui/upgrade.css
index 68707c2e7..d8a19b1c0 100644
--- a/src/client/ui/upgrade.css
+++ b/src/client/ui/upgrade.css
@@ -2,12 +2,12 @@
 .conn.upgrading { background: var(--warn); color: var(--ink); }
 .upgrade .version { display: block; font-weight: 700; }
 .upgrade .version small { color: var(--muted); font-weight: 600; }
-.upgrade code, .restart code { font: 12px ui-monospace, Menlo, monospace; background: var(--paper-2); border-radius: 5px; padding: 1px 5px; }
+.upgrade code, .restart code { font: 12px ui-monospace, Menlo, monospace; background: var(--paper-2); border-radius: var(--radius-control); padding: 1px 5px; }
 .upgrade .note { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.45; }
-.upgrade-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; font-size: 14px; background: #e0f2fe; }
+.upgrade-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--radius-control); font-weight: 800; font-size: 14px; background: #e0f2fe; }
 .upgrade-status.ok { background: #d8f5e3; }
 .upgrade-status.error { background: #ffd6e0; }
-.upgrade-error { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, Menlo, monospace; background: #ffd6e0; border: 2px solid var(--ink); border-radius: 10px; padding: 10px; max-height: 240px; overflow: auto; }
+.upgrade-error { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, Menlo, monospace; background: #ffd6e0; border: 2px solid var(--ink); border-radius: var(--radius-control); padding: 10px; max-height: 240px; overflow: auto; }
 .changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; max-height: 220px; overflow: auto; }
 .modal.restart { width: min(480px, 100%); text-align: center; }
 .modal.restart .body p { margin: 10px 0 0; font-weight: 700; }

From a6c154d61bb816fbf0e5661b83a379cd9d02bc3c Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sat, 3 Oct 2026 15:36:01 +0400
Subject: [PATCH 06/35] Voxel people, workers, block signs and prototype
 lighting

---
 src/client/core/scene.ts                   |  12 ++-
 src/client/features/arcade/minesweeper.ts  |   4 +-
 src/client/features/boards/machine.ts      |   2 +-
 src/client/features/boards/world.ts        |   2 +-
 src/client/features/cabinet/blocks.ts      |   6 +-
 src/client/features/carrying/card.ts       |   6 +-
 src/client/features/needsyou/world.ts      |   9 +-
 src/client/features/workers/laptop.ts      |   4 +-
 src/client/world/character/person-hair.ts  |  69 +-------------
 src/client/world/character/person-model.ts | 104 +++++++++++++++++++++
 src/client/world/character/person.ts       |  48 +++++-----
 src/client/world/character/worker-model.ts |  76 ++++++++-------
 src/client/world/desksigns.ts              |   2 +-
 src/client/world/office/seats.ts           |   4 +-
 src/client/world/office/voxel-furniture.ts |   4 +-
 src/client/world/sky.ts                    |  16 ++--
 src/client/world/toon.ts                   |  30 +++---
 src/client/world/vox.ts                    | 102 ++++++++++++++++++++
 src/client/world/voxel.ts                  |  13 ++-
 19 files changed, 338 insertions(+), 175 deletions(-)
 create mode 100644 src/client/world/character/person-model.ts
 create mode 100644 src/client/world/vox.ts

diff --git a/src/client/core/scene.ts b/src/client/core/scene.ts
index 0e922bcb4..99e478af4 100644
--- a/src/client/core/scene.ts
+++ b/src/client/core/scene.ts
@@ -58,7 +58,7 @@ export function createScene(canvas: HTMLCanvasElement, renderer: THREE.WebGLRend
   renderer.outputColorSpace = THREE.SRGBColorSpace;
   // Realistic look: filmic tone mapping, applied by the post pass (core/post.ts).
   renderer.toneMapping = THREE.ACESFilmicToneMapping;
-  renderer.toneMappingExposure = 0.72;
+  renderer.toneMappingExposure = 0.95;
 
   const scene = new THREE.Scene();
   // The sky's color and the fog change with the time of day and the weather (world/sky.ts).
@@ -68,18 +68,20 @@ export function createScene(canvas: HTMLCanvasElement, renderer: THREE.WebGLRend
   // Image-based light: soft sky and bounce reflections on every surface.
   const pmrem = new THREE.PMREMGenerator(renderer);
   scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
-  scene.environmentIntensity = 0.3;
+  scene.environmentIntensity = 0.22;
   pmrem.dispose();
 
-  const hemi = new THREE.HemisphereLight('#fff5e6', '#c9a27a', 0.5);
+  const hemi = new THREE.HemisphereLight('#ffe8c8', '#7f97b0', 0.58);
   const ambient = new THREE.AmbientLight('#ffffff', 0.15);
   scene.add(hemi, ambient);
+  const fill = new THREE.DirectionalLight('#bfd9ff', 0.55);
+  scene.add(fill);
   // The sun by day and the moon by night; the sky moves it (world/sky.ts).
   const sun = new THREE.DirectionalLight('#fff1d6', 2.2);
   sun.position.set(-8, 18, 10);
   sun.castShadow = true;
   sun.shadow.mapSize.set(4096, 4096);
-  sun.shadow.radius = 3;
+  sun.shadow.radius = 2.5;
   // Wide enough for the office, the garage under it and the balcony and lot out front, from wherever the sun is.
   Object.assign(sun.shadow.camera, { left: -32, right: 32, top: 30, bottom: -30, near: 1, far: 100 });
   sun.shadow.bias = -0.0008;
@@ -88,7 +90,7 @@ export function createScene(canvas: HTMLCanvasElement, renderer: THREE.WebGLRend
 
   const office = buildOffice();
   scene.add(office.group);
-  const sky = new Sky(scene, { sun, hemi, ambient }, office.night, () => store.officeNow());
+  const sky = new Sky(scene, { sun, hemi, ambient, fill }, office.night, () => store.officeNow());
   // Halloween or Christmas decorations, up while the building's dressed up for one (see dressUp).
   const holiday = new Holiday(office);
   scene.add(holiday.group);
diff --git a/src/client/features/arcade/minesweeper.ts b/src/client/features/arcade/minesweeper.ts
index 7da8569b1..f58375bdf 100644
--- a/src/client/features/arcade/minesweeper.ts
+++ b/src/client/features/arcade/minesweeper.ts
@@ -238,7 +238,7 @@ function readout(g: CanvasRenderingContext2D, x: number, text: string) {
 function cross(g: CanvasRenderingContext2D, x: number, y: number) {
   g.strokeStyle = '#e63946';
   g.lineWidth = 5;
-  g.lineCap = 'round';
+  g.lineCap = 'butt';
   g.beginPath();
   g.moveTo(x - 14, y - 14);
   g.lineTo(x + 14, y + 14);
@@ -249,5 +249,5 @@ function cross(g: CanvasRenderingContext2D, x: number, y: number) {
 
 function roundRect(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
   g.beginPath();
-  g.roundRect(x, y, w, h, r);
+  g.rect(x, y, w, h);
 }
diff --git a/src/client/features/boards/machine.ts b/src/client/features/boards/machine.ts
index a0f76c81f..7f44ce0f5 100644
--- a/src/client/features/boards/machine.ts
+++ b/src/client/features/boards/machine.ts
@@ -138,5 +138,5 @@ export class MachineTexture {
 
 function roundRect(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
   g.beginPath();
-  g.roundRect(x, y, w, h, r);
+  g.rect(x, y, w, h);
 }
diff --git a/src/client/features/boards/world.ts b/src/client/features/boards/world.ts
index 7da11f4fa..301e07de9 100644
--- a/src/client/features/boards/world.ts
+++ b/src/client/features/boards/world.ts
@@ -336,7 +336,7 @@ export class QueueBoardTexture {
     // A hand-drawn underline.
     g.strokeStyle = '#1f5fbf';
     g.lineWidth = 5;
-    g.lineCap = 'round';
+    g.lineCap = 'butt';
     g.beginPath();
     g.moveTo(42, 92);
     g.quadraticCurveTo(160, 84, 318, 94);
diff --git a/src/client/features/cabinet/blocks.ts b/src/client/features/cabinet/blocks.ts
index dc84ff6cf..077061e4d 100644
--- a/src/client/features/cabinet/blocks.ts
+++ b/src/client/features/cabinet/blocks.ts
@@ -440,7 +440,7 @@ function table(g: CanvasRenderingContext2D, scores: readonly HighScore[], x: num
     if (s.game === mine) {
       g.fillStyle = 'rgba(255, 209, 102, 0.22)';
       g.beginPath();
-      g.roundRect(x - 8, cy - step / 2 + 2, width + 16, step - 4, 8);
+      g.rect(x - 8, cy - step / 2 + 2, width + 16, step - 4);
       g.fill();
     }
     g.font = `900 ${size}px ${FONT}`;
@@ -482,7 +482,7 @@ function ghost(g: CanvasRenderingContext2D, x: number, y: number, size: number)
 function preview(g: CanvasRenderingContext2D, kind: number, cx: number, cy: number) {
   g.fillStyle = '#070b14';
   g.beginPath();
-  g.roundRect(cx - 62, cy - 36, 124, 72, 12);
+  g.rect(cx - 62, cy - 36, 124, 72);
   g.fill();
   if (!kind) return;
   const cells = blocks(kind, 0);
@@ -500,7 +500,7 @@ function banner(g: CanvasRenderingContext2D, title: string, sub: string, color:
   g.fillRect(X0, Y0, COLS * CELL, WELL_ROWS * CELL);
   g.fillStyle = color;
   g.beginPath();
-  g.roundRect(X0 - 30, H / 2 - 62, COLS * CELL + 60, 112, 16);
+  g.rect(X0 - 30, H / 2 - 62, COLS * CELL + 60, 112);
   g.fill();
   g.textAlign = 'center';
   g.fillStyle = '#ffffff';
diff --git a/src/client/features/carrying/card.ts b/src/client/features/carrying/card.ts
index 9b35c35d1..92acfe504 100644
--- a/src/client/features/carrying/card.ts
+++ b/src/client/features/carrying/card.ts
@@ -24,13 +24,11 @@ function issueCard(card: CarriedIssue, width: number): THREE.Mesh {
   g.fillText(`#${card.issue}`, 22, 84);
   g.font = `700 28px ${FONT}`;
   wrap(g, card.title, W - 44, 4).forEach((line, i) => g.fillText(line, 22, 128 + i * 30));
-  g.beginPath();
-  g.arc(W / 2, 20, 12, 0, Math.PI * 2);
   g.fillStyle = PINS[card.issue % PINS.length];
-  g.fill();
+  g.fillRect(W / 2 - 11, 9, 22, 22);
   g.lineWidth = 3;
   g.strokeStyle = '#2b2d42';
-  g.stroke();
+  g.strokeRect(W / 2 - 11, 9, 22, 22);
   const tex = new THREE.CanvasTexture(canvas);
   tex.colorSpace = THREE.SRGBColorSpace;
   tex.anisotropy = 4;
diff --git a/src/client/features/needsyou/world.ts b/src/client/features/needsyou/world.ts
index ee0c735f0..5b189204b 100644
--- a/src/client/features/needsyou/world.ts
+++ b/src/client/features/needsyou/world.ts
@@ -35,13 +35,18 @@ function pinPicture(): THREE.CanvasTexture {
   const cy = 112;
   const r = 100;
   c.beginPath();
-  c.arc(cx, cy, r, Math.PI * 0.82, Math.PI * 0.18);
+  c.moveTo(cx - r, cy - r);
+  c.lineTo(cx + r, cy - r);
+  c.lineTo(cx + r, cy + r * 0.4);
+  c.lineTo(cx + r * 0.4, cy + r * 0.4);
   c.lineTo(cx, 308);
+  c.lineTo(cx - r * 0.4, cy + r * 0.4);
+  c.lineTo(cx - r, cy + r * 0.4);
   c.closePath();
   c.fillStyle = RED;
   c.fill();
   c.lineWidth = 14;
-  c.lineJoin = 'round';
+  c.lineJoin = 'miter';
   c.strokeStyle = INK;
   c.stroke();
   c.fillStyle = '#ffffff';
diff --git a/src/client/features/workers/laptop.ts b/src/client/features/workers/laptop.ts
index 669eb499f..f8a602738 100644
--- a/src/client/features/workers/laptop.ts
+++ b/src/client/features/workers/laptop.ts
@@ -1,5 +1,5 @@
 import { laptopKeys } from '../../world/office/voxel-furniture';
-import { voxelBox, voxelMaterial } from '../../world/voxel';
+import { voxelBox, voxelMaterial, voxelSolid } from '../../world/voxel';
 import * as THREE from 'three';
 import { FLAG_BOLD, FLAG_DIM, FLAG_INVERSE, RGB_FLAG, type Run } from '../../../shared/protocol';
 import { mesh, roundedBox, toon } from '../../world/toon';
@@ -178,7 +178,7 @@ export class Laptop {
       // A ribbon bookmark hanging out of the pages.
       this.root.add(mesh(new THREE.BoxGeometry(0.03, 0.004, 0.16), toon('#9b1c1c'), 0.2, 0.06, 0.28, false));
     } else {
-      const shell = voxelMaterial(toon('#f0e8db'));
+      const shell = voxelSolid('#f0e8db');
       const dark = toon('#2b2d42');
       // Base with fine keycaps
       this.root.add(laptopKeys());
diff --git a/src/client/world/character/person-hair.ts b/src/client/world/character/person-hair.ts
index 7120749a9..8640c2d03 100644
--- a/src/client/world/character/person-hair.ts
+++ b/src/client/world/character/person-hair.ts
@@ -1,72 +1,11 @@
-import { voxelBall, voxelCapsule, voxelGeometry } from '../voxel';
 import * as THREE from 'three';
 import { HAIR_STYLES } from '../../../shared/avatar';
 import { mesh } from '../toon';
+import { hairShapes } from './person-model';
 
-/** Hair is a set of shapes on the head (whose center is 0,0,0; the face looks down +z), in `style` (of HAIR_STYLES). */
+/** Hair is voxel blocks on the head (whose center is 0,0,0; the face looks down +z), in `style` (of HAIR_STYLES). */
 export function styleHair(hair: THREE.Group, m: THREE.MeshStandardMaterial, style: number) {
-  for (const o of hair.children) (o as THREE.Mesh).geometry.dispose();
   hair.clear();
-  const add = (geo: THREE.BufferGeometry, x: number, y: number, z: number, rx = 0, rz = 0) => {
-    const part = mesh(geo, m, x, y, z);
-    part.rotation.set(rx, 0, rz);
-    hair.add(part);
-    return part;
-  };
-  const cap = () => add(voxelGeometry('cap', 0.71, 0.71, 0.71), 0, 0.02, -0.02, -0.25);
-  switch (HAIR_STYLES[style]) {
-    case 'Short':
-      cap();
-      break;
-    case 'Long': {
-      cap();
-      // A curtain down the back, open at the front so the face shows.
-      // Around the head from ear to ear the back way, leaving the face open (phi = π/2 is the face).
-      const back = add(voxelGeometry('curtain', 0.74, 0.5, 0.74), 0, -0.06, -0.03);
-      back.scale.set(1.02, 1.35, 1);
-      break;
-    }
-    case 'Bun':
-      cap();
-      add(voxelBall(0.14), 0, 0.3, -0.2);
-      break;
-    case 'Spiky':
-      cap();
-      // Two rows of spikes fanned out over the crown.
-      for (const [row, n, z, tilt] of [
-        [0, 5, 0.08, 0.35],
-        [1, 4, -0.12, -0.3],
-      ] as const) {
-        for (let i = 0; i < n; i++) {
-          const a = -0.85 + (i / (n - 1)) * 1.7;
-          const spike = add(voxelGeometry('ellipsoid', 0.15, 0.3, 0.15), Math.sin(a) * 0.24, 0.33 - Math.abs(a) * 0.08 - row * 0.02, z);
-          spike.rotation.set(tilt, 0, -a * 0.9);
-        }
-      }
-      break;
-    case 'Curly': {
-      // Little puffs spread over the top and back of the head, leaving the face clear.
-      const n = 70;
-      for (let i = 0; i < n; i++) {
-        const y = 1 - (i / (n - 1)) * 2;
-        const r = Math.sqrt(1 - y * y);
-        const th = i * 2.39996;
-        const px = Math.cos(th) * r;
-        const pz = Math.sin(th) * r;
-        if (y < -0.15 || (pz > 0.35 && y < 0.55)) continue;
-        add(voxelBall(0.1), px * 0.36, y * 0.36 + 0.04, pz * 0.36 - 0.02);
-      }
-      break;
-    }
-    case 'Ponytail': {
-      cap();
-      add(voxelBall(0.075), 0, 0.12, -0.34);
-      const tail = add(voxelCapsule(0.085, 0.3), 0, -0.1, -0.42, 0.35);
-      tail.scale.set(1, 1, 0.8);
-      break;
-    }
-    case 'Bald':
-      break;
-  }
-  hair.traverse((o) => ((o as THREE.Mesh).castShadow = true));
+  const geo = hairShapes(HAIR_STYLES[style]);
+  if (geo) hair.add(mesh(geo, m));
 }
diff --git a/src/client/world/character/person-model.ts b/src/client/world/character/person-model.ts
new file mode 100644
index 000000000..1ab0a83c4
--- /dev/null
+++ b/src/client/world/character/person-model.ts
@@ -0,0 +1,104 @@
+import * as THREE from 'three';
+import { Vox } from '../vox';
+
+// The people, built like the look prototype's: blocky, big-headed, a collar, a badge on a lanyard, hair
+// in real voxels. Shirt, skin and hair are drawn grey here and tinted by their material, so one set of
+// shapes serves every look; trousers, shoes and the face are baked in colour. Forward is +z; the head's
+// own origin is its middle, and an arm's is the shoulder, a leg's the hip (see rig.ts).
+
+const INK = '#2b2d42', PANTS = '#35425c', CREAM = '#f4ece0';
+const FINE = 0.02, BODY = 0.03;
+
+export interface PersonShapes {
+  /** Shirt: torso and shoulders, with the belt, collar and badge as `trim`. */
+  torso: THREE.BufferGeometry;
+  trim: THREE.BufferGeometry;
+  /** Skin: head, ears, nose and neck; the face's eyes, brows, cheeks and mouth in colour. */
+  head: THREE.BufferGeometry;
+  face: THREE.BufferGeometry;
+  smile: THREE.BufferGeometry;
+  /** An arm from the shoulder down: sleeve (shirt) and hand (skin). */
+  sleeve: THREE.BufferGeometry;
+  hand: THREE.BufferGeometry;
+  /** A leg from the hip down, trousers and shoe in colour. */
+  leg: THREE.BufferGeometry;
+}
+
+let shapes: PersonShapes | null = null;
+
+export function personShapes(): PersonShapes {
+  if (shapes) return shapes;
+  const T = new Vox(BODY, 0.05);
+  T.box(-0.25, 0.5, -0.15, 0.25, 0.98, 0.15);
+  T.box(-0.28, 0.82, -0.14, 0.28, 0.98, 0.14);
+  const R = new Vox(BODY, 0.03);
+  R.box(-0.255, 0.42, -0.155, 0.255, 0.54, 0.155, PANTS);                 // trousers' waist
+  R.box(-0.26, 0.48, -0.16, 0.26, 0.54, 0.16, INK, 0.02);                  // belt
+  R.box(-0.04, 0.48, 0.15, 0.04, 0.54, 0.17, '#d9b44a', 0.02);             // buckle
+  R.box(-0.1, 0.96, 0.1, 0.1, 1.0, 0.16, CREAM, 0.02);                     // collar
+  R.box(0.06, 0.64, 0.15, 0.18, 0.82, 0.17, '#ffffff', 0.01);              // id badge
+  R.box(0.06, 0.76, 0.17, 0.18, 0.82, 0.18, '#e8836a', 0.02);
+  R.box(0.1, 0.82, 0.145, 0.13, 0.97, 0.16, INK, 0.02);                    // lanyard
+  const H = new Vox(BODY, 0.04);
+  H.box(-0.26, -0.27, -0.25, 0.26, 0.25, 0.25);
+  H.box(-0.29, -0.06, -0.06, -0.26, 0.06, 0.06, 0.88);                     // ears
+  H.box(0.26, -0.06, -0.06, 0.29, 0.06, 0.06, 0.88);
+  H.box(-0.06, -0.36, -0.06, 0.06, -0.27, 0.06, 0.9);                      // neck
+  H.box(-0.03, -0.12, 0.25, 0.03, 0, 0.29, 0.9);                           // nose
+  const F = new Vox(FINE, 0);
+  for (const sx of [-1, 1]) {
+    const x = sx * 0.11;
+    F.box(x - 0.05, 0.0, 0.25, x + 0.05, 0.1, 0.27, '#ffffff');            // eye white
+    F.box(x - 0.025, 0.0, 0.27, x + 0.025, 0.09, 0.285, INK);              // pupil
+    F.box(x - 0.07, 0.14, 0.25, x + 0.07, 0.17, 0.265, '#3a3330', 0.05);   // brow
+    F.box(sx * 0.19 - 0.04, -0.1, 0.25, sx * 0.19 + 0.04, -0.05, 0.262, '#f29b8b', 0.03); // cheek
+  }
+  const M = new Vox(FINE, 0.02);
+  M.box(-0.06, -0.16, 0.25, 0.06, -0.13, 0.265, '#b8453f');
+  M.box(-0.08, -0.14, 0.25, -0.06, -0.12, 0.265, '#b8453f');
+  M.box(0.06, -0.14, 0.25, 0.08, -0.12, 0.265, '#b8453f');
+  const S = new Vox(BODY, 0.05);
+  S.box(-0.075, -0.27, -0.075, 0.075, 0.08, 0.075);
+  const Hd = new Vox(BODY, 0.04);
+  Hd.box(-0.07, -0.45, -0.07, 0.07, -0.27, 0.07);
+  const L = new Vox(BODY, 0.03);
+  L.box(-0.095, -0.35, -0.1, 0.095, 0.04, 0.1, PANTS);
+  L.box(-0.1, -0.42, -0.1, 0.1, -0.33, 0.21, INK, 0.02);
+  L.box(-0.1, -0.42, -0.1, 0.1, -0.4, 0.21, CREAM, 0.02);
+  return (shapes = { torso: T.build(), trim: R.build(), head: H.build(), face: F.build(), smile: M.build(), sleeve: S.build(), hand: Hd.build(), leg: L.build() });
+}
+
+const hairCache = new Map<string, THREE.BufferGeometry>();
+
+/** Hair in voxels on the head (origin its middle, face down +z), in a style of HAIR_STYLES; null for bald. */
+export function hairShapes(style: string): THREE.BufferGeometry | null {
+  if (style === 'Bald') return null;
+  const hit = hairCache.get(style);
+  if (hit) return hit;
+  const V = new Vox(BODY, 0.08);
+  V.box(-0.29, 0.19, -0.29, 0.29, 0.34, 0.27);                  // cap
+  V.box(-0.29, -0.16, -0.29, 0.29, 0.25, -0.2);                 // back
+  V.box(-0.29, 0.0, -0.27, -0.26, 0.25, 0.14);                  // sideburns
+  V.box(0.26, 0.0, -0.27, 0.29, 0.25, 0.14);
+  V.box(-0.28, 0.14, 0.24, 0.28, 0.24, 0.29);                   // fringe
+  if (style === 'Long') {
+    V.box(-0.32, -0.4, -0.31, 0.32, 0.2, -0.16);
+    V.box(-0.32, -0.32, -0.27, -0.26, 0.2, 0.1);
+    V.box(0.26, -0.32, -0.27, 0.32, 0.2, 0.1);
+  } else if (style === 'Bun') {
+    V.ell(0, 0.42, -0.14, 0.14, 0.14, 0.14);
+  } else if (style === 'Spiky') {
+    [-0.21, -0.105, 0, 0.105, 0.21].forEach((x, n) => V.box(x - 0.045, 0.34, -0.12, x + 0.045, 0.43 + (n % 2) * 0.07, 0.12));
+  } else if (style === 'Curly') {
+    V.ell(0, 0.26, -0.04, 0.33, 0.15, 0.3);
+    V.ell(-0.26, 0.08, -0.08, 0.1, 0.2, 0.2);
+    V.ell(0.26, 0.08, -0.08, 0.1, 0.2, 0.2);
+    V.ell(0, 0.0, -0.26, 0.3, 0.24, 0.1);
+  } else if (style === 'Ponytail') {
+    V.box(-0.05, -0.28, -0.4, 0.05, 0.1, -0.29);
+    V.box(-0.06, 0.04, -0.34, 0.06, 0.1, -0.27, INK, 0.02);
+  }
+  const geo = V.build();
+  hairCache.set(style, geo);
+  return geo;
+}
diff --git a/src/client/world/character/person.ts b/src/client/world/character/person.ts
index e9d90bd01..0738eb7e2 100644
--- a/src/client/world/character/person.ts
+++ b/src/client/world/character/person.ts
@@ -1,4 +1,5 @@
-import { voxelBall, voxelCapsule, voxelMaterial } from '../voxel';
+import { voxelBall, voxelBox, voxelMaterial, voxelSolid } from '../voxel';
+import { personShapes } from './person-model';
 import * as THREE from 'three';
 import { HAIR_COLORS, HAIR_STYLES, SKIN_TONES, type Look } from '../../../shared/avatar';
 import { EMOTE_BY_ID, type EmoteId } from '../../../shared/emotes';
@@ -129,46 +130,41 @@ export class Person {
     const skin = (this.skin = voxelMaterial(toonUnique(SKIN_TONES[look.skin])));
     this.hairMat = voxelMaterial(toonUnique(HAIR_COLORS[look.hair]));
     this.hairMat.side = THREE.DoubleSide;
-    const pants = toon('#3d405b');
-    const ink = toon('#1d1d1d');
 
     this.root.add(this.body);
-    const torso = mesh(voxelCapsule(0.26, 0.28), this.shirt, 0, 0.72, 0);
+    // Blocky voxel people, as in the look prototype (see person-model.ts). Shirt, skin and hair are
+    // tinted by their materials; trousers, shoes and the face are baked in colour.
+    const baked = voxelSolid('#ffffff');
+    const shape = personShapes();
+    const torso = mesh(shape.torso, this.shirt, 0, 0, 0);
+    torso.add(mesh(shape.trim, baked, 0, 0, 0, false));
     this.body.add(torso);
     // Head
     const head = (this.head = new THREE.Group());
     head.position.y = 1.32;
-    head.add(mesh(voxelBall(0.34), skin));
+    head.add(mesh(shape.head, skin));
     head.add(this.hair);
     this.buildHair();
-    for (const sx of [-1, 1]) {
-      head.add(mesh(voxelBall(0.055), ink, sx * 0.12, 0.02, 0.3, false));
-      head.add(mesh(voxelBall(0.05), toon('#ff9f9f'), sx * 0.2, -0.08, 0.27, false));
-    }
-    const smile = (this.smile = mesh(new THREE.TorusGeometry(0.06, 0.015, 6, 12, Math.PI), ink, 0, -0.08, 0.32, false));
-    smile.rotation.z = Math.PI;
-    head.add(smile);
-    // Talking mouth: a flattened ball pressed into the face, scaled open and shut with the voice.
-    this.mouth = mesh(voxelBall(1), toon('#7a2635'), 0, -0.1, 0.295, false);
-    const tongue = mesh(voxelBall(1), toon('#ff8fa3'), 0, -0.5, 0, false);
-    tongue.scale.set(0.6, 0.45, 1.15);
-    this.mouth.add(tongue);
+    head.add(mesh(shape.face, baked, 0, 0, 0, false));
+    this.smile = mesh(shape.smile, baked, 0, 0, 0, false);
+    head.add(this.smile);
+    // Talking mouth: a dark block pressed into the face, scaled open and shut with the voice.
+    this.mouth = mesh(new THREE.BoxGeometry(1, 1, 1), toon('#7a2635'), 0, -0.145, 0.262, false);
     this.mouth.visible = false;
     head.add(this.mouth);
     this.body.add(head);
 
-    const limb = (len: number, r: number, mat: THREE.Material, x: number, y: number) => {
+    const limb = (x: number, y: number, parts: [THREE.BufferGeometry, THREE.Material][]) => {
       const pivot = new THREE.Group();
       pivot.position.set(x, y, 0);
-      pivot.add(mesh(voxelCapsule(r, len), mat, 0, -len / 2 - r / 2, 0));
+      for (const [geo, mat] of parts) pivot.add(mesh(geo, mat));
       this.body.add(pivot);
       return pivot;
     };
-    this.legL = limb(0.22, 0.1, pants, -0.12, HIPS);
-    this.legR = limb(0.22, 0.1, pants, 0.12, HIPS);
-    this.armL = limb(0.24, 0.08, this.shirt, -0.33, 0.9);
-    this.armR = limb(0.24, 0.08, this.shirt, 0.33, 0.9);
-    for (const arm of [this.armL, this.armR]) arm.add(mesh(voxelBall(0.085), skin, 0, -0.38, 0));
+    this.legL = limb(-0.12, HIPS, [[shape.leg, baked]]);
+    this.legR = limb(0.12, HIPS, [[shape.leg, baked]]);
+    this.armL = limb(-0.33, 0.9, [[shape.sleeve, this.shirt], [shape.hand, skin]]);
+    this.armR = limb(0.33, 0.9, [[shape.sleeve, this.shirt], [shape.hand, skin]]);
     // Forward is +z, so the character's left arm is the one on +x. The handle faces the hand.
     const cup = (this.cup = coffeeMug(1.4));
     cup.position.set(0.02, -0.08, 0.1);
@@ -201,8 +197,8 @@ export class Person {
     this.body.add(this.bookHolder);
     // Along the arm (the fist's -y) the finger points; the thumb sticks out of the front of the fist,
     // which is up once the arm is out in front.
-    this.thumb = mesh(voxelCapsule(0.035, 0.07).rotateX(Math.PI / 2), skin, 0, -0.38, 0.1, false);
-    this.finger = mesh(voxelCapsule(0.03, 0.09), skin, 0, -0.5, 0.02, false);
+    this.thumb = mesh(voxelBox(0.05, 0.05, 0.12, 0.02), skin, 0, -0.34, 0.09, false);
+    this.finger = mesh(voxelBox(0.05, 0.14, 0.05, 0.02), skin, 0, -0.52, 0.02, false);
     for (const m of [this.thumb, this.finger]) {
       m.visible = false;
       this.armL.add(m);
diff --git a/src/client/world/character/worker-model.ts b/src/client/world/character/worker-model.ts
index 2f00a1600..d6e396e56 100644
--- a/src/client/world/character/worker-model.ts
+++ b/src/client/world/character/worker-model.ts
@@ -1,48 +1,56 @@
 import * as THREE from 'three';
-import { mesh, toon } from '../toon';
-import { voxelBall, voxelBox, voxelCapsule, voxelMaterial } from '../voxel';
+import { HAIR_COLORS, HAIR_STYLES, SKIN_TONES, lookFromSeed } from '../../../shared/avatar';
+import { mesh } from '../toon';
+import { voxelBox, voxelMaterial, voxelSolid } from '../voxel';
+import { hairShapes, personShapes } from './person-model';
 import { STATUS_BULB } from './worker-badges';
 
-/** A fine voxel office worker on the existing rig: +z is its face and its typing direction. */
-export function workerModel(body: THREE.Group, skin: THREE.MeshToonMaterial | THREE.MeshStandardMaterial, bulb: THREE.MeshToonMaterial | THREE.MeshStandardMaterial) {
-  const face = voxelMaterial(toon('#f3caa4')), ink = voxelMaterial(toon('#293348'));
-  const white = voxelMaterial(toon('#fff9ef')), pants = voxelMaterial(toon('#35475e'));
+const SCALE = 0.6;
+const HEAD = 0.885;
+
+/**
+ * A worker, built like the people (see person-model.ts) but smaller and snug at its desk: a blocky body in
+ * its own colour, a big voxel head with hair, and a cube of light over it for how it's getting on.
+ * +z is its face and its typing direction.
+ */
+export function workerModel(body: THREE.Group, skin: THREE.MeshStandardMaterial, bulb: THREE.MeshStandardMaterial) {
+  const shape = personShapes();
+  const baked = voxelSolid('#ffffff');
+  const look = lookFromSeed(skin.color.getHexString());
+  const face = voxelSolid(SKIN_TONES[look.skin]), hair = voxelSolid(HAIR_COLORS[look.hair]);
+  const ink = voxelSolid('#2b2d42'), white = voxelSolid('#fff9ef'), shoe = voxelSolid('#2b2d42');
   voxelMaterial(skin); voxelMaterial(bulb);
-  body.add(mesh(voxelCapsule(0.24, 0.12), skin, 0, 0.48, 0));
-  body.add(mesh(voxelGeometryHead(), face, 0, 0.76, 0));
-  // Collar, tiny nose and a lanyard badge make the small silhouette readable at a desk.
-  body.add(mesh(voxelBox(0.22, 0.035, 0.055, 0.015), white, 0, 0.6, 0.22));
-  body.add(mesh(voxelBox(0.055, 0.065, 0.04, 0.0125), face, 0, 0.65, 0.245));
-  body.add(mesh(voxelBox(0.11, 0.1, 0.025, 0.0125), white, 0.11, 0.43, 0.23));
-  body.add(mesh(voxelBox(0.06, 0.015, 0.03, 0.0125), ink, 0.11, 0.445, 0.245));
-  const eyes: THREE.Mesh[] = [], pupils: THREE.Mesh[] = [], feet: THREE.Mesh[] = [], headset: THREE.Object3D[] = [];
+
+  const torso = mesh(shape.torso, skin, 0, 0, 0);
+  torso.add(mesh(shape.trim, baked, 0, 0, 0, false));
+  torso.scale.setScalar(SCALE);
+  body.add(torso);
+
+  const head = new THREE.Group();
+  head.position.y = 0.76;
+  head.scale.setScalar(HEAD);
+  head.add(mesh(shape.head, face));
+  head.add(mesh(shape.smile, baked, 0, 0, 0, false));
+  const style = hairShapes(HAIR_STYLES[look.style]);
+  if (style) head.add(mesh(style, hair));
+  body.add(head);
+
+  const eyes: THREE.Mesh[] = [], pupils: THREE.Mesh[] = [], feet: THREE.Mesh[] = [];
   for (const sx of [-1, 1]) {
-    const eye = mesh(voxelBox(0.13, 0.115, 0.035, 0.0125), white, sx * 0.11, 0.7, 0.23, false);
-    const pupil = mesh(voxelBox(0.05, 0.07, 0.025, 0.0125), ink, sx * 0.11, 0.7, 0.26, false);
+    const eye = mesh(voxelBox(0.1, 0.11, 0.03, 0.015), white, sx * 0.11, 0.7, 0.235, false);
+    const pupil = mesh(voxelBox(0.05, 0.08, 0.025, 0.0125), ink, sx * 0.11, 0.7, 0.26, false);
     body.add(eye, pupil); eyes.push(eye, pupil); pupils.push(pupil);
-    const foot = mesh(voxelBox(0.135, 0.15, 0.23), pants, sx * 0.12, 0.2, 0.05);
+    const foot = mesh(voxelBox(0.135, 0.15, 0.23), shoe, sx * 0.12, 0.2, 0.05);
     body.add(foot); feet.push(foot);
-    const cup = mesh(voxelBox(0.075, 0.14, 0.13), ink, sx * 0.255, 0.74, 0, false);
-    body.add(cup); headset.push(cup);
-  }
-  for (let i = -5; i <= 5; i++) {
-    const x = i * 0.05, y = 0.73 + Math.sqrt(Math.max(0, 0.27 ** 2 - x ** 2));
-    const band = mesh(voxelBox(0.055, 0.035, 0.05, 0.015), ink, x, y, 0, false);
-    body.add(band); headset.push(band);
   }
-  const mic = mesh(voxelBox(0.14, 0.025, 0.025, 0.0125), ink, -0.2, 0.63, 0.19, false);
-  body.add(mic); headset.push(mic);
-  body.add(mesh(voxelBox(0.025, 0.22, 0.025, 0.0125), ink, 0, 1.07, 0, false));
   bulb.emissive = new THREE.Color(STATUS_BULB.starting).multiplyScalar(0.6);
-  const bulbMesh = mesh(voxelBall(0.075, 0.015), bulb, 0, 1.2, 0, false);
+  const bulbMesh = mesh(voxelBox(0.15, 0.15, 0.15, 0.025), bulb, 0, 1.22, 0, false);
   body.add(bulbMesh);
   const arm = (x: number) => {
-    const pivot = new THREE.Group(); pivot.position.set(x, 0.55, 0.05);
-    pivot.add(mesh(voxelCapsule(0.055, 0.12, 0.02), skin, 0, -0.09, 0));
-    pivot.add(mesh(voxelBox(0.105, 0.08, 0.105, 0.015), face, 0, -0.205, 0));
+    const pivot = new THREE.Group(); pivot.position.set(x, 0.56, 0.05);
+    pivot.scale.setScalar(SCALE);
+    pivot.add(mesh(shape.sleeve, skin), mesh(shape.hand, face));
     body.add(pivot); return pivot;
   };
-  return { eyes, pupils, feet, headset, bulbMesh, armL: arm(-0.3), armR: arm(0.3) };
+  return { eyes, pupils, feet, headset: [] as THREE.Object3D[], bulbMesh, armL: arm(-0.23), armR: arm(0.23) };
 }
-
-function voxelGeometryHead() { return voxelCapsule(0.225, 0.025, 0.025); }
diff --git a/src/client/world/desksigns.ts b/src/client/world/desksigns.ts
index e2603684e..e1eed8eef 100644
--- a/src/client/world/desksigns.ts
+++ b/src/client/world/desksigns.ts
@@ -61,7 +61,7 @@ function paintFace(canvas: HTMLCanvasElement, label: DeskLabel) {
   ctx.globalAlpha = 0.45;
   ctx.lineWidth = 9;
   ctx.beginPath();
-  ctx.roundRect(22, 22, w - 44, h - 44, 34);
+  ctx.rect(22, 22, w - 44, h - 44);
   ctx.stroke();
   ctx.globalAlpha = 1;
   const { lines, size } = fit(ctx, label.text, w - 120, h - 70);
diff --git a/src/client/world/office/seats.ts b/src/client/world/office/seats.ts
index ff9935572..97c0c84f9 100644
--- a/src/client/world/office/seats.ts
+++ b/src/client/world/office/seats.ts
@@ -1,5 +1,5 @@
 import { fineChair, deskDrawers } from './voxel-furniture';
-import { voxelBox, voxelMaterial } from '../voxel';
+import { voxelBox, voxelMaterial, voxelSolid } from '../voxel';
 import * as THREE from 'three';
 import { BEANBAGS, DESKS, DESK_SIZE, FLOOR, KIOSK, SEATING_BY_ID, STATIONS, STATION_AGENT, deskSeat, type DeskDef, type StationKind } from '../../../shared/layout';
 import { deskPoint } from '../../../shared/nav';
@@ -51,7 +51,7 @@ export function buildDesk(def: DeskDef, index: number, trimMat: THREE.Material):
   group.position.set(def.x, 0, def.z);
   group.rotation.y = def.rotY;
   const { width, depth, height } = DESK_SIZE;
-  group.add(mesh(voxelBox(width - 0.06, 0.08, depth - 0.04, 0.04), voxelMaterial(toon('#e4c99f')), 0, height - 0.04, 0));
+  group.add(mesh(voxelBox(width - 0.06, 0.08, depth - 0.04, 0.04), voxelSolid('#e4c99f'), 0, height - 0.04, 0));
   const legMat = toon('#8d99ae');
   for (const sx of [-1, 1]) {
     for (const sz of [-1, 1]) {
diff --git a/src/client/world/office/voxel-furniture.ts b/src/client/world/office/voxel-furniture.ts
index 49c77101e..72e665897 100644
--- a/src/client/world/office/voxel-furniture.ts
+++ b/src/client/world/office/voxel-furniture.ts
@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { toon } from '../toon';
-import { voxelBox, voxelGeometry, voxelMaterial } from '../voxel';
+import { voxelBox, voxelGeometry, voxelMaterial, voxelSolid } from '../voxel';
 
 /** Batch static parts by paint; a keyboard or a whole chair takes only a few draw calls. */
 export class VoxelFurniture {
@@ -16,7 +16,7 @@ export class VoxelFurniture {
     for (const [color, parts] of this.parts) {
       const geometry = mergeGeometries(parts)!;
       for (const p of parts) p.dispose();
-      const mesh = new THREE.Mesh(geometry, voxelMaterial(toon(color)));
+      const mesh = new THREE.Mesh(geometry, voxelSolid(color));
       mesh.castShadow = mesh.receiveShadow = true; group.add(mesh);
     }
     return group;
diff --git a/src/client/world/sky.ts b/src/client/world/sky.ts
index ad4d57dc5..d3a214a2e 100644
--- a/src/client/world/sky.ts
+++ b/src/client/world/sky.ts
@@ -241,8 +241,8 @@ const C = {
   sunHigh: new THREE.Color('#fff1d6'),
   sunLow: new THREE.Color('#ffa566'),
   moon: new THREE.Color('#a9bcff'),
-  hemiSky: new THREE.Color('#fff5e6'),
-  hemiGround: new THREE.Color('#c9a27a'),
+  hemiSky: new THREE.Color('#ffe8c8'),
+  hemiGround: new THREE.Color('#7f97b0'),
   hemiSkyNight: new THREE.Color('#4b5b90'),
   hemiGroundNight: new THREE.Color('#1d1b29'),
   ambientNight: new THREE.Color('#8797cc'),
@@ -357,6 +357,7 @@ export interface SkyLights {
   sun: THREE.DirectionalLight;
   hemi: THREE.HemisphereLight;
   ambient: THREE.AmbientLight;
+  fill?: THREE.DirectionalLight;
 }
 
 /** Soft round blob, for halos and snowflakes. */
@@ -694,16 +695,15 @@ export class Sky {
       this.nextSpook = t + rand(25, 70);
     }
     this.lightning(t, dt);
-    const flash = this.flash;
-    const sunI = 1.7 * smooth(-3, 10, elD) * (1 - 0.8 * this.cover) * (1 - 0.6 * this.fog) * (1 - 0.65 * sp);
-    const moonI = 0.4 * smooth(-4, -12, elD) * (1 - 0.75 * this.cover);
-    const hemiI = lerp(0.2, 0.55 * (1 - 0.25 * this.cover) * (1 - 0.35 * this.storm), day);
-    const ambI = lerp(0.06, 0.15, day);
-    const { sun, hemi, ambient } = this.lights;
+    const flash = this.flash, sunI = 2.3 * smooth(-3, 10, elD) * (1 - 0.8 * this.cover) * (1 - 0.6 * this.fog) * (1 - 0.65 * sp);
+    const hemiI = lerp(0.2, 0.6 * (1 - 0.25 * this.cover) * (1 - 0.35 * this.storm), day);
+    const ambI = lerp(0.06, 0.15, day), moonI = 0.4 * smooth(-4, -12, elD) * (1 - 0.75 * this.cover);
+    const { sun, hemi, ambient, fill } = this.lights;
     hemi.intensity = hemiI + flash * 3;
     hemi.color.copy(C.hemiSkyNight).lerp(C.hemiSky, day).lerp(SPOOKY.hemiSky, sp * 0.5);
     hemi.groundColor.copy(C.hemiGroundNight).lerp(C.hemiGround, day).lerp(SPOOKY.hemiGround, sp * 0.5);
     ambient.intensity = ambI + flash;
+    if (fill) fill.position.set(sun.position.x * -0.6, 11, sun.position.z * -0.6).add(sun.target.position), (fill.intensity = 0.55 * day * (1 - 0.7 * this.cover));
     ambient.color.copy(C.ambientNight).lerp(C.white, day);
     // A real sun, low enough for long shadows and slanting light through the windows. At night the moon lights things, from across the sky.
     const moonlit = elD < -4;
diff --git a/src/client/world/toon.ts b/src/client/world/toon.ts
index f68be3dbd..a775932f8 100644
--- a/src/client/world/toon.ts
+++ b/src/client/world/toon.ts
@@ -35,7 +35,7 @@ export function roundedBox(w: number, h: number, d: number, r = 0.06): THREE.Buf
   const shape = new THREE.Shape();
   const x = -w / 2;
   const y = -d / 2;
-  r = Math.min(r, w / 2, d / 2);
+  r = 0;
   shape.moveTo(x + r, y);
   shape.lineTo(x + w - r, y);
   shape.quadraticCurveTo(x + w, y, x + w, y + r);
@@ -68,14 +68,16 @@ function textTexture(text: string, opts: TextOpts) {
   canvas.height = h;
   ctx.font = font;
   if (opts.bg) {
+    // A hard-edged block sign: stepped drop shadow, ink outline and a bright top edge, no curves.
+    ctx.fillStyle = 'rgba(41, 70, 74, .38)';
+    ctx.fillRect(6, 6, w - 6, h - 6);
     ctx.fillStyle = opts.bg;
-    const r = h / 2;
-    ctx.beginPath();
-    ctx.roundRect(3, 3, w - 6, h - 6, r - 3);
-    ctx.fill();
-    ctx.lineWidth = 5;
+    ctx.fillRect(2, 2, w - 8, h - 8);
+    ctx.fillStyle = 'rgba(255, 255, 255, .4)';
+    ctx.fillRect(7, 7, w - 18, 4);
+    ctx.lineWidth = 4;
     ctx.strokeStyle = opts.border ?? '#2b2d42';
-    ctx.stroke();
+    ctx.strokeRect(2, 2, w - 8, h - 8);
   }
   ctx.fillStyle = opts.color ?? '#2b2d42';
   ctx.textAlign = 'center';
@@ -162,21 +164,19 @@ export function cardSprite(o: CardOpts): THREE.Sprite {
   const x0 = lw / 2;
   const x1 = w - lw / 2;
   const cx = w / 2;
-  const r = 18 * R;
   ctx.beginPath();
-  ctx.moveTo(x0 + r, top);
-  ctx.arcTo(x1, top, x1, bottom, r);
-  ctx.arcTo(x1, bottom, x0, bottom, r);
+  ctx.moveTo(x0, top);
+  ctx.lineTo(x1, top);
+  ctx.lineTo(x1, bottom);
   ctx.lineTo(cx + tail, bottom);
   ctx.lineTo(cx, bottom + tail);
   ctx.lineTo(cx - tail, bottom);
-  ctx.arcTo(x0, bottom, x0, top, r);
-  ctx.arcTo(x0, top, x1, top, r);
+  ctx.lineTo(x0, bottom);
   ctx.closePath();
   ctx.fillStyle = o.bg;
   ctx.fill();
   ctx.lineWidth = lw;
-  ctx.lineJoin = 'round';
+  ctx.lineJoin = 'miter';
   ctx.strokeStyle = o.border ?? INK;
   ctx.stroke();
 
@@ -184,7 +184,7 @@ export function cardSprite(o: CardOpts): THREE.Sprite {
   ctx.textBaseline = 'middle';
   if (o.chip) {
     ctx.beginPath();
-    ctx.roundRect(cx - chipW / 2, lw / 2, chipW, chipH, chipH / 2);
+    ctx.rect(cx - chipW / 2, lw / 2, chipW, chipH);
     ctx.fillStyle = o.chip.bg;
     ctx.fill();
     ctx.lineWidth = 4 * R;
diff --git a/src/client/world/vox.ts b/src/client/world/vox.ts
new file mode 100644
index 000000000..a91292a32
--- /dev/null
+++ b/src/client/world/vox.ts
@@ -0,0 +1,102 @@
+import * as THREE from 'three';
+
+const DIRS = [[1, 0, 0], [-1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 1], [0, 0, -1]];
+/** Brightness of a face corner by how many neighbours crowd it: the baked soft shadow where blocks meet. */
+const AO = [0.52, 0.72, 0.87, 1];
+
+/** A colour for a block: a hex, a grey (to be tinted by the material), nothing (white, tinted by the material) or a function of the block. */
+export type VoxColor = string | number | null | ((i: number, j: number, k: number) => string);
+
+const noise = (i: number, j: number, k: number) => {
+  let h = Math.imul(i * 73856093 ^ j * 19349663 ^ k * 83492791, 2246822519);
+  h ^= h >>> 13;
+  h = Math.imul(h, 3266489917);
+  return ((h ^ (h >>> 16)) >>> 0) / 4294967295 * 2 - 1;
+};
+
+/**
+ * Real voxel models, as in the look prototype: a sparse grid of tiny cubes merged into one mesh, hidden
+ * faces dropped, each block a touch different in tone and each corner shaded by what's next to it.
+ * Blocks with no colour are grey, so the mesh's material (a shirt, a skin, a hair colour) tints them.
+ */
+export class Vox {
+  private cells = new Map<number, { i: number; j: number; k: number; r: number; g: number; b: number }>();
+
+  constructor(private size: number, private jitter = 0.06) {}
+
+  private key(i: number, j: number, k: number) {
+    return ((i + 2048) * 4096 + (j + 2048)) * 4096 + (k + 2048);
+  }
+
+  private has(i: number, j: number, k: number) {
+    return this.cells.has(this.key(i, j, k));
+  }
+
+  put(i: number, j: number, k: number, color: VoxColor = null, jitter = this.jitter) {
+    const c = new THREE.Color();
+    if (typeof color === 'number') c.setScalar(color);
+    else if (color === null) c.setScalar(1);
+    else c.set(typeof color === 'function' ? color(i, j, k) : color);
+    c.multiplyScalar(1 + noise(i, j, k) * jitter);
+    this.cells.set(this.key(i, j, k), { i, j, k, r: c.r, g: c.g, b: c.b });
+  }
+
+  /** A block of voxels between two corners, in the model's own units. */
+  box(x0: number, y0: number, z0: number, x1: number, y1: number, z1: number, color: VoxColor = null, jitter?: number) {
+    const s = this.size;
+    const a = Math.round(x0 / s), b = Math.round(y0 / s), c = Math.round(z0 / s);
+    const d = Math.max(a + 1, Math.round(x1 / s)), e = Math.max(b + 1, Math.round(y1 / s)), f = Math.max(c + 1, Math.round(z1 / s));
+    for (let i = a; i < d; i++) for (let j = b; j < e; j++) for (let k = c; k < f; k++) this.put(i, j, k, color, jitter);
+    return this;
+  }
+
+  /** A lump of voxels: an ellipsoid, for a bun, a puff of curls. */
+  ell(cx: number, cy: number, cz: number, rx: number, ry: number, rz: number, color: VoxColor = null, jitter?: number) {
+    const s = this.size;
+    for (let i = Math.floor((cx - rx) / s); i <= Math.ceil((cx + rx) / s); i++)
+      for (let j = Math.floor((cy - ry) / s); j <= Math.ceil((cy + ry) / s); j++)
+        for (let k = Math.floor((cz - rz) / s); k <= Math.ceil((cz + rz) / s); k++) {
+          const x = (i + 0.5) * s - cx, y = (j + 0.5) * s - cy, z = (k + 0.5) * s - cz;
+          if ((x * x) / (rx * rx) + (y * y) / (ry * ry) + (z * z) / (rz * rz) <= 1) this.put(i, j, k, color, jitter);
+        }
+    return this;
+  }
+
+  build(): THREE.BufferGeometry {
+    const s = this.size, pos: number[] = [], nor: number[] = [], col: number[] = [];
+    for (const v of this.cells.values()) {
+      for (const n of DIRS) {
+        if (this.has(v.i + n[0], v.j + n[1], v.k + n[2])) continue;
+        const u = n[0] ? [0, 1, 0] : n[1] ? [0, 0, 1] : [1, 0, 0];
+        const w = n[0] ? [0, 0, 1] : n[1] ? [1, 0, 0] : [0, 1, 0];
+        const flip = n[0] + n[1] + n[2] < 0;
+        const q: number[][] = [], ao: number[] = [];
+        for (const [cu, cv] of [[-1, -1], [1, -1], [1, 1], [-1, 1]]) {
+          q.push([(v.i + 0.5 + 0.5 * n[0] + 0.5 * cu * u[0] + 0.5 * cv * w[0]) * s,
+            (v.j + 0.5 + 0.5 * n[1] + 0.5 * cu * u[1] + 0.5 * cv * w[1]) * s,
+            (v.k + 0.5 + 0.5 * n[2] + 0.5 * cu * u[2] + 0.5 * cv * w[2]) * s]);
+          const bx = v.i + n[0], by = v.j + n[1], bz = v.k + n[2];
+          const s1 = this.has(bx + cu * u[0], by + cu * u[1], bz + cu * u[2]) ? 1 : 0;
+          const s2 = this.has(bx + cv * w[0], by + cv * w[1], bz + cv * w[2]) ? 1 : 0;
+          const c3 = this.has(bx + cu * u[0] + cv * w[0], by + cu * u[1] + cv * w[1], bz + cu * u[2] + cv * w[2]) ? 1 : 0;
+          ao.push(AO[s1 && s2 ? 0 : 3 - (s1 + s2 + c3)]);
+        }
+        const tris = ao[0] + ao[2] < ao[1] + ao[3] ? [[1, 2, 3], [1, 3, 0]] : [[0, 1, 2], [0, 2, 3]];
+        for (const t of tris) {
+          for (const idx of flip ? [t[0], t[2], t[1]] : t) {
+            pos.push(q[idx][0], q[idx][1], q[idx][2]);
+            nor.push(n[0], n[1], n[2]);
+            col.push(v.r * ao[idx], v.g * ao[idx], v.b * ao[idx]);
+          }
+        }
+      }
+    }
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+    geo.setAttribute('normal', new THREE.Float32BufferAttribute(nor, 3));
+    geo.setAttribute('color', new THREE.Float32BufferAttribute(col, 3));
+    geo.computeBoundingBox();
+    geo.computeBoundingSphere();
+    return geo;
+  }
+}
diff --git a/src/client/world/voxel.ts b/src/client/world/voxel.ts
index 63b73f8bc..392dbb662 100644
--- a/src/client/world/voxel.ts
+++ b/src/client/world/voxel.ts
@@ -25,7 +25,7 @@ export function voxelGeometry(form: Form, width: number, height: number, depth:
   const positions: number[] = [], normals: number[] = [], colors: number[] = [];
   for (let i = 0; i < nx; i++) for (let j = 0; j < ny; j++) for (let k = 0; k < nz; k++) {
     if (!has(i, j, k)) continue;
-    const shade = 0.94 + ((i * 13 + j * 7 + k * 19) % 11) * 0.006;
+    const shade = 0.92 + ((i * 13 + j * 7 + k * 19) % 13) * 0.011;
     for (const n of directions) {
       if (has(i + n[0], j + n[1], k + n[2])) continue;
       const u = n[0] ? [0, 1, 0] : n[1] ? [0, 0, 1] : [1, 0, 0];
@@ -40,7 +40,7 @@ export function voxelGeometry(form: Form, width: number, height: number, depth:
         normals.push(...n);
         const side = has(i + n[0] + a * u[0], j + n[1] + a * u[1], k + n[2] + a * u[2]);
         const other = has(i + n[0] + b * v[0], j + n[1] + b * v[1], k + n[2] + b * v[2]);
-        const ao = shade * (side && other ? 0.68 : side || other ? 0.86 : 1);
+        const ao = shade * (side && other ? 0.55 : side || other ? 0.8 : 1);
         colors.push(ao, ao, ao);
       }
     }
@@ -63,3 +63,12 @@ export function voxelMaterial<T extends THREE.Material>(material: T): T {
   if ('vertexColors' in material) { material.vertexColors = true; material.needsUpdate = true; }
   return material;
 }
+
+const solids = new Map<string, THREE.MeshStandardMaterial>();
+
+/** A flat-coloured voxel material of its own, shared only between voxel meshes (the toon cache's are for meshes without vertex colours). */
+export function voxelSolid(color: string): THREE.MeshStandardMaterial {
+  let m = solids.get(color);
+  if (!m) solids.set(color, (m = new THREE.MeshStandardMaterial({ color, roughness: 0.7, metalness: 0, vertexColors: true })));
+  return m;
+}

From 029548ce5af6803dab5448d3be8e6b19db92805e Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:04:00 +0400
Subject: [PATCH 07/35] Block hands, picker lighting and voxel rooftop

---
 src/client/features/chess/world.ts            |  7 +-
 src/client/features/rooftop/cafe-seating.ts   | 39 ++++-----
 src/client/features/rooftop/cafe.ts           | 47 +++++-----
 src/client/features/rooftop/garden/ground.ts  | 13 +--
 src/client/features/rooftop/garden/plants.ts  |  7 +-
 .../features/rooftop/garden/structures.ts     | 13 +--
 src/client/features/rooftop/world.ts          | 17 ++--
 src/client/ui/character.ts                    | 11 ++-
 src/client/world/blocky.ts                    | 32 +++++++
 src/client/world/hand/rig.ts                  | 85 ++++---------------
 10 files changed, 130 insertions(+), 141 deletions(-)
 create mode 100644 src/client/world/blocky.ts

diff --git a/src/client/features/chess/world.ts b/src/client/features/chess/world.ts
index 3702827b8..a223ddc5f 100644
--- a/src/client/features/chess/world.ts
+++ b/src/client/features/chess/world.ts
@@ -1,3 +1,4 @@
+import { blockCylinder } from '../../world/blocky';
 import * as THREE from 'three';
 import { CHESS_SEATS, CHESS_TABLES } from '../../../shared/chess-seats';
 import type { SeatDef } from '../../../shared/layout';
@@ -106,7 +107,7 @@ function table(n: number, x: number, z: number): { root: THREE.Group; view: Ches
   root.add(mesh(roundedBox(TABLE_SIZE, 0.04, TABLE_SIZE, 0.035), walnut, 0, TABLE_H - 0.02, 0));
   const legAt = TABLE_SIZE / 2 - 0.07;
   for (const sx of [-1, 1]) {
-    for (const sz of [-1, 1]) root.add(mesh(new THREE.CylinderGeometry(0.026, 0.017, TABLE_H - 0.04, 14), walnut, sx * legAt, (TABLE_H - 0.04) / 2, sz * legAt));
+    for (const sz of [-1, 1]) root.add(mesh(blockCylinder(0.026, 0.017, TABLE_H - 0.04, 14), walnut, sx * legAt, (TABLE_H - 0.04) / 2, sz * legAt));
     root.add(mesh(new THREE.BoxGeometry(0.022, 0.07, legAt * 2), walnut, sx * legAt, TABLE_H - 0.075, 0));
     root.add(mesh(new THREE.BoxGeometry(legAt * 2, 0.07, 0.022), walnut, 0, TABLE_H - 0.075, sx * legAt));
   }
@@ -163,8 +164,8 @@ export function buildChessCorner(): ChessCorner {
   // The sign, on a post at the back of the rug, facing the tables.
   const signZ = cz - 2.55;
   const post = wood(WALNUT, 0.5);
-  group.add(mesh(new THREE.CylinderGeometry(0.035, 0.045, 1.9, 10), post, cx, 0.95, signZ));
-  group.add(mesh(new THREE.CylinderGeometry(0.13, 0.15, 0.04, 14), post, cx, 0.02, signZ));
+  group.add(mesh(blockCylinder(0.035, 0.045, 1.9, 10), post, cx, 0.95, signZ));
+  group.add(mesh(blockCylinder(0.13, 0.15, 0.04, 14), post, cx, 0.02, signZ));
   const face = new THREE.MeshStandardMaterial({ map: signTexture(), roughness: 0.6, metalness: 0 });
   const board = new THREE.Mesh(new THREE.BoxGeometry(2.2, 0.64, 0.05), [post, post, post, post, face, post]);
   board.position.set(cx, 1.55, signZ + 0.06);
diff --git a/src/client/features/rooftop/cafe-seating.ts b/src/client/features/rooftop/cafe-seating.ts
index f59516959..7ee3a7d10 100644
--- a/src/client/features/rooftop/cafe-seating.ts
+++ b/src/client/features/rooftop/cafe-seating.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockBall, blockRing } from '../../world/blocky';
 import * as THREE from 'three';
 import { CAFE_TABLES, ROOF_TABLES, SEATING_BY_ID } from '../../../shared/layout';
 import { bulb } from '../../world/outside';
@@ -16,8 +17,8 @@ function chair(): THREE.Group {
   g.add(mesh(roundedBox(0.42, 0.04, 0.42, 0.05), wood, 0, 0.45, 0));
   g.add(mesh(roundedBox(0.36, 0.03, 0.36, 0.05), toon(CUSHION), 0, 0.48, 0.01));
   for (const sx of [-1, 1]) {
-    for (const sz of [-1, 1]) g.add(mesh(new THREE.CylinderGeometry(0.018, 0.014, 0.45, 6), wood, sx * 0.17, 0.225, sz * 0.17, false));
-    g.add(mesh(new THREE.CylinderGeometry(0.016, 0.016, 0.4, 6), wood, sx * 0.17, 0.68, -0.19, false));
+    for (const sz of [-1, 1]) g.add(mesh(blockCylinder(0.018, 0.014, 0.45, 6), wood, sx * 0.17, 0.225, sz * 0.17, false));
+    g.add(mesh(blockCylinder(0.016, 0.016, 0.4, 6), wood, sx * 0.17, 0.68, -0.19, false));
   }
   g.add(mesh(new THREE.BoxGeometry(0.4, 0.05, 0.03), wood, 0, 0.84, -0.19, false));
   g.add(mesh(new THREE.BoxGeometry(0.4, 0.05, 0.03), wood, 0, 0.7, -0.19, false));
@@ -33,16 +34,16 @@ export function buildCafeSeating({ group, statics, colliders, interactables, nig
 
   // Round tables, each with a flower in a bud vase or a candle in a jar, and a chair either side.
   CAFE_TABLES.forEach(({ x, z }, i) => {
-    statics.add(mesh(new THREE.CylinderGeometry(0.22, 0.26, 0.03, 16), iron, x, 0.015, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.7, 8), iron, x, 0.37, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.46, 0.46, 0.04, 24), top, x, 0.74, z));
-    statics.add(mesh(new THREE.TorusGeometry(0.46, 0.014, 6, 24).rotateX(Math.PI / 2), wood, x, 0.74, z, false));
+    statics.add(mesh(blockCylinder(0.22, 0.26, 0.03, 16), iron, x, 0.015, z, false));
+    statics.add(mesh(blockCylinder(0.035, 0.035, 0.7, 8), iron, x, 0.37, z, false));
+    statics.add(mesh(blockCylinder(0.46, 0.46, 0.04, 24), top, x, 0.74, z));
+    statics.add(mesh(blockRing(0.46, 0.014), wood, x, 0.74, z, false));
     if (i % 2) {
-      statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.07, 10), jar, x, 0.8, z, false));
+      statics.add(mesh(blockCylinder(0.04, 0.04, 0.07, 10), jar, x, 0.8, z, false));
     } else {
-      statics.add(mesh(new THREE.CylinderGeometry(0.022, 0.028, 0.09, 8), toon('#dfe8ee'), x, 0.805, z, false));
-      statics.add(mesh(new THREE.CylinderGeometry(0.004, 0.004, 0.1, 4), stem, x, 0.89, z, false));
-      statics.add(mesh(new THREE.SphereGeometry(0.028, 8, 6), toon(['#f4a6b8', '#ffd166', '#fff3b0'][i % 3]), x, 0.95, z, false));
+      statics.add(mesh(blockCylinder(0.022, 0.028, 0.09, 8), toon('#dfe8ee'), x, 0.805, z, false));
+      statics.add(mesh(blockCylinder(0.004, 0.004, 0.1, 4), stem, x, 0.89, z, false));
+      statics.add(mesh(blockBall(0.028, 8, 6), toon(['#f4a6b8', '#ffd166', '#fff3b0'][i % 3]), x, 0.95, z, false));
     }
     colliders.push({ minX: x - 0.46, maxX: x + 0.46, minZ: z - 0.46, maxZ: z + 0.46, top: 0.76 });
     [0, 1].forEach((j) => {
@@ -59,10 +60,10 @@ export function buildCafeSeating({ group, statics, colliders, interactables, nig
   // Tall tables to stand at, with a candle each.
   const candle = bulb(night, '#ffbf69', 0.5);
   for (const { x, z } of ROOF_TABLES) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.28, 0.32, 0.04, 16), iron, x, 0.02, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 1.05, 8), iron, x, 0.55, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.42, 0.42, 0.05, 20), top, x, 1.08, z));
-    statics.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.1, 8), candle, x, 1.16, z, false));
+    statics.add(mesh(blockCylinder(0.28, 0.32, 0.04, 16), iron, x, 0.02, z, false));
+    statics.add(mesh(blockCylinder(0.04, 0.04, 1.05, 8), iron, x, 0.55, z, false));
+    statics.add(mesh(blockCylinder(0.42, 0.42, 0.05, 20), top, x, 1.08, z));
+    statics.add(mesh(blockCylinder(0.035, 0.035, 0.1, 8), candle, x, 1.16, z, false));
     colliders.push({ minX: x - 0.3, maxX: x + 0.3, minZ: z - 0.3, maxZ: z + 0.3, top: 1.1 });
   }
 
@@ -70,11 +71,11 @@ export function buildCafeSeating({ group, statics, colliders, interactables, nig
   for (let i = 1; i <= 6; i++) {
     const s = SEATING_BY_ID.get(`roof-stool-${i}`)!;
     const stool = new THREE.Group();
-    stool.add(mesh(new THREE.CylinderGeometry(0.2, 0.25, 0.03, 16), iron, 0, 0.015, 0, false));
-    stool.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.66, 8), iron, 0, 0.36, 0, false));
-    stool.add(mesh(new THREE.TorusGeometry(0.16, 0.015, 6, 16).rotateX(Math.PI / 2), iron, 0, 0.32, 0, false));
-    stool.add(mesh(new THREE.CylinderGeometry(0.22, 0.2, 0.05, 16), toon(TIMBER_DARK), 0, 0.7, 0));
-    stool.add(mesh(new THREE.CylinderGeometry(0.2, 0.2, 0.05, 16), toon(CUSHION), 0, 0.75, 0));
+    stool.add(mesh(blockCylinder(0.2, 0.25, 0.03, 16), iron, 0, 0.015, 0, false));
+    stool.add(mesh(blockCylinder(0.035, 0.035, 0.66, 8), iron, 0, 0.36, 0, false));
+    stool.add(mesh(blockRing(0.16, 0.015), iron, 0, 0.32, 0, false));
+    stool.add(mesh(blockCylinder(0.22, 0.2, 0.05, 16), toon(TIMBER_DARK), 0, 0.7, 0));
+    stool.add(mesh(blockCylinder(0.2, 0.2, 0.05, 16), toon(CUSHION), 0, 0.75, 0));
     stool.position.set(s.x, 0, s.z);
     seatable(stool, s.id, 0.75, interactables);
     group.add(stool);
diff --git a/src/client/features/rooftop/cafe.ts b/src/client/features/rooftop/cafe.ts
index 97e70080f..959215742 100644
--- a/src/client/features/rooftop/cafe.ts
+++ b/src/client/features/rooftop/cafe.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockBall, blockCone, blockCapsule } from '../../world/blocky';
 import * as THREE from 'three';
 import { DRINKS, FOODS, type MenuItem } from '../../../shared/rooftop';
 import { FLOOR, ROOF_BAR } from '../../../shared/layout';
@@ -67,7 +68,7 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
   bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth, top - 0.06, blen), plaster, bx, (top - 0.06) / 2, bz));
   for (let z = ROOF_BAR.minZ + 0.15; z < ROOF_BAR.maxZ; z += 0.3) bar.add(mesh(new THREE.BoxGeometry(0.03, top - 0.2, 0.12), timber, front - 0.012, top / 2, z, false));
   bar.add(mesh(new THREE.BoxGeometry(ROOF_BAR.depth + 0.2, 0.06, blen + 0.2), toon('#dcb888'), bx - 0.05, top - 0.03, bz));
-  const footRail = mesh(new THREE.CylinderGeometry(0.03, 0.03, blen, 8), toon(BRASS), front - 0.2, 0.22, bz, false);
+  const footRail = mesh(blockCylinder(0.03, 0.03, blen, 8), toon(BRASS), front - 0.2, 0.22, bz, false);
   footRail.rotation.x = Math.PI / 2;
   bar.add(footRail);
   const underGlow = new THREE.MeshBasicMaterial({ color: '#ffb870' });
@@ -83,32 +84,32 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
   bar.add(mesh(new THREE.BoxGeometry(0.5, 0.4, 0.8), chrome, bx, top + 0.2, mz));
   bar.add(mesh(new THREE.BoxGeometry(0.52, 0.04, 0.82), dark, bx, top + 0.42, mz, false));
   bar.add(mesh(new THREE.BoxGeometry(0.02, 0.1, 0.7), toon('#c9772e'), bx - 0.26, top + 0.22, mz, false));
-  bar.add(mesh(new THREE.CylinderGeometry(0.035, 0.035, 0.02, 14).rotateZ(Math.PI / 2), dark, bx - 0.26, top + 0.32, mz, false));
+  bar.add(mesh(blockCylinder(0.035, 0.035, 0.02, 14).rotateZ(Math.PI / 2), dark, bx - 0.26, top + 0.32, mz, false));
   bar.add(mesh(new THREE.BoxGeometry(0.2, 0.025, 0.7), dark, bx + 0.34, top + 0.015, mz, false));
   for (const dz of [-0.2, 0.2]) {
-    bar.add(mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.07, 12), dark, bx + 0.22, top + 0.26, mz + dz, false));
+    bar.add(mesh(blockCylinder(0.05, 0.05, 0.07, 12), dark, bx + 0.22, top + 0.26, mz + dz, false));
     bar.add(mesh(new THREE.BoxGeometry(0.2, 0.03, 0.04), toon('#1d1d1d'), bx + 0.34, top + 0.26, mz + dz, false));
-    bar.add(mesh(new THREE.CylinderGeometry(0.04, 0.034, 0.06, 12), china, bx + 0.34, top + 0.07, mz + dz, false));
+    bar.add(mesh(blockCylinder(0.04, 0.034, 0.06, 12), china, bx + 0.34, top + 0.07, mz + dz, false));
   }
   // …a grinder with a hopper of beans…
   bar.add(mesh(new THREE.BoxGeometry(0.22, 0.36, 0.26), dark, bx, top + 0.18, -3.6));
-  bar.add(mesh(new THREE.CylinderGeometry(0.1, 0.05, 0.22, 14), toon('#6b4a2e'), bx, top + 0.47, -3.6, false));
+  bar.add(mesh(blockCylinder(0.1, 0.05, 0.22, 14), toon('#6b4a2e'), bx, top + 0.47, -3.6, false));
   // …stacks of cups…
   for (const [z, n] of [
     [-4.5, 4],
     [-4.9, 3],
     [-5.3, 4],
   ] as const)
-    for (let k = 0; k < n; k++) bar.add(mesh(new THREE.CylinderGeometry(0.05, 0.04, 0.045, 12), china, bx - 0.05, top + 0.0225 + k * 0.04, z, false));
+    for (let k = 0; k < n; k++) bar.add(mesh(blockCylinder(0.05, 0.04, 0.045, 12), china, bx - 0.05, top + 0.0225 + k * 0.04, z, false));
   // …and a pot of herbs by the till.
-  bar.add(mesh(new THREE.CylinderGeometry(0.12, 0.09, 0.15, 12), toon('#c4703f'), bx - 0.1, top + 0.075, 3.4));
+  bar.add(mesh(blockCylinder(0.12, 0.09, 0.15, 12), toon('#c4703f'), bx - 0.1, top + 0.075, 3.4));
   for (const [x, y, z] of [
     [-0.06, 0.22, 0],
     [0.05, 0.25, 0.05],
     [0.02, 0.2, -0.07],
     [0.08, 0.2, -0.03],
   ])
-    bar.add(mesh(new THREE.SphereGeometry(0.075, 8, 6), toon('#5fb760'), bx - 0.1 + x, top + y, 3.4 + z, false));
+    bar.add(mesh(blockBall(0.075, 8, 6), toon('#5fb760'), bx - 0.1 + x, top + y, 3.4 + z, false));
 
   // The pastry case: a plaster base, glass all round, two shelves of croissants and pains au chocolat.
   const cz = 1.2;
@@ -129,7 +130,7 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
       const x = bx - 0.05 + (i % 2 ? 0.1 : -0.1);
       if ((i + shelf) % 3 === 2) {
         // A pain au chocolat.
-        const p = mesh(new THREE.CapsuleGeometry(0.045, 0.1, 4, 8), toon(golds[1]), x, top + y + 0.06, z, false);
+        const p = mesh(blockCapsule(0.045, 0.1, 4, 8), toon(golds[1]), x, top + y + 0.06, z, false);
         p.rotation.x = Math.PI / 2;
         bar.add(p);
         bar.add(mesh(new THREE.BoxGeometry(0.012, 0.012, 0.13), toon('#3b2214'), x, top + y + 0.108, z, false));
@@ -137,7 +138,7 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
         // A croissant: a crescent of puffed segments.
         for (let k = -2; k <= 2; k++) {
           const r = 0.034 - Math.abs(k) * 0.006;
-          const seg = mesh(new THREE.SphereGeometry(r, 8, 6), toon(golds[(i + k + 3) % 3]), x + k * 0.075 * 0.5, top + y + 0.012 + r, z + Math.abs(k) * 0.025, false);
+          const seg = mesh(blockBall(r, 8, 6), toon(golds[(i + k + 3) % 3]), x + k * 0.075 * 0.5, top + y + 0.012 + r, z + Math.abs(k) * 0.025, false);
           seg.scale.set(1.1, 0.9, 1);
           bar.add(seg);
         }
@@ -160,8 +161,8 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
     for (let z = 0.4; z < 3.5; z += 0.28) {
       k++;
       if (k % 3 === 0) statics.add(mesh(new THREE.BoxGeometry(0.1, 0.24, 0.17), toon(bagColors[k % 3]), wall - 0.2, y + 0.14, z, false));
-      else if (k % 3 === 1) statics.add(mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.2 + (k % 2) * 0.04, 10), toon(jarColors[k % 4]), wall - 0.2, y + 0.12, z, false));
-      else statics.add(mesh(new THREE.CylinderGeometry(0.05, 0.04, 0.07, 10), china, wall - 0.2, y + 0.055, z, false));
+      else if (k % 3 === 1) statics.add(mesh(blockCylinder(0.07, 0.07, 0.2 + (k % 2) * 0.04, 10), toon(jarColors[k % 4]), wall - 0.2, y + 0.12, z, false));
+      else statics.add(mesh(blockCylinder(0.05, 0.04, 0.07, 10), china, wall - 0.2, y + 0.055, z, false));
     }
   }
   colliders.push({ minX: back - 0.3, maxX: FLOOR.maxX, minZ: ROOF_BAR.minZ + 0.3, maxZ: ROOF_BAR.maxZ - 0.3, top: 99 });
@@ -200,24 +201,24 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
   const signMat = new THREE.MeshStandardMaterial({ map: sign, roughness: 0.9 });
   signMat.userData.outlineParameters = { visible: false };
   group.add(mesh(new THREE.PlaneGeometry(3.2, 0.8).rotateY(-Math.PI / 2), signMat, p0.x - 0.1, roofY - 0.55, bz, false));
-  for (const dz of [-1.4, 1.4]) statics.add(mesh(new THREE.CylinderGeometry(0.01, 0.01, 0.35, 4), toon(TIMBER_DARK), p0.x - 0.08, roofY - 0.2, bz + dz, false));
+  for (const dz of [-1.4, 1.4]) statics.add(mesh(blockCylinder(0.01, 0.01, 0.35, 4), toon(TIMBER_DARK), p0.x - 0.08, roofY - 0.2, bz + dz, false));
   // Pendant lamps along the counter, and pots hanging from the front beam.
   const pendant = bulb(night, '#ffd9a0', 0.55);
   for (const z of [-4.6, -2.3, 0, 2.3, 3.8]) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.75, 4), dark, bx + 0.1, roofY - 0.35, z, false));
-    statics.add(mesh(new THREE.ConeGeometry(0.17, 0.2, 14, 1, true), toon('#e9d3b0'), bx + 0.1, 2.5, z, true));
-    statics.add(mesh(new THREE.SphereGeometry(0.06, 8, 6), pendant, bx + 0.1, 2.46, z, false));
+    statics.add(mesh(blockCylinder(0.008, 0.008, 0.75, 4), dark, bx + 0.1, roofY - 0.35, z, false));
+    statics.add(mesh(blockCone(0.17, 0.2, 14, 1, true), toon('#e9d3b0'), bx + 0.1, 2.5, z, true));
+    statics.add(mesh(blockBall(0.06, 8, 6), pendant, bx + 0.1, 2.46, z, false));
   }
   for (const z of [-4.2, -1.1, 2.0]) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.008, 0.008, 0.5, 4), dark, p0.x + 0.05, roofY - 0.3, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.13, 0.09, 0.14, 10), toon('#c4703f'), p0.x + 0.05, 2.75, z));
+    statics.add(mesh(blockCylinder(0.008, 0.008, 0.5, 4), dark, p0.x + 0.05, roofY - 0.3, z, false));
+    statics.add(mesh(blockCylinder(0.13, 0.09, 0.14, 10), toon('#c4703f'), p0.x + 0.05, 2.75, z));
     for (const [dx, dy, dz] of [
       [0, 0.1, 0],
       [0.1, 0, 0.08],
       [-0.1, -0.1, -0.06],
       [0.05, -0.2, 0.05],
     ])
-      statics.add(mesh(new THREE.SphereGeometry(0.1, 8, 6), toon('#5fb760'), p0.x + 0.05 + dx, 2.82 + dy, z + dz, false));
+      statics.add(mesh(blockBall(0.1, 8, 6), toon('#5fb760'), p0.x + 0.05 + dx, 2.82 + dy, z + dz, false));
   }
 
   // String lights: over the pergola, and criss-crossing the tables from a pair of poles on their far side.
@@ -232,15 +233,15 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
     const n = Math.max(2, Math.round(curve.getLength() / 0.6));
     for (let i = 1; i < n; i++) {
       const p = curve.getPoint(i / n);
-      statics.add(mesh(new THREE.SphereGeometry(0.06, 8, 6), bulbMats[i % 2], p.x, p.y - 0.06, p.z, false));
+      statics.add(mesh(blockBall(0.06, 8, 6), bulbMats[i % 2], p.x, p.y - 0.06, p.z, false));
       glowAt.push(p.x, p.y - 0.06, p.z);
     }
   };
   for (let z = p0.z + 0.6; z < p1.z; z += 2.9) festoon(new THREE.Vector3(p0.x, roofY - 0.1, z), new THREE.Vector3(p1.x, roofY - 0.1, z + 1.4), 0.25);
   const poles = [-7.2, 4.2].map((z) => new THREE.Vector3(2.6, 3.4, z));
   for (const p of poles) {
-    statics.add(mesh(new THREE.CylinderGeometry(0.05, 0.07, 3.4, 8), toon(TIMBER_DARK), p.x, 1.7, p.z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.25, 0.3, 0.1, 12), dark, p.x, 0.05, p.z, false));
+    statics.add(mesh(blockCylinder(0.05, 0.07, 3.4, 8), toon(TIMBER_DARK), p.x, 1.7, p.z, false));
+    statics.add(mesh(blockCylinder(0.25, 0.3, 0.1, 12), dark, p.x, 0.05, p.z, false));
     colliders.push({ minX: p.x - 0.12, maxX: p.x + 0.12, minZ: p.z - 0.12, maxZ: p.z + 0.12, top: 99 });
   }
   const corner = (z: number) => new THREE.Vector3(p0.x, roofY - 0.1, z);
@@ -276,7 +277,7 @@ export function buildCafe({ group, statics, colliders, interactables, night }: R
   // (The worker's body is the first thing in it: the apron goes on that, so it moves with it.)
   const apron = new THREE.Group();
   const cloth = new THREE.MeshStandardMaterial({ color: '#b5651d', roughness: 0.8, side: THREE.DoubleSide });
-  apron.add(mesh(new THREE.CylinderGeometry(0.295, 0.295, 0.3, 16, 1, true, -Math.PI * 0.42, Math.PI * 0.84), cloth, 0, 0.53, 0, false));
+  apron.add(mesh(blockCylinder(0.295, 0.295, 0.3, 16, 1, true, -Math.PI * 0.42, Math.PI * 0.84), cloth, 0, 0.53, 0, false));
   apron.add(mesh(new THREE.BoxGeometry(0.16, 0.09, 0.02), toon('#8f4e15'), 0, 0.5, 0.3, false));
   (barista.root.children[0] ?? barista.root).add(apron);
   barista.root.position.set(bx + ROOF_BAR.depth / 2 + 0.7, 0, bz);
diff --git a/src/client/features/rooftop/garden/ground.ts b/src/client/features/rooftop/garden/ground.ts
index 83ab06615..317f899f7 100644
--- a/src/client/features/rooftop/garden/ground.ts
+++ b/src/client/features/rooftop/garden/ground.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockBall } from '../../../world/blocky';
 import * as THREE from 'three';
 import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { hash3 } from './leaves';
@@ -29,7 +30,7 @@ export function boulder(g: Grow, x: number, z: number, r: number, h: number, hex
 
 /** A low cushion of moss on the ground (or on a soil bed, at height `y`). */
 export function moss(g: Grow, x: number, z: number, r: number, y = 0) {
-  const geo = new THREE.SphereGeometry(1, 10, 5, 0, TAU, 0, Math.PI / 2);
+  const geo = blockBall(1, 10, 5, 0, TAU, 0, Math.PI / 2);
   const p = geo.attributes.position;
   for (let i = 0; i < p.count; i++) {
     const k = 1 + 0.3 * (hash3(p.getX(i) * 3, 0, p.getZ(i) * 3) - 0.5);
@@ -46,7 +47,7 @@ export function steppingStones(g: Grow, pts: [number, number][]) {
   for (let i = 0; i <= n; i++) {
     const c = curve.getPoint(i / n);
     const r = 0.17 + 0.07 * g.r();
-    const geo = new THREE.CylinderGeometry(1, 1.06, 1, 8);
+    const geo = blockCylinder(1, 1.06, 1, 8);
     g.s.add('stone', geo, tint(g, ['#8c908c', '#7d827e', '#9a9a92'][i % 3], 0.1), at(c.x + (g.r() - 0.5) * 0.12, 0.018, c.z + (g.r() - 0.5) * 0.12, g.r() * TAU, r * 1.15, 0.036, r * (0.8 + 0.2 * g.r())), 0.14, 0, 0.35);
     if (g.r() < 0.4) moss(g, c.x + (g.r() - 0.5) * 0.5, c.z + (g.r() - 0.5) * 0.5, 0.1 + 0.08 * g.r());
   }
@@ -54,12 +55,12 @@ export function steppingStones(g: Grow, pts: [number, number][]) {
 
 /** A tiny pond: a ring of stones round dark water with lily pads and a pink lotus. Returns the water, to go in the scene as it is. */
 export function pond(g: Grow, x: number, z: number, r: number): THREE.Mesh {
-  g.s.add('soil', new THREE.CylinderGeometry(r + 0.05, r + 0.05, 0.06, 24), '#232a26', at(x, 0.03, z), 0.08);
+  g.s.add('soil', blockCylinder(r + 0.05, r + 0.05, 0.06, 24), '#232a26', at(x, 0.03, z), 0.08);
   const n = 12;
   for (let i = 0; i < n; i++) {
     const a = (i / n) * TAU;
     const rr = 0.17 + 0.07 * g.r();
-    const geo = new THREE.IcosahedronGeometry(1, 1);
+    const geo = new THREE.BoxGeometry(1.5, 1.5, 1.5);
     geo.deleteAttribute('uv');
     geo.deleteAttribute('normal');
     const s = mergeVertices(geo);
@@ -67,7 +68,7 @@ export function pond(g: Grow, x: number, z: number, r: number): THREE.Mesh {
     g.s.add('stone', s, tint(g, ['#8c908c', '#7a7f7a', '#9d9b92'][i % 3], 0.1), at(x + Math.cos(a) * (r + 0.1), 0.07, z + Math.sin(a) * (r + 0.1), g.r() * TAU, rr * 1.2, rr * 0.8, rr), 0.12, 0, 0.5);
   }
   const water = new THREE.Mesh(
-    new THREE.CircleGeometry(r, 32).rotateX(-Math.PI / 2),
+    new THREE.PlaneGeometry(r * 1.8, r * 1.8).rotateX(-Math.PI / 2),
     new THREE.MeshStandardMaterial({ color: '#2f5b5a', roughness: 0.04, metalness: 0, transparent: true, opacity: 0.9, envMapIntensity: 1.6 }),
   );
   water.position.set(x, 0.095, z);
@@ -78,7 +79,7 @@ export function pond(g: Grow, x: number, z: number, r: number): THREE.Mesh {
     [0.12, 0.28, 0.1],
     [-0.1, -0.3, 0.09],
   ]) {
-    const pad = new THREE.CircleGeometry(s, 12, 0.4, 5.6).rotateX(-Math.PI / 2);
+    const pad = new THREE.PlaneGeometry(s * 1.6, s * 1.6).rotateX(-Math.PI / 2);
     g.s.add('moss', pad, tint(g, '#3f7d3c', 0.1), at(x + dx * (r / 0.72), 0.099, z + dz * (r / 0.72), g.r() * TAU), 0.1);
   }
   return water;
diff --git a/src/client/features/rooftop/garden/plants.ts b/src/client/features/rooftop/garden/plants.ts
index 1e769ae1a..ad74ab0bb 100644
--- a/src/client/features/rooftop/garden/plants.ts
+++ b/src/client/features/rooftop/garden/plants.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockBall } from '../../../world/blocky';
 import * as THREE from 'three';
 import type { Collider } from '../../../world/types';
 import { FoliageBatch, Solids, frondGeometry, lance, leafGeometry, place } from './leaves';
@@ -77,7 +78,7 @@ function trunk(g: Grow, x: number, y: number, z: number, h: number, r0: number,
       pts.push(new THREE.Vector2(lerp(r0, r1, t) * (b as number), t * h));
     }
   }
-  const geo = new THREE.LatheGeometry(pts, 9);
+  const geo = new THREE.LatheGeometry(pts, 4);
   const lean = o.lean ?? new THREE.Vector2();
   const p = geo.attributes.position;
   for (let i = 0; i < p.count; i++) {
@@ -119,7 +120,7 @@ export function treeFern(g: Grow, x: number, y: number, z: number, h: number, fa
 export function palm(g: Grow, x: number, y: number, z: number, h: number, face?: number) {
   const lean = new THREE.Vector2((g.r() - 0.5) * 0.14, (g.r() - 0.5) * 0.14);
   const top = trunk(g, x, y, z, h, 0.1, 0.07, { color: '#7a6a55', grain: 0.2, seg: 0.1, bump: 0.12, lean });
-  g.s.add('wood', new THREE.CylinderGeometry(0.065, 0.07, 0.34, 8), '#8bb04e', new THREE.Matrix4().makeTranslation(top.x, top.y - 0.03, top.z), 0.08);
+  g.s.add('wood', blockCylinder(0.065, 0.07, 0.34, 8), '#8bb04e', new THREE.Matrix4().makeTranslation(top.x, top.y - 0.03, top.z), 0.08);
   rosette(g, g.t.palm, top.clone().setY(top.y + 0.1), 11, [1.45, 1.85], [1.1, -0.1], '#3f8a3a', 0.09, face);
   g.colliders.push(fixed(x + lean.x * h * 0.4, z + lean.y * h * 0.4, 0.15));
 }
@@ -132,7 +133,7 @@ export function banana(g: Grow, x: number, y: number, z: number, h: number, face
     const a = g.r() * 6.28;
     const p = (r: number, dy: number) => new THREE.Vector3(top.x + Math.cos(a) * r, top.y + dy, top.z + Math.sin(a) * r);
     stem(g, [p(0, -0.1), p(0.2, 0), p(0.4, -0.15), p(0.42, -0.4)], 0.022, '#7a8f4a');
-    g.s.add('cloth', new THREE.SphereGeometry(1, 10, 8), '#5a1d4c', new THREE.Matrix4().compose(p(0.42, -0.58), new THREE.Quaternion(), new THREE.Vector3(0.07, 0.17, 0.07)), 0.12);
+    g.s.add('cloth', blockBall(1, 10, 8), '#5a1d4c', new THREE.Matrix4().compose(p(0.42, -0.58), new THREE.Quaternion(), new THREE.Vector3(0.07, 0.17, 0.07)), 0.12);
   }
   g.colliders.push(fixed(x, z, 0.2));
 }
diff --git a/src/client/features/rooftop/garden/structures.ts b/src/client/features/rooftop/garden/structures.ts
index c5100a1ff..f57b6e573 100644
--- a/src/client/features/rooftop/garden/structures.ts
+++ b/src/client/features/rooftop/garden/structures.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockCone, blockRing } from '../../../world/blocky';
 import * as THREE from 'three';
 import type { Kind, Solids } from './leaves';
 import { ivyStrand, tint, type Grow } from './plants';
@@ -40,8 +41,8 @@ export function lantern(g: Grow, x: number, z: number, hangFrom?: number) {
   const iron = '#2a2623';
   box(g.s, 'iron', iron, 0.17, 0.03, 0.17, x, y + 0.015, z);
   for (const sx of [-1, 1]) for (const sz of [-1, 1]) box(g.s, 'iron', iron, 0.015, 0.22, 0.015, x + sx * 0.075, y + 0.14, z + sz * 0.075);
-  g.s.add('iron', new THREE.ConeGeometry(0.13, 0.09, 4).rotateY(Math.PI / 4), iron, new THREE.Matrix4().makeTranslation(x, y + 0.295, z), 0);
-  g.s.add('iron', new THREE.TorusGeometry(0.035, 0.007, 5, 10), iron, new THREE.Matrix4().makeTranslation(x, y + 0.36, z), 0);
+  g.s.add('iron', blockCone(0.13, 0.09, 4).rotateY(Math.PI / 4), iron, new THREE.Matrix4().makeTranslation(x, y + 0.295, z), 0);
+  g.s.add('iron', blockRing(0.035, 0.007), iron, new THREE.Matrix4().makeTranslation(x, y + 0.36, z), 0);
   if (hangFrom !== undefined) box(g.s, 'iron', iron, 0.01, hangFrom - y - 0.36, 0.01, x, (hangFrom + y + 0.36) / 2, z);
   g.glow.push(new THREE.BoxGeometry(0.12, 0.2, 0.12).translate(x, y + 0.14, z));
 }
@@ -76,12 +77,12 @@ export function soundStone(g: Grow, x: number, z: number): THREE.Group {
   const turn = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.6);
   g.s.add('stone', rock, tint(g, '#7b7f7a'), new THREE.Matrix4().compose(new THREE.Vector3(x, 0.36, z), turn, new THREE.Vector3(0.85, 1.0, 0.8)), 0.12, 0, 0.6);
   box(g.s, 'wood', '#8a5a36', 0.34, 0.05, 0.34, x, 0.76, z, 0.6);
-  g.s.add('wood', new THREE.CylinderGeometry(0.07, 0.08, 0.04, 12), '#5e3a22', new THREE.Matrix4().makeTranslation(x, 0.8, z), 0.05);
-  g.glow.push(new THREE.TorusGeometry(0.27, 0.012, 6, 28).rotateX(Math.PI / 2).translate(x, 0.5, z));
-  g.glow.push(new THREE.TorusGeometry(0.37, 0.008, 6, 32).rotateX(Math.PI / 2).translate(x, 0.34, z));
+  g.s.add('wood', blockCylinder(0.07, 0.08, 0.04, 12), '#5e3a22', new THREE.Matrix4().makeTranslation(x, 0.8, z), 0.05);
+  g.glow.push(blockRing(0.27, 0.012).translate(x, 0.5, z));
+  g.glow.push(blockRing(0.37, 0.008).translate(x, 0.34, z));
   g.colliders.push({ minX: x - 0.36, maxX: x + 0.36, minZ: z - 0.36, maxZ: z + 0.36, top: 0.85 });
   const target = new THREE.Group();
-  const hit = new THREE.Mesh(new THREE.CylinderGeometry(0.42, 0.45, 0.85, 10), new THREE.MeshBasicMaterial({ visible: false }));
+  const hit = new THREE.Mesh(blockCylinder(0.42, 0.45, 0.85, 10), new THREE.MeshBasicMaterial({ visible: false }));
   hit.position.set(x, 0.42, z);
   target.add(hit);
   return target;
diff --git a/src/client/features/rooftop/world.ts b/src/client/features/rooftop/world.ts
index 3804824f2..7777e16b3 100644
--- a/src/client/features/rooftop/world.ts
+++ b/src/client/features/rooftop/world.ts
@@ -1,3 +1,4 @@
+import { blockCylinder, blockBall, blockCone } from '../../world/blocky';
 import * as THREE from 'three';
 import { AXE_LANE } from '../../../shared/bargames';
 import { ELEVATOR, ELEVATOR_FRONT, FLOOR, SEATING_BY_ID, WALL_HEIGHT, WALL_T } from '../../../shared/layout';
@@ -118,7 +119,7 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
     const pane = mesh(new THREE.PlaneGeometry(len, 0.72), glassMat, ex, 0.81, ez, false);
     if (!alongX) pane.rotation.y = Math.PI / 2;
     group.add(pane);
-    const rail = mesh(new THREE.CylinderGeometry(0.035, 0.035, len, 8), steel, ex, 1.19, ez, false);
+    const rail = mesh(blockCylinder(0.035, 0.035, len, 8), steel, ex, 1.19, ez, false);
     rail.rotation.set(alongX ? 0 : Math.PI / 2, 0, alongX ? Math.PI / 2 : 0);
     statics.add(rail);
     for (let a = 0; a <= len + 0.01; a += 2.4) {
@@ -140,7 +141,7 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   statics.add(mesh(new THREE.BoxGeometry(ELEVATOR.width, WALL_HEIGHT + 0.3, WALL_T), housing, ELEVATOR.x, (WALL_HEIGHT + 0.3) / 2, FLOOR.minZ - WALL_T / 2));
   statics.add(mesh(new THREE.BoxGeometry(ELEVATOR.width + 0.3, 0.3, ELEVATOR_FRONT - B.minZ + 0.2), toon('#8d99ae'), ELEVATOR.x, WALL_HEIGHT + 0.15, (B.minZ + ELEVATOR_FRONT) / 2 + 0.05));
   const beacon = bulb(night, '#ff5d5d', 0.6);
-  statics.add(mesh(new THREE.SphereGeometry(0.12, 10, 8), beacon, ELEVATOR.x, WALL_HEIGHT + 0.4, (B.minZ + ELEVATOR_FRONT) / 2, false));
+  statics.add(mesh(blockBall(0.12, 10, 8), beacon, ELEVATOR.x, WALL_HEIGHT + 0.4, (B.minZ + ELEVATOR_FRONT) / 2, false));
   colliders.push({ minX: ELEVATOR.x - hw, maxX: ELEVATOR.x + hw, minZ: B.minZ, maxZ: FLOOR.minZ, top: 99 });
 
   // The café, and its tables and chairs.
@@ -165,10 +166,10 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
   }
   for (const x of [-0.8, 2]) {
     const z = FLOOR.maxZ - 1.1;
-    statics.add(mesh(new THREE.CylinderGeometry(0.04, 0.04, 2.6, 8), frame, x, 1.3, z, false));
-    statics.add(mesh(new THREE.ConeGeometry(1.5, 0.5, 12, 1, true), toon('#e9b872'), x, 2.6, z, true));
-    statics.add(mesh(new THREE.CylinderGeometry(0.22, 0.22, 0.45, 12), frame, x, 0.225, z, false));
-    statics.add(mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.04, 12), frame, x, 0.47, z, false));
+    statics.add(mesh(blockCylinder(0.04, 0.04, 2.6, 8), frame, x, 1.3, z, false));
+    statics.add(mesh(blockCone(1.5, 0.5, 12, 1, true), toon('#e9b872'), x, 2.6, z, true));
+    statics.add(mesh(blockCylinder(0.22, 0.22, 0.45, 12), frame, x, 0.225, z, false));
+    statics.add(mesh(blockCylinder(0.3, 0.3, 0.04, 12), frame, x, 0.47, z, false));
     colliders.push({ minX: x - 0.3, maxX: x + 0.3, minZ: z - 0.3, maxZ: z + 0.3, top: 0.49 });
   }
 
@@ -183,7 +184,7 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
     for (let a = 0.4; a < len - 0.2; a += 0.7) {
       const px = alongX ? x0 + a : (x0 + x1) / 2;
       const pz = alongX ? (z0 + z1) / 2 : z0 + a;
-      statics.add(mesh(new THREE.SphereGeometry(0.38 + ((a * 13) % 3) * 0.06, 10, 8), a % 1.4 < 0.7 ? leaf : leafDark, px, 0.8, pz, false));
+      statics.add(mesh(blockBall(0.38 + ((a * 13) % 3) * 0.06, 10, 8), a % 1.4 < 0.7 ? leaf : leafDark, px, 0.8, pz, false));
     }
     colliders.push({ minX: x0, maxX: x1, minZ: z0, maxZ: z1, top: 0.6 });
   };
@@ -203,7 +204,7 @@ export function buildRooftop(night: NightParts, floors: number): Rooftop {
     [16.2, -11],
   ]) {
     statics.add(mesh(new THREE.BoxGeometry(2.2, 1.3, 2.4), toon('#dfe3e8'), x, 0.65, z));
-    statics.add(mesh(new THREE.CylinderGeometry(0.75, 0.75, 0.06, 20), toon('#565a75'), x, 1.31, z, false));
+    statics.add(mesh(blockCylinder(0.75, 0.75, 0.06, 20), toon('#565a75'), x, 1.31, z, false));
     const fan = new THREE.Group();
     for (let b = 0; b < 3; b++) {
       const blade = mesh(new THREE.BoxGeometry(1.2, 0.02, 0.22), toon('#2b2d42'), 0, 0, 0, false);
diff --git a/src/client/ui/character.ts b/src/client/ui/character.ts
index 0c84b55aa..8cfefac89 100644
--- a/src/client/ui/character.ts
+++ b/src/client/ui/character.ts
@@ -31,9 +31,12 @@ class Preview {
     this.renderer.shadowMap.enabled = true;
     this.effect = new OutlineEffect(this.renderer, { defaultThickness: 0.0045, defaultColor: [0.17, 0.18, 0.26] });
 
-    this.scene.add(new THREE.HemisphereLight('#fff5e6', '#c9a27a', 1.5));
-    this.scene.add(new THREE.AmbientLight('#ffffff', 0.5));
-    const sun = new THREE.DirectionalLight('#fff1d6', 2.2);
+    this.scene.add(new THREE.HemisphereLight('#ffe8c8', '#7f97b0', 1.1));
+    this.scene.add(new THREE.AmbientLight('#ffffff', 0.25));
+    const fill = new THREE.DirectionalLight('#bfd9ff', 0.9);
+    fill.position.set(4, 3, -3);
+    this.scene.add(fill);
+    const sun = new THREE.DirectionalLight('#fff1d6', 2.6);
     sun.position.set(-3, 6, 5);
     sun.castShadow = true;
     sun.shadow.mapSize.set(1024, 1024);
@@ -41,7 +44,7 @@ class Preview {
     sun.shadow.normalBias = 0.02;
     Object.assign(sun.shadow.camera, { left: -2, right: 2, top: 2, bottom: -2, near: 0.5, far: 20 });
     this.scene.add(sun);
-    const rug = new THREE.Mesh(new THREE.CircleGeometry(0.9, 40), toonUnique('#ffd6a5'));
+    const rug = new THREE.Mesh(new THREE.PlaneGeometry(1.7, 1.7), toonUnique('#ffd6a5'));
     rug.rotation.x = -Math.PI / 2;
     rug.receiveShadow = true;
     rug.material.userData.outlineParameters = { visible: false };
diff --git a/src/client/world/blocky.ts b/src/client/world/blocky.ts
new file mode 100644
index 000000000..675fdc032
--- /dev/null
+++ b/src/client/world/blocky.ts
@@ -0,0 +1,32 @@
+import * as THREE from 'three';
+
+// Square-edged stand-ins for round primitives, so props built from cylinders, balls and cones come
+// out as chunky blocks like the voxel people (see vox.ts). Same leading arguments as the three.js
+// shapes they replace; the rest are ignored.
+
+/** A post or drum: a square block as wide as the cylinder's average diameter, a little under it. */
+export function blockCylinder(top: number, bottom: number, height: number, ..._rest: unknown[]): THREE.BufferGeometry {
+  const w = (top + bottom) * 0.88;
+  return new THREE.BoxGeometry(w, height, w);
+}
+
+/** A ball: a cube of about the same volume. */
+export function blockBall(r: number, ..._rest: unknown[]): THREE.BufferGeometry {
+  const s = r * 1.6;
+  return new THREE.BoxGeometry(s, s, s);
+}
+
+/** A cone: a four-sided pyramid with its corners on the old radius. */
+export function blockCone(r: number, height: number, _s?: number, _h?: number, open?: boolean, ..._rest: unknown[]): THREE.BufferGeometry {
+  return new THREE.ConeGeometry(r, height, 4, 1, open).rotateY(Math.PI / 4);
+}
+
+/** A capsule: a block the same length. */
+export function blockCapsule(r: number, length: number, ..._rest: unknown[]): THREE.BufferGeometry {
+  return new THREE.BoxGeometry(r * 1.8, length + r * 2, r * 1.8);
+}
+
+/** A ring seen from above: a flat square slab. */
+export function blockRing(R: number, r: number, ..._rest: unknown[]): THREE.BufferGeometry {
+  return new THREE.BoxGeometry(R * 1.9, r * 2, R * 1.9);
+}
diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index ebd31d94f..9b7481e7f 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -60,78 +60,26 @@ function cached(key: string, make: () => THREE.BufferGeometry): THREE.BufferGeom
   return g;
 }
 
-/** A capsule that tapers from radius r0 (round end at the origin) to r1 (round end L along -z). */
-function taperedCapsule(r0: number, r1: number, L: number): THREE.BufferGeometry {
-  return cached(`cap|${r0}|${r1}|${L}`, () => {
-    const pts: THREE.Vector2[] = [];
-    const cap = 6;
-    for (let i = 0; i <= cap; i++) {
-      const a = (i / cap) * (Math.PI / 2);
-      pts.push(new THREE.Vector2(Math.max(1e-4, r0 * Math.sin(a)), -r0 * Math.cos(a)));
-    }
-    for (let i = 0; i <= cap; i++) {
-      const a = (i / cap) * (Math.PI / 2);
-      pts.push(new THREE.Vector2(Math.max(1e-4, r1 * Math.cos(a)), L + r1 * Math.sin(a)));
-    }
-    return new THREE.LatheGeometry(pts, 14).rotateX(-Math.PI / 2);
-  });
+/** A block hand, in the look of the voxel people (see ../vox.ts): every part is a square-edged box. */
+function box(w: number, h: number, d: number): THREE.BufferGeometry {
+  return cached(`box|${w}|${h}|${d}`, () => new THREE.BoxGeometry(w, h, d));
 }
 
-const UNIT_SPHERE = () => cached('sphere', () => new THREE.SphereGeometry(1, 22, 16));
-
 function blob(mat: THREE.Material, hx: number, hy: number, hz: number, x: number, y: number, z: number): THREE.Mesh {
-  const m = new THREE.Mesh(UNIT_SPHERE(), mat);
-  m.scale.set(hx, hy, hz);
+  const m = new THREE.Mesh(box(hx * 1.8, hy * 1.8, hz * 1.8), mat);
   m.position.set(x, y, z);
   return m;
 }
 
-/** Fingers sit a little flatter top to bottom than side to side. */
+/** A finger segment: a block of width 2r running L along -z from the origin. */
 const FLAT = 0.86;
 
 function seg(mat: THREE.Material, r0: number, r1: number, L: number): THREE.Mesh {
-  const m = new THREE.Mesh(taperedCapsule(r0, r1, L), mat);
-  m.scale.y = FLAT;
+  const m = new THREE.Mesh(box(r0 * 2, r0 * 1.7, L), mat);
+  m.position.z = -L / 2;
   return m;
 }
 
-/** A sleeve hanging loose, with folds in the cloth. Runs along +z from the roll. */
-function sleeveTube(): THREE.BufferGeometry {
-  return cached('sleeve', () => {
-    const g = new THREE.CylinderGeometry(1, 1, 1, 40, 30, true).rotateX(Math.PI / 2);
-    const p = g.attributes.position as THREE.BufferAttribute;
-    const z0 = 0.14;
-    const z1 = 0.56;
-    for (let i = 0; i < p.count; i++) {
-      const a = Math.atan2(p.getY(i), p.getX(i));
-      const t = p.getZ(i) + 0.5;
-      const fold = 1 + 0.05 * (0.4 + t) * Math.sin(a * 5 + t * 9) + 0.03 * Math.sin(a * 9 - t * 17) + 0.025 * Math.sin(a * 3 + t * 31);
-      // Gathers in tight at the roll and falls looser further up.
-      const r = (0.064 + 0.014 * t) * fold;
-      p.setXYZ(i, Math.cos(a) * r, Math.sin(a) * r, z0 + t * (z1 - z0));
-    }
-    g.computeVertexNormals();
-    return g;
-  });
-}
-
-/** A roll of cloth: a lumpy torus around the forearm. */
-function clothRoll(R: number, r: number, seed: number): THREE.BufferGeometry {
-  return cached(`roll|${R}|${r}|${seed}`, () => {
-    const g = new THREE.TorusGeometry(R, r, 14, 44);
-    const p = g.attributes.position as THREE.BufferAttribute;
-    for (let i = 0; i < p.count; i++) {
-      const x = p.getX(i);
-      const y = p.getY(i);
-      const a = Math.atan2(y, x);
-      const k = 1 + 0.045 * Math.sin(a * 4 + seed) + 0.03 * Math.sin(a * 7 + seed * 2.3);
-      p.setXYZ(i, x * k, y * k, p.getZ(i) * (1 + 0.1 * Math.sin(a * 3 + seed)));
-    }
-    g.computeVertexNormals();
-    return g;
-  });
-}
-
 // Finger lengths (proximal, middle, distal) and base radius: index, middle, ring, pinky.
 const FINGERS = [
   { x: -0.0295, z: -0.092, len: [0.04, 0.024, 0.02], r: 0.0098, fan: 0.07 },
@@ -205,18 +153,17 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   tRoot.add(j1);
   hand.add(tRoot);
 
-  // The forearm, tapering up into the sleeve.
-  const forearm = new THREE.Mesh(taperedCapsule(0.0285, 0.043, 0.22).clone().rotateY(Math.PI), skin);
-  forearm.scale.y = 0.82;
-  forearm.position.z = 0.005;
+  // The forearm, a block running back into the sleeve.
+  const forearm = new THREE.Mesh(box(0.06, 0.05, 0.22), skin);
+  forearm.position.z = 0.115;
 
-  // Sleeve rolled up to the forearm: two rolls of cloth, then it hangs loose with folds.
-  const roll1 = new THREE.Mesh(clothRoll(0.054, 0.017, 1), m.sleeve);
+  // Sleeve: two blocky cuffs, then a straight sleeve.
+  const roll1 = new THREE.Mesh(box(0.115, 0.1, 0.04), m.sleeve);
   roll1.position.z = 0.12;
-  const roll2 = new THREE.Mesh(clothRoll(0.059, 0.018, 2.4), m.sleeve);
-  roll2.position.z = 0.152;
-  roll2.rotation.x = 0.05;
-  const tube = new THREE.Mesh(sleeveTube(), m.sleeve);
+  const roll2 = new THREE.Mesh(box(0.125, 0.11, 0.04), m.sleeve);
+  roll2.position.z = 0.16;
+  const tube = new THREE.Mesh(box(0.135, 0.12, 0.36), m.sleeve);
+  tube.position.z = 0.38;
 
   const rig: HandRig = {
     hand,

From 344b6c02fdb943b8f7fdf46304258cfccc7083bc Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:21:29 +0400
Subject: [PATCH 08/35] Let Claude Code workers choose their model by task size

---
 bin/office-workers.js              | 27 +++++++++++++++++++++++++--
 src/server/hooks/office-workers.ts | 16 +++++++++++++++-
 src/server/model-tiers.ts          | 30 ++++++++++++++++++++++++++++++
 src/server/office-workers.ts       |  2 +-
 tests/model-tiers.test.ts          | 15 +++++++++++++++
 tests/office-workers.test.ts       |  2 +-
 tests/workers.test.ts              |  2 +-
 7 files changed, 88 insertions(+), 6 deletions(-)
 create mode 100644 src/server/model-tiers.ts
 create mode 100644 tests/model-tiers.test.ts

diff --git a/bin/office-workers.js b/bin/office-workers.js
index 5b1cea7f7..7377aa642 100644
--- a/bin/office-workers.js
+++ b/bin/office-workers.js
@@ -42,9 +42,9 @@ export const EFFORTS = ['low', 'medium', 'high', 'xhigh', 'max'];
 /** How long the office may take to come back when it's restarting (a dev reload, an upgrade). */
 const RETRY_MS = 6000;
 /** Sending several workers home waits on git for each; hiring may fetch from GitHub first. */
-const TIMEOUT_MS = { list: 15_000, tell: 15_000, pr: 45_000, hire: 90_000, home: 300_000 };
+const TIMEOUT_MS = { list: 15_000, tell: 15_000, model: 15_000, pr: 45_000, hire: 90_000, home: 300_000 };
 /** Where each call goes, under /office/workers. */
-const PATHS = { list: '', hire: '', home: '/home', tell: '/tell', pr: '/pr' };
+const PATHS = { list: '', hire: '', home: '/home', tell: '/tell', model: '/model', pr: '/pr' };
 
 /**
  * Reads `--flag value` and `--flag=value` options, and the words that aren't options.
@@ -322,6 +322,24 @@ export const TOOLS = [
     },
     annotations: { destructiveHint: true, idempotentHint: false, openWorldHint: false },
   },
+  {
+    name: 'choose_model',
+    title: 'Choose your model',
+    description:
+      'Switches the model you run on (Claude Code /model) to fit the task. Size the task first: high for planning, architecture, hard debugging and reviews; ' +
+      'medium for ordinary implementation; low for small edits, lookups, renames and chores. Call it at the start of a task, and again when the work changes size ' +
+      '(plan on high, then build on medium). The switch applies when your current step ends; the conversation carries on.',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        tier: { type: 'string', enum: ['high', 'medium', 'low'], description: 'How big the task is.' },
+        model: { type: 'string', description: 'A specific model name instead of a tier.' },
+        reason: { type: 'string', description: 'A few words on why, shown to the office.' },
+      },
+      additionalProperties: false,
+    },
+    annotations: { destructiveHint: false, idempotentHint: true, openWorldHint: false },
+  },
   {
     name: 'tell_worker',
     title: 'Tell a worker',
@@ -366,6 +384,7 @@ const INSTRUCTIONS =
   "rather than looking for the agents with git, ps or HTTP calls. list_workers says where each one's pull request stands (merged: true means it merged), hire_worker " +
   'puts a new agent to work, send_home sends agents home and deletes their worktrees and branches, tell_worker gives one a prompt, and link_pr says which pull request is a ' +
   "worker's when list_workers does not show it. Everyone in the office sees who did what. " +
+  'choose_model switches your own model to fit the task: call it when you start a task (high for planning and hard problems, medium for ordinary work, low for small edits and lookups) and again when the work changes size. ' +
   'The office-workers command on your PATH does the same from a shell.';
 
 /** Runs a tool; resolves to its text, and whether nothing it was asked came off, or throws with why it failed. */
@@ -386,6 +405,10 @@ async function runTool(name, args, io) {
     const answer = await call('tell', a, io);
     return { text: `Told ${answer.worker?.name ?? a.worker}.` };
   }
+  if (name === 'choose_model') {
+    const answer = await call('model', a, io);
+    return { text: `Switching to ${answer.model}${answer.tier ? ` (${answer.tier})` : ''}; it applies when this step ends.` };
+  }
   if (name === 'link_pr') return { text: formatLinked(await call('pr', a, io)) };
   throw new Error(`Unknown tool: ${name}`);
 }
diff --git a/src/server/hooks/office-workers.ts b/src/server/hooks/office-workers.ts
index 8b276d339..5bd1397cb 100644
--- a/src/server/hooks/office-workers.ts
+++ b/src/server/hooks/office-workers.ts
@@ -1,3 +1,4 @@
+import { pickModel } from '../model-tiers.js';
 import type http from 'node:http';
 import { notLeaving } from '../leave-on-merge.js';
 import { findWorker, readHireRequest, readHomeRequest, readPrRequest, workerRow, type PullsView } from '../office-workers.js';
@@ -65,7 +66,7 @@ export async function officeWorkers(ctx: Ctx, req: http.IncomingMessage, res: ht
       workers: list.map((w) => workerRow(w, view, me.id)),
     });
   }
-  if (req.method !== 'POST' || !['', '/home', '/tell', '/pr'].includes(action)) return send(res, 405, { error: 'GET /office/workers, or POST to /office/workers, /office/workers/home, /office/workers/tell or /office/workers/pr' });
+  if (req.method !== 'POST' || !['', '/home', '/tell', '/pr', '/model'].includes(action)) return send(res, 405, { error: 'GET /office/workers, or POST to /office/workers, /office/workers/home, /office/workers/tell or /office/workers/pr' });
   let body: unknown;
   try {
     body = JSON.parse((await readBody(req)) || '{}');
@@ -127,6 +128,19 @@ export async function officeWorkers(ctx: Ctx, req: http.IncomingMessage, res: ht
     return send(res, 200, { ok: true, worker: row(w.id) });
   }
 
+  if (action === '/model') {
+    const b = (body ?? {}) as { tier?: unknown; model?: unknown; reason?: unknown };
+    if (me.kind !== 'agent' || me.provider !== 'claude') return send(res, 400, { error: 'Only a Claude Code worker can change its own model' });
+    const pick = pickModel(b.tier, b.model);
+    if (typeof pick === 'string') return send(res, 400, { error: pick });
+    // Claude Code's own /model command, typed into its terminal: the conversation carries on in the new model.
+    const err = floor.workers.prompt(me.id, `/model ${pick.model}`, who);
+    if (err) return send(res, 400, { error: err });
+    const why = str(b.reason, 200).replace(/\s+/g, ' ').trim();
+    ctx.toastFloor(floor, `🧠 ${who} chose ${pick.model}${pick.tier ? ` (${pick.tier})` : ''}${why ? `: ${why}` : ''}`);
+    return send(res, 200, { ok: true, model: pick.model, ...(pick.tier ? { tier: pick.tier } : {}) });
+  }
+
   if (action === '/pr') {
     const ask = readPrRequest(body);
     if (typeof ask === 'string') return send(res, 400, { error: ask });
diff --git a/src/server/model-tiers.ts b/src/server/model-tiers.ts
new file mode 100644
index 000000000..110845cce
--- /dev/null
+++ b/src/server/model-tiers.ts
@@ -0,0 +1,30 @@
+// The models a Claude Code worker can move itself between, by how big its task is. Each tier is a
+// model name Claude Code takes after /model: by default its own aliases, which a router in front of
+// Claude Code (ANTHROPIC_BASE_URL) maps to whatever it serves. AGENT_OFFICE_MODEL_TIERS renames them,
+// e.g. "high=tier-high,medium=tier-medium,low=tier-low".
+
+export const MODEL_TIERS = ['high', 'medium', 'low'] as const;
+export type ModelTier = (typeof MODEL_TIERS)[number];
+
+const DEFAULTS: Record<ModelTier, string> = { high: 'opus', medium: 'sonnet', low: 'haiku' };
+/** What /model is given: a model name, nothing a terminal could treat as more than one word. */
+const MODEL_NAME = /^[\w][\w.:/\-[\]]{0,99}$/;
+
+export function modelTiers(env: NodeJS.ProcessEnv = process.env): Record<ModelTier, string> {
+  const out = { ...DEFAULTS };
+  for (const part of (env.AGENT_OFFICE_MODEL_TIERS ?? '').split(',')) {
+    const [tier, name] = part.split('=').map((s) => s.trim());
+    if ((MODEL_TIERS as readonly string[]).includes(tier) && name && MODEL_NAME.test(name)) out[tier as ModelTier] = name;
+  }
+  return out;
+}
+
+/** The model to switch to: a tier's, or a named one; a string says what's wrong. */
+export function pickModel(tier: unknown, model: unknown, env?: NodeJS.ProcessEnv): { model: string; tier?: ModelTier } | string {
+  if (typeof model === 'string' && model.trim()) {
+    const name = model.trim();
+    return MODEL_NAME.test(name) ? { model: name } : 'model is a model name, like opus or sonnet';
+  }
+  if (!(MODEL_TIERS as readonly string[]).includes(tier as string)) return `Say tier (${MODEL_TIERS.join(', ')}) or model`;
+  return { model: modelTiers(env)[tier as ModelTier], tier: tier as ModelTier };
+}
diff --git a/src/server/office-workers.ts b/src/server/office-workers.ts
index 9865e3d7a..7836566ab 100644
--- a/src/server/office-workers.ts
+++ b/src/server/office-workers.ts
@@ -196,7 +196,7 @@ export const MCP_NAME = 'agent-office';
 /** What it needs from the worker's environment; Codex hands an MCP server only what it's told to. */
 const MCP_ENV = ['AGENT_OFFICE_HOOK_URL', 'AGENT_OFFICE_WORKER_ID', 'AGENT_OFFICE_HOOK_TOKEN'];
 /** Its tools that only look, which Claude Code workers may call without asking. */
-export const MCP_READ_ONLY = [`mcp__${MCP_NAME}__list_workers`];
+export const MCP_READ_ONLY = [`mcp__${MCP_NAME}__list_workers`, `mcp__${MCP_NAME}__choose_model`];
 
 /**
  * Writes Claude Code's --mcp-config file for the MCP server (bin/office-workers.js `mcp`, run by the
diff --git a/tests/model-tiers.test.ts b/tests/model-tiers.test.ts
new file mode 100644
index 000000000..b17373946
--- /dev/null
+++ b/tests/model-tiers.test.ts
@@ -0,0 +1,15 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { modelTiers, pickModel } from '../src/server/model-tiers.js';
+
+test('a tier maps to its model, and AGENT_OFFICE_MODEL_TIERS renames them', () => {
+  assert.deepEqual(pickModel('low', undefined, {}), { model: 'haiku', tier: 'low' });
+  assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'high=tier-high, medium=tier-medium' }).high, 'tier-high');
+  assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'low=rm -rf /' }).low, 'haiku');
+});
+
+test('a named model must be one word, and a tier or a model is needed', () => {
+  assert.deepEqual(pickModel(undefined, 'sonnet'), { model: 'sonnet' });
+  assert.equal(typeof pickModel(undefined, 'a b; c'), 'string');
+  assert.equal(typeof pickModel('huge', undefined), 'string');
+});
diff --git a/tests/office-workers.test.ts b/tests/office-workers.test.ts
index f380f03d7..fc795377e 100644
--- a/tests/office-workers.test.ts
+++ b/tests/office-workers.test.ts
@@ -159,7 +159,7 @@ test('answers MCP: the handshake, its tools, and a call', async () => {
   assert.equal((await handleMcp({ jsonrpc: '2.0', id: 2, method: 'initialize', params: { protocolVersion: '1999-01-01' } }, io))?.result.protocolVersion, '2025-11-25');
   assert.equal(await handleMcp({ jsonrpc: '2.0', method: 'notifications/initialized' }, io), undefined);
   const tools = await handleMcp({ jsonrpc: '2.0', id: 3, method: 'tools/list' }, io);
-  assert.deepEqual(tools?.result.tools.map((t: { name: string }) => t.name), ['list_workers', 'hire_worker', 'send_home', 'tell_worker', 'link_pr']);
+  assert.deepEqual(tools?.result.tools.map((t: { name: string }) => t.name), ['list_workers', 'hire_worker', 'send_home', 'choose_model', 'tell_worker', 'link_pr']);
   const linking = { env: ENV, fetch: (async (_url: unknown, init?: RequestInit) => new Response(JSON.stringify({ ok: true, worker: { name: 'Bolt', pr: { number: Number(JSON.parse(String(init?.body)).pr), state: 'open' }, merged: false } }))) as typeof fetch };
   const linked = await handleMcp({ jsonrpc: '2.0', id: 9, method: 'tools/call', params: { name: 'link_pr', arguments: { worker: 'Bolt', pr: 7 } } }, linking);
   assert.deepEqual(linked?.result, { content: [{ type: 'text', text: 'Bolt: PR #7 open' }] });
diff --git a/tests/workers.test.ts b/tests/workers.test.ts
index 53bb85f8e..bd6de459b 100644
--- a/tests/workers.test.ts
+++ b/tests/workers.test.ts
@@ -1164,7 +1164,7 @@ test("every Claude worker gets the office's MCP server, and office-workers on it
   assert.deepEqual(server.args.slice(1), ['mcp']);
   assert.ok(server.args[0].endsWith(path.join('bin', 'office-workers.js')));
   // Looking is allowed without asking; hiring and sending home aren't.
-  assert.deepEqual(JSON.parse(readFileSync(path.join(f.data, 'claude-hooks.json'), 'utf8')).permissions, { allow: ['mcp__agent-office__list_workers'] });
+  assert.deepEqual(JSON.parse(readFileSync(path.join(f.data, 'claude-hooks.json'), 'utf8')).permissions, { allow: ['mcp__agent-office__list_workers', 'mcp__agent-office__choose_model'] });
 
   const desk = workers.spawn('desk-2', 'Ada', 'Fix login');
   assert.equal(typeof desk, 'object');

From 52ecd7fdb7932bab0f8d4b729360023e82b0cfd9 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:28:48 +0400
Subject: [PATCH 09/35] Use the router's tiers and refuse Opus

---
 src/server/model-tiers.ts | 15 +++++++++------
 tests/model-tiers.test.ts |  8 +++++---
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/server/model-tiers.ts b/src/server/model-tiers.ts
index 110845cce..84b0b0541 100644
--- a/src/server/model-tiers.ts
+++ b/src/server/model-tiers.ts
@@ -1,20 +1,22 @@
 // The models a Claude Code worker can move itself between, by how big its task is. Each tier is a
-// model name Claude Code takes after /model: by default its own aliases, which a router in front of
-// Claude Code (ANTHROPIC_BASE_URL) maps to whatever it serves. AGENT_OFFICE_MODEL_TIERS renames them,
-// e.g. "high=tier-high,medium=tier-medium,low=tier-low".
+// model name Claude Code takes after /model. By default they are the router's own tiers (CLIProxy's
+// Fallback Tiers page: tier-high, tier-medium, tier-low), which fail over between the models set there.
+// AGENT_OFFICE_MODEL_TIERS renames them, e.g. "high=tier-high,low=gpt-5.6-mini". Opus is never picked.
 
 export const MODEL_TIERS = ['high', 'medium', 'low'] as const;
 export type ModelTier = (typeof MODEL_TIERS)[number];
 
-const DEFAULTS: Record<ModelTier, string> = { high: 'opus', medium: 'sonnet', low: 'haiku' };
+const DEFAULTS: Record<ModelTier, string> = { high: 'tier-high', medium: 'tier-medium', low: 'tier-low' };
 /** What /model is given: a model name, nothing a terminal could treat as more than one word. */
+/** Nothing above Sonnet. */
+const NO_OPUS = /opus/i;
 const MODEL_NAME = /^[\w][\w.:/\-[\]]{0,99}$/;
 
 export function modelTiers(env: NodeJS.ProcessEnv = process.env): Record<ModelTier, string> {
   const out = { ...DEFAULTS };
   for (const part of (env.AGENT_OFFICE_MODEL_TIERS ?? '').split(',')) {
     const [tier, name] = part.split('=').map((s) => s.trim());
-    if ((MODEL_TIERS as readonly string[]).includes(tier) && name && MODEL_NAME.test(name)) out[tier as ModelTier] = name;
+    if ((MODEL_TIERS as readonly string[]).includes(tier) && name && MODEL_NAME.test(name) && !NO_OPUS.test(name)) out[tier as ModelTier] = name;
   }
   return out;
 }
@@ -23,7 +25,8 @@ export function modelTiers(env: NodeJS.ProcessEnv = process.env): Record<ModelTi
 export function pickModel(tier: unknown, model: unknown, env?: NodeJS.ProcessEnv): { model: string; tier?: ModelTier } | string {
   if (typeof model === 'string' && model.trim()) {
     const name = model.trim();
-    return MODEL_NAME.test(name) ? { model: name } : 'model is a model name, like opus or sonnet';
+    if (NO_OPUS.test(name)) return 'Opus is not available here: pick a tier, or a model from the router';
+    return MODEL_NAME.test(name) ? { model: name } : 'model is a model name from the router, like tier-medium';
   }
   if (!(MODEL_TIERS as readonly string[]).includes(tier as string)) return `Say tier (${MODEL_TIERS.join(', ')}) or model`;
   return { model: modelTiers(env)[tier as ModelTier], tier: tier as ModelTier };
diff --git a/tests/model-tiers.test.ts b/tests/model-tiers.test.ts
index b17373946..eb3f42828 100644
--- a/tests/model-tiers.test.ts
+++ b/tests/model-tiers.test.ts
@@ -2,10 +2,12 @@ import test from 'node:test';
 import assert from 'node:assert/strict';
 import { modelTiers, pickModel } from '../src/server/model-tiers.js';
 
-test('a tier maps to its model, and AGENT_OFFICE_MODEL_TIERS renames them', () => {
-  assert.deepEqual(pickModel('low', undefined, {}), { model: 'haiku', tier: 'low' });
+test('a tier maps to its router tier, AGENT_OFFICE_MODEL_TIERS renames them, and Opus is refused', () => {
+  assert.deepEqual(pickModel('low', undefined, {}), { model: 'tier-low', tier: 'low' });
   assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'high=tier-high, medium=tier-medium' }).high, 'tier-high');
-  assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'low=rm -rf /' }).low, 'haiku');
+  assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'high=claude-opus-5' }).high, 'tier-high');
+  assert.equal(typeof pickModel(undefined, 'claude-opus-5'), 'string');
+  assert.equal(modelTiers({ AGENT_OFFICE_MODEL_TIERS: 'low=rm -rf /' }).low, 'tier-low');
 });
 
 test('a named model must be one word, and a tier or a model is needed', () => {

From 353ea21b1de20d072eb4cbbdd6aa9cad85583f65 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:35:40 +0400
Subject: [PATCH 10/35] Chunkier, friendlier block hands

---
 src/client/world/hand/rig.ts | 27 ++++++++++++---------------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index 9b7481e7f..9dfcca792 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -75,26 +75,28 @@ function blob(mat: THREE.Material, hx: number, hy: number, hz: number, x: number
 const FLAT = 0.86;
 
 function seg(mat: THREE.Material, r0: number, r1: number, L: number): THREE.Mesh {
-  const m = new THREE.Mesh(box(r0 * 2, r0 * 1.7, L), mat);
+  const m = new THREE.Mesh(box(r0 * 1.5, r0 * 2.4, L), mat);
   m.position.z = -L / 2;
   return m;
 }
 
 // Finger lengths (proximal, middle, distal) and base radius: index, middle, ring, pinky.
 const FINGERS = [
-  { x: -0.0295, z: -0.092, len: [0.04, 0.024, 0.02], r: 0.0098, fan: 0.07 },
-  { x: -0.0098, z: -0.097, len: [0.044, 0.027, 0.021], r: 0.0102, fan: 0.01 },
-  { x: 0.0098, z: -0.093, len: [0.041, 0.025, 0.02], r: 0.0095, fan: -0.04 },
-  { x: 0.0285, z: -0.085, len: [0.032, 0.018, 0.017], r: 0.0082, fan: -0.12 },
+  { x: -0.03, z: -0.09, len: [0.03, 0.022, 0.018], r: 0.0135, fan: 0 },
+  { x: -0.01, z: -0.09, len: [0.032, 0.023, 0.019], r: 0.0135, fan: 0 },
+  { x: 0.01, z: -0.09, len: [0.032, 0.023, 0.019], r: 0.0135, fan: 0 },
+  { x: 0.03, z: -0.09, len: [0.029, 0.021, 0.017], r: 0.0135, fan: 0 },
 ] as const;
 // How far each joint folds per unit of curl (the pinky and ring curl most).
-const PROX = [0.28, 0.32, 0.38, 0.45];
-const MID = [0.45, 0.5, 0.55, 0.6];
-const DIST = [0.28, 0.3, 0.32, 0.34];
-const THUMB = { meta: 0.032, prox: 0.032, dist: 0.027 };
+const PROX = [0.16, 0.18, 0.2, 0.22];
+const MID = [0.2, 0.22, 0.24, 0.26];
+const DIST = [0.1, 0.1, 0.12, 0.12];
+const THUMB = { meta: 0.03, prox: 0.026, dist: 0.022 };
 
 export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   const hand = new THREE.Group();
+  // Chunkier than life: a block hand reads as a mitten, not a skeleton.
+  hand.scale.set(1.12, 1.45, 1);
   const skin = m.skin;
   const wrist = blob(skin, 0.031, 0.0185, 0.024, 0, 0, -0.004);
   const palm = blob(skin, 0.043, 0.0165, 0.047, 0, 0, -0.05);
@@ -123,11 +125,8 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
     const s = r / 0.0098;
     const nail = blob(m.nail, 0.0054 * s, 0.0011, 0.0072 * s, 0, r * 0.74 * FLAT, -l3 * 0.62);
     nail.rotation.x = 0.06;
-    dist.add(nail);
     // Knuckles: a faint tint over the big joint and the middle one.
     const k1 = blob(m.knuckle, r * 1.04, r * 0.9, r * 0.95, 0, r * 0.28, 0.001);
-    base.add(k1);
-    mid.add(blob(m.knuckle, r * 0.86, r * 0.74, r * 0.8, 0, r * 0.22, 0));
     mid.add(dist);
     prox.add(mid);
     base.add(prox);
@@ -147,8 +146,6 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   j2.position.z = -THUMB.prox;
   j2.add(seg(skin, 0.0108, 0.0086, THUMB.dist));
   const tNail = blob(m.nail, 0.0066, 0.0012, 0.0082, 0, 0.0086 * FLAT * 0.78, -THUMB.dist * 0.6);
-  j2.add(tNail);
-  j2.add(blob(m.knuckle, 0.0098, 0.0082, 0.009, 0, 0.002, 0));
   j1.add(j2);
   tRoot.add(j1);
   hand.add(tRoot);
@@ -178,7 +175,7 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
         d.dist.rotation.x = -Math.min(DIST[i] * c, 1.3);
       }
       const up = p.thumbUp;
-      tRoot.rotation.set(-0.12 + 0.22 * up, side * (0.2 + 0.4 * p.thumbOut + 0.85 * up), side * (0.45 - 0.35 * up));
+      tRoot.rotation.set(-0.12 + 0.22 * up, side * (0.08 + 0.18 * p.thumbOut + 0.85 * up), side * (0.45 - 0.35 * up));
       j1.rotation.x = -0.2 * p.thumbCurl * (1 - up * 0.8);
       j2.rotation.x = -0.28 * p.thumbCurl * (1 - up * 0.8);
       hand.rotation.z = -side * 1.2 * p.roll;

From 5403fe2861df004b0425f13c1725d31730c7b820 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:42:00 +0400
Subject: [PATCH 11/35] Clean block hands: single palm block, no skew, poses
 close properly

---
 src/client/world/hand/rig.ts | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index 9dfcca792..4e105f261 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -88,23 +88,18 @@ const FINGERS = [
   { x: 0.03, z: -0.09, len: [0.029, 0.021, 0.017], r: 0.0135, fan: 0 },
 ] as const;
 // How far each joint folds per unit of curl (the pinky and ring curl most).
-const PROX = [0.16, 0.18, 0.2, 0.22];
-const MID = [0.2, 0.22, 0.24, 0.26];
-const DIST = [0.1, 0.1, 0.12, 0.12];
+const PROX = [0.28, 0.32, 0.38, 0.45];
+const MID = [0.45, 0.5, 0.55, 0.6];
+const DIST = [0.28, 0.3, 0.32, 0.34];
 const THUMB = { meta: 0.03, prox: 0.026, dist: 0.022 };
 
 export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   const hand = new THREE.Group();
-  // Chunkier than life: a block hand reads as a mitten, not a skeleton.
-  hand.scale.set(1.12, 1.45, 1);
   const skin = m.skin;
-  const wrist = blob(skin, 0.031, 0.0185, 0.024, 0, 0, -0.004);
-  const palm = blob(skin, 0.043, 0.0165, 0.047, 0, 0, -0.05);
-  const thenar = blob(skin, 0.019, 0.013, 0.032, -side * 0.027, -0.007, -0.034);
-  thenar.rotation.y = side * 0.35;
-  const hypo = blob(skin, 0.013, 0.012, 0.033, side * 0.032, -0.003, -0.045);
-  const ridge = blob(skin, 0.043, 0.011, 0.012, 0, 0.004, -0.093);
-  hand.add(wrist, palm, thenar, hypo, ridge);
+  // One wrist block and one palm block, no overlapping pieces, so no flickering seams.
+  const wrist = blob(skin, 0.03, 0.02, 0.022, 0, 0, 0.006);
+  const palm = blob(skin, 0.05, 0.02, 0.052, 0, 0, -0.048);
+  hand.add(wrist, palm);
 
   const digits: Digit[] = [];
   FINGERS.forEach((f, i) => {
@@ -136,7 +131,7 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
 
   // The thumb: set off at an angle from the palm, rolled a little so its nail faces up and out.
   const tRoot = new THREE.Group();
-  tRoot.position.set(-side * 0.027, -0.006, -0.022);
+  tRoot.position.set(-side * 0.05, -0.004, -0.03);
   tRoot.rotation.order = 'YXZ';
   tRoot.add(seg(skin, 0.0135, 0.0118, THUMB.meta));
   const j1 = new THREE.Group();
@@ -168,7 +163,8 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
     sleeve: [roll1, roll2, tube],
     apply(p) {
       for (let i = 0; i < 4; i++) {
-        const c = p.curl[i];
+        const raw = p.curl[i];
+        const c = 0.25 * raw + 0.22 * raw * raw;
         const d = digits[i];
         d.prox.rotation.x = -Math.min(PROX[i] * c, 1.45);
         d.mid.rotation.x = -Math.min(MID[i] * c, 1.75);

From 0a1ebab8e773f1b85d0764e733be66aae7808004 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:44:40 +0400
Subject: [PATCH 12/35] Rebuild first-person hands as short chunky block hands

---
 src/client/world/hand/rig.ts | 188 ++++++++++++++---------------------
 src/client/world/hands.ts    |   2 +-
 2 files changed, 74 insertions(+), 116 deletions(-)

diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index 4e105f261..c16d8f8e5 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -1,15 +1,15 @@
 import * as THREE from 'three';
+import { voxelBox, voxelMaterial } from '../voxel';
 
 /**
- * A procedural first-person hand: wrist, palm with thenar and hypothenar pads, four fingers of three
- * segments each (index longest after the middle, pinky shortest), and a thumb set off at an angle. Camera
- * space as everywhere in the hands scene: -z is forward (where the fingers point), +y is the back of the hand.
- * Built for the right hand and mirrored by `side` for the left: the thumb is on -x for the right hand.
+ * A short, chunky block hand in the look of the voxel people: a square palm, four stubby two-block
+ * fingers, a stubby thumb, and a short forearm into a boxy sleeve. Camera space as everywhere in the
+ * hands scene: -z is forward (where the fingers point), +y is the back of the hand. Built for the
+ * right hand and mirrored by `side` for the left: the thumb is on -x for the right hand.
  */
 
 export interface HandMaterials {
   skin: THREE.MeshStandardMaterial;
-  /** A touch redder than the skin, for the knuckles. */
   knuckle: THREE.MeshStandardMaterial;
   nail: THREE.MeshStandardMaterial;
   sleeve: THREE.MeshStandardMaterial;
@@ -32,148 +32,106 @@ export function relaxedPose(): HandPose {
   return { curl: [1, 1, 1, 1], thumbOut: 1, thumbUp: 0, thumbCurl: 1, roll: 0 };
 }
 
-interface Digit {
-  base: THREE.Group;
-  prox: THREE.Group;
-  mid: THREE.Group;
-  dist: THREE.Group;
-}
-
 export interface HandRig {
   /** The wrist, hand and fingers (turns for `roll`). */
   hand: THREE.Group;
-  /** Forearm, wrist and hand in skin: hidden when a costume dresses the hand. */
+  /** Forearm and hand in skin: hidden when a costume dresses the hand. */
   skinned: THREE.Object3D[];
-  /** The rolled sleeve and the cloth above it. */
+  /** The cuff and the sleeve above it. */
   sleeve: THREE.Object3D[];
   apply(p: HandPose): void;
 }
 
 const geoCache = new Map<string, THREE.BufferGeometry>();
 
-function cached(key: string, make: () => THREE.BufferGeometry): THREE.BufferGeometry {
+function box(w: number, h: number, d: number): THREE.BufferGeometry {
+  const key = `${w}|${h}|${d}`;
   let g = geoCache.get(key);
-  if (!g) {
-    g = make();
-    geoCache.set(key, g);
-  }
+  if (!g) geoCache.set(key, (g = voxelBox(w, h, d, 0.007)));
   return g;
 }
 
-/** A block hand, in the look of the voxel people (see ../vox.ts): every part is a square-edged box. */
-function box(w: number, h: number, d: number): THREE.BufferGeometry {
-  return cached(`box|${w}|${h}|${d}`, () => new THREE.BoxGeometry(w, h, d));
-}
-
-function blob(mat: THREE.Material, hx: number, hy: number, hz: number, x: number, y: number, z: number): THREE.Mesh {
-  const m = new THREE.Mesh(box(hx * 1.8, hy * 1.8, hz * 1.8), mat);
-  m.position.set(x, y, z);
+/** A block that runs `d` along -z from the origin of its group. */
+function block(mat: THREE.Material, w: number, h: number, d: number): THREE.Mesh {
+  const m = new THREE.Mesh(box(w, h, d), mat);
+  m.position.z = -d / 2;
   return m;
 }
 
-/** A finger segment: a block of width 2r running L along -z from the origin. */
-const FLAT = 0.86;
-
-function seg(mat: THREE.Material, r0: number, r1: number, L: number): THREE.Mesh {
-  const m = new THREE.Mesh(box(r0 * 1.5, r0 * 2.4, L), mat);
-  m.position.z = -L / 2;
-  return m;
-}
-
-// Finger lengths (proximal, middle, distal) and base radius: index, middle, ring, pinky.
+const FINGER_W = 0.017;
+const FINGER_H = 0.027;
+/** Index to pinky: where each sits across the palm, and how long its two blocks are. */
 const FINGERS = [
-  { x: -0.03, z: -0.09, len: [0.03, 0.022, 0.018], r: 0.0135, fan: 0 },
-  { x: -0.01, z: -0.09, len: [0.032, 0.023, 0.019], r: 0.0135, fan: 0 },
-  { x: 0.01, z: -0.09, len: [0.032, 0.023, 0.019], r: 0.0135, fan: 0 },
-  { x: 0.03, z: -0.09, len: [0.029, 0.021, 0.017], r: 0.0135, fan: 0 },
+  { x: -0.0285, near: 0.025, far: 0.019 },
+  { x: -0.0095, near: 0.027, far: 0.02 },
+  { x: 0.0095, near: 0.025, far: 0.019 },
+  { x: 0.0285, near: 0.021, far: 0.016 },
 ] as const;
-// How far each joint folds per unit of curl (the pinky and ring curl most).
-const PROX = [0.28, 0.32, 0.38, 0.45];
-const MID = [0.45, 0.5, 0.55, 0.6];
-const DIST = [0.28, 0.3, 0.32, 0.34];
-const THUMB = { meta: 0.03, prox: 0.026, dist: 0.022 };
+const PALM = { w: 0.076, h: 0.034, d: 0.058 };
 
 export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   const hand = new THREE.Group();
-  const skin = m.skin;
-  // One wrist block and one palm block, no overlapping pieces, so no flickering seams.
-  const wrist = blob(skin, 0.03, 0.02, 0.022, 0, 0, 0.006);
-  const palm = blob(skin, 0.05, 0.02, 0.052, 0, 0, -0.048);
-  hand.add(wrist, palm);
-
-  const digits: Digit[] = [];
-  FINGERS.forEach((f, i) => {
-    const [l1, l2, l3] = f.len;
-    const r = f.r;
-    const base = new THREE.Group();
-    base.position.set(side * f.x, 0.003, f.z);
-    base.rotation.y = side * f.fan;
+  // Fine blocks with baked shading and a little colour jitter, like the people's, so the skin isn't one flat tone.
+  const skin = voxelMaterial(m.skin);
+  voxelMaterial(m.knuckle), voxelMaterial(m.nail), voxelMaterial(m.sleeve);
+
+  const palm = block(skin, PALM.w, PALM.h, PALM.d);
+  palm.position.z = 0;
+  hand.add(palm);
+  // A flush over the knuckles.
+  const flush = block(m.knuckle, PALM.w - 0.012, 0.004, 0.014);
+  flush.position.set(0, PALM.h / 2 + 0.0005, -PALM.d + 0.01);
+  hand.add(flush);
+
+  const knuckles: { prox: THREE.Group; dist: THREE.Group }[] = [];
+  for (const f of FINGERS) {
     const prox = new THREE.Group();
-    prox.add(seg(skin, r, r * 0.9, l1));
-    const mid = new THREE.Group();
-    mid.position.z = -l1;
-    mid.add(seg(skin, r * 0.9, r * 0.82, l2));
+    prox.position.set(f.x, 0.002, -PALM.d);
+    prox.add(block(skin, FINGER_W, FINGER_H, f.near));
     const dist = new THREE.Group();
-    dist.position.z = -l2;
-    dist.add(seg(skin, r * 0.82, r * 0.64, l3));
-    // A natural, short nail on the back of the tip.
-    const s = r / 0.0098;
-    const nail = blob(m.nail, 0.0054 * s, 0.0011, 0.0072 * s, 0, r * 0.74 * FLAT, -l3 * 0.62);
-    nail.rotation.x = 0.06;
-    // Knuckles: a faint tint over the big joint and the middle one.
-    const k1 = blob(m.knuckle, r * 1.04, r * 0.9, r * 0.95, 0, r * 0.28, 0.001);
-    mid.add(dist);
-    prox.add(mid);
-    base.add(prox);
-    hand.add(base);
-    digits.push({ base, prox, mid, dist });
-  });
-
-  // The thumb: set off at an angle from the palm, rolled a little so its nail faces up and out.
-  const tRoot = new THREE.Group();
-  tRoot.position.set(-side * 0.05, -0.004, -0.03);
-  tRoot.rotation.order = 'YXZ';
-  tRoot.add(seg(skin, 0.0135, 0.0118, THUMB.meta));
-  const j1 = new THREE.Group();
-  j1.position.z = -THUMB.meta;
-  j1.add(seg(skin, 0.0118, 0.0108, THUMB.prox));
-  const j2 = new THREE.Group();
-  j2.position.z = -THUMB.prox;
-  j2.add(seg(skin, 0.0108, 0.0086, THUMB.dist));
-  const tNail = blob(m.nail, 0.0066, 0.0012, 0.0082, 0, 0.0086 * FLAT * 0.78, -THUMB.dist * 0.6);
-  j1.add(j2);
-  tRoot.add(j1);
-  hand.add(tRoot);
-
-  // The forearm, a block running back into the sleeve.
-  const forearm = new THREE.Mesh(box(0.06, 0.05, 0.22), skin);
-  forearm.position.z = 0.115;
-
-  // Sleeve: two blocky cuffs, then a straight sleeve.
-  const roll1 = new THREE.Mesh(box(0.115, 0.1, 0.04), m.sleeve);
-  roll1.position.z = 0.12;
-  const roll2 = new THREE.Mesh(box(0.125, 0.11, 0.04), m.sleeve);
-  roll2.position.z = 0.16;
-  const tube = new THREE.Mesh(box(0.135, 0.12, 0.36), m.sleeve);
-  tube.position.z = 0.38;
+    dist.position.z = -f.near;
+    dist.add(block(skin, FINGER_W - 0.0008, FINGER_H - 0.002, f.far));
+    // A pale nail on the back of the tip.
+    const nail = block(m.nail, FINGER_W - 0.006, 0.004, 0.009);
+    nail.position.set(0, (FINGER_H - 0.002) / 2 + 0.0005, -f.far + 0.0055);
+    dist.add(nail);
+    prox.add(dist);
+    hand.add(prox);
+    knuckles.push({ prox, dist });
+  }
+
+  // The thumb: a stubby two-block digit off the palm's side.
+  const thumb = new THREE.Group();
+  thumb.position.set(-side * (PALM.w / 2 + 0.004), -0.002, -0.018);
+  thumb.add(block(skin, 0.02, 0.026, 0.026));
+  const tip = new THREE.Group();
+  tip.position.z = -0.026;
+  tip.add(block(skin, 0.019, 0.025, 0.02));
+  thumb.add(tip);
+  hand.add(thumb);
+
+  // A short forearm into a boxy cuff and sleeve.
+  const forearm = block(skin, 0.058, 0.046, 0.09);
+  forearm.position.z = 0.09 + PALM.d / 2 - 0.005;
+  const cuff = block(m.sleeve, 0.086, 0.07, 0.04);
+  cuff.position.z = 0.15;
+  const tube = block(m.sleeve, 0.098, 0.082, 0.22);
+  tube.position.z = 0.35;
 
   const rig: HandRig = {
     hand,
     skinned: [forearm, hand],
-    sleeve: [roll1, roll2, tube],
+    sleeve: [cuff, tube],
     apply(p) {
       for (let i = 0; i < 4; i++) {
-        const raw = p.curl[i];
-        const c = 0.25 * raw + 0.22 * raw * raw;
-        const d = digits[i];
-        d.prox.rotation.x = -Math.min(PROX[i] * c, 1.45);
-        d.mid.rotation.x = -Math.min(MID[i] * c, 1.75);
-        d.dist.rotation.x = -Math.min(DIST[i] * c, 1.3);
+        // Relaxed fingers are nearly straight; a fist closes them right over.
+        const c = 0.22 * p.curl[i] + 0.2 * p.curl[i] * p.curl[i];
+        knuckles[i].prox.rotation.x = -Math.min(c * 0.5, 1.45);
+        knuckles[i].dist.rotation.x = -Math.min(c * 0.55, 1.5);
       }
       const up = p.thumbUp;
-      tRoot.rotation.set(-0.12 + 0.22 * up, side * (0.08 + 0.18 * p.thumbOut + 0.85 * up), side * (0.45 - 0.35 * up));
-      j1.rotation.x = -0.2 * p.thumbCurl * (1 - up * 0.8);
-      j2.rotation.x = -0.28 * p.thumbCurl * (1 - up * 0.8);
+      thumb.rotation.set(-0.1 + 0.2 * up, side * (0.12 + 0.2 * p.thumbOut + 0.8 * up), side * (0.2 - 0.15 * up));
+      tip.rotation.x = -0.3 * p.thumbCurl * (1 - up * 0.8);
       hand.rotation.z = -side * 1.2 * p.roll;
     },
   };
diff --git a/src/client/world/hands.ts b/src/client/world/hands.ts
index 31e8c8646..862f5ce18 100644
--- a/src/client/world/hands.ts
+++ b/src/client/world/hands.ts
@@ -242,7 +242,7 @@ export class Hands {
     this.sleeve.color.set(c === 'halloween' ? '#3b1d5a' : c === 'christmas' ? '#d62828' : this.shirt);
     this.skin.color.set(c === 'christmas' ? '#2e9e48' : this.skinTone);
     if (c === 'halloween') this.skin.color.lerp(UNDEAD_SKIN, 0.8);
-    this.knuckle.color.copy(this.skin.color).lerp(KNUCKLE_FLUSH, 0.16);
+    this.knuckle.color.copy(this.skin.color).lerp(KNUCKLE_FLUSH, 0.3);
     this.nail.color.copy(this.skin.color).lerp(NAIL_PINK, 0.42);
   }
 

From 155e5e614dd08516aeffd996639525cf3a8c1460 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:45:14 +0400
Subject: [PATCH 13/35] Shaded block hands with knuckle flush and nails

---
 src/client/world/hand/rig.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index c16d8f8e5..f77efedaf 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -111,12 +111,12 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   hand.add(thumb);
 
   // A short forearm into a boxy cuff and sleeve.
-  const forearm = block(skin, 0.058, 0.046, 0.09);
-  forearm.position.z = 0.09 + PALM.d / 2 - 0.005;
+  const forearm = block(skin, 0.056, 0.042, 0.05);
+  forearm.position.z = 0.05 + PALM.d / 2 - 0.004;
   const cuff = block(m.sleeve, 0.086, 0.07, 0.04);
-  cuff.position.z = 0.15;
+  cuff.position.z = 0.115;
   const tube = block(m.sleeve, 0.098, 0.082, 0.22);
-  tube.position.z = 0.35;
+  tube.position.z = 0.3;
 
   const rig: HandRig = {
     hand,

From 394111f7ed59ac7dd6656eafea1d15d50b6b20f5 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 00:50:56 +0400
Subject: [PATCH 14/35] Minecraft-style block hands with knuckles, grooves and
 nails

---
 src/client/world/hand/rig.ts | 106 +++++++++++++++--------------------
 1 file changed, 44 insertions(+), 62 deletions(-)

diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index f77efedaf..79864fc98 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { voxelBox, voxelMaterial } from '../voxel';
+import { RoundedBoxGeometry } from 'three/examples/jsm/geometries/RoundedBoxGeometry.js';
 
 /**
  * A short, chunky block hand in the look of the voxel people: a square palm, four stubby two-block
@@ -44,10 +44,11 @@ export interface HandRig {
 
 const geoCache = new Map<string, THREE.BufferGeometry>();
 
+/** A softly bevelled block, so it reads as a Minecraft arm without hard razor corners. */
 function box(w: number, h: number, d: number): THREE.BufferGeometry {
   const key = `${w}|${h}|${d}`;
   let g = geoCache.get(key);
-  if (!g) geoCache.set(key, (g = voxelBox(w, h, d, 0.007)));
+  if (!g) geoCache.set(key, (g = new RoundedBoxGeometry(w, h, d, 3, Math.min(w, h, d) * 0.1)));
   return g;
 }
 
@@ -58,80 +59,61 @@ function block(mat: THREE.Material, w: number, h: number, d: number): THREE.Mesh
   return m;
 }
 
-const FINGER_W = 0.017;
-const FINGER_H = 0.027;
-/** Index to pinky: where each sits across the palm, and how long its two blocks are. */
-const FINGERS = [
-  { x: -0.0285, near: 0.025, far: 0.019 },
-  { x: -0.0095, near: 0.027, far: 0.02 },
-  { x: 0.0095, near: 0.025, far: 0.019 },
-  { x: 0.0285, near: 0.021, far: 0.016 },
-] as const;
-const PALM = { w: 0.076, h: 0.034, d: 0.058 };
-
 export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   const hand = new THREE.Group();
-  // Fine blocks with baked shading and a little colour jitter, like the people's, so the skin isn't one flat tone.
-  const skin = voxelMaterial(m.skin);
-  voxelMaterial(m.knuckle), voxelMaterial(m.nail), voxelMaterial(m.sleeve);
-
-  const palm = block(skin, PALM.w, PALM.h, PALM.d);
-  palm.position.z = 0;
-  hand.add(palm);
-  // A flush over the knuckles.
-  const flush = block(m.knuckle, PALM.w - 0.012, 0.004, 0.014);
-  flush.position.set(0, PALM.h / 2 + 0.0005, -PALM.d + 0.01);
-  hand.add(flush);
-
-  const knuckles: { prox: THREE.Group; dist: THREE.Group }[] = [];
-  for (const f of FINGERS) {
-    const prox = new THREE.Group();
-    prox.position.set(f.x, 0.002, -PALM.d);
-    prox.add(block(skin, FINGER_W, FINGER_H, f.near));
-    const dist = new THREE.Group();
-    dist.position.z = -f.near;
-    dist.add(block(skin, FINGER_W - 0.0008, FINGER_H - 0.002, f.far));
-    // A pale nail on the back of the tip.
-    const nail = block(m.nail, FINGER_W - 0.006, 0.004, 0.009);
-    nail.position.set(0, (FINGER_H - 0.002) / 2 + 0.0005, -f.far + 0.0055);
-    dist.add(nail);
-    prox.add(dist);
-    hand.add(prox);
-    knuckles.push({ prox, dist });
+  const skin = m.skin;
+
+  // Minecraft-style: a square palm with the knuckles picked out darker, and the four fingers fused into
+  // one block with grooves between them and pale nails at the tips.
+  hand.add(block(skin, 0.066, 0.05, 0.05));
+  for (const x of [-0.024, -0.008, 0.008, 0.024]) {
+    const knuckle = block(m.knuckle, 0.013, 0.006, 0.012);
+    knuckle.position.set(x, 0.027, -0.044);
+    hand.add(knuckle);
+  }
+  const fingers = new THREE.Group();
+  fingers.position.z = -0.05;
+  fingers.add(block(skin, 0.066, 0.044, 0.05));
+  for (const x of [-0.0165, 0, 0.0165]) {
+    const groove = block(m.knuckle, 0.002, 0.002, 0.042);
+    groove.position.set(x, 0.0225, -0.004);
+    fingers.add(groove);
+    const side2 = block(m.knuckle, 0.002, 0.03, 0.002);
+    side2.position.set(x, 0, -0.049);
+    fingers.add(side2);
+  }
+  for (const x of [-0.0248, -0.0083, 0.0083, 0.0248]) {
+    const nail = block(m.nail, 0.012, 0.003, 0.012);
+    nail.position.set(x, 0.0225, -0.036);
+    fingers.add(nail);
   }
+  hand.add(fingers);
 
-  // The thumb: a stubby two-block digit off the palm's side.
   const thumb = new THREE.Group();
-  thumb.position.set(-side * (PALM.w / 2 + 0.004), -0.002, -0.018);
-  thumb.add(block(skin, 0.02, 0.026, 0.026));
-  const tip = new THREE.Group();
-  tip.position.z = -0.026;
-  tip.add(block(skin, 0.019, 0.025, 0.02));
-  thumb.add(tip);
+  thumb.position.set(-side * 0.0385, -0.004, -0.012);
+  thumb.add(block(skin, 0.024, 0.034, 0.042));
+  const thumbNail = block(m.nail, 0.014, 0.003, 0.01);
+  thumbNail.position.set(0, 0.0185, -0.032);
+  thumb.add(thumbNail);
   hand.add(thumb);
 
-  // A short forearm into a boxy cuff and sleeve.
-  const forearm = block(skin, 0.056, 0.042, 0.05);
-  forearm.position.z = 0.05 + PALM.d / 2 - 0.004;
-  const cuff = block(m.sleeve, 0.086, 0.07, 0.04);
-  cuff.position.z = 0.115;
-  const tube = block(m.sleeve, 0.098, 0.082, 0.22);
-  tube.position.z = 0.3;
+  // The arm: skin up to a cuff, then the sleeve.
+  const forearm = block(skin, 0.058, 0.048, 0.06);
+  forearm.position.z = 0.05;
+  const cuff = block(m.sleeve, 0.08, 0.07, 0.03);
+  cuff.position.z = 0.1;
+  const tube = block(m.sleeve, 0.092, 0.08, 0.3);
+  tube.position.z = 0.37;
 
   const rig: HandRig = {
     hand,
     skinned: [forearm, hand],
     sleeve: [cuff, tube],
     apply(p) {
-      for (let i = 0; i < 4; i++) {
-        // Relaxed fingers are nearly straight; a fist closes them right over.
-        const c = 0.22 * p.curl[i] + 0.2 * p.curl[i] * p.curl[i];
-        knuckles[i].prox.rotation.x = -Math.min(c * 0.5, 1.45);
-        knuckles[i].dist.rotation.x = -Math.min(c * 0.55, 1.5);
-      }
+      const avg = (p.curl[0] + p.curl[1] + p.curl[2] + p.curl[3]) / 4;
+      fingers.rotation.x = -Math.min(0.02 + 0.1 * avg + 0.12 * avg * avg, 1.5);
       const up = p.thumbUp;
-      thumb.rotation.set(-0.1 + 0.2 * up, side * (0.12 + 0.2 * p.thumbOut + 0.8 * up), side * (0.2 - 0.15 * up));
-      tip.rotation.x = -0.3 * p.thumbCurl * (1 - up * 0.8);
+      thumb.rotation.set(-0.05 + 0.2 * up, side * (0.05 + 0.15 * p.thumbOut + 0.9 * up), 0);
       hand.rotation.z = -side * 1.2 * p.roll;
     },
   };

From 2a6a61360cd8e310b842938f97adf29ff02c5500 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 01:02:17 +0400
Subject: [PATCH 15/35] Show only the fingertips in first person

---
 src/client/world/hands.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/world/hands.ts b/src/client/world/hands.ts
index 862f5ce18..4d50c54f9 100644
--- a/src/client/world/hands.ts
+++ b/src/client/world/hands.ts
@@ -353,7 +353,7 @@ export class Hands {
     mitten.add(bag, thumb);
     mitten.visible = false;
     group.add(mitten);
-    const base = new THREE.Vector3(side * 0.18, -0.17, -0.5);
+    const base = new THREE.Vector3(side * 0.16, -0.37, -0.5);
     const baseRot = new THREE.Euler(0.45, side * 0.55, side * -0.2);
     group.position.copy(base);
     group.rotation.copy(baseRot);

From f2f94588b737b9209248a26a818c13fe52548b8b Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:08:12 +0400
Subject: [PATCH 16/35] Lounge jukebox plays Quran.com surah recitations

---
 src/client/features/jukebox/index.ts |  6 +-
 src/client/features/jukebox/quran.ts | 25 +++++++
 src/client/features/jukebox/ui.ts    | 98 ++++++++++++----------------
 3 files changed, 69 insertions(+), 60 deletions(-)
 create mode 100644 src/client/features/jukebox/quran.ts

diff --git a/src/client/features/jukebox/index.ts b/src/client/features/jukebox/index.ts
index 78145ffe3..8745df92d 100644
--- a/src/client/features/jukebox/index.ts
+++ b/src/client/features/jukebox/index.ts
@@ -3,6 +3,7 @@ import type { Ctx } from '../../core/context';
 import { aside, hintTitle, key, onE } from '../../core/hint';
 import { store } from '../../state';
 import { clip } from '../../ui/dom';
+import { SURAHS, surahOf } from './quran';
 import { openJukebox } from './ui';
 import type { SettingsPane } from '../../ui/settings';
 
@@ -32,8 +33,9 @@ export function installJukebox(ctx: Ctx, deps: JukeboxDeps) {
     reach: 4,
     hint: () => {
       const j = store.jukebox;
-      const what = j.on ? trackTitle(j) : '';
-      return { k: `${j.on}|${what}`, parts: [hintTitle('🎵 Jukebox'), aside(j.on ? `♪ ${clip(what, 40)}` : 'off'), key('E', j.on ? 'Change the song' : 'Put on a song')] };
+      const sn = surahOf(j.url);
+      const what = j.on ? (sn ? SURAHS[sn - 1] : trackTitle(j)) : '';
+      return { k: `${j.on}|${what}`, parts: [hintTitle('📖 Quran'), aside(j.on ? `♪ ${clip(what, 40)}` : 'off'), key('E', j.on ? 'Change the surah' : 'Play a surah')] };
     },
     use: onE(() => showJukebox()),
   });
diff --git a/src/client/features/jukebox/quran.ts b/src/client/features/jukebox/quran.ts
new file mode 100644
index 000000000..56d8f055a
--- /dev/null
+++ b/src/client/features/jukebox/quran.ts
@@ -0,0 +1,25 @@
+/** The 114 surahs, played from Quran.com's own audio (Mishari Alafasy), in place of the lounge's synthesized tunes. */
+export const SURAHS = [
+  'Al-Fatihah', 'Al-Baqarah', 'Ali \u2018Imran', 'An-Nisa', 'Al-Ma\u2019idah', 'Al-An\u2019am', 'Al-A\u2019raf', 'Al-Anfal', 'At-Tawbah', 'Yunus',
+  'Hud', 'Yusuf', 'Ar-Ra\u2019d', 'Ibrahim', 'Al-Hijr', 'An-Nahl', 'Al-Isra', 'Al-Kahf', 'Maryam', 'Ta-Ha',
+  'Al-Anbiya', 'Al-Hajj', 'Al-Mu\u2019minun', 'An-Nur', 'Al-Furqan', 'Ash-Shu\u2019ara', 'An-Naml', 'Al-Qasas', 'Al-\u2018Ankabut', 'Ar-Rum',
+  'Luqman', 'As-Sajdah', 'Al-Ahzab', 'Saba', 'Fatir', 'Ya-Sin', 'As-Saffat', 'Sad', 'Az-Zumar', 'Ghafir',
+  'Fussilat', 'Ash-Shuraa', 'Az-Zukhruf', 'Ad-Dukhan', 'Al-Jathiyah', 'Al-Ahqaf', 'Muhammad', 'Al-Fath', 'Al-Hujurat', 'Qaf',
+  'Adh-Dhariyat', 'At-Tur', 'An-Najm', 'Al-Qamar', 'Ar-Rahman', 'Al-Waqi\u2019ah', 'Al-Hadid', 'Al-Mujadila', 'Al-Hashr', 'Al-Mumtahanah',
+  'As-Saf', 'Al-Jumu\u2019ah', 'Al-Munafiqun', 'At-Taghabun', 'At-Talaq', 'At-Tahrim', 'Al-Mulk', 'Al-Qalam', 'Al-Haqqah', 'Al-Ma\u2019arij',
+  'Nuh', 'Al-Jinn', 'Al-Muzzammil', 'Al-Muddaththir', 'Al-Qiyamah', 'Al-Insan', 'Al-Mursalat', 'An-Naba', 'An-Nazi\u2019at', '\u2018Abasa',
+  'At-Takwir', 'Al-Infitar', 'Al-Mutaffifin', 'Al-Inshiqaq', 'Al-Buruj', 'At-Tariq', 'Al-A\u2019la', 'Al-Ghashiyah', 'Al-Fajr', 'Al-Balad',
+  'Ash-Shams', 'Al-Layl', 'Ad-Duhaa', 'Ash-Sharh', 'At-Tin', 'Al-\u2018Alaq', 'Al-Qadr', 'Al-Bayyinah', 'Az-Zalzalah', 'Al-\u2018Adiyat',
+  'Al-Qari\u2019ah', 'At-Takathur', 'Al-\u2018Asr', 'Al-Humazah', 'Al-Fil', 'Quraysh', 'Al-Ma\u2019un', 'Al-Kawthar', 'Al-Kafirun', 'An-Nasr',
+  'Al-Masad', 'Al-Ikhlas', 'Al-Falaq', 'An-Nas',
+] as const;
+
+export const QURAN_SITE = 'https://quran.com';
+
+export const surahUrl = (n: number) => `https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${n}.mp3`;
+
+/** The surah number a stream link plays, or 0 if it isn't one of ours. */
+export function surahOf(url: string | undefined): number {
+  const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? '');
+  return m ? Number(m[1]) : 0;
+}
diff --git a/src/client/features/jukebox/ui.ts b/src/client/features/jukebox/ui.ts
index b6ad99dc3..fc30da78c 100644
--- a/src/client/features/jukebox/ui.ts
+++ b/src/client/features/jukebox/ui.ts
@@ -1,89 +1,71 @@
 import './ui.css';
-import { JUKEBOX_TUNES, STREAM, checkStreamUrl, trackTitle, tuneById } from '../../../shared/jukebox';
+import { STREAM } from '../../../shared/jukebox';
+import { QURAN_SITE, SURAHS, surahOf, surahUrl } from './quran';
 import type { Net } from '../../net';
 import { store } from '../../state';
 import { h, openModal, toast } from '../../ui/dom';
 
-/** The jukebox: what's on, the tunes to pick from, skip and stop, and a box for a stream. */
+/** The lounge's Quran player: Quran.com's recitation of any surah, for everyone on the floor. */
 export function openJukebox(net: Net, openVolume: () => void) {
   const close = h('button.btn.close', { 'aria-label': 'Close' }, '✕');
   const now = h('div.jb-now');
   const list = h('ul.svc-list');
-  const url = h('input', { type: 'text', placeholder: 'https://… internet radio, or a link to an .mp3', 'aria-label': 'Stream or audio file link', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
-  const playUrl = h('button.btn.primary', { type: 'button' }, '📻 Play');
+  const find = h('input', { type: 'text', placeholder: 'Find a surah…', 'aria-label': 'Find a surah', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
+  const site = h('a.btn', { href: QURAN_SITE, target: '_blank', rel: 'noopener' }, '📖 Open Quran.com');
   const volume = h('button.btn', { type: 'button' }, '🔈 Your volume');
   const el = h(
     'div.modal.jukebox',
-    { role: 'dialog', 'aria-label': 'Jukebox' },
-    h('header', {}, h('h2', {}, '🎵 Jukebox'), close),
-    h(
-      'div.body',
-      {},
-      now,
-      h('label', { style: 'margin-top:16px' }, 'Put on a tune'),
-      list,
-      h('label', { style: 'margin-top:16px' }, 'Or play a stream'),
-      h('div.webhook', {}, url, playUrl),
-      h('p.setting-note', {}, 'Internet radio or an audio file. It plays from the jukebox, for everyone on this floor.'),
-    ),
-    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same song, louder the closer they are to the lounge.'), volume),
+    { role: 'dialog', 'aria-label': 'Quran' },
+    h('header', {}, h('h2', {}, '📖 Quran'), close),
+    h('div.body', {}, now, h('label', { style: 'margin-top:16px' }, 'Choose a surah'), find, list, h('p.setting-note', {}, 'Recitation by Mishari Alafasy, from Quran.com.')),
+    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same recitation, louder the closer they are to the lounge.'), site, volume),
   );
 
   const button = (label: string, title: string, send: () => void, primary = false) => h(primary ? 'button.btn.primary' : 'button.btn', { type: 'button', title, onclick: send }, label);
 
   const render = () => {
     const j = store.jukebox;
-    const stream = j.track === STREAM;
+    const cur = j.track === STREAM ? surahOf(j.url) : 0;
+    const name = cur ? `${cur}. ${SURAHS[cur - 1]}` : 'Nothing playing';
     now.replaceChildren(
-      h('span.jb-disc', { class: j.on ? 'spin' : '' }, stream ? '📻' : '💿'),
+      h('span.jb-disc', { class: j.on && cur ? 'spin' : '' }, '📖'),
       h(
         'div.svc-main',
         {},
-        h('div.svc-title', {}, j.on ? trackTitle(j) : 'The jukebox is off'),
-        h('div.svc-meta', {}, j.on ? [stream ? 'a stream' : tuneById(j.track)?.mood, j.by && `put on by ${j.by}`].filter(Boolean).join(' · ') : j.by ? `${j.by} turned it off` : 'Pick a tune to put it on'),
+        h('div.svc-title', {}, j.on ? name : 'The Quran player is off'),
+        h('div.svc-meta', {}, j.on && j.by ? `put on by ${j.by}` : 'Pick a surah to play it'),
       ),
-      j.on ? button('⏭️ Skip', 'On to the next tune', () => net.send({ t: 'jukebox.skip' })) : button('▶️ Play', `Put ${trackTitle(j)} back on`, () => net.send({ t: 'jukebox.play' }), true),
-      j.on ? button('⏹️ Stop', 'Turn the jukebox off', () => net.send({ t: 'jukebox.stop' })) : '',
+      j.on ? button('⏹️ Stop', 'Stop the recitation', () => net.send({ t: 'jukebox.stop' })) : '',
     );
+    const q = find.value.trim().toLowerCase();
     list.replaceChildren(
-      ...JUKEBOX_TUNES.map((t) => {
-        const playing = j.on && j.track === t.id;
-        const li = h(
-          'li',
-          { class: playing ? 'on' : '', tabindex: 0, role: 'button', 'aria-pressed': String(playing), title: playing ? 'Playing now' : `Put on ${t.title}` },
-          h('span.jb-icon', {}, playing ? '🔊' : '🎵'),
-          h('div.svc-main', {}, h('div.svc-title', {}, t.title), h('div.svc-meta', {}, t.mood)),
-        );
-        const pick = () => {
-          if (!playing) net.send({ t: 'jukebox.play', track: t.id });
-        };
-        li.addEventListener('click', pick);
-        li.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            pick();
-          }
-        });
-        return li;
-      }),
+      ...SURAHS.map((title, i) => ({ title, n: i + 1 }))
+        .filter(({ title, n }) => !q || title.toLowerCase().includes(q) || String(n) === q)
+        .map(({ title, n }) => {
+          const playing = j.on && cur === n;
+          const li = h(
+            'li',
+            { class: playing ? 'on' : '', tabindex: 0, role: 'button', 'aria-pressed': String(playing), title: playing ? 'Playing now' : `Play ${title}` },
+            h('span.jb-icon', {}, playing ? '🔊' : String(n)),
+            h('div.svc-main', {}, h('div.svc-title', {}, title)),
+          );
+          const pick = () => {
+            if (!playing) net.send({ t: 'jukebox.play', url: surahUrl(n) });
+          };
+          li.addEventListener('click', pick);
+          li.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              pick();
+            }
+          });
+          return li;
+        }),
     );
   };
+  find.addEventListener('input', render);
 
-  const play = () => {
-    const u = checkStreamUrl(url.value);
-    if ('error' in u) {
-      toast(u.error, 'warn');
-      return url.focus();
-    }
-    net.send({ t: 'jukebox.play', url: u.url });
-    url.value = '';
-  };
-  playUrl.addEventListener('click', play);
-  url.addEventListener('keydown', (e) => {
-    if (e.key === 'Enter') play();
-  });
-
-  const modal = openModal(el, { doing: '🎵 at the jukebox', onClose: store.on('jukebox', render) });
+  const modal = openModal(el, { doing: '📖 listening to the Quran', onClose: store.on('jukebox', render) });
   close.addEventListener('click', () => modal.close());
   volume.addEventListener('click', () => {
     modal.close();

From f54bee1423c0071d424c33438a6138288f406645 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:13:04 +0400
Subject: [PATCH 17/35] Quran window: embedded recitation playlist

---
 src/client/features/jukebox/quran.ts |  3 +++
 src/client/features/jukebox/ui.css   |  3 +++
 src/client/features/jukebox/ui.ts    | 13 ++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/client/features/jukebox/quran.ts b/src/client/features/jukebox/quran.ts
index 56d8f055a..65dab2574 100644
--- a/src/client/features/jukebox/quran.ts
+++ b/src/client/features/jukebox/quran.ts
@@ -23,3 +23,6 @@ export function surahOf(url: string | undefined): number {
   const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? '');
   return m ? Number(m[1]) : 0;
 }
+
+/** A YouTube playlist of recitations, shown in the window (plays for you only). */
+export const RECITATIONS = 'https://www.youtube.com/embed/videoseries?list=PLaPr5hj0xxM4OrOh0PXxj0nJ8spgyDwVO&rel=0';
diff --git a/src/client/features/jukebox/ui.css b/src/client/features/jukebox/ui.css
index e96ae2975..1739813b9 100644
--- a/src/client/features/jukebox/ui.css
+++ b/src/client/features/jukebox/ui.css
@@ -6,3 +6,6 @@
 .jb-disc.spin { animation: jb-spin 2.4s linear infinite; }
 @keyframes jb-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .jb-disc.spin { animation: none; } }
+
+.jb-video:not(:empty) { margin-top: 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
+.jb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
diff --git a/src/client/features/jukebox/ui.ts b/src/client/features/jukebox/ui.ts
index fc30da78c..4a664f6bf 100644
--- a/src/client/features/jukebox/ui.ts
+++ b/src/client/features/jukebox/ui.ts
@@ -1,6 +1,6 @@
 import './ui.css';
 import { STREAM } from '../../../shared/jukebox';
-import { QURAN_SITE, SURAHS, surahOf, surahUrl } from './quran';
+import { QURAN_SITE, RECITATIONS, SURAHS, surahOf, surahUrl } from './quran';
 import type { Net } from '../../net';
 import { store } from '../../state';
 import { h, openModal, toast } from '../../ui/dom';
@@ -12,13 +12,15 @@ export function openJukebox(net: Net, openVolume: () => void) {
   const list = h('ul.svc-list');
   const find = h('input', { type: 'text', placeholder: 'Find a surah…', 'aria-label': 'Find a surah', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
   const site = h('a.btn', { href: QURAN_SITE, target: '_blank', rel: 'noopener' }, '📖 Open Quran.com');
+  const watch = h('button.btn', { type: 'button' }, '▶️ Watch recitations');
+  const video = h('div.jb-video');
   const volume = h('button.btn', { type: 'button' }, '🔈 Your volume');
   const el = h(
     'div.modal.jukebox',
     { role: 'dialog', 'aria-label': 'Quran' },
     h('header', {}, h('h2', {}, '📖 Quran'), close),
-    h('div.body', {}, now, h('label', { style: 'margin-top:16px' }, 'Choose a surah'), find, list, h('p.setting-note', {}, 'Recitation by Mishari Alafasy, from Quran.com.')),
-    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same recitation, louder the closer they are to the lounge.'), site, volume),
+    h('div.body', {}, now, video, h('label', { style: 'margin-top:16px' }, 'Choose a surah'), find, list, h('p.setting-note', {}, 'Recitation by Mishari Alafasy, from Quran.com.')),
+    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same recitation, louder the closer they are to the lounge.'), watch, site, volume),
   );
 
   const button = (label: string, title: string, send: () => void, primary = false) => h(primary ? 'button.btn.primary' : 'button.btn', { type: 'button', title, onclick: send }, label);
@@ -64,6 +66,11 @@ export function openJukebox(net: Net, openVolume: () => void) {
     );
   };
   find.addEventListener('input', render);
+  watch.addEventListener('click', () => {
+    if (video.firstChild) return video.replaceChildren();
+    net.send({ t: 'jukebox.stop' });
+    video.replaceChildren(h('iframe', { src: RECITATIONS, title: 'Quran recitations', allow: 'autoplay; encrypted-media; fullscreen', allowfullscreen: 'true', referrerpolicy: 'strict-origin-when-cross-origin' }));
+  });
 
   const modal = openModal(el, { doing: '📖 listening to the Quran', onClose: store.on('jukebox', render) });
   close.addEventListener('click', () => modal.close());

From a8d5323bb7b65afaa6c520e9deceb87f680a885f Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:14:00 +0400
Subject: [PATCH 18/35] A-B loop for the recitation player

---
 src/client/features/jukebox/index.ts |  41 +++---
 src/client/features/jukebox/quran.ts | 137 +++++++++++++++++---
 src/client/features/jukebox/sound.ts |  66 ++++++----
 src/client/features/jukebox/ui.css   |   8 +-
 src/client/features/jukebox/ui.ts    | 158 ++++++++++++++++-------
 src/client/features/jukebox/video.ts | 153 ++++++++++++++++++++++
 src/client/features/jukebox/world.ts | 182 +++++++++++++++++++++------
 7 files changed, 606 insertions(+), 139 deletions(-)
 create mode 100644 src/client/features/jukebox/video.ts

diff --git a/src/client/features/jukebox/index.ts b/src/client/features/jukebox/index.ts
index 8745df92d..a87b70102 100644
--- a/src/client/features/jukebox/index.ts
+++ b/src/client/features/jukebox/index.ts
@@ -1,14 +1,14 @@
-import { trackTitle } from '../../../shared/jukebox';
-import type { Ctx } from '../../core/context';
-import { aside, hintTitle, key, onE } from '../../core/hint';
-import { store } from '../../state';
-import { clip } from '../../ui/dom';
-import { SURAHS, surahOf } from './quran';
-import { openJukebox } from './ui';
-import type { SettingsPane } from '../../ui/settings';
+import { trackTitle } from "../../../shared/jukebox";
+import type { Ctx } from "../../core/context";
+import { aside, hintTitle, key, onE } from "../../core/hint";
+import { store } from "../../state";
+import { clip } from "../../ui/dom";
+import { SURAHS, surahOf } from "./quran";
+import { openJukebox } from "./ui";
+import type { SettingsPane } from "../../ui/settings";
 
 // The kinds of thing you can use that this defines (see InteractKinds in world/types.ts).
-declare module '../../world/types' {
+declare module "../../world/types" {
   interface InteractKinds {
     jukebox: true;
   }
@@ -25,23 +25,34 @@ export function installJukebox(ctx: Ctx, deps: JukeboxDeps) {
   // It's the office's: on a map of its own there's none to hear.
   function playJukebox() {
     const j = store.jukebox;
-    ctx.sound.setJukebox(j.on && ctx.inOffice() ? { track: j.track, url: j.url, startedAt: j.startedAt, since: j.since } : null);
+    ctx.sound.setJukebox(
+      j.on && ctx.inOffice()
+        ? { track: j.track, url: j.url, startedAt: j.startedAt, since: j.since }
+        : null,
+    );
     ctx.office.jukebox.show(j.on, trackTitle(j));
   }
-  store.on('jukebox', playJukebox);
-  ctx.interactions.define('jukebox', {
+  store.on("jukebox", playJukebox);
+  ctx.interactions.define("jukebox", {
     reach: 4,
     hint: () => {
       const j = store.jukebox;
       const sn = surahOf(j.url);
-      const what = j.on ? (sn ? SURAHS[sn - 1] : trackTitle(j)) : '';
-      return { k: `${j.on}|${what}`, parts: [hintTitle('📖 Quran'), aside(j.on ? `♪ ${clip(what, 40)}` : 'off'), key('E', j.on ? 'Change the surah' : 'Play a surah')] };
+      const what = j.on ? (sn ? SURAHS[sn - 1] : trackTitle(j)) : "";
+      return {
+        k: `${j.on}|${what}`,
+        parts: [
+          hintTitle("📖 Quran"),
+          aside(j.on ? `♪ ${clip(what, 40)}` : "off"),
+          key("E", j.on ? "Change the surah" : "Play a surah"),
+        ],
+      };
     },
     use: onE(() => showJukebox()),
   });
 
   function showJukebox() {
-    openJukebox(ctx.net, () => deps.showSettings('sound'));
+    openJukebox(ctx.net, () => deps.showSettings("sound"));
   }
 
   return { playJukebox };
diff --git a/src/client/features/jukebox/quran.ts b/src/client/features/jukebox/quran.ts
index 65dab2574..893c47e5b 100644
--- a/src/client/features/jukebox/quran.ts
+++ b/src/client/features/jukebox/quran.ts
@@ -1,28 +1,131 @@
 /** The 114 surahs, played from Quran.com's own audio (Mishari Alafasy), in place of the lounge's synthesized tunes. */
 export const SURAHS = [
-  'Al-Fatihah', 'Al-Baqarah', 'Ali \u2018Imran', 'An-Nisa', 'Al-Ma\u2019idah', 'Al-An\u2019am', 'Al-A\u2019raf', 'Al-Anfal', 'At-Tawbah', 'Yunus',
-  'Hud', 'Yusuf', 'Ar-Ra\u2019d', 'Ibrahim', 'Al-Hijr', 'An-Nahl', 'Al-Isra', 'Al-Kahf', 'Maryam', 'Ta-Ha',
-  'Al-Anbiya', 'Al-Hajj', 'Al-Mu\u2019minun', 'An-Nur', 'Al-Furqan', 'Ash-Shu\u2019ara', 'An-Naml', 'Al-Qasas', 'Al-\u2018Ankabut', 'Ar-Rum',
-  'Luqman', 'As-Sajdah', 'Al-Ahzab', 'Saba', 'Fatir', 'Ya-Sin', 'As-Saffat', 'Sad', 'Az-Zumar', 'Ghafir',
-  'Fussilat', 'Ash-Shuraa', 'Az-Zukhruf', 'Ad-Dukhan', 'Al-Jathiyah', 'Al-Ahqaf', 'Muhammad', 'Al-Fath', 'Al-Hujurat', 'Qaf',
-  'Adh-Dhariyat', 'At-Tur', 'An-Najm', 'Al-Qamar', 'Ar-Rahman', 'Al-Waqi\u2019ah', 'Al-Hadid', 'Al-Mujadila', 'Al-Hashr', 'Al-Mumtahanah',
-  'As-Saf', 'Al-Jumu\u2019ah', 'Al-Munafiqun', 'At-Taghabun', 'At-Talaq', 'At-Tahrim', 'Al-Mulk', 'Al-Qalam', 'Al-Haqqah', 'Al-Ma\u2019arij',
-  'Nuh', 'Al-Jinn', 'Al-Muzzammil', 'Al-Muddaththir', 'Al-Qiyamah', 'Al-Insan', 'Al-Mursalat', 'An-Naba', 'An-Nazi\u2019at', '\u2018Abasa',
-  'At-Takwir', 'Al-Infitar', 'Al-Mutaffifin', 'Al-Inshiqaq', 'Al-Buruj', 'At-Tariq', 'Al-A\u2019la', 'Al-Ghashiyah', 'Al-Fajr', 'Al-Balad',
-  'Ash-Shams', 'Al-Layl', 'Ad-Duhaa', 'Ash-Sharh', 'At-Tin', 'Al-\u2018Alaq', 'Al-Qadr', 'Al-Bayyinah', 'Az-Zalzalah', 'Al-\u2018Adiyat',
-  'Al-Qari\u2019ah', 'At-Takathur', 'Al-\u2018Asr', 'Al-Humazah', 'Al-Fil', 'Quraysh', 'Al-Ma\u2019un', 'Al-Kawthar', 'Al-Kafirun', 'An-Nasr',
-  'Al-Masad', 'Al-Ikhlas', 'Al-Falaq', 'An-Nas',
+  "Al-Fatihah",
+  "Al-Baqarah",
+  "Ali \u2018Imran",
+  "An-Nisa",
+  "Al-Ma\u2019idah",
+  "Al-An\u2019am",
+  "Al-A\u2019raf",
+  "Al-Anfal",
+  "At-Tawbah",
+  "Yunus",
+  "Hud",
+  "Yusuf",
+  "Ar-Ra\u2019d",
+  "Ibrahim",
+  "Al-Hijr",
+  "An-Nahl",
+  "Al-Isra",
+  "Al-Kahf",
+  "Maryam",
+  "Ta-Ha",
+  "Al-Anbiya",
+  "Al-Hajj",
+  "Al-Mu\u2019minun",
+  "An-Nur",
+  "Al-Furqan",
+  "Ash-Shu\u2019ara",
+  "An-Naml",
+  "Al-Qasas",
+  "Al-\u2018Ankabut",
+  "Ar-Rum",
+  "Luqman",
+  "As-Sajdah",
+  "Al-Ahzab",
+  "Saba",
+  "Fatir",
+  "Ya-Sin",
+  "As-Saffat",
+  "Sad",
+  "Az-Zumar",
+  "Ghafir",
+  "Fussilat",
+  "Ash-Shuraa",
+  "Az-Zukhruf",
+  "Ad-Dukhan",
+  "Al-Jathiyah",
+  "Al-Ahqaf",
+  "Muhammad",
+  "Al-Fath",
+  "Al-Hujurat",
+  "Qaf",
+  "Adh-Dhariyat",
+  "At-Tur",
+  "An-Najm",
+  "Al-Qamar",
+  "Ar-Rahman",
+  "Al-Waqi\u2019ah",
+  "Al-Hadid",
+  "Al-Mujadila",
+  "Al-Hashr",
+  "Al-Mumtahanah",
+  "As-Saf",
+  "Al-Jumu\u2019ah",
+  "Al-Munafiqun",
+  "At-Taghabun",
+  "At-Talaq",
+  "At-Tahrim",
+  "Al-Mulk",
+  "Al-Qalam",
+  "Al-Haqqah",
+  "Al-Ma\u2019arij",
+  "Nuh",
+  "Al-Jinn",
+  "Al-Muzzammil",
+  "Al-Muddaththir",
+  "Al-Qiyamah",
+  "Al-Insan",
+  "Al-Mursalat",
+  "An-Naba",
+  "An-Nazi\u2019at",
+  "\u2018Abasa",
+  "At-Takwir",
+  "Al-Infitar",
+  "Al-Mutaffifin",
+  "Al-Inshiqaq",
+  "Al-Buruj",
+  "At-Tariq",
+  "Al-A\u2019la",
+  "Al-Ghashiyah",
+  "Al-Fajr",
+  "Al-Balad",
+  "Ash-Shams",
+  "Al-Layl",
+  "Ad-Duhaa",
+  "Ash-Sharh",
+  "At-Tin",
+  "Al-\u2018Alaq",
+  "Al-Qadr",
+  "Al-Bayyinah",
+  "Az-Zalzalah",
+  "Al-\u2018Adiyat",
+  "Al-Qari\u2019ah",
+  "At-Takathur",
+  "Al-\u2018Asr",
+  "Al-Humazah",
+  "Al-Fil",
+  "Quraysh",
+  "Al-Ma\u2019un",
+  "Al-Kawthar",
+  "Al-Kafirun",
+  "An-Nasr",
+  "Al-Masad",
+  "Al-Ikhlas",
+  "Al-Falaq",
+  "An-Nas",
 ] as const;
 
-export const QURAN_SITE = 'https://quran.com';
+export const QURAN_SITE = "https://quran.com";
 
-export const surahUrl = (n: number) => `https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${n}.mp3`;
+export const surahUrl = (n: number) =>
+  `https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${n}.mp3`;
 
 /** The surah number a stream link plays, or 0 if it isn't one of ours. */
 export function surahOf(url: string | undefined): number {
-  const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? '');
+  const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? "");
   return m ? Number(m[1]) : 0;
 }
 
-/** A YouTube playlist of recitations, shown in the window (plays for you only). */
-export const RECITATIONS = 'https://www.youtube.com/embed/videoseries?list=PLaPr5hj0xxM4OrOh0PXxj0nJ8spgyDwVO&rel=0';
+/** The YouTube playlist of recitations shown in the window (plays for you only). */
+export const RECITATIONS_LIST = "PLaPr5hj0xxM4OrOh0PXxj0nJ8spgyDwVO";
diff --git a/src/client/features/jukebox/sound.ts b/src/client/features/jukebox/sound.ts
index 2cefe9148..7c04843b8 100644
--- a/src/client/features/jukebox/sound.ts
+++ b/src/client/features/jukebox/sound.ts
@@ -1,8 +1,8 @@
-import { JUKEBOX } from '../../../shared/layout';
-import { STREAM } from '../../../shared/jukebox';
-import type { AudioCore } from '../../sound/core';
-import { biquad, rms } from '../../sound/dsp';
-import { TunePlayer } from '../../sound/music';
+import { JUKEBOX } from "../../../shared/layout";
+import { STREAM } from "../../../shared/jukebox";
+import type { AudioCore } from "../../sound/core";
+import { biquad, rms } from "../../sound/dsp";
+import { TunePlayer } from "../../sound/music";
 
 // ---- The jukebox ------------------------------------------------------------------------------
 
@@ -45,12 +45,15 @@ export class Jukebox {
   connect(ctx: AudioContext) {
     // The jukebox skips the master (it has its own volume) and keeps playing while the tab is hidden.
     this.musicIn = this.a.panner(JUKEBOX, MUSIC_REF, MUSIC_ROLLOFF);
-    this.musicTone = biquad(ctx, 'lowpass', 16000, 0.5);
+    this.musicTone = biquad(ctx, "lowpass", 16000, 0.5);
     this.musicBus = ctx.createGain();
     this.musicBus.gain.value = 0;
     this.musicMeter = ctx.createAnalyser();
     this.musicMeter.fftSize = 2048;
-    this.musicIn.connect(this.musicTone).connect(this.musicBus).connect(ctx.destination);
+    this.musicIn
+      .connect(this.musicTone)
+      .connect(this.musicBus)
+      .connect(ctx.destination);
     this.musicBus.connect(this.musicMeter);
   }
 
@@ -71,8 +74,15 @@ export class Jukebox {
     this.jukebox = play;
     // The same play, sent again after a reconnect or timed better once the clocks are compared: carry on
     // (a tune lines itself up again as it goes; an audio file jumps to the right spot).
-    if (was && play && was.startedAt === play.startedAt && was.track === play.track && was.url === play.url) {
-      if (this.stream && Math.abs(was.since - play.since) > 250) this.seekStream(this.stream);
+    if (
+      was &&
+      play &&
+      was.startedAt === play.startedAt &&
+      was.track === play.track &&
+      was.url === play.url
+    ) {
+      if (this.stream && Math.abs(was.since - play.since) > 250)
+        this.seekStream(this.stream);
       return;
     }
     this.applyJukebox(true);
@@ -88,18 +98,25 @@ export class Jukebox {
   /** 1 on each beat of the tune, falling to 0 before the next, for the jukebox's lights. */
   beat(): number {
     if (this.tune) return this.tune.beat(this.musicAt());
-    if (this.stream && !this.stream.paused) return 0.35 + 0.25 * Math.sin(performance.now() / 320);
+    if (this.stream && !this.stream.paused)
+      return 0.35 + 0.25 * Math.sin(performance.now() / 320);
     return 0;
   }
 
   /** How far into the jukebox's track it is now, in seconds. */
   private musicAt(): number {
-    return this.jukebox ? Math.max(0, (performance.now() - this.jukebox.since) / 1000) : 0;
+    return this.jukebox
+      ? Math.max(0, (performance.now() - this.jukebox.since) / 1000)
+      : 0;
   }
 
   applyMusicVolume() {
     if (!this.a.ctx) return;
-    this.musicBus.gain.setTargetAtTime(this.musicGain(), this.a.ctx.currentTime, 0.04);
+    this.musicBus.gain.setTargetAtTime(
+      this.musicGain(),
+      this.a.ctx.currentTime,
+      0.04,
+    );
     this.hearStream();
   }
 
@@ -115,7 +132,7 @@ export class Jukebox {
     this.tune = null;
     if (this.stream) {
       this.stream.pause();
-      this.stream.removeAttribute('src');
+      this.stream.removeAttribute("src");
       this.stream.load();
       this.stream = null;
     }
@@ -124,7 +141,7 @@ export class Jukebox {
     if (!j) return;
     if (j.track === STREAM && j.url) return this.startStream(j.url);
     const tune = (this.tune = new TunePlayer(ctx, this.musicIn, j.track));
-    this.a.count('tune');
+    this.a.count("tune");
     // On a timer rather than every frame, so it carries on in a background tab.
     const tick = () => tune.tick(this.musicAt());
     tick();
@@ -133,22 +150,24 @@ export class Jukebox {
 
   private startStream(url: string) {
     const a = new Audio();
-    a.preload = 'auto';
+    a.preload = "auto";
     a.loop = true;
     a.src = url;
-    a.addEventListener('loadedmetadata', () => this.seekStream(a));
-    a.addEventListener('error', () => {
-      if (this.stream === a) this.onError("📻 The jukebox can't play that stream in your browser");
+    a.addEventListener("loadedmetadata", () => this.seekStream(a));
+    a.addEventListener("error", () => {
+      if (this.stream === a)
+        this.onError("📻 The jukebox can't play that stream in your browser");
     });
     this.stream = a;
     this.hearStream();
     void a.play().catch(() => {});
-    this.a.count('stream');
+    this.a.count("stream");
   }
 
   /** An audio file (not live radio) picks up where everyone else is. */
   private seekStream(a: HTMLAudioElement) {
-    if (Number.isFinite(a.duration) && a.duration > 0) a.currentTime = this.musicAt() % a.duration;
+    if (Number.isFinite(a.duration) && a.duration > 0)
+      a.currentTime = this.musicAt() % a.duration;
   }
 
   /** Muffles the jukebox the further you are from it. */
@@ -166,12 +185,15 @@ export class Jukebox {
   private hearStream() {
     if (!this.stream) return;
     const d = Math.max(MUSIC_REF, this.jukeboxDistance());
-    this.stream.volume = Math.min(1, this.musicGain() * (MUSIC_REF / (MUSIC_REF + MUSIC_ROLLOFF * (d - MUSIC_REF))));
+    this.stream.volume = Math.min(
+      1,
+      this.musicGain() *
+        (MUSIC_REF / (MUSIC_REF + MUSIC_ROLLOFF * (d - MUSIC_REF))),
+    );
   }
 
   private jukeboxDistance(): number {
     const l = this.a.listener;
     return Math.hypot(l.x - JUKEBOX.x, l.y - JUKEBOX.y, l.z - JUKEBOX.z);
   }
-
 }
diff --git a/src/client/features/jukebox/ui.css b/src/client/features/jukebox/ui.css
index 1739813b9..faf806c3c 100644
--- a/src/client/features/jukebox/ui.css
+++ b/src/client/features/jukebox/ui.css
@@ -7,5 +7,9 @@
 @keyframes jb-spin { to { transform: rotate(360deg); } }
 @media (prefers-reduced-motion: reduce) { .jb-disc.spin { animation: none; } }
 
-.jb-video:not(:empty) { margin-top: 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
-.jb-video iframe { width: 100%; height: 100%; border: 0; display: block; }
+.jb-video:not(:empty) { margin-top: 12px; border: 3px solid var(--ink); border-radius: var(--radius-control); overflow: hidden; background: var(--paper-2); }
+.jb-ab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; }
+.jb-ab .btn { padding: 4px 10px; font-size: 13px; }
+.jb-video { display: block; }
+.jb-screen { aspect-ratio: 16 / 9; background: #000; }
+.jb-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
diff --git a/src/client/features/jukebox/ui.ts b/src/client/features/jukebox/ui.ts
index 4a664f6bf..1d686710b 100644
--- a/src/client/features/jukebox/ui.ts
+++ b/src/client/features/jukebox/ui.ts
@@ -1,62 +1,120 @@
-import './ui.css';
-import { STREAM } from '../../../shared/jukebox';
-import { QURAN_SITE, RECITATIONS, SURAHS, surahOf, surahUrl } from './quran';
-import type { Net } from '../../net';
-import { store } from '../../state';
-import { h, openModal, toast } from '../../ui/dom';
+import "./ui.css";
+import { STREAM } from "../../../shared/jukebox";
+import { recitationPlayer } from "./video";
+import { QURAN_SITE, SURAHS, surahOf, surahUrl } from "./quran";
+import type { Net } from "../../net";
+import { store } from "../../state";
+import { h, openModal, toast } from "../../ui/dom";
 
 /** The lounge's Quran player: Quran.com's recitation of any surah, for everyone on the floor. */
 export function openJukebox(net: Net, openVolume: () => void) {
-  const close = h('button.btn.close', { 'aria-label': 'Close' }, '✕');
-  const now = h('div.jb-now');
-  const list = h('ul.svc-list');
-  const find = h('input', { type: 'text', placeholder: 'Find a surah…', 'aria-label': 'Find a surah', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
-  const site = h('a.btn', { href: QURAN_SITE, target: '_blank', rel: 'noopener' }, '📖 Open Quran.com');
-  const watch = h('button.btn', { type: 'button' }, '▶️ Watch recitations');
-  const video = h('div.jb-video');
-  const volume = h('button.btn', { type: 'button' }, '🔈 Your volume');
+  const close = h("button.btn.close", { "aria-label": "Close" }, "✕");
+  const now = h("div.jb-now");
+  const list = h("ul.svc-list");
+  const find = h("input", {
+    type: "text",
+    placeholder: "Find a surah…",
+    "aria-label": "Find a surah",
+    spellcheck: "false",
+    autocomplete: "off",
+  }) as HTMLInputElement;
+  const site = h(
+    "a.btn",
+    { href: QURAN_SITE, target: "_blank", rel: "noopener" },
+    "📖 Open Quran.com",
+  );
+  const watch = h("button.btn", { type: "button" }, "▶️ Watch recitations");
+  const video = h("div.jb-video");
+  const volume = h("button.btn", { type: "button" }, "🔈 Your volume");
   const el = h(
-    'div.modal.jukebox',
-    { role: 'dialog', 'aria-label': 'Quran' },
-    h('header', {}, h('h2', {}, '📖 Quran'), close),
-    h('div.body', {}, now, video, h('label', { style: 'margin-top:16px' }, 'Choose a surah'), find, list, h('p.setting-note', {}, 'Recitation by Mishari Alafasy, from Quran.com.')),
-    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same recitation, louder the closer they are to the lounge.'), watch, site, volume),
+    "div.modal.jukebox",
+    { role: "dialog", "aria-label": "Quran" },
+    h("header", {}, h("h2", {}, "📖 Quran"), close),
+    h(
+      "div.body",
+      {},
+      now,
+      video,
+      h("label", { style: "margin-top:16px" }, "Choose a surah"),
+      find,
+      list,
+      h("p.setting-note", {}, "Recitation by Mishari Alafasy, from Quran.com."),
+    ),
+    h(
+      "footer",
+      {},
+      h(
+        "span.grow",
+        {},
+        "Everyone on this floor hears the same recitation, louder the closer they are to the lounge.",
+      ),
+      watch,
+      site,
+      volume,
+    ),
   );
 
-  const button = (label: string, title: string, send: () => void, primary = false) => h(primary ? 'button.btn.primary' : 'button.btn', { type: 'button', title, onclick: send }, label);
+  const button = (
+    label: string,
+    title: string,
+    send: () => void,
+    primary = false,
+  ) =>
+    h(
+      primary ? "button.btn.primary" : "button.btn",
+      { type: "button", title, onclick: send },
+      label,
+    );
 
   const render = () => {
     const j = store.jukebox;
     const cur = j.track === STREAM ? surahOf(j.url) : 0;
-    const name = cur ? `${cur}. ${SURAHS[cur - 1]}` : 'Nothing playing';
+    const name = cur ? `${cur}. ${SURAHS[cur - 1]}` : "Nothing playing";
     now.replaceChildren(
-      h('span.jb-disc', { class: j.on && cur ? 'spin' : '' }, '📖'),
+      h("span.jb-disc", { class: j.on && cur ? "spin" : "" }, "📖"),
       h(
-        'div.svc-main',
+        "div.svc-main",
         {},
-        h('div.svc-title', {}, j.on ? name : 'The Quran player is off'),
-        h('div.svc-meta', {}, j.on && j.by ? `put on by ${j.by}` : 'Pick a surah to play it'),
+        h("div.svc-title", {}, j.on ? name : "The Quran player is off"),
+        h(
+          "div.svc-meta",
+          {},
+          j.on && j.by ? `put on by ${j.by}` : "Pick a surah to play it",
+        ),
       ),
-      j.on ? button('⏹️ Stop', 'Stop the recitation', () => net.send({ t: 'jukebox.stop' })) : '',
+      j.on
+        ? button("⏹️ Stop", "Stop the recitation", () =>
+            net.send({ t: "jukebox.stop" }),
+          )
+        : "",
     );
     const q = find.value.trim().toLowerCase();
     list.replaceChildren(
       ...SURAHS.map((title, i) => ({ title, n: i + 1 }))
-        .filter(({ title, n }) => !q || title.toLowerCase().includes(q) || String(n) === q)
+        .filter(
+          ({ title, n }) =>
+            !q || title.toLowerCase().includes(q) || String(n) === q,
+        )
         .map(({ title, n }) => {
           const playing = j.on && cur === n;
           const li = h(
-            'li',
-            { class: playing ? 'on' : '', tabindex: 0, role: 'button', 'aria-pressed': String(playing), title: playing ? 'Playing now' : `Play ${title}` },
-            h('span.jb-icon', {}, playing ? '🔊' : String(n)),
-            h('div.svc-main', {}, h('div.svc-title', {}, title)),
+            "li",
+            {
+              class: playing ? "on" : "",
+              tabindex: 0,
+              role: "button",
+              "aria-pressed": String(playing),
+              title: playing ? "Playing now" : `Play ${title}`,
+            },
+            h("span.jb-icon", {}, playing ? "🔊" : String(n)),
+            h("div.svc-main", {}, h("div.svc-title", {}, title)),
           );
           const pick = () => {
-            if (!playing) net.send({ t: 'jukebox.play', url: surahUrl(n) });
+            if (!playing) net.send({ t: "jukebox.play", url: surahUrl(n) });
           };
-          li.addEventListener('click', pick);
-          li.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
+          li.addEventListener("click", pick);
+          li.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               pick();
             }
@@ -65,16 +123,30 @@ export function openJukebox(net: Net, openVolume: () => void) {
         }),
     );
   };
-  find.addEventListener('input', render);
-  watch.addEventListener('click', () => {
-    if (video.firstChild) return video.replaceChildren();
-    net.send({ t: 'jukebox.stop' });
-    video.replaceChildren(h('iframe', { src: RECITATIONS, title: 'Quran recitations', allow: 'autoplay; encrypted-media; fullscreen', allowfullscreen: 'true', referrerpolicy: 'strict-origin-when-cross-origin' }));
+  find.addEventListener("input", render);
+  let vp: ReturnType<typeof recitationPlayer> | null = null;
+  const stopVideo = () => {
+    vp?.destroy();
+    vp = null;
+    video.replaceChildren();
+  };
+  watch.addEventListener("click", () => {
+    if (vp) return stopVideo();
+    net.send({ t: "jukebox.stop" });
+    vp = recitationPlayer();
+    video.replaceChildren(vp.el);
   });
 
-  const modal = openModal(el, { doing: '📖 listening to the Quran', onClose: store.on('jukebox', render) });
-  close.addEventListener('click', () => modal.close());
-  volume.addEventListener('click', () => {
+  const off = store.on("jukebox", render);
+  const modal = openModal(el, {
+    doing: "📖 listening to the Quran",
+    onClose: () => {
+      stopVideo();
+      off();
+    },
+  });
+  close.addEventListener("click", () => modal.close());
+  volume.addEventListener("click", () => {
     modal.close();
     openVolume();
   });
diff --git a/src/client/features/jukebox/video.ts b/src/client/features/jukebox/video.ts
new file mode 100644
index 000000000..156def2d2
--- /dev/null
+++ b/src/client/features/jukebox/video.ts
@@ -0,0 +1,153 @@
+import { h } from "../../ui/dom";
+import { RECITATIONS_LIST } from "./quran";
+
+/** The slice of the YouTube IFrame API used here. */
+interface YTPlayer {
+  getCurrentTime(): number;
+  seekTo(s: number, allowSeekAhead: boolean): void;
+  playVideo(): void;
+  destroy(): void;
+}
+interface YTApi {
+  Player: new (
+    el: HTMLElement,
+    opts: {
+      width: string;
+      height: string;
+      playerVars: Record<string, string | number>;
+      events: { onReady: () => void };
+    },
+  ) => YTPlayer;
+}
+
+let apiReady: Promise<YTApi> | null = null;
+function loadApi(): Promise<YTApi> {
+  const w = window as unknown as {
+    YT?: YTApi;
+    onYouTubeIframeAPIReady?: () => void;
+  };
+  if (w.YT?.Player) return Promise.resolve(w.YT);
+  return (apiReady ??= new Promise((resolve) => {
+    w.onYouTubeIframeAPIReady = () => resolve(w.YT!);
+    document.head.append(
+      h("script", { src: "https://www.youtube.com/iframe_api" }),
+    );
+  }));
+}
+
+const clock = (s: number) =>
+  `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+
+/** A recitation player with an A–B repeat: set a start and an end, and it plays that part nonstop. */
+export function recitationPlayer() {
+  const root = h("div.jb-video");
+  const screen = h("div.jb-screen");
+  const a = h(
+    "button.btn",
+    { type: "button", title: "Mark where the repeat starts" },
+    "🅰️ Set A",
+  );
+  const b = h(
+    "button.btn",
+    { type: "button", title: "Mark where the repeat ends" },
+    "🅱️ Set B",
+  );
+  const loop = h(
+    "button.btn",
+    { type: "button", title: "Repeat from A to B nonstop" },
+    "🔁 Loop off",
+  );
+  const clear = h(
+    "button.btn",
+    { type: "button", title: "Forget A and B" },
+    "✖ Clear",
+  );
+  const info = h(
+    "span.setting-note",
+    {},
+    "Set A and B while it plays, then turn the loop on.",
+  );
+  root.append(screen, h("div.jb-ab", {}, a, b, loop, clear, info));
+
+  let player: YTPlayer | null = null;
+  let pa: number | null = null;
+  let pb: number | null = null;
+  let looping = false;
+  let timer = 0;
+
+  const show = () => {
+    a.textContent = pa === null ? "🅰️ Set A" : `🅰️ A ${clock(pa)}`;
+    b.textContent = pb === null ? "🅱️ Set B" : `🅱️ B ${clock(pb)}`;
+    loop.textContent = looping ? "🔁 Loop on" : "🔁 Loop off";
+    loop.classList.toggle("primary", looping);
+  };
+  a.addEventListener("click", () => {
+    if (!player) return;
+    pa = player.getCurrentTime();
+    if (pb !== null && pb <= pa) pb = null;
+    show();
+  });
+  b.addEventListener("click", () => {
+    if (!player) return;
+    const t = player.getCurrentTime();
+    if (pa === null || t <= pa) {
+      info.textContent = "Set A first, then B a little later.";
+      return;
+    }
+    pb = t;
+    info.textContent = "Turn the loop on to repeat it.";
+    show();
+  });
+  loop.addEventListener("click", () => {
+    if (pa === null || pb === null) {
+      info.textContent = "Set both A and B first.";
+      return;
+    }
+    looping = !looping;
+    if (looping) player?.seekTo(pa, true);
+    show();
+  });
+  clear.addEventListener("click", () => {
+    pa = pb = null;
+    looping = false;
+    show();
+  });
+
+  void loadApi().then((YT) => {
+    if (!root.isConnected && !root.parentElement) return;
+    const target = h("div");
+    screen.append(target);
+    player = new YT.Player(target, {
+      width: "100%",
+      height: "100%",
+      playerVars: {
+        listType: "playlist",
+        list: RECITATIONS_LIST,
+        rel: 0,
+        playsinline: 1,
+        enablejsapi: 1,
+      },
+      events: { onReady: () => {} },
+    });
+    timer = window.setInterval(() => {
+      if (
+        looping &&
+        player &&
+        pa !== null &&
+        pb !== null &&
+        player.getCurrentTime() >= pb
+      )
+        player.seekTo(pa, true);
+    }, 200);
+  });
+  show();
+
+  return {
+    el: root,
+    destroy() {
+      window.clearInterval(timer);
+      player?.destroy();
+      player = null;
+    },
+  };
+}
diff --git a/src/client/features/jukebox/world.ts b/src/client/features/jukebox/world.ts
index 3ca6af04f..a3c6d43a2 100644
--- a/src/client/features/jukebox/world.ts
+++ b/src/client/features/jukebox/world.ts
@@ -1,8 +1,14 @@
-import * as THREE from 'three';
-import { JUKEBOX } from '../../../shared/layout';
-import { mesh, roundedBox, textSprite, toon, toonUnique } from '../../world/toon';
-import type { Collider, Interactable } from '../../world/types';
-import type { Fixture } from '../../world/office/fixture';
+import * as THREE from "three";
+import { JUKEBOX } from "../../../shared/layout";
+import {
+  mesh,
+  roundedBox,
+  textSprite,
+  toon,
+  toonUnique,
+} from "../../world/toon";
+import type { Collider, Interactable } from "../../world/types";
+import type { Fixture } from "../../world/office/fixture";
 
 // The lounge jukebox: a cherry-red cabinet with a rounded top, a neon tube round its face that
 // glows to the beat while it plays, a little display saying what's on, and notes floating up.
@@ -17,7 +23,7 @@ export interface JukeboxView {
   update(t: number, dt: number, beat: number): void;
 }
 
-const NOTES = ['♪', '♫', '♪', '♬', '♫'];
+const NOTES = ["♪", "♫", "♪", "♬", "♫"];
 
 export function buildJukebox(): JukeboxView {
   const { width: W, depth: D, height: H } = JUKEBOX;
@@ -31,39 +37,109 @@ export function buildJukebox(): JukeboxView {
   shape.lineTo(r, H - r);
   shape.absarc(0, H - r, r, 0, Math.PI, false);
   shape.lineTo(-r, 0);
-  const body = new THREE.ExtrudeGeometry(shape, { depth: D, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.03, bevelSegments: 2, curveSegments: 24 });
+  const body = new THREE.ExtrudeGeometry(shape, {
+    depth: D,
+    bevelEnabled: true,
+    bevelThickness: 0.03,
+    bevelSize: 0.03,
+    bevelSegments: 2,
+    curveSegments: 24,
+  });
   body.translate(0, 0, -D / 2);
-  group.add(mesh(body, toon('#d64545')));
-  group.add(mesh(new THREE.BoxGeometry(W + 0.12, 0.1, D + 0.12), toon('#2b2d42'), 0, 0.05, 0));
+  group.add(mesh(body, toon("#d64545")));
+  group.add(
+    mesh(
+      new THREE.BoxGeometry(W + 0.12, 0.1, D + 0.12),
+      toon("#2b2d42"),
+      0,
+      0.05,
+      0,
+    ),
+  );
 
   const front = D / 2 + 0.035;
   // The neon tube: up one side, over the arch and down the other.
-  const neon = toonUnique('#ffd166');
-  neon.emissive = new THREE.Color('#ffd166');
+  const neon = toonUnique("#ffd166");
+  neon.emissive = new THREE.Color("#ffd166");
   const tubeR = r - 0.1;
   const legLen = H - r - 0.3;
-  group.add(mesh(new THREE.TorusGeometry(tubeR, 0.045, 8, 36, Math.PI), neon, 0, H - r, front, false));
-  for (const sx of [-1, 1]) group.add(mesh(new THREE.CylinderGeometry(0.045, 0.045, legLen, 8), neon, sx * tubeR, 0.3 + legLen / 2, front, false));
+  group.add(
+    mesh(
+      new THREE.TorusGeometry(tubeR, 0.045, 8, 36, Math.PI),
+      neon,
+      0,
+      H - r,
+      front,
+      false,
+    ),
+  );
+  for (const sx of [-1, 1])
+    group.add(
+      mesh(
+        new THREE.CylinderGeometry(0.045, 0.045, legLen, 8),
+        neon,
+        sx * tubeR,
+        0.3 + legLen / 2,
+        front,
+        false,
+      ),
+    );
 
   // The display in the arch: what's playing.
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = 512;
   canvas.height = 256;
   const tex = new THREE.CanvasTexture(canvas);
   tex.colorSpace = THREE.SRGBColorSpace;
   tex.anisotropy = 4;
-  const screen = new THREE.Mesh(new THREE.PlaneGeometry(0.82, 0.41), new THREE.MeshBasicMaterial({ map: tex, toneMapped: false }));
+  const screen = new THREE.Mesh(
+    new THREE.PlaneGeometry(0.82, 0.41),
+    new THREE.MeshBasicMaterial({ map: tex, toneMapped: false }),
+  );
   screen.position.set(0, H - r + 0.02, front + 0.005);
   group.add(screen);
 
   // Selector buttons, and the speaker grille below them.
-  ['#ef476f', '#ffd166', '#06d6a0', '#4cc9f0', '#9d4edd'].forEach((c, i) => group.add(mesh(roundedBox(0.1, 0.05, 0.05, 0.02), toon(c), (i - 2) * 0.14, 0.98, front, false)));
-  group.add(mesh(new THREE.BoxGeometry(0.82, 0.52, 0.03), toon('#2b2d42'), 0, 0.58, front - 0.01, false));
-  for (let i = 0; i < 5; i++) group.add(mesh(new THREE.BoxGeometry(0.78, 0.035, 0.03), toon('#dfe6ee'), 0, 0.38 + i * 0.1, front + 0.01, false));
+  ["#ef476f", "#ffd166", "#06d6a0", "#4cc9f0", "#9d4edd"].forEach((c, i) =>
+    group.add(
+      mesh(
+        roundedBox(0.1, 0.05, 0.05, 0.02),
+        toon(c),
+        (i - 2) * 0.14,
+        0.98,
+        front,
+        false,
+      ),
+    ),
+  );
+  group.add(
+    mesh(
+      new THREE.BoxGeometry(0.82, 0.52, 0.03),
+      toon("#2b2d42"),
+      0,
+      0.58,
+      front - 0.01,
+      false,
+    ),
+  );
+  for (let i = 0; i < 5; i++)
+    group.add(
+      mesh(
+        new THREE.BoxGeometry(0.78, 0.035, 0.03),
+        toon("#dfe6ee"),
+        0,
+        0.38 + i * 0.1,
+        front + 0.01,
+        false,
+      ),
+    );
 
   // Notes drift up out of the top while it plays.
   const notes = NOTES.map((n, i) => {
-    const s = textSprite(n, { color: ['#ef476f', '#4f86f7', '#06d6a0', '#9d4edd', '#ff8a5b'][i], size: 96 });
+    const s = textSprite(n, {
+      color: ["#ef476f", "#4f86f7", "#06d6a0", "#9d4edd", "#ff8a5b"][i],
+      size: 96,
+    });
     s.scale.multiplyScalar(0.55);
     s.visible = false;
     group.add(s);
@@ -73,27 +149,38 @@ export function buildJukebox(): JukeboxView {
   // Built facing +z; it stands against the east wall facing into the room (-x).
   group.position.set(JUKEBOX.x, 0, JUKEBOX.z);
   group.rotation.y = -Math.PI / 2;
-  const collider: Collider = { minX: JUKEBOX.x - D / 2 - 0.05, maxX: JUKEBOX.x + D / 2, minZ: JUKEBOX.z - r - 0.05, maxZ: JUKEBOX.z + r + 0.05, top: H };
-  const interactable: Interactable = { kind: 'jukebox', x: JUKEBOX.x - 1.3, z: JUKEBOX.z, radius: 1.6 };
+  const collider: Collider = {
+    minX: JUKEBOX.x - D / 2 - 0.05,
+    maxX: JUKEBOX.x + D / 2,
+    minZ: JUKEBOX.z - r - 0.05,
+    maxZ: JUKEBOX.z + r + 0.05,
+    top: H,
+  };
+  const interactable: Interactable = {
+    kind: "jukebox",
+    x: JUKEBOX.x - 1.3,
+    z: JUKEBOX.z,
+    radius: 1.6,
+  };
   group.userData.interact = interactable;
 
   let on = false;
-  let shown = '';
+  let shown = "";
   const paint = (title: string) => {
-    const g = canvas.getContext('2d')!;
+    const g = canvas.getContext("2d")!;
     const grad = g.createLinearGradient(0, 0, 0, 256);
-    grad.addColorStop(0, on ? '#3a0ca3' : '#2b2d42');
-    grad.addColorStop(1, on ? '#1b1d2e' : '#1b1d2e');
+    grad.addColorStop(0, on ? "#3a0ca3" : "#2b2d42");
+    grad.addColorStop(1, on ? "#1b1d2e" : "#1b1d2e");
     g.fillStyle = grad;
     g.fillRect(0, 0, 512, 256);
-    g.textAlign = 'center';
-    g.textBaseline = 'middle';
-    g.fillStyle = on ? '#ffd166' : '#8d99ae';
-    g.font = '900 44px Nunito, ui-rounded, system-ui, sans-serif';
-    g.fillText(on ? '♪ NOW PLAYING ♪' : 'JUKEBOX', 256, 70);
-    g.fillStyle = on ? '#ffffff' : '#8d99ae';
+    g.textAlign = "center";
+    g.textBaseline = "middle";
+    g.fillStyle = on ? "#ffd166" : "#8d99ae";
+    g.font = "900 44px Nunito, ui-rounded, system-ui, sans-serif";
+    g.fillText(on ? "♪ NOW PLAYING ♪" : "JUKEBOX", 256, 70);
+    g.fillStyle = on ? "#ffffff" : "#8d99ae";
     let size = 58;
-    const text = on ? title : 'press E to play';
+    const text = on ? title : "press E to play";
     do g.font = `800 ${size--}px Nunito, ui-rounded, system-ui, sans-serif`;
     while (g.measureText(text).width > 470 && size > 26);
     g.fillText(text, 256, 160);
@@ -107,13 +194,13 @@ export function buildJukebox(): JukeboxView {
     on = playing;
     paint(title);
     // Lit, the glow is the color; dark, it's dull glass.
-    neon.color.set(on ? '#1b1d2e' : '#b8b2a7');
+    neon.color.set(on ? "#1b1d2e" : "#b8b2a7");
     if (!on) {
-      neon.emissive.set('#000000');
+      neon.emissive.set("#000000");
       for (const n of notes) n.visible = false;
     }
   };
-  show(false, '');
+  show(false, "");
 
   const update = (t: number, _dt: number, beat: number) => {
     if (!on) return;
@@ -123,7 +210,11 @@ export function buildJukebox(): JukeboxView {
     notes.forEach((n, i) => {
       const k = (t * 0.35 + i / notes.length) % 1;
       n.visible = true;
-      n.position.set(Math.sin(t * 1.3 + i * 2.1) * 0.35, H + 0.1 + k * 1.3, 0.1);
+      n.position.set(
+        Math.sin(t * 1.3 + i * 2.1) * 0.35,
+        H + 0.1 + k * 1.3,
+        0.1,
+      );
       n.material.opacity = Math.min(1, k * 5) * (1 - k);
     });
   };
@@ -131,7 +222,7 @@ export function buildJukebox(): JukeboxView {
   return { group, collider, interactable, show, update };
 }
 
-declare module '../../world/types' {
+declare module "../../world/types" {
   interface OfficeHandles {
     /** The jukebox in the lounge (see features/jukebox). */
     jukebox: JukeboxView;
@@ -139,8 +230,19 @@ declare module '../../world/types' {
 }
 
 /** The jukebox, in the lounge's corner against the east wall. */
-export const jukebox: Fixture<'jukebox'> = (site) => {
+export const jukebox: Fixture<"jukebox"> = (site) => {
   const built = buildJukebox();
-  site.wall('east', JUKEBOX.z, JUKEBOX.height / 2, JUKEBOX.width + 0.1, JUKEBOX.height);
-  return { group: built.group, colliders: [built.collider], interactables: [built.interactable], handle: { jukebox: built } };
+  site.wall(
+    "east",
+    JUKEBOX.z,
+    JUKEBOX.height / 2,
+    JUKEBOX.width + 0.1,
+    JUKEBOX.height,
+  );
+  return {
+    group: built.group,
+    colliders: [built.collider],
+    interactables: [built.interactable],
+    handle: { jukebox: built },
+  };
 };

From bed51dd260827baee3573d9a47a31b5923c2f745 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:16:35 +0400
Subject: [PATCH 19/35] Recitation videos as a list, each with its own A-B loop

---
 src/client/features/jukebox/index.ts |  38 +--
 src/client/features/jukebox/quran.ts | 439 +++++++++++++++++++--------
 src/client/features/jukebox/sound.ts |  66 ++--
 src/client/features/jukebox/ui.css   |   4 +
 src/client/features/jukebox/ui.ts    | 184 ++++++-----
 src/client/features/jukebox/video.ts |  88 ++----
 src/client/features/jukebox/world.ts | 182 +++--------
 7 files changed, 518 insertions(+), 483 deletions(-)

diff --git a/src/client/features/jukebox/index.ts b/src/client/features/jukebox/index.ts
index a87b70102..c783966c7 100644
--- a/src/client/features/jukebox/index.ts
+++ b/src/client/features/jukebox/index.ts
@@ -1,14 +1,14 @@
-import { trackTitle } from "../../../shared/jukebox";
-import type { Ctx } from "../../core/context";
-import { aside, hintTitle, key, onE } from "../../core/hint";
-import { store } from "../../state";
-import { clip } from "../../ui/dom";
-import { SURAHS, surahOf } from "./quran";
-import { openJukebox } from "./ui";
-import type { SettingsPane } from "../../ui/settings";
+import { trackTitle } from '../../../shared/jukebox';
+import type { Ctx } from '../../core/context';
+import { aside, hintTitle, key, onE } from '../../core/hint';
+import { store } from '../../state';
+import { clip } from '../../ui/dom';
+import { SURAHS, surahOf } from './quran';
+import { openJukebox } from './ui';
+import type { SettingsPane } from '../../ui/settings';
 
 // The kinds of thing you can use that this defines (see InteractKinds in world/types.ts).
-declare module "../../world/types" {
+declare module '../../world/types' {
   interface InteractKinds {
     jukebox: true;
   }
@@ -25,34 +25,26 @@ export function installJukebox(ctx: Ctx, deps: JukeboxDeps) {
   // It's the office's: on a map of its own there's none to hear.
   function playJukebox() {
     const j = store.jukebox;
-    ctx.sound.setJukebox(
-      j.on && ctx.inOffice()
-        ? { track: j.track, url: j.url, startedAt: j.startedAt, since: j.since }
-        : null,
-    );
+    ctx.sound.setJukebox(j.on && ctx.inOffice() ? { track: j.track, url: j.url, startedAt: j.startedAt, since: j.since } : null);
     ctx.office.jukebox.show(j.on, trackTitle(j));
   }
-  store.on("jukebox", playJukebox);
-  ctx.interactions.define("jukebox", {
+  store.on('jukebox', playJukebox);
+  ctx.interactions.define('jukebox', {
     reach: 4,
     hint: () => {
       const j = store.jukebox;
       const sn = surahOf(j.url);
-      const what = j.on ? (sn ? SURAHS[sn - 1] : trackTitle(j)) : "";
+      const what = j.on ? (sn ? SURAHS[sn - 1] : trackTitle(j)) : '';
       return {
         k: `${j.on}|${what}`,
-        parts: [
-          hintTitle("📖 Quran"),
-          aside(j.on ? `♪ ${clip(what, 40)}` : "off"),
-          key("E", j.on ? "Change the surah" : "Play a surah"),
-        ],
+        parts: [hintTitle('📖 Quran'), aside(j.on ? `♪ ${clip(what, 40)}` : 'off'), key('E', j.on ? 'Change the surah' : 'Play a surah')],
       };
     },
     use: onE(() => showJukebox()),
   });
 
   function showJukebox() {
-    openJukebox(ctx.net, () => deps.showSettings("sound"));
+    openJukebox(ctx.net, () => deps.showSettings('sound'));
   }
 
   return { playJukebox };
diff --git a/src/client/features/jukebox/quran.ts b/src/client/features/jukebox/quran.ts
index 893c47e5b..d43181174 100644
--- a/src/client/features/jukebox/quran.ts
+++ b/src/client/features/jukebox/quran.ts
@@ -1,131 +1,330 @@
 /** The 114 surahs, played from Quran.com's own audio (Mishari Alafasy), in place of the lounge's synthesized tunes. */
 export const SURAHS = [
-  "Al-Fatihah",
-  "Al-Baqarah",
-  "Ali \u2018Imran",
-  "An-Nisa",
-  "Al-Ma\u2019idah",
-  "Al-An\u2019am",
-  "Al-A\u2019raf",
-  "Al-Anfal",
-  "At-Tawbah",
-  "Yunus",
-  "Hud",
-  "Yusuf",
-  "Ar-Ra\u2019d",
-  "Ibrahim",
-  "Al-Hijr",
-  "An-Nahl",
-  "Al-Isra",
-  "Al-Kahf",
-  "Maryam",
-  "Ta-Ha",
-  "Al-Anbiya",
-  "Al-Hajj",
-  "Al-Mu\u2019minun",
-  "An-Nur",
-  "Al-Furqan",
-  "Ash-Shu\u2019ara",
-  "An-Naml",
-  "Al-Qasas",
-  "Al-\u2018Ankabut",
-  "Ar-Rum",
-  "Luqman",
-  "As-Sajdah",
-  "Al-Ahzab",
-  "Saba",
-  "Fatir",
-  "Ya-Sin",
-  "As-Saffat",
-  "Sad",
-  "Az-Zumar",
-  "Ghafir",
-  "Fussilat",
-  "Ash-Shuraa",
-  "Az-Zukhruf",
-  "Ad-Dukhan",
-  "Al-Jathiyah",
-  "Al-Ahqaf",
-  "Muhammad",
-  "Al-Fath",
-  "Al-Hujurat",
-  "Qaf",
-  "Adh-Dhariyat",
-  "At-Tur",
-  "An-Najm",
-  "Al-Qamar",
-  "Ar-Rahman",
-  "Al-Waqi\u2019ah",
-  "Al-Hadid",
-  "Al-Mujadila",
-  "Al-Hashr",
-  "Al-Mumtahanah",
-  "As-Saf",
-  "Al-Jumu\u2019ah",
-  "Al-Munafiqun",
-  "At-Taghabun",
-  "At-Talaq",
-  "At-Tahrim",
-  "Al-Mulk",
-  "Al-Qalam",
-  "Al-Haqqah",
-  "Al-Ma\u2019arij",
-  "Nuh",
-  "Al-Jinn",
-  "Al-Muzzammil",
-  "Al-Muddaththir",
-  "Al-Qiyamah",
-  "Al-Insan",
-  "Al-Mursalat",
-  "An-Naba",
-  "An-Nazi\u2019at",
-  "\u2018Abasa",
-  "At-Takwir",
-  "Al-Infitar",
-  "Al-Mutaffifin",
-  "Al-Inshiqaq",
-  "Al-Buruj",
-  "At-Tariq",
-  "Al-A\u2019la",
-  "Al-Ghashiyah",
-  "Al-Fajr",
-  "Al-Balad",
-  "Ash-Shams",
-  "Al-Layl",
-  "Ad-Duhaa",
-  "Ash-Sharh",
-  "At-Tin",
-  "Al-\u2018Alaq",
-  "Al-Qadr",
-  "Al-Bayyinah",
-  "Az-Zalzalah",
-  "Al-\u2018Adiyat",
-  "Al-Qari\u2019ah",
-  "At-Takathur",
-  "Al-\u2018Asr",
-  "Al-Humazah",
-  "Al-Fil",
-  "Quraysh",
-  "Al-Ma\u2019un",
-  "Al-Kawthar",
-  "Al-Kafirun",
-  "An-Nasr",
-  "Al-Masad",
-  "Al-Ikhlas",
-  "Al-Falaq",
-  "An-Nas",
+  'Al-Fatihah',
+  'Al-Baqarah',
+  'Ali \u2018Imran',
+  'An-Nisa',
+  'Al-Ma\u2019idah',
+  'Al-An\u2019am',
+  'Al-A\u2019raf',
+  'Al-Anfal',
+  'At-Tawbah',
+  'Yunus',
+  'Hud',
+  'Yusuf',
+  'Ar-Ra\u2019d',
+  'Ibrahim',
+  'Al-Hijr',
+  'An-Nahl',
+  'Al-Isra',
+  'Al-Kahf',
+  'Maryam',
+  'Ta-Ha',
+  'Al-Anbiya',
+  'Al-Hajj',
+  'Al-Mu\u2019minun',
+  'An-Nur',
+  'Al-Furqan',
+  'Ash-Shu\u2019ara',
+  'An-Naml',
+  'Al-Qasas',
+  'Al-\u2018Ankabut',
+  'Ar-Rum',
+  'Luqman',
+  'As-Sajdah',
+  'Al-Ahzab',
+  'Saba',
+  'Fatir',
+  'Ya-Sin',
+  'As-Saffat',
+  'Sad',
+  'Az-Zumar',
+  'Ghafir',
+  'Fussilat',
+  'Ash-Shuraa',
+  'Az-Zukhruf',
+  'Ad-Dukhan',
+  'Al-Jathiyah',
+  'Al-Ahqaf',
+  'Muhammad',
+  'Al-Fath',
+  'Al-Hujurat',
+  'Qaf',
+  'Adh-Dhariyat',
+  'At-Tur',
+  'An-Najm',
+  'Al-Qamar',
+  'Ar-Rahman',
+  'Al-Waqi\u2019ah',
+  'Al-Hadid',
+  'Al-Mujadila',
+  'Al-Hashr',
+  'Al-Mumtahanah',
+  'As-Saf',
+  'Al-Jumu\u2019ah',
+  'Al-Munafiqun',
+  'At-Taghabun',
+  'At-Talaq',
+  'At-Tahrim',
+  'Al-Mulk',
+  'Al-Qalam',
+  'Al-Haqqah',
+  'Al-Ma\u2019arij',
+  'Nuh',
+  'Al-Jinn',
+  'Al-Muzzammil',
+  'Al-Muddaththir',
+  'Al-Qiyamah',
+  'Al-Insan',
+  'Al-Mursalat',
+  'An-Naba',
+  'An-Nazi\u2019at',
+  '\u2018Abasa',
+  'At-Takwir',
+  'Al-Infitar',
+  'Al-Mutaffifin',
+  'Al-Inshiqaq',
+  'Al-Buruj',
+  'At-Tariq',
+  'Al-A\u2019la',
+  'Al-Ghashiyah',
+  'Al-Fajr',
+  'Al-Balad',
+  'Ash-Shams',
+  'Al-Layl',
+  'Ad-Duhaa',
+  'Ash-Sharh',
+  'At-Tin',
+  'Al-\u2018Alaq',
+  'Al-Qadr',
+  'Al-Bayyinah',
+  'Az-Zalzalah',
+  'Al-\u2018Adiyat',
+  'Al-Qari\u2019ah',
+  'At-Takathur',
+  'Al-\u2018Asr',
+  'Al-Humazah',
+  'Al-Fil',
+  'Quraysh',
+  'Al-Ma\u2019un',
+  'Al-Kawthar',
+  'Al-Kafirun',
+  'An-Nasr',
+  'Al-Masad',
+  'Al-Ikhlas',
+  'Al-Falaq',
+  'An-Nas',
 ] as const;
 
-export const QURAN_SITE = "https://quran.com";
+export const QURAN_SITE = 'https://quran.com';
 
-export const surahUrl = (n: number) =>
-  `https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${n}.mp3`;
+export const surahUrl = (n: number) => `https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${n}.mp3`;
 
 /** The surah number a stream link plays, or 0 if it isn't one of ours. */
 export function surahOf(url: string | undefined): number {
-  const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? "");
+  const m = /\/mishari_al_afasy\/murattal\/(\d+)\.mp3$/.exec(url ?? '');
   return m ? Number(m[1]) : 0;
 }
 
-/** The YouTube playlist of recitations shown in the window (plays for you only). */
-export const RECITATIONS_LIST = "PLaPr5hj0xxM4OrOh0PXxj0nJ8spgyDwVO";
+/** The recitation videos in the YouTube playlist, each its own video. */
+export const RECITATION_VIDEOS: readonly { id: string; title: string }[] = [
+  {
+    id: '9LI4nGxSHxc',
+    title: 'سورة آل عمران  بجامع أم الخير بجدة  - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'xi6dw72oTCg',
+    title: 'سورة النساء بجامع أم الخير بجدة  - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'msit8KG4RJI',
+    title: 'سورة المائدة بجامع أم الخير بجدة  - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'qo_JfaxVzCc',
+    title: 'سورة الأنعام بجامع أم الخير بجدة  - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'eSkkdb3D8Bg',
+    title: 'سورة الأعراف بجامع أم الخير بجدة - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '-VLGmdribh0',
+    title: 'سورة الأنفال بجامع أم الخير بجدة  - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'ToMXxynN5pU',
+    title: 'سورة الرعد بجامع الأمير محمد بن سعود ببلجرشي - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'T_gCH8m5RXs',
+    title: 'سورة إبراهيم بجامع الأمير محمد بن سعود ببلحرشي - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'BoTcKimRC3w',
+    title: 'سورة الحجر بجامع الأمير محمد بن سعود ببلجرشي - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'BXKYezGxp5o',
+    title: 'سورة طه بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'DQesAqKd0Nc',
+    title: 'سورة المؤمنون بجامع أجور بالبحرين - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '9HM6Q1oHb9c',
+    title: 'سورة النور بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'vRPFztyqXJs',
+    title: 'سورة الفرقان بمسجد معاوية بن أبي سفيان بالبحرين - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'p_O3DI5QDxw',
+    title: 'سورة الشعراء بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'iZSOwZvXYcc',
+    title: 'سورة النمل بمسجد حمزة بن عبد المطلب  بالبحرين - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'yL6Re8gYzPQ',
+    title: 'سورة القصص بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'Qh0ZAJTlBuA',
+    title: 'سورة العنكبوت بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'F2B_M0mKQ-0',
+    title: 'سورة الروم بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '50UctEL97Gk',
+    title: 'سورة الأحزاب بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'dhXF6ExbqEM',
+    title: 'سورة سبأ بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '5ABndDmOx2w',
+    title: 'سورة فاطر بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'WsBmnWd3Dcs',
+    title: 'سورة الصافات بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'BrAgW4v3-dM',
+    title: 'سورة فصلت بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'ncgDaPUdCt0',
+    title: 'سورة الزخرف بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'VXhHf5odZho',
+    title: 'سورة الأحقاف بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'adIhq7PYrsk',
+    title: 'سورة الطور بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'BvmNFoHQSks',
+    title: 'سورة الممتحنة بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '0eKdeOCOw4I',
+    title: 'سورة الطلاق بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'UlcGsR10mWQ',
+    title: 'سورة التحريم بمسجد المحمدية الغربية بالرياض - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'X-W0Y57p3Z0',
+    title: 'أدعية القنوت (1) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'IVn-bh0eOgs',
+    title: 'أدعية القنوت (2) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'h1Jy0b7sO2U',
+    title: 'أدعية القنوت (3) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'otoUAuzuJzE',
+    title: 'أدعية القنوت (4) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'UN-Okb0aPU0',
+    title: 'أدعية القنوت (5) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'L5ZsyyY52u4',
+    title: 'أدعية القنوت (6) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '_B6ulcpb30M',
+    title: 'أدعية القنوت (7) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '4VU3i4pWQIo',
+    title: 'أدعية القنوت (8) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'ALFn_adnnrY',
+    title: 'أدعية القنوت (9) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'bYAefO9uBeE',
+    title: 'أدعية القنوت (10) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'pRE8SYzUtfk',
+    title: 'أدعية القنوت (11) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '54MsG1-XWEY',
+    title: 'أدعية القنوت (12) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '4CZSnZf9NAM',
+    title: 'أدعية القنوت (13) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '0FqBPqr1fPY',
+    title: 'أدعية القنوت (14) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'C8-Zavu3jwE',
+    title: 'أدعية القنوت (15) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '4YfkOAIFq3Y',
+    title: 'أدعية القنوت (16) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'FtwDElLlUs0',
+    title: 'أدعية القنوت (17) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'MjApag6140g',
+    title: 'أدعية القنوت (18) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: 'j2L9hEgO5pM',
+    title: 'أدعية القنوت (19) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+  {
+    id: '8GQb9xiwmzM',
+    title: 'أدعية القنوت (20) - رمضان 1438 هـ للقارئ الشيخ أحمد ديبان',
+  },
+];
+
+/** A video's short name: the surah, without the mosque, year and reciter that every title repeats. */
+export const videoName = (title: string) => title.split(' بجامع')[0].trim() || title;
diff --git a/src/client/features/jukebox/sound.ts b/src/client/features/jukebox/sound.ts
index 7c04843b8..2cefe9148 100644
--- a/src/client/features/jukebox/sound.ts
+++ b/src/client/features/jukebox/sound.ts
@@ -1,8 +1,8 @@
-import { JUKEBOX } from "../../../shared/layout";
-import { STREAM } from "../../../shared/jukebox";
-import type { AudioCore } from "../../sound/core";
-import { biquad, rms } from "../../sound/dsp";
-import { TunePlayer } from "../../sound/music";
+import { JUKEBOX } from '../../../shared/layout';
+import { STREAM } from '../../../shared/jukebox';
+import type { AudioCore } from '../../sound/core';
+import { biquad, rms } from '../../sound/dsp';
+import { TunePlayer } from '../../sound/music';
 
 // ---- The jukebox ------------------------------------------------------------------------------
 
@@ -45,15 +45,12 @@ export class Jukebox {
   connect(ctx: AudioContext) {
     // The jukebox skips the master (it has its own volume) and keeps playing while the tab is hidden.
     this.musicIn = this.a.panner(JUKEBOX, MUSIC_REF, MUSIC_ROLLOFF);
-    this.musicTone = biquad(ctx, "lowpass", 16000, 0.5);
+    this.musicTone = biquad(ctx, 'lowpass', 16000, 0.5);
     this.musicBus = ctx.createGain();
     this.musicBus.gain.value = 0;
     this.musicMeter = ctx.createAnalyser();
     this.musicMeter.fftSize = 2048;
-    this.musicIn
-      .connect(this.musicTone)
-      .connect(this.musicBus)
-      .connect(ctx.destination);
+    this.musicIn.connect(this.musicTone).connect(this.musicBus).connect(ctx.destination);
     this.musicBus.connect(this.musicMeter);
   }
 
@@ -74,15 +71,8 @@ export class Jukebox {
     this.jukebox = play;
     // The same play, sent again after a reconnect or timed better once the clocks are compared: carry on
     // (a tune lines itself up again as it goes; an audio file jumps to the right spot).
-    if (
-      was &&
-      play &&
-      was.startedAt === play.startedAt &&
-      was.track === play.track &&
-      was.url === play.url
-    ) {
-      if (this.stream && Math.abs(was.since - play.since) > 250)
-        this.seekStream(this.stream);
+    if (was && play && was.startedAt === play.startedAt && was.track === play.track && was.url === play.url) {
+      if (this.stream && Math.abs(was.since - play.since) > 250) this.seekStream(this.stream);
       return;
     }
     this.applyJukebox(true);
@@ -98,25 +88,18 @@ export class Jukebox {
   /** 1 on each beat of the tune, falling to 0 before the next, for the jukebox's lights. */
   beat(): number {
     if (this.tune) return this.tune.beat(this.musicAt());
-    if (this.stream && !this.stream.paused)
-      return 0.35 + 0.25 * Math.sin(performance.now() / 320);
+    if (this.stream && !this.stream.paused) return 0.35 + 0.25 * Math.sin(performance.now() / 320);
     return 0;
   }
 
   /** How far into the jukebox's track it is now, in seconds. */
   private musicAt(): number {
-    return this.jukebox
-      ? Math.max(0, (performance.now() - this.jukebox.since) / 1000)
-      : 0;
+    return this.jukebox ? Math.max(0, (performance.now() - this.jukebox.since) / 1000) : 0;
   }
 
   applyMusicVolume() {
     if (!this.a.ctx) return;
-    this.musicBus.gain.setTargetAtTime(
-      this.musicGain(),
-      this.a.ctx.currentTime,
-      0.04,
-    );
+    this.musicBus.gain.setTargetAtTime(this.musicGain(), this.a.ctx.currentTime, 0.04);
     this.hearStream();
   }
 
@@ -132,7 +115,7 @@ export class Jukebox {
     this.tune = null;
     if (this.stream) {
       this.stream.pause();
-      this.stream.removeAttribute("src");
+      this.stream.removeAttribute('src');
       this.stream.load();
       this.stream = null;
     }
@@ -141,7 +124,7 @@ export class Jukebox {
     if (!j) return;
     if (j.track === STREAM && j.url) return this.startStream(j.url);
     const tune = (this.tune = new TunePlayer(ctx, this.musicIn, j.track));
-    this.a.count("tune");
+    this.a.count('tune');
     // On a timer rather than every frame, so it carries on in a background tab.
     const tick = () => tune.tick(this.musicAt());
     tick();
@@ -150,24 +133,22 @@ export class Jukebox {
 
   private startStream(url: string) {
     const a = new Audio();
-    a.preload = "auto";
+    a.preload = 'auto';
     a.loop = true;
     a.src = url;
-    a.addEventListener("loadedmetadata", () => this.seekStream(a));
-    a.addEventListener("error", () => {
-      if (this.stream === a)
-        this.onError("📻 The jukebox can't play that stream in your browser");
+    a.addEventListener('loadedmetadata', () => this.seekStream(a));
+    a.addEventListener('error', () => {
+      if (this.stream === a) this.onError("📻 The jukebox can't play that stream in your browser");
     });
     this.stream = a;
     this.hearStream();
     void a.play().catch(() => {});
-    this.a.count("stream");
+    this.a.count('stream');
   }
 
   /** An audio file (not live radio) picks up where everyone else is. */
   private seekStream(a: HTMLAudioElement) {
-    if (Number.isFinite(a.duration) && a.duration > 0)
-      a.currentTime = this.musicAt() % a.duration;
+    if (Number.isFinite(a.duration) && a.duration > 0) a.currentTime = this.musicAt() % a.duration;
   }
 
   /** Muffles the jukebox the further you are from it. */
@@ -185,15 +166,12 @@ export class Jukebox {
   private hearStream() {
     if (!this.stream) return;
     const d = Math.max(MUSIC_REF, this.jukeboxDistance());
-    this.stream.volume = Math.min(
-      1,
-      this.musicGain() *
-        (MUSIC_REF / (MUSIC_REF + MUSIC_ROLLOFF * (d - MUSIC_REF))),
-    );
+    this.stream.volume = Math.min(1, this.musicGain() * (MUSIC_REF / (MUSIC_REF + MUSIC_ROLLOFF * (d - MUSIC_REF))));
   }
 
   private jukeboxDistance(): number {
     const l = this.a.listener;
     return Math.hypot(l.x - JUKEBOX.x, l.y - JUKEBOX.y, l.z - JUKEBOX.z);
   }
+
 }
diff --git a/src/client/features/jukebox/ui.css b/src/client/features/jukebox/ui.css
index faf806c3c..a1aba8977 100644
--- a/src/client/features/jukebox/ui.css
+++ b/src/client/features/jukebox/ui.css
@@ -13,3 +13,7 @@
 .jb-video { display: block; }
 .jb-screen { aspect-ratio: 16 / 9; background: #000; }
 .jb-screen iframe { width: 100%; height: 100%; border: 0; display: block; }
+
+.jb-vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
+.jb-vhead .btn { padding: 4px 10px; font-size: 13px; }
+.jb-vlist { max-height: 220px; overflow-y: auto; margin: 0; padding: 4px 8px 8px; }
diff --git a/src/client/features/jukebox/ui.ts b/src/client/features/jukebox/ui.ts
index 1d686710b..d090036a2 100644
--- a/src/client/features/jukebox/ui.ts
+++ b/src/client/features/jukebox/ui.ts
@@ -1,120 +1,85 @@
-import "./ui.css";
-import { STREAM } from "../../../shared/jukebox";
-import { recitationPlayer } from "./video";
-import { QURAN_SITE, SURAHS, surahOf, surahUrl } from "./quran";
-import type { Net } from "../../net";
-import { store } from "../../state";
-import { h, openModal, toast } from "../../ui/dom";
+import './ui.css';
+import { STREAM } from '../../../shared/jukebox';
+import { recitationPlayer } from './video';
+import { QURAN_SITE, RECITATION_VIDEOS, videoName, SURAHS, surahOf, surahUrl } from './quran';
+import type { Net } from '../../net';
+import { store } from '../../state';
+import { h, openModal, toast } from '../../ui/dom';
 
 /** The lounge's Quran player: Quran.com's recitation of any surah, for everyone on the floor. */
 export function openJukebox(net: Net, openVolume: () => void) {
-  const close = h("button.btn.close", { "aria-label": "Close" }, "✕");
-  const now = h("div.jb-now");
-  const list = h("ul.svc-list");
-  const find = h("input", {
-    type: "text",
-    placeholder: "Find a surah…",
-    "aria-label": "Find a surah",
-    spellcheck: "false",
-    autocomplete: "off",
+  const close = h('button.btn.close', { 'aria-label': 'Close' }, '✕');
+  const now = h('div.jb-now');
+  const list = h('ul.svc-list');
+  const find = h('input', {
+    type: 'text',
+    placeholder: 'Find a surah…',
+    'aria-label': 'Find a surah',
+    spellcheck: 'false',
+    autocomplete: 'off',
   }) as HTMLInputElement;
-  const site = h(
-    "a.btn",
-    { href: QURAN_SITE, target: "_blank", rel: "noopener" },
-    "📖 Open Quran.com",
-  );
-  const watch = h("button.btn", { type: "button" }, "▶️ Watch recitations");
-  const video = h("div.jb-video");
-  const volume = h("button.btn", { type: "button" }, "🔈 Your volume");
+  const site = h('a.btn', { href: QURAN_SITE, target: '_blank', rel: 'noopener' }, '📖 Open Quran.com');
+  const watch = h('button.btn', { type: 'button' }, '▶️ Watch recitations');
+  const video = h('div.jb-video');
+  const volume = h('button.btn', { type: 'button' }, '🔈 Your volume');
   const el = h(
-    "div.modal.jukebox",
-    { role: "dialog", "aria-label": "Quran" },
-    h("header", {}, h("h2", {}, "📖 Quran"), close),
+    'div.modal.jukebox',
+    { role: 'dialog', 'aria-label': 'Quran' },
+    h('header', {}, h('h2', {}, '📖 Quran'), close),
     h(
-      "div.body",
+      'div.body',
       {},
       now,
       video,
-      h("label", { style: "margin-top:16px" }, "Choose a surah"),
+      h('label', { style: 'margin-top:16px' }, 'Choose a surah'),
       find,
       list,
-      h("p.setting-note", {}, "Recitation by Mishari Alafasy, from Quran.com."),
-    ),
-    h(
-      "footer",
-      {},
-      h(
-        "span.grow",
-        {},
-        "Everyone on this floor hears the same recitation, louder the closer they are to the lounge.",
-      ),
-      watch,
-      site,
-      volume,
+      h('p.setting-note', {}, 'Recitation by Mishari Alafasy, from Quran.com.'),
     ),
+    h('footer', {}, h('span.grow', {}, 'Everyone on this floor hears the same recitation, louder the closer they are to the lounge.'), watch, site, volume),
   );
 
-  const button = (
-    label: string,
-    title: string,
-    send: () => void,
-    primary = false,
-  ) =>
-    h(
-      primary ? "button.btn.primary" : "button.btn",
-      { type: "button", title, onclick: send },
-      label,
-    );
+  const button = (label: string, title: string, send: () => void, primary = false) =>
+    h(primary ? 'button.btn.primary' : 'button.btn', { type: 'button', title, onclick: send }, label);
 
   const render = () => {
     const j = store.jukebox;
     const cur = j.track === STREAM ? surahOf(j.url) : 0;
-    const name = cur ? `${cur}. ${SURAHS[cur - 1]}` : "Nothing playing";
+    const name = cur ? `${cur}. ${SURAHS[cur - 1]}` : 'Nothing playing';
     now.replaceChildren(
-      h("span.jb-disc", { class: j.on && cur ? "spin" : "" }, "📖"),
+      h('span.jb-disc', { class: j.on && cur ? 'spin' : '' }, '📖'),
       h(
-        "div.svc-main",
+        'div.svc-main',
         {},
-        h("div.svc-title", {}, j.on ? name : "The Quran player is off"),
-        h(
-          "div.svc-meta",
-          {},
-          j.on && j.by ? `put on by ${j.by}` : "Pick a surah to play it",
-        ),
+        h('div.svc-title', {}, j.on ? name : 'The Quran player is off'),
+        h('div.svc-meta', {}, j.on && j.by ? `put on by ${j.by}` : 'Pick a surah to play it'),
       ),
-      j.on
-        ? button("⏹️ Stop", "Stop the recitation", () =>
-            net.send({ t: "jukebox.stop" }),
-          )
-        : "",
+      j.on ? button('⏹️ Stop', 'Stop the recitation', () => net.send({ t: 'jukebox.stop' })) : '',
     );
     const q = find.value.trim().toLowerCase();
     list.replaceChildren(
       ...SURAHS.map((title, i) => ({ title, n: i + 1 }))
-        .filter(
-          ({ title, n }) =>
-            !q || title.toLowerCase().includes(q) || String(n) === q,
-        )
+        .filter(({ title, n }) => !q || title.toLowerCase().includes(q) || String(n) === q)
         .map(({ title, n }) => {
           const playing = j.on && cur === n;
           const li = h(
-            "li",
+            'li',
             {
-              class: playing ? "on" : "",
+              class: playing ? 'on' : '',
               tabindex: 0,
-              role: "button",
-              "aria-pressed": String(playing),
-              title: playing ? "Playing now" : `Play ${title}`,
+              role: 'button',
+              'aria-pressed': String(playing),
+              title: playing ? 'Playing now' : `Play ${title}`,
             },
-            h("span.jb-icon", {}, playing ? "🔊" : String(n)),
-            h("div.svc-main", {}, h("div.svc-title", {}, title)),
+            h('span.jb-icon', {}, playing ? '🔊' : String(n)),
+            h('div.svc-main', {}, h('div.svc-title', {}, title)),
           );
           const pick = () => {
-            if (!playing) net.send({ t: "jukebox.play", url: surahUrl(n) });
+            if (!playing) net.send({ t: 'jukebox.play', url: surahUrl(n) });
           };
-          li.addEventListener("click", pick);
-          li.addEventListener("keydown", (e) => {
-            if (e.key === "Enter" || e.key === " ") {
+          li.addEventListener('click', pick);
+          li.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
               e.preventDefault();
               pick();
             }
@@ -123,30 +88,61 @@ export function openJukebox(net: Net, openVolume: () => void) {
         }),
     );
   };
-  find.addEventListener("input", render);
+  find.addEventListener('input', render);
+  // The recitation videos: a list, one video at a time, each with its own A-B repeat.
   let vp: ReturnType<typeof recitationPlayer> | null = null;
-  const stopVideo = () => {
+  const closeVideos = () => {
     vp?.destroy();
     vp = null;
     video.replaceChildren();
   };
-  watch.addEventListener("click", () => {
-    if (vp) return stopVideo();
-    net.send({ t: "jukebox.stop" });
-    vp = recitationPlayer();
-    video.replaceChildren(vp.el);
+  const playVideo = (id: string, title: string) => {
+    vp?.destroy();
+    vp = recitationPlayer(id);
+    const back = h('button.btn', { type: 'button', onclick: showVideos }, '⬅️ All videos');
+    video.replaceChildren(h('div.jb-vhead', {}, back, h('b', { dir: 'rtl' }, videoName(title))), vp.el);
+  };
+  const showVideos = () => {
+    vp?.destroy();
+    vp = null;
+    const items = RECITATION_VIDEOS.map((r, i) => {
+      const li = h(
+        'li',
+        { tabindex: 0, role: 'button', title: r.title },
+        h('span.jb-icon', {}, String(i + 1)),
+        h('div.svc-main', {}, h('div.svc-title', { dir: 'rtl' }, videoName(r.title))),
+      );
+      const pick = () => playVideo(r.id, r.title);
+      li.addEventListener('click', pick);
+      li.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          pick();
+        }
+      });
+      return li;
+    });
+    video.replaceChildren(
+      h('div.jb-vhead', {}, h('b', {}, '▶️ Recitation videos'), h('button.btn', { type: 'button', onclick: closeVideos }, '✕ Close')),
+      h('ul.svc-list.jb-vlist', {}, ...items),
+    );
+  };
+  watch.addEventListener('click', () => {
+    if (video.firstChild) return closeVideos();
+    net.send({ t: 'jukebox.stop' });
+    showVideos();
   });
 
-  const off = store.on("jukebox", render);
+  const off = store.on('jukebox', render);
   const modal = openModal(el, {
-    doing: "📖 listening to the Quran",
+    doing: '📖 listening to the Quran',
     onClose: () => {
-      stopVideo();
+      closeVideos();
       off();
     },
   });
-  close.addEventListener("click", () => modal.close());
-  volume.addEventListener("click", () => {
+  close.addEventListener('click', () => modal.close());
+  volume.addEventListener('click', () => {
     modal.close();
     openVolume();
   });
diff --git a/src/client/features/jukebox/video.ts b/src/client/features/jukebox/video.ts
index 156def2d2..cb2d13cf9 100644
--- a/src/client/features/jukebox/video.ts
+++ b/src/client/features/jukebox/video.ts
@@ -1,5 +1,4 @@
-import { h } from "../../ui/dom";
-import { RECITATIONS_LIST } from "./quran";
+import { h } from '../../ui/dom';
 
 /** The slice of the YouTube IFrame API used here. */
 interface YTPlayer {
@@ -29,45 +28,22 @@ function loadApi(): Promise<YTApi> {
   if (w.YT?.Player) return Promise.resolve(w.YT);
   return (apiReady ??= new Promise((resolve) => {
     w.onYouTubeIframeAPIReady = () => resolve(w.YT!);
-    document.head.append(
-      h("script", { src: "https://www.youtube.com/iframe_api" }),
-    );
+    document.head.append(h('script', { src: 'https://www.youtube.com/iframe_api' }));
   }));
 }
 
-const clock = (s: number) =>
-  `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+const clock = (s: number) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
 
 /** A recitation player with an A–B repeat: set a start and an end, and it plays that part nonstop. */
-export function recitationPlayer() {
-  const root = h("div.jb-video");
-  const screen = h("div.jb-screen");
-  const a = h(
-    "button.btn",
-    { type: "button", title: "Mark where the repeat starts" },
-    "🅰️ Set A",
-  );
-  const b = h(
-    "button.btn",
-    { type: "button", title: "Mark where the repeat ends" },
-    "🅱️ Set B",
-  );
-  const loop = h(
-    "button.btn",
-    { type: "button", title: "Repeat from A to B nonstop" },
-    "🔁 Loop off",
-  );
-  const clear = h(
-    "button.btn",
-    { type: "button", title: "Forget A and B" },
-    "✖ Clear",
-  );
-  const info = h(
-    "span.setting-note",
-    {},
-    "Set A and B while it plays, then turn the loop on.",
-  );
-  root.append(screen, h("div.jb-ab", {}, a, b, loop, clear, info));
+export function recitationPlayer(videoId: string) {
+  const root = h('div.jb-video');
+  const screen = h('div.jb-screen');
+  const a = h('button.btn', { type: 'button', title: 'Mark where the repeat starts' }, '🅰️ Set A');
+  const b = h('button.btn', { type: 'button', title: 'Mark where the repeat ends' }, '🅱️ Set B');
+  const loop = h('button.btn', { type: 'button', title: 'Repeat from A to B nonstop' }, '🔁 Loop off');
+  const clear = h('button.btn', { type: 'button', title: 'Forget A and B' }, '✖ Clear');
+  const info = h('span.setting-note', {}, 'Set A and B while it plays, then turn the loop on.');
+  root.append(screen, h('div.jb-ab', {}, a, b, loop, clear, info));
 
   let player: YTPlayer | null = null;
   let pa: number | null = null;
@@ -76,38 +52,38 @@ export function recitationPlayer() {
   let timer = 0;
 
   const show = () => {
-    a.textContent = pa === null ? "🅰️ Set A" : `🅰️ A ${clock(pa)}`;
-    b.textContent = pb === null ? "🅱️ Set B" : `🅱️ B ${clock(pb)}`;
-    loop.textContent = looping ? "🔁 Loop on" : "🔁 Loop off";
-    loop.classList.toggle("primary", looping);
+    a.textContent = pa === null ? '🅰️ Set A' : `🅰️ A ${clock(pa)}`;
+    b.textContent = pb === null ? '🅱️ Set B' : `🅱️ B ${clock(pb)}`;
+    loop.textContent = looping ? '🔁 Loop on' : '🔁 Loop off';
+    loop.classList.toggle('primary', looping);
   };
-  a.addEventListener("click", () => {
+  a.addEventListener('click', () => {
     if (!player) return;
     pa = player.getCurrentTime();
     if (pb !== null && pb <= pa) pb = null;
     show();
   });
-  b.addEventListener("click", () => {
+  b.addEventListener('click', () => {
     if (!player) return;
     const t = player.getCurrentTime();
     if (pa === null || t <= pa) {
-      info.textContent = "Set A first, then B a little later.";
+      info.textContent = 'Set A first, then B a little later.';
       return;
     }
     pb = t;
-    info.textContent = "Turn the loop on to repeat it.";
+    info.textContent = 'Turn the loop on to repeat it.';
     show();
   });
-  loop.addEventListener("click", () => {
+  loop.addEventListener('click', () => {
     if (pa === null || pb === null) {
-      info.textContent = "Set both A and B first.";
+      info.textContent = 'Set both A and B first.';
       return;
     }
     looping = !looping;
     if (looping) player?.seekTo(pa, true);
     show();
   });
-  clear.addEventListener("click", () => {
+  clear.addEventListener('click', () => {
     pa = pb = null;
     looping = false;
     show();
@@ -115,14 +91,13 @@ export function recitationPlayer() {
 
   void loadApi().then((YT) => {
     if (!root.isConnected && !root.parentElement) return;
-    const target = h("div");
+    const target = h('div');
     screen.append(target);
     player = new YT.Player(target, {
-      width: "100%",
-      height: "100%",
+      width: '100%',
+      height: '100%',
       playerVars: {
-        listType: "playlist",
-        list: RECITATIONS_LIST,
+        listType: 'playlist',
         rel: 0,
         playsinline: 1,
         enablejsapi: 1,
@@ -130,14 +105,7 @@ export function recitationPlayer() {
       events: { onReady: () => {} },
     });
     timer = window.setInterval(() => {
-      if (
-        looping &&
-        player &&
-        pa !== null &&
-        pb !== null &&
-        player.getCurrentTime() >= pb
-      )
-        player.seekTo(pa, true);
+      if (looping && player && pa !== null && pb !== null && player.getCurrentTime() >= pb) player.seekTo(pa, true);
     }, 200);
   });
   show();
diff --git a/src/client/features/jukebox/world.ts b/src/client/features/jukebox/world.ts
index a3c6d43a2..3ca6af04f 100644
--- a/src/client/features/jukebox/world.ts
+++ b/src/client/features/jukebox/world.ts
@@ -1,14 +1,8 @@
-import * as THREE from "three";
-import { JUKEBOX } from "../../../shared/layout";
-import {
-  mesh,
-  roundedBox,
-  textSprite,
-  toon,
-  toonUnique,
-} from "../../world/toon";
-import type { Collider, Interactable } from "../../world/types";
-import type { Fixture } from "../../world/office/fixture";
+import * as THREE from 'three';
+import { JUKEBOX } from '../../../shared/layout';
+import { mesh, roundedBox, textSprite, toon, toonUnique } from '../../world/toon';
+import type { Collider, Interactable } from '../../world/types';
+import type { Fixture } from '../../world/office/fixture';
 
 // The lounge jukebox: a cherry-red cabinet with a rounded top, a neon tube round its face that
 // glows to the beat while it plays, a little display saying what's on, and notes floating up.
@@ -23,7 +17,7 @@ export interface JukeboxView {
   update(t: number, dt: number, beat: number): void;
 }
 
-const NOTES = ["♪", "♫", "♪", "♬", "♫"];
+const NOTES = ['♪', '♫', '♪', '♬', '♫'];
 
 export function buildJukebox(): JukeboxView {
   const { width: W, depth: D, height: H } = JUKEBOX;
@@ -37,109 +31,39 @@ export function buildJukebox(): JukeboxView {
   shape.lineTo(r, H - r);
   shape.absarc(0, H - r, r, 0, Math.PI, false);
   shape.lineTo(-r, 0);
-  const body = new THREE.ExtrudeGeometry(shape, {
-    depth: D,
-    bevelEnabled: true,
-    bevelThickness: 0.03,
-    bevelSize: 0.03,
-    bevelSegments: 2,
-    curveSegments: 24,
-  });
+  const body = new THREE.ExtrudeGeometry(shape, { depth: D, bevelEnabled: true, bevelThickness: 0.03, bevelSize: 0.03, bevelSegments: 2, curveSegments: 24 });
   body.translate(0, 0, -D / 2);
-  group.add(mesh(body, toon("#d64545")));
-  group.add(
-    mesh(
-      new THREE.BoxGeometry(W + 0.12, 0.1, D + 0.12),
-      toon("#2b2d42"),
-      0,
-      0.05,
-      0,
-    ),
-  );
+  group.add(mesh(body, toon('#d64545')));
+  group.add(mesh(new THREE.BoxGeometry(W + 0.12, 0.1, D + 0.12), toon('#2b2d42'), 0, 0.05, 0));
 
   const front = D / 2 + 0.035;
   // The neon tube: up one side, over the arch and down the other.
-  const neon = toonUnique("#ffd166");
-  neon.emissive = new THREE.Color("#ffd166");
+  const neon = toonUnique('#ffd166');
+  neon.emissive = new THREE.Color('#ffd166');
   const tubeR = r - 0.1;
   const legLen = H - r - 0.3;
-  group.add(
-    mesh(
-      new THREE.TorusGeometry(tubeR, 0.045, 8, 36, Math.PI),
-      neon,
-      0,
-      H - r,
-      front,
-      false,
-    ),
-  );
-  for (const sx of [-1, 1])
-    group.add(
-      mesh(
-        new THREE.CylinderGeometry(0.045, 0.045, legLen, 8),
-        neon,
-        sx * tubeR,
-        0.3 + legLen / 2,
-        front,
-        false,
-      ),
-    );
+  group.add(mesh(new THREE.TorusGeometry(tubeR, 0.045, 8, 36, Math.PI), neon, 0, H - r, front, false));
+  for (const sx of [-1, 1]) group.add(mesh(new THREE.CylinderGeometry(0.045, 0.045, legLen, 8), neon, sx * tubeR, 0.3 + legLen / 2, front, false));
 
   // The display in the arch: what's playing.
-  const canvas = document.createElement("canvas");
+  const canvas = document.createElement('canvas');
   canvas.width = 512;
   canvas.height = 256;
   const tex = new THREE.CanvasTexture(canvas);
   tex.colorSpace = THREE.SRGBColorSpace;
   tex.anisotropy = 4;
-  const screen = new THREE.Mesh(
-    new THREE.PlaneGeometry(0.82, 0.41),
-    new THREE.MeshBasicMaterial({ map: tex, toneMapped: false }),
-  );
+  const screen = new THREE.Mesh(new THREE.PlaneGeometry(0.82, 0.41), new THREE.MeshBasicMaterial({ map: tex, toneMapped: false }));
   screen.position.set(0, H - r + 0.02, front + 0.005);
   group.add(screen);
 
   // Selector buttons, and the speaker grille below them.
-  ["#ef476f", "#ffd166", "#06d6a0", "#4cc9f0", "#9d4edd"].forEach((c, i) =>
-    group.add(
-      mesh(
-        roundedBox(0.1, 0.05, 0.05, 0.02),
-        toon(c),
-        (i - 2) * 0.14,
-        0.98,
-        front,
-        false,
-      ),
-    ),
-  );
-  group.add(
-    mesh(
-      new THREE.BoxGeometry(0.82, 0.52, 0.03),
-      toon("#2b2d42"),
-      0,
-      0.58,
-      front - 0.01,
-      false,
-    ),
-  );
-  for (let i = 0; i < 5; i++)
-    group.add(
-      mesh(
-        new THREE.BoxGeometry(0.78, 0.035, 0.03),
-        toon("#dfe6ee"),
-        0,
-        0.38 + i * 0.1,
-        front + 0.01,
-        false,
-      ),
-    );
+  ['#ef476f', '#ffd166', '#06d6a0', '#4cc9f0', '#9d4edd'].forEach((c, i) => group.add(mesh(roundedBox(0.1, 0.05, 0.05, 0.02), toon(c), (i - 2) * 0.14, 0.98, front, false)));
+  group.add(mesh(new THREE.BoxGeometry(0.82, 0.52, 0.03), toon('#2b2d42'), 0, 0.58, front - 0.01, false));
+  for (let i = 0; i < 5; i++) group.add(mesh(new THREE.BoxGeometry(0.78, 0.035, 0.03), toon('#dfe6ee'), 0, 0.38 + i * 0.1, front + 0.01, false));
 
   // Notes drift up out of the top while it plays.
   const notes = NOTES.map((n, i) => {
-    const s = textSprite(n, {
-      color: ["#ef476f", "#4f86f7", "#06d6a0", "#9d4edd", "#ff8a5b"][i],
-      size: 96,
-    });
+    const s = textSprite(n, { color: ['#ef476f', '#4f86f7', '#06d6a0', '#9d4edd', '#ff8a5b'][i], size: 96 });
     s.scale.multiplyScalar(0.55);
     s.visible = false;
     group.add(s);
@@ -149,38 +73,27 @@ export function buildJukebox(): JukeboxView {
   // Built facing +z; it stands against the east wall facing into the room (-x).
   group.position.set(JUKEBOX.x, 0, JUKEBOX.z);
   group.rotation.y = -Math.PI / 2;
-  const collider: Collider = {
-    minX: JUKEBOX.x - D / 2 - 0.05,
-    maxX: JUKEBOX.x + D / 2,
-    minZ: JUKEBOX.z - r - 0.05,
-    maxZ: JUKEBOX.z + r + 0.05,
-    top: H,
-  };
-  const interactable: Interactable = {
-    kind: "jukebox",
-    x: JUKEBOX.x - 1.3,
-    z: JUKEBOX.z,
-    radius: 1.6,
-  };
+  const collider: Collider = { minX: JUKEBOX.x - D / 2 - 0.05, maxX: JUKEBOX.x + D / 2, minZ: JUKEBOX.z - r - 0.05, maxZ: JUKEBOX.z + r + 0.05, top: H };
+  const interactable: Interactable = { kind: 'jukebox', x: JUKEBOX.x - 1.3, z: JUKEBOX.z, radius: 1.6 };
   group.userData.interact = interactable;
 
   let on = false;
-  let shown = "";
+  let shown = '';
   const paint = (title: string) => {
-    const g = canvas.getContext("2d")!;
+    const g = canvas.getContext('2d')!;
     const grad = g.createLinearGradient(0, 0, 0, 256);
-    grad.addColorStop(0, on ? "#3a0ca3" : "#2b2d42");
-    grad.addColorStop(1, on ? "#1b1d2e" : "#1b1d2e");
+    grad.addColorStop(0, on ? '#3a0ca3' : '#2b2d42');
+    grad.addColorStop(1, on ? '#1b1d2e' : '#1b1d2e');
     g.fillStyle = grad;
     g.fillRect(0, 0, 512, 256);
-    g.textAlign = "center";
-    g.textBaseline = "middle";
-    g.fillStyle = on ? "#ffd166" : "#8d99ae";
-    g.font = "900 44px Nunito, ui-rounded, system-ui, sans-serif";
-    g.fillText(on ? "♪ NOW PLAYING ♪" : "JUKEBOX", 256, 70);
-    g.fillStyle = on ? "#ffffff" : "#8d99ae";
+    g.textAlign = 'center';
+    g.textBaseline = 'middle';
+    g.fillStyle = on ? '#ffd166' : '#8d99ae';
+    g.font = '900 44px Nunito, ui-rounded, system-ui, sans-serif';
+    g.fillText(on ? '♪ NOW PLAYING ♪' : 'JUKEBOX', 256, 70);
+    g.fillStyle = on ? '#ffffff' : '#8d99ae';
     let size = 58;
-    const text = on ? title : "press E to play";
+    const text = on ? title : 'press E to play';
     do g.font = `800 ${size--}px Nunito, ui-rounded, system-ui, sans-serif`;
     while (g.measureText(text).width > 470 && size > 26);
     g.fillText(text, 256, 160);
@@ -194,13 +107,13 @@ export function buildJukebox(): JukeboxView {
     on = playing;
     paint(title);
     // Lit, the glow is the color; dark, it's dull glass.
-    neon.color.set(on ? "#1b1d2e" : "#b8b2a7");
+    neon.color.set(on ? '#1b1d2e' : '#b8b2a7');
     if (!on) {
-      neon.emissive.set("#000000");
+      neon.emissive.set('#000000');
       for (const n of notes) n.visible = false;
     }
   };
-  show(false, "");
+  show(false, '');
 
   const update = (t: number, _dt: number, beat: number) => {
     if (!on) return;
@@ -210,11 +123,7 @@ export function buildJukebox(): JukeboxView {
     notes.forEach((n, i) => {
       const k = (t * 0.35 + i / notes.length) % 1;
       n.visible = true;
-      n.position.set(
-        Math.sin(t * 1.3 + i * 2.1) * 0.35,
-        H + 0.1 + k * 1.3,
-        0.1,
-      );
+      n.position.set(Math.sin(t * 1.3 + i * 2.1) * 0.35, H + 0.1 + k * 1.3, 0.1);
       n.material.opacity = Math.min(1, k * 5) * (1 - k);
     });
   };
@@ -222,7 +131,7 @@ export function buildJukebox(): JukeboxView {
   return { group, collider, interactable, show, update };
 }
 
-declare module "../../world/types" {
+declare module '../../world/types' {
   interface OfficeHandles {
     /** The jukebox in the lounge (see features/jukebox). */
     jukebox: JukeboxView;
@@ -230,19 +139,8 @@ declare module "../../world/types" {
 }
 
 /** The jukebox, in the lounge's corner against the east wall. */
-export const jukebox: Fixture<"jukebox"> = (site) => {
+export const jukebox: Fixture<'jukebox'> = (site) => {
   const built = buildJukebox();
-  site.wall(
-    "east",
-    JUKEBOX.z,
-    JUKEBOX.height / 2,
-    JUKEBOX.width + 0.1,
-    JUKEBOX.height,
-  );
-  return {
-    group: built.group,
-    colliders: [built.collider],
-    interactables: [built.interactable],
-    handle: { jukebox: built },
-  };
+  site.wall('east', JUKEBOX.z, JUKEBOX.height / 2, JUKEBOX.width + 0.1, JUKEBOX.height);
+  return { group: built.group, colliders: [built.collider], interactables: [built.interactable], handle: { jukebox: built } };
 };

From bc999a9d456f4e6318960b1d8b453d7731aa74d2 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:23:23 +0400
Subject: [PATCH 20/35] Send the page's origin so YouTube embeds play

---
 src/client/index.html        |   1 +
 src/client/world/outside.ts  |  41 ++--------
 src/client/world/skyworld.ts | 147 +++++++++++++++++++++++++++++++++++
 3 files changed, 156 insertions(+), 33 deletions(-)
 create mode 100644 src/client/world/skyworld.ts

diff --git a/src/client/index.html b/src/client/index.html
index a4b8fb849..fa6f97e73 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="referrer" content="strict-origin-when-cross-origin" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Agent Office</title>
     <link rel="icon" href="/favicon.svg" />
diff --git a/src/client/world/outside.ts b/src/client/world/outside.ts
index 951399cf0..6fb700813 100644
--- a/src/client/world/outside.ts
+++ b/src/client/world/outside.ts
@@ -5,6 +5,7 @@ import { STREET_END, shoreX } from '../../shared/scenic';
 import type { Collider } from './types';
 import type { Fixture, StreetSite } from './office/fixture';
 import { canvasTexture } from './texture';
+import { buildSkyWorld, type SkyWorld } from './skyworld';
 import { mergeByMaterial, mesh, textPlane, toon, toonUnique } from './toon';
 
 const G = STREET_Y;
@@ -308,7 +309,7 @@ export function neighbourBoxes(): { minX: number; maxX: number; minZ: number; ma
  * Everything outside, down on the street: grass, the lot in front of the garage, a road with
  * sidewalks and street lamps, trees and neighbours' buildings, and in `sky` some clouds.
  */
-export function buildStreet(group: THREE.Group, colliders: Collider[], night: NightParts, sky: THREE.Group) {
+export function buildStreet(group: THREE.Group, colliders: Collider[], night: NightParts, sky: THREE.Group): SkyWorld {
   const lawn = new THREE.Mesh(new THREE.PlaneGeometry(REACH - LAWN_WEST, REACH * 2), toon('#a7d98b'));
   lawn.rotation.x = -Math.PI / 2;
   lawn.position.set((LAWN_WEST + REACH) / 2, G - 0.03, 0);
@@ -384,41 +385,15 @@ export function buildStreet(group: THREE.Group, colliders: Collider[], night: Ni
   // Solid: you (and a car) stop at their walls instead of walking in.
   for (const n of neighbourBoxes()) colliders.push({ minX: n.minX, maxX: n.maxX, minZ: n.minZ, maxZ: n.maxZ, bottom: G, top: G + n.top });
 
-  // Puffy clouds, too far off for the fog to hide.
-  const cloud = night.clouds;
-  cloud.fog = false;
-  const puffs = new THREE.Group();
-  for (const [x, y, z, s] of [
-    [-70, 34, -60, 1.3],
-    [-10, 40, -90, 1.6],
-    [60, 36, -70, 1.2],
-    [90, 30, 20, 1.4],
-    [-95, 32, 30, 1.1],
-    [30, 38, 95, 1.5],
-    [-45, 36, 90, 1.2],
-  ]) {
-    const c = new THREE.Group();
-    for (const [dx, dy, r] of [
-      [0, 0, 5],
-      [5.5, -1, 3.8],
-      [-5.5, -1.2, 3.6],
-      [2.5, 2.4, 3.4],
-    ]) {
-      const puff = mesh(new THREE.SphereGeometry(r, 14, 10), cloud, dx, dy, 0, false);
-      puff.scale.y = 0.75;
-      c.add(puff);
-    }
-    c.position.set(x, y, z);
-    c.scale.setScalar(s);
-    c.lookAt(0, y, 0);
-    puffs.add(c);
-  }
-  sky.add(mergeByMaterial(puffs));
+  // The voxel sky world: terraced clouds and floating islands, too far off for the fog to hide.
+  const world = buildSkyWorld(night.clouds, (c) => bulb(night, c, 0.9));
+  sky.add(world.group);
+  return world;
 }
 
 /** The street out front, the city along it, and the clouds over it all. */
 export const street: Fixture<never, StreetSite> = (site) => {
   // The clouds stay up in the sky, however far down the street is.
-  buildStreet(site.ground, site.groundColliders, site.get('night'), site.group);
-  return {};
+  const world = buildStreet(site.ground, site.groundColliders, site.get('night'), site.group);
+  return { update: (t) => world.update(t) };
 };
diff --git a/src/client/world/skyworld.ts b/src/client/world/skyworld.ts
new file mode 100644
index 000000000..e245822c1
--- /dev/null
+++ b/src/client/world/skyworld.ts
@@ -0,0 +1,147 @@
+import * as THREE from 'three';
+import { mulberry32 } from '../../shared/rng';
+import { Vox } from './vox';
+
+// The world round the office, in blocks like the rest: terraced voxel clouds, and floating islands
+// with autumn trees, a waterfall, lit lanterns and a rocky underside that trails off into points.
+
+const AUTUMN = ['#d9782b', '#c9482f', '#e8a23b', '#e58aa3', '#7aa93f', '#5f8f35', '#b9552c'];
+
+/** A terraced cloud of blocks: wide flat layers stacked into a soft hill, lavender underneath. */
+function cloudGeometry(rand: () => number): THREE.BufferGeometry {
+  const s = 2.2;
+  const v = new Vox(s, 0.03);
+  const w = 8 + rand() * 12;
+  const d = 6 + rand() * 8;
+  const lumps = 2 + Math.floor(rand() * 3);
+  for (let n = 0; n < lumps; n++) {
+    const cx = (rand() - 0.5) * w * 1.1;
+    const cz = (rand() - 0.5) * d * 1.1;
+    const rx = w * (0.45 + rand() * 0.35);
+    const rz = d * (0.5 + rand() * 0.35);
+    for (let layer = 0; layer < 4; layer++) {
+      const k = 1 - layer * 0.24;
+      const shade = ['#cdbfe6', '#e3dcf3', '#f1ecfa', '#ffffff'][layer];
+      v.ell(cx, layer * s, cz, rx * k, s * 0.55, rz * k, shade);
+    }
+  }
+  return v.build();
+}
+
+/** One floating island: a disc of grass over soil and stone that narrows to a point, trees on it, a waterfall off one edge. */
+function islandGeometry(rand: () => number, radius: number, withFall: boolean): { geo: THREE.BufferGeometry; lanterns: THREE.Vector3[] } {
+  const s = 0.7;
+  const v = new Vox(s, 0.07);
+  const R = radius / s;
+  const depth = Math.round(R * 0.9);
+  const lobes = Array.from({ length: 4 }, () => ({ a: rand() * Math.PI * 2, f: 0.1 + rand() * 0.16 }));
+  const edge = (ang: number) => 1 + lobes.reduce((t, l, i) => t + Math.sin(ang * (i + 2) + l.a) * l.f * 0.5, 0);
+  const grass = (i: number, j: number, k: number) => ['#5e9b3a', '#6aa843', '#4f8a33', '#78b04a'][Math.abs(i * 7 + k * 13 + j) % 4];
+  for (let j = 0; j >= -depth; j--) {
+    const t = -j / depth;
+    const r = R * edge(0) * (1 - Math.pow(t, 1.25) * 0.97);
+    for (let i = -Math.ceil(R * 1.4); i <= R * 1.4; i++)
+      for (let k = -Math.ceil(R * 1.4); k <= R * 1.4; k++) {
+        const ang = Math.atan2(k, i);
+        const lim = r * edge(ang) * 0.9;
+        const dist = Math.hypot(i, k);
+        if (dist > lim) continue;
+        const rock = j < -3 ? (Math.abs(i * 3 + k * 5 + j) % 3 === 0 ? '#4a3d63' : '#3a2f52') : '#7a5638';
+        v.put(i, j, k, j === 0 ? grass : rock);
+        // Ragged stalactites hanging off the underside.
+        if (j === -depth + 2 && rand() < 0.08) for (let h = 1; h < 3 + rand() * 6; h++) v.put(i, j - h, k, '#2c2440');
+      }
+  }
+  // Trees and bushes, in the colours of autumn.
+  const lanterns: THREE.Vector3[] = [];
+  const count = Math.round(R * 0.9);
+  for (let n = 0; n < count; n++) {
+    const a = rand() * Math.PI * 2;
+    const dist = Math.sqrt(rand()) * R * 0.78 * edge(a);
+    const i = Math.round(Math.cos(a) * dist);
+    const k = Math.round(Math.sin(a) * dist);
+    const trunk = 3 + Math.floor(rand() * 4);
+    const cc = AUTUMN[Math.floor(rand() * AUTUMN.length)];
+    for (let h = 1; h <= trunk; h++) v.put(i, h, k, '#6b4a2e');
+    const cr = 2.2 + rand() * 1.8;
+    v.ell((i + 0.5) * s, (trunk + 1.5) * s, (k + 0.5) * s, cr * s, cr * s * 0.85, cr * s, cc, 0.14);
+    if (rand() < 0.18) lanterns.push(new THREE.Vector3((i + 0.5) * s + 0.5, (trunk + 3) * s, (k + 0.5) * s));
+  }
+  // A small stone hut with a lit window, now and then.
+  if (rand() < 0.7) {
+    const hx = Math.round(R * 0.2);
+    v.box(hx * s, s, -2 * s, (hx + 4) * s, 5 * s, 2 * s, '#c9b79a', 0.05);
+    v.box((hx - 1) * s, 5 * s, -3 * s, (hx + 5) * s, 6 * s, 3 * s, '#a4452d', 0.05);
+    v.box((hx + 1) * s, 6 * s, -2 * s, (hx + 3) * s, 7 * s, 2 * s, '#a4452d', 0.05);
+    lanterns.push(new THREE.Vector3((hx + 2) * s, 3 * s, 2.2 * s));
+  }
+  if (withFall) {
+    const a = rand() * Math.PI * 2;
+    const i = Math.round(Math.cos(a) * R * 0.86 * edge(a));
+    const k = Math.round(Math.sin(a) * R * 0.86 * edge(a));
+    for (let j = 1; j > -depth * 2.2; j--) for (let o = 0; o < 2; o++) v.put(i + Math.round(Math.cos(a) * 1.5) + o, j, k + Math.round(Math.sin(a) * 1.5), ['#cfeaff', '#ffffff', '#9fd0f5'][Math.abs(j) % 3], 0.04);
+  }
+  return { geo: v.build(), lanterns };
+}
+
+export interface SkyWorld {
+  group: THREE.Group;
+  update(t: number): void;
+}
+
+/** The voxel sky world: clouds and floating islands in a wide ring round the office. `cloud` is the sky's own cloud material (it goes grey with the weather). */
+export function buildSkyWorld(cloud: THREE.MeshStandardMaterial, bulbMat: (color: string) => THREE.Material): SkyWorld {
+  const rand = mulberry32(4242);
+  const group = new THREE.Group();
+  cloud.fog = false;
+  cloud.vertexColors = true;
+  cloud.needsUpdate = true;
+  const land = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.9, metalness: 0, fog: false });
+  const glow = bulbMat('#ffd27a');
+
+  const clouds = Array.from({ length: 5 }, () => cloudGeometry(rand));
+  for (let n = 0; n < 34; n++) {
+    const a = (n / 34) * Math.PI * 2 + rand() * 0.4;
+    const dist = 110 + rand() * 150;
+    const m = new THREE.Mesh(clouds[n % clouds.length], cloud);
+    m.position.set(Math.cos(a) * dist, 8 + rand() * 80, Math.sin(a) * dist);
+    m.rotation.y = rand() * Math.PI * 2;
+    m.scale.setScalar(0.8 + rand() * 1.2);
+    group.add(m);
+  }
+
+  const bobs: { m: THREE.Object3D; y: number; p: number }[] = [];
+  const kinds = [
+    { r: 9, fall: true },
+    { r: 6, fall: false },
+    { r: 12, fall: true },
+    { r: 5, fall: false },
+    { r: 8, fall: false },
+  ].map((k) => ({ ...islandGeometry(rand, k.r, k.fall), r: k.r }));
+  const lantern = new THREE.BoxGeometry(0.5, 0.7, 0.5);
+  for (let n = 0; n < 16; n++) {
+    const kind = kinds[n % kinds.length];
+    const a = (n / 16) * Math.PI * 2 + rand() * 0.3;
+    const dist = 95 + rand() * 120;
+    const isle = new THREE.Group();
+    isle.add(new THREE.Mesh(kind.geo, land));
+    for (const p of kind.lanterns) {
+      const l = new THREE.Mesh(lantern, glow);
+      l.position.copy(p);
+      isle.add(l);
+    }
+    const y = 10 + rand() * 70;
+    isle.position.set(Math.cos(a) * dist, y, Math.sin(a) * dist);
+    isle.rotation.y = rand() * Math.PI * 2;
+    isle.scale.setScalar(1 + rand() * 0.7);
+    group.add(isle);
+    bobs.push({ m: isle, y, p: rand() * 6.28 });
+  }
+
+  return {
+    group,
+    update(t) {
+      for (const b of bobs) b.m.position.y = b.y + Math.sin(t * 0.35 + b.p) * 1.2;
+    },
+  };
+}

From 2816959ecec21271d31ba4e92b67d6f806ef4fa7 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:28:30 +0400
Subject: [PATCH 21/35] Voxel world outside: floating islands, terraced clouds,
 block trees and grass

---
 src/client/world/city.ts         | 29 +++++++---------
 src/client/world/outside.ts      | 33 +++++++++++++++---
 src/client/world/scenic/flora.ts | 35 ++++++++-----------
 src/client/world/skyworld.ts     | 12 +++----
 src/client/world/toon.ts         |  2 +-
 src/client/world/voxtrees.ts     | 58 ++++++++++++++++++++++++++++++++
 6 files changed, 120 insertions(+), 49 deletions(-)
 create mode 100644 src/client/world/voxtrees.ts

diff --git a/src/client/world/city.ts b/src/client/world/city.ts
index 8a36cf451..c56a01d35 100644
--- a/src/client/world/city.ts
+++ b/src/client/world/city.ts
@@ -2,6 +2,8 @@ import * as THREE from 'three';
 import { FLOOR, SLAB, STREET_Y, WALL_T, roofDrop } from '../../shared/layout';
 import { mulberry32 } from '../../shared/rng';
 import type { NightParts } from './outside';
+import { cloudGeometry } from './skyworld';
+import { leafyGeometry, treeMaterial } from './voxtrees';
 import { tilingCanvasTexture } from './texture';
 import { mergeByMaterial, mesh, toon } from './toon';
 import { buildTower } from './tower';
@@ -194,9 +196,9 @@ function groundTexture(): THREE.CanvasTexture {
 
 function tree(r: () => number): THREE.Group {
   const t = new THREE.Group();
-  const s = 0.8 + r() * 0.7;
-  t.add(mesh(new THREE.CylinderGeometry(0.25 * s, 0.32 * s, 2.4 * s, 6), toon('#8a5a3b'), 0, 1.2 * s, 0, false));
-  t.add(mesh(new THREE.SphereGeometry(1.9 * s, 8, 6), toon(r() < 0.5 ? '#5fb760' : '#4ea657'), 0, 3.4 * s, 0, false));
+  const m = new THREE.Mesh(leafyGeometry(r() < 0.5 ? '#5fb760' : '#4ea657', Math.floor(r() * 4)), treeMaterial);
+  m.scale.setScalar(0.8 + r() * 0.7);
+  t.add(m);
   return t;
 }
 
@@ -544,26 +546,21 @@ export function buildCity(night: NightParts): City {
 
   // Clouds, drifting past at about the height of the towers.
   const cloud = night.clouds;
+  cloud.fog = false;
+  cloud.vertexColors = true;
+  cloud.needsUpdate = true;
+  const cityClouds = Array.from({ length: 4 }, () => cloudGeometry(r));
   const sky = new THREE.Group();
   for (let k = 0; k < 9; k++) {
     const a = (k / 9) * Math.PI * 2 + r();
     const dist = 220 + r() * 120;
-    const c = new THREE.Group();
-    for (const [dx, dy, rad] of [
-      [0, 0, 9],
-      [10, -2, 7],
-      [-10, -2, 6.5],
-      [4, 4, 6],
-    ]) {
-      const puff = mesh(new THREE.SphereGeometry(rad, 12, 9), cloud, dx, dy, 0, false);
-      puff.scale.y = 0.7;
-      c.add(puff);
-    }
+    const c = new THREE.Mesh(cityClouds[k % cityClouds.length], cloud);
+    c.scale.setScalar(2.2 + r() * 1.4);
+    c.rotation.y = r() * 6.28;
     c.position.set(Math.cos(a) * dist, 40 + r() * 50, Math.sin(a) * dist);
-    c.lookAt(0, c.position.y, 0);
     sky.add(c);
   }
-  group.add(mergeByMaterial(sky));
+  group.add(sky);
 
   let floorsNow = 0;
   let wingsNow = '';
diff --git a/src/client/world/outside.ts b/src/client/world/outside.ts
index 6fb700813..e4d9783a4 100644
--- a/src/client/world/outside.ts
+++ b/src/client/world/outside.ts
@@ -2,9 +2,11 @@ import * as THREE from 'three';
 import { ELEVATOR, ELEVATOR_FRONT, FLOOR, ROAD, SLAB, STREET_Y, WALL_T } from '../../shared/layout';
 import { LOT, SIDE_LOT } from '../../shared/garage';
 import { STREET_END, shoreX } from '../../shared/scenic';
+import { mulberry32 } from '../../shared/rng';
 import type { Collider } from './types';
 import type { Fixture, StreetSite } from './office/fixture';
 import { canvasTexture } from './texture';
+import { leafyGeometry, treeMaterial } from './voxtrees';
 import { buildSkyWorld, type SkyWorld } from './skyworld';
 import { mergeByMaterial, mesh, textPlane, toon, toonUnique } from './toon';
 
@@ -182,12 +184,33 @@ export function buildGarage(group: THREE.Group, colliders: Collider[]) {
   group.add(mergeByMaterial(parts));
 }
 
+/** Grass in blocks: a field of square tufts in a handful of greens, a block (2 m) to a square, sharp however far it stretches. */
+function grassTexture(w: number, d: number): THREE.CanvasTexture {
+  const n = 32;
+  const rand = mulberry32(99);
+  const tones = ['#8fcf6b', '#9bd777', '#84c561', '#a5dd80', '#7bbb5a'];
+  const t = canvasTexture(n * 4, n * 4, (g) => {
+    for (let y = 0; y < n; y++)
+      for (let x = 0; x < n; x++) {
+        g.fillStyle = tones[Math.floor(rand() * tones.length)];
+        g.fillRect(x * 4, y * 4, 4, 4);
+        if (rand() < 0.05) {
+          g.fillStyle = ['#f2e86d', '#f4a6c0', '#ffffff'][Math.floor(rand() * 3)];
+          g.fillRect(x * 4 + 1, y * 4 + 1, 2, 2);
+        }
+      }
+  });
+  t.wrapS = t.wrapT = THREE.RepeatWrapping;
+  t.magFilter = THREE.NearestFilter;
+  t.repeat.set(w / 8, d / 8);
+  return t;
+}
+
 export function tree(scale: number): THREE.Group {
   const t = new THREE.Group();
-  t.add(mesh(new THREE.CylinderGeometry(0.22, 0.3, 2.2, 8), toon('#8a5a3b'), 0, 1.1, 0));
-  t.add(mesh(new THREE.SphereGeometry(1.6, 12, 10), toon('#5fb760'), 0, 3.2, 0));
-  t.add(mesh(new THREE.SphereGeometry(1.1, 12, 10), toon('#3f8f45'), 0.8, 3.9, 0.4));
-  t.add(mesh(new THREE.SphereGeometry(1.0, 12, 10), toon('#6fcf6a'), -0.7, 3.8, -0.3));
+  const m = new THREE.Mesh(leafyGeometry('#5fb760', Math.floor(scale * 13)), treeMaterial);
+  m.castShadow = true;
+  t.add(m);
   t.scale.setScalar(scale);
   return t;
 }
@@ -310,7 +333,7 @@ export function neighbourBoxes(): { minX: number; maxX: number; minZ: number; ma
  * sidewalks and street lamps, trees and neighbours' buildings, and in `sky` some clouds.
  */
 export function buildStreet(group: THREE.Group, colliders: Collider[], night: NightParts, sky: THREE.Group): SkyWorld {
-  const lawn = new THREE.Mesh(new THREE.PlaneGeometry(REACH - LAWN_WEST, REACH * 2), toon('#a7d98b'));
+  const lawn = new THREE.Mesh(new THREE.PlaneGeometry(REACH - LAWN_WEST, REACH * 2), new THREE.MeshStandardMaterial({ map: grassTexture((REACH - LAWN_WEST) / 2, REACH), roughness: 0.95, metalness: 0 }));
   lawn.rotation.x = -Math.PI / 2;
   lawn.position.set((LAWN_WEST + REACH) / 2, G - 0.03, 0);
   lawn.receiveShadow = true;
diff --git a/src/client/world/scenic/flora.ts b/src/client/world/scenic/flora.ts
index 8ae97bceb..5223d255b 100644
--- a/src/client/world/scenic/flora.ts
+++ b/src/client/world/scenic/flora.ts
@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { mesh, toon } from '../toon';
 import { G } from './kit';
+import { leafyGeometry, pineGeometry, treeMaterial } from '../voxtrees';
 
 // What grows along the loop (and the rocks): pines, leafy trees, palms and boulders, each standing on
 // the street's level.
@@ -11,30 +12,22 @@ export const AUTUMN = ['#f4a259', '#e76f51', '#e9c46a'];
 
 /** A pine, feet at (x, z) on the street's level: three cones on a stubby trunk. */
 export function pine(into: THREE.Group, x: number, z: number, s: number, color: string, turn: number) {
-  const g = new THREE.Group();
-  // No ends on the trunk or the cones: nobody sees under a pine.
-  g.add(mesh(new THREE.CylinderGeometry(0.18, 0.26, 1.6, 6, 1, true), toon('#6f4e37'), 0, 0.8, 0));
-  const leaf = toon(color);
-  g.add(mesh(new THREE.ConeGeometry(1.9, 3.2, 7, 1, true), leaf, 0, 2.7, 0));
-  g.add(mesh(new THREE.ConeGeometry(1.45, 2.6, 7, 1, true), leaf, 0, 4.1, 0));
-  g.add(mesh(new THREE.ConeGeometry(0.95, 2.1, 7, 1, true), leaf, 0, 5.4, 0));
-  g.position.set(x, G, z);
-  g.rotation.y = turn;
-  g.scale.set(s, s * (0.9 + (turn % 0.3)), s);
-  into.add(g);
+  const m = new THREE.Mesh(pineGeometry(color, Math.floor(Math.abs(turn) * 7)), treeMaterial);
+  m.castShadow = true;
+  m.position.set(x, G, z);
+  m.rotation.y = Math.round(turn / (Math.PI / 2)) * (Math.PI / 2);
+  m.scale.set(s, s * (0.9 + (turn % 0.3)), s);
+  into.add(m);
 }
 
-/** A leafy tree: a trunk and a couple of faceted blobs of leaves. */
+/** A leafy tree: a trunk and a crown of leaf blocks. */
 export function leafy(into: THREE.Group, x: number, z: number, s: number, color: string, turn: number) {
-  const g = new THREE.Group();
-  g.add(mesh(new THREE.CylinderGeometry(0.2, 0.28, 2.1, 6, 1, true), toon('#8a5a3b'), 0, 1.05, 0));
-  const leaf = toon(color);
-  g.add(mesh(new THREE.IcosahedronGeometry(1.7, 1), leaf, 0, 3.2, 0));
-  g.add(mesh(new THREE.IcosahedronGeometry(1.15, 1), leaf, 0.8, 3.9, 0.35));
-  g.position.set(x, G, z);
-  g.rotation.y = turn;
-  g.scale.setScalar(s);
-  into.add(g);
+  const m = new THREE.Mesh(leafyGeometry(color, Math.floor(Math.abs(turn) * 7)), treeMaterial);
+  m.castShadow = true;
+  m.position.set(x, G, z);
+  m.rotation.y = Math.round(turn / (Math.PI / 2)) * (Math.PI / 2);
+  m.scale.setScalar(s);
+  into.add(m);
 }
 
 /** A palm, leaning a little: a trunk in segments, fronds drooping all round, and coconuts. */
diff --git a/src/client/world/skyworld.ts b/src/client/world/skyworld.ts
index e245822c1..768415c8f 100644
--- a/src/client/world/skyworld.ts
+++ b/src/client/world/skyworld.ts
@@ -8,11 +8,11 @@ import { Vox } from './vox';
 const AUTUMN = ['#d9782b', '#c9482f', '#e8a23b', '#e58aa3', '#7aa93f', '#5f8f35', '#b9552c'];
 
 /** A terraced cloud of blocks: wide flat layers stacked into a soft hill, lavender underneath. */
-function cloudGeometry(rand: () => number): THREE.BufferGeometry {
-  const s = 2.2;
+export function cloudGeometry(rand: () => number): THREE.BufferGeometry {
+  const s = 3;
   const v = new Vox(s, 0.03);
-  const w = 8 + rand() * 12;
-  const d = 6 + rand() * 8;
+  const w = 14 + rand() * 18;
+  const d = 10 + rand() * 12;
   const lumps = 2 + Math.floor(rand() * 3);
   for (let n = 0; n < lumps; n++) {
     const cx = (rand() - 0.5) * w * 1.1;
@@ -21,7 +21,7 @@ function cloudGeometry(rand: () => number): THREE.BufferGeometry {
     const rz = d * (0.5 + rand() * 0.35);
     for (let layer = 0; layer < 4; layer++) {
       const k = 1 - layer * 0.24;
-      const shade = ['#cdbfe6', '#e3dcf3', '#f1ecfa', '#ffffff'][layer];
+      const shade = ['#d8cdee', '#e8e1f6', '#f4f0fb', '#ffffff'][layer];
       v.ell(cx, layer * s, cz, rx * k, s * 0.55, rz * k, shade);
     }
   }
@@ -106,7 +106,7 @@ export function buildSkyWorld(cloud: THREE.MeshStandardMaterial, bulbMat: (color
     const m = new THREE.Mesh(clouds[n % clouds.length], cloud);
     m.position.set(Math.cos(a) * dist, 8 + rand() * 80, Math.sin(a) * dist);
     m.rotation.y = rand() * Math.PI * 2;
-    m.scale.setScalar(0.8 + rand() * 1.2);
+    m.scale.setScalar(1.2 + rand() * 1.6);
     group.add(m);
   }
 
diff --git a/src/client/world/toon.ts b/src/client/world/toon.ts
index a775932f8..d826fef0a 100644
--- a/src/client/world/toon.ts
+++ b/src/client/world/toon.ts
@@ -258,7 +258,7 @@ export function mergeByMaterial(root: THREE.Object3D): THREE.Group {
     const m = o as THREE.Mesh;
     if (!m.isMesh) return;
     const geo = m.geometry.index ? m.geometry.toNonIndexed() : m.geometry.clone();
-    for (const k of Object.keys(geo.attributes)) if (k !== 'position' && k !== 'normal') geo.deleteAttribute(k);
+    for (const k of Object.keys(geo.attributes)) if (k !== 'position' && k !== 'normal' && !(k === 'color' && (m.material as THREE.Material & { vertexColors?: boolean }).vertexColors)) geo.deleteAttribute(k);
     geo.applyMatrix4(new THREE.Matrix4().multiplyMatrices(inv, m.matrixWorld));
     const mat = m.material as THREE.Material;
     const key = `${mat.uuid}${m.castShadow ? '+' : '-'}`;
diff --git a/src/client/world/voxtrees.ts b/src/client/world/voxtrees.ts
new file mode 100644
index 000000000..44c2dbd61
--- /dev/null
+++ b/src/client/world/voxtrees.ts
@@ -0,0 +1,58 @@
+import * as THREE from 'three';
+import { mulberry32 } from '../../shared/rng';
+import { Vox } from './vox';
+
+// Trees built of real blocks, for everything that grows outside: a trunk of bark-coloured cubes and a
+// crown of leaf cubes, a few variants of each, shared by every tree of that kind.
+
+const S = 0.28;
+const bark = (i: number, j: number, k: number) => ['#7a5233', '#6b4a2e', '#8a5e3a'][Math.abs(i + j * 3 + k) % 3];
+
+const cache = new Map<string, THREE.BufferGeometry>();
+const rand = mulberry32(777);
+
+/** The shared material: colours live in the vertices. */
+export const treeMaterial = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.9, metalness: 0 });
+
+/** A round-crowned tree, in blocks: `leaf` is its green (or autumn) colour; `variant` 0–3 picks its shape. */
+export function leafyGeometry(leaf: string, variant: number): THREE.BufferGeometry {
+  const key = `leafy|${leaf}|${variant % 4}`;
+  let g = cache.get(key);
+  if (!g) {
+    const v = new Vox(S, 0.12);
+    const h = 7 + (variant % 3);
+    v.box(-S, 0, -S, S, h * S, S, bark, 0.06);
+    const base = new THREE.Color(leaf);
+    const light = `#${base.clone().offsetHSL(0, 0, 0.07).getHexString()}`;
+    const dark = `#${base.clone().offsetHSL(0, 0, -0.08).getHexString()}`;
+    const r = 6 + (variant % 2);
+    v.ell(0, (h + 3) * S, 0, r * S, (r - 1) * S, r * S, (i, j) => (j > h + 4 ? light : leaf), 0.14);
+    v.ell((2.5 + (variant % 2)) * S, (h + 5.5) * S, S, 3.5 * S, 3 * S, 3.5 * S, light, 0.14);
+    v.ell(-3 * S, (h + 1.5) * S, -2 * S, 3.2 * S, 2.6 * S, 3.2 * S, dark, 0.14);
+    g = v.build();
+    cache.set(key, g);
+  }
+  return g;
+}
+
+/** A pine, in blocks: stacked square-ish tiers narrowing to a point. */
+export function pineGeometry(leaf: string, variant: number): THREE.BufferGeometry {
+  const key = `pine|${leaf}|${variant % 3}`;
+  let g = cache.get(key);
+  if (!g) {
+    const v = new Vox(S, 0.12);
+    v.box(-S, 0, -S, S, 6 * S, S, bark, 0.06);
+    const tiers = 4 + (variant % 2);
+    for (let t = 0; t < tiers; t++) {
+      const r = (tiers - t + 1) * 1.1;
+      const y0 = (3 + t * 3) * S;
+      v.ell(0, y0 + S * 1.2, 0, r * S, 1.6 * S, r * S, leaf, 0.14);
+    }
+    v.box(-S * 0.5, (3 + tiers * 3) * S, -S * 0.5, S * 0.5, (4.4 + tiers * 3) * S, S * 0.5, leaf, 0.14);
+    g = v.build();
+    cache.set(key, g);
+  }
+  return g;
+}
+
+export const treeVariant = () => Math.floor(rand() * 4);

From 7516bfc16ec6f7da019b0a2dc3e87e17372831c6 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:46:53 +0400
Subject: [PATCH 22/35] Vancouver downtown, Stanley Park and landmarks in
 blocks; voxel traffic, people and lamps; finer clouds

---
 src/client/world/city.ts       |  89 ++----------
 src/client/world/skyworld.ts   |  25 ++--
 src/client/world/vancity.ts    | 110 +++++++++++++++
 src/client/world/vanmarks.ts   | 110 +++++++++++++++
 src/client/world/vanpark.ts    | 138 +++++++++++++++++++
 src/client/world/vanpeople.ts  | 244 +++++++++++++++++++++++++++++++++
 src/client/world/vantraffic.ts | 169 +++++++++++++++++++++++
 src/client/world/vanvox.ts     |  68 +++++++++
 src/client/world/vanzones.ts   |  23 ++++
 tests/size.test.ts             |   1 -
 10 files changed, 886 insertions(+), 91 deletions(-)
 create mode 100644 src/client/world/vancity.ts
 create mode 100644 src/client/world/vanmarks.ts
 create mode 100644 src/client/world/vanpark.ts
 create mode 100644 src/client/world/vanpeople.ts
 create mode 100644 src/client/world/vantraffic.ts
 create mode 100644 src/client/world/vanvox.ts
 create mode 100644 src/client/world/vanzones.ts

diff --git a/src/client/world/city.ts b/src/client/world/city.ts
index c56a01d35..dbb80a56f 100644
--- a/src/client/world/city.ts
+++ b/src/client/world/city.ts
@@ -7,6 +7,8 @@ import { leafyGeometry, treeMaterial } from './voxtrees';
 import { tilingCanvasTexture } from './texture';
 import { mergeByMaterial, mesh, toon } from './toon';
 import { buildTower } from './tower';
+import { buildVancouver } from './vancity';
+import { inSea, inZone, offRoad } from './vanzones';
 
 // The city around the rooftop bar: the building's own floors going down to the street (as the tower
 // looks from outside, world/tower.ts), a grid of streets with cars running along them, parks, and
@@ -246,16 +248,6 @@ function rise(ring: number, drop: number): number {
   return ring === 0 ? k : ring === 1 ? Math.sqrt(k) : 1;
 }
 
-interface Car {
-  /** Along x (true) or z. */
-  alongX: boolean;
-  /** The lane's line across the street, and which way it drives (±1). */
-  lane: number;
-  dir: number;
-  at: number;
-  speed: number;
-}
-
 export function buildCity(night: NightParts): City {
   const group = new THREE.Group();
   /** Everything down on the street, which is as far below the roof as the building is tall. */
@@ -290,6 +282,8 @@ export function buildCity(night: NightParts): City {
       if (dist > RADIUS) continue;
       // The block the office stands on: a plaza round it.
       if (i === 0 && j === 0) continue;
+      // Vancouver's landmarks, the water and Stanley Park have these blocks.
+      if (inZone(bx, bz, 24) || inSea(bx, bz, 70)) continue;
       // Now and then a park, with trees.
       if (r() < 0.1 && dist > 60) {
         const park = mesh(new THREE.PlaneGeometry(inner, inner).rotateX(-Math.PI / 2), toon('#8fcf7a'), bx, 0.03, bz, false);
@@ -484,65 +478,16 @@ export function buildCity(night: NightParts): City {
       }
     }
   }
+  for (let i = lampPos.length - 3; i >= 0; i -= 3) if (offRoad(lampPos[i], lampPos[i + 2])) lampPos.splice(i, 3);
   const lampGeo = new THREE.BufferGeometry();
   lampGeo.setAttribute('position', new THREE.Float32BufferAttribute(lampPos, 3));
   const lamps = new THREE.Points(lampGeo, new THREE.PointsMaterial({ size: 4, map: glow, color: '#ffcf8a', transparent: true, opacity: 0, depthWrite: false, blending: THREE.AdditiveBlending }));
   lamps.visible = false;
   street.add(lamps);
 
-  // Cars, up and down the streets round the office's block.
-  const cars: Car[] = [];
-  const lanes: [boolean, number][] = [
-    [true, STREET_Z],
-    [true, STREET_Z - PERIOD],
-    [false, STREET_X],
-    [false, STREET_X - PERIOD],
-    [true, STREET_Z + PERIOD],
-    [false, STREET_X + PERIOD],
-  ];
-  for (const [alongX, line] of lanes) {
-    for (let k = 0; k < 7; k++) {
-      const dir = k % 2 ? 1 : -1;
-      cars.push({ alongX, lane: line + dir * (ROAD / 4) * (alongX ? 1 : -1), dir, at: -RADIUS + r() * RADIUS * 2, speed: 9 + r() * 6 });
-    }
-  }
-  const body = new THREE.BoxGeometry(4.2, 1.05, 1.9).translate(0, 0.9, 0);
-  const cabin = new THREE.BoxGeometry(2.2, 0.7, 1.7).translate(-0.3, 1.75, 0);
-  const carGeo = mergeGeometries([body, cabin]);
-  const carMesh = new THREE.InstancedMesh(carGeo, toon('#ffffff'), cars.length);
-  const paints = ['#ef476f', '#ffd166', '#06d6a0', '#118ab2', '#f4f1de', '#3d405b', '#e07a5f', '#8ecae6'];
-  cars.forEach((_, i) => carMesh.setColorAt(i, new THREE.Color(paints[Math.floor(r() * paints.length)])));
-  const headMat = new THREE.MeshBasicMaterial({ color: '#fff6d0' });
-  const tailMat = new THREE.MeshBasicMaterial({ color: '#ff2d2d' });
-  const heads = new THREE.InstancedMesh(new THREE.BoxGeometry(0.12, 0.3, 1.6).translate(2.12, 0.95, 0), headMat, cars.length);
-  const tails = new THREE.InstancedMesh(new THREE.BoxGeometry(0.12, 0.25, 1.6).translate(-2.12, 0.95, 0), tailMat, cars.length);
-  for (const m of [carMesh, heads, tails]) {
-    m.frustumCulled = false;
-    street.add(m);
-  }
-  const place = new THREE.Matrix4();
-  const q = new THREE.Quaternion();
-  const up = new THREE.Vector3(0, 1, 0);
-  const at = new THREE.Vector3();
-  const one = new THREE.Vector3(1, 1, 1);
-  const moveCars = (dt: number) => {
-    cars.forEach((c, i) => {
-      c.at += c.dir * c.speed * dt;
-      if (c.at > RADIUS) c.at -= RADIUS * 2;
-      if (c.at < -RADIUS) c.at += RADIUS * 2;
-      if (c.alongX) at.set(c.at, 0, c.lane);
-      else at.set(c.lane, 0, c.at);
-      // The car's nose is +x: turned to face the way it's going.
-      const yaw = c.alongX ? (c.dir > 0 ? 0 : Math.PI) : c.dir > 0 ? -Math.PI / 2 : Math.PI / 2;
-      q.setFromAxisAngle(up, yaw);
-      place.compose(at, q, one);
-      carMesh.setMatrixAt(i, place);
-      heads.setMatrixAt(i, place);
-      tails.setMatrixAt(i, place);
-    });
-    for (const m of [carMesh, heads, tails]) m.instanceMatrix.needsUpdate = true;
-  };
-  moveCars(0);
+  // Downtown Vancouver, its traffic and its people (see vancity.ts).
+  const van = buildVancouver(mulberry32(1913), { period: PERIOD, road: ROAD, walk: WALK, streetX: STREET_X, streetZ: STREET_Z, radius: RADIUS }, lampPos);
+  street.add(van.group);
 
   // Clouds, drifting past at about the height of the towers.
   const cloud = night.clouds;
@@ -583,27 +528,11 @@ export function buildCity(night: NightParts): City {
       }
     },
     update(t, dt, dark) {
-      moveCars(dt);
+      van.update(t, dt, dark);
       lamps.visible = dark > 0.02;
       lamps.material.opacity = dark;
-      headMat.color.setScalar(0.75 + 0.25 * dark);
       // The masts' lights blink, a second on and a second off, brighter at night.
       beaconMat.opacity = (Math.sin(t * Math.PI) > 0 ? 1 : 0.08) * (0.35 + 0.65 * dark);
     },
   };
 }
-
-/** Puts geometries (position and normal only) into one. */
-function mergeGeometries(geos: THREE.BufferGeometry[]): THREE.BufferGeometry {
-  const pos: number[] = [];
-  const norm: number[] = [];
-  for (const g of geos) {
-    const flat = g.index ? g.toNonIndexed() : g;
-    pos.push(...(flat.getAttribute('position').array as Float32Array));
-    norm.push(...(flat.getAttribute('normal').array as Float32Array));
-  }
-  const out = new THREE.BufferGeometry();
-  out.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
-  out.setAttribute('normal', new THREE.Float32BufferAttribute(norm, 3));
-  return out;
-}
diff --git a/src/client/world/skyworld.ts b/src/client/world/skyworld.ts
index 768415c8f..097cfe846 100644
--- a/src/client/world/skyworld.ts
+++ b/src/client/world/skyworld.ts
@@ -7,22 +7,27 @@ import { Vox } from './vox';
 
 const AUTUMN = ['#d9782b', '#c9482f', '#e8a23b', '#e58aa3', '#7aa93f', '#5f8f35', '#b9552c'];
 
-/** A terraced cloud of blocks: wide flat layers stacked into a soft hill, lavender underneath. */
+/** A cloud of fine blocks: a flat lavender base with rounded white puffs heaped on it, shaded by height. */
 export function cloudGeometry(rand: () => number): THREE.BufferGeometry {
-  const s = 3;
-  const v = new Vox(s, 0.03);
+  const s = 1;
+  const v = new Vox(s, 0.035);
   const w = 14 + rand() * 18;
   const d = 10 + rand() * 12;
-  const lumps = 2 + Math.floor(rand() * 3);
+  const shade = (_i: number, j: number) => (j < 1 ? '#cfc4e8' : j < 3 ? '#e1daf2' : j < 6 ? '#f0ecfa' : '#ffffff');
+  const lumps = 3 + Math.floor(rand() * 3);
   for (let n = 0; n < lumps; n++) {
     const cx = (rand() - 0.5) * w * 1.1;
     const cz = (rand() - 0.5) * d * 1.1;
-    const rx = w * (0.45 + rand() * 0.35);
-    const rz = d * (0.5 + rand() * 0.35);
-    for (let layer = 0; layer < 4; layer++) {
-      const k = 1 - layer * 0.24;
-      const shade = ['#d8cdee', '#e8e1f6', '#f4f0fb', '#ffffff'][layer];
-      v.ell(cx, layer * s, cz, rx * k, s * 0.55, rz * k, shade);
+    const rx = w * (0.4 + rand() * 0.3);
+    const rz = d * (0.45 + rand() * 0.3);
+    v.ell(cx, 1.5, cz, rx, 2.2, rz, (i, j, k) => shade(i, j));
+    // Puffs on top, each a smaller ball, so the outline rolls instead of stepping.
+    const puffs = 4 + Math.floor(rand() * 4);
+    for (let q = 0; q < puffs; q++) {
+      const px = cx + (rand() - 0.5) * rx * 1.4;
+      const pz = cz + (rand() - 0.5) * rz * 1.4;
+      const pr = 3 + rand() * 4.5;
+      v.ell(px, 2 + pr * 0.45, pz, pr * 1.2, pr * 0.8, pr, (i, j, k) => shade(i, j));
     }
   }
   return v.build();
diff --git a/src/client/world/vancity.ts b/src/client/world/vancity.ts
new file mode 100644
index 000000000..53f5f7d7d
--- /dev/null
+++ b/src/client/world/vancity.ts
@@ -0,0 +1,110 @@
+import * as THREE from 'three';
+import { Vox } from './vox';
+import { Build } from './vanvox';
+import { bcPlace, canadaPlace, downtown, scienceWorld } from './vanmarks';
+import { lionsGate, mountains, stanleyForest, stanleyGround, waterPlane } from './vanpark';
+import { buildPeople } from './vanpeople';
+import { buildTraffic, type Grid } from './vantraffic';
+import { treeMaterial } from './voxtrees';
+import { BCPLACE, CREEK, DOWNTOWN, HARBOUR, INLET, SCIENCE, STANLEY, type Zone } from './vanzones';
+
+// Downtown Vancouver around the office: the Harbour Centre, Marine Building, Shangri-La and condo towers,
+// Canada Place with a cruise ship, Science World, BC Place, Stanley Park with its seawall, totem poles and
+// lighthouse, the Lions Gate Bridge over the inlet and the North Shore mountains behind. All of it blocks,
+// with the traffic and the people of the city running through it.
+
+export interface Vancouver {
+  group: THREE.Group;
+  /** The lit windows, the cars and the people: dark is how dark it is (0–1). */
+  update(t: number, dt: number, dark: number): void;
+}
+
+const DAY_GLASS = new THREE.Color('#86b0cf');
+const NIGHT_GLASS = new THREE.Color('#ffd27a');
+
+/** A tall thin street lamp in blocks, its arm reaching toward +x. */
+function lampPost(): THREE.BufferGeometry {
+  const v = new Vox(0.1, 0.04);
+  for (let j = 0; j < 46; j++) for (let i = -1; i < 1; i++) for (let k = -1; k < 1; k++) v.put(i, j, k, '#3a3f47');
+  for (let i = 1; i < 7; i++) v.put(i, 46, 0, '#3a3f47');
+  for (let i = 5; i < 9; i++) for (let k = -1; k < 1; k++) v.put(i, 45, k, '#fff0c0', 0.02);
+  return v.build();
+}
+
+export function buildVancouver(rnd: () => number, grid: Grid, lampPos: number[]): Vancouver {
+  const group = new THREE.Group();
+  const glass = new THREE.MeshBasicMaterial({ vertexColors: true, color: DAY_GLASS });
+  const put = (b: Build, at: Zone | { x: number; z: number }, dx = 0, dz = 0, yaw = 0) => {
+    const day = new THREE.Mesh(b.v.build(), treeMaterial);
+    const lit = new THREE.Mesh(b.lit.build(), glass);
+    for (const m of [day, lit]) {
+      m.position.set(at.x + dx, 0, at.z + dz);
+      m.rotation.y = yaw;
+      m.frustumCulled = false;
+      group.add(m);
+    }
+    day.castShadow = true;
+  };
+  const water = (z: Zone, dx = 0, dz = 0) => {
+    const side = z.r * 1.41;
+    const w = waterPlane(side, side);
+    w.position.set(z.x + dx, w.position.y, z.z + dz);
+    group.add(w);
+  };
+
+  water(HARBOUR);
+  water(INLET);
+  water(CREEK);
+  put(downtown(rnd), DOWNTOWN);
+  put(canadaPlace(rnd), HARBOUR, 0, -12);
+  put(scienceWorld(rnd), SCIENCE, 0, -5);
+  put(bcPlace(rnd), BCPLACE);
+  put(stanleyGround(rnd), STANLEY);
+  put(lionsGate(rnd), { x: STANLEY.x - STANLEY.r + 3, z: STANLEY.z }, 0, 0, Math.PI);
+  const forest = stanleyForest(rnd);
+  forest.position.set(STANLEY.x, 0.8, STANLEY.z);
+  group.add(forest);
+
+  // The North Shore mountains, two ranges, away over the water.
+  for (const [seed, z, scale] of [[3, -470, 1.3], [8, -540, 1.7]] as const) {
+    const m = new THREE.Mesh(mountains(seed, 1200), treeMaterial);
+    m.scale.setScalar(scale);
+    m.position.set(-420, 0, z);
+    group.add(m);
+  }
+
+  // Street lamps as posts, their arms reaching over the road.
+  const posts: THREE.Matrix4[] = [];
+  const m4 = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const up = new THREE.Vector3(0, 1, 0);
+  for (let i = 0; i < lampPos.length; i += 3) {
+    const x = lampPos[i], z = lampPos[i + 2];
+    const dx = x - (grid.streetX + Math.round((x - grid.streetX) / grid.period) * grid.period);
+    const dz = z - (grid.streetZ + Math.round((z - grid.streetZ) / grid.period) * grid.period);
+    const yaw = Math.abs(dx) < Math.abs(dz) ? (dx > 0 ? Math.PI : 0) : dz > 0 ? Math.PI / 2 : -Math.PI / 2;
+    q.setFromAxisAngle(up, yaw);
+    posts.push(m4.clone().compose(new THREE.Vector3(x, 0, z), q, new THREE.Vector3(1, 1, 1)));
+  }
+  if (posts.length) {
+    const lamps = new THREE.InstancedMesh(lampPost(), treeMaterial, posts.length);
+    posts.forEach((p, i) => lamps.setMatrixAt(i, p));
+    lamps.frustumCulled = false;
+    group.add(lamps);
+  }
+
+  const traffic = buildTraffic(rnd, grid);
+  const people = buildPeople(rnd, grid);
+  group.add(traffic.group, people.group);
+
+  return {
+    group,
+    update(t, dt, dark) {
+      traffic.update(dt, dark);
+      people.update(t, dt, dark);
+      const k = THREE.MathUtils.smoothstep(dark, 0.05, 0.5);
+      glass.color.copy(DAY_GLASS).lerp(NIGHT_GLASS, k);
+    },
+  };
+}
+
diff --git a/src/client/world/vanmarks.ts b/src/client/world/vanmarks.ts
new file mode 100644
index 000000000..ba09941ce
--- /dev/null
+++ b/src/client/world/vanmarks.ts
@@ -0,0 +1,110 @@
+import { Build, line, type Theme } from './vanvox';
+
+// Downtown Vancouver's landmarks, in blocks, each in its own local coordinates (the zone's centre is 0, 0).
+
+const GLASS: Theme[] = [
+  { wall: '#3d6f8f', glass: '#5d9bbf', band: '#c8d4dc' },
+  { wall: '#2f6b6b', glass: '#58a7a2', band: '#d6dedd' },
+  { wall: '#4a5f86', glass: '#7a98c8', band: '#cfd6e2' },
+  { wall: '#58707f', glass: '#8fb4c6', band: '#e1e6e8' },
+  { wall: '#6b7f73', glass: '#9cc1ae', band: '#dfe5e0' },
+];
+
+/** The downtown core: Harbour Centre with its saucer and spire, the Marine Building, Shangri-La and a crowd of glass condo towers. */
+export function downtown(rnd: () => number): Build {
+  const b = new Build(rnd);
+  // Harbour Centre: a concrete shaft, the revolving saucer, a spire.
+  const hc: Theme = { wall: '#cfcac0', glass: '#6e8aa0', band: '#b8b3a8' };
+  b.tower(-18, 12, 14, 14, 0, 112, hc, 15);
+  for (let l = 0; l < 3; l++) b.disc(-18, 12, 12 - (l === 1 ? 0 : 2), 112 + l * 2, l === 1 ? '#7fa6c4' : '#d9d6cf', undefined, 2);
+  b.disc(-18, 12, 6, 118, '#cfcac0', undefined, 2);
+  b.slab(-19, 120, 11, -17, 150, 13, '#d9d6cf');
+  b.slab(-19, 150, 11, -17, 152, 13, '#d33a2c');
+  // The Marine Building: stepped art deco, cream terracotta with a green copper roof.
+  const mb: Theme = { wall: '#d8d0b8', glass: '#6a8a86', band: '#c4b992' };
+  b.tower(14, -8, 28, 22, 0, 38, mb, 25);
+  b.tower(14, -8, 20, 16, 38, 28, mb, 25);
+  b.tower(14, -8, 13, 11, 66, 18, mb, 25);
+  b.pyramid(14, -8, 13, 11, 84, '#3f9c82', 6);
+  b.slab(14, 90, -8, 15, 96, -7, '#d9b24a');
+  // Shangri-La: a slim blue-green giant.
+  b.tower(-2, -28, 22, 24, 0, 28, GLASS[1], 25);
+  b.tower(-2, -28, 18, 18, 28, 150, { wall: '#32636f', glass: '#4f98a3', band: '#9fb8bd' }, 28, '#7c9aa3');
+  // A crowd of condo towers, each on a lower podium.
+  const spots: [number, number][] = [[28, 30], [-34, -2], [4, 34], [34, -34], [-20, -42], [42, 4], [-40, 30], [16, 14], [-8, 0]];
+  spots.forEach(([x, z], n) => {
+    const t = GLASS[n % GLASS.length];
+    const w = 14 + Math.floor(rnd() * 8), d = 14 + Math.floor(rnd() * 8);
+    b.tower(x, z, w + 6, d + 6, 0, 12, { ...t, wall: '#c9c4bb' }, 20);
+    b.tower(x, z, w, d, 12, 36 + Math.floor(rnd() * 90), t, 30);
+  });
+  // The streets between: a strip of pavement.
+  b.slab(-52, 0, -52, 52, 1, 52, '#8d8f93', 0.04);
+  return b;
+}
+
+/** Canada Place with its five white sails, and a cruise ship alongside. */
+export function canadaPlace(rnd: () => number): Build {
+  const b = new Build(rnd);
+  b.slab(-34, 0, -10, 34, 6, 10, '#d8d8d4');
+  b.slab(-36, 0, -8, -34, 6, 8, '#d8d8d4');
+  b.slab(-34, 6, -10, 34, 7, 10, '#a9a9a6');
+  b.slab(-30, 7, -8, 30, 11, 8, '#e9e9e5');
+  for (let s = 0; s < 5; s++) {
+    const cx = -26 + s * 13;
+    for (let j = 0; j < 17; j++) {
+      const hw = Math.max(1, Math.round(5.5 * (1 - j / 17) + 1));
+      const hd = Math.max(1, Math.round(3.5 * (1 - j / 22)));
+      b.slab(cx - hw, 11 + j, -hd, cx + hw + 1, 12 + j, hd + 1, j % 5 === 0 ? '#e6eaf0' : '#fbfbf8');
+    }
+  }
+  // Cruise ship: hull, white decks, a blue funnel.
+  b.slab(-30, 0, 18, 42, 7, 28, '#223a63');
+  b.slab(-26, 7, 19, 40, 9, 27, '#f2f2ee');
+  for (let d = 0; d < 4; d++) b.slab(-20 + d * 2, 9 + d * 3, 20, 36 - d * 2, 12 + d * 3, 26, d % 2 ? '#f6f6f2' : '#e8e8e4');
+  b.slab(-4, 21, 21, 4, 27, 25, '#1c5b9c');
+  for (let i = -28; i < 40; i += 3) b.lit.put(i, 4, 17, '#ffffff');
+  return b;
+}
+
+/** Science World's silver geodesic dome on legs, and the BC Place stadium. */
+export function scienceWorld(rnd: () => number): Build {
+  const b = new Build(rnd);
+  const R = 15, cy = 17;
+  for (let i = -R; i <= R; i++)
+    for (let j = -R; j <= R; j++)
+      for (let k = -R; k <= R; k++) {
+        const r2 = i * i + j * j + k * k;
+        if (r2 > R * R || r2 < (R - 1.4) ** 2) continue;
+        const seam = (i + j * 2 + k) % 5 === 0 || (i - j + k * 2) % 6 === 0;
+        b.v.put(i, j + cy, k, seam ? '#6f8497' : '#c9d6e0', 0.06);
+      }
+  for (const [x, z] of [[-9, -9], [9, -9], [-9, 9], [9, 9]]) b.slab(x - 1, 0, z - 1, x + 2, 6, z + 2, '#8e9aa5');
+  b.slab(-20, 0, 12, 22, 5, 26, '#d7d9db');
+  return b;
+}
+
+export function bcPlace(rnd: () => number): Build {
+  const b = new Build(rnd);
+  for (let j = 0; j < 22; j++)
+    for (let i = -34; i <= 34; i++)
+      for (let k = -26; k <= 26; k++) {
+        const e = (i / 34) ** 2 + (k / 26) ** 2;
+        if (e > 1 || e < 0.9) continue;
+        b.v.put(i, j, k, j % 4 === 3 ? '#9aa3ac' : (i + k) % 5 === 0 ? '#c4c9ce' : '#e9ecee', 0.04);
+      }
+  for (let l = 0; l < 7; l++) {
+    const f = 1 - l * 0.14;
+    for (let i = -34; i <= 34; i++)
+      for (let k = -26; k <= 26; k++) {
+        const e = (i / 34) ** 2 + (k / 26) ** 2;
+        if (e <= f * f && e >= (f - 0.16) ** 2) b.v.put(i, 22 + l, k, l % 2 ? '#f4f6f8' : '#ffffff', 0.03);
+      }
+  }
+  for (let a = 0; a < 20; a++) {
+    const x = Math.round(Math.cos((a / 20) * 6.28) * 36), z = Math.round(Math.sin((a / 20) * 6.28) * 28);
+    line(b.v, [x, 0, z], [x, 26, z], '#7f8a94');
+    b.lit.put(x, 24, z, '#ffffff');
+  }
+  return b;
+}
diff --git a/src/client/world/vanpark.ts b/src/client/world/vanpark.ts
new file mode 100644
index 000000000..b411e1be5
--- /dev/null
+++ b/src/client/world/vanpark.ts
@@ -0,0 +1,138 @@
+import * as THREE from 'three';
+import { Vox } from './vox';
+import { Build, line } from './vanvox';
+import { canvasTexture } from './texture';
+import { leafyGeometry, pineGeometry, treeMaterial } from './voxtrees';
+import { STANLEY } from './vanzones';
+
+/** The forest floor, seawall, totem poles and the lighthouse of Stanley Park (local coordinates, 0, 0 its centre). */
+export function stanleyGround(rnd: () => number): Build {
+  const b = new Build(rnd);
+  const R = STANLEY.r;
+  for (let i = -R; i <= R; i++)
+    for (let k = -R; k <= R; k++) {
+      const e = Math.hypot(i / R, (k / R) * 1.15) + (Math.sin(i * 0.23) + Math.cos(k * 0.19)) * 0.025;
+      if (e > 1) continue;
+      const seawall = e > 0.93;
+      b.v.put(i, 0, k, seawall ? ((i + k) % 2 ? '#c9c4b6' : '#d4cfc2') : ['#2f7a3c', '#2a6e37', '#357f42', '#3a8a47'][Math.abs(i * 5 + k * 3) % 4], 0.06);
+      if (e > 0.985) b.v.put(i, -1, k, '#6f6a60');
+      // A looping path through the middle.
+      if (!seawall && Math.abs(Math.hypot(i, k) - R * 0.55) < 1.2) b.v.put(i, 0, k, '#cbb98f', 0.04);
+    }
+  // Totem poles at Brockton Point.
+  const faces = ['#b3342c', '#1f1f23', '#f1ead8', '#2f8a6b', '#e0a537'];
+  for (let p = 0; p < 5; p++) {
+    const x = 22 + p * 4, z = 40;
+    for (let j = 1; j <= 15; j++) for (let dx = 0; dx < 2; dx++) for (let dz = 0; dz < 2; dz++) b.v.put(x + dx, j, z + dz, faces[(Math.floor(j / 3) + p) % faces.length], 0.05);
+    b.slab(x - 1, 8, z + 1, x + 3, 9, z + 2, faces[p % faces.length]);
+  }
+  // Brockton Point lighthouse: white, red band, a lantern.
+  b.slab(-30, 1, 44, -26, 13, 48, '#f5f5f0');
+  b.slab(-30, 8, 44, -26, 10, 48, '#cc3b30');
+  b.slab(-29, 13, 45, -27, 16, 47, '#ffd36b');
+  b.slab(-30, 16, 44, -26, 17, 48, '#cc3b30');
+  b.lit.put(-28, 14, 46, '#ffffff');
+  return b;
+}
+
+/** The forest: instanced pines and broadleaf trees, big and dark, thick across the park. */
+export function stanleyForest(rnd: () => number): THREE.Group {
+  const g = new THREE.Group();
+  const kinds = [
+    pineGeometry('#1d5a35', 0),
+    pineGeometry('#256b3d', 1),
+    pineGeometry('#174d2d', 2),
+    leafyGeometry('#3f8a3e', 0),
+    leafyGeometry('#c9742a', 1),
+  ];
+  const spots: THREE.Matrix4[][] = kinds.map(() => []);
+  const R = STANLEY.r * 0.88;
+  for (let n = 0; n < 520; n++) {
+    const a = rnd() * Math.PI * 2, d = Math.sqrt(rnd()) * R;
+    const x = Math.cos(a) * d, z = Math.sin(a) * d * 0.88;
+    if (Math.abs(Math.hypot(x, z) - STANLEY.r * 0.55) < 3) continue;
+    if (x > 18 && x < 44 && z > 34 && z < 46) continue;
+    const k = rnd() < 0.7 ? Math.floor(rnd() * 3) : 3 + Math.floor(rnd() * 2);
+    const s = (k < 3 ? 2.4 : 1.8) + rnd() * 1.4;
+    spots[k].push(new THREE.Matrix4().compose(new THREE.Vector3(x, 0.2, z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.floor(rnd() * 4) * 1.5708), new THREE.Vector3(s, s * (0.9 + rnd() * 0.5), s)));
+  }
+  kinds.forEach((geo, i) => {
+    const m = new THREE.InstancedMesh(geo, treeMaterial, spots[i].length);
+    spots[i].forEach((mat, n) => m.setMatrixAt(n, mat));
+    m.castShadow = true;
+    m.frustumCulled = false;
+    g.add(m);
+  });
+  return g;
+}
+
+/** The Lions Gate Bridge: two green towers, a long deck and swooping cables, from the park out over the inlet. */
+export function lionsGate(rnd: () => number): Build {
+  const b = new Build(rnd);
+  const x0 = 0, x1 = 150, y = 22, towers = [40, 110], top = 62;
+  b.slab(x0, y, -3, x1, y + 1, 3, '#b9c4bc');
+  b.slab(x0, y + 1, -3, x1, y + 2, -2, '#7d8a82');
+  b.slab(x0, y + 1, 2, x1, y + 2, 3, '#7d8a82');
+  b.slab(x0, y - 1, -1, x1, y, 1, '#8b958d');
+  const cable = '#9fb2a8';
+  for (const tx of towers) {
+    for (const tz of [-4, 3]) b.slab(tx - 1, 0, tz, tx + 1, top, tz + 1, '#2f7d5a');
+    for (const j of [30, 46, 60]) b.slab(tx - 1, j, -4, tx + 1, j + 2, 4, '#2f7d5a');
+    b.lit.put(tx, top, -4, '#ffffff');
+    b.lit.put(tx, top, 3, '#ffffff');
+  }
+  for (const tz of [-4, 3]) {
+    // The side spans run from each tower top to the ends of the deck, the main span sags between them.
+    line(b.v, [towers[0], top, tz], [x0, y + 2, tz], cable);
+    line(b.v, [towers[1], top, tz], [x1, y + 2, tz], cable);
+    let prev: [number, number, number] = [towers[0], top, tz];
+    for (let x = towers[0] + 2; x <= towers[1]; x += 2) {
+      const t = (x - towers[0]) / (towers[1] - towers[0]);
+      const cy = Math.round(y + 4 + (top - y - 4) * (2 * t - 1) ** 2);
+      const cur: [number, number, number] = [x, cy, tz];
+      line(b.v, prev, cur, cable);
+      if (x % 6 === 0) line(b.v, cur, [x, y + 2, tz], '#aebbb3');
+      prev = cur;
+    }
+  }
+  for (let x = x0 + 4; x < x1; x += 10) b.lit.put(x, y + 3, -3, '#ffffff');
+  return b;
+}
+
+/** A range of North Shore mountains in blocks: forest at the foot, grey rock, snow on the peaks. */
+export function mountains(seed: number, width: number): THREE.BufferGeometry {
+  const s = 5;
+  const v = new Vox(s, 0.05);
+  const n = Math.round(width / s);
+  const ph = [seed * 1.7, seed * 2.9, seed * 0.6];
+  for (let i = 0; i < n; i++) {
+    const t = i / n;
+    const hgt = 10 + 16 * Math.abs(Math.sin(t * 5 + ph[0])) + 9 * Math.sin(t * 11 + ph[1]) ** 2 + 6 * Math.sin(t * 23 + ph[2]) ** 2;
+    const H = Math.round(hgt * (0.55 + 0.45 * Math.sin(t * Math.PI)));
+    for (let k = 0; k < 6; k++) {
+      const hk = Math.round(H * (1 - k * 0.12));
+      for (let j = 0; j < hk; j++) v.put(i, j, k, j > H * 0.74 ? '#f3f7fb' : j > H * 0.42 ? '#7b8fa3' : '#3b6a50', 0.07);
+    }
+  }
+  return v.build();
+}
+
+/** Water in blocks: a plane of blue squares. */
+export function waterPlane(w: number, d: number): THREE.Mesh {
+  const tones = ['#2f78a8', '#3585b6', '#2b6f9c', '#3b8fc0'];
+  let seed = 7;
+  const tex = canvasTexture(128, 128, (g) => {
+    for (let y = 0; y < 32; y++)
+      for (let x = 0; x < 32; x++) {
+        seed = (seed * 1103515245 + 12345) >>> 0;
+        g.fillStyle = tones[(seed >> 8) % tones.length];
+        g.fillRect(x * 4, y * 4, 4, 4);
+      }
+  });
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.magFilter = THREE.NearestFilter;
+  tex.repeat.set(w / 32, d / 32);
+  const m = new THREE.Mesh(new THREE.PlaneGeometry(w, d).rotateX(-Math.PI / 2), new THREE.MeshStandardMaterial({ map: tex, roughness: 0.35, metalness: 0.1 }));
+  m.position.y = 0.12;
+  return m;
+}
diff --git a/src/client/world/vanpeople.ts b/src/client/world/vanpeople.ts
new file mode 100644
index 000000000..94a227961
--- /dev/null
+++ b/src/client/world/vanpeople.ts
@@ -0,0 +1,244 @@
+import * as THREE from 'three';
+import { Vox } from './vox';
+import { line } from './vanvox';
+import { treeMaterial } from './voxtrees';
+import { BCPLACE, SCIENCE, STANLEY, offRoad } from './vanzones';
+import type { Grid } from './vantraffic';
+
+// The people of the city, in blocks like everyone else here: walkers with coffee and backpacks, joggers,
+// dog walkers and cyclists. By day they fill the sidewalks, the Stanley Park seawall and the plazas; in
+// the evening most go home and a few are left under the street lamps.
+
+type Kind = 'walk' | 'jog' | 'dog' | 'bike';
+interface Look {
+  kind: Kind;
+  shirt: string;
+  pants: string;
+  skin: string;
+  hair: string;
+  style: 0 | 1 | 2;
+  extra: string;
+  coffee: boolean;
+  pack: boolean;
+}
+
+const fill = (v: Vox, i0: number, j0: number, k0: number, i1: number, j1: number, k1: number, c: string, jit = 0.05) => {
+  for (let i = i0; i < i1; i++) for (let j = j0; j < j1; j++) for (let k = k0; k < k1; k++) v.put(i, j, k, c, jit);
+};
+
+/** One person, facing +x, in tenth-of-a-meter blocks: shoes, legs, a shirt, arms, a head with hair. */
+function person(l: Look): THREE.BufferGeometry {
+  const v = new Vox(0.1, 0.05);
+  const legTop = l.kind === 'bike' ? 3 : 1;
+  fill(v, -1, legTop, -2, 1, 8, 0, l.pants);
+  fill(v, -1, legTop, 0, 1, 8, 2, l.pants);
+  if (l.kind !== 'bike') {
+    fill(v, -1, 0, -2, 2, 1, 0, '#202228');
+    fill(v, -1, 0, 0, 2, 1, 2, '#202228');
+  } else {
+    fill(v, 0, 3, -2, 2, 4, 0, '#202228');
+    fill(v, 0, 3, 0, 2, 4, 2, '#202228');
+  }
+  fill(v, -1, 8, -3, 2, 14, 3, l.shirt);
+  for (const k of [-4, 3]) {
+    fill(v, -1, 10, k, 1, 14, k + 1, l.shirt);
+    fill(v, -1, 9, k, 1, 10, k + 1, l.skin);
+  }
+  fill(v, -2, 14, -2, 3, 19, 3, l.skin);
+  v.put(2, 16, -1, '#1c1c24', 0.01);
+  v.put(2, 16, 1, '#1c1c24', 0.01);
+  v.put(2, 14, 0, '#b86a5e', 0.02);
+  // Hair: short, long, or a cap / toque / helmet.
+  if (l.style === 2) {
+    fill(v, -2, 18, -2, 3, 20, 3, l.extra);
+    fill(v, 3, 18, -2, 4, 19, 3, l.extra);
+  } else {
+    fill(v, -2, 19, -2, 3, 20, 3, l.hair);
+    fill(v, -2, 15, -2, -1, 19, 3, l.hair);
+    fill(v, -2, 17, -2, 3, 19, -1, l.hair);
+    fill(v, -2, 17, 2, 3, 19, 3, l.hair);
+    fill(v, 2, 18, -2, 3, 19, 3, l.hair);
+    if (l.style === 1) {
+      fill(v, -3, 9, -2, -1, 19, 3, l.hair);
+      fill(v, -2, 11, -3, 1, 17, -2, l.hair);
+      fill(v, -2, 11, 3, 1, 17, 4, l.hair);
+    }
+  }
+  if (l.pack) fill(v, -3, 9, -2, -1, 14, 2, l.extra);
+  if (l.coffee) {
+    fill(v, 1, 9, 3, 2, 11, 4, '#f1ece1', 0.02);
+    v.put(1, 11, 3, '#7a4b2a', 0.02);
+  }
+  if (l.kind === 'jog') fill(v, -2, 17, -2, 3, 18, 3, l.extra);
+  if (l.kind === 'dog') {
+    const coat = l.extra;
+    fill(v, 0, 3, 5, 5, 6, 7, coat);
+    fill(v, 0, 1, 5, 1, 3, 6, coat);
+    fill(v, 0, 1, 6, 1, 3, 7, coat);
+    fill(v, 4, 1, 5, 5, 3, 6, coat);
+    fill(v, 4, 1, 6, 5, 3, 7, coat);
+    fill(v, 5, 5, 5, 7, 8, 7, coat);
+    v.put(7, 6, 5, '#1c1c24', 0.01);
+    v.put(5, 8, 5, '#6b4a2a', 0.01);
+    v.put(-1, 6, 6, coat, 0.01);
+    v.put(0, 8, 4, '#c0392b', 0.01);
+    v.put(1, 7, 5, '#c0392b', 0.01);
+    v.put(0, 9, 3, '#c0392b', 0.01);
+  }
+  if (l.kind === 'bike') {
+    const wheel = (cx: number) => {
+      for (let i = -4; i <= 4; i++)
+        for (let j = -4; j <= 4; j++) {
+          const d = Math.hypot(i, j);
+          if (d <= 4.4 && d >= 3.2) v.put(cx + i, 4 + j, 0, '#17181b', 0.02);
+        }
+      v.put(cx, 4, 0, '#9aa3ad', 0.02);
+    };
+    wheel(-6);
+    wheel(6);
+    const fr = '#2b2f3a';
+    line(v, [-6, 4, 0], [-1, 7, 0], fr);
+    line(v, [-1, 7, 0], [5, 7, 0], fr);
+    line(v, [5, 7, 0], [6, 4, 0], fr);
+    line(v, [-1, 7, 0], [0, 4, 0], fr);
+    fill(v, 5, 8, -2, 6, 9, 3, fr);
+    fill(v, -2, 7, -1, 0, 8, 1, '#202228');
+  }
+  return v.build();
+}
+
+const SKIN = ['#f1c9a5', '#e0ac85', '#c68642', '#8d5524', '#f5d5b8', '#d9a577'];
+const SHIRTS = ['#1f2937', '#2d6cdf', '#e5484d', '#f2f2f2', '#2f9e6b', '#f2b134', '#7a5cff', '#35b6c9', '#ff7a59', '#4b5563'];
+const PANTS = ['#2a3a5a', '#1f2229', '#6b6f78', '#3b4a3a', '#c9b79c', '#111827'];
+const HAIR = ['#2b1d12', '#5b3a1e', '#c9a24a', '#171717', '#8b8b8b', '#7a2d1a'];
+const BRIGHT = ['#ff4d6d', '#ffd23f', '#3ddc97', '#4cc9f0', '#ff9f1c'];
+const COATS = ['#d9a441', '#efe9dc', '#2a2a2e', '#a0642f'];
+
+interface Walker {
+  look: number;
+  slot: number;
+  thr: number;
+  speed: number;
+  ph: number;
+  /** Sidewalk and bike lane: the street's line, which side, which way; or a loop: its centre, radii, and which way round. */
+  alongX?: boolean;
+  line?: number;
+  off?: number;
+  dir: number;
+  at: number;
+  cx?: number;
+  cz?: number;
+  a?: number;
+  b?: number;
+  y?: number;
+}
+
+export function buildPeople(rnd: () => number, g: Grid): { group: THREE.Group; update(t: number, dt: number, dark: number): void } {
+  const group = new THREE.Group();
+  const pick = <T,>(a: readonly T[]): T => a[Math.floor(rnd() * a.length)];
+  const looks: Look[] = [];
+  const make = (kind: Kind, n: number) => {
+    for (let i = 0; i < n; i++) {
+      const sporty = kind === 'jog' || kind === 'bike';
+      looks.push({
+        kind,
+        shirt: sporty ? pick(BRIGHT) : pick(SHIRTS),
+        pants: sporty ? '#1f2229' : pick(PANTS),
+        skin: pick(SKIN),
+        hair: pick(HAIR),
+        style: kind === 'bike' ? 2 : kind === 'jog' ? (rnd() < 0.5 ? 2 : 0) : (Math.floor(rnd() * 3) as 0 | 1 | 2),
+        extra: kind === 'dog' ? pick(COATS) : pick(sporty ? BRIGHT : SHIRTS),
+        coffee: kind === 'walk' && rnd() < 0.4,
+        pack: kind === 'walk' && rnd() < 0.4,
+      });
+    }
+  };
+  make('walk', 14);
+  make('jog', 4);
+  make('dog', 4);
+  make('bike', 4);
+  const byKind = (k: Kind) => looks.map((l, i) => (l.kind === k ? i : -1)).filter((i) => i >= 0);
+  const SPEED: Record<Kind, number> = { walk: 1.4, jog: 3, dog: 1.1, bike: 5.5 };
+  const counts = looks.map(() => 0);
+  const walkers: Walker[] = [];
+  const add = (kind: Kind, w: Omit<Walker, 'look' | 'slot' | 'thr' | 'speed' | 'ph'>) => {
+    const ids = byKind(kind);
+    const look = pick(ids);
+    walkers.push({ ...w, look, slot: counts[look]++, thr: rnd(), speed: SPEED[kind] * (0.8 + rnd() * 0.4), ph: rnd() * 6.28 });
+  };
+  const P = g.radius * 0.7;
+  const lanes: [boolean, number][] = [];
+  for (const k of [-1, 0, 1]) {
+    lanes.push([true, g.streetZ + k * g.period]);
+    lanes.push([false, g.streetX + k * g.period]);
+  }
+  const mix: Kind[] = ['walk', 'walk', 'walk', 'walk', 'walk', 'walk', 'jog', 'dog', 'bike'];
+  for (const [alongX, ln] of lanes)
+    for (const side of [-1, 1])
+      for (let n = 0; n < 12; n++) {
+        const kind = mix[Math.floor(rnd() * mix.length)];
+        const dir = rnd() < 0.5 ? 1 : -1;
+        // Bikes ride the edge of the road with the traffic; everyone else the sidewalk.
+        const off = kind === 'bike' ? side * (g.road / 2 - 1.1) : side * (g.road / 2 + g.walk / 2);
+        add(kind, { alongX, line: ln, off, dir: kind === "bike" ? side * (alongX ? 1 : -1) : dir, at: (rnd() * 2 - 1) * P });
+      }
+  const ring = (cx: number, cz: number, a: number, b: number, n: number, kinds: Kind[], y = 1) => {
+    for (let i = 0; i < n; i++) add(kinds[Math.floor(rnd() * kinds.length)], { cx, cz, a, b, y, dir: rnd() < 0.55 ? 1 : -1, at: rnd() * 6.28 });
+  };
+  const R = STANLEY.r;
+  ring(STANLEY.x, STANLEY.z, R * 0.965, (R * 0.965) / 1.15, 40, ['walk', 'walk', 'walk', 'jog', 'jog', 'dog', 'bike', 'bike']);
+  ring(STANLEY.x, STANLEY.z, R * 0.55, R * 0.55, 18, ['walk', 'walk', 'dog', 'jog']);
+  ring(SCIENCE.x, SCIENCE.z - 5, 21, 21, 12, ['walk', 'walk', 'dog', 'jog']);
+  ring(BCPLACE.x, BCPLACE.z, 40, 31, 14, ['walk', 'walk', 'jog']);
+
+  const meshes = looks.map((l, i) => {
+    const m = new THREE.InstancedMesh(person(l), treeMaterial, Math.max(1, counts[i]));
+    m.count = counts[i];
+    m.frustumCulled = false;
+    m.castShadow = true;
+    group.add(m);
+    return m;
+  });
+  const place = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const e = new THREE.Euler(0, 0, 0, 'YXZ');
+  const p = new THREE.Vector3();
+  const sc = new THREE.Vector3();
+  let clock = 0;
+  const move = (dt: number, dark: number) => {
+    clock += dt;
+    for (const w of walkers) {
+      let x: number, z: number, dx: number, dz: number;
+      if (w.cx !== undefined) {
+        w.at += (w.dir * w.speed * dt) / w.a!;
+        x = w.cx + w.a! * Math.cos(w.at);
+        z = w.cz! + w.b! * Math.sin(w.at);
+        dx = -w.a! * Math.sin(w.at) * w.dir;
+        dz = w.b! * Math.cos(w.at) * w.dir;
+      } else {
+        w.at += w.dir * w.speed * dt;
+        if (w.at > g.radius * 0.7) w.at -= g.radius * 1.4;
+        if (w.at < -g.radius * 0.7) w.at += g.radius * 1.4;
+        x = w.alongX ? w.at : w.line! + w.off!;
+        z = w.alongX ? w.line! + w.off! : w.at;
+        dx = w.alongX ? w.dir : 0;
+        dz = w.alongX ? 0 : w.dir;
+      }
+      // Evenings are quiet: the dusk sends most people home, the late few are the ones with the highest numbers.
+      const hide = w.thr < dark * 0.85 || (w.cx === undefined && offRoad(x, z));
+      const look = looks[w.look];
+      const step = clock * w.speed * (look.kind === 'bike' ? 0 : 3.2) + w.ph;
+      const bob = look.kind === 'bike' ? 0 : Math.abs(Math.sin(step)) * (look.kind === 'jog' ? 0.09 : 0.04);
+      e.set(look.kind === 'bike' ? 0 : Math.sin(step) * 0.05, Math.atan2(-dz, dx), look.kind === 'jog' ? -0.14 : look.kind === 'bike' ? -0.08 : -0.02);
+      q.setFromEuler(e);
+      p.set(x, (w.y ?? 0) + bob, z);
+      sc.setScalar(hide ? 0 : 0.88);
+      place.compose(p, q, sc);
+      meshes[w.look].setMatrixAt(w.slot, place);
+    }
+    for (const m of meshes) m.instanceMatrix.needsUpdate = true;
+  };
+  move(0, 0);
+  return { group, update: (_t, dt, dark) => move(dt, dark) };
+}
+
diff --git a/src/client/world/vantraffic.ts b/src/client/world/vantraffic.ts
new file mode 100644
index 000000000..da1d9d69e
--- /dev/null
+++ b/src/client/world/vantraffic.ts
@@ -0,0 +1,169 @@
+import * as THREE from 'three';
+import { Vox } from './vox';
+import { treeMaterial } from './voxtrees';
+import { offRoad } from './vanzones';
+
+/** How the streets are laid out (see city.ts): roads down x = streetX + k * period, and z likewise. */
+export interface Grid {
+  period: number;
+  road: number;
+  walk: number;
+  streetX: number;
+  streetZ: number;
+  radius: number;
+}
+
+const S = 0.2;
+const fill = (v: Vox, x0: number, y0: number, z0: number, x1: number, y1: number, z1: number, c: string, j = 0.05) => {
+  for (let i = Math.round(x0 / S); i < Math.round(x1 / S); i++)
+    for (let h = Math.round(y0 / S); h < Math.round(y1 / S); h++) for (let k = Math.round(z0 / S); k < Math.round(z1 / S); k++) v.put(i, h, k, c, j);
+};
+const GLASS = '#26323f';
+const TYRE = '#17181b';
+
+function wheels(v: Vox, xs: number[], z: number, r: number) {
+  for (const x of xs) for (const s of [-1, 1]) fill(v, x - r, 0, s > 0 ? z - 0.2 : -z, x + r, r * 2, s > 0 ? z : -z + 0.2, TYRE, 0.02);
+}
+
+/** A car in blocks, nose along +x: body, a glassed cabin with pillars, wheels, lamps. */
+function car(body: string, kind: 'sedan' | 'suv' | 'taxi'): THREE.BufferGeometry {
+  const v = new Vox(S, 0.05);
+  const L = kind === 'suv' ? 2.4 : 2.2;
+  const top = kind === 'suv' ? 1.9 : 1.6;
+  fill(v, -L, 0.2, -0.9, L, 0.9, 0.9, body);
+  fill(v, L - 1, 0.9, -0.9, L, 1, 0.9, body);
+  const c0 = kind === 'suv' ? -L + 0.2 : -1.4;
+  const c1 = kind === 'suv' ? L - 0.8 : 0.8;
+  fill(v, c0, 1, -0.8, c1, top - 0.2, 0.8, GLASS, 0.02);
+  for (const x of [c0, c1 - 0.2, (c0 + c1) / 2 - 0.1]) fill(v, x, 1, -0.8, x + 0.2, top - 0.2, 0.8, body);
+  fill(v, c0, top - 0.2, -0.8, c1, top, 0.8, body);
+  wheels(v, [-L + 0.9, L - 0.9], 0.9, 0.3);
+  fill(v, L - 0.2, 0.5, -0.8, L, 0.7, -0.4, '#fff6d0', 0.02);
+  fill(v, L - 0.2, 0.5, 0.4, L, 0.7, 0.8, '#fff6d0', 0.02);
+  fill(v, -L, 0.5, -0.8, -L + 0.2, 0.7, -0.4, '#c9242b', 0.02);
+  fill(v, -L, 0.5, 0.4, -L + 0.2, 0.7, 0.8, '#c9242b', 0.02);
+  fill(v, -L, 0.2, -0.9, -L + 0.2, 0.4, 0.9, '#2a2c31');
+  fill(v, L - 0.2, 0.2, -0.9, L, 0.4, 0.9, '#2a2c31');
+  if (kind === 'taxi') {
+    fill(v, -0.6, top, -0.4, 0.2, top + 0.2, 0.4, '#fff7d6');
+    fill(v, -L, 0.5, -0.9, L, 0.7, 0.9, '#f4f4f0', 0.03);
+  }
+  return v.build();
+}
+
+/** A city bus: white with a blue band, a row of windows, a destination sign. */
+function bus(): THREE.BufferGeometry {
+  const v = new Vox(S, 0.04);
+  const L = 5.4, W = 1.2;
+  fill(v, -L, 0.4, -W, L, 1.2, W, '#f4f6f9');
+  fill(v, -L, 0.8, -W, L, 1.2, W, '#1f5fbf');
+  fill(v, -L, 1.2, -W, L, 2.4, W, GLASS, 0.02);
+  for (let x = -L; x < L; x += 1.6) fill(v, x, 1.2, -W, x + 0.2, 2.4, W, '#f4f6f9');
+  fill(v, -L, 2.4, -W, L, 2.8, W, '#e8ecf1');
+  fill(v, L - 0.2, 2, -W + 0.2, L, 2.4, W - 0.2, '#ffb02e', 0.02);
+  fill(v, -L, 0.4, -W, L, 0.6, W, '#2a2c31');
+  wheels(v, [-L + 1.4, L - 1.6], W, 0.4);
+  return v.build();
+}
+
+interface Veh {
+  alongX: boolean;
+  lane: number;
+  dir: number;
+  at: number;
+  speed: number;
+  kind: number;
+  slot: number;
+  stretch: number;
+}
+
+const PAINTS = ['#f2f2ee', '#f2f2ee', '#2b2d33', '#8d949c', '#d94f4f', '#2d6cdf', '#2e9e6b', '#e0a537', '#7a5cff', '#8ecae6', '#c9ced4'];
+
+/** The traffic: voxel cars, taxis, SUVs and buses running the streets, their lamps coming on at night. */
+export function buildTraffic(rnd: () => number, g: Grid): { group: THREE.Group; update(dt: number, dark: number): void } {
+  const group = new THREE.Group();
+  const geos: THREE.BufferGeometry[] = [];
+  const stretch: number[] = [];
+  PAINTS.forEach((p, i) => {
+    geos.push(car(p, i % 4 === 3 ? 'suv' : 'sedan'));
+    stretch.push(1);
+  });
+  geos.push(car('#ffd23f', 'taxi'));
+  stretch.push(1);
+  geos.push(bus());
+  stretch.push(2.35);
+  const TAXI = PAINTS.length, BUS = TAXI + 1;
+
+  const lanes: [boolean, number][] = [];
+  for (const k of [-1, 0, 1]) {
+    lanes.push([true, g.streetZ + k * g.period]);
+    lanes.push([false, g.streetX + k * g.period]);
+  }
+  const vehicles: Veh[] = [];
+  const counts = geos.map(() => 0);
+  for (const [alongX, line] of lanes)
+    for (let k = 0; k < 9; k++) {
+      const dir = k % 2 ? 1 : -1;
+      const n = vehicles.length;
+      const kind = n % 11 === 0 ? BUS : n % 6 === 3 ? TAXI : Math.floor(rnd() * PAINTS.length);
+      vehicles.push({
+        alongX,
+        lane: line + dir * (g.road / 4) * (alongX ? 1 : -1),
+        dir,
+        at: -g.radius + rnd() * g.radius * 2,
+        speed: (kind === BUS ? 7 : 9) + rnd() * 6,
+        kind,
+        slot: counts[kind]++,
+        stretch: stretch[kind],
+      });
+    }
+  const meshes = geos.map((geo, i) => {
+    const m = new THREE.InstancedMesh(geo, treeMaterial, Math.max(1, counts[i]));
+    m.count = counts[i];
+    m.frustumCulled = false;
+    m.castShadow = true;
+    group.add(m);
+    return m;
+  });
+  const headMat = new THREE.MeshBasicMaterial({ color: '#fff6d0' });
+  const tailMat = new THREE.MeshBasicMaterial({ color: '#ff2d2d' });
+  const heads = new THREE.InstancedMesh(new THREE.BoxGeometry(0.12, 0.2, 1.4).translate(2.3, 0.6, 0), headMat, vehicles.length);
+  const tails = new THREE.InstancedMesh(new THREE.BoxGeometry(0.12, 0.2, 1.4).translate(-2.3, 0.6, 0), tailMat, vehicles.length);
+  for (const m of [heads, tails]) {
+    m.frustumCulled = false;
+    group.add(m);
+  }
+  const place = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const up = new THREE.Vector3(0, 1, 0);
+  const at = new THREE.Vector3();
+  const sc = new THREE.Vector3();
+  const move = (dt: number) => {
+    vehicles.forEach((c, i) => {
+      c.at += c.dir * c.speed * dt;
+      if (c.at > g.radius) c.at -= g.radius * 2;
+      if (c.at < -g.radius) c.at += g.radius * 2;
+      if (c.alongX) at.set(c.at, 0, c.lane);
+      else at.set(c.lane, 0, c.at);
+      // The nose is +x: turned to face the way it's going.
+      q.setFromAxisAngle(up, c.alongX ? (c.dir > 0 ? 0 : Math.PI) : c.dir > 0 ? -Math.PI / 2 : Math.PI / 2);
+      sc.setScalar(offRoad(at.x, at.z) ? 0 : 1);
+      place.compose(at, q, sc);
+      meshes[c.kind].setMatrixAt(c.slot, place);
+      sc.x *= c.stretch;
+      place.compose(at, q, sc);
+      heads.setMatrixAt(i, place);
+      tails.setMatrixAt(i, place);
+    });
+    for (const m of [...meshes, heads, tails]) m.instanceMatrix.needsUpdate = true;
+  };
+  move(0);
+  return {
+    group,
+    update(dt, dark) {
+      move(dt);
+      headMat.color.setScalar(0.75 + 0.25 * dark);
+    },
+  };
+}
+
diff --git a/src/client/world/vanvox.ts b/src/client/world/vanvox.ts
new file mode 100644
index 000000000..b8fd0a5d6
--- /dev/null
+++ b/src/client/world/vanvox.ts
@@ -0,0 +1,68 @@
+import { Vox } from './vox';
+
+// The pieces the Vancouver landmarks are built from, in whole-meter blocks: towers with banded windows
+// (some of them lit at night, see Build.lit), round decks, stepped tops and sails.
+
+export interface Theme {
+  wall: string;
+  glass: string;
+  band: string;
+}
+
+/** A model in two parts: what's there by day, and the windows that glow at night. */
+export class Build {
+  v = new Vox(1, 0.05);
+  lit = new Vox(1, 0.05);
+  rnd: () => number;
+  constructor(rnd: () => number) {
+    this.rnd = rnd;
+  }
+
+  /** A tower from y0 up `h`, its walls banded with windows. */
+  tower(cx: number, cz: number, w: number, d: number, y0: number, h: number, t: Theme, litPct = 30, roof = '#8d8f92') {
+    const x0 = Math.round(cx - w / 2), x1 = x0 + w, z0 = Math.round(cz - d / 2), z1 = z0 + d;
+    for (let j = y0; j < y0 + h; j++) {
+      const top = j === y0 + h - 1;
+      const row = (j - y0) % 4;
+      for (let i = x0; i < x1; i++)
+        for (let k = z0; k < z1; k++) {
+          const ex = i === x0 || i === x1 - 1, ez = k === z0 || k === z1 - 1;
+          if (!ex && !ez && !top) continue;
+          if (top) { this.v.put(i, j, k, roof); continue; }
+          const u = ex ? k : i;
+          const corner = ex && ez;
+          const win = !corner && row >= 1 && row <= 2 && u % 3 !== 0;
+          if (!win) { this.v.put(i, j, k, row === 0 ? t.band : (i + k) % 6 < 1 ? t.band : t.wall); continue; }
+          const h2 = Math.imul(Math.floor(u / 3) * 73856093 ^ Math.floor((j - y0) / 4) * 19349663 ^ (ex ? (i === x0 ? 1 : 2) : k === z0 ? 3 : 4) * 83492791, 2246822519) >>> 0;
+          if (h2 % 100 < litPct) {
+            this.lit.put(i === x0 ? i + 1 : i === x1 - 1 ? i - 1 : i, j, k === z0 ? k + 1 : k === z1 - 1 ? k - 1 : k, '#ffffff', 0.02);
+            continue;
+          }
+          this.v.put(i, j, k, t.glass);
+        }
+    }
+  }
+
+  /** A solid block (a podium, a plinth, a hull). */
+  slab(x0: number, y0: number, z0: number, x1: number, y1: number, z1: number, color: string | ((i: number, j: number, k: number) => string), jitter?: number) {
+    this.v.box(x0, y0, z0, x1, y1, z1, color, jitter);
+  }
+
+  /** A round layer: a filled disc of radius `r` (ellipse `r` by `rz`) at height y. */
+  disc(cx: number, cz: number, r: number, y: number, color: string, rz = r, thick = 1) {
+    for (let j = y; j < y + thick; j++)
+      for (let i = Math.floor(cx - r); i <= Math.ceil(cx + r); i++)
+        for (let k = Math.floor(cz - rz); k <= Math.ceil(cz + rz); k++) if (((i - cx) / r) ** 2 + ((k - cz) / rz) ** 2 <= 1) this.v.put(i, j, k, color);
+  }
+
+  /** A stepped pyramid from y, shrinking by one block each layer. */
+  pyramid(cx: number, cz: number, w: number, d: number, y: number, color: string, layers = Math.min(w, d) / 2) {
+    for (let l = 0; l < layers; l++) this.slab(Math.round(cx - w / 2) + l, y + l, Math.round(cz - d / 2) + l, Math.round(cx + w / 2) - l, y + l + 1, Math.round(cz + d / 2) - l, color);
+  }
+}
+
+/** A straight line of blocks (a cable, a rail) from a to b. */
+export function line(v: Vox, a: [number, number, number], b: [number, number, number], color: string) {
+  const n = Math.ceil(Math.max(Math.abs(b[0] - a[0]), Math.abs(b[1] - a[1]), Math.abs(b[2] - a[2])));
+  for (let s = 0; s <= n; s++) v.put(Math.round(a[0] + ((b[0] - a[0]) * s) / n), Math.round(a[1] + ((b[1] - a[1]) * s) / n), Math.round(a[2] + ((b[2] - a[2]) * s) / n), color, 0.02);
+}
diff --git a/src/client/world/vanzones.ts b/src/client/world/vanzones.ts
new file mode 100644
index 000000000..4ca45bfa2
--- /dev/null
+++ b/src/client/world/vanzones.ts
@@ -0,0 +1,23 @@
+// Where the Vancouver landmarks stand, in street coordinates. Ordinary blocks, lamps, cars and walkers
+// keep out of them; the water and park zones are also where nothing may drive.
+export type Zone = { x: number; z: number; r: number; kind: 'land' | 'water' | 'park' };
+
+export const DOWNTOWN: Zone = { x: 110, z: -160, r: 55, kind: 'land' };
+export const HARBOUR: Zone = { x: 190, z: -180, r: 62, kind: 'water' };
+export const STANLEY: Zone = { x: -190, z: -120, r: 75, kind: 'park' };
+export const INLET: Zone = { x: -330, z: -120, r: 100, kind: 'water' };
+export const SCIENCE: Zone = { x: 120, z: 175, r: 35, kind: 'land' };
+export const BCPLACE: Zone = { x: 190, z: 130, r: 45, kind: 'land' };
+export const CREEK: Zone = { x: 130, z: 215, r: 40, kind: 'water' };
+
+export const ZONES: readonly Zone[] = [DOWNTOWN, HARBOUR, STANLEY, INLET, SCIENCE, BCPLACE, CREEK];
+
+/** True inside any landmark zone (pad makes them bigger). */
+export const inZone = (x: number, z: number, pad = 0): boolean => ZONES.some((q) => Math.hypot(x - q.x, z - q.z) < q.r + pad);
+
+/** Where cars and street walkers can't go: the landmarks, the water and the park. */
+export const offRoad = (x: number, z: number): boolean => inZone(x, z, 0);
+
+
+/** True out on the open water (pad widens the sea): ordinary blocks keep back from the shore so the harbour opens to the mountains. */
+export const inSea = (x: number, z: number, pad = 0): boolean => ZONES.some((q) => q.kind === 'water' && Math.hypot(x - q.x, z - q.z) < q.r + pad);
diff --git a/tests/size.test.ts b/tests/size.test.ts
index c54f01b1c..8560bad8b 100644
--- a/tests/size.test.ts
+++ b/tests/size.test.ts
@@ -31,7 +31,6 @@ const CEILINGS: Readonly<Record<string, number>> = {
   'src/client/dnb.ts': 641,
   'src/client/features/golf/world.ts': 635,
   'src/client/features/bargames/world.ts': 617,
-  'src/client/world/city.ts': 613,
   'src/client/world/costumes.ts': 603,
 };
 

From abeecb8ea611738f92fc79b5ee327b441f8e0d91 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 22:52:42 +0400
Subject: [PATCH 23/35] Weather controller and location picker on the left

---
 src/client/features/weather/index.ts | 139 +++++++++++++++++++++++++++
 src/client/main.ts                   |   2 +
 src/client/styles/hud.css            |  19 ++++
 3 files changed, 160 insertions(+)
 create mode 100644 src/client/features/weather/index.ts

diff --git a/src/client/features/weather/index.ts b/src/client/features/weather/index.ts
new file mode 100644
index 000000000..cef089b30
--- /dev/null
+++ b/src/client/features/weather/index.ts
@@ -0,0 +1,139 @@
+// The weather controller on the left: pick where in the world the office is (its sun, clock and live
+// forecast), set the weather and its strength by hand, or scrub the time of day. It is only for you:
+// nobody else's sky changes (the shared one comes from server/sky.ts).
+import type { Weather, SkyState } from '../../../shared/protocol';
+import type { Ctx } from '../../core/context';
+import { store } from '../../state';
+import { h } from '../../ui/dom';
+
+interface Place {
+  name: string;
+  lat: number;
+  lon: number;
+  /** Standard time, minutes east of UTC: the forecast's own offset replaces it when it comes through. */
+  utc: number;
+}
+
+const PLACES: Place[] = [
+  { name: 'Vancouver, BC', lat: 49.2827, lon: -123.1207, utc: -480 },
+  { name: 'Dubai', lat: 25.2048, lon: 55.2708, utc: 240 },
+  { name: 'London', lat: 51.5072, lon: -0.1276, utc: 0 },
+  { name: 'New York', lat: 40.7128, lon: -74.006, utc: -300 },
+  { name: 'San Francisco', lat: 37.7749, lon: -122.4194, utc: -480 },
+  { name: 'Reykjavik', lat: 64.1466, lon: -21.9426, utc: 0 },
+  { name: 'Cairo', lat: 30.0444, lon: 31.2357, utc: 120 },
+  { name: 'Mecca', lat: 21.3891, lon: 39.8579, utc: 180 },
+  { name: 'Mumbai', lat: 19.076, lon: 72.8777, utc: 330 },
+  { name: 'Singapore', lat: 1.3521, lon: 103.8198, utc: 480 },
+  { name: 'Tokyo', lat: 35.6762, lon: 139.6503, utc: 540 },
+  { name: 'Sydney', lat: -33.8688, lon: 151.2093, utc: 600 },
+  { name: 'Auckland', lat: -36.8485, lon: 174.7633, utc: 720 },
+  { name: 'Tromsø, Norway', lat: 69.6492, lon: 18.9553, utc: 60 },
+];
+
+const WEATHER: [Weather, string][] = [['clear', '☀️'], ['cloudy', '⛅'], ['rain', '🌧️'], ['storm', '⛈️'], ['snow', '❄️'], ['fog', '🌫️']];
+
+/** open-meteo's WMO codes as our weather and how hard it is. */
+function fromWmo(code: number): [Weather, number] {
+  if (code <= 1) return ['clear', 0];
+  if (code === 2) return ['cloudy', 0.4];
+  if (code === 3) return ['cloudy', 1];
+  if (code === 45 || code === 48) return ['fog', 0.8];
+  if ((code >= 51 && code <= 57) || (code >= 61 && code <= 67) || (code >= 80 && code <= 82)) return ['rain', code >= 65 || code === 82 ? 1 : 0.5];
+  if ((code >= 71 && code <= 77) || code === 85 || code === 86) return ['snow', code >= 75 ? 1 : 0.5];
+  if (code >= 95) return ['storm', 1];
+  return ['cloudy', 0.5];
+}
+
+export function installWeather(ctx: Ctx): void {
+  const { sky } = ctx;
+  let pin: Partial<SkyState> | null = null;
+  let preview: { hour?: number; weather?: Weather; intensity?: number } = {};
+  let place = '';
+  let busy = false;
+
+  const apply = () => {
+    if (pin && store.sky) sky.set({ ...store.sky, ...pin });
+    sky.show({ ...preview });
+    paint();
+  };
+  // The server keeps sending its own sky: your place goes back over it each time.
+  store.on('sky', () => pin && apply());
+
+  const select = h('select', { 'aria-label': 'Location', onchange: () => void go(select.value) }) as HTMLSelectElement;
+  select.append(h('option', { value: '' }, '📍 The office’s own place'), ...PLACES.map((p) => h('option', { value: p.name }, p.name)));
+  const status = h('div.wx-status');
+  const weatherRow = h('div.wx-row');
+  const strength = h('input', { type: 'range', min: 0, max: 100, value: 80, 'aria-label': 'Weather strength', oninput: () => { preview = { ...preview, weather: preview.weather ?? store.sky?.weather ?? 'clear', intensity: Number(strength.value) / 100 }; apply(); }, onchange: () => strength.blur() }) as HTMLInputElement;
+  const clock = h('input', { type: 'range', min: 0, max: 24, step: 0.25, value: 12, 'aria-label': 'Time of day', oninput: () => { preview = { ...preview, hour: Number(clock.value) % 24 }; apply(); }, onchange: () => clock.blur() }) as HTMLInputElement;
+  const hourLabel = h('span.wx-val');
+  const strengthLabel = h('span.wx-val');
+  const live = (what: 'weather' | 'time') => h('button.btn.wx-mini', { type: 'button', onclick: () => {
+    if (what === 'weather') {
+      const { weather: _w, intensity: _i, ...rest } = preview;
+      preview = rest;
+      if (pin?.city) void go(place);
+    } else {
+      const { hour: _h, ...rest } = preview;
+      preview = rest;
+    }
+    apply();
+  } }, what === 'weather' ? 'Live' : 'Now');
+
+  const body = h('div.wx-body', {},
+    h('label.wx-label', {}, 'Where'), select, status,
+    h('div.wx-head', {}, h('label.wx-label', {}, 'Weather'), live('weather')), weatherRow,
+    h('div.wx-head', {}, h('label.wx-label', {}, 'Strength'), strengthLabel), strength,
+    h('div.wx-head', {}, h('label.wx-label', {}, 'Time of day'), hourLabel, live('time')), clock,
+  );
+  const toggle = h('button.wx-toggle', { type: 'button', 'aria-expanded': 'true', onclick: () => {
+    const open = body.hidden;
+    body.hidden = !open;
+    toggle.setAttribute('aria-expanded', String(open));
+  } }, '🌦️ Weather');
+  const panel = h('div.wx-panel', { id: 'weather-panel' }, toggle, body);
+  document.getElementById('hud')?.append(panel);
+  panel.addEventListener('click', (e) => { const b = (e.target as HTMLElement).closest('button'); if (b) setTimeout(() => b.blur(), 0); });
+
+  const fmtHour = (x: number) => { const m = Math.round(x * 60); return String(Math.floor(m / 60) % 24).padStart(2, '0') + ':' + String(m % 60).padStart(2, '0'); };
+
+  function paint() {
+    const s = store.sky;
+    const now = pin ? { ...s, ...pin } : s;
+    const w = preview.weather ?? now?.weather;
+    weatherRow.replaceChildren(...WEATHER.map(([k, icon]) => h('button.btn.wx-btn', {
+      type: 'button', title: k, 'aria-pressed': String(w === k), class: w === k ? 'on' : '',
+      onclick: () => { preview = { ...preview, weather: k, intensity: preview.intensity ?? 0.8 }; strength.value = String(Math.round((preview.intensity ?? 0.8) * 100)); apply(); },
+    }, icon)));
+    const k = preview.intensity ?? (preview.weather ? 0.8 : now?.intensity ?? 0);
+    strength.value = String(Math.round(k * 100));
+    strengthLabel.textContent = Math.round(k * 100) + '%';
+    hourLabel.textContent = preview.hour === undefined ? 'live' : fmtHour(preview.hour);
+    status.textContent = busy ? 'Fetching the forecast…' : pin?.city ? pin.city + (pin.temp !== undefined ? ', ' + pin.temp + ' °C' : '') : now?.city ? now.city + (now.temp !== undefined ? ', ' + now.temp + ' °C' : '') : 'Using the office’s own sky';
+  }
+
+  async function go(name: string) {
+    place = name;
+    const p = PLACES.find((q) => q.name === name);
+    if (!p) { pin = null; preview = {}; apply(); return; }
+    pin = { lat: p.lat, lon: p.lon, utcOffset: p.utc, city: p.name, temp: undefined };
+    apply();
+    busy = true;
+    paint();
+    try {
+      const res = await fetch('https://api.open-meteo.com/v1/forecast?latitude=' + p.lat + '&longitude=' + p.lon + '&current=temperature_2m,weather_code&timezone=auto');
+      const f = await res.json();
+      if (place !== name) return;
+      const [weather, intensity] = fromWmo(Number(f.current.weather_code));
+      pin = { lat: p.lat, lon: p.lon, city: p.name, utcOffset: Number.isFinite(f.utc_offset_seconds) ? Math.round(f.utc_offset_seconds / 60) : p.utc, weather, intensity, temp: Math.round(Number(f.current.temperature_2m)) };
+    } catch {
+      // No forecast reachable: the place's sun and clock still apply, with the weather as it was.
+    }
+    busy = false;
+    apply();
+  }
+
+  paint();
+  store.on('sky', paint);
+}
+
diff --git a/src/client/main.ts b/src/client/main.ts
index 1efd3ab24..bb5ef6578 100644
--- a/src/client/main.ts
+++ b/src/client/main.ts
@@ -53,6 +53,7 @@ import { installMeeting } from './features/meeting';
 import { installNeedsYou } from './features/needsyou';
 import { installPalette } from './features/palette';
 import { installPeers } from './features/peers';
+import { installWeather } from './features/weather';
 import { installRooftop } from './features/rooftop';
 import { installSeating } from './features/seating';
 import { installSmoke } from './features/smoke';
@@ -182,6 +183,7 @@ installChat(ctx);
 parts.talk = installVoice(ctx, { tv: parts.tv });
 installDictation(ctx);
 parts.hud = installHud(ctx, core, parts);
+installWeather(ctx);
 
 // ---- Main loop ---------------------------------------------------------------------------------------
 fitWindow(ctx);
diff --git a/src/client/styles/hud.css b/src/client/styles/hud.css
index eaed38f96..6691f5241 100644
--- a/src/client/styles/hud.css
+++ b/src/client/styles/hud.css
@@ -260,3 +260,22 @@ body.telescope-active #hud { visibility: hidden; }
 /* The arcade cabinet in the lounge (features/cabinet/ui.ts) plays on the keyboard, and says so over the game when a worker of yours needs input. */
 .arcade.cabinet canvas { cursor: default; }
 .cabinet-call { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 6px 6px 6px 14px; background: var(--warn); border: 3px solid var(--ink); border-radius: var(--radius-control); box-shadow: 0 4px 0 var(--ink); font-weight: 900; font-size: 15px; animation: pop .18s ease-out; }
+
+/* The weather controller on the left (features/weather). */
+.wx-panel { position: absolute; left: 12px; top: 84px; width: 218px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--edge, var(--ink)); border-radius: var(--radius, 0); font-family: var(--font); z-index: 5; }
+.wx-toggle { display: block; width: 100%; padding: 8px 12px; background: var(--paper-2); border: 0; border-bottom: 3px solid var(--ink); color: var(--ink); font: 900 15px var(--font); text-align: left; cursor: pointer; }
+.wx-toggle[aria-expanded=false] { border-bottom: 0; }
+.wx-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
+.wx-body[hidden] { display: none; }
+.wx-label { font: 800 11px var(--font-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+.wx-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
+.wx-head .wx-label { flex: 1; }
+.wx-val { font: 800 12px var(--font-label); }
+.wx-body select { width: 100%; padding: 6px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-control, 0); font: 700 13px var(--font); }
+.wx-status { font-size: 12px; color: var(--muted); min-height: 16px; }
+.wx-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+.wx-btn { height: 32px; padding: 0; font-size: 16px; justify-content: center; }
+.wx-btn.on { background: var(--paper-2); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); outline: 2px solid var(--accent, var(--ink)); }
+.wx-mini { height: 22px; padding: 0 8px; font-size: 11px; }
+.wx-body input[type=range] { width: 100%; accent-color: var(--ink); }
+

From fb0bdb48146bbb478989327362436d64484fb5c0 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 23:28:29 +0400
Subject: [PATCH 24/35] Voxel rooftop garden: block plants, structures, ground;
 fog slider fully clears atmosphere at 0

---
 src/client/features/rooftop/garden.ts         |  49 ++--
 src/client/features/rooftop/garden/ground.ts  |  89 +++----
 src/client/features/rooftop/garden/leaves.ts  |   2 +-
 src/client/features/rooftop/garden/plants.ts  | 246 ++++-------------
 src/client/features/rooftop/garden/seats.ts   |  23 +-
 .../features/rooftop/garden/structures.ts     |  71 ++---
 src/client/features/rooftop/garden/voxkit.ts  | 162 ++++++++++++
 .../features/rooftop/garden/voxplants.ts      | 247 ++++++++++++++++++
 .../features/rooftop/garden/voxscene.ts       |  97 +++++++
 src/client/features/weather/index.ts          |  18 ++
 src/client/world/sky.ts                       |   4 +-
 11 files changed, 686 insertions(+), 322 deletions(-)
 create mode 100644 src/client/features/rooftop/garden/voxkit.ts
 create mode 100644 src/client/features/rooftop/garden/voxplants.ts
 create mode 100644 src/client/features/rooftop/garden/voxscene.ts

diff --git a/src/client/features/rooftop/garden.ts b/src/client/features/rooftop/garden.ts
index 6c87a6f39..6bd516740 100644
--- a/src/client/features/rooftop/garden.ts
+++ b/src/client/features/rooftop/garden.ts
@@ -1,10 +1,11 @@
 import * as THREE from 'three';
-import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { GARDEN, GARDEN_POND, GARDEN_SEATS, THINK_SPOT } from '../../../shared/garden';
 import type { SeatDef } from '../../../shared/layout';
 import type { Collider, Interactable } from '../../world/types';
 import { boulder, moss, pond, steppingStones } from './garden/ground';
-import { FoliageBatch, Solids, hash3, rng } from './garden/leaves';
+import { hash3, rng } from './garden/leaves';
+import { VoxBatch } from './garden/voxkit';
+import { Blocks } from './garden/voxscene';
 import * as P from './garden/plants';
 import { bench, lounge } from './garden/seats';
 import { SOIL, lantern, pergola, planterBed, soundStone } from './garden/structures';
@@ -59,27 +60,25 @@ function seatCollider(s: SeatDef, w: number, d: number, dz: number, top: number)
 export function buildGarden(): Garden {
   const group = new THREE.Group();
   const interactables: Interactable[] = [];
-  const g: P.Grow = { f: new FoliageBatch(new THREE.Box3(new THREE.Vector3(GARDEN.minX - 0.4, 0, GARDEN.minZ - 0.5), new THREE.Vector3(GARDEN.maxX + 0.4, 0, GARDEN.maxZ + 0.4))), s: new Solids(), r: rng(20261003), t: P.templates(), colliders: [], glow: [] };
+  const limit = new THREE.Box3(new THREE.Vector3(GARDEN.minX - 0.4, 0, GARDEN.minZ - 0.5), new THREE.Vector3(GARDEN.maxX + 0.4, 0, GARDEN.maxZ + 0.4));
+  const g: P.Grow = { v: new VoxBatch(limit), b: new Blocks(0.05), fine: new Blocks(0.025), glowB: new Blocks(0.025, 0), r: rng(20261003), colliders: [] };
   const { r } = g;
   const jit = (v: number) => (r() - 0.5) * v;
 
-  // The ground: earth and moss in soft patches, a little uneven, fading into the deck on the east.
-  const ground = new THREE.PlaneGeometry(12.5, 9, 25, 18).rotateX(-Math.PI / 2).translate((GARDEN.minX - 5) / 2, 0, (GARDEN.minZ + GARDEN.maxZ) / 2);
-  const gp = ground.attributes.position;
-  const gcol = new Float32Array(gp.count * 4);
+  // The ground: earth and moss in soft patches, a layer of blocks just under the deck's top, fading into the deck on the east.
+  const turf = new Blocks(0.05, 0.06);
   const [earth, mossy, lush, c] = [new THREE.Color('#4a3b2c'), new THREE.Color('#4a7a38'), new THREE.Color('#5f8f45'), new THREE.Color()];
-  for (let i = 0; i < gp.count; i++) {
-    const [x, z] = [gp.getX(i), gp.getZ(i)];
-    const n = smooth(x / 1.8, z / 1.8) * 0.65 + smooth(x / 0.7 + 9, z / 0.7) * 0.35;
-    c.copy(earth).lerp(mossy, THREE.MathUtils.smoothstep(n, 0.35, 0.6)).lerp(lush, THREE.MathUtils.smoothstep(n, 0.65, 0.85));
-    gcol.set([c.r, c.g, c.b, 1 - THREE.MathUtils.smoothstep(x + 0.8 * smooth(z * 1.3, 4), -6.4, -5.1)], i * 4);
-    gp.setY(i, 0.014 + 0.01 * smooth(x * 2, z * 2));
-  }
-  ground.setAttribute('color', new THREE.BufferAttribute(gcol, 4));
-  ground.computeVertexNormals();
-  const soil = new THREE.MeshStandardMaterial({ vertexColors: true, transparent: true, roughness: 1, polygonOffset: true, polygonOffsetFactor: -2, polygonOffsetUnits: -2 });
-  const dirt = new THREE.Mesh(ground, soil);
-  dirt.receiveShadow = true;
+  const [gx0, gx1, gz0, gz1] = [(GARDEN.minX - 5) / 2 - 6.25, (GARDEN.minX - 5) / 2 + 6.25, (GARDEN.minZ + GARDEN.maxZ) / 2 - 4.5, (GARDEN.minZ + GARDEN.maxZ) / 2 + 4.5];
+  for (let i = Math.floor(gx0 / 0.05); i < gx1 / 0.05; i++)
+    for (let k = Math.floor(gz0 / 0.05); k < gz1 / 0.05; k++) {
+      const [x, z] = [(i + 0.5) * 0.05, (k + 0.5) * 0.05];
+      if (hash3(i, 3, k) < THREE.MathUtils.smoothstep(x + 0.8 * smooth(z * 1.3, 4), -6.4, -5.1)) continue;
+      const n = smooth(x / 1.8, z / 1.8) * 0.65 + smooth(x / 0.7 + 9, z / 0.7) * 0.35;
+      c.copy(earth).lerp(mossy, THREE.MathUtils.smoothstep(n, 0.35, 0.6)).lerp(lush, THREE.MathUtils.smoothstep(n, 0.65, 0.85));
+      turf.v.put(i, -1, k, '#' + c.getHexString(), 0.1);
+    }
+  const dirt = turf.mesh();
+  dirt.position.y = 0.012;
   group.add(dirt);
 
   // ---- Beds along the north, west and south sides, and a pair flanking the way in from the east --------
@@ -179,7 +178,13 @@ export function buildGarden(): Garden {
   bunch(-13.0, 10.9, P.PETALS.orange, 3, 'head', 0);
 
   const spot = GARDEN_POND;
-  const water = pond(g, spot.x, spot.z, spot.r);
+  pond(g, spot.x, spot.z, spot.r);
+  const water = new THREE.Mesh(
+    new THREE.PlaneGeometry(spot.r * 1.8, spot.r * 1.8).rotateX(-Math.PI / 2),
+    new THREE.MeshStandardMaterial({ color: '#2f5b5a', roughness: 0.04, metalness: 0, transparent: true, opacity: 0.9, envMapIntensity: 1.6 }),
+  );
+  water.position.set(spot.x, 0.095, spot.z);
+  water.receiveShadow = true;
   P.flower(g, spot.x - 0.2, 0.1, spot.z + 0.12, 0.1, P.PETALS.pink, 'head');
   P.flower(g, spot.x + 0.18, 0.1, spot.z - 0.2, 0.08, P.PETALS.white, 'head');
   g.colliders.push({ minX: spot.x - 0.85, maxX: spot.x + 0.85, minZ: spot.z - 0.85, maxZ: spot.z + 0.85, top: 99 });
@@ -239,9 +244,9 @@ export function buildGarden(): Garden {
 
   // ---- Merge it all --------------------------------------------------------------------------------------
   const wind = { value: 0 };
-  group.add(g.s.build(), g.f.build(wind), water);
+  group.add(g.b.mesh(), g.fine.mesh(), g.v.build(wind), water);
   const glowMat = new THREE.MeshStandardMaterial({ color: '#ffe2b0', emissive: '#ff9f45', emissiveIntensity: 0.9, roughness: 0.35 });
-  const glow = new THREE.Mesh(mergeGeometries(g.glow)!, glowMat);
+  const glow = new THREE.Mesh(g.glowB.v.build(), glowMat);
   group.add(glow);
   const light = new THREE.PointLight('#ffb36b', 0, 9, 1.4);
   light.position.set(-10.6, 2.1, 8);
diff --git a/src/client/features/rooftop/garden/ground.ts b/src/client/features/rooftop/garden/ground.ts
index 317f899f7..f69f2c1ff 100644
--- a/src/client/features/rooftop/garden/ground.ts
+++ b/src/client/features/rooftop/garden/ground.ts
@@ -1,86 +1,63 @@
-import { blockCylinder, blockBall } from '../../../world/blocky';
-import * as THREE from 'three';
-import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
-import { hash3 } from './leaves';
-import { tint, type Grow } from './plants';
+import type { Grow } from './plants';
+import { rock } from './voxscene';
 
-// The garden's ground: boulders, moss, stepping stones and the pond.
+// The garden's ground: boulders, moss, stepping stones and the pond. Blocks, like the rest.
 
 const TAU = Math.PI * 2;
+const GREYS = [['#7d807b', '#72766f', '#888b85'], ['#8c908c', '#7d827e', '#9a9a92']];
+const pickOf = <T,>(list: T[], v: number) => list[Math.floor(v * list.length) % list.length];
 
-function at(x: number, y: number, z: number, rotY = 0, sx = 1, sy = 1, sz = 1): THREE.Matrix4 {
-  return new THREE.Matrix4().compose(new THREE.Vector3(x, y, z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), rotY), new THREE.Vector3(sx, sy, sz));
-}
-
-/** A rock: a roughened ball squashed to `h` high, half sunk in the ground, grey with moss on top. */
+/** A rock: a rough lump of blocks, half sunk in the ground, grey with moss on top. */
 export function boulder(g: Grow, x: number, z: number, r: number, h: number, hex = '#7d807b', collide = true) {
-  const geo = new THREE.IcosahedronGeometry(1, 2);
-  geo.deleteAttribute('uv');
-  geo.deleteAttribute('normal');
-  const ball = mergeVertices(geo);
-  const p = ball.attributes.position;
-  for (let i = 0; i < p.count; i++) {
-    const k = 1 + 0.26 * (hash3(p.getX(i) * 2.1, p.getY(i) * 2.1, p.getZ(i) * 2.1) - 0.5) + 0.08 * (hash3(p.getX(i) * 7, p.getY(i) * 7, p.getZ(i) * 7) - 0.5);
-    p.setXYZ(i, p.getX(i) * k, Math.max(p.getY(i) * k, -0.4), p.getZ(i) * k);
-  }
-  ball.computeVertexNormals();
-  g.s.add('stone', ball, tint(g, hex, 0.1), at(x, h * 0.32, z, g.r() * TAU, r, h, r * (0.85 + 0.2 * g.r())), 0.12, 0, 0.75);
+  const greys = hex === '#7d807b' ? GREYS[0] : [hex, hex];
+  g.b.blob(x, h * 0.32, z, r, h * 0.9, r * (0.85 + 0.2 * g.r()), g.r() * TAU, rock(greys, 0.55), 0.45, 0, 0.1);
   if (collide) g.colliders.push({ minX: x - r * 0.85, maxX: x + r * 0.85, minZ: z - r * 0.85, maxZ: z + r * 0.85, top: h * 0.8 });
 }
 
 /** A low cushion of moss on the ground (or on a soil bed, at height `y`). */
 export function moss(g: Grow, x: number, z: number, r: number, y = 0) {
-  const geo = blockBall(1, 10, 5, 0, TAU, 0, Math.PI / 2);
-  const p = geo.attributes.position;
-  for (let i = 0; i < p.count; i++) {
-    const k = 1 + 0.3 * (hash3(p.getX(i) * 3, 0, p.getZ(i) * 3) - 0.5);
-    p.setXYZ(i, p.getX(i) * k, p.getY(i), p.getZ(i) * k);
-  }
-  geo.computeVertexNormals();
-  g.s.add('moss', geo, tint(g, ['#4e8a3a', '#5a9640', '#3f7a38'][Math.floor(g.r() * 3)], 0.1), at(x, y, z, g.r() * TAU, r, 0.03 + 0.05 * g.r(), r * (0.7 + 0.3 * g.r())), 0.14);
+  const greens = ['#4e8a3a', '#5a9640', '#3f7a38', '#69a24a'];
+  g.fine.blob(x, y, z, r, 0.03 + 0.05 * g.r(), r * (0.7 + 0.3 * g.r()), g.r() * TAU, (_ny, n) => pickOf(greens, n), 0.5, y, 0.12);
 }
 
 /** Flat stepping stones along a winding line through `pts`. */
 export function steppingStones(g: Grow, pts: [number, number][]) {
-  const curve = new THREE.CatmullRomCurve3(pts.map(([x, z]) => new THREE.Vector3(x, 0, z)));
-  const n = Math.round(curve.getLength() / 0.62);
+  const at = (t: number): [number, number] => {
+    const f = Math.min(pts.length - 1.0001, t * (pts.length - 1));
+    const i = Math.floor(f);
+    const [a, b, c, d] = [pts[Math.max(0, i - 1)], pts[i], pts[i + 1], pts[Math.min(pts.length - 1, i + 2)]];
+    const u = f - i;
+    const cr = (p0: number, p1: number, p2: number, p3: number) => 0.5 * (2 * p1 + (p2 - p0) * u + (2 * p0 - 5 * p1 + 4 * p2 - p3) * u * u + (3 * p1 - p0 - 3 * p2 + p3) * u * u * u);
+    return [cr(a[0], b[0], c[0], d[0]), cr(a[1], b[1], c[1], d[1])];
+  };
+  let len = 0;
+  for (let i = 1; i <= 40; i++) len += Math.hypot(at(i / 40)[0] - at((i - 1) / 40)[0], at(i / 40)[1] - at((i - 1) / 40)[1]);
+  const n = Math.round(len / 0.62);
   for (let i = 0; i <= n; i++) {
-    const c = curve.getPoint(i / n);
+    const [cx, cz] = at(i / n);
     const r = 0.17 + 0.07 * g.r();
-    const geo = blockCylinder(1, 1.06, 1, 8);
-    g.s.add('stone', geo, tint(g, ['#8c908c', '#7d827e', '#9a9a92'][i % 3], 0.1), at(c.x + (g.r() - 0.5) * 0.12, 0.018, c.z + (g.r() - 0.5) * 0.12, g.r() * TAU, r * 1.15, 0.036, r * (0.8 + 0.2 * g.r())), 0.14, 0, 0.35);
-    if (g.r() < 0.4) moss(g, c.x + (g.r() - 0.5) * 0.5, c.z + (g.r() - 0.5) * 0.5, 0.1 + 0.08 * g.r());
+    const greys = GREYS[1];
+    g.b.disc(cx + (g.r() - 0.5) * 0.12, 0, cz + (g.r() - 0.5) * 0.12, r * 1.15, r * (0.8 + 0.2 * g.r()), 0.05, g.r() * TAU, (n2) => pickOf(greys, n2), 0.3, 0.1);
+    if (g.r() < 0.4) moss(g, cx + (g.r() - 0.5) * 0.5, cz + (g.r() - 0.5) * 0.5, 0.1 + 0.08 * g.r());
   }
 }
 
-/** A tiny pond: a ring of stones round dark water with lily pads and a pink lotus. Returns the water, to go in the scene as it is. */
-export function pond(g: Grow, x: number, z: number, r: number): THREE.Mesh {
-  g.s.add('soil', blockCylinder(r + 0.05, r + 0.05, 0.06, 24), '#232a26', at(x, 0.03, z), 0.08);
+/** A tiny pond: a ring of stones round dark water with lily pads and a pink lotus. Returns the water's plane's place in the scene (see garden.ts). */
+export function pond(g: Grow, x: number, z: number, r: number): { x: number; z: number; r: number } {
+  g.b.disc(x, 0, z, r + 0.05, r + 0.05, 0.06, 0, (n) => pickOf(['#232a26', '#1d2420', '#2a312c'], n), 0.1, 0.05);
   const n = 12;
   for (let i = 0; i < n; i++) {
     const a = (i / n) * TAU;
     const rr = 0.17 + 0.07 * g.r();
-    const geo = new THREE.BoxGeometry(1.5, 1.5, 1.5);
-    geo.deleteAttribute('uv');
-    geo.deleteAttribute('normal');
-    const s = mergeVertices(geo);
-    s.computeVertexNormals();
-    g.s.add('stone', s, tint(g, ['#8c908c', '#7a7f7a', '#9d9b92'][i % 3], 0.1), at(x + Math.cos(a) * (r + 0.1), 0.07, z + Math.sin(a) * (r + 0.1), g.r() * TAU, rr * 1.2, rr * 0.8, rr), 0.12, 0, 0.5);
+    g.b.blob(x + Math.cos(a) * (r + 0.1), 0.07, z + Math.sin(a) * (r + 0.1), rr * 1.0, rr * 0.9, rr * 0.85, g.r() * TAU, rock(['#8c908c', '#7a7f7a', '#9d9b92'], 0.4), 0.4, 0, 0.1);
   }
-  const water = new THREE.Mesh(
-    new THREE.PlaneGeometry(r * 1.8, r * 1.8).rotateX(-Math.PI / 2),
-    new THREE.MeshStandardMaterial({ color: '#2f5b5a', roughness: 0.04, metalness: 0, transparent: true, opacity: 0.9, envMapIntensity: 1.6 }),
-  );
-  water.position.set(x, 0.095, z);
-  water.receiveShadow = true;
   for (const [dx, dz, s] of [
     [-0.25, 0.1, 0.14],
     [0.2, -0.22, 0.12],
     [0.12, 0.28, 0.1],
     [-0.1, -0.3, 0.09],
-  ]) {
-    const pad = new THREE.PlaneGeometry(s * 1.6, s * 1.6).rotateX(-Math.PI / 2);
-    g.s.add('moss', pad, tint(g, '#3f7d3c', 0.1), at(x + dx * (r / 0.72), 0.099, z + dz * (r / 0.72), g.r() * TAU), 0.1);
-  }
-  return water;
+  ]) g.fine.disc(x + dx * (r / 0.72), 0.095, z + dz * (r / 0.72), s * 0.9, s * 0.9, 0.025, g.r() * TAU, (n2) => pickOf(['#3f7d3c', '#4a8a40', '#357235'], n2), 0.3, 0.08);
+  return { x, z, r };
 }
+
+
diff --git a/src/client/features/rooftop/garden/leaves.ts b/src/client/features/rooftop/garden/leaves.ts
index 12cd38fbb..8ece73bc1 100644
--- a/src/client/features/rooftop/garden/leaves.ts
+++ b/src/client/features/rooftop/garden/leaves.ts
@@ -171,7 +171,7 @@ export class FoliageBatch {
   }
 
   build(wind: { value: number }): THREE.Mesh {
-    const m = new THREE.Mesh(mergeGeometries(this.geos)!, foliageMaterial(wind));
+    const m = new THREE.Mesh(this.geos.length ? mergeGeometries(this.geos)! : new THREE.BufferGeometry(), foliageMaterial(wind));
     for (const g of this.geos) g.dispose();
     m.castShadow = true;
     m.receiveShadow = true;
diff --git a/src/client/features/rooftop/garden/plants.ts b/src/client/features/rooftop/garden/plants.ts
index ad74ab0bb..060c526cc 100644
--- a/src/client/features/rooftop/garden/plants.ts
+++ b/src/client/features/rooftop/garden/plants.ts
@@ -1,217 +1,89 @@
-import { blockCylinder, blockBall } from '../../../world/blocky';
-import * as THREE from 'three';
 import type { Collider } from '../../../world/types';
-import { FoliageBatch, Solids, frondGeometry, lance, leafGeometry, place } from './leaves';
-
-// The garden's plants, one function each. They add leaves to the foliage batch and trunks and stems to
-// the solids, and leave a collider behind for what you can't walk through. (x, y, z) is where each
-// stands, y being the soil it grows from.
-
-/** The shaped leaves, each made once and stamped wherever a plant wants one. */
-export function templates() {
-  const notched = (t: number, row: number) => lance(0.62, 0.7)(t) * (row >= 3 && row <= 9 && row % 2 === 1 ? 0.42 : 1);
-  const ragged = (t: number, row: number) => lance(0.55, 0.5)(t) * (row >= 2 && row % 2 === 1 ? 0.84 : 1);
-  return {
-    fern: frondGeometry({ length: 1, pairs: 15, leaflet: 0.2, ratio: 0.2, arch: 1.15, spread: 1.15, droop: 0.7 }),
-    smallFern: frondGeometry({ length: 1, pairs: 9, leaflet: 0.22, ratio: 0.22, arch: 0.9, spread: 1.1, droop: 0.6 }),
-    palm: frondGeometry({ length: 1, pairs: 20, leaflet: 0.3, ratio: 0.07, arch: 1.05, spread: 0.85, droop: 0.9, spine: 0.025 }),
-    banana: leafGeometry({ rows: 8, cols: 5, length: 1, width: 0.36, profile: ragged, arch: 1.2, fold: 0.35 }),
-    monstera: leafGeometry({ rows: 12, cols: 5, length: 1, width: 0.95, profile: notched, arch: 0.55, fold: 0.3, heart: 0.14 }),
-    broad: leafGeometry({ rows: 5, cols: 3, length: 1, width: 0.5, profile: lance(0.6, 0.8), arch: 0.8, fold: 0.3 }),
-    bamboo: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.14, profile: lance(0.8, 0.8), arch: 0.3, fold: 0.5 }),
-    blade: leafGeometry({ rows: 6, cols: 3, length: 1, width: 0.03, profile: (t) => Math.pow(1 - t, 0.7), arch: 1.0, fold: 0.5 }),
-    ivy: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.95, profile: lance(0.6, 0.7), arch: 0.4, fold: 0.3, heart: 0.18 }),
-    petal: leafGeometry({ rows: 3, cols: 3, length: 1, width: 0.55, profile: lance(0.5, 0.7), arch: -0.6, fold: -0.3 }),
-    clover: leafGeometry({ rows: 4, cols: 3, length: 1, width: 1, profile: lance(0.5, 0.45), arch: 0.2, fold: 0.3 }),
-  };
-}
+import { VoxBatch } from './voxkit';
+import type { Blocks } from './voxscene';
+import { bambooGeo, bananaGeo, broadGeo, cloverGeo, flowerGeo, groundFernGeo, grassGeo, ivyGeo, monsteraGeo, palmGeo, treeFernGeo } from './voxplants';
+
+// The garden's plants, one function each. Each stamps a plant made of small blocks (see voxplants.ts) into
+// the batch and leaves a collider behind for what you can't walk through. (x, y, z) is where each stands,
+// y being the soil it grows from. `face`, here and below: the way its leaves fan when it stands at an edge
+// (0 is +z); without it they ring all the way round.
 
 export interface Grow {
-  f: FoliageBatch;
-  s: Solids;
+  v: VoxBatch;
+  /** The blocks everything else is built of (0.05 m), the finer ones (0.025 m) for small things, and the ones that glow. */
+  b: Blocks;
+  fine: Blocks;
+  glowB: Blocks;
   r: () => number;
-  t: ReturnType<typeof templates>;
   colliders: Collider[];
-  /** Lantern glass: the geometry that glows. */
-  glow: THREE.BufferGeometry[];
-}
-
-const lerp = THREE.MathUtils.lerp;
-
-/** A colour a little different from `hex` each time: no two leaves quite alike. */
-export function tint(g: Grow, hex: string | THREE.Color, amt = 0.07): THREE.Color {
-  return new THREE.Color(hex).offsetHSL((g.r() - 0.5) * 0.035, (g.r() - 0.5) * 0.12, (g.r() - 0.5) * amt);
 }
 
-const pick = <T>(g: Grow, list: readonly T[]): T => list[Math.floor(g.r() * list.length)];
-
 const fixed = (x: number, z: number, r: number): Collider => ({ minX: x - r, maxX: x + r, minZ: z - r, maxZ: z + r, top: 99 });
+/** The nearest of a few sizes, so plants of about the same size share one model; the stamp's scale makes up the rest. */
+const near = (v: number, step: number) => Math.max(step, Math.round(v / step) * step);
 
-/** A thin curved stem, a petiole or a vine, as a tube through `pts`. */
-export function stem(g: Grow, pts: THREE.Vector3[], radius: number, color: string, kind: 'moss' | 'wood' = 'moss') {
-  const geo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts), pts.length * 3, radius, 4);
-  g.s.add(kind, geo, color, undefined, 0.12);
-}
-
-interface TrunkOpts {
-  color: string;
-  grain?: number;
-  /** A ring (a node, a leaf scar) every `seg` meters, standing out by `bump`. */
-  seg?: number;
-  bump?: number;
-  /** How far the top leans off the foot, as a fraction of the height. */
-  lean?: THREE.Vector2;
-}
-
-/** A tapered, ringed trunk bending as it rises. Returns its top. */
-function trunk(g: Grow, x: number, y: number, z: number, h: number, r0: number, r1: number, o: TrunkOpts): THREE.Vector3 {
-  const pts: THREE.Vector2[] = [new THREE.Vector2(r0 * 1.1, 0)];
-  const seg = o.seg ?? h;
-  const n = Math.max(1, Math.round(h / seg));
-  for (let k = 0; k < n; k++) {
-    for (const [a, b] of [
-      [0.04, 1],
-      [0.94, 1],
-      [1, 1 + (o.bump ?? 0)],
-    ]) {
-      const t = Math.min(1, (k + a) / n);
-      pts.push(new THREE.Vector2(lerp(r0, r1, t) * (b as number), t * h));
-    }
-  }
-  const geo = new THREE.LatheGeometry(pts, 4);
-  const lean = o.lean ?? new THREE.Vector2();
-  const p = geo.attributes.position;
-  for (let i = 0; i < p.count; i++) {
-    const t = p.getY(i) / h;
-    p.setX(i, p.getX(i) + lean.x * h * t * t);
-    p.setZ(i, p.getZ(i) + lean.y * h * t * t);
-  }
-  geo.computeVertexNormals();
-  g.s.add('wood', geo, o.color, new THREE.Matrix4().makeTranslation(x, y, z), 0.1, o.grain ?? 0.15);
-  return new THREE.Vector3(x + lean.x * h, y + h, z + lean.y * h);
-}
-
-/** A ring of fronds or big leaves round `top`: the young ones steep in the middle, the old ones low and long. */
-function rosette(g: Grow, tpl: THREE.BufferGeometry, top: THREE.Vector3, n: number, len: [number, number], pitch: [number, number], hex: string, sway: number, face?: number) {
-  const phase = g.r() * 6.28;
-  for (let i = 0; i < n; i++) {
-    const k = i / Math.max(1, n - 1);
-    const yaw = face === undefined ? i * 2.39996 + g.r() * 0.3 : face + (((i * 0.618034 + g.r() * 0.08) % 1) - 0.5) * 3.8;
-    const s = lerp(len[0], len[1], 0.35 + 0.65 * k) * (0.9 + 0.2 * g.r());
-    g.f.add(tpl, place(top.x, top.y, top.z, yaw, lerp(pitch[0], pitch[1], k) + (g.r() - 0.5) * 0.15, s, (g.r() - 0.5) * 0.3), tint(g, hex), sway, phase + g.r() * 0.6);
-  }
-}
-
-/** A tree fern: a fibrous trunk under a crown of arching fronds, with a fiddlehead or two unfurling. (`face`, here and below: the way its leaves fan, when it stands at an edge; 0 is +z.) */
 export function treeFern(g: Grow, x: number, y: number, z: number, h: number, face?: number) {
-  const lean = new THREE.Vector2((g.r() - 0.5) * 0.08, (g.r() - 0.5) * 0.08);
-  const top = trunk(g, x, y, z, h, 0.14, 0.09, { color: '#4d3626', grain: 0.3, seg: 0.16, bump: 0.1, lean });
-  rosette(g, g.t.fern, top, 15, [1.0, 1.55], [1.2, 0.35], '#3f8236', 0.075, face);
-  for (let i = 0; i < 2; i++) {
-    const a = g.r() * 6.28;
-    const dx = Math.cos(a) * 0.1;
-    const dz = Math.sin(a) * 0.1;
-    stem(g, [new THREE.Vector3(top.x, top.y, top.z), new THREE.Vector3(top.x + dx, top.y + 0.22, top.z + dz), new THREE.Vector3(top.x + dx * 2.2, top.y + 0.36, top.z + dz * 2.2), new THREE.Vector3(top.x + dx * 2.6, top.y + 0.3, top.z + dz * 2.6), new THREE.Vector3(top.x + dx * 2.2, top.y + 0.27, top.z + dz * 2.2)], 0.014, '#8aa84a');
-  }
-  g.colliders.push(fixed(top.x * 0.5 + x * 0.5, top.z * 0.5 + z * 0.5, 0.18));
+  const hb = near(h, 0.5);
+  const v = Math.floor(g.r() * 2);
+  g.v.add(`fern|${hb}|${face === undefined ? 0 : 1}|${v}`, () => treeFernGeo(hb, face !== undefined, v), x, y, z, face ?? g.r() * 6.28, h / hb);
+  g.colliders.push(fixed(x, z, 0.18));
 }
 
-/** A palm: a ringed grey-brown trunk, a green crownshaft, and feathery fronds arching out and down. */
 export function palm(g: Grow, x: number, y: number, z: number, h: number, face?: number) {
-  const lean = new THREE.Vector2((g.r() - 0.5) * 0.14, (g.r() - 0.5) * 0.14);
-  const top = trunk(g, x, y, z, h, 0.1, 0.07, { color: '#7a6a55', grain: 0.2, seg: 0.1, bump: 0.12, lean });
-  g.s.add('wood', blockCylinder(0.065, 0.07, 0.34, 8), '#8bb04e', new THREE.Matrix4().makeTranslation(top.x, top.y - 0.03, top.z), 0.08);
-  rosette(g, g.t.palm, top.clone().setY(top.y + 0.1), 11, [1.45, 1.85], [1.1, -0.1], '#3f8a3a', 0.09, face);
-  g.colliders.push(fixed(x + lean.x * h * 0.4, z + lean.y * h * 0.4, 0.15));
+  const hb = near(h, 0.5);
+  const v = Math.floor(g.r() * 2);
+  g.v.add(`palm|${hb}|${face === undefined ? 0 : 1}|${v}`, () => palmGeo(hb, face !== undefined, v), x, y, z, face ?? g.r() * 6.28, h / hb);
+  g.colliders.push(fixed(x, z, 0.15));
 }
 
-/** A banana plant: a thick pseudostem under a few huge, ragged, arching leaves; `bud` hangs a purple flower from it. */
+/** A banana plant; `bud` hangs a purple flower from it. */
 export function banana(g: Grow, x: number, y: number, z: number, h: number, face?: number, bud = false) {
-  const top = trunk(g, x, y, z, h * 0.72, 0.15, 0.09, { color: '#8aa45a', grain: 0.22, lean: new THREE.Vector2((g.r() - 0.5) * 0.06, (g.r() - 0.5) * 0.06) });
-  rosette(g, g.t.banana, top, 8, [1.5, 2.05], [1.15, 0.4], '#5f9e36', 0.11, face);
-  if (bud) {
-    const a = g.r() * 6.28;
-    const p = (r: number, dy: number) => new THREE.Vector3(top.x + Math.cos(a) * r, top.y + dy, top.z + Math.sin(a) * r);
-    stem(g, [p(0, -0.1), p(0.2, 0), p(0.4, -0.15), p(0.42, -0.4)], 0.022, '#7a8f4a');
-    g.s.add('cloth', blockBall(1, 10, 8), '#5a1d4c', new THREE.Matrix4().compose(p(0.42, -0.58), new THREE.Quaternion(), new THREE.Vector3(0.07, 0.17, 0.07)), 0.12);
-  }
+  const hb = near(h, 0.5);
+  const v = Math.floor(g.r() * 2);
+  g.v.add(`banana|${hb}|${face === undefined ? 0 : 1}|${bud ? 1 : 0}|${v}`, () => bananaGeo(hb, face !== undefined, bud, v), x, y, z, face ?? g.r() * 6.28, h / hb);
   g.colliders.push(fixed(x, z, 0.2));
 }
 
-/** A monstera: big glossy split leaves on long arching stalks. */
 export function monstera(g: Grow, x: number, y: number, z: number, scale: number, face?: number) {
-  const phase = g.r() * 6.28;
-  const n = 9;
-  for (let i = 0; i < n; i++) {
-    const yaw = face === undefined ? i * 2.39996 + g.r() * 0.4 : face + (((i * 0.618034 + g.r() * 0.08) % 1) - 0.5) * 3.4;
-    const reach = (0.35 + 0.5 * g.r()) * scale;
-    const rise = (0.45 + 0.5 * g.r()) * scale;
-    const [dx, dz] = [Math.sin(yaw), Math.cos(yaw)];
-    stem(g, [new THREE.Vector3(x, y, z), new THREE.Vector3(x + dx * reach * 0.2, y + rise * 0.7, z + dz * reach * 0.2), new THREE.Vector3(x + dx * reach, y + rise, z + dz * reach)], 0.011 * scale, '#5b8f3d');
-    const s = (0.42 + 0.2 * g.r()) * scale;
-    g.f.add(g.t.monstera, place(x + dx * reach, y + rise, z + dz * reach, yaw + (g.r() - 0.5) * 0.5, 0.1 + g.r() * 0.35, s, (g.r() - 0.5) * 0.25), tint(g, '#2a6a3a', 0.08), 0.03, phase + g.r() * 0.5, new THREE.Color('#b6cf86'));
-  }
+  const sb = near(scale, 0.25);
+  const v = Math.floor(g.r() * 2);
+  g.v.add(`monstera|${sb}|${face === undefined ? 0 : 1}|${v}`, () => monsteraGeo(sb, face !== undefined, v), x, y, z, face ?? g.r() * 6.28, scale / sb);
 }
 
 /** A clump of bamboo: slim ringed culms leaning a little apart, leafy only near the top. */
 export function bamboo(g: Grow, x: number, y: number, z: number, culms: number, h: number) {
-  const phase = g.r() * 6.28;
-  for (let i = 0; i < culms; i++) {
-    const a = g.r() * 6.28;
-    const off = 0.05 + g.r() * 0.3;
-    const ch = h * (0.75 + 0.25 * g.r());
-    const lean = new THREE.Vector2(Math.cos(a) * (0.03 + 0.07 * g.r()), Math.sin(a) * (0.03 + 0.07 * g.r()));
-    const bx = x + Math.cos(a) * off;
-    const bz = z + Math.sin(a) * off;
-    const top = trunk(g, bx, y, bz, ch, 0.026, 0.014, { color: pick(g, ['#8aa84a', '#a3b45a', '#6f9440']), grain: 0.1, seg: 0.32, bump: 0.45, lean });
-    const phase2 = phase + g.r() * 0.5;
-    for (let h2 = ch * 0.55; h2 < ch; h2 += 0.3) {
-      const t = h2 / ch;
-      const px = bx + lean.x * h2 * t;
-      const pz = bz + lean.y * h2 * t;
-      for (let k = 0; k < 3; k++) {
-        const yaw = g.r() * 6.28;
-        const pitch = -0.3 + g.r() * 0.7;
-        const s = (0.2 + 0.1 * g.r()) * (1.2 - 0.5 * t + 0.3);
-        g.f.add(g.t.bamboo, place(px, y + h2, pz, yaw, pitch, s, 0, 1.2), tint(g, pick(g, ['#5f9a3a', '#78a843', '#4f8a38']), 0.1), 0.05, phase2 + g.r() * 0.7);
-      }
-    }
-    g.f.add(g.t.bamboo, place(top.x, top.y, top.z, g.r() * 6.28, 1.2, 0.26, 0, 1.2), tint(g, '#78a843'), 0.06, phase2);
-  }
+  const hb = near(h, 0.5);
+  const v = Math.floor(g.r() * 2);
+  g.v.add(`bamboo|${culms}|${hb}|${v}`, () => bambooGeo(culms, hb, v), x, y, z, g.r() * 6.28, h / hb);
   g.colliders.push(fixed(x, z, 0.28 + culms * 0.012));
 }
 
 /** A tuft of tall grass: blades fanning up and arching over. `golds` mixes in some dry, straw-coloured ones. */
 export function grass(g: Grow, x: number, y: number, z: number, n: number, h: number, golds = 0.15) {
-  const phase = g.r() * 6.28;
-  for (let i = 0; i < n; i++) {
-    const a = g.r() * 6.28;
-    const off = g.r() * 0.12;
-    const hex = g.r() < golds ? pick(g, ['#c3b560', '#b5a552']) : pick(g, ['#86a64a', '#6f9a44', '#9ab455']);
-    g.f.add(g.t.blade, place(x + Math.cos(a) * off, y, z + Math.sin(a) * off, a, 1.0 + g.r() * 0.45, h * (0.6 + 0.5 * g.r()), (g.r() - 0.5) * 0.4, 0.8 + g.r() * 0.9), tint(g, hex, 0.1), 0.16, phase + g.r() * 0.9, new THREE.Color('#d9e3a2'));
-  }
+  const hb = near(h, 0.25);
+  const v = Math.floor(g.r() * 3);
+  g.v.add(`grass|${n}|${hb}|${golds}|${v}`, () => grassGeo(n, hb, golds, v), x, y, z, g.r() * 6.28, h / hb);
 }
 
 /** A mound of broad leaves, a hosta or an aspidistra. */
 export function broadleaf(g: Grow, x: number, y: number, z: number, n: number, s: number, hex = '#3f8a3e') {
-  const phase = g.r() * 6.28;
-  for (let i = 0; i < n; i++) {
-    const k = i / n;
-    g.f.add(g.t.broad, place(x + (g.r() - 0.5) * 0.12, y, z + (g.r() - 0.5) * 0.12, i * 2.39996, lerp(1.25, 0.55, k), s * (0.7 + 0.5 * g.r()), (g.r() - 0.5) * 0.4), tint(g, hex), 0.04, phase + g.r() * 0.5);
-  }
+  const v = Math.floor(g.r() * 3);
+  g.v.add(`broad|${n}|${s}|${hex}|${v}`, () => broadGeo(n, s, hex, v), x, y, z, g.r() * 6.28);
 }
 
 /** A small fern for the ground: a rosette of low fronds. */
 export function groundFern(g: Grow, x: number, y: number, z: number, s: number) {
-  rosette(g, g.t.smallFern, new THREE.Vector3(x, y, z), 9, [0.5 * s, 0.8 * s], [0.95, 0.3], '#4a8f3c', 0.045);
+  const v = Math.floor(g.r() * 3);
+  g.v.add(`gfern|${s}|${v}`, () => groundFernGeo(s, v), x, y, z, g.r() * 6.28);
 }
 
-/** A patch of clover or sorrel: little round leaves lying on the ground. */
+/** A patch of clover or sorrel: little leaves lying on the ground. */
 export function clover(g: Grow, x: number, y: number, z: number, radius: number, n: number) {
   for (let i = 0; i < n; i++) {
     const a = g.r() * 6.28;
     const d = Math.sqrt(g.r()) * radius;
-    g.f.add(g.t.clover, place(x + Math.cos(a) * d, y + 0.02 + g.r() * 0.04, z + Math.sin(a) * d, g.r() * 6.28, 0.05 + g.r() * 0.2, 0.08 + g.r() * 0.06, g.r() * 6.28), tint(g, pick(g, ['#5e9e44', '#6aa94c', '#4e8f3e']), 0.1), 0.01, g.r() * 6.28, new THREE.Color('#a8cf7e'));
+    const v = Math.floor(g.r() * 3);
+    g.v.add(`clover|${v}`, () => cloverGeo(v), x + Math.cos(a) * d, y + 0.01 + g.r() * 0.03, z + Math.sin(a) * d, g.r() * 6.28, 0.9 + g.r() * 0.5);
   }
 }
 
@@ -219,33 +91,15 @@ export const PETALS = { red: '#9d1128', orange: '#e86a1b', purple: '#6d3a9c', wh
 
 /** A flower on a stalk: a ring of petals round a gold eye (`head`), or a spike of small blooms up the top of the stem (`spike`). */
 export function flower(g: Grow, x: number, y: number, z: number, h: number, color: string, kind: 'head' | 'spike' = 'head') {
-  const sx = (g.r() - 0.5) * 0.12;
-  const sz = (g.r() - 0.5) * 0.12;
-  stem(g, [new THREE.Vector3(x, y, z), new THREE.Vector3(x + sx * 0.4, y + h * 0.5, z + sz * 0.4), new THREE.Vector3(x + sx, y + h, z + sz)], 0.006, '#4f7f35');
-  const [tx, tz] = [x + sx, z + sz];
-  const phase = g.r() * 6.28;
-  if (kind === 'head') {
-    const s = 0.06 + g.r() * 0.04;
-    const n = 8;
-    for (let i = 0; i < n; i++) g.f.add(g.t.petal, place(tx, y + h, tz, (i / n) * 6.28 + g.r() * 0.2, 0.55 + g.r() * 0.2, s), tint(g, color, 0.12), 0.012, phase, new THREE.Color(color).multiplyScalar(0.8));
-    for (let i = 0; i < 3; i++) g.f.add(g.t.petal, place(tx, y + h + 0.004, tz, (i / 3) * 6.28, 1.35, s * 0.35), new THREE.Color('#e8b92f'), 0.01, phase);
-  } else {
-    for (let k = 0; k < 14; k++) {
-      const t = 0.5 + 0.5 * (k / 14);
-      const a = k * 2.4;
-      g.f.add(g.t.petal, place(x + sx * t * t + Math.cos(a) * 0.012, y + h * t, z + sz * t * t + Math.sin(a) * 0.012, a, 0.9 - 0.9 * (k / 14), 0.05 * (1.2 - k / 20), 0), tint(g, color, 0.12), 0.012, phase);
-    }
-  }
+  const hb = near(h, 0.05);
+  const v = Math.floor(g.r() * 3);
+  g.v.add(`flower|${kind}|${color}|${hb}|${v}`, () => flowerGeo(hb, color, kind, v), x, y, z, g.r() * 6.28);
 }
 
 /** A hanging strand of ivy: a thin vine with heart-shaped leaves along it. */
 export function ivyStrand(g: Grow, x: number, y: number, z: number, len: number) {
-  const sway = (g.r() - 0.5) * 0.15;
-  const pt = (t: number) => new THREE.Vector3(x + sway * t * t + Math.sin(t * 5 + x) * 0.025, y - len * t, z + Math.cos(t * 4 + z) * 0.025);
-  stem(g, [pt(0), pt(0.33), pt(0.66), pt(1)], 0.006, '#4a6b32');
-  const phase = g.r() * 6.28;
-  for (let d = 0.05; d < len; d += 0.09 + g.r() * 0.05) {
-    const p = pt(d / len);
-    g.f.add(g.t.ivy, place(p.x, p.y, p.z, g.r() * 6.28, -0.5 - g.r() * 0.6, 0.07 + 0.04 * g.r(), g.r() - 0.5), tint(g, pick(g, ['#2f6b34', '#3d7d3a', '#4a8a40']), 0.1), 0.025, phase + g.r() * 0.4, new THREE.Color('#9cc47a'));
-  }
+  const lb = near(len, 0.3);
+  const v = Math.floor(g.r() * 3);
+  g.v.add(`ivy|${lb}|${v}`, () => ivyGeo(lb, v), x, y, z, g.r() * 6.28);
 }
+
diff --git a/src/client/features/rooftop/garden/seats.ts b/src/client/features/rooftop/garden/seats.ts
index a1d220891..7369fb092 100644
--- a/src/client/features/rooftop/garden/seats.ts
+++ b/src/client/features/rooftop/garden/seats.ts
@@ -1,13 +1,15 @@
 import * as THREE from 'three';
-import { Solids } from './leaves';
+import { Blocks } from './voxscene';
 import { box } from './structures';
 
 // The garden's seats. Each is a group of its own (its seat's interactable hangs on it), local +z the way
-// you face, with its few meshes merged by material.
+// you face, built of blocks.
+
+const FINE = 0.04;
 
 /** A low wooden bench with a slatted back and a linen cushion, 1.6 m long. */
 export function bench(): THREE.Group {
-  const s = new Solids();
+  const s = new Blocks(FINE);
   const wood = '#8f6038';
   for (const sx of [-1, 1]) {
     for (const sz of [-1, 1]) box(s, 'wood', '#6e4528', 0.07, 0.4, 0.07, sx * 0.7, 0.2, sz * 0.17);
@@ -16,14 +18,14 @@ export function bench(): THREE.Group {
   }
   for (const z of [-0.18, -0.06, 0.06, 0.18]) box(s, 'wood', wood, 1.62, 0.035, 0.105, 0, 0.42, z);
   for (const y of [0.58, 0.7, 0.82]) box(s, 'wood', wood, 1.62, 0.1, 0.025, 0, y, -0.24 - (y - 0.58) * 0.12, 0, -0.1);
-  box(s, 'cloth', '#c9b99a', 1.3, 0.05, 0.4, 0, 0.465, 0.03, 0, 0, 0.05, 0);
-  box(s, 'cloth', '#7f9a6b', 0.36, 0.3, 0.09, -0.42, 0.65, -0.16, 0, -0.5, 0.06, 0);
+  box(s, 'cloth', '#c9b99a', 1.3, 0.05, 0.4, 0, 0.465, 0.03, 0, 0, 0.1, 0);
+  box(s, 'cloth', '#7f9a6b', 0.36, 0.3, 0.09, -0.42, 0.65, -0.16, 0, -0.5, 0.1, 0);
   return finish(s);
 }
 
 /** A reclined timber lounge chair with arms and cushions. */
 export function lounge(): THREE.Group {
-  const s = new Solids();
+  const s = new Blocks(FINE);
   const wood = '#946440';
   for (const sx of [-1, 1]) {
     box(s, 'wood', '#6e4528', 0.05, 0.05, 0.9, sx * 0.31, 0.22, 0.02, 0, -0.14);
@@ -39,13 +41,14 @@ export function lounge(): THREE.Group {
     const d = 0.18 + i * 0.16;
     box(s, 'wood', wood, 0.62, 0.1, 0.025, 0, 0.27 + d * 0.87, -0.3 - d * 0.5, 0, -0.52);
   }
-  box(s, 'cloth', '#c4683f', 0.54, 0.07, 0.56, 0, 0.3, 0.02, 0, -0.14, 0.05, 0);
-  box(s, 'cloth', '#c4683f', 0.54, 0.62, 0.07, 0, 0.65, -0.47, 0, -0.52, 0.05, 0);
+  box(s, 'cloth', '#c4683f', 0.54, 0.07, 0.56, 0, 0.3, 0.02, 0, -0.14, 0.1, 0);
+  box(s, 'cloth', '#c4683f', 0.54, 0.62, 0.07, 0, 0.65, -0.47, 0, -0.52, 0.1, 0);
   return finish(s);
 }
 
-function finish(s: Solids): THREE.Group {
+function finish(s: Blocks): THREE.Group {
   const g = new THREE.Group();
-  g.add(s.build());
+  g.add(s.mesh());
   return g;
 }
+
diff --git a/src/client/features/rooftop/garden/structures.ts b/src/client/features/rooftop/garden/structures.ts
index f57b6e573..97744fa2a 100644
--- a/src/client/features/rooftop/garden/structures.ts
+++ b/src/client/features/rooftop/garden/structures.ts
@@ -1,17 +1,17 @@
-import { blockCylinder, blockCone, blockRing } from '../../../world/blocky';
+import { Blocks, rock } from './voxscene';
 import * as THREE from 'three';
-import type { Kind, Solids } from './leaves';
-import { ivyStrand, tint, type Grow } from './plants';
+import type { Kind } from './leaves';
+import { ivyStrand, type Grow } from './plants';
+import { blockCylinder } from '../../../world/blocky';
 
 // What the garden is built with: timber planter beds, the pergola over the seats, lanterns, and the
-// sound stone.
+// sound stone. All of it blocks (see voxscene.ts).
 
 const TIMBER = ['#8a5a36', '#9a6a42', '#7a4d2e', '#936240'];
 
-/** A box of `w` x `h` x `d` centred at (x, y, z), turned about y and then tipped about x. */
-export function box(s: Solids, kind: Kind, color: string, w: number, h: number, d: number, x: number, y: number, z: number, rotY = 0, rotX = 0, noise = 0.08, grain = 0.12) {
-  const m = new THREE.Matrix4().compose(new THREE.Vector3(x, y, z), new THREE.Quaternion().setFromEuler(new THREE.Euler(rotX, rotY, 0, 'YXZ')), new THREE.Vector3(1, 1, 1));
-  s.add(kind, new THREE.BoxGeometry(w, h, d), color, m, noise, grain);
+/** A box of `w` x `h` x `d` centred at (x, y, z), turned about y and then tipped about x, laid into `b`. (Cloth and soil get no grain.) */
+export function box(b: Blocks, kind: Kind, color: string, w: number, h: number, d: number, x: number, y: number, z: number, rotY = 0, rotX = 0, noise = 0.08, grain = 0.12) {
+  b.box(w, h, d, x, y, z, rotY, rotX, color, kind === 'wood' || kind === 'iron' ? grain : 0, noise);
 }
 
 /** How high a planter bed's soil is. */
@@ -23,15 +23,16 @@ export function planterBed(g: Grow, x0: number, x1: number, z0: number, z1: numb
   const wood = () => TIMBER[Math.floor(g.r() * TIMBER.length)];
   for (const row of [0, 1]) {
     const y = 0.12 + row * 0.23;
-    for (const sz of [-1, 1]) box(g.s, 'wood', wood(), w, 0.21, 0.05, cx, y, cz + sz * (d / 2 - 0.025));
-    for (const sx of [-1, 1]) box(g.s, 'wood', wood(), 0.05, 0.21, d - 0.1, cx + sx * (w / 2 - 0.025), y, cz);
+    for (const sz of [-1, 1]) box(g.b, 'wood', wood(), w, 0.21, 0.05, cx, y, cz + sz * (d / 2 - 0.025));
+    for (const sx of [-1, 1]) box(g.b, 'wood', wood(), 0.05, 0.21, d - 0.1, cx + sx * (w / 2 - 0.025), y, cz);
   }
   for (const sx of [-1, 1])
-    for (const sz of [-1, 1]) box(g.s, 'wood', '#6e4528', 0.08, 0.5, 0.08, cx + sx * (w / 2 - 0.04), 0.25, cz + sz * (d / 2 - 0.04));
+    for (const sz of [-1, 1]) box(g.b, 'wood', '#6e4528', 0.08, 0.5, 0.08, cx + sx * (w / 2 - 0.04), 0.25, cz + sz * (d / 2 - 0.04));
   // The cap along the top, a little proud of the boards.
-  for (const sz of [-1, 1]) box(g.s, 'wood', '#a06f48', w + 0.04, 0.035, 0.1, cx, 0.475, cz + sz * (d / 2 - 0.04));
-  for (const sx of [-1, 1]) box(g.s, 'wood', '#a06f48', 0.1, 0.035, d - 0.06, cx + sx * (w / 2 - 0.04), 0.475, cz);
-  box(g.s, 'soil', '#3a281c', w - 0.1, 0.1, d - 0.1, cx, SOIL - 0.05, cz, 0, 0, 0.18, 0);
+  for (const sz of [-1, 1]) box(g.b, 'wood', '#a06f48', w + 0.04, 0.035, 0.1, cx, 0.475, cz + sz * (d / 2 - 0.04));
+  for (const sx of [-1, 1]) box(g.b, 'wood', '#a06f48', 0.1, 0.035, d - 0.06, cx + sx * (w / 2 - 0.04), 0.475, cz);
+  // Soil in clods: every block a slightly different dark brown.
+  box(g.b, 'soil', '#3a281c', w - 0.1, 0.05, d - 0.1, cx, SOIL - 0.03, cz, 0, 0, 0.3, 0);
   g.colliders.push({ minX: x0, maxX: x1, minZ: z0, maxZ: z1, top: 0.48 });
 }
 
@@ -39,25 +40,26 @@ export function planterBed(g: Grow, x0: number, x1: number, z0: number, z1: numb
 export function lantern(g: Grow, x: number, z: number, hangFrom?: number) {
   const y = hangFrom === undefined ? 0 : hangFrom - 0.62;
   const iron = '#2a2623';
-  box(g.s, 'iron', iron, 0.17, 0.03, 0.17, x, y + 0.015, z);
-  for (const sx of [-1, 1]) for (const sz of [-1, 1]) box(g.s, 'iron', iron, 0.015, 0.22, 0.015, x + sx * 0.075, y + 0.14, z + sz * 0.075);
-  g.s.add('iron', blockCone(0.13, 0.09, 4).rotateY(Math.PI / 4), iron, new THREE.Matrix4().makeTranslation(x, y + 0.295, z), 0);
-  g.s.add('iron', blockRing(0.035, 0.007), iron, new THREE.Matrix4().makeTranslation(x, y + 0.36, z), 0);
-  if (hangFrom !== undefined) box(g.s, 'iron', iron, 0.01, hangFrom - y - 0.36, 0.01, x, (hangFrom + y + 0.36) / 2, z);
-  g.glow.push(new THREE.BoxGeometry(0.12, 0.2, 0.12).translate(x, y + 0.14, z));
+  const f = g.fine;
+  box(f, 'iron', iron, 0.17, 0.03, 0.17, x, y + 0.015, z, 0, 0, 0.04);
+  for (const sx of [-1, 1]) for (const sz of [-1, 1]) box(f, 'iron', iron, 0.025, 0.22, 0.025, x + sx * 0.075, y + 0.14, z + sz * 0.075, 0, 0, 0.04, 0);
+  for (const [w, dy] of [[0.2, 0.26], [0.14, 0.29], [0.08, 0.32]] as const) box(f, 'iron', iron, w, 0.03, w, x, y + dy, z, 0, 0, 0.04, 0);
+  box(f, 'iron', iron, 0.04, 0.04, 0.04, x, y + 0.36, z, 0, 0, 0.04, 0);
+  if (hangFrom !== undefined) box(f, 'iron', iron, 0.025, hangFrom - y - 0.36, 0.025, x, (hangFrom + y + 0.36) / 2, z, 0, 0, 0.04, 0);
+  g.glowB.box(0.1, 0.18, 0.1, x, y + 0.14, z, 0, 0, '#ffe2b0', 0, 0);
 }
 
 /** The pergola over the seats: timber posts, two beams, a lattice of rafters and slats, and ivy hanging from it. */
 export function pergola(g: Grow, x0: number, x1: number, z0: number, z1: number, top: number) {
   for (const x of [x0, (x0 + x1) / 2, x1])
     for (const z of [z0, z1]) {
-      box(g.s, 'wood', '#7a4d2e', 0.13, top, 0.13, x, top / 2, z);
-      box(g.s, 'wood', '#5e3a22', 0.2, 0.06, 0.2, x, 0.03, z);
+      box(g.b, 'wood', '#7a4d2e', 0.13, top, 0.13, x, top / 2, z);
+      box(g.b, 'wood', '#5e3a22', 0.2, 0.06, 0.2, x, 0.03, z);
       g.colliders.push({ minX: x - 0.1, maxX: x + 0.1, minZ: z - 0.1, maxZ: z + 0.1, top: 99 });
     }
-  for (const z of [z0, z1]) box(g.s, 'wood', '#8a5a36', x1 - x0 + 0.5, 0.2, 0.12, (x0 + x1) / 2, top + 0.1, z);
-  for (let x = x0 - 0.15; x <= x1 + 0.2; x += 0.55) box(g.s, 'wood', '#9a6a42', 0.08, 0.12, z1 - z0 + 0.5, x, top + 0.26, (z0 + z1) / 2);
-  for (let z = z0; z <= z1 + 0.01; z += 0.4) box(g.s, 'wood', '#a06f48', x1 - x0 + 0.7, 0.04, 0.04, (x0 + x1) / 2, top + 0.34, z);
+  for (const z of [z0, z1]) box(g.b, 'wood', '#8a5a36', x1 - x0 + 0.5, 0.2, 0.12, (x0 + x1) / 2, top + 0.1, z);
+  for (let x = x0 - 0.15; x <= x1 + 0.2; x += 0.55) box(g.b, 'wood', '#9a6a42', 0.08, 0.12, z1 - z0 + 0.5, x, top + 0.26, (z0 + z1) / 2);
+  for (let z = z0; z <= z1 + 0.01; z += 0.4) box(g.b, 'wood', '#a06f48', x1 - x0 + 0.7, 0.04, 0.04, (x0 + x1) / 2, top + 0.34, z);
   // Ivy hanging from the beams and rafters.
   for (let i = 0; i < 26; i++) {
     const onBeam = i % 2 === 0;
@@ -68,18 +70,15 @@ export function pergola(g: Grow, x0: number, x1: number, z0: number, z1: number,
 }
 
 /**
- * The sound stone: a standing stone with a wooden cap and two faint glowing rings round it. The meshes go
- * into the garden's merged ones; the group returned is what you aim at (a hit volume, nothing visible).
+ * The sound stone: a standing stone with a wooden cap and two faint glowing rings round it. The blocks go
+ * into the garden's; the group returned is what you aim at (a hit volume, nothing visible).
  */
 export function soundStone(g: Grow, x: number, z: number): THREE.Group {
-  const rock = new THREE.IcosahedronGeometry(0.4, 1);
-  rock.deleteAttribute('uv');
-  const turn = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), 0.6);
-  g.s.add('stone', rock, tint(g, '#7b7f7a'), new THREE.Matrix4().compose(new THREE.Vector3(x, 0.36, z), turn, new THREE.Vector3(0.85, 1.0, 0.8)), 0.12, 0, 0.6);
-  box(g.s, 'wood', '#8a5a36', 0.34, 0.05, 0.34, x, 0.76, z, 0.6);
-  g.s.add('wood', blockCylinder(0.07, 0.08, 0.04, 12), '#5e3a22', new THREE.Matrix4().makeTranslation(x, 0.8, z), 0.05);
-  g.glow.push(blockRing(0.27, 0.012).translate(x, 0.5, z));
-  g.glow.push(blockRing(0.37, 0.008).translate(x, 0.34, z));
+  g.b.blob(x, 0.36, z, 0.34, 0.4, 0.32, 0.6, rock(['#7b7f7a', '#6f746f', '#868a84'], 0.45), 0.2);
+  box(g.b, 'wood', '#8a5a36', 0.34, 0.05, 0.34, x, 0.78, z, 0.6);
+  box(g.b, 'wood', '#5e3a22', 0.14, 0.05, 0.14, x, 0.83, z, 0.6);
+  g.glowB.ring(x, 0.5, z, 0.37, '#ffffff');
+  g.glowB.ring(x, 0.34, z, 0.4, '#ffffff');
   g.colliders.push({ minX: x - 0.36, maxX: x + 0.36, minZ: z - 0.36, maxZ: z + 0.36, top: 0.85 });
   const target = new THREE.Group();
   const hit = new THREE.Mesh(blockCylinder(0.42, 0.45, 0.85, 10), new THREE.MeshBasicMaterial({ visible: false }));
@@ -87,3 +86,5 @@ export function soundStone(g: Grow, x: number, z: number): THREE.Group {
   target.add(hit);
   return target;
 }
+
+
diff --git a/src/client/features/rooftop/garden/voxkit.ts b/src/client/features/rooftop/garden/voxkit.ts
new file mode 100644
index 000000000..d43c311da
--- /dev/null
+++ b/src/client/features/rooftop/garden/voxkit.ts
@@ -0,0 +1,162 @@
+import * as THREE from 'three';
+import { Vox } from '../../../world/vox';
+
+// The tools the garden's plants are built with: a painter that lays tiny blocks along lines and curves,
+// fronds, broad leaves and trunks made of them, and a batch that stamps each finished plant (built once,
+// then shared) wherever it grows.
+
+export type V3 = [number, number, number];
+const [CA, CB] = [new THREE.Color(), new THREE.Color()];
+export const mix = (a: string, b: string, t: number): string => '#' + CA.set(a).lerp(CB.set(b), Math.min(1, Math.max(0, t))).getHexString();
+const lerp = THREE.MathUtils.lerp;
+
+export class Paint {
+  readonly v: Vox;
+  constructor(readonly s: number, jitter = 0.09) {
+    this.v = new Vox(s, jitter);
+  }
+  dot(x: number, y: number, z: number, c: string) {
+    this.v.put(Math.floor(x / this.s), Math.floor(y / this.s), Math.floor(z / this.s), c);
+  }
+  line(a: V3, b: V3, c: string | ((t: number) => string)) {
+    const n = Math.max(1, Math.ceil(Math.hypot(b[0] - a[0], b[1] - a[1], b[2] - a[2]) / (this.s * 0.5)));
+    for (let i = 0; i <= n; i++) {
+      const t = i / n;
+      this.dot(lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t), typeof c === 'string' ? c : c(t));
+    }
+  }
+}
+
+/** A path rising from base at an angle (pitch) along a heading (yaw; 0 is +z) and bending down by droop. */
+export function spine(base: V3, yaw: number, pitch: number, len: number, droop: number) {
+  const [dx, dz, c, sn] = [Math.sin(yaw), Math.cos(yaw), Math.cos(pitch), Math.sin(pitch)];
+  return { dx, dz, at: (t: number): V3 => [base[0] + dx * len * c * t, base[1] + len * (sn * t - droop * t * t), base[2] + dz * len * c * t] };
+}
+
+export interface FrondOpts {
+  pairs: number;
+  leaf: number;
+  sweep: number;
+  drop: number;
+  rib: string;
+  a: string;
+  b: string;
+}
+
+/** A feathery frond: a rib with a row of leaflets down each side, each a short line of blocks drooping away. */
+export function frond(p: Paint, base: V3, yaw: number, pitch: number, len: number, droop: number, o: FrondOpts) {
+  const sp = spine(base, yaw, pitch, len, droop);
+  const [px, pz] = [sp.dz, -sp.dx];
+  p.line(sp.at(0), sp.at(1), (t) => mix(o.rib, o.b, t * 0.8));
+  for (let k = 1; k <= o.pairs; k++) {
+    const t = 0.06 + (0.94 * k) / o.pairs;
+    const q = sp.at(t);
+    const ll = o.leaf * Math.min(1, t / 0.2) * (1 - 0.7 * t * t);
+    const col = mix(o.a, o.b, t);
+    for (const side of [-1, 1]) {
+      const [ox, oz] = [(px * Math.cos(o.sweep) * side + sp.dx * Math.sin(o.sweep)) * ll, (pz * Math.cos(o.sweep) * side + sp.dz * Math.sin(o.sweep)) * ll];
+      const mid: V3 = [q[0] + ox * 0.5, q[1] - ll * o.drop * 0.12, q[2] + oz * 0.5];
+      p.line(q, mid, col);
+      p.line(mid, [q[0] + ox, q[1] - ll * o.drop, q[2] + oz], mix(col, o.b, 0.5));
+    }
+  }
+}
+
+export interface BladeOpts {
+  prof: (t: number) => number;
+  droop: number;
+  fold: number;
+  a: string;
+  b: string;
+  vein: string;
+  skip?: (t: number, u: number) => boolean;
+  edge?: string;
+}
+
+/** A broad leaf: a solid sheet of blocks along a bending midrib, with paler veins; t runs base to tip, u edge to edge. */
+export function blade(p: Paint, base: V3, yaw: number, pitch: number, len: number, wid: number, o: BladeOpts) {
+  const sp = spine(base, yaw, pitch, len, o.droop);
+  const [px, pz] = [sp.dz, -sp.dx];
+  const dt = (p.s * 0.5) / len;
+  for (let t = 0; t <= 1.0001; t += dt) {
+    const w = (wid * o.prof(Math.min(1, t))) / 2;
+    const m = Math.max(0, Math.ceil(w / (p.s * 0.5)));
+    const q = sp.at(Math.min(1, t));
+    for (let i = -m; i <= m; i++) {
+      const u = m ? i / m : 0;
+      const au = Math.abs(u);
+      if (o.skip?.(t, au)) continue;
+      let col = mix(o.a, o.b, t * 0.9 + au * 0.15);
+      if (au < 0.07) col = o.vein;
+      else if ((((t * len) / (p.s * 4) - au * 1.5) % 1 + 1) % 1 < 0.16) col = mix(col, o.vein, 0.3);
+      if (o.edge && au > 0.86) col = o.edge;
+      p.dot(q[0] + px * u * w, q[1] + o.fold * au * w, q[2] + pz * u * w, col);
+    }
+  }
+}
+
+/** A round trunk of blocks, tapering, leaning and ringed; returns where its top is. */
+export function column(p: Paint, h: number, r0: number, r1: number, lean: [number, number], color: (t: number, y: number) => string, ring?: (t: number, y: number) => number): V3 {
+  const s = p.s;
+  for (let y = 0; y < h; y += s) {
+    const t = y / h;
+    const r = lerp(r0, r1, t) + (ring ? ring(t, y) : 0);
+    const [ox, oz] = [lean[0] * h * t * t, lean[1] * h * t * t];
+    const c = color(t, y);
+    const n = Math.ceil(r / s);
+    for (let i = -n; i <= n; i++) for (let k = -n; k <= n; k++) if ((i * s) ** 2 + (k * s) ** 2 <= r * r) p.dot(ox + i * s, y, oz + k * s, c);
+  }
+  return [lean[0] * h, h, lean[1] * h];
+}
+
+/** Each distinct plant is built once (the first time it's asked for) and kept. */
+const made = new Map<string, THREE.BufferGeometry>();
+
+/** Plants stamped with a position, a turn and a scale, as one instanced mesh per kind of plant. Leaves are kept inside the garden's glass, and sway. */
+export class VoxBatch {
+  private kinds = new Map<string, { geo: THREE.BufferGeometry; at: THREE.Matrix4[] }>();
+  constructor(private limit: THREE.Box3) {}
+
+  add(key: string, build: () => THREE.BufferGeometry, x: number, y: number, z: number, yaw: number, scale = 1) {
+    let geo = made.get(key);
+    if (!geo) made.set(key, (geo = build()));
+    let k = this.kinds.get(key);
+    if (!k) this.kinds.set(key, (k = { geo, at: [] }));
+    k.at.push(new THREE.Matrix4().compose(new THREE.Vector3(x, y, z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), yaw), new THREE.Vector3(scale, scale, scale)));
+  }
+
+  build(wind: { value: number }): THREE.Group {
+    const group = new THREE.Group();
+    const box = { value: new THREE.Vector4() };
+    const mat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.85, metalness: 0 });
+    mat.onBeforeCompile = (sh) => {
+      sh.uniforms.uT = wind;
+      sh.uniforms.uBox = box;
+      sh.vertexShader = 'uniform float uT;\nuniform vec4 uBox;\n' + sh.vertexShader
+        .replace('#include <begin_vertex>', `vec3 transformed = position;
+          float hh = max(position.y, 0.0);
+          float ph = instanceMatrix[3].x * 1.7 + instanceMatrix[3].z * 2.3;
+          transformed.x += sin(uT * 1.3 + ph + position.y * 2.0) * 0.012 * hh * hh;
+          transformed.z += cos(uT * 1.1 + ph + position.y * 1.5) * 0.01 * hh * hh;`)
+        .replace('#include <project_vertex>', `vec4 wp = modelMatrix * instanceMatrix * vec4(transformed, 1.0);
+          wp.x = clamp(wp.x, uBox.x, uBox.z);
+          wp.z = clamp(wp.z, uBox.y, uBox.w);
+          vec4 mvPosition = viewMatrix * wp;
+          gl_Position = projectionMatrix * mvPosition;`);
+    };
+    mat.customProgramCacheKey = () => 'garden-vox';
+    for (const { geo, at } of this.kinds.values()) {
+      const mesh = new THREE.InstancedMesh(geo, mat, at.length);
+      at.forEach((m, i) => mesh.setMatrixAt(i, m));
+      mesh.castShadow = mesh.receiveShadow = true;
+      mesh.frustumCulled = false;
+      mesh.onBeforeRender = () => {
+        const t = mesh.matrixWorld.elements;
+        box.value.set(this.limit.min.x + t[12], this.limit.min.z + t[14], this.limit.max.x + t[12], this.limit.max.z + t[14]);
+      };
+      group.add(mesh);
+    }
+    return group;
+  }
+}
+
diff --git a/src/client/features/rooftop/garden/voxplants.ts b/src/client/features/rooftop/garden/voxplants.ts
new file mode 100644
index 000000000..601862ed7
--- /dev/null
+++ b/src/client/features/rooftop/garden/voxplants.ts
@@ -0,0 +1,247 @@
+import * as THREE from 'three';
+import { mulberry32 } from '../../../../shared/rng';
+import { Paint, blade, column, frond, mix, spine, type FrondOpts, type V3 } from './voxkit';
+
+// The garden's plants as models made of small blocks (4 to 5 cm: the finest in the building), each a
+// few variants, built once and stamped wherever it grows. Their yaw 0 fans toward +z; the placement
+// turns them. Greens run dark at the base to pale at the tip, trunks are ringed, flowers have eyes.
+
+const lerp = THREE.MathUtils.lerp;
+const jig = (c: string, R: () => number, a = 0.06) => mix(c, R() < 0.5 ? '#000000' : '#ffffff', R() * a);
+/** Heading of the i-th of n leaves: round the plant, or fanned out in front of it (for plants at an edge). */
+const heading = (i: number, R: () => number, fan: boolean) => (fan ? (((i * 0.618034 + R() * 0.08) % 1) - 0.5) * 3.8 : i * 2.39996 + R() * 0.3);
+
+/** A ring of fronds round a trunk's top: young ones steep, old ones low and long. */
+function crown(p: Paint, R: () => number, top: V3, n: number, len: [number, number], pitch: [number, number], droop: number, fan: boolean, o: FrondOpts, greens: [string, string][]) {
+  for (let i = 0; i < n; i++) {
+    const k = i / Math.max(1, n - 1);
+    const [a, b] = greens[Math.floor(R() * greens.length)];
+    frond(p, top, heading(i, R, fan), lerp(pitch[0], pitch[1], k) + (R() - 0.5) * 0.15, lerp(len[0], len[1], 0.35 + 0.65 * k) * (0.9 + 0.2 * R()), droop, { ...o, a: jig(a, R), b: jig(b, R) });
+  }
+}
+
+const FERN_GREENS: [string, string][] = [['#2c6a2b', '#5fa646'], ['#35742e', '#6bb04a'], ['#2a6130', '#52993f']];
+
+export function treeFernGeo(h: number, fan: boolean, variant: number) {
+  const R = mulberry32(variant * 977 + Math.round(h * 40));
+  const p = new Paint(0.04);
+  const lean: [number, number] = [(R() - 0.5) * 0.08, (R() - 0.5) * 0.08];
+  const bark = ['#4d3626', '#5a402d', '#6a4b34', '#3f2c1f'];
+  const top = column(p, h, 0.15, 0.1, lean, (_t, y) => ((y / 0.16) % 1 < 0.2 ? '#2e1f15' : bark[Math.floor(y / 0.04) % 4]), (_t, y) => ((y / 0.16) % 1 < 0.2 ? 0.03 : 0));
+  p.v.ell(top[0], top[1] + 0.02, top[2], 0.13, 0.07, 0.13, '#3b2a1d');
+  crown(p, R, top, 15, [1.0, 1.55], [1.2, 0.3], 0.9, fan, { pairs: 14, leaf: 0.24, sweep: 0.7, drop: 0.5, rib: '#6b7f3a', a: '', b: '' }, FERN_GREENS);
+  for (let i = 0; i < 2; i++) {
+    const a = R() * 6.28;
+    const [cx, cz] = [Math.cos(a) * 0.1, Math.sin(a) * 0.1];
+    p.line(top, [top[0] + cx, top[1] + 0.3, top[2] + cz], '#8aa84a');
+    for (let q = 0; q < 14; q++) {
+      const t = q / 13;
+      const r = 0.06 * (1 - t * 0.8);
+      p.dot(top[0] + cx + Math.cos(a) * (r * Math.sin(t * 6.5) - 0.0), top[1] + 0.3 + r * Math.cos(t * 6.5) * 0.9, top[2] + cz + Math.sin(a) * (r * Math.sin(t * 6.5)), mix('#9cc04f', '#c4dc7a', t));
+    }
+  }
+  return p.v.build();
+}
+
+export function palmGeo(h: number, fan: boolean, variant: number) {
+  const R = mulberry32(variant * 733 + Math.round(h * 40));
+  const p = new Paint(0.05);
+  const lean: [number, number] = [(R() - 0.5) * 0.14, (R() - 0.5) * 0.14];
+  const grey = ['#7a6a55', '#6c5d49', '#85755f'];
+  const top = column(p, h, 0.1, 0.07, lean, (_t, y) => ((y / 0.1) % 1 < 0.3 ? '#4f4334' : grey[Math.floor(y / 0.05) % 3]), (_t, y) => ((y / 0.1) % 1 < 0.3 ? 0 : 0.02));
+  for (let y = 0; y < 0.34; y += 0.05) {
+    const c = mix('#7da845', '#a6c85e', y / 0.34);
+    for (const [i, k] of [[0, 0], [1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [-1, -1], [1, -1], [-1, 1]]) p.dot(top[0] + i * 0.05, top[1] - 0.06 + y, top[2] + k * 0.05, c);
+  }
+  const crownTop: V3 = [top[0], top[1] + 0.12, top[2]];
+  crown(p, R, crownTop, 11, [1.45, 1.85], [1.1, -0.1], 0.9, fan, { pairs: 18, leaf: 0.38, sweep: 0.55, drop: 0.85, rib: '#5d8a38', a: '', b: '' }, [['#2f7a30', '#5fa84a'], ['#36822f', '#6cb350'], ['#2b6f2e', '#58a043']]);
+  for (let i = 0; i < 4; i++) p.v.ell(top[0] + Math.cos(i * 1.7) * 0.09, top[1] - 0.14, top[2] + Math.sin(i * 1.7) * 0.09, 0.055, 0.065, 0.055, '#6b4a2a');
+  return p.v.build();
+}
+
+export function bananaGeo(h: number, fan: boolean, bud: boolean, variant: number) {
+  const R = mulberry32(variant * 421 + Math.round(h * 40) + (bud ? 9 : 0));
+  const p = new Paint(0.05);
+  const top = column(p, h * 0.72, 0.15, 0.09, [(R() - 0.5) * 0.06, (R() - 0.5) * 0.06], (t, y) => (t < 0.08 ? '#7a6a45' : (y / 0.14) % 1 < 0.14 ? '#5f7a38' : Math.floor(y / 0.05) % 2 ? '#8fae5c' : '#99b866'));
+  for (let i = 0; i < 8; i++) {
+    const k = i / 7;
+    const len = lerp(1.5, 2.05, 0.35 + 0.65 * k) * (0.9 + 0.2 * R());
+    const seed = R() * 40;
+    blade(p, top, heading(i, R, fan), lerp(1.15, 0.4, k) + (R() - 0.5) * 0.15, len, len * 0.36, {
+      prof: (t) => Math.pow(Math.sin(Math.PI * Math.pow(t, 0.75)), 0.7),
+      droop: 0.9,
+      fold: 0.25,
+      a: jig('#3a8228', R),
+      b: jig('#6db23c', R),
+      vein: '#a6cc5a',
+      skip: (t, u) => u > 0.5 && t > 0.15 && Math.sin(t * len * 38 + seed) > 0.35 + (1 - u) * 1.2,
+    });
+  }
+  if (bud) {
+    const a = R() * 6.28;
+    const at = (r: number, dy: number): V3 => [top[0] + Math.cos(a) * r, top[1] + dy, top[2] + Math.sin(a) * r];
+    p.line(at(0, -0.1), at(0.2, 0.0), '#7a8f4a');
+    p.line(at(0.2, 0.0), at(0.4, -0.15), '#7a8f4a');
+    p.line(at(0.4, -0.15), at(0.42, -0.42), '#6d8240');
+    const c = at(0.42, -0.6);
+    p.v.ell(c[0], c[1], c[2], 0.07, 0.17, 0.07, (_i, j) => (j % 3 === 0 ? '#7a2a64' : '#5a1d4c'));
+    for (let q = 0; q < 3; q++) p.v.ell(c[0] + Math.cos(a) * (0.07 + q * 0.01), c[1] + 0.12 - q * 0.08, c[2] + Math.sin(a) * 0.07, 0.04, 0.04, 0.04, '#b9cf55');
+  }
+  return p.v.build();
+}
+
+export function monsteraGeo(scale: number, fan: boolean, variant: number) {
+  const R = mulberry32(variant * 311 + Math.round(scale * 40));
+  const p = new Paint(0.035);
+  for (let i = 0; i < 9; i++) {
+    const yaw = heading(i, R, fan);
+    const reach = (0.35 + 0.5 * R()) * scale;
+    const rise = (0.45 + 0.5 * R()) * scale;
+    const [dx, dz] = [Math.sin(yaw), Math.cos(yaw)];
+    const end: V3 = [dx * reach, rise, dz * reach];
+    p.line([0, 0, 0], [dx * reach * 0.2, rise * 0.7, dz * reach * 0.2], '#4f8236');
+    p.line([dx * reach * 0.2, rise * 0.7, dz * reach * 0.2], end, '#5b8f3d');
+    const len = (0.42 + 0.2 * R()) * scale;
+    const holes = [[0.35, 0.3], [0.55, 0.38], [0.72, 0.3]];
+    blade(p, end, yaw + (R() - 0.5) * 0.5, 0.1 + R() * 0.35, len, len * 0.95, {
+      prof: (t) => Math.pow(Math.sin(Math.PI * Math.pow(t, 0.62)), 0.85),
+      droop: 0.35,
+      fold: 0.12,
+      a: jig('#1f5a33', R),
+      b: jig('#2e7a40', R),
+      vein: '#8fbf6a',
+      skip: (t, u) => (u > 0.55 && t > 0.2 && t < 0.9 && (t * 9) % 1 < 0.5 && Math.floor(t * 9) % 2 === 0) || (t < 0.1 && u < 0.18) || holes.some(([ht, hu]) => (t - ht) ** 2 + (u - hu) ** 2 * 0.5 < 0.0035),
+    });
+  }
+  return p.v.build();
+}
+
+export function bambooGeo(culms: number, h: number, variant: number) {
+  const R = mulberry32(variant * 199 + culms * 31 + Math.round(h * 10));
+  const p = new Paint(0.04);
+  const s = p.s;
+  for (let i = 0; i < culms; i++) {
+    const a = R() * 6.28;
+    const off = 0.05 + R() * 0.3;
+    const ch = h * (0.75 + 0.25 * R());
+    const lean = [Math.cos(a) * (0.03 + 0.07 * R()), Math.sin(a) * (0.03 + 0.07 * R())];
+    const [bx, bz] = [Math.cos(a) * off, Math.sin(a) * off];
+    const col = ['#8aa84a', '#a3b45a', '#6f9440'][Math.floor(R() * 3)];
+    const node = mix(col, '#3f5a22', 0.55);
+    const at = (y: number): [number, number] => [bx + lean[0] * ch * (y / ch) ** 2, bz + lean[1] * ch * (y / ch) ** 2];
+    for (let y = 0; y < ch; y += s) {
+      const [cx, cz] = at(y);
+      const isNode = (y / 0.32) % 1 < 0.13;
+      const c = isNode ? node : y % 0.32 > 0.2 ? mix(col, '#cfe08a', 0.2) : col;
+      if (y < ch * 0.4) for (const [di, dk] of [[0, 0], [1, 0], [0, 1], [1, 1]]) p.dot(Math.round(cx / s) * s + (di - 0.5) * s, y, Math.round(cz / s) * s + (dk - 0.5) * s, c);
+      else p.dot(cx, y, cz, c);
+      if (isNode && y > ch * 0.25) for (const [di, dk] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) p.dot(cx + di * s, y, cz + dk * s, node);
+    }
+    for (let y = ch * 0.5; y < ch; y += 0.3) {
+      const [cx, cz] = at(y);
+      for (let k = 0; k < 3; k++) blade(p, [cx, y, cz], R() * 6.28, -0.3 + R() * 0.7, (0.22 + 0.1 * R()) * (1.5 - 0.5 * (y / ch)), 0.05, { prof: (t) => Math.sin(Math.PI * Math.pow(t, 0.8)), droop: 0.6, fold: 0, a: jig(['#4f8a38', '#5f9a3a'][k % 2], R), b: '#8dbf4e', vein: '#9ccd5a' });
+    }
+  }
+  return p.v.build();
+}
+
+export function grassGeo(n: number, h: number, golds: number, variant: number) {
+  const R = mulberry32(variant * 557 + n * 13 + Math.round(h * 20));
+  const p = new Paint(0.025, 0.1);
+  for (let i = 0; i < n; i++) {
+    const a = R() * 6.28;
+    const off = R() * 0.1;
+    const dry = R() < golds;
+    const hex = dry ? ['#c3b560', '#b5a552'][i % 2] : ['#86a64a', '#6f9a44', '#9ab455'][Math.floor(R() * 3)];
+    const sp = spine([Math.cos(a) * off, 0, Math.sin(a) * off], a, 1.0 + R() * 0.45, h * (0.6 + 0.5 * R()), 0.8 + R() * 0.9);
+    const n2 = Math.ceil((h * 1.5) / 0.0125);
+    for (let q = 0; q <= n2; q++) {
+      const t = q / n2;
+      const pt = sp.at(t);
+      const c = dry ? mix(hex, '#e2d98a', t * 0.5) : mix('#3f6a2a', mix(hex, '#d9e3a2', t * t * 0.4), Math.min(1, t * 2.2));
+      p.dot(pt[0], pt[1], pt[2], c);
+      if (t < 0.25) p.dot(pt[0] + sp.dz * 0.025, pt[1], pt[2] - sp.dx * 0.025, c);
+    }
+  }
+  return p.v.build();
+}
+
+export function broadGeo(n: number, s: number, hex: string, variant: number) {
+  const R = mulberry32(variant * 887 + n * 17 + Math.round(s * 100));
+  const p = new Paint(0.03);
+  for (let i = 0; i < n; i++) {
+    const k = i / n;
+    const len = s * (0.7 + 0.5 * R());
+    blade(p, [(R() - 0.5) * 0.1, 0, (R() - 0.5) * 0.1], i * 2.39996, lerp(1.25, 0.55, k), len, len * 0.55, {
+      prof: (t) => Math.pow(Math.sin(Math.PI * Math.pow(t, 0.7)), 0.8),
+      droop: 0.7,
+      fold: 0.3,
+      a: jig(mix(hex, '#10301a', 0.25), R),
+      b: jig(mix(hex, '#8ad05a', 0.25), R),
+      vein: '#b7dc8a',
+      edge: i % 3 === 0 ? '#c9dc78' : undefined,
+    });
+  }
+  return p.v.build();
+}
+
+export function groundFernGeo(s: number, variant: number) {
+  const R = mulberry32(variant * 61 + Math.round(s * 10));
+  const p = new Paint(0.03);
+  crown(p, R, [0, 0, 0], 9, [0.5 * s, 0.8 * s], [0.95, 0.3], 0.6, false, { pairs: 9, leaf: 0.13 * s, sweep: 0.7, drop: 0.5, rib: '#5f7a35', a: '', b: '' }, [['#3a7f33', '#69b24b'], ['#2f7030', '#5aa543']]);
+  return p.v.build();
+}
+
+/** One clover leaf lying flat: three round lobes and a pale centre. */
+export function cloverGeo(variant: number) {
+  const p = new Paint(0.02, 0.1);
+  const g = [['#5e9e44', '#7fc05a'], ['#6aa94c', '#8ccb64'], ['#4e8f3e', '#6fb350']][variant % 3];
+  for (const a of [0, 2.1, 4.2]) {
+    const [cx, cz] = [Math.cos(a) * 0.026, Math.sin(a) * 0.026];
+    for (const [i, k] of [[0, 0], [1, 0], [0, 1], [1, 1], [-1, 0], [0, -1]]) p.dot(cx + i * 0.02, 0, cz + k * 0.02, g[(i + k) & 1]);
+  }
+  p.dot(0, 0.02, 0, '#d4efae');
+  return p.v.build();
+}
+
+export function flowerGeo(h: number, color: string, kind: 'head' | 'spike', variant: number) {
+  const R = mulberry32(variant * 97 + Math.round(h * 100) + color.charCodeAt(1));
+  const p = new Paint(0.02, 0.08);
+  const [sx, sz] = [(R() - 0.5) * 0.12, (R() - 0.5) * 0.12];
+  p.line([0, 0, 0], [sx, h, sz], (t) => mix('#3e6b2c', '#5f9040', t));
+  for (const a of [0.8, 3.9]) blade(p, [sx * 0.3, h * 0.3, sz * 0.3], a, 0.5, 0.08, 0.03, { prof: (t) => Math.sin(Math.PI * t), droop: 0.5, fold: 0, a: '#3f7a30', b: '#6aa34a', vein: '#8fc060' });
+  const [lo, hi] = [mix(color, '#000000', 0.25), mix(color, '#ffffff', 0.25)];
+  if (kind === 'head') {
+    for (const [r, dy, n, c] of [[0.058, 0.012, 9, lo], [0.04, 0.02, 8, hi]] as const)
+      for (let i = 0; i < n; i++) {
+        const a = (i / n) * 6.28 + (r < 0.05 ? 0.3 : 0);
+        p.line([sx, h, sz], [sx + Math.cos(a) * r, h + dy, sz + Math.sin(a) * r], (t) => mix(c, color, t));
+      }
+    for (const [i, k] of [[0, 0], [1, 0], [0, 1], [1, 1]]) p.dot(sx + i * 0.02 - 0.01, h + 0.012, sz + k * 0.02 - 0.01, '#e8b92f');
+  } else {
+    for (let q = 0; q < 14; q++) {
+      const t = 0.5 + 0.5 * (q / 14);
+      const a = q * 2.4;
+      const r = 0.032 * (1 - q / 18);
+      const [x, y, z] = [sx * t * t, h * t, sz * t * t];
+      for (const da of [0, 2.1, 4.2]) p.dot(x + Math.cos(a + da) * r, y, z + Math.sin(a + da) * r, q % 2 ? lo : hi);
+      p.dot(x, y, z, color);
+    }
+  }
+  return p.v.build();
+}
+
+/** A hanging strand of ivy, a vine with leaves along it. */
+export function ivyGeo(len: number, variant: number) {
+  const R = mulberry32(variant * 41 + Math.round(len * 100));
+  const p = new Paint(0.025, 0.1);
+  const sway = (R() - 0.5) * 0.15;
+  const pt = (t: number): V3 => [sway * t * t + Math.sin(t * 5 + variant) * 0.025, -len * t, Math.cos(t * 4 + variant) * 0.025];
+  p.line(pt(0), pt(1), '#4a6b32');
+  for (let d = 0.05; d < len; d += 0.09 + R() * 0.05) {
+    const q = pt(d / len);
+    blade(p, q, R() * 6.28, -0.5 - R() * 0.6, 0.07 + 0.05 * R(), 0.08, { prof: (t) => Math.pow(Math.sin(Math.PI * Math.pow(t, 0.7)), 0.7), droop: 0.4, fold: 0.2, a: jig(['#2f6b34', '#3d7d3a', '#4a8a40'][Math.floor(R() * 3)], R), b: '#6aa850', vein: '#9cc47a' });
+  }
+  return p.v.build();
+}
+
diff --git a/src/client/features/rooftop/garden/voxscene.ts b/src/client/features/rooftop/garden/voxscene.ts
new file mode 100644
index 000000000..1b39867db
--- /dev/null
+++ b/src/client/features/rooftop/garden/voxscene.ts
@@ -0,0 +1,97 @@
+import * as THREE from 'three';
+import { Vox } from '../../../world/vox';
+import { mix } from './voxkit';
+import { hash3 } from './leaves';
+
+// Everything in the garden that isn't a plant, built of blocks the same way: boards, posts, rocks, stones
+// and moss are all rasterised into one grid of small cubes, hidden faces dropped, each corner shaded by
+// its neighbours. One grid is one mesh.
+
+export const blockMaterial = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.9, metalness: 0 });
+const P = new THREE.Vector3();
+
+export class Blocks {
+  readonly v: Vox;
+  constructor(readonly s = 0.05, jitter = 0.07) {
+    this.v = new Vox(s, jitter);
+  }
+
+  /** A timber board, post or slab: `w`, `h`, `d` across, up and deep, centred at (x, y, z), turned about y and then tipped about x. Never thinner than one block. */
+  box(w: number, h: number, d: number, x: number, y: number, z: number, rotY: number, rotX: number, color: string, grain = 0.12, jitter?: number) {
+    const s = this.s;
+    const half = [Math.max(w, s) / 2, Math.max(h, s) / 2, Math.max(d, s) / 2];
+    const q = new THREE.Quaternion().setFromEuler(new THREE.Euler(rotX, rotY, 0, 'YXZ'));
+    const inv = q.clone().invert();
+    const lo = [Infinity, Infinity, Infinity];
+    const hi = [-Infinity, -Infinity, -Infinity];
+    for (let c = 0; c < 8; c++) {
+      P.set(c & 1 ? half[0] : -half[0], c & 2 ? half[1] : -half[1], c & 4 ? half[2] : -half[2]).applyQuaternion(q);
+      const p = [P.x + x, P.y + y, P.z + z];
+      for (let a = 0; a < 3; a++) {
+        lo[a] = Math.min(lo[a], p[a]);
+        hi[a] = Math.max(hi[a], p[a]);
+      }
+    }
+    const long = half[0] >= half[1] && half[0] >= half[2] ? 0 : half[1] >= half[2] ? 1 : 2;
+    const dark = mix(color, '#000000', 0.22);
+    for (let i = Math.floor(lo[0] / s); i <= Math.floor(hi[0] / s); i++)
+      for (let j = Math.floor(lo[1] / s); j <= Math.floor(hi[1] / s); j++)
+        for (let k = Math.floor(lo[2] / s); k <= Math.floor(hi[2] / s); k++) {
+          P.set((i + 0.5) * s - x, (j + 0.5) * s - y, (k + 0.5) * s - z).applyQuaternion(inv);
+          if (Math.abs(P.x) > half[0] || Math.abs(P.y) > half[1] || Math.abs(P.z) > half[2]) continue;
+          // Grain: streaks that run along the board's length.
+          const cross = long === 0 ? [P.y, P.z] : long === 1 ? [P.x, P.z] : [P.x, P.y];
+          const streak = grain > 0 && hash3(Math.round(cross[0] / s) * 3.1, Math.round(cross[1] / s) * 1.7, long) > 0.72;
+          this.v.put(i, j, k, streak ? dark : color, jitter);
+        }
+  }
+
+  /** A lump (a rock, a cushion of moss): an ellipsoid with a rough surface, cut off below `minY`. `color` is told how high up the block is (-1 to 1) and a random number. */
+  blob(cx: number, cy: number, cz: number, rx: number, ry: number, rz: number, rotY: number, color: (ny: number, n: number) => string, rough = 0.3, minY = 0, jitter?: number) {
+    const s = this.s;
+    const r = Math.max(rx, rz) * 1.2;
+    const [cs, sn] = [Math.cos(rotY), Math.sin(rotY)];
+    for (let i = Math.floor((cx - r) / s); i <= Math.ceil((cx + r) / s); i++)
+      for (let j = Math.floor(Math.max(minY, cy - ry * 1.2) / s); j <= Math.ceil((cy + ry * 1.2) / s); j++)
+        for (let k = Math.floor((cz - r) / s); k <= Math.ceil((cz + r) / s); k++) {
+          const [dx, dy, dz] = [(i + 0.5) * s - cx, (j + 0.5) * s - cy, (k + 0.5) * s - cz];
+          if ((j + 0.5) * s < minY) continue;
+          const [lx, lz] = [dx * cs - dz * sn, dx * sn + dz * cs];
+          const n = hash3(i * 0.7, j * 0.7, k * 0.7);
+          if ((lx / rx) ** 2 + (dy / ry) ** 2 + (lz / rz) ** 2 <= 1 + rough * (n - 0.5)) this.v.put(i, j, k, color(dy / ry, n), jitter);
+        }
+  }
+
+  /** A flat round slab (a stepping stone, a lily pad, a basin): from y0 up `thick`. */
+  disc(cx: number, y0: number, cz: number, rx: number, rz: number, thick: number, rotY: number, color: (n: number) => string, rough = 0.25, jitter?: number) {
+    const s = this.s;
+    const r = Math.max(rx, rz) * 1.2;
+    const [cs, sn] = [Math.cos(rotY), Math.sin(rotY)];
+    const [j0, j1] = [Math.floor(y0 / s + 0.001), Math.max(Math.floor(y0 / s + 0.001), Math.ceil((y0 + thick) / s - 0.001) - 1)];
+    for (let i = Math.floor((cx - r) / s); i <= Math.ceil((cx + r) / s); i++)
+      for (let k = Math.floor((cz - r) / s); k <= Math.ceil((cz + r) / s); k++) {
+        const [dx, dz] = [(i + 0.5) * s - cx, (k + 0.5) * s - cz];
+        const [lx, lz] = [dx * cs - dz * sn, dx * sn + dz * cs];
+        const n = hash3(i * 0.9, 5, k * 0.9);
+        if ((lx / rx) ** 2 + (lz / rz) ** 2 <= 1 + rough * (n - 0.5)) for (let j = j0; j <= j1; j++) this.v.put(i, j, k, color(n), jitter);
+      }
+  }
+
+  /** A thin ring of blocks, `r` out from the centre. */
+  ring(cx: number, y: number, cz: number, r: number, color: string) {
+    const s = this.s;
+    for (let i = Math.floor((cx - r) / s) - 1; i <= Math.ceil((cx + r) / s) + 1; i++)
+      for (let k = Math.floor((cz - r) / s) - 1; k <= Math.ceil((cz + r) / s) + 1; k++)
+        if (Math.abs(Math.hypot((i + 0.5) * s - cx, (k + 0.5) * s - cz) - r) <= s * 0.55) this.v.put(i, Math.floor(y / s), k, color, 0);
+  }
+
+  mesh(material: THREE.Material = blockMaterial): THREE.Mesh {
+    const m = new THREE.Mesh(this.v.build(), material);
+    m.castShadow = m.receiveShadow = true;
+    return m;
+  }
+}
+
+/** Stone greys with moss growing on the tops. */
+export const rock = (grey: string[], mossy = 0.5) => (ny: number, n: number) => (ny > 0.35 && n > 1 - mossy * (ny + 0.3) ? ['#4e8a3a', '#5a9640', '#3f7a38'][Math.floor(n * 7) % 3] : grey[Math.floor(n * 11) % grey.length]);
+
diff --git a/src/client/features/weather/index.ts b/src/client/features/weather/index.ts
index cef089b30..f4b2671d2 100644
--- a/src/client/features/weather/index.ts
+++ b/src/client/features/weather/index.ts
@@ -1,6 +1,7 @@
 // The weather controller on the left: pick where in the world the office is (its sun, clock and live
 // forecast), set the weather and its strength by hand, or scrub the time of day. It is only for you:
 // nobody else's sky changes (the shared one comes from server/sky.ts).
+import * as THREE from 'three';
 import type { Weather, SkyState } from '../../../shared/protocol';
 import type { Ctx } from '../../core/context';
 import { store } from '../../state';
@@ -51,6 +52,18 @@ export function installWeather(ctx: Ctx): void {
   let preview: { hour?: number; weather?: Weather; intensity?: number } = {};
   let place = '';
   let busy = false;
+  /** Fog thickness 0–1 set by hand (null: whatever the weather makes). The sky sets the fog each frame, so it is overridden right after. */
+  let fog: number | null = null;
+  const skyUpdate = sky.update.bind(sky);
+  sky.update = (dt, t, camera) => {
+    skyUpdate(dt, t, camera);
+    if (fog !== null && ctx.scene.fog instanceof THREE.Fog) {
+      // At 0 there is no fog or haze at all: the edges go out past anything drawn.
+      const far = fog <= 0.001 ? 1e6 : 600 - (600 - 22) * Math.pow(fog, 0.55);
+      ctx.scene.fog.far = far;
+      ctx.scene.fog.near = fog <= 0.001 ? 1e5 : fog > 0.7 ? 0 : far * 0.25;
+    }
+  };
 
   const apply = () => {
     if (pin && store.sky) sky.set({ ...store.sky, ...pin });
@@ -66,6 +79,8 @@ export function installWeather(ctx: Ctx): void {
   const weatherRow = h('div.wx-row');
   const strength = h('input', { type: 'range', min: 0, max: 100, value: 80, 'aria-label': 'Weather strength', oninput: () => { preview = { ...preview, weather: preview.weather ?? store.sky?.weather ?? 'clear', intensity: Number(strength.value) / 100 }; apply(); }, onchange: () => strength.blur() }) as HTMLInputElement;
   const clock = h('input', { type: 'range', min: 0, max: 24, step: 0.25, value: 12, 'aria-label': 'Time of day', oninput: () => { preview = { ...preview, hour: Number(clock.value) % 24 }; apply(); }, onchange: () => clock.blur() }) as HTMLInputElement;
+  const fogLabel = h('span.wx-val');
+  const fogSlider = h('input', { type: 'range', min: 0, max: 100, value: 0, 'aria-label': 'Fog strength', oninput: () => { fog = Number(fogSlider.value) / 100; paint(); }, onchange: () => fogSlider.blur() }) as HTMLInputElement;
   const hourLabel = h('span.wx-val');
   const strengthLabel = h('span.wx-val');
   const live = (what: 'weather' | 'time') => h('button.btn.wx-mini', { type: 'button', onclick: () => {
@@ -84,6 +99,7 @@ export function installWeather(ctx: Ctx): void {
     h('label.wx-label', {}, 'Where'), select, status,
     h('div.wx-head', {}, h('label.wx-label', {}, 'Weather'), live('weather')), weatherRow,
     h('div.wx-head', {}, h('label.wx-label', {}, 'Strength'), strengthLabel), strength,
+    h('div.wx-head', {}, h('label.wx-label', {}, 'Fog'), fogLabel, h('button.btn.wx-mini', { type: 'button', onclick: () => { fog = null; paint(); } }, 'Auto')), fogSlider,
     h('div.wx-head', {}, h('label.wx-label', {}, 'Time of day'), hourLabel, live('time')), clock,
   );
   const toggle = h('button.wx-toggle', { type: 'button', 'aria-expanded': 'true', onclick: () => {
@@ -108,6 +124,8 @@ export function installWeather(ctx: Ctx): void {
     const k = preview.intensity ?? (preview.weather ? 0.8 : now?.intensity ?? 0);
     strength.value = String(Math.round(k * 100));
     strengthLabel.textContent = Math.round(k * 100) + '%';
+    fogLabel.textContent = fog === null ? 'auto' : Math.round(fog * 100) + '%';
+    if (fog !== null) fogSlider.value = String(Math.round(fog * 100));
     hourLabel.textContent = preview.hour === undefined ? 'live' : fmtHour(preview.hour);
     status.textContent = busy ? 'Fetching the forecast…' : pin?.city ? pin.city + (pin.temp !== undefined ? ', ' + pin.temp + ' °C' : '') : now?.city ? now.city + (now.temp !== undefined ? ', ' + now.temp + ' °C' : '') : 'Using the office’s own sky';
   }
diff --git a/src/client/world/sky.ts b/src/client/world/sky.ts
index d3a214a2e..9b4bfac68 100644
--- a/src/client/world/sky.ts
+++ b/src/client/world/sky.ts
@@ -177,9 +177,9 @@ const HAZE = /* glsl */ `
     float fogFactor = 1.0 - exp( - fogDensity * fogDensity * vFogDepth * vFogDepth );
   #else
     // How many times as far off the haze is as down on the street; and past HAZE_MAX, from 45% of
-    // the way there, as the haze on the roof always went.
+    // the way there, as the haze on the roof always went (unless the fog's switched right off: far edge past 5 km).
     float skyReach = 1.0 + max( max( cameraPosition.y, vSkyFogY ) - skyStreet - ${HAZE_CLEAR.toFixed(1)}, 0.0 ) / ${HAZE_ABOVE.toFixed(1)};
-    float fogFactor = max( smoothstep( fogNear, fogFar, vFogDepth / skyReach ), smoothstep( ${(HAZE_MAX * 0.45).toFixed(1)}, ${HAZE_MAX.toFixed(1)}, vFogDepth ) );
+    float fogFactor = max( smoothstep( fogNear, fogFar, vFogDepth / skyReach ), smoothstep( ${(HAZE_MAX * 0.45).toFixed(1)}, ${HAZE_MAX.toFixed(1)}, vFogDepth ) * step( fogFar, 5000.0 ) );
   #endif
   gl_FragColor.rgb = mix( gl_FragColor.rgb, fogColor, fogFactor );
 #endif

From e9e9eee488b76dc05c0f32372c9e84a8dd8f1f9d Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Sun, 4 Oct 2026 23:42:16 +0400
Subject: [PATCH 25/35] Push sun, moon and stars out to the far plane so city
 towers no longer cover them

---
 src/client/world/sky.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/client/world/sky.ts b/src/client/world/sky.ts
index 9b4bfac68..6e9210c3d 100644
--- a/src/client/world/sky.ts
+++ b/src/client/world/sky.ts
@@ -469,7 +469,7 @@ export class Sky {
       const y = rand(0.08, 1);
       const a = rand(0, Math.PI * 2);
       const r = Math.sqrt(1 - y * y);
-      starPos.push(Math.cos(a) * r * 170, y * 170, Math.sin(a) * r * 170);
+      starPos.push(Math.cos(a) * r * 300, y * 300, Math.sin(a) * r * 300);
     }
     const starGeo = new THREE.BufferGeometry();
     starGeo.setAttribute('position', new THREE.Float32BufferAttribute(starPos, 3));
@@ -479,8 +479,8 @@ export class Sky {
       m.material.userData.outlineParameters = { visible: false };
       return m;
     };
-    this.sunDisc = disc(5, '#fff4c8');
-    this.moonDisc = disc(3.2, '#f2f1ea');
+    this.sunDisc = disc(9.4, '#fff4c8');
+    this.moonDisc = disc(6, '#f2f1ea');
     this.moonDisc.material.map = moonTexture();
     this.dome.add(this.spookyDome, this.stars, this.sunDisc, this.moonDisc);
     scene.add(this.dome);
@@ -778,7 +778,7 @@ export class Sky {
     const clear = (1 - this.cover) * (1 - this.fog);
     this.stars.material.opacity = (1 - day) ** 2 * clear;
     this.stars.visible = this.stars.material.opacity > 0.01;
-    const up = (e: number, a: number, m: THREE.Mesh) => m.position.set(Math.cos(e) * Math.sin(a) * 160, Math.sin(e) * 160, -Math.cos(e) * Math.cos(a) * 160);
+    const up = (e: number, a: number, m: THREE.Mesh) => m.position.set(Math.cos(e) * Math.sin(a) * 300, Math.sin(e) * 300, -Math.cos(e) * Math.cos(a) * 300);
     up(el, az, this.sunDisc);
     this.sunDisc.material.color.copy(C.sunLow).lerp(C.white, smooth(0, 20, elD));
     this.sunDisc.material.opacity = smooth(-3, 0, elD) * clear;
@@ -790,7 +790,7 @@ export class Sky {
     skyward(SPOOKY_MOON.el, SPOOKY_MOON.az, this.moonTo);
     u.moonDir.value.copy(this.moonTo);
     this.moonAt.lerp(this.moonTo, sp);
-    this.moonDisc.position.copy(this.moonAt.lengthSq() > 1e-6 ? this.moonAt : this.moonTo).normalize().multiplyScalar(160);
+    this.moonDisc.position.copy(this.moonAt.lengthSq() > 1e-6 ? this.moonAt : this.moonTo).normalize().multiplyScalar(300);
     this.moonDisc.scale.setScalar(1 + 2.2 * sp);
     this.moonDisc.material.color.copy(C.white).lerp(SPOOKY.moon, sp);
     this.moonDisc.material.opacity = Math.max(smooth(2, -2, elD) * clear, sp * (1 - 0.5 * this.cover));

From ef5cb3a302980538d5f1d3272bbbaead9b8b1124 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Mon, 5 Oct 2026 15:31:54 +0400
Subject: [PATCH 26/35] Show the Vancouver city from every floor, not just the
 roof

---
 src/client/world/city.ts         | 17 +++++--
 src/client/world/office/build.ts |  2 +-
 src/client/world/outside.ts      | 82 ++------------------------------
 src/client/world/streetcity.ts   | 31 ++++++++++++
 4 files changed, 47 insertions(+), 85 deletions(-)
 create mode 100644 src/client/world/streetcity.ts

diff --git a/src/client/world/city.ts b/src/client/world/city.ts
index dbb80a56f..1eaa1a6bc 100644
--- a/src/client/world/city.ts
+++ b/src/client/world/city.ts
@@ -46,6 +46,8 @@ export interface City {
   setFloors(floors: number, wings?: readonly number[]): void;
   /** The cars along the streets, the blinking lights on the towers: `night` is how dark it is (0–1). */
   update(t: number, dt: number, night: number): void;
+  /** Where each building stands (the lots' footprints), for walls to stop you at when you're down on the street. */
+  footprints: { minX: number; maxX: number; minZ: number; maxZ: number }[];
 }
 
 /** How a building's walls look: its paint, and the windows in it (glass towers are nearly all window). */
@@ -248,7 +250,11 @@ function rise(ring: number, drop: number): number {
   return ring === 0 ? k : ring === 1 ? Math.sqrt(k) : 1;
 }
 
-export function buildCity(night: NightParts): City {
+/**
+ * `own` puts the office's own building (and its garage) in the street: from the roof you see it
+ * under your feet. Down on a floor you're inside it already, so it's left out.
+ */
+export function buildCity(night: NightParts, own = true): City {
   const group = new THREE.Group();
   /** Everything down on the street, which is as far below the roof as the building is tall. */
   const street = new THREE.Group();
@@ -350,8 +356,8 @@ export function buildCity(night: NightParts): City {
 
   // The office's own building, a floor per project, from the street up to the roof, and the open
   // garage at the bottom: walled at the back and on the west side, columns along the other two.
-  const building = buildTower([], night);
-  group.add(building.group);
+  const building = own ? buildTower([], night) : null;
+  if (building) group.add(building.group);
   const garage = new THREE.Group();
   const garageH = -STREET_Y - SLAB;
   const concrete = toon('#d3d6dd');
@@ -361,7 +367,7 @@ export function buildCity(night: NightParts): City {
   for (const x of [B.maxX - 0.25, -9.6, 0, 9.6]) garage.add(mesh(column, toon('#e6e8ee'), x, garageH / 2, B.maxZ - 0.25, false));
   for (const z of [-6.5, 6.5, B.minZ + 0.25]) garage.add(mesh(column, toon('#e6e8ee'), B.maxX - 0.25, garageH / 2, z, false));
   garage.add(mesh(new THREE.PlaneGeometry(B.maxX - B.minX, B.maxZ - B.minZ).rotateX(-Math.PI / 2), toon('#9a9ea8'), (B.minX + B.maxX) / 2, 0.03, (B.minZ + B.maxZ) / 2, false));
-  street.add(mergeByMaterial(garage));
+  if (own) street.add(mergeByMaterial(garage));
   // Its plaza, with a few trees in front.
   parks.add(mesh(new THREE.PlaneGeometry(inner, inner).rotateX(-Math.PI / 2), toon('#cfc8b8'), blockAt(0, 0).x, 0.02, blockAt(0, 0).z, false));
   for (const [x, z] of [
@@ -512,6 +518,7 @@ export function buildCity(night: NightParts): City {
   let riseNow = -1;
   return {
     group,
+    footprints: lots.map((l) => ({ minX: l.x - l.w / 2, maxX: l.x + l.w / 2, minZ: l.z - l.d / 2, maxZ: l.z + l.d / 2 })),
     setFloors(floors, wings = []) {
       floors = Math.max(1, floors);
       if (floors === floorsNow && wings.join() === wingsNow) return;
@@ -519,7 +526,7 @@ export function buildCity(night: NightParts): City {
       wingsNow = wings.join();
       const drop = roofDrop(floors);
       street.position.y = -drop;
-      building.set(floors, floors, wings);
+      building?.set(floors, floors, wings);
       // The buildings only change height up to six floors (see rise).
       const k = Math.min(1, drop / LAID_OUT);
       if (k !== riseNow) {
diff --git a/src/client/world/office/build.ts b/src/client/world/office/build.ts
index 3874e1e35..6e141707f 100644
--- a/src/client/world/office/build.ts
+++ b/src/client/world/office/build.ts
@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import type { WallRect } from '../../../shared/decor';
 import type { FloorPalette } from '../../../shared/floors';
-import { street } from '../outside';
+import { street } from '../streetcity';
 import { cars } from '../../features/cars/world';
 import { scenic } from '../scenic';
 import { toon, toonUnique } from '../toon';
diff --git a/src/client/world/outside.ts b/src/client/world/outside.ts
index e4d9783a4..d624242c8 100644
--- a/src/client/world/outside.ts
+++ b/src/client/world/outside.ts
@@ -333,90 +333,14 @@ export function neighbourBoxes(): { minX: number; maxX: number; minZ: number; ma
  * sidewalks and street lamps, trees and neighbours' buildings, and in `sky` some clouds.
  */
 export function buildStreet(group: THREE.Group, colliders: Collider[], night: NightParts, sky: THREE.Group): SkyWorld {
-  const lawn = new THREE.Mesh(new THREE.PlaneGeometry(REACH - LAWN_WEST, REACH * 2), new THREE.MeshStandardMaterial({ map: grassTexture((REACH - LAWN_WEST) / 2, REACH), roughness: 0.95, metalness: 0 }));
-  lawn.rotation.x = -Math.PI / 2;
-  lawn.position.set((LAWN_WEST + REACH) / 2, G - 0.03, 0);
-  lawn.receiveShadow = true;
-  group.add(lawn);
+  void night;
   // What you stand on anywhere out there, the lot and the road and the grass alike, and the beach.
+  // (What it looks like is the city's, see streetcity.ts.)
   colliders.push({ minX: -REACH, maxX: REACH, minZ: -REACH, maxZ: REACH, bottom: G - 1, top: G });
-
-  // The lot in front of the garage, out to the sidewalk, and the one down its east side.
-  for (const [b, y] of [
-    [LOT, G - 0.01],
-    [SIDE_LOT, G - 0.012],
-  ] as const) {
-    group.add(groundPlane(b.maxX - b.minX, b.maxZ - b.minZ, (b.minX + b.maxX) / 2, y, (b.minZ + b.maxZ) / 2, null, '#9a9ea8'));
-  }
-
-  // The road, out to either end of the street, where the scenic loop takes over (world/scenic/).
-  const road = roadTexture();
-  road.repeat.set((STREET_END * 2) / 8, 1);
-  group.add(groundPlane(STREET_END * 2, ROAD.maxZ - ROAD.minZ, 0, G - 0.008, (ROAD.minZ + ROAD.maxZ) / 2, road));
-  for (const [z0, z1] of [
-    [21, ROAD.minZ],
-    [ROAD.maxZ, ROAD.maxZ + 2],
-  ]) {
-    group.add(mesh(box(STREET_END * 2 - 4, 0.08, z1 - z0), toon('#e3ddd0'), 0, G, (z0 + z1) / 2));
-  }
-  const forest = new THREE.Group();
-
-  // Trees along the sidewalks and around the building.
-  const trees: [number, number, number][] = [
-    [-34, 22, 1.1],
-    [-22, 22, 1],
-    [22, 22, 1.05],
-    [34, 22, 0.95],
-    [-40, 32.5, 1.1],
-    [-12, 32.5, 1],
-    [14, 32.5, 1.15],
-    [42, 32.5, 1],
-    [-27, -8, 1.2],
-    [-29, 4, 1],
-    [-26, 14, 0.9],
-    [29, -6, 1.1],
-    [30, 6, 1.25],
-    [-12, -22, 1.2],
-    [4, -24, 1],
-    // Clear of the back office, when a floor's built out into one (see WING).
-    [23, -19, 1.1],
-  ];
-  for (const [x, z, s] of trees) {
-    const t = tree(s);
-    t.position.set(x, G, z);
-    forest.add(t);
-    // Its trunk, which you (or a car) can't go through.
-    const r = 0.26 * s;
-    colliders.push({ minX: x - r, maxX: x + r, minZ: z - r, maxZ: z + r, bottom: G, top: G + 2.2 * s });
-  }
-  group.add(mergeByMaterial(forest));
-
-  // Street lamps down both sidewalks, their arms out over the road.
-  const lamps = new THREE.Group();
-  const glass = bulb(night, '#fff3d6');
-  for (const x of [-40, -28, -16, -4, 8, 16, 28, 40]) streetLamp(lamps, night, glass, colliders, x, 22.2, 1);
-  for (const x of [-34, -22, -4, 8, 26, 36]) streetLamp(lamps, night, glass, colliders, x, 31.8, -1);
-  group.add(mergeByMaterial(lamps));
-
-  // The neighbours: across the street, and further out behind and beside the office.
-  for (const [x, z, w, h, d, color] of NEIGHBOURS) {
-    const b = building(w, h, d, color, night.windows);
-    b.position.set(x, G, z);
-    b.rotation.y = facing(x, z);
-    group.add(b);
-  }
-  // Solid: you (and a car) stop at their walls instead of walking in.
-  for (const n of neighbourBoxes()) colliders.push({ minX: n.minX, maxX: n.maxX, minZ: n.minZ, maxZ: n.maxZ, bottom: G, top: G + n.top });
+  void group;
 
   // The voxel sky world: terraced clouds and floating islands, too far off for the fog to hide.
   const world = buildSkyWorld(night.clouds, (c) => bulb(night, c, 0.9));
   sky.add(world.group);
   return world;
 }
-
-/** The street out front, the city along it, and the clouds over it all. */
-export const street: Fixture<never, StreetSite> = (site) => {
-  // The clouds stay up in the sky, however far down the street is.
-  const world = buildStreet(site.ground, site.groundColliders, site.get('night'), site.group);
-  return { update: (t) => world.update(t) };
-};
diff --git a/src/client/world/streetcity.ts b/src/client/world/streetcity.ts
new file mode 100644
index 000000000..0b45d25cc
--- /dev/null
+++ b/src/client/world/streetcity.ts
@@ -0,0 +1,31 @@
+import * as THREE from 'three';
+import { STREET_Y, roofDrop } from '../../shared/layout';
+import type { Fixture, StreetSite } from './office/fixture';
+import { buildStreet } from './outside';
+import { buildCity } from './city';
+
+/**
+ * The street out front, seen from the floors: the same downtown Vancouver you see from the roof
+ * (see city.ts), laid out round the office, with its blocks to stop you and the clouds over it all.
+ */
+export const street: Fixture<never, StreetSite> = (site) => {
+  const night = site.get('night');
+  const world = buildStreet(site.ground, site.groundColliders, night, site.group);
+  const city = buildCity(night, false);
+  site.ground.add(city.group);
+  // The blocks are solid: you (and a car) stop at their walls. Walls up into the sky stay that way.
+  for (const f of city.footprints) site.groundColliders.push({ ...f, bottom: STREET_Y, top: 99 });
+  return {
+    setLevel: (_index, count) => {
+      const floors = Math.max(1, count);
+      city.setFloors(floors);
+      // The city puts its street as far under the roof as the building is tall; here the street is where it is.
+      city.group.position.y = STREET_Y + roofDrop(floors);
+    },
+    update: (t, dt) => {
+      world.update(t);
+      // How dark it is: the windows' glow (see Sky.update) is 1.1 at the darkest.
+      city.update(t, dt, Math.min(1, (night.windows[0]?.emissiveIntensity ?? 0) / 1.1));
+    },
+  };
+};

From f4cd627a7debd292d90d035d12bce13b78bb0305 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Mon, 5 Oct 2026 15:38:45 +0400
Subject: [PATCH 27/35] Every round primitive is now blocks (cars, props,
 lamps), simple voxel hands, islands lifted out of the city

---
 src/client/threeVox.ts       | 81 ++++++++++++++++++++++++++++++++++++
 src/client/world/blocky.ts   |  2 +-
 src/client/world/hand/rig.ts | 35 +++-------------
 src/client/world/skyworld.ts |  6 +--
 vite.config.ts               |  2 +
 5 files changed, 92 insertions(+), 34 deletions(-)
 create mode 100644 src/client/threeVox.ts

diff --git a/src/client/threeVox.ts b/src/client/threeVox.ts
new file mode 100644
index 000000000..6054f09ef
--- /dev/null
+++ b/src/client/threeVox.ts
@@ -0,0 +1,81 @@
+// @ts-nocheck
+// three.js with its round primitives swapped for square-edged ones, so every object in the app
+// (cars, props, lamps, wheels, balls, domes of lights…) comes out in blocks like the voxel people.
+// vite.config.ts points every `import 'three'` here. The real library is re-exported untouched.
+// @ts-ignore: the library's own file, past its package exports
+import * as T from '../../node_modules/three/build/three.module.js';
+// @ts-ignore
+export * from '../../node_modules/three/build/three.module.js';
+
+/** Corner radius that gives a square about as wide as the round shape was. */
+const K = 1.24;
+
+/** Posts, drums, wheels: four-sided, so a square block (or a square-sided taper). */
+export class CylinderGeometry extends T.CylinderGeometry {
+  constructor(top = 1, bottom = 1, height = 1, radial?: number, hs = 1, open = false) {
+    if (radial === 4) {
+      super(top, bottom, height, 4, hs, open);
+      return;
+    }
+    super(top * K, bottom * K, height, 4, hs, open);
+    this.rotateY(Math.PI / 4);
+  }
+}
+
+/** Cones become four-sided pyramids. */
+export class ConeGeometry extends T.ConeGeometry {
+  constructor(r = 1, height = 1, radial?: number, hs = 1, open = false) {
+    if (radial === 4) {
+      super(r, height, 4, hs, open);
+      return;
+    }
+    super(r * K, height, 4, hs, open);
+    this.rotateY(Math.PI / 4);
+  }
+}
+
+/** Balls become cubes of about the same volume, except the sky's and the planets' own huge or smooth ones. */
+export class SphereGeometry extends T.SphereGeometry {
+  constructor(r = 1, w = 32, h = 16, ...rest: number[]) {
+    if (r > 40 || w >= 40) {
+      super(r, w, h, ...rest);
+      return;
+    }
+    super(r, 4, 2);
+    const s = r * 1.6;
+    const b = new T.BoxGeometry(s, s, s);
+    this.copy(b as never);
+    b.dispose();
+    this.type = 'SphereGeometry';
+  }
+}
+
+/** A capsule is a block as long. */
+export class CapsuleGeometry extends T.CapsuleGeometry {
+  constructor(r = 1, length = 1) {
+    super(r, length, 1, 4);
+    const b = new T.BoxGeometry(r * 1.8, length + r * 2, r * 1.8);
+    this.copy(b as never);
+    b.dispose();
+  }
+}
+
+/** A hoop is a square ring with a square section. */
+export class TorusGeometry extends T.TorusGeometry {
+  constructor(R = 1, tube = 0.4, _r?: number, _t?: number, arc = Math.PI * 2) {
+    super(R, tube, 4, arc >= Math.PI * 2 - 1e-6 ? 4 : 8, arc);
+    if (arc >= Math.PI * 2 - 1e-6) this.rotateZ(Math.PI / 4);
+  }
+}
+
+/** A flat disc is a flat square. */
+export class CircleGeometry extends T.CircleGeometry {
+  constructor(r = 1, segments = 32, start = 0, length = Math.PI * 2) {
+    if (length < Math.PI * 2 - 1e-6) {
+      super(r, segments, start, length);
+      return;
+    }
+    super(r * K, 4, start, length);
+    this.rotateZ(Math.PI / 4);
+  }
+}
diff --git a/src/client/world/blocky.ts b/src/client/world/blocky.ts
index 675fdc032..e3a295ef1 100644
--- a/src/client/world/blocky.ts
+++ b/src/client/world/blocky.ts
@@ -18,7 +18,7 @@ export function blockBall(r: number, ..._rest: unknown[]): THREE.BufferGeometry
 
 /** A cone: a four-sided pyramid with its corners on the old radius. */
 export function blockCone(r: number, height: number, _s?: number, _h?: number, open?: boolean, ..._rest: unknown[]): THREE.BufferGeometry {
-  return new THREE.ConeGeometry(r, height, 4, 1, open).rotateY(Math.PI / 4);
+  return new THREE.ConeGeometry(r, height, 4, 1, open);
 }
 
 /** A capsule: a block the same length. */
diff --git a/src/client/world/hand/rig.ts b/src/client/world/hand/rig.ts
index 79864fc98..86bd01b2b 100644
--- a/src/client/world/hand/rig.ts
+++ b/src/client/world/hand/rig.ts
@@ -63,38 +63,13 @@ export function buildHand(side: 1 | -1, m: HandMaterials): HandRig {
   const hand = new THREE.Group();
   const skin = m.skin;
 
-  // Minecraft-style: a square palm with the knuckles picked out darker, and the four fingers fused into
-  // one block with grooves between them and pale nails at the tips.
-  hand.add(block(skin, 0.066, 0.05, 0.05));
-  for (const x of [-0.024, -0.008, 0.008, 0.024]) {
-    const knuckle = block(m.knuckle, 0.013, 0.006, 0.012);
-    knuckle.position.set(x, 0.027, -0.044);
-    hand.add(knuckle);
-  }
+  // Plain voxel hand: one square block for the palm and fingers, and a small block for the thumb.
+  hand.add(block(skin, 0.06, 0.05, 0.09));
   const fingers = new THREE.Group();
-  fingers.position.z = -0.05;
-  fingers.add(block(skin, 0.066, 0.044, 0.05));
-  for (const x of [-0.0165, 0, 0.0165]) {
-    const groove = block(m.knuckle, 0.002, 0.002, 0.042);
-    groove.position.set(x, 0.0225, -0.004);
-    fingers.add(groove);
-    const side2 = block(m.knuckle, 0.002, 0.03, 0.002);
-    side2.position.set(x, 0, -0.049);
-    fingers.add(side2);
-  }
-  for (const x of [-0.0248, -0.0083, 0.0083, 0.0248]) {
-    const nail = block(m.nail, 0.012, 0.003, 0.012);
-    nail.position.set(x, 0.0225, -0.036);
-    fingers.add(nail);
-  }
-  hand.add(fingers);
-
+  fingers.position.z = -0.045;
   const thumb = new THREE.Group();
-  thumb.position.set(-side * 0.0385, -0.004, -0.012);
-  thumb.add(block(skin, 0.024, 0.034, 0.042));
-  const thumbNail = block(m.nail, 0.014, 0.003, 0.01);
-  thumbNail.position.set(0, 0.0185, -0.032);
-  thumb.add(thumbNail);
+  thumb.position.set(-side * 0.036, -0.004, -0.02);
+  thumb.add(block(skin, 0.022, 0.028, 0.04));
   hand.add(thumb);
 
   // The arm: skin up to a cuff, then the sleeve.
diff --git a/src/client/world/skyworld.ts b/src/client/world/skyworld.ts
index 097cfe846..c58cc8e22 100644
--- a/src/client/world/skyworld.ts
+++ b/src/client/world/skyworld.ts
@@ -109,7 +109,7 @@ export function buildSkyWorld(cloud: THREE.MeshStandardMaterial, bulbMat: (color
     const a = (n / 34) * Math.PI * 2 + rand() * 0.4;
     const dist = 110 + rand() * 150;
     const m = new THREE.Mesh(clouds[n % clouds.length], cloud);
-    m.position.set(Math.cos(a) * dist, 8 + rand() * 80, Math.sin(a) * dist);
+    m.position.set(Math.cos(a) * dist, 150 + rand() * 90, Math.sin(a) * dist);
     m.rotation.y = rand() * Math.PI * 2;
     m.scale.setScalar(1.2 + rand() * 1.6);
     group.add(m);
@@ -127,7 +127,7 @@ export function buildSkyWorld(cloud: THREE.MeshStandardMaterial, bulbMat: (color
   for (let n = 0; n < 16; n++) {
     const kind = kinds[n % kinds.length];
     const a = (n / 16) * Math.PI * 2 + rand() * 0.3;
-    const dist = 95 + rand() * 120;
+    const dist = 140 + rand() * 160;
     const isle = new THREE.Group();
     isle.add(new THREE.Mesh(kind.geo, land));
     for (const p of kind.lanterns) {
@@ -135,7 +135,7 @@ export function buildSkyWorld(cloud: THREE.MeshStandardMaterial, bulbMat: (color
       l.position.copy(p);
       isle.add(l);
     }
-    const y = 10 + rand() * 70;
+    const y = 230 + rand() * 90;
     isle.position.set(Math.cos(a) * dist, y, Math.sin(a) * dist);
     isle.rotation.y = rand() * Math.PI * 2;
     isle.scale.setScalar(1 + rand() * 0.7);
diff --git a/vite.config.ts b/vite.config.ts
index 38f15039c..12750db26 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -38,6 +38,8 @@ export default defineConfig({
   root: resolve(import.meta.dirname, 'src/client'),
   publicDir: resolve(import.meta.dirname, 'src/client/public'),
   plugins: [excalidrawFonts()],
+  // Round primitives become blocks everywhere (see src/client/threeVox.ts).
+  resolve: { alias: [{ find: /^three$/, replacement: resolve(import.meta.dirname, 'src/client/threeVox.ts') }] },
   define: {
     __EXCALIDRAW_ASSETS__: JSON.stringify(EXCALIDRAW_ASSETS),
   },

From 01180a102179cfb1601738bcb10aba4f7bf01d82 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:12:09 +0400
Subject: [PATCH 28/35] Create a GitHub repo and its floor in one step (gh repo
 create)

---
 src/client/ui/elevator.ts        | 18 ++++++++++++++++--
 src/server/ws/handlers/floors.ts | 29 ++++++++++++++++++++++++-----
 src/shared/protocol/floors.ts    |  2 +-
 3 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/client/ui/elevator.ts b/src/client/ui/elevator.ts
index a8dc7b442..befeaadee 100644
--- a/src/client/ui/elevator.ts
+++ b/src/client/ui/elevator.ts
@@ -297,6 +297,7 @@ export function openElevator(opts: ElevatorOptions): void {
     addBtn.disabled = !!adding || !pick || store.floors.some((f) => sameRepo(f.repo, pick));
     addBtn.textContent = adding ? '⏳ Cloning…' : pick ? `🛗 Add ${pick}` : '🛗 Add floor';
     input.disabled = !!adding;
+    syncCreate();
     if (!built) {
       built = true;
       addEl.replaceChildren(
@@ -304,21 +305,34 @@ export function openElevator(opts: ElevatorOptions): void {
         h('div.repo-search', {}, input, refreshBtn),
         listEl,
         statusEl,
+        createBtn,
         dirEl,
       );
     }
   };
 
+  const createBtn = h('button.btn', { type: 'button', title: 'Make a new private repository on GitHub with this name, and a floor for it' }, '✨ New repo + floor') as HTMLButtonElement;
+  createBtn.addEventListener('click', () => {
+    const name = filter.trim();
+    if (name && !adding) add(name, true);
+  });
+  const syncCreate = () => {
+    const name = filter.trim();
+    const valid = /^([\w.-]+\/)?[\w.-]{1,100}$/.test(name);
+    createBtn.disabled = !!adding || !valid;
+    createBtn.textContent = valid ? `✨ Create ${name} on GitHub` : '✨ Type a name to create a new repo';
+  };
+
   /** The floor being added, once the office is cloning it (and after, when it's there). */
   const addingFloor = () => (adding ? store.floors.find((f) => sameRepo(f.repo, adding!)) : undefined);
 
-  const add = (repo: string) => {
+  const add = (repo: string, create = false) => {
     if (adding) return;
     adding = repo;
     seen = false;
     error = '';
     renderAdd();
-    net.send({ t: 'floor.add', repo });
+    net.send({ t: 'floor.add', repo, ...(create ? { create: true } : {}) });
     // The office went away before it started (a restart): don't wait forever.
     clearTimeout(startTimer);
     startTimer = window.setTimeout(() => {
diff --git a/src/server/ws/handlers/floors.ts b/src/server/ws/handlers/floors.ts
index 3f0f2cdab..87078fade 100644
--- a/src/server/ws/handlers/floors.ts
+++ b/src/server/ws/handlers/floors.ts
@@ -1,10 +1,23 @@
 // The building's floors: riding the elevator between them and up to the roof, and adding and taking
 // off floors.
+import { execFile } from 'node:child_process';
 import type { FloorClientMsg } from '../../../shared/protocol.js';
 import { ROOF } from '../../../shared/rooftop.js';
 import { arrivalSpot, str } from '../../office/input.js';
 import type { HandlerMap, ViewPieces } from './types.js';
 
+/** `gh repo create`: a private repository with a README, answered with its owner/name (or why not). */
+function createRepo(name: string): Promise<{ repo: string } | { error: string }> {
+  return new Promise((done) => {
+    if (!/^([\w.-]+\/)?[\w.-]{1,100}$/.test(name)) return done({ error: 'A repository name is letters, numbers, dots, dashes and underscores' });
+    execFile('gh', ['repo', 'create', name, '--private', '--add-readme'], { timeout: 60_000 }, (err, out, errOut) => {
+      if (err) return done({ error: `Couldn't create ${name} on GitHub: ${(errOut || err.message).trim().split('\n')[0]}` });
+      const m = /github\.com\/([\w.-]+\/[\w.-]+)/.exec(out);
+      done(m ? { repo: m[1].replace(/\.git$/, '') } : { error: `Created ${name}, but gh didn't say where` });
+    });
+  });
+}
+
 export const projectView: ViewPieces['project'] = (_ctx, floor) => floor?.project ?? null;
 
 export const floorHandlers = {
@@ -26,8 +39,14 @@ export const floorHandlers = {
   },
   'floor.add'(ctx, c, msg) {
     const who = c.peer.name;
-    const repo = str(msg.repo, 200);
-    void ctx.building
+    const asked = str(msg.repo, 200);
+    void (msg.create ? createRepo(asked) : Promise.resolve({ repo: asked })).then((made) => {
+      if ('error' in made) return ctx.sendTo(c, { t: 'floor.added', repo: asked, error: made.error });
+      if (msg.create) ctx.toastAll(`🛗 ${who} created ${made.repo} on GitHub`);
+      addFloor(made.repo);
+    });
+    const addFloor = (repo: string) =>
+      void ctx.building
       .add(
         repo,
         who,
@@ -39,12 +58,12 @@ export const floorHandlers = {
       )
       .then((r) => {
         ctx.floorsChanged();
-        if (typeof r === 'string') return ctx.sendTo(c, { t: 'floor.added', repo, error: r });
+        if (typeof r === 'string') return ctx.sendTo(c, { t: 'floor.added', repo: asked, error: r });
         const floor = ctx.openFloor(r);
-        if (!floor) return ctx.sendTo(c, { t: 'floor.added', repo, error: `Cloned ${r.repo}, but couldn't open its floor — see the office's log` });
+        if (!floor) return ctx.sendTo(c, { t: 'floor.added', repo: asked, error: `Cloned ${r.repo}, but couldn't open its floor — see the office's log` });
         console.log(`  ${who} added a floor for ${r.repo} (${r.dir})`);
         ctx.toastAll(`🛗 New floor: ${r.name}, added by ${who}`);
-        ctx.sendTo(c, { t: 'floor.added', repo, floor: floor.id });
+        ctx.sendTo(c, { t: 'floor.added', repo: asked, floor: floor.id });
       });
   },
   'floor.cancel'(ctx, c, msg) {
diff --git a/src/shared/protocol/floors.ts b/src/shared/protocol/floors.ts
index ce908eaa2..b431b71c9 100644
--- a/src/shared/protocol/floors.ts
+++ b/src/shared/protocol/floors.ts
@@ -136,7 +136,7 @@ export type FloorClientMsg =
   /** The repositories that could become a floor; answered with `floor.repos`. */
   | { t: 'floor.repos'; refresh?: boolean }
   /** Clone a repository and make it a new floor; answered with `floor.added` once it's there. */
-  | { t: 'floor.add'; repo: string }
+  | { t: 'floor.add'; repo: string; /** Make the repository on GitHub first (private, with a README): `repo` is `name` or `owner/name`. */ create?: boolean }
   /** Stop a floor's clone before it's there (admins, or whoever added it); the one who added it hears `floor.added` with why. */
   | { t: 'floor.cancel'; floor: string }
   /** Take a floor off the building (admins only). Its checkout stays on disk; everyone on it rides to another floor. */

From c846c3a21edeca324430bc1162b23bea184b7b68 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:14:50 +0400
Subject: [PATCH 29/35] New floors clone straight into <workspace>/<project>

---
 src/server/building.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/server/building.ts b/src/server/building.ts
index 2716aeacd..519321fbe 100644
--- a/src/server/building.ts
+++ b/src/server/building.ts
@@ -311,7 +311,9 @@ export class Building {
     if (this.defs.some((d) => sameRepo(d.repo, repo))) return `${repo} already has a floor`;
     if (this.cloning.has(key)) return `${repo} is already being cloned`;
     const [owner, name] = repo.split('/');
-    const dest = path.join(this.projectsDir, owner, name);
+    // Straight into the workspace folder, one folder per project; the owner joins the name when that's taken.
+    let dest = path.join(this.projectsDir, name);
+    if (existsSync(dest)) dest = path.join(this.projectsDir, `${owner}-${name}`);
     if (this.defs.some((d) => path.resolve(d.dir) === dest)) return `${dest} is already a floor`;
     const def = this.newDef(name, repo, dest, by);
     const pending: Pending = { def, owner: account, empty };

From 7aae1e28ecd6d7d96c8a25b6bcbeb0236aef48ec Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:15:40 +0400
Subject: [PATCH 30/35] Clone tests follow the flat project folder layout

---
 tests/clone.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/clone.test.ts b/tests/clone.test.ts
index 91b156f6a..b06568b60 100644
--- a/tests/clone.test.ts
+++ b/tests/clone.test.ts
@@ -113,7 +113,7 @@ test('a clone shows how far along it is, then becomes a floor', async (t) => {
   const r = await building.add('acme/game', 'Sam', (def) => (id = def.id));
   assert.equal(typeof r, 'object', String(r));
   assert.deepEqual(seen.at(-1), { step: 'Downloading', percent: 42, detail: '1.00 MiB · 512.00 KiB/s' });
-  assert.ok(existsSync(path.join(projects, 'acme', 'game', 'index.html')));
+  assert.ok(existsSync(path.join(projects, 'game', 'index.html')));
   assert.deepEqual(building.list().map((d) => d.repo), ['acme/game']);
   assert.deepEqual(building.pending(), []);
   assert.deepEqual(saved(), [], "cloning.json is gone once it's done");
@@ -189,7 +189,7 @@ test('a clone that finished while no office was watching becomes its floor at th
 
 test("a clone that was cut off isn't taken for a checkout", async (t) => {
   const { dataDir, projects } = office(t);
-  const dest = path.join(projects, 'acme', 'game');
+  const dest = path.join(projects, 'game');
   execFileSync('git', ['init', '-q', dest]);
   execFileSync('git', ['-C', dest, 'remote', 'add', 'origin', 'https://github.com/acme/game.git']);
   const building = new Building(dataDir, projects, fast);

From f0846055f89f7daef4fa7a8c7374c8f39c8a3756 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:16:23 +0400
Subject: [PATCH 31/35] Reuse a leftover checkout of the same repo; otherwise
 keep other folders

---
 src/server/building.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/server/building.ts b/src/server/building.ts
index 519321fbe..d2e92c523 100644
--- a/src/server/building.ts
+++ b/src/server/building.ts
@@ -313,7 +313,16 @@ export class Building {
     const [owner, name] = repo.split('/');
     // Straight into the workspace folder, one folder per project; the owner joins the name when that's taken.
     let dest = path.join(this.projectsDir, name);
-    if (existsSync(dest)) dest = path.join(this.projectsDir, `${owner}-${name}`);
+    if (existsSync(dest)) {
+      // A leftover of this same repository is reused (the clone sorts it out); anything else keeps its folder.
+      let origin = '';
+      try {
+        origin = execFileSync('git', ['-C', dest, 'config', '--get', 'remote.origin.url'], { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] });
+      } catch {
+        // not a checkout
+      }
+      if (!sameRepo(normalizeRepo(origin), repo)) dest = path.join(this.projectsDir, `${owner}-${name}`);
+    }
     if (this.defs.some((d) => path.resolve(d.dir) === dest)) return `${dest} is already a floor`;
     const def = this.newDef(name, repo, dest, by);
     const pending: Pending = { def, owner: account, empty };

From baf2b28ca8bfae4f0097f8c80e5c9b12ac4be155 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:17:47 +0400
Subject: [PATCH 32/35] Folder hints show <folder>/<repo>

---
 src/client/ui/elevator.ts     | 2 +-
 src/client/ui/settings.ts     | 2 +-
 src/server/building.ts        | 2 +-
 src/server/config.ts          | 4 ++--
 src/server/setup.ts           | 8 ++++----
 src/shared/protocol/floors.ts | 2 +-
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/client/ui/elevator.ts b/src/client/ui/elevator.ts
index befeaadee..575c3ef73 100644
--- a/src/client/ui/elevator.ts
+++ b/src/client/ui/elevator.ts
@@ -280,7 +280,7 @@ export function openElevator(opts: ElevatorOptions): void {
     if (matches.length > SHOWN) rows.push(h('p.empty', { style: 'padding:8px 10px' }, `…and ${matches.length - SHOWN} more — type to narrow it down`));
     listEl.replaceChildren(...rows);
     const pick = choice();
-    const dest = pick ? `${store.projectsDir.dir}/${pick}` : `${store.projectsDir.dir}/<owner>/<repo>`;
+    const dest = pick ? `${store.projectsDir.dir}/${pick.split('/').pop()}` : `${store.projectsDir.dir}/<repo>`;
     const change = store.me.admin ? h('button.btn.dir-change', { type: 'button', title: 'Clone new projects into another folder on the office’s machine' }, '📁 Change folder') : null;
     change?.addEventListener('click', () => editDir(true));
     // While it clones: how far it's got (the office asks GitHub about it first).
diff --git a/src/client/ui/settings.ts b/src/client/ui/settings.ts
index b9c1a2add..9a0a7a850 100644
--- a/src/client/ui/settings.ts
+++ b/src/client/ui/settings.ts
@@ -415,7 +415,7 @@ export function openSettings(net: Net, settings: Settings, onChange: (s: Setting
     dirRow.classList.toggle('hidden', !admin);
     dirActions.classList.toggle('hidden', !admin || !custom);
     dirNote.textContent =
-      `New projects from the elevator are cloned into ${dir}/<owner>/<repo> on the office’s machine.` +
+      `New projects from the elevator are cloned into ${dir}/<repo> on the office’s machine.` +
       (custom && by && at ? ` Set by ${by} ${timeAgo(at)}.` : '') +
       (admin ? ' A checkout of the same repository that’s already there is used as it is. Floors you already have stay where they are.' : ' An admin can move it.');
   };
diff --git a/src/server/building.ts b/src/server/building.ts
index d2e92c523..295160511 100644
--- a/src/server/building.ts
+++ b/src/server/building.ts
@@ -68,7 +68,7 @@ const MAX_REPOS = 1000;
 /**
  * The floors of the building, saved in <office>/.agent-office/floors.json: which projects there are,
  * where their checkouts live, and how each floor is painted. New floors are cloned with the office
- * machine's `gh` login into <projects>/<owner>/<repo>; the projects folder can be picked in ⚙️ Settings
+ * machine's `gh` login into <projects>/<repo>; the projects folder can be picked in ⚙️ Settings
  * (kept in projects-folder.json).
  */
 export class Building {
diff --git a/src/server/config.ts b/src/server/config.ts
index 177613751..6832b8270 100644
--- a/src/server/config.ts
+++ b/src/server/config.ts
@@ -11,7 +11,7 @@ export interface Config {
   /** The office's own folder: the building's data lives in its .agent-office. */
   dir: string;
   dataDir: string;
-  /** Where new floors are cloned by default, as <projectsDir>/<owner>/<repo>. */
+  /** Where new floors are cloned by default, as <projectsDir>/<repo>. */
   projectsDir: string;
   /** --projects / AGENT_OFFICE_PROJECTS: picks the projects folder, as ⚙️ Settings in the office does. */
   projects?: string;
@@ -108,7 +108,7 @@ Commands:
 Options:
       --home <dir>        Where the office keeps its data when no [dir] is given
                           (default ~/agent-office, env AGENT_OFFICE_HOME)
-      --projects <dir>    Where new floors are cloned, as <dir>/<owner>/<repo>
+      --projects <dir>    Where new floors are cloned, as <dir>/<repo>
                           (default ~/agent-office, env AGENT_OFFICE_PROJECTS).
                           Also settable from ⚙️ Settings in the office
   -p, --port <n>          Port to listen on (default 4600, env PORT)
diff --git a/src/server/setup.ts b/src/server/setup.ts
index 8dad2f93a..8cbcd6b81 100644
--- a/src/server/setup.ts
+++ b/src/server/setup.ts
@@ -36,7 +36,7 @@ while the office is stopped; while it runs, use its elevator and ⚙️ Settings
 
 Options:
       --home <dir>        The office to set up (default ~/agent-office, env AGENT_OFFICE_HOME)
-      --projects <dir>    Clone new projects into <dir>/<owner>/<repo> from now on
+      --projects <dir>    Clone new projects into <dir>/<repo> from now on
       --project <repo>    Clone this repository (owner/name or a GitHub URL) as a floor.
                           Repeat it for more than one
   -h, --help              Show this help
@@ -128,7 +128,7 @@ export async function setupCommand(argv: string[]): Promise<number> {
         console.error(`agent-office setup: --projects: ${err}`);
         return 1;
       }
-      console.log(`  📁 New projects are cloned into ${building.projectsDirState().dir}/<owner>/<repo>`);
+      console.log(`  📁 New projects are cloned into ${building.projectsDirState().dir}/<repo>`);
     }
     for (const repo of repos) if (!(await addFloor(building, repo, 'agent-office setup'))) code = 1;
     return code;
@@ -158,14 +158,14 @@ async function walkthrough(building: Building, dataDir: string, askFolder: boole
 async function pickFolder(building: Building) {
   const now = building.projectsDirState();
   const suggestion = now.custom ? now.dir : tildify(suggestedFolder(building.projectsDir));
-  console.log(`\n  📁 Where should the office clone your projects? Each one goes in <folder>/<owner>/<repo>.`);
+  console.log(`\n  📁 Where should the office clone your projects? Each one goes in <folder>/<repo>.`);
   for (;;) {
     const answer = (await ask(`     Folder [${suggestion}]: `)) || suggestion;
     const err = building.setProjectsDir(answer, whoAmI());
     if (!err) break;
     console.log(`     ✗ ${err}`);
   }
-  console.log(`     ✓ ${building.projectsDirState().dir}/<owner>/<repo> (admins can change it in ⚙️ Settings)`);
+  console.log(`     ✓ ${building.projectsDirState().dir}/<repo> (admins can change it in ⚙️ Settings)`);
 }
 
 /** Where to suggest cloning projects: a code folder that's already in the home folder, else `fallback`. */
diff --git a/src/shared/protocol/floors.ts b/src/shared/protocol/floors.ts
index b431b71c9..48c83699c 100644
--- a/src/shared/protocol/floors.ts
+++ b/src/shared/protocol/floors.ts
@@ -73,7 +73,7 @@ export interface CloneProgress {
   detail?: string;
 }
 
-/** Where the elevator's "add a project" clones to: <dir>/<owner>/<repo> on the office's machine. */
+/** Where the elevator's "add a project" clones to: <dir>/<repo> on the office's machine. */
 export interface ProjectsDirState {
   /** For showing people: under the home folder it's ~/…. */
   dir: string;

From d39cc8026b6fbfb7458f1f33e6d1116af3a42077 Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:21:32 +0400
Subject: [PATCH 33/35] No cigarette butts in the balcony ashtray

---
 src/client/world/office/balcony.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/client/world/office/balcony.ts b/src/client/world/office/balcony.ts
index c5632b27e..6a6532057 100644
--- a/src/client/world/office/balcony.ts
+++ b/src/client/world/office/balcony.ts
@@ -136,22 +136,13 @@ export function buildBalcony(group: THREE.Group, colliders: Collider[], interact
 
   group.add(mergeByMaterial(parts));
 
-  // The ashtray: a standing bin with a sand-filled bowl and a couple of butts in it.
+  // The ashtray: a standing bin with a sand-filled bowl.
   const tray = new THREE.Group();
   const steel = toon('#8d99ae');
   tray.add(mesh(new THREE.CylinderGeometry(0.2, 0.22, 0.05, 16), steel, 0, 0.025, 0));
   tray.add(mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.8, 10), steel, 0, 0.45, 0));
   tray.add(mesh(new THREE.CylinderGeometry(0.2, 0.14, 0.14, 16), steel, 0, 0.9, 0));
   tray.add(mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.02, 16), toon('#e9d8a6'), 0, 0.965, 0, false));
-  for (const [bx, bz, a] of [
-    [0.06, 0.02, 0.4],
-    [-0.05, -0.06, 2.1],
-    [-0.02, 0.08, 1.2],
-  ]) {
-    const butt = mesh(new THREE.CylinderGeometry(0.014, 0.014, 0.07, 6).rotateZ(Math.PI / 2), toon(a > 1 ? '#fffaf3' : '#e9a03b'), bx, 0.98, bz, false);
-    butt.rotation.y = a;
-    tray.add(butt);
-  }
   tray.position.set(ASHTRAY.x, 0, ASHTRAY.z);
   group.add(tray);
   colliders.push({ minX: ASHTRAY.x - 0.2, maxX: ASHTRAY.x + 0.2, minZ: ASHTRAY.z - 0.2, maxZ: ASHTRAY.z + 0.2, top: 1 });

From c2fe1f9605de92cb52f7add6e5d1a41e955fd04b Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:22:39 +0400
Subject: [PATCH 34/35] Remove the balcony ashtray and its smoke-break spot

---
 src/client/world/office/balcony.ts | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/src/client/world/office/balcony.ts b/src/client/world/office/balcony.ts
index 6a6532057..61d7fbf75 100644
--- a/src/client/world/office/balcony.ts
+++ b/src/client/world/office/balcony.ts
@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import { ASHTRAY, BALCONY, EXIT_STAIRS, SLAB, STREET_Y } from '../../../shared/layout';
+import { BALCONY, EXIT_STAIRS, SLAB, STREET_Y } from '../../../shared/layout';
 import { bulb, type NightParts } from '../outside';
 import { mergeByMaterial, mesh, roundedBox, textPlane, toon } from '../toon';
 import type { Collider, Interactable } from '../types';
@@ -136,21 +136,7 @@ export function buildBalcony(group: THREE.Group, colliders: Collider[], interact
 
   group.add(mergeByMaterial(parts));
 
-  // The ashtray: a standing bin with a sand-filled bowl.
-  const tray = new THREE.Group();
-  const steel = toon('#8d99ae');
-  tray.add(mesh(new THREE.CylinderGeometry(0.2, 0.22, 0.05, 16), steel, 0, 0.025, 0));
-  tray.add(mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.8, 10), steel, 0, 0.45, 0));
-  tray.add(mesh(new THREE.CylinderGeometry(0.2, 0.14, 0.14, 16), steel, 0, 0.9, 0));
-  tray.add(mesh(new THREE.CylinderGeometry(0.18, 0.18, 0.02, 16), toon('#e9d8a6'), 0, 0.965, 0, false));
-  tray.position.set(ASHTRAY.x, 0, ASHTRAY.z);
-  group.add(tray);
-  colliders.push({ minX: ASHTRAY.x - 0.2, maxX: ASHTRAY.x + 0.2, minZ: ASHTRAY.z - 0.2, maxZ: ASHTRAY.z + 0.2, top: 1 });
-  const it: Interactable = { kind: 'smoke', x: ASHTRAY.x, z: ASHTRAY.z, radius: 1.8 };
-  interactables.push(it);
-  tray.userData.interact = it;
-
-  const sign = textPlane('🚬 Smoke break', { bg: '#2b2d42', color: '#fffaf3', size: 56, border: '#fffaf3' });
+  const sign = textPlane('Balcony', { bg: '#2b2d42', color: '#fffaf3', size: 56, border: '#fffaf3' });
   sign.scale.multiplyScalar(0.8);
   sign.position.set(-6.5, 2.2, minZ + 0.02);
   group.add(sign);

From 6054f1cf77c96456420d848e81ef4597c3b7155b Mon Sep 17 00:00:00 2001
From: Anwar Selo <anwarselo@M3MAX.local>
Date: Tue, 6 Oct 2026 00:36:39 +0400
Subject: [PATCH 35/35] Replace the office dog with a voxel cat

---
 src/client/features/dog/cat.ts   | 238 +++++++++++++++++++++++++++++++
 src/client/features/dog/sound.ts |  14 +-
 src/client/features/dog/world.ts |  14 +-
 src/client/ui/settings-dog.ts    |   6 +-
 src/shared/dog.ts                |   4 +-
 5 files changed, 258 insertions(+), 18 deletions(-)
 create mode 100644 src/client/features/dog/cat.ts

diff --git a/src/client/features/dog/cat.ts b/src/client/features/dog/cat.ts
new file mode 100644
index 000000000..eba3b12bb
--- /dev/null
+++ b/src/client/features/dog/cat.ts
@@ -0,0 +1,238 @@
+import * as THREE from 'three';
+import type { DogBreed } from '../../../shared/dog';
+import type { Model } from '../../world/models';
+
+// The office cat, in blocks: a Group of named bone nodes (same names the dog's rig had, so world.ts
+// moves the jaw and eyes, dresses it and picks it the same way) with a block or two on each, and
+// clips made by code for each thing it does. Its materials are named for what they're painted with
+// (see PAINT in world.ts).
+
+const mat = (name: string) => {
+  const m = new THREE.MeshStandardMaterial({ name, roughness: 0.9, metalness: 0 });
+  m.userData.outlineParameters = { visible: false };
+  return m;
+};
+
+const E = (x: number, y: number, z: number) => new THREE.Quaternion().setFromEuler(new THREE.Euler(x, y, z));
+
+export interface Cat extends Model {
+  pick: THREE.Mesh[];
+  top: number;
+  drop: Record<string, number>;
+}
+
+/** How each kind of cat differs: body length and width, height, and how big its tail and ears are. */
+const BUILD: Record<DogBreed, { len: number; wide: number; tall: number; tail: number; ears: number }> = {
+  pup: { len: 1, wide: 1, tall: 1, tail: 1, ears: 1 },
+  corgi: { len: 0.95, wide: 1.1, tall: 0.95, tail: 0.9, ears: 1.15 },
+  dachshund: { len: 1.2, wide: 0.9, tall: 0.9, tail: 1.1, ears: 1 },
+  pug: { len: 0.9, wide: 1.25, tall: 0.95, tail: 0.8, ears: 0.9 },
+  shiba: { len: 1.05, wide: 1, tall: 1.05, tail: 1.2, ears: 1 },
+  pomeranian: { len: 0.95, wide: 1.15, tall: 1, tail: 1.5, ears: 1.1 },
+};
+
+export function buildCat(breed: DogBreed): Cat {
+  const b = BUILD[breed] ?? BUILD.pup;
+  const fur = mat('Fur');
+  const light = mat('Light');
+  const ear = mat('Ear');
+  const ink = mat('Ink');
+  const nose = mat('Nose');
+  const tongue = mat('Tongue');
+  const collar = mat('Collar');
+  const tag = mat('Tag');
+  const pick: THREE.Mesh[] = [];
+  const unseen = new THREE.MeshBasicMaterial({ visible: false });
+
+  const bone = (name: string, parent: THREE.Object3D, x = 0, y = 0, z = 0) => {
+    const g = new THREE.Group();
+    g.name = name;
+    g.position.set(x, y, z);
+    parent.add(g);
+    return g;
+  };
+  const box = (parent: THREE.Object3D, m: THREE.Material, w: number, h: number, d: number, x = 0, y = 0, z = 0) => {
+    const mesh = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m);
+    mesh.position.set(x, y, z);
+    parent.add(mesh);
+    return mesh;
+  };
+  const hit = (parent: THREE.Object3D, w: number, h: number, d: number, x = 0, y = 0, z = 0) => {
+    const m = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), unseen);
+    m.position.set(x, y, z);
+    parent.add(m);
+    pick.push(m);
+  };
+
+  const model = new THREE.Group();
+  model.name = 'cat';
+  const hipsY = 0.19 * b.tall;
+  const hips = bone('hips', model, 0, hipsY, -0.12 * b.len);
+  const spine = bone('spine', hips, 0, 0, 0.12 * b.len);
+  const chest = bone('chest', spine, 0, 0, 0.12 * b.len);
+  box(hips, fur, 0.13 * b.wide, 0.12, 0.17 * b.len, 0, 0, 0.02);
+  box(spine, fur, 0.13 * b.wide, 0.12, 0.14 * b.len, 0, 0, 0.0);
+  box(chest, fur, 0.14 * b.wide, 0.14, 0.14, 0, 0.005, 0.0);
+  box(spine, light, 0.1 * b.wide, 0.03, 0.2 * b.len, 0, -0.06, 0.04);
+  // Tabby stripes across the back.
+  for (const z of [-0.06, 0.0, 0.06]) box(spine, ink, 0.135 * b.wide, 0.012, 0.02, 0, 0.062, z);
+  hit(hips, 0.15, 0.14, 0.3 * b.len, 0, 0, 0.1);
+  hit(chest, 0.16, 0.16, 0.16);
+  const back = bone('socket_back', spine, 0, 0.07, 0);
+  void back;
+
+  // Neck and head.
+  const neck = bone('neck', chest, 0, 0.05, 0.07);
+  bone('socket_neck', neck, 0, 0, 0);
+  box(neck, fur, 0.1, 0.09, 0.07, 0, 0, 0.0);
+  const head = bone('head', neck, 0, 0.04, 0.05);
+  box(head, fur, 0.14, 0.12, 0.12, 0, 0.01, 0.03);
+  box(head, light, 0.07, 0.045, 0.04, 0, -0.03, 0.095);
+  box(head, nose, 0.02, 0.014, 0.014, 0, -0.005, 0.118);
+  box(head, ink, 0.006, 0.05, 0.006, -0.0, -0.037, 0.114);
+  // Whiskers, thin and pale.
+  for (const s of [-1, 1]) for (const y of [-0.025, -0.045]) box(head, light, 0.07, 0.003, 0.003, s * 0.08, y, 0.1);
+  bone('socket_head', head, 0, 0.065, 0.02);
+  bone('socket_nose', head, 0, -0.005, 0.12);
+  const jaw = bone('jaw', head, 0, -0.045, 0.06);
+  box(jaw, light, 0.06, 0.016, 0.06, 0, 0, 0.0);
+  box(jaw, tongue, 0.03, 0.008, 0.035, 0, 0.008, 0.005);
+  hit(head, 0.15, 0.14, 0.16, 0, 0, 0.04);
+  for (const [s, side] of [[-1, 'L'], [1, 'R']] as const) {
+    const eye = bone(`eye_${side}`, head, s * 0.04, 0.025, 0.092);
+    box(eye, ink, 0.022, 0.026, 0.01);
+    box(eye, mat('Shine'), 0.008, 0.008, 0.004, s * 0.003, 0.006, 0.006);
+    // Pointed ears: a block, with a smaller one on top for the tip.
+    const e = bone(`ear_${side}`, head, s * 0.05, 0.075, 0.015);
+    box(e, fur, 0.045 * b.ears, 0.045 * b.ears, 0.025, 0, 0.012, 0);
+    box(e, ear, 0.025 * b.ears, 0.026 * b.ears, 0.012, 0, 0.012, 0.007);
+    const tip = bone(`ear_tip_${side}`, e, 0, 0.04 * b.ears, 0);
+    box(tip, fur, 0.022 * b.ears, 0.025 * b.ears, 0.022);
+    hit(e, 0.06, 0.07, 0.04, 0, 0.025, 0);
+  }
+  // The collar and its tag, round the neck.
+  box(neck, collar, 0.115, 0.022, 0.09, 0, -0.03, -0.0);
+  box(neck, tag, 0.02, 0.02, 0.008, 0, -0.058, 0.048);
+
+  // Tail: three blocks, curled up at the end.
+  const tail1 = bone('tail_1', hips, 0, 0.02, -0.1 * b.len);
+  box(tail1, fur, 0.04, 0.04, 0.09 * b.tail, 0, 0, -0.04 * b.tail);
+  const tail2 = bone('tail_2', tail1, 0, 0, -0.09 * b.tail);
+  box(tail2, fur, 0.04, 0.04, 0.09 * b.tail, 0, 0, -0.04 * b.tail);
+  box(tail2, ink, 0.042, 0.042, 0.02, 0, 0, -0.03 * b.tail);
+  const tail3 = bone('tail_3', tail2, 0, 0, -0.09 * b.tail);
+  box(tail3, fur, 0.04, 0.04, 0.08 * b.tail, 0, 0, -0.04 * b.tail);
+  box(tail3, light, 0.042, 0.042, 0.03, 0, 0, -0.07 * b.tail);
+  hit(tail1, 0.07, 0.07, 0.2 * b.tail, 0, 0, -0.1 * b.tail);
+  hit(tail3, 0.07, 0.07, 0.2 * b.tail, 0, 0, -0.06 * b.tail);
+
+  // Legs: upper, lower and a paw each, on the chest (front) and hips (back).
+  for (const [s, side] of [[-1, 'L'], [1, 'R']] as const) {
+    for (const [pre, parent, z, tall] of [['front', chest, 0.0, 0.1], ['back', hips, 0.0, 0.09]] as const) {
+      const up = bone(`${pre}_upper_${side}`, parent, s * 0.055 * b.wide, -0.045, z);
+      box(up, fur, 0.05, tall, 0.055, 0, -tall / 2 + 0.02, 0);
+      const low = bone(`${pre}_lower_${side}`, up, 0, -tall + 0.02, 0);
+      box(low, fur, 0.04, 0.07, 0.045, 0, -0.03, 0);
+      const paw = bone(`${pre}_paw_${side}`, low, 0, -0.065, 0.005);
+      box(paw, light, 0.045, 0.03, 0.065, 0, -0.005, 0.012);
+      hit(up, 0.07, tall + 0.05, 0.08, 0, -tall / 2, 0);
+      hit(paw, 0.06, 0.06, 0.08, 0, -0.01, 0.01);
+    }
+  }
+
+  // ---- Clips ------------------------------------------------------------------------------------------
+  const names: string[] = [];
+  model.traverse((o) => o.name && o !== model && names.push(o.name));
+  type Pose = Record<string, [number, number, number]>;
+  const clip = (name: string, duration: number, pose: (t: number) => Pose, hipsDrop: (t: number) => number = () => 0) => {
+    const N = 16;
+    const times: number[] = [];
+    const quats = new Map<string, number[]>();
+    const ys: number[] = [];
+    for (let k = 0; k <= N; k++) {
+      const t = (k / N) * duration;
+      times.push(t);
+      const p = pose(t);
+      for (const n of names) {
+        if (n.startsWith('eye') || n === 'jaw' || n.startsWith('socket')) continue;
+        const r = p[n] ?? [0, 0, 0];
+        const q = E(r[0], r[1], r[2]);
+        const arr = quats.get(n) ?? [];
+        arr.push(q.x, q.y, q.z, q.w);
+        quats.set(n, arr);
+      }
+      ys.push(hipsY + hipsDrop(t));
+    }
+    const tracks: THREE.KeyframeTrack[] = [...quats].map(([n, v]) => new THREE.QuaternionKeyframeTrack(`${n}.quaternion`, times, v));
+    tracks.push(new THREE.VectorKeyframeTrack('hips.position', times, ys.flatMap((y) => [0, y, -0.12 * b.len])));
+    return new THREE.AnimationClip(name, duration, tracks);
+  };
+
+  const sw = (t: number, d: number, ph = 0) => Math.sin(((t / d) * 2 + ph) * Math.PI);
+  /** The tail curled up like a question mark, swaying a little. */
+  const tailUp = (t: number, d: number, amp = 0.15, sway = 0.15): Pose => ({
+    tail_1: [-0.7, sw(t, d) * sway, 0],
+    tail_2: [-0.5, sw(t, d, 0.3) * amp, 0],
+    tail_3: [-0.5, sw(t, d, 0.6) * amp, 0],
+  });
+  const gait = (t: number, d: number, amp: number): Pose => ({
+    ...tailUp(t, d, 0.1, 0.1),
+    front_upper_L: [sw(t, d) * amp, 0, 0],
+    front_upper_R: [sw(t, d, 1) * amp, 0, 0],
+    back_upper_L: [sw(t, d, 1) * amp, 0, 0],
+    back_upper_R: [sw(t, d) * amp, 0, 0],
+    front_lower_L: [Math.max(0, -sw(t, d)) * amp * 1.1, 0, 0],
+    front_lower_R: [Math.max(0, sw(t, d)) * amp * 1.1, 0, 0],
+    back_lower_L: [Math.max(0, sw(t, d)) * amp * 1.1, 0, 0],
+    back_lower_R: [Math.max(0, -sw(t, d)) * amp * 1.1, 0, 0],
+    spine: [sw(t, d, 0.5) * 0.04, 0, 0],
+    neck: [0.1 + sw(t, d, 0.5) * 0.03, 0, 0],
+  });
+  /** Sitting: haunches down, front up, tail curled round. */
+  const sit = (t: number): Pose => ({
+    hips: [-0.75, 0, 0],
+    spine: [0.45, 0, 0],
+    chest: [0.15, 0, 0],
+    neck: [-0.1, 0, 0],
+    back_upper_L: [1.6, 0, 0.2],
+    back_upper_R: [1.6, 0, -0.2],
+    back_lower_L: [-1.6, 0, 0],
+    back_lower_R: [-1.6, 0, 0],
+    tail_1: [0.1, 0, 0],
+    tail_2: [0, sw(t, 4) * 0.35 + 0.5, 0],
+    tail_3: [0, sw(t, 4, 0.3) * 0.2 + 0.5, 0],
+  });
+  const lie = (t: number): Pose => ({
+    spine: [0, 0, 0],
+    front_upper_L: [-1.3, 0, 0.1],
+    front_upper_R: [-1.3, 0, -0.1],
+    front_lower_L: [1.6, 0, 0],
+    front_lower_R: [1.6, 0, 0],
+    back_upper_L: [1.2, 0, 0.5],
+    back_upper_R: [1.2, 0, -0.5],
+    back_lower_L: [-1.5, 0, 0],
+    back_lower_R: [-1.5, 0, 0],
+    tail_1: [0.2, 0.7, 0],
+    tail_2: [0, 0.5 + sw(t, 5) * 0.05, 0],
+    tail_3: [0, 0.5, 0],
+  });
+  const clips: THREE.AnimationClip[] = [
+    clip('stand', 3, (t) => ({ ...tailUp(t, 3), chest: [sw(t, 3) * 0.012, 0, 0] })),
+    clip('walk', 0.8, (t) => gait(t, 0.8, 0.55)),
+    clip('run', 0.5, (t) => ({ ...gait(t, 0.5, 0.95), spine: [sw(t, 0.5) * 0.18, 0, 0], tail_1: [-0.3, 0, 0] }), (t) => Math.abs(sw(t, 0.5)) * 0.02),
+    clip('sit', 4, sit, () => -0.075),
+    clip('lie', 5, lie, () => -0.12),
+    clip('nap', 5, (t) => ({ ...lie(t), neck: [0.5 + sw(t, 5) * 0.03, 0, 0], head: [0.3, 0, 0.2] }), () => -0.125),
+    clip('sniff', 2, (t) => ({ ...tailUp(t, 2), neck: [0.7, 0, 0], head: [0.3 + Math.abs(sw(t, 0.5)) * 0.15, 0, 0], front_upper_L: [-0.2, 0, 0], front_upper_R: [-0.2, 0, 0] })),
+    clip('bark', 1.4, (t) => ({ ...tailUp(t, 1.4, 0.2, 0.2), neck: [-0.35, 0, 0], head: [-0.15, 0, 0], chest: [-0.1, 0, 0] })),
+    clip('wag', 0.9, (t) => ({ ...sit(t), tail_1: [-0.4, sw(t, 0.3) * 0.5, 0], tail_2: [-0.2, sw(t, 0.3, 0.3) * 0.4, 0], tail_3: [-0.2, sw(t, 0.3, 0.6) * 0.4, 0] }), () => -0.075),
+  ];
+
+  return {
+    scene: model,
+    clips,
+    pick,
+    top: hipsY + 0.2,
+    drop: { stand: 0, walk: 0, run: 0, sit: 0.1, lie: 0.2, nap: 0.21, sniff: 0.03, bark: 0, wag: 0.1 },
+  };
+}
diff --git a/src/client/features/dog/sound.ts b/src/client/features/dog/sound.ts
index 12de00b59..368b1168d 100644
--- a/src/client/features/dog/sound.ts
+++ b/src/client/features/dog/sound.ts
@@ -13,8 +13,8 @@ export function bark(a: AudioCore, x: number, z: number, times: number) {
   let t = ctx.currentTime + 0.03;
   const pitch = rand(0.95, 1.05);
   for (let i = 0; i < times; i++) {
-    woof(a, out, t, 300 * pitch * rand(0.95, 1.05), 0.17, 0.55);
-    t += rand(0.3, 0.42);
+    woof(a, out, t, 520 * pitch * rand(0.95, 1.05), 0.55, 0.4);
+    t += rand(0.7, 0.9);
   }
 }
 
@@ -25,7 +25,7 @@ export function yip(a: AudioCore, x: number, z: number) {
   a.count('yip');
   const out = a.panner({ x, y: 0.5, z }, 1.5, 1);
   out.connect(a.ambience);
-  woof(a, out, ctx.currentTime + 0.02, 620, 0.09, 0.3);
+  woof(a, out, ctx.currentTime + 0.02, 900, 0.16, 0.2);
 }
 
 /** One bark: a buzzy voice that leaps up in pitch and falls away, shaped into a "wuh", with a breathy rasp. */
@@ -33,10 +33,10 @@ function woof(a: AudioCore, out: AudioNode, t: number, f: number, len: number, g
   const ctx = a.ctx!;
   const voice = ctx.createOscillator();
   voice.type = 'sawtooth';
-  voice.frequency.setValueAtTime(f * 0.75, t);
-  voice.frequency.exponentialRampToValueAtTime(f * 1.45, t + len * 0.22);
-  voice.frequency.exponentialRampToValueAtTime(f * 0.6, t + len);
-  const mouth = biquad(ctx, 'bandpass', 950, 1.1);
+  voice.frequency.setValueAtTime(f * 0.8, t);
+  voice.frequency.exponentialRampToValueAtTime(f * 1.3, t + len * 0.35);
+  voice.frequency.exponentialRampToValueAtTime(f * 0.7, t + len);
+  const mouth = biquad(ctx, 'bandpass', 1400, 2);
   mouth.frequency.setValueAtTime(700, t);
   mouth.frequency.linearRampToValueAtTime(1300, t + len * 0.3);
   mouth.frequency.linearRampToValueAtTime(600, t + len);
diff --git a/src/client/features/dog/world.ts b/src/client/features/dog/world.ts
index 46b1cb63b..cf1b40dde 100644
--- a/src/client/features/dog/world.ts
+++ b/src/client/features/dog/world.ts
@@ -1,3 +1,4 @@
+import { buildCat, type Cat } from './cat';
 import * as THREE from 'three';
 import { BARK_EVERY_S, BARK_FOR_S, DOG_COATS, dogAt, dogBreed, legSeconds, type DogAct, type DogBreed, type DogState } from '../../../shared/dog';
 import type { Theme } from '../../../shared/protocol';
@@ -305,7 +306,7 @@ export class Dog {
       if (!this.hushed(s.workerId)) {
         this.sounds.bark(at.x, at.z, this.barks === 0 ? 3 : 2);
         this.woofT = 0;
-        this.say('woof', this.barks === 0 ? 'Woof! Woof! Woof!' : 'Woof! Woof!', 1.4);
+        this.say('meow', this.barks === 0 ? 'Meow! Meow! Meow!' : 'Meow! Meow!', 1.4);
       }
       this.barks++;
       this.nextBark = this.arriveAt + this.barks * BARK_EVERY_S * 1000;
@@ -323,7 +324,7 @@ export class Dog {
    */
   private wear(breed: DogBreed) {
     this.wants = breed;
-    this.loading = loadModel(`dog-${breed}`)
+    this.loading = Promise.resolve(buildCat(breed))
       .then((m) => {
         if (this.wants !== breed) return false;
         this.attach(m, breed);
@@ -342,7 +343,8 @@ export class Dog {
    * Puts a loaded model on in place of the one it had: paints it, fits its picking capsules, finds the
    * bones the code moves and the costume sockets, and dresses it.
    */
-  private attach({ scene: model, clips }: Model, breed: DogBreed) {
+  private attach(cat: Cat, breed: DogBreed) {
+    const { scene: model, clips } = cat;
     const nose: THREE.Object3D[] = [];
     let collar = PUP_COLLAR_WIDTH;
     // The model comes split into one part per material; its materials are only names for what to paint.
@@ -370,14 +372,14 @@ export class Dog {
       return o;
     };
     // Everything here reads the model at rest, before any clip has posed it.
-    const { pick, top } = fitPicking(model);
+    const { pick, top } = cat;
     const jaw = part('jaw');
     const jawRest = jaw.quaternion.clone();
     const eyes = ['eye_L', 'eye_R'].map((n) => {
       const bone = part(n);
       return { bone, rest: bone.scale.clone() };
     });
-    const drop = drops(model, clips, top);
+    const drop = cat.drop as Partial<Record<Act, number>>;
     const mixer = new THREE.AnimationMixer(model);
     const rig: Rig = {
       breed,
@@ -461,7 +463,7 @@ export class Dog {
       this.root.remove(this.tag);
       disposeSprite(this.tag);
     }
-    this.tag = textSprite(`🐶 ${name}`, { bg: '#fffaf3', size: 30 });
+    this.tag = textSprite(`🐱 ${name}`, { bg: '#fffaf3', size: 30 });
     this.tag.position.y = (this.rig?.top ?? PUP_TOP) + TAG_OVER;
     this.root.add(this.tag);
   }
diff --git a/src/client/ui/settings-dog.ts b/src/client/ui/settings-dog.ts
index 049a7c686..76e3f4eb4 100644
--- a/src/client/ui/settings-dog.ts
+++ b/src/client/ui/settings-dog.ts
@@ -1,4 +1,4 @@
-// ⚙️ Settings' Office dog, under Building: its name, and its breed and coat as buttons, for everyone
+// ⚙️ Settings' Office cat, under Building: its name, and its breed and coat as buttons, for everyone
 // on the floor (see server/dog.ts).
 import type { Net } from '../net';
 import { store } from '../state';
@@ -7,7 +7,7 @@ import { h } from './dom';
 
 /** The setting, made by `frame` from what goes in it, and how to paint it afresh when the dog changes. */
 export function dogSetting(net: Net, frame: (body: Node[]) => HTMLElement): { section: HTMLElement; paint: () => void } {
-  const dogInput = h('input', { type: 'text', maxlength: DOG_NAME_MAX, 'aria-label': 'The dog’s name', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
+  const dogInput = h('input', { type: 'text', maxlength: DOG_NAME_MAX, 'aria-label': 'The cat’s name', spellcheck: 'false', autocomplete: 'off' }) as HTMLInputElement;
   const dogSave = h('button.btn.primary', { type: 'button' }, 'Rename');
   const dogNote = h('p.setting-note');
   const breedRow = h('div.seg', { role: 'radiogroup', 'aria-label': 'Breed' });
@@ -18,7 +18,7 @@ export function dogSetting(net: Net, frame: (body: Node[]) => HTMLElement): { se
     dogSection.classList.toggle('hidden', !dog);
     if (!dog) return;
     dogInput.placeholder = dog.name;
-    dogNote.textContent = `${dog.name} lives on this floor. When a worker needs input, ${dog.name} runs to its desk and barks. Walk up and press E to pet it. Its name, breed and coat are for everyone on this floor.`;
+    dogNote.textContent = `${dog.name} lives on this floor. When a worker needs input, ${dog.name} runs to its desk and meows. Walk up and press E to pet it. Its name, breed and coat are for everyone on this floor.`;
     const breed = dogBreed(dog.breed);
     breedRow.replaceChildren(
       ...DOG_BREEDS.map((b) =>
diff --git a/src/shared/dog.ts b/src/shared/dog.ts
index 6e712a0f3..4efc430ad 100644
--- a/src/shared/dog.ts
+++ b/src/shared/dog.ts
@@ -31,13 +31,13 @@ export interface DogState {
 export const DOG_NAME_MAX = 24;
 
 /** A new floor's dog is called one of these until someone names it in ⚙️ Settings (none is a worker's name). */
-export const DOG_NAMES = ['Biscuit', 'Pancake', 'Peanut', 'Pepper', 'Cookie', 'Bagel', 'Ziggy', 'Pretzel', 'Maple', 'Scout'];
+export const DOG_NAMES = ['Biscuit', 'Pancake', 'Whiskers', 'Pepper', 'Mochi', 'Bagel', 'Ziggy', 'Mittens', 'Maple', 'Luna'];
 
 /** A floor's dog is one of these, each its own model (dog-<breed>.glb) with the same rig and clips. */
 export const DOG_BREEDS = ['pup', 'corgi', 'dachshund', 'pug', 'shiba', 'pomeranian'] as const;
 export type DogBreed = (typeof DOG_BREEDS)[number];
 /** What ⚙️ Settings calls each breed. */
-export const DOG_BREED_NAMES: Record<DogBreed, string> = { pup: '🐶 Pup', corgi: '🦊 Corgi', dachshund: '🌭 Dachshund', pug: '🐾 Pug', shiba: '🍂 Shiba', pomeranian: '🧸 Pomeranian' };
+export const DOG_BREED_NAMES: Record<DogBreed, string> = { pup: '🐱 Tabby', corgi: '🦊 Ginger', dachshund: '🌭 Long cat', pug: '🐾 Chonk', shiba: '🍂 Orange', pomeranian: '🧸 Fluffy' };
 
 /**
  * The breeds a floor's dog is dealt from its id (see dogDefaults): the ones there were when floors first