dsh-piggy 0.25.0

package/src/client/css-base.js

@@ -0,0 +1,225 @@
+// @ts-check
+/**
+ * 基础样式：设计令牌、宿主容器、猪、图标栏与气泡。
+ *
+ * @module dsh-piggy/client/css-base
+ */
+
+
+import { el } from './dom.js'
+
+export const CSS_BASE = [
+  // ---------------------------------------------------------------------
+  // Animal Crossing design language, transcribed from
+  // guokaigdg/animal-island-ui docs/design-system (design-tokens.md and the
+  // standalone css-variables.md template).
+  //
+  // The tokens are declared on the widget root rather than :root: the host
+  // page must not inherit them, and they must not be clobbered by it.
+  //
+  // The rules that shape everything below:
+  //   · warm earth-brown text on cream parchment, never pure black or grey
+  //   · 12px minimum radius; buttons and inputs are 50px pills
+  //   · the thick 3D bottom shadow belongs to primary buttons only
+  //   · cards carry a border, not an elevation shadow
+  //   · motion is 0.15-0.35s on cubic-bezier(.4,0,.2,1)
+  //   · focus rings are yellow or teal, never blue
+  // ---------------------------------------------------------------------
+  '[data-dsh-pig]{',
+  '--ac-font:Nunito,"Noto Sans SC",-apple-system,"PingFang SC","Hiragino Sans GB",sans-serif;',
+  '--ac-primary:#19c8b9;--ac-primary-hover:#3dd4c6;--ac-primary-active:#11a89b;',
+  '--ac-primary-bg:#e6f9f6;',
+  '--ac-text:#794f27;--ac-text-body:#725d42;--ac-text-2:#9f927d;--ac-text-muted:#8a7b66;',
+  '--ac-text-disabled:#c4b89e;',
+  '--ac-bg:#f8f8f0;--ac-bg-content:rgb(247,243,223);--ac-bg-input:#fffbe7;',
+  '--ac-bg-disabled:#f0ece2;',
+  '--ac-border:#c4b89e;--ac-border-light:#e5dcc6;--ac-border-hover:#a89878;',
+  '--ac-radius-sm:12px;--ac-radius-card:20px;--ac-pill:50px;',
+  '--ac-shadow-sm:0 2px 4px 0 rgba(61,52,40,.06);',
+  '--ac-shadow:0 3px 10px 0 rgba(61,52,40,.1);',
+  '--ac-shadow-lg:0 8px 24px 0 rgba(61,52,40,.16);',
+  '--ac-inset:inset 0 2px 4px rgba(114,93,66,.15);',
+  // sidebar tokens: the library uses these for the selected menu row, which
+  // is exactly the role the icon bar plays here.
+  '--ac-active:#b7c6e5;--ac-hover:#d6dff0;',
+  '--ac-success:#6fba2c;--ac-warning:#f5c31c;--ac-error:#e05a5a;',
+  '--ac-ease:cubic-bezier(.4,0,.2,1);',
+  // One place to size the pig; the scene and the panel cap derive from it.
+  '--pig-size:56px;--pig-gap-below:12px;--scene-open:132px;--panel-width:292px;',
+  'position:fixed;right:18px;bottom:18px;z-index:2147483000;',
+  'font-family:var(--ac-font);font-weight:500;letter-spacing:.01em;',
+  '-webkit-user-select:none;user-select:none;touch-action:none;',
+  // The wrapper spans a column wider and taller than what it paints (the
+  // scene's padding, the gap above the panel). Without this it swallows
+  // clicks aimed at the page underneath — which once looked like "sending a
+  // message does nothing" while the whole stack was healthy.
+  'pointer-events:none;',
+  // The pig is the only in-flow child, so the wrapper's box is exactly the
+  // pig's box and the panel can be parked anywhere around it without ever
+  // nudging the pig. `fitPanel` places the panel.
+  'display:block}',
+  '[data-dsh-pig] *{box-sizing:border-box}',
+  '[data-dsh-pig]>*{pointer-events:auto}',
+  // `hidden` MUST win. The UA sheet's `[hidden]{display:none}` ties on
+  // specificity with a single class, so any `.dp-x{display:grid|flex}` rule
+  // below silently beats it and the element keeps rendering. That is exactly
+  // how a collapsed panel ended up showing the icon bar and the hud while
+  // every `el.hidden === true` assertion still passed.
+  '[data-dsh-pig] .dp-card[hidden],[data-dsh-pig] .dp-bar[hidden],',
+  '[data-dsh-pig] .dp-content[hidden],[data-dsh-pig] .dp-hud[hidden],',
+  '[data-dsh-pig] .dp-bubble[hidden],[data-dsh-pig] .dp-scene[hidden],',
+  '[data-dsh-pig] .dp-work[hidden],[data-dsh-pig] .dp-soul[hidden],',
+  '[data-dsh-pig] .dp-poke-hint[hidden],[data-dsh-pig] .dp-daily[hidden],',
+  '[data-dsh-pig] .dp-pig-img[hidden],[data-dsh-pig] .dp-pig-emoji[hidden]{display:none}',
+
+  /* ---------- the panel: cream parchment, border not shadow ---------- */
+  // Taken out of flow on purpose. In flow it would widen the wrapper, and a
+  // wider wrapper moves the pig — the exact thing this layout exists to
+  // prevent. Absolutely positioned, the wrapper's box stays the pig's box
+  // and `fitPanel` can put the panel on whichever side has room.
+  '.dp-card{position:absolute;right:0;bottom:calc(100% + 8px);width:var(--panel-width);',
+  'border-radius:var(--ac-radius-card);overflow:hidden;',
+  'display:flex;flex-direction:column;',
+  'background:var(--ac-bg);border:2px solid var(--ac-border-light);',
+  // 面板自己钉住基准字号与字体：不钉就会继承宿主页面的 16px，
+  // 详情框那种「没写 font-size 的容器」就会比周围大一倍（用户反馈 #2）。
+  'box-shadow:var(--ac-shadow-lg);color:var(--ac-text-body);font-family:var(--ac-font);font-size:11px}',
+
+  /* ---------- the pig: never moved, never boxed ---------- */
+  '.dp-scene{position:relative;height:var(--scene-open);background:none;cursor:grab;',
+  'overflow:visible;display:flex;align-items:flex-end;justify-content:flex-end;',
+  'padding:0 6px var(--pig-gap-below);width:max-content}',
+  '.dp-scene[data-dragging="true"]{cursor:grabbing}',
+  // Collapsed the scene is exactly the pig, so the wrapper paints nothing
+  // extra to click through. Open it widens to the panel so the hud and the
+  // speech bubble have somewhere to sit — the pig is right-aligned either
+  // way, so widening costs it no movement.
+  '[data-dsh-pig][data-open="true"] .dp-scene{width:var(--panel-width)}',
+  // Collapsed the scene shrinks to just the pig. An explicit height rather
+  // than `auto` keeps the pig's line box identical in both states, so
+  // opening moves it by exactly zero pixels.
+  '[data-dsh-pig][data-open="false"] .dp-scene{height:calc(var(--pig-size) + var(--pig-gap-below));',
+  'cursor:pointer}',
+  '.dp-pig{line-height:1;transform-origin:50% 85%;cursor:pointer;position:relative;',
+  'filter:drop-shadow(0 4px 6px rgba(61,52,40,.28));animation:dp-bob 1.8s ease-in-out infinite}',
+  // 装扮点位：猪身上固定的几个锚点，每个点位挂一件。
+  // 以后换真立绘时，只改这里的偏移/尺寸，逻辑和存档都不用动。
+  '.dp-dress{position:absolute;inset:0;pointer-events:none;z-index:3}',
+  '.dp-slot{position:absolute;line-height:1;font-size:15px;transform:translate(-50%,-50%)}',
+  '.dp-slot[data-slot="head"]{left:50%;top:2%}',
+  '.dp-slot[data-slot="face"]{left:50%;top:32%}',
+  '.dp-slot[data-slot="neck"]{left:50%;top:60%}',
+  '.dp-slot[data-slot="body"]{left:50%;top:78%;font-size:19px}',
+  '.dp-slot[data-slot="back"]{left:14%;top:42%;font-size:19px}',
+  '.dp-slot[data-slot="feet"]{left:50%;top:99%}',
+  '[data-dsh-pig][data-open="false"] .dp-pig{filter:drop-shadow(0 5px 9px rgba(61,52,40,.26))}',
+  // A petting hand rather than an arrow. Drawn inline as an SVG data URI so
+  // it needs no asset and can carry the palette's warm outline; the hotspot
+  // sits in the palm, which is where a pat actually lands. The `pointer`
+  // after it is the fallback for browsers that refuse a custom cursor.
+  '.dp-pig{cursor:url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" '
+    + 'width="30" height="30" viewBox="0 0 30 30"><g fill="%23F7C9B6" stroke="%23794F27" '
+    + 'stroke-width="1.7" stroke-linejoin="round"><rect x="10" y="13.5" width="14" height="12" '
+    + 'rx="4.8"/><rect x="10.6" y="6.6" width="3.6" height="10" rx="1.8"/><rect x="14.9" '
+    + 'y="5.1" width="3.6" height="11.5" rx="1.8"/><rect x="19.2" y="6.6" width="3.6" '
+    + 'height="10" rx="1.8"/><rect x="5.7" y="12.4" width="3.4" height="7.8" rx="1.7" '
+    + 'transform="rotate(-27 7.4 16.3)"/></g></svg>\') 16 24, pointer}',
+  // Transform-only keyframes: the pig is an ordinary flex item, so there is
+  // no translateX(-50%) centring to preserve.
+  '@keyframes dp-bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-2.5deg)}}',
+  '@keyframes dp-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(1px) scale(1.09)}}',
+  '@keyframes dp-shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-5deg)}60%{transform:translateX(4px) rotate(5deg)}}',
+  '@keyframes dp-spin{0%{transform:rotate(0)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg)}}',
+  '@keyframes dp-jump{0%{transform:translateY(0)}30%{transform:translateY(-26px) scale(1.12)}60%{transform:translateY(0) scale(.92)}100%{transform:translateY(0)}}',
+  '@keyframes dp-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}55%{transform:rotate(14deg)}}',
+  '@keyframes dp-cough{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px) rotate(-7deg)}70%{transform:translateX(4px) rotate(6deg)}}',
+  '.dp-pig[data-mood="happy"]{animation-duration:1.15s}',
+  '.dp-pig[data-mood="sleepy"]{animation-name:dp-breathe;animation-duration:3.6s}',
+  '.dp-pig[data-mood="hungry"]{animation-name:dp-shake;animation-duration:2.4s}',
+  '.dp-pig[data-mood="dirty"]{animation-name:dp-breathe;animation-duration:2.6s;filter:sepia(.4) drop-shadow(0 4px 6px rgba(61,52,40,.28))}',
+  '.dp-pig[data-mood="sick"]{animation-name:dp-cough;animation-duration:2.2s;filter:hue-rotate(-28deg) saturate(.75) drop-shadow(0 4px 6px rgba(61,52,40,.28))}',
+  // One pose per activity, so being away reads as a thing the pig is doing.
+  '@keyframes dp-typing{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-1.5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-2px) rotate(1.5deg)}}',
+  '@keyframes dp-reading{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(1px) rotate(-5deg)}70%{transform:translateY(1px) rotate(-2deg)}}',
+  '@keyframes dp-walking{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(-4deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-6px) rotate(4deg)}}',
+  '.dp-pig[data-mood="working"]{animation-name:dp-typing;animation-duration:.7s}',
+  '.dp-pig[data-mood="studying"]{animation-name:dp-reading;animation-duration:2.4s}',
+  '.dp-pig[data-mood="traveling"]{animation-name:dp-walking;animation-duration:1s}',
+  '.dp-pig[data-mood="dead"]{animation:none;filter:grayscale(1)}',
+  '.dp-pig[data-react]{animation-duration:.85s;animation-iteration-count:1}',
+  '.dp-pig[data-react="feed"]{animation-name:dp-jump}',
+  '.dp-pig[data-react="bathe"]{animation-name:dp-wobble;animation-duration:1.05s}',
+  '.dp-pig[data-react="play"]{animation-name:dp-spin;animation-duration:.9s}',
+  '.dp-pig[data-react="away"]{animation-name:dp-jump;animation-duration:.9s}',
+  '.dp-pig[data-react="cure"]{animation-name:dp-spin;animation-duration:.9s}',
+  '.dp-pig[data-react="levelup"]{animation-name:dp-jump;animation-duration:.95s}',
+  '.dp-pig[data-react="refuse"]{animation-name:dp-shake;animation-duration:.5s}',
+
+  /* ---------- what the pig is off doing ---------- */
+  '[data-dsh-pig] .dp-work{display:flex;flex-direction:column;align-items:center;gap:4px;',
+  'margin:0 2px 6px 0}',
+  '.dp-prop{font-size:26px;line-height:1;filter:drop-shadow(0 3px 5px rgba(61,52,40,.22));',
+  'animation:dp-prop-bob 2.4s ease-in-out infinite}',
+  '[data-dsh-pig][data-away="study"] .dp-prop{animation-duration:3.4s}',
+  '[data-dsh-pig][data-away="trip"] .dp-prop{animation-name:dp-prop-swing;animation-duration:1.6s}',
+  '[data-dsh-pig][data-away="interest"] .dp-prop{animation-duration:3.4s}',
+  '@keyframes dp-prop-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}',
+  '@keyframes dp-prop-swing{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(8deg)}}',
+  '.dp-progress{width:42px;height:7px;border-radius:var(--ac-pill);background:var(--ac-bg-disabled);',
+  'box-shadow:var(--ac-inset);overflow:hidden}',
+  '.dp-progress i{display:block;height:100%;border-radius:var(--ac-pill);',
+  'background:var(--ac-primary);transition:width .5s var(--ac-ease)}',
+  // The scene needs room for the prop; it grows leftward, so the pig stays put.
+  '[data-dsh-pig][data-away="work"] .dp-scene,[data-dsh-pig][data-away="study"] .dp-scene,',
+  '[data-dsh-pig][data-away="interest"] .dp-scene,',
+  '[data-dsh-pig][data-away="trip"] .dp-scene{width:max-content;min-width:132px}',
+  // 加冕后的形态有动作立绘（桌子、书、行李都画在图里）：不再摆 emoji 道具，
+  // 动作也收小，免得把画里的东西甩来甩去（立绘与动作来自 PR #2）。
+  '[data-dsh-pig][data-art-actions="true"] .dp-prop{display:none}',
+  '.dp-pig[data-art-actions="true"][data-mood="working"]:not([data-react]){animation:dp-king-work 1.4s ease-in-out infinite}',
+  '.dp-pig[data-art-actions="true"][data-mood="studying"]:not([data-react]){animation:dp-king-study 2.4s ease-in-out infinite}',
+  '.dp-pig[data-art-actions="true"][data-mood="traveling"]:not([data-react]){animation:dp-king-walk .8s ease-in-out infinite}',
+  '@keyframes dp-king-work{0%,100%{transform:translateY(0)}50%{transform:translateY(1px) rotate(1deg)}}',
+  '@keyframes dp-king-study{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}',
+  '@keyframes dp-king-walk{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}',
+
+  /* ---------- hud: a cream tag beside the pig ---------- */
+  '.dp-hud{position:absolute;left:9px;top:7px;display:flex;flex-direction:column;gap:1px;',
+  'font-size:10.5px;font-weight:600;line-height:1.45;color:var(--ac-text);',
+  'background:var(--ac-bg);border:2px solid var(--ac-border-light);padding:5px 10px;',
+  'border-radius:var(--ac-radius-sm);box-shadow:var(--ac-shadow-sm)}',
+  '.dp-hud b{font-weight:700}',
+
+  // A drawn sprite is sized by the same variable as the emoji, so growing up
+  // works identically either way.
+  '.dp-pig-img{width:var(--pig-size);height:var(--pig-size);display:block;',
+  '-webkit-user-drag:none;user-select:none}',
+  '.dp-pig-emoji{font-size:var(--pig-size);line-height:1}',
+
+  // No drawings yet — every stage is the same pig, so age reads as size plus
+  // a faded coat on the last one.
+  '[data-dsh-pig][data-faded="true"] .dp-pig-emoji{filter:grayscale(.5) opacity(.72)}',
+
+  // The box advertises itself: a slow breathing glow plus a label, so it
+  // does not read as scenery.
+  '[data-dsh-pig][data-unhatched="true"] .dp-pig{cursor:pointer;',
+  'animation:dp-box-breathe 2.4s ease-in-out infinite}',
+  '[data-dsh-pig][data-unhatched="true"] .dp-pig-emoji{',
+  'filter:drop-shadow(0 0 0 rgba(255,214,102,0)) drop-shadow(0 4px 6px rgba(61,52,40,.28))}',
+  '@keyframes dp-box-breathe{0%,100%{transform:translateY(0) scale(1)}',
+  '50%{transform:translateY(-3px) scale(1.06)}}',
+  '.dp-poke-hint{position:absolute;right:2px;bottom:-2px;display:flex;align-items:center;gap:3px;',
+  'font-size:9.5px;font-weight:700;color:var(--ac-text);background:var(--ac-bg);',
+  'border:1.5px solid var(--ac-border-light);border-radius:var(--ac-pill);padding:1px 7px;',
+  'box-shadow:0 2px 0 rgba(61,52,40,.12);pointer-events:none;white-space:nowrap;z-index:3;',
+  'animation:dp-hint-bob 1.6s ease-in-out infinite}',
+  '@keyframes dp-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}',
+  // Each poke shakes it harder; the third one opens it instead.
+  '[data-dsh-pig] .dp-pig[data-mood="poke"],',
+  '[data-dsh-pig][data-poke] .dp-pig{animation-name:dp-poke-shake}',
+  '[data-dsh-pig][data-poke="2"] .dp-pig{animation-duration:.28s}',
+  '@keyframes dp-poke-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}',
+  '50%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}',
+
+  // The shop's tiles live in css-tiles.js since B8.
+].join('')

package/src/client/css-card.js

@@ -0,0 +1,63 @@
+// @ts-check
+/**
+ * 居民卡的样式（B9）—— 照 animal-island-ui 的 Card `pattern-*`：淡色底上两层点点
+ * （28px / 14px 网格），1.5px 同色描边，圆角 20px；「标签：值」的值放在米白胶囊里。
+ * 女孩用 pattern-app-pink，男孩用 pattern-app-blue（参数取自它的 card.module.less）。
+ * @module dsh-piggy/client/css-card
+ */
+
+export const CSS_CARD = [
+  '.dp-vcard{position:relative;padding:14px 14px 12px;border-radius:20px;color:var(--ac-text-body);',
+  '--vc-dot:rgba(196,184,158,.15);--vc-dot2:rgba(196,184,158,.1);--vc-bg:rgb(247,243,223);--vc-line:#d4c4a8;',
+  'background:radial-gradient(circle,var(--vc-dot) 1.5px,transparent 1.5px),',
+  'radial-gradient(circle,var(--vc-dot2) 1px,transparent 1px),var(--vc-bg);',
+  'background-size:28px 28px,14px 14px;background-position:0 0,7px 7px;border:1.5px solid var(--vc-line)}',
+  '.dp-vcard[data-sex="girl"]{--vc-dot:rgba(248,166,178,.18);--vc-dot2:rgba(255,200,210,.12);--vc-bg:#fde4e8;--vc-line:#f8a6b2}',
+  '.dp-vcard[data-sex="boy"]{--vc-dot:rgba(136,157,240,.18);--vc-dot2:rgba(180,195,255,.12);--vc-bg:#e8edff;--vc-line:#889df0}',
+
+  // Top: the photo and who it is.
+  '.dp-vcard-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}',
+  '.dp-vcard-avatar{flex:none;width:72px;height:72px;border-radius:18px;display:flex;align-items:center;',
+  'justify-content:center;background:#fffbe7;border:2px solid var(--vc-line);box-shadow:0 3px 0 rgba(61,52,40,.12)}',
+  '.dp-vcard-img{width:56px;height:56px;display:block}',
+  '.dp-vcard-e{font-size:40px;line-height:1}',
+  '.dp-vcard-who{display:flex;flex-direction:column;gap:3px;min-width:0}',
+  '.dp-vcard-name{font-size:15px;font-weight:800;color:var(--ac-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+  '.dp-vcard-sub{font-size:10.5px;font-weight:600;color:var(--ac-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+
+  // 「标签：值」 rows.
+  '.dp-vcard-row{display:flex;align-items:center;gap:6px;margin-top:7px;min-width:0}',
+  '.dp-vcard-label{flex:none;width:44px;font-size:10.5px;font-weight:700;color:var(--ac-text)}',
+  '.dp-vcard-value{flex:1;min-width:0;padding:5px 11px;border-radius:var(--ac-pill);background:#faf8f2;',
+  'font-size:11px;font-weight:600;color:var(--ac-text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+  // The motto is the pig talking: a bubble that may take two lines.
+  '.dp-vcard-motto-row{align-items:flex-start}',
+  '.dp-vcard-motto-row .dp-vcard-label{margin-top:6px}',
+  '.dp-vcard-value.dp-vcard-motto{border-radius:12px;white-space:normal;line-height:1.45}',
+  '.dp-vcard-edit{flex:none;font:inherit;font-size:12px;line-height:1;width:24px;height:24px;padding:0;cursor:pointer;',
+  'border-radius:50%;border:2px solid var(--vc-line);background:#fffbe7}',
+  '.dp-vcard-edit:hover{background:var(--ac-hover)}',
+  '.dp-vcard-input{flex:1;min-width:0;padding:3px 9px;font-size:11px}',
+  // In-place editing: the two buttons stay as small as the pencil they replace.
+  '.dp-vcard-row .dp-mini{flex:none;padding:3px 9px;font-size:10px;box-shadow:none}',
+  '[data-dsh-pig] .dp-vcard-row .dp-mini.dp-mini-plain{background:#fffbe7;color:var(--ac-text);border:2px solid var(--vc-line);box-shadow:none}',
+
+  '.dp-vcard-foot{margin-top:12px;padding-top:9px;border-top:1.5px dashed var(--vc-line);',
+  'font-size:10px;font-weight:600;color:var(--ac-text-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+
+  // 加冕 App: one cream box per form, its picture on the left, conditions as small chips.
+  '.dp-crown{margin-bottom:10px;padding:10px 12px;border-radius:16px;background:#fffbe7;border:2px dashed #e8c66a}',
+  '.dp-crown.dp-crown-now{border-style:solid;background:#fdf3d0}',
+  '.dp-crown-top{display:flex;gap:10px;align-items:flex-start}',
+  '.dp-crown-pic{flex:none;width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;',
+  'background:#fff;border:2px solid #f0dca0;font-size:30px}',
+  '.dp-crown-img{width:50px;height:50px;display:block}',
+  '.dp-crown-side{flex:1;min-width:0}',
+  '.dp-crown-head{font-size:12px;font-weight:800;color:var(--ac-text);margin-bottom:6px}',
+  '.dp-crown-done{font-size:11px;font-weight:700;color:#3f8a62}',
+  '.dp-crown-reqs{display:flex;flex-wrap:wrap;gap:4px}',
+  '.dp-crown-req{padding:2px 7px;border-radius:var(--ac-pill);font-size:10px;font-weight:700;white-space:nowrap;',
+  'background:#f3ece0;color:var(--ac-text-2)}',
+  '.dp-crown-req.dp-crown-ok{background:#dff3e8;color:#3f8a62}',
+  '.dp-crown .dp-btn{width:100%;margin-top:9px}',
+].join('')

package/src/client/css-tabs.js

@@ -0,0 +1,250 @@
+// @ts-check
+/**
+ * 面板内部样式：页签、列表、格子、装扮点位与调试页。
+ *
+ * @module dsh-piggy/client/css-tabs
+ */
+
+
+import { button, meter } from './dom.js'
+
+export const CSS_TABS = [
+  /* ---------- developer tab ---------- */
+  '.dp-dev-note{font-size:10px;color:var(--ac-text-2);margin:4px 0 2px;line-height:1.5}',
+  '.dp-dev-row{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 2px}',
+  '.dp-dev-btn{flex:0 0 auto;font-size:10px;padding:3px 8px}',
+  '.dp-on{background:var(--ac-primary);color:#fff;border-color:var(--ac-primary)}',
+  '[data-dsh-pig][data-dev="true"] .dp-ico[data-tab="dev"]{color:var(--ac-primary)}',
+
+  /* ---------- the soul that settles on an unclaimed grave ---------- */
+  '.dp-soul{position:absolute;left:50%;transform:translateX(-50%);top:-4px;font-size:22px;',
+  'line-height:1;opacity:.9;pointer-events:none;z-index:1;',
+  'animation:dp-haunt 3.4s ease-in-out infinite}',
+  '@keyframes dp-haunt{0%,100%{transform:translate(-50%,0) scale(1);opacity:.75}',
+  '50%{transform:translate(-50%,-9px) scale(1.08);opacity:1}}',
+  // A grave does not bob about like a living pig.
+  '.dp-pig[data-stage="grave"]{animation:none;filter:grayscale(.35) drop-shadow(0 4px 6px rgba(61,52,40,.3))}',
+  '.dp-pig[data-stage="box"]{animation:dp-box-wobble 3.2s ease-in-out infinite}',
+  '@keyframes dp-box-wobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}',
+  '45%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}}',
+
+  // Patting squashes the pig flat. Short, so rapid clicking keeps up.
+  '[data-dsh-pig] .dp-pig[data-react="pet"]{animation-name:dp-squash;animation-duration:.42s}',
+  '@keyframes dp-squash{0%{transform:scale(1,1)}35%{transform:scale(1.16,.74) translateY(2px)}',
+  '60%{transform:scale(.94,1.08) translateY(-3px)}100%{transform:scale(1,1)}}',
+
+  /* ---------- speech bubble ---------- */
+  // `z-index` matters: the pig comes later in the DOM, so without it the pig
+  // paints over the bubble whenever the two boxes overlap — which is exactly
+  // what happened when collapsed and the scene was only as wide as the pig.
+  '.dp-bubble{position:absolute;right:8px;top:7px;z-index:2;max-width:162px;padding:6px 10px;',
+  'border-radius:var(--ac-radius-sm);font-size:10.5px;font-weight:600;line-height:1.45;',
+  'color:var(--ac-text-body);background:var(--ac-bg-input);',
+  'border:2px solid var(--ac-border-light);box-shadow:var(--ac-shadow-sm)}',
+  // Tail drawn as a small rotated square so the 2px border stays continuous.
+  '.dp-bubble::after{content:"";position:absolute;left:14px;bottom:-6px;width:8px;height:8px;',
+  'background:var(--ac-bg-input);border-right:2px solid var(--ac-border-light);',
+  'border-bottom:2px solid var(--ac-border-light);transform:rotate(45deg)}',
+  // Reply buttons under a line: small pills, the mint of the primary colour
+  // without the 3D base, which the spec keeps for real primary buttons.
+  '.dp-bubble-replies{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}',
+  // 猪头上的日常气泡（签到 / 礼包）：不用新颜色，沿用主色与卡片底色。
+  // 挂在场景**上方**（不是 top 边缘）：折叠时场景就是猪本身，用 top:-6px
+  // 会让气泡叠在猪头上（用户反馈 #6）。
+  '.dp-daily{position:absolute;bottom:calc(100% + 7px);left:50%;width:36px;margin-left:-18px;',
+  'font:inherit;font-size:15px;line-height:1;padding:3px 0;cursor:pointer;text-align:center;',
+  'border:2px solid var(--ac-border);border-radius:50px;background:var(--ac-bg-input);',
+  'box-shadow:0 3px 0 rgba(61,52,40,.14);animation:dp-daily-bob 2.4s var(--ac-ease) infinite}',
+  // 折叠时场景就剩猪本身（而且它还在上下浮动 ±7px），再多让开一点。
+  '[data-dsh-pig][data-open="false"] .dp-daily{bottom:calc(100% + 16px)}',
+  // 展开时场景有面板那么宽、那么高，挂在场景上方会压到图标栏（B8 截图里压在「商店」上）：
+  // 改成蹲在猪左边、贴着猪身子（再高会碰到左边的名字框）。
+  '[data-dsh-pig][data-open="true"] .dp-daily{left:auto;margin-left:0;',
+  'right:calc(6px + var(--pig-size) + 10px);bottom:calc(var(--pig-gap-below) + 4px)}',
+  '.dp-daily:hover{border-color:var(--ac-border-hover)}',
+  '.dp-daily:focus-visible{outline:2px solid var(--ac-primary);outline-offset:1px}',
+  // 名字必须独占：叫 dp-bob 会覆盖猪的待机动画（css-base.js），
+  // 而那个动画的 transform 一被替掉，猪就会横跳半个身位。
+  // 只上下浮：横向居中改用 margin，展开时才能挪到猪旁边。
+  '@keyframes dp-daily-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}',
+  // 日记：折叠时只有首句，展开是全文。
+  '.dp-diary{cursor:pointer}',
+  '.dp-diary[data-open="true"] .dp-diary-full{display:block}',
+  '.dp-diary-full{margin-top:4px;line-height:1.5}',
+  '.dp-reply{font:inherit;font-size:10px;font-weight:700;padding:2px 9px;cursor:pointer;',
+  'border-radius:var(--ac-pill);border:2px solid var(--ac-border-light);background:var(--ac-bg);',
+  'color:var(--ac-text);transition:border-color .15s var(--ac-ease)}',
+  '.dp-reply:hover{border-color:var(--ac-border-hover)}',
+  '.dp-reply:focus-visible{outline:2px solid var(--ac-primary);outline-offset:1px}',
+  // Collapsed, the scene is exactly the pig, so a bubble drawn inside it
+  // would sit on the pig's face. Float it above the head with the tail
+  // pointing down, anchored to the right edge so it can never run off the
+  // window. The hearts rise from behind it.
+  '[data-dsh-pig][data-open="false"] .dp-bubble{top:auto;bottom:calc(100% + 8px);',
+  'left:auto;right:0;max-width:230px}',
+  '[data-dsh-pig][data-open="false"] .dp-bubble::after{left:auto;right:26px;',
+  'top:100%;bottom:auto;margin:0;transform:rotate(45deg);',
+  'border:0;border-right:2px solid var(--ac-border-light);',
+  'border-bottom:2px solid var(--ac-border-light)}',
+
+  /* ---------- icon bar: the library sidebar, laid on its side ---------- */
+  '.dp-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;',
+  'background:var(--ac-bg-content);border-top:2px solid var(--ac-border-light);',
+  'border-bottom:2px solid var(--ac-border-light)}',
+  '.dp-ico{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;',
+  'font:inherit;font-size:9.5px;font-weight:600;color:var(--ac-text-muted);background:none;',
+  'border:2px solid transparent;border-radius:var(--ac-radius-sm);padding:5px 1px;',
+  'transition:all .2s var(--ac-ease)}',
+  '.dp-ico span.dp-ico-e{font-size:18px;line-height:1}',
+  '.dp-ico:hover{background:var(--ac-hover)}',
+  '.dp-ico[data-active="true"]{background:var(--ac-active);border-color:#9db0d6;',
+  'color:var(--ac-text);font-weight:700}',
+  '.dp-ico:focus-visible{outline:2px solid var(--ac-primary);outline-offset:1px}',
+  '@keyframes dp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}',
+  '.dp-ico[data-alert="true"] span.dp-ico-e{animation:dp-pulse 1.4s ease-in-out infinite}',
+
+  /* ---------- content ---------- */
+  '.dp-content{padding:12px 13px 13px;overflow-y:auto;flex:1 1 auto;min-height:0}',
+  '.dp-content::-webkit-scrollbar{width:8px}',
+  '.dp-content::-webkit-scrollbar-thumb{background:var(--ac-border-light);border-radius:4px}',
+  '.dp-content::-webkit-scrollbar-track{background:transparent}',
+  '.dp-title{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;',
+  'margin-bottom:8px}',
+  '.dp-title b{font-weight:700;color:var(--ac-text)}',
+  '.dp-title span{color:var(--ac-text-2);font-size:10.5px;font-weight:600}',
+  '.dp-row{display:flex;justify-content:space-between;font-size:11px;font-weight:600;',
+  'color:var(--ac-text-body);margin:2px 0}',
+  '.dp-row b{font-weight:700;color:var(--ac-text)}',
+
+  /* ---------- attribute bars: pill track with an inset well ---------- */
+  '.dp-meter{height:9px;border-radius:var(--ac-pill);background:var(--ac-bg-disabled);',
+  'box-shadow:var(--ac-inset);overflow:hidden;margin:3px 0 8px}',
+  '.dp-meter i{display:block;height:100%;border-radius:var(--ac-pill);',
+  'background:var(--ac-warning);transition:width .35s var(--ac-ease)}',
+  '.dp-meter.dp-mood i{background:#f8a6b2}',
+  '.dp-meter.dp-clean i{background:#82d5bb}',
+  '.dp-meter.dp-health i{background:#8ac68a}',
+  '.dp-traits{display:flex;gap:10px;font-size:10.5px;font-weight:600;color:var(--ac-text-2);',
+  'margin:8px 0 3px}',
+
+  /* ---------- banners ---------- */
+  '.dp-alert{margin:0 0 9px;padding:8px 10px;border-radius:var(--ac-radius-sm);',
+  'font-size:10.5px;font-weight:600;line-height:1.55;border:2px solid}',
+  '.dp-alert b{font-weight:700;color:var(--ac-text)}',
+  '.dp-alert.dp-sick{background:#fdeeee;border-color:#f2c2c2}',
+  '.dp-alert.dp-work{background:#eef1fb;border-color:#c3cdf0}',
+  '.dp-alert.dp-dead{background:var(--ac-bg-disabled);border-color:var(--ac-border-light)}',
+  '.dp-alert.dp-legacy{background:#fdf7e2;border-color:#f0dfa8}',
+
+  /* ---------- buttons: secondary is a cream pill with soft elevation ---- */
+  '.dp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}',
+  '.dp-btn{display:flex;align-items:center;justify-content:center;gap:5px;font:inherit;',
+  'font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ac-text-body);',
+  'cursor:pointer;padding:8px 6px;border-radius:var(--ac-pill);',
+  'border:2px solid var(--ac-border);background:var(--ac-bg-input);',
+  'box-shadow:var(--ac-shadow-sm);transition:all .2s var(--ac-ease)}',
+  '.dp-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--ac-shadow);',
+  'border-color:var(--ac-border-hover)}',
+  '.dp-btn:active:not(:disabled){transform:translateY(2px);box-shadow:var(--ac-shadow-sm)}',
+  '.dp-btn:focus-visible{outline:2px solid var(--ac-primary);outline-offset:1px}',
+  '.dp-btn:disabled{background:var(--ac-bg-disabled);color:var(--ac-text-disabled);',
+  'border-color:var(--ac-border-light);box-shadow:none;cursor:not-allowed}',
+  '.dp-btn-wide{grid-column:1/-1}',
+  '.dp-btn .dp-wait{color:var(--ac-text-2);font-size:10px;font-weight:600}',
+
+  /* ---------- segmented control ---------- */
+  '.dp-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:9px}',
+  '.dp-seg button{font:inherit;font-size:10.5px;font-weight:600;color:var(--ac-text-muted);',
+  'cursor:pointer;padding:6px 2px;border-radius:var(--ac-pill);',
+  'border:2px solid var(--ac-border-light);background:var(--ac-bg-input);',
+  // One line, always: a label that wraps makes its button taller than the rest.
+  'white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
+  'transition:all .2s var(--ac-ease)}',
+  '.dp-seg button:hover{background:var(--ac-hover)}',
+  // The work tab has three skills, not four stages.
+  '.dp-seg.dp-seg-3{grid-template-columns:repeat(3,minmax(0,1fr))}',
+  // Work rows: two small buttons on the right, 详情 opens the checklist below.
+  '.dp-job-locked{opacity:.75}',
+  '.dp-job-detail{margin-top:-2px}',
+  '.dp-req{font-size:10.5px;font-weight:600;color:var(--ac-error);line-height:1.6}',
+  '.dp-req.dp-req-ok{color:var(--ac-success)}',
+  '.dp-seg button[data-active="true"]{background:var(--ac-active);border-color:#9db0d6;',
+  'color:var(--ac-text);font-weight:700}',
+
+  /* ---------- list rows ---------- */
+  // minmax(0,1fr): a long nowrap line must ellipsize, not widen the panel.
+  '.dp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}',
+  '.dp-list{display:flex;flex-direction:column;gap:7px}',
+  '.dp-shelf{margin:9px 0 1px;font-size:10px;font-weight:700;color:var(--ac-text-2);',
+  'letter-spacing:.04em}',
+  '.dp-shelf:first-child{margin-top:0}',
+  '.dp-item{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;',
+  'color:var(--ac-text-body);padding:7px 9px;border-radius:var(--ac-radius-sm);',
+  'background:var(--ac-bg-content);border:2px solid var(--ac-border-light)}',
+  '.dp-item .dp-grow{flex:1;min-width:0}',
+  '.dp-item .dp-dim{color:var(--ac-text-2);font-size:10px;font-weight:500;overflow:hidden;',
+  'text-overflow:ellipsis;white-space:nowrap}',
+  '.dp-item.dp-wanted{background:#fdf7e2;border-color:var(--ac-warning)}',
+  // B6 talk row: name + 改 + 免打扰, and the inline name input.
+  '.dp-talk{gap:6px;margin-top:8px}',
+  '.dp-talk>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+  '.dp-mini-plain{background:var(--ac-bg-input);color:var(--ac-text);border:2px solid var(--ac-border-light);box-shadow:none}',
+  '.dp-mini-plain:hover:not(:disabled){background:var(--ac-hover)}',
+  '.dp-input{flex:1;min-width:0;font:inherit;font-size:11px;padding:3px 8px;border-radius:var(--ac-pill);',
+  'border:2px solid var(--ac-border);background:var(--ac-bg-input);color:var(--ac-text)}',
+  '.dp-input:focus{outline:2px solid var(--ac-primary);outline-offset:1px}',
+
+  /* ---------- primary buttons: teal pill with the game 3D bottom edge --- */
+  '.dp-mini{font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff;',
+  'cursor:pointer;padding:6px 13px;border-radius:var(--ac-pill);',
+  'border:2px solid var(--ac-primary-active);background:var(--ac-primary);',
+  'box-shadow:0 3px 0 0 var(--ac-primary-active);transition:all .15s var(--ac-ease)}',
+  '.dp-mini:hover:not(:disabled){background:var(--ac-primary-hover);transform:translateY(-1px);',
+  'box-shadow:0 4px 0 0 var(--ac-primary-active)}',
+  '.dp-mini:active:not(:disabled){transform:translateY(2px);',
+  'box-shadow:0 1px 0 0 var(--ac-primary-active)}',
+  '.dp-mini:focus-visible{outline:2px solid var(--ac-primary);outline-offset:2px}',
+  '.dp-mini:disabled{background:var(--ac-bg-disabled);color:var(--ac-text-disabled);',
+  'border-color:var(--ac-border-light);box-shadow:none;cursor:not-allowed}',
+
+  /* ---------- the care item picker ---------- */
+  '.dp-pick{margin-top:9px;padding:9px 10px;border-radius:var(--ac-radius-sm);font-size:10.5px;',
+  'background:var(--ac-bg-content);border:2px solid var(--ac-border-light)}',
+  '.dp-pick-head{font-size:10.5px;font-weight:700;color:var(--ac-text);margin-bottom:7px}',
+  '.dp-cancel{display:block;width:100%;margin-top:8px;font:inherit;font-size:10.5px;',
+  'font-weight:600;color:var(--ac-text-2);cursor:pointer;padding:5px;',
+  'border-radius:var(--ac-pill);border:2px solid var(--ac-border-light);',
+  'background:var(--ac-bg-input);transition:all .2s var(--ac-ease)}',
+  '.dp-cancel:hover{background:var(--ac-hover);color:var(--ac-text)}',
+  '.dp-count{margin-left:2px;font-size:9px;font-weight:700;color:var(--ac-text-2);',
+  'background:var(--ac-bg-content);border-radius:var(--ac-pill);padding:0 5px}',
+  '.dp-btn[data-open-picker="true"]{background:var(--ac-active);border-color:#9db0d6}',
+  '.dp-seg button[data-locked="true"]{color:var(--ac-text-disabled);',
+  'border-style:dashed;background:var(--ac-bg-disabled)}',
+  '.dp-seg button[data-locked="true"]:hover{background:var(--ac-bg-disabled)}',
+  '.dp-locked{margin:0 0 8px;font-size:10.5px;font-weight:600;line-height:1.5;',
+  'color:var(--ac-text-body);background:#fdf7e2;border:2px solid #f0dfa8;',
+  'border-radius:var(--ac-radius-sm);padding:6px 9px}',
+  // The per-job gate reads as a lock, not as another grey stat line: a
+  // threshold the pig cannot see is indistinguishable from a broken button.
+  '.dp-lock{font-size:10px;font-weight:700;line-height:1.5;color:#9a6b1f}',
+
+  '.dp-empty{color:var(--ac-text-2);font-size:10.5px;font-weight:500;line-height:1.65;',
+  'margin-top:4px}',
+  '.dp-memo{margin-top:9px;padding-top:8px;border-top:2px solid var(--ac-border-light);',
+  'color:var(--ac-text-muted);font-size:10px;font-weight:500;line-height:1.55;',
+  'white-space:pre-wrap;word-break:break-word}',
+
+  /* ---------- particles and toast ---------- */
+  '.dp-fx{position:absolute;z-index:1;pointer-events:none;font-size:17px;',
+  'animation:dp-rise 1.1s ease-out forwards}',
+  '@keyframes dp-rise{0%{opacity:0;transform:translate(var(--dx0,0),4px) scale(.5)}18%{opacity:1}',
+  '100%{opacity:0;transform:translate(var(--dx,0),-56px) scale(1.15)}}',
+  '.dp-toast{position:absolute;left:9px;right:9px;top:8px;padding:8px 11px;',
+  'border-radius:var(--ac-radius-sm);font-size:10.5px;font-weight:600;line-height:1.5;',
+  'color:var(--ac-text);background:var(--ac-bg-input);border:2px solid var(--ac-border);',
+  'box-shadow:var(--ac-shadow);pointer-events:none;white-space:normal;',
+  'animation:dp-toast 4.6s var(--ac-ease) forwards}',
+  '@keyframes dp-toast{0%{opacity:0;transform:translateY(-8px)}8%{opacity:1;transform:translateY(0)}',
+  '82%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}',
+].join('')

package/src/client/css-tiles.js

@@ -0,0 +1,89 @@
+// @ts-check
+/**
+ * 方块页（学习 / 商店 / 背包）的样式 —— B8，照动森手机主屏：
+ * 3 列彩色圆角大方块、大图标、方块下面一行小字；点进去整屏换成同色浅一档的小方块。
+ *
+ * 配色取 animal-island-ui 的 app 方块色（docs/design-system/design-tokens.md），
+ * 声明在组件根节点上，不碰宿主页面的 :root。
+ * @module dsh-piggy/client/css-tiles
+ */
+
+export const CSS_TILES = [
+  '[data-dsh-pig]{--tile-pink:#f8a6b2;--tile-purple:#b77dee;--tile-blue:#889df0;',
+  '--tile-yellow:#f7cd67;--tile-orange:#e59266;--tile-teal:#82d5bb;--tile-green:#8ac68a;',
+  '--tile-red:#fc736d;--tile-lime:#d1da49;--tile-peach:#e18c6f;--tile-brown:#9a835a}',
+  '.dp-tile[data-color="pink"]{--tile-c:var(--tile-pink)}',
+  '.dp-tile[data-color="purple"]{--tile-c:var(--tile-purple)}',
+  '.dp-tile[data-color="blue"]{--tile-c:var(--tile-blue)}',
+  '.dp-tile[data-color="yellow"]{--tile-c:var(--tile-yellow)}',
+  '.dp-tile[data-color="orange"]{--tile-c:var(--tile-orange)}',
+  '.dp-tile[data-color="teal"]{--tile-c:var(--tile-teal)}',
+  '.dp-tile[data-color="green"]{--tile-c:var(--tile-green)}',
+  '.dp-tile[data-color="red"]{--tile-c:var(--tile-red)}',
+  '.dp-tile[data-color="lime"]{--tile-c:var(--tile-lime)}',
+  '.dp-tile[data-color="peach"]{--tile-c:var(--tile-peach)}',
+  '.dp-tile[data-color="brown"]{--tile-c:var(--tile-brown)}',
+
+  // The grid: three columns that can never be widened by their content.
+  '.dp-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:4px 2px 2px}',
+
+  // A tile is a column: the coloured square, then its name, then a note.
+  '.dp-tile{font:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;',
+  'padding:0;margin:0;border:0;background:none;cursor:pointer;color:var(--ac-text)}',
+  '.dp-tile-icon{position:relative;display:flex;align-items:center;justify-content:center;',
+  'width:50px;height:50px;border-radius:15px;background:var(--tile-c,var(--ac-bg-content));',
+  'box-shadow:0 3px 0 rgba(61,52,40,.16);transition:transform .15s var(--ac-ease),box-shadow .15s var(--ac-ease)}',
+  '.dp-tile-e{font-size:24px;line-height:1;filter:drop-shadow(0 1px 1px rgba(61,52,40,.18))}',
+  '.dp-tile:hover:not(:disabled) .dp-tile-icon{transform:translateY(-2px);box-shadow:0 5px 0 rgba(61,52,40,.16)}',
+  '.dp-tile:active:not(:disabled) .dp-tile-icon{transform:translateY(2px);box-shadow:0 1px 0 rgba(61,52,40,.16)}',
+  '.dp-tile:focus-visible{outline:none}',
+  '.dp-tile:focus-visible .dp-tile-icon{outline:2px solid var(--ac-primary);outline-offset:2px}',
+  // One line each, never wrapping: every tile in a row stays the same height.
+  '.dp-tile-n,.dp-tile-note{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}',
+  '.dp-tile-n{font-size:10.5px;font-weight:700}',
+  '.dp-tile-note{font-size:9.5px;font-weight:600;color:var(--ac-text-2);margin-top:-2px}',
+  // Corner marks on the square: a count top-right, a word top-left.
+  '.dp-tile-badge,.dp-tile-tag{position:absolute;top:-5px;font-size:9px;font-weight:800;line-height:1;',
+  'padding:3px 5px;border-radius:var(--ac-pill);white-space:nowrap;border:2px solid var(--ac-bg)}',
+  '.dp-tile-badge{right:-6px;background:var(--ac-primary);color:#fff}',
+  '.dp-tile-tag{left:-6px;background:var(--ac-warning);color:var(--ac-text)}',
+  // Second layer: the same colour, a shade paler and a little smaller.
+  // Sizes trimmed on 2026-10-01 (owner: the tiles were too big): 50px / 44px.
+  '.dp-tile-soft .dp-tile-icon{width:44px;height:44px;border-radius:13px;',
+  'background:color-mix(in srgb,var(--tile-c) 42%,#fffbe7)}',
+  '.dp-tile-soft .dp-tile-e{font-size:21px}',
+  // Locked: greyed but still openable (a stage can be looked into before it opens).
+  '.dp-tile[data-locked="true"] .dp-tile-icon{filter:grayscale(.75);opacity:.6}',
+  '.dp-tile[data-dim="true"] .dp-tile-icon,.dp-tile:disabled .dp-tile-icon{opacity:.45;box-shadow:none}',
+  '.dp-tile[data-dim="true"] .dp-tile-n,.dp-tile:disabled .dp-tile-n{color:var(--ac-text-2)}',
+  '.dp-tile:disabled{cursor:default}',
+  '.dp-tile[data-active="true"] .dp-tile-icon{outline:3px solid var(--ac-active);outline-offset:2px}',
+
+  // The second layer's top row: back, title, one grey line.
+  '.dp-drill{display:flex;align-items:center;gap:7px;margin:0 0 10px}',
+  '.dp-drill-back{font:inherit;font-size:16px;font-weight:800;line-height:1;width:26px;height:26px;',
+  'flex:none;cursor:pointer;color:var(--ac-text);border-radius:50%;',
+  'border:2px solid var(--ac-border-light);background:var(--ac-bg-input)}',
+  '.dp-drill-back:hover{border-color:var(--ac-border-hover)}',
+  '.dp-drill-title{font-size:12px;font-weight:800;color:var(--ac-text);white-space:nowrap}',
+  '.dp-drill-info{flex:1;min-width:0;text-align:right;font-size:10px;font-weight:600;',
+  'color:var(--ac-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+  // B9: the home screen replaces the bottom icon bar. The bar still exists
+  // (its icons carry the alert state the home tiles read) but is not shown.
+  '[data-dsh-pig] .dp-card .dp-bar{display:none}',
+  '.dp-app-head{margin-bottom:12px}',
+  // Out working, the collapsed scene shrinks to pig + prop; open, it must stay
+  // as wide as the panel, or the name plate is squeezed onto the pig.
+  '[data-dsh-pig][data-open="true"][data-away] .dp-scene{width:var(--panel-width)}',
+  // Banners only live on the status tab now, with room to breathe below.
+  '[data-dsh-pig] .dp-alert{margin-bottom:14px}',
+  '[data-dsh-pig] .dp-alert + .dp-actions{margin-bottom:14px}',
+  '.dp-job-go{display:block;width:100%;margin-top:9px}',
+  // A picked tile's details (a diary page, a souvenir's story) sit under the grid.
+  '.dp-tile-card{margin-top:12px}',
+  // 更新 App: the release notes keep their line breaks but stay short.
+  '.dp-update-notes{white-space:pre-wrap;font-size:10.5px;line-height:1.5;color:var(--ac-text-2);max-height:120px;overflow:auto;margin:4px 0 6px}',
+  '.dp-update-back{margin-top:10px;width:100%}',
+  '.dp-update-now{margin-bottom:12px}',
+  '.dp-update-now .dp-btn,.dp-update-detail .dp-btn{width:100%;margin-top:8px}',
+].join('')