:root{color-scheme:light;--ink:#533b32;--cream:#fff6df;--peach:#ef9473;--teal:#234b51}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;color:var(--ink);background:#193b44}
button,a{touch-action:manipulation}
button{font:inherit;cursor:pointer}
a{color:inherit}
.market-wrap{max-width:540px;margin:auto;background:#f4dbac;overflow:hidden;border-inline:1px solid #f7c88722}
.market-header{display:flex;align-items:center;gap:12px;padding:calc(22px + env(safe-area-inset-top)) 18px 12px;color:var(--cream);background:#193b44}
.home-link{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #e8c79070;border-radius:50%;font-size:32px;text-decoration:none}
.eyebrow{font-size:11px;letter-spacing:2px;margin:0 0 5px;font-weight:700}
.market-header h1{font-size:clamp(20px,5.4vw,27px);letter-spacing:1px;margin:0;font-weight:900}
#motion{margin-left:auto;min-width:48px;min-height:44px;max-width:60px;padding:6px;border:1px solid #e8c79070;background:#254b51;color:#ffedbf;border-radius:12px;font-size:11px;line-height:1.5}
.market-invite{margin:0;padding:0 18px 18px;text-align:center;background:#193b44;color:#d9dbbc;font-size:13px;letter-spacing:.5px}
.market-invite b{color:#ffe0a2}
.market-scene{position:relative}
#market-map{width:100%;height:auto;display:block;overflow:visible;font-family:inherit}
.market-stall{cursor:pointer;outline:none}
.stall-art{transition:filter .2s}
.market-stall:hover .stall-art,.market-stall:focus-visible .stall-art{filter:drop-shadow(0 0 7px #fff1b6)}
.market-stall .focus-ring{opacity:0;fill:none;stroke:#fff9d9;stroke-width:4;stroke-dasharray:6 4;pointer-events:none}
.market-stall:focus-visible .focus-ring{opacity:1}
.market-stall:active .stall-art{filter:brightness(1.12)}
.city-sign{font-size:20px;font-weight:900;letter-spacing:3px;fill:#4d3830;paint-order:stroke;stroke:#fff2d5;stroke-width:.5px}
.stall-foodname{font-size:10px;font-weight:700;letter-spacing:1.5px;fill:#fff6df}
.steam{animation:market-steam 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.steam.second{animation-delay:-1.7s}
.dance{animation:market-dance 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 90%}
.dance.second{animation-delay:-.4s}
.dance.third{animation-delay:-.8s}
.dance-foot{animation:market-foot 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dance-foot.other{animation-delay:-.6s}
.lantern-sway{animation:market-sway 4.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.lid{animation:market-lid 4s ease-in-out infinite}
.music-note{animation:market-note 2.8s ease-out infinite}
.bulb-warm{animation:market-warm 3.6s ease-in-out infinite}
.cat-tail{animation:market-tail 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:0 90%}
@keyframes market-steam{0%{opacity:0;transform:translateY(7px) scaleX(.8)}35%{opacity:.8}100%{opacity:0;transform:translateY(-17px) scaleX(1.15)}}
@keyframes market-dance{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-4px)}}
@keyframes market-foot{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes market-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes market-lid{0%,35%,100%{transform:translateY(0)}55%,75%{transform:translateY(-9px)}}
@keyframes market-note{0%{opacity:0;transform:translateY(4px)}30%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@keyframes market-warm{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes market-tail{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
[data-still="true"] #market-map *{animation:none!important}
@media(prefers-reduced-motion:reduce){body:not([data-still="false"]) #market-map *{animation:none!important}.stall-art{transition:none}}
.market-record,.market-help{margin:12px 20px;padding:14px 16px;border:1px solid #b08c6390;border-radius:16px;background:#fff4d8;font-size:13px;line-height:1.8}
.market-record strong{color:#a94839}
.market-help summary{cursor:pointer;min-height:24px;font-weight:700}
.market-help p{margin:12px 0 0}
.market-goodnight{text-align:center;font-size:12px;margin:20px 12px 28px;color:#775a47}
.city-dialog{border:0;border-radius:26px;padding:0;width:min(430px,calc(100% - 28px));max-height:calc(100dvh - 36px);overflow:auto;background:var(--cream);color:var(--ink);box-shadow:0 14px 70px #10222f80}
.city-dialog::backdrop{background:#0c242ccc;backdrop-filter:blur(3px)}
.city-paper{padding:26px 22px 18px;position:relative;border-top:8px solid #df866a;background:radial-gradient(circle at 100% 0,#ffd7a680,transparent 50%)}
.city-close{position:absolute;right:12px;top:10px;width:44px;height:44px;border-radius:50%;border:1px solid #cfb89a;background:#fffcf1;color:#654736;font-size:29px}
#city-caption{padding-right:44px;color:#8d6047;letter-spacing:1px}
#city-title{font-size:32px;margin:8px 0 12px;letter-spacing:4px}
#city-description{font-size:14px;line-height:1.9;margin:0 0 20px}
.level-heading{font-size:14px;font-weight:700;margin:0 0 10px}
.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.level-choice{position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;border:1.5px solid #d1b799;border-radius:13px;background:#fffaf0;min-height:66px;padding:10px;color:#664735}
.level-choice strong{font-size:14px}
.level-choice small{font-size:11px}
.level-choice[aria-pressed="true"]{border-color:#28594f;background:#e0edce;color:#224d42;box-shadow:0 0 0 1px #28594f}
.level-choice[aria-disabled="true"]{background:#eee5d5;color:#796b5b;border-style:dashed}
.level-choice.done small{color:#326655}
.city-message{min-height:38px;font-size:12px;line-height:1.6;margin:12px 0;color:#8c553b}
.city-go{display:block;text-align:center;background:#2c6257;color:#fff8e6;border-radius:14px;padding:15px;font-weight:700;text-decoration:none;box-shadow:0 4px 0 #1c433b;min-height:50px}
.city-go:hover{background:#367565}
.city-after{font-size:12px;color:#886e57;text-align:center;margin:15px 0 0}
button:focus-visible,a:focus-visible{outline:3px solid #d48241;outline-offset:3px}
@media(max-width:350px){.market-header{gap:8px;padding-inline:12px}.market-header h1{font-size:19px}.market-header .eyebrow{font-size:10px}.city-paper{padding-inline:17px}}