/* 🐶 花生 —— 像素宠物。
   造型语言来自花生的像素画:阶梯像素角(box-shadow 拼)、像素格数值条、steps() 动画。
   颜色分两层:
   - 狗本身(canvas 里)永远是花生的橘黄,不随皮肤变;
   - 卡片/气泡这些「界面」吃皮肤:默认皮肤冷墨蓝 + 雾白纸,动森皮肤暖木棕 + 奶白纸。
   所有文字色都按 WCAG AA(≥4.5:1)取值;亮橘只用于色块(饱腹条、头像底),不用于文字。 */
:root {
  --pet-line: #2E4256;          /* 像素描边 / 结构 */
  --pet-paper: #F7F9FB;         /* 卡片纸面 */
  --pet-paper-2: #FFFFFF;       /* 按钮 / 输入框 / 气泡 */
  --pet-text: #1E2529;
  --pet-muted: #4F5B63;         /* 次要文字 6.9:1 */
  --pet-accent: #3B5B7A;        /* 小标题、主按钮底(白字 7.2:1) */
  --pet-accent-ink: #FFFFFF;
  --pet-portrait: #DCE7F1;      /* 头像底 */
  --pet-track: rgba(46, 66, 86, .13);
  --pet-food: #F0A24F;          /* 饱腹色块(只做块,不做字) */
  --pet-heart: #E5566A;
  --pet-gold: #B88A1E;          /* 稀有宝贝框 */
  --pet-scrim: rgba(18, 28, 38, .34);
  --pet-shadow: rgba(30, 37, 41, .16);
  --pet-px: 3px;
}
html[data-theme="island"] {
  --pet-line: #7A4A25;
  --pet-paper: #FBF5E4;
  --pet-paper-2: #FFFDF6;
  --pet-text: #4A2E18;
  --pet-muted: #6E5038;         /* 6.5:1 */
  --pet-accent: #9A531C;        /* 白字 6.2:1,纸面上 5.6:1 */
  --pet-portrait: #F6D9A8;
  --pet-track: rgba(122, 74, 37, .14);
  --pet-scrim: rgba(43, 28, 20, .30);
  --pet-shadow: rgba(74, 46, 24, .2);
}

/* 像素描边(四向阶梯角)*/
.pet-bubble, .pet-card-sheet, .pet-act, .pet-say, .pet-menu, .pet-talkbox, .pet-glyph, .plant-say, .plant-menu, .pet-entry, .pet-back {
  --pet-frame:
    0 calc(-1 * var(--pet-px)) 0 0 var(--pet-line), 0 var(--pet-px) 0 0 var(--pet-line),
    calc(-1 * var(--pet-px)) 0 0 0 var(--pet-line), var(--pet-px) 0 0 0 var(--pet-line);
}

/* ---------- 悬浮体 ---------- */
.pet-float {
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  width: 48px; height: 48px;
  align-items: flex-end; justify-content: center;
  z-index: 41;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.pet-float:active { transform: none; }          /* 覆盖 .fab-float:active 的缩放,拖动时不抖 */
/* 各皮肤会给 .fab-float 套圆钮外观,花生不是按钮:全部还原 */
html .fab-float.pet-float, html[data-theme] .fab-float.pet-float {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.pet-card-open .pet-float { visibility: hidden; }
html.hide-pet .pet-float { display: none !important; }
/* 花生的「门廊」:消息列表底部留一条空带,滚到底时最后一条消息停在花生上方,不被它挡住 */
/* 不再常驻留空带(花生蹲在输入栏上沿);只有头顶气泡 / 横幅 / 说话框出现时临时撑出一点,平滑出现再收回 */
html:not(.hide-pet) #chat-messages::after { content: ''; display: block; flex: none; height: 0; transition: height .22s ease; }
body.garden-open .pet-float { display: none !important; }

.pet-cv { width: 72px; height: 72px; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.pet-float .pet-cv {
  width: 48px; height: 48px;
  transform-origin: 50% 100%;
  animation: pet-breathe 2.4s steps(2, jump-none) infinite;
  filter: drop-shadow(0 3px 0 var(--pet-shadow));
}
.pet-float.is-asleep .pet-cv { animation-duration: 4s; filter: drop-shadow(0 3px 0 var(--pet-shadow)) saturate(.85); }
@keyframes pet-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.958); } }
.pet-float.hop .pet-cv { animation: pet-hop .52s steps(4, jump-none) 1, pet-breathe 2.4s steps(2, jump-none) .52s infinite; }
@keyframes pet-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-15px); } 70% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
.pet-float.peek .pet-cv { animation: pet-peek .6s steps(3, jump-none) 1, pet-breathe 2.4s steps(2, jump-none) .6s infinite; }
@keyframes pet-peek { 0% { transform: rotate(0); } 40% { transform: rotate(-7deg) translateY(-3px); } 100% { transform: rotate(0); } }

/* ---------- 像素对话横幅 ----------
   r5:不再长在花生旁边(会盖住最后几条消息),而是固定在输入框上方的「门廊」带里、与花生同一水平线,
   右端留给花生(right:70px),小尾巴指向它;横幅出现时门廊加高,滚到底时最后一条消息停在横幅上方。 */
.pet-bubble {
  position: fixed; z-index: 40;      /* r10 #2:低于花生(41),永不盖住它 */
  right: 70px; left: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  width: max-content; max-width: calc(100vw - 86px);
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--pet-paper-2); color: var(--pet-text);
  font-size: 13px; font-weight: 700; line-height: 1.4; text-wrap: pretty;
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow);
  pointer-events: none;
  animation: pet-pop .18s steps(2, jump-none);
}
.pet-bubble::after {          /* 像素小尾巴,指向右边的花生 */
  content: ''; position: absolute; left: calc(100% + var(--pet-px)); bottom: 12px;
  width: 6px; height: 6px; background: var(--pet-line);
  box-shadow: -3px -3px 0 0 var(--pet-paper-2), -3px 0 0 0 var(--pet-line);
}
.pet-bubble-face { flex: none; width: 24px; height: 24px; background: var(--pet-portrait); box-shadow: inset 0 0 0 2px var(--pet-line); display: grid; place-items: center; }
.pet-bubble-cv { width: 22px; height: 22px; image-rendering: pixelated; image-rendering: crisp-edges; }
.pet-bubble-text { min-width: 0; }
@keyframes pet-pop { from { transform: scale(.85); } to { transform: scale(1); } }
.pet-bubble[hidden] { display: none !important; }
/* 横幅挂在 body 上:和花生一样,只在聊天页、无遮罩/面板时出现 */
body:not(:has(#page-chat.active)) .pet-bubble,
.lock-screen:not(.hidden) ~ .pet-bubble, #page-login.active ~ .pet-bubble,
body.ws-busy .pet-bubble, body.pet-card-open .pet-bubble, body.sticker-open .pet-bubble, body.garden-open .pet-bubble,
html.hide-pet .pet-bubble { display: none !important; }
.pet-bubble.tappable { pointer-events: auto; cursor: pointer; }
.pet-bubble-go {
  flex: none; border: 0; min-height: 32px; padding: 5px 9px; font: inherit; font-size: 12.5px; font-weight: 800;
  color: var(--pet-accent-ink); background: var(--pet-accent); cursor: pointer;
}
/* (r14) 底部让位统一由 world.js Porch 计算:见 Porch.need */
/* 往上翻看历史时横幅先收起(状态保留),回到底部再出现,绝不压在消息正文上 */
html.pet-scrolled .pet-bubble { display: none !important; }

/* 聊天往上翻:花生淡出、不挡点按(不会坐在消息气泡上) */
.pet-float { transition: opacity .2s steps(2, jump-none); }
.pet-float { transition: opacity .22s ease, visibility 0s linear 0s; }
/* 往上翻时花生整只藏起来(连 Zzz、心情牌子一起),不再半透明压在消息上;回到底部再淡入 */
.pet-float.pet-dim { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }

/* 头顶心情符号(8x8 → 16px),一闪一闪 */
.pet-glyph {
  position: absolute; left: 50%; top: -18px; margin-left: -12px; width: 24px; height: 24px; padding: 4px; box-sizing: border-box;
  pointer-events: none; background: #FCE3B8;   /* 暖色底牌:白骨头/灰云在上面也看得清 */
  box-shadow: var(--pet-frame, 0 0 0 2px #2B1C14), 0 2px 0 0 var(--pet-shadow, rgba(0,0,0,.18));
  animation: pet-glyph 1.6s steps(2, jump-none) infinite;
}
.pet-glyph[hidden] { display: none; }
.pet-glyph-cv { width: 16px; height: 16px; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
@keyframes pet-glyph { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }   /* 常驻:只轻轻上下,不再闪没 */

/* 打盹 Zzz / 爱心 */
.pet-zz { position: absolute; left: 4px; top: -6px; display: none; pointer-events: none; color: var(--pet-line); font: 900 12px/1 ui-monospace, Menlo, monospace; }
.pet-float.is-asleep .pet-zz { display: block; }
.pet-zz i { position: absolute; font-style: normal; opacity: 0; animation: pet-z 3s steps(6, jump-none) infinite; }
.pet-zz i:nth-child(2) { animation-delay: 1s; font-size: 14px; }
.pet-zz i:nth-child(3) { animation-delay: 2s; font-size: 17px; }
@keyframes pet-z { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-12px, -22px); } }
.pet-heart {
  position: absolute; bottom: 40px; color: var(--pet-heart);
  font: 900 15px/1 ui-monospace, Menlo, monospace; pointer-events: none;
  opacity: 0; animation: pet-heart 1.2s steps(6, jump-none) forwards;
}
@keyframes pet-heart { 0% { opacity: 0; transform: translateY(0) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-38px) scale(1.15); } }

/* 散步中:花生不在,只留一块小木牌 */
.pet-out-sign {
  display: none; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 3px 6px; font-size: 11px; font-weight: 800;
  color: var(--pet-accent-ink); background: var(--pet-line);
}
.pet-float.is-out .pet-out-sign { display: block; }
.pet-float.is-out .pet-cv, .pet-float.is-out .pet-zz { visibility: hidden; }

/* 才艺动画(只动画布,steps 保持像素感) */
.pet-float.trick-sit .pet-cv { animation: pet-sit .5s steps(2, jump-none) 2; }
@keyframes pet-sit { 50% { transform: scaleY(.88); } }
.pet-float.trick-shake .pet-cv { animation: pet-shake .7s steps(4, jump-none) 2; }
@keyframes pet-shake { 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
.pet-float.trick-spin .pet-cv { animation: pet-spin 1.1s steps(8, jump-none) 1; }
@keyframes pet-spin { to { transform: rotate(360deg); } }
.pet-float.trick-bow .pet-cv { animation: pet-bow .7s steps(3, jump-none) 2; }
@keyframes pet-bow { 50% { transform: translateY(4px) scaleY(.86); } }
.pet-float.trick-playdead .pet-cv { animation: pet-dead 2.6s steps(3, jump-none) 1 forwards; }
@keyframes pet-dead { 15%, 85% { transform: rotate(90deg) translateX(6px); } 100% { transform: none; } }
.pet-float.trick-dance .pet-cv { animation: pet-dance .6s steps(4, jump-none) 4; }
@keyframes pet-dance { 25% { transform: translateY(-8px) rotate(-8deg); } 50% { transform: none; } 75% { transform: translateY(-8px) rotate(8deg); } }

/* ---------- 狗牌卡片:固定高度,只有内容区滚动(切页不跳)---------- */
.pet-card { position: fixed; inset: 0; z-index: 11000; }
.lock-screen:not(.hidden) ~ .pet-card,
#page-login.active ~ .pet-card,
body.ws-busy .pet-card { display: none !important; }
.pet-card-scrim { position: absolute; inset: 0; background: var(--pet-scrim); }
.pet-card-sheet {
  /* 顶边固定(换页时表头和分页条一动不动),高度随内容,最高 min(78dvh,640px),内容区自己滚 */
  position: absolute; left: 50%;
  top: max(calc(env(safe-area-inset-top, 0px) + 64px), calc(100dvh - min(78dvh, 640px) - env(safe-area-inset-bottom, 0px) - 16px));
  transform: translateX(-50%);
  width: min(356px, calc(100vw - 28px));
  /* r10 #7:固定高度(不随页签内容伸缩),内容区自己滚 —— 切页时底边不再在屏幕中间上下跳 */
  height: min(78dvh, 640px, calc(100dvh - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px) - 16px));
  /* 顶部定位在 安全区+64px 之下:max-height 必须扣掉它,否则高页签底边出屏(iPhone 14 超出 33px) */
  max-height: min(78dvh, 640px, calc(100dvh - env(safe-area-inset-top, 0px) - 64px - env(safe-area-inset-bottom, 0px) - 16px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pet-paper); color: var(--pet-text);
  box-shadow: var(--pet-frame), 0 10px 0 0 var(--pet-shadow);
  animation: pet-sheet .22s steps(3, jump-none);
}
@keyframes pet-sheet { from { transform: translate(-50%, 24px); } to { transform: translate(-50%, 0); } }
.pet-card-x {
  position: absolute; right: 4px; top: 4px; z-index: 2; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--pet-line); font-size: 24px; line-height: 1; cursor: pointer;
}
.pet-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pet-head { flex: none; padding: 18px 16px 0; }
.pet-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 20px; overscroll-behavior: contain; }
.pet-loading { margin: 32px 16px; text-align: center; font-weight: 700; color: var(--pet-muted); }

.pet-tag { display: flex; gap: 14px; align-items: center; padding-right: 30px; }
.pet-portrait {
  flex: none; width: 96px; height: 96px; display: grid; place-items: center;
  background: var(--pet-portrait); box-shadow: inset 0 0 0 var(--pet-px) var(--pet-line);
}
.pet-portrait .pet-cv { width: 84px; height: 84px; }
.pet-id { flex: 1; min-width: 0; }
.pet-name { font-size: 26px; font-weight: 900; letter-spacing: .02em; line-height: 1.1; }
.pet-lv {
  display: inline-block; margin-left: 8px; padding: 2px 6px; vertical-align: 4px;
  font: 900 12px/1.2 ui-monospace, Menlo, monospace; color: var(--pet-accent-ink); background: var(--pet-line);
}
.pet-xp { margin-top: 10px; height: 8px; background: var(--pet-track); }
.pet-xp span { display: block; height: 100%; background: var(--pet-accent); }
.pet-xp-note { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--pet-muted); }
.pet-stats { margin-top: 10px; display: grid; gap: 7px; }
.pet-stat { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; }
.pet-stat > span:first-child { width: 2.4em; flex: none; }
.pet-meter { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.pet-meter i { height: 11px; background: var(--pet-track); }
.pet-meter.mood i.on { background: var(--pet-heart); }
.pet-meter.food i.on { background: var(--pet-food); }
.pet-meter.water i.on { background: #5BB4E8; }

/* 带话的信 */
.pet-letter {
  margin-top: 14px; padding: 12px; background: var(--pet-paper-2);
  box-shadow: inset 0 0 0 2px var(--pet-line), 0 4px 0 0 var(--pet-shadow);
  display: grid; gap: 10px;
}
.pet-letter p { margin: 0; font-size: 15px; line-height: 1.55; }
.pet-letter b { display: block; font-size: 12px; margin-bottom: 3px; color: var(--pet-accent); }

/* 分页 */
.pet-tabs {
  margin: 16px -16px 0; padding: 0 10px; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  border-bottom: var(--pet-px) solid var(--pet-line);
}
.pet-tabs::-webkit-scrollbar { display: none; }
.pet-tab {
  flex: 1 0 auto; min-height: 40px; padding: 9px 8px 8px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--pet-muted);
}
.pet-tab.on { background: var(--pet-line); color: var(--pet-accent-ink); }
.pet-tab:focus-visible { outline: 3px dashed var(--pet-accent); outline-offset: -4px; }

.pet-h { margin: 18px 0 9px; font-size: 12.5px; font-weight: 900; color: var(--pet-accent); }
.pet-h:first-child { margin-top: 0; }
.pet-empty { margin: 2px 0 14px; font-size: 14px; line-height: 1.65; color: var(--pet-text); text-wrap: pretty; }
.pet-btn {
  border: 0; min-height: 44px; padding: 10px 16px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800;
  color: var(--pet-accent-ink); background: var(--pet-accent); box-shadow: 0 4px 0 0 var(--pet-line);
}
.pet-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--pet-line); }
.pet-btn:disabled { opacity: .45; cursor: default; }
.pet-btn-wide { width: 100%; }

/* 照顾 */
.pet-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 3px; }
.pet-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 60px; padding: 10px 4px 9px; border: 0; cursor: pointer;
  background: var(--pet-paper-2); color: var(--pet-text);
  box-shadow: var(--pet-frame), 0 7px 0 0 var(--pet-line);
  transition: transform .06s steps(1);
}
.pet-act b { font-size: 15px; }
.pet-act small { font-size: 11.5px; color: var(--pet-muted); font-weight: 600; }
.pet-act:active:not(:disabled) { transform: translateY(4px); box-shadow: var(--pet-frame); }
.pet-act:disabled { cursor: default; box-shadow: none; outline: 2px dashed var(--pet-muted); outline-offset: -2px; background: transparent; }
.pet-act:disabled b, .pet-act:disabled small { color: var(--pet-muted); }
.pet-today { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--pet-muted); text-wrap: pretty; }

.pet-tricks { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; min-height: 36px; padding: 6px 11px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--pet-text); background: var(--pet-paper-2); box-shadow: inset 0 0 0 2px var(--pet-line);
}
.pet-chip:disabled { cursor: default; color: var(--pet-muted); background: transparent; box-shadow: inset 0 0 0 2px var(--pet-track); }
.pet-lock { width: 10px; height: 12px; image-rendering: pixelated; flex: none; }

.pet-wardrobe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 3px; }
.pet-acc {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 2px 0 4px; border: 0; background: transparent; color: var(--pet-text); cursor: pointer;
}
.pet-acc-cv { position: relative; width: 44px; height: 44px; display: block; overflow: hidden; background: var(--pet-portrait); }
.pet-acc .pet-cv { width: 48px; height: 48px; margin: -2px; }
.pet-acc small { font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.pet-acc.on .pet-acc-cv { box-shadow: 0 0 0 var(--pet-px) var(--pet-line); }
.pet-acc:disabled { cursor: default; }
.pet-acc:disabled .pet-acc-cv { filter: grayscale(1); opacity: .45; }
.pet-acc:disabled small { color: var(--pet-muted); }
.pet-acc .pet-lock { width: 8px; height: 10px; }

/* 说话:对话区自己滚,上沿渐隐;输入框固定在底部 */
.pet-pane.pane-talk { display: flex; flex-direction: column; padding-bottom: 14px; }
.pet-seg { flex: none; display: grid; grid-template-columns: 1fr 1fr; box-shadow: inset 0 0 0 2px var(--pet-line); margin-bottom: 12px; }
.pet-seg button { border: 0; min-height: 38px; padding: 8px 4px; background: transparent; font: inherit; font-size: 13px; font-weight: 800; color: var(--pet-muted); cursor: pointer; }
.pet-seg button.on { background: var(--pet-line); color: var(--pet-accent-ink); }
.pet-talk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pet-log {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 3px 8px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.pet-line { display: flex; }
.pet-line p { margin: 0; max-width: 80%; padding: 8px 11px; font-size: 14.5px; line-height: 1.55; }
.pet-line.pet p { background: var(--pet-paper-2); color: var(--pet-text); box-shadow: inset 0 0 0 2px var(--pet-line); }
.pet-line.me { justify-content: flex-end; }
.pet-line.me p { background: var(--pet-accent); color: var(--pet-accent-ink); }
.pet-thinking { color: var(--pet-muted); }
.pet-notice {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--pet-text); background: var(--pet-paper-2);
  box-shadow: inset 3px 0 0 0 var(--pet-heart);
}
.pet-notice[hidden] { display: none; }
.pet-compose { flex: none; display: flex; gap: 8px; margin-top: 10px; }
.pet-compose input {
  flex: 1; min-width: 0; min-height: 44px; padding: 9px 11px; border: 0; font: inherit; font-size: 16px; color: var(--pet-text);
  background: var(--pet-paper-2); box-shadow: inset 0 0 0 2px var(--pet-line); border-radius: 0;
}
.pet-compose input::placeholder { color: var(--pet-muted); }
.pet-compose input:focus { outline: 3px solid var(--pet-accent); outline-offset: 0; }

/* 嵌入的每日一问:去掉它自身外框留白,交给卡片 */
.pet-embed > * { margin: 0 !important; }

/* 花园:窗台小景 */
.pet-garden { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin-bottom: 16px; }
.pet-garden-pic { width: 88px; height: 110px; display: grid; place-items: end center; padding-bottom: 6px; background: var(--pet-portrait); box-shadow: inset 0 0 0 var(--pet-px) var(--pet-line); }
.pet-garden-pic canvas { width: 64px; height: 80px; image-rendering: pixelated; }
.pet-garden-name { font-size: 16px; font-weight: 900; }
.pet-garden-state { margin: 4px 0 10px; font-size: 13px; line-height: 1.5; color: var(--pet-muted); }
.pet-grow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 4px; }
.pet-grow i { height: 10px; background: var(--pet-track); }
.pet-grow i.on { background: #6DBE4B; }
.pet-grow-note { font-size: 11.5px; font-weight: 700; color: var(--pet-muted); }
.pet-water { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.pet-water li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.pet-tick { width: 18px; height: 18px; flex: none; box-shadow: inset 0 0 0 2px var(--pet-line); background: var(--pet-paper-2); display: grid; place-items: center; }
.pet-tick.on { background: var(--pet-accent); box-shadow: inset 0 0 0 2px var(--pet-line); }
.pet-tick.on::after { content: ''; width: 6px; height: 9px; margin-top: -2px; border: solid var(--pet-accent-ink); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.pet-water small { font-weight: 600; color: var(--pet-muted); font-size: 12.5px; }

/* 散步宝贝:像素图标 */
.pet-treasures { list-style: none; margin: 0; padding: 3px; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.pet-treasures li { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 7px; background: transparent; outline: 2px dashed var(--pet-track); outline-offset: -2px; }
.pet-treasures li canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.pet-treasures li small { font-size: 11px; font-weight: 700; color: var(--pet-muted); text-align: center; line-height: 1.25; }
.pet-treasures li.got { outline: 0; background: var(--pet-paper-2); box-shadow: inset 0 0 0 2px var(--pet-line); }
.pet-treasures li.got small { color: var(--pet-text); }
.pet-treasures li.got.rare { box-shadow: inset 0 0 0 2px var(--pet-gold), inset 0 0 0 4px var(--pet-paper-2), inset 0 0 0 5px var(--pet-gold); }

/* 日记:按天分组 */
.pet-diary-day { margin: 0 0 6px; font-size: 12.5px; font-weight: 900; color: var(--pet-accent); }
.pet-diary-day:not(:first-child) { margin-top: 18px; }
.pet-diary { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pet-diary li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: baseline; }
.pet-diary time { font: 700 12px/1.5 ui-monospace, Menlo, monospace; color: var(--pet-muted); }
.pet-diary p { margin: 0; font-size: 14px; line-height: 1.55; padding-left: 10px; box-shadow: inset 3px 0 0 0 var(--pet-track); text-wrap: pretty; }

.pet-act:focus-visible, .pet-acc:focus-visible, .pet-card-x:focus-visible,
.pet-btn:focus-visible, .pet-chip:focus-visible, .pet-seg button:focus-visible, .pet-bubble-go:focus-visible {
  outline: 3px dashed var(--pet-accent); outline-offset: 3px;
}

/* ================= 动画引擎配合的动作类(全部 steps,保持像素感) ================= */
.pet-float.walking .pet-cv { animation: none; }
.pet-float.walking { cursor: grabbing; }
/* 走路时脚下一小撮像素尘土 */
.pet-float.walking::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  background: var(--pet-shadow); box-shadow: -8px 1px 0 var(--pet-shadow), 8px 1px 0 var(--pet-shadow);
  animation: pet-dust .5s steps(2, jump-none) infinite;
}
@keyframes pet-dust { 50% { opacity: .2; transform: translateY(-2px); } }
/* 生病:发抖 + 稍微缩着 */
.pet-float.shiver .pet-cv { animation: pet-shiver .3s steps(2, jump-none) infinite; filter: drop-shadow(0 3px 0 var(--pet-shadow)) saturate(.7); }
@keyframes pet-shiver { 0% { transform: translateX(-1px) scaleY(.97); } 100% { transform: translateX(1px) scaleY(.97); } }
/* 孤单:趴着一动不动,呼吸很慢 */
.pet-float.slump .pet-cv { animation: pet-breathe 5s steps(2, jump-none) infinite; }
/* 想你/撒娇:原地小蹦 */
.pet-float.bounce .pet-cv { animation: pet-bounce .5s steps(3, jump-none) infinite; }
@keyframes pet-bounce { 50% { transform: translateY(-5px); } }
/* 摸摸:往手心里蹭 */
.pet-float.lean .pet-cv { animation: pet-lean .5s steps(2, jump-none) 3; }
@keyframes pet-lean { 50% { transform: rotate(-8deg) translateX(-2px); } }
/* 吃/喝:低头一下一下 */
.pet-float.chomp .pet-cv { animation: pet-chomp .25s steps(2, jump-none) 8; }
@keyframes pet-chomp { 50% { transform: translateY(2px); } }
/* 打喷嚏:一抖 */
.pet-float.jolt .pet-cv { animation: pet-jolt .4s steps(2, jump-none) 2; }
@keyframes pet-jolt { 50% { transform: translateY(-3px) scale(1.06); } }
/* 翻肚皮:左右扭 */
.pet-float.wiggle .pet-cv { animation: pet-wiggle .35s steps(2, jump-none) 5; }
@keyframes pet-wiggle { 0% { transform: translateX(-2px); } 100% { transform: translateX(2px); } }   /* 翻肚皮扭来扭去:平移,不旋转整张图 */
/* 歪头 */
.pet-float.tilt .pet-cv { animation: pet-tilt 2s steps(4, jump-none) 1; }
@keyframes pet-tilt { 25%, 75% { transform: rotate(-14deg); } }
/* 摇尾巴(侧身):身体轻摆 */
.pet-float.wag .pet-cv { animation: pet-wag .25s steps(2, jump-none) 6; }
@keyframes pet-wag { 50% { transform: translateX(1px) rotate(2deg); } }
/* 挠痒痒 */
.pet-float.scratch .pet-cv { animation: pet-scratch .12s steps(2, jump-none) 8; }
@keyframes pet-scratch { 50% { transform: translateX(1px) rotate(-3deg); } }
/* 卡片头像撒娇 */
.pet-portrait .pet-cv { cursor: pointer; }
.pet-portrait .pet-cv.pet-cuddle { animation: pet-bounce .5s steps(3, jump-none) 2; }

@media (prefers-reduced-motion: reduce) {
  .pet-float[class] .pet-cv, .pet-float.walking::after, .pet-portrait .pet-cv { animation: none !important; }
  .pet-float .pet-cv, .pet-zz i, .pet-heart, .pet-bubble, .pet-card-sheet, .pet-float[class*='trick-'] .pet-cv { animation: none !important; }
  .pet-float.is-asleep .pet-zz i { opacity: 1; }
}

/* ---------- r5:紧凑表头(非「照顾」页)---------- */
.pet-tag-mini { gap: 10px; padding-right: 44px; }
.pet-tag-mini .pet-portrait { width: 44px; height: 44px; }
.pet-tag-mini .pet-portrait .pet-cv { width: 40px; height: 40px; }
.pet-tag-mini .pet-name { font-size: 18px; }
.pet-mini-id { min-width: 0; display: grid; gap: 6px; }
.pet-dots { display: flex; gap: 12px; }
.pet-dot { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 11.5px; font-weight: 800; color: var(--pet-muted); }
.pet-dot i { width: 10px; height: 10px; box-shadow: inset 0 0 0 2px var(--pet-line); background: var(--pet-paper-2); }
.pet-dot.l2 i { background: linear-gradient(to top, var(--c) 55%, var(--pet-paper-2) 0); }
.pet-dot.l3 i { background: var(--c); }
.pet-dot.mood { --c: var(--pet-heart); } .pet-dot.food { --c: var(--pet-food); } .pet-dot.water { --c: #5BB4E8; }
.pet-letter-chip {
  margin-top: 10px; width: 100%; border: 0; padding: 8px 10px; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--pet-text); background: var(--pet-paper-2);
  box-shadow: inset 0 0 0 2px var(--pet-line);
}
.pet-card.compact .pet-head { padding-top: 12px; }
.nw { white-space: nowrap; }

/* 说话页空状态 */
.pet-talk-empty { display: grid; justify-items: center; gap: 10px; padding: 16px 4px 4px; text-align: center; }
.pet-talk-empty p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--pet-muted); max-width: 22em; }
.pet-talk-pic { width: 72px; height: 72px; background: var(--pet-portrait); box-shadow: inset 0 0 0 var(--pet-px) var(--pet-line); display: grid; place-items: center; }
.pet-talk-pic .pet-cv { width: 64px; height: 64px; }
.pet-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* 花园页:用浇花抽屉同一株花的缩略图时 */
.pet-garden-pic.is-thumb { overflow: hidden; }
.pet-garden-pic.is-thumb > * { width: 100%; height: 100%; }
/* 花园页:整宽场景在上(与浇花抽屉同一株花),文字在下 —— 填满固定高度卡片,不留半截空白 */
.pane-garden .pet-garden { grid-template-columns: 1fr; gap: 12px; }
.pane-garden .pet-garden-pic { width: 100%; height: 200px; }
.pane-garden .pet-garden-pic canvas { width: 96px; height: 120px; }

/* ---------- r6:横幅常驻槽 / 卡片内反馈 / 新消息信封 ---------- */
/* 软键盘开着时只留常驻横幅(信 / 散步回来 / 去答 / 叫人),临时消息先不出来,别挤在键盘上方 */
body.keyboard-open .pet-bubble:not(.is-sticky) { display: none !important; }
.pet-bubble { transition: bottom .12s steps(2, jump-none); }

/* 卡片开着时的反馈(被拒 / 升级 / 叼回宝贝):卡片底部一行像素提示,3 秒后淡出 */
.pet-card-notice {
  position: absolute; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px) * 0);
  z-index: 3; padding: 9px 12px; pointer-events: none;
  background: var(--pet-paper-2); color: var(--pet-text);
  font-size: 13px; font-weight: 800; line-height: 1.45; text-wrap: pretty;
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow);
  opacity: 0; transform: translateY(8px);
}
.pet-card-notice.show { animation: pet-notice-in .2s steps(2, jump-none) forwards; }
.pet-card-notice.show.out { animation: pet-notice-out .3s steps(3, jump-none) forwards; }
@keyframes pet-notice-in { to { opacity: 1; transform: none; } }
@keyframes pet-notice-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }

/* 往上翻时来了对方消息:淡出的花生头顶闪一个像素信封(横幅此时是藏着的) */
.pet-cue {
  position: fixed; z-index: 42; width: 18px; height: 18px;
  display: grid; place-items: center; font: 900 13px/1 ui-monospace, Menlo, monospace;
  color: var(--pet-accent-ink, #fff); background: var(--pet-accent, #B8611F);
  box-shadow: var(--pet-frame, none); pointer-events: none;
  animation: pet-cue 1.6s steps(4, jump-none) forwards;
}
@keyframes pet-cue { 0% { transform: translateY(4px); opacity: 0; } 20%, 75% { transform: none; opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pet-card-notice.show { animation: none; opacity: 1; transform: none; }
  .pet-card-notice.show.out { animation: none; opacity: 0; }
}

/* ---------- r7 ---------- */
/* 紧凑表头:三条 5 格迷你数值条(带字),所有分页通用 */
.pet-minis { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pet-mini { display: inline-flex; align-items: center; gap: 5px; }
.pet-mini b { font-size: 11.5px; font-weight: 800; color: var(--pet-muted); }
.pet-mini > span { display: inline-grid; grid-template-columns: repeat(5, 6px); gap: 2px; }
.pet-mini i { height: 9px; background: var(--pet-track, rgba(46,66,86,.13)); }
.pet-mini.mood i.on { background: var(--pet-heart); }
.pet-mini.food i.on { background: var(--pet-food); }
.pet-mini.water i.on { background: #5BB4E8; }
/* 照顾页顶部状态块 */
.pet-status { margin: 0 0 16px; }
.pet-status .pet-stats { margin-top: 12px; }
/* 卡内提示槽:在表头与内容之间,只占一行,淡出后整块移除,不盖内容 */
.pet-notice-slot { flex: none; padding: 0 16px; }
.pet-notice-slot:empty { display: none; }
.pet-notice-slot .pet-card-notice { position: static; margin: 10px 0 0; }
/* 花园页:220px 场景,花放大到场景高度约六成 */
.pane-garden .pet-garden-pic { height: 220px; }
.pane-garden .pet-garden-pic.is-thumb > * { width: 100% !important; height: 220px !important; }
/* 浇水壶(满/空)代替勾选框 */
.pet-can { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.pet-can-cv { width: 20px; height: 20px; image-rendering: pixelated; image-rendering: crisp-edges; }
/* 宝贝收藏:没捡到的只有剪影 + ？,上方一句总数 */
.pet-tre-left { margin: -2px 0 10px; font-size: 13px; color: var(--pet-muted); }
.pet-treasures li small.q { font-size: 14px; color: var(--pet-muted); }
/* 日记里的宝贝小图标 */
.pet-tre-inline { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin: 0 1px; }
.pet-tre-inline canvas { width: 15px; height: 15px; image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { .pet-glyph { animation: none; } .pet-float { transition: none; } }
.pet-status .pet-letter { margin: 16px 0 4px; }   /* 信和下面的动作按钮之间留出呼吸 */

/* ================= 主界面互动(r8):头顶小气泡 / 菜单 / 说句话 / 拖动反应 ================= */
/* 头顶小气泡:花生自己说的话,尾巴朝下指着它;超出屏幕时由 JS 写 --say-dx 往里挪 */
.pet-say {
  position: absolute; left: 50%; bottom: calc(100% + 22px);
  transform: translateX(calc(-50% + var(--say-dx, 0px)));
  width: max-content; max-width: min(228px, calc(100vw - 48px));   /* r10 #10:180px 会把「拖鞋」拆到两行 */
  padding: 6px 9px; z-index: 2;
  background: var(--pet-paper-2); color: var(--pet-text);
  font-size: 13px; font-weight: 700; line-height: 1.45; line-break: strict;
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow);
  pointer-events: none; white-space: normal;
}
.pet-say[hidden] { display: none !important; }
.pet-say::after {             /* 像素小尾巴:朝下指花生(气泡被挪动时仍对准它) */
  content: ''; position: absolute; top: calc(100% + var(--pet-px)); left: calc(50% - 3px - var(--say-dx, 0px));
  width: 6px; height: 6px; background: var(--pet-line);
  box-shadow: 0 -3px 0 0 var(--pet-paper-2), -3px -3px 0 0 var(--pet-line), 3px -3px 0 0 var(--pet-line);
}
.pet-say.pop { animation: pet-say-pop .2s steps(2, jump-none); }
@keyframes pet-say-pop { from { transform: translateX(calc(-50% + var(--say-dx, 0px))) scale(.82); } to { transform: translateX(calc(-50% + var(--say-dx, 0px))) scale(1); } }
.pet-glyph:not([hidden]) ~ .pet-say { bottom: calc(100% + 30px); }
/* 头顶有话时把门廊撑高,滚到底时最后一条消息停在气泡上方 */
/* (r14) 底部让位统一由 world.js Porch 计算:见 Porch.need */
html.pet-scrolled .pet-say, body.pet-card-open .pet-say, body.sticker-open .pet-say { display: none !important; }

/* 右键 / 长按菜单:像素描边的竖排小菜单 */
.pet-menu {
  position: fixed; z-index: 11500; min-width: 132px;
  display: flex; flex-direction: column; padding: 4px;
  background: var(--pet-paper); color: var(--pet-text);
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow), 0 10px 24px rgba(0, 0, 0, .14);
  animation: pet-say-pop-menu .16s steps(2, jump-none);
}
@keyframes pet-say-pop-menu { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } }
.pet-menu button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 8px 12px; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: 15px; font-weight: 800; text-align: left; cursor: pointer;
}
.pet-menu button + button { box-shadow: inset 0 1px 0 0 var(--pet-track); }
.pet-menu button small { font-size: 11px; font-weight: 700; color: var(--pet-muted); }
.pet-menu button:not(:disabled):active, .pet-menu button:focus-visible { background: var(--pet-accent); color: var(--pet-accent-ink); outline: none; }
.pet-menu button:not(:disabled):active small, .pet-menu button:focus-visible small { color: inherit; }
/* r10 #6:悬停高亮只给真有鼠标的设备;触屏上「最后一次点的位置」不会让第一项看起来像被选中 */
@media (hover: hover) and (pointer: fine) {
  .pet-menu button:not(:disabled):hover { background: var(--pet-accent); color: var(--pet-accent-ink); }
  .pet-menu button:not(:disabled):hover small { color: inherit; }
}
.pet-menu button:focus:not(:focus-visible) { outline: none; }
.pet-menu button:disabled { cursor: default; color: var(--pet-muted); }
.lock-screen:not(.hidden) ~ .pet-menu, #page-login.active ~ .pet-menu, body.ws-busy .pet-menu { display: none !important; }

/* 主界面「说句话」小框:贴在输入栏 / 键盘上方 */
.pet-talkbox {
  position: fixed; z-index: 11500; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  margin: 0 auto; max-width: 420px; padding: 10px;
  display: grid; gap: 8px;
  background: var(--pet-paper); color: var(--pet-text);
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow), 0 10px 24px rgba(0, 0, 0, .14);
}
.lock-screen:not(.hidden) ~ .pet-talkbox, #page-login.active ~ .pet-talkbox, body.ws-busy .pet-talkbox { display: none !important; }
.pet-tb-line { display: flex; align-items: center; gap: 8px; }
.pet-tb-face { flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: var(--pet-portrait); box-shadow: inset 0 0 0 2px var(--pet-line); }
.pet-tb-reply { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.45; line-break: strict; }
.pet-tb-reply.pending { color: var(--pet-muted); }
.pet-tb-x { flex: none; width: 44px; height: 44px; margin: -8px -6px -8px 0; border: 0; background: transparent; color: var(--pet-text); font-size: 22px; line-height: 1; cursor: pointer; }
.pet-tb-row { display: flex; gap: 8px; }
.pet-tb-row input {
  flex: 1; min-width: 0; padding: 9px 10px; border: 0; border-radius: 0; font: inherit; font-size: 16px;
  color: var(--pet-text); background: var(--pet-paper-2); box-shadow: inset 0 0 0 2px var(--pet-line);
}
.pet-tb-row input:focus { outline: 3px solid var(--pet-accent); outline-offset: 0; }

/* 互动粒子:拍一拍的星星、挠痒痒的「哈」、落地的灰 */
.pet-spark {
  position: absolute; bottom: 40px; pointer-events: none; opacity: 0;
  font: 900 13px/1 ui-monospace, Menlo, monospace; color: var(--pet-gold, #E8B53A);
  animation: pet-spark 1.2s steps(6, jump-none) forwards;
}
.pet-spark.haha { color: var(--pet-text); font-family: inherit; font-size: 12px; font-weight: 900; line-height: 1; }
.pet-spark.dust { bottom: 2px; color: var(--pet-muted); animation-name: pet-dust-puff; }
@keyframes pet-spark { 0% { opacity: 0; transform: translateY(0) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.1); } }
@keyframes pet-dust-puff { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx, 10px), -6px) scale(1.4); } }
.pet-spark.dust:nth-child(odd) { --dx: -12px; }

/* 互动动作(只动画布) */
.pet-float.bonked .pet-cv { animation: pet-bonk .5s steps(3, jump-none) 2; }
@keyframes pet-bonk { 30% { transform: scaleY(.78) scaleX(1.12); } 60% { transform: scaleY(1.05) scaleX(.96); } }
.pet-float.tickled .pet-cv { animation: pet-tickle .18s steps(2, jump-none) 7; }
@keyframes pet-tickle { 0% { transform: translateX(-2px) rotate(-4deg); } 100% { transform: translate(2px, -2px) rotate(4deg); } }
.pet-float.pawtap .pet-cv { animation: pet-pawtap .35s steps(2, jump-none) 3; }
@keyframes pet-pawtap { 50% { transform: translateY(-4px) rotate(6deg); } }
.pet-float.wobble .pet-cv { animation: pet-wobble .5s steps(4, jump-none) 4; }
@keyframes pet-wobble { 25% { transform: rotate(-10deg) translateX(-2px); } 75% { transform: rotate(10deg) translateX(2px); } }
.pet-float.land .pet-cv { animation: pet-land .45s steps(3, jump-none) 1; }
@keyframes pet-land { 0% { transform: translateY(-6px); } 45% { transform: scaleY(.76) scaleX(1.14); } 100% { transform: none; } }
.pet-float.resist .pet-cv { animation: pet-resist .14s steps(2, jump-none) 6; }
@keyframes pet-resist { 0% { transform: translateX(-3px); } 100% { transform: translateX(3px); } }
/* 被拎着:晃悠;恐高:发抖;在手里打瞌睡:慢慢点头 */
.pet-float.dangling .pet-cv { transform-origin: 50% 0; animation: pet-dangle 1.2s steps(4, jump-none) infinite; }
@keyframes pet-dangle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.pet-float.trembling .pet-cv { animation: pet-tremble .12s steps(2, jump-none) infinite; }
@keyframes pet-tremble { 0% { transform: translateX(-1px); } 100% { transform: translateX(1px); } }
.pet-float.dozing .pet-cv { animation: pet-doze 2.4s steps(3, jump-none) infinite; }
@keyframes pet-doze { 50% { transform: translateY(2px) rotate(3deg); } }
.pet-float.dangling .pet-glyph, .pet-float.dangling .pet-zz { visibility: hidden; }
.pet-float.dozing .pet-zz { display: block; }

/* 贴边藏:只露半张脸;偶尔探出来看一眼 */
.pet-float.edge-l .pet-cv, .pet-float.edge-r .pet-cv { transition: transform .3s steps(3, jump-none); }
.pet-float.edge-l.edge-peek .pet-cv { transform: translateX(10px); }
.pet-float.edge-r.edge-peek .pet-cv { transform: translateX(-10px); }
.pet-float.edge-l .pet-say { --say-dx: 30px; }
.pet-float.edge-r .pet-say { --say-dx: -30px; }

/* 吓尿:身下一小滩 */
.pet-puddle { position: fixed; z-index: 40; width: 36px; height: 12px; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; transition: opacity .9s ease; }
.pet-puddle.fade { opacity: 0; }
html.pet-scrolled .pet-puddle, body.pet-card-open .pet-puddle { display: none; }

/* iOS 长按别弹系统菜单/放大镜 */
.pet-float { -webkit-touch-callout: none; }

@media (prefers-reduced-motion: reduce) {
  .pet-float.bonked .pet-cv, .pet-float.tickled .pet-cv, .pet-float.pawtap .pet-cv, .pet-float.wobble .pet-cv, .pet-float.land .pet-cv,
  .pet-float.resist .pet-cv, .pet-float.dangling .pet-cv, .pet-float.trembling .pet-cv, .pet-float.dozing .pet-cv,
  .pet-say.pop, .pet-menu, .pet-spark { animation: none !important; }
  .pet-spark { display: none; }
  .pet-float.edge-l .pet-cv, .pet-float.edge-r .pet-cv { transition: none; }
}

/* (r14) 底部让位统一由 world.js Porch 计算:见 Porch.need */
@media (prefers-reduced-motion: reduce) { html #chat-messages::after { transition: none !important; } }
/* r7 评审:信和动作按钮之间留白;照顾页不重复显示迷你数值 */
.pet-letter { margin-bottom: 14px; }
/* r10 #7:五个页签同一个表头(迷你数值条在「照顾」页也显示,下面不再重复完整数值条) */

/* ===== 整合 r9:位置同步滑行 / 牵绳散步 / 背包页 ===== */
/* 对方挪动 / 自由位置同步:阶梯滑过去(像素感),不瞬移 */
.pet-float.pet-glide { transition: left .7s steps(7, jump-end), top .7s steps(7, jump-end); }

/* 牵绳:画路线时整屏轻微压暗,花生(z41)在遮罩之上;对方的重放不挡点按、不压暗 */
.pet-leash-ov { position: fixed; inset: 0; z-index: 40; background: rgba(20, 24, 28, .16); touch-action: none; cursor: crosshair; }
.pet-leash-ov.is-remote { background: transparent; pointer-events: none; }
.pet-leash-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.pet-leash-hint {
  position: absolute; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 68px);
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
  background: var(--pet-paper, #FFF8EC); color: var(--pet-text, #4A2E18);
  font-size: 14px; font-weight: 700; line-height: 1.45;
  box-shadow: var(--pet-frame, 0 0 0 3px #7A4A25), 0 6px 0 0 rgba(0, 0, 0, .12);
}
.pet-leash-hint span { flex: 1; min-width: 0; }
.pet-leash-hint .pet-btn { flex: none; padding: 7px 12px; font-size: 13px; }
body.pet-leashing .pet-say, body.pet-leashing .pet-bubble { display: none !important; }
.pet-float.leashed { cursor: default; }

/* 背包页:全家共用;能给花生用的可点,给花用的只展示 */
.pet-bag { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.pet-bag-it {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px;
  border: 0; cursor: pointer; font: inherit; color: var(--pet-text, #4A2E18);
  background: var(--pet-paper, #FFF8EC); box-shadow: inset 0 0 0 2px var(--pet-line, #7A4A25);
}
.pet-bag-it img { width: 36px; height: 36px; image-rendering: pixelated; }
.pet-bag-it span { font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; }
.pet-bag-it b { font-size: 11px; font-weight: 800; color: var(--pet-muted, #6B5A48); }
.pet-bag-it.rare { box-shadow: inset 0 0 0 2px var(--pet-gold, #C9A227), inset 0 0 0 4px var(--pet-paper, #FFF8EC), inset 0 0 0 5px var(--pet-gold, #C9A227); }
.pet-bag-it:active:not(:disabled) { transform: translateY(2px); }
.pet-bag-it:disabled { cursor: default; box-shadow: inset 0 0 0 2px var(--pet-track, rgba(0,0,0,.15)); }
.pet-bag-it:disabled span, .pet-bag-it:disabled b { color: var(--pet-muted, #6B5A48); }
.pet-bag-it:focus-visible { outline: 3px dashed var(--pet-accent, #B5672A); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pet-float.pet-glide { transition: none; } }
/* 装扮多到 10 件:5 列,锁住的说明允许折行、居中,不再挤成一串 */
.pet-wardrobe { grid-template-columns: repeat(5, 1fr) !important; row-gap: 10px; }
.pet-acc small { white-space: normal; text-align: center; line-height: 1.25; font-size: 11px; overflow-wrap: anywhere; }

/* 牵绳散步时花生由路线驱动:不能被拖走或点开卡片(路线可以从它身上画起) */
body.pet-leashing .pet-float { pointer-events: none; }

/* ---------- r9:菜单 3×2 像素图标格 + 「更多」(与盆栽菜单共用 .pet-menu) ---------- */
.pet-menu.pet-menu-grid { min-width: 0; width: 228px; padding: 6px; gap: 4px; }
.pet-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pet-menu .pet-mtile { flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 64px; padding: 10px 2px 6px; text-align: center; font-size: 13px; }   /* 顶对齐:带小注的格子只往下长,同一行主标签齐平(精修 #13) */
.pet-menu .pet-mtile small { font-size: 10px; line-height: 1; }
.pet-mi { width: 30px; height: 30px; image-rendering: pixelated; image-rendering: crisp-edges; }
.pet-menu .pet-mmore { justify-content: center; align-items: center; gap: 6px; min-height: 36px; font-size: 13px; box-shadow: inset 0 1px 0 0 var(--pet-track); }
.pet-menu .pet-mmore i { font-style: normal; transition: transform .12s steps(2); }
.pet-menu .pet-mmore[aria-expanded="true"] i { transform: rotate(180deg); }
.pet-mrest { display: flex; flex-direction: column; }
.pet-mrest[hidden] { display: none; }
.pet-menu .pet-mmore + .pet-mrest button:first-child { box-shadow: none; }
/* 禁用项:整格 .45 + 虚线框,与照顾页一致 */
.pet-menu button:disabled { opacity: .45; outline: 2px dashed var(--pet-muted); outline-offset: -4px; }
.pet-menu button:disabled .pet-mi { filter: grayscale(1); }

/* r9:牵绳画线时的小提示(无弹窗、无取消按钮) */
.pet-leash-tip {
  position: fixed; z-index: 2; padding: 5px 10px; font-size: 13px; font-weight: 800; white-space: nowrap;
  background: var(--pet-paper); color: var(--pet-text); box-shadow: var(--pet-frame, 0 0 0 2px var(--pet-line));
  pointer-events: none; transition: opacity .4s steps(3);
}
.pet-leash-tip.out { opacity: 0; }
.pet-leash-tip { --pet-frame: 0 -3px 0 0 var(--pet-line), 0 3px 0 0 var(--pet-line), -3px 0 0 0 var(--pet-line), 3px 0 0 0 var(--pet-line); }

/* r9:说话框打开时花生坐在框上沿,层级要高过说话框 */
.pet-float.on-talkbox { z-index: 11601; transition: top .18s steps(3), left .18s steps(3); }

/* r9 #17:卡片滚动区底部 16px 渐隐 + 安全区留白,内容被切处一看就知道还能往下滚 */
.pet-pane {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.pet-pane.pane-talk { -webkit-mask-image: none; mask-image: none; }

/* r9 #16:照顾页里的「每日一问 / 花园」入口卡片;子页顶部「‹ 照顾」 */
.pet-entries { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.pet-entry {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 10px 26px 10px 12px; border: 0; cursor: pointer; text-align: left; font: inherit;
  background: var(--pet-paper-2, var(--pet-paper)); color: var(--pet-text);
  box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow);
}
.pet-entry b { font-size: 14px; font-weight: 900; }
.pet-entry small { font-size: 11.5px; line-height: 1.35; color: var(--pet-muted); }
.pet-entry i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 900; color: var(--pet-accent); }
.pet-entry:active { transform: translateY(2px); }
.pet-entry:focus-visible, .pet-back:focus-visible { outline: 3px dashed var(--pet-accent); outline-offset: 3px; }
.pet-back {
  display: inline-flex; align-items: center; margin: 0 0 12px; padding: 6px 10px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; background: var(--pet-paper); color: var(--pet-text); box-shadow: var(--pet-frame);
}

/* r9 #18:装扮锁定格只放像素锁 + Lv.N / 掉落,固定宽度居中;点一下看说明 */
.pet-wardrobe { grid-template-columns: repeat(5, 1fr); }
.pet-acc { min-width: 0; }
.pet-acc small { width: 100%; justify-content: center; font-size: 11px; overflow: hidden; }
.pet-acc.locked { cursor: pointer; }
.pet-acc.locked .pet-acc-cv { filter: grayscale(1); opacity: .45; }
.pet-acc.locked small { color: var(--pet-muted); }

/* r9:牵着走的时候整层透明穿透 —— 不压暗、不拦点按,聊天照常可用(本人与对方回放一致) */
.pet-leash-ov.walking { background: transparent; pointer-events: none; cursor: auto; }
.pet-leash-ov.walking .pet-leash-tip { display: none; }

/* ================= r10(第 9 轮评审修复)================= */
/* #2 横幅跟着花生:JS 写 left/right/bottom;花生离开输入栏时收起;让位给更高优先级的说话者 */
.pet-bubble.away, .pet-bubble.yield { display: none !important; }
.pet-bubble.flip::after { left: auto; right: calc(100% + var(--pet-px)); box-shadow: 3px -3px 0 0 var(--pet-paper-2), 3px 0 0 0 var(--pet-line); }
.pet-bubble.flip { padding: 6px 6px 6px 10px; }

/* #1 头顶气泡避让:侧边摆放(尾巴横着指花生)/ 半透明穿透 */
.pet-float .pet-say.side-l, .pet-float .pet-say.side-r { bottom: auto; top: var(--say-dy, 0px); transform: none; }
.pet-float .pet-say.side-l { left: auto; right: calc(100% + 10px); }
.pet-float .pet-say.side-r { left: calc(100% + 10px); }
.pet-float .pet-say.side-l.pop, .pet-float .pet-say.side-r.pop { animation: pet-say-side .2s steps(2, jump-none); }
@keyframes pet-say-side { from { opacity: .3; } to { opacity: 1; } }
.pet-float .pet-say.side-l::after, .pet-float .pet-say.side-r::after { top: 12px; }
.pet-float .pet-say.side-l::after { left: calc(100% + var(--pet-px)); box-shadow: -3px -3px 0 0 var(--pet-paper-2), -3px 0 0 0 var(--pet-line), -3px 3px 0 0 var(--pet-line); }
.pet-float .pet-say.side-r::after { left: auto; right: calc(100% + var(--pet-px)); box-shadow: 3px -3px 0 0 var(--pet-paper-2), 3px 0 0 0 var(--pet-line), 3px 3px 0 0 var(--pet-line); }
.pet-float .pet-say.ghost { opacity: .55; pointer-events: none; }
.pet-float .pet-say.below { bottom: auto; top: calc(100% + 10px); }
.pet-float .pet-say.below::after { top: auto; bottom: calc(100% + var(--pet-px)); box-shadow: 0 3px 0 0 var(--pet-paper-2), -3px 3px 0 0 var(--pet-line), 3px 3px 0 0 var(--pet-line); }

/* #4 #5 菜单:两页同一种图标格,「更多 ›」在同一格里翻页,不再往下长;放不下时内部滚动 */
.pet-menu { overflow-y: auto; overscroll-behavior: contain; }
.pet-mgrid[hidden] { display: none; }
.pet-menu .pet-mgrid[data-page="2"] { min-height: 132px; align-content: start; }
.pet-menu .pet-mmore { gap: 4px; }
.pet-menu .pet-mmore i { transition: none; }
.pet-menu .pet-mmore[aria-expanded="true"] i { transform: none; }

/* #8 二级页面包屑「照顾 › 每日一问」:取代「‹ 照顾」钮 */
.pet-crumb { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 14px; font-weight: 900; }
.pet-crumb i { font-style: normal; color: var(--pet-muted); }
.pet-crumb b { color: var(--pet-text); }
.pet-crumb-up {
  min-height: 32px; margin: -6px 0 -6px -8px; padding: 6px 8px; border: 0; cursor: pointer; background: transparent;
  font: inherit; font-weight: 800; color: var(--pet-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.pet-crumb-up:focus-visible { outline: 3px dashed var(--pet-accent); outline-offset: 0; }

/* #9 入口卡:两张同高,箭头垂直居中、与正文留 12px */
.pet-entries { align-items: stretch; }
.pet-entry { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 3px; padding: 12px; min-height: 64px; }
.pet-entry b { grid-column: 1; grid-row: 1; }
.pet-entry small { grid-column: 1; grid-row: 2; }
.pet-entry i { position: static; transform: none; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; }
/* 宫格里格子靠间距分隔,不要竖排列表那条横线(r10 交叉检查) */
.pet-menu.pet-menu-grid button + button { box-shadow: none; }

/* ================= r11(第 10 轮评审修复)================= */
/* F1 横幅:最小宽度,短句不折行;两侧都窄时放在花生头顶(尾巴朝下指它) */
.pet-bubble { min-width: min(240px, calc(100vw - 86px)); text-wrap: wrap; }
.pet-bubble.short .pet-bubble-text { white-space: nowrap; }
.pet-bubble-text { flex: 1 1 auto; }
.pet-bubble.above::after {
  left: var(--tail-x, 50%); right: auto; bottom: auto; top: calc(100% + var(--pet-px));
  box-shadow: 0 -3px 0 0 var(--pet-paper-2), -3px -3px 0 0 var(--pet-line), 3px -3px 0 0 var(--pet-line);
}
/* (r14) 底部让位统一由 world.js Porch 计算:见 Porch.need */
/* F2 卡内提示改成浮在卡片底部(不再插在表头与内容之间把内容推下去 50px 再弹回来) */
.pet-card-body { position: relative; }
.pet-notice-slot { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; padding: 0; pointer-events: none; }
.pet-notice-slot .pet-card-notice { position: static; margin: 0; box-shadow: var(--pet-frame), 0 calc(var(--pet-px) * 2) 0 0 var(--pet-shadow), 0 8px 20px rgba(30, 37, 41, .16); }
/* 内容区顶边:滚动时上沿 10px 渐隐,被切的格子一看就是「滚上去了」,不像被什么盖住 */
.pet-pane {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 16px), transparent);
}
.pet-pane.pane-talk { -webkit-mask-image: none; mask-image: none; }
/* F3 侧放气泡的尾巴跟着花生的高度走(JS 写 --say-tail-y);不再有半透明「鬼影」气泡 —— 没空档就不出字 */
.pet-float .pet-say.side-l::after, .pet-float .pet-say.side-r::after { top: var(--say-tail-y, 12px); }
.pet-float .pet-say.ghost { opacity: 1; }
/* F5 卡内每日一问标题:卡比独立面板窄,字号收 2px + 标题平衡断行(标题不是聊天气泡,允许 balance),不再拆开「假期」 */
.pet-pane [data-embed="dailyq"] .dq-qtext { font-size: 19px; text-wrap: wrap; }
/* 横幅是提示不是聊天气泡:两行时平衡断行,不把「叫 Claire」拆到两行 */
.pet-bubble-text { text-wrap: pretty; }   /* 同上:中文 balance 会拆词 */
.pet-float.zz-blocked .pet-zz { display: none; }
/* 默认皮肤:卡片外框比聊天界面重 → 外框单独减到 2px(内部格子仍是像素描边;r15 建议) */
html:not([data-theme="island"]) .pet-card-sheet {
  --pet-frame: 0 -2px 0 0 var(--pet-line), 0 2px 0 0 var(--pet-line), -2px 0 0 0 var(--pet-line), 2px 0 0 0 var(--pet-line);
  box-shadow: var(--pet-frame), 0 8px 0 0 var(--pet-shadow);
}
/* 说话页只有几句时,对话区下面给一行轻提示 + 话题,不留大片空白(r15 建议) */
.pet-talk-more { display: grid; justify-items: center; gap: 8px; padding: 18px 4px 6px; text-align: center; }
.pet-talk-more p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--pet-muted); }

/* ---------- 深色外观(默认皮肤):纸面变成夜色卡片,像素描边改成雾蓝亮线,狗本身不变 ---------- */
html[data-scheme="dark"] {
  --pet-line: #9FB6CC;          /* 描边/结构:卡面上 7.6:1 */
  --pet-paper: #1C2329;
  --pet-paper-2: #232B32;
  --pet-text: #E6EBEE;          /* 13.2:1 */
  --pet-muted: #A9B4BC;         /* 7.5:1 */
  --pet-accent: #8FB3D6;        /* 小标题 7.3:1;主按钮底(深字 8.0:1) */
  --pet-accent-ink: #0F1B26;
  --pet-portrait: #2A3743;
  --pet-track: rgba(159, 182, 204, .2);
  --pet-gold: #D9AE4A;
  --pet-scrim: rgba(0, 0, 0, .55);
  --pet-shadow: rgba(0, 0, 0, .5);
}
/* 像素图标/宝贝的描边是固定深棕(TPAL),深色卡面上会沉下去:四向 1px 浅色描边托一下 */
html[data-scheme="dark"] .pet-mi,
html[data-scheme="dark"] .pet-card canvas:not(.pet-cv),
html[data-scheme="dark"] .world-drop canvas,
html[data-scheme="dark"] .world-drop img {
  filter: drop-shadow(1px 0 0 rgba(214, 226, 236, .55)) drop-shadow(-1px 0 0 rgba(214, 226, 236, .55)) drop-shadow(0 1px 0 rgba(214, 226, 236, .55)) drop-shadow(0 -1px 0 rgba(214, 226, 236, .55));
}

/* ===== 精修(工艺审计 C 组) ===== */
/* #12 深色:实心按钮的「厚度」用更深的强调色,不再比按钮面还亮 */
html[data-scheme="dark"] .pet-btn { box-shadow: 0 4px 0 0 color-mix(in srgb, var(--pet-accent) 55%, #000); }
html[data-scheme="dark"] .pet-btn:active:not(:disabled) { box-shadow: 0 1px 0 0 color-mix(in srgb, var(--pet-accent) 55%, #000); }
/* #13 菜单最后一行只剩 1 格时放到中间(「更多」页 7 项) */
.pet-mgrid > .pet-mtile:last-child:nth-child(3n+1) { grid-column: 2; }
/* #15 才艺:三列等宽网格;锁住的写「装死 · Lv.5」,不换行 */
.pet-tricks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pet-tricks .pet-chip { justify-content: center; white-space: nowrap; padding: 6px 6px; }
.pet-tricks .pet-chip small { font-size: 11px; font-weight: 700; opacity: .85; }
/* #16 狗牌背包:数量改成右上角角标(与聊天页背包同一写法) */
.pet-bag-it { position: relative; }
.pet-bag-it b {
  position: absolute; right: 3px; top: 3px; font: 900 11px/1 var(--font-family, -apple-system, sans-serif);
  padding: 2px 4px; color: var(--pet-accent-ink, #fff); background: var(--pet-accent, #3B5B7A);
}
.pet-bag-it:disabled b { color: var(--pet-paper, #FFF8EC); background: var(--pet-muted, #6B5A48); }
/* #17 说话页空状态:在对话区里垂直居中;三个话题一行排下 */
.pet-log > .pet-talk-empty { margin-block: auto; }
.pet-talk-empty .pet-starters { flex-wrap: nowrap; }
.pet-talk-empty .pet-chip { padding: 6px 9px; white-space: nowrap; }
/* #18 日记合并后的一行 */
.pet-diary li p .pet-dx { font-weight: 800; color: var(--pet-muted); }

/* ===== craft2(第二轮精修)===== */
/* 散步进度:10 格像素,走过的格子留爪印,当前格是花生;steps 节奏不做平滑 */
.pet-walk-prog { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 12px 2px 4px; }
.pet-walk-prog i { position: relative; height: 14px; background: var(--pet-track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pet-line) 25%, transparent); }
.pet-walk-prog i.on { background: color-mix(in srgb, var(--pet-accent) 28%, var(--pet-track)); }
.pet-walk-prog i.on::after {   /* 小爪印:一个肉垫 + 三个趾头(像素) */
  content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; transform: translate(-50%, 0);
  background: var(--pet-line);
  box-shadow: -2px 0 0 0 var(--pet-line), 2px 0 0 0 var(--pet-line), -3px -3px 0 0 var(--pet-line), 0 -4px 0 0 var(--pet-line), 3px -3px 0 0 var(--pet-line);
}
.pet-walk-prog i.cur { background: var(--pet-accent); animation: pet-walk-cur 1s steps(2, jump-none) infinite; }
.pet-walk-prog i.cur::after { background: var(--pet-accent-ink, #fff); box-shadow: -2px 0 0 0 var(--pet-accent-ink, #fff), 2px 0 0 0 var(--pet-accent-ink, #fff), -3px -3px 0 0 var(--pet-accent-ink, #fff), 0 -4px 0 0 var(--pet-accent-ink, #fff), 3px -3px 0 0 var(--pet-accent-ink, #fff); content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; transform: translate(-50%, 0); }
@keyframes pet-walk-cur { 50% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .pet-walk-prog i.cur { animation: none; } }
/* 散步木牌可点(打开散步页),给出按压反馈 */
.pet-float.is-out { cursor: pointer; }
.pet-float.is-out:active .pet-out-sign { transform: translateX(-50%) translateY(1px); }
/* 侧边气泡入场别从 30% 透明度起(偷看/贴边时截到就是一块灰);改成 70% 起、两步到位 */
@keyframes pet-say-side { from { opacity: .7; } to { opacity: 1; } }
/* 真压在消息文字上才半透明,且仍清楚可读 */
.pet-float .pet-say.ghost { opacity: .9; }

/* ================= 新玩法(2026-10):接球 · 捉迷藏 · 一起宠 · 洗澡 ================= */
/* 球:fab-float(锁屏/登录/连接遮罩自动隐藏),8×8 像素放大 2.5 倍 */
.pg-ball { width: 20px; height: 20px; z-index: 42; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.pg-ball::before { content: ''; position: absolute; inset: -10px; }   /* 点按区 ≥44px */
.pg-ball img { width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.pg-ball.held { cursor: grabbing; }
.pg-ball.held img { transform: scale(1.15); }
.pg-ball.flying img { animation: pg-spin .32s steps(4, jump-none) infinite; }
.pg-ball.gone { visibility: hidden; }
.pg-ball.tug { pointer-events: none; z-index: 42; }
.pg-ball.tug img { animation: pg-tug .24s steps(2, jump-none) infinite; }
.pg-ball.pop img { animation: pg-pop .6s steps(4, jump-none) forwards; }
@keyframes pg-spin { to { transform: rotate(360deg); } }
@keyframes pg-tug { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes pg-pop { 40% { transform: translate(14px, -26px); } 100% { transform: translate(28px, 0); opacity: 0; } }
.pg-combo {
  position: absolute; right: -10px; top: -6px; z-index: 3; padding: 1px 5px 2px; border-radius: 6px;
  font: 800 11px/1.2 ui-monospace, Menlo, monospace; color: var(--pet-accent-ink, #fff); background: var(--pet-accent, #3B5B7A);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18); pointer-events: none;
}
.pg-combo.bump { animation: pg-bump .26s steps(3, jump-none); }
@keyframes pg-bump { 50% { transform: scale(1.35); } }

/* 捉迷藏:花生本体隐身,只在藏身处露出耳朵/尾巴;25 秒后轻轻抖一抖给提示 */
.pet-float.pg-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.pg-peek { z-index: 42; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pg-peek::before { content: ''; position: absolute; inset: -10px; }
.pg-peek img { width: 48px; image-rendering: pixelated; pointer-events: none; display: block; }
.pg-peek.edge-l img { width: 48px; transform: rotate(90deg); transform-origin: 24px 11px; }
.pg-peek.edge-r img { width: 48px; transform: rotate(-90deg); transform-origin: 24px 11px; }
.pg-peek .pg-tail { width: 24px; }
.pg-peek { animation: pg-peek-in .4s steps(3, jump-none) both; }
.pg-peek.rustle img { animation: pg-rustle 1.6s steps(2, jump-none) infinite; }
.pg-peek.found img { animation: pg-pop-up .3s steps(2, jump-none) forwards; }
.pg-peek.out { opacity: 0; transition: opacity .25s steps(2, jump-none); }
@keyframes pg-peek-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pg-rustle { 0%, 80%, 100% { translate: 0 0; } 85% { translate: -2px 0; } 92% { translate: 2px 0; } }
@keyframes pg-pop-up { to { translate: 0 -8px; } }
html.pet-scrolled .pg-peek.behind { display: none !important; }

/* 洗澡:擦洗区盖住花生,泡沫点点;洗完甩一身水 */
.pg-scrub { z-index: 43; touch-action: none; cursor: grab; border-radius: 18px; }
.pet-float.pg-bathing .pet-cv { animation: pg-wobble .3s steps(2, jump-none) infinite; }
@keyframes pg-wobble { 0%, 100% { translate: 0 0; } 50% { translate: 1px 0; } }
.pg-foam {
  width: 10px; height: 10px; z-index: 44; border-radius: 3px; pointer-events: none;
  background: #FFFFFF; box-shadow: 0 0 0 2px rgba(126, 200, 240, .55), 6px -4px 0 -2px #FFFFFF, -5px 3px 0 -3px #FFFFFF;
  animation: pg-foam .9s steps(5, jump-none) forwards;
}
@keyframes pg-foam { to { transform: translateY(-14px) scale(.6); opacity: 0; } }
.pg-drop { position: absolute; top: 14px; width: 4px; height: 4px; background: #7EC8F0; box-shadow: 0 0 0 1px rgba(43, 28, 20, .35); pointer-events: none;
  animation: pg-drop 1s steps(5, jump-none) forwards; }
@keyframes pg-drop { 0% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * .7), -18px); } 100% { transform: translate(var(--dx), 10px); opacity: 0; } }

/* 一起宠:两种颜色的心(sunshine 的阳光黄 + Claire 的晴空蓝) */
.pet-spark.duo { color: var(--who-sunshine-edge, #EDBF4A); font-size: 15px; }
.pet-spark.duo:nth-child(even) { color: var(--who-claire-edge, #9EC6EE); }

/* 狗牌「照顾」页:洗澡入口 */
.pet-entry.pet-bath { width: 100%; margin: 0 0 10px; }

@media (prefers-reduced-motion: reduce) {
  .pg-ball img, .pg-peek, .pg-peek img, .pet-float.pg-bathing .pet-cv, .pg-combo.bump { animation: none !important; }
  .pg-foam, .pg-drop { display: none; }
}
/* 往上翻聊天时花生会藏起来:接球的球、擦洗区、泡沫也一起藏 */
html.pet-scrolled .pg-ball, html.pet-scrolled .pg-scrub, html.pet-scrolled .pg-foam, body.pet-card-open .pg-ball, body.pet-card-open .pg-scrub { display: none !important; }
/* 动森给所有 .fab-float 套了奶油圆钮外观(40×40 + 底边):游戏元素只借 fab-float 的显隐规则,外观要还原 */
html[data-theme="island"] .pg-ball, html[data-theme="island"] .pg-peek, html[data-theme="island"] .pg-scrub, html[data-theme="island"] .pg-foam {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-theme="island"] .pg-ball { width: 20px !important; height: 20px !important; }
html[data-theme="island"] .pg-peek { width: auto !important; height: auto !important; }
html[data-theme="island"] .pg-foam { width: 10px !important; height: 10px !important; background: #FFFFFF !important; border-radius: 3px !important; box-shadow: 0 0 0 2px rgba(126, 200, 240, .55), 6px -4px 0 -2px #FFFFFF, -5px 3px 0 -3px #FFFFFF !important; }
.pg-ball:active, .pg-peek:active, .pg-scrub:active { transform: none; }

/* ===== v559:菜单「照顾 | 一起玩」分页 + 底部小字按钮 + 新玩法小圆点;禁用格不再用虚线框 ===== */
.pet-menu .pet-mseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 4px; padding: 0; }
.pet-menu .pet-mseg button {
  position: relative; justify-content: center; align-items: center; min-height: 32px; padding: 4px 8px;
  font-size: 13px; font-weight: 800; color: var(--pet-muted); box-shadow: inset 0 -2px 0 0 var(--pet-track);
}
.pet-menu .pet-mseg button + button { box-shadow: inset 0 -2px 0 0 var(--pet-track); }
.pet-menu .pet-mseg button[aria-selected="true"] { color: var(--pet-text); box-shadow: inset 0 -3px 0 0 var(--pet-accent); }
.pet-menu .pm-dot, .pet-menu .pet-mtile.is-new::after {
  content: ''; position: absolute; width: 6px; height: 6px; background: var(--pet-accent);
  box-shadow: 0 0 0 2px var(--pet-paper);
}
.pet-menu .pm-dot { top: 8px; right: 14px; }
.pet-menu .pet-mtile { position: relative; }
.pet-menu .pet-mtile.is-new::after { top: 6px; right: 6px; }
/* 两页等高:翻页时菜单不再从 207 跳到 266(v559 #23) */
.pet-menu .pet-mgrid[data-page] { min-height: 170px; align-content: start; }   /* 按带小注(今天够啦)那页算,两页真正等高(v559 预审 F4) */
.pet-menu .pet-mgrid.pg-in-r, .pet-menu .pet-mgrid.pg-in-l { animation-duration: .12s; }
.pet-menu .pet-mfoot { display: flex; justify-content: center; gap: 2px; margin-top: 4px; padding-top: 2px; box-shadow: inset 0 1px 0 0 var(--pet-track); }
.pet-menu .pet-mfoot button {
  min-height: 34px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--pet-muted); box-shadow: none;
  justify-content: center; align-items: center;
}
.pet-menu .pet-mfoot button + button { box-shadow: none; }
.pet-menu .pet-mfoot button:not(:disabled):active, .pet-menu .pet-mfoot button:focus-visible { background: var(--pet-accent); color: var(--pet-accent-ink); }
.pet-menu.from-above { transform-origin: 50% 0; }
/* 禁用格:不用虚线框(和像素风不搭),整体淡化去色;小注更淡(v559 #22) */
/* 只淡化图标和名字;「今天够啦/很干净」是在解释为什么不能点,保持可读(v576 设计审计 P2-3:整格 .45 后只剩 2:1) */
.pet-menu .pet-mtile:disabled { outline: 0; opacity: 1; }
.pet-menu .pet-mtile:disabled > :not(small) { opacity: .4; filter: grayscale(1); }
.pet-menu .pet-mtile:disabled small { font-size: 11px; color: var(--pet-muted); opacity: 1; }
/* 菜单外框统一成 2px 像素阶梯(两套皮肤同一种语言;v559 #21) */
.pet-menu {
  --pet-frame: 0 -2px 0 0 var(--pet-line), 0 2px 0 0 var(--pet-line), -2px 0 0 0 var(--pet-line), 2px 0 0 0 var(--pet-line);
  box-shadow: var(--pet-frame), 0 4px 0 0 var(--pet-shadow), 0 10px 24px rgba(0, 0, 0, .14);
}
html[data-theme="island"] .pet-menu {
  --pet-frame: 0 -2px 0 0 #8A6238, 0 2px 0 0 #8A6238, -2px 0 0 0 #8A6238, 2px 0 0 0 #8A6238;
  box-shadow: var(--pet-frame), 0 4px 0 0 #C9A574, 0 10px 24px rgba(74, 46, 24, .16);
}

/* 玩法层(v559 #32):固定满屏、不挡点按;子元素自己决定能不能点(低特异性,类规则可覆盖) */
#game-layer { position: fixed; inset: 0; z-index: 42; pointer-events: none; contain: layout style; }
:where(#game-layer) > * { pointer-events: auto; }
html.hide-pet #game-layer, body.pet-card-open #game-layer { display: none; }

/* 第一次扔球的手势示意:虚线弧 + 小手,像素步进(v559 #11) */
.pg-ball-hint { position: fixed; width: 84px; height: 64px; pointer-events: none !important; z-index: 1; }
.pg-ball-hint .arc { position: absolute; inset: 0; border: 2px dashed var(--pet-line); border-color: var(--pet-line) transparent transparent transparent; border-radius: 50% 50% 0 0; opacity: .55; }
.pg-ball-hint .hand { position: absolute; left: 4px; bottom: 2px; width: 12px; height: 12px; background: var(--pet-line);
  clip-path: polygon(30% 0, 55% 0, 55% 40%, 100% 45%, 100% 100%, 15% 100%, 0 60%, 30% 55%); animation: pg-hand 1.2s steps(6, jump-none) forwards; }
.pg-ball-hint.to-left .hand { left: auto; right: 4px; animation-name: pg-hand-l; }
@keyframes pg-hand { from { transform: translate(0, 0); } 50% { transform: translate(36px, -40px); } to { transform: translate(70px, 0); opacity: .2; } }
@keyframes pg-hand-l { from { transform: translate(0, 0); } 50% { transform: translate(-36px, -40px); } to { transform: translate(-70px, 0); opacity: .2; } }

/* 捉迷藏提示:12 秒轻抖一下;60 秒「咳」(v559 #8) */
.pg-peek.nudge img { animation: pg-rustle .35s steps(2, jump-none) 2; }
.pg-peek.cough::after { content: '咳…'; position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); padding: 2px 6px;
  font-family: inherit; font-weight: 800; font-size: 11px; line-height: 1.2; color: var(--pet-text); background: var(--pet-paper); box-shadow: var(--pet-frame); white-space: nowrap; }

/* 破纪录的金色星星 */
.pet-spark.gold { color: #E8B23A; font-size: 14px; text-shadow: 0 1px 0 #7A4A25; }

/* 照顾页:今天一起玩 + 纪录 */
.pet-games-today { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--pet-muted); }
.pet-games-today p { margin: 0; text-wrap: pretty; }
.pet-games-today .nw { color: var(--pet-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.pet-games-today .pet-records { margin-top: 2px; color: var(--pet-text); }
.pet-games-today .pet-records i { font-style: normal; color: #E8B23A; margin-right: 4px; }
p.pet-games-today.is-empty { font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  .pg-ball-hint .hand, .pg-peek.nudge img { animation: none !important; }
}
/* .fab-float 的显隐原本靠「#page-chat.active ~ .fab-float」兄弟选择器;玩法元素挪进 #game-layer 后改由层本身判定 */
#page-chat.active ~ #game-layer .fab-float { display: flex; }
#game-layer { display: none; }
#page-chat.active ~ #game-layer { display: block; }
.lock-screen:not(.hidden) ~ #game-layer,
#page-login.active ~ #game-layer,
body.ws-busy #game-layer { display: none !important; }

/* 花生头顶气泡:中文折行防孤字(不是聊天气泡,可以用 pretty) */
.pet-say { text-wrap: pretty; }
.pet-float:has(.pet-say:not([hidden])) .pet-zz { display: none; }   /* 说话时不飘瞌睡 z */

/* v576 设计审计 P3:「照顾 / 一起玩」标签与底部两键点击范围外扩到 ≥44px */
.pet-menu .pet-mseg button::after { content: ''; position: absolute; inset: -6px 0; }
.pet-menu .pet-mfoot button { position: relative; }
.pet-menu .pet-mfoot button::after { content: ''; position: absolute; inset: -5px 0; }
/* v576 设计审计 P3:375 宽时三根迷你条挤不下一行,「水分」单独掉行;窄屏收紧间距与格宽 */
@media (max-width: 389px) {
  .pet-minis { gap: 8px; }
  .pet-mini { gap: 4px; }
  .pet-mini > span { grid-template-columns: repeat(5, 5px); }
}