/* 路線圖：攤開的山水卷軸，節點是刻字石頭 */
:root { --stone: #d9d2c2; --stone-edge: #a99f8c; --battle: #e7c3a0; --seal: #b9d3c6; --date: #efc2cf; --rest: #d3d6c3; --market: #e9d48f; --boss: #b8352a; }
/* 捲動交給 html（body 也設 overflow 的話 body 會自己變成捲動容器，標題列的 sticky 就黏不住） */
html:has(body.map-page) { height: auto; overflow: auto; }
html, body.map-page { background: #f1ead9; touch-action: manipulation; }
body.map-page { height: auto; overflow: visible; }
body.map-page { padding-bottom: max(16px, env(safe-area-inset-bottom)); }

#mapTop { position: sticky; top: 0; z-index: 5; background: #f1ead9; border-bottom: 1px solid rgba(43, 38, 32, 0.15);
  padding: max(12px, env(safe-area-inset-top)) 16px 10px; display: grid; gap: 4px; }
.mt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mt-title { font-size: 18px; letter-spacing: 1px; }
.mt-title b { color: #b8352a; }
.mt-stats { display: flex; gap: 10px; font-size: 15px; }
#mHearts { color: #c0396b; letter-spacing: 1px; }
#mHearts i { font-style: normal; color: #cfc6b4; }
#mFavor { color: #c0396b; }
#mapTip { font-size: 14px; color: #8a6d3b; }

#mapWrap { max-width: 480px; margin: 0 auto; padding: 6px 12px 0; }
#map { display: block; width: 100%; height: auto; }
#map text { font-family: var(--kai); pointer-events: none; }

/* 節點 */
.node { cursor: default; transition: opacity 0.3s; }
.node.avail { cursor: pointer; }
.node.dim { opacity: 0.38; }
/* 關卡號：石頭下面的小字 */
#map .lv-no { font-size: 11px; fill: #8a7f6c; font-family: var(--kai); }
#btnTea b { color: #b8352a; }
.node .face { transition: fill 0.4s; }
.node.avail .ring { animation: ring 1.2s ease-in-out infinite; }
@keyframes ring { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.node.flip { animation: flip 0.45s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes flip { 0% { transform: scaleX(1); } 50% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.node:focus { outline: none; }
.node:focus-visible .ring { opacity: 1; stroke-width: 3; }
.start-node.avail .face { fill: #f6efdc; }

#marker { transition: transform 0.55s cubic-bezier(.3, .8, .3, 1.15); }

#mapLegend { max-width: 480px; margin: 8px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: #6b6170; }
#mapLegend .lg { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; margin-right: 4px;
  font-family: var(--kai); color: #3a3330; box-shadow: 0 2px 0 #a99f8c; }
.lg.battle { background: var(--battle); } .lg.seal { background: var(--seal); } .lg.boss { background: var(--boss); color: #fff8ec; }
#btnNewRun { margin-left: auto; font-size: 13px; padding: 4px 10px; }

/* 約會：真實世界的「照片」框（不是掛軸） */
.photo { position: relative; background: #fff; padding: 10px 10px 34px; border-radius: 4px; box-shadow: 0 8px 22px rgba(40, 30, 20, 0.25); transform: rotate(-1.5deg); }
.photo .shot { position: relative; height: 280px; overflow: hidden; background: #333; }
.photo .shot video, .photo .shot .still-box { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.12s; }
.photo .shot video.on, .photo .shot .still-box.on { opacity: 1; }
.photo .cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 14px; color: #6b6170; }
.choice { display: grid; gap: 8px; margin-top: 10px; }
.choice button { text-align: left; padding: 10px 14px; }
/* 約會浮層裡的台詞：game.css 的 #say 是給掛軸卡片用的（absolute），這裡改回一般排版 */
#mapSheet #say { position: static; margin-top: 14px; }

/* 標題列的按鈕：包袱・圖鑑、求籤 */
.mt-btns { justify-content: flex-start; gap: 8px; }
.mt-btns button { font-size: 13px; padding: 3px 12px; }
#btnLot b { color: #b8352a; }
#mapTop #purse { padding: 0 2px; background: none; }
/* 地圖頁的小香掛軸：右上角跳出來 */
body.map-page #cheer { left: auto; right: 10px; top: 96px; position: fixed; width: min(130px, 34vw); }
/* 打過的節點：右下角小印章（甲乙丙） */
.node .mini-seal rect { fill: #b8352a; }
.node .mini-seal text { fill: #fff6ea; font-size: 11px; }
/* 約會：送禮物 */
.gift-pick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 4px; }
.gift-pick button { display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 4px; width: 70px; border-radius: 10px; }
.gift-pick button:hover { background: #efe7d2; }
.gift-pick .gn { font-size: 13px; }
.gift-pick .gp { font-size: 11px; color: #8a6d3b; }
.gift-pick .gp.love { color: #c0396b; font-weight: 700; }
.fav-sum { margin-top: 8px; padding: 8px 10px; background: #fbeef0; border-radius: 10px; font-size: 14px; line-height: 1.6; }
.fav-sum b { color: #c0396b; font-size: 17px; }
.cg-unlock { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(135deg, #f7dbe2, #f9ecd2); font-size: 14px; animation: fadeIn 0.4s; }
/* 市集 */
.mk-purse { font-size: 14px; color: #8a5a10; display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.mk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mk-item { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 8px; border-radius: 12px; background: #f6efdd; }
.mk-item:hover { background: #ece3cb; }
.mk-item b { font-size: 15px; margin-top: 4px; }
.mk-r { font-size: 11px; font-weight: 700; }
.mk-desc { font-size: 11px; color: #6b6170; line-height: 1.3; min-height: 2.6em; text-align: center; }
.mk-price { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; color: #8a5a10; font-weight: 700; }
.mk-price.poor { color: #b8352a; }
.mk-item.sold { opacity: 0.45; }
/* 第一次玩：開場前的標題（點一下才准出聲） */
.tap-start { position: fixed; inset: 0; z-index: 31; display: grid; place-items: center; background: #f1ead9; text-align: center; cursor: pointer; }
.tap-start h1 { font-family: var(--kai); font-size: 46px; letter-spacing: 10px; margin: 0; }
.tap-start p { color: #8a6d3b; margin: 6px 0 22px; letter-spacing: 3px; }
.tap-start small { display: block; margin-top: 26px; font-size: 11px; color: #a39a88; }