/* ==========================================================
   电子西西 · 虚拟宠物页
   依赖 style.css 的变量与基础组件(chip / btn / nav / footer)
   ========================================================== */

.pet-page { max-width: 1080px; margin: 0 auto; padding: clamp(30px, 5vw, 56px) 24px 70px; }

.pet-head { text-align: center; margin-bottom: 40px; }
.pet-head h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 52px);
  letter-spacing: .06em;
  margin-top: 16px;
}

.pet-layout {
  display: grid;
  grid-template-columns: minmax(300px, 560px) minmax(280px, 400px);
  gap: clamp(22px, 3.4vw, 40px);
  justify-content: center;
  align-items: stretch;
}

/* ---------- 房间舞台 ---------- */

.pet-stage {
  position: relative;
  min-height: 460px;
  border: 3px solid var(--ink);
  border-radius: 30px 36px 32px 38px / 36px 30px 38px 32px;
  background:
    radial-gradient(rgba(74, 59, 50, .06) 2px, transparent 2.4px),
    linear-gradient(to bottom, #FFF9EE 0 62%, #F6E7CE 62% 100%);
  background-size: 30px 30px, 100% 100%;
  box-shadow: 8px 9px 0 var(--shadow);
  overflow: hidden;
  transition: background-color .6s ease;
  cursor: var(--paw-cursor);
}

/* 窗户 */
.room-window {
  position: absolute; top: 26px; right: 30px;
  width: 118px; height: 96px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  padding: 6px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.win-sky {
  position: relative; width: 100%; height: 100%;
  border-radius: 8px;
  background: var(--sky);
  overflow: hidden;
  transition: background .6s ease;
}
.win-sun {
  position: absolute; top: 12px; left: 14px;
  width: 30px; height: 30px;
  background: var(--sunny);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.win-moon { position: absolute; top: 6px; left: 10px; width: 58px; display: none; }
.win-moon svg { width: 100%; height: auto; }

body.night .win-sky { background: #3B3550; }
body.night .win-sun { display: none; }
body.night .win-moon { display: block; }
body.night .pet-stage {
  background:
    radial-gradient(rgba(255, 253, 247, .05) 2px, transparent 2.4px),
    linear-gradient(to bottom, #575070 0 62%, #423C58 62% 100%);
  background-size: 30px 30px, 100% 100%;
}
body.night .room-rug { background: rgba(142, 209, 184, .4); }

/* 地毯 */
.room-rug {
  position: absolute; left: 50%; bottom: 34px;
  width: 74%; height: 74px;
  transform: translateX(-50%);
  background: #CDE8DB;
  border: 3px solid var(--ink);
  border-radius: 50%;
  transition: background .6s ease;
}

/* 猫姿势容器 */
.pose-box {
  position: absolute; left: 50%; bottom: 52px;
  transform: translateX(-50%);
  width: clamp(190px, 46%, 250px);
  aspect-ratio: 240/300;
  outline: none;
}
.pose {
  position: absolute; inset: 0;
  display: none;
  align-items: flex-end; justify-content: center;
}
.pose.active { display: flex; }
.pose svg { width: 100%; height: auto; display: block; }
.pose-sleep, .pose-belly { bottom: -6%; }
.pose-sleep svg, .pose-belly svg { width: 118%; }

.pose-box.breathe .pose-sit svg,
.pose-box.breathe .pose-sleep svg { animation: breathe 3.2s ease-in-out infinite; }
.pose-box.excited .pose-play svg { animation: bounce .5s ease-in-out infinite; }

/* 摇尾巴 & 拍爪 */
.pose [id$="cat-tail"], .pose [id$="play-tail"], .pose [id$="sleep-tail"], .pose [id$="belly-tail"] {
  transform-box: fill-box;
  transform-origin: 15% 25%;
}
.pose-sit [id$="cat-tail"] { animation: tailwag 3.6s ease-in-out infinite; }
.pose-sleep [id$="sleep-tail"] { animation: tailwag 7s ease-in-out infinite; }
.happy .pose-sit [id$="cat-tail"] { animation-duration: .9s; }
.pose [id$="play-paw"] { transform-box: fill-box; transform-origin: 40% 92%; }
.batting [id$="play-paw"] { animation: paw-bat .45s ease-in-out; }

.cat-shadow {
  position: absolute; left: 50%; bottom: 46px;
  width: 34%; height: 20px;
  transform: translateX(-50%);
  background: rgba(74, 59, 50, .15);
  border-radius: 50%;
}

/* 气泡 */
.pet-bubble {
  position: absolute; top: 26px; left: 28px;
  max-width: 62%;
  font-family: var(--font-display);
  font-size: 16.5px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px 20px 18px 22px / 20px 16px 22px 18px;
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 8px 16px;
  transform: rotate(-1.5deg);
  z-index: 6;
}
.pet-bubble.pop { animation: bubblepop .4s ease; }
.pet-bubble::after {
  content: '';
  position: absolute; bottom: -8px; left: 42px;
  width: 12px; height: 12px;
  background: var(--paper);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}

/* zzz */
.zzz { position: absolute; top: 4%; right: 4%; display: none; }
.pose-box.sleeping .zzz { display: block; }
.zzz span {
  position: absolute; right: 0;
  font-family: var(--font-display);
  color: var(--ink);
  opacity: 0;
  animation: zzz-float 2.7s ease-out infinite;
}
body.night .zzz span { color: var(--cream); }
.zzz span:nth-child(1) { font-size: 18px; animation-delay: 0s; }
.zzz span:nth-child(2) { font-size: 26px; right: 14px; animation-delay: .9s; }
.zzz span:nth-child(3) { font-size: 20px; right: 30px; animation-delay: 1.8s; }

/* 粑粑 / 猫碗 / 逗猫棒 */
.poop-area span.poop {
  position: absolute;
  width: 44px; bottom: 40px;
  cursor: var(--paw-cursor);
  animation: pop-in .35s ease;
}
.poop-area span.poop svg { width: 100%; height: auto; }
.bowl-spot {
  position: absolute; left: 50%; bottom: 34px;
  width: 76px;
  transform: translateX(-50%) translateX(96px);
  display: none;
  animation: pop-in .3s ease;
}
.bowl-spot.show { display: block; }
.bowl-spot svg { width: 100%; height: auto; }
.feather-fly {
  position: absolute; top: 30%; left: 60%;
  width: 74px;
  display: none;
  pointer-events: none;
  z-index: 7;
  filter: drop-shadow(3px 4px 0 rgba(74, 59, 50, .12));
}
.feather-fly.show { display: block; }
.feather-fly svg { width: 100%; height: auto; }

/* 漂浮爱心等复用 index 的 .float-bit / floatup 动画 */

/* ---------- 状态面板 ---------- */

.pet-panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 30px 26px 32px / 30px 24px 32px 26px;
  box-shadow: 7px 8px 0 var(--shadow);
  padding: 24px 24px 20px;
  display: flex; flex-direction: column; gap: 13px;
}
.pet-status { font-size: 15.5px; }
.pet-status span { color: var(--coral-deep); font-family: var(--font-display); }

.stat { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 10px; }
.stat-label { font-family: var(--font-display); font-size: 15px; }
.stat-num { font-size: 13px; color: var(--ink-soft); text-align: right; }
.bar {
  height: 18px;
  border: 3px solid var(--ink);
  border-radius: 12px 14px 12px 14px / 14px 12px 14px 12px;
  background: rgba(74, 59, 50, .07);
  overflow: hidden;
}
.bar-thin { height: 12px; }
.bar-fill {
  height: 100%; width: 50%;
  border-radius: inherit;
  transition: width .6s cubic-bezier(.2, .8, .2, 1), background-color .4s ease;
}
.fill-sunny { background: var(--sunny); }
.fill-coral { background: var(--coral); }
.fill-mint  { background: var(--mint); }
.fill-sky   { background: var(--sky); }
.fill-rose  { background: var(--rose); }
.bar-fill.low { background: #E8896B; animation: bar-alarm 1.2s ease-in-out infinite; }

.pet-actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.pbtn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 15.5px;
  padding: 9px 6px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.pbtn em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.pbtn-ico { width: 24px; height: 22px; display: inline-flex; align-items: center; }
.pbtn-ico svg { width: 100%; height: auto; max-height: 22px; }
.pbtn[disabled] { opacity: .45; pointer-events: none; }

.pet-meta { border-top: 3px dashed rgba(74, 59, 50, .18); padding-top: 12px; display: grid; gap: 8px; }
.meta-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.meta-k { color: var(--ink-soft); }
.meta-v b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--coral-deep); }
#lvTag { font-size: 12px; color: var(--ink-soft); }

.ach-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.ach {
  font-family: var(--font-display);
  font-size: 12px;
  border: 2.5px solid var(--ink);
  border-radius: 12px 15px 13px 16px / 15px 12px 16px 13px;
  padding: 2px 10px;
  background: var(--sunny);
  box-shadow: 2px 2px 0 var(--shadow);
}
.ach.locked { background: transparent; opacity: .38; box-shadow: none; }

.pet-help {
  max-width: 720px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}

.footer-slim { padding: 30px 24px; }
.footer-slim .footer-note { opacity: .7; }

/* ---------- 动画 ---------- */

@keyframes breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.975) translateY(1px); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes paw-bat {
  0% { transform: rotate(0); }
  45% { transform: rotate(-38deg); }
  100% { transform: rotate(0); }
}
@keyframes zzz-float {
  0% { opacity: 0; transform: translate(0, 12px) scale(.7); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(-14px, -46px) scale(1.15); }
}
@keyframes bar-alarm {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@keyframes pop-in {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes poof-out {
  to { transform: scale(.3) rotate(20deg); opacity: 0; }
}
.poop-area span.poop.gone { animation: poof-out .35s ease forwards; }

/* ---------- 响应式 ---------- */

@media (max-width: 880px) {
  .pet-layout { grid-template-columns: 1fr; }
  .pet-stage { min-height: 420px; }
  .pet-actions { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pose-box.breathe .pose-sit svg,
  .pose-box.breathe .pose-sleep svg,
  .pose-sit [id$="cat-tail"],
  .pose-sleep [id$="sleep-tail"] { animation: none !important; }
}