eqosys skin: each game injects or updates its skin through the merged hook (three lines per game) #3598

The eqosys skin hook merged in #3540 (packages/util/src/skin.ts, eqosys({ ..., skin })). Each game now carries its own look onto the eqosys surfaces: account chip, achievement toast, report form, party lobby and spaces panel. eqosys's badge (#3597) stays the same in every game, and with no skin the house look follows the system's light or dark mode. This issue lists what each game still needs, so each menu climb can pick up its own line.

The three lines a game adds (in its eqosys.ts)

export const SKIN = { theme: { "--ui-bg": "var(--paper)", "--ui-ink": "var(--ink)", "--ui-accent": "var(--hot)" }, css: ".eq-who{font-family:var(--f-hand)}" };
export const { signIn, login, accountChip, reportButton, achieve } = eqosys({ app: APP, url: EQOSYS, from: SIGN_IN_FROM, prefix: "xx", skin: SKIN });
accountChip(document.getElementById("account")!, { note, onSignOut: () => location.reload() }); // replaces the game's own sign-in row

theme takes any --ui-* token from packages/ui/src/tokens.ts. Read the game's own CSS variables there rather than copying hex values. css adds rules on .eq-form, .eq-toast, .eq-chip.in, .eq-who, .eq-btn, .rb-lobby and .rb-spaces. Delete the game's own styling of those surfaces in the same PR.

Where each game stands

Already skinned. The skin now needs to follow each game's new menu look:

• Two Fronts (Two Fronts: menus as a warship's distressed-metal plates (Thunder Marines first), hill climb to 8/10, rounds 4+ (from #3565) #3583): SKIN in apps/two-fronts/src/eqosys.ts is worn brass-riveted gunmetal. Match it to the warship plates (--bolts, --steel, --f-stencil) and fit the header chip beside the saga title.
• Mythic Masters, the tome (Mythic Masters: tome UI hill climb to 9.5/10, rounds 9+ (from #3578) #3587): SKIN in apps/mythic-masters/src/account.ts. Move the settings-pane account row (accountPane in main.ts) onto accountChip. The game-controls .gc-craft .gc-acct button rule has to give way.
• Delayed Reaction (Delayed Reaction: menus in the dub radio's own look (tape labels, dials, phone first), hill climb to 8/10, rounds 4+ (from #3581) #3589): SKIN in src/eqosys.ts is black and white. Match it to the radio fascia.
• Alien Disc Golf (Alien Disc Golf: menus as a scorecard and weather board from the course's own world, hill climb to 8/10, rounds 2+ (from #3585) #3591): SKIN in src/account.ts maps its globe colours. Match it to the menu climb's look.
• Skate Tech Park: SKIN in src/eqosys.ts is the house look on its paper, which is final. Add a real-game skin journey for its lobby and spaces, like apps/two-fronts/test/eqosys-skin.test.ts.
• GeoBoxQ: skinned, nothing waiting.

No skin yet (house look). Each one adds the three lines:

• Park Hide & Seek (Park Hide & Seek: menus as a national-park poster, hill climb to 8/10, rounds 3+ (from #3568) #3584): apps/park-hide-seek/src/ui/eqosys.ts. Its sign-in is tied into the name box and party flow (#signin/#signout in src/ui/main.ts), so keep that flow and give it the chip's look, or the chip itself.
• Git Recon: src/eqosys.ts. Same story: account in src/ui/main.ts drives the name box.
• Splat Spray: src/eqosys.ts. A single sign-in button in the name row (accountRow in src/online.ts).
• Hippo Tycoon and Splat Rooms: React Account.tsx screens. Mount accountChip from a ref, or keep the component and add the skin.

Part of #3570.