/* ============================================================================
 * restyle_pet.css —— 宠物乐园（pet.html, body.page-pet）呈现层重构
 * 重构线 B组 · 2026-08-31
 * 作用域：body.page-pet（主形象区/喂食互动/弹窗/乐园/日记/储备规则）
 * 配色：主橙 #FF8C42→#FF6B35（60%）/ 天空暖底+白卡（30%）/ 青绿 #4ECDC4 点缀（10%）
 *   —— 原紫(#6c5ce7)/红橙(#ff5722/#ee5a24)等杂色并入橙体系；无红色否定态。
 * 硬指标：喂食/互动主按钮热区 ≥56px · 卡片网格间距 ≥8px · 空态/降级态 ≥14px 且对比 ≥4.5:1
 *         emoji 图标用 padding 撑热区（图标不放大）· 动画 ≤3Hz · safe-area 适配
 * 说明：模板视频/配音弹层为 JS 内联 cssText 创建（无 class），外部 CSS 无法定向；
 *       本文件统一可定向的卡片/弹窗/预览面板样式，并在挂载说明中标注该限制。
 * ========================================================================== */

/* ---------- 0. 页面基底 ---------- */
body.page-pet {
  --rs-orange: #FF8C42;
  --rs-orange-deep: #FF6B35;
  --rs-orange-soft: #FFE8D6;
  --rs-teal: #4ECDC4;
  --rs-teal-deep: #2FA99F;
  --rs-ink: #3D2B1F;
  --rs-ink-2: #6B5D52;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFEFD9 100%);
}

/* ---------- 1. 天空顶栏：日期/储备/设置 ---------- */
body.page-pet .pet-sky {
  background: linear-gradient(180deg, #FFB26B 0%, #FF8C42 70%, rgba(255, 140, 66, 0) 100%);
  border-radius: 0 0 28px 28px;
}
/* 日期胶囊：≥16px（原16px保） */
body.page-pet .pet-day {
  font-size: 16px;
  font-weight: 800;
  color: var(--rs-orange-deep);
  min-height: 40px;
  display: flex;
  align-items: center;
}
/* 储备胶囊：标签/数字 ≥14px（原11/16px），热区 ≥44px */
body.page-pet .pet-bank-wrap {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 22px;
  gap: 6px;
}
body.page-pet .pbw-icon { font-size: 18px; }
body.page-pet .pbw-label { font-size: 14px; font-weight: 600; color: var(--rs-ink-2); }
body.page-pet .pbw-value { font-size: 17px; color: var(--rs-orange-deep); }
/* 设置钮（裸图标）：热区 ≥44px（原36px），图标不放大 */
body.page-pet .pet-settings {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

/* ---------- 2. 主形象区 ---------- */
body.page-pet .pet-stage {
  padding: calc(92px + env(safe-area-inset-top)) 14px 12px;
}
/* 角色光环：暖色柔光（动画 3s ≈0.33Hz，达标） */
body.page-pet .pet-aura {
  background: radial-gradient(circle, rgba(255, 200, 120, 0.45) 0%, rgba(255, 140, 66, 0.12) 60%, transparent 75%);
}
body.page-pet .pet-avatar-wrap {
  width: 62%;
  max-width: 220px;
}
body.page-pet .pet-img {
  filter: drop-shadow(0 8px 20px rgba(255, 140, 66, 0.25));
}
/* 心情 emoji：保留尺寸 */
body.page-pet .pet-mood-emoji { font-size: 28px; }

/* 侧按钮（召唤/预览）：热区 ≥44px（原32px高胶囊），图标+文字 */
body.page-pet .pet-side-btns { gap: 10px; }
body.page-pet .pet-summon-btn,
body.page-pet .pet-preview-btn {
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 800;
  gap: 5px;
  border-radius: 22px;
  animation: none;               /* 去倾斜呼吸：按钮不再歪，按压反馈保留 :active */
}
/* 召唤：原紫色 → 青绿辅助色 */
body.page-pet .pet-summon-btn {
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep));
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
}
/* 预览：原橙黄偏色 → 主橙 */
body.page-pet .pet-preview-btn {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
}
body.page-pet .pet-summon-btn .psb-icon,
body.page-pet .pet-preview-btn .psb-icon { font-size: 17px; }
body.page-pet .pet-summon-btn:active,
body.page-pet .pet-preview-btn:active { transform: scale(0.94); }

/* 名字 / 阶段名 / 描述：≥14px 对比度够 */
body.page-pet .pet-name { font-size: 22px; color: var(--rs-ink); }
body.page-pet .pet-stage-name {
  font-size: 13px;
  font-weight: 800;
  padding: 3px 14px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
}
/* 描述 12px灰 → 14px 深棕（空态/降级态文字达标线） */
body.page-pet .pet-desc {
  font-size: 14px;
  color: var(--rs-ink-2);
  line-height: 1.5;
}

/* 状态条：数值/文字 ≥12px（条形内紧凑标签，非正文）— 提到 12px 保证对比 */
body.page-pet .psb-val { font-size: 12px; color: var(--rs-ink-2); width: 60px; }
body.page-pet .psb-text { font-size: 12px; color: var(--rs-ink-2); width: 56px; }
body.page-pet .psb-icon { font-size: 15px; width: 22px; }
body.page-pet .psb-track { height: 10px; }

/* ---------- 3. 快捷按钮（食物仓库/商店）：大热区 ≥56px ---------- */
body.page-pet .pet-quick-btns { gap: 12px; margin-top: 8px; }
body.page-pet .pqb-btn {
  min-height: 56px;                /* 硬指标：主操作 ≥56px */
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
  gap: 8px;
}
body.page-pet .pqb-btn .pqb-icon { font-size: 20px; }
body.page-pet .pqb-btn.active {
  background: linear-gradient(135deg, var(--rs-orange-deep), #E55A2B);
}

/* ---------- 4. 互动按钮（喂食/玩耍等 JS 渲染）：热区 ≥56px、标签 ≥12px ---------- */
body.page-pet .pet-actions2 { gap: 10px; margin-top: 10px; flex-wrap: wrap; }
body.page-pet .pet-action-btn2 {
  min-width: 60px;
  min-height: 56px;                 /* 互动主按钮热区达标 */
  padding: 10px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF3E8 100%);
  box-shadow: 0 3px 10px rgba(255, 140, 66, 0.18);
  gap: 3px;
}
body.page-pet .pet-action-btn2 .pab2-emoji { font-size: 24px; }
/* 标签 10px → 12px（按钮内标签最小可读） */
body.page-pet .pet-action-btn2 .pab2-label { font-size: 12px; font-weight: 700; color: var(--rs-ink-2); }
/* 冷却角标：原红色 #ff5722 → 主橙 */
body.page-pet .pet-action-btn2 .pab2-cd {
  background: var(--rs-orange-deep);
  font-size: 10px;
  padding: 2px 6px;
}
/* 分享海报按钮：原红橙渐变 #ff6b6b→#ee5a24 → 青绿辅助色（区分喂食主动作） */
body.page-pet .pet-action-share {
  background: linear-gradient(135deg, var(--rs-teal), var(--rs-teal-deep)) !important;
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4) !important;
}
body.page-pet .pet-action-share .pab2-label { color: #fff !important; }

/* ---------- 5. 成长值卡 / 任务卡：圆角20、柔和橙影 ---------- */
body.page-pet .pet-card.pet-card-inner {
  border-radius: 20px;
  padding: 12px 14px;
  margin: 6px 0;
  box-shadow: 0 4px 16px rgba(255, 140, 66, 0.12);
}
body.page-pet .pet-progress-head { font-size: 14px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .pet-progress-track { height: 18px; border-radius: 10px; background: #FDEBD7; }
body.page-pet .pp-seg-fill { background: linear-gradient(90deg, #FFB74D, var(--rs-orange-deep)) !important; }
body.page-pet .pet-card-title { font-size: 15px; font-weight: 800; color: var(--rs-ink); }

/* 任务行：字号 ≥14px，去任务按钮热区 ≥40px */
body.page-pet .pet-task { padding: 8px 0; gap: 10px; }
body.page-pet .pt-icon { font-size: 22px; }
body.page-pet .pt-label { font-size: 14px; font-weight: 700; color: var(--rs-ink); }
body.page-pet .pt-meta { font-size: 12px; color: var(--rs-ink-2); }
body.page-pet .pt-go-btn {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  color: #fff;
  display: inline-flex;
  align-items: center;
}
body.page-pet .pt-go-btn.primary { box-shadow: 0 3px 10px rgba(255, 107, 53, 0.35); }

/* ---------- 6. 弹窗群（食物仓库/商店）：统一卡风、空态 ≥14px ---------- */
body.page-pet .pet-modal { border-radius: 24px; max-width: 380px; box-shadow: 0 12px 40px rgba(120, 70, 20, 0.25); }
body.page-pet .pet-modal-head { padding: 16px 18px 10px; }
body.page-pet .pet-modal-title { font-size: 18px; font-weight: 800; color: var(--rs-ink); }
/* 关闭钮：热区 ≥44px（原30px） */
body.page-pet .pet-modal-close {
  width: 44px;
  height: 44px;
  font-size: 16px;
  background: #FFF3E8;
  color: var(--rs-ink-2);
}
body.page-pet .pet-modal-body { padding: 6px 18px 18px; }

/* 空态（食物仓库空）：内联 12px/#bbb → 14px/深棕，对比度 ≥4.5:1（!important 压内联样式） */
body.page-pet .pet-card-extra#petFoodEmpty,
body.page-pet #petFoodEmpty {
  font-size: 14px !important;        /* 压 HTML 内联 font-size:12px */
  color: var(--rs-ink-2) !important; /* 压内联 #bbb */
  font-weight: 600 !important;
  line-height: 1.6;
  padding: 18px 14px !important;
  background: #FFF8F0;
  border-radius: 16px;
  text-align: center;
}

/* 食物网格：间距 ≥8px，喂食卡热区大 */
body.page-pet .pet-food-bag { gap: 10px; flex-wrap: wrap; }
body.page-pet .food-item {
  min-width: 84px;
  padding: 14px 8px;
  border-radius: 18px;
  background: linear-gradient(135deg, #FFF6E5 0%, #FFEED8 100%);
}
body.page-pet .food-emoji { font-size: 34px; }
body.page-pet .food-name { font-size: 14px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .food-xp { font-size: 12px; color: var(--rs-orange-deep); font-weight: 700; }
body.page-pet .feed-hint { font-size: 12px; color: var(--rs-teal-deep); font-weight: 700; margin-top: 2px; }
body.page-pet .food-count {
  background: var(--rs-orange-deep);   /* 原 #ff7043 → 主橙 */
  font-size: 12px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
}

/* 商店列表项：购买钮热区 ≥44px */
body.page-pet .pet-shop { gap: 12px; }
body.page-pet .shop-item {
  padding: 12px 14px;
  border-radius: 18px;
  background: #FFFBF6;
  gap: 14px;
}
body.page-pet .shop-emoji { font-size: 34px; }
body.page-pet .shop-name { font-size: 15px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .shop-desc { font-size: 13px; color: var(--rs-ink-2); }
body.page-pet .shop-buy-btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  box-shadow: 0 3px 10px rgba(255, 107, 53, 0.3);
}

/* ---------- 7. 设置菜单 / 领养 / 换宠 / 储备规则 / 领回确认 ---------- */
body.page-pet .pet-menu { border-radius: 22px; box-shadow: 0 10px 36px rgba(120, 70, 20, 0.25); }
body.page-pet .pet-menu-item {
  font-size: 16px;
  font-weight: 700;
  color: var(--rs-ink);
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-pet .pet-menu-item span:first-child { font-size: 22px; }

/* 领养卡 */
body.page-pet .adopt-card { border-radius: 28px; box-shadow: 0 16px 48px rgba(120, 70, 20, 0.3); }
body.page-pet .adopt-title { font-size: 22px; font-weight: 900; color: var(--rs-ink); }
body.page-pet .adopt-desc { font-size: 14px; color: var(--rs-ink-2); line-height: 1.7; }
/* 领养宠物网格：间距 ≥8px */
body.page-pet .adopt-pet-grid { gap: 12px; }
body.page-pet .adopt-pet-card { border-radius: 20px; padding: 12px 8px; box-shadow: 0 3px 12px rgba(255, 140, 66, 0.15); }
body.page-pet .apc-name { font-size: 14px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .apc-species { font-size: 12px; color: var(--rs-ink-2); }
body.page-pet .adopt-name-input {
  min-height: 52px;
  font-size: 16px;
  border-radius: 16px;
  border: 2px solid #FFD9B8;
}
body.page-pet .adopt-btn {
  min-height: 56px;                /* 主按钮 ≥56px */
  font-size: 17px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.4);
}
body.page-pet .adopt-bank-hint { font-size: 13px; line-height: 1.6; color: var(--rs-ink-2); }

/* 换宠警告：暖黄提示卡（非红） */
body.page-pet .psw-warn {
  background: #FFF8E1;
  color: #8D6E00;
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 14px;
}
body.page-pet .psw-cancel {
  min-height: 52px;
  font-size: 16px;
  border-radius: 18px;
  background: #FFF3E8;
  color: var(--rs-orange-deep);
  font-weight: 800;
}

/* 储备规则弹窗：关闭钮热区、正文 ≥14px */
body.page-pet .pet-popup-card { border-radius: 24px; box-shadow: 0 16px 48px rgba(120, 70, 20, 0.3); }
body.page-pet .ppc-close {
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-pet .ppc-title { font-size: 19px; font-weight: 900; color: var(--rs-ink); }
body.page-pet .ppc-desc { font-size: 14px; line-height: 1.7; color: var(--rs-ink-2); }
body.page-pet .brl-item { gap: 12px; padding: 10px 0; }
body.page-pet .brl-name { font-size: 15px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .brl-detail { font-size: 13px; color: var(--rs-ink-2); line-height: 1.5; }
body.page-pet .ppc-tip { font-size: 14px; line-height: 1.6; color: var(--rs-ink-2); }

/* 领回确认：按钮热区 ≥52px */
body.page-pet .retrieve-confirm-card { border-radius: 24px; box-shadow: 0 16px 48px rgba(120, 70, 20, 0.3); }
body.page-pet .rc-title { font-size: 20px; font-weight: 900; color: var(--rs-ink); }
body.page-pet .rc-desc { font-size: 14px; line-height: 1.7; color: var(--rs-ink-2); }
body.page-pet .rc-btn-cancel,
body.page-pet .rc-btn-ok {
  min-height: 52px;
  font-size: 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-pet .rc-btn-ok {
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
  box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
}

/* ---------- 8. 伙伴乐园：卡片网格间距 ≥8px、空态 ≥14px ---------- */
body.page-pet .paradise-header {
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  font-size: 18px;
}
body.page-pet .paradise-back {
  width: 44px;
  height: 44px;                    /* 返回热区 ≥44px */
  font-size: 22px;
}
body.page-pet .paradise-grid {
  gap: 12px;                       /* 网格间距 ≥8px */
  padding: 14px;
}
body.page-pet .paradise-card {
  border-radius: 20px;
  padding: 14px 10px 12px;
  box-shadow: 0 4px 14px rgba(255, 140, 66, 0.14);
}
body.page-pet .paradise-card-img { width: 60px; height: 60px; border-width: 3px; }
body.page-pet .paradise-card-name { font-size: 14px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .paradise-card-species { font-size: 12px; color: var(--rs-ink-2); }
body.page-pet .paradise-card-growth { font-size: 13px; color: var(--rs-orange-deep); font-weight: 800; }
body.page-pet .paradise-card-tag { font-size: 11px; padding: 3px 9px; }
body.page-pet .paradise-card-btn {
  min-height: 40px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--rs-orange), var(--rs-orange-deep));
}
/* 乐园空态：≥14px 深字（原14px/#999，提到对比线） */
body.page-pet .paradise-empty-text {
  font-size: 15px;
  color: var(--rs-ink-2);
  line-height: 1.8;
}
body.page-pet .paradise-empty-emoji { font-size: 52px; }

/* 成长日记弹层 */
body.page-pet .pdc-header { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
body.page-pet .pdc-back { width: 44px; height: 44px; font-size: 20px; }
body.page-pet .pdc-title { font-size: 18px; font-weight: 900; }
body.page-pet .pdc-pet-name { font-size: 16px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .diary-timeline { font-size: 14px; }

/* 预览面板（召唤/预览阶段缩略图）：统一暖卡风 */
body.page-pet .pet-preview-panel {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(120, 70, 20, 0.25);
}
body.page-pet .pet-preview-panel .ppp-item {
  padding: 10px 14px;
  border-radius: 16px;
  background: #FFF8F0;
  margin-bottom: 6px;
}
body.page-pet .pet-preview-panel .ppp-item.current {
  background: #FFE8D6;
  outline: 2px solid var(--rs-orange);
}
body.page-pet .pet-preview-panel .ppp-thumb {
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
body.page-pet .pet-preview-panel .ppp-label { font-size: 15px; font-weight: 800; color: var(--rs-ink); }
body.page-pet .pet-preview-panel .ppp-stage-num { font-size: 12px; color: var(--rs-ink-2); }

/* Toast：≥14px */
body.page-pet .pet-toast {
  font-size: 15px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 22px;
}

/* ---------- 9. 小屏适配（375px 优先） ---------- */
@media (max-width: 360px) {
  body.page-pet .pqb-btn { font-size: 15px; padding: 13px 10px; }
  body.page-pet .pet-action-btn2 { min-width: 54px; padding: 9px 10px; }
  body.page-pet .paradise-grid { gap: 10px; padding: 10px; }
}