/* 游玩地图专用样式。基础排版、配色、网格底纹全部沿用学习站的 style.css。 */

.fun-hero{padding:4rem 0 1.6rem}
.fun-count{font-size:.95rem!important;color:var(--mute)!important;margin-top:.5rem}

/* ── 地图：铺满视口宽，上下各一条细线收边 ─────────────────────── */
.map-shell{position:relative;z-index:1;width:100%;height:min(76vh,780px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
#map{position:absolute;inset:0;background:var(--surface)}
/* 高德默认配色偏冷偏艳，压到和米白底同一个调子 */
.tiles-warm{filter:sepia(.32) saturate(.55) brightness(1.04) contrast(.92) hue-rotate(-6deg)}
.leaflet-container{font-family:var(--sans);background:var(--surface)}
.leaflet-bar a{background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);
  border-bottom-color:var(--line)!important;backdrop-filter:blur(4px)}
.leaflet-bar{border:1px solid var(--line)!important;box-shadow:0 4px 14px rgba(46,40,34,.08)!important;border-radius:10px!important;overflow:hidden}

/* 小点：去得越多越大；去过不止一次的有一圈外环 */
.pin-wrap{background:none;border:0}
.pin{position:relative;display:block;width:var(--s);height:var(--s);cursor:pointer}
.pin i{position:absolute;inset:0;border-radius:50%;background:var(--ink);
  border:2.5px solid var(--surface);box-shadow:0 2px 6px rgba(46,40,34,.35);
  transition:transform .2s cubic-bezier(.2,.9,.3,1),background .2s}
.pin.multi::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--hot);opacity:.55}
.pin:hover i,.pin-wrap.on .pin i{background:var(--hot);transform:scale(1.25)}
.pin-wrap.on .pin::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid var(--hot);animation:ping 1.6s ease-out infinite}
@keyframes ping{from{opacity:.7;transform:scale(.7)}to{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){.pin-wrap.on .pin::after{animation:none;opacity:.5}}
.pin-tip{font-family:var(--sans);font-size:.8rem;color:var(--bg);background:var(--ink);
  border:0;border-radius:6px;padding:.25rem .55rem;box-shadow:0 6px 18px rgba(46,40,34,.2)}
.pin-tip::before{border-top-color:var(--ink)!important}

/* ── 侧栏：桌面在右侧滑出，手机从底部升起 ─────────────────────── */
/* z-index 要高过 Leaflet 的缩放按钮（1000），不然手机上按钮压在面板上 */
.place-panel{position:absolute;z-index:1100;top:0;right:0;bottom:0;width:min(420px,100%);
  background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(8px);
  border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(46,40,34,.08);
  overflow-y:auto;padding:1.8rem 1.6rem 3rem;
  transform:translateX(24px);opacity:0;transition:transform .26s cubic-bezier(.2,.9,.3,1),opacity .2s}
.place-panel.on{transform:none;opacity:1}
.pp-close{position:absolute;top:1rem;right:1rem;width:2rem;height:2rem;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--mute);font-size:1.1rem;cursor:pointer}
.pp-close:hover{color:var(--hot);border-color:var(--hot)}
.pp-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--hot);margin-bottom:.5rem}
.place-panel h2{font-size:1.55rem;font-weight:500;line-height:1.3;margin-bottom:1.4rem;padding-right:2rem}

/* 时间线：左边一根细线，每次到访一个点 */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;width:1px;background:var(--line)}
.timeline>li{position:relative;padding-left:1.6rem;margin-bottom:1.9rem}
.timeline>li::before{content:"";position:absolute;left:0;top:.42rem;width:11px;height:11px;border-radius:50%;
  background:var(--surface);border:2px solid var(--ink)}
.timeline>li:first-child::before{background:var(--hot);border-color:var(--hot)}
.tl-date{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--mute);margin-bottom:.45rem}
.tl-date span{font-family:var(--serif);font-size:1rem;letter-spacing:0;color:var(--ink);margin-left:.6rem}
.tl-text{font-size:.96rem;line-height:1.8;color:var(--ink-2)}
.tl-text p{margin:0 0 .7em}
.tl-photos{display:grid;gap:.4rem;margin-top:.7rem}
.tl-photos.n1{grid-template-columns:1fr}
.tl-photos.n2{grid-template-columns:1fr 1fr}
.tl-photos.n3{grid-template-columns:1fr 1fr 1fr}
.tl-ph{padding:0;border:0;background:var(--code-bg);border-radius:6px;overflow:hidden;cursor:zoom-in;display:block}
.tl-photos:not(.n1) .tl-ph{aspect-ratio:1/1!important}
.tl-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.tl-ph:hover img{transform:scale(1.04)}

@media (max-width:48rem){
  .map-shell{height:72vh}
  .place-panel{top:auto;left:0;right:0;width:100%;height:68%;border-left:0;
    border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -14px 36px rgba(46,40,34,.12);
    transform:translateY(24px)}
}

/* ── 最近去过 ─────────────────────────────────────────────── */
.recent{padding:3rem 0 5rem}
.recent h4{margin-bottom:1rem}
#recent{list-style:none;padding:0;margin:0}
#recent button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;
  align-items:center;width:100%;padding:.9rem 0;border-bottom:1px solid var(--line);cursor:pointer}
#recent li:first-child button{border-top:1px solid var(--line)}
#recent img,#recent .nocover{width:4.2rem;height:4.2rem;object-fit:cover;border-radius:8px;background:var(--code-bg);display:block}
#recent b{display:block;font-weight:500;font-size:1.05rem;transition:color .15s}
#recent button:hover b{color:var(--hot)}
.rc-meta{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--mute);margin:.15rem 0 .25rem}
.rc-snip{display:block;font-size:.88rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 看大图（沿用 style.css 的 .lightbox，加上翻页和说明） ─────────── */
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);width:3rem;height:3rem;border-radius:50%;
  border:0;background:rgba(255,255,255,.12);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.lb-prev{left:1.2rem}.lb-next{right:1.2rem}
.lightbox.single .lb-prev,.lightbox.single .lb-next{display:none}
.lb-cap{position:fixed;bottom:1.2rem;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.lightbox img{max-height:calc(100vh - 6rem)}