/* 安省著名钓点：/spots/ 像素地图预告页 + 首页预告块（2026-10-29）。像素口径见 /css/pixel.css 头注释；颜色只用站点变量。
   地图本身是 build.py 生成的静态 SVG（FMZ 边界栅格化，每格 4 单位）；/js/spots-map.js 把舞台宽度设成格数的整数倍（--cell），格子才不糊。 */

/* 地图格子的颜色 */
.spm .spm-l{fill:var(--paper2)}
.spm .spm-e{fill:var(--rule)}
.spm .spm-c{fill:var(--ink2)}
.spm .spm-w{fill:var(--mut);opacity:.32}
.spm .spm-m{fill:var(--red)}

/* ---------- 预告页 ---------- */
.spots-head{max-width:760px;margin:6px 0 22px}
.spots-head .label{display:block;margin-bottom:10px}
.spots-head h1{font:400 clamp(2rem,5vw,3.2rem)/1.05 var(--disp);margin:0 0 12px;letter-spacing:-.01em}
.spots-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;align-items:start;border-top:3px double var(--rule2);padding-top:20px}
.spots-mapcol{min-width:0}
.spots-views{margin-bottom:14px}
.spots-stage{position:relative;max-width:100%;line-height:0}
.spots-stage svg{display:block;width:100%;height:auto}
.spots-stage[hidden]{display:none}

/* 钓点标记：没有 JS 时就是普通锚点（跳到下面名单里那一条）；有 JS 时由 spots-map.js 在地图层统一判定最近的点（手机上点得中） */
.spot-pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink);-webkit-tap-highlight-color:transparent;line-height:1}
.spot-dot{--d:max(9px,calc(var(--cell,4px) * 2));width:var(--d);height:var(--d);background:var(--red);box-shadow:0 0 0 2px var(--ink);display:block}
.spot-name{position:absolute;left:50%;bottom:calc(50% + 10px);transform:translateX(-50%);white-space:nowrap;padding:2px 6px;font:600 .72rem/1.4 var(--sans);letter-spacing:.02em;background:var(--ink);color:var(--paper);opacity:0;pointer-events:none}
.spot-pin:focus-visible{outline:none}
.spot-pin:focus-visible .spot-dot{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--red)}
.spot-pin:focus-visible .spot-name,.spot-pin.on .spot-name{opacity:1}
.spot-pin.on{z-index:2}
.spot-pin.on .spot-dot{background:var(--ink);box-shadow:0 0 0 2px var(--red);animation:spot-bob .8s steps(1,end) infinite alternate}
@keyframes spot-bob{to{transform:translateY(calc(var(--cell,4px) * -1))}}
.spots-js .spot-pin{pointer-events:none}   /* 指针交给舞台；键盘照样能 Tab 到锚点 */
.spots-js .spots-stage{cursor:pointer;touch-action:manipulation}

/* 卡片 */
.spots-cardcol{min-width:0}
.spots-list-h{font:400 1.5rem/1.2 var(--disp);margin:0 0 12px}
.spots-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.spot-card{background:var(--paper);padding:16px 18px;scroll-margin-top:70px}
.spot-card h3{font:400 1.6rem/1.1 var(--disp);margin:0 0 8px}
.spot-card h4{font:600 .74rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.spot-meta{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.spot-regs,.spot-edge,.spot-src{margin:6px 0 0;font:500 .9rem/1.45 var(--sans)}
.spot-edge{color:var(--ink2)}
.spot-fish{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.spot-fish li{font:600 .8rem/1.3 var(--sans);padding:3px 8px;background:var(--ink);color:var(--paper)}
.spot-card blockquote{margin:0 0 8px;padding:0 0 0 12px;border-left:var(--px) solid var(--red);font:italic 1rem/1.5 var(--serif);color:var(--ink2)}
.spot-card blockquote p{margin:0}
.spot-soon{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--rule);font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.spots-pick{margin:0;padding:18px;border:2px dashed var(--rule);font:500 .95rem/1.5 var(--sans);color:var(--ink2)}
.spots-js .spots-list-h{display:none}
.spot-card[hidden],.spots-pick[hidden],.spots-views[hidden]{display:none}

/* 名字按钮（地图上挤在一起的点从这里点也行） */
.spots-chips{list-style:none;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--rule2);display:flex;flex-wrap:wrap;gap:10px}
.spots-chips .px-btn{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-size:.8rem}
.spots-chips .px-btn[aria-current=true]{background:var(--ink);color:var(--paper)}
.spots-note{margin:22px 0 8px;font:400 .85rem/1.55 var(--sans);color:var(--mut);max-width:780px}

@media (min-width:900px){
  .spots-cardcol{position:sticky;top:64px}   /* 桌面上卡片跟着地图，点下面的点不用往回翻 */
}
@media (max-width:899px){
  .spots-grid{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* ---------- 首页预告块 ---------- */
.spots-teaser{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;margin:8px 0 26px;padding:18px 0;border-top:3px double var(--rule2)}
.spots-thumb{display:block;justify-self:start;line-height:0;padding:6px;background:var(--paper)}
.spots-thumb svg{display:block;width:192px;height:auto}   /* 96 格 × 2px，整数倍不糊 */
.spots-teaser .label{display:block;margin-bottom:8px}
.spots-teaser h3{margin:0 0 6px;font:400 1.6rem/1.15 var(--disp)}
.spots-teaser h3 a{text-decoration:none}
.spots-teaser h3 a:hover{color:var(--red)}
.spots-teaser p{margin:0;color:var(--ink2);font-size:1rem;max-width:620px}
.spots-teaser .more{margin-top:8px;font:600 .82rem/1.3 var(--sans);letter-spacing:.04em}
@media (max-width:520px){
  .spots-teaser{grid-template-columns:minmax(0,1fr);gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .spot-pin.on .spot-dot{animation:none}
}