/* ============================================================
   水域专区（18 地图分区）  zone.css  v20261022a
   ------------------------------------------------------------
   原则：只做加法。
     · 全部新增 zone-* 类，不修改任何既有规则（不碰 theme-light.css 的覆盖层）
     · 颜色一律走站点令牌 var(--primary) 等，后台改主色全站跟着变
     · 地图识别色只用 --mp 一个变量做点缀（JS 按地图注入），不写死 hex
   断点与线上保持一致：600px（四项卡列数）、900px（双栏，由 style.css 提供）、1200px（主栏放宽）
   ============================================================ */

/* 专区模式下隐藏「新手教程 / 全站水群」两块入口条，避免和专区头抢视线 */
body.zone-mode .guide-entry { display: none; }

/* ---------------- 专区头 ---------------- */
.zone-head {
  position: relative; height: 150px; margin-top: 12px;
  border-radius: 14px; overflow: hidden;
  background: var(--mp, #1ea3a3);
  box-shadow: var(--shadow);
}
.zone-head .zh-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  /* 原来整体压到 .42 —— 整张地图发灰、细节全糊。
     改成只留 12% 让底下识别色透上来做统一色调，图还是图。 */
  opacity: .88;
}
/* 遮罩重做（20261022r）：原来是「左侧 34% 实色 + 右侧黑 12%」，
   34% 处有一道肉眼可见的硬边分界，右侧的黑还让浅色主题发脏。
   现在改成三层柔和叠加，全程没有分界点：
     ① 自下而上渐深 —— 白色文字的对比度由这一层保证（实测 ≥ 7:1，过 WCAG AA）
     ② 左→右斜向轻压 —— 给左侧文字区再加一点底，地图亮部也冲不淡文字
     ③ 顶部极淡提亮 —— 压住原图顶部的刻度/边框，跟圆角边缘不打架
   三层全部用中性深蓝而非纯黑，浅色主题下不显脏。 */
.zone-head .zh-ov {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(102deg, rgba(6, 18, 30, .30) 0%, rgba(6, 18, 30, .04) 44%, rgba(6, 18, 30, 0) 68%),
    linear-gradient(0deg, rgba(6, 18, 30, .72) 0%, rgba(6, 18, 30, .40) 24%,
                              rgba(6, 18, 30, .10) 58%, rgba(6, 18, 30, 0) 100%);
}
.zone-head .zh-in { position: absolute; left: 16px; bottom: 14px; color: #fff; max-width: 66%; }
.zone-head .zh-k {
  display: inline-block; font-size: 11px; line-height: 18px; padding: 0 9px;
  border-radius: 99px; background: rgba(255, 255, 255, .93); color: var(--text); margin-bottom: 6px;
}
.zone-head .zh-n { font-size: 20px; font-weight: 600; line-height: 1.25; }
.zone-head .zh-s { font-size: 12px; opacity: .92; margin-top: 2px; }
/* 文字落在照片上，加一层极轻阴影兜底：地图亮部区域也能守住对比度 */
.zone-head .zh-n, .zone-head .zh-s { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.zone-head .zh-c {
  position: absolute; right: 14px; bottom: 14px; text-align: center;
  background: rgba(255, 255, 255, .94); border-radius: 12px; padding: 6px 11px; box-shadow: var(--shadow);
}
.zone-head .zh-c b { display: block; font-size: 18px; line-height: 1.2; color: var(--text); }
.zone-head .zh-c span { font-size: 11px; color: var(--muted); }

/* ---------------- 切换水域（18 张横滑） ----------------
   电脑端「划不动」与地图页水域卡是同一个病：横向滚动条被隐藏、鼠标滚轮又是纵向的，
   导致第 7 张之后的卡片永远点不到。这里同样给三种操作方式：
     ① 左右箭头翻页  ② 滚轮 / 触控板纵向滚动转横向  ③ hover 设备显示细滚动条
   结构：.zone-sw（定位容器）> [箭头] + .zsw-track（真正的滚动容器） + [箭头] */
.zone-sw {
  position: relative; display: flex; align-items: center; gap: 4px;
  margin-top: 11px; padding: 2px 0;
}
.zone-sw .zsw-track {
  display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: 2px 2px 4px; flex: 1; min-width: 0;
}
.zone-sw .zsw-track::-webkit-scrollbar { height: 5px; }
.zone-sw .zsw-track::-webkit-scrollbar-thumb { background: #d7dde6; border-radius: 3px; }
/* 只在有鼠标的设备显示细滚动条，触屏靠滑动 */
@media (hover: hover) and (pointer: fine) {
  .zone-sw .zsw-track::-webkit-scrollbar { height: 6px; }
}
.zone-sw .zsw-ar {
  flex: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 15px; line-height: 1; display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow); font-family: inherit; padding: 0;
}
.zone-sw .zsw-ar.show { display: inline-flex; }
.zone-sw .zsw-ar:hover { border-color: var(--primary); color: var(--primary-d); }

.zone-sw .zsw-i {
  flex: none; display: flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 4px 11px 4px 4px; font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.zone-sw .zsw-i img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.zone-sw .zsw-i .zsw-all {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  background: var(--surface-2); color: var(--muted);
}
.zone-sw .zsw-i.on {
  border-color: var(--primary); background: var(--surface-2);
  color: var(--primary-d); font-weight: 500;
}
.zone-sw .zsw-i .n { font-size: 10px; color: var(--muted); }

/* ---------------- 六格速查卡 ----------------
   水温 / 天气 / 时间 / 推荐鱼种 / 全站水群 / 咖啡厅订单。
   比原来的四卡更小一号：内边距 8px、圆角 12px、数值 14px。
   列数：<400 两列 │ 400-599 三列 │ ≥600 六列（容器 640 每格约 100px，够放短值） */
.zone-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 360px) { .zone-quick { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) { .zone-quick { grid-template-columns: repeat(6, 1fr); } }
.zone-quick .zq {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 9px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.zone-quick .zq-l { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.zone-quick .zq-v {
  font-size: 14px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zone-quick .zq-v.sm { font-size: 13px; }
.zone-quick .zq-v.go { color: var(--primary-d); }
.zone-quick .zq-s {
  font-size: 10px; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zone-quick .zq-rep {
  align-self: flex-start; margin-top: 3px; font-size: 10px; line-height: 16px;
  color: var(--primary-d); border: 1px solid var(--primary); border-radius: 5px;
  padding: 0 5px; background: #fff;
}
a.zq-link { text-decoration: none; color: inherit; display: block; }
a.zq-link:hover { border-color: var(--primary); }
a.zq-link:hover .zq-v.go { text-decoration: underline; }

/* ---------------- 本区鱼种（移动端横滑，替代桌面右侧栏） ---------------- */
.zone-fish { display: flex; gap: 7px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; }
.zone-fish::-webkit-scrollbar { height: 5px; }
.zone-fish::-webkit-scrollbar-thumb { background: #d7dde6; border-radius: 3px; }
.zone-fish .zf {
  flex: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 7px 10px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap;
}
.zone-fish .zf i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: 1px; background: var(--mp, #1ea3a3);
}
.zone-fish .zf span { color: var(--muted); font-size: 10.5px; margin-left: 4px; }

/* ---------------- 最佳时段提示（社区贡献，必须标注非官方） ---------------- */
.zone-note {
  margin-top: 9px; padding: 8px 11px; font-size: 11.5px; line-height: 1.6;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px;
}
.zone-note b { color: var(--text); font-weight: 600; }
.zone-note .zn-tag { color: var(--muted); font-size: 10.5px; }

/* ---------------- 操作行 ---------------- */
.zone-acts { display: flex; gap: 9px; margin-top: 11px; }
.zone-acts a {
  flex: 1; text-align: center; border-radius: 10px; padding: 8px 0; font-size: 13px; text-decoration: none;
}
.zone-acts .za-p { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.zone-acts .za-s { background: #fff; color: var(--primary-d); border: 1px solid var(--primary); }

/* ---------------- 帖子左侧地图色条（20261023a 已删除）----------------
   原为 3px var(--mp) 竖条，站长反馈「左边一点蓝色看的很难受」；
   卡片已有圆角/边框/阴影且 hover 会抬升，色条属多余点缀，切区换色时视觉更跳。
   地图识别色 --mp 仍用于专区头 banner 蒙版与鱼种色点，不再作用在帖子卡上。 */

/* ---------------- 桌面右侧栏：本区速览 / 推荐鱼种 ---------------- */
.ps-card.zone-ps { border-left: 3px solid var(--mp, #1ea3a3); }
.ps-card.zone-ps .zfish-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-2); padding: 5px 0; border-bottom: 1px solid var(--line);
}
.ps-card.zone-ps .zfish-row:last-child { border-bottom: 0; }
.ps-card.zone-ps .zfish-row b { color: var(--text); font-weight: 600; }
.ps-card.zone-ps .zfish-row i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; background: var(--mp, #1ea3a3);
}

/* ---------------- 宽屏：仅专区模式把主栏从 640 放宽到 780 ---------------- */
/* 用 body.zone-mode 限定，正常的帖子页布局完全不受影响 */
@media (min-width: 1200px) {
  body.zone-mode .page:has(> .pl-main) { max-width: 1160px; }
  body.zone-mode .page:has(> .pl-main) > .pl-main { flex-basis: 780px; }
}

/* ---------------- 地图页：水域卡片上的「讨论 N ›」入口 ----------------
   入口埋进地图里，每张水域卡各自带自己的讨论数；N=0 仍然可点，空态专区即冷启动入口。
   用 inline onclick 阻断冒泡，避免同时触发卡片「切换水域」。 */
.mc-tz {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 0 6px;
  height: 17px; font-size: 10.5px; line-height: 17px; border-radius: 99px;
  color: var(--primary-d, #14807f); border: 1px solid var(--primary, #1ea3a3);
  background: #fff; text-decoration: none; white-space: nowrap;
}
.mc-tz:hover { background: var(--primary, #1ea3a3); color: #fff; }
@media (hover: hover) { .mc-tz { transition: background .15s ease, color .15s ease; } }

/* ---------------- 触控与动效 ---------------- */
.zone-sw .zsw-i, .zone-acts a { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .zone-head, .zone-quick, .zone-sw { transition: none !important; }
}

/* ---------------- 水域专区骨架（20261022r 重做）----------------
   上一版是一个光秃秃的灰方块 + 一道扫光，跟真实内容长得完全不像，
   加载完成时视觉跳变大；而且骨架高 118px、真实专区头 150px，
   **换区时会先矮 32px 再撑开 —— 这才是「不丝滑」的主因**。
   这一版：
     ① 骨架高度 / 圆角 / 内边距与真实元素逐项对齐，零高度跳变
     ② 内部用细长条按真实文字的字号排布（标签 10.5 / 数值 14 / 副文案 10）
        骨架长得像内容，加载完成时的「跳」就变成了「填色」
     ③ 换区用 .z-fade 淡入，骨架 → 内容是长出来而不是跳出来 */
.zsk-b {
  display: block; border-radius: 5px; background: var(--line, #e8edf4);
  position: relative; overflow: hidden;
}
.zsk-b::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: zskMove 1.4s ease-in-out infinite;
}
@keyframes zskMove { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* 与 .zone-head 完全同高（150px）+ 同圆角 + 同 margin，换区零跳变 */
.zsk-head {
  position: relative; height: 150px; margin-top: 12px; padding: 16px;
  border-radius: 14px; overflow: hidden; background: var(--surface-2, #eef2f7);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.zsk-head .zsk-b:nth-child(1) { width: 46px; height: 18px; border-radius: 99px; }
.zsk-head .zsk-b:nth-child(2) { width: 58%; height: 20px; margin-top: 8px; }
.zsk-head .zsk-b:nth-child(3) { width: 78%; height: 11px; margin-top: 9px; }

.zsk-sw { height: 44px; border-radius: 12px; position: relative; overflow: hidden; background: var(--line, #e8edf4); }
.zsk-sw::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  animation: zskMove 1.4s ease-in-out infinite;
}

/* 六卡骨架：三条按真实文字尺寸排布，与 .zq 同内边距、同最小高度 */
.zone-quick .zq.zsk-q { padding: 8px 9px; gap: 4px; min-height: 62px; }
.zone-quick .zq.zsk-q .zsk-b:nth-child(1) { width: 58%; height: 10px; }
.zone-quick .zq.zsk-q .zsk-b:nth-child(2) { width: 76%; height: 14px; margin-top: 2px; }
.zone-quick .zq.zsk-q .zsk-b:nth-child(3) { width: 44%; height: 9px; margin-top: 3px; }

/* 换区淡入：骨架 → 真实内容「长出来」 */
@keyframes zIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.z-fade { animation: zIn .26s cubic-bezier(.22, .61, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .zsk-b::after, .zsk-sw::after { animation: none; }
  .z-fade { animation: none; }
}

/* ===== 专区头左右切换（20261022v）：PC 箭头 / 按住拖动 / Shift+滚轮，手机直接滑 ===== */
.zone-head{cursor:grab}
.zone-head:active{cursor:grabbing}
.zone-head .zh-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;
  border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(10,22,34,.35);color:#fff;
  font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);transition:background .15s;padding:0;font-family:inherit}
.zone-head .zh-ar:hover{background:rgba(10,22,34,.6)}
.zone-head .zh-ar.prev{left:10px}
.zone-head .zh-ar.next{right:10px}
/* ===== 禁原生拖拽/选中（20261022w）：chip 是 <a>，按住拖会被浏览器当拖链接，
   dragstart 一触发后续 pointermove 全被吞掉，滑动条就「划不动」 ===== */
.zone-sw .zsw-i, .zone-sw .zsw-i img, .zone-head .zh-img { -webkit-user-drag: none; user-drag: none; }
.zone-sw .zsw-i { user-select: none; -webkit-user-select: none; }
/* ===== [hidden] 兜底（20261022w）=====
   .zone-quick/.zone-sw/.zone-fish 都写了 display:grid/flex，
   会把浏览器默认的 [hidden]{display:none} 盖掉 —— hidden 属性就形同虚设。
   症状：「其他」专区头下永远挂着 5 张骨架速查卡。 */
.zone-head[hidden], .zone-sw[hidden], .zone-quick[hidden],
.zone-note[hidden], .zone-fish[hidden] { display: none !important; }