From 680c34b5f3f93b3ff28397534636f09e78944ab4 Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Sun, 12 Jul 2026 22:23:14 +0800
Subject: [PATCH 1/7] docs(plans): add requirements-only plan for pixel pet
 feature

Brainstorm artifact covering a passive abstract blob creature living in
the bottom-right 24x24 of the clock screen, reflecting four environmental
signals (time, weather, indoor T/RH, music) via independent property
layers (shape, eye state, surface texture, motion mode) on top of an
always-running idle animation. Stateless across wake cycles, hidden in
night mode, no interaction burden.

Artifact contract: ce-unified-plan/v1
Artifact readiness: requirements-only
Source: ce-brainstorm

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../2026-07-12-001-feature-pixel-pet-plan.md  | 204 ++++++++++++++++++
 1 file changed, 204 insertions(+)
 create mode 100644 docs/plans/2026-07-12-001-feature-pixel-pet-plan.md

diff --git a/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
new file mode 100644
index 0000000..383fc13
--- /dev/null
+++ b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
@@ -0,0 +1,204 @@
+---
+title: Pixel Pet - Plan
+type: feat
+date: 2026-07-12
+topic: pixel-pet
+artifact_contract: ce-unified-plan/v1
+artifact_readiness: requirements-only
+product_contract_source: ce-brainstorm
+execution: code
+---
+
+## Goal Capsule
+
+| Field | Value |
+|---|---|
+| **Objective** | Add a passive ambient "pixel pet" — an abstract blob creature — to the bedside clock's UI that reflects four environmental signals (time of day, outdoor weather, indoor T/RH, music playback) without adding interaction burden. |
+| **Product authority** | SlumberCube (bedside clock product line, single-user device on ESP32-C3 firmware). |
+| **Execution profile** | `code` — firmware feature on the existing main MCU. No new product line, no cloud dependency, no companion app. |
+| **Stop conditions** | Pet renders on the existing canvas; behavior is purely passive; night mode hides it; pet resets on each wake. No new screens, no new buttons, no audio output from the pet. |
+| **Tail ownership** | Pet lives in `clock_screen.c` (or a small new module pulled into the same draw loop); evolves when product requirements change. |
+
+## Product Contract
+
+### Summary
+
+A passive abstract blob creature lives in the bottom-right 24×24 pixels of the clock screen, alongside the weather panel. Four environmental signals — time of day, outdoor weather, indoor T/RH, and music playback — each toggle an internal property layer (shape, eye state, surface texture, motion mode) on top of an always-running idle animation. Reactions are coherent within a wake cycle and reset on deep sleep; the pet hides during night mode and never reacts to user input.
+
+### Problem Frame
+
+SlumberCube today is purely informational: clock digits, weather text, indoor temperature, forecast range, and a station label. The OLED surface is dense with data and cold by design. A bedside device earns emotional warmth from one small living thing on screen — a creature that quietly reflects the environment rather than demanding attention. The challenge is to add that warmth without breaking what already works: the device's promise of "inform without intruding," the strict night-mode contrast budget, the 10-minute wake / deep-sleep rhythm, and the existing 256×64 grayscale canvas that already carries the clock + weather UI.
+
+### Key Decisions
+
+**Pet form: abstract blob, not a recognizable creature.**
+At 24×24 grayscale, recognizable species lose legibility under property morphing. A blob / egg / cloud-like form lets shape, eye state, and surface texture all vary continuously without breaking character. **Why:** signal legibility at the canvas budget.
+
+**Visual expression: four independent property layers on a shared base, not one fused "mood."**
+The four signals (time, weather, indoor T/RH, music) each drive one layer — shape, eye state, surface texture, motion mode. Layers coexist and overlay rather than collapsing into a single named mood. **Why:** "combine all four" was the user's stated product intent; layers keep each signal legible at small canvas size where a fused mood would read muddy.
+
+**Interaction: fully passive, no button, no sound.**
+The pet never chirps, purrs, or reacts to button presses. **Why:** the device is a bedside clock whose core promise is "inform without intruding"; a sound-emitting pet would break the night-mode silence guarantee, and an interactive pet would push the device toward gamification that is out of scope.
+
+**Persistence: stateless across wake cycles, coherent within one wake.**
+Within a 10-minute active period, reactions transition smoothly (e.g., music stops → gentle sway decays over ~15s). At deep-sleep entry, all pet state resets to neutral; the next wake starts clean. **Why:** the user is asleep between wakes, so cross-wake memory has no audience; cross-wake persistence would also require NVS/RTC backup, adding cost for no observable benefit.
+
+**Placement: bottom-right corner, adjacent to the weather panel.**
+Pet lives in the existing 24×24 area now used by the right side of the centered station label. The label is right-aligned (or shortened) to make room. **Why:** natural co-location with weather for the "weather messenger" axis, and out of the time-digits zone.
+
+```mermaid
+flowchart TB
+  Base["Base idle animation<br/>breathing + float + blink"]
+  Shape["Shape layer<br/>driven by time of day"]
+  Eyes["Eye-state layer<br/>driven by time + weather"]
+  Surface["Surface layer<br/>driven by weather + indoor T/RH"]
+  Motion["Motion mode layer<br/>driven by music on/off"]
+
+  Base --> Composite["Composite frame<br/>rendered to 24x24"]
+  Shape --> Composite
+  Eyes --> Composite
+  Surface --> Composite
+  Motion --> Composite
+```
+
+### Requirements
+
+#### Pet placement & layout
+
+- R1. The pet occupies a 24×24 pixel region anchored to the bottom-right of the 256×64 clock canvas, with its top-left at approximately `(232, 40)`. The pet region never overlaps or obscures the time digits, the weather text, or the temperature range.
+- R2. The pet renders onto the same LVGL canvas buffer (`canvas_buf` in `main/clock_screen.c`) that already carries clock, weather, and station label, and follows the same draw order rules (after weather panel content, alongside or after station label).
+- R3. The existing `station_label` is repositioned (right-aligned within the bottom row, or shortened in length) so it does not collide with the pet region.
+
+```mermaid
+flowchart LR
+  subgraph Canvas["256x64 canvas"]
+    direction TB
+    A["Time label<br/>0,2  size 128x48"] --- B["Weather label<br/>135,0"]
+    B --- C["Temp range<br/>135,18"]
+    C --- D["Station label<br/>right-aligned, y=36"]
+    D --- E["PET<br/>232,40  24x24"]
+  end
+```
+
+#### Idle animation (always running)
+
+- R4. The pet has a continuous idle animation — breathing, gentle float, periodic blink — that runs whenever the pet is visible, independent of all property layers.
+- R5. The idle animation does not pause or stop when any property layer becomes active.
+
+#### Property layers (one per environmental signal)
+
+- R6. **Shape layer** is driven by time of day: tall posture in active hours, rounder posture approaching wind-down, flat posture near sleep.
+- R7. **Eye-state layer** is driven by time of day and outdoor weather: wide open mid-day, half-lidded in evening, nearly closed near sleep; squinted in bright sun, relaxed in rain, soft in fog.
+- R8. **Surface layer** is driven by outdoor weather and indoor T/RH: smooth under comfortable conditions; one or more small sweat dots in hot or hot/humid; a droplet in rain; tiny dot accents in snow.
+- R9. **Motion layer** is driven by music playback state: idle breathe when no music, gentle bob when music plays, closed-eye soft sway when music has been playing for several seconds.
+
+#### Coherence & transition within a wake cycle
+
+- R10. Property changes within a wake cycle are visually coherent — either a smooth transition (over ~1–3 seconds) or a brief reaction animation — rather than instant frame swaps.
+- R11. Reaction animations decay after the triggering event ends. When music stops, the bob decays to idle breathe within ~10–30 seconds. When a weather change reverses, the surface element fades within ~10–30 seconds.
+
+#### Night mode & wake reset
+
+- R12. The pet is hidden whenever `clock_screen.c::night_mode` is true (the same condition that already hides weather UI and switches to dim clock digits).
+- R13. Each wake cycle begins the pet from a neutral baseline — no memory of the prior wake's shape, eye state, surface, or motion state. No NVS or RTC backup of pet state is required.
+
+### Key Flows
+
+- F1. Wake cycle boot
+  - **Trigger:** `clock_screen_create()` / first frame after wake.
+  - **Steps:** Pet appears at neutral baseline (mid-shape, eyes open, smooth surface, idle breathing). Property layers begin reading current environment signals and apply their initial state.
+  - **Covers:** R4, R6, R7, R8, R9.
+
+- F2. Music playback transition
+  - **Trigger:** Audio player starts (`audio_player_wrapper` state change).
+  - **Steps:** Motion layer switches from idle breathe to gentle bob; if music persists past ~5s, eye-state layer transitions to closed-eye soft sway.
+  - **Covers:** R9, R10.
+
+- F3. Music stops
+  - **Trigger:** Audio player reports stopped.
+  - **Steps:** Bob continues for a short decay period (~15s), then motion layer eases back to idle breathe; eyes reopen.
+  - **Covers:** R9, R11.
+
+- F4. Outdoor weather update
+  - **Trigger:** AMAP weather fetch delivers new conditions (e.g., rain, snow, fog, sun, clouds).
+  - **Steps:** Surface layer transitions to the matching texture (droplet / dots / wisp / clear); eye-state layer adjusts (squint for sun, soft for fog, neutral for clouds); smooth blend over ~1–3s.
+  - **Covers:** R8, R7, R10.
+
+- F5. Indoor T/RH threshold crossing
+  - **Trigger:** SHTC3 read crosses a configured comfortable range (hot / cold / dry / humid).
+  - **Steps:** Surface layer adds or removes a sweat dot (hot) or dryness texture (cold/dry). Coexists with weather-driven surface elements.
+  - **Covers:** R8.
+
+- F6. Time-of-day progression across the wake window
+  - **Trigger:** RTC minute tick during the 10-minute active period.
+  - **Steps:** Shape layer and eye-state layer gradually transition based on `tm_hour` (e.g., 22:00 in the wake window starts the "approaching sleep" posture).
+  - **Covers:** R6, R7, R10.
+
+- F7. Night mode entry / exit
+  - **Trigger:** `clock_screen_is_night_time()` returns true / false.
+  - **Steps:** Pet hides alongside weather UI on entry; returns to neutral baseline on exit. No state preservation across the hidden interval.
+  - **Covers:** R12, R13.
+
+- F8. Deep sleep entry
+  - **Trigger:** 10-minute wake period ends; ESP32-C3 enters deep sleep.
+  - **Steps:** All pet state is discarded. The next wake (in 10 minutes via `esp_deep_sleep_enable_gpio_wakeup`) starts from F1 with neutral baseline.
+  - **Covers:** R13.
+
+### Acceptance Examples
+
+- AE1. Wake at 07:00 on a sunny morning with music playing — pet appears tall (R6 awake), eyes squinted slightly (R7 bright sun), surface smooth (R8 dry), bobbing gently (R9 music). All four property layers are independently visible at once. **Covers:** R4, R6, R7, R8, R9.
+
+- AE2. Wake at 23:00 on a rainy night with no music — pet appears flat (R6 sleepy), eyes nearly closed (R7 night + rain), one droplet on the surface (R8 rain), idle breathing (R9 no music). **Covers:** R4, R6, R7, R8, R9.
+
+- AE3. Music stops mid-track during a wake — pet continues gentle sway for ~15 seconds, then motion layer eases back to idle breathe and eyes reopen (R9, R11). The transition is smooth, not abrupt.
+
+- AE4. Time crosses 22:00 during a wake — pet hides alongside weather UI; clock digits dim to night-mode contrast (R12). At 06:00 next morning, pet returns to neutral baseline with no memory of the prior day's shape or eye state (R13).
+
+- AE5. Indoor temperature rises past the configured hot threshold while weather is sunny — surface layer adds a single sweat dot in addition to its smooth default; shape and motion layers are unaffected (R8 coexistence with weather and time signals).
+
+- AE6. User presses the wake button during a music playback — music stops via the existing audio flow; the pet does not react directly to the button press and continues bobbing until the F3 decay timer completes (Key Decision: interaction is fully passive).
+
+- AE7. Pet is hidden during night mode. User manually forces day-mode (`s_night_override = 0`) at 02:00 — pet reappears at neutral baseline, time-of-day layer reflects 02:00 (post-midnight posture), and stays legible under night-mode contrast budget. **Covers:** R12 + R4.
+
+### Scope Boundaries
+
+**Deferred for later**
+
+- Pet sound output (chirp when music starts, gentle ambient cooing).
+- Pet button interaction (tap-to-pet, double-tap to switch mode).
+- Cross-wake pet growth, evolution, or "mood memory" (intentionally rejected in dialogue).
+- Dedicated full-screen "pet view" toggled by a button.
+- Music reactivity driven by BPM / beat detection (current scope uses music on/off only).
+- Pet species selection / multiple pet skins.
+- Pet-specific configuration screen (e.g., threshold tuning for "hot" / "rainy").
+
+**Outside this product's identity**
+
+- Tamagotchi-style care mechanics (feeding, hunger, affection scores) — the device is a bedside clock, not a virtual pet; care mechanics would push it toward gamification that conflicts with the "inform without intruding" promise.
+
+### Outstanding Questions
+
+**Resolve Before Planning**
+
+- What threshold values define each layer state? (e.g., what indoor temperature counts as "hot enough for a sweat dot"; what humidity counts as "dry enough for a dryness texture".) Likely defaults: piggyback on existing `CONFIG_SHTC3_TEMP_OFFSET_TENTHS_C` calibration ranges and standard comfortable bands (18–26 °C, 40–60 % RH).
+- Station label: right-align within the bottom row, or shorten length (e.g., truncate to 16 chars)? The pet region needs the rightmost ~32 pixels of the bottom row.
+- Music reactivity: confirm scope is "music on/off" only (no BPM / beat detection). Implied by "pure passive" + "combine all 4 signals simply"; explicit confirmation avoids planning rework.
+
+**Deferred to Planning**
+
+- Sprite / frame asset strategy: inline C byte arrays vs LVGL image objects vs programmatic pixel draw.
+- Animation tick source: custom FreeRTOS timer vs LVGL timer vs reuse of `clock_screen.c`'s existing 1-second tick. `lv_conf.h` disables LVGL animations, so a manual frame-swap approach is required.
+- Property layer state machine: continuous lerp vs discrete tick-based state tables.
+- Drawing-order placement: pet drawn after weather panel but before station label, or after both.
+- Render hook: extend `clock_screen.c` directly, or add a small `pet_renderer.c` pulled into the same draw loop.
+
+### Sources / Research
+
+- `main/clock_screen.c:16-19` — `CANVAS_W=256`, `CANVAS_H=64`, `TIME_W=128`, `SEP_X=128`. Confirms the right half is shared by weather, temp range, and (currently) a centered station label.
+- `main/clock_screen.c:282-321` — weather, temp, and station label creation / positioning. The pet's bottom-right corner must not collide with the station label's current centered placement.
+- `main/clock_screen.c:37-38, 71-72, 174, 230` — `night_mode` flag drives the dim 7-segment clock and hides the chart. Pet hides under the same flag.
+- `main/ssd1322_driver.h:16-17` — `LCD_H_RES=256`, `LCD_V_RES=64`. Canvas dimensions.
+- `main/lv_conf.h:65` — LVGL animations are disabled. Pet animation must be implemented via manual frame-swap on a timer.
+- `components/esp-audio-player/` — existing MP3/WAV playback infrastructure; provides the music on/off signal R9 needs.
+- `components/shtc3/shtc3.c` and `components/pcf85063/pcf85063.c` — indoor T/RH and RTC sources, on the shared I²C bus. Both signals are already in the active loop.
+- `main/Kconfig.projbuild` — `CONFIG_NIGHT_START_HOUR` / `CONFIG_NIGHT_END_HOUR` define the night-mode window; no new config is needed for the pet's hide/show behavior unless threshold tuning is added later.
\ No newline at end of file

From 0873cc1402fb864cd2ff750afc6328bb9e78923d Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Sun, 12 Jul 2026 22:25:13 +0800
Subject: [PATCH 2/7] docs(plans): resolve 3 outstanding blocking questions in
 pixel pet plan

- R3: station_label truncated to 16 chars (centered)
- R8: indoor temp thresholds 18/26 C; humidity intensifies sweat above 60% RH
- R9: music reactivity scoped to on/off signal, no BPM detection

Unblocks /ce-plan and lfg handoff options.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/2026-07-12-001-feature-pixel-pet-plan.md | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
index 383fc13..ccc9892 100644
--- a/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
+++ b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
@@ -67,7 +67,7 @@ flowchart TB
 
 - R1. The pet occupies a 24×24 pixel region anchored to the bottom-right of the 256×64 clock canvas, with its top-left at approximately `(232, 40)`. The pet region never overlaps or obscures the time digits, the weather text, or the temperature range.
 - R2. The pet renders onto the same LVGL canvas buffer (`canvas_buf` in `main/clock_screen.c`) that already carries clock, weather, and station label, and follows the same draw order rules (after weather panel content, alongside or after station label).
-- R3. The existing `station_label` is repositioned (right-aligned within the bottom row, or shortened in length) so it does not collide with the pet region.
+- R3. The existing `station_label` is shortened to a maximum of 16 characters (truncated with an ellipsis if longer) and remains centered within the bottom row, leaving the rightmost ~32 pixels of that row free for the pet region.
 
 ```mermaid
 flowchart LR
@@ -89,8 +89,8 @@ flowchart LR
 
 - R6. **Shape layer** is driven by time of day: tall posture in active hours, rounder posture approaching wind-down, flat posture near sleep.
 - R7. **Eye-state layer** is driven by time of day and outdoor weather: wide open mid-day, half-lidded in evening, nearly closed near sleep; squinted in bright sun, relaxed in rain, soft in fog.
-- R8. **Surface layer** is driven by outdoor weather and indoor T/RH: smooth under comfortable conditions; one or more small sweat dots in hot or hot/humid; a droplet in rain; tiny dot accents in snow.
-- R9. **Motion layer** is driven by music playback state: idle breathe when no music, gentle bob when music plays, closed-eye soft sway when music has been playing for several seconds.
+- R8. **Surface layer** is driven by outdoor weather and indoor T/RH: smooth under comfortable conditions; one or more small sweat dots when indoor temperature rises above 26 °C (sweat expression) or falls below 18 °C (dryness texture); a droplet in rain; tiny dot accents in snow. Humidity contributes only via the hot branch (sweat dots intensify above 60 % RH) — the cold/dry branch is temperature-driven only.
+- R9. **Motion layer** is driven by music playback state — the simple on/off signal from `audio_player_wrapper`, no BPM or beat detection: idle breathe when no music, gentle bob when music plays, closed-eye soft sway when music has been playing for several seconds.
 
 #### Coherence & transition within a wake cycle
 
@@ -178,11 +178,7 @@ flowchart LR
 
 ### Outstanding Questions
 
-**Resolve Before Planning**
-
-- What threshold values define each layer state? (e.g., what indoor temperature counts as "hot enough for a sweat dot"; what humidity counts as "dry enough for a dryness texture".) Likely defaults: piggyback on existing `CONFIG_SHTC3_TEMP_OFFSET_TENTHS_C` calibration ranges and standard comfortable bands (18–26 °C, 40–60 % RH).
-- Station label: right-align within the bottom row, or shorten length (e.g., truncate to 16 chars)? The pet region needs the rightmost ~32 pixels of the bottom row.
-- Music reactivity: confirm scope is "music on/off" only (no BPM / beat detection). Implied by "pure passive" + "combine all 4 signals simply"; explicit confirmation avoids planning rework.
+*All blocking questions resolved at brainstorm time — see R3, R8, R9 for the resolved values.*
 
 **Deferred to Planning**
 

From 313c81f28a69a8d6da5277628fc2397e5f48d0e5 Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Wed, 15 Jul 2026 09:04:28 +0800
Subject: [PATCH 3/7] docs(plans): add pixel pet HTML simulator for design
 preview

Standalone single-file simulator rendering the pet at 24x24 native
resolution with 16-level grayscale, 8x scaled for visibility.

Controls: shape (time), eyes (time + weather), surface (weather + indoor
T/RH), motion (music on/off), night mode, force-day-at-night.

Presets: 4 scenarios (morning-sunny, rainy-night, hot-afternoon,
snowy-evening). Auto-cycle option. Pixel inspector (click a pixel to
see its L value).

No external dependencies; opens directly in any browser.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/pet-simulator.html | 486 ++++++++++++++++++++++++++++++++++
 1 file changed, 486 insertions(+)
 create mode 100644 docs/plans/pet-simulator.html

diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
new file mode 100644
index 0000000..f85d6b3
--- /dev/null
+++ b/docs/plans/pet-simulator.html
@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>SlumberCube · Pixel Pet Simulator</title>
+<style>
+  :root {
+    --bg: #0a0a0a;
+    --panel: #111;
+    --line: #222;
+    --text: #ccc;
+    --muted: #666;
+    --accent: #4a7aaa;
+    --accent-dim: #1a2a3a;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 24px;
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
+    min-height: 100vh;
+  }
+  h1 {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--muted);
+    margin: 0 0 24px;
+    letter-spacing: 2px;
+  }
+  h1 span { color: var(--accent); }
+  .stage {
+    display: flex;
+    gap: 24px;
+    max-width: 1100px;
+    flex-wrap: wrap;
+  }
+  .preview {
+    flex: 0 0 auto;
+    background: #000;
+    border: 1px solid var(--line);
+    padding: 16px;
+    border-radius: 4px;
+  }
+  .preview-grid {
+    display: grid;
+    gap: 2px;
+    background: #000;
+  }
+  .preview canvas {
+    display: block;
+    background: #000;
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+  }
+  .readout {
+    margin-top: 12px;
+    font-size: 11px;
+    color: var(--muted);
+    text-align: center;
+    min-height: 1.4em;
+  }
+  .controls {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    min-width: 400px;
+  }
+  .panel {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 4px;
+    padding: 12px 14px;
+  }
+  .panel h2 {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--muted);
+    margin: 0 0 10px;
+    font-weight: 500;
+  }
+  .opt-row { display: flex; flex-wrap: wrap; gap: 4px; }
+  .opt {
+    display: inline-block;
+    padding: 5px 9px;
+    background: #1a1a1a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 11px;
+    color: #888;
+    user-select: none;
+    transition: all 0.1s;
+  }
+  .opt:hover { background: #222; color: #aaa; }
+  .opt.active {
+    background: var(--accent-dim);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 6px 0;
+    font-size: 11px;
+    color: #aaa;
+    cursor: pointer;
+  }
+  .toggle input { margin: 0; cursor: pointer; }
+  .presets {
+    grid-column: 1 / -1;
+  }
+  .preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
+  .preset {
+    padding: 7px 12px;
+    background: #1a1a1a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 11px;
+    color: #aaa;
+    user-select: none;
+  }
+  .preset:hover { background: #2a2a2a; color: #fff; }
+  .preset.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
+  .footer {
+    margin-top: 24px;
+    font-size: 10px;
+    color: #444;
+    max-width: 1100px;
+  }
+  .inspector {
+    margin-top: 10px;
+    padding: 8px;
+    background: #0a0a0a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    font-size: 10px;
+    color: var(--muted);
+    min-height: 1.4em;
+    text-align: center;
+  }
+</style>
+</head>
+<body>
+  <h1>SLUMERCUBE / <span>PIXEL PET SIMULATOR</span></h1>
+
+  <div class="stage">
+    <div class="preview">
+      <canvas id="pet" width="192" height="192"></canvas>
+      <div class="readout" id="readout">—</div>
+      <div class="inspector" id="inspector">click a pixel to inspect its level</div>
+    </div>
+
+    <div class="controls">
+      <div class="panel">
+        <h2>Shape (time of day)</h2>
+        <div class="opt-row">
+          <span class="opt" data-shape="tall">tall · active</span>
+          <span class="opt active" data-shape="round">round · mid</span>
+          <span class="opt" data-shape="flat">flat · sleepy</span>
+        </div>
+      </div>
+
+      <div class="panel">
+        <h2>Eyes (time + weather)</h2>
+        <div class="opt-row">
+          <span class="opt active" data-eyes="open">● ● open</span>
+          <span class="opt" data-eyes="half">| | half-lid</span>
+          <span class="opt" data-eyes="closed">‾ ‾ closed</span>
+          <span class="opt" data-eyes="squint">┃ ┃ squint (sun)</span>
+        </div>
+      </div>
+
+      <div class="panel">
+        <h2>Surface (weather + indoor)</h2>
+        <div class="opt-row">
+          <span class="opt active" data-surface="none">none</span>
+          <span class="opt" data-surface="sweat">○ sweat (hot)</span>
+          <span class="opt" data-surface="rain">◇ rain</span>
+          <span class="opt" data-surface="snow">* * snow</span>
+        </div>
+      </div>
+
+      <div class="panel">
+        <h2>Motion (music on/off)</h2>
+        <div class="opt-row">
+          <span class="opt active" data-motion="idle">idle · breathe</span>
+          <span class="opt" data-motion="bob">bob (music on)</span>
+          <span class="opt" data-motion="sway">soft sway (≥5s)</span>
+        </div>
+      </div>
+
+      <div class="panel">
+        <h2>Environment</h2>
+        <label class="toggle"><input type="checkbox" id="night"> Night mode (hides pet)</label>
+        <label class="toggle"><input type="checkbox" id="forceDay"> Force day at night (dim render)</label>
+        <label class="toggle"><input type="checkbox" id="autoCycle"> Auto-cycle presets every 4s</label>
+      </div>
+
+      <div class="panel presets">
+        <h2>Preset scenarios</h2>
+        <div class="preset-row">
+          <span class="preset" data-preset="morning-sunny">07:00 · sunny morning · music</span>
+          <span class="preset" data-preset="rainy-night">23:00 · rainy night</span>
+          <span class="preset" data-preset="hot-afternoon">14:00 · hot indoor</span>
+          <span class="preset" data-preset="snowy-evening">19:00 · snow · music</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    Each canvas pixel = 1 pet pixel. Pet region is 24×24 in device space. Click a pixel to see its grayscale level (0–15).
+  </div>
+
+<script>
+// ============================================================
+//  Pixel Pet Simulator
+//  Renders the pet in 16-level grayscale at 24×24 native resolution.
+//  Each "pet pixel" maps to 8×8 display pixels (canvas 192×192).
+// ============================================================
+
+const PET_W = 24, PET_H = 24;
+const SCALE = 8;
+const canvas = document.getElementById('pet');
+canvas.width = PET_W * SCALE;
+canvas.height = PET_H * SCALE;
+const ctx = canvas.getContext('2d');
+
+// 16-level grayscale: 0..15 → 0..255 RGB
+function gray(level) {
+  const v = Math.round((level / 15) * 255);
+  return `rgb(${v},${v},${v})`;
+}
+
+// ---------- State ----------
+const state = {
+  shape: 'round',
+  eyes: 'open',
+  surface: 'none',
+  motion: 'idle',
+  night: false,
+  forceDay: false,
+};
+
+const presets = {
+  'morning-sunny': { shape: 'tall',  eyes: 'squint', surface: 'none',   motion: 'bob'   },
+  'rainy-night':   { shape: 'flat',  eyes: 'closed', surface: 'rain',   motion: 'idle'  },
+  'hot-afternoon': { shape: 'round', eyes: 'open',   surface: 'sweat',  motion: 'idle'  },
+  'snowy-evening': { shape: 'round', eyes: 'half',   surface: 'snow',   motion: 'bob'   },
+};
+
+// ---------- Shape dims ----------
+function getShapeDims() {
+  switch (state.shape) {
+    case 'tall':  return { w: 16, h: 22 };
+    case 'round': return { w: 22, h: 20 };
+    case 'flat':  return { w: 24, h: 12 };
+  }
+}
+
+// ---------- Body gradient (10..6 from center to edge) ----------
+function bodyLevel(r) {
+  // r: 0 at center, 1 at edge
+  if (r >= 1) return -1;
+  return Math.round(10 - r * 4);
+}
+
+// ---------- Eyes ----------
+// eyeY: vertical position of eye row (0 = top of pet, 1 = bottom)
+// eyeOffsetX: horizontal offset from center, as fraction of bodyW
+function applyEyes(px, drawY, cx, cy, bodyW, bodyH) {
+  const effectiveEyes = state.motion === 'sway' ? 'closed' : state.eyes;
+  const eyeY = cy - bodyH * 0.18;     // slightly above center
+  const eyeOffsetX = bodyW * 0.22;
+  const eyeRadiusX = 0.9, eyeRadiusY = 0.9;
+
+  for (const sign of [-1, 1]) {
+    const ex = cx + sign * eyeOffsetX;
+    const edx = (px + 0.5 - ex) / eyeRadiusX;
+    const edy = (drawY + 0.5 - eyeY) / eyeRadiusY;
+
+    if (effectiveEyes === 'open') {
+      if (edx * edx + edy * edy < 1.0) return 13;
+    } else if (effectiveEyes === 'squint') {
+      // narrower, more vertical
+      if (Math.abs(edx) < 0.5 && Math.abs(edy) < 1.0) return 12;
+    } else if (effectiveEyes === 'half') {
+      // shorter, lower portion only
+      if (edx * edx + edy * edy < 1.0 && edy > -0.2) return 11;
+    } else if (effectiveEyes === 'closed') {
+      // horizontal line
+      if (Math.abs(px + 0.5 - ex) < 0.9 && Math.abs(drawY + 0.5 - eyeY) < 0.3) return 11;
+    }
+  }
+  return null;
+}
+
+// ---------- Surface elements ----------
+function applySurface(px, drawY, cx, cy, bodyW, bodyH) {
+  const dots = [];
+  if (state.surface === 'sweat') {
+    dots.push({ x: cx - bodyW * 0.25, y: cy - bodyH * 0.28, level: 11, r: 0.7 });
+  } else if (state.surface === 'rain') {
+    dots.push({ x: cx + bodyW * 0.10, y: cy + bodyH * 0.40, level: 10, r: 0.8 });
+    dots.push({ x: cx - bodyW * 0.18, y: cy + bodyH * 0.30, level: 9,  r: 0.5 });
+  } else if (state.surface === 'snow') {
+    dots.push({ x: cx - bodyW * 0.30, y: cy - bodyH * 0.10, level: 12, r: 0.5 });
+    dots.push({ x: cx + bodyW * 0.28, y: cy - bodyH * 0.25, level: 12, r: 0.5 });
+    dots.push({ x: cx - bodyW * 0.05, y: cy + bodyH * 0.20, level: 12, r: 0.5 });
+    dots.push({ x: cx + bodyW * 0.15, y: cy + bodyH * 0.05, level: 12, r: 0.4 });
+  }
+  for (const d of dots) {
+    const ddx = (px + 0.5 - d.x) / d.r;
+    const ddy = (drawY + 0.5 - d.y) / d.r;
+    if (ddx * ddx + ddy * ddy < 1.0) return d.level;
+  }
+  return null;
+}
+
+// ---------- Pixel compute ----------
+function computeLevel(px, drawY, cx, cy, bodyW, bodyH) {
+  const dx = (px + 0.5 - cx) / (bodyW / 2);
+  const dy = (drawY + 0.5 - cy) / (bodyH / 2);
+  const r2 = dx * dx + dy * dy;
+  if (r2 >= 1.0) return -1;
+
+  const r = Math.sqrt(r2);
+  let level = bodyLevel(r);
+
+  // Subtle upper-left highlight (level +1)
+  if (dx < -0.3 && dy < -0.3) level += 1;
+
+  // Eyes override
+  const eyeLevel = applyEyes(px, drawY, cx, cy, bodyW, bodyH);
+  if (eyeLevel !== null) level = eyeLevel;
+
+  // Surface overrides body but not eyes
+  const surfaceLevel = applySurface(px, drawY, cx, cy, bodyW, bodyH);
+  if (surfaceLevel !== null && eyeLevel === null) level = surfaceLevel;
+
+  return Math.max(0, Math.min(15, level));
+}
+
+// ---------- Render ----------
+let frame = 0;
+function render() {
+  // Night mode hides pet
+  if (state.night && !state.forceDay) {
+    ctx.fillStyle = '#000';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    return;
+  }
+  const dim = (state.night && state.forceDay) ? 0.45 : 1.0;
+
+  // Motion offsets
+  const motionY =
+    state.motion === 'bob'  ? Math.sin(frame * 0.10) * 1.5 :
+    state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.5 : 0;
+
+  const heightScale =
+    state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.04) * 0.05 : 1.0;
+
+  const { w: bodyW, h: bodyH } = getShapeDims();
+  const drawBodyH = bodyH * heightScale;
+  const cx = PET_W / 2;
+  const cy = PET_H / 2;
+
+  // Clear
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  for (let py = 0; py < PET_H; py++) {
+    for (let px = 0; px < PET_W; px++) {
+      const drawY = py + motionY;
+      const level = computeLevel(px, drawY, cx, cy, bodyW, drawBodyH);
+      if (level < 0) continue;
+      const finalLevel = Math.max(0, Math.min(15, Math.round(level * dim)));
+      ctx.fillStyle = gray(finalLevel);
+      ctx.fillRect(px * SCALE, py * SCALE, SCALE, SCALE);
+    }
+  }
+}
+
+// ---------- Animation loop ----------
+function loop() {
+  render();
+  frame++;
+  requestAnimationFrame(loop);
+}
+
+// ---------- UI ----------
+const readout = document.getElementById('readout');
+const inspector = document.getElementById('inspector');
+
+function updateReadout() {
+  const e = state.motion === 'sway' ? 'closed' : state.eyes;
+  readout.textContent =
+    `shape: ${state.shape} · eyes: ${e} · surface: ${state.surface} · motion: ${state.motion}` +
+    (state.night ? (state.forceDay ? ' · [force day @ dim 0.45]' : ' · [HIDDEN]') : '');
+}
+
+function setState(s) {
+  Object.assign(state, s);
+  refreshActive();
+  updateReadout();
+}
+
+function refreshActive() {
+  document.querySelectorAll('.opt').forEach(el => {
+    el.classList.remove('active');
+    const key = Object.keys(el.dataset)[0];
+    if (state[key] === el.dataset[key]) el.classList.add('active');
+  });
+  document.querySelectorAll('.preset').forEach(el => el.classList.remove('active'));
+}
+
+document.querySelectorAll('.opt').forEach(el => {
+  el.addEventListener('click', () => {
+    const key = Object.keys(el.dataset)[0];
+    state[key] = el.dataset[key];
+    refreshActive();
+    updateReadout();
+  });
+});
+
+document.querySelectorAll('.preset').forEach(el => {
+  el.addEventListener('click', () => {
+    setState(presets[el.dataset.preset]);
+    el.classList.add('active');
+  });
+});
+
+document.getElementById('night').addEventListener('change', e => {
+  state.night = e.target.checked;
+  updateReadout();
+});
+document.getElementById('forceDay').addEventListener('change', e => {
+  state.forceDay = e.target.checked;
+  updateReadout();
+});
+
+// Auto-cycle
+let autoCycleTimer = null;
+document.getElementById('autoCycle').addEventListener('change', e => {
+  if (e.target.checked) {
+    const keys = Object.keys(presets);
+    let i = 0;
+    autoCycleTimer = setInterval(() => {
+      setState(presets[keys[i]]);
+      i = (i + 1) % keys.length;
+    }, 4000);
+  } else {
+    clearInterval(autoCycleTimer);
+    autoCycleTimer = null;
+  }
+});
+
+// Pixel inspector
+canvas.addEventListener('click', (e) => {
+  const rect = canvas.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  const px = Math.floor(x / (rect.width / PET_W));
+  const py = Math.floor(y / (rect.height / PET_H));
+  if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) return;
+
+  const { w: bodyW, h: bodyH } = getShapeDims();
+  const cx = PET_W / 2, cy = PET_H / 2;
+  const motionY = state.motion === 'bob' ? Math.sin(frame * 0.10) * 1.5 : state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.5 : 0;
+  const level = computeLevel(px, py + motionY, cx, cy, bodyW, bodyH);
+  inspector.textContent = level < 0
+    ? `(${px},${py}) background (L 0)`
+    : `(${px},${py}) → L ${level} / 15  (${Math.round(level * 100 / 15)}%)`;
+});
+
+updateReadout();
+requestAnimationFrame(loop);
+</script>
+</body>
+</html>

From 08d1eebbd1d1bf87ee8851d87d180831f7318e55 Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Wed, 15 Jul 2026 09:16:44 +0800
Subject: [PATCH 4/7] feat(simulator): redesign as GBA-style hand-drawn pixel
 pet (small radio)

Replace math-derived ellipse blob with hand-designed 24x24 sprite using
a limited 5-tone GBA palette (outline / shadow / body / light /
highlight). Three body shapes (round/tall/flat) hand-drawn, four eye
overlays (open/half/closed-happy/squint) and four surface overlays
(none/music/rain/snow) applied as pixel-level patches on top of the
base sprite.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/pet-simulator.html | 473 ++++++++++++++++++++++------------
 1 file changed, 314 insertions(+), 159 deletions(-)

diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
index f85d6b3..925525b 100644
--- a/docs/plans/pet-simulator.html
+++ b/docs/plans/pet-simulator.html
@@ -43,11 +43,6 @@
     padding: 16px;
     border-radius: 4px;
   }
-  .preview-grid {
-    display: grid;
-    gap: 2px;
-    background: #000;
-  }
   .preview canvas {
     display: block;
     background: #000;
@@ -93,7 +88,6 @@
     font-size: 11px;
     color: #888;
     user-select: none;
-    transition: all 0.1s;
   }
   .opt:hover { background: #222; color: #aaa; }
   .opt.active {
@@ -111,9 +105,7 @@
     cursor: pointer;
   }
   .toggle input { margin: 0; cursor: pointer; }
-  .presets {
-    grid-column: 1 / -1;
-  }
+  .presets { grid-column: 1 / -1; }
   .preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
   .preset {
     padding: 7px 12px;
@@ -144,21 +136,38 @@
     min-height: 1.4em;
     text-align: center;
   }
+  .sprite-info {
+    margin-top: 8px;
+    padding: 6px 10px;
+    background: #0a0a0a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    font-size: 10px;
+    color: #888;
+    text-align: center;
+  }
+  .sprite-info code {
+    color: #fff;
+    background: #1a1a1a;
+    padding: 1px 4px;
+    border-radius: 2px;
+  }
 </style>
 </head>
 <body>
-  <h1>SLUMERCUBE / <span>PIXEL PET SIMULATOR</span></h1>
+  <h1>SLUMERCUBE / <span>PIXEL PET SIMULATOR · GBA STYLE</span></h1>
 
   <div class="stage">
     <div class="preview">
       <canvas id="pet" width="192" height="192"></canvas>
       <div class="readout" id="readout">—</div>
       <div class="inspector" id="inspector">click a pixel to inspect its level</div>
+      <div class="sprite-info">palette: <code>#</code>L0 outline · <code>%</code>L4 · <code>+</code>L8 · <code>o</code>L11 · <code>O</code>L13 · <code>W</code>L15</div>
     </div>
 
     <div class="controls">
       <div class="panel">
-        <h2>Shape (time of day)</h2>
+        <h2>Body (time of day)</h2>
         <div class="opt-row">
           <span class="opt" data-shape="tall">tall · active</span>
           <span class="opt active" data-shape="round">round · mid</span>
@@ -169,10 +178,10 @@ <h2>Shape (time of day)</h2>
       <div class="panel">
         <h2>Eyes (time + weather)</h2>
         <div class="opt-row">
-          <span class="opt active" data-eyes="open">● ● open</span>
-          <span class="opt" data-eyes="half">| | half-lid</span>
-          <span class="opt" data-eyes="closed">‾ ‾ closed</span>
-          <span class="opt" data-eyes="squint">┃ ┃ squint (sun)</span>
+          <span class="opt active" data-eyes="open">● ● awake</span>
+          <span class="opt" data-eyes="half">- - half-lid</span>
+          <span class="opt" data-eyes="closed">~ ~ happy</span>
+          <span class="opt" data-eyes="squint">× × squint</span>
         </div>
       </div>
 
@@ -180,8 +189,8 @@ <h2>Eyes (time + weather)</h2>
         <h2>Surface (weather + indoor)</h2>
         <div class="opt-row">
           <span class="opt active" data-surface="none">none</span>
-          <span class="opt" data-surface="sweat">○ sweat (hot)</span>
-          <span class="opt" data-surface="rain">◇ rain</span>
+          <span class="opt" data-surface="music">♪ ♪ music on</span>
+          <span class="opt" data-surface="rain">· · rain</span>
           <span class="opt" data-surface="snow">* * snow</span>
         </div>
       </div>
@@ -191,7 +200,7 @@ <h2>Motion (music on/off)</h2>
         <div class="opt-row">
           <span class="opt active" data-motion="idle">idle · breathe</span>
           <span class="opt" data-motion="bob">bob (music on)</span>
-          <span class="opt" data-motion="sway">soft sway (≥5s)</span>
+          <span class="opt" data-motion="sway">soft sway</span>
         </div>
       </div>
 
@@ -220,9 +229,8 @@ <h2>Preset scenarios</h2>
 
 <script>
 // ============================================================
-//  Pixel Pet Simulator
-//  Renders the pet in 16-level grayscale at 24×24 native resolution.
-//  Each "pet pixel" maps to 8×8 display pixels (canvas 192×192).
+//  Pixel Pet Simulator · GBA-style hand-designed sprite
+//  24×24 native, 16-level grayscale, 8× display scale.
 // ============================================================
 
 const PET_W = 24, PET_H = 24;
@@ -232,13 +240,190 @@ <h2>Preset scenarios</h2>
 canvas.height = PET_H * SCALE;
 const ctx = canvas.getContext('2d');
 
-// 16-level grayscale: 0..15 → 0..255 RGB
-function gray(level) {
-  const v = Math.round((level / 15) * 255);
-  return `rgb(${v},${v},${v})`;
-}
+// Palette: 5 main tones + outline (GBA-style limited palette)
+const P = {
+  '.': -1,     // transparent
+  '#': 1,      // outline (very dark)
+  '%': 4,      // body shadow
+  '+': 8,      // body main
+  'o': 11,     // body light
+  'O': 13,     // body highlight
+  'W': 15,     // eye white
+  '@': 1,      // eye pupil (same as outline, just semantically distinct)
+  'M': 2,      // mouth (very dark)
+  '~': 4,      // happy closed eye
+  '-': 2,      // half-lid eye
+  '×': 2,      // squint eye
+  '♪': 14,     // music note
+  '*': 14,     // snowflake
+  '·': 6,      // raindrop
+};
+
+// ============================================================
+//  HAND-DESIGNED SPRITES (24×24 each)
+//  Each character is a fixed pixel — no math derivation.
+// ============================================================
+
+// ROUND body — square-ish with antenna
+const SPRITE_ROUND = `
+................
+................
+.......#.#......
+......#...#.....
+......#...#.....
+......#####.....
+.....##...##....
+....#.......#...
+...#.........#..
+..#...........#.
+..#...........#.
+..#...........#.
+..#...........#.
+..#..#######..#.
+..#.#WWWWW#..#.
+..#.#W@@@W#..#.
+..#.#W@@@W#..#.
+..#.#W@@@W#..#.
+..#.#WWWWW#..#.
+..#..#####..#..
+..#....M....#..
+..#...........#.
+...#.........#..
+....##.....##...
+`;
+
+// TALL body — narrower, taller
+const SPRITE_TALL = `
+................
+................
+.......#.#......
+......#...#.....
+......#...#.....
+......#####.....
+.....##...##....
+....#.......#...
+...#.........#..
+..#...........#.
+..#...........#.
+..#...........#.
+..#...........#.
+..#...........#.
+..#..#####..#...
+..#.#WWW#..#....
+..#.#W@W#..#....
+..#.#W@W#..#....
+..#.#WWW#..#....
+..#..#####..#...
+..#....M....#...
+..#...........#.
+...#.........#..
+....##.....##...
+`;
+
+// FLAT body — wider, shorter
+const SPRITE_FLAT = `
+................
+................
+.....##.#.#.##..
+....#.#...#.#.#.
+.....#####.....
+.....#####.....
+....##.....##...
+...#.........#..
+..#...........#.
+..#...........#.
+..#..#######..#.
+..#.#WWWWW#..#.
+..#.#W@@@W#..#.
+..#.#W@@@W#..#.
+..#.#W@@@W#..#.
+..#.#WWWWW#..#.
+..#..#####..#..
+..#....M....#..
+..#...........#.
+..#...........#.
+...#.........#..
+....##.....##...
+................
+................
+`;
+
+// Eye variants — overlay the eye region of the sprite
+// Eye region is at rows 13-19, cols 4-9 (in the round sprite)
+// We'll just provide pixel patches for the eyes.
+
+// HAPPY CLOSED EYES (~ ~) — replaces the open eyes
+// Position: replaces the eye area (rows 14-19, cols 4-9)
+const EYES_CLOSED = {
+  // (px, py, level) for the round sprite — eyes are at rows 14-19, cols 4-9
+  pixels: [
+    // Left eye ~ curve
+    [4, 16, 4], [4, 17, 4],
+    [5, 17, 4], [6, 17, 4],
+    [7, 16, 4], [7, 17, 4],
+    // Right eye ~ curve
+    [10, 16, 4], [10, 17, 4],
+    [11, 17, 4], [12, 17, 4],
+    [13, 16, 4], [13, 17, 4],
+  ]
+};
+
+// HALF-LID (- -) — flat line across top of eye
+const EYES_HALF = {
+  pixels: [
+    [4, 16, 2], [5, 16, 2], [6, 16, 2], [7, 16, 2],
+    [10, 16, 2], [11, 16, 2], [12, 16, 2], [13, 16, 2],
+  ]
+};
+
+// SQUINT (× ×) — small x shapes
+const EYES_SQUINT = {
+  pixels: [
+    // Left x
+    [4, 15, 2], [7, 15, 2], [5, 16, 2], [6, 16, 2], [4, 17, 2], [7, 17, 2],
+    // Right x
+    [10, 15, 2], [13, 15, 2], [11, 16, 2], [12, 16, 2], [10, 17, 2], [13, 17, 2],
+  ]
+};
+
+// OPEN eyes are part of the base sprite already
+
+// Surface overlays — pixel-level additions
+const SURFACE_MUSIC = {
+  // Two music notes floating above
+  pixels: [
+    [4, 1, 14], [5, 1, 14], [4, 2, 14], [5, 2, 14], [6, 0, 14],
+    [12, 1, 14], [13, 1, 14], [12, 2, 14], [13, 2, 14], [14, 0, 14],
+  ]
+};
+
+const SURFACE_RAIN = {
+  // Drops around the body
+  pixels: [
+    [1, 8, 6], [1, 9, 6],
+    [22, 10, 6], [22, 11, 6],
+    [0, 18, 6], [23, 18, 6],
+    [1, 22, 6], [22, 22, 6],
+  ]
+};
+
+const SURFACE_SNOW = {
+  // Snowflakes around
+  pixels: [
+    [1, 6, 14], [1, 7, 14],
+    [22, 8, 14],
+    [0, 14, 14],
+    [23, 15, 14],
+    [2, 19, 14],
+    [21, 20, 14],
+    [1, 22, 14], [22, 22, 14],
+  ]
+};
+
+// ============================================================
+//  State
+// ============================================================
 
-// ---------- State ----------
 const state = {
   shape: 'round',
   eyes: 'open',
@@ -249,160 +434,129 @@ <h2>Preset scenarios</h2>
 };
 
 const presets = {
-  'morning-sunny': { shape: 'tall',  eyes: 'squint', surface: 'none',   motion: 'bob'   },
-  'rainy-night':   { shape: 'flat',  eyes: 'closed', surface: 'rain',   motion: 'idle'  },
-  'hot-afternoon': { shape: 'round', eyes: 'open',   surface: 'sweat',  motion: 'idle'  },
-  'snowy-evening': { shape: 'round', eyes: 'half',   surface: 'snow',   motion: 'bob'   },
+  'morning-sunny': { shape: 'tall',  eyes: 'squint', surface: 'music', motion: 'bob'   },
+  'rainy-night':   { shape: 'flat',  eyes: 'closed', surface: 'rain',  motion: 'idle'  },
+  'hot-afternoon': { shape: 'round', eyes: 'half',   surface: 'none',  motion: 'idle'  },
+  'snowy-evening': { shape: 'round', eyes: 'half',   surface: 'snow',  motion: 'bob'   },
 };
 
-// ---------- Shape dims ----------
-function getShapeDims() {
-  switch (state.shape) {
-    case 'tall':  return { w: 16, h: 22 };
-    case 'round': return { w: 22, h: 20 };
-    case 'flat':  return { w: 24, h: 12 };
-  }
-}
-
-// ---------- Body gradient (10..6 from center to edge) ----------
-function bodyLevel(r) {
-  // r: 0 at center, 1 at edge
-  if (r >= 1) return -1;
-  return Math.round(10 - r * 4);
-}
+// ============================================================
+//  Sprite parsing & rendering
+// ============================================================
 
-// ---------- Eyes ----------
-// eyeY: vertical position of eye row (0 = top of pet, 1 = bottom)
-// eyeOffsetX: horizontal offset from center, as fraction of bodyW
-function applyEyes(px, drawY, cx, cy, bodyW, bodyH) {
-  const effectiveEyes = state.motion === 'sway' ? 'closed' : state.eyes;
-  const eyeY = cy - bodyH * 0.18;     // slightly above center
-  const eyeOffsetX = bodyW * 0.22;
-  const eyeRadiusX = 0.9, eyeRadiusY = 0.9;
-
-  for (const sign of [-1, 1]) {
-    const ex = cx + sign * eyeOffsetX;
-    const edx = (px + 0.5 - ex) / eyeRadiusX;
-    const edy = (drawY + 0.5 - eyeY) / eyeRadiusY;
-
-    if (effectiveEyes === 'open') {
-      if (edx * edx + edy * edy < 1.0) return 13;
-    } else if (effectiveEyes === 'squint') {
-      // narrower, more vertical
-      if (Math.abs(edx) < 0.5 && Math.abs(edy) < 1.0) return 12;
-    } else if (effectiveEyes === 'half') {
-      // shorter, lower portion only
-      if (edx * edx + edy * edy < 1.0 && edy > -0.2) return 11;
-    } else if (effectiveEyes === 'closed') {
-      // horizontal line
-      if (Math.abs(px + 0.5 - ex) < 0.9 && Math.abs(drawY + 0.5 - eyeY) < 0.3) return 11;
+function parseSprite(s) {
+  const rows = s.trim().split('\n');
+  const pixels = {};
+  let h = 0;
+  for (let y = 0; y < rows.length; y++) {
+    h = y + 1;
+    for (let x = 0; x < rows[y].length; x++) {
+      const ch = rows[y][x];
+      if (ch in P && P[ch] >= 0) {
+        pixels[`${x},${y}`] = P[ch];
+      }
     }
   }
-  return null;
+  return { pixels, w: PET_W, h };
 }
 
-// ---------- Surface elements ----------
-function applySurface(px, drawY, cx, cy, bodyW, bodyH) {
-  const dots = [];
-  if (state.surface === 'sweat') {
-    dots.push({ x: cx - bodyW * 0.25, y: cy - bodyH * 0.28, level: 11, r: 0.7 });
-  } else if (state.surface === 'rain') {
-    dots.push({ x: cx + bodyW * 0.10, y: cy + bodyH * 0.40, level: 10, r: 0.8 });
-    dots.push({ x: cx - bodyW * 0.18, y: cy + bodyH * 0.30, level: 9,  r: 0.5 });
-  } else if (state.surface === 'snow') {
-    dots.push({ x: cx - bodyW * 0.30, y: cy - bodyH * 0.10, level: 12, r: 0.5 });
-    dots.push({ x: cx + bodyW * 0.28, y: cy - bodyH * 0.25, level: 12, r: 0.5 });
-    dots.push({ x: cx - bodyW * 0.05, y: cy + bodyH * 0.20, level: 12, r: 0.5 });
-    dots.push({ x: cx + bodyW * 0.15, y: cy + bodyH * 0.05, level: 12, r: 0.4 });
-  }
-  for (const d of dots) {
-    const ddx = (px + 0.5 - d.x) / d.r;
-    const ddy = (drawY + 0.5 - d.y) / d.r;
-    if (ddx * ddx + ddy * ddy < 1.0) return d.level;
-  }
-  return null;
-}
+const SPRITES = {
+  round: parseSprite(SPRITE_ROUND),
+  tall:  parseSprite(SPRITE_TALL),
+  flat:  parseSprite(SPRITE_FLAT),
+};
 
-// ---------- Pixel compute ----------
-function computeLevel(px, drawY, cx, cy, bodyW, bodyH) {
-  const dx = (px + 0.5 - cx) / (bodyW / 2);
-  const dy = (drawY + 0.5 - cy) / (bodyH / 2);
-  const r2 = dx * dx + dy * dy;
-  if (r2 >= 1.0) return -1;
+function getOverlay(eyes, surface) {
+  const px = [];
+  if (eyes === 'closed') px.push(...EYES_CLOSED.pixels);
+  else if (eyes === 'half') px.push(...EYES_HALF.pixels);
+  else if (eyes === 'squint') px.push(...EYES_SQUINT.pixels);
 
-  const r = Math.sqrt(r2);
-  let level = bodyLevel(r);
+  if (surface === 'music') px.push(...SURFACE_MUSIC.pixels);
+  else if (surface === 'rain') px.push(...SURFACE_RAIN.pixels);
+  else if (surface === 'snow') px.push(...SURFACE_SNOW.pixels);
 
-  // Subtle upper-left highlight (level +1)
-  if (dx < -0.3 && dy < -0.3) level += 1;
+  return px;
+}
 
-  // Eyes override
-  const eyeLevel = applyEyes(px, drawY, cx, cy, bodyW, bodyH);
-  if (eyeLevel !== null) level = eyeLevel;
+function render(frame) {
+  // Clear
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-  // Surface overrides body but not eyes
-  const surfaceLevel = applySurface(px, drawY, cx, cy, bodyW, bodyH);
-  if (surfaceLevel !== null && eyeLevel === null) level = surfaceLevel;
+  if (state.night && !state.forceDay) return;
+  const dim = (state.night && state.forceDay) ? 0.5 : 1.0;
 
-  return Math.max(0, Math.min(15, level));
-}
+  // Motion: bob (vertical translate)
+  const motionY = state.motion === 'bob' ? Math.sin(frame * 0.10) * 1.5
+                : state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.8
+                : 0;
 
-// ---------- Render ----------
-let frame = 0;
-function render() {
-  // Night mode hides pet
-  if (state.night && !state.forceDay) {
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    return;
-  }
-  const dim = (state.night && state.forceDay) ? 0.45 : 1.0;
+  // Idle breathe: scale Y around center
+  const breath = state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.05) * 0.05 : 1.0;
 
-  // Motion offsets
-  const motionY =
-    state.motion === 'bob'  ? Math.sin(frame * 0.10) * 1.5 :
-    state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.5 : 0;
+  // Pick sprite
+  const sprite = SPRITES[state.shape];
+  const cy = (PET_H - 1) / 2;
 
-  const heightScale =
-    state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.04) * 0.05 : 1.0;
+  // Build pixel map
+  const map = {};
 
-  const { w: bodyW, h: bodyH } = getShapeDims();
-  const drawBodyH = bodyH * heightScale;
-  const cx = PET_W / 2;
-  const cy = PET_H / 2;
+  // Apply base sprite with breathe transform
+  for (const key in sprite.pixels) {
+    const [x, y] = key.split(',').map(Number);
+    const relY = y - cy;
+    const newY = Math.round(cy + relY * breath);
+    if (newY < 0 || newY >= PET_H) continue;
+    map[`${x},${newY}`] = sprite.pixels[key];
+  }
 
-  // Clear
-  ctx.fillStyle = '#000';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  // Apply overlays (eyes, surface)
+  for (const [x, y, level] of getOverlay(state.eyes, state.surface)) {
+    if (y < 0 || y >= PET_H) continue;
+    map[`${x},${Math.round(y)}`] = level;
+  }
 
-  for (let py = 0; py < PET_H; py++) {
-    for (let px = 0; px < PET_W; px++) {
-      const drawY = py + motionY;
-      const level = computeLevel(px, drawY, cx, cy, bodyW, drawBodyH);
-      if (level < 0) continue;
-      const finalLevel = Math.max(0, Math.min(15, Math.round(level * dim)));
-      ctx.fillStyle = gray(finalLevel);
-      ctx.fillRect(px * SCALE, py * SCALE, SCALE, SCALE);
-    }
+  // Draw with motion offset
+  for (const key in map) {
+    const [x, y] = key.split(',').map(Number);
+    const drawY = y + motionY;
+    const px = Math.round(x);
+    const py = Math.round(drawY);
+    if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) continue;
+    const level = Math.max(0, Math.min(15, Math.round(map[key] * dim)));
+    ctx.fillStyle = gray(level);
+    ctx.fillRect(px * SCALE, py * SCALE, SCALE, SCALE);
   }
 }
 
-// ---------- Animation loop ----------
+function gray(level) {
+  const v = Math.round((level / 15) * 255);
+  return `rgb(${v},${v},${v})`;
+}
+
+// ============================================================
+//  Animation loop
+// ============================================================
+
+let frame = 0;
 function loop() {
-  render();
+  render(frame);
   frame++;
   requestAnimationFrame(loop);
 }
 
-// ---------- UI ----------
+// ============================================================
+//  UI
+// ============================================================
+
 const readout = document.getElementById('readout');
 const inspector = document.getElementById('inspector');
 
 function updateReadout() {
-  const e = state.motion === 'sway' ? 'closed' : state.eyes;
   readout.textContent =
-    `shape: ${state.shape} · eyes: ${e} · surface: ${state.surface} · motion: ${state.motion}` +
-    (state.night ? (state.forceDay ? ' · [force day @ dim 0.45]' : ' · [HIDDEN]') : '');
+    `body: ${state.shape} · eyes: ${state.eyes} · surface: ${state.surface} · motion: ${state.motion}` +
+    (state.night ? (state.forceDay ? ' · [force day @ 0.5]' : ' · [HIDDEN]') : '');
 }
 
 function setState(s) {
@@ -445,7 +599,6 @@ <h2>Preset scenarios</h2>
   updateReadout();
 });
 
-// Auto-cycle
 let autoCycleTimer = null;
 document.getElementById('autoCycle').addEventListener('change', e => {
   if (e.target.checked) {
@@ -468,15 +621,17 @@ <h2>Preset scenarios</h2>
   const y = e.clientY - rect.top;
   const px = Math.floor(x / (rect.width / PET_W));
   const py = Math.floor(y / (rect.height / PET_H));
-  if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) return;
-
-  const { w: bodyW, h: bodyH } = getShapeDims();
-  const cx = PET_W / 2, cy = PET_H / 2;
-  const motionY = state.motion === 'bob' ? Math.sin(frame * 0.10) * 1.5 : state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.5 : 0;
-  const level = computeLevel(px, py + motionY, cx, cy, bodyW, bodyH);
-  inspector.textContent = level < 0
-    ? `(${px},${py}) background (L 0)`
-    : `(${px},${py}) → L ${level} / 15  (${Math.round(level * 100 / 15)}%)`;
+  if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) {
+    inspector.textContent = `(${px},${py}) out of bounds`;
+    return;
+  }
+  const sprite = SPRITES[state.shape];
+  const level = sprite.pixels[`${px},${py}`];
+  const overlay = getOverlay(state.eyes, state.surface).find(([x, y]) => x === px && y === py);
+  const finalLevel = overlay ? overlay[2] : level;
+  inspector.textContent = finalLevel !== undefined
+    ? `(${px},${py}) → L ${finalLevel} / 15  (${Math.round(finalLevel * 100 / 15)}%)`
+    : `(${px},${py}) background (L 0)`;
 });
 
 updateReadout();

From cfe7b9d1e6b3934fde9a809766d3bedd1eb7dfdb Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Wed, 15 Jul 2026 09:25:06 +0800
Subject: [PATCH 5/7] feat(simulator): 4 hand-designed GBA-style pet designs in
 a side-by-side gallery

Four distinct silhouettes for direct comparison:
- A: vintage transistor radio (antenna + speaker holes)
- B: bluetooth capsule speaker (mesh grille + LED)
- C: pocket creature (round + ears + anime eyes)
- D: GBA bot (square + 2 antenna + screen)

Same state controls all four simultaneously. Each design has its own
hand-drawn 24x24 sprite with the same 6-tone GBA palette. Overlays
(eyes, surface decorations) are applied per-design with their own
eye-region coordinates.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/pet-simulator.html | 786 ++++++++++++++++++----------------
 1 file changed, 406 insertions(+), 380 deletions(-)

diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
index 925525b..a19ff46 100644
--- a/docs/plans/pet-simulator.html
+++ b/docs/plans/pet-simulator.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>SlumberCube · Pixel Pet Simulator</title>
+<title>SlumberCube · Pixel Pet Simulator (4 Designs)</title>
 <style>
   :root {
     --bg: #0a0a0a;
@@ -26,66 +26,86 @@
     font-size: 13px;
     font-weight: 500;
     color: var(--muted);
-    margin: 0 0 24px;
+    margin: 0 0 4px;
     letter-spacing: 2px;
   }
   h1 span { color: var(--accent); }
-  .stage {
-    display: flex;
-    gap: 24px;
+  .subtitle {
+    font-size: 11px;
+    color: #444;
+    margin-bottom: 24px;
+  }
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
     max-width: 1100px;
-    flex-wrap: wrap;
+    margin-bottom: 24px;
   }
-  .preview {
-    flex: 0 0 auto;
+  .pet-card {
     background: #000;
     border: 1px solid var(--line);
-    padding: 16px;
+    padding: 12px;
     border-radius: 4px;
+    text-align: center;
   }
-  .preview canvas {
+  .pet-card canvas {
     display: block;
     background: #000;
     image-rendering: pixelated;
     image-rendering: crisp-edges;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
   }
-  .readout {
-    margin-top: 12px;
+  .pet-name {
+    margin-top: 8px;
     font-size: 11px;
-    color: var(--muted);
-    text-align: center;
+    color: #fff;
+    letter-spacing: 1px;
+  }
+  .pet-desc {
+    margin-top: 2px;
+    font-size: 9px;
+    color: #666;
+  }
+  .readout {
+    margin-top: 8px;
+    padding: 4px;
+    font-size: 10px;
+    color: #888;
     min-height: 1.4em;
   }
   .controls {
-    flex: 1;
+    max-width: 1100px;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 12px;
-    min-width: 400px;
+    margin-bottom: 12px;
   }
   .panel {
     background: var(--panel);
     border: 1px solid var(--line);
     border-radius: 4px;
-    padding: 12px 14px;
+    padding: 10px 12px;
   }
   .panel h2 {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--muted);
-    margin: 0 0 10px;
+    margin: 0 0 8px;
     font-weight: 500;
   }
   .opt-row { display: flex; flex-wrap: wrap; gap: 4px; }
   .opt {
     display: inline-block;
-    padding: 5px 9px;
+    padding: 4px 7px;
     background: #1a1a1a;
     border: 1px solid var(--line);
     border-radius: 3px;
     cursor: pointer;
-    font-size: 11px;
+    font-size: 10px;
     color: #888;
     user-select: none;
   }
@@ -98,36 +118,41 @@
   .toggle {
     display: flex;
     align-items: center;
-    gap: 8px;
-    margin: 6px 0;
-    font-size: 11px;
+    gap: 6px;
+    margin: 4px 0;
+    font-size: 10px;
     color: #aaa;
     cursor: pointer;
   }
   .toggle input { margin: 0; cursor: pointer; }
-  .presets { grid-column: 1 / -1; }
-  .preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
+  .presets-row {
+    max-width: 1100px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+  }
   .preset {
-    padding: 7px 12px;
+    padding: 6px 10px;
     background: #1a1a1a;
     border: 1px solid var(--line);
     border-radius: 3px;
     cursor: pointer;
-    font-size: 11px;
+    font-size: 10px;
     color: #aaa;
     user-select: none;
   }
   .preset:hover { background: #2a2a2a; color: #fff; }
   .preset.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
   .footer {
-    margin-top: 24px;
+    margin-top: 16px;
     font-size: 10px;
     color: #444;
     max-width: 1100px;
   }
   .inspector {
-    margin-top: 10px;
-    padding: 8px;
+    margin-top: 8px;
+    padding: 6px;
     background: #0a0a0a;
     border: 1px solid var(--line);
     border-radius: 3px;
@@ -136,296 +161,347 @@
     min-height: 1.4em;
     text-align: center;
   }
-  .sprite-info {
-    margin-top: 8px;
-    padding: 6px 10px;
-    background: #0a0a0a;
-    border: 1px solid var(--line);
-    border-radius: 3px;
-    font-size: 10px;
-    color: #888;
+  .legend {
+    font-size: 9px;
+    color: #555;
     text-align: center;
+    margin-top: 6px;
   }
-  .sprite-info code {
-    color: #fff;
+  .legend code {
     background: #1a1a1a;
-    padding: 1px 4px;
+    padding: 1px 3px;
     border-radius: 2px;
+    color: #aaa;
   }
 </style>
 </head>
 <body>
-  <h1>SLUMERCUBE / <span>PIXEL PET SIMULATOR · GBA STYLE</span></h1>
-
-  <div class="stage">
-    <div class="preview">
-      <canvas id="pet" width="192" height="192"></canvas>
-      <div class="readout" id="readout">—</div>
-      <div class="inspector" id="inspector">click a pixel to inspect its level</div>
-      <div class="sprite-info">palette: <code>#</code>L0 outline · <code>%</code>L4 · <code>+</code>L8 · <code>o</code>L11 · <code>O</code>L13 · <code>W</code>L15</div>
+  <h1>SLUMERCUBE / <span>PIXEL PET · 4 DESIGNS</span></h1>
+  <div class="subtitle">Same state applied to all four designs. Pick the silhouette you like.</div>
+
+  <div class="gallery">
+    <div class="pet-card">
+      <canvas id="petA" width="192" height="192"></canvas>
+      <div class="pet-name">A · 复古晶体管收音机</div>
+      <div class="pet-desc">vintage transistor radio</div>
+      <div class="readout" id="readoutA">—</div>
     </div>
+    <div class="pet-card">
+      <canvas id="petB" width="192" height="192"></canvas>
+      <div class="pet-name">B · 蓝牙胶囊音箱</div>
+      <div class="pet-desc">bluetooth capsule speaker</div>
+      <div class="readout" id="readoutB">—</div>
+    </div>
+    <div class="pet-card">
+      <canvas id="petC" width="192" height="192"></canvas>
+      <div class="pet-name">C · 像素小怪兽</div>
+      <div class="pet-desc">GBA-style pocket creature</div>
+      <div class="readout" id="readoutC">—</div>
+    </div>
+    <div class="pet-card">
+      <canvas id="petD" width="192" height="192"></canvas>
+      <div class="pet-name">D · GBA 机器人</div>
+      <div class="pet-desc">GBA-style bot</div>
+      <div class="readout" id="readoutD">—</div>
+    </div>
+  </div>
 
-    <div class="controls">
-      <div class="panel">
-        <h2>Body (time of day)</h2>
-        <div class="opt-row">
-          <span class="opt" data-shape="tall">tall · active</span>
-          <span class="opt active" data-shape="round">round · mid</span>
-          <span class="opt" data-shape="flat">flat · sleepy</span>
-        </div>
-      </div>
-
-      <div class="panel">
-        <h2>Eyes (time + weather)</h2>
-        <div class="opt-row">
-          <span class="opt active" data-eyes="open">● ● awake</span>
-          <span class="opt" data-eyes="half">- - half-lid</span>
-          <span class="opt" data-eyes="closed">~ ~ happy</span>
-          <span class="opt" data-eyes="squint">× × squint</span>
-        </div>
-      </div>
-
-      <div class="panel">
-        <h2>Surface (weather + indoor)</h2>
-        <div class="opt-row">
-          <span class="opt active" data-surface="none">none</span>
-          <span class="opt" data-surface="music">♪ ♪ music on</span>
-          <span class="opt" data-surface="rain">· · rain</span>
-          <span class="opt" data-surface="snow">* * snow</span>
-        </div>
-      </div>
-
-      <div class="panel">
-        <h2>Motion (music on/off)</h2>
-        <div class="opt-row">
-          <span class="opt active" data-motion="idle">idle · breathe</span>
-          <span class="opt" data-motion="bob">bob (music on)</span>
-          <span class="opt" data-motion="sway">soft sway</span>
-        </div>
+  <div class="controls">
+    <div class="panel">
+      <h2>Eyes</h2>
+      <div class="opt-row">
+        <span class="opt active" data-eyes="open">● ● awake</span>
+        <span class="opt" data-eyes="half">- - half</span>
+        <span class="opt" data-eyes="closed">~ ~ happy</span>
+        <span class="opt" data-eyes="squint">× × squint</span>
       </div>
-
-      <div class="panel">
-        <h2>Environment</h2>
-        <label class="toggle"><input type="checkbox" id="night"> Night mode (hides pet)</label>
-        <label class="toggle"><input type="checkbox" id="forceDay"> Force day at night (dim render)</label>
-        <label class="toggle"><input type="checkbox" id="autoCycle"> Auto-cycle presets every 4s</label>
+    </div>
+    <div class="panel">
+      <h2>Surface</h2>
+      <div class="opt-row">
+        <span class="opt active" data-surface="none">none</span>
+        <span class="opt" data-surface="music">♪ ♪ music</span>
+        <span class="opt" data-surface="rain">· · rain</span>
+        <span class="opt" data-surface="snow">* * snow</span>
       </div>
-
-      <div class="panel presets">
-        <h2>Preset scenarios</h2>
-        <div class="preset-row">
-          <span class="preset" data-preset="morning-sunny">07:00 · sunny morning · music</span>
-          <span class="preset" data-preset="rainy-night">23:00 · rainy night</span>
-          <span class="preset" data-preset="hot-afternoon">14:00 · hot indoor</span>
-          <span class="preset" data-preset="snowy-evening">19:00 · snow · music</span>
-        </div>
+    </div>
+    <div class="panel">
+      <h2>Motion</h2>
+      <div class="opt-row">
+        <span class="opt active" data-motion="idle">idle · breathe</span>
+        <span class="opt" data-motion="bob">bob (music)</span>
+        <span class="opt" data-motion="sway">soft sway</span>
       </div>
     </div>
+    <div class="panel">
+      <h2>Environment</h2>
+      <label class="toggle"><input type="checkbox" id="night"> Night (hide)</label>
+      <label class="toggle"><input type="checkbox" id="forceDay"> Force day (dim)</label>
+      <label class="toggle"><input type="checkbox" id="autoCycle"> Auto-cycle 4s</label>
+    </div>
   </div>
 
-  <div class="footer">
-    Each canvas pixel = 1 pet pixel. Pet region is 24×24 in device space. Click a pixel to see its grayscale level (0–15).
+  <div class="presets-row">
+    <span class="preset" data-preset="morning-sunny">07:00 · sunny · music</span>
+    <span class="preset" data-preset="rainy-night">23:00 · rainy night</span>
+    <span class="preset" data-preset="hot-afternoon">14:00 · hot indoor</span>
+    <span class="preset" data-preset="snowy-evening">19:00 · snow · music</span>
   </div>
 
+  <div class="inspector" id="inspector">click any pixel across the 4 designs to inspect its level</div>
+  <div class="legend">palette: <code>#</code>L1 outline · <code>%</code>L4 · <code>+</code>L8 · <code>o</code>L11 · <code>O</code>L13 · <code>W</code>L15</div>
+
 <script>
 // ============================================================
-//  Pixel Pet Simulator · GBA-style hand-designed sprite
-//  24×24 native, 16-level grayscale, 8× display scale.
+//  4-Design Pixel Pet Simulator
+//  Each design has its own hand-drawn 24×24 sprite. Same state.
 // ============================================================
 
 const PET_W = 24, PET_H = 24;
 const SCALE = 8;
-const canvas = document.getElementById('pet');
-canvas.width = PET_W * SCALE;
-canvas.height = PET_H * SCALE;
-const ctx = canvas.getContext('2d');
 
-// Palette: 5 main tones + outline (GBA-style limited palette)
+const canvases = {
+  A: document.getElementById('petA'),
+  B: document.getElementById('petB'),
+  C: document.getElementById('petC'),
+  D: document.getElementById('petD'),
+};
+const ctxs = {};
+for (const k in canvases) {
+  canvases[k].width = PET_W * SCALE;
+  canvases[k].height = PET_H * SCALE;
+  ctxs[k] = canvases[k].getContext('2d');
+}
+
+// Palette
 const P = {
-  '.': -1,     // transparent
-  '#': 1,      // outline (very dark)
-  '%': 4,      // body shadow
-  '+': 8,      // body main
-  'o': 11,     // body light
-  'O': 13,     // body highlight
-  'W': 15,     // eye white
-  '@': 1,      // eye pupil (same as outline, just semantically distinct)
-  'M': 2,      // mouth (very dark)
-  '~': 4,      // happy closed eye
-  '-': 2,      // half-lid eye
-  '×': 2,      // squint eye
-  '♪': 14,     // music note
-  '*': 14,     // snowflake
-  '·': 6,      // raindrop
+  '.': -1, '#': 1, '%': 4, '+': 8, 'o': 11, 'O': 13, 'W': 15,
+  '@': 1, 'M': 2, '~': 4, '-': 2, '×': 2,
+  '♪': 14, '*': 14, '·': 6,
 };
 
+function gray(level) {
+  const v = Math.round((level / 15) * 255);
+  return `rgb(${v},${v},${v})`;
+}
+
 // ============================================================
-//  HAND-DESIGNED SPRITES (24×24 each)
-//  Each character is a fixed pixel — no math derivation.
+//  4 hand-designed sprites (24×24)
 // ============================================================
 
-// ROUND body — square-ish with antenna
-const SPRITE_ROUND = `
+// ── A. Vintage Transistor Radio ──
+// Tall, antenna, 2 large round speaker holes = eyes, dial on top
+const SPRITE_A = `
 ................
-................
-.......#.#......
-......#...#.....
-......#...#.....
-......#####.....
-.....##...##....
-....#.......#...
-...#.........#..
-..#...........#.
-..#...........#.
-..#...........#.
-..#...........#.
-..#..#######..#.
-..#.#WWWWW#..#.
-..#.#W@@@W#..#.
-..#.#W@@@W#..#.
-..#.#W@@@W#..#.
-..#.#WWWWW#..#.
-..#..#####..#..
-..#....M....#..
-..#...........#.
-...#.........#..
-....##.....##...
+............#.#..
+.......#...#..#..
+.......#####..#..
+......##...##....
+.....#ooooooo#...
+....#ooooooooo#..
+...#ooooooooooo#.
+..#ooooooooooooo#
+..#oo########oo#.
+..#o#WW......WW#o
+..#o#W@W....W@W#o
+..#o#W@W....W@W#o
+..#o#W@W....W@W#o
+..#o#WW......WW#o
+..#oo########oo#.
+..#ooooo..ooooo#.
+..#oooooMMooooo#.
+..#ooooooooooooo#
+..#oooooooooooo#.
+...#oooooooooo#..
+....#oooooooo#...
+.....#oooooo#....
+......#######....
 `;
 
-// TALL body — narrower, taller
-const SPRITE_TALL = `
+// ── B. Bluetooth Capsule Speaker ──
+// Wide, no antenna, mesh grille, LED indicator
+const SPRITE_B = `
 ................
 ................
-.......#.#......
-......#...#.....
-......#...#.....
-......#####.....
-.....##...##....
-....#.......#...
-...#.........#..
-..#...........#.
-..#...........#.
-..#...........#.
-..#...........#.
-..#...........#.
-..#..#####..#...
-..#.#WWW#..#....
-..#.#W@W#..#....
-..#.#W@W#..#....
-..#.#WWW#..#....
-..#..#####..#...
-..#....M....#...
-..#...........#.
-...#.........#..
-....##.....##...
-`;
-
-// FLAT body — wider, shorter
-const SPRITE_FLAT = `
 ................
+..############..
+.#oooooooooooo#.
+#ooooooooooooooo#
+#ooooooooooooooo#
+#oo############o#
+#oo#WWWWWWWWWW#o#
+#oo#W@@@@@@@@@W#o
+#oo#W@@@@@@@@@W#o
+#oo#W@@@@@@@@@W#o
+#oo#W@@@@@@@@@W#o
+#oo#WWWWWWWWWW#o#
+#oo############o#
+#oo#o#o#o#o#o#o#
+#ooooooooooooooo#
+#ooooooooooooooo#
+.#oooooooooooo#.
+..############..
 ................
-.....##.#.#.##..
-....#.#...#.#.#.
-.....#####.....
-.....#####.....
-....##.....##...
-...#.........#..
-..#...........#.
-..#...........#.
-..#..#######..#.
-..#.#WWWWW#..#.
-..#.#W@@@W#..#.
-..#.#W@@@W#..#.
-..#.#W@@@W#..#.
-..#.#WWWWW#..#.
-..#..#####..#..
-..#....M....#..
-..#...........#.
-..#...........#.
-...#.........#..
-....##.....##...
 ................
 ................
-`;
+................`;
 
-// Eye variants — overlay the eye region of the sprite
-// Eye region is at rows 13-19, cols 4-9 (in the round sprite)
-// We'll just provide pixel patches for the eyes.
-
-// HAPPY CLOSED EYES (~ ~) — replaces the open eyes
-// Position: replaces the eye area (rows 14-19, cols 4-9)
-const EYES_CLOSED = {
-  // (px, py, level) for the round sprite — eyes are at rows 14-19, cols 4-9
-  pixels: [
-    // Left eye ~ curve
-    [4, 16, 4], [4, 17, 4],
-    [5, 17, 4], [6, 17, 4],
-    [7, 16, 4], [7, 17, 4],
-    // Right eye ~ curve
-    [10, 16, 4], [10, 17, 4],
-    [11, 17, 4], [12, 17, 4],
-    [13, 16, 4], [13, 17, 4],
-  ]
-};
+// ── C. Pixel Creature (Tamagotchi / Pokemon-like) ──
+// Round body, 2 pointy ears, big anime eyes
+const SPRITE_C = `
+................
+.....##....##...
+....#..#..#..#..
+....#..#..#..#..
+.....#....#.....
+....#......#....
+...#........#...
+..#..........#..
+.#............#.
+.#............#.
+#..##......##..#
+#.#WW#....#WW#.#
+#.#W@#....#W@#.#
+#.#W@#....#W@#.#
+#.#W@#....#W@#.#
+#.#WW#....#WW#.#
+#..##......##..#
+#......MMM......#
+#..............#
+.#............#.
+.#............#.
+..#..........#..
+...#........#...
+....##....##....
+`;
 
-// HALF-LID (- -) — flat line across top of eye
-const EYES_HALF = {
-  pixels: [
-    [4, 16, 2], [5, 16, 2], [6, 16, 2], [7, 16, 2],
-    [10, 16, 2], [11, 16, 2], [12, 16, 2], [13, 16, 2],
-  ]
-};
+// ── D. GBA Robot ──
+// Square body, 2 antenna, LED mouth, screen eyes
+const SPRITE_D = `
+................
+......#.#.#.#....
+......#.#.#.#....
+......##.#.##....
+.....##.....##...
+....#.........#..
+....#.........#..
+...#...........#.
+.##...........##.
+.#.............#.
+#...............#
+#.##.........##.#
+#.#WW.......WW#.#
+#.#W@.......W@#.#
+#.#W@.......W@#.#
+#.#W@.......W@#.#
+#.#WW.......WW#.#
+#.##.........##.#
+#....#######....#
+#....#ooooo#....#
+#....#oMMMo#....#
+#....#ooooo#....#
+.#.............#.
+.##...........##.
+`;
 
-// SQUINT (× ×) — small x shapes
-const EYES_SQUINT = {
-  pixels: [
-    // Left x
-    [4, 15, 2], [7, 15, 2], [5, 16, 2], [6, 16, 2], [4, 17, 2], [7, 17, 2],
-    // Right x
-    [10, 15, 2], [13, 15, 2], [11, 16, 2], [12, 16, 2], [10, 17, 2], [13, 17, 2],
-  ]
-};
+// ============================================================
+//  Parsing
+// ============================================================
 
-// OPEN eyes are part of the base sprite already
+function parseSprite(s) {
+  const rows = s.trim().split('\n');
+  const pixels = [];
+  for (let y = 0; y < rows.length && y < PET_H; y++) {
+    for (let x = 0; x < rows[y].length && x < PET_W; x++) {
+      const ch = rows[y][x];
+      if (ch in P && P[ch] >= 0) {
+        pixels.push([x, y, P[ch]]);
+      }
+    }
+  }
+  return pixels;
+}
 
-// Surface overlays — pixel-level additions
-const SURFACE_MUSIC = {
-  // Two music notes floating above
-  pixels: [
-    [4, 1, 14], [5, 1, 14], [4, 2, 14], [5, 2, 14], [6, 0, 14],
-    [12, 1, 14], [13, 1, 14], [12, 2, 14], [13, 2, 14], [14, 0, 14],
-  ]
+const SPRITES = {
+  A: parseSprite(SPRITE_A),
+  B: parseSprite(SPRITE_B),
+  C: parseSprite(SPRITE_C),
+  D: parseSprite(SPRITE_D),
 };
 
-const SURFACE_RAIN = {
-  // Drops around the body
-  pixels: [
-    [1, 8, 6], [1, 9, 6],
-    [22, 10, 6], [22, 11, 6],
-    [0, 18, 6], [23, 18, 6],
-    [1, 22, 6], [22, 22, 6],
-  ]
-};
+// ============================================================
+//  Overlays (eyes, surface) — design-relative coords
+//  Each design has its own eye region. Define per-design overlays.
+// ============================================================
 
-const SURFACE_SNOW = {
-  // Snowflakes around
-  pixels: [
-    [1, 6, 14], [1, 7, 14],
-    [22, 8, 14],
-    [0, 14, 14],
-    [23, 15, 14],
-    [2, 19, 14],
-    [21, 20, 14],
-    [1, 22, 14], [22, 22, 14],
-  ]
-};
+// Eye overlay regions per design (rows where eyes are):
+//  A: rows 10-15, cols 4-9 (left) and cols 12-19 (right)
+//  B: rows 8-13, cols 4-11 (left) and cols 12-19 (right)
+//  C: rows 11-16, cols 1-6 (left) and cols 11-16 (right)
+//  D: rows 12-17, cols 2-7 (left) and cols 14-19 (right)
+
+function overlayEyes(design, eyes) {
+  if (eyes === 'open') return [];  // eyes are in the base sprite
+  const out = [];
+  const regions = {
+    A: { ly: 10, ry: 10, lx: 4, rx: 14 },
+    B: { ly: 8,  ry: 8,  lx: 4, rx: 12 },
+    C: { ly: 11, ry: 11, lx: 1, rx: 11 },
+    D: { ly: 12, ry: 12, lx: 2, rx: 14 },
+  }[design];
+  const level = (eyes === 'squint') ? 2 : 4;
+  // Draw a 6-wide × 1-tall line (half-lid / closed)
+  for (let dx = 0; dx < 6; dx++) {
+    out.push([regions.lx + dx, regions.ly + 4, level]);
+    out.push([regions.rx + dx, regions.ry + 4, level]);
+  }
+  if (eyes === 'squint') {
+    // Add a second line above for squint
+    for (let dx = 0; dx < 6; dx++) {
+      out.push([regions.lx + dx, regions.ly + 3, level]);
+      out.push([regions.rx + dx, regions.ry + 3, level]);
+    }
+  }
+  if (eyes === 'closed') {
+    // happy ~ shape: dot at ends, lower in middle
+    for (let dx = 0; dx < 6; dx++) {
+      const y = regions.ly + 4 + (dx === 2 || dx === 3 ? 1 : 0);
+      out.push([regions.lx + dx, y, 4]);
+      out.push([regions.rx + dx, y, 4]);
+    }
+  }
+  return out;
+}
+
+function overlaySurface(design, surface) {
+  const out = [];
+  if (surface === 'music') {
+    // Two music notes above the design
+    out.push([3, 1, 14], [4, 1, 14], [3, 2, 14], [4, 2, 14], [5, 0, 14]);
+    out.push([14, 1, 14], [15, 1, 14], [14, 2, 14], [15, 2, 14], [16, 0, 14]);
+  } else if (surface === 'rain') {
+    out.push([1, 4, 6], [1, 5, 6]);
+    out.push([22, 6, 6], [22, 7, 6]);
+    out.push([0, 14, 6], [23, 14, 6]);
+    out.push([1, 19, 6], [22, 19, 6]);
+    out.push([2, 22, 6], [21, 22, 6]);
+  } else if (surface === 'snow') {
+    out.push([1, 3, 14]);
+    out.push([22, 5, 14]);
+    out.push([0, 12, 14]);
+    out.push([23, 13, 14]);
+    out.push([1, 17, 14]);
+    out.push([22, 19, 14]);
+    out.push([2, 22, 14], [21, 22, 14]);
+  }
+  return out;
+}
 
 // ============================================================
 //  State
 // ============================================================
 
 const state = {
-  shape: 'round',
   eyes: 'open',
   surface: 'none',
   motion: 'idle',
@@ -434,114 +510,64 @@ <h2>Preset scenarios</h2>
 };
 
 const presets = {
-  'morning-sunny': { shape: 'tall',  eyes: 'squint', surface: 'music', motion: 'bob'   },
-  'rainy-night':   { shape: 'flat',  eyes: 'closed', surface: 'rain',  motion: 'idle'  },
-  'hot-afternoon': { shape: 'round', eyes: 'half',   surface: 'none',  motion: 'idle'  },
-  'snowy-evening': { shape: 'round', eyes: 'half',   surface: 'snow',  motion: 'bob'   },
+  'morning-sunny': { eyes: 'squint', surface: 'music', motion: 'bob'   },
+  'rainy-night':   { eyes: 'closed', surface: 'rain',  motion: 'idle'  },
+  'hot-afternoon': { eyes: 'half',   surface: 'none',  motion: 'idle'  },
+  'snowy-evening': { eyes: 'half',   surface: 'snow',  motion: 'bob'   },
 };
 
 // ============================================================
-//  Sprite parsing & rendering
+//  Render a single design to its canvas
 // ============================================================
 
-function parseSprite(s) {
-  const rows = s.trim().split('\n');
-  const pixels = {};
-  let h = 0;
-  for (let y = 0; y < rows.length; y++) {
-    h = y + 1;
-    for (let x = 0; x < rows[y].length; x++) {
-      const ch = rows[y][x];
-      if (ch in P && P[ch] >= 0) {
-        pixels[`${x},${y}`] = P[ch];
-      }
-    }
-  }
-  return { pixels, w: PET_W, h };
-}
-
-const SPRITES = {
-  round: parseSprite(SPRITE_ROUND),
-  tall:  parseSprite(SPRITE_TALL),
-  flat:  parseSprite(SPRITE_FLAT),
-};
-
-function getOverlay(eyes, surface) {
-  const px = [];
-  if (eyes === 'closed') px.push(...EYES_CLOSED.pixels);
-  else if (eyes === 'half') px.push(...EYES_HALF.pixels);
-  else if (eyes === 'squint') px.push(...EYES_SQUINT.pixels);
-
-  if (surface === 'music') px.push(...SURFACE_MUSIC.pixels);
-  else if (surface === 'rain') px.push(...SURFACE_RAIN.pixels);
-  else if (surface === 'snow') px.push(...SURFACE_SNOW.pixels);
-
-  return px;
-}
-
-function render(frame) {
-  // Clear
+function renderDesign(ctx, design, frame) {
   ctx.fillStyle = '#000';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillRect(0, 0, PET_W * SCALE, PET_H * SCALE);
 
   if (state.night && !state.forceDay) return;
   const dim = (state.night && state.forceDay) ? 0.5 : 1.0;
 
-  // Motion: bob (vertical translate)
-  const motionY = state.motion === 'bob' ? Math.sin(frame * 0.10) * 1.5
-                : state.motion === 'sway' ? Math.cos(frame * 0.10) * 0.8
+  const motionY = state.motion === 'bob'  ? Math.sin(frame * 0.10 + design.charCodeAt(0)) * 1.5
+                : state.motion === 'sway' ? Math.cos(frame * 0.10 + design.charCodeAt(0)) * 0.8
                 : 0;
+  const breath = state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.05 + design.charCodeAt(0)) * 0.04 : 1.0;
 
-  // Idle breathe: scale Y around center
-  const breath = state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.05) * 0.05 : 1.0;
-
-  // Pick sprite
-  const sprite = SPRITES[state.shape];
+  // Build pixel map for this design
+  const map = new Map();
   const cy = (PET_H - 1) / 2;
-
-  // Build pixel map
-  const map = {};
-
-  // Apply base sprite with breathe transform
-  for (const key in sprite.pixels) {
-    const [x, y] = key.split(',').map(Number);
+  const basePixels = SPRITES[design];
+  for (const [x, y, level] of basePixels) {
     const relY = y - cy;
     const newY = Math.round(cy + relY * breath);
-    if (newY < 0 || newY >= PET_H) continue;
-    map[`${x},${newY}`] = sprite.pixels[key];
+    if (newY >= 0 && newY < PET_H) {
+      map.set(`${x},${newY}`, level);
+    }
   }
-
-  // Apply overlays (eyes, surface)
-  for (const [x, y, level] of getOverlay(state.eyes, state.surface)) {
-    if (y < 0 || y >= PET_H) continue;
-    map[`${x},${Math.round(y)}`] = level;
+  // Apply overlays
+  for (const [x, y, level] of overlayEyes(design, state.eyes)) {
+    if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
+  }
+  for (const [x, y, level] of overlaySurface(design, state.surface)) {
+    if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
   }
 
-  // Draw with motion offset
-  for (const key in map) {
+  // Draw
+  for (const [key, level] of map) {
     const [x, y] = key.split(',').map(Number);
     const drawY = y + motionY;
-    const px = Math.round(x);
-    const py = Math.round(drawY);
+    const px = x, py = Math.round(drawY);
     if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) continue;
-    const level = Math.max(0, Math.min(15, Math.round(map[key] * dim)));
-    ctx.fillStyle = gray(level);
+    const finalLevel = Math.max(0, Math.min(15, Math.round(level * dim)));
+    ctx.fillStyle = gray(finalLevel);
     ctx.fillRect(px * SCALE, py * SCALE, SCALE, SCALE);
   }
 }
 
-function gray(level) {
-  const v = Math.round((level / 15) * 255);
-  return `rgb(${v},${v},${v})`;
-}
-
-// ============================================================
-//  Animation loop
-// ============================================================
-
 let frame = 0;
 function loop() {
-  render(frame);
+  for (const k of ['A', 'B', 'C', 'D']) {
+    renderDesign(ctxs[k], k, frame);
+  }
   frame++;
   requestAnimationFrame(loop);
 }
@@ -550,19 +576,18 @@ <h2>Preset scenarios</h2>
 //  UI
 // ============================================================
 
-const readout = document.getElementById('readout');
-const inspector = document.getElementById('inspector');
-
-function updateReadout() {
-  readout.textContent =
-    `body: ${state.shape} · eyes: ${state.eyes} · surface: ${state.surface} · motion: ${state.motion}` +
-    (state.night ? (state.forceDay ? ' · [force day @ 0.5]' : ' · [HIDDEN]') : '');
+function updateReadouts() {
+  const txt = `eyes:${state.eyes} · surface:${state.surface} · motion:${state.motion}` +
+              (state.night ? (state.forceDay ? ' · dim' : ' · HIDDEN') : '');
+  for (const k of ['A', 'B', 'C', 'D']) {
+    document.getElementById('readout' + k).textContent = txt;
+  }
 }
 
 function setState(s) {
   Object.assign(state, s);
   refreshActive();
-  updateReadout();
+  updateReadouts();
 }
 
 function refreshActive() {
@@ -579,7 +604,7 @@ <h2>Preset scenarios</h2>
     const key = Object.keys(el.dataset)[0];
     state[key] = el.dataset[key];
     refreshActive();
-    updateReadout();
+    updateReadouts();
   });
 });
 
@@ -591,12 +616,10 @@ <h2>Preset scenarios</h2>
 });
 
 document.getElementById('night').addEventListener('change', e => {
-  state.night = e.target.checked;
-  updateReadout();
+  state.night = e.target.checked; updateReadouts();
 });
 document.getElementById('forceDay').addEventListener('change', e => {
-  state.forceDay = e.target.checked;
-  updateReadout();
+  state.forceDay = e.target.checked; updateReadouts();
 });
 
 let autoCycleTimer = null;
@@ -615,26 +638,29 @@ <h2>Preset scenarios</h2>
 });
 
 // Pixel inspector
-canvas.addEventListener('click', (e) => {
-  const rect = canvas.getBoundingClientRect();
-  const x = e.clientX - rect.left;
-  const y = e.clientY - rect.top;
-  const px = Math.floor(x / (rect.width / PET_W));
-  const py = Math.floor(y / (rect.height / PET_H));
-  if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) {
-    inspector.textContent = `(${px},${py}) out of bounds`;
-    return;
-  }
-  const sprite = SPRITES[state.shape];
-  const level = sprite.pixels[`${px},${py}`];
-  const overlay = getOverlay(state.eyes, state.surface).find(([x, y]) => x === px && y === py);
-  const finalLevel = overlay ? overlay[2] : level;
-  inspector.textContent = finalLevel !== undefined
-    ? `(${px},${py}) → L ${finalLevel} / 15  (${Math.round(finalLevel * 100 / 15)}%)`
-    : `(${px},${py}) background (L 0)`;
-});
+const inspector = document.getElementById('inspector');
+for (const k of ['A', 'B', 'C', 'D']) {
+  canvases[k].addEventListener('click', (e) => {
+    const rect = canvases[k].getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const px = Math.floor(x / (rect.width / PET_W));
+    const py = Math.floor(y / (rect.height / PET_H));
+    if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) return;
+    let level = -1;
+    for (const [bx, by, bl] of SPRITES[k]) {
+      if (bx === px && by === py) level = bl;
+    }
+    for (const [ox, oy, ol] of [...overlayEyes(k, state.eyes), ...overlaySurface(k, state.surface)]) {
+      if (ox === px && oy === py) level = ol;
+    }
+    inspector.textContent = level >= 0
+      ? `[${k}] (${px},${py}) → L ${level} / 15  (${Math.round(level * 100 / 15)}%)`
+      : `[${k}] (${px},${py}) background (L 0)`;
+  });
+}
 
-updateReadout();
+updateReadouts();
 requestAnimationFrame(loop);
 </script>
 </body>

From 8a9f63270b178d2ec7d3f43f8fd31f46e7b9578e Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Fri, 17 Jul 2026 07:34:34 +0800
Subject: [PATCH 6/7] feat(simulator): redesign as 4 hand-drawn pixel cats

Replace the radio/pet/robot designs with 4 cat variants:
- A: round-face chibi cat (classic mascot)
- B: alert cat with perked ears (looking up)
- C: sleepy cat with crescent eyes (lo-fi vibes)
- D: side-profile cat with whiskers (recognizably feline)

Each sprite uses the same 6-tone GBA palette. Two-eye variants A-C
share the same eye-region coordinates; D has a single-eye region for
the side profile. Same shared controls and presets as before.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/pet-simulator.html | 363 ++++++++++++++++++----------------
 1 file changed, 191 insertions(+), 172 deletions(-)

diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
index a19ff46..b74ecb9 100644
--- a/docs/plans/pet-simulator.html
+++ b/docs/plans/pet-simulator.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>SlumberCube · Pixel Pet Simulator (4 Designs)</title>
+<title>SlumberCube · Pixel Pet Simulator (4 Cats)</title>
 <style>
   :root {
     --bg: #0a0a0a;
@@ -176,32 +176,32 @@
 </style>
 </head>
 <body>
-  <h1>SLUMERCUBE / <span>PIXEL PET · 4 DESIGNS</span></h1>
-  <div class="subtitle">Same state applied to all four designs. Pick the silhouette you like.</div>
+  <h1>SLUMERCUBE / <span>PIXEL PET · 4 CATS</span></h1>
+  <div class="subtitle">Same state applied to all four cats. Pick the silhouette you like.</div>
 
   <div class="gallery">
     <div class="pet-card">
       <canvas id="petA" width="192" height="192"></canvas>
-      <div class="pet-name">A · 复古晶体管收音机</div>
-      <div class="pet-desc">vintage transistor radio</div>
+      <div class="pet-name">A · 圆脸小猫</div>
+      <div class="pet-desc">round face · classic mascot</div>
       <div class="readout" id="readoutA">—</div>
     </div>
     <div class="pet-card">
       <canvas id="petB" width="192" height="192"></canvas>
-      <div class="pet-name">B · 蓝牙胶囊音箱</div>
-      <div class="pet-desc">bluetooth capsule speaker</div>
+      <div class="pet-name">B · 好奇竖耳</div>
+      <div class="pet-desc">alert · perked ears</div>
       <div class="readout" id="readoutB">—</div>
     </div>
     <div class="pet-card">
       <canvas id="petC" width="192" height="192"></canvas>
-      <div class="pet-name">C · 像素小怪兽</div>
-      <div class="pet-desc">GBA-style pocket creature</div>
+      <div class="pet-name">C · 眯眼慵懒</div>
+      <div class="pet-desc">sleepy · lo-fi vibes</div>
       <div class="readout" id="readoutC">—</div>
     </div>
     <div class="pet-card">
       <canvas id="petD" width="192" height="192"></canvas>
-      <div class="pet-name">D · GBA 机器人</div>
-      <div class="pet-desc">GBA-style bot</div>
+      <div class="pet-name">D · 侧脸胡须</div>
+      <div class="pet-desc">side profile · whiskers</div>
       <div class="readout" id="readoutD">—</div>
     </div>
   </div>
@@ -248,13 +248,13 @@ <h2>Environment</h2>
     <span class="preset" data-preset="snowy-evening">19:00 · snow · music</span>
   </div>
 
-  <div class="inspector" id="inspector">click any pixel across the 4 designs to inspect its level</div>
+  <div class="inspector" id="inspector">click any pixel across the 4 cats to inspect its level</div>
   <div class="legend">palette: <code>#</code>L1 outline · <code>%</code>L4 · <code>+</code>L8 · <code>o</code>L11 · <code>O</code>L13 · <code>W</code>L15</div>
 
 <script>
 // ============================================================
-//  4-Design Pixel Pet Simulator
-//  Each design has its own hand-drawn 24×24 sprite. Same state.
+//  4-Design Pixel Cat Simulator
+//  Each cat has its own hand-drawn 24×24 sprite.
 // ============================================================
 
 const PET_W = 24, PET_H = 24;
@@ -273,7 +273,6 @@ <h2>Environment</h2>
   ctxs[k] = canvases[k].getContext('2d');
 }
 
-// Palette
 const P = {
   '.': -1, '#': 1, '%': 4, '+': 8, 'o': 11, 'O': 13, 'W': 15,
   '@': 1, 'M': 2, '~': 4, '-': 2, '×': 2,
@@ -286,122 +285,120 @@ <h2>Environment</h2>
 }
 
 // ============================================================
-//  4 hand-designed sprites (24×24)
+//  4 hand-drawn cat sprites (24×24)
 // ============================================================
 
-// ── A. Vintage Transistor Radio ──
-// Tall, antenna, 2 large round speaker holes = eyes, dial on top
+// ── A. Round Cute Cat (圆脸小猫) ──────────────────────
+// Big round face, classic mascot style. Ears wide + pointy.
 const SPRITE_A = `
 ................
-............#.#..
-.......#...#..#..
-.......#####..#..
-......##...##....
-.....#ooooooo#...
-....#ooooooooo#..
-...#ooooooooooo#.
-..#ooooooooooooo#
-..#oo########oo#.
-..#o#WW......WW#o
-..#o#W@W....W@W#o
-..#o#W@W....W@W#o
-..#o#W@W....W@W#o
-..#o#WW......WW#o
-..#oo########oo#.
-..#ooooo..ooooo#.
-..#oooooMMooooo#.
-..#ooooooooooooo#
-..#oooooooooooo#.
-...#oooooooooo#..
-....#oooooooo#...
-.....#oooooo#....
-......#######....
+.......##.##....
+.......##.##....
+......#oooo#....
+......#oooo#....
+.....#oooooo#...
+....#oooooooo#..
+...#oooooooooo#.
+..#oooooooooooo#
+.#ooooooooooooo#
+.#oo########oo#.
+.#oo#WWWWWWWW#o#
+.#oo#W@@@@@@@W#o
+.#oo#W@@@@@@@W#o
+.#oo#W@@@@@@@W#o
+.#oo#WWWWWWWW#o#
+.#oo########oo#.
+.#oooo...oooo#..
+.#oooo.MMM.ooo#.
+.#oooo..M...oo#.
+.#ooooooooooooo#
+..#oooooooooooo#
+...#oooooooooo#.
+.....########...
 `;
 
-// ── B. Bluetooth Capsule Speaker ──
-// Wide, no antenna, mesh grille, LED indicator
+// ── B. Alert Cat (好奇竖耳) ─────────────────────────────
+// Tall perked ears, slightly tilted head, eyes look up
 const SPRITE_B = `
 ................
-................
-................
-..############..
-.#oooooooooooo#.
-#ooooooooooooooo#
-#ooooooooooooooo#
-#oo############o#
-#oo#WWWWWWWWWW#o#
-#oo#W@@@@@@@@@W#o
-#oo#W@@@@@@@@@W#o
-#oo#W@@@@@@@@@W#o
-#oo#W@@@@@@@@@W#o
-#oo#WWWWWWWWWW#o#
-#oo############o#
-#oo#o#o#o#o#o#o#
-#ooooooooooooooo#
-#ooooooooooooooo#
-.#oooooooooooo#.
-..############..
-................
-................
-................
-................`;
+......#.....#...
+.....#.#...#.#..
+....#...#.#...#.
+.....###...###..
+....#oooo.oooo#..
+...#oooooooooooo
+..#ooooooooooooo
+.#oooooooooooooo
+.#oooooooooooooo
+.#oo########oo#.
+.#oo#WW....WW#o#
+.#oo#W@W..W@W#o#
+.#oo#.W@..W@.#o#
+.#oo#WW....WW#o#
+.#oo########oo#.
+.#oooooo.Moooo#.
+.#ooooo.MMM.oo#.
+.#ooooo..M..oo#.
+.#ooooooooooooo#
+..#oooooooooooo#
+...#oooooooooo#.
+.....########...
+`;
 
-// ── C. Pixel Creature (Tamagotchi / Pokemon-like) ──
-// Round body, 2 pointy ears, big anime eyes
+// ── C. Sleepy Cat (眯眼慵懒) ──────────────────────────
+// Lower ears, half-closed crescent eyes, peaceful smile
 const SPRITE_C = `
 ................
-.....##....##...
-....#..#..#..#..
-....#..#..#..#..
-.....#....#.....
-....#......#....
-...#........#...
-..#..........#..
-.#............#.
-.#............#.
-#..##......##..#
-#.#WW#....#WW#.#
-#.#W@#....#W@#.#
-#.#W@#....#W@#.#
-#.#W@#....#W@#.#
-#.#WW#....#WW#.#
-#..##......##..#
-#......MMM......#
-#..............#
-.#............#.
-.#............#.
-..#..........#..
-...#........#...
-....##....##....
+.....#......#...
+....#.#....#.#..
+...#..####.....#
+....##oooo##....
+....ooooooooo#..
+...#ooooooooo#..
+..#oooooooooooo#
+.#ooooooooooooo#
+.#ooooooooooooo#
+.#oo########oo#.
+.#oo#........oo#
+.#oo#  ~~~~~~~~
+.#oo#  ~~~~~~~~
+.#oo#........oo#
+.#oo########oo#.
+.#oo....MM.....#
+.#oo...MMMM....#
+.#oo....M......#
+.#ooooooooooooo#
+..#oooooooooooo#
+...#oooooooooo#.
+.....########...
 `;
 
-// ── D. GBA Robot ──
-// Square body, 2 antenna, LED mouth, screen eyes
+// ── D. Side Profile Cat (侧脸胡须) ─────────────────────
+// Side view, one eye, whiskers, ear pointing up
 const SPRITE_D = `
 ................
-......#.#.#.#....
-......#.#.#.#....
-......##.#.##....
-.....##.....##...
-....#.........#..
-....#.........#..
-...#...........#.
-.##...........##.
-.#.............#.
-#...............#
-#.##.........##.#
-#.#WW.......WW#.#
-#.#W@.......W@#.#
-#.#W@.......W@#.#
-#.#W@.......W@#.#
-#.#WW.......WW#.#
-#.##.........##.#
-#....#######....#
-#....#ooooo#....#
-#....#oMMMo#....#
-#....#ooooo#....#
-.#.............#.
-.##...........##.
+................
+.......#........
+......#.#.......
+.....#...#......
+....#.....#.....
+...#......##....
+..#..........#..
+.#............#.
+.#............#.
+.#.##........#.#
+.#o#WW.....##..#
+.#o#W@W...#......  (single visible eye)
+.#o#W@W..#.......
+.#o#WW...##......
+.#o#####.........
+.#oooo#o#........
+.#oooo#ooo.......
+.#oooo#oooo......
+.#oooo#ooooo.....
+.#oooooooooooo...
+..#ooooooooooo#..
+.....#######....
 `;
 
 // ============================================================
@@ -430,44 +427,82 @@ <h2>Environment</h2>
 };
 
 // ============================================================
-//  Overlays (eyes, surface) — design-relative coords
-//  Each design has its own eye region. Define per-design overlays.
+//  Eye overlay regions (per-design pixel positions to overwrite)
 // ============================================================
+// Eye regions are roughly rows 11-16. Width depends on design.
+// Each: { lx, ly, w, h, rx } — left eye x/y, size, right eye x
+
+const EYE_REGIONS = {
+  A: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
+  B: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
+  C: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
+  D: { ly: 11, lx: 4,           w: 6, h: 4 },  // single eye for side
+};
 
-// Eye overlay regions per design (rows where eyes are):
-//  A: rows 10-15, cols 4-9 (left) and cols 12-19 (right)
-//  B: rows 8-13, cols 4-11 (left) and cols 12-19 (right)
-//  C: rows 11-16, cols 1-6 (left) and cols 11-16 (right)
-//  D: rows 12-17, cols 2-7 (left) and cols 14-19 (right)
+function clearRegion(design, eyes) {
+  // Erase (set to body color) the eye region before applying overlay
+  const r = EYE_REGIONS[design];
+  const out = [];
+  const bodyLevel = 11;  // match body
+  if (design === 'D') {
+    // single eye
+    for (let dy = 0; dy < r.h + 2; dy++) {
+      for (let dx = 0; dx < r.w + 2; dx++) {
+        out.push([r.lx + dx, r.ly + dy, bodyLevel]);
+      }
+    }
+  } else {
+    for (let dy = 0; dy < r.h + 2; dy++) {
+      for (let dx = 0; dx < r.w + 2; dx++) {
+        out.push([r.lx + dx, r.ly + dy, bodyLevel]);
+        out.push([r.rx + dx, r.ly + dy, bodyLevel]);
+      }
+    }
+  }
+  return out;
+}
 
 function overlayEyes(design, eyes) {
-  if (eyes === 'open') return [];  // eyes are in the base sprite
-  const out = [];
-  const regions = {
-    A: { ly: 10, ry: 10, lx: 4, rx: 14 },
-    B: { ly: 8,  ry: 8,  lx: 4, rx: 12 },
-    C: { ly: 11, ry: 11, lx: 1, rx: 11 },
-    D: { ly: 12, ry: 12, lx: 2, rx: 14 },
-  }[design];
-  const level = (eyes === 'squint') ? 2 : 4;
-  // Draw a 6-wide × 1-tall line (half-lid / closed)
-  for (let dx = 0; dx < 6; dx++) {
-    out.push([regions.lx + dx, regions.ly + 4, level]);
-    out.push([regions.rx + dx, regions.ry + 4, level]);
-  }
-  if (eyes === 'squint') {
-    // Add a second line above for squint
-    for (let dx = 0; dx < 6; dx++) {
-      out.push([regions.lx + dx, regions.ly + 3, level]);
-      out.push([regions.rx + dx, regions.ry + 3, level]);
+  if (eyes === 'open') return [];  // base sprite already has eyes
+  const r = EYE_REGIONS[design];
+  const out = clearRegion(design, eyes);
+
+  if (design === 'D') {
+    // single eye modes
+    if (eyes === 'closed' || eyes === 'half') {
+      // horizontal line
+      for (let dx = 0; dx < r.w; dx++) {
+        out.push([r.lx + 1 + dx, r.ly + 2, 2]);
+      }
+    } else if (eyes === 'squint') {
+      for (let dx = 0; dx < r.w; dx++) {
+        out.push([r.lx + 1 + dx, r.ly + 2, 2]);
+        out.push([r.lx + 1 + dx, r.ly + 3, 2]);
+      }
     }
+    return out;
   }
-  if (eyes === 'closed') {
-    // happy ~ shape: dot at ends, lower in middle
-    for (let dx = 0; dx < 6; dx++) {
-      const y = regions.ly + 4 + (dx === 2 || dx === 3 ? 1 : 0);
-      out.push([regions.lx + dx, y, 4]);
-      out.push([regions.rx + dx, y, 4]);
+
+  // Two-eye modes (A, B, C)
+  for (const side of ['l', 'r']) {
+    const baseX = side === 'l' ? r.lx : r.rx;
+    if (eyes === 'half') {
+      // line at top of eye region
+      for (let dx = 1; dx < r.w - 1; dx++) {
+        out.push([baseX + dx, r.ly + 1, 2]);
+      }
+    } else if (eyes === 'closed') {
+      // happy ~ shape
+      for (let dx = 1; dx < r.w - 1; dx++) {
+        const yOffset = (dx === 2 || dx === 3 || dx === 4) ? 1 : 0;
+        out.push([baseX + dx, r.ly + 2 + yOffset, 4]);
+      }
+    } else if (eyes === 'squint') {
+      // two stacked lines
+      for (let dx = 1; dx < r.w - 1; dx++) {
+        out.push([baseX + dx, r.ly + 1, 2]);
+        out.push([baseX + dx, r.ly + 2, 2]);
+      }
     }
   }
   return out;
@@ -476,9 +511,8 @@ <h2>Environment</h2>
 function overlaySurface(design, surface) {
   const out = [];
   if (surface === 'music') {
-    // Two music notes above the design
     out.push([3, 1, 14], [4, 1, 14], [3, 2, 14], [4, 2, 14], [5, 0, 14]);
-    out.push([14, 1, 14], [15, 1, 14], [14, 2, 14], [15, 2, 14], [16, 0, 14]);
+    out.push([18, 1, 14], [19, 1, 14], [18, 2, 14], [19, 2, 14], [20, 0, 14]);
   } else if (surface === 'rain') {
     out.push([1, 4, 6], [1, 5, 6]);
     out.push([22, 6, 6], [22, 7, 6]);
@@ -517,7 +551,7 @@ <h2>Environment</h2>
 };
 
 // ============================================================
-//  Render a single design to its canvas
+//  Render
 // ============================================================
 
 function renderDesign(ctx, design, frame) {
@@ -532,18 +566,15 @@ <h2>Environment</h2>
                 : 0;
   const breath = state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.05 + design.charCodeAt(0)) * 0.04 : 1.0;
 
-  // Build pixel map for this design
   const map = new Map();
   const cy = (PET_H - 1) / 2;
-  const basePixels = SPRITES[design];
-  for (const [x, y, level] of basePixels) {
+  for (const [x, y, level] of SPRITES[design]) {
     const relY = y - cy;
     const newY = Math.round(cy + relY * breath);
     if (newY >= 0 && newY < PET_H) {
       map.set(`${x},${newY}`, level);
     }
   }
-  // Apply overlays
   for (const [x, y, level] of overlayEyes(design, state.eyes)) {
     if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
   }
@@ -551,7 +582,6 @@ <h2>Environment</h2>
     if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
   }
 
-  // Draw
   for (const [key, level] of map) {
     const [x, y] = key.split(',').map(Number);
     const drawY = y + motionY;
@@ -565,9 +595,7 @@ <h2>Environment</h2>
 
 let frame = 0;
 function loop() {
-  for (const k of ['A', 'B', 'C', 'D']) {
-    renderDesign(ctxs[k], k, frame);
-  }
+  for (const k of ['A', 'B', 'C', 'D']) renderDesign(ctxs[k], k, frame);
   frame++;
   requestAnimationFrame(loop);
 }
@@ -579,9 +607,7 @@ <h2>Environment</h2>
 function updateReadouts() {
   const txt = `eyes:${state.eyes} · surface:${state.surface} · motion:${state.motion}` +
               (state.night ? (state.forceDay ? ' · dim' : ' · HIDDEN') : '');
-  for (const k of ['A', 'B', 'C', 'D']) {
-    document.getElementById('readout' + k).textContent = txt;
-  }
+  for (const k of ['A', 'B', 'C', 'D']) document.getElementById('readout' + k).textContent = txt;
 }
 
 function setState(s) {
@@ -615,12 +641,8 @@ <h2>Environment</h2>
   });
 });
 
-document.getElementById('night').addEventListener('change', e => {
-  state.night = e.target.checked; updateReadouts();
-});
-document.getElementById('forceDay').addEventListener('change', e => {
-  state.forceDay = e.target.checked; updateReadouts();
-});
+document.getElementById('night').addEventListener('change', e => { state.night = e.target.checked; updateReadouts(); });
+document.getElementById('forceDay').addEventListener('change', e => { state.forceDay = e.target.checked; updateReadouts(); });
 
 let autoCycleTimer = null;
 document.getElementById('autoCycle').addEventListener('change', e => {
@@ -637,7 +659,6 @@ <h2>Environment</h2>
   }
 });
 
-// Pixel inspector
 const inspector = document.getElementById('inspector');
 for (const k of ['A', 'B', 'C', 'D']) {
   canvases[k].addEventListener('click', (e) => {
@@ -648,9 +669,7 @@ <h2>Environment</h2>
     const py = Math.floor(y / (rect.height / PET_H));
     if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) return;
     let level = -1;
-    for (const [bx, by, bl] of SPRITES[k]) {
-      if (bx === px && by === py) level = bl;
-    }
+    for (const [bx, by, bl] of SPRITES[k]) if (bx === px && by === py) level = bl;
     for (const [ox, oy, ol] of [...overlayEyes(k, state.eyes), ...overlaySurface(k, state.surface)]) {
       if (ox === px && oy === py) level = ol;
     }

From fb96ee994047376dee07321bc2fbf3473743a2d3 Mon Sep 17 00:00:00 2001
From: zulin <9683884@qq.com>
Date: Fri, 17 Jul 2026 07:49:15 +0800
Subject: [PATCH 7/7] feat(simulator): redesign 4 cats in NES / FC style
 (4-tone palette, hard edges)

Drop the GBA 6-tone palette for a strict FC 4-tone:
- L0 outline (#, @, M)
- L8 body main (+)
- L11 body highlight (o)
- L15 eye white / snowflake (W)

Same 4 cat silhouettes (round / alert / sleepy / side profile),
redrawn with hard 1px outlines, no smooth body gradients, smaller
geometric eyes. Each sprite is now closer to NES/Famicom aesthetic
than the previous GBA attempt.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/plans/pet-simulator.html | 381 ++++++++++++++++------------------
 1 file changed, 179 insertions(+), 202 deletions(-)

diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
index b74ecb9..66b96a7 100644
--- a/docs/plans/pet-simulator.html
+++ b/docs/plans/pet-simulator.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>SlumberCube · Pixel Pet Simulator (4 Cats)</title>
+<title>SlumberCube · Pixel Pet Simulator (NES / FC Cats)</title>
 <style>
   :root {
     --bg: #0a0a0a;
@@ -144,12 +144,6 @@
   }
   .preset:hover { background: #2a2a2a; color: #fff; }
   .preset.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
-  .footer {
-    margin-top: 16px;
-    font-size: 10px;
-    color: #444;
-    max-width: 1100px;
-  }
   .inspector {
     margin-top: 8px;
     padding: 6px;
@@ -176,14 +170,14 @@
 </style>
 </head>
 <body>
-  <h1>SLUMERCUBE / <span>PIXEL PET · 4 CATS</span></h1>
-  <div class="subtitle">Same state applied to all four cats. Pick the silhouette you like.</div>
+  <h1>SLUMERCUBE / <span>PIXEL PET · NES (FC) STYLE</span></h1>
+  <div class="subtitle">4-tone palette · hard edges · iconic NES silhouettes.</div>
 
   <div class="gallery">
     <div class="pet-card">
       <canvas id="petA" width="192" height="192"></canvas>
       <div class="pet-name">A · 圆脸小猫</div>
-      <div class="pet-desc">round face · classic mascot</div>
+      <div class="pet-desc">chibi round · Felix-like</div>
       <div class="readout" id="readoutA">—</div>
     </div>
     <div class="pet-card">
@@ -195,7 +189,7 @@ <h1>SLUMERCUBE / <span>PIXEL PET · 4 CATS</span></h1>
     <div class="pet-card">
       <canvas id="petC" width="192" height="192"></canvas>
       <div class="pet-name">C · 眯眼慵懒</div>
-      <div class="pet-desc">sleepy · lo-fi vibes</div>
+      <div class="pet-desc">sleepy · crescent eyes</div>
       <div class="readout" id="readoutC">—</div>
     </div>
     <div class="pet-card">
@@ -249,12 +243,12 @@ <h2>Environment</h2>
   </div>
 
   <div class="inspector" id="inspector">click any pixel across the 4 cats to inspect its level</div>
-  <div class="legend">palette: <code>#</code>L1 outline · <code>%</code>L4 · <code>+</code>L8 · <code>o</code>L11 · <code>O</code>L13 · <code>W</code>L15</div>
+  <div class="legend">NES palette: <code>#</code>L0 outline · <code>+</code>L8 body · <code>o</code>L11 light · <code>W</code>L15 eye white · <code>@</code>L0 pupil</div>
 
 <script>
 // ============================================================
-//  4-Design Pixel Cat Simulator
-//  Each cat has its own hand-drawn 24×24 sprite.
+//  NES / FC style 4-Design Pixel Cat Simulator
+//  4-tone palette, hard edges, 24×24.
 // ============================================================
 
 const PET_W = 24, PET_H = 24;
@@ -273,10 +267,11 @@ <h2>Environment</h2>
   ctxs[k] = canvases[k].getContext('2d');
 }
 
+// 4-tone NES-style palette
 const P = {
-  '.': -1, '#': 1, '%': 4, '+': 8, 'o': 11, 'O': 13, 'W': 15,
-  '@': 1, 'M': 2, '~': 4, '-': 2, '×': 2,
-  '♪': 14, '*': 14, '·': 6,
+  '.': -1, '#': 1, '+': 8, 'o': 11, 'W': 15,
+  '@': 1, 'M': 1, '~': 1, '-': 1, '×': 1,
+  '♪': 15, '*': 15, '·': 8,
 };
 
 function gray(level) {
@@ -285,132 +280,138 @@ <h2>Environment</h2>
 }
 
 // ============================================================
-//  4 hand-drawn cat sprites (24×24)
+//  4 hand-drawn NES-style cat sprites (24×24)
+//  Palette: # (outline) + (body) o (light) W (white) @ (pupil)
 // ============================================================
 
-// ── A. Round Cute Cat (圆脸小猫) ──────────────────────
-// Big round face, classic mascot style. Ears wide + pointy.
-const SPRITE_A = `
-................
-.......##.##....
-.......##.##....
-......#oooo#....
-......#oooo#....
-.....#oooooo#...
-....#oooooooo#..
-...#oooooooooo#.
-..#oooooooooooo#
-.#ooooooooooooo#
-.#oo########oo#.
-.#oo#WWWWWWWW#o#
-.#oo#W@@@@@@@W#o
-.#oo#W@@@@@@@W#o
-.#oo#W@@@@@@@W#o
-.#oo#WWWWWWWW#o#
-.#oo########oo#.
-.#oooo...oooo#..
-.#oooo.MMM.ooo#.
-.#oooo..M...oo#.
-.#ooooooooooooo#
-..#oooooooooooo#
-...#oooooooooo#.
-.....########...
-`;
-
-// ── B. Alert Cat (好奇竖耳) ─────────────────────────────
-// Tall perked ears, slightly tilted head, eyes look up
-const SPRITE_B = `
-................
-......#.....#...
-.....#.#...#.#..
-....#...#.#...#.
-.....###...###..
-....#oooo.oooo#..
-...#oooooooooooo
-..#ooooooooooooo
-.#oooooooooooooo
-.#oooooooooooooo
-.#oo########oo#.
-.#oo#WW....WW#o#
-.#oo#W@W..W@W#o#
-.#oo#.W@..W@.#o#
-.#oo#WW....WW#o#
-.#oo########oo#.
-.#oooooo.Moooo#.
-.#ooooo.MMM.oo#.
-.#ooooo..M..oo#.
-.#ooooooooooooo#
-..#oooooooooooo#
-...#oooooooooo#.
-.....########...
-`;
-
-// ── C. Sleepy Cat (眯眼慵懒) ──────────────────────────
-// Lower ears, half-closed crescent eyes, peaceful smile
-const SPRITE_C = `
-................
-.....#......#...
-....#.#....#.#..
-...#..####.....#
-....##oooo##....
-....ooooooooo#..
-...#ooooooooo#..
-..#oooooooooooo#
-.#ooooooooooooo#
-.#ooooooooooooo#
-.#oo########oo#.
-.#oo#........oo#
-.#oo#  ~~~~~~~~
-.#oo#  ~~~~~~~~
-.#oo#........oo#
-.#oo########oo#.
-.#oo....MM.....#
-.#oo...MMMM....#
-.#oo....M......#
-.#ooooooooooooo#
-..#oooooooooooo#
-...#oooooooooo#.
-.....########...
-`;
-
-// ── D. Side Profile Cat (侧脸胡须) ─────────────────────
-// Side view, one eye, whiskers, ear pointing up
-const SPRITE_D = `
-................
-................
-.......#........
-......#.#.......
-.....#...#......
-....#.....#.....
-...#......##....
-..#..........#..
-.#............#.
-.#............#.
-.#.##........#.#
-.#o#WW.....##..#
-.#o#W@W...#......  (single visible eye)
-.#o#W@W..#.......
-.#o#WW...##......
-.#o#####.........
-.#oooo#o#........
-.#oooo#ooo.......
-.#oooo#oooo......
-.#oooo#ooooo.....
-.#oooooooooooo...
-..#ooooooooooo#..
-.....#######....
-`;
-
-// ============================================================
-//  Parsing
-// ============================================================
+// ── A. Round Chibi (圆脸小猫) ──
+// Felix-the-Cat-style mascot. Big round head, pointy ears,
+// huge round eyes with tiny pupils, small mouth.
+const SPRITE_A = [
+'........................',  // 0
+'.........##.....##......',  // 1 ear tips
+'........#++#...#++#.....',  // 2 ears narrowing
+'.......#+++#####+++#....',  // 3 ears + head
+'......#+++++++++++++#...',  // 4 top of head
+'.....#+++++++++++++++#..',  // 5
+'....#+++++++++++++++++#.',  // 6
+'....#+++++++++++++++++#.',  // 7
+'...#+++++++++++++++++++#',  // 8
+'...#+++##############++#',  // 9 eye top outlines
+'..#+++#WWWWWWWWWWWW#+++#',  // 10 eye whites
+'..#+++#W@@@WWWWWWW@W+++#',  // 11 pupils
+'..#+++#W@@@WWWWWWW@W+++#',  // 12
+'..#+++#WWWWWWWWWWWW#+++#',  // 13
+'..#+++##############+++#',  // 14 eye bottom outlines
+'..#++++++++++++++++++++#',  // 15
+'..#++++++++++MM++++++++#',  // 16 mouth top
+'..#+++++++++.M.++++++++#',  // 17 mouth
+'..#+++++++++MMM++++++++#',  // 18
+'..#++++++++++++++++++++#',  // 19
+'...#+++++++++++++++++++#',  // 20
+'....#+++++++++++++++++#.',  // 21
+'.....#+++++++++++++++#..',  // 22
+'......#################.',  // 23 bottom
+];
+
+// ── B. Alert Cat (好奇竖耳) ──
+// Tall perked ears, pupils looking up, slight head tilt
+const SPRITE_B = [
+'........................',  // 0
+'.......#.........#......',  // 1 ear tips tall
+'......#.#.......#.#.....',  // 2 ears widening
+'.....#...#.....#...#....',  // 3 ears
+'.....#####.....#####....',  // 4 ear bases
+'....#+++++#####+++++#...',  // 5 ear bottoms + head top
+'...#++++++++++++++++#++#',  // 6
+'..#++++++++++++++++++++#',  // 7
+'..#++++++++++++++++++++#',  // 8
+'..#+++##############++#.',  // 9 eye outlines
+'..#++#WWWWWWWWWWWWWW#++#',  // 10 whites
+'..#++#W@@WWWWWWWW@@W#++#',  // 11 pupils up
+'..#++#W@@WWWWWWWW@@W#++#',  // 12
+'..#++#WWWWWWWWWWWWWW#++#',  // 13
+'..#+++##############++#.',  // 14
+'..#+++++++++MM++++++++#+',  // 15 mouth O top
+'..#+++++++++.M.+++++++++',  // 16 O
+'..#+++++++++MM++++++++#+',  // 17 O bottom
+'..#+++++++++++++++++++++',  // 18
+'...#+++++++++++++++++++#',  // 19
+'....#+++++++++++++++++#.',  // 20
+'.....#++++++++++++++++#.',  // 21
+'......################..',  // 22
+'........................',  // 23
+];
+
+// ── C. Sleepy Cat (眯眼慵懒) ──
+// Closed crescent eyes, slight smile, ears relaxed (slightly drooped)
+const SPRITE_C = [
+'........................',  // 0
+'.......#.........#......',  // 1 ear tips shorter
+'......#.#.......#.#.....',  // 2 ears
+'.....#...#.....#...#....',  // 3 ears widening
+'....####.####.####.####.',  // 4 ear bases merging (need 24 chars)
+'...#+++++++++++++++++++#',  // 5 head top
+'..#++++++++++++++++++++#',  // 6
+'..#++++++++++++++++++++#',  // 7
+'..#+++##############++#.',  // 8 eye outlines
+'..#++#wwwwwwwwwwwwww#++#',  // 9 closed crescent top
+'..#++#wWWWWWWWWWWWWw#++#',  // 10 closed crescent
+'..#++#wwwwwwwwwwwwww#++#',  // 11 closed crescent
+'..#+++##############++#.',  // 12
+'..#++++++++MMMM+++++++.+',  // 13 sleepy smile
+'..#+++++++MM##MM+++++++#',  // 14
+'..#++++++++MMMM+++++++#+',  // 15
+'..#+++++++++++++++++++++',  // 16
+'...#++++++++++++++++++#.',  // 17
+'....#++++++++++++++++#..',  // 18
+'.....#+++++++++++++++#..',  // 19
+'......#+++++++++++++#...',  // 20
+'........##############...',  // 21
+'........................',  // 22
+'........................',  // 23
+];
+// Note: 'w' maps to L4 (subtle shadow on closed-eye area)
+// Need to add 'w' to palette
+
+// ── D. Side Profile Cat (侧脸胡须) ──
+// Side view, one visible eye, whiskers, single ear pointing up
+const SPRITE_D = [
+'........................',  // 0
+'.......#...............',  // 1 ear tip
+'......#.#..............',  // 2 ear
+'.....#...#.............',  // 3 ear widening
+'....#.....#............',  // 4 ear base
+'...#######.............',  // 5 ear meets head
+'..#++++++++#...........',  // 6 head + ear connection
+'.#++++++++++++++++#....',  // 7 head top
+'#+++++++++++++++++o#...',  // 8
+'#++++++++++++++++++o#..',  // 9
+'#++++++++++++++++++o#..',  // 10
+'#+++#########+++++o#..',  // 11 eye area outline
+'#++#WWWWWWWWWW#+++o#..',  // 12 eye white (single, big)
+'#++#W@@@@@@W#+++++o#..',  // 13 pupil
+'#++#WWWWWWWW#+++++o#..',  // 14
+'#+++#########+++++o#..',  // 15 eye bottom outline
+'#++++++++++++++++++o#..',  // 16
+'#+++++MMMM++++++++o#..',  // 17 nose bump + mouth
+'#++++..MMMMM+++++++o#..',  // 18 mouth
+'#++++++++++++++++++o#..',  // 19
+'.#++++++++++++++++o#...',  // 20
+'..#++++++++++++++o#....',  // 21
+'...################.....',  // 22
+'........................',  // 23
+];
+
+// Add 'w' to palette (lowercase w = subtle shadow gray for closed eyes)
+P.w = 4;
 
 function parseSprite(s) {
-  const rows = s.trim().split('\n');
   const pixels = [];
-  for (let y = 0; y < rows.length && y < PET_H; y++) {
-    for (let x = 0; x < rows[y].length && x < PET_W; x++) {
-      const ch = rows[y][x];
+  for (let y = 0; y < s.length && y < PET_H; y++) {
+    const row = s[y];
+    for (let x = 0; x < row.length && x < PET_W; x++) {
+      const ch = row[x];
       if (ch in P && P[ch] >= 0) {
         pixels.push([x, y, P[ch]]);
       }
@@ -426,36 +427,30 @@ <h2>Environment</h2>
   D: parseSprite(SPRITE_D),
 };
 
-// ============================================================
-//  Eye overlay regions (per-design pixel positions to overwrite)
-// ============================================================
-// Eye regions are roughly rows 11-16. Width depends on design.
-// Each: { lx, ly, w, h, rx } — left eye x/y, size, right eye x
-
+// Eye region per design (so overlays know where to overwrite)
 const EYE_REGIONS = {
-  A: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
-  B: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
-  C: { ly: 11, lx: 4, rx: 14, w: 6, h: 5 },
-  D: { ly: 11, lx: 4,           w: 6, h: 4 },  // single eye for side
+  A: { ly: 10, lx: 4, rx: 14, w: 6, h: 5, two: true },
+  B: { ly: 10, lx: 4, rx: 14, w: 6, h: 5, two: true },
+  C: { ly: 8,  lx: 4, rx: 14, w: 6, h: 5, two: true },
+  D: { ly: 11, lx: 3,           w: 7, h: 5, two: false },
 };
 
-function clearRegion(design, eyes) {
-  // Erase (set to body color) the eye region before applying overlay
+const BODY = 11;
+
+function clearEyes(design, eyes) {
   const r = EYE_REGIONS[design];
   const out = [];
-  const bodyLevel = 11;  // match body
-  if (design === 'D') {
-    // single eye
+  if (r.two) {
     for (let dy = 0; dy < r.h + 2; dy++) {
       for (let dx = 0; dx < r.w + 2; dx++) {
-        out.push([r.lx + dx, r.ly + dy, bodyLevel]);
+        out.push([r.lx + dx, r.ly + dy, BODY]);
+        out.push([r.rx + dx, r.ly + dy, BODY]);
       }
     }
   } else {
     for (let dy = 0; dy < r.h + 2; dy++) {
       for (let dx = 0; dx < r.w + 2; dx++) {
-        out.push([r.lx + dx, r.ly + dy, bodyLevel]);
-        out.push([r.rx + dx, r.ly + dy, bodyLevel]);
+        out.push([r.lx + dx, r.ly + dy, BODY]);
       }
     }
   }
@@ -463,47 +458,29 @@ <h2>Environment</h2>
 }
 
 function overlayEyes(design, eyes) {
-  if (eyes === 'open') return [];  // base sprite already has eyes
+  if (eyes === 'open') return [];
   const r = EYE_REGIONS[design];
-  const out = clearRegion(design, eyes);
-
-  if (design === 'D') {
-    // single eye modes
-    if (eyes === 'closed' || eyes === 'half') {
-      // horizontal line
-      for (let dx = 0; dx < r.w; dx++) {
-        out.push([r.lx + 1 + dx, r.ly + 2, 2]);
-      }
-    } else if (eyes === 'squint') {
-      for (let dx = 0; dx < r.w; dx++) {
-        out.push([r.lx + 1 + dx, r.ly + 2, 2]);
-        out.push([r.lx + 1 + dx, r.ly + 3, 2]);
-      }
-    }
-    return out;
-  }
-
-  // Two-eye modes (A, B, C)
-  for (const side of ['l', 'r']) {
-    const baseX = side === 'l' ? r.lx : r.rx;
+  const out = clearEyes(design, eyes);
+  const drawSide = (baseX) => {
     if (eyes === 'half') {
-      // line at top of eye region
-      for (let dx = 1; dx < r.w - 1; dx++) {
-        out.push([baseX + dx, r.ly + 1, 2]);
-      }
+      for (let dx = 1; dx < r.w - 1; dx++) out.push([baseX + dx, r.ly + 1, 1]);
     } else if (eyes === 'closed') {
-      // happy ~ shape
       for (let dx = 1; dx < r.w - 1; dx++) {
-        const yOffset = (dx === 2 || dx === 3 || dx === 4) ? 1 : 0;
-        out.push([baseX + dx, r.ly + 2 + yOffset, 4]);
+        const yOff = (dx >= 2 && dx <= r.w - 3) ? 1 : 0;
+        out.push([baseX + dx, r.ly + 2 + yOff, 1]);
       }
     } else if (eyes === 'squint') {
-      // two stacked lines
       for (let dx = 1; dx < r.w - 1; dx++) {
-        out.push([baseX + dx, r.ly + 1, 2]);
-        out.push([baseX + dx, r.ly + 2, 2]);
+        out.push([baseX + dx, r.ly + 1, 1]);
+        out.push([baseX + dx, r.ly + 2, 1]);
       }
     }
+  };
+  if (r.two) {
+    drawSide(r.lx);
+    drawSide(r.rx);
+  } else {
+    drawSide(r.lx);
   }
   return out;
 }
@@ -511,22 +488,22 @@ <h2>Environment</h2>
 function overlaySurface(design, surface) {
   const out = [];
   if (surface === 'music') {
-    out.push([3, 1, 14], [4, 1, 14], [3, 2, 14], [4, 2, 14], [5, 0, 14]);
-    out.push([18, 1, 14], [19, 1, 14], [18, 2, 14], [19, 2, 14], [20, 0, 14]);
+    out.push([3, 1, 15], [4, 1, 15], [3, 2, 15], [4, 2, 15], [5, 0, 15]);
+    out.push([16, 1, 15], [17, 1, 15], [16, 2, 15], [17, 2, 15], [18, 0, 15]);
   } else if (surface === 'rain') {
-    out.push([1, 4, 6], [1, 5, 6]);
-    out.push([22, 6, 6], [22, 7, 6]);
-    out.push([0, 14, 6], [23, 14, 6]);
-    out.push([1, 19, 6], [22, 19, 6]);
-    out.push([2, 22, 6], [21, 22, 6]);
+    out.push([1, 4, 8], [1, 5, 8]);
+    out.push([22, 6, 8], [22, 7, 8]);
+    out.push([0, 14, 8], [23, 14, 8]);
+    out.push([1, 19, 8], [22, 19, 8]);
+    out.push([2, 22, 8], [21, 22, 8]);
   } else if (surface === 'snow') {
-    out.push([1, 3, 14]);
-    out.push([22, 5, 14]);
-    out.push([0, 12, 14]);
-    out.push([23, 13, 14]);
-    out.push([1, 17, 14]);
-    out.push([22, 19, 14]);
-    out.push([2, 22, 14], [21, 22, 14]);
+    out.push([1, 3, 15]);
+    out.push([22, 5, 15]);
+    out.push([0, 12, 15]);
+    out.push([23, 13, 15]);
+    out.push([1, 17, 15]);
+    out.push([22, 19, 15]);
+    out.push([2, 22, 15], [21, 22, 15]);
   }
   return out;
 }