/* ============================================================
   map.css - 探索地图 + 地点场景
   手绘、温暖、克制；动画只用 transform/opacity
   ============================================================ */

/* ---------- 房间里的牵引绳入口（门边挂钩） ---------- */
.room-leash {
    left: 47.5%; top: 55%; width: 5%; height: 12%;
    z-index: 20;
}
.room-leash svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(90,55,35,0.2)); }
.room-leash:hover { transform: rotate(-6deg); }
.room-leash .label { left: 50%; }

/* ================= 地图场景 ================= */
#scene-map {
    background: #cdd9a8;
    padding: 0;
    overflow: hidden;
    touch-action: none;
}
.map-sky {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,240,210,0.15), rgba(120,140,90,0.05));
    transition: background 2.5s ease;
}
#scene-map.day-dawn .map-sky { background: linear-gradient(180deg, rgba(255,200,170,0.35), rgba(255,235,200,0.1)); }
#scene-map.day-dusk .map-sky { background: linear-gradient(180deg, rgba(255,150,110,0.4), rgba(120,90,140,0.15)); }
#scene-map.day-night .map-sky { background: linear-gradient(180deg, rgba(30,40,90,0.5), rgba(20,25,60,0.35)); }
#scene-map.day-deep .map-sky { background: linear-gradient(180deg, rgba(12,16,44,0.68), rgba(10,12,36,0.5)); }
#scene-map.wx-cloudy .map-sky { filter: saturate(0.7) brightness(0.94); }
#scene-map.wx-rain .map-sky { background: linear-gradient(180deg, rgba(70,85,110,0.45), rgba(90,100,110,0.25)); }

.map-world {
    position: absolute; top: 0; left: 0;
    width: 1100px; height: 760px;
    transform-origin: 0 0;
    z-index: 2;
    cursor: grab;
    will-change: transform;
}
.map-world:active { cursor: grabbing; }
.map-terrain { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-terrain .river-flow { animation: river-dash 3s linear infinite; }
@keyframes river-dash { to { stroke-dashoffset: -56; } }
.map-terrain .map-reed { transform-origin: bottom center; animation: reed-sway 5s ease-in-out infinite; }
@keyframes reed-sway { 0%,100% { transform: translate(var(--tx,0)) rotate(-2deg);} 50% { transform: translate(var(--tx,0)) rotate(2.5deg);} }

/* 时间：地面明暗 */
#scene-map.day-night .map-world { filter: brightness(0.82) saturate(0.9); }
#scene-map.day-deep .map-world { filter: brightness(0.62) saturate(0.8); }
#scene-map.day-dusk .map-world { filter: brightness(0.95) sepia(0.12); }

/* 节日暖色 */
#scene-map.hol-spring .map-sky { box-shadow: inset 0 0 120px rgba(255,150,90,0.18); }
#scene-map.hol-birthday .map-sky { box-shadow: inset 0 0 120px rgba(255,190,120,0.22); }

/* ---------- 标记 / 路牌 ---------- */
.map-markers { position: absolute; inset: 0; }
.marker {
    position: absolute; transform: translate(-50%, -100%);
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; flex-direction: column; align-items: center;
    transition: transform 0.2s ease;
}
.marker:hover { transform: translate(-50%, -100%) scale(1.06); }
.marker:active { transform: translate(-50%, -100%) scale(0.96); }
.signpost {
    width: 46px; height: 46px; border-radius: 10px;
    background: #f4e6c8; border: 2px solid #b98860;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 10px rgba(80,60,30,0.28);
    position: relative;
}
.signpost::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    width: 4px; height: 14px; background: #96683f; transform: translateX(-50%);
}
.signpost svg { width: 32px; height: 32px; }
.sign-name {
    margin-top: 16px; font-size: 0.82rem; color: #4a3826;
    background: rgba(255,250,238,0.9); padding: 1px 8px; border-radius: 8px;
    box-shadow: 0 2px 5px rgba(80,60,30,0.18); white-space: nowrap;
}
.marker-home .signpost { background: #ffe6c2; border-color: #d99a5b; }
/* 隐藏地点：只有一条不起眼的小路头 */
.marker-trail { width: 20px; height: 20px; transform: translate(-50%,-50%); }
.marker-trail .trail-dot {
    display: block; width: 12px; height: 12px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #d9c08a, #b99a5f);
    box-shadow: 0 0 0 3px rgba(200,170,110,0.25);
    opacity: 0.55; animation: trail-breathe 3.6s ease-in-out infinite;
}
@keyframes trail-breathe { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }

/* ---------- 狗宝 + 脚印 ---------- */
.map-dog { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 6; }
.map-dog .dog-holder { filter: drop-shadow(0 4px 4px rgba(80,60,30,0.25)); }
.map-feet { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.map-foot {
    position: absolute; width: 10px; height: 10px; transform: translate(-50%,-50%);
    background: radial-gradient(circle at 50% 40%, rgba(120,90,50,0.5), rgba(120,90,50,0.15) 60%, transparent 70%);
    border-radius: 50%;
    animation: foot-fade 4.2s ease forwards;
}
@keyframes foot-fade { 0% { opacity: 0; } 12% { opacity: 0.6; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2);} }
.map-event { position: absolute; font-size: 1.4rem; transform: translate(-50%,-50%); animation: event-float 2.6s ease forwards; }
.map-event.butterfly::after { content: '🦋'; } .map-event.bird::after { content: '🐦'; }
.map-event.leaf::after { content: '🍃'; } .map-event.flower::after { content: '🌼'; }
.map-event.stone::after { content: '🪨'; } .map-event.squirrel::after { content: '🐿️'; }
.map-event.sniff::after { content: '💨'; } .map-event.print::after { content: '🐾'; }
@keyframes event-float { 0%{opacity:0; transform: translate(-50%,-30%) scale(.6);} 20%{opacity:1;} 100%{opacity:0; transform: translate(-50%,-160%) scale(1.1);} }

/* ---------- 天气粒子（地图） ---------- */
.map-amb { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
#scene-map.wx-rain .map-amb::before {
    content: ''; position: absolute; inset: -20% 0;
    background: repeating-linear-gradient(74deg, transparent 0 12px, rgba(200,225,245,0.35) 12px 13px);
    animation: rain-move 0.5s linear infinite;
}
@keyframes rain-move { to { transform: translateY(40px); } }
#scene-map.wx-snow .map-amb::before {
    content: '❄ ❅ ❄  ❄ ❅'; position: absolute; top: -10%; left: 0; right: 0;
    color: rgba(255,255,255,0.85); font-size: 1rem; letter-spacing: 40px;
    animation: snow-move 9s linear infinite;
}
@keyframes snow-move { to { transform: translateY(820px); } }

/* ---------- 地图 UI ---------- */
.map-back, .map-log {
    position: absolute; z-index: 20;
    background: rgba(255,250,240,0.92); border: 2px solid #e0c39a;
    color: #6b4f3f; border-radius: 22px; padding: 8px 16px;
    font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 10px rgba(80,60,30,0.2);
}
.map-back { right: calc(14px + var(--sa-right)); left: auto; top: calc(14px + var(--sa-top)); }
.map-log { right: calc(14px + var(--sa-right)); top: calc(56px + var(--sa-top)); }
.map-back:active, .map-log:active { transform: scale(0.95); }
.map-title {
    position: absolute; left: 50%; top: calc(14px + var(--sa-top)); transform: translateX(-50%);
    z-index: 20; color: #4a5a30; font-size: 1.3rem;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.map-actions {
    position: absolute; left: 50%; bottom: calc(20px + var(--sa-bottom)); transform: translateX(-50%);
    z-index: 20; display: flex; gap: 12px;
}
.map-act {
    background: rgba(255,250,240,0.94); border: 2px solid #cfe0a4; color: #4a5a30;
    border-radius: 20px; padding: 10px 18px; font-size: 1rem; cursor: pointer;
    box-shadow: 0 5px 12px rgba(80,60,30,0.22); transition: all 0.2s;
}
.map-act.active { background: #a8d08a; color: #fff; border-color: #7d9a72; }
.map-act:active { transform: scale(0.94); }
.map-hint {
    position: absolute; left: 50%; bottom: calc(74px + var(--sa-bottom)); transform: translateX(-50%);
    z-index: 20; background: rgba(74,56,38,0.82); color: #fff3df;
    padding: 6px 16px; border-radius: 16px; font-size: 0.9rem;
    opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; max-width: 90vw;
}
.map-hint.show { opacity: 1; }

/* 探索记录统计 */
.explore-stat { width: 100%; max-width: 360px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.es-row { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.6); border-radius: 10px; padding: 6px 12px; font-size: 0.92rem; }
.es-row b { color: var(--pink-deep); font-weight: normal; }
.frag { display: inline-block; width: 1.1em; text-align: center; color: #cbb48f; font-size: 1.1rem; }
.frag.got { color: #e0a83a; text-shadow: 0 0 6px rgba(224,168,58,0.5); }

/* ================= 地点场景 ================= */
#scene-place { background: #bfe0ea; padding: 0; overflow: hidden; touch-action: manipulation; }
.place-sky {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, #bfe6f2 0%, #dff0e0 60%);
    transition: background 2.5s ease;
}
#scene-place.day-dawn .place-sky { background: linear-gradient(180deg, #ffd9b0, #ffe9cf 60%); }
#scene-place.day-day .place-sky { background: linear-gradient(180deg, #bfe6f2, #e4f3df 60%); }
#scene-place.day-dusk .place-sky { background: linear-gradient(180deg, #ff9e6b, #ffd39b 65%); }
#scene-place.day-night .place-sky { background: linear-gradient(180deg, #243a6b, #4a5a80 65%); }
#scene-place.day-deep .place-sky { background: linear-gradient(180deg, #101836, #26304f 65%); }
#scene-place.wx-cloudy .place-sky { filter: saturate(0.6) brightness(0.9); }
#scene-place.wx-rain .place-sky { background: linear-gradient(180deg, #6b7d94, #93a1ac 65%); }

.place-stage { position: absolute; inset: 0; z-index: 2; }
.place-dog { position: absolute; bottom: 12%; left: 40%; transform: translateX(-50%); z-index: 8; }
.place-back {
    position: absolute; right: calc(14px + var(--sa-right)); left: auto; top: calc(14px + var(--sa-top)); z-index: 30;
    background: rgba(255,250,240,0.92); border: 2px solid #cbb48f; color: #6b4f3f;
    border-radius: 22px; padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.place-name {
    position: absolute; left: 50%; top: calc(14px + var(--sa-top)); transform: translateX(-50%);
    z-index: 30; color: #3f4a2c; font-size: 1.2rem; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.place-caption {
    position: absolute; left: 50%; bottom: calc(22px + var(--sa-bottom)); transform: translateX(-50%);
    z-index: 30; background: rgba(74,56,38,0.85); color: #fff3df;
    padding: 9px 20px; border-radius: 16px; font-size: 0.98rem; text-align: center;
    opacity: 0; transition: opacity 0.35s; pointer-events: none; max-width: 88vw; line-height: 1.5;
}
.place-caption.show { opacity: 1; }
.place-heart { position: absolute; bottom: 24%; font-size: 1.3rem; transform: translateX(-50%); animation: event-float 1.2s ease forwards; z-index: 9; }

/* 通用可点元素 */
.clickable { cursor: pointer; transition: transform 0.2s; }
.clickable:active { transform: scale(0.9); }
.shake { animation: gb-wobble 0.5s ease; }
.used { opacity: 0.4; filter: grayscale(1); pointer-events: none; }

/* ---------- 清水河 ---------- */
.river-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.river-svg .wave { animation: wave-flow 6s ease-in-out infinite; }
.river-svg .w2 { animation-duration: 8s; animation-direction: reverse; }
@keyframes wave-flow { 0%,100% { transform: translateX(0);} 50% { transform: translateX(-40px);} }
.river-reeds .map-reed, .river-reeds g { transform-origin: bottom center; animation: reed-sway 5.5s ease-in-out infinite; }
.river-tree { transform-origin: bottom center; animation: reed-sway 9s ease-in-out infinite; }
.river-leaf { position: absolute; left: -6%; font-size: 1.2rem; animation: leaf-float linear forwards; }
@keyframes leaf-float { from { transform: translateX(0) rotate(0);} to { transform: translateX(110%) rotate(200deg);} }
.river-butterfly { position: absolute; left: 40%; top: 30%; font-size: 1.5rem; z-index: 9; animation: bf-wander 4s ease-in-out forwards; }
@keyframes bf-wander { 0%{opacity:0;transform:translate(0,0);} 15%{opacity:1;} 50%{transform:translate(-80px,-40px);} 100%{opacity:0; transform:translate(60px,-70px);} }
.river-moon { position: absolute; right: 14%; top: 8%; font-size: 2.4rem; opacity: 0; transition: opacity 1.5s; filter: drop-shadow(0 0 14px rgba(255,246,200,0.6)); }
.river-moon.show { opacity: 1; }
#scene-place.hol-midautumn .river-moon { opacity: 1; font-size: 3rem; }
.river-tools { position: absolute; left: 50%; bottom: calc(70px + var(--sa-bottom)); transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
.rt { background: rgba(255,250,240,0.94); border: 2px solid #8fc7de; color: #3f6478; border-radius: 18px; padding: 9px 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.rt:active { transform: scale(0.94); }
.glimmer { position: absolute; left: 30%; top: 74%; width: 22px; height: 22px; border-radius: 50%; z-index: 9;
    background: radial-gradient(circle at 40% 35%, #fff6d0, #e8c377 60%, transparent 72%);
    animation: glimmer-pulse 2.4s ease-in-out infinite; }
@keyframes glimmer-pulse { 0%,100%{opacity:.4; transform: scale(.85);} 50%{opacity:1; transform: scale(1.15);} }
/* 河面雨滴涟漪 */
#scene-place.wx-rain .river-svg .wave { opacity: 1; animation-duration: 2s; }
#scene-place.wx-rain .place-stage::after { content:''; position:absolute; inset:52% 0 30% 0; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,0.25) 26px 27px); animation: rain-move 0.4s linear infinite; pointer-events:none; }

/* ---------- 公园 / 草地 / 城市（v2：道具全部 SVG 化） ---------- */
.park-ground, .meadow-ground, .city-ground, .woods-ground, .corner-ground, .hill-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; }
.park-ground { background: linear-gradient(180deg, #b7d894, #9cc077); }
/* 通用道具：left 由 JS 内联，bottom/width 由类控制 */
.prop { position: absolute; transform: translateX(-50%); filter: drop-shadow(0 3px 3px rgba(80, 60, 30, 0.18)); }
.prop svg { width: 100%; height: auto; display: block; overflow: visible; }
.prop.clickable { cursor: pointer; transition: transform 0.2s ease; }
.prop.clickable:active { transform: translateX(-50%) scale(0.92); }
.park-tree { bottom: 24%; width: 120px; }
.park-bench { bottom: 22%; width: 110px; }
.park-flower { bottom: 21%; width: 42px; }
.park-hidden { bottom: 22%; width: 40px; opacity: 0.75; }
.park-leaf { top: -34px; left: 62%; width: 30px; margin-left: -15px; position: absolute; animation: gb-floatupdown 2s ease-in-out infinite; }

.meadow-ground { background: linear-gradient(180deg, #cfe6a0, #a9cf7c); }
.meadow-grass { position:absolute; left:0; right:0; bottom:0; height:34%; background: repeating-linear-gradient(94deg, transparent 0 10px, rgba(120,160,80,0.35) 10px 12px); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.meadow-bush { bottom: 22%; width: 64px; }
.meadow-run { position:absolute; left:50%; bottom:calc(24px + var(--sa-bottom)); transform:translateX(-50%); z-index:20; border-color:#a9cf7c; color:#4a5a30; }
.grasshopper { position:absolute; bottom:30%; font-size:1.4rem; animation: hop 1.4s ease forwards; }
@keyframes hop { 0%{transform:translate(0,0);} 40%{transform:translate(30px,-40px);} 100%{transform:translate(70px,0); opacity:0;} }

.city-ground { background: linear-gradient(180deg, #c8c2d0, #a99fb5); }
.city-skyline { position:absolute; left:0; right:0; bottom:30%; height:40%; background:
    linear-gradient(0deg, #6b6478 0 30%, transparent 30%),
    repeating-linear-gradient(90deg, #7d758c 0 40px, #6b6478 40px 60px, #8a8299 60px 100px);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.city-lamp { bottom: 26%; width: 56px; }
/* 夜晚：路灯头点亮 */
#scene-place.day-night .city-lamp .lamp-head, #scene-place.day-deep .city-lamp .lamp-head { fill: #ffdf9e; filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.95)); }

.woods-ground { background: linear-gradient(180deg, #86a86a, #5f7f4c); }
.woods-light { position:absolute; inset:0; background: repeating-linear-gradient(105deg, rgba(255,240,180,0.16) 0 24px, transparent 24px 80px); pointer-events:none; }
.woods-mush { bottom: 22%; width: 46px; }
.corner-ground { background: linear-gradient(180deg, #cfe0a4, #b7cf8c); }
.river-band-mini { position:absolute; left:0; right:0; bottom:26%; height:16%; background:linear-gradient(180deg,#bfe6f2,#8fc7de); border-radius:40% 60% 0 0/30px; }
.corner-box { bottom: 24%; width: 56px; }
.hill-ground { background: linear-gradient(180deg, #a9cf7c 0%, #8fb868 60%); }
.hill-view { position:absolute; left:0; right:0; bottom:34%; height:30%; background: radial-gradient(ellipse at 50% 100%, rgba(255,220,150,0.4), transparent 70%); }
.hill-view.night { background: radial-gradient(ellipse at 50% 100%, rgba(120,150,220,0.35), transparent 70%); }
.hill-feather { bottom: 26%; width: 40px; animation: gb-floatupdown 2.4s ease-in-out infinite; }

/* ---------- 捡石头小游戏 ---------- */
.stone-field { position: relative; width: 100%; max-width: 360px; height: 300px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg,#cfe6f0 0 40%, #d8c48f 40%); }
.stone-bank { position:absolute; left:0; right:0; top:36%; height:8%; background: linear-gradient(180deg,#bfe6f2,#8fc7de); }
.stone { position:absolute; width:34px; height:24px; border:none; cursor:pointer; background:#b8b0a2; border-radius:50%/60% 60% 40% 40%; transform: rotate(var(--rot,0)); box-shadow: inset -3px -3px 0 rgba(0,0,0,0.12); transition: transform .15s; }
.stone:hover { transform: rotate(var(--rot,0)) scale(1.15); }
.stone.special { background: radial-gradient(circle at 40% 35%, #efe0ff, #c9a8e0); box-shadow: 0 0 10px rgba(200,160,240,0.8); }
.stone.egg { background: radial-gradient(circle at 40% 35%, #fff6d0, #ffd76b 60%, #ff9ecb); box-shadow: 0 0 16px rgba(255,215,107,0.95); animation: glimmer-pulse 1.2s ease-in-out infinite; }
.stone.sink { opacity: 0; transform: rotate(var(--rot,0)) translateY(14px) scale(.7); }

/* ---------- 追蝴蝶小游戏 ---------- */
.bf-field { position: relative; width: 100%; max-width: 360px; height: 300px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg,#cfe6a0,#a9cf7c); }
.bf-dog { position:absolute; bottom:8%; left:40%; width:74px; height:74px; transform:translateX(-50%); }
.bf-butterfly { position:absolute; font-size:1.8rem; cursor:pointer; transform:translate(-50%,-50%); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); transition: left .2s, top .2s; z-index:5; }
.bf-butterfly:active { transform: translate(-50%,-50%) scale(1.2); }

/* ---------- 减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
    .river-svg .wave, .river-reeds g, .river-tree, .map-foot, .river-leaf,
    #scene-map.wx-rain .map-amb::before, #scene-map.wx-snow .map-amb::before,
    .stone.egg, .glimmer { animation: none !important; }
}

/* ---------- 小屏 ---------- */
@media (max-width: 430px) {
    .signpost { width: 40px; height: 40px; } .sign-name { font-size: 0.75rem; }
    .map-title { font-size: 1.1rem; }
    .park-tree { width: 88px; } .park-bench { width: 84px; }
    .river-tools { flex-direction: column; align-items: center; gap: 6px; }
}