/* === 🐱 哈基米 v31 — 合并自主行为 + 设置面板 === */
/* 灵感: 动物森友会 + 吉伊卡哇 + 软萌Q弹风 */

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

:root {
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --font-main: 'PingFang SC', 'Noto Sans SC', 'Segoe UI', system-ui, -apple-system, sans-serif;
  
  /* 柔和暖色 */
  --bg-primary: #FFF8E7;
  --bg-card: rgba(255,255,255,0.82);
  --bg-card-strong: rgba(255,255,255,0.94);
  
  /* 颜色体系 */
  --orange: #FF9A5C;
  --orange-light: #FFBE85;
  --orange-bg: #FFF0DD;
  --pink: #FF8A9E;
  --pink-light: #FFB3C1;
  --pink-bg: #FFF0F3;
  --purple: #B388FF;
  --blue: #67B8F2;
  --green: #81C784;
  --green-light: #A5D6A7;
  --brown: #8D6E63;
  --brown-light: #A1887F;
  --cream: #FFF3E0;
  
  /* 阴影体系 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-color: 0 6px 20px rgba(255,154,92,0.30);
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  background: linear-gradient(165deg, #FFF8E7 0%, #FFF0F3 40%, #F0E6FF 70%, #E0F7FA 100%);
  color: #4E342E;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  font-size: 17px;
}

/* ===== 页面容器 ===== */
.page {
  display: none;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  position: relative;
}
.page.active { display: flex; }

/* ===== 加载遮罩 ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,248,231,0.92);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}
.loading-spinner {
  font-size: 72px;
  animation: catBounce 0.8s ease-in-out infinite alternate;
}
@keyframes catBounce {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-16px) scale(1.05); }
}
.loading-overlay .loading-text {
  font-size: 20px;
  font-weight: 700;
  color: #FF9A5C;
  letter-spacing: 2px;
}

/* ===== 彩蛋欢迎页 ✨ ===== */
#splash-page {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #FFF8E7, #FFF0EE, #F3E5F5);
}
.splash-paw-prints {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.paw-print {
  position: absolute;
  font-size: 22px;
  opacity: 0.4;
  animation: pawFall linear forwards;
  pointer-events: none;
}
@keyframes pawFall {
  0% { transform: translateY(-60px) rotate(0deg); opacity: 0.5; }
  100% { transform: translateY(calc(100vh + 60px)) rotate(360deg); opacity: 0; }
}

.splash-title {
  font-size: 42px;
  font-weight: 900;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 6px;
  text-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(255,154,92,0.2));
  z-index: 2;
  margin-bottom: 4px;
}
.splash-welcome {
  font-size: 24px;
  font-weight: 700;
  color: var(--brown);
  animation: splashFadeIn 0.8s ease;
  z-index: 2;
}
@keyframes splashFadeIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
.splash-cat-container {
  z-index: 2;
  margin: 4px 0;
  animation: splashBounce 2s ease-in-out infinite;
}
@keyframes splashBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.splash-auto {
  font-size: 15px;
  color: var(--brown-light);
  z-index: 2;
}
.splash-btn {
  min-height: 60px;
  width: 240px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  color: white;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,138,158,0.45);
  transition: transform 0.12s, box-shadow 0.12s;
  font-family: var(--font-main);
  letter-spacing: 4px;
  position: relative;
  z-index: 2;
}
.splash-btn:active { transform: scale(0.92); box-shadow: 0 2px 8px rgba(255,138,158,0.3); }

/* ===== 登录页 ===== */
#login-page {
  justify-content: center;
  align-items: center;
  gap: 18px;
}
.login-card {
  background: var(--bg-card-strong);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-lg);
}
.login-title {
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-subtitle {
  font-size: 16px;
  color: var(--brown-light);
  font-weight: 500;
}
.name-input {
  width: 100%;
  padding: 16px 20px;
  border: 3px solid transparent;
  border-radius: 50px;
  background: var(--bg-primary);
  font-size: 20px;
  text-align: center;
  outline: none;
  transition: all 0.25s;
  font-family: var(--font-main);
  min-height: 56px;
  font-weight: 600;
  color: var(--brown);
}
.name-input:focus {
  border-color: var(--orange-light);
  box-shadow: 0 0 0 4px var(--orange-bg);
}
.name-input::placeholder {
  color: #CCC;
  font-weight: 400;
}
.login-error {
  font-size: 15px;
  color: #E57373;
  min-height: 22px;
  font-weight: 600;
}
.login-btn, .create-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  color: white;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,138,158,0.40);
  transition: transform 0.12s, box-shadow 0.12s;
  min-height: 60px;
  font-family: var(--font-main);
  letter-spacing: 3px;
}
.login-btn:active, .create-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(255,138,158,0.25);
}

/* ===== 选猫页 ===== */
#create-page {
  overflow-y: auto;
  padding-top: 20px;
  align-items: center;
  gap: 10px;
}
.create-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--brown);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.create-preview {
  width: 180px;
  height: 180px;
  background: var(--orange-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255,154,92,0.2);
  margin-bottom: 6px;
}
.section-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
  padding: 4px 16px;
  background: var(--bg-card);
  border-radius: 20px;
  display: inline-block;
}
.color-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px;
}
.color-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.color-chip.active {
  border-color: #FF9A5C;
  transform: scale(1.15);
  box-shadow: 0 3px 12px rgba(255,154,92,0.35);
}
.color-chip:active { transform: scale(0.88); }

.size-grid, .personality-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.size-chip, .personality-chip {
  padding: 8px 18px;
  border-radius: 30px;
  border: 2.5px solid #E0D6CC;
  background: white;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--brown);
}
.size-chip.active, .personality-chip.active {
  border-color: #FF9A5C;
  background: var(--orange-bg);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(255,154,92,0.2);
}
.size-chip:active, .personality-chip:active { transform: scale(0.94); }

/* ===== 主界面 ===== */
#main-page { padding: 8px 10px; gap: 4px; background: transparent; }

/* 顶栏 — 圆润毛玻璃 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-card-strong);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.cat-name-display {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.owner-name-display {
  font-size: 14px;
  color: var(--brown-light);
  font-weight: 600;
  background: var(--pink-bg);
  padding: 4px 12px;
  border-radius: 20px;
}
.stage-badge { font-size: 20px; margin-left: 4px; }

/* ===== 猫猫区域（院子） ===== */
.cat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  margin: 4px 0;
}
.yard-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  background-image: url('../images/yard-bg.webp');
}
.yard-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ===== 猫猫区域 ===== */
.cat-container {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  transition: left 0.8s ease, bottom 0.3s ease;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.18));
}

/* 风格变体 */
.cat-container.style-beauty {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.18)) brightness(1.05) saturate(1.1);
}
.cat-container.style-ink {
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.18)) grayscale(0.6) contrast(1.3);
}

/* ===== 猫动作动画类 ===== */
.cat-container.bounce { animation: catBounceAnim 0.4s ease; }
.cat-container.bounce-heart { animation: catBounceAnim 0.5s ease; }
.cat-container.bounce-dizzy { animation: catBounceAnim 0.35s ease; }
@keyframes catBounceAnim {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-20px) scale(1.05); }
  50% { transform: translateY(-8px); }
}

/* ===== 状态条 — 柔和泡泡卡片 ===== */
.status-section {
  flex-shrink: 0;
  padding: 0;
}
.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  background: var(--bg-card-strong);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  box-shadow: var(--shadow-sm);
}
.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.status-icon { 
  font-size: 20px; 
  width: 24px; 
  text-align: center; 
  flex-shrink: 0;
}
.status-bar-bg {
  flex: 1;
  height: 10px;
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  overflow: hidden;
}
.status-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.status-bar-fill.hunger { background: linear-gradient(90deg, #FFB74D, #FF7043); }
.status-bar-fill.happiness { background: linear-gradient(90deg, #FFD54F, #FF8A65); }
.status-bar-fill.energy { background: linear-gradient(90deg, #81C784, #4FC3F7); }
.status-bar-fill.clean { background: linear-gradient(90deg, #4DD0E1, #CE93D8); }
.status-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  min-width: 38px;
  text-align: right;
}

/* ===== 猫猫对话框 ===== */
.status-message {
  flex-shrink: 0;
  text-align: center;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--brown);
  min-height: 44px;
  background: var(--bg-card-strong);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  margin: 4px 0;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.3s;
}
.status-message.fade { opacity: 0.5; }

/* ===== 动作按钮 ===== */
.action-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 0;
  flex-shrink: 0;
}
.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 2px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-card-strong);
  backdrop-filter: blur(8px);
  cursor: pointer;
  min-height: 68px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--brown);
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s, box-shadow 0.1s;
  font-family: var(--font-main);
}
.action-btn:active { transform: scale(0.88); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.action-btn .btn-icon { font-size: 30px; line-height: 1; }
.action-btn .btn-label { font-size: 12px; }

.friend-teaser {
  text-align: center;
  font-size: 13px;
  color: var(--brown-light);
  padding: 4px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(78,52,46,0.85);
  backdrop-filter: blur(12px);
  color: white;
  padding: 14px 28px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 600;
  z-index: 200;
  animation: toastIn 0.3s ease, toastOut 2.2s 0.3s ease forwards;
  pointer-events: none;
  max-width: 88%;
  text-align: center;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== 新手引导 ===== */
.guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 100px;
}
.guide-bubble {
  position: relative;
  background: white;
  border-radius: 20px;
  padding: 14px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: guidePop 0.3s ease;
}
@keyframes guidePop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.guide-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--brown);
  line-height: 1.4;
  text-align: center;
}
.guide-done-btn {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 40px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #FF9A5C, #FF8A9E);
  color: white;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,138,158,0.45);
  min-height: 54px;
  font-family: var(--font-main);
  letter-spacing: 2px;
}
.guide-done-btn:active { transform: translateX(-50%) scale(0.94); }

/* ===== SVG院子动画 ===== */
.yard-sun-shape { animation: sunPulse 3s ease-in-out infinite; transform-origin: center; }
.yard-sun-glow-1 { animation: sunGlow1 3s ease-in-out infinite; transform-origin: center; }
.yard-sun-glow-2 { animation: sunGlow2 3s ease-in-out infinite; transform-origin: center; }
@keyframes sunPulse {
  0%, 100% { r: 35; }
  50% { r: 37; }
}
@keyframes sunGlow1 {
  0%, 100% { r: 50; opacity: 0.3; }
  50% { r: 58; opacity: 0.2; }
}
@keyframes sunGlow2 {
  0%, 100% { r: 65; opacity: 0.15; }
  50% { r: 78; opacity: 0.1; }
}
.yard-cloud-g { animation: cloudDrift linear infinite; }
.yard-cloud-g.cloud1 { animation-duration: 22s; }
.yard-cloud-g.cloud2 { animation-duration: 28s; animation-direction: reverse; }
@keyframes cloudDrift {
  0% { transform: translateX(0); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}
.yard-flower-anim { animation: flowerSway 2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes flowerSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.yard-grass-blade { animation: grassSway 2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes grassSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.yard-butterfly { animation: butterflyFlit 5s ease-in-out infinite; }
@keyframes butterflyFlit {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(15px, -10px); }
  50% { transform: translate(5px, 5px); }
  75% { transform: translate(20px, -5px); }
}

/* ===== 猫猫动画 ===== */
/* 尾巴摇 */
.cat-tail-svg { animation: tailWag 1.5s ease-in-out infinite; transform-origin: 175px 120px; }
@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  75% { transform: rotate(-8deg); }
}
.cat-tail-svg.happy-wag { animation: tailWagHappy 0.25s ease-in-out infinite !important; }
@keyframes tailWagHappy {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(25deg); }
}
.cat-tail-svg.tired-wag { animation: tailWagTired 3s ease-in-out infinite !important; }
@keyframes tailWagTired {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}
.cat-tail-svg.feed-wag { animation: tailWagFeed 0.4s ease-in-out 4 !important; }
@keyframes tailWagFeed {
  0%, 100% { transform: rotate(0deg); }
  33% { transform: rotate(15deg); }
  66% { transform: rotate(-10deg); }
}

/* 猫呼吸 */
#main-cat-group { animation: catBreath 2.5s ease-in-out infinite; transform-origin: 100px 100px; }
#main-cat-group.animating { animation: none; }
@keyframes catBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 胡须抖动 */
.cat-whisker { animation: whiskerTwitch 3s ease-in-out infinite; transform-origin: right center; }
.cat-whisker.left { transform-origin: left center; }
@keyframes whiskerTwitch {
  0%, 80%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(2deg); }
  90% { transform: rotate(-2deg); }
}

/* 腮红 */
.cat-blush { opacity: 0.45; }

/* ===== 交互动作动画 ===== */

/* 🍖 吃饭 */
.cat-container.anim-feed #main-cat-group {
  animation: feedLookLeft 0.4s ease forwards, feedChew 0.25s ease-in-out 6 0.4s;
}
@keyframes feedLookLeft {
  0% { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(-5px) rotate(-3deg); }
}
@keyframes feedChew {
  0%, 100% { transform: translateX(-5px) rotate(-3deg) scaleY(1); }
  50% { transform: translateX(-5px) rotate(-3deg) scaleY(0.95); }
}
.feed-meat-anim {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  z-index: 12;
  pointer-events: none;
  animation: feedMeatBite 1.6s ease-out forwards;
}
@keyframes feedMeatBite {
  0% { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1); }
  20% { opacity: 1; transform: translateX(-50%) translateY(-40px) scale(1.4); }
  40% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.2); }
  50% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(0.4); }
  51% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(0); }
  100% { opacity: 0; }
}
.feed-burp-anim {
  position: absolute;
  top: -15px;
  left: 55%;
  font-size: 24px;
  z-index: 12;
  pointer-events: none;
  animation: feedBurp 0.8s 1.5s ease-out forwards;
  opacity: 0;
}
@keyframes feedBurp {
  0% { opacity: 0; transform: translateY(0) scale(0); }
  20% { opacity: 1; transform: translateY(-10px) scale(1); }
  80% { opacity: 1; transform: translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
}
.cat-container.anim-feed .cat-tummy {
  animation: feedBelly 1s ease-in-out 0.7s;
}
@keyframes feedBelly {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(1.12); }
  60% { transform: scaleY(1.08); }
}

/* 🤚 摸摸 */
.cat-container.anim-pet #main-cat-group {
  animation: petSway 0.8s ease-in-out 3;
}
@keyframes petSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-3px) rotate(-2deg); }
  30% { transform: translateX(3px) rotate(2deg); }
  45% { transform: translateX(-2px) rotate(-1deg); }
}
.cat-container.anim-pet .cat-eyes-normal,
.cat-container.anim-pet .cat-eyes-happy {
  animation: petEyeSquint 0.3s ease-in-out infinite;
}
@keyframes petEyeSquint {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.3); opacity: 0.8; }
}
.fb-heart {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 28px;
  animation: heartFloat 1.6s ease-out forwards;
}
@keyframes heartFloat {
  0% { opacity: 1; transform: translateY(0) scale(0) rotate(0deg); }
  20% { opacity: 1; transform: translateY(-10px) scale(1) rotate(10deg); }
  60% { opacity: 0.7; transform: translateY(-50px) scale(1.2) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.6) rotate(20deg); }
}
.fb-star {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 22px;
  animation: starSparkle 1.2s ease-out forwards;
}
@keyframes starSparkle {
  0% { opacity: 0; transform: translateY(0) scale(0) rotate(0deg); }
  30% { opacity: 1; transform: translateY(-15px) scale(1.2) rotate(180deg); }
  70% { opacity: 0.6; transform: translateY(-40px) scale(0.8) rotate(360deg); }
  100% { opacity: 0; transform: translateY(-60px) scale(0) rotate(540deg); }
}

/* 🎾 玩球 */
.anim-play-ball {
  position: absolute;
  font-size: 28px;
  pointer-events: none;
  z-index: 8;
}
.cat-container.anim-play #main-cat-group {
  animation: playWatch 0.8s ease-in-out 2;
}
@keyframes playWatch {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-8px) rotate(-5deg); }
  50% { transform: translateX(8px) rotate(5deg); }
  75% { transform: translateX(-4px) rotate(-3deg); }
}

/* 🛁 洗澡 */
.fb-bubble {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  animation: bubbleRise 1.5s ease-out forwards;
}
@keyframes bubbleRise {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  20% { opacity: 1; transform: translateY(-5px) scale(1); }
  80% { opacity: 0.8; transform: translateY(-40px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.5); }
}
.cat-container.anim-clean #main-cat-group {
  animation: cleanShake 0.1s ease-in-out 15;
}
@keyframes cleanShake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-4px) rotate(-4deg); }
  75% { transform: translateX(4px) rotate(4deg); }
}
.fb-bath-tub {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 36px;
  border: 3px solid rgba(79,195,247,0.5);
  border-radius: 0 0 65px 65px;
  background: rgba(179,229,252,0.30);
  z-index: 8;
  pointer-events: none;
  animation: bathAppear 0.5s ease-out forwards, bathWave 1.5s ease-in-out infinite 0.5s;
}
@keyframes bathAppear {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}
@keyframes bathWave {
  0%, 100% { border-color: rgba(79,195,247,0.5); }
  50% { border-color: rgba(79,195,247,0.8); }
}
.fb-water {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 18px;
  animation: waterDrop 1.2s ease-out forwards;
}
@keyframes waterDrop {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  20% { opacity: 1; transform: translateY(10px) scale(1) rotate(-10deg); }
  100% { opacity: 0; transform: translateY(50px) scale(0.5) rotate(20deg); }
}
.fb-ripple {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height:  12px;
  border-radius: 50%;
  border: 2px solid rgba(79, 195, 247, 0.5);
  z-index: 9;
  pointer-events: none;
  animation: rippleExpand 1.2s ease-out infinite;
}
@keyframes rippleExpand {
  0% { opacity: 0.7; transform: translateX(-50%) scale(0.3); }
  50% { opacity: 0.4; transform: translateX(-50%) scale(1.3); }
  100% { opacity: 0; transform: translateX(-50%) scale(2); }
}

/* 💤 睡觉 */
.cat-container.anim-sleep #main-cat-group {
  animation: sleepYawn 1s ease-in-out forwards;
}
@keyframes sleepYawn {
  0% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-3px) scaleY(1.06); }
  50% { transform: translateY(0) scaleY(0.92); }
  100% { transform: translateY(5px) scaleY(0.88); }
}
.fb-zzz {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 28px;
  animation: zzzFloat 2s ease-out forwards;
}
@keyframes zzzFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5) rotate(0deg); }
  20% { opacity: 1; transform: translateY(-10px) scale(1) rotate(-10deg); }
  70% { opacity: 0.7; transform: translateY(-50px) scale(1.2) rotate(10deg); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.6) rotate(20deg); }
}

/* 蝴蝶翅膀 */
.yard-butterfly-wings { animation: butterflyWings 0.15s ease-in-out infinite alternate; transform-origin: center; }
@keyframes butterflyWings {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0.3); }
}

/* ✨ 闪星 */
.fb-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  font-size: 26px;
  animation: sparkleFlash 0.8s ease-out forwards;
}
@keyframes sparkleFlash {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.5) rotate(180deg); }
  60% { opacity: 0.7; transform: scale(1.2) rotate(360deg); }
  100% { opacity: 0; transform: scale(0) rotate(540deg); }
}

/* Cat sitting animation */
@keyframes catSitSatisfied {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-8px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
.page.active { display:flex; flex-direction:column; }
.page.loading-overlay.active { display:flex; }

/* ===== 风格选择（欢迎页） ===== */
.splash-style-select {
  margin-top: 12px;
  text-align: center;
  animation: fadeInUp 0.8s ease 1.5s both;
}
.splash-style-label {
  font-size: 14px;
  color: #A0522D;
  margin-bottom: 8px;
  font-weight: 600;
}
.splash-style-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.style-option {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.5);
  border: 2px solid rgba(160,82,45,0.3);
  color: #A0522D;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.style-option:active {
  transform: scale(0.92);
}
.style-option.active {
  background: linear-gradient(135deg, #FEAD6E, #FF8A9E);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 12px rgba(255,138,158,0.3);
}

/* ===== 🏠 真实场景面板 ===== */
.scene-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  max-width: 380px;
  max-height: 85vh;
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  z-index: 100;
  overflow-y: auto;
  animation: fadeInUp 0.35s ease;
}
.scene-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  font-size: 18px;
  font-weight: 700;
  color: #A0522D;
  border-bottom: 1px solid #F0E0D0;
}
.scene-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F5EDE8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #A0522D;
  cursor: pointer;
  transition: background 0.2s;
}
.scene-close-btn:active { background: #E0D0C0; }
.scene-panel-body {
  padding: 14px 18px 20px;
}
.scene-upload-section {
  margin-bottom: 18px;
}
.scene-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 8px;
}
.scene-upload-area {
  border: 2px dashed #D0C0B0;
  border-radius: 14px;
  padding: 24px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.scene-upload-area:active {
  background: #F9F5F0;
  border-color: #FEAD6E;
}
.scene-upload-icon {
  font-size: 32px;
  margin-bottom: 6px;
}
.scene-upload-text {
  font-size: 15px;
  font-weight: 600;
  color: #A0522D;
}
.scene-upload-hint {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
.scene-preview {
  position: relative;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
}
.scene-preview img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.scene-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}
.scene-remove-btn:active { background: rgba(0,0,0,0.7); }
.scene-status {
  font-size: 13px;
  color: #666;
  text-align: center;
  min-height: 18px;
  margin: 6px 0;
}
.scene-apply-btn, .scene-reset-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.15s;
}
.scene-apply-btn:active, .scene-reset-btn:active { transform: scale(0.95); }
.scene-apply-btn {
  background: linear-gradient(135deg, #FEAD6E, #FF8A9E);
  color: white;
  box-shadow: 0 3px 12px rgba(255,138,158,0.3);
}
.scene-reset-btn {
  background: #F5EDE8;
  color: #A0522D;
  border: 1px solid #DDD0C5;
}

/* 场景遮罩 */
.scene-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
  animation: fadeIn 0.3s ease;
}

/* 主界面猫区域 - 真实场景模式 */
.cat-area.scene-mode {
  position: relative;
  overflow: hidden;
}
.cat-area.scene-mode::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.cat-area.scene-mode .yard-background { display: none; }
.cat-area.scene-mode .self-photo-overlay {
  position: absolute;
  bottom: 12%;
  right: 8%;
  max-width: 22%;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 1;
  border: 2px solid rgba(255,255,255,0.6);
}

/* 🏠 真实场景入口按钮 */
.scene-teaser {
  text-align: center;
  padding: 8px 0;
  font-size: 15px;
  color: #A0522D;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 2px;
}
.scene-teaser:active { opacity: 0.6; transform: scale(0.95); }

/* 场景背景通过CSS变量动态设置 */
.cat-area.scene-mode::before {
  background-image: var(--scene-bg, none);
}

/* 🚗 开车入口 */
.game-teaser {
  text-align: center;
  padding: 6px 0 12px;
  font-size: 14px;
  color: #888;
}
.game-link {
  display: inline-block;
  background: linear-gradient(135deg, #6FB9FF, #4A90D9);
  color: white;
  padding: 5px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  transition: transform 0.15s;
}
.game-link:active { transform: scale(0.92); }

/* 🎨 风格切换按钮（场景面板内） */
.scene-style-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.scene-style-chip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.5);
  border: 2px solid rgba(160,82,45,0.3);
  color: #A0522D;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.scene-style-chip:active { transform: scale(0.92); }
.scene-style-chip.active {
  background: linear-gradient(135deg, #FEAD6E, #FF8A9E);
  border-color: transparent;
  color: white;
  box-shadow: 0 3px 12px rgba(255,138,158,0.3);
}

/* ===== ⚙️ 设置面板（新版独立浮窗） ===== */
.settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pink-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  flex-shrink: 0;
}
.settings-btn:active {
  transform: scale(0.88);
  background: #F0E0D0;
}
.settings-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}
.settings-drawer {
  width: 100%;
  max-width: 420px;
  max-height: 75vh;
  background: white;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
  animation: slideUp 0.3s ease;
  overflow-y: auto;
}
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px 14px;
  font-size: 20px;
  font-weight: 800;
  color: #A0522D;
  border-bottom: 1px solid #F0E0D0;
}
.settings-body {
  padding: 16px 20px 28px;
}
.settings-section {
  margin-bottom: 8px;
}
.settings-divider {
  height: 1px;
  background: #F0E0D0;
  margin: 16px 0;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.floating-feedback {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  z-index: 20;
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.5); }
}

/* === 自主行为动画 (Multi-pose) === */
.cat-pose { transition: opacity 0.3s; }

@keyframes walkLeftLeg {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(15deg); }
}
@keyframes walkRightLeg {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-15deg); }
}
.cat-pose[data-pose="walking"] .walk-leg-left { animation: walkLeftLeg 0.4s ease-in-out infinite; }
.cat-pose[data-pose="walking"] .walk-leg-right { animation: walkRightLeg 0.4s ease-in-out infinite; }

@keyframes tailWag {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(10deg); }
}
.cat-tail-svg { transform-origin: 160px 140px; animation: tailWag 3s ease-in-out infinite; }

@keyframes sleepBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.cat-pose[data-pose="sleeping"]:not([style*="display:none"]) { animation: sleepBreathe 3s ease-in-out infinite; }

@keyframes stretchBody {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.cat-pose[data-pose="stretching"]:not([style*="display:none"]) { animation: stretchBody 2s ease-in-out infinite; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}