/* ================= 第四幕 地图 ================= */
.act4 { background: #ecdfc2; }
.a4-view { position: absolute; inset: 0; overflow: hidden; }
.a4-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.a4-map { position: absolute; left: 0; top: 0; display: block; font-family: var(--hand); }
.a4-map text { font-family: var(--hand); }
.a4-night { position: absolute; inset: 0; z-index: 21; pointer-events: none; opacity: 0; transition: opacity 3.5s ease; background: radial-gradient(circle at 330px 100px, rgba(38,50,74,0) 0, rgba(38,50,74,0) 110px, rgba(30,40,70,.66) 360px); mix-blend-mode: multiply; }
.a4-night.on { opacity: 1; }
.a4-hits { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.a4-hit { position: absolute; width: 68px; height: 68px; margin: -34px; border-radius: 50%; border: 0; background: transparent; padding: 0; pointer-events: auto; touch-action: none; }
.a4-hit.explore::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: rgba(255,247,232,.95); box-shadow: 0 0 0 2px rgba(74,44,23,.6); }
.a4-hit.explore::after, .a4-hit.free::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2.5px solid #fff7e8; box-shadow: 0 0 0 1px rgba(74,44,23,.3); animation: ring 1.7s ease-out infinite; }
.a4-hit.free.seen::after { display: none; }
.a4-hit.record { width: 60px; height: 60px; margin: -30px; animation: recIn .5s cubic-bezier(.3,1.6,.5,1) both, recBob 2s 0.5s ease-in-out infinite; filter: drop-shadow(0 4px 5px rgba(40,20,5,.35)); }
.a4-hit.record svg { width: 46px; height: 46px; margin: 7px; display: block; }
.a4-hit.record.seen { animation: none; opacity: .92; }
@keyframes recIn { from { transform: scale(0) translateY(30px); } to { transform: none; } }
@keyframes recBob { 50% { transform: translateY(-6px); } }
.a4-dots { position: absolute; left: 12px; top: calc(60px + var(--safe-t)); display: flex; gap: 6px; z-index: 5; }
.a4-dots button { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px 0 7px; border-radius: 999px; border: 1.5px dashed rgba(74,44,23,.4); background: rgba(251,243,226,.7); font-size: 12px; color: var(--ink2); }
.a4-dots button i { width: 9px; height: 9px; border-radius: 50%; background: rgba(74,44,23,.25); }
.a4-dots button span { display: none; }
.a4-dots button.seen { border-style: solid; border-color: rgba(74,44,23,.6); background: var(--paper); min-height: 34px; }
.a4-dots button.seen i { background: var(--red); }
.a4-dots button.seen span { display: inline; }
.a4-dots { flex-wrap: wrap; right: 12px; }

.a4-b .door, .a4-b .lampwin, .a4-b .shopwin, .a4-b .doorwin, .a4-b .bulb { transition: transform .7s cubic-bezier(.4,0,.2,1), fill .5s; transform-box: fill-box; transform-origin: 0 50%; }
.a4-b .lampglow, .a4-b .doorin, .a4-b .steam, .a4-b .board-a, .a4-b .board-b, .a4-b .shopglow, .a4-b .shopwinin { transition: opacity .7s; }
.lib.done .lampwin { fill: #ffe6a3; } .lib.done .lampglow { opacity: .9; } .lib.done .lampshade { fill: #f29a3f; }
.noodle.done .door, .shop.open .door { transform: scaleX(.16) skewY(-10deg); }
.noodle.done .doorin, .shop.open .doorin { opacity: 1; }
.noodle.done .steam { opacity: .85; animation: steam 2.4s ease-in-out infinite; }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .85; } 100% { transform: translateY(-10px); opacity: 0; } }
.river.done .leafin { animation: leafFly 1.1s cubic-bezier(.3,0,.6,1) forwards; }
.river.done.nofx .leafin { animation-duration: 1ms; }
@keyframes leafFly { 30% { transform: translate(16px,-18px) rotate(30deg); } to { transform: translate(90px,-60px) rotate(140deg); opacity: 0; } }
.river.lampon .lampglow { opacity: .95; } .river.lampon .bulb { fill: #ffe6a3; }
.station.done .board-a { opacity: 0; } .station.done .board-b { opacity: 1; }
.shop.lit .shopglow { opacity: .85; } .shop.lit .shopwin, .shop.lit .doorwin { fill: #ffe2a0; } .shop.lit .shopwinin { opacity: 1; }
.shop.lit .bulbs circle { animation: twinkle 1.4s ease-in-out infinite; }
.shop.lit .bulbs circle:nth-child(2n) { animation-delay: .7s; }
@keyframes twinkle { 50% { opacity: .45; } }

/* 地点内容 */
.a4-where { display: inline-block; font-size: 12.5px; line-height: 1.4; padding: 2px 9px; background: var(--green); color: var(--paper); border-radius: 2px; letter-spacing: .08em; margin-bottom: 8px; }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.bubble { align-self: flex-start; max-width: 84%; display: flex; flex-direction: column; }
.bubble i { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--ink2); margin: 0 4px 2px; }
.bubble span { background: #fff; border: 1.5px solid rgba(74,44,23,.4); border-radius: 4px 14px 14px 14px; padding: 6px 12px; font-size: 16px; line-height: 1.6; }
.bubble.me { align-self: flex-end; align-items: flex-end; }
.bubble.me span { background: #ffe9a8; border-radius: 14px 4px 14px 14px; }