/* =====================================================================
   VibeJam 小镇 — street walk, interiors, finale
   ===================================================================== */
.chapters { max-width: calc(100vw - 170px); overflow-x: auto; scrollbar-width: none; padding: 2px 6px 6px 2px; }
.chapters::-webkit-scrollbar { display: none; }
.chapters a { flex: none; font-family: var(--zh); font-size: 15px; display: flex; gap: 6px; align-items: baseline; padding: 6px 14px 5px; border: 2px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: rgba(254, 249, 229, .9); box-shadow: 3px 3px 0 var(--ink); transition: transform .2s, background .2s; }
.chapters button { flex: none; }
.chapters a:hover { transform: translate(-1px, -1px) rotate(-1deg); background: #fff3c4; }
.chapters a.on { background: var(--brick); color: #fff6e3; }
.chapters a b { font-family: var(--hand); font-weight: 400; opacity: .6; }

/* ---------------- street ---------------- */
.street { position: relative; height: 600vh; }
.st-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; --dusk: 0; --g: 13vh; }
.st-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky1, #fdf6dc), var(--sky2, #fef9e5) 70%); }
.sun { position: absolute; left: var(--sunx, 70%); top: var(--suny, 14%); width: 13vmin; height: 13vmin; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle, #fff1b8 0 40%, rgba(255, 196, 90, .65) 58%, transparent 72%); filter: blur(.4px); }
.moon { position: absolute; right: 16%; top: 14%; width: 8vmin; height: 8vmin; border-radius: 50%; opacity: var(--night, 0);
  background: radial-gradient(circle at 35% 35%, #fffbe8, #f1e2b0 60%, #d9c58c); box-shadow: 0 0 6vmin rgba(255, 240, 190, .6); }
.stars { position: absolute; inset: 0 0 40%; opacity: var(--night, 0); }
.stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff8dc; animation: tw 2.6s ease-in-out infinite; }
@keyframes tw { 50% { opacity: .25; transform: scale(.6); } }
.st-layer { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.st-clouds i { position: absolute; display: block; border-radius: 50%; background: #fffdf3; opacity: .85; filter: url(#wob);
  box-shadow: 4vmin 1vmin 0 1vmin #fffdf3, -4vmin 1.5vmin 0 .5vmin #fffdf3; animation: drift 40s linear infinite alternate; mix-blend-mode: soft-light; }
@keyframes drift { to { translate: 6vw 0; } }
.st-hills { width: 300vw; }
.st-hills svg { position: absolute; left: 0; bottom: calc(var(--g) + 1vh); width: 100%; height: 30vh; }
.roofs { position: absolute; left: 0; bottom: calc(var(--g) + 5vh); width: 100%; height: 22vh; }
.roofs i { position: absolute; bottom: 0; background: #e2b48a; border: 2px solid rgba(58, 36, 23, .25); border-bottom: 0; opacity: .55; filter: url(#wob2); }
.roofs i::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: 100%; height: 40%; background: #b9644a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.roofs i::after { content: ""; position: absolute; left: 25%; top: 25%; width: 20%; height: 22%; background: rgba(255, 213, 120, var(--night, 0)); box-shadow: 1.6vw 0 0 rgba(255, 213, 120, var(--night, 0)); }

.st-ground { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--g) + 2vh); z-index: 2;
  background: linear-gradient(180deg, #d8c39b 0 6%, #e9dcbd 6% 52%, #cdb58b 52% 56%, #b79a6c 56%); border-top: 3px solid rgba(58, 36, 23, .55); }
.st-ground::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12vh, rgba(58, 36, 23, .18) 12vh calc(12vh + 2px)); height: 52%; top: 6%; }
.st-track { z-index: 3; }
.st-front { z-index: 6; pointer-events: none; }
.st-sticky::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: rgba(40, 30, 80, calc(var(--night, 0) * .28)); mix-blend-mode: multiply; }

/* buildings */
.bld { position: absolute; bottom: var(--g); height: var(--bh); width: calc(var(--bh) * 1800 / 1012); }
.bld > img { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 20%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 3%, #000 30%); mask-image: linear-gradient(90deg, transparent 2%, #000 20%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 3%, #000 30%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hot { position: absolute; display: block; }
.glow-dot { border-radius: 50%; mix-blend-mode: screen; opacity: calc(.35 + var(--night, 0) * .65); background: radial-gradient(circle, rgba(255, 220, 130, .95), rgba(255, 170, 70, .35) 45%, transparent 70%); animation: flicker 3s infinite; }
.twinkle { width: 1.2%; aspect-ratio: 1; background: #fff6c8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: tw2 1.8s ease-in-out infinite; }
@keyframes tw2 { 50% { transform: scale(.3) rotate(45deg); opacity: .4; } }
.wisp { width: 3%; height: 12%; }
.wisp i { position: absolute; bottom: 0; left: 30%; width: 60%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .8); filter: blur(5px); animation: rise 2.6s ease-in infinite; }
.wisp i:nth-child(2) { animation-delay: .9s; left: 0; } .wisp i:nth-child(3) { animation-delay: 1.7s; left: 50%; }
@keyframes rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-220%) scale(1.6) translateX(30%); opacity: 0; } }
.bld:hover .wisp i { animation-duration: 1.3s; }
.lant { transform-origin: 50% 0; animation: sway 3.4s ease-in-out infinite; }
.bld:hover .lant { animation-duration: 1.2s; }
@keyframes sway { 50% { rotate: 6deg; } }
.bulbs i { position: absolute; width: .8%; aspect-ratio: 1; border-radius: 50%; background: #ffe7a3; box-shadow: 0 0 1.2vmin rgba(255, 210, 110, .9); animation: flicker 2.2s infinite; }
.bulbs i:nth-child(2n) { animation-delay: -1.1s; }
.board-t { display: grid; place-items: center; font-family: var(--zh); color: #3a2417; font-size: calc(var(--bh) * .036); line-height: 1; text-align: center; transform-origin: 50% -30%; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.bld:hover .board-t { transform: rotate(-5deg); }
.mb-glow { border-radius: 4px; mix-blend-mode: screen; background: rgba(255, 210, 120, .0); transition: background .4s; }
.bld:hover .mb-glow { background: rgba(255, 210, 120, .35); }
.vglint { border-radius: 50%; background: conic-gradient(from var(--g, 0deg), transparent 0 80%, rgba(255, 250, 210, .8) 86%, transparent 92%); mix-blend-mode: screen; animation: glint 4s linear infinite; }
@keyframes glint { to { transform: rotate(360deg); } }

/* sign posts in front of each building */
.post-sign { position: absolute; bottom: var(--g); z-index: 5; width: clamp(150px, 15vw, 220px); }
.post-sign .pole { position: absolute; left: 50%; bottom: 0; width: 8px; height: calc(var(--bh) * .55); margin-left: -4px; background: #6b4320; border: 2px solid var(--ink); border-radius: 3px; }
.post-sign .card { position: absolute; left: 0; right: 0; bottom: calc(var(--bh) * .55 - 14px); padding: 12px 14px 12px; background: #fff6df; border: 2.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 4px 4px 0 var(--ink);
  transform-origin: 50% 0; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); rotate: -2deg; }
.post-sign:hover .card { transform: rotate(4deg); }
.post-sign .k { font-family: var(--hand); font-size: 13px; letter-spacing: .08em; opacity: .65; }
.post-sign b { display: block; font-weight: 400; font-size: clamp(20px, 1.9vw, 28px); color: var(--brick); line-height: 1.15; margin: 2px 0 4px; }
.post-sign p { font-size: 13px; line-height: 1.45; }
.post-sign .enter { margin-top: 8px; font-size: 14px; padding: 6px 12px 4px; box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
.lamp-post { position: absolute; bottom: var(--g); z-index: 4; width: 34px; height: calc(var(--bh) * .82); }
.lamp-post::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 100%; margin-left: -3.5px; background: #3a3a44; border-radius: 3px; }
.lamp-post i { position: absolute; left: 50%; top: -6px; width: 30px; height: 36px; margin-left: -15px; background: #3a3a44; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.lamp-post em { position: absolute; left: 50%; top: 0; width: 26vmin; height: 26vmin; translate: -50% -38%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 224, 140, .95) 0 5%, rgba(255, 190, 90, .45) 18%, transparent 60%); opacity: var(--night, 0); }
.tree-s { position: absolute; bottom: var(--g); z-index: 4; height: calc(var(--bh) * .7); }
.bush { position: absolute; bottom: -2vh; height: 15vh; }

/* guide */
.guide { position: absolute; z-index: 8; left: 16vw; bottom: calc(var(--g) - 3.5vh); width: calc(19vh * 120 / 190); height: 19vh; transition: transform .25s; }
.guide svg { width: 100%; height: 100%; overflow: visible; }
.guide.rev svg { transform: scaleX(-1); }
.guide .leg, .guide .arm { transform-box: fill-box; transform-origin: 50% 0; }
.guide.walk .leg.l, .guide.walk .arm.r { animation: stepA .5s ease-in-out infinite alternate; }
.guide.walk .leg.r, .guide.walk .arm.l { animation: stepB .5s ease-in-out infinite alternate; }
.guide.walk svg { animation: hop .25s ease-in-out infinite alternate; }
@keyframes stepA { from { rotate: -24deg; } to { rotate: 24deg; } }
@keyframes stepB { from { rotate: 24deg; } to { rotate: -24deg; } }
@keyframes hop { to { translate: 0 -3%; } }
.bubble { position: absolute; left: 70%; bottom: 96%; width: max-content; max-width: 260px; padding: 9px 14px 7px; font-size: 15px; line-height: 1.4; background: #fff; border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 3px 3px 0 var(--ink); transition: opacity .3s, transform .3s; }
.bubble::after { content: ""; position: absolute; left: 18px; top: 100%; border: 9px solid transparent; border-top-color: var(--ink); }
.bubble.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.st-cap { position: absolute; z-index: 9; right: 4vw; top: 92px; width: min(330px, 80vw); padding: 14px 18px 14px; background: rgba(254, 249, 229, .94); border: 2.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 5px 5px 0 var(--ink); rotate: 1deg; display: grid; gap: 4px; }
.st-cap b { font-size: 24px; font-weight: 400; color: var(--brick); }
.st-cap span { font-size: 14px; line-height: 1.5; }
.cap-k, .chap-k { font-family: var(--hand); font-size: 14px; letter-spacing: .1em; opacity: .7; }
.st-prog { height: 8px; margin-top: 6px; border: 2px solid var(--ink); border-radius: 9px; overflow: hidden; }
.st-prog i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(45deg, var(--brick) 0 6px, #e07a50 6px 12px); }

/* zoom-through overlay */
.zoomer { position: fixed; inset: 0; z-index: 35; pointer-events: none; visibility: hidden; }
.zoomer.on { visibility: visible; }
.zm-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-size: 100% 100%; will-change: transform, opacity; }

/* ---------------- interiors ---------------- */
.chap { position: relative; min-height: 100vh; min-height: 100svh; }
/* sections far from the viewport pause their css animations (set by town.js) */
.lazy-anim:not(.near) * { animation-play-state: paused !important; }
.bleed { position: relative; min-height: inherit; background: var(--cbg); }
.inner { position: relative; min-height: inherit; overflow: hidden; padding: 120px 5vw 90px;
  -webkit-mask-image: url(media/blot.svg); mask-image: url(media/blot.svg); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%; mask-size: 0% 0%; transition: -webkit-mask-size 1.6s cubic-bezier(.6, 0, .2, 1), mask-size 1.6s cubic-bezier(.6, 0, .2, 1); }
.chap.in .inner { -webkit-mask-size: 360% 360%; mask-size: 360% 360%; }
.chap.done .inner { -webkit-mask-image: none; mask-image: none; }
.chap-copy { position: relative; z-index: 5; max-width: 520px; display: grid; gap: 14px; justify-items: start; }
.chap-t { font-family: var(--zh); font-weight: 400; font-size: clamp(42px, 5.6vw, 88px); line-height: 1.02; color: #fff6e0; -webkit-text-stroke: clamp(2px, .25vw, 4px) var(--ink); paint-order: stroke fill; text-shadow: .05em .05em 0 var(--brick); }
.chap-t small { display: block; font-size: .42em; margin-top: .3em; -webkit-text-stroke: 1.5px var(--ink); text-shadow: none; color: var(--ink); }
.chap-copy p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.chap-copy p b { color: var(--brick); }
.chap .btn { display: inline-block; }

/* 05 observatory */
.obs { --cbg: radial-gradient(120% 90% at 70% 10%, #3a3f78, #1d2244 55%, #121530); color: #f4ecd6; }
.obs .chap-copy p { color: #e8deff; }
.obs .chap-t { text-shadow: .05em .05em 0 #6a5acd; }
.obs .chap-k { color: #ffd98a; opacity: .9; }
.obs-dome { position: absolute; left: -10%; right: -10%; top: -60vh; height: 140vh; border-radius: 50%; border: 3px solid rgba(255, 233, 190, .25);
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 14deg, rgba(255, 233, 190, .07) 14deg 14.6deg); }
.obs-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff7d6; animation: tw 3s ease-in-out infinite; }
.constel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.constel path { fill: none; stroke: #ffe6a8; stroke-width: 1.6; stroke-dasharray: 6 7; stroke-linecap: round; opacity: .7; }
.constel .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 2.4s ease .6s; }
.obs.in .constel .draw { stroke-dashoffset: 0; }
.ideas { position: absolute; inset: 0; z-index: 3; }
.idea { position: absolute; translate: -50% -50%; }
.idea .star { display: block; width: 26px; height: 26px; margin: 0 auto; background: #ffe08a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 8px #ffd56a); animation: tw2 2.6s ease-in-out infinite; transition: transform .4s; cursor: pointer; }
.idea .card { position: absolute; left: 50%; top: 34px; translate: -50% 0; width: 220px; padding: 10px 14px 10px; background: #fff6df; color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 4px 4px 0 #0c0e22; font-size: 13.5px; line-height: 1.45; opacity: 0; transform: translateY(-8px) scale(.9); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.idea .name { display: block; margin-top: 6px; font-size: 15px; color: #ffe6a8; text-align: center; white-space: nowrap; text-shadow: 0 2px 8px #0c0e22; }
.idea:hover .card, .idea.peek .card { opacity: 1; transform: none; }
.idea:hover .star { transform: scale(1.6) rotate(20deg); animation: none; }
.idea .card b { color: var(--brick); font-weight: 400; font-size: 16px; }
.need { display: inline-block; margin-top: 6px; padding: 2px 8px; background: #ffcf3a; border: 2px solid var(--ink); border-radius: 99px; font-size: 12px; }
.scope { position: absolute; z-index: 4; right: 3vw; bottom: 0; width: clamp(240px, 30vw, 420px); }
.scope .tube { transform-box: fill-box; transform-origin: 30% 80%; transition: transform .3s; }

/* 06 hawker stall */
.stall { --cbg: linear-gradient(180deg, #2f1e3a 0 24%, #f2c98e 24%, #f6d7a4); }
.stall .inner { padding-top: 150px; }
.lanterns { position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 2; }
.lanterns svg.wire { position: absolute; left: 0; top: 30px; width: 100%; height: 80px; }
.lantern { position: absolute; top: 0; width: 46px; transform-origin: 50% 0; animation: sway 3s ease-in-out infinite; cursor: pointer; }
.lantern i { display: block; margin: 0 auto; width: 2px; background: var(--ink); }
.lantern b { display: block; width: 46px; height: 54px; border-radius: 45%; background: radial-gradient(circle at 40% 35%, #ff8a6a, #d8322a 60%, #9e1f1a); border: 2.5px solid var(--ink); box-shadow: 0 0 26px rgba(255, 120, 60, .7); }
.lantern:hover { animation-duration: .6s; }
.stall .chap-copy { color: var(--ink); }
.stall .chap-k { color: #ffd98a; }
.pot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pot-tag { padding: 6px 12px 4px; background: #fff6df; border: 2px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; font-size: 15px; box-shadow: 3px 3px 0 var(--ink); }
.pot-tag b { color: var(--brick); font-weight: 400; }
.menu-board { position: absolute; z-index: 4; right: 5vw; top: 140px; width: min(400px, 40vw); padding: 20px 24px 18px; background: #24382c; color: #f6f1e0; border: 10px solid #7a4a24; border-radius: 10px; box-shadow: 6px 8px 0 rgba(58, 36, 23, .5); rotate: 1.5deg; font-family: var(--hand); }
.menu-board h3 { font-family: var(--zh); font-weight: 400; font-size: 24px; text-align: center; margin-bottom: 10px; color: #ffe08a; }
.menu-board ol { list-style: none; display: grid; gap: 8px; counter-reset: m; }
.menu-board li { display: flex; justify-content: space-between; gap: 10px; font-size: 18px; border-bottom: 1.5px dashed rgba(246, 241, 224, .3); padding-bottom: 6px; counter-increment: m; }
.menu-board li::before { content: counter(m) "."; opacity: .6; margin-right: 6px; }
.menu-board li span:first-of-type { flex: 1; font-family: var(--zh); font-size: 16px; }
.menu-board li em { font-style: normal; color: #ff9db5; transition: transform .3s; }
.menu-board li.bump em { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.6); } }
.chalk { display: block; margin-top: 10px; text-align: center; opacity: .7; }
.tables { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 3vw 3.4vw; margin-top: 60px; max-width: min(62vw, 640px); }
.tables .plate { position: relative; width: clamp(110px, 11vw, 170px); height: auto; aspect-ratio: 1; animation: none; border-radius: 50%; padding: 9%; background: radial-gradient(circle, #fffdf6 62%, #e8e0cc 64%, #fffdf6 72%); border: 3px solid var(--ink); box-shadow: 0 10px 0 rgba(58, 36, 23, .25); cursor: pointer; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.tables .plate img { position: absolute; inset: 11%; width: 78%; height: 78%; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.tables .plate:hover { transform: translateY(-14px) rotate(-6deg); }
.tables .plate .pn { position: absolute; left: 50%; top: 100%; translate: -50% 10px; white-space: nowrap; font-size: 14px; }
.tables .plate .heart { position: absolute; left: 50%; top: 10%; font-size: 26px; color: #e83a5a; pointer-events: none; animation: floatup 1s ease-out forwards; }
@keyframes floatup { to { transform: translate(-50%, -120px) scale(1.6); opacity: 0; } }
.tables .plate .steam { position: absolute; left: 20%; right: 20%; bottom: 80%; height: 70%; pointer-events: none; }
.steam i { position: absolute; bottom: 0; width: 30%; height: 40%; border-radius: 50%; background: rgba(255, 255, 255, .85); filter: blur(6px); animation: rise 2.8s ease-in infinite; }
.steam i:nth-child(2) { left: 35%; animation-delay: .9s; } .steam i:nth-child(3) { left: 70%; animation-delay: 1.8s; }
.tables .plate:hover .steam i { animation-duration: 1.2s; }
.counter { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 90px; background: repeating-linear-gradient(90deg, #8fbf8a 0 40px, #7aaa76 40px 42px); border-top: 4px solid var(--ink); }
.wok { position: absolute; bottom: 60px; width: 110px; height: 40px; border-radius: 0 0 60px 60px; background: #3a3a44; border: 3px solid var(--ink); }
.wok.w1 { right: 22%; } .wok.w2 { right: 8%; }
.counter .steam { position: absolute; bottom: 100px; width: 110px; height: 120px; }
.counter .steam.s1 { right: 22%; } .counter .steam.s2 { right: 8%; }

/* 07 post office */
.post { --cbg: linear-gradient(180deg, #f3ead6, #e9dcc0); }
.post .chap-copy { max-width: min(520px, 56vw); }
.vault-wrap { position: absolute; z-index: 3; right: 7vw; top: 120px; width: clamp(240px, 28vw, 400px); aspect-ratio: 1; perspective: 1200px; }
.vault-in { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, #4a3420, #241608); border: 4px solid var(--ink); display: grid; place-content: center; text-align: center; color: #ffe08a; overflow: hidden; }
.vault-in span { font-size: 16px; opacity: .8; }
.vault-in b { font-family: var(--hand); font-weight: 400; font-size: clamp(30px, 3.4vw, 50px); }
.coin { position: absolute; width: 18%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #e2b13a 60%, #a8781e); border: 2px solid var(--ink); bottom: 12%; }
.coin.c1 { left: 22%; } .coin.c2 { left: 40%; bottom: 18%; } .coin.c3 { left: 58%; }
.vault { position: absolute; inset: 0; transform-origin: 2% 50%; transform: rotateY(calc(var(--open, 0) * -105deg)); filter: drop-shadow(8px 10px 0 rgba(58, 36, 23, .35)); }
.vault svg { width: 100%; height: 100%; }
.vault .spokes { transform-box: view-box; transform-origin: 150px 150px; transform: rotate(calc(var(--spin, 0) * 1turn)); }
.board { position: relative; z-index: 4; margin-top: 70px; height: 300px; }
.board .string { position: absolute; left: 0; top: 0; width: 100%; height: 200px; }
.post.in #string-path { transition: stroke-dashoffset 2s ease .4s; stroke-dashoffset: 0; }
.env { position: absolute; width: clamp(160px, 19vw, 250px); padding: 30px 16px 14px; background: #fffaf0; border: 2.5px solid var(--ink); box-shadow: 4px 5px 0 rgba(58, 36, 23, .35); font-size: 14px; line-height: 1.45; transform-origin: 50% 0;
  background-image: linear-gradient(150deg, transparent 49.5%, rgba(58, 36, 23, .35) 50%, transparent 50.5%), linear-gradient(210deg, transparent 49.5%, rgba(58, 36, 23, .35) 50%, transparent 50.5%); background-size: 100% 26px; background-repeat: no-repeat; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.env:hover { transform: rotate(-4deg) translateY(-6px); }
.env::before { content: ""; position: absolute; left: 50%; top: -10px; width: 14px; height: 22px; margin-left: -7px; background: #c9a36b; border: 2px solid var(--ink); border-radius: 3px; }
.env b { display: block; font-weight: 400; font-size: 19px; color: var(--brick); }
.env .stp { position: absolute; right: 10px; top: 6px; font-family: var(--hand); font-size: 14px; opacity: .5; }
.env .pm { position: absolute; right: -14px; bottom: -14px; padding: 6px 8px; border: 3px double #c4603b; color: #c4603b; border-radius: 50%; font-style: normal; font-size: 13px; rotate: -16deg; background: rgba(255, 250, 240, .7); opacity: 0; transform: scale(2.4); }
.post.in .env .pm { animation: thump .45s cubic-bezier(.5, 0, .4, 1.4) forwards; }
.post.in .e1 .pm { animation-delay: 1.2s; } .post.in .e2 .pm { animation-delay: 1.7s; } .post.in .e3 .pm { animation-delay: 2.2s; } .post.in .e4 .pm { animation-delay: 2.7s; }
@keyframes thump { to { opacity: 1; transform: scale(1); } }
.e1 { left: 0; top: 60px; rotate: -4deg; } .e2 { left: 25%; top: 100px; rotate: 3deg; } .e3 { left: 50%; top: 50px; rotate: -2deg; } .e4 { left: 75%; top: 80px; rotate: 4deg; }
.letters { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.plane { position: absolute; left: -60px; width: 46px; animation: fly 7s linear forwards; }
@keyframes fly { to { transform: translate(115vw, -18vh) rotate(-8deg); } }

/* 08 clubhouse */
.club { --cbg: repeating-linear-gradient(90deg, #d9b98a 0 70px, #cfab78 70px 72px); }
.club .inner { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 4vw; align-items: center; }
.club-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.club-cta .left b { color: var(--brick); font-weight: 400; font-size: 22px; }
.boxes { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, .7vw, 10px); padding: 18px; background: #6b4320; border: 4px solid var(--ink); border-radius: 10px; box-shadow: 8px 10px 0 rgba(58, 36, 23, .35); }
.mbox { position: relative; aspect-ratio: .82; perspective: 400px; cursor: pointer; }
.mbox .mb-in { position: absolute; inset: 0; border-radius: 4px; background: #2b1a10; display: grid; place-items: center; font-size: clamp(10px, 1vw, 15px); }
.mbox .lid { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 4px; background: var(--c); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); backface-visibility: hidden; }
.mbox .lid span { padding: 1px 3px; background: #fff6df; border: 1.5px solid var(--ink); border-radius: 3px; font-family: var(--hand); font-size: clamp(9px, .85vw, 13px); line-height: 1.1; }
.mbox:hover .lid, .mbox.open .lid { transform: rotateY(-115deg); }
.mbox.t .flag { position: absolute; right: 3px; top: 6%; width: 5px; height: 46%; background: var(--ink); transform-origin: 50% 100%; z-index: 2; }
.mbox.t .flag::after { content: ""; position: absolute; right: 4px; top: 0; width: 12px; height: 9px; background: #d8322a; border: 1.5px solid var(--ink); }
.mbox.y .lid { box-shadow: 0 0 0 3px #ffcf3a, 0 0 18px #ffcf3a; animation: you 1.6s ease-in-out infinite; }
@keyframes you { 50% { box-shadow: 0 0 0 3px #ffcf3a, 0 0 32px #ffcf3a; } }
.mbox.t:hover .lid { transform: rotateY(-40deg); }

/* 09 finale */
.finale { position: relative; min-height: 100svh; overflow: hidden; display: grid; place-items: center; background: linear-gradient(180deg, #151a3a, #2d2858 60%, #4a3a63); color: #fff6df; }
.fn-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff6d6; animation: tw 3s ease-in-out infinite; }
.fn-moon { position: absolute; right: 14%; top: 12%; width: 13vmin; height: 13vmin; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f1e2b0 60%, #d9c58c); box-shadow: 0 0 10vmin rgba(255, 240, 190, .55); }
.fn-town { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; display: flex; align-items: flex-end; gap: 0; }
.fn-town .h { position: relative; flex: 1; background: #1c1838; border-top: 3px solid #0e0b22; }
.fn-town .h::before { content: ""; position: absolute; left: -6%; right: -6%; bottom: 100%; height: 34%; background: #1c1838; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fn-town .w { position: absolute; width: 14%; height: 12%; background: #ffd27a; box-shadow: 0 0 14px rgba(255, 200, 100, .8); animation: lit 6s ease-in-out infinite; }
@keyframes lit { 0%, 70%, 100% { opacity: 1; } 75%, 95% { opacity: .25; } }
.flies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff3a1; box-shadow: 0 0 10px 3px rgba(255, 236, 140, .7); animation: firefly 7s ease-in-out infinite alternate; }
@keyframes firefly { 33% { transform: translate(40px, -30px); opacity: .3; } 66% { transform: translate(-30px, -60px); opacity: 1; } 100% { transform: translate(20px, -10px); opacity: .5; } }
.fn-copy { position: relative; z-index: 3; text-align: center; display: grid; justify-items: center; gap: 22px; padding: 0 5vw 22vh; }
.fn-copy .chap-k { color: #ffd98a; opacity: .9; }
.fn-copy h2 { font-family: var(--zh); font-weight: 400; font-size: clamp(40px, 6vw, 92px); line-height: 1.05; -webkit-text-stroke: clamp(2px, .2vw, 3px) #0e0b22; paint-order: stroke fill; text-shadow: .05em .05em 0 #6a5acd; }
.fn-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* claim dialog */
.claim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(58, 36, 23, .45); visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.claim.open { visibility: visible; opacity: 1; }
.claim-card { position: relative; width: min(420px, 100%); padding: 30px 26px 24px; background: #fff6df; border: 3px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; box-shadow: 8px 8px 0 var(--ink); text-align: center; display: grid; gap: 10px; transform: scale(.8) rotate(-3deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); overflow: hidden; }
.claim.open .claim-card { transform: none; }
.claim-box { justify-self: center; display: grid; padding: 14px 28px; background: #c4603b; color: #fff6df; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 0 0 0 6px #ffcf3a; }
.claim-box b { font-family: var(--hand); font-weight: 400; font-size: 48px; line-height: 1; }
.claim h3 { font-weight: 400; font-size: 24px; color: var(--brick); }
#claim-f { display: grid; gap: 10px; margin-top: 6px; }
#claim-f input { font: inherit; font-size: 16px; padding: 12px 16px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; }
.claim-x { position: absolute; right: 8px; top: 6px; width: 44px; height: 44px; font-size: 20px; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 14px; animation: fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(520px) rotate(720deg); opacity: 0; } }

/* ---------------- mobile ---------------- */
@media (max-width: 760px) {
  .chapters { max-width: none; flex: 1; min-width: 0; }
  .chapters a { font-size: 12px; padding: 5px 8px 4px; }
  .chapters a b { display: none; }
  .st-cap { right: 12px; left: 12px; width: auto; top: 70px; padding: 10px 14px; }
  .st-cap span:not(.cap-k) { display: none; }
  .st-cap b { font-size: 19px; }
  .guide { left: 8vw; height: 15vh; width: calc(15vh * 120 / 190); }
  .bubble { font-size: 13px; max-width: 200px; left: 60%; }
  .post-sign { width: 150px; }
  .post-sign p { display: none; }
  .inner { padding: 100px 20px 70px; }
  .scope { width: 50vw; opacity: .9; }
  .ideas { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 10px; margin: 30px 0 40vw; }
  .idea { position: relative; left: auto !important; top: auto !important; translate: none; }
  .idea .card { position: relative; left: auto; top: auto; translate: none; width: auto; margin-top: 8px; opacity: 1; transform: none; font-size: 12.5px; }
  .idea .name { display: none; }
  .constel { display: none; }
  .obs .inner { display: flex; flex-direction: column; }
  .obs .chap-copy { order: -1; }
  .idea .card { white-space: normal; }
  .stall { --cbg: linear-gradient(180deg, #2f1e3a 0 200px, #f2c98e 200px, #f6d7a4); }
  .stall .inner { padding-top: 230px; }
  .stall .chap-k { color: var(--brick); }
  .menu-board { position: relative; right: auto; top: auto; width: auto; margin-top: 30px; }
  .tables { max-width: none; justify-content: center; gap: 30px 20px; margin-bottom: 110px; }
  .tables .plate { width: 120px; }
  .post .chap-copy { max-width: none; }
  .vault-wrap { position: relative; right: auto; top: auto; width: 70vw; margin: 30px auto 0; }
  .board { height: auto; display: grid; gap: 22px; margin-top: 40px; }
  .board .string { display: none; }
  .env { position: relative; left: auto !important; top: auto !important; width: auto; }
  .club .inner { grid-template-columns: 1fr; }
  .boxes { padding: 10px; gap: 4px; }
  .mbox .lid span { font-size: 9px; padding: 0 2px; }
  .fn-town { height: 30vh; }
  .chapters a { min-height: 44px; align-items: center; }
  .post-sign .enter { min-height: 44px; }
  .tables .plate .pn { font-size: 13px; }
  .boxes { padding: 8px; }
  .mbox.t .flag { right: 2px; width: 3px; }
  .mbox.t .flag::after { width: 8px; height: 6px; right: 3px; }
  .fn-copy { padding-bottom: calc(22vh + env(safe-area-inset-bottom)); }
  .foot { padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
}
/* portrait phones/tablets: taller ground + bigger buildings so the sky doesn't swallow the screen;
   the guide's bubble floats in the sky above the rooftops instead of over the paintings */
@media (max-width: 1100px) and (orientation: portrait) {
  .st-sticky { --g: 19vh; }
  .guide { left: 6vw; }
  .bubble { left: 0; bottom: calc(var(--bh) + 4.5vh); max-width: calc(88vw - 12px); width: max-content; }
  .bubble::after { display: none; }
  .post-sign { width: 140px; }
}
/* short landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
  .st-cap { display: none; }
  .guide { height: 22vh; width: calc(22vh * 120 / 190); }
  .bubble { left: 0; bottom: calc(var(--bh) + 9vh); font-size: 13px; max-width: 70vw; }
  .bubble::after { display: none; }
  .post-sign { width: 160px; }
  .post-sign p { display: none; }
  .inner { padding-top: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .inner { -webkit-mask-image: none; mask-image: none; }
}
@media (pointer: coarse) {
  .back, .chapters button, .chapters a { min-height: 44px; display: flex; align-items: center; }
  .back { gap: .3em; }
}