/* =====================================================================
 * 动物园 · 固定栖息设施与写实场景（站长 2026-10-17 需求）
 * =====================================================================
 * 站长原话：
 *   「现在有了更好的图片引擎，帮我把动物园优化的更逼真，草地光影都加上，
 *     动物移动规则自然一点，图2中金鱼做成放在动物园地图正中央大型正方形鱼缸，
 *     下方是柜子样式，鱼缸放在柜子上，与柜子长度平齐，网友看到的是鱼在鱼缸里
 *     游的动态摸样。鸣虫和鸟变成装在笼子里，放在动物园正中间的柜子上放笼子，
 *     鸟和鸣虫在里面简单走动，不出笼子，鱼也是一样，来回游动不出鱼缸，
 *     其他动物可以在动物园地图上来回不规则移动，动物不要做成四方形图片，
 *     而且猫就像猫，狗就像狗，蛇就像蛇，不规则移动，画面逼真度提高。」
 *
 * 【本文件只放"新增设施 + 写实化增强"的样式】
 *   原有 zoo.css 的场景规则一律不动 —— 只在其后追加覆盖，
 *   避免动到已经验收过的页面（这是本项目反复强调的"零误伤"原则）。
 *
 * 【为什么全部用 CSS/SVG 画】
 *   鱼缸、柜子、鸟笼、水、气泡、水草、玻璃高光都是几何图形，
 *   用 CSS 渐变足够逼真，且**零外部图片请求**，
 *   与治愈星球"画面全部现场绘制"的设计保持一致，服务器压力最小。
 * ===================================================================== */

/* ==================== 一、场景写实化增强 ==================== */

/* 草地：叠加多层渐变的"草色深浅"，再撒上细密草叶纹理 */
.pz-stage .pz-ground {
  background:
    /* 近景深草：底部更暗，形成景深 */
    linear-gradient(180deg, rgba(120, 180, 120, 0) 0%, rgba(84, 148, 92, .18) 70%, rgba(62, 120, 76, .30) 100%),
    /* 太阳光从左上方洒下的大面积亮斑 */
    radial-gradient(60% 46% at 22% 12%, rgba(255, 253, 224, .55) 0%, rgba(255, 253, 224, 0) 70%),
    /* 草地基底：三段绿，模拟受光面/背光面 */
    linear-gradient(180deg, #b7dc9a 0%, #9ccf85 32%, #85c276 68%, #6fb266 100%);
}

/* 草叶纹理：用重复的小斜线做"一根根草"的观感（纯 CSS，无图片） */
.pz-stage .pz-ground::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(78deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-72deg, rgba(40, 92, 52, .13) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(96deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 13px);
  /* 让纹理只在草地上有，天空/水面区域不铺（沿 y 轴渐隐） */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,1) 48%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,1) 48%, rgba(0,0,0,1) 100%);
}

/* 起伏土丘：加一点明暗，不再是一块纯色 */
.pz-stage .pz-hill--far {
  box-shadow: inset 0 -18px 30px -14px rgba(40, 92, 52, .35);
}
.pz-stage .pz-hill--near {
  box-shadow:
    inset 0 -22px 34px -14px rgba(34, 84, 48, .45),
    inset 0 12px 22px -16px rgba(255, 255, 224, .7);
}

/* 云与太阳：更柔和的边缘与光晕 */
.pz-stage .pz-cloud {
  filter: drop-shadow(0 6px 12px rgba(120, 160, 190, .22));
  opacity: .95;
}
.pz-stage .pz-sun {
  box-shadow: 0 0 46px 22px rgba(255, 236, 160, .55), 0 0 90px 46px rgba(255, 240, 190, .28);
}

/* 池塘：加水面反光与岸边阴影 */
.pz-stage .pz-pond {
  box-shadow:
    inset 0 10px 22px -8px rgba(255, 255, 255, .55),
    inset 0 -14px 26px -10px rgba(20, 70, 110, .45),
    0 8px 18px -10px rgba(30, 80, 60, .35);
}

/* 所有宠物：脚下都有**软阴影**（贴地感的关键），且不再镜像出现"方块感" */
.pz-stage .pz-pet { filter: drop-shadow(0 6px 6px rgba(40, 80, 50, .28)); }
.pz-stage .pz-pet__sprite svg { display: block; }
/* 宠物不再是四方形图片：去掉可能存在的方框与背景 */
.pz-stage .pz-pet__sprite img,
.pz-stage .pz-pet__sprite svg { border: 0 !important; border-radius: 0 !important; background: none !important; }

/* ==================== 二、中央鱼缸 + 柜子 ==================== */

.pz-habitat { position: absolute; inset: 0; pointer-events: none; z-index: 6; }

/*
 * 鱼缸组：水平居中、贴场地底部往上留出一点"地板"。
 * width 决定整组宽度；玻璃与柜体都用 left:0/right:0，所以**两者始终同宽**
 * —— 这就是站长要的"与柜子长度平齐"。
 */
.pz-tank {
  position: absolute;
  /*
   * 位置由 CSS 变量驱动（站长 2026-10-17：允许玩家自己摆放）：
   *   --pz-tank-x 未设置时用 50% —— 即默认居中，与升级前完全一致；
   *   --pz-tank-y 未设置时用 7%  —— 即默认贴场地底部（原 bottom:7%）。
   * 拖动时 JS 只改变量，不重排 DOM。
   */
  left: var(--pz-tank-x, 50%);
  bottom: var(--pz-tank-y, 7%);
  /* 变量是 left/bottom 的百分比锚点，减去自身一半让"中心对准锚点" */
  transform: translateX(-50%);
  width: clamp(150px, 30%, 300px);
  touch-action: none;   /* 触屏拖动时不要触发页面滚动 */
}
.pz-tank__glass {
  position: relative;
  width: 100%;
  /* 正方形鱼缸：宽高相等（站长明确"大型正方形鱼缸"） */
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #dff2fb 0%, #bfe6f6 40%, #9fd6ee 100%);
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow:
    inset 0 0 26px 6px rgba(120, 190, 225, .55),
    inset 0 -12px 20px -8px rgba(20, 80, 120, .35),
    0 10px 20px -12px rgba(20, 70, 100, .55);
}
/* 水体：上浅下深 + 一点整体蓝调 */
.pz-tank__water {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(210, 240, 252, .55) 0%, rgba(150, 210, 235, .45) 55%, rgba(96, 170, 205, .55) 100%);
}
/* 水面波纹：一条缓慢平移的亮线 */
.pz-tank__wave {
  position: absolute;
  left: -30%;
  top: 4%;
  width: 160%;
  height: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  filter: blur(2px);
  animation: pz-wave 5.6s ease-in-out infinite;
}
@keyframes pz-wave {
  0%, 100% { transform: translateX(-6%); opacity: .5; }
  50% { transform: translateX(6%); opacity: .85; }
}
/* 缸底细沙 */
.pz-tank__sand {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  background: linear-gradient(180deg, #f2e2c4 0%, #dcbf92 100%);
  box-shadow: inset 0 6px 10px -6px rgba(120, 90, 40, .5);
  border-radius: 0 0 6px 6px;
}
/* 水草：三条不同高度的小草，轻微摆动 */
.pz-tank__weed {
  position: absolute;
  bottom: 12%;
  width: 8px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #6fbe7f 0%, #3f8f56 100%);
  transform-origin: bottom center;
  animation: pz-weed 3.4s ease-in-out infinite;
}
.pz-tank__weed--1 { left: 16%; height: 34%; animation-delay: -.2s; }
.pz-tank__weed--2 { left: 24%; height: 46%; animation-delay: -1.1s; background: linear-gradient(180deg, #8ccf92 0%, #4c9a5f 100%); }
.pz-tank__weed--3 { right: 18%; height: 30%; animation-delay: -.7s; }
@keyframes pz-weed {
  0%, 100% { transform: rotate(-5deg) scaleY(1); }
  50% { transform: rotate(6deg) scaleY(1.06); }
}
/* 气泡：从底部上升，到水面消失 */
.pz-tank__bubble {
  position: absolute;
  bottom: 10%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95), rgba(200, 235, 250, .35));
  border: 1px solid rgba(255, 255, 255, .7);
  opacity: 0;
  animation: pz-bubble 6s linear infinite;
}
.pz-tank__bubble--1 { left: 20%; animation-delay: 0s; }
.pz-tank__bubble--2 { left: 62%; width: 5px; height: 5px; animation-delay: 2.1s; }
.pz-tank__bubble--3 { left: 84%; width: 6px; height: 6px; animation-delay: 3.7s; }
@keyframes pz-bubble {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { opacity: .9; }
  85% { opacity: .7; }
  100% { transform: translateY(-78%) scale(1); opacity: 0; }
}
/* 玻璃高光：左上到右下的一道斜光 + 顶部亮边，玻璃质感的关键 */
.pz-tank__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .55) 0 12%, rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0 3px, rgba(255, 255, 255, 0) 3px);
  mix-blend-mode: screen;
}
/* 缸内游动的鱼层 */
.pz-tank__swimmers { position: absolute; inset: 0; }
.pz-swim {
  position: absolute;
  width: 18%;
  will-change: transform;
}
.pz-swim svg { width: 100%; height: auto; display: block; }
/* 游动：由 JS 每帧改 transform，CSS 只负责"摆尾"这种小幅形变 */
.pz-swim__tail { transform-origin: 30% 50%; animation: pz-tail .55s ease-in-out infinite; }
@keyframes pz-tail {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

/* 柜体：与鱼缸同宽（left/right:0），木质台面 + 双开门 + 支脚 */
.pz-cabinet {
  position: relative;
  /*
   * 与鱼缸**严格同宽**（站长："与柜子长度平齐"）。
   * 实测：缸体 3px 边框由 border-box 计入 width，所以直接 width:100%
   * 就是与缸外沿完全对齐；先前误加 `calc(100% - 6px)` 反而窄了 6px。
   * 这里保持 width:100%，并用 box-sizing 兜底，确保两者外沿一致。
   */
  box-sizing: border-box;
  width: 100%;
  height: clamp(34px, 9%, 54px);
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #b07b45 0%, #96632f 46%, #7d4f24 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 235, 200, .5),
    0 10px 18px -12px rgba(40, 26, 10, .7);
}
/* 台面：比柜体略宽一点点的"沿口"，让鱼缸像真的坐在柜子上 */
.pz-cabinet__top {
  position: absolute;
  left: -3px; right: -3px; top: -5px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e0b681 0%, #c08e52 100%);
  box-shadow: 0 2px 4px -1px rgba(50, 30, 10, .5);
}
/* 双开门：两条竖缝 + 圆把手 */
.pz-cabinet__door {
  position: absolute;
  top: 18%;
  bottom: 16%;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 240, 214, .22), rgba(120, 78, 34, .18));
  box-shadow: inset 0 0 0 1px rgba(90, 56, 22, .45);
}
.pz-cabinet__door--l { left: 6%; }
.pz-cabinet__door--r { right: 6%; }
.pz-cabinet__door i {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9c2, #c79a5c);
  box-shadow: 0 1px 1px rgba(60, 36, 12, .6);
}
.pz-cabinet__door--l i { right: 5%; }
.pz-cabinet__door--r i { left: 5%; }
/* 支脚：柜子不悬空，落地感 */
.pz-cabinet__legs {
  position: absolute;
  left: 8%; right: 8%; bottom: -7px;
  height: 8px;
  background:
    linear-gradient(90deg, #6b4220 0 8px, transparent 8px calc(100% - 8px), #6b421f calc(100% - 8px)),
    linear-gradient(90deg, transparent 0, transparent 100%);
  border-radius: 2px;
}

/* ==================== 三、鸟笼（鸟 / 鸣虫住在里面）==================== */

.pz-cage {
  position: absolute;
  /*
   * 同上：未设置变量时默认在右侧 8% —— 保持升级前的观感。
   * 拖动后 left 变成玩家选的百分比（用 left 而不是 right，
   * 这样拖动换算简单，不会出现"拖了反而跳到另一侧"）。
   */
  right: auto;
  left: var(--pz-cage-x, 84%);
  bottom: var(--pz-cage-y, calc(7% + clamp(34px, 9%, 54px) - 2px));
  width: clamp(64px, 13%, 120px);
  transform: translateX(-50%);
  touch-action: none;
}
.pz-cage__hook {
  display: block;
  width: 3px;
  height: 12px;
  margin: 0 auto -2px;
  background: linear-gradient(180deg, #b9a17a, #8d7550);
  border-radius: 2px;
}
.pz-cage__body {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  border-radius: 50% 50% 12% 12% / 34% 34% 12% 12%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(210, 232, 240, .32));
  border: 2px solid #b9a17a;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .55),
    0 8px 14px -10px rgba(40, 30, 10, .6);
  overflow: hidden;
}
/* 笼条：4 条竖线 + 顶部圆弧自然收口 */
.pz-cage__bar {
  position: absolute;
  top: 4%; bottom: 8%;
  width: 2px;
  background: linear-gradient(180deg, #cbb68f, #9c8259);
  border-radius: 2px;
  opacity: .9;
}
.pz-cage__bar--1 { left: 20%; }
.pz-cage__bar--2 { left: 40%; }
.pz-cage__bar--3 { left: 60%; }
.pz-cage__bar--4 { left: 80%; }
.pz-cage__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10%;
  background: linear-gradient(180deg, #cbb68f, #9c8259);
}
.pz-cage__perch {
  position: absolute;
  left: 12%; right: 12%; bottom: 22%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #a98b5c, #cbb68f, #a98b5c);
}
.pz-cage__fliers { position: absolute; inset: 0; }
.pz-fly {
  position: absolute;
  width: 34%;
  will-change: transform;
}
.pz-fly svg { width: 100%; height: auto; display: block; }
/* 翅膀轻拍 */
.pz-fly__wing { transform-origin: 60% 46%; animation: pz-flap .42s ease-in-out infinite; }
@keyframes pz-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.62); }
}

/* ==================== 四、无障碍：尊重"减少动态效果" ==================== */
@media (prefers-reduced-motion: reduce) {
  .pz-tank__wave,
  .pz-tank__weed,
  .pz-tank__bubble,
  .pz-swim__tail,
  .pz-fly__wing { animation: none !important; }
}

/* ==================== 五、接管旧的关键帧漫游 ====================
 * zoo.css 里原本用 CSS `animation: pz-roam` 让宠物按**固定路线匀速来回**。
 * 那条路线每次刷新都一模一样，一眼就是"动画"而不是"活物"
 * （站长要求"动物移动规则自然一点……不规则移动"）。
 *
 * 现在改由 public/static/js/zoo-habitat.js 用 requestAnimationFrame
 * 逐帧积分位置：随机目标点 + 平滑转向 + 停顿 + 扰动 → 路线不重复。
 *
 * 因此这里必须**关掉旧动画**，否则 CSS 关键帧会不断覆写 JS 设的 transform，
 * 表现为"动物被弹回原位、来回抽搐"。本文件在 zoo.css 之后加载，
 * 用 animation:none 即可稳定覆盖，无需改动 zoo.css 本身。
 */
.pz-stage .pz-pet {
  /*
   * ⚠️ 只关旧动画、**不要动 left/top**！
   * 上一版这里写了 `left:0 !important; top:0 !important;`，
   * 本意是"让 JS 全权定位"，结果把 `.pz-pet` 的绝对定位基准坐标清成了 0 ——
   * 所有动物都被钉在舞台左上角（实测位移 0x0），看起来就是"站着一动不动"。
   * 正确做法：位置交给 JS 写 left/top 百分比，CSS 只负责关掉旧关键帧。
   */
  animation: none !important;
  /* 位置由 JS 每帧写 left/top（百分比，随容器自适应） */
  will-change: left, top;
}
/* 走路的上下起伏保留（由 __sprite 层负责，与位置 transform 不冲突） */
.pz-stage .pz-pet__sprite { animation: pz-walk var(--pz-walk-dur, .9s) ease-in-out infinite; }
@keyframes pz-walk {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ==================== 六、可拖动摆放（站长 2026-10-17 需求）====================
 * 站长原话：「允许选择金鱼的玩家将鱼缸移动摆放至自己喜欢的地方，不一定固定在中间，
 *   鸟笼也是一样，允许玩家自己摆放位置。」
 *
 * 只有场地主人（is-draggable）能拖；访客与轮播页是只读的，不会出现抓手光标。
 * 拖动体验细节：
 *   · cursor: grab / grabbing 让"可拖"这件事一眼可见；
 *   · 拖动中加虚线轮廓，明确"正在移动哪个设施"；
 *   · 松手后 outline 消失，只留位置。
 */
.pz-tank.is-draggable,
.pz-cage.is-draggable {
  cursor: grab;
  pointer-events: auto;              /* .pz-habitat 整体是 none，这里要打开 */
}
.pz-tank.is-draggable:active,
.pz-cage.is-draggable:active { cursor: grabbing; }
.pz-tank.is-dragging,
.pz-cage.is-dragging {
  outline: 2px dashed rgba(61, 155, 209, .85);
  outline-offset: 4px;
  border-radius: 8px;
  z-index: 9;
}
/* 拖动时给个提示气泡，告诉玩家松手即保存 */
.pz-habitat__hint {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(61, 155, 209, .45);
  color: #2b6c93;
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 4px 10px -6px rgba(20, 60, 90, .5);
  pointer-events: none;
}

/* ==================== 七、动物落地阴影（提升逼真度）====================
 * 站长要求「画面逼真度提高」。SVG 形象自带的阴影是画在图形内部的，
 * 动物在草地上移动时，"脚下有一团会跟着走的软阴影"是真实感的关键，
 * 否则会像贴纸浮在草地上。
 * 做法：在每个宠物外层用 ::before 画一个椭圆、高斯模糊成软阴影，
 * 位置贴在形象底部；随动画一起移动（因为它属于宠物元素本身）。
 */
.pz-stage .pz-pet::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 62%;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(38, 82, 50, .34) 0%, rgba(38, 82, 50, .16) 55%, rgba(38, 82, 50, 0) 100%);
  filter: blur(1.5px);
  pointer-events: none;
  z-index: -1;
}

/* ==================== 八、濒死倒计时标记（站长 2026-10-17 规则）====================
 * 站长原话：「扣光怪宠物头上提示倒计时生命」。
 * 这里做成宠物**头顶的小标签**，全场任何角度都能看到（不只悬停提示里），
 * 用醒目的橙红色并轻微呼吸闪烁，提醒"再不管就要失去它了"。
 * 闪烁会尊重"减少动态效果"设置（见文件末尾的媒体查询）。
 */
.pz-stage .pz-pet__dying {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a5b, #e8502f);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 8px -3px rgba(160, 50, 20, .7);
  animation: pz-dying 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pz-dying {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50% { opacity: .78; transform: translateX(-50%) scale(1.06); }
}
/* 悬停提示里的濒死文字 */
.pz-pet__tipstate.is-dying { color: #d0451f; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .pz-stage .pz-pet__dying { animation: none !important; }
}