:root{color-scheme:light;--parch:#f8e8c4;--parch-2:#f1dbab;--parch-3:#e6c88e;--wood:#8b5a2b;--wood-d:#5a3a1e;--wood-l:#c48d58;--ink:#3b2a20;--muted:#7a5f45;--leaf:#4f8a32;--leaf-d:#36652a;--gold:#f2c14e;--pink:#ff8fab;--pink-d:#e06a8b;--pink-l:#fff0f4;--cream:#fffaf0;--dream:#efe9ff;--dream-d:#a796e6;--shadow:0 4px 0 #3b2a2033,0 10px 26px #1a120a40;font-family:ui-rounded,"SF Pro Rounded","PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-size:14px;font-weight:500;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#3f5a2c}
button,input,textarea,select{font:inherit;color:inherit}button,a,select{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,h3,p{margin:0}ol{margin:0;padding:0;list-style:none}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#townCanvas{position:fixed;inset:0;touch-action:none;cursor:grab}#townCanvas:active{cursor:grabbing}
.panel{background:var(--parch);border:3px solid var(--wood);border-radius:12px;box-shadow:inset 0 0 0 2px var(--parch-3),var(--shadow)}
button{cursor:pointer}button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fade{position:fixed;inset:0;background:#0d0906;opacity:0;pointer-events:none;z-index:3}.fade.on{animation:fade .55s ease-out}@keyframes fade{0%{opacity:.85}100%{opacity:0}}
.corner{position:fixed;z-index:6;display:flex;align-items:center;gap:8px}
.brand{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));padding:7px 14px 7px 8px;gap:10px}
.brand h1{font-size:19px;letter-spacing:.06em;font-weight:800;color:var(--wood-d);text-shadow:0 1px 0 #fff8}
.brand #townTime{font-size:11px;color:var(--muted);white-space:nowrap}
.home-mark{width:32px;height:36px;border-radius:8px;background:var(--wood-d);color:var(--parch);display:grid;place-content:center;position:relative;font-size:22px;font-weight:900;box-shadow:inset 0 -3px 0 #0003}.home-mark span{color:var(--gold);position:absolute;right:3px;bottom:-5px}
.tools{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.chip-button{display:inline-flex;align-items:center;gap:6px;height:42px;min-width:42px;padding:0 13px;border:3px solid var(--wood);border-radius:12px;background:var(--parch);box-shadow:inset 0 -3px 0 var(--parch-3),var(--shadow);font-weight:700;color:var(--wood-d);position:relative}
.chip-button:hover:not(:disabled){background:#fff3d6}.chip-button:active{transform:translateY(1px)}.chip-button[aria-pressed=true]{background:#fff3c8;box-shadow:inset 0 3px 0 var(--parch-3),var(--shadow)}
.chip-button.icon{padding:0;justify-content:center;width:42px}.chip-button .glyph{font-size:17px;line-height:1}
.unread{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--pink);color:#fff;font-size:10.5px;line-height:15px;text-align:center;border:2px solid var(--parch)}
.avatar img{width:28px;height:28px;display:block}
.map-tools{left:max(12px,env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom))}
.map-tools select{appearance:none;height:40px;border:3px solid var(--wood);border-radius:10px;background:var(--parch);padding:0 12px;font-weight:700;color:var(--wood-d);box-shadow:var(--shadow);max-width:130px}
.zoom-controls{display:flex;border:3px solid var(--wood);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}.zoom-controls button{width:38px;height:34px;border:0;background:var(--parch);font-size:20px;font-weight:800;color:var(--wood-d)}.zoom-controls button+button{border-left:3px solid var(--wood)}
.away-chip{position:fixed;z-index:6;bottom:calc(120px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:8px 16px;font-weight:700;color:var(--wood-d)}
.bottom-bar{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px;width:min(460px,calc(100vw - 24px));pointer-events:none}
.bottom-bar>*{pointer-events:auto}
.rail-hint{font-size:12px;font-weight:700;color:#fff;background:#2a1d1499;padding:3px 12px;border-radius:12px;text-shadow:0 1px 0 #0006}.rail-hint:empty{display:none}
.cat-rail{display:flex;gap:4px;padding:5px;justify-content:center}
.cat-rail button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:66px;padding:3px 6px 4px;border:2px solid transparent;border-radius:10px;background:none;transition:transform .15s}
.cat-rail button:hover{background:#fff5dd;transform:translateY(-2px)}.cat-rail button[aria-pressed=true]{background:#fff3c8;border-color:var(--wood-l)}.cat-rail button.talking{background:var(--pink-l);border-color:var(--pink)}
.cat-rail canvas{width:40px;height:28px}.cat-rail b{font-size:11px;font-weight:700}.cat-rail small{font-size:9.5px;color:var(--muted);height:12px;white-space:nowrap;max-width:72px;overflow:hidden;text-overflow:ellipsis}
.close{width:34px;height:34px;flex:none;border:2px solid var(--wood-l);border-radius:10px;background:#fff3d6;font-size:20px;font-weight:800;color:var(--wood-d);line-height:1}.close.small{width:28px;height:28px;font-size:17px;border-radius:8px}

/* ------------------------------------------------------------ town log */
.town-log{position:fixed;z-index:5;top:calc(max(12px,env(safe-area-inset-top)) + 64px);left:max(12px,env(safe-area-inset-left));width:300px;max-height:calc(100dvh - 210px);display:flex;flex-direction:column;padding:10px 6px 8px 10px}
.log-head{display:flex;align-items:baseline;gap:8px;padding:0 4px 8px 2px;border-bottom:2px dashed var(--parch-3)}.log-head h2{font-size:15px;font-weight:800;color:var(--wood-d)}.log-sub{font-size:10.5px;color:var(--muted)}.log-head .close{margin-left:auto;align-self:center}
.log-list{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex;flex-direction:column;gap:5px;padding:8px 4px 2px 0}
.log-list>li{font-size:13px;font-weight:600;line-height:1.55;cursor:pointer;border-radius:10px;animation:slide .35s ease-out}@keyframes slide{0%{opacity:0;transform:translateY(6px)}}
.log-line,.log-reply,.log-solo,.log-react,.log-dream{display:flex;gap:7px;align-items:flex-start;padding:5px 7px;background:var(--cream);border:1px solid var(--parch-3)}
.log-list li:hover{filter:brightness(1.03);box-shadow:0 0 0 2px var(--wood-l)}
.log-list .head{width:30px;height:21px;flex:none;margin-top:2px}
.log-body{min-width:0}.log-body p{overflow-wrap:anywhere}.who{font-size:11.5px;color:var(--muted)}.who b{color:var(--wood-d);font-size:12px}.to{color:var(--muted)}
.said{font-weight:700}.did{color:#6b4a30;font-weight:600}.did q{color:var(--ink);font-weight:700;margin-left:4px}.did q::before{content:"「"}.did q::after{content:"」"}
.tag{font-size:10.5px;color:var(--pink-d);font-weight:700}
.kao{color:var(--pink-d);font-weight:700;white-space:nowrap}
.log-reply{background:var(--pink-l);border-color:#f3c3d2}
.log-dream{background:var(--dream);border-color:#d6cbff}.log-dream .moon{font-size:17px;line-height:1.2}.dream-text{color:#4b3f7a}.log-dream .kao{color:#7a68c8}
.log-meet,.log-sleep,.log-wake{font-size:11px!important;color:var(--muted);text-align:center;padding:2px 4px}

/* ------------------------------------------------------------ talk card */
.talk-card{position:fixed;z-index:8;top:calc(max(12px,env(safe-area-inset-top)) + 84px);right:max(14px,env(safe-area-inset-right));width:340px;--cat:#e9a0b8}
.talk-card.show{animation:pop .3s cubic-bezier(.2,1.5,.5,1)}@keyframes pop{0%{transform:translateY(16px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
.talk-ears{position:absolute;top:-20px;left:0;right:0;height:24px;pointer-events:none}
.talk-ears i{position:absolute;bottom:0;width:0;height:0;border-left:19px solid transparent;border-right:19px solid transparent;border-bottom:24px solid var(--wood)}
.talk-ears i::after{content:"";position:absolute;left:-10px;top:9px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:13px solid var(--pink)}
.talk-ears i:first-child{left:30px;transform:rotate(-8deg)}.talk-ears i:last-child{right:30px;transform:rotate(8deg)}
.talk-body{position:relative;background:var(--cream);border:3px solid var(--wood);border-radius:18px;box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--cat) 35%,#fff),var(--shadow);padding:14px 14px 10px;display:flex;flex-direction:column;max-height:calc(100dvh - 120px)}
.talk-head{display:flex;align-items:center;gap:11px}
.talk-portrait{width:84px;height:84px;flex:none;border-radius:16px;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--cat) 45%,#fff),color-mix(in srgb,var(--cat) 18%,#fff8ec));border:2px solid color-mix(in srgb,var(--cat) 60%,var(--wood-l));overflow:hidden;display:grid;place-items:end center}
#talkPortrait{width:80px;height:80px;animation:breathe 1.9s steps(2) infinite}@keyframes breathe{50%{transform:translateY(2px)}}
.talk-id{min-width:0;flex:1}.talk-id h2{font-size:21px;font-weight:800;color:var(--wood-d);letter-spacing:.02em}
#talkTraits{font-size:11px;color:var(--muted);margin-top:1px}
.talk-status{font-size:12px;font-weight:700;margin-top:5px;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--parch-3);border-radius:10px;padding:1px 9px 1px 7px}
.talk-status::before{content:"";width:8px;height:8px;border-radius:50%;background:#6cc04a;box-shadow:0 0 0 2px #6cc04a33}
.talk-status[data-state=asleep]::before{background:#7b8fe0;box-shadow:0 0 0 2px #7b8fe033}.talk-status[data-state=busy]::before{background:#f0a23a;box-shadow:0 0 0 2px #f0a23a33}
.talk-head .close{align-self:flex-start}
.talk-dream{margin-top:10px;background:var(--dream);border:1.5px dashed var(--dream-d);border-radius:14px;padding:7px 11px;font-size:12.5px;line-height:1.6;color:#4b3f7a}
.talk-log{margin-top:10px;display:flex;flex-direction:column;gap:7px;min-height:72px;max-height:240px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 2px 4px}
.msg{font-size:14px;font-weight:600;line-height:1.6;max-width:88%;overflow-wrap:anywhere;animation:slide .3s ease-out}
.msg.user{align-self:flex-end;background:#dff0c8;border:1.5px solid #b9d99a;border-radius:16px 16px 4px 16px;padding:5px 12px}
.msg.cat{align-self:flex-start;background:#fff;border:2px solid color-mix(in srgb,var(--cat) 70%,var(--wood-l));border-radius:16px 16px 16px 4px;padding:5px 12px;font-weight:700}
.msg.act{align-self:flex-start;color:#6b4a30;background:#fff6e4;border:1.5px dashed #e6c88e;border-radius:14px;padding:4px 11px}.msg.act::before{content:"🐾 "}
.msg.act q{font-weight:800;color:var(--ink)}.msg.act q::before,.msg.act q::after{content:""}
.msg.hint{align-self:center;max-width:100%;color:var(--muted);font-size:13px;text-align:center;padding:6px 0}
.msg.typing{align-self:flex-start;display:flex;gap:4px;background:#fff;border:2px solid color-mix(in srgb,var(--cat) 70%,var(--wood-l));border-radius:16px 16px 16px 4px;padding:9px 12px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--wood-l);animation:dot 1s infinite}.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
.talk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.talk-chips button{border:1.5px solid #f3bccc;background:var(--pink-l);color:#b4486a;font-size:12px;font-weight:700;border-radius:14px;padding:4px 11px;transition:transform .12s}.talk-chips button:hover{transform:translateY(-1px);background:#ffe3ec}
.talk-form{display:flex;gap:7px;margin-top:9px}
.talk-form input{flex:1;min-width:0;height:40px;border:2px solid var(--parch-3);border-radius:20px;background:#fff;padding:0 15px;outline:none}.talk-form input:focus{border-color:var(--pink)}
#talkSend{height:40px;padding:0 18px;border:0;border-radius:20px;background:var(--pink);color:#fff;font-weight:800;box-shadow:inset 0 -3px 0 var(--pink-d)}#talkSend:hover:not(:disabled){filter:brightness(1.05)}
.talk-note{font-size:11px;font-weight:600;color:var(--muted);margin-top:7px;text-align:center}

/* ------------------------------------------------------------ sheets */
.sheet{position:fixed;z-index:8;padding:16px;max-height:calc(100dvh - 210px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.sheet-head h2{font-size:20px;font-weight:800;color:var(--wood-d)}.sheet-head .close{margin-left:auto}
.soft-note{color:var(--muted);font-size:12px;line-height:1.7;margin-top:8px}
.settings-panel{top:calc(max(12px,env(safe-area-inset-top)) + 64px);right:max(12px,env(safe-area-inset-right));width:320px}
.settings-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-top:2px dashed var(--parch-3);padding-top:12px;margin-top:12px;font-size:12px;font-weight:700;color:var(--leaf-d)}.settings-links button{border:0;background:none;padding:0;min-height:30px;color:var(--leaf-d);font-weight:700}
.toast{position:fixed;z-index:12;left:50%;transform:translateX(-50%);top:calc(max(12px,env(safe-area-inset-top)) + 64px);max-width:min(460px,calc(100vw - 28px));padding:11px 16px;font-size:13px;font-weight:700;line-height:1.55;text-align:center;pointer-events:none;background:var(--parch);border:3px solid var(--wood);border-radius:12px;box-shadow:var(--shadow)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1100px){.town-log{max-height:calc(100dvh - 250px)}}
@media(max-width:760px){
 .town-log{top:auto;bottom:calc(112px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-height:min(46dvh,420px)}
 .talk-card{top:auto;left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom))}
 .talk-body{max-height:min(66dvh,560px)}.talk-log{max-height:none;flex:1}
 body.talking .bottom-bar,body.talking .map-tools,body.talking .away-chip{display:none}
 .settings-panel{top:auto;bottom:calc(112px + env(safe-area-inset-bottom));left:10px;right:10px;width:auto;max-height:min(52dvh,460px)}
}
@media(max-width:600px){
 .brand{padding:5px 10px 5px 6px;gap:7px}.brand h1{font-size:15px}.home-mark{width:26px;height:30px;font-size:18px}.brand #townTime{font-size:9.5px}
 .tools{gap:5px}.chip-button{height:36px;min-width:36px;padding:0 9px;border-width:2px}.chip-button.icon{width:36px}.chip-button .glyph{font-size:15px}
 #logButtonLabel{display:none}
 .map-tools{top:calc(max(12px,env(safe-area-inset-top)) + 52px);bottom:auto;left:10px;gap:5px}.map-tools select{height:32px;font-size:11px;padding:0 8px;border-width:2px;max-width:96px}.zoom-controls{border-width:2px}.zoom-controls button{width:30px;height:28px;font-size:16px}.zoom-controls button+button{border-left-width:2px}
 .away-chip{top:calc(max(12px,env(safe-area-inset-top)) + 52px);bottom:auto;left:auto;right:10px;transform:none;padding:5px 10px;font-size:11px}
 .bottom-bar{width:calc(100vw - 16px);bottom:calc(8px + env(safe-area-inset-bottom))}
 .cat-rail{gap:0;padding:3px;width:100%;justify-content:space-between}.cat-rail button{min-width:0;flex:1;padding:2px}.cat-rail canvas{width:34px;height:24px}.cat-rail b{font-size:10px}.cat-rail small{font-size:8.5px;max-width:64px}
 .town-log{bottom:calc(100px + env(safe-area-inset-bottom))}
 .talk-portrait{width:68px;height:68px;border-radius:14px}#talkPortrait{width:64px;height:64px}.talk-id h2{font-size:18px}
 .talk-body{padding:12px 11px 8px}.talk-ears i:first-child{left:22px}.talk-ears i:last-child{right:22px}
 .toast{top:calc(max(12px,env(safe-area-inset-top)) + 92px);font-size:12px}
}
@media(prefers-reduced-motion:reduce){#talkPortrait,.msg,.log-list>li,.msg.typing i{animation:none}.talk-card.show{animation:none}}