/* ============================================================
   zen-skin.css — V13 严格按设计稿 1:1 还原
   设计稿基准：1024×1808px / 安全边距 32px / 基础单位 8px
   缩放策略：所有 px → calc(N * var(--base)) where --base = 100vw/1024
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=ZCOOL+KuaiLe&display=swap');

:root {
  /* 设计稿缩放基准：1024px = 100vw */
  --base: calc(100vw / 1024);
  /* 防止视口过宽，最大缩放到 480px */
  --max-w: min(480px, 100vw);

  /* 配色 */
  --v13-cream: #FFF7ED;
  --v13-orange: #F97316;
  --v13-orange-d: #EA580C;
  --v13-wood-l: #B45309;
  --v13-wood: #92400E;
  --v13-wood-d: #7C2D12;
  --v13-ink: #FFF7ED;

  --v13-shadow: 0 calc(6 * var(--base)) 0 rgba(124,45,18,.18), 0 calc(12 * var(--base)) calc(24 * var(--base)) rgba(124,45,18,.2);

  --v13-font-zh: 'ZCOOL KuaiLe', sans-serif;
  --v13-font-num: 'Press Start 2P', monospace;
}

/* 屏宽超过 480 时，base 收紧到 480/1024 */
@media (min-width: 481px) {
  :root { --base: calc(480px / 1024); }
}

/* ===== 0. 全局 ===== */
html.zen-on, html.zen-on body {
  background: #87CEEB !important;
  font-family: var(--v13-font-zh);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}
html.zen-on body {
  position: relative;
  min-height: 100vh;
  image-rendering: pixelated;
  overflow: hidden;
}
html.zen-on #app, html.zen-on .game-shell, html.zen-on .stage,
html.zen-on .scene-wrap, html.zen-on main, html.zen-on .scene,
html.zen-on .pet-area, html.zen-on .pet-stage, html.zen-on .companion-stage {
  background: transparent !important;
  background-image: none !important;
}

/* ===== 1. 背景层（天空 + 山 + 湖 + 远景） ===== */
#v5Bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg,
      #2A6BB5 0%,
      #4A92D6 20%,
      #7BC0E8 40%,
      #B8DDF0 55%,
      #D7E9F2 65%,
      #B0CCB8 75%,
      #5A8C5E 88%,
      #3D6B45 100%);
  pointer-events: none;
}
/* 浮云装饰 */
#v5Bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse calc(180 * var(--base)) calc(40 * var(--base)) at 65% 30%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse calc(140 * var(--base)) calc(30 * var(--base)) at 30% 38%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(ellipse calc(200 * var(--base)) calc(35 * var(--base)) at 80% 50%, rgba(255,255,255,.6), transparent 70%);
  pointer-events: none;
}

/* ===== 2. 资源条（设计稿 200×50px @ 32,32）===== */
#v5Resources {
  position: fixed;
  top: calc(32 * var(--base));
  left: calc(32 * var(--base));
  width: calc(200 * var(--base) * 4);   /* 设计稿宽 200, 但 4 槽至少 800 才装得下 */
  max-width: calc(100vw - 144 * var(--base));  /* 减去左 32 + 菜单 80 + 右 32 */
  height: calc(50 * var(--base) * 1.6);  /* 高度按比例放大 */
  background: url('../assets/v4/ui-old/topbar.png') center/100% 100% no-repeat;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 0 calc(20 * var(--base));
  z-index: 40;
}
#v5Resources .v5-res {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--base));
  font-family: var(--v13-font-num);
  font-size: calc(20 * var(--base));
  color: #FFF7ED;
  text-shadow: 0 calc(2 * var(--base)) 0 #5C3A1B, 0 calc(3 * var(--base)) calc(4 * var(--base)) rgba(0,0,0,.4);
}
#v5Resources .v5-res-icon {
  width: calc(40 * var(--base));
  height: calc(40 * var(--base));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
/* 4 槽用王工 res-*.png 原图 */
#v5Resources [data-stat="happy"]  .v5-res-icon { background-image: url('../assets/v4/ui-old/res-heart.png'); }
#v5Resources [data-stat="shells"] .v5-res-icon { background-image: url('../assets/v4/ui-old/res-coin.png'); }
#v5Resources [data-stat="hunger"] .v5-res-icon { background-image: url('../assets/v4/ui-old/res-food.png'); }
#v5Resources [data-stat="thirst"] .v5-res-icon { background-image: url('../assets/v4/ui-old/res-drop.png'); }

/* 隐藏多余 stat 的槽（只保留设计稿 4 槽：心 / 币 / 食 / 水）*/
#v5Resources [data-stat="clean"],
#v5Resources [data-stat="energy"] {
  display: none !important;
}

/* ===== 3. 菜单按钮（设计稿 80×80 @ 912,32）===== */
#v5MenuBtn {
  position: fixed;
  top: calc(32 * var(--base));
  right: calc(32 * var(--base));
  width: calc(80 * var(--base));
  height: calc(80 * var(--base));
  background: url('../assets/v4/ui-old/menu-btn.png') center/contain no-repeat;
  border: none;
  cursor: pointer;
  z-index: 50;
  padding: 0;
}
#v5MenuBtn:active { transform: translateY(calc(2 * var(--base))); }

/* ===== 4. 名牌（设计稿 160×96 @ 52,114）===== */
#v5NamePlate {
  position: fixed;
  top: calc(114 * var(--base));
  left: calc(52 * var(--base));
  width: calc(220 * var(--base));
  height: calc(140 * var(--base));
  background: url('../assets/v4/ui-old/nameplate.png') center/contain no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(30 * var(--base));
  padding-right: calc(20 * var(--base));
  z-index: 35;
  pointer-events: none;
}
#v5NamePlate .v5-name {
  font-family: var(--v13-font-zh);
  font-size: calc(40 * var(--base));
  color: #FFF7ED;
  text-shadow: 0 calc(2 * var(--base)) 0 var(--v13-wood-d), 0 calc(4 * var(--base)) calc(6 * var(--base)) rgba(0,0,0,.3);
  line-height: 1;
  letter-spacing: calc(2 * var(--base));
}
#v5NamePlate .v5-lv {
  font-family: var(--v13-font-num);
  font-size: calc(16 * var(--base));
  color: #FCD34D;
  text-shadow: 0 calc(2 * var(--base)) 0 var(--v13-wood-d);
  margin-top: calc(6 * var(--base));
  letter-spacing: calc(2 * var(--base));
}

/* ===== 5. 主角舞台 — 鸟踩在底栏顶部草地（设计稿: 鸟脚 ≈ y 1180）===== */
#v5Stage {
  position: fixed;
  left: 0;
  right: 0;
  /* 底栏从 y=1668 开始；草地顶部约 y=1100；舞台留 y 470~1500 范围给鸟 */
  bottom: calc(670 * var(--base));  /* 鸟脚在底栏草地顶部 = 1808 - 1138 ≈ 670 */
  height: calc(580 * var(--base));
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ===== 6. 鸟（设计稿宽 ~280px @ 中央）===== */
#v5Bird {
  position: relative;
  /* 设计稿鸟约 280×320 px */
  width: calc(280 * var(--base));
  height: calc(320 * var(--base));
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 calc(8 * var(--base)) 0 rgba(124,45,18,.18)) drop-shadow(0 calc(16 * var(--base)) calc(20 * var(--base)) rgba(0,0,0,.25));
}
#v5Bird img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}
#v5Bird.bounce { animation: v13-bounce .3s ease; }
@keyframes v13-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ===== 7. 底部操作栏（设计稿: full width × 796px @ 1012, 1668 起按钮区）===== */
/* bottom-bar.png 比例 1152×576 = 2:1，但设计稿底栏含草地+栅栏+按钮区，约屏高 44% */
#v5Bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: 100vw;
  /* 设计稿底栏 0,1012 → 0,1808 = 796px 高 = 44% 屏高 */
  height: calc(796 * var(--base));
  background: url('../assets/v4/ui-old/bottom-bar.png') center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* 4 按钮区（设计稿: y 1688, w 160 h 120, x 64/288/512/736）*/
.v5-act-wrap {
  position: absolute;
  left: 0;
  right: 0;
  /* 设计稿按钮 y=1688, 距底栏顶 1688-1012=676 */
  /* 按钮高 120, 距底 1808-1688-120=0... 看图按钮基本贴底（margin 32 安全）*/
  bottom: calc(32 * var(--base));
  height: calc(120 * var(--base));
  display: grid;
  /* 4 列 × 160 + 3 间距 64 + 左右 margin 64 = 4×160 + 3×64 + 2×64 = 960 + 32×2 margin */
  grid-template-columns: repeat(4, calc(160 * var(--base)));
  justify-content: space-between;
  padding: 0 calc(64 * var(--base));
  pointer-events: auto;
}
.v5-act {
  position: relative;
  width: calc(160 * var(--base));
  height: calc(120 * var(--base));
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.v5-act::before {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.v5-act[data-act="feed"]::before  { background-image: url('../assets/v4/btn/btn-feed-normal.png'); }
.v5-act[data-act="water"]::before { background-image: url('../assets/v4/btn/btn-water-normal.png'); }
.v5-act[data-act="bath"]::before  { background-image: url('../assets/v4/btn/btn-bath-normal.png'); }
.v5-act[data-act="play"]::before  { background-image: url('../assets/v4/btn/btn-play-normal.png'); }
.v5-act[data-act="feed"]:active::before  { background-image: url('../assets/v4/btn/btn-feed-pressed.png'); }
.v5-act[data-act="water"]:active::before { background-image: url('../assets/v4/btn/btn-water-pressed.png'); }
.v5-act[data-act="bath"]:active::before  { background-image: url('../assets/v4/btn/btn-bath-pressed.png'); }
.v5-act[data-act="play"]:active::before  { background-image: url('../assets/v4/btn/btn-play-pressed.png'); }

/* ===== 8. Toast ===== */
#v5Toast {
  position: fixed;
  top: calc(280 * var(--base));
  left: 50%;
  transform: translate(-50%, calc(-10 * var(--base)));
  background: var(--v13-cream);
  border: calc(3 * var(--base)) solid var(--v13-orange);
  border-radius: calc(14 * var(--base));
  box-shadow: var(--v13-shadow);
  padding: calc(16 * var(--base)) calc(28 * var(--base));
  font-size: calc(28 * var(--base));
  font-family: var(--v13-font-zh);
  color: var(--v13-wood-d);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
#v5Toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===== 9. 特效层 ===== */
#v5FxLayer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.v5-fx {
  position: absolute;
  width: calc(120 * var(--base));
  height: calc(120 * var(--base));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: v13-fx-rise 1s ease-out forwards;
}
.v5-fx-heart { background-image: url('../assets/v4/fx/fx-heart-2.png'); }
.v5-fx-star  { background-image: url('../assets/v4/fx/fx-star-2.png'); }
.v5-fx-ripple{ background-image: url('../assets/v4/fx/fx-ripple-2.png'); }
@keyframes v13-fx-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4); }
  20%  { opacity: 1; transform: translate(-50%, calc(-12 * var(--base))) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, calc(-80 * var(--base))) scale(1); }
}

/* 浮动数字 */
.v5-float-num {
  position: absolute;
  font-family: var(--v13-font-num);
  font-size: calc(24 * var(--base));
  color: #16A34A;
  pointer-events: none;
  text-shadow: 0 calc(2 * var(--base)) 0 #fff, 0 calc(3 * var(--base)) calc(4 * var(--base)) rgba(0,0,0,.2);
  animation: v13-floatnum 1.2s ease-out forwards;
  z-index: 60;
  transform: translate(-50%, 0);
}
@keyframes v13-floatnum {
  0%   { opacity: 0; transform: translate(-50%, calc(4 * var(--base))); }
  20%  { opacity: 1; transform: translate(-50%, calc(-12 * var(--base))); }
  100% { opacity: 0; transform: translate(-50%, calc(-50 * var(--base))); }
}

/* ===== 10. 菜单 ===== */
#v5MenuMask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
#v5MenuMask.show { opacity: 1; pointer-events: auto; }

#v5Menu {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%) scale(.92);
  width: calc(680 * var(--base));
  background: var(--v13-cream);
  border: calc(8 * var(--base)) solid var(--v13-orange);
  border-radius: calc(32 * var(--base));
  box-shadow: var(--v13-shadow);
  padding: calc(36 * var(--base));
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
#v5Menu.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.v5-menu-title {
  font-family: var(--v13-font-zh);
  font-size: calc(44 * var(--base));
  text-align: center;
  color: var(--v13-orange-d);
  letter-spacing: calc(12 * var(--base));
  margin-bottom: calc(28 * var(--base));
}
.v5-menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--base));
}
.v5-menu-btn {
  background: linear-gradient(180deg, #fff, #FED7AA);
  border: calc(4 * var(--base)) solid var(--v13-orange);
  border-radius: calc(28 * var(--base));
  padding: calc(24 * var(--base)) calc(16 * var(--base));
  font-family: var(--v13-font-zh);
  font-size: calc(28 * var(--base));
  color: var(--v13-wood-d);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--base));
  box-shadow: 0 calc(6 * var(--base)) 0 rgba(124,45,18,.18);
}
.v5-menu-btn:active {
  transform: translateY(calc(4 * var(--base)));
  box-shadow: 0 calc(2 * var(--base)) 0 rgba(124,45,18,.18);
}
.v5-menu-btn .v5-emoji { font-size: calc(36 * var(--base)); }
.v5-menu-btn.ready {
  background: linear-gradient(180deg, #FED7AA, var(--v13-orange));
  color: #fff;
}
.v5-menu-close {
  display: block;
  margin: calc(28 * var(--base)) auto 0;
  padding: calc(20 * var(--base)) calc(56 * var(--base));
  border: none;
  border-radius: calc(28 * var(--base));
  background: var(--v13-orange);
  color: #fff;
  font-family: var(--v13-font-zh);
  font-size: calc(28 * var(--base));
  cursor: pointer;
  box-shadow: 0 calc(6 * var(--base)) 0 var(--v13-orange-d);
}

/* 进化达成大弹窗 */
#v5EvolveReady {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: calc(28 * var(--base));
  padding: calc(48 * var(--base));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#v5EvolveReady.show { opacity: 1; pointer-events: auto; }
#v5EvolveReady .v5-er-title {
  font-family: var(--v13-font-zh);
  font-size: calc(60 * var(--base));
  color: var(--v13-cream);
  text-shadow: 0 calc(6 * var(--base)) 0 var(--v13-orange-d), 0 calc(12 * var(--base)) calc(24 * var(--base)) rgba(0,0,0,.4);
  letter-spacing: calc(8 * var(--base));
  text-align: center;
}
#v5EvolveReady .v5-er-tip {
  font-family: var(--v13-font-zh);
  font-size: calc(32 * var(--base));
  color: #FED7AA;
}
#v5EvolveReady .v5-er-go {
  padding: calc(28 * var(--base)) calc(72 * var(--base));
  background: linear-gradient(180deg, #FCD34D, var(--v13-orange));
  color: #fff;
  border: calc(8 * var(--base)) solid var(--v13-orange-d);
  border-radius: calc(48 * var(--base));
  font-family: var(--v13-font-zh);
  font-size: calc(36 * var(--base));
  cursor: pointer;
  box-shadow: 0 calc(12 * var(--base)) 0 var(--v13-orange-d), 0 calc(24 * var(--base)) calc(40 * var(--base)) rgba(0,0,0,.3);
}
#v5EvolveReady .v5-er-close {
  padding: calc(16 * var(--base)) calc(48 * var(--base));
  background: transparent;
  border: calc(4 * var(--base)) solid #FED7AA;
  border-radius: calc(32 * var(--base));
  color: var(--v13-cream);
  font-family: var(--v13-font-zh);
  font-size: calc(28 * var(--base));
  cursor: pointer;
}

/* ===== 11. 隐藏老系统 UI ===== */
html.zen-on canvas#scene,
html.zen-on .time-overlay, html.zen-on .time-pill,
html.zen-on .home-link, html.zen-on .mute-btn,
html.zen-on .top-bar, html.zen-on .topbar, html.zen-on .care-panel,
html.zen-on .quick-bar, html.zen-on .goal-strip, html.zen-on .goal-chip,
html.zen-on .pet-name, html.zen-on .resource-bar, html.zen-on .menu-row,
html.zen-on .quick-life-pill, html.zen-on .life-pill, html.zen-on .lifeRing,
html.zen-on .life-ring, html.zen-on #zenLifePill,
html.zen-on .stage-overlay, html.zen-on .companion-stage,
html.zen-on .stage, html.zen-on .pet-area, html.zen-on .pet-stage,
html.zen-on #quickBar, html.zen-on .pause-btn, html.zen-on .reward-card,
html.zen-on .visitor-bar, html.zen-on .speech-bubble,
html.zen-on .float-layer:not(#v5FxLayer) {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.zen-on:not(.has-bird) #v5Bird,
html.zen-on:not(.has-bird) #v5Resources,
html.zen-on:not(.has-bird) #v5NamePlate,
html.zen-on:not(.has-bird) #v5Bottom,
html.zen-on:not(.has-bird) #v5MenuBtn {
  display: none !important;
}