/* Two hand-built pixel towns. All scenery is local HTML/CSS; no image download. */
html { background: #071c2c; }
body.city-page { margin: 0; min-width: 0; font-family: NotoSansJP, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.city-page *, .city-page *::before, .city-page *::after { box-sizing: border-box; }
.city-page { --ink: #283e3d; --paper: #f8f3e5; --muted: #5e695c; --highlight: #a75136; }
.city--work { --ink: #293e4b; --paper: #fff3dc; --muted: #656153; --highlight: #9f4938; }
.city-main { padding: 48px 24px 64px; background: #eff0e5; color: var(--ink); }
.city--work .city-main { color: #fff3dc; background: radial-gradient(ellipse at 85% 10%, #4e5156, transparent 65%), #253f49; }
.city-inner { width: min(100%, 1180px); margin-inline: auto; }
.city-intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 30px; }
.city-intro__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .13em; color: #59745b; }
.city--work .city-intro__eyebrow { color: #f1be91; }
.city-intro h1 { margin: 0; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.35; letter-spacing: .04em; }
.city-intro__lead { max-width: 485px; margin: 0; font-size: 14px; line-height: 1.95; }
.city-intro__lead strong { font-weight: 500; }
.town-game { border: 2px solid var(--ink); padding: 7px; background: var(--paper); box-shadow: 0 8px 0 #172e3426, 0 20px 60px #152f3020; }
.town-heading { min-height: 94px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 25px 20px; color: var(--ink); }
.town-map__location { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.town-map__location small { font-size: 11px; font-weight: 500; letter-spacing: .13em; }
.town-map__location strong { font-size: clamp(22px, 2.3vw, 28px); line-height: 1.4; letter-spacing: .08em; }
.town-heading__stamp { border-left: 1px solid #9a9c85; padding: 10px 0 10px 20px; font-size: 12px; white-space: nowrap; }
.town-map { position: relative; isolation: isolate; overflow: hidden; height: 750px; background: #acc69a; border: 1px solid #344c4940; }
.city--work .town-map { height: 700px; background: #b4b7a2; }
.town-map::after { content: ""; position: absolute; z-index: 15; inset: 6px; border: 1px solid #fff7d636; pointer-events: none; }
.town-scenery { position: absolute; inset: 0 0 auto; height: 22%; overflow: hidden; background: linear-gradient(#b6d2bd, #ecdfad); }
.town-scenery--city { height: 25%; background: linear-gradient(#b88989, #efb494 60%, #f7d4a3); }
.town-sun { position: absolute; left: 74%; top: 16%; width: 50px; height: 50px; background: #ffedb6; box-shadow: 0 0 0 10px #ffedb617, 0 0 0 22px #ffedb60a; clip-path: polygon(20% 0,80% 0,80% 10%,90% 10%,90% 20%,100% 20%,100% 80%,90% 80%,90% 90%,80% 90%,80% 100%,20% 100%,20% 90%,10% 90%,10% 80%,0 80%,0 20%,10% 20%,10% 10%,20% 10%); }
.town-skyline { position: absolute; inset: 18% 0 0; }
.town-skyline::before { content: ""; position: absolute; inset: 48% 0 0; background: #798d9077; clip-path: polygon(0 40%,5% 40%,5% 0,14% 0,14% 45%,22% 45%,22% 12%,30% 12%,30% 50%,41% 50%,41% 5%,50% 5%,50% 30%,64% 30%,64% 0,73% 0,73% 55%,87% 55%,87% 15%,95% 15%,95% 30%,100% 30%,100% 100%,0 100%); }
.town-skyline i { position: absolute; bottom: 0; left: var(--x); width: var(--w); height: var(--h); border-top: 4px solid #9f9d9b; background: repeating-linear-gradient(90deg, transparent 0 8px, #71858b 8px 15px), repeating-linear-gradient(0deg, #f4d3a46b 0 5px, #71858b 5px 13px); box-shadow: 7px 0 0 #617780; opacity: .7; }
.town-skyline i:nth-child(3n)::before { content: ""; position: absolute; width: 3px; height: 16px; bottom: 100%; left: 50%; background: #71858b; }
.town-mountain { position: absolute; inset: 10% -5% 0; background: #809f83; clip-path: polygon(0 75%,7% 75%,7% 55%,14% 55%,14% 32%,20% 32%,20% 15%,28% 15%,28% 36%,35% 36%,35% 58%,44% 58%,44% 42%,51% 42%,51% 24%,58% 24%,58% 40%,63% 40%,63% 58%,69% 58%,69% 28%,75% 28%,75% 8%,82% 8%,82% 30%,90% 30%,90% 60%,100% 60%,100% 100%,0 100%); }
.town-mountain--near { inset: 38% -18% -4% 0; background: #4f7c68; transform: scaleX(-1); }
.town-cloud { position: absolute; top: 19%; left: 18%; width: 52px; height: 8px; background: #f7f3d9; box-shadow: 10px -8px 0 -1px #f7f3d9, 27px 0 0 #f7f3d9, 380px 24px 0 #f7f3d9; }
.town-map__ground { position: absolute; inset: 20% 0 0; border-top: 8px solid #5e886b; background: linear-gradient(90deg, #e9dda02b 2px, transparent 2px) 0 0 / 23px 37px, linear-gradient(#71936e22 2px, transparent 2px) 0 0 / 37px 23px, #a8be85; }
.city--work .town-map__ground { inset: 24% 0 0; border-top: 8px solid #737d72; background: linear-gradient(90deg, #e9dfc044 1px, transparent 1px), linear-gradient(#e9dfc044 1px, transparent 1px), #b3b5a0; background-size: 24px 24px; }
.town-map__river { position: absolute; z-index: 1; top: 20%; right: 0; bottom: 0; width: 5%; border-left: 5px solid #e4d5a1; background: repeating-linear-gradient(0deg, #94c9be 0 4px, #73afa9 4px 48px); box-shadow: -4px 0 #73916e, inset 5px 0 #b5d7bc; }
.town-map__river i { position: absolute; top: 20%; left: 30%; width: 45%; height: 3px; background: #e7e7bd; box-shadow: -3px 8px #4f9595; }
.town-map__river i:nth-child(2) { top: 49%; }
.town-map__river i:nth-child(3) { top: 81%; }
.city--work .town-map__river { display: none; }
.town-road { position: absolute; z-index: 2; background: repeating-linear-gradient(0deg, transparent 0 12px, #bda77936 12px 14px), #e0cb99; border: 3px solid #b49f71; box-shadow: 0 3px #83936d; }
.town-road--main { top: 22%; bottom: 0; left: 46%; width: 8%; border-block: 0; }
.town-road--north, .town-road--middle, .town-road--south { left: 13%; right: 9%; height: 30px; border-inline: 0; }
.town-road--north { top: calc(32% - 12px); }
.town-road--middle { top: calc(60% - 12px); }
.town-road--south { top: calc(88% - 12px); right: 46%; }
.city--work .town-road { background: #647474; border-color: #e1d5ae; box-shadow: 0 3px #829183; }
.city--work .town-road--main { top: 24%; left: 44%; width: 12%; border-inline-width: 5px; }
.city--work .town-road--main::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: repeating-linear-gradient(0deg, #efe3b9 0 12px, transparent 12px 27px); }
.city--work .town-road--north, .city--work .town-road--south { left: 0; right: 0; height: 40px; border-block-width: 5px; }
.city--work .town-road--north { top: calc(44% - 10px); }
.city--work .town-road--south { top: calc(80% - 10px); }
.city--work .town-road--middle { display: none; }
.city--work .town-road--north::after, .city--work .town-road--south::after { content: ""; position: absolute; z-index: 1; left: 44%; width: 12%; height: 30px; background: repeating-linear-gradient(90deg, #f3e9c9 0 5px, transparent 5px 10px); border-block: 4px solid #647474; }
/* Each doorway sits exactly at its plot's bottom center. Labels sit below it. */
.town-building { position: absolute; z-index: 6; top: var(--plot-y); left: var(--plot-x); width: 28%; max-width: 280px; padding: 0; border: 0; margin: 0; background: none; color: var(--ink); text-decoration: none; font: inherit; text-align: center; cursor: pointer; transform: translate(-50%, -100%); -webkit-tap-highlight-color: transparent; --roof: #ab6457; --wall: #efd9aa; --side: #a88765; --accent: #507c79; }
.town-building__art { position: relative; display: block; height: 124px; filter: drop-shadow(8px 8px 0 #36534330); transition: filter 160ms; }
.town-building__art i { position: absolute; display: block; }
.town-building__art::before { content: ""; position: absolute; inset: 37% 12% 0; border: 3px solid #4b5045; background: repeating-linear-gradient(0deg, transparent 0 15px, #83644220 15px 17px), var(--wall); box-shadow: inset -12px 0 var(--side), inset 0 8px #7c624040, 4px 4px #4b5045; }
.town-building__roof { z-index: 2; left: 3%; top: 1%; width: 94%; height: 52%; background: repeating-linear-gradient(0deg, transparent 0 11px, #523e3b55 11px 14px), repeating-linear-gradient(90deg, transparent 0 25px, #eac69144 25px 27px), var(--roof); clip-path: polygon(10% 70%,10% 50%,20% 50%,20% 30%,30% 30%,30% 10%,70% 10%,70% 30%,80% 30%,80% 50%,90% 50%,90% 70%,100% 70%,100% 100%,0 100%,0 70%); box-shadow: inset 0 -7px #514e40; }
.town-building__window { z-index: 3; top: 60%; left: 20%; width: 18%; height: 24%; border: 3px solid #59665a; background: linear-gradient(90deg, transparent 43%, #59665a 43% 55%, transparent 55%), linear-gradient(0deg, #eda969 42%, #59665a 42% 52%, #fff0b5 52%); box-shadow: 4px 3px #a48a60; }
.town-building__window::after { content: ""; position: absolute; top: -3px; left: 245%; width: 100%; height: 100%; border: inherit; box-sizing: content-box; background: inherit; }
.town-building__door { z-index: 5; bottom: 0; left: 43%; width: 14%; height: 32%; border: 3px solid #454f45; background: linear-gradient(90deg, transparent 60%, #f8db88 60% 75%, transparent 75%) center / 100% 5px no-repeat, var(--accent); transform-origin: left; }
.town-building__door::after { content: ""; position: absolute; bottom: -6px; left: -6px; right: -6px; height: 4px; background: #e8d7b3; border-bottom: 2px solid #867953; }
.town-building__chimney { z-index: 1; top: 0; right: 22%; width: 9%; height: 33%; background: repeating-linear-gradient(0deg, #9e7761 0 9px, #645a4b 9px 12px); border: 3px solid #60564c; }
.town-building__awning { z-index: 4; left: 38%; bottom: 29%; width: 24%; height: 10%; background: #e6d5ae; border: 3px solid #746a50; box-shadow: 0 4px #78654d55; }
.town-building__planter { z-index: 5; bottom: 4%; right: 10%; width: 18%; height: 9%; background: #b9805e; border-bottom: 3px solid #725b44; box-shadow: 0 -6px #59815d, 4px -10px #76914f; }
.town-building__badge { position: absolute; z-index: 5; top: 26%; left: 50%; display: grid; place-items: center; width: 30px; height: 26px; transform: translateX(-50%); border: 2px solid #444f47; background: #fff0ce; color: #49594b; font: 800 16px/1 ui-monospace, sans-serif; box-shadow: 3px 3px #4c4f4340; }
.town-building__sign { position: absolute; z-index: 8; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: max-content; max-width: 100%; min-width: 110px; min-height: 48px; padding: 7px 12px; border: 1px solid #6d7558; color: #293d38; background: #fff6dd; box-shadow: 3px 3px #4a573744; }
.town-building__sign strong { font-size: 15px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.town-building__sign small { color: #616c54; font-size: 10px; line-height: 1.4; }
.town-building[data-status] .town-building__sign small { color: #8e4c32; font-weight: 700; }
.town-building:hover .town-building__art, .town-building:focus-visible .town-building__art, .town-building.is-selected .town-building__art { filter: drop-shadow(8px 8px 0 #36534330) brightness(1.12); }
.town-building:hover .town-building__sign, .town-building.is-selected .town-building__sign { background: #ffe3a0; }
.town-building:focus-visible { outline: 3px solid #fff8d0; outline-offset: 5px; }
.town-building:focus-visible .town-building__sign { outline: 3px solid #223f4b; outline-offset: 3px; }
.town-building.is-entering .town-building__door { animation: town-door-open 480ms steps(4, end) forwards; }
.town-building.is-speaking .town-building__sign { outline: 3px solid #b17341; outline-offset: 2px; }
.town-building--instagram { --roof: #ac6870; --wall: #f2d4af; --accent: #975c69; }
.town-building--youtube { --roof: #b55a43; --wall: #edcfa3; --accent: #8b5942; }
.town-building--tiktok { --roof: #6d7182; --wall: #e0cbb2; --accent: #54767c; }
.town-building--note { --roof: #4c7d69; --wall: #e8dfb9; --accent: #52775f; }
.town-building--atem { --roof: #4d7481; --wall: #e4d1a4; --accent: #496b79; }
.city--travel .town-building--youtube .town-building__awning { left: 15%; width: 70%; background: repeating-linear-gradient(90deg, #f3dda6 0 12px, #b6624e 12px 24px); }
.city--travel .town-building--note .town-building__window { background: repeating-linear-gradient(90deg, #b47753 0 4px, #e1d69a 4px 7px, #687f64 7px 11px); }
.city--travel .town-building--atem .town-building__art { height: 129px; }
.city--travel .town-building--atem .town-building__chimney { top: -8px; right: 25%; width: 4px; height: 50px; border: 0; background: #505e50; }
.city--travel .town-building--atem .town-building__chimney::after { content: ""; position: absolute; top: 0; left: 4px; width: 24px; height: 15px; background: #dfad6b; border-bottom: 3px solid #b78352; }
/* Urban architecture: glass tower, brick editorial office, studio, green terrace. */
.city--work .town-building { width: 29%; max-width: 300px; --wall: #547c82; --side: #365765; --accent: #f4c987; }
.city--work .town-building__art { height: 204px; filter: drop-shadow(10px 9px 0 #3b4e5038); }
.city--work .town-building__art::before { inset: 6% 14% 0 10%; border: 3px solid #344f58; background: var(--wall); box-shadow: inset -15px 0 var(--side), inset 0 7px #ffffff30, 5px 4px #344f58; }
.city--work .town-building__roof { left: 6%; top: 0; width: 84%; height: 10%; clip-path: polygon(7% 0,93% 0,93% 40%,100% 40%,100% 100%,0 100%,0 40%,7% 40%); background: #a5b6ac; box-shadow: inset 0 -6px #486570; }
.city--work .town-building__window { top: 17%; left: 18%; width: 56%; height: 54%; border: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, var(--wall) 12px 18px), repeating-linear-gradient(0deg, #f9d79a 0 10px, #a9c7bc 10px 14px, var(--wall) 14px 23px); box-shadow: 0 3px #2e536566; }
.city--work .town-building__window::after { top: 24%; left: 0; width: 100%; height: 25%; border: 0; background: repeating-linear-gradient(90deg, #52717a 0 12px, transparent 12px 18px); opacity: .65; }
.city--work .town-building__door { bottom: 0; left: 42%; width: 16%; height: 22%; border-color: #344f58; background: linear-gradient(90deg, transparent 43%, #45606a 43% 54%, transparent 54%), linear-gradient(#f6dca3, #ca8e63); }
.city--work .town-building__awning { left: 25%; width: 50%; bottom: 20%; height: 7%; background: repeating-linear-gradient(90deg, #e9b779 0 12px, #f6e1b7 12px 24px); border: 0; border-bottom: 4px solid #745e4b; }
.city--work .town-building__chimney { top: -15px; right: 28%; width: 16%; height: 19px; border: 3px solid #48636a; background: repeating-linear-gradient(0deg, #afb9af 0 3px, #728d87 3px 5px); }
.city--work .town-building__badge { top: 34%; left: 85%; width: 36px; height: 40px; border-color: #365361; background: #fff0c9; color: #365361; font-size: 23px; }
.city--work .town-building__planter { right: 15%; width: 17%; height: 7%; box-shadow: 0 -6px #4e7760, 4px -12px #6d9466; }
.city--work .town-building--x .town-building__art { height: 228px; }
.city--work .town-building--x .town-building__roof::before { content: ""; position: absolute; bottom: 100%; left: 25%; width: 3px; height: 30px; background: #405c64; }
.city--work .town-building--note { --wall: #b4775d; --side: #86594c; }
.city--work .town-building--note .town-building__art::before { background: repeating-linear-gradient(0deg, transparent 0 12px, #e3b48c66 12px 14px), var(--wall); }
.city--work .town-building--note .town-building__window { background: repeating-linear-gradient(90deg, transparent 0 16px, var(--wall) 16px 28px), repeating-linear-gradient(0deg, #f9ddaa 0 19px, #526c6d 19px 23px, var(--wall) 23px 34px); }
.city--work .town-building--note .town-building__awning { left: 10%; width: 76%; background: repeating-linear-gradient(90deg, #53766a 0 14px, #eed7a9 14px 28px); }
.city--work .town-building--tiktok { --wall: #566075; --side: #3e495c; }
.city--work .town-building--tiktok .town-building__art { height: 166px; }
.city--work .town-building--tiktok .town-building__window { background: repeating-linear-gradient(0deg, transparent 0 18px, #3d4b62 18px 24px), linear-gradient(90deg, #7ea5a7, #edb7a4); }
.city--work .town-building--tiktok .town-building__badge { top: 17%; left: 48%; width: 48%; height: 42%; font-size: 42px; background: #344958; color: #f5c0b1; border-color: #e2a496; text-shadow: -3px 0 #79c6bd; box-shadow: 4px 4px #344958; }
.city--work .town-building--line { --wall: #eadcb6; --side: #b6ac88; }
.city--work .town-building--line .town-building__art { height: 163px; }
.city--work .town-building--line .town-building__roof { background: #578774; box-shadow: inset 0 -6px #3d685f; }
.city--work .town-building--line .town-building__window { background: repeating-linear-gradient(90deg, transparent 0 16px, #eaddb9 16px 21px), #779b91; }
.city--work .town-building--line .town-building__badge { width: 43px; font-size: 15px; background: #416f60; color: #fff3cb; border-color: #e0d7ac; }
.city--work .town-building--line .town-building__chimney { width: 40%; height: 18px; background: #6b8c5b; border-color: #476b59; box-shadow: 4px -6px #829b60; }
.city--work .town-building--line .town-building__awning { background: #648d71; }
/* Street life: squared canopies, garden plots, lamps, a parked car and neighbors. */
.town-map__trees i { position: absolute; z-index: 4; top: var(--y); left: var(--x); width: 38px; height: 49px; transform: translate(-50%, -100%); border-bottom: 5px solid #617d5444; }
.town-map__trees i::before { content: ""; position: absolute; bottom: 0; left: 17px; width: 7px; height: 25px; background: #756b49; box-shadow: 4px 0 #a28e5c; }
.town-map__trees i::after { content: ""; position: absolute; top: 0; width: 40px; height: 36px; background: #608965; box-shadow: inset -8px -8px #3f7059, inset 6px 6px #8ba365; clip-path: polygon(20% 0,80% 0,80% 12%,100% 12%,100% 78%,80% 78%,80% 100%,20% 100%,20% 85%,0 85%,0 20%,20% 20%); }
.city--travel .town-map__trees i:nth-child(3n)::after { background: #3f7662; clip-path: polygon(40% 0,60% 0,60% 20%,80% 20%,80% 45%,90% 45%,90% 70%,100% 70%,100% 100%,0 100%,0 70%,10% 70%,10% 45%,20% 45%,20% 20%,40% 20%); height: 46px; top: -10px; }
.city--work .town-map__trees i { border-bottom: 7px solid #8e8f6e; }
.town-lamp { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 4px; height: 52px; background: #405a57; transform: translate(-50%, -100%); box-shadow: 3px 0 #eee0ac77; }
.town-lamp::before { content: ""; position: absolute; top: -8px; left: -5px; width: 14px; height: 15px; background: #ffe6a6; border: 3px solid #426059; box-shadow: 0 0 18px 7px #ffdc8555; }
.town-lamp::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 10px; height: 4px; background: #405a57; }
.town-bench { position: absolute; z-index: 4; top: var(--y); left: var(--x); width: 33px; height: 16px; border: 3px solid #75684d; background: repeating-linear-gradient(0deg, #c19a68 0 4px, #765b47 4px 6px); box-shadow: 0 5px #a3885955; transform: translateX(-50%); }
.town-bench::after { content: ""; position: absolute; left: 2px; bottom: -8px; width: 3px; height: 6px; background: #5d6455; box-shadow: 19px 0 #5d6455; }
.town-car { position: absolute; z-index: 3; left: 9%; top: calc(44% - 12px); width: 39px; height: 21px; background: #c08053; border: 2px solid #595e52; box-shadow: inset 0 4px #dfab74, 2px 3px #515f5755; }
.town-car::before { content: ""; position: absolute; top: 3px; left: 11px; width: 16px; height: 10px; border-inline: 3px solid #f0d39f; background: #466b74; }
.town-car::after { content: ""; position: absolute; left: 4px; bottom: -5px; width: 7px; height: 4px; background: #3a4e50; box-shadow: 20px 0 #3a4e50; }
.town-resident { position: absolute; z-index: 5; left: var(--x); top: var(--y); width: 10px; height: 15px; border-top: 4px solid #e4bb8c; background: #ba775a; box-shadow: 0 -4px #4b5953, -2px 4px #58767b; }
.town-resident:nth-last-child(1) { background: #e0bf77; }
.town-field { position: absolute; z-index: 1; left: 63%; top: 73%; width: 21%; height: 12%; background: repeating-linear-gradient(0deg, #74975e 0 5px, #a9b276 5px 9px, #a18b59 9px 14px); border: 5px solid #c7b078; box-shadow: 4px 4px #839168; transform: skewY(-5deg); }
.town-pond { position: absolute; z-index: 2; top: 87%; left: 61%; width: 15%; height: 4%; background: repeating-linear-gradient(0deg, #87b5a7 0 8px, #c0d2b1 8px 11px); border: 5px solid #739775; clip-path: polygon(15% 0,85% 0,85% 15%,100% 15%,100% 85%,85% 85%,85% 100%,15% 100%,15% 85%,0 85%,0 15%,15% 15%); }
.town-fence { position: absolute; z-index: 3; top: 86%; left: 62%; width: 23%; height: 13px; border-block: 3px solid #dcd1a1; background: repeating-linear-gradient(90deg, #e9ddb1 0 4px, transparent 4px 14px); box-shadow: 0 3px #879065; }
.town-dialog { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; padding: 20px 25px 18px; min-height: 106px; color: var(--ink); }
.town-dialog__place { font-size: 11px; font-weight: 700; color: var(--highlight); letter-spacing: .06em; }
.town-dialog p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.65; }
.town-dialog p strong { font-weight: 600; }
.town-dialog p i { display: inline-block; margin-left: 8px; border-left: 6px solid var(--highlight); border-block: 4px solid transparent; }
.town-game__keys { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 11px; }
.city-help { margin: 18px 0 0; font-size: 12px; line-height: 1.9; opacity: .85; }
.city-other { margin: 22px 0 0; text-align: right; }
.city-other a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 0 8px 16px; color: inherit; font-size: 14px; text-underline-offset: 6px; }
.city-other a:focus-visible { outline: 3px solid #a8824e; outline-offset: 4px; }
.town-traveler {
  --traveler-x: 50%;
  --traveler-y: 91%;
  --traveler-coat: #a94349;
  --traveler-coat-shadow: #712f35;
  --traveler-cap: #8e343b;
  position: absolute;
  z-index: 12;
  top: var(--traveler-y);
  left: var(--traveler-x);
  width: 30px;
  height: 48px;
  pointer-events: none;
  transform: translate(-50%, -100%);
}
.town-traveler__shadow { position: absolute; right: 1px; bottom: -1px; left: 1px; height: 9px; border-radius: 50%; background: rgba(32, 55, 42, 0.38); }
.town-traveler__sprite {
  --sprite-scale: 1;
  position: absolute;
  inset: 0;
  display: block;
  transform: scaleX(var(--sprite-scale));
  transform-origin: center bottom;
}
.town-traveler__sprite::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 7px;
  width: 18px;
  height: 17px;
  border: 3px solid #423d37;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, transparent 4px, #4b3d35 4px 7px, transparent 7px 11px, #4b3d35 11px 14px, transparent 14px) 0 9px / 100% 3px no-repeat,
    #d4a47e;
  box-shadow: inset 0 5px 0 var(--traveler-cap), inset -3px 0 0 rgba(100, 65, 48, 0.22);
}
.town-traveler__sprite::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 5px;
  width: 22px;
  height: 23px;
  border: 3px solid #3e3c39;
  background: var(--traveler-coat);
  box-shadow: inset 0 -7px 0 #d7c07d, inset 4px 0 0 rgba(255, 255, 255, 0.12), -5px 4px 0 -2px #d4a47e, 5px 4px 0 -2px #d4a47e;
}
.town-traveler__sprite b,
.town-traveler__sprite span { position: absolute; z-index: 0; bottom: 2px; width: 7px; height: 12px; background: #4a4138; }
.town-traveler__sprite b { left: 7px; }
.town-traveler__sprite span { right: 7px; }
.town-traveler[data-facing="up"] .town-traveler__sprite::before {
  background: var(--traveler-cap);
  box-shadow: inset 0 -5px 0 #6b4b3f, inset 4px 0 0 rgba(255, 255, 255, 0.08);
}
.town-traveler[data-facing="up"] .town-traveler__sprite::after {
  background: var(--traveler-coat);
  box-shadow: inset 0 -8px 0 #d7c07d, inset 0 0 0 5px var(--traveler-coat-shadow), inset 4px 0 0 rgba(255, 255, 255, 0.1);
}
.town-traveler[data-facing="left"] .town-traveler__sprite::before,
.town-traveler[data-facing="right"] .town-traveler__sprite::before {
  left: 8px;
  width: 16px;
  background: linear-gradient(90deg, var(--traveler-cap) 0 45%, #d4a47e 45%);
  box-shadow: inset 0 4px 0 var(--traveler-cap);
}
.town-traveler[data-facing="left"] .town-traveler__sprite::after,
.town-traveler[data-facing="right"] .town-traveler__sprite::after { left: 7px; width: 18px; }
.town-traveler[data-facing="left"] .town-traveler__sprite { --sprite-scale: -1; }
.town-traveler.is-walking .town-traveler__sprite { animation: town-walk 170ms steps(2, end) infinite; }
.town-traveler.is-walking .town-traveler__sprite b { animation: town-leg-a 170ms steps(2, end) infinite; }
.town-traveler.is-walking .town-traveler__sprite span { animation: town-leg-b 170ms steps(2, end) infinite; }
.town-traveler.is-entering { animation: town-traveler-enter 480ms steps(4, end) forwards; }
.town-traveler { --traveler-y: 96%; }
.city--work .town-traveler { --traveler-coat: #b76c4c; --traveler-coat-shadow: #815340; --traveler-cap: #c48f57; }
@keyframes town-walk { 50% { transform: scaleX(var(--sprite-scale)) translateY(-3px); } }
@keyframes town-leg-a { 50% { transform: translateY(-3px); } }
@keyframes town-leg-b { 50% { transform: translateY(3px); } }
@keyframes town-door-open { to { transform: perspective(80px) rotateY(-76deg); filter: brightness(1.5); } }
@keyframes town-traveler-enter { 0% { transform: translate(-50%, -100%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -124%) scale(.18); opacity: 0; } }
@media (min-width: 761px) and (max-width: 840px) {
  .city-page .sf-header-inner { flex-wrap: wrap; gap: 0; padding-block: 10px; }
  .city-page .sf-nav { width: 100%; justify-content: space-between; gap: 12px; }
}
@media (max-width: 900px) {
  .city-intro { gap: 20px; }
  .city-intro__lead { max-width: 350px; }
  .city--work .town-building--x .town-building__art { height: 211px; }
  .city--work .town-building--note .town-building__art { height: 188px; }
  .city--work .town-building__window { left: 17%; width: 57%; }
}
@media (max-width: 600px) {
  .city-main { padding: 28px 12px 40px; }
  .city-intro { display: block; margin-bottom: 22px; }
  .city-intro__eyebrow { font-size: 10px; }
  .city-intro__lead { max-width: none; margin-top: 12px; font-size: 13px; }
  .town-game { padding: 4px; }
  .town-heading { min-height: 95px; padding: 12px 12px 14px; gap: 8px; align-items: start; }
  .town-map__location small { font-size: 10px; letter-spacing: .02em; }
  .town-map__location strong { font-size: 21px; letter-spacing: .02em; }
  .town-heading__stamp { max-width: 80px; white-space: normal; border: 0; padding: 4px 0; text-align: right; font-size: 10px; line-height: 1.8; }
  .town-map { height: 704px; }
  .city--work .town-map { height: 660px; }
  .town-building, .city--work .town-building { width: 39%; }
  .town-building__art { height: 110px; }
  .city--travel .town-building--atem .town-building__art { height: 116px; }
  .town-building__sign { width: 100%; min-width: 0; padding: 6px 3px; min-height: 48px; gap: 3px; }
  .town-building__sign strong { font-size: 13px; letter-spacing: -.02em; }
  .town-building__sign small { font-size: 10px; }
  .town-building__badge { width: 26px; height: 24px; font-size: 14px; }
  .town-building__door { width: 18%; left: 41%; }
  .town-building__window { width: 16%; }
  .town-building__window::after { left: 300%; }
  .city--work .town-building--x .town-building__art { height: 188px; }
  .city--work .town-building--note .town-building__art { height: 173px; }
  .city--work .town-building--tiktok .town-building__art { height: 152px; }
  .city--work .town-building--line .town-building__art { height: 146px; }
  .city--work .town-building__art::before { box-shadow: inset -8px 0 var(--side), inset 0 5px #ffffff30, 3px 3px #344f58; }
  .city--work .town-building__window { background-size: auto; }
  .city--work .town-building__window::after { left: 0; }
  .city--work .town-building__badge { width: 28px; height: 32px; font-size: 19px; }
  .city--work .town-building--line .town-building__badge { width: 34px; font-size: 12px; }
  .city--work .town-building__door { width: 20%; left: 40%; }
  .town-map__trees i { scale: .76; transform-origin: bottom center; }
  .town-map__trees i:nth-child(3n) { display: none; }
  .town-sun { width: 35px; height: 35px; }
  .town-lamp { height: 40px; }
  .town-car { width: 30px; left: 6%; }
  .town-car::before { left: 7px; width: 13px; }
  .town-car::after { box-shadow: 13px 0 #3a4e50; }
  .town-bench { scale: .8; }
  .town-dialog { padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 117px; }
  .town-dialog p { font-size: 13px; }
  .town-game__keys { align-self: start; font-size: 10px; }
  .town-dialog__place { font-size: 10px; }
  .city-help { padding-inline: 4px; font-size: 11px; }
  .city-other { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .town-game *, .town-game *::before, .town-game *::after { animation: none !important; transition: none !important; }
}