* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  background: linear-gradient(180deg, #c9b6f0 0%, #ddcff5 40%, #f3d9ee 75%, #fbe8ef 100%);
  color: #5a4a7a;
  overflow-x: hidden;
}

/* ---------- 天空与云 ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  filter: blur(30px);
  animation: cloudDrift 60s linear infinite;
}
.c1 { width: 300px; height: 120px; top: 12%; left: -10%; }
.c2 { width: 380px; height: 150px; top: 45%; left: 60%; animation-duration: 80s; }
.c3 { width: 260px; height: 100px; top: 75%; left: 20%; animation-duration: 95s; }
@keyframes cloudDrift {
  from { transform: translateX(-15vw); }
  to   { transform: translateX(115vw); }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 32px;
}
.brand { font-size: 22px; font-weight: 700; color: #6b4fa0; text-shadow: 0 1px 0 #fff; }
.stats { display: flex; gap: 12px; }
.stat {
  background: rgba(255,255,255,0.7);
  padding: 8px 16px; border-radius: 999px;
  font-size: 15px; box-shadow: 0 2px 8px rgba(120, 90, 180, 0.15);
}

/* ---------- 主布局 ---------- */
.layout {
  position: relative; z-index: 1;
  display: flex; gap: 28px;
  max-width: 1060px; margin: 8px auto 40px; padding: 0 24px;
  align-items: flex-start;
}
.stage-panel, .task-panel {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(120, 90, 180, 0.18);
  padding: 24px;
}
.stage-panel { flex: 1.15; text-align: center; }
.task-panel { flex: 1; }

/* ---------- 宠物舞台 ---------- */
.pet-name {
  font-size: 24px; font-weight: 800; letter-spacing: 2px;
  background: linear-gradient(90deg, #f0a830, #e05a8a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 6px rgba(240, 168, 48, 0.25);
  margin-bottom: 4px;
}
.stage-name {
  display: inline-block;
  background: linear-gradient(90deg, #a88ae0, #e8a4c8);
  color: #fff; font-weight: 700; font-size: 16px;
  padding: 6px 22px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(150, 100, 200, 0.35);
  margin-bottom: 12px;
}
.pet-wrap { position: relative; display: inline-block; }
.pet-wrap img, .pet-wrap video {
  width: min(360px, 100%);
  border-radius: 20px;
  cursor: pointer;
}
.pet-wrap img { animation: breathe 3.6s ease-in-out infinite; }
.pet-wrap img, .pet-wrap video {
  transition: transform 0.15s;
  box-shadow: 0 10px 28px rgba(120, 90, 180, 0.25);
}
.pet-wrap.img-change img, .pet-wrap.img-change video { animation: swapIn 0.5s ease; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.015); }
}
@keyframes swapIn {
  from { transform: scale(0.92); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}
.pet-wrap.eating img { animation: eatBounce 0.7s ease; }
@keyframes eatBounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(18px) scale(1.12, 0.85); }
  50%  { transform: translateY(-16px) scale(0.92, 1.12) rotate(-4deg); }
  75%  { transform: translateY(6px) scale(1.06, 0.95) rotate(3deg); }
  100% { transform: translateY(0) scale(1); }
}

/* 点击宠物：蓄力下压 → 跳起拉伸 → 落地 */
.pet-wrap.jump { animation: jumpBig 0.65s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes jumpBig {
  0%   { transform: translateY(0) scale(1, 1); }
  20%  { transform: translateY(6px) scale(1.07, 0.93); }
  50%  { transform: translateY(-42px) scale(0.95, 1.07); }
  75%  { transform: translateY(3px) scale(1.05, 0.95); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* 摸头说话气泡（紫色，长句自动换行） */
.pat-bubble {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.85);
  background: #fff; color: #7a5aa0;
  padding: 9px 16px; border-radius: 16px 16px 16px 4px;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(120, 90, 180, 0.35);
  opacity: 0; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none; white-space: normal; z-index: 5;
  max-width: 92%; width: max-content; line-height: 1.45; text-align: center;
}
.pat-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* 摸头冒出的小太阳小星星小月亮 */
.pat-particle {
  position: absolute; font-size: 24px; pointer-events: none; z-index: 4;
  animation: feedRise 1.4s ease-out forwards;
}

/* 喂食气泡（宠物头顶的大字提示） */
.feed-bubble {
  position: absolute; top: 2%; left: 50%;
  transform: translateX(-50%) translateY(10px) scale(0.85);
  background: #fff; color: #ff7a9c;
  padding: 10px 20px; border-radius: 18px 18px 18px 4px;
  font-size: 17px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(255, 122, 156, 0.45);
  opacity: 0; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none; white-space: nowrap; z-index: 5;
}
.feed-bubble.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* 喂食冒出的小鱼干 */
.feed-particle {
  position: absolute; font-size: 26px; pointer-events: none; z-index: 4;
  animation: feedRise 1.4s ease-out forwards;
}
@keyframes feedRise {
  from { opacity: 1; transform: translateY(0) scale(0.7) rotate(0deg); }
  to   { opacity: 0; transform: translateY(-150px) scale(1.4) rotate(var(--spin, 25deg)); }
}

/* 家长密码弹窗 */
.hidden { display: none !important; }

/* ---------- 领取仪式 ---------- */
.adopt-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: linear-gradient(180deg, #2d2350 0%, #4a3a78 55%, #6a4fa0 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
}
.adopt-stars { color: #ffe9a8; font-size: 15px; letter-spacing: 12px; opacity: 0.8; }
.adopt-title { font-size: 30px; font-weight: 900; color: #ffe9a8; text-shadow: 0 3px 14px rgba(255, 220, 120, 0.5); }
.adopt-sub { font-size: 14px; color: #d8ccf5; line-height: 1.8; }
.adopt-egg {
  font-size: 96px; cursor: pointer; user-select: none;
  animation: eggFloat 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
@keyframes eggFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}
.adopt-egg.shaking { animation: eggShake 0.5s ease-in-out infinite; }
@keyframes eggShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg) scale(1.05); }
  75% { transform: rotate(14deg) scale(1.05); }
}
.adopt-egg.shaking2 { animation: eggShake2 0.35s ease-in-out infinite; }
@keyframes eggShake2 {
  0%, 100% { transform: rotate(0) scale(1.06); }
  25% { transform: rotate(-22deg) scale(1.1); }
  75% { transform: rotate(22deg) scale(1.1); }
}
.adopt-egg.shaking3 { animation: eggShake3 0.12s linear infinite; }
@keyframes eggShake3 {
  0%, 100% { transform: rotate(0) scale(1.12); }
  25% { transform: rotate(-32deg) scale(1.16); }
  75% { transform: rotate(32deg) scale(1.16); }
}
.adopt-egg img {
  width: 220px; max-width: 60vw; border-radius: 20px;
  animation: petReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 40px rgba(255, 230, 140, 0.65);
}
@keyframes petReveal {
  from { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
.adopt-input {
  width: 260px; max-width: 80vw; box-sizing: border-box;
  padding: 12px 16px; border: 2px solid rgba(255, 233, 168, 0.5);
  border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 15px; text-align: center; outline: none;
}
.adopt-input::placeholder { color: #bbaee0; }
.adopt-input:focus { border-color: #ffe9a8; }
.adopt-error { min-height: 20px; font-size: 14px; font-weight: 700; color: #ffb3c1; }
.adopt-btn { font-size: 17px; padding: 13px 34px; }
.adopt-input.error-shake { animation: inputShake 0.4s ease; border-color: #ff8aa0; }
@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.pwd-overlay {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(90, 60, 140, 0.45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.pwd-card {
  position: relative;
  background: #fff; border-radius: 22px;
  padding: 26px 28px 22px; width: 300px; max-width: 88vw;
  box-shadow: 0 10px 40px rgba(80, 50, 130, 0.35);
  text-align: center;
}
.pwd-close {
  position: absolute; top: 10px; right: 12px;
  border: none; background: none;
  font-size: 20px; color: #b3a6d6; cursor: pointer;
  padding: 4px 8px; line-height: 1;
}
.pwd-close:active { color: #7a5aa0; }
.pwd-title { font-size: 19px; font-weight: 800; color: #6a4fa0; }
.pwd-hint { font-size: 13px; color: #9a8bc0; margin-top: 6px; }
.pwd-input {
  width: 100%; box-sizing: border-box;
  margin-top: 16px; padding: 12px 14px;
  border: 2px solid #e0d5f5; border-radius: 14px;
  font-size: 20px; text-align: center; letter-spacing: 6px;
  outline: none; color: #5a4380;
}
.pwd-input:focus { border-color: #b899f0; }
.pwd-error { color: #ff5a7a; font-size: 13px; margin-top: 8px; font-weight: 700; }
.pwd-actions { display: flex; gap: 12px; margin-top: 18px; }
.pwd-actions .btn { flex: 1; }

/* ---------- 进度条 ---------- */
.progress-area { margin: 18px auto 6px; max-width: 380px; }
.progress-label {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 6px; color: #7a68a0;
}
.hunger-label { margin-top: 12px; }
.progress-bar {
  height: 16px; border-radius: 999px;
  background: #e6ddf7; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(120, 90, 180, 0.15);
}
.progress-fill {
  height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #b899f0, #f0a8cc, #ffd08a);
  transition: width 0.6s ease;
}
.hunger-fill {
  height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb36a, #ffd08a);
  transition: width 0.6s ease;
}
.hunger-fill.low {
  background: linear-gradient(90deg, #ff7a7a, #ffb36a);
}

/* ---------- 按钮 ---------- */
.actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.btn {
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 600;
  padding: 12px 22px; border-radius: 999px;
  background: #fff; color: #6b4fa0;
  box-shadow: 0 3px 10px rgba(120, 90, 180, 0.2);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(120, 90, 180, 0.3); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(90deg, #a88ae0, #e8a4c8); color: #fff;
}

/* ---------- 提示 toast ---------- */
.toast {
  margin-top: 14px; font-size: 14px; min-height: 20px;
  color: #7a5aa0; opacity: 0; transition: opacity 0.3s;
}
.toast.show { opacity: 1; }

/* ---------- 任务面板 ---------- */
.task-panel h2 { font-size: 18px; color: #6b4fa0; margin-bottom: 4px; }
.hint { font-size: 13px; color: #9a8ab8; margin-bottom: 14px; }
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.85);
  border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(120, 90, 180, 0.1);
}
.task-item .icon { font-size: 26px; }
.task-item .info { flex: 1; text-align: left; }
.task-item .name { font-size: 15px; font-weight: 600; color: #5a4a7a; }
.task-item .reward { font-size: 12px; color: #9a8ab8; margin-top: 2px; }
.task-item.done { opacity: 0.55; }
.task-item.done .name::after { content: " ✓"; color: #7ac48f; }

/* ---------- 进化弹层 ---------- */
.evolve-overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(40, 25, 70, 0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.35s;
}
.evolve-overlay.hidden { opacity: 0; pointer-events: none; }
.evolve-card {
  position: relative;
  background: linear-gradient(180deg, #fff8ee, #fdeaf3);
  border-radius: 28px; padding: 30px 36px;
  text-align: center; max-width: 420px; width: 90%;
  box-shadow: 0 0 60px rgba(255, 220, 150, 0.6);
  animation: evolvePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes evolvePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.evolve-glow {
  position: absolute; inset: -30px;
  background: radial-gradient(circle, rgba(255, 215, 130, 0.5), transparent 65%);
  z-index: -1; animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.evolve-card img {
  width: 260px; border-radius: 18px;
  box-shadow: 0 8px 24px rgba(150, 100, 200, 0.35);
  animation: breathe 3s ease-in-out infinite;
}
.evolve-title {
  margin-top: 14px; font-size: 24px; font-weight: 800;
  background: linear-gradient(90deg, #d4952a, #e86aa0, #8a5ad0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.evolve-awaken { margin: 8px 0 18px; font-size: 15px; color: #7a68a0; }

/* ---------- 手机适配 ---------- */
@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .pet-wrap img, .pet-wrap video { width: min(300px, 100%); }
}

/* ---------- 页脚备案号 ---------- */
.icp {
  text-align: center; padding: 4px 0 18px; font-size: 12px;
}
.icp a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.icp a:hover { color: rgba(255, 255, 255, 0.8); }