/* ==========================================================================
   卡皮巴拉养成游戏 —— 兽栏界面样式
   与 style.css / game.css 同一套配色（蓝紫主色 + 暖黄提示）
   ========================================================================== */

.pet-panel { margin: 0; }

.pet-card { display: flex; flex-direction: column; gap: 14px; }

/* ---------------------------------------------------------------- 头部 --- */
.pet-hero {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(120deg, #eef4ff, #f8f2ff);
  border: 1px solid #dfe6fa; border-radius: 14px; padding: 16px 18px;
}
.pet-avatar {
  width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%;
  background: #fff; border: 3px solid #cfe0ff;
  display: grid; place-items: center; font-size: 44px;
  box-shadow: 0 4px 14px rgba(59,110,245,.14);
}
.pet-avatar[data-stage="s3"] { border-color: #ffd76a; box-shadow: 0 4px 18px rgba(255,190,40,.35); }
.pet-avatar[data-stage="s4"] { border-color: #b98bff; box-shadow: 0 0 22px rgba(150,90,255,.4); }

.pet-bio { flex: 1; min-width: 0; }
.pet-name { font-size: 20px; font-weight: 700; color: #1d2a44; }
.pet-title { font-size: 13px; font-weight: 400; color: #7c8bab; margin-left: 6px; }
.pet-perk { font-size: 13.5px; color: #a4660a; margin: 4px 0 10px; }

.pet-bars { display: flex; flex-direction: column; gap: 7px; }
.pet-bar { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #5b6a86; }
.pet-bar > span { flex: 0 0 32px; }
.pet-bar > b { flex: 0 0 auto; font-size: 12.5px; color: #3c4a68; }
.pb-track { flex: 1; height: 10px; border-radius: 999px; background: #e6ecf8; overflow: hidden; }
.pb-track > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #3b6ef5, #6f4df3);
  transition: width .35s ease;
}
.pet-bar.full .pb-track > i { background: linear-gradient(90deg, #ffb547, #ff7a59); }

.pet-wallet {
  margin-top: 10px; font-size: 14px; color: #3c4a68;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pet-wallet b { color: #a4660a; font-size: 16px; }
.pet-hint { font-size: 12px; color: #93a1bd; }

/* -------------------------------------------------------------- 进化条 --- */
.pet-stages { display: flex; gap: 8px; flex-wrap: wrap; }
.pst {
  flex: 1 1 0; min-width: 96px; text-align: center;
  border: 1px dashed #dfe6fa; border-radius: 11px; padding: 9px 6px;
  background: #fbfcff; opacity: .5;
}
.pst.on { opacity: 1; border-style: solid; border-color: #cfe0ff; background: #f2f7ff; }
.pst.cur { border-color: #3b6ef5; box-shadow: 0 0 0 2px rgba(59,110,245,.15); background: #eef4ff; }
.pst-emoji { display: block; font-size: 20px; }
.pst-name { display: block; font-size: 13px; font-weight: 600; color: #2a3a58; margin-top: 3px; }
.pst-need { display: block; font-size: 11px; color: #8b99b6; }

/* ---------------------------------------------------------------- 冒险 --- */
.pet-trip {
  border: 1px solid #ffe0a8; border-radius: 12px; padding: 12px 14px;
  background: #fffaf0;
}
.pet-trip.ready { border-color: #ffc44d; background: #fff4d9; animation: petPulse 1.6s ease-in-out infinite; }
@keyframes petPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,180,60,.4); } 50% { box-shadow: 0 0 0 8px rgba(255,180,60,0); } }
@media (prefers-reduced-motion: reduce) { .pet-trip.ready { animation: none; } }
.pt-head { font-size: 14px; color: #6b5327; font-weight: 600; }
.pt-track { height: 9px; border-radius: 999px; background: #ffeccb; overflow: hidden; margin: 8px 0 6px; }
.pt-track > i { display: block; height: 100%; background: linear-gradient(90deg, #ffb547, #ff8f3f); transition: width .5s linear; }
.pt-foot { font-size: 13px; color: #8a7340; }

.pet-log { font-size: 12.5px; color: #5b6a86; }
.pl-row { padding: 3px 0; border-bottom: 1px dashed #eef2fa; }
.pl-row:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ 食物卡片 --- */
.pet-sec > h3 { font-size: 15px; color: #1d2a44; margin-bottom: 9px; }
.pet-foods { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; }
.pet-food {
  font-family: inherit; text-align: center; cursor: pointer;
  border: 1px solid #dfe6fa; border-radius: 11px; padding: 10px 6px;
  background: #fff; display: flex; flex-direction: column; gap: 2px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pet-food:hover { transform: translateY(-2px); border-color: #3b6ef5; box-shadow: 0 6px 16px rgba(59,110,245,.16); }
.pet-food.off { opacity: .45; cursor: not-allowed; }
.pet-food.off:hover { transform: none; border-color: #dfe6fa; box-shadow: none; }
.pf-emoji { font-size: 22px; }
.pf-name { font-size: 13px; font-weight: 600; color: #2a3a58; }
.pf-price { font-size: 12px; color: #a4660a; }
.pf-grow { font-size: 11px; color: #8b99b6; }

/* ------------------------------------------------------------ 地图卡片 --- */
.pet-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.pet-map {
  font-family: inherit; text-align: left; cursor: pointer;
  border: 1px solid #dfe6fa; border-radius: 11px; padding: 11px 13px;
  background: #fff; display: flex; flex-direction: column; gap: 2px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pet-map:hover { transform: translateY(-2px); border-color: #3b6ef5; box-shadow: 0 6px 16px rgba(59,110,245,.16); }
.pet-map.locked, .pet-map.off { opacity: .5; cursor: not-allowed; }
.pet-map.locked:hover, .pet-map.off:hover { transform: none; border-color: #dfe6fa; box-shadow: none; }
.pm-emoji { font-size: 20px; }
.pm-name { font-size: 14px; font-weight: 600; color: #2a3a58; }
.pm-meta { font-size: 12px; color: #a4660a; }
.pm-tip { font-size: 11.5px; color: #8b99b6; }

/* ------------------------------------------------------------ 家人心愿 --- */
.pet-family { display: flex; flex-direction: column; gap: 8px; }
.pet-fam {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid #dfe6fa; border-radius: 11px; padding: 10px 12px; background: #fff;
}
.pet-fam.done { background: #f2fbf5; border-color: #bfe6cd; }
.pfm-emoji { font-size: 24px; flex: 0 0 auto; }
.pfm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pfm-main b { font-size: 14px; color: #2a3a58; }
.pfm-wish { font-size: 12.5px; color: #5b6a86; }
.pfm-perk { font-size: 11.5px; color: #3b8f5b; }
.pfm-ok { font-size: 13px; color: #3b8f5b; font-weight: 600; }

/* ---------------------------------------------------------------- 按钮 --- */
.pet-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid #3b6ef5; border-radius: 9px; padding: 7px 13px;
  background: #3b6ef5; color: #fff; transition: filter .12s ease;
}
.pet-btn:hover { filter: brightness(1.08); }
.pet-btn.off { background: #dbe3f2; border-color: #dbe3f2; color: #8b99b6; cursor: not-allowed; }
.pet-btn.sm { padding: 5px 10px; font-size: 12px; }
.pet-btn.go { margin-top: 9px; background: #ff8f3f; border-color: #ff8f3f; }

/* -------------------------------------------------------------- 战利品 --- */
.pet-loots { display: flex; gap: 7px; flex-wrap: wrap; }
.pet-loot {
  font-size: 12.5px; color: #6b5327; background: #fff7e8;
  border: 1px solid #f6dda6; border-radius: 999px; padding: 4px 11px;
}
.pet-empty { font-size: 13px; color: #93a1bd; }

/* ------------------------------------------------------------ 轻提示条 --- */
.pet-tip {
  display: none; font-size: 13.5px; border-radius: 10px; padding: 0;
  background: #eef4ff; color: #2a4fa8; border: 1px solid #c9dbff;
}
.pet-tip.show { display: block; padding: 10px 13px; }
.pet-tip.show.bad { background: #fff2f2; border-color: #f7c9c9; color: #b03a3a; }