@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/scenes/13_pop.js

@@ -0,0 +1,269 @@
+// 1962 波普（利希滕斯坦漫画格＋沃霍尔四宫格）——纯代码。
+// 管线：①缓存底版（米白漫画格＋45°本戴网点蓝墙＋白踢脚线＋黄地＋红带＋MEANWHILE 框）
+//      → ②会动的母题（沃霍尔四格猫按拍换配色、思考泡泡三点依次闪、WIGGLE 爆炸框抖、猫扭屁股）
+//      → ③角色：粗黑勾线平涂＋皮肤红色本戴点（createPattern，零成本）＋高光白条 ＋ 斜线阴影
+SCENES['13_pop'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp } = U, P = PAINT, TAU = Math.PI * 2;
+  const C = { ink: '#141414', paper: '#f3eedb', blue: '#2f5cc8', yellow: '#f7d52c', red: '#d8232a', redD: '#a8161c', white: '#fbf8ee',
+    skin: '#fae0cc', dotRed: '#e2483c', hair: '#f8d62c', hairD: '#d9a514', orange: '#f39a2c', orangeD: '#c4561a' };
+  const hash = (i, j = 0) => U.hash(i, j);
+
+  // 本戴点图案：方格 + 中心点 = 45° 网格。pitch 是方格边长
+  const dotPattern = (c, key, pitch, r, col, bg) => {
+    const tile = P.cached('pop_tile_' + key, pitch, pitch, (g) => { if (bg) { g.fillStyle = bg; g.fillRect(0, 0, pitch, pitch); } g.fillStyle = col;
+      [[0, 0], [pitch, 0], [0, pitch], [pitch, pitch], [pitch / 2, pitch / 2]].forEach(([x, y]) => { g.beginPath(); g.arc(x, y, r, 0, TAU); g.fill(); }); });
+    return c.createPattern(tile, 'repeat');
+  };
+  // 斜线阴影（漫画的投影）
+  const hatch = (c, cx, cy, rx, ry, gap = 10, w = 3.5) => { c.save(); c.beginPath(); c.ellipse(cx, cy, rx, ry, 0, 0, TAU); c.clip();
+    c.strokeStyle = C.ink; c.lineWidth = w; c.beginPath(); for (let x = cx - rx - ry * 2; x < cx + rx + ry; x += gap) { c.moveTo(x, cy + ry); c.lineTo(x + ry * 2.2, cy - ry); } c.stroke(); c.restore(); };
+  const ink = (c, p, fill, lw = 5) => { if (fill) { c.fillStyle = fill; c.fill(p); } c.strokeStyle = C.ink; c.lineWidth = lw; c.lineJoin = 'round'; c.lineCap = 'round'; c.stroke(p); };
+  const poly = (pts, closed = true) => { const p = new Path2D(); pts.forEach((q, i) => i ? p.lineTo(q[0], q[1]) : p.moveTo(q[0], q[1])); if (closed) p.closePath(); return p; };
+
+  // ---------- ① 底版 ----------
+  const bg = () => P.cached('pop_bg', W, H, (g) => {
+    g.fillStyle = C.paper; g.fillRect(0, 0, W, H);
+    // 蓝网点墙
+    g.fillStyle = dotPattern(g, 'wall', 24, 5.6, C.blue, C.white); g.fillRect(20, 16, W - 40, 738);
+    // 踢脚线、黄地、红带
+    g.fillStyle = C.white; g.fillRect(20, 754, W - 40, 38);
+    g.fillStyle = C.ink; g.fillRect(20, 750, W - 40, 6); g.fillRect(20, 790, W - 40, 6);
+    g.fillStyle = C.yellow; g.beginPath(); g.moveTo(20, 796); g.lineTo(W - 20, 796); g.lineTo(W - 20, 990); g.lineTo(20, 1003); g.closePath(); g.fill();
+    // 黄地上浅浅的网点（印刷感）
+    g.save(); g.clip(); g.globalAlpha = 0.18; g.fillStyle = dotPattern(g, 'floor', 14, 2.2, '#c99a10'); g.fillRect(20, 796, W - 40, 210); g.restore();
+    g.fillStyle = C.red; g.beginPath(); g.moveTo(20, 1003); g.lineTo(W - 20, 990); g.lineTo(W - 20, 1064); g.lineTo(20, 1064); g.closePath(); g.fill();
+    g.strokeStyle = C.ink; g.lineWidth = 6; g.beginPath(); g.moveTo(20, 1003); g.lineTo(W - 20, 990); g.stroke();
+    // 漫画格外框
+    g.strokeStyle = C.ink; g.lineWidth = 6; g.strokeRect(17, 14, W - 34, H - 28);
+    // MEANWHILE...
+    g.fillStyle = C.yellow; g.fillRect(32, 32, 272, 70); g.lineWidth = 5; g.strokeRect(32, 32, 272, 70);
+    g.font = '46px "Bangers-400"'; g.fillStyle = C.ink; g.textBaseline = 'middle'; g.letterSpacing = '1px'; g.fillText('MEANWHILE...', 50, 70); g.letterSpacing = '0px';
+    // 沃霍尔画框（白框）＋窗台
+    g.fillStyle = C.white; g.fillRect(350, 110, 462, 472); g.lineWidth = 5; g.strokeRect(350, 110, 462, 472);
+    g.fillStyle = C.white; g.fillRect(334, 574, 496, 22); g.strokeRect(334, 574, 496, 22); g.fillStyle = C.blue; g.fillRect(338, 592, 488, 4);
+    // 椅子（蓝）
+    const blue = '#2448b0';
+    [[1452, 478, 24, 420], [1300, 760, 18, 140], [1460, 760, 18, 140]].forEach(([x, y, w, h]) => { g.fillStyle = blue; g.fillRect(x, y, w, h); g.lineWidth = 4; g.strokeRect(x, y, w, h); });
+    g.fillStyle = blue; g.fillRect(1282, 740, 210, 24); g.strokeRect(1282, 740, 210, 24);
+    [[1440, 560], [1440, 640]].forEach(([x, y]) => { g.fillRect(x, y, 30, 12); });
+    g.fillStyle = '#6f8ee8'; g.fillRect(1458, 486, 6, 400);
+    // 纸面颗粒
+    g.drawImage(P.grain('pop', 0.035, [60, 50, 30], 0.12), 0, 0);
+  });
+
+  // ---------- ② 沃霍尔四格猫 ----------
+  const SCHEMES = [
+    { bg: '#9ccf3a', face: '#e0302a', low: '#9a6ad0', eye: '#3a7ad8', lip: '#f06a3a' },
+    { bg: '#e0359a', face: '#f0902a', low: '#78d6e6', eye: '#2a9a5a', lip: '#e0302a' },
+    { bg: '#2fc0b0', face: '#f27fb2', low: '#f8e040', eye: '#7a3ac8', lip: '#e0302a' },
+    { bg: '#f08a2a', face: '#f8d830', low: '#f6a2c4', eye: '#2ab0d8', lip: '#e0302a' },
+  ];
+  function warholCat(c, cx, cy, s) {
+    c.save(); c.translate(cx, cy);
+    const head = poly([[-70, -14], [-64, -78], [-30, -44], [30, -44], [64, -78], [70, -14], [62, 32], [30, 58], [-30, 58], [-62, 32]]);
+    const hd = RIG.smooth([[-70, -10], [-66, -76], [-28, -46], [28, -46], [66, -76], [70, -10], [60, 34], [0, 62], [-60, 34]], true, 0.35);
+    c.fillStyle = s.face; c.fill(hd);
+    c.save(); c.clip(hd); c.fillStyle = s.low; c.beginPath(); c.ellipse(4, 34, 58, 30, 0, 0, TAU); c.fill();
+    c.fillStyle = 'rgba(20,20,20,.88)'; c.beginPath(); c.moveTo(40, -40); c.quadraticCurveTo(76, 0, 52, 60); c.lineTo(90, 60); c.lineTo(90, -40); c.fill(); c.restore();   // 丝网错版的黑块
+    c.strokeStyle = C.ink; c.lineWidth = 5; c.lineJoin = 'round'; c.stroke(hd);
+    // 眼影＋眼
+    [-26, 26].forEach(x => { c.fillStyle = s.eye; c.beginPath(); c.ellipse(x, -10, 19, 13, 0, Math.PI, TAU); c.fill();
+      c.fillStyle = '#fff'; c.beginPath(); c.ellipse(x, -4, 14, 9, 0, 0, TAU); c.fill(); c.lineWidth = 3; c.stroke();
+      c.fillStyle = C.ink; c.beginPath(); c.arc(x + 2, -4, 6, 0, TAU); c.fill(); c.lineWidth = 3.5; c.beginPath(); c.moveTo(x - 16, -10); c.lineTo(x - 22, -18); c.moveTo(x + 14, -12); c.lineTo(x + 20, -19); c.stroke(); });
+    // 嘴（口红）、鼻、胡须
+    c.fillStyle = s.lip; c.beginPath(); c.moveTo(-14, 30); c.quadraticCurveTo(0, 22, 14, 30); c.quadraticCurveTo(0, 44, -14, 30); c.fill(); c.lineWidth = 2.5; c.stroke();
+    c.fillStyle = C.ink; c.beginPath(); c.moveTo(-6, 14); c.lineTo(6, 14); c.lineTo(0, 21); c.fill();
+    c.lineWidth = 2; c.beginPath(); [[-1, 18], [1, 22], [-1, 26]].forEach(([d, y]) => { c.moveTo(-36, y); c.lineTo(-74, y - 4 + d * 2); c.moveTo(36, y); c.lineTo(74, y - 4 + d * 2); }); c.stroke();
+    // 耳内
+    c.fillStyle = C.ink; c.beginPath(); c.moveTo(-58, -64); c.lineTo(-56, -38); c.lineTo(-38, -44); c.fill();
+    c.restore();
+  }
+  function warhol(c, lt) {
+    const step = Math.floor(clamp(lt, 0, 9) * 11);            // ~每 5–6 帧换一次配色
+    const cells = [[372, 132], [585, 132], [372, 350], [585, 350]];
+    cells.forEach(([x, y], i) => { const s = SCHEMES[(i + step) % 4];
+      c.fillStyle = s.bg; c.fillRect(x, y, 206, 212); warholCat(c, x + 103, y + 116, s);
+      c.strokeStyle = C.ink; c.lineWidth = 4; c.strokeRect(x, y, 206, 212); });
+    // 玻璃反光
+    c.strokeStyle = 'rgba(255,255,255,.85)'; c.lineWidth = 6; c.beginPath(); c.moveTo(712, 140); c.lineTo(660, 222); c.moveTo(736, 140); c.lineTo(684, 222); c.stroke();
+  }
+
+  // ---------- 思考泡泡（三点依次闪） ----------
+  const cloud = [[975, 220, 62], [1040, 180, 64], [1110, 170, 62], [1180, 200, 58], [1210, 250, 50], [1160, 292, 48], [1090, 300, 52], [1010, 292, 50], [960, 262, 46], [1080, 240, 90]];
+  function bubble(c, lt) {
+    c.lineWidth = 11; c.strokeStyle = C.ink; cloud.forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.stroke(); });
+    c.fillStyle = C.white; cloud.forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.fill(); });
+    [[1196, 334, 18], [1236, 338, 12]].forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.fillStyle = C.white; c.fill(); c.lineWidth = 5; c.stroke(); });
+    const f = lt * 60;
+    [1025, 1082, 1139].forEach((x, k) => { const ph = ((f - 2 * k) % 12 + 12) % 12, on = ph < 4;
+      c.fillStyle = C.ink; c.beginPath(); c.arc(x, 242 - (on ? 6 : 0), on ? 20 : 12, 0, TAU); c.fill(); });
+  }
+
+  // ---------- WIGGLE WIGGLE 爆炸框 ----------
+  const burst = (cx, cy, r0, r1, n, seed) => { const pts = []; for (let i = 0; i < n * 2; i++) { const a = i / (n * 2) * TAU + 0.1, r = i % 2 ? r0 * (0.92 + hash(i, seed) * 0.12) : r1 * (0.85 + hash(i, seed + 1) * 0.3); pts.push([cx + Math.cos(a) * r * 1.12, cy + Math.sin(a) * r * 0.8]); } return poly(pts); };
+  function wiggleBox(c, lt) {
+    const st = Math.floor(lt * 30), jx = (hash(st, 3) - 0.5) * 16, jy = (hash(st, 7) - 0.5) * 12, rot = (hash(st, 11) - 0.5) * 0.06;
+    const cx = 222, cy = 690;
+    // 放射动作线（黑三角）
+    c.fillStyle = C.ink;
+    [[-2.45, 1], [-2.0, 0.9], [-1.62, 1.1], [-1.25, 0.8], [2.2, 1], [1.85, 0.9], [1.5, 1.1], [1.15, 0.8], [2.7, 0.7], [-2.85, 0.8]].forEach(([a, k], i) => {
+      const pl = 0.85 + 0.25 * Math.sin(lt * 40 + i * 2), r0 = 230 * k, r1 = r0 + 90 * pl, w = 0.06;
+      c.beginPath(); c.moveTo(cx + Math.cos(a - w) * r0 * 1.12, cy + Math.sin(a - w) * r0 * 0.9); c.lineTo(cx + Math.cos(a) * r1 * 1.12, cy + Math.sin(a) * r1 * 0.9); c.lineTo(cx + Math.cos(a + w) * r0 * 1.12, cy + Math.sin(a + w) * r0 * 0.9); c.fill(); });
+    c.save(); c.translate(cx + jx, cy + jy); c.rotate(rot); c.translate(-cx, -cy);
+    const outer = burst(cx, cy, 128, 178, 14, 1); c.fillStyle = C.white; c.fill(outer); c.lineWidth = 6; c.strokeStyle = C.ink; c.stroke(outer);
+    const inner = burst(cx, cy, 104, 140, 12, 5); c.fillStyle = C.yellow; c.fill(inner);
+    c.font = '82px "Bangers-400"'; c.textAlign = 'center'; c.textBaseline = 'middle'; c.lineJoin = 'round';
+    c.save(); c.translate(cx, cy); c.rotate(-0.08); c.letterSpacing = '2px';
+    [['WIGGLE', -34], ['WIGGLE', 40]].forEach(([s, y], i) => { c.lineWidth = 12; c.strokeStyle = C.ink; c.strokeText(s, i * 14 - 4, y + 5); c.fillStyle = C.ink; c.fillText(s, i * 14 - 4 + 4, y + 9); c.fillStyle = C.red; c.fillText(s, i * 14 - 4, y + 5); });
+    c.restore(); c.restore();
+  }
+
+  // ---------- 桌、杯 ----------
+  function table(c) {
+    hatch(c, 1010, 902, 150, 18);
+    c.fillStyle = C.ink; c.beginPath(); c.moveTo(985, 668); c.lineTo(1015, 668); c.lineTo(1024, 860); c.lineTo(976, 860); c.closePath(); c.fill();
+    c.beginPath(); c.moveTo(920, 900); c.quadraticCurveTo(930, 852, 1000, 848); c.quadraticCurveTo(1070, 852, 1080, 900); c.closePath(); c.fill();
+    c.strokeStyle = '#4a7ae8'; c.lineWidth = 5; c.lineCap = 'round'; c.beginPath(); c.moveTo(1030, 862); c.quadraticCurveTo(1062, 870, 1068, 892); c.moveTo(1010, 690); c.lineTo(1014, 830); c.stroke();
+    const top = poly([[822, 640], [1200, 640], [1196, 664], [826, 668]]); ink(c, top, C.red, 5);
+    c.strokeStyle = C.white; c.lineWidth = 5; c.beginPath(); c.moveTo(850, 650); c.lineTo(960, 650); c.moveTo(985, 650); c.lineTo(1010, 650); c.stroke();
+  }
+  function cup(c, G, t) {
+    const k = G.cup; c.save(); c.translate(k.x, k.y); c.rotate(k.tilt); const w = 50, h = 48;
+    const body = poly([[-w / 2, 0], [-w * 0.46, h], [w * 0.46, h], [w / 2, 0]]);
+    c.fillStyle = C.white; c.fill(body);
+    c.save(); c.clip(body); c.strokeStyle = '#2f5cc8'; c.lineWidth = 5; for (let x = 4; x < 50; x += 11) { c.beginPath(); c.moveTo(x, 0); c.lineTo(x - 18, h); c.stroke(); } c.restore();
+    c.strokeStyle = C.ink; c.lineWidth = 4; c.stroke(body); c.beginPath(); c.arc(w * 0.6, h * 0.45, 14, -1.3, 1.4); c.lineWidth = 6; c.stroke();
+    c.fillStyle = '#5a3016'; c.beginPath(); c.ellipse(0, 1, w / 2 - 2, 6, 0, 0, TAU); c.fill(); c.lineWidth = 3.5; c.stroke();
+    c.restore();
+    // 漫画热气：两条交叉的黑色波浪
+    c.save(); c.strokeStyle = C.ink; c.lineWidth = 4; c.lineCap = 'round';
+    [[-8, 0], [10, 2]].forEach(([dx, ph]) => { c.beginPath(); for (let i = 0; i <= 14; i++) { const q = i / 14, x = k.x + dx + Math.sin(q * 7 + ph + t * 14) * 9 * (dx < 0 ? 1 : -1), y = k.y - 14 - q * 62; i ? c.lineTo(x, y) : c.moveTo(x, y); } c.stroke(); });
+    c.restore();
+  }
+
+  // ---------- 少女（利希滕斯坦） ----------
+  function girl(c, G, lt, t, ch) {
+    const skinDots = dotPattern(c, 'skin', 13, 3.3, C.dotRed, C.skin);
+    const fillSkin = (p) => { c.fillStyle = skinDots; c.fill(p); c.strokeStyle = C.ink; c.lineWidth = 5; c.stroke(p); };
+    const a = G.A, h = a.headC, sh = [h[0] - 1318, h[1] - 360];
+    // 大波浪发团（背后）
+    const sway = Math.sin(t * 5) * 6;
+    // 外缘做成一串大波浪（利希滕斯坦的金发）：沿后缘按弧长加 sin 鼓包
+    const spine = [[1262, 300], [1290, 262], [1346, 250], [1404, 276], [1440, 330], [1462, 396], [1492, 452], [1522, 510], [1540, 570], [1520, 624]];
+    const inner = [[1488, 640], [1452, 610], [1420, 628], [1392, 596], [1372, 548], [1356, 496], [1342, 452], [1330, 418], [1320, 392]];
+    const wav = spine.map(([x, y], i) => i < 4 ? [x, y] : [x + Math.sin(i * 2.1 + t * 4) * 14 + 10, y + Math.cos(i * 2.1) * 6]);
+    const hairPts = wav.concat(inner).map(([x, y]) => [x + sh[0] * (y < 430 ? 1 : 0.4) + (y > 430 ? sway * (y - 430) / 180 : 0), y + sh[1] * (y < 430 ? 1 : 0.4)]);
+    const hair = RIG.smooth(hairPts, true, 0.75);
+    // 大波浪：发团＋沿后缘的一串卷团（先统一描粗黑边再统一填黄 = 并集轮廓）
+    const lobes = [[1440, 360, 44], [1478, 430, 46], [1500, 505, 48], [1520, 578, 44], [1478, 622, 38], [1430, 606, 34], [1400, 560, 30]]
+      .map(([x, y, r], i) => [x + sh[0] * (y < 430 ? 1 : 0.4) + sway * Math.max(0, y - 430) / 180 + Math.sin(t * 6 + i) * 3, y + sh[1] * (y < 430 ? 1 : 0.4), r]);
+    c.strokeStyle = C.ink; c.lineWidth = 10; c.stroke(hair); lobes.forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.stroke(); });
+    c.fillStyle = C.hair; c.fill(hair); lobes.forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r, 0, TAU); c.fill(); });
+    c.lineWidth = 4.5; c.lineCap = 'round'; lobes.forEach(([x, y, r], i) => { c.beginPath(); c.arc(x - 4, y + 2, r * 0.58, i % 2 ? -2.6 : -0.6, i % 2 ? 0.9 : 2.9); c.stroke(); });
+    c.strokeStyle = C.hairD; c.lineWidth = 7; lobes.forEach(([x, y, r]) => { c.beginPath(); c.arc(x, y, r - 6, 0.2, 1.2); c.stroke(); });
+    // 远侧手臂（桌上）
+    ink(c, G.farSleeve, C.red); fillSkin(G.farHand);
+    // 腿＋红高跟
+    const knee = [1222, 760], ank = [1196, 878];
+    const leg = RIG.taper(knee, ank, 46, 30, 4); fillSkin(leg);
+    const leg2 = RIG.taper([1262, 772], [1236, 878], 44, 28, 4); fillSkin(leg2);
+    const shoe = (x, y) => { const p = poly([[x - 40, y + 2], [x - 30, y - 16], [x + 6, y - 14], [x + 16, y + 20], [x + 8, y + 22], [x - 2, y + 4], [x - 26, y + 12]]); ink(c, p, C.red, 4.5); c.strokeStyle = C.white; c.lineWidth = 3; c.beginPath(); c.moveTo(x - 26, y - 8); c.lineTo(x - 6, y - 8); c.stroke(); };
+    shoe(1236, 884); shoe(1196, 884);
+    // 裙（截短到膝）
+    c.save(); c.beginPath(); c.moveTo(0, 0); c.lineTo(W, 0); c.lineTo(W, 786); c.lineTo(1400, 786); c.quadraticCurveTo(1280, 806, 1150, 790); c.lineTo(0, 790); c.closePath(); c.clip();
+    ink(c, G.skirt, C.red, 5); c.restore();
+    c.strokeStyle = C.ink; c.lineWidth = 5; c.beginPath(); c.moveTo(1150, 790); c.quadraticCurveTo(1280, 806, 1400, 786); c.stroke();
+    ink(c, G.torso, C.red, 5);
+    // 高光白条
+    c.strokeStyle = C.white; c.lineWidth = 7; c.lineCap = 'round';
+    c.beginPath(); c.moveTo(a.chest[0] + 20, a.chest[1] - 10); c.quadraticCurveTo(a.chest[0] + 34, a.chest[1] + 40, a.chest[0] + 26, a.chest[1] + 80); c.moveTo(1200, 700); c.quadraticCurveTo(1250, 690, 1300, 700); c.stroke();
+    c.strokeStyle = C.redD; c.lineWidth = 4; c.beginPath(); c.moveTo(1380, 640); c.quadraticCurveTo(1400, 700, 1390, 760); c.stroke();
+    fillSkin(G.neck);
+    // 头
+    fillSkin(G.face);
+    c.fillStyle = C.skin; c.beginPath(); c.ellipse(G.ear[0], G.ear[1], 9, 13, 0.2, 0, TAU); c.fill(); c.lineWidth = 4; c.strokeStyle = C.ink; c.stroke();
+    // 刘海＋头顶（大波浪）
+    const bangs = RIG.smooth([[1246, 330], [1250, 296], [1282, 268], [1336, 262], [1384, 284], [1404, 330], [1384, 312], [1350, 300], [1312, 302], [1280, 314], [1262, 340]].map(([x, y]) => [x + sh[0], y + sh[1]]), true, 0.5);
+    ink(c, bangs, C.hair, 5);
+    // 发丝黑线与白高光
+    c.strokeStyle = C.ink; c.lineWidth = 4;
+    [[1300, 272, 1418, 420, 0], [1350, 300, 1460, 520, 1], [1420, 360, 1520, 600, 2], [1380, 440, 1470, 630, 3], [1336, 420, 1410, 600, 4]].forEach(([x0, y0, x1, y1, k]) => {
+      c.beginPath(); for (let i = 0; i <= 24; i++) { const q = i / 24, x = lerp(x0, x1, q) + Math.sin(q * 9 + k) * 16 * q, y = lerp(y0, y1, q);
+        const X = x + sh[0] * 0.7 + (y > 430 ? sway * (y - 430) / 180 : 0), Y = y + sh[1] * 0.7; i ? c.lineTo(X, Y) : c.moveTo(X, Y); } c.stroke(); });
+    c.strokeStyle = C.white; c.lineWidth = 6; c.beginPath(); c.moveTo(1300 + sh[0], 280 + sh[1]); c.quadraticCurveTo(1340 + sh[0], 276 + sh[1], 1370 + sh[0], 292 + sh[1]); c.moveTo(1440 + sway * 0.3, 470); c.lineTo(1456 + sway * 0.4, 500); c.stroke();
+    // 五官：大眼、浓睫毛、红唇
+    const e = G.eye;
+    if (ch.blink) { c.strokeStyle = C.ink; c.lineWidth = 4; c.beginPath(); c.arc(e.x, e.y - 2, 9, 0.2, Math.PI - 0.2); c.stroke(); }
+    else { c.fillStyle = C.white; c.beginPath(); c.ellipse(e.x - 1, e.y, 12, 8.5, 0, 0, TAU); c.fill(); c.fillStyle = '#3a8ae0'; c.beginPath(); c.arc(e.x - 3, e.y + 1, 7, 0, TAU); c.fill(); c.fillStyle = C.ink; c.beginPath(); c.arc(e.x - 3, e.y + 1, 3.2, 0, TAU); c.fill(); c.fillStyle = '#fff'; c.beginPath(); c.arc(e.x - 6, e.y - 2, 2, 0, TAU); c.fill();
+      c.strokeStyle = C.ink; c.lineWidth = 4.5; c.stroke(G.lid); c.lineWidth = 3.5; G.lashes.forEach(l => { c.beginPath(); c.moveTo(...l[0]); c.lineTo(l[1][0] - 5, l[1][1] - 5); c.stroke(); }); c.beginPath(); c.moveTo(e.x + 10, e.y - 6); c.lineTo(e.x + 16, e.y - 12); c.stroke(); }
+    c.save(); c.translate(0, -5); c.strokeStyle = C.ink; c.lineWidth = 4; c.stroke(G.brow); c.restore();
+    c.fillStyle = C.red; c.beginPath(); c.moveTo(G.lips[0][0] - 3, G.lips[0][1] - 1); c.quadraticCurveTo(G.lips[1][0] + 4, G.lips[1][1] - 4, G.lips[1][0] + 3, G.lips[1][1] + 2); c.quadraticCurveTo(G.lips[2][0] + 3, G.lips[2][1] + 3, G.lips[2][0] - 3, G.lips[2][1]); c.closePath(); c.fill(); c.lineWidth = 2.5; c.stroke();
+    // 近侧手臂（无袖：皮肤点）＋杯＋手
+    fillSkin(G.upperArm); fillSkin(G.foreArm);
+    cup(c, G, t);
+    fillSkin(G.hand); c.fillStyle = C.skin; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill(); c.lineWidth = 3.5; c.stroke();
+    c.fillStyle = C.red; c.beginPath(); c.arc(G.thumb[0] - 4, G.thumb[1] - 1, 3, 0, TAU); c.fill();   // 红指甲
+  }
+
+  // ---------- 猫：趴低、准备扑，屁股左右扭 ----------
+  function cat(c, K, lt, t, ch) {
+    const wig = Math.sin(lt * TAU * 6) * 16;                     // 6Hz 扭屁股
+    const bx = K.box[0][0] - 390, by = K.box[1][1] - 905;           // 骨架原点偏移
+    const def = ([x, y]) => { const w = clamp((560 - x) / 140); return [x + bx + wig * w, y + by - Math.abs(wig) * 0.6 * w]; };
+    hatch(c, 580, 912, 230, 22);
+    // 尾巴
+    const tailBase = def([440, 870]), tip = [318 + bx + wig * 1.4 + Math.sin(ch.tail) * 20, 846 + by - Math.cos(ch.tail) * 18];
+    const tailPts = P.bez(tailBase, [400 + bx + wig, 900 + by], [350 + bx + wig * 1.2, 900 + by], tip, 16);
+    c.lineCap = 'round'; c.strokeStyle = C.ink; c.lineWidth = 34; c.beginPath(); tailPts.forEach((p, i) => i ? c.lineTo(p[0], p[1]) : c.moveTo(p[0], p[1])); c.stroke();
+    c.strokeStyle = C.orange; c.lineWidth = 24; c.stroke();
+    c.strokeStyle = C.orangeD; c.lineWidth = 6; [4, 8, 12].forEach(i => { const p = tailPts[i], q = tailPts[i + 1], a = Math.atan2(q[1] - p[1], q[0] - p[0]) + Math.PI / 2; c.beginPath(); c.moveTo(p[0] + Math.cos(a) * 11, p[1] + Math.sin(a) * 11); c.lineTo(p[0] - Math.cos(a) * 11, p[1] - Math.sin(a) * 11); c.stroke(); });
+    c.fillStyle = C.white; c.beginPath(); c.arc(tip[0], tip[1], 12, 0, TAU); c.fill(); c.lineWidth = 4; c.strokeStyle = C.ink; c.stroke();
+    // 身体（翘起的屁股在左）
+    const body = RIG.smooth([[452, 900], [420, 872], [418, 820], [440, 780], [482, 756], [540, 756], [600, 770], [652, 800], [690, 850], [700, 900]].map(def), true, 0.55);
+    ink(c, body, C.orange, 5);
+    c.save(); c.clip(body);
+    c.fillStyle = C.white; c.beginPath(); c.ellipse(610 + bx, 880 + by, 120, 46, 0, 0, TAU); c.fill();
+    c.strokeStyle = C.orangeD; c.lineWidth = 9; c.lineCap = 'round';
+    [[450, 790, 486, 830], [478, 772, 512, 816], [512, 764, 540, 806], [546, 766, 566, 806], [430, 830, 470, 858]].forEach(([x0, y0, x1, y1]) => { const p0 = def([x0, y0]), p1 = def([x1, y1]); c.beginPath(); c.moveTo(...p0); c.quadraticCurveTo(p0[0] + 18, (p0[1] + p1[1]) / 2, p1[0], p1[1]); c.stroke(); });
+    c.restore(); c.strokeStyle = C.ink; c.lineWidth = 5; c.stroke(body);
+    // 前爪（向前伸）
+    [[650, 886], [704, 888]].forEach(([x, y]) => { const p = new Path2D(); p.ellipse(x + bx, y + by, 30, 15, 0, 0, TAU); ink(c, p, C.white, 4.5); c.lineWidth = 3; c.beginPath(); c.moveTo(x + bx + 6, y + by - 8); c.lineTo(x + bx + 6, y + by + 6); c.moveTo(x + bx + 16, y + by - 7); c.lineTo(x + bx + 16, y + by + 5); c.stroke(); });
+    // 头（压低，盯着前方）
+    const hc = [K.headC[0] + 22, K.headC[1] + 104], r = 58;
+    const head = new Path2D(); head.ellipse(hc[0], hc[1], r * 1.08, r * 0.92, 0, 0, TAU);
+    const ears = poly([[hc[0] - 50, hc[1] - 30], [hc[0] - 46, hc[1] - 94], [hc[0] - 8, hc[1] - 52], [hc[0] + 14, hc[1] - 54], [hc[0] + 52, hc[1] - 96], [hc[0] + 56, hc[1] - 30]]);
+    ink(c, ears, C.orange, 5); ink(c, head, C.orange, 5);
+    c.fillStyle = '#f39ab8'; c.beginPath(); c.moveTo(hc[0] - 40, hc[1] - 50); c.lineTo(hc[0] - 40, hc[1] - 80); c.lineTo(hc[0] - 18, hc[1] - 56); c.fill(); c.beginPath(); c.moveTo(hc[0] + 44, hc[1] - 52); c.lineTo(hc[0] + 46, hc[1] - 82); c.lineTo(hc[0] + 22, hc[1] - 58); c.fill();
+    c.save(); c.clip(head); c.fillStyle = C.white; c.beginPath(); c.ellipse(hc[0] + 4, hc[1] + 36, 44, 34, 0, 0, TAU); c.fill();
+    c.strokeStyle = C.orangeD; c.lineWidth = 7; [[-14, -60, -10, -38], [4, -62, 4, -40], [22, -60, 18, -38]].forEach(([a0, b0, a1, b1]) => { c.beginPath(); c.moveTo(hc[0] + a0, hc[1] + b0); c.lineTo(hc[0] + a1, hc[1] + b1); c.stroke(); });
+    c.restore(); c.strokeStyle = C.ink; c.lineWidth = 5; c.stroke(head);
+    [[-22, -2], [24, -2]].forEach(([dx, dy]) => { const x = hc[0] + dx, y = hc[1] + dy;
+      if (ch.blink) { c.lineWidth = 4; c.beginPath(); c.arc(x, y, 13, 0.2, Math.PI - 0.2); c.stroke(); return; }
+      c.fillStyle = '#f8d020'; c.beginPath(); c.arc(x, y, 16, 0, TAU); c.fill(); c.lineWidth = 4; c.stroke();
+      c.fillStyle = C.ink; c.beginPath(); c.ellipse(x + 4, y + 1, 7, 12, 0, 0, TAU); c.fill(); c.fillStyle = '#fff'; c.beginPath(); c.arc(x + 7, y - 5, 4, 0, TAU); c.fill(); });
+    c.fillStyle = '#f07aa0'; c.beginPath(); c.moveTo(hc[0] - 7, hc[1] + 18); c.lineTo(hc[0] + 7, hc[1] + 18); c.lineTo(hc[0], hc[1] + 27); c.closePath(); c.fill(); c.lineWidth = 2.5; c.stroke();
+    c.lineWidth = 3.5; c.beginPath(); c.moveTo(hc[0] - 14, hc[1] + 32); c.quadraticCurveTo(hc[0] - 7, hc[1] + 40, hc[0], hc[1] + 30); c.quadraticCurveTo(hc[0] + 7, hc[1] + 40, hc[0] + 14, hc[1] + 32); c.stroke();
+    c.lineWidth = 2.5; c.beginPath(); [[-40, 22, -96, 12], [-40, 30, -98, 34], [40, 22, 98, 12], [40, 30, 100, 34]].forEach(([a0, b0, a1, b1]) => { c.moveTo(hc[0] + a0, hc[1] + b0); c.lineTo(hc[0] + a1, hc[1] + b1); }); c.stroke();
+    // 动作线：屁股旁的弧线跟着扭
+    c.strokeStyle = C.ink; c.lineWidth = 5; c.lineCap = 'round';
+    const side = wig > 0 ? 1 : -1;
+    [[0, 0], [1, 12], [2, 24]].forEach(([k, off]) => { c.beginPath(); c.arc(476 + bx + wig * 0.6, 760 + by - off, 46 + off, -Math.PI * 0.86, -Math.PI * 0.62); c.stroke(); });
+    [[0, 0], [1, 14]].forEach(([k, off]) => { c.beginPath(); c.arc(430 + bx + wig, 830 + by, 40 + off, Math.PI * (side > 0 ? 0.8 : 0.9), Math.PI * (side > 0 ? 1.05 : 1.15)); c.stroke(); });
+  }
+
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      c.drawImage(bg(), 0, 0);
+      warhol(c, lt);
+      bubble(c, lt);
+      table(c);
+      hatch(c, 1340, 905, 170, 18);
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, hair: 'long', breathe: ch.breathe });
+      girl(c, G, lt, t, ch);
+      const K = RIG.cat({ tail: ch.tail, blink: ch.blink, breathe: ch.breathe });
+      cat(c, K, lt, t, ch);
+      wiggleBox(c, lt);
+    },
+  };
+})();

package/engine/scenes/14_8bit.js

@@ -0,0 +1,238 @@
+// 1985 8-bit 像素游戏（超级马里奥式）——纯代码。
+// 管线：整幅在 240×135 低分辨率上逐像素画（1 低像素 = 8 屏幕像素）→ 角色用 RIG 路径缩到低分辨率填色
+//      → 调色板量化 + 阈值去抗锯齿 + 每个部件单独描 1px 黑边（NES 精灵的分层描边）→ 最近邻放大 8 倍
+//      → HUD 用 PressStart2P 64px（字体 1 像素 = 8 屏幕像素，坐标对齐 8 的倍数）直接画在全分辨率上。
+// 片中只停约 0.23s（可见约 11 帧），所以所有小循环都是 15–30fps 的「步进」动画，幅度按整像素给。
+SCENES['14_8bit'] = (() => {
+  const W = 1920, H = 1080, S = 8, LW = 240, LH = 135, P = PAINT;
+  const C = {
+    wall: '#064556', plus: '#0b988a', black: '#000000', white: '#fcfcfc', gray: '#bcbcbc',
+    wood: '#a77f06', woodHi: '#eeba18', brick: '#d85214', mortar: '#fbe2a6', base: '#0b988a',
+    sky0: '#0856ef', sky1: '#47c4f8', sky2: '#aae9fb', sun: '#f1bc08', hill: '#62ee58', hill2: '#0dc405',
+    red: '#e82704', redDk: '#7c0b02', blue: '#0856ef', blueDk: '#0838a8', skin: '#f9e0ab', skinDk: '#e8a878',
+    hair: '#f8d038', hairDk: '#c89010', orange: '#f39d48', orangeDk: '#d85214', pink: '#f8a0b0', leaf: '#0dc405', leafHi: '#62ee58',
+  };
+  const PAL_CHAR = ['#000000', '#fcfcfc', '#bcbcbc', '#e82704', '#7c0b02', '#0856ef', '#0838a8', '#f9e0ab', '#e8a878', '#f8d038', '#c89010', '#f39d48', '#d85214', '#f8a0b0'].map(P.hex);
+
+  // ---------- 低分辨率画布工具 ----------
+  const lc = (k) => P.cached('8b_' + k, LW, LH, () => {});
+  const px = (g, x, y, w = 1, h = 1, col) => { g.fillStyle = col; g.fillRect(x, y, w, h); };
+  // 把一层（在低分辨率上用抗锯齿画的路径）量化到调色板、alpha 阈值化，再在外轮廓描 1px 黑边
+  function spriteize(g, outline = true) {
+    const im = g.getImageData(0, 0, LW, LH), d = im.data, N = LW * LH, op = new Uint8Array(N);
+    for (let i = 0; i < N; i++) {
+      const a = d[i * 4 + 3];
+      if (a < 110) { d[i * 4 + 3] = 0; continue; }
+      // 去预乘后找最近色
+      const r = d[i * 4], gg = d[i * 4 + 1], b = d[i * 4 + 2];
+      let best = 0, bd = 1e9; for (let j = 0; j < PAL_CHAR.length; j++) { const q = PAL_CHAR[j], dd = (r - q[0]) ** 2 + (gg - q[1]) ** 2 + (b - q[2]) ** 2; if (dd < bd) { bd = dd; best = j; } }
+      const q = PAL_CHAR[best]; d[i * 4] = q[0]; d[i * 4 + 1] = q[1]; d[i * 4 + 2] = q[2]; d[i * 4 + 3] = 255; op[i] = 1;
+    }
+    if (outline) for (let y = 0; y < LH; y++) for (let x = 0; x < LW; x++) {
+      const i = y * LW + x; if (op[i]) continue;
+      if ((x > 0 && op[i - 1]) || (x < LW - 1 && op[i + 1]) || (y > 0 && op[i - LW]) || (y < LH - 1 && op[i + LW])) { d[i * 4] = 0; d[i * 4 + 1] = 0; d[i * 4 + 2] = 0; d[i * 4 + 3] = 255; }
+    }
+    g.putImageData(im, 0, 0);
+  }
+  // 一个精灵层：在低分辨率画布上以 1/8 缩放画全分辨率坐标的路径，再 spriteize
+  function layer(key, fn, outline = true) {
+    const cv = lc('L_' + key), g = cv.getContext('2d');
+    g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, LW, LH);
+    g.save(); g.scale(1 / S, 1 / S); fn(g); g.restore();
+    spriteize(g, outline); return cv;
+  }
+
+  // ---------- 静态背景（低分辨率，逐像素） ----------
+  function background(g) {
+    px(g, 0, 0, LW, LH, C.wall);
+    // 十字点纹墙：6px 网格、隔行错 3px
+    for (let j = 0; j * 6 < 100; j++) for (let i = -1; i * 6 < LW + 6; i++) {
+      const x = i * 6 + (j % 2 ? 3 : 0) + 1, y = j * 6 + 2;
+      if (y > 97) continue;
+      px(g, x, y - 1, 1, 3, C.plus); px(g, x - 1, y, 3, 1, C.plus);
+    }
+    px(g, 0, 100, LW, 1, C.base);
+    // 木地板条
+    px(g, 0, 106, LW, 1, C.black); px(g, 0, 107, LW, 6, C.wood); px(g, 0, 107, LW, 1, C.woodHi);
+    for (let x = 7; x < LW; x += 24) px(g, x, 107, 1, 6, C.black);
+    // 砖块地面：行高 7（含缝），砖宽 16，隔行错 8
+    px(g, 0, 113, LW, LH - 113, C.black);
+    for (let r = 0; 113 + r * 7 < LH; r++) { const y = 114 + r * 7; for (let x = -16 + (r % 2 ? 8 : 0); x < LW; x += 16) {
+      px(g, x, y, 15, 6, C.brick); px(g, x, y, 15, 1, C.mortar); px(g, x, y, 1, 6, C.mortar);
+    } }
+    // 窗（45,15)-(100,73）
+    px(g, 44, 14, 57, 60, C.black); px(g, 45, 15, 55, 58, C.white); px(g, 98, 15, 2, 58, C.gray); px(g, 45, 71, 55, 2, C.gray);
+    const pane = (x0, y0, w, h) => {
+      for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) {
+        const q = (y0 + y - 17) / 52, X = x0 + x, Y = y0 + y;
+        // 天空：深蓝→浅蓝→淡蓝，交界用 2×2 棋盘抖动（NES 渐变）
+        let col = q < 0.36 ? C.sky0 : q < 0.62 ? C.sky1 : C.sky2;
+        if (Math.abs(q - 0.36) < 0.05 && (X + Y) % 2) col = C.sky1;
+        if (Math.abs(q - 0.62) < 0.05 && (X + Y) % 2) col = q < 0.62 ? C.sky2 : C.sky1;
+        px(g, X, Y, 1, 1, col);
+      }
+    };
+    pane(47, 17, 24, 25); pane(75, 17, 23, 25); pane(47, 45, 24, 25); pane(75, 45, 23, 25);
+    px(g, 71, 17, 4, 53, C.white); px(g, 73, 17, 2, 53, C.gray); px(g, 47, 42, 51, 3, C.white); px(g, 47, 44, 51, 1, C.gray);
+    // 太阳（像素圆）
+    for (let y = -4; y <= 4; y++) for (let x = -4; x <= 4; x++) if (x * x + y * y <= 17) px(g, 58 + x, 28 + y, 1, 1, (x + y < -3) ? '#f8e858' : C.sun);
+    // 绿山（下两格）
+    const hill = (cx, cy, r, x0, x1, col) => { for (let x = x0; x < x1; x++) { const h = Math.sqrt(Math.max(0, r * r - (x - cx) ** 2)); if (h <= 0) continue; const top = Math.round(cy - h); px(g, x, top, 1, 70 - top, col); px(g, x, top, 1, 1, C.black); } };
+    hill(56, 70, 9, 47, 71, C.hill); hill(66, 72, 8, 47, 71, C.hill2);
+    hill(90, 76, 18, 75, 98, C.hill2);
+    for (const [x, y] of [[52, 64], [55, 62], [86, 63], [92, 66], [80, 68]]) px(g, x, y, 2, 1, C.hill);
+    // 砖块＋问号块（右下格上方）
+    for (let k = 0; k < 2; k++) { const x = 81 + k * 4; px(g, x, 47, 4, 4, C.black); px(g, x, 47, 3, 3, C.brick); px(g, x, 47, 3, 1, C.mortar); }
+    px(g, 89, 47, 4, 4, C.black); px(g, 89, 47, 3, 3, C.sun); px(g, 90, 48, 1, 1, C.black);
+    px(g, 43, 73, 59, 3, C.black); px(g, 43, 73, 59, 2, C.gray); px(g, 43, 73, 59, 1, C.white);
+    // 鱼画框
+    px(g, 114, 29, 20, 15, C.black); px(g, 115, 30, 18, 13, C.woodHi); px(g, 117, 32, 14, 9, C.sky2);
+    px(g, 120, 35, 7, 3, C.brick); px(g, 119, 36, 1, 1, C.brick); px(g, 127, 34, 2, 5, C.brick); px(g, 121, 35, 1, 1, C.black);
+    px(g, 123, 27, 2, 2, C.gray);
+    // 椅子（梯背，人后面）
+    px(g, 178, 57, 3, 57, C.black); px(g, 179, 58, 2, 55, C.woodHi);
+    px(g, 185, 59, 3, 55, C.black); px(g, 186, 60, 2, 53, C.woodHi);
+    for (let k = 0; k < 4; k++) { px(g, 180, 63 + k * 7, 6, 2, C.black); px(g, 180, 63 + k * 7, 6, 1, C.wood); }
+    px(g, 160, 91, 28, 3, C.black); px(g, 160, 91, 28, 2, C.woodHi);
+    px(g, 163, 94, 2, 19, C.woodHi); px(g, 162, 94, 1, 19, C.black);
+    // 桌子 (102,80)-(150,113)
+    px(g, 101, 79, 50, 4, C.black); px(g, 102, 79, 48, 2, C.woodHi); px(g, 102, 81, 48, 1, C.wood);
+    px(g, 104, 83, 44, 3, C.wood); px(g, 104, 85, 44, 1, C.black);
+    for (const x of [106, 144]) { px(g, x - 1, 86, 4, 27, C.black); px(g, x, 86, 2, 27, C.woodHi); }
+    px(g, 107, 102, 38, 2, C.black); px(g, 107, 102, 38, 1, C.wood);
+  }
+  // 盆栽（会摆）：叶子用整像素偏移 sway
+  function plant(g, sway) {
+    const pot = (x, y, w, h) => { px(g, x - 1, y - 1, w + 2, h + 2, C.black); px(g, x, y, w, h, C.brick); px(g, x + 1, y, 2, h, '#f39d48'); };
+    pot(208, 99, 20, 13); px(g, 206, 97, 24, 3, C.black); px(g, 207, 97, 22, 2, C.brick);
+    px(g, 217, 82, 2, 16, C.black); px(g, 218, 82, 1, 16, C.leaf);
+    const leaf = (cx, cy, w, h, dx) => {     // 圆角像素叶：先画黑色外轮廓（缺角），再填绿、上沿一行高光、中间一条叶脉
+      const x0 = cx + dx - w / 2;
+      for (let j = -1; j <= h; j++) { const cut = (j === -1 || j === h) ? 1 : 0; px(g, x0 - 1 + cut, cy + j, w + 2 - cut * 2, 1, C.black); }
+      for (let j = 0; j < h; j++) { const cut = (j === 0 || j === h - 1) ? 1 : 0; px(g, x0 + cut, cy + j, w - cut * 2, 1, C.leaf); }
+      px(g, x0 + 1, cy, w - 3, 1, C.leafHi); px(g, x0 + 1, cy + (h >> 1), w - 2, 1, '#0a8a04');
+    };
+    leaf(218, 70, 6, 6, sway); leaf(213, 76, 6, 4, sway); leaf(224, 76, 6, 4, sway);
+    leaf(209, 84, 8, 4, Math.round(sway * 0.6)); leaf(227, 84, 8, 4, Math.round(sway * 0.6)); leaf(212, 91, 7, 3, 0); leaf(225, 91, 7, 3, 0);
+  }
+
+  // ---------- HUD（全分辨率，PressStart2P 64px，对齐 8px 网格） ----------
+  const BM = {   // 位图：. 透明  o 橘  w 白  k 黑  r 红  p 粉
+    cat: ['o.....o.', 'oo...oo.', 'ooooooo.', 'okoooko.', 'ooopooo.', 'wwwwwww.', '.wwwww..'],
+    heart: ['.rr.rr.', 'rrrrrrr', 'rrrrrrr', '.rrrrr.', '..rrr..', '...r...'],
+    heartE: ['.ww.ww.', 'w..w..w', 'w.....w', '.w...w.', '..w.w..', '...w...'],
+    apple: ['...w....', '..w.....', '.wwwwww.', 'wwwwwwww', 'wwwwwwkw', 'wwwwwwww', '.wwwwww.', '..w..w..'],
+  };
+  const COL = { o: C.orange, w: C.white, k: C.black, r: C.red, p: C.pink, R: C.white };
+  const bitmap = (c, rows, x, y, map = COL, shadow = true) => {
+    if (shadow) rows.forEach((row, j) => [...row].forEach((ch, i) => { if (ch !== '.') { c.fillStyle = '#0b1d24'; c.fillRect(x + i * S + S, y + j * S + S, S, S); } }));
+    rows.forEach((row, j) => [...row].forEach((ch, i) => { if (ch !== '.') { c.fillStyle = map[ch]; c.fillRect(x + i * S, y + j * S, S, S); } }));
+  };
+  const text = (c, s, x, y) => { c.font = '48px "PressStart2P-400"'; c.textBaseline = 'top'; c.fillStyle = '#0b1d24'; c.fillText(s, x + S, y + S); c.fillStyle = C.white; c.fillText(s, x, y); };
+  function hud(c, lt) {
+    bitmap(c, BM.cat, 64, 40);
+    text(c, 'x9', 144, 48);
+    // 心：第 630 帧（本段 lt≈0.19）闪一下——两颗满心变白、空心变红，2 帧一换
+    const fl = lt > 0.16 && lt < 0.23 && Math.floor(lt * 30) % 2 === 0;
+    const red = fl ? { ...COL, r: C.white } : COL, emp = fl ? { ...COL, w: C.red } : COL;
+    bitmap(c, BM.heart, 312, 48, red); bitmap(c, BM.heart, 384, 48, red); bitmap(c, fl ? BM.heart.map(r => r) : BM.heartE, 456, 48, fl ? { ...COL, r: C.red } : emp);
+    text(c, 'WORLD 1-1', 624, 48);
+    bitmap(c, BM.apple, 1168, 40);
+    text(c, 'x03', 1248, 48);
+  }
+
+  // ---------- 角色 ----------
+  const legs = (g, G) => {    // 牛仔裤腿＋白球鞋（替换 RIG 的裙子）
+    const hip = G.hipSeat, knee = [1222, 724], ank = [1214, 872];
+    g.fillStyle = C.blueDk; g.fill(RIG.taper([hip[0] + 10, hip[1] - 6], [knee[0] + 26, knee[1] - 8], 84, 70)); g.fill(RIG.taper([knee[0] + 26, knee[1] - 8], [ank[0] + 30, ank[1]], 64, 50));
+    g.fillStyle = C.blue; g.fill(RIG.taper(hip, knee, 92, 76)); g.fill(RIG.taper(knee, ank, 70, 56));
+    g.fillStyle = C.white; g.fill(RIG.smooth([[1150, 868], [1238, 862], [1250, 900], [1124, 904], [1118, 888]]));
+    g.fillStyle = C.red; g.fillRect(1176, 880, 30, 8);
+  };
+  function girlLayers(ch, lt) {
+    const G = RIG.girl({ cup: ch.cup, sip: ch.sip, hair: 'long', breathe: ch.breathe });
+    // 每个部件单独成层、单独描黑边：NES 精灵靠这些「内轮廓」分出头发/脸/手臂
+    const back = layer('gBack', g => { g.fillStyle = C.red; g.fill(G.farSleeve); g.fillStyle = C.skin; g.fill(G.farHand); });
+    const body = layer('gBody', g => {
+      legs(g, G);
+      g.fillStyle = C.red; g.fill(G.torso);
+      g.fillStyle = C.redDk; g.fillRect(G.A.waist[0] - 40, G.A.waist[1] - 18, 120, 16);  // 毛衣下摆罗纹
+      g.fillStyle = C.red; g.fillRect(G.A.neck[0] - 28, G.A.neck[1] - 10, 56, 22);        // 高领
+    });
+    const hair = layer('gHair', g => { g.fillStyle = C.hair; g.fill(G.hairBack); g.fill(G.hairDown); g.fillStyle = C.hairDk; g.fillRect(G.A.nape[0] + 10, G.A.nape[1] + 20, 14, 120); });
+    const face = layer('gFace', g => { g.fillStyle = C.skin; g.fill(G.face); g.beginPath(); g.ellipse(G.ear[0], G.ear[1], 9, 13, 0.2, 0, 7); g.fill(); });
+    const bangs = layer('gBangs', g => { g.fillStyle = C.hair; g.fill(G.bangs); });
+    const arm = layer('gArm', g => {
+      g.fillStyle = C.red; g.fill(G.upperArm); g.fill(G.foreArm); g.fillStyle = C.redDk; g.fill(G.cuff);
+      g.fillStyle = C.skin; g.fill(G.hand);
+    });
+    return { G, back, body, hair, face, bangs, arm };
+  }
+  // 白底红条马克杯：直接在低分辨率上逐像素画（6×5 + 把手），杯子跟着手走
+  function cupPx(g, G) {
+    const x = Math.round(G.cup.x / S) - 3, y = Math.round(G.cup.y / S);
+    px(g, x - 1, y - 1, 8, 7, C.black); px(g, x + 6, y, 3, 4, C.black); px(g, x + 6, y + 1, 2, 2, C.white); px(g, x + 6, y + 1, 1, 2, C.black);
+    px(g, x, y, 6, 5, C.white); px(g, x, y, 6, 1, C.gray); px(g, x, y + 2, 6, 1, C.red); px(g, x, y + 4, 6, 1, C.red); px(g, x + 5, y + 1, 1, 4, C.gray);
+    px(g, Math.round(G.thumb[0] / S), Math.round(G.thumb[1] / S), 2, 2, C.skin);
+    return [x + 3, y - 1];
+  }
+  function catLayers(ch, lt) {
+    // 尾巴：15fps 步进，4 个姿态循环（像素动画的「两三张图交替」）
+    const step = Math.floor(lt * 15) % 4, tail = [-0.55, 0, 0.55, 0][step];
+    const K = RIG.cat({ tail, blink: ch.blink, breathe: 0 });
+    const body = layer('catB', g => {
+      g.lineCap = 'round'; g.strokeStyle = C.orange; g.lineWidth = K.tailW; g.stroke(K.tail);
+      const tip = K.tailPts[K.tailPts.length - 1]; g.fillStyle = C.white; g.beginPath(); g.arc(tip[0], tip[1], 14, 0, 7); g.fill();
+      g.fillStyle = C.orange; g.fill(K.body);
+      g.fillStyle = C.white; g.fill(K.white); K.legs.forEach(l => g.fill(l));
+      g.strokeStyle = C.orangeDk; g.lineWidth = 9; K.stripes.slice(3).forEach(s => { g.beginPath(); g.moveTo(...s[0]); g.lineTo(...s[1]); g.stroke(); });
+    });
+    const head = layer('catH', g => {
+      g.fillStyle = C.orange; g.fill(K.head);
+      g.save(); g.clip(K.head); g.fillStyle = C.white; g.beginPath(); g.ellipse(K.nose[0] - 14, K.nose[1] + 20, 34, 22, 0, 0, 7); g.fill(); g.restore();
+      g.strokeStyle = C.orangeDk; g.lineWidth = 9; K.stripes.slice(0, 3).forEach(s => { g.beginPath(); g.moveTo(...s[0]); g.lineTo(...s[1]); g.stroke(); });
+      g.fillStyle = C.pink; K.earInner.forEach(e => { g.beginPath(); e.forEach((p, i) => i ? g.lineTo(...p) : g.moveTo(...p)); g.fill(); });
+    });
+    return { K, body, head };
+  }
+
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      const L = lc('frame'), g = L.getContext('2d');
+      g.setTransform(1, 0, 0, 1, 0, 0);
+      g.drawImage(P.cached('8b_bg', LW, LH, background), 0, 0);
+      // 窗里的云：2 帧挪 1px 往左；问号块 lt≈0.08 起顶出一枚金币（上去再落回）
+      const cx = 92 - Math.floor(lt * 30);
+      for (const [x, y, w] of [[cx - 34, 35, 8], [cx, 22, 9]]) { if (x < 47 || x + w > 98 || (x + w > 70 && x < 75)) continue; px(g, x + 1, y - 1, w - 2, 1, C.white); px(g, x, y, w, 2, C.white); px(g, x, y + 2, w, 1, C.gray); }
+      const cq = (lt - 0.06) / 0.16;
+      if (cq > 0 && cq < 1) { const y = Math.round(46 - Math.sin(cq * Math.PI) * 9); px(g, 90, y - 3, 2, 3, C.sun); px(g, 90, y - 3, 1, 3, '#f8e858'); }
+      // 盆栽在 630 帧（lt≈0.19）抖一下
+      const sw = lt > 0.15 && lt < 0.24 ? [0, 1, 0, -1][Math.floor(lt * 30) % 4] : 0;
+      plant(g, sw);
+      // 角色
+      const CL = catLayers(ch, lt), K = CL.K;
+      g.drawImage(CL.body, 0, 0); g.drawImage(CL.head, 0, 0);
+      // 猫脸：像素眼（2×2 黑＋1 白高光）、粉鼻、白胡须
+      K.eyes.forEach(e => { const x = Math.round(e.x / S), y = Math.round(e.y / S); if (ch.blink) px(g, x - 1, y, 2, 1, C.black); else { px(g, x - 1, y - 1, 2, 2, C.black); px(g, x - 1, y - 1, 1, 1, C.white); } });
+      px(g, Math.round(K.nose[0] / S), Math.round(K.nose[1] / S), 1, 1, C.pink);
+      const hx = Math.round((K.headC[0] + 70) / S), hy = Math.round(K.headC[1] / S) + 2;
+      px(g, hx, hy, 3, 1, C.white); px(g, hx, hy + 2, 3, 1, C.white); px(g, hx - 17, hy + 1, 2, 1, C.white); px(g, hx - 17, hy + 3, 2, 1, C.white);
+      const GL = girlLayers(ch, lt), G = GL.G;
+      g.drawImage(GL.back, 0, 0); g.drawImage(GL.body, 0, 0); g.drawImage(GL.hair, 0, 0); g.drawImage(GL.face, 0, 0); g.drawImage(GL.bangs, 0, 0);
+      // 少女五官（逐像素）：1×2 黑眼＋眉、腮红、红唇
+      const ex = Math.round(G.eye.x / S), ey = Math.round(G.eye.y / S);
+      if (ch.blink) px(g, ex - 1, ey, 2, 1, C.black); else { px(g, ex, ey - 1, 1, 2, C.black); px(g, ex - 1, ey - 3, 2, 1, C.hairDk); }
+      px(g, Math.round(G.cheek[0] / S) - 1, Math.round(G.cheek[1] / S), 2, 1, C.pink);
+      px(g, Math.round(G.lips[1][0] / S), Math.round(G.lips[1][1] / S), 1, 1, C.red);
+      g.drawImage(GL.arm, 0, 0);
+      const [sx, sy0] = cupPx(g, G);
+      // 像素热气：三列 1×2 的点，30fps 每帧上移 1px，循环 6px
+      const ph = Math.floor(lt * 30), sy = sy0 - 1;
+      for (let k = 0; k < 3; k++) for (let j = 0; j < 2; j++) { const y = sy - ((ph + k * 2 + j * 3) % 6) - j * 3; px(g, sx - 2 + k * 2 + ((ph + k) % 2), y, 1, 2, k === 1 ? C.white : C.gray); }
+      // 放大 8 倍（最近邻）
+      c.imageSmoothingEnabled = false; c.drawImage(L, 0, 0, LW, LH, 0, 0, W, H); c.imageSmoothingEnabled = true;
+      hud(c, lt);
+    },
+  };
+})();