@escapenavigator/hooks 2.2.10 → 2.2.12

package/dist/fortune-wheel/renderer.js

@@ -0,0 +1,1361 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFortuneWheelRenderer = createFortuneWheelRenderer;
+// Artwork ported from escape-navigator-games, commit 2d99f68 (premium/).
+// Only drawing and sound remain; the server is the sole source of prizes.
+const assets_1 = require("./assets");
+function createFortuneWheelRenderer(canvas, options) {
+    const ctx = canvas.getContext('2d'), TAU = Math.PI * 2;
+    const { theme, prizes, labels } = options;
+    let busy = false, moving = options.moving, sound = options.sound, rot = 0, motor = 0, start = 0, from = 0, target = 0, selected = 0, ballAngle = 0, ballRadius = 284, previous = performance.now(), elapsed = 0, glow = 0, reels = [0, 0, 0], audio = null, lastTick = -1, disposed = false, frameId = 0, done = null;
+    const seals = [false, false, false], guests = [false, false, false], nodes = [1, 2, 3];
+    const logo = new Image();
+    logo.src = assets_1.fortuneWheelLogo;
+    function grad(x, y, w, h, stops) {
+        const g = ctx.createLinearGradient(x, y, x + w, y + h);
+        stops.forEach((c, i) => {
+            g.addColorStop(i / (stops.length - 1), c);
+        });
+        return g;
+    }
+    function metal(x, y, r, cold = false) {
+        return grad(x - r, y - r, r * 1.4, r * 2, cold
+            ? ['#b4c6cf', '#657b88', '#293b48', '#8196a1']
+            : ['#e3d2ac', '#a48a60', '#514332', '#bba47c']);
+    }
+    function circle(x, y, r, fill, stroke = null, width = 1) {
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, TAU);
+        ctx.fillStyle = fill;
+        ctx.fill();
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.lineWidth = width;
+            ctx.stroke();
+        }
+    }
+    function rr(x, y, w, h, r, fill, stroke = null, lw = 1) {
+        ctx.beginPath();
+        ctx.roundRect(x, y, w, h, r);
+        ctx.fillStyle = fill;
+        ctx.fill();
+        if (stroke) {
+            ctx.strokeStyle = stroke;
+            ctx.lineWidth = lw;
+            ctx.stroke();
+        }
+    }
+    function text(s, x, y, size = 14, color = '#e7cc90', font = 'Arial', weight = 'normal') {
+        ctx.fillStyle = color;
+        ctx.font = `${weight} ${size}px ${font}`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(s, x, y, Math.max(72, size * 6));
+    }
+    function screw(x, y, cold = false) {
+        circle(x, y, 5, metal(x, y, 5, cold), '#171310', 1);
+        ctx.strokeStyle = '#332b21';
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.moveTo(x - 3, y - 1);
+        ctx.lineTo(x + 3, y + 1);
+        ctx.stroke();
+    }
+    function teeth(x, y, r, n, a, cold = false) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(a);
+        ctx.beginPath();
+        for (let i = 0; i < n * 4; i++) {
+            const rad = i % 4 === 0 || i % 4 === 3 ? r - 7 : r, ang = (i * TAU) / (n * 4);
+            ctx.lineTo(Math.cos(ang) * rad, Math.sin(ang) * rad);
+        }
+        ctx.closePath();
+        ctx.fillStyle = metal(0, 0, r, cold);
+        ctx.shadowColor = '#000';
+        ctx.shadowBlur = 12;
+        ctx.shadowOffsetY = 5;
+        ctx.fill();
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.strokeStyle = cold ? '#b1dcf977' : '#fbe3ac77';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        circle(0, 0, r - 14, '#15151a', cold ? '#466582' : '#72572f', 3);
+        for (let j = 0; j < 6; j++) {
+            ctx.save();
+            ctx.rotate((j * TAU) / 6);
+            rr(10, -5, r - 28, 10, 2, metal(0, 0, r, cold));
+            ctx.restore();
+        }
+        circle(0, 0, 18, metal(0, 0, 20, cold), '#201d16', 3);
+        circle(0, 0, 7, '#15171c', '#c4a770', 2);
+        ctx.restore();
+    }
+    function chain(x, y, r, x2, y2, a) {
+        const dx = x2 - x, dy = y2 - y, dist = Math.hypot(dx, dy), ang = Math.atan2(dy, dx);
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(ang);
+        ctx.strokeStyle = '#816a43';
+        ctx.lineWidth = 7;
+        ctx.beginPath();
+        ctx.moveTo(0, -r);
+        ctx.lineTo(dist, -r);
+        ctx.arc(dist, 0, r, -Math.PI / 2, Math.PI / 2);
+        ctx.lineTo(0, r);
+        ctx.arc(0, 0, r, Math.PI / 2, Math.PI * 1.5);
+        ctx.stroke();
+        const len = 2 * dist + TAU * r, count = Math.floor(len / 13);
+        for (let i = 0; i < count; i++) {
+            let s = ((((i * len) / count + a * r) % len) + len) % len, px, py;
+            if (s < dist) {
+                px = s;
+                py = -r;
+            }
+            else if (s < dist + Math.PI * r) {
+                const t = (s - dist) / r - Math.PI / 2;
+                px = dist + r * Math.cos(t);
+                py = r * Math.sin(t);
+            }
+            else if (s < 2 * dist + Math.PI * r) {
+                px = dist - (s - dist - Math.PI * r);
+                py = r;
+            }
+            else {
+                const t = (s - 2 * dist - Math.PI * r) / r + Math.PI / 2;
+                px = r * Math.cos(t);
+                py = r * Math.sin(t);
+            }
+            circle(px, py, 3.5, '#b19c76', '#302b22', 1);
+            circle(px, py, 1, '#f5e3b8');
+        }
+        ctx.restore();
+    }
+    function bolts(x, y, r, n) {
+        for (let i = 0; i < n; i++) {
+            const a = (i * TAU) / n;
+            screw(x + Math.cos(a) * r, y + Math.sin(a) * r);
+        }
+    }
+    function ring(x, y, r, a, cold = false) {
+        ctx.save();
+        ctx.shadowColor = '#0009';
+        ctx.shadowBlur = 22;
+        ctx.shadowOffsetY = 12;
+        circle(x, y, r, metal(x, y, r, cold), '#090b0d', 2);
+        ctx.restore();
+        circle(x, y, r - 6, '#1a1d21', cold ? '#aabcc355' : '#d8c6a055', 1);
+        circle(x, y, r - 17, metal(x, y, r, cold));
+        circle(x, y, r - 22, '#101317');
+        for (let i = 0; i < 36; i++) {
+            const t = (i * TAU) / 36;
+            ctx.save();
+            ctx.translate(x, y);
+            ctx.rotate(t);
+            ctx.fillStyle = cold ? '#c5dce14d' : '#e2cd9e55';
+            ctx.fillRect(-0.5, -r + 8, 1, i % 3 === 0 ? 6 : 3);
+            ctx.restore();
+        }
+    }
+    function sectors(x, y, r, a, cyber = false) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(a);
+        const n = prizes.length;
+        const pal = (typeof gamePalettes !== 'undefined' ? gamePalettes[theme] : null) || [
+            '#355d60',
+            '#33354e',
+        ];
+        for (let i = 0; i < n; i++) {
+            const st = (i * TAU) / n - Math.PI / 2, en = ((i + 1) * TAU) / n - Math.PI / 2;
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, r, st, en);
+            ctx.closePath();
+            const g = ctx.createRadialGradient(0, 0, 35, 0, 0, r);
+            g.addColorStop(0, '#14171c');
+            g.addColorStop(0.78, pal[i % pal.length]);
+            g.addColorStop(1, pal[i % pal.length]);
+            ctx.fillStyle = g;
+            ctx.fill();
+            ctx.strokeStyle = '#e7d3af44';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            ctx.save();
+            ctx.rotate(((i + 0.5) * TAU) / n);
+            ctx.beginPath();
+            ctx.arc(0, 0, r - 12, -Math.PI / 2 - TAU / n / 2 + 0.045, -Math.PI / 2 + TAU / n / 2 - 0.045);
+            ctx.strokeStyle = '#ffffff20';
+            ctx.stroke();
+            const fs = Math.min(30, r * 0.12), yv = -r * (theme === 'orbit' ? 0.82 : 0.72);
+            text(prizes[i].label, 0, yv, fs, '#f2eee4', 'NavigatorTitle, Arial', '600');
+            text(prizes[i].caption, 0, yv + fs * 0.85, Math.max(8, fs * 0.32), '#c8c6be', 'Arial');
+            ctx.restore();
+        }
+        ctx.restore();
+    }
+    function lamps(x, y, r, time, cold = false) {
+        for (let i = 0; i < 24; i++) {
+            const a = (i * TAU) / 24, v = busy ? 0.4 + 0.6 * Math.max(0, Math.cos(i * 0.6 - time * 8)) : 0.38;
+            ctx.save();
+            ctx.shadowColor = cold ? '#9cdee6' : '#e2c58b';
+            ctx.shadowBlur = busy ? 9 : 0;
+            circle(x + Math.cos(a) * r, y + Math.sin(a) * r, 2, cold ? `rgba(179,225,229,${v})` : `rgba(228,204,155,${v})`);
+            ctx.restore();
+        }
+    }
+    function hub(x, y, cold = false) {
+        ctx.save();
+        ctx.shadowColor = '#0007';
+        ctx.shadowBlur = 16;
+        ctx.shadowOffsetY = 6;
+        circle(x, y, 68, metal(x, y, 68, cold));
+        ctx.restore();
+        circle(x, y, 62, grad(x - 60, y - 60, 120, 120, ['#30353c', '#11161c']), cold ? '#a9bdc266' : '#dac49b66', 1);
+        circle(x, y, 53, '#191e25', '#ffffff0d', 1);
+        if (logo.complete)
+            ctx.drawImage(logo, x - 23, y - 25, 46, 46);
+    }
+    function pointer(x, y, t, cold = false) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(busy ? Math.sin(rot * 30) * 0.035 : 0);
+        rr(-9, -24, 18, 42, 8, metal(0, 0, 30, cold), '#ffffff55', 1);
+        circle(0, -15, 3, cold ? '#dbf1f2' : '#f1dfb7');
+        ctx.restore();
+    }
+    function atmosphere(time, cold = false) {
+        const g = ctx.createRadialGradient(550, 360, 20, 550, 400, 470);
+        g.addColorStop(0, cold ? '#5f899c0c' : '#bba7800b');
+        g.addColorStop(1, '#00000000');
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, 1100, 820);
+        ctx.save();
+        ctx.translate(550, 735);
+        ctx.scale(1, 0.12);
+        const sh = ctx.createRadialGradient(0, 0, 0, 0, 0, 340);
+        sh.addColorStop(0, '#0009');
+        sh.addColorStop(1, '#0000');
+        circle(0, 0, 340, sh);
+        ctx.restore();
+    }
+    function vault(t) {
+        const x = 550, y = 402;
+        rr(292, 208, 516, 468, 32, grad(292, 208, 516, 468, ['#252729', '#111416']), '#bba47c44', 2);
+        teeth(265, 490, 68, 26, -motor * 0.62);
+        teeth(838, 445, 82, 32, -motor * 0.5);
+        teeth(835, 307, 56, 22, motor * 0.73);
+        chain(326, 614, 24, 773, 614, motor);
+        teeth(326, 614, 34, 16, motor);
+        teeth(773, 614, 34, 16, motor);
+        circle(x, y + 8, 284, '#101317', '#51473a', 3);
+        teeth(x, y, 282, 96, rot);
+        ring(x, y, 270, rot);
+        lamps(x, y, 253, t);
+        sectors(x, y, 236, rot);
+        hub(x, y);
+        pointer(x, y - 255, t);
+        rr(365, 681, 370, 20, 5, metal(550, 690, 200));
+        rr(390, 701, 320, 12, 3, '#171b1f');
+    }
+    function orbit(t) {
+        ctx.save();
+        ctx.translate(550, 440);
+        ctx.scale(1, 0.72);
+        for (let j = 0; j < 4; j++) {
+            circle(0, 24 - j * 6, 322, metal(0, 0, 330, true), '#18213d', 2);
+        }
+        ring(0, 0, 322, rot, true);
+        lamps(0, 0, 304, t, true);
+        circle(0, 0, 291, '#0a1121', '#64b6f866', 2);
+        circle(0, 0, 272, '#171e36', '#567cba', 2);
+        sectors(0, 0, 257, rot, true);
+        circle(0, 0, 155, '#111b2b', '#6ebde766', 1);
+        for (let i = 0; i < 6; i++) {
+            ctx.save();
+            ctx.rotate((i * TAU) / 6 + rot);
+            ctx.strokeStyle = '#8dd8ff4d';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(0, -90);
+            ctx.lineTo(0, -174);
+            ctx.stroke();
+            ctx.restore();
+        }
+        hub(0, 0, true);
+        const bx = Math.cos(ballAngle) * ballRadius, by = Math.sin(ballAngle) * ballRadius;
+        ctx.save();
+        ctx.shadowColor = '#bdf6ff';
+        ctx.shadowBlur = 24;
+        const bg = ctx.createRadialGradient(bx - 3, by - 4, 1, bx, by, 10);
+        bg.addColorStop(0, '#fff');
+        bg.addColorStop(0.4, '#d9fbff');
+        bg.addColorStop(1, '#5685b0');
+        circle(bx, by, 9, bg);
+        ctx.restore();
+        ctx.restore();
+        ctx.save();
+        ctx.translate(550, 440);
+        ctx.scale(1, 0.72);
+        ctx.strokeStyle = '#3b9dce44';
+        ctx.lineWidth = 1;
+        for (let i = 0; i < 1; i++) {
+            ctx.beginPath();
+            ctx.ellipse(0, 0, 350 + i * 17, 350 + i * 17, 0, 0, TAU);
+            ctx.stroke();
+        }
+        ctx.restore();
+        pointer(550, 236, t, true);
+    }
+    function reelSymbol(i, x, y, size = 45) {
+        const p = prizes[((i % prizes.length) + prizes.length) % prizes.length];
+        ctx.save();
+        ctx.shadowColor = '#fff5ba';
+        ctx.shadowBlur = 0;
+        text(p.kind === 'gift' ? '✦' : '%', x, y - 9, size, '#d2a64e', 'Arial', 'bold');
+        ctx.shadowBlur = 0;
+        text(p.label, x, y + 34, 23, '#32233b', 'Arial', 'bold');
+        ctx.restore();
+    }
+    let slots = function (t) {
+        teeth(263, 405, 68, 24, motor);
+        teeth(830, 420, 75, 26, -motor * 0.92);
+        chain(260, 590, 25, 830, 590, motor);
+        rr(298, 151, 504, 535, 48, '#0b080d', '#7b5c34', 5);
+        rr(308, 138, 484, 535, 40, grad(310, 140, 480, 530, ['#d6c29b', '#887154', '#4c4036', '#c5ae87']), '#150b0d', 3);
+        rr(324, 153, 452, 503, 30, grad(330, 150, 450, 490, ['#533a42', '#241f25', '#382831']), '#e4b76e', 2);
+        rr(340, 170, 420, 114, 20, grad(0, 170, 0, 120, ['#130e15', '#44142c', '#160f19']), '#b58847', 3);
+        text('GRAND', 550, 213, 42, '#e6d6b9', 'NavigatorTitle, Arial', '600');
+        text(labels.nextGame, 550, 255, 10, '#cba86f', 'Arial');
+        for (let i = 0; i < 16; i++) {
+            const px = 351 + i * 26, lit = busy && (i + Math.floor(t * 9)) % 4 !== 0;
+            ctx.save();
+            ctx.shadowColor = '#ffc879';
+            ctx.shadowBlur = lit ? 7 : 0;
+            circle(px, 162, 3, lit ? '#e6d5b0' : '#75624e');
+            circle(px, 643, 3, lit ? '#e6d5b0' : '#75624e');
+            ctx.restore();
+        }
+        rr(336, 304, 428, 230, 14, '#0b0910', '#e8c482', 4);
+        for (let k = 0; k < 3; k++) {
+            const rx = 345 + k * 137;
+            ctx.save();
+            ctx.beginPath();
+            ctx.roundRect(rx, 315, 130, 207, 8);
+            ctx.clip();
+            ctx.fillStyle = grad(0, 315, 0, 207, [
+                '#5f5366',
+                '#ddd4ca',
+                '#fffbeb',
+                '#dcd0bd',
+                '#55405d',
+            ]);
+            ctx.fillRect(rx, 315, 130, 207);
+            const pos = reels[k], whole = Math.floor(pos), frac = pos - whole;
+            for (let j = -2; j <= 2; j++)
+                reelSymbol(whole + j, rx + 65, 415 + j * 108 - frac * 108, 44);
+            ctx.fillStyle = grad(0, 315, 0, 207, [
+                '#1b102bc9',
+                '#1b102b00',
+                '#ffffff00',
+                '#1b102bc9',
+            ]);
+            ctx.fillRect(rx, 315, 130, 207);
+            ctx.restore();
+            rr(rx, 315, 130, 207, 8, '#0000', '#fff0c744', 1);
+        }
+        ctx.save();
+        ctx.shadowColor = '#ffd491';
+        ctx.shadowBlur = 10;
+        ctx.strokeStyle = '#ffe2a2';
+        ctx.lineWidth = 1.2;
+        ctx.beginPath();
+        ctx.moveTo(331, 419);
+        ctx.lineTo(769, 419);
+        ctx.stroke();
+        ctx.restore();
+        rr(376, 557, 348, 58, 8, grad(0, 550, 0, 65, ['#b68745', '#f6dba3', '#8e602e']), '#24130f', 2);
+        rr(389, 568, 322, 34, 5, '#22101b');
+        text(labels.collection, 550, 586, 10, '#d8c8ab', 'Arial');
+        const leverY = busy ? 270 + Math.sin(Math.min(elapsed / 0.7, 1) * Math.PI) * 100 : 270;
+        ctx.strokeStyle = metal(820, 380, 60);
+        ctx.lineWidth = 13;
+        ctx.lineCap = 'round';
+        ctx.beginPath();
+        ctx.moveTo(794, 487);
+        ctx.lineTo(845, 487);
+        ctx.lineTo(845, leverY);
+        ctx.stroke();
+        circle(845, leverY, 25, grad(820, leverY - 25, 35, 50, ['#ffd7b2', '#c23e50', '#4b0d28']), '#b48c58', 2);
+        circle(837, leverY - 9, 7, '#ffd5bd77');
+        rr(340, 670, 420, 30, 4, metal(550, 680, 220), '#27180e', 2);
+        for (let i = 0; i < 4; i++) {
+            screw(336 + i * 143, 295);
+            screw(336 + i * 143, 632);
+        }
+    };
+    function star(x, y, r, c, angle = 0) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(angle);
+        ctx.beginPath();
+        for (let i = 0; i < 10; i++) {
+            const a = (i * Math.PI) / 5 - Math.PI / 2, rad = i % 2 ? r * 0.46 : r;
+            ctx.lineTo(Math.cos(a) * rad, Math.sin(a) * rad);
+        }
+        ctx.closePath();
+        ctx.fillStyle = c;
+        ctx.fill();
+        ctx.strokeStyle = '#ffffff70';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.restore();
+    }
+    function line(points, c, width = 4, blur = 0) {
+        ctx.save();
+        ctx.strokeStyle = c;
+        ctx.lineWidth = width;
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
+        ctx.shadowColor = c;
+        ctx.shadowBlur = blur;
+        ctx.beginPath();
+        points.forEach(([x, y], i) => {
+            if (i)
+                ctx.lineTo(x, y);
+            else
+                ctx.moveTo(x, y);
+        });
+        ctx.stroke();
+        ctx.restore();
+    }
+    function monster(x, y, r, c, t, friendly = true, awake = true) {
+        ctx.save();
+        ctx.translate(x, y + (moving ? Math.sin(t * 1.2 + x) * 2 : 0));
+        ctx.shadowColor = '#0005';
+        ctx.shadowBlur = 10;
+        const g = ctx.createRadialGradient(-r * 0.3, -r * 0.4, 2, 0, 0, r);
+        g.addColorStop(0, c);
+        g.addColorStop(1, friendly ? '#231740' : '#101614');
+        circle(0, 0, r, g, `${c}77`, 2);
+        ctx.shadowBlur = 0;
+        for (const side of [-1, 1]) {
+            ctx.beginPath();
+            ctx.moveTo(side * r * 0.7, -r * 0.65);
+            ctx.quadraticCurveTo(side * r, -r * 1.5, side * r * 0.25, -r * 0.85);
+            ctx.fillStyle = friendly ? '#fbe0b9' : '#acb4a1';
+            ctx.fill();
+            circle(side * r * 0.33, -r * 0.12, r * 0.22, awake ? '#f9f3d4' : '#332949');
+            if (awake) {
+                circle(side * r * 0.33 + Math.sin(t) * 3, -r * 0.1, r * 0.09, '#12101a');
+                circle(side * r * 0.31, -r * 0.16, r * 0.025, '#fff');
+            }
+        }
+        ctx.beginPath();
+        ctx.ellipse(0, r * 0.35, r * 0.4, r * 0.2, 0, 0, Math.PI);
+        ctx.fillStyle = '#130d20';
+        ctx.fill();
+        for (const i of [-1, 1]) {
+            ctx.beginPath();
+            ctx.moveTo(i * r * 0.23, r * 0.34);
+            ctx.lineTo(i * r * 0.09, r * 0.34);
+            ctx.lineTo(i * r * 0.16, r * 0.53);
+            ctx.fillStyle = '#fff1d3';
+            ctx.fill();
+        }
+        ctx.restore();
+    }
+    function haunt(t) {
+        for (let i = 0; i < 5; i++) {
+            const x = 310 + i * 120;
+            line([
+                [x, 690],
+                [x + Math.sin(i) * 20, 160],
+            ], '#30332b', 2);
+        }
+        guardian(t);
+        for (let i = 0; i < 4; i++) {
+            const x = 290 + i * 170;
+            rr(x, 570, 12, 65, 3, '#c4af80');
+            ctx.save();
+            ctx.shadowColor = '#ed9753';
+            ctx.shadowBlur = 14;
+            circle(x + 6, 559, 5 + Math.sin(t * 4 + i) * 1.5, '#ffe7a0');
+            ctx.restore();
+        }
+        ctx.save();
+        ctx.translate(550, 470);
+        ctx.scale(0.79, 0.79);
+        const locked = !seals.every(Boolean), hr = locked ? Math.sin(t * 3) * 0.035 : rot;
+        ring(0, 0, 240, hr);
+        sectors(0, 0, 214, hr);
+        hub(0, 0);
+        pointer(0, -232, t);
+        ctx.restore();
+    }
+    function monsters(t) {
+        rr(240, 145, 620, 540, 95, grad(240, 140, 620, 550, ['#665675', '#3d354c', '#292735']), '#ac98b0', 2);
+        for (let i = 0; i < 3; i++) {
+            const x = 350 + i * 200;
+            rr(x - 72, 173, 144, 170, 68, '#242531', '#b5a5a2', 2);
+            ctx.save();
+            ctx.translate(x, 258);
+            const age = (performance.now() - guestTime[i]) / 1000, turn = guests[i] && age < 1.3
+                ? (1 - Math.pow((1 - age / 1.3), 3)) * TAU * (i % 2 ? -1 : 1)
+                : 0;
+            ctx.rotate(turn);
+            monster(0, 0, 55, ['#b1df82', '#efb8dc', '#8bdcde'][i], t, true, guests[i]);
+            if (guests[i]) {
+                ctx.strokeStyle = '#f9dfeb';
+                ctx.lineWidth = 3;
+                ctx.beginPath();
+                ctx.arc(0, 15, 19, 0, Math.PI);
+                ctx.stroke();
+                circle(-30, 14, 7, '#f497b988');
+                circle(30, 14, 7, '#f497b988');
+            }
+            ctx.restore();
+        }
+        ctx.save();
+        ctx.translate(550, 495);
+        ctx.scale(0.65, 0.65);
+        ring(0, 0, 238, rot);
+        sectors(0, 0, 211, rot, true);
+        hub(0, 0, true);
+        lamps(0, 0, 222, t, true);
+        pointer(0, -227, t, true);
+        ctx.restore();
+    }
+    function cipher(t) {
+        rr(220, 145, 660, 530, 38, grad(220, 145, 650, 530, ['#162b39', '#0b111d', '#203149']), '#57798c', 3);
+        for (let i = 0; i < 4; i++) {
+            const y = 220 + i * 100;
+            line([
+                [235, y],
+                [290, y],
+                [320, y + 20],
+            ], '#3f6985', 1);
+            line([
+                [865, y],
+                [815, y],
+                [785, y + 20],
+            ], '#3f6985', 1);
+        }
+        ctx.save();
+        ctx.translate(550, 383);
+        for (let i = 0; i < 2; i++) {
+            ctx.save();
+            ctx.rotate((i % 2 ? -1 : 1) * (busy ? rot : t * 0.06) + i);
+            ctx.strokeStyle = ['#8bbdc5', '#ad9fc9', '#c6b28c'][i];
+            ctx.lineWidth = 4;
+            ctx.shadowColor = ctx.strokeStyle;
+            ctx.shadowBlur = busy ? 10 : 2;
+            ctx.beginPath();
+            ctx.arc(0, 0, 120 + i * 26, 0, Math.PI * 1.62);
+            ctx.stroke();
+            ctx.restore();
+        }
+        hub(0, 0, true);
+        ctx.restore();
+        for (let i = 0; i < 3; i++) {
+            const x = 410 + i * 140;
+            line([
+                [x - 63, 582],
+                [x + 63, 582],
+            ], '#59a7b8', 2);
+            rr(x - 42, 540, 84, 84, 12, '#121f30', '#466681', 2);
+            ctx.save();
+            ctx.translate(x, 582);
+            ctx.rotate((nodes[i] * Math.PI) / 2);
+            line([
+                [-31, 0],
+                [31, 0],
+            ], '#91f4e4', 7, 15);
+            circle(-31, 0, 4, '#fff');
+            circle(31, 0, 4, '#fff');
+            ctx.restore();
+        }
+    }
+    function guardian(t) {
+        ctx.save();
+        ctx.translate(550, 250);
+        const g = ctx.createRadialGradient(0, -40, 5, 0, 0, 190);
+        g.addColorStop(0, '#48514b');
+        g.addColorStop(1, '#0b100d');
+        ctx.beginPath();
+        ctx.moveTo(-170, 170);
+        ctx.bezierCurveTo(-180, 50, -120, -160, 0, -165);
+        ctx.bezierCurveTo(120, -160, 180, 50, 170, 170);
+        ctx.closePath();
+        ctx.fillStyle = g;
+        ctx.fill();
+        for (const side of [-1, 1]) {
+            ctx.beginPath();
+            ctx.moveTo(side * 88, -80);
+            ctx.bezierCurveTo(side * 210, -130, side * 152, -215, side * 150, -200);
+            ctx.bezierCurveTo(side * 130, -145, side * 115, -135, side * 55, -120);
+            ctx.fillStyle = '#737364';
+            ctx.fill();
+            ctx.save();
+            ctx.shadowColor = '#e3a55d';
+            ctx.shadowBlur = 24;
+            ctx.beginPath();
+            ctx.moveTo(side * 27, -22);
+            ctx.lineTo(side * 104, -46);
+            ctx.lineTo(side * 82, -7);
+            ctx.closePath();
+            ctx.fillStyle = '#ffe2a0';
+            ctx.fill();
+            ctx.restore();
+            for (let j = 0; j < 4; j++) {
+                ctx.beginPath();
+                ctx.moveTo(side * (150 + j * 14), 100 + j * 9);
+                ctx.quadraticCurveTo(side * (230 + j * 8), 220, side * (186 + j * 13), 300);
+                ctx.strokeStyle = '#646b56';
+                ctx.lineWidth = 11 - j;
+                ctx.stroke();
+            }
+        }
+        ctx.beginPath();
+        ctx.moveTo(-50, 34);
+        ctx.lineTo(-22, 55);
+        ctx.lineTo(0, 40);
+        ctx.lineTo(23, 55);
+        ctx.lineTo(50, 34);
+        ctx.strokeStyle = '#0a0e0a';
+        ctx.lineWidth = 9;
+        ctx.stroke();
+        ctx.restore();
+    }
+    let detailsLayer = (_t) => { };
+    function alchemy(t) {
+        rr(245, 112, 610, 580, 38, grad(245, 112, 610, 580, ['#3e3230', '#17181c', '#332526']), '#a8885d', 3);
+        for (const side of [-1, 1]) {
+            const x = 550 + side * 245;
+            line([
+                [x, 590],
+                [x, 225],
+                [550 + side * 130, 225],
+            ], '#967750', 18);
+            line([
+                [x - 3, 585],
+                [x - 3, 228],
+                [550 + side * 130, 228],
+            ], '#dec797', 3);
+            teeth(x, 580, 37, 16, side * motor);
+        }
+        for (let i = 0; i < 3; i++) {
+            const x = 400 + i * 150;
+            rr(x - 37, 260, 74, 200, 28, '#182329', '#b6c7be', 3);
+            const level = busy ? 60 + Math.sin(t * 2 + i) * 35 : 70;
+            rr(x - 30, 460 - level - 10, 60, level, 20, `${['#95d7ac', '#d8abf5', '#f3bc6b'][i]}99`);
+            for (let j = 0; j < 8; j++) {
+                const by = 450 - ((t * 35 + j * 17) % Math.max(25, level));
+                circle(x + Math.sin(j * 3 + t) * 18, by, 2 + (j % 3), '#ffffff90');
+            }
+            rr(x - 20, 244, 40, 20, 4, metal(x, 250, 25));
+        }
+        ctx.save();
+        ctx.translate(550, 535);
+        ctx.scale(0.45, 0.45);
+        ring(0, 0, 180, rot);
+        sectors(0, 0, 155, rot);
+        hub(0, 0);
+        pointer(0, -170, t);
+        ctx.restore();
+    }
+    function ocean(t) {
+        circle(550, 410, 300, metal(550, 410, 310, true), '#142839', 6);
+        circle(550, 410, 275, grad(300, 150, 500, 520, ['#193747', '#05202b', '#061119']), '#83b5bc', 3);
+        bolts(550, 410, 287, 8);
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(550, 410, 269, 0, TAU);
+        ctx.clip();
+        for (let i = 0; i < 10; i++) {
+            const x = 300 + ((i * 83) % 500), y = 675 - ((t * (12 + (i % 7)) + i * 31) % 540);
+            circle(x + Math.sin(t + i) * 10, y, 2 + (i % 5), '#0000', '#7bb5be55', 1);
+        }
+        for (let i = 0; i < 3; i++) {
+            ctx.beginPath();
+            ctx.ellipse(550, 410, 60 + i * 48, 60 + i * 48, 0, 0, TAU);
+            ctx.strokeStyle = '#75f3df22';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        const a = t * (busy ? 2 : 0.4);
+        line([
+            [550, 410],
+            [550 + Math.cos(a) * 265, 410 + Math.sin(a) * 265],
+        ], busy ? '#a1dcd2' : '#7cb3ad44', 2, busy ? 8 : 0);
+        ctx.translate(550, 410);
+        ctx.scale(0.65, 0.65);
+        sectors(0, 0, 245, rot, true);
+        ring(0, 0, 260, rot, true);
+        sectors(0, 0, 235, rot, true);
+        hub(0, 0, true);
+        pointer(0, -245, t, true);
+        ctx.restore();
+    }
+    const sealTime = [0, 0, 0], guestTime = [0, 0, 0], nodeTime = [0, 0, 0];
+    function releaseSeal(i) {
+        if (seals[i] || busy)
+            return;
+        sealTime[i] = performance.now();
+        seals[i] = true;
+    }
+    function wakeGuest(i) {
+        if (guests[i] || busy)
+            return;
+        guestTime[i] = performance.now();
+        guests[i] = true;
+    }
+    function turnNode(i) {
+        if (busy)
+            return;
+        nodes[i] = (nodes[i] + 1) % 4;
+        nodeTime[i] = performance.now();
+    }
+    const oldSlots = slots;
+    slots = function (t) {
+        ctx.save();
+        ctx.translate(550, 410);
+        ctx.scale(1.12, 1.12);
+        ctx.translate(-550, -410);
+        oldSlots(t);
+        ctx.restore();
+    };
+    const originalDetails = detailsLayer;
+    detailsLayer = function (t) {
+        originalDetails(t);
+        ctx.save();
+        if (theme === 'haunt') {
+            for (let k = 0; k < 3; k++) {
+                const age = seals[k] ? (performance.now() - sealTime[k]) / 1000 : 0;
+                if (age > 1.4)
+                    continue;
+                const progress = moving ? Math.min(age / 1.4, 1) : seals[k] ? 1 : 0;
+                for (let i = 0; i < 23; i++) {
+                    let u = i / 22, side = i < 11 ? -1 : 1, x = 340 + u * 420, y = 345 + k * 100 + Math.sin(u * Math.PI) * 25;
+                    x += side * progress * 400;
+                    y += progress * progress * 350;
+                    ctx.save();
+                    ctx.globalAlpha = 1 - progress;
+                    ctx.translate(x, y);
+                    ctx.rotate((k % 2 ? -0.3 : 0.3) + side * progress * 3);
+                    ctx.beginPath();
+                    ctx.ellipse(0, 0, 14, 7, 0, 0, TAU);
+                    ctx.strokeStyle = i % 2 ? '#d7c7a5' : '#7c857d';
+                    ctx.lineWidth = 5;
+                    ctx.shadowColor = '#000';
+                    ctx.shadowBlur = 5;
+                    ctx.stroke();
+                    ctx.restore();
+                }
+                if (!seals[k]) {
+                    circle(550, 360 + k * 100, 25, metal(550, 360, 28), '#422a21', 3);
+                    circle(550, 360 + k * 100, 18, '#5e1727', '#bc6158', 2);
+                    text(['I', 'II', 'III'][k], 550, 360 + k * 100, 16, '#ffdab1');
+                }
+                else {
+                    ctx.save();
+                    ctx.globalAlpha = 1 - progress;
+                    star(550 + (k - 1) * progress * 350, 360 + k * 100 - progress * 220, 25, '#b75759', progress * 9);
+                    ctx.restore();
+                }
+            }
+        }
+        if (theme === 'orbit') {
+            for (let k = 0; k < 2; k++) {
+                const a = t * (busy ? 1.8 : 0.12) * (k % 2 ? -1 : 1) + k * 2.1, x = 550 + Math.cos(a) * (370 + k * 25), y = 420 + Math.sin(a) * (205 + k * 28);
+                ctx.save();
+                ctx.translate(x, y);
+                ctx.rotate(Math.atan2(Math.cos(a) * 0.6, -Math.sin(a)) + (k % 2 ? Math.PI : 0));
+                ctx.shadowColor = '#68dcff';
+                ctx.shadowBlur = busy ? 8 : 0;
+                line([
+                    [0, 18],
+                    [0, 45 + (busy ? 25 : 0)],
+                ], '#90cdd5', 3, busy ? 10 : 1);
+                ctx.beginPath();
+                ctx.moveTo(0, -25);
+                ctx.lineTo(17, 15);
+                ctx.lineTo(5, 10);
+                ctx.lineTo(0, 18);
+                ctx.lineTo(-5, 10);
+                ctx.lineTo(-17, 15);
+                ctx.closePath();
+                ctx.fillStyle = metal(0, 0, 25, true);
+                ctx.fill();
+                circle(0, -5, 4, '#c8f8ff');
+                ctx.restore();
+            }
+        }
+        if (theme === 'cipher') {
+            const connected = nodes.every((n) => n % 2 === 0);
+            for (let i = 0; i < 3; i++) {
+                const age = (performance.now() - nodeTime[i]) / 1000, x = 410 + i * 140;
+                const c = nodes[i] % 2 === 0 ? '#82ffe0' : '#d590ff';
+                line([
+                    [x, 537],
+                    [x, 510],
+                    [550, 510],
+                    [550, 480],
+                ], `${c}66`, 2, 8);
+                if (age < 1.2) {
+                    ctx.save();
+                    ctx.globalAlpha = 1 - age / 1.2;
+                    circle(x, 582, 45 + age * 70, '#0000', c, 3);
+                    ctx.restore();
+                }
+                if (nodes[i] % 2 === 0) {
+                    const u = (t * 0.5 + i * 0.33) % 1;
+                    circle(x + (550 - x) * u, 510, 4, '#efffff', c, 3);
+                }
+            }
+            for (let k = 0; k < 1; k++) {
+                const a = t * (connected ? 0.6 : 0.06) * (k % 2 ? -1 : 1), r = 192 + k * 17;
+                ctx.beginPath();
+                ctx.arc(550, 383, r, a, a + Math.PI * 0.8);
+                ctx.strokeStyle = ['#74f8d9', '#b084ff', '#5ab7ff'][k];
+                ctx.lineWidth = 2;
+                ctx.shadowColor = ctx.strokeStyle;
+                ctx.shadowBlur = busy ? 8 : 0;
+                ctx.stroke();
+            }
+        }
+        if (theme === 'alchemy') {
+            for (const side of [-1, 1]) {
+                const x = 550 + side * 350;
+                line([
+                    [x, 200],
+                    [x, 590],
+                    [550 + side * 270, 620],
+                ], '#6f5741', 7);
+                for (let j = 0; j < 2; j++) {
+                    const y = 310 + j * 176;
+                    teeth(x, y, 26, 14, (j % 2 ? -1 : 1) * motor);
+                    line([
+                        [x - 17, y + 25],
+                        [x + 15, y + 65],
+                    ], '#b49a6e', 2);
+                }
+                const fx = 550 + side * 325;
+                ctx.beginPath();
+                ctx.moveTo(fx - 10, 160);
+                ctx.lineTo(fx - 10, 188);
+                ctx.bezierCurveTo(fx - 65, 236, fx - 45, 269, fx, 269);
+                ctx.bezierCurveTo(fx + 45, 269, fx + 65, 236, fx + 10, 188);
+                ctx.lineTo(fx + 10, 160);
+                ctx.closePath();
+                ctx.fillStyle = side < 0 ? '#72e3b244' : '#db9af544';
+                ctx.fill();
+                ctx.strokeStyle = '#b2d1c0';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                rr(fx - 14, 151, 28, 12, 3, metal(fx, 157, 20));
+                for (let j = 0; j < 7; j++)
+                    circle(fx + Math.sin(t + j) * 22, 250 - ((t * 20 + j * 13) % 50), 2, '#dffff0');
+                line([
+                    [fx, 150],
+                    [fx, 118],
+                    [550 + side * 100, 118],
+                    [550 + side * 100, 220],
+                ], '#c19c60', 5);
+            }
+        }
+        if (theme === 'ocean') {
+            // Submersible, illuminated coral and floating capsule.
+            for (const side of [-1, 1]) {
+                const x = 550 + side * 325;
+                for (let j = 0; j < 3; j++) {
+                    const y = 650 - j * 24;
+                    line([
+                        [x, 685],
+                        [x + side * j * 9, y],
+                        [x + side * (j * 9 + 16), y - 16],
+                    ], j % 2 ? '#ab81bd' : '#58bcae', 4, 3);
+                }
+            }
+            const sx = 550 + Math.cos(t * 0.22) * 330, sy = 230 + Math.sin(t * 0.4) * 30;
+            ctx.save();
+            ctx.translate(sx, sy);
+            ctx.fillStyle = '#8ee8f511';
+            ctx.beginPath();
+            ctx.moveTo(15, 15);
+            ctx.lineTo(100, 200);
+            ctx.lineTo(-50, 200);
+            ctx.closePath();
+            ctx.fill();
+            rr(-33, -17, 66, 34, 17, metal(0, 0, 40, true), '#a8c2ca', 1);
+            circle(6, 0, 11, '#103747', '#8ffff4', 3);
+            rr(-10, -28, 21, 11, 4, '#779fa9');
+            teeth(-48, 0, 18, 8, t * 4, true);
+            ctx.restore();
+        }
+        ctx.restore();
+    };
+    const gamePalettes = {
+        vault: ['#344c48', '#4b3e35'],
+        slots: ['#63414a', '#4d3e49'],
+        orbit: ['#2f5269', '#363e5b'],
+        haunt: ['#3c4c43', '#493c41'],
+        monsters: ['#638b82', '#9b768a', '#81759d'],
+        alchemy: ['#356d60', '#6a5277', '#8c6b42'],
+        ocean: ['#24585f', '#344c64'],
+        cipher: ['#2e565d', '#49425f'],
+    };
+    const audioProfiles = {
+        vault: [196, 'triangle', 0.08, 0.55],
+        slots: [330, 'triangle', 0.045, 1.5],
+        orbit: [740, 'sine', 0.12, 0.4],
+        haunt: [110, 'sine', 0.22, 0.5],
+        monsters: [523, 'sine', 0.09, 1.45],
+        alchemy: [392, 'sine', 0.15, 2.1],
+        ocean: [262, 'sine', 0.27, 0.6],
+        cipher: [660, 'square', 0.05, 0.35],
+    };
+    let lastSound = 0;
+    function ensureAudio() {
+        try {
+            audio = audio || new AudioContext();
+            if (audio.state === 'suspended')
+                audio.resume().catch(() => {
+                    sound = false;
+                });
+            return true;
+        }
+        catch (_a) {
+            sound = false;
+            return false;
+        }
+    }
+    function synth(freq, type, duration, sweep, offset = 0, volume = 0.022) {
+        if (!sound)
+            return;
+        if (!ensureAudio())
+            return;
+        const at = audio.currentTime + offset, o = audio.createOscillator(), g = audio.createGain();
+        o.type = type;
+        o.frequency.setValueAtTime(freq, at);
+        o.frequency.exponentialRampToValueAtTime(Math.max(25, freq * sweep), at + duration);
+        g.gain.setValueAtTime(0.0001, at);
+        g.gain.exponentialRampToValueAtTime(volume, at + 0.008);
+        g.gain.exponentialRampToValueAtTime(0.0001, at + duration);
+        o.connect(g);
+        g.connect(audio.destination);
+        o.start(at);
+        o.stop(at + duration + 0.02);
+        o.onended = () => {
+            o.disconnect();
+            g.disconnect();
+        };
+    }
+    function themeAudio(event) {
+        const [f, type, d, sweep] = audioProfiles[theme], now = performance.now();
+        if (event === 'tick') {
+            if (now - lastSound < 90)
+                return;
+            lastSound = now;
+            synth(f, type, d, sweep, 0, 0.012);
+            return;
+        }
+        if (event === 'win') {
+            const melody = {
+                arcana: [1, 1.5, 2, 2.5, 3],
+                vault: [1, 1.25, 1.5, 2],
+                slots: [1, 1.5, 2, 1.5, 2],
+                orbit: [1, 1.5, 2, 3],
+                haunt: [1, 1.2, 1.5, 2],
+                monsters: [1, 1.25, 1.5, 1.25, 2],
+                alchemy: [1, 1.5, 1.25, 2.5],
+                ocean: [1, 2, 1.5, 3],
+                cipher: [1, 1.5, 2, 3],
+            }[theme];
+            melody.forEach((v, i) => {
+                synth(f * v, type, theme === 'haunt' || theme === 'ocean' ? 0.5 : 0.23, 1, i * (theme === 'haunt' ? 0.19 : 0.11), 0.022);
+            });
+            return;
+        }
+        synth(f, type, d, sweep, 0, 0.024);
+    }
+    function enamel(x, y, w, h, c) {
+        rr(x, y, w, h, Math.min(12, h / 2), grad(x, y, w, h, [c, '#131a28']), `${c}aa`, 1);
+        line([
+            [x + 8, y + 3],
+            [x + w - 8, y + 3],
+        ], '#ffffff26', 1);
+    }
+    function lozenge(x, y, w, h, c) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.beginPath();
+        ctx.moveTo(0, -h);
+        ctx.lineTo(w, 0);
+        ctx.lineTo(0, h);
+        ctx.lineTo(-w, 0);
+        ctx.closePath();
+        ctx.fillStyle = c;
+        ctx.fill();
+        ctx.strokeStyle = '#fff3';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.restore();
+    }
+    function ornament(t) {
+        const colors = gamePalettes[theme];
+        if (theme === 'monsters') {
+            // Three unmistakable toy props: shield, comet wand, foam hammer.
+            for (let i = 0; i < 3; i++) {
+                const x = 350 + i * 200, y = 345;
+                ctx.save();
+                ctx.translate(x, y);
+                ctx.rotate(moving ? Math.sin(t * 2 + i) * 0.08 : 0);
+                if (i === 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(-31, -25);
+                    ctx.lineTo(31, -25);
+                    ctx.lineTo(25, 12);
+                    ctx.quadraticCurveTo(0, 40, -25, 12);
+                    ctx.closePath();
+                    ctx.fillStyle = '#efad55';
+                    ctx.fill();
+                    ctx.strokeStyle = '#ffe7b8';
+                    ctx.lineWidth = 3;
+                    ctx.stroke();
+                    lozenge(0, 0, 13, 17, '#369a89');
+                }
+                if (i === 1) {
+                    line([
+                        [-25, 23],
+                        [24, -26],
+                    ], '#ffe2ad', 8);
+                    star(24, -26, 22, '#f2bb58', t * 0.3);
+                    circle(24, -26, 7, '#b273d7');
+                    line([
+                        [27, -7],
+                        [38, 9],
+                        [31, 22],
+                    ], '#f399bc', 3);
+                }
+                if (i === 2) {
+                    line([
+                        [0, 26],
+                        [0, -24],
+                    ], '#e5b582', 10);
+                    enamel(-34, -40, 68, 28, '#36b7b8');
+                    rr(-40, -44, 13, 36, 5, '#fab389');
+                    rr(27, -44, 13, 36, 5, '#fab389');
+                }
+                ctx.restore();
+            }
+        }
+        if (theme === 'cipher') {
+            // Separate readable prize rails; no text is rotated with the surface.
+            const spots = [];
+            const rows = Math.max(3, Math.ceil(prizes.length / 2));
+            for (const side of [-1, 1])
+                for (let j = 0; j < rows; j++) {
+                    const x = 550 + side * 264, y = 373 + (j - (rows - 1) / 2) * Math.min(88, 280 / (rows - 1)), index = (side < 0 ? 0 : rows) + j, p = prizes[index % prizes.length];
+                    spots.push([x, y]);
+                    ctx.save();
+                    ctx.translate(x, y);
+                    ctx.transform(1, -side * 0.16, 0, 1, 0, 0);
+                    enamel(-49, -23, 98, 46, colors[j % colors.length]);
+                    ctx.restore();
+                    text(p.label, x, y - 4, 19, '#f3ffff', 'Arial', 'bold');
+                    text(p.caption, x, y + 13, 8, '#b3dce8');
+                }
+            if (busy) {
+                const route = spots.length === 6
+                    ? [spots[0], spots[4], spots[1], spots[5], spots[2], spots[3]]
+                    : spots, phase = (elapsed * 2.5) % route.length, i = Math.floor(phase), u = phase - i, a = route[i], b = route[(i + 1) % route.length];
+                line([a, b], '#61e8de33', 2);
+                const head = [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u], tail = [
+                    a[0] + (b[0] - a[0]) * Math.max(0, u - 0.18),
+                    a[1] + (b[1] - a[1]) * Math.max(0, u - 0.18),
+                ];
+                line([tail, head], '#9bfff2', 4, 18);
+                circle(head[0], head[1], 4, '#fff');
+                circle(a[0], a[1], 29, '#0000', '#cd9bff', 2);
+            }
+        }
+    }
+    const atelierDetails = detailsLayer;
+    detailsLayer = function (t) {
+        atelierDetails(t);
+        ctx.save();
+        ornament(t);
+        ctx.restore();
+    };
+    gamePalettes.arcana = ['#355c59', '#4c425e', '#604450', '#354d63', '#554b68', '#3c615a'];
+    audioProfiles.arcana = [784, 'sine', 0.18, 1.5];
+    function arcGem(x, y, r, tint, angle = 0) {
+        ctx.save();
+        ctx.translate(x, y);
+        ctx.rotate(angle);
+        const pts = [
+            [0, -r],
+            [r * 0.65, -r * 0.35],
+            [r * 0.65, r * 0.4],
+            [0, r],
+            [-r * 0.65, r * 0.4],
+            [-r * 0.65, -r * 0.35],
+        ];
+        for (let i = 0; i < 6; i++) {
+            ctx.beginPath();
+            ctx.moveTo(-r * 0.13, -r * 0.17);
+            ctx.lineTo(...pts[i]);
+            ctx.lineTo(...pts[(i + 1) % 6]);
+            ctx.closePath();
+            ctx.fillStyle = [tint, '#c4d6d1', tint, '#182b30', tint, '#d5cba9'][i];
+            ctx.fill();
+        }
+        ctx.restore();
+    }
+    function arcRing(r, w, colors) {
+        ctx.beginPath();
+        ctx.arc(0, 0, r, 0, TAU);
+        ctx.strokeStyle = grad(-r, -r, r * 2, r * 2, colors);
+        ctx.lineWidth = w;
+        ctx.stroke();
+    }
+    function arcana(t) {
+        ctx.save();
+        const haze = ctx.createRadialGradient(550, 400, 200, 550, 400, 405);
+        haze.addColorStop(0, '#5e506117');
+        haze.addColorStop(1, '#5e506100');
+        ctx.fillStyle = haze;
+        ctx.fillRect(100, 30, 900, 750);
+        // One fine orbital trace gives the case its silhouette.
+        ctx.save();
+        ctx.translate(550, 405);
+        ctx.rotate(-0.27);
+        ctx.beginPath();
+        ctx.ellipse(0, 0, 356, 322, 0, 0, TAU);
+        ctx.strokeStyle = '#b9aa8c2b';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        ctx.restore();
+        ctx.translate(550, 405);
+        ctx.shadowColor = '#0009';
+        ctx.shadowBlur = 30;
+        ctx.shadowOffsetY = 18;
+        circle(0, 0, 305, '#151819');
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetY = 0;
+        arcRing(301, 14, ['#d6c6a1', '#9a8562', '#3d3528', '#c7b38c']);
+        arcRing(289, 9, ['#3c4c4d', '#19282b', '#617471']);
+        arcRing(280, 3, ['#b6a07c', '#534837', '#a08e71']);
+        for (let i = 0; i < 60; i++) {
+            ctx.save();
+            ctx.rotate((i * TAU) / 60);
+            line([
+                [0, -296],
+                [0, -(i % 5 === 0 ? 302 : 299)],
+            ], '#e5d3ac55', 1);
+            ctx.restore();
+        }
+        for (let i = 0; i < 18; i++) {
+            ctx.save();
+            ctx.rotate((i * TAU) / 18);
+            const on = busy && (i + Math.floor(t * 15)) % 6 < 2;
+            ctx.shadowBlur = on ? 10 : 0;
+            ctx.shadowColor = '#c9ded6';
+            circle(0, -289, 2.1, on ? '#e0eee1' : '#637774');
+            ctx.restore();
+        }
+        ctx.save();
+        ctx.rotate(rot);
+        const n = prizes.length;
+        for (let i = 0; i < n; i++) {
+            const a = (i * TAU) / n - Math.PI / 2, b = ((i + 1) * TAU) / n - Math.PI / 2;
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            ctx.arc(0, 0, 274, a, b);
+            ctx.closePath();
+            const g = ctx.createRadialGradient(-65, -110, 20, 0, 0, 295);
+            g.addColorStop(0, '#19202a');
+            g.addColorStop(0.65, gamePalettes.arcana[i % 6]);
+            g.addColorStop(1, '#171d24');
+            ctx.fillStyle = g;
+            ctx.fill();
+            ctx.strokeStyle = '#baa38077';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            ctx.save();
+            ctx.rotate(((i + 0.5) * TAU) / n);
+            ctx.beginPath();
+            ctx.arc(0, 0, 258, -Math.PI / 2 - TAU / n / 2 + 0.045, -Math.PI / 2 + TAU / n / 2 - 0.045);
+            ctx.strokeStyle = '#c2b08a44';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            text(prizes[i].label, 0, -199, 28, '#eee4ce', 'NavigatorTitle, Arial', '700');
+            text(prizes[i].caption, 0, -177, 10, '#d0c6b7', 'Arial', '400');
+            arcGem(0, -129, 5, ['#89b9ad', '#a499ba', '#c29fa7'][i % 3]);
+            ctx.restore();
+        }
+        ctx.restore();
+        // A single moving satellite and a glass core. No ambient sparkle field.
+        ctx.save();
+        ctx.rotate(motor * 0.17);
+        ctx.beginPath();
+        ctx.arc(0, 0, 102, 0, TAU);
+        ctx.strokeStyle = '#a0b3aa66';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+        arcGem(0, -102, 5, '#9ebdb1');
+        ctx.restore();
+        circle(0, 0, 87, metal(0, 0, 87), '#c5b18b', 1);
+        const orb = ctx.createRadialGradient(-26, -34, 3, 0, 0, 80);
+        orb.addColorStop(0, '#8ba7ab');
+        orb.addColorStop(0.3, '#4a6b76');
+        orb.addColorStop(0.7, '#2c394f');
+        orb.addColorStop(1, '#141d29');
+        ctx.shadowColor = '#8aadc5';
+        ctx.shadowBlur = busy ? 20 : 0;
+        circle(0, 0, 79, orb, '#9caaae66', 1);
+        ctx.shadowBlur = 0;
+        if (logo.complete)
+            ctx.drawImage(logo, -27, -29, 54, 54);
+        ctx.beginPath();
+        ctx.ellipse(-23, -41, 24, 7, -0.5, 0, TAU);
+        ctx.fillStyle = '#ffffff15';
+        ctx.fill();
+        // The fixed jewel quietly marks the winning sector.
+        ctx.save();
+        ctx.translate(0, -295);
+        circle(0, 0, 20, metal(0, 0, 20), '#cfbc99', 1);
+        arcGem(0, 0, 13, '#8f9fc0');
+        ctx.restore();
+        if (busy) {
+            ctx.save();
+            ctx.rotate(t * 1.6);
+            ctx.beginPath();
+            ctx.arc(0, 0, 313, 0, 0.6);
+            ctx.strokeStyle = '#bad6cb99';
+            ctx.lineWidth = 2;
+            ctx.shadowColor = '#b0cdbd';
+            ctx.shadowBlur = 12;
+            ctx.stroke();
+            ctx.restore();
+        }
+        ctx.restore();
+    }
+    const arcDetails = detailsLayer;
+    detailsLayer = function (t) {
+        if (theme !== 'arcana')
+            arcDetails(t);
+    };
+    function finish() {
+        rot = target;
+        reels = [selected, selected, selected];
+        busy = false;
+        glow = 1;
+        themeAudio('win');
+        done === null || done === void 0 ? void 0 : done();
+        done = null;
+    }
+    function frame(now) {
+        if (disposed)
+            return;
+        const dt = Math.min((now - previous) / 1000, 0.05);
+        previous = now;
+        if (moving && !document.hidden)
+            motor += dt * (busy ? 5 : 0.28);
+        const t = moving ? now / 1000 : 0;
+        if (busy) {
+            elapsed = (now - start) / 1000;
+            const p = Math.min(elapsed / 6.2, 1), e = 1 - Math.pow((1 - p), 4);
+            rot = from + (target - from) * e;
+            ballAngle = -Math.PI / 2 + (1 - e) * TAU * 7;
+            ballRadius = 238 + 46 * (1 - Math.min(Math.max((p - 0.35) / 0.55, 0), 1));
+            for (let k = 0; k < 3; k++) {
+                const q = Math.min(elapsed / (4.2 + k * 0.8), 1);
+                reels[k] = (1 - Math.pow((1 - q), 4)) * (prizes.length * (9 + k) + selected);
+            }
+            const tick = Math.floor((rot * prizes.length) / TAU);
+            if (tick !== lastTick) {
+                lastTick = tick;
+                themeAudio('tick');
+            }
+            if (p === 1)
+                finish();
+        }
+        else if (moving)
+            glow = Math.max(0, glow - dt * 0.08);
+        ctx.clearRect(0, 0, 1100, 820);
+        atmosphere(t, theme === 'orbit');
+        ({ vault, slots, orbit, haunt, monsters, alchemy, ocean, arcana, cipher })[theme](t);
+        detailsLayer(t);
+        if (glow > 0) {
+            ctx.save();
+            ctx.globalAlpha = glow;
+            for (let i = 0; i < 16; i++) {
+                const a = i * 2.399, rad = 110 + (((1 - glow) * 700 + i * 31) % 430), x = 550 + Math.cos(a) * rad, y = 420 + Math.sin(a) * rad * 0.7;
+                ctx.fillStyle = theme === 'orbit' ? '#b5efff' : '#f8df9f';
+                ctx.translate(x, y);
+                ctx.rotate(a + glow * 3);
+                ctx.fillRect(-2, -5, 4, 10);
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+            }
+            ctx.restore();
+        }
+        frameId = requestAnimationFrame(frame);
+    }
+    frameId = requestAnimationFrame(frame);
+    return {
+        interact(i) {
+            if (theme === 'haunt')
+                releaseSeal(i);
+            if (theme === 'monsters')
+                wakeGuest(i);
+            if (theme === 'cipher')
+                turnNode(i);
+            themeAudio('tap');
+            return { seals: [...seals], guests: [...guests], nodes: [...nodes] };
+        },
+        setSound(value) {
+            sound = value;
+            if (!sound && audio) {
+                audio.close();
+                audio = null;
+            }
+        },
+        setMotion(value) {
+            moving = value;
+            if (!moving && busy)
+                finish();
+        },
+        unlockAudio() {
+            if (sound)
+                ensureAudio();
+        },
+        spin(index) {
+            if (disposed)
+                return Promise.resolve();
+            selected = index;
+            busy = true;
+            start = performance.now();
+            from = rot;
+            target =
+                (Math.floor(rot / TAU) + 8) * TAU + TAU - ((index + 0.5) * TAU) / prizes.length;
+            glow = 0;
+            lastTick = -1;
+            return new Promise((resolve) => {
+                done = resolve;
+                if (!moving)
+                    finish();
+            });
+        },
+        destroy() {
+            disposed = true;
+            cancelAnimationFrame(frameId);
+            if (audio)
+                audio.close();
+            done === null || done === void 0 ? void 0 : done();
+            done = null;
+        },
+    };
+}