feat(icons): rebrand app icon; slice the full set from one master

The SVG tracer export failed, so the icon was designed collaboratively from
scratch: a wooden «Э» tile with a ✻ score-subscript in Spectral Bold, wood
grain and diagonal light/shadow. Construction is specified in fractions of the
side in docs/ICON_BRANDBOOK.md; the reference generator, pinned Spectral font
and committed masters live in assets/icons/brand/.

One master -> the whole set (assets/icons/brand/build-set.mjs + build-android-res.mjs):
- web (ui/public): favicon.svg (light+dark via prefers-color-scheme), favicon.ico,
  apple-touch, PWA any + maskable (+ dark variants), og-image reskinned to
  «Эрудит» / Игра в слова
- Capacitor layers: ui/assets/{icon,icon-foreground,icon-background}.png
- Android launcher res, all densities, NO inset, + monochrome themed layer
  (anydpi xml: background+foreground+monochrome)
- manual-upload art: assets/icons/brand/{vk,tg,store} (square, no rounding)

Primary variant light; dark where the platform can theme (favicon.svg). The old
LiberationSans generator (assets/icons/build) is removed; docs/ICONS.md retargeted
onto the single master. ANDROID_PLAN icon-rebrand item marked done.

assets/icons/README.md

@@ -1,41 +1,18 @@
-# Erudit — site icons + Open Graph card
+# Icons
 
-The favicon set and the `og:image` link-preview card for the public landing
-(`ui/landing.html`) and the SPA shell (`ui/index.html`). Same design language as the
-[VK loading-screen logo](../vk/README.md): the wooden Erudit «Э» tile (score `8`),
-with the wordmark on the app's dark board green (`ui/src/app.css` tokens).
-
-| Output (committed to `ui/public/`) | Purpose |
-|------|---------|
-| `favicon.svg` | Vector favicon, transparent; tile + «Э» only (the score is illegible below ~32 px). |
-| `favicon.ico` | 32×32 PNG-in-ICO fallback (also answers the browsers' blind `/favicon.ico` probe). |
-| `apple-touch-icon.png` | 180×180 opaque full-bleed tile; iOS masks its own corners. |
-| `og-image.png` | 1200×630 card: tile + «Эрудит / Скрэббл — игра в слова». Referenced absolutely as `https://erudit-game.ru/og-image.png`. |
-
-## How it works
-
-`build/extract.js` extracts the needed glyph outlines (tile glyphs + every wordmark
-character) from LiberationSans (Arial-metric, the game's font stack) with their
-advance widths into `build/glyphs.json` (committed). `build/generate.js` composes
-plain SVG from those outlines — no font is needed at generation time — writes
-`favicon.svg` and rasterises the PNG/ICO outputs by screenshotting the SVGs with the
-`ui` package's Playwright chromium (`@playwright/test`); the `.ico` container is
-assembled in-script (a single PNG entry). Raster bytes therefore depend on the
-installed chromium version; the SVG sources are deterministic.
-
-## Regenerate
-
-Requirements: Node ≥ 18, `ui` installed (`pnpm install`, provides Playwright).
-`extract.js` additionally needs `opentype.js` (`npm i opentype.js`); **`generate.js`
-needs no extra packages**.
+The whole shipped icon set is sliced from **one master** — see
+[`brand/`](brand/) for the reference generator, the pinned font and the committed
+outputs, and [`../../docs/ICON_BRANDBOOK.md`](../../docs/ICON_BRANDBOOK.md) for how the
+mark is constructed. The per-platform target map (which file goes where) is in
+[`../../docs/ICONS.md`](../../docs/ICONS.md).
 
 ```sh
-cd assets/icons
-
-# 1. (optional) re-extract the glyphs — only if the font or the wordmark changes:
-#    default font: /usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf
-node build/extract.js [/path/to/font.ttf]      # -> build/glyphs.json
-
-# 2. regenerate everything in ui/public/:
-node build/generate.js
+cd brand
+npm i opentype.js
+node build-set.mjs          # web (ui/public) + Capacitor layers (ui/assets) + vk/ tg/ store/
+node build-android-res.mjs  # Android launcher resources (all densities + monochrome)
 ```
+
+> The earlier `build/` pipeline (LiberationSans glyph outlines → favicon/apple-touch/OG)
+> was replaced by `brand/` when the icon was rebranded onto the Spectral «Э» master.
+> The separate VK loading-screen animation lives in [`../vk/`](../vk/) and is unrelated.

assets/icons/brand/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

assets/icons/brand/README.md

@@ -0,0 +1,32 @@
+# Erudit icon — brand master
+
+The reference construction of the Erudit app icon. The authoritative, human-readable
+spec lives in [`docs/ICON_BRANDBOOK.md`](../../../docs/ICON_BRANDBOOK.md); this folder
+holds the machine reproduction of exactly what that document describes.
+
+| File | What |
+|------|------|
+| `build-icon.mjs` | reference generator — every dimension is a fraction of the side, matching the brand book |
+| `render-png.mjs` | rasterises an icon SVG to PNG via the `ui` package's Playwright chromium |
+| `Spectral-Bold.ttf` | the «Э» typeface (SIL OFL, `Spectral-OFL.txt`) — pinned so the letter never drifts |
+| `icon-light.svg` / `.png` | the light master (1024) |
+| `icon-dark.svg` / `.png` | the dark master (1024) |
+| `icon-construction.svg` / `.png` | the percent-annotated construction scheme (figure in the brand book) |
+
+## Regenerate
+
+```sh
+cd assets/icons/brand
+npm i opentype.js                       # the only extra dep; render uses ui's chromium
+
+node build-icon.mjs --variant light  > icon-light.svg
+node build-icon.mjs --variant dark   > icon-dark.svg
+node build-icon.mjs --variant light --scheme > icon-construction.svg
+
+node render-png.mjs icon-light.svg  icon-light.png  1024
+node render-png.mjs icon-dark.svg   icon-dark.png   1024
+node render-png.mjs icon-construction.svg icon-construction.png 2048
+```
+
+The SVGs are resolution-free; render at any size. Downstream slicing (favicon / PWA /
+iOS / Android) is a separate step — see [`docs/ICONS.md`](../../../docs/ICONS.md).

assets/icons/brand/Spectral-OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Spectral Project Authors (https://github.com/productiontype/Spectral)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

assets/icons/brand/build-android-res.mjs

@@ -0,0 +1,47 @@
+'use strict';
+// Generate the Android launcher resources from the committed layers, at every
+// density, with NO inset (our layers already fill the 108 dp canvas) and a
+// monochrome (themed) layer. Run build-set.mjs first (it writes the layer PNGs).
+//
+//   npm i opentype.js  # (only build-icon/build-set need it; this reads PNGs)
+//   node build-set.mjs && node build-android-res.mjs
+//
+// Writes ui/android/app/src/main/res/mipmap-*/ic_launcher{,_round,_foreground,
+// _background,_monochrome}.png. The two mipmap-anydpi-v26/*.xml are committed by hand.
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const DIR = dirname(fileURLToPath(import.meta.url));
+const ROOT = join(DIR, '..', '..', '..');
+const RES = join(ROOT, 'ui', 'android', 'app', 'src', 'main', 'res');
+const uri = p => 'data:image/png;base64,' + readFileSync(p).toString('base64');
+const BG = uri(join(ROOT, 'ui', 'assets', 'icon-background.png'));
+const FG = uri(join(ROOT, 'ui', 'assets', 'icon-foreground.png'));
+const MONO = uri(join(DIR, 'android-monochrome.png'));
+
+// density: [adaptive-layer px (108 dp), legacy launcher px (48 dp)]
+const D = { ldpi: [81, 36], mdpi: [108, 48], hdpi: [162, 72], xhdpi: [216, 96], xxhdpi: [324, 144], xxxhdpi: [432, 192] };
+
+const pw = await import(join(ROOT, 'ui', 'node_modules', '@playwright', 'test', 'index.js'));
+const { chromium } = pw.default ?? pw;
+const browser = await chromium.launch();
+const page = await browser.newPage({ deviceScaleFactor: 1 });
+const im = (u, s) => `<img src="${u}" width="${s}" height="${s}" style="display:block">`;
+async function shot(html, s, transparent) {
+  await page.setViewportSize({ width: s, height: s });
+  await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}#r{width:${s}px;height:${s}px}</style><div id=r>${html}</div>`, { waitUntil: 'networkidle' });
+  return page.locator('#r').screenshot({ omitBackground: !!transparent });
+}
+for (const [d, [fg, lg]] of Object.entries(D)) {
+  const dir = join(RES, `mipmap-${d}`);
+  writeFileSync(join(dir, 'ic_launcher_background.png'), await shot(im(BG, fg), fg, false));
+  writeFileSync(join(dir, 'ic_launcher_foreground.png'), await shot(im(FG, fg), fg, true));
+  writeFileSync(join(dir, 'ic_launcher_monochrome.png'), await shot(im(MONO, fg), fg, true));
+  const comp = `<div style="position:relative;width:${lg}px;height:${lg}px">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
+  writeFileSync(join(dir, 'ic_launcher.png'), await shot(comp, lg, false));
+  const round = `<div style="width:${lg}px;height:${lg}px;border-radius:50%;overflow:hidden;position:relative">${im(BG, lg)}<div style="position:absolute;inset:0">${im(FG, lg)}</div></div>`;
+  writeFileSync(join(dir, 'ic_launcher_round.png'), await shot(round, lg, true));
+  console.log('mipmap-' + d, 'ok');
+}
+await browser.close();

assets/icons/brand/build-icon.mjs

@@ -0,0 +1,159 @@
+'use strict';
+// Erudit app-icon — the reference generator. Every dimension below is a FRACTION
+// of the icon side, so this file reads the same as docs/ICON_BRANDBOOK.md and the
+// icon reproduces at any resolution. Emits one variant/layer's SVG to stdout.
+//
+//   node build-icon.mjs --variant light|dark [--layer full|background|foreground] [--scheme] > icon.svg
+//
+// Layers (for Android adaptive icons):
+//   full        the standalone master (rounded tile + mark) — iOS / PWA / favicon
+//   background  wood + grain + light/shadow, full-bleed square (the OS applies the mask)
+//   foreground  only «Э» + ✻, transparent, re-placed for the round mask (see FG_* below)
+//
+// Deps: opentype.js (npm i opentype.js). Font: ./Spectral-Bold.ttf (OFL, bundled).
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import opentype from 'opentype.js';
+
+const DIR = dirname(fileURLToPath(import.meta.url));
+const args = process.argv.slice(2);
+const has = f => args.includes('--' + f);
+const val = (f, d) => { const i = args.indexOf('--' + f); return i >= 0 ? args[i + 1] : d; };
+
+// ---- the design, in fractions of the side ----
+const S = 1024;                       // reference side (the icon is resolution-free)
+const RADIUS   = 0.17;                // tile corner radius (full master)
+const STAR_BULB = 0.22;               // spoke-end (and hub) radius, as fraction of star radius
+const STAR_SPOKES = 6;
+const GRAIN_COLS = 6, GRAIN_W = 1 / 32, GRAIN_SHIFT = 1 / 16, GRAIN_TILT = 4;
+const SHEEN = 0.15;                   // white, transparent bottom-left -> this alpha top-right
+const SHADE = 0.15;                   // black, this alpha bottom-left -> transparent top-right
+
+// The mark, placed for the standalone master (bottom-right biased, full-bleed):
+const MASTER = { lh: 0.6055, lc: [0.4814, 0.4922], sd: 0.1729, sc: [0.7881, 0.7881] };
+// The mark, placed for the Android foreground layer (centred-ish inside the 61% safe
+// zone, nudged right 8% / down 3% for optical balance under the round mask; smaller ✻):
+const FOREGROUND = { lh: 0.5391, lc: [0.5234, 0.4951], sd: 0.1318, sc: [0.7627, 0.7266] };
+
+const PALETTE = {
+  light: { wood: '#e6b053', ink: '#5a3a12', grain: '#d8a54e' },
+  dark:  { wood: '#4a3316', ink: '#f2d9a0', grain: '#432e14' },
+};
+
+// Layers:
+//   full        rounded tile + master mark        (favicon.svg — browser rounds nothing)
+//   flat        square tile + master mark          (apple-touch, PWA "any" — OS rounds)
+//   background  square tile, no mark               (Android adaptive background)
+//   foreground  mark only, transparent             (Android adaptive foreground)
+//   maskable    square tile + foreground mark       (PWA maskable — safe-zone aware)
+//   monochrome  foreground mark only, flat colour  (Android 13+ themed layer)
+const LAYERS = ['full', 'flat', 'background', 'foreground', 'maskable', 'monochrome'];
+const variant = val('variant', 'light');
+const layer = val('layer', 'full');
+const P = PALETTE[variant];
+if (!P) { console.error(`unknown --variant ${variant} (light|dark)`); process.exit(1); }
+if (!LAYERS.includes(layer)) { console.error(`unknown --layer ${layer} (${LAYERS.join('|')})`); process.exit(1); }
+
+const usesForegroundPlacement = ['foreground', 'maskable', 'monochrome'].includes(layer);
+const drawBg = ['full', 'flat', 'background', 'maskable'].includes(layer);
+const drawMark = layer !== 'background';
+const MARK = usesForegroundPlacement ? FOREGROUND : MASTER;
+const inkColour = layer === 'monochrome' ? val('mono', '#ffffff') : P.ink;
+const RX = layer === 'full' ? RADIUS * S : 0;   // only the standalone master keeps rounded corners
+const font = opentype.parse(readFileSync(join(DIR, 'Spectral-Bold.ttf')).buffer);
+
+// «Э» outline scaled so its ink bounding box is MARK.lh of the side, box centred on MARK.lc.
+function letterSvg() {
+  const g = font.charToGlyph('Э');
+  const h0 = (() => { const b = g.getPath(0, 0, 1000).getBoundingBox(); return b.y2 - b.y1; })();
+  const scale = (MARK.lh * S) / h0;
+  const p = g.getPath(0, 0, 1000 * scale);
+  const bb = p.getBoundingBox();
+  const w = bb.x2 - bb.x1, h = bb.y2 - bb.y1;
+  const tx = MARK.lc[0] * S - (bb.x1 + w / 2);
+  const ty = MARK.lc[1] * S - (bb.y1 + h / 2);
+  return { svg: `<path transform="translate(${tx.toFixed(2)} ${ty.toFixed(2)})" d="${p.toPathData(2)}" fill="${inkColour}"/>`,
+           box: { x: bb.x1 + tx, y: bb.y1 + ty, w, h } };
+}
+
+// Teardrop-spoked asterisk ✻: each spoke tapers to a point at the centre and ends
+// in a round bulb; a central disc equal to the bulb fuses them.
+function starPath() {
+  const cx = MARK.sc[0] * S, cy = MARK.sc[1] * S, Rout = MARK.sd * S / 2;
+  const rb = Rout * STAR_BULB, R = Rout - rb;
+  const L = Math.sqrt(R * R - rb * rb), theta = Math.asin(rb / R);
+  const rot = (v, t) => [v[0] * Math.cos(t) - v[1] * Math.sin(t), v[0] * Math.sin(t) + v[1] * Math.cos(t)];
+  let d = '';
+  for (let k = 0; k < STAR_SPOKES; k++) {
+    const a = -Math.PI / 2 + k * 2 * Math.PI / STAR_SPOKES;
+    const u = [Math.cos(a), Math.sin(a)];
+    const d1 = rot(u, theta), d2 = rot(u, -theta);
+    const T1 = [cx + L * d1[0], cy + L * d1[1]], T2 = [cx + L * d2[0], cy + L * d2[1]];
+    d += `M${cx.toFixed(2)} ${cy.toFixed(2)} L${T1[0].toFixed(2)} ${T1[1].toFixed(2)} A${rb.toFixed(2)} ${rb.toFixed(2)} 0 1 0 ${T2[0].toFixed(2)} ${T2[1].toFixed(2)} Z `;
+  }
+  d += `M${cx} ${cy} m${-rb} 0 a${rb} ${rb} 0 1 0 ${2 * rb} 0 a${rb} ${rb} 0 1 0 ${-2 * rb} 0 Z`;
+  return `<path d="${d}" fill="${inkColour}"/>`;
+}
+
+function grain() {
+  const colW = S / GRAIN_COLS, sw = GRAIN_W * S, shift = GRAIN_SHIFT * S;
+  const yTop = -0.2 * S, yBot = 1.2 * S, cy = S / 2;
+  let s = '';
+  for (let i = 1; i <= GRAIN_COLS; i++) {
+    const xr = i * colW - shift, x = xr - sw, cx = xr - sw / 2;
+    s += `<rect x="${x.toFixed(2)}" y="${yTop.toFixed(2)}" width="${sw.toFixed(2)}" height="${(yBot - yTop).toFixed(2)}" fill="${P.grain}" transform="rotate(${GRAIN_TILT} ${cx.toFixed(2)} ${cy.toFixed(2)})"/>`;
+  }
+  return `<g clip-path="url(#tile)">${s}</g>`;
+}
+
+let body = '';
+const L = letterSvg();
+if (drawBg) {                           // tile + grain + light/shadow (the background)
+  body += `<rect width="${S}" height="${S}" rx="${RX}" fill="${P.wood}"/>`
+    + `<defs><clipPath id="tile"><rect width="${S}" height="${S}" rx="${RX}"/></clipPath>`
+    +   `<linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="${S}" x2="${S}" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="${SHEEN}"/></linearGradient>`
+    +   `<linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="${S}" x2="${S}" y2="0"><stop offset="0" stop-color="#000" stop-opacity="${SHADE}"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient>`
+    + `</defs>`
+    + grain()
+    + `<rect width="${S}" height="${S}" fill="url(#sheen)" clip-path="url(#tile)"/>`
+    + `<rect width="${S}" height="${S}" fill="url(#shade)" clip-path="url(#tile)"/>`;
+}
+if (drawMark) body += L.svg + starPath();   // the mark
+if (has('scheme')) body += scheme(L);
+
+process.stdout.write(`<svg xmlns="http://www.w3.org/2000/svg" width="${S}" height="${S}" viewBox="0 0 ${S} ${S}">${body}</svg>\n`);
+
+// Percent-based construction overlay for the brand book (full master only).
+function scheme(L) {
+  const pc = n => (100 * n / S).toFixed(1) + '%';
+  const GC = '#0f172a', BX = '#d81b60', AC = '#0d9488';
+  const halo = 'paint-order="stroke" stroke="#fff" stroke-width="4"';
+  const cx = MARK.sc[0] * S, cy = MARK.sc[1] * S, sd = MARK.sd * S;
+  let g = `<g font-family="'Helvetica Neue',Arial,sans-serif">`;
+  for (let f = 1; f <= 3; f++) {
+    const p = f * S / 4;
+    g += `<line x1="${p}" y1="0" x2="${p}" y2="${S}" stroke="${GC}" stroke-opacity="0.18" stroke-width="1.2"/>`;
+    g += `<line x1="0" y1="${p}" x2="${S}" y2="${p}" stroke="${GC}" stroke-opacity="0.18" stroke-width="1.2"/>`;
+    g += `<text x="${p + 4}" y="20" font-size="17" font-weight="700" fill="${GC}" ${halo}>${f * 25}%</text>`;
+    g += `<text x="4" y="${p - 4}" font-size="17" font-weight="700" fill="${GC}" ${halo}>${f * 25}%</text>`;
+  }
+  g += `<line x1="${0.14 * S}" y1="${0.86 * S}" x2="${0.86 * S}" y2="${0.14 * S}" stroke="${AC}" stroke-width="3" stroke-dasharray="3 8" stroke-linecap="round"/>`;
+  g += `<circle cx="${0.86 * S}" cy="${0.14 * S}" r="6" fill="${AC}"/><circle cx="${0.14 * S}" cy="${0.86 * S}" r="6" fill="${AC}"/>`;
+  g += `<text x="${0.86 * S - 6}" y="${0.14 * S - 12}" text-anchor="end" font-size="18" font-weight="700" fill="${AC}" ${halo}>light: white 0%→15%</text>`;
+  g += `<text x="${0.14 * S + 10}" y="${0.86 * S + 26}" font-size="18" font-weight="700" fill="${AC}" ${halo}>shadow: black 15%→0%</text>`;
+  const { x, y, w, h } = L.box;
+  g += `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${w.toFixed(1)}" height="${h.toFixed(1)}" fill="none" stroke="${BX}" stroke-width="2.5"/>`;
+  g += `<line x1="${MARK.lc[0] * S}" y1="${MARK.lc[1] * S - 16}" x2="${MARK.lc[0] * S}" y2="${MARK.lc[1] * S + 16}" stroke="${BX}" stroke-width="2.5"/><line x1="${MARK.lc[0] * S - 16}" y1="${MARK.lc[1] * S}" x2="${MARK.lc[0] * S + 16}" y2="${MARK.lc[1] * S}" stroke="${BX}" stroke-width="2.5"/>`;
+  g += `<text x="${x.toFixed(1)}" y="${(y - 10).toFixed(1)}" font-size="19" font-weight="700" fill="${BX}" ${halo}>«Э» Spectral Bold · box H ${pc(h)} · W ${pc(w)}</text>`;
+  g += `<text x="${x.toFixed(1)}" y="${(y + h + 24).toFixed(1)}" font-size="18" font-weight="700" fill="${BX}" ${halo}>box center ${pc(MARK.lc[0] * S)} / ${pc(MARK.lc[1] * S)}</text>`;
+  g += `<rect x="${cx - sd / 2}" y="${cy - sd / 2}" width="${sd}" height="${sd}" fill="none" stroke="${BX}" stroke-width="2.5"/>`;
+  g += `<line x1="${cx}" y1="${cy - 14}" x2="${cx}" y2="${cy + 14}" stroke="${BX}" stroke-width="2.5"/><line x1="${cx - 14}" y1="${cy}" x2="${cx + 14}" y2="${cy}" stroke="${BX}" stroke-width="2.5"/>`;
+  g += `<text x="${(cx + sd / 2).toFixed(1)}" y="${(cy - sd / 2 - 10).toFixed(1)}" text-anchor="end" font-size="18" font-weight="700" fill="${BX}" ${halo}>✻ Ø ${pc(sd)} · center ${pc(cx)} / ${pc(cy)}</text>`;
+  g += `<text x="${RX + 14}" y="${RX - 6}" font-size="17" font-weight="700" fill="${GC}" ${halo}>corner r = 17%</text>`;
+  g += `<path d="M4 ${RX} A ${RX} ${RX} 0 0 1 ${RX} 4" fill="none" stroke="${GC}" stroke-width="2" stroke-dasharray="5 5"/>`;
+  g += `<rect x="${0.03 * S}" y="${S - 96}" width="${0.94 * S}" height="74" rx="12" fill="#0f172a" fill-opacity="0.82"/>`;
+  g += `<text x="${0.055 * S}" y="${S - 64}" font-size="18" font-weight="600" fill="#fff">Wood grain: 6 equal columns; a vertical stripe on each column's right edge,</text>`;
+  g += `<text x="${0.055 * S}" y="${S - 40}" font-size="18" font-weight="600" fill="#fff">width 1/32 of side; the whole set shifted left 1/16; every stripe tilted 4°.</text>`;
+  return g + `</g>`;
+}

assets/icons/brand/build-set.mjs

@@ -0,0 +1,105 @@
+'use strict';
+// Slice the whole shipped icon set from the brand master (build-icon.mjs). Renders
+// with the ui package's Playwright chromium. See docs/ICONS.md for the target map.
+//
+//   npm i opentype.js && node build-set.mjs
+//
+// Writes: ui/public/* (web), ui/assets/* (Capacitor layers), ./vk/* and ./store/*
+// (manual-upload art). Wiring (manifest, html, Android res) is done separately.
+import { execFileSync } from 'node:child_process';
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const DIR = dirname(fileURLToPath(import.meta.url));
+const UI = join(DIR, '..', '..', '..', 'ui');
+const PUB = join(UI, 'public'), ASSETS = join(UI, 'assets');
+const VK = join(DIR, 'vk'), STORE = join(DIR, 'store'), TG = join(DIR, 'tg');
+[VK, STORE, TG].forEach(d => mkdirSync(d, { recursive: true }));
+
+// one SVG string for a variant+layer from the reference generator
+const svgFor = (variant, layer) =>
+  execFileSync('node', [join(DIR, 'build-icon.mjs'), '--variant', variant, '--layer', layer], { encoding: 'utf8' });
+
+const pw = await import(join(UI, 'node_modules', '@playwright', 'test', 'index.js'));
+const { chromium } = pw.default ?? pw;
+const browser = await chromium.launch();
+const page = await browser.newPage();
+
+async function pngFromSvg(svg, size, transparent) {
+  await page.setViewportSize({ width: size, height: size });
+  await page.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}svg{display:block;width:${size}px;height:${size}px}</style>${svg}`, { waitUntil: 'networkidle' });
+  return page.locator('svg').screenshot({ omitBackground: !!transparent });
+}
+async function shootHtml(html, w, h) {
+  await page.setViewportSize({ width: w, height: h });
+  await page.setContent(html, { waitUntil: 'networkidle' });
+  return page.screenshot();
+}
+function icoFromPNG(png, sizePx) {
+  const h = Buffer.alloc(22);
+  h.writeUInt16LE(0, 0); h.writeUInt16LE(1, 2); h.writeUInt16LE(1, 4);
+  h.writeUInt8(sizePx, 6); h.writeUInt8(sizePx, 7);
+  h.writeUInt16LE(1, 10); h.writeUInt16LE(32, 12);
+  h.writeUInt32LE(png.length, 14); h.writeUInt32LE(22, 18);
+  return Buffer.concat([h, png]);
+}
+const write = (p, buf) => { writeFileSync(p, buf); console.log('wrote', p.replace(join(DIR, '..', '..', '..'), '.'), buf.length, 'b'); };
+
+// ---- pre-render the SVG sources we need ----
+const S = {
+  fullLight: svgFor('light', 'full'), fullDark: svgFor('dark', 'full'),
+  flatLight: svgFor('light', 'flat'), flatDark: svgFor('dark', 'flat'),
+  maskLight: svgFor('light', 'maskable'), maskDark: svgFor('dark', 'maskable'),
+  bgLight: svgFor('light', 'background'), fgLight: svgFor('light', 'foreground'),
+  monoLight: svgFor('light', 'monochrome'),
+};
+
+// ---- favicon.svg: light + dark in one file, toggled by prefers-color-scheme ----
+const inner = svg => svg.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '');
+const faviconSvg =
+  `<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">`
+  + `<style>.d{display:none}@media(prefers-color-scheme:dark){.l{display:none}.d{display:inline}}</style>`
+  + `<g class="l">${inner(S.fullLight)}</g><g class="d">${inner(S.fullDark)}</g></svg>\n`;
+write(join(PUB, 'favicon.svg'), Buffer.from(faviconSvg));
+
+// ---- web rasters ----
+write(join(PUB, 'favicon.ico'), icoFromPNG(await pngFromSvg(S.flatLight, 32, false), 32));
+write(join(PUB, 'apple-touch-icon.png'), await pngFromSvg(S.flatLight, 180, false));
+write(join(PUB, 'icon-192.png'), await pngFromSvg(S.flatLight, 192, false));
+write(join(PUB, 'icon-512.png'), await pngFromSvg(S.flatLight, 512, false));
+write(join(PUB, 'icon-192-dark.png'), await pngFromSvg(S.flatDark, 192, false));
+write(join(PUB, 'icon-512-dark.png'), await pngFromSvg(S.flatDark, 512, false));
+write(join(PUB, 'icon-maskable-512.png'), await pngFromSvg(S.maskLight, 512, false));
+write(join(PUB, 'icon-maskable-512-dark.png'), await pngFromSvg(S.maskDark, 512, false));
+
+// ---- Capacitor layers (ui/assets) ----
+write(join(ASSETS, 'icon.png'), await pngFromSvg(S.flatLight, 1024, false));          // legacy single
+write(join(ASSETS, 'icon-foreground.png'), await pngFromSvg(S.fgLight, 1024, true));   // adaptive fg
+write(join(ASSETS, 'icon-background.png'), await pngFromSvg(S.bgLight, 1024, false));  // adaptive bg
+write(join(DIR, 'android-monochrome.png'), await pngFromSvg(S.monoLight, 1024, true)); // themed layer (wired manually)
+
+// ---- VK (no rounding — flat light) ----
+for (const px of [576, 278, 150, 32]) write(join(VK, `vk-${px}.png`), await pngFromSvg(S.flatLight, px, false));
+
+// ---- Telegram bot: square, no rounding (TG crops the avatar to a circle) ----
+write(join(TG, 'tg-512.png'), await pngFromSvg(S.flatLight, 512, false));   // bot avatar + Mini App icon
+
+// ---- store art ----
+write(join(STORE, 'rustore-512.png'), await pngFromSvg(S.flatLight, 512, false));
+
+// ---- wordmark banner (board-green bg + master tile + «Эрудит» / Игра в слова) ----
+const b64 = readFileSync(join(DIR, 'Spectral-Bold.ttf')).toString('base64');
+const banner = (w, h, tile, t1, t2, gap, pad) => `<!doctype html><meta charset=utf8><style>
+@font-face{font-family:Spectral;src:url(data:font/ttf;base64,${b64});font-weight:700}
+*{margin:0;padding:0;box-sizing:border-box}
+body{width:${w}px;height:${h}px;background:#2a3330;display:flex;align-items:center;gap:${gap}px;padding:0 ${pad}px;font-family:Spectral}
+.tile{width:${tile}px;height:${tile}px;flex:none}.tile svg{width:${tile}px;height:${tile}px;display:block}
+.wm{color:#e7ece8;text-align:center}.t1{font-weight:700;font-size:${t1}px;line-height:1.02;letter-spacing:-2px}
+.t2{font-weight:700;font-size:${t2}px;line-height:1.1;color:#cdd6cf;margin-top:6px}
+</style><div class=tile>${S.fullLight}</div><div class=wm><div class=t1>«Эрудит»</div><div class=t2>Игра в слова</div></div>`;
+write(join(PUB, 'og-image.png'), await shootHtml(banner(1200, 630, 300, 150, 74, 64, 96), 1200, 630));
+write(join(TG, 'tg-demo-640x360.png'), await shootHtml(banner(640, 360, 150, 72, 38, 30, 44), 640, 360));
+
+await browser.close();
+console.log('done');

assets/icons/brand/icon-dark-android-background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="0" fill="#4a3316"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="0"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/></svg>

assets/icons/brand/icon-dark-android-foreground.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path transform="translate(237.62 774.88)" d="M250.04-34.91Q326.35-34.91 368.57-91.33Q410.78-147.75 410.78-243.55Q410.78-249.23 410.78-254.91L254.10-254.91L208.64-185.91L195.65-185.91L195.65-368.57L208.64-368.57L254.10-299.56L407.53-299.56Q396.98-392.92 351.52-447.72Q306.06-502.52 241.11-502.52Q217.57-502.52 198.90-498.46Q180.22-494.40 162.36-482.22L83.62-354.77L69-354.77L77.93-505.76Q112.84-522.81 154.25-533.37Q195.65-543.92 259.78-543.92Q319.86-543.92 371.41-523.22Q422.96-502.52 460.71-465.58Q498.46-428.64 519.57-378.31Q540.67-327.98 540.67-267.90Q540.67-188.34 504.55-125.83Q468.42-63.32 405.10-27.60Q341.78 8.12 259.78 8.12Q200.52 8.12 150.59-3.25Q100.67-14.61 67.38-34.10L56.02-171.29L69.82-171.29L142.88-63.32Q165.61-50.33 191.59-42.62Q217.57-34.91 250.04-34.91" fill="#f2d9a0"/><path d="M781.00 744.04 L795.25 695.59 A14.85 14.85 0 1 0 766.76 695.59 Z M781.00 744.04 L830.08 732.15 A14.85 14.85 0 1 0 815.84 707.48 Z M781.00 744.04 L815.84 780.60 A14.85 14.85 0 1 0 830.08 755.93 Z M781.00 744.04 L766.76 792.49 A14.85 14.85 0 1 0 795.25 792.49 Z M781.00 744.04 L731.93 755.93 A14.85 14.85 0 1 0 746.17 780.60 Z M781.00 744.04 L746.17 707.48 A14.85 14.85 0 1 0 731.93 732.15 Z M781.0048 744.0384 m-14.845952 0 a14.845952 14.845952 0 1 0 29.691904 0 a14.845952 14.845952 0 1 0 -29.691904 0 Z" fill="#f2d9a0"/></svg>

assets/icons/brand/icon-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="174.08" fill="#4a3316"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="174.08"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#432e14" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/><path transform="translate(157.86 804.91)" d="M280.84-39.21Q366.55-39.21 413.96-102.58Q461.38-165.95 461.38-273.54Q461.38-279.93 461.38-286.31L285.40-286.31L234.34-208.80L219.75-208.80L219.75-413.96L234.34-413.96L285.40-336.46L457.73-336.46Q445.88-441.32 394.81-502.86Q343.75-564.41 270.81-564.41Q244.37-564.41 223.39-559.85Q202.42-555.29 182.36-541.62L93.92-398.46L77.50-398.46L87.53-568.06Q126.74-587.21 173.24-599.06Q219.75-610.91 291.78-610.91Q359.25-610.91 417.15-587.66Q475.05-564.41 517.45-522.92Q559.85-481.44 583.56-424.90Q607.27-368.37 607.27-300.90Q607.27-211.54 566.69-141.33Q526.12-71.12 454.99-31Q383.87 9.12 291.78 9.12Q225.22 9.12 169.14-3.65Q113.06-16.41 75.68-38.30L62.92-192.39L78.42-192.39L160.48-71.12Q186.01-56.53 215.19-47.87Q244.37-39.21 280.84-39.21" fill="#f2d9a0"/><path d="M807.01 807.01 L825.70 743.46 A19.48 19.48 0 1 0 788.33 743.46 Z M807.01 807.01 L871.40 791.42 A19.48 19.48 0 1 0 852.71 759.05 Z M807.01 807.01 L852.71 854.97 A19.48 19.48 0 1 0 871.40 822.61 Z M807.01 807.01 L788.33 870.57 A19.48 19.48 0 1 0 825.70 870.57 Z M807.01 807.01 L742.63 822.61 A19.48 19.48 0 1 0 761.32 854.97 Z M807.01 807.01 L761.32 759.05 A19.48 19.48 0 1 0 742.63 791.42 Z M807.0144 807.0144 m-19.475456 0 a19.475456 19.475456 0 1 0 38.950912 0 a19.475456 19.475456 0 1 0 -38.950912 0 Z" fill="#f2d9a0"/></svg>

assets/icons/brand/icon-light-android-background.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="0" fill="#e6b053"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="0"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/></svg>

assets/icons/brand/icon-light-android-foreground.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path transform="translate(237.62 774.88)" d="M250.04-34.91Q326.35-34.91 368.57-91.33Q410.78-147.75 410.78-243.55Q410.78-249.23 410.78-254.91L254.10-254.91L208.64-185.91L195.65-185.91L195.65-368.57L208.64-368.57L254.10-299.56L407.53-299.56Q396.98-392.92 351.52-447.72Q306.06-502.52 241.11-502.52Q217.57-502.52 198.90-498.46Q180.22-494.40 162.36-482.22L83.62-354.77L69-354.77L77.93-505.76Q112.84-522.81 154.25-533.37Q195.65-543.92 259.78-543.92Q319.86-543.92 371.41-523.22Q422.96-502.52 460.71-465.58Q498.46-428.64 519.57-378.31Q540.67-327.98 540.67-267.90Q540.67-188.34 504.55-125.83Q468.42-63.32 405.10-27.60Q341.78 8.12 259.78 8.12Q200.52 8.12 150.59-3.25Q100.67-14.61 67.38-34.10L56.02-171.29L69.82-171.29L142.88-63.32Q165.61-50.33 191.59-42.62Q217.57-34.91 250.04-34.91" fill="#5a3a12"/><path d="M781.00 744.04 L795.25 695.59 A14.85 14.85 0 1 0 766.76 695.59 Z M781.00 744.04 L830.08 732.15 A14.85 14.85 0 1 0 815.84 707.48 Z M781.00 744.04 L815.84 780.60 A14.85 14.85 0 1 0 830.08 755.93 Z M781.00 744.04 L766.76 792.49 A14.85 14.85 0 1 0 795.25 792.49 Z M781.00 744.04 L731.93 755.93 A14.85 14.85 0 1 0 746.17 780.60 Z M781.00 744.04 L746.17 707.48 A14.85 14.85 0 1 0 731.93 732.15 Z M781.0048 744.0384 m-14.845952 0 a14.845952 14.845952 0 1 0 29.691904 0 a14.845952 14.845952 0 1 0 -29.691904 0 Z" fill="#5a3a12"/></svg>

assets/icons/brand/icon-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><rect width="1024" height="1024" rx="174.08" fill="#e6b053"/><defs><clipPath id="tile"><rect width="1024" height="1024" rx="174.08"/></clipPath><linearGradient id="sheen" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff" stop-opacity="0.15"/></linearGradient><linearGradient id="shade" gradientUnits="userSpaceOnUse" x1="0" y1="1024" x2="1024" y2="0"><stop offset="0" stop-color="#000" stop-opacity="0.15"/><stop offset="1" stop-color="#000" stop-opacity="0"/></linearGradient></defs><g clip-path="url(#tile)"><rect x="74.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 90.67 512.00)"/><rect x="245.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 261.33 512.00)"/><rect x="416.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 432.00 512.00)"/><rect x="586.67" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 602.67 512.00)"/><rect x="757.33" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 773.33 512.00)"/><rect x="928.00" y="-204.80" width="32.00" height="1433.60" fill="#d8a54e" transform="rotate(4 944.00 512.00)"/></g><rect width="1024" height="1024" fill="url(#sheen)" clip-path="url(#tile)"/><rect width="1024" height="1024" fill="url(#shade)" clip-path="url(#tile)"/><path transform="translate(157.86 804.91)" d="M280.84-39.21Q366.55-39.21 413.96-102.58Q461.38-165.95 461.38-273.54Q461.38-279.93 461.38-286.31L285.40-286.31L234.34-208.80L219.75-208.80L219.75-413.96L234.34-413.96L285.40-336.46L457.73-336.46Q445.88-441.32 394.81-502.86Q343.75-564.41 270.81-564.41Q244.37-564.41 223.39-559.85Q202.42-555.29 182.36-541.62L93.92-398.46L77.50-398.46L87.53-568.06Q126.74-587.21 173.24-599.06Q219.75-610.91 291.78-610.91Q359.25-610.91 417.15-587.66Q475.05-564.41 517.45-522.92Q559.85-481.44 583.56-424.90Q607.27-368.37 607.27-300.90Q607.27-211.54 566.69-141.33Q526.12-71.12 454.99-31Q383.87 9.12 291.78 9.12Q225.22 9.12 169.14-3.65Q113.06-16.41 75.68-38.30L62.92-192.39L78.42-192.39L160.48-71.12Q186.01-56.53 215.19-47.87Q244.37-39.21 280.84-39.21" fill="#5a3a12"/><path d="M807.01 807.01 L825.70 743.46 A19.48 19.48 0 1 0 788.33 743.46 Z M807.01 807.01 L871.40 791.42 A19.48 19.48 0 1 0 852.71 759.05 Z M807.01 807.01 L852.71 854.97 A19.48 19.48 0 1 0 871.40 822.61 Z M807.01 807.01 L788.33 870.57 A19.48 19.48 0 1 0 825.70 870.57 Z M807.01 807.01 L742.63 822.61 A19.48 19.48 0 1 0 761.32 854.97 Z M807.01 807.01 L761.32 759.05 A19.48 19.48 0 1 0 742.63 791.42 Z M807.0144 807.0144 m-19.475456 0 a19.475456 19.475456 0 1 0 38.950912 0 a19.475456 19.475456 0 1 0 -38.950912 0 Z" fill="#5a3a12"/></svg>

assets/icons/brand/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "erudit-icon-brand",
+  "private": true,
+  "type": "module",
+  "description": "Reference generator for the Erudit app-icon set (see docs/ICON_BRANDBOOK.md).",
+  "scripts": {
+    "build": "node build-set.mjs && node build-android-res.mjs"
+  },
+  "dependencies": {
+    "opentype.js": "^1.3.4"
+  }
+}

assets/icons/brand/render-png.mjs

@@ -0,0 +1,21 @@
+'use strict';
+// Rasterise an icon SVG to PNG at a given size, using the `ui` package's cached
+// Playwright chromium (no extra install). Usage:
+//   node render-png.mjs <in.svg> <out.png> [size=1024]
+import { readFileSync, writeFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const DIR = dirname(fileURLToPath(import.meta.url));
+const pw = await import(join(DIR, '..', '..', '..', 'ui', 'node_modules', '@playwright', 'test', 'index.js'));
+const { chromium } = pw.default ?? pw;
+
+const [, , svgPath, pngPath, size] = process.argv;
+const S = Number(size) || 1024;
+const svg = readFileSync(svgPath, 'utf8');
+const b = await chromium.launch();
+const pg = await b.newPage({ viewport: { width: S, height: S }, deviceScaleFactor: 1 });
+await pg.setContent(`<!doctype html><meta charset=utf8><style>*{margin:0;padding:0}</style>${svg}`, { waitUntil: 'networkidle' });
+writeFileSync(pngPath, await pg.locator('svg').screenshot({ omitBackground: true }));
+await b.close();
+console.log('wrote', pngPath, S + 'px');

assets/icons/build/extract.js

@@ -1,78 +0,0 @@
-'use strict';
-// Extract the glyph outlines the site icons and the og-image wordmark need from a
-// grotesque font (LiberationSans = Arial-metric, matching the game's system-ui/Arial
-// stack) and emit cubic-bezier contours per character, baseline at y=0, y-down,
-// plus the advance width so generate.js can lay out words without the font.
-// Same outline conversion as ../../vk/build/extract.js, generalised to a char set.
-const opentype = require('opentype.js');
-const fs = require('fs');
-
-const FONT = process.argv[2] || '/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf';
-const b = fs.readFileSync(FONT);
-const font = opentype.parse(b.buffer.slice(b.byteOffset, b.byteOffset + b.byteLength));
-const FS = 1000; // em scale
-
-// The tile glyphs («Э», «8») + every character of the og-image wordmark lines
-// («Эрудит», «Скрэббл — игра в слова»). The space carries only an advance.
-const CHARS = [...new Set('Э8рудитСкэббл—игра в слова')];
-
-function glyphData(ch) {
-  const g = font.charToGlyph(ch);
-  const p = g.getPath(0, 0, FS); // baseline at y=0, y-down
-  const contours = [];
-  let cur = null, prev = null;
-  for (const c of p.commands) {
-    if (c.type === 'M') {
-      if (cur) contours.push(cur);
-      cur = [{ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] }];
-      prev = { x: c.x, y: c.y };
-    } else if (c.type === 'L') {
-      cur.push({ v: [c.x, c.y], i: [c.x, c.y], o: [c.x, c.y] });
-      prev = { x: c.x, y: c.y };
-    } else if (c.type === 'C') {
-      cur[cur.length - 1].o = [c.x1, c.y1];
-      cur.push({ v: [c.x, c.y], i: [c.x2, c.y2], o: [c.x, c.y] });
-      prev = { x: c.x, y: c.y };
-    } else if (c.type === 'Q') {
-      const c1 = [prev.x + 2 / 3 * (c.x1 - prev.x), prev.y + 2 / 3 * (c.y1 - prev.y)];
-      const c2 = [c.x + 2 / 3 * (c.x1 - c.x), c.y + 2 / 3 * (c.y1 - c.y)];
-      cur[cur.length - 1].o = c1;
-      cur.push({ v: [c.x, c.y], i: c2, o: [c.x, c.y] });
-      prev = { x: c.x, y: c.y };
-    } else if (c.type === 'Z') {
-      if (cur && cur.length > 1) {
-        const last = cur[cur.length - 1], first = cur[0];
-        if (Math.hypot(last.v[0] - first.v[0], last.v[1] - first.v[1]) < 1e-3) {
-          first.i = last.i; // fold the duplicate closing point into the first
-          cur.pop();
-        }
-      }
-      if (cur) { contours.push(cur); cur = null; }
-    }
-  }
-  if (cur) contours.push(cur);
-
-  let minx = Infinity, miny = Infinity, maxx = -Infinity, maxy = -Infinity;
-  const out = contours.map(ct => {
-    const v = [], i = [], o = [];
-    ct.forEach(pt => {
-      v.push(pt.v);
-      i.push([pt.i[0] - pt.v[0], pt.i[1] - pt.v[1]]);
-      o.push([pt.o[0] - pt.v[0], pt.o[1] - pt.v[1]]);
-      minx = Math.min(minx, pt.v[0]); maxx = Math.max(maxx, pt.v[0]);
-      miny = Math.min(miny, pt.v[1]); maxy = Math.max(maxy, pt.v[1]);
-    });
-    return { i, o, v, c: true };
-  });
-  const bbox = out.length
-    ? { x: minx, y: miny, w: maxx - minx, h: maxy - miny }
-    : { x: 0, y: 0, w: 0, h: 0 }; // the space has no outline
-  return { adv: g.advanceWidth * (FS / font.unitsPerEm), bbox, contours: out };
-}
-
-const glyphs = {};
-for (const ch of CHARS) glyphs[ch] = glyphData(ch);
-
-const out = __dirname + '/glyphs.json';
-fs.writeFileSync(out, JSON.stringify({ em: FS, glyphs }));
-console.log('wrote', out, fs.statSync(out).size, 'bytes;', CHARS.length, 'glyphs:', CHARS.join(''));

assets/icons/build/generate.js

@@ -1,128 +0,0 @@
-'use strict';
-// Site icons + the Open Graph card for the public landing, drawn from the same
-// design as ../../vk (the wooden Erudit tile: face «Э», score «8») and the app's
-// board palette (ui/src/app.css). Everything is composed as SVG from the committed
-// glyph outlines (build/extract.js -> glyphs.json), so no font is needed at build
-// time; the PNG/ICO rasters are screenshots taken with the ui package's Playwright
-// chromium (@playwright/test re-exports the browser API). Outputs go straight to
-// ui/public/:
-//   favicon.svg          96 viewBox, transparent, tile + «Э» (the score is illegible small)
-//   favicon.ico          32x32 PNG-in-ICO render of the same
-//   apple-touch-icon.png 180x180 opaque full-bleed tile (iOS masks its own corners)
-//   og-image.png         1200x630 card: tile + wordmark on the board green
-const fs = require('fs');
-const path = require('path');
-
-const G = JSON.parse(fs.readFileSync(path.join(__dirname, 'glyphs.json'), 'utf8'));
-const UI = path.resolve(__dirname, '../../../ui');
-const OUT = path.join(UI, 'public');
-
-// ---- palette (vk loader tile + app.css board tokens) ------------------------
-const FACE = '#D9B978', BORDER = '#B49559', GLYPH = '#1A1A1A';
-const BOARD_DARK = '#2a3330', TEXT = '#e7ece8', TEXT_MUTED = '#cdd6cf';
-
-// ---- glyph outlines -> SVG path data ----------------------------------------
-const r2 = n => Math.round(n * 100) / 100;
-// pathD renders one glyph's contours scaled by sc and translated by (tx, ty).
-function pathD(g, sc, tx, ty) {
-  const pt = (v, d) => `${r2(v[0] * sc + tx + d[0] * sc)} ${r2(v[1] * sc + ty + d[1] * sc)}`;
-  const Z = [0, 0];
-  return g.contours.map(ct => {
-    const n = ct.v.length;
-    let d = `M${pt(ct.v[0], Z)}`;
-    for (let k = 1; k <= n; k++) {
-      const a = k - 1, b = k % n;
-      d += `C${pt(ct.v[a], ct.o[a])} ${pt(ct.v[b], ct.i[b])} ${pt(ct.v[b], Z)}`;
-    }
-    return d + 'Z';
-  }).join('');
-}
-// glyphAt centres a glyph's bbox at (cx, cy) with the given pixel cap height, the
-// same placement rule as the vk loader's glyph(). stroke fattens it slightly.
-function glyphAt(ch, capPx, cx, cy, stroke, colour) {
-  const g = G.glyphs[ch], sc = capPx / g.bbox.h;
-  const d = pathD(g, sc, cx - (g.bbox.x + g.bbox.w / 2) * sc, cy - (g.bbox.y + g.bbox.h / 2) * sc);
-  return `<path d="${d}" fill="${colour}" stroke="${colour}" stroke-width="${r2(stroke)}"/>`;
-}
-// textLine lays out a string on a baseline from the per-glyph advances; capPx sets
-// the capital height (measured on «Э»). Returns the combined path + the width.
-function textLine(str, capPx, x, y, colour) {
-  const sc = capPx / G.glyphs['Э'].bbox.h;
-  let d = '', w = 0;
-  for (const ch of str) {
-    const g = G.glyphs[ch];
-    if (g.contours.length) d += pathD(g, sc, x + w, y);
-    w += g.adv * sc;
-  }
-  return { svg: `<path d="${d}" fill="${colour}"/>`, width: w };
-}
-// tile draws the rounded wooden tile centred at (cx, cy): size px wide/high, with
-// the vk loader's corner (6/52) and rim proportions, «Э» and optionally the «8».
-function tile(cx, cy, size, withScore) {
-  const h = size / 2, rx = size * (6 / 52), rim = size * (1.8 / 52);
-  let s = `<rect x="${r2(cx - h + rim / 2)}" y="${r2(cy - h + rim / 2)}" width="${r2(size - rim)}" height="${r2(size - rim)}" rx="${r2(rx)}" fill="${FACE}" stroke="${BORDER}" stroke-width="${r2(rim)}"/>`;
-  s += glyphAt('Э', size * (32 / 52), cx, cy - size * (1 / 52), size * (1 / 52), GLYPH);
-  if (withScore) s += glyphAt('8', size * (8.5 / 52), cx + size * (19.5 / 52), cy + size * (18.5 / 52), size * (0.5 / 52), GLYPH);
-  return s;
-}
-const svg = (w, h, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${body}</svg>`;
-
-// ---- favicon.svg (the committed vector master) -------------------------------
-const favicon = svg(96, 96, tile(48, 48, 88, false)) + '\n';
-
-// ---- apple-touch-icon: opaque full bleed, iOS applies its own corner mask ----
-const appleTouch = svg(180, 180,
-  `<rect width="180" height="180" fill="${FACE}"/>` +
-  `<rect x="8" y="8" width="164" height="164" rx="18" fill="none" stroke="${BORDER}" stroke-width="4"/>` +
-  glyphAt('Э', 100, 90, 88, 3, GLYPH) +
-  glyphAt('8', 26, 146, 142, 1.5, GLYPH));
-
-// ---- og-image: tile + wordmark, centred as one group on the board green ------
-function ogImage() {
-  const W = 1200, H = 630, tileSize = 340, gap = 84;
-  const l1 = textLine('Эрудит', 112, 0, 0, TEXT);
-  const l2 = textLine('Скрэббл — игра в слова', 44, 0, 0, TEXT_MUTED);
-  const textW = Math.max(l1.width, l2.width);
-  const left = (W - (tileSize + gap + textW)) / 2;
-  const tx = left + tileSize + gap;
-  // Two baselines around the vertical centre; the tile centre sits between them.
-  const b1 = 295, b2 = 408;
-  const body =
-    `<rect width="${W}" height="${H}" fill="${BOARD_DARK}"/>` +
-    tile(left + tileSize / 2, H / 2, tileSize, true) +
-    textLine('Эрудит', 112, tx, b1, TEXT).svg +
-    textLine('Скрэббл — игра в слова', 44, tx, b2, TEXT_MUTED).svg;
-  console.log(`og-image: text ${Math.round(textW)}px wide, group left ${Math.round(left)}px`);
-  return svg(W, H, body);
-}
-
-// ---- rasterisation (Playwright chromium from ui/node_modules) ----------------
-async function shoot(page, markup, w, h, transparent) {
-  await page.setViewportSize({ width: w, height: h });
-  await page.setContent(`<body style="margin:0">${markup}</body>`);
-  return page.screenshot({ omitBackground: transparent });
-}
-// icoFromPNG wraps one PNG as a single-entry .ico (ICONDIR + ICONDIRENTRY + PNG).
-function icoFromPNG(png, sizePx) {
-  const h = Buffer.alloc(22);
-  h.writeUInt16LE(0, 0); h.writeUInt16LE(1, 2); h.writeUInt16LE(1, 4); // icon, 1 image
-  h.writeUInt8(sizePx, 6); h.writeUInt8(sizePx, 7);                    // 32x32
-  h.writeUInt16LE(1, 10); h.writeUInt16LE(32, 12);                     // planes, 32bpp
-  h.writeUInt32LE(png.length, 14); h.writeUInt32LE(22, 18);            // size, offset
-  return Buffer.concat([h, png]);
-}
-
-(async () => {
-  fs.writeFileSync(path.join(OUT, 'favicon.svg'), favicon);
-  const { chromium } = require(path.join(UI, 'node_modules', '@playwright/test'));
-  const browser = await chromium.launch();
-  const page = await browser.newPage();
-  const fav32 = await shoot(page, svg(32, 32, tile(16, 16, 29.33, false)), 32, 32, true);
-  fs.writeFileSync(path.join(OUT, 'favicon.ico'), icoFromPNG(fav32, 32));
-  fs.writeFileSync(path.join(OUT, 'apple-touch-icon.png'), await shoot(page, appleTouch, 180, 180, false));
-  fs.writeFileSync(path.join(OUT, 'og-image.png'), await shoot(page, ogImage(), 1200, 630, false));
-  await browser.close();
-  for (const f of ['favicon.svg', 'favicon.ico', 'apple-touch-icon.png', 'og-image.png']) {
-    console.log('wrote', path.join(OUT, f), fs.statSync(path.join(OUT, f)).size, 'bytes');
-  }
-})();