create-playcanvas 0.10.1 → 0.11.1

package/templates/_shared/web-lens/scripts/package-lens.mjs

@@ -0,0 +1,231 @@
+// Checks a build against the Snapchat Web Lens upload rules, then zips it for My Lenses:
+// https://developers.snap.com/web-lenses/requirements
+//
+// Usage: node scripts/package-lens.mjs [build folder]
+// `npm run package` builds first, then runs this on dist/lens.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import zlib from 'node:zlib';
+
+const MB = 1024 * 1024;
+const MAX_ZIP = 8 * MB;
+const MAX_INDEX = MB;
+
+// tags the Lens sandbox blocks
+const BLOCKED_TAGS = ['base', 'embed', 'iframe', 'object'];
+
+// hosts that bundles only mention as text: XML namespaces, and the docs that engine and React
+// error messages link to
+const TEXT_HOSTS = ['www.w3.org', 'github.com', 'react.dev', 'api.playcanvas.com'];
+
+const buildDir = path.resolve(process.argv[2] ?? 'dist/lens');
+const { name = 'web-lens' } = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+const zipFile = path.join(path.dirname(buildDir), `${name.replace(/^@/, '').replace('/', '-')}.zip`);
+
+if (!fs.existsSync(buildDir)) {
+    console.error(`No build found at ${path.relative('.', buildDir)}. Run npm run package to build and package.`);
+    process.exit(1);
+}
+
+const errors = [];
+const warnings = [];
+
+const formatSize = (bytes) => (bytes < MB ? `${(bytes / 1024).toFixed(1)} KB` : `${(bytes / MB).toFixed(2)} MB`);
+
+// every file in the build, as the forward-slash path it takes in the zip
+const walk = (dir) =>
+    fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+        const file = path.join(dir, entry.name);
+        return entry.isDirectory() ? walk(file) : [path.relative(buildDir, file).split(path.sep).join('/')];
+    });
+const all = walk(buildDir).sort((a, b) => (a === 'index.html' ? -1 : b === 'index.html' ? 1 : a.localeCompare(b)));
+
+// source maps only add weight, so leave them out of the zip
+const maps = all.filter((file) => file.endsWith('.map'));
+const files = all.filter((file) => !file.endsWith('.map'));
+if (maps.length) {
+    warnings.push(
+        `Left ${maps.length} source map(s) out of the zip. Set build.sourcemap to false to stop generating them`
+    );
+}
+
+// the entry point
+const indexSize = files.includes('index.html') ? fs.statSync(path.join(buildDir, 'index.html')).size : 0;
+if (!indexSize) {
+    errors.push('index.html must sit at the root of the build');
+} else if (indexSize > MAX_INDEX) {
+    errors.push(
+        `index.html is ${formatSize(indexSize)}, over the 1 MB limit. Load the bundle from a file rather than inlining it`
+    );
+}
+
+for (const file of files.filter((f) => f.startsWith('__snap/'))) {
+    errors.push(`${file}: __snap/ is reserved for Snapchat, so rename the folder`);
+}
+
+// URLs in markup and styles: anything on another host is blocked, and a root-absolute path
+// resolves against Snapchat's origin rather than the Lens, so the game loads a blank screen
+const checkUrl = (file, url) => {
+    if (/^(?:[a-z][a-z\d+.-]*:)?\/\//i.test(url)) {
+        errors.push(
+            `${file}: loads ${url} from another host. A Lens can only load files from its own zip, so bundle it`
+        );
+    } else if (url.startsWith('/')) {
+        errors.push(`${file}: refers to ${url} by an absolute path. Use ./${url.slice(1)}`);
+    }
+};
+
+const checkCss = (file, css) => {
+    for (const [, , url] of css.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g)) checkUrl(file, url);
+    for (const [, , url] of css.matchAll(/@import\s+(['"])([^'"]+)\1/g)) checkUrl(file, url);
+};
+
+const read = (file) => fs.readFileSync(path.join(buildDir, file), 'utf8');
+
+for (const file of files.filter((f) => f.endsWith('.html'))) {
+    const html = read(file);
+    for (const [, tag, attributes] of html.matchAll(/<([a-z][\w-]*)\b([^>]*)>/gi)) {
+        const lower = tag.toLowerCase();
+        if (BLOCKED_TAGS.includes(lower)) {
+            errors.push(`${file}: the Lens sandbox blocks <${lower}>`);
+            continue;
+        }
+        if (lower === 'link' && /\brel\s*=\s*["']?manifest\b/i.test(attributes)) {
+            errors.push(`${file}: the Lens sandbox blocks web app manifests`);
+            continue;
+        }
+        // links navigate rather than load, so they don't count
+        if (lower === 'a') continue;
+
+        for (const [, attribute, ...values] of attributes.matchAll(
+            /\b(src|href|srcset|poster|data)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/gi
+        )) {
+            const value = values.find((v) => v !== undefined) ?? '';
+            const urls =
+                attribute.toLowerCase() === 'srcset' ? value.split(',').map((s) => s.trim().split(/\s+/)[0]) : [value];
+            for (const url of urls) checkUrl(file, url);
+        }
+    }
+    for (const [, css] of html.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)) checkCss(file, css);
+}
+
+for (const file of files.filter((f) => f.endsWith('.css'))) checkCss(file, read(file));
+
+// scripts: a quoted root-absolute path to a file in the build always breaks, while a remote URL
+// may only be text, so it is worth a look rather than a failure
+const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const absolute = new RegExp(`["'\`(]/(${files.map(escape).join('|')})(?=["'\`)?#])`, 'g');
+for (const file of files.filter((f) => /\.m?js$/.test(f))) {
+    const source = read(file);
+    for (const target of new Set(Array.from(source.matchAll(absolute), (m) => m[1]))) {
+        errors.push(`${file}: refers to /${target} by an absolute path. Use ./${target}`);
+    }
+
+    const hosts = new Set();
+    for (const [url] of source.matchAll(/\b(?:https?|wss?):\/\/[^\s"'`)\\]+/g)) {
+        const host = URL.canParse(url) ? new URL(url).host : url;
+        if (!TEXT_HOSTS.includes(host)) hosts.add(host);
+    }
+    if (hosts.size) {
+        warnings.push(
+            `${file}: mentions ${[...hosts].join(', ')}. A Lens can't reach other hosts, so check none of them is loaded at runtime (npm run start blocks them the way Snapchat does)`
+        );
+    }
+}
+
+// a plain zip: deflated entries with forward-slash names and index.html at the root
+const zipEntries = (entries) => {
+    const local = [];
+    const central = [];
+    let offset = 0;
+
+    for (const entry of entries) {
+        const file = path.join(buildDir, entry);
+        const data = fs.readFileSync(file);
+        const deflated = zlib.deflateRawSync(data, { level: 9 });
+        const stored = deflated.length >= data.length;
+        const body = stored ? data : deflated;
+        const entryName = Buffer.from(entry);
+        const crc = zlib.crc32(data);
+
+        const mtime = fs.statSync(file).mtime;
+        const time = (mtime.getHours() << 11) | (mtime.getMinutes() << 5) | (mtime.getSeconds() >> 1);
+        const date = ((mtime.getFullYear() - 1980) << 9) | ((mtime.getMonth() + 1) << 5) | mtime.getDate();
+
+        const header = Buffer.alloc(30);
+        header.writeUInt32LE(0x04034b50, 0);
+        header.writeUInt16LE(20, 4);
+        header.writeUInt16LE(0x0800, 6); // UTF-8 names
+        header.writeUInt16LE(stored ? 0 : 8, 8);
+        header.writeUInt16LE(time, 10);
+        header.writeUInt16LE(date, 12);
+        header.writeUInt32LE(crc, 14);
+        header.writeUInt32LE(body.length, 18);
+        header.writeUInt32LE(data.length, 22);
+        header.writeUInt16LE(entryName.length, 26);
+
+        const record = Buffer.alloc(46);
+        record.writeUInt32LE(0x02014b50, 0);
+        record.writeUInt16LE((3 << 8) | 20, 4); // made on Unix, so the permissions below apply
+        record.writeUInt16LE(20, 6);
+        record.writeUInt16LE(0x0800, 8);
+        record.writeUInt16LE(stored ? 0 : 8, 10);
+        record.writeUInt16LE(time, 12);
+        record.writeUInt16LE(date, 14);
+        record.writeUInt32LE(crc, 16);
+        record.writeUInt32LE(body.length, 20);
+        record.writeUInt32LE(data.length, 24);
+        record.writeUInt16LE(entryName.length, 28);
+        record.writeUInt32LE((0o100644 << 16) >>> 0, 38); // a regular file, rw-r--r--
+        record.writeUInt32LE(offset, 42);
+
+        local.push(header, entryName, body);
+        central.push(record, entryName);
+        offset += header.length + entryName.length + body.length;
+    }
+
+    const directory = Buffer.concat(central);
+    const end = Buffer.alloc(22);
+    end.writeUInt32LE(0x06054b50, 0);
+    end.writeUInt16LE(entries.length, 8);
+    end.writeUInt16LE(entries.length, 10);
+    end.writeUInt32LE(directory.length, 12);
+    end.writeUInt32LE(offset, 16);
+
+    return Buffer.concat([...local, directory, end]);
+};
+
+const zip = zipEntries(files);
+if (zip.length > MAX_ZIP) {
+    errors.push(
+        `The zip is ${formatSize(zip.length)}, over the 8 MB limit. Compress textures and audio, and drop unused assets`
+    );
+}
+
+for (const warning of warnings) console.warn(`warning: ${warning}`);
+
+if (errors.length) {
+    for (const error of errors) console.error(`error: ${error}`);
+    fs.rmSync(zipFile, { force: true });
+    console.error(
+        `\nNo zip written. Fix the ${errors.length === 1 ? 'problem' : 'problems'} above and run npm run package again.`
+    );
+    process.exit(1);
+}
+
+fs.writeFileSync(zipFile, zip);
+
+const largest = files
+    .map((file) => ({ file, size: fs.statSync(path.join(buildDir, file)).size }))
+    .sort((a, b) => b.size - a.size)
+    .slice(0, 5);
+const width = Math.max(...largest.map(({ file }) => file.length));
+
+console.log(`\nPackaged ${path.relative('.', zipFile)} for Snapchat Web Lenses`);
+console.log(`  zip         ${formatSize(zip.length)} of 8 MB (${Math.ceil((zip.length / MAX_ZIP) * 100)}%)`);
+console.log(`  index.html  ${formatSize(indexSize)} of 1 MB`);
+console.log(`  files       ${files.length}`);
+console.log('\nLargest files, before compression:');
+for (const { file, size } of largest) console.log(`  ${file.padEnd(width)}  ${formatSize(size)}`);
+console.log('\nUpload the zip at https://my-lenses.snapchat.com/');

package/templates/_shared/web-lens/src/dodge-game.ts

@@ -0,0 +1,271 @@
+// The game, and the file to replace to make this starter your own (see "Make it your own" in
+// README.md). Only the entry file uses it, to attach `DodgeGame` and drive the HUD from the
+// `game:state` app event and `CARDS`. lens.ts, lens.css, vite.config.ts and scripts/ don't depend
+// on the game, so keep them
+import type { CameraComponent } from 'playcanvas';
+import { Color, Entity, Script, StandardMaterial, math } from 'playcanvas';
+
+/** Where a run is: waiting for the first tap, in play, held while the Lens is hidden, or crashed. */
+export type GameState = 'ready' | 'playing' | 'paused' | 'over';
+
+/** The app event the game fires whenever its state or score changes, for the HUD to follow. */
+export type GameEvents = {
+    'game:state': (state: GameState, score: number) => void;
+};
+
+/** What the HUD card says in each state. `null` hides the card. */
+export const CARDS: Record<GameState, { title: string; hint: string } | null> = {
+    ready: { title: 'Dodge', hint: 'Drag to steer. Tap to play' },
+    playing: null,
+    paused: { title: 'Paused', hint: 'Tap to resume' },
+    over: { title: 'Game over', hint: 'Tap to play again' }
+};
+
+const PLAYER_RADIUS = 0.3;
+const BLOCK_HEIGHT = 0.45;
+const BLOCK_DEPTH = 0.6;
+const BLOCKS = 16;
+const STARS = 24;
+const STAR_DEPTH = -2;
+
+// how many field widths the player travels for a drag across the whole canvas
+const DRAG_SCALE = 1.4;
+
+// seconds after a crash before a tap starts a new run, so the drag that crashed doesn't restart
+const RESTART_DELAY = 0.8;
+
+const YELLOW = new Color(1, 0.99, 0);
+const BLOCK_COLORS = [new Color(1, 0.36, 0.42), new Color(0.2, 0.75, 1), new Color(0.62, 0.45, 1)];
+const STAR_COLOR = new Color(0.45, 0.55, 1);
+
+type Block = { entity: Entity; width: number; counted: boolean };
+
+const createMaterial = (color: Color, glow: number) => {
+    const material = new StandardMaterial();
+    material.diffuse = color;
+    material.emissive = new Color(color.r * glow, color.g * glow, color.b * glow);
+    material.update();
+    return material;
+};
+
+/**
+ * A one-thumb dodge game: drag to steer the ball around the falling blocks. It renders the field
+ * at z = 0 for a camera that looks down -Z from its z position, and talks to the page only
+ * through the `game:state` app event.
+ */
+class DodgeGame extends Script {
+    static scriptName = 'dodgeGame';
+
+    state: GameState = 'ready';
+    score = 0;
+
+    elapsed = 0;
+    spawnIn = 0;
+    overFor = 0;
+
+    // half the visible field at z = 0, refreshed every frame from the camera
+    halfWidth = 2.5;
+    halfHeight = 4.4;
+
+    playerX = 0;
+    pointerId = -1;
+    pointerX = 0;
+
+    camera: CameraComponent | null = null;
+    player!: Entity;
+    blocks: Block[] = [];
+    stars: Entity[] = [];
+
+    initialize() {
+        const blockMaterials = BLOCK_COLORS.map((color) => createMaterial(color, 0.3));
+        const playerMaterial = createMaterial(YELLOW, 0.5);
+        const starMaterial = createMaterial(STAR_COLOR, 1);
+
+        this.player = new Entity('player');
+        this.player.addComponent('render', { type: 'sphere', material: playerMaterial });
+        this.player.setLocalScale(PLAYER_RADIUS * 2, PLAYER_RADIUS * 2, PLAYER_RADIUS * 2);
+        this.entity.addChild(this.player);
+
+        // a fixed pool of blocks, recycled as they fall off the bottom
+        for (let i = 0; i < BLOCKS; i++) {
+            const entity = new Entity(`block-${i}`);
+            entity.addComponent('render', { type: 'box', material: blockMaterials[i % blockMaterials.length] });
+            entity.enabled = false;
+            this.entity.addChild(entity);
+            this.blocks.push({ entity, width: 1, counted: false });
+        }
+
+        // streaks behind the field that show the speed
+        for (let i = 0; i < STARS; i++) {
+            const star = new Entity(`star-${i}`);
+            star.addComponent('render', { type: 'box', material: starMaterial });
+            star.setLocalScale(0.03, math.random(0.2, 0.6), 0.03);
+            star.setLocalPosition(math.random(-4, 4), math.random(-7, 7), STAR_DEPTH);
+            this.entity.addChild(star);
+            this.stars.push(star);
+        }
+
+        const canvas = this.app.graphicsDevice.canvas;
+        canvas.addEventListener('pointerdown', this.onPointerDown);
+        canvas.addEventListener('pointermove', this.onPointerMove);
+        canvas.addEventListener('pointerup', this.onPointerUp);
+        canvas.addEventListener('pointercancel', this.onPointerUp);
+        canvas.addEventListener('contextmenu', this.onContextMenu);
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+
+        this.on('destroy', () => {
+            canvas.removeEventListener('pointerdown', this.onPointerDown);
+            canvas.removeEventListener('pointermove', this.onPointerMove);
+            canvas.removeEventListener('pointerup', this.onPointerUp);
+            canvas.removeEventListener('pointercancel', this.onPointerUp);
+            canvas.removeEventListener('contextmenu', this.onContextMenu);
+            document.removeEventListener('visibilitychange', this.onVisibilityChange);
+            for (const material of [...blockMaterials, playerMaterial, starMaterial]) material.destroy();
+        });
+
+        this.setState('ready');
+    }
+
+    onPointerDown = (event: PointerEvent) => {
+        this.pointerId = event.pointerId;
+        this.pointerX = event.clientX;
+        this.app.graphicsDevice.canvas.setPointerCapture(event.pointerId);
+
+        if (this.state === 'paused') {
+            this.setState('playing');
+        } else if (this.state === 'ready' || (this.state === 'over' && this.overFor > RESTART_DELAY)) {
+            this.restart();
+        }
+    };
+
+    onPointerMove = (event: PointerEvent) => {
+        if (event.pointerId !== this.pointerId) return;
+
+        // the drag is relative, so the thumb never has to cover the ball, and normalized by the
+        // canvas width, so a swipe moves the ball the same distance on every phone
+        if (this.state === 'playing') {
+            const width = this.app.graphicsDevice.canvas.clientWidth;
+            this.playerX += ((event.clientX - this.pointerX) / width) * this.halfWidth * 2 * DRAG_SCALE;
+        }
+        this.pointerX = event.clientX;
+    };
+
+    onPointerUp = (event: PointerEvent) => {
+        if (event.pointerId === this.pointerId) this.pointerId = -1;
+    };
+
+    // a long press would otherwise open the context menu over the game
+    onContextMenu = (event: Event) => event.preventDefault();
+
+    // Snapchat can hide the Lens without closing it, so hold the run until the player taps back in
+    onVisibilityChange = () => {
+        if (document.hidden && this.state === 'playing') this.setState('paused');
+    };
+
+    get playerY() {
+        return -this.halfHeight * 0.7;
+    }
+
+    restart() {
+        for (const block of this.blocks) block.entity.enabled = false;
+        this.score = 0;
+        this.elapsed = 0;
+        this.spawnIn = 0;
+        this.playerX = 0;
+        this.setState('playing');
+    }
+
+    crash() {
+        this.overFor = 0;
+        this.setState('over');
+
+        // only Android vibrates, and only once the player has interacted, which a crash always follows
+        if ('vibrate' in navigator && navigator.userActivation.hasBeenActive) navigator.vibrate(80);
+    }
+
+    setState(state: GameState) {
+        this.state = state;
+        this.app.fire('game:state', state, this.score);
+    }
+
+    // fit the field to the camera: it fixes the width, so a taller phone sees further up and down
+    fitField() {
+        this.camera ??= this.app.root.findComponent('camera') as CameraComponent | null;
+        const { width, height } = this.app.graphicsDevice;
+        if (!this.camera || !width || !height) return;
+
+        const half = this.camera.entity.getPosition().z * Math.tan(this.camera.fov * 0.5 * math.DEG_TO_RAD);
+        const aspect = width / height;
+        this.halfWidth = this.camera.horizontalFov ? half : half * aspect;
+        this.halfHeight = this.camera.horizontalFov ? half / aspect : half;
+    }
+
+    spawn() {
+        const block = this.blocks.find((b) => !b.entity.enabled);
+        if (!block) return;
+
+        block.width = math.random(0.8, Math.min(1.8, this.halfWidth));
+        block.counted = false;
+        const room = this.halfWidth - block.width / 2;
+        block.entity.setLocalScale(block.width, BLOCK_HEIGHT, BLOCK_DEPTH);
+        block.entity.setLocalPosition(math.random(-room, room), this.halfHeight + BLOCK_HEIGHT, 0);
+        block.entity.enabled = true;
+    }
+
+    update(dt: number) {
+        this.fitField();
+
+        // blocks fall faster the longer a run lasts
+        const speed = Math.min(4 + this.elapsed * 0.12, 9);
+
+        // the stars sit behind the field, where the camera sees more, so they wrap beyond its edges
+        const top = this.halfHeight * 1.5;
+        const drift = (this.state === 'playing' ? speed * 0.5 : 0.8) * dt;
+        for (const star of this.stars) {
+            const { x, y } = star.getLocalPosition();
+            star.setLocalPosition(x, y - drift < -top ? y - drift + top * 2 : y - drift, STAR_DEPTH);
+        }
+
+        const limit = this.halfWidth - PLAYER_RADIUS;
+        this.playerX = math.clamp(this.playerX, -limit, limit);
+        const playerY = this.playerY;
+        this.player.setLocalPosition(this.playerX, playerY, 0);
+
+        if (this.state === 'over') this.overFor += dt;
+        if (this.state !== 'playing') return;
+
+        // and come more often
+        this.elapsed += dt;
+        this.spawnIn -= dt;
+        if (this.spawnIn <= 0) {
+            this.spawn();
+            this.spawnIn = Math.max(0.9 - this.elapsed * 0.012, 0.38);
+        }
+
+        for (const block of this.blocks) {
+            if (!block.entity.enabled) continue;
+
+            const { x, y: from } = block.entity.getLocalPosition();
+            const y = from - speed * dt;
+            block.entity.setLocalPosition(x, y, 0);
+
+            // circle against box: the distance from the ball's center to the nearest point of the block
+            const dx = Math.max(Math.abs(this.playerX - x) - block.width / 2, 0);
+            const dy = Math.max(Math.abs(playerY - y) - BLOCK_HEIGHT / 2, 0);
+            if (dx * dx + dy * dy < PLAYER_RADIUS * PLAYER_RADIUS) {
+                this.crash();
+                return;
+            }
+
+            if (!block.counted && y < playerY - BLOCK_HEIGHT) {
+                block.counted = true;
+                this.score++;
+                this.setState('playing');
+            }
+
+            if (y < -this.halfHeight - BLOCK_HEIGHT) block.entity.enabled = false;
+        }
+    }
+}
+
+export { DodgeGame };

package/templates/_shared/web-lens/src/lens.css

@@ -0,0 +1,155 @@
+:root {
+    color-scheme: dark;
+
+    /* Snapchat draws its own controls over the top of a Lens, so its top inset is much larger than a
+       notch. viewport-fit=cover in index.html makes these report real values */
+    --inset-top: env(safe-area-inset-top, 0px);
+    --inset-right: env(safe-area-inset-right, 0px);
+    --inset-bottom: env(safe-area-inset-bottom, 0px);
+    --inset-left: env(safe-area-inset-left, 0px);
+}
+
+/* development only (see lens.ts): reserve the room Snapchat's controls take */
+:root.simulate-insets {
+    --inset-top: max(env(safe-area-inset-top, 0px), 120px);
+}
+
+[hidden] {
+    display: none !important;
+}
+
+html,
+body {
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    overscroll-behavior: none;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+
+    /* the scene's clear color, so nothing flashes while the game loads */
+    background: #0b1020;
+    color: #fff;
+    font-family: ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
+}
+
+/* the whole screen on a phone, and a centered 9:16 column on anything wider, such as a desktop browser */
+.lens {
+    position: relative;
+    width: min(100vw, 100dvh * 9 / 16);
+    height: 100dvh;
+    margin: 0 auto;
+    overflow: hidden;
+}
+
+.lens canvas,
+.lens pc-app {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.simulate-insets .lens::before {
+    content: 'Snapchat controls';
+    position: absolute;
+    inset: 0 0 auto;
+    z-index: 2;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    height: var(--inset-top);
+    padding-bottom: 6px;
+    box-sizing: border-box;
+    border-bottom: 1px dashed #ffffff40;
+    background: repeating-linear-gradient(-45deg, #ffffff0d 0 8px, transparent 8px 16px);
+    color: #ffffff59;
+    font-size: 11px;
+    pointer-events: none;
+}
+
+/* taps pass through the HUD to the canvas, apart from its buttons */
+.lens-hud {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+}
+
+/* insets go on each positioned element itself: padding on a parent wouldn't move it */
+.lens-bar {
+    position: absolute;
+    top: calc(var(--inset-top) + 12px);
+    right: calc(var(--inset-right) + 16px);
+    left: calc(var(--inset-left) + 16px);
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+}
+
+.lens-avatar {
+    grid-column: 1;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: #ffffff1f;
+    object-fit: cover;
+}
+
+.lens-score {
+    grid-column: 2;
+    font-size: 48px;
+    font-variant-numeric: tabular-nums;
+    font-weight: 800;
+    text-shadow: 0 2px 12px #0008;
+}
+
+.lens-best {
+    grid-column: 3;
+    justify-self: end;
+    color: #ffffffb3;
+    font-size: 14px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.lens-card {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: min(300px, calc(100% - 48px));
+    box-sizing: border-box;
+    padding: 24px;
+    border-radius: 24px;
+    background: #0b1020cc;
+    backdrop-filter: blur(10px);
+    text-align: center;
+    translate: -50% -50%;
+}
+
+.lens-title {
+    margin: 0;
+    font-size: 32px;
+    font-weight: 800;
+}
+
+.lens-leaderboard {
+    margin-top: 18px;
+    padding: 12px 22px;
+    border: 0;
+    border-radius: 999px;
+    background: #fffc00;
+    color: #000;
+    font: inherit;
+    font-size: 16px;
+    font-weight: 800;
+    pointer-events: auto;
+}
+
+.lens-hint {
+    margin: 14px 0 0;
+    color: #ffffffb3;
+    font-size: 16px;
+}