@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=Outfit:wght@400;500;600&display=swap');
:root{color-scheme:dark;--ink:#eff6f5;--muted:#b4c2c7;--gold:#d7b983;--panel:rgba(17,32,42,.87);--line:rgba(215,233,241,.14)}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Outfit','Noto Sans TC',sans-serif;font-size:14px;background:#142b33;overflow:hidden}button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{touch-action:manipulation}#game,#world{width:100%;height:100dvh;display:block}#world{touch-action:none;position:absolute;inset:0}.glass{background:var(--panel);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:0 12px 45px #00111b30;border-radius:16px}.topbar{position:absolute;left:32px;right:32px;top:27px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:13px;text-shadow:0 2px 14px #07161f}.brand-mark{font-family:Georgia,serif;font-size:45px;color:var(--gold);border:1px solid #d7b98370;width:57px;height:57px;display:grid;place-items:center}.brand h1{font-size:24px;letter-spacing:.22em;margin:0}.brand h1 span{display:block;font-size:12px;font-weight:400;letter-spacing:.13em;margin-top:5px;color:#d8e3e7}.clock-panel{pointer-events:auto;display:flex;align-items:center;gap:16px;padding:12px 17px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.clock-panel small{display:block;font-size:12px;color:var(--muted)}.clock-panel b{font-size:22px;letter-spacing:.05em;font-weight:500}.clock-panel>span{font-size:25px;color:var(--gold)}.clock-panel button{background:#ffffff0b;border:1px solid var(--line);height:34px;min-width:34px;border-radius:7px}.clock-panel button:hover{background:#ffffff22}.resident{position:absolute;left:32px;top:112px;width:248px;padding:18px}.resident-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}.avatar-icon{width:36px;height:40px;display:grid;place-items:center;background:#d7b98318;font-size:24px;color:var(--gold);border-radius:12px}.resident small{font-size:10px;letter-spacing:.12em;color:var(--gold)}.resident h2{font-size:15px;margin:3px 0 0;font-weight:500}.resident-head>span{margin-left:auto;font-size:12px;color:#b9ddc4;background:#a0ceaf14;padding:4px 7px;border-radius:6px}.need{margin-top:15px}.need-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:13px}.need-label span:first-child{color:#d7e0e5}.need-label b{font-size:12px;font-weight:400;color:var(--muted)}.need-track{height:4px;background:#ffffff10;border-radius:10px;overflow:hidden}.need-track i{display:block;height:100%;border-radius:10px;transition:width .4s;background:var(--bar)}.location{display:flex;gap:7px;border-top:1px solid var(--line);margin-top:19px;padding-top:13px;color:#c4d2da;font-size:12px}.location>span:first-child{color:var(--gold)}#saved{margin-left:auto;font-size:10px;color:#95a9b1}.journal{position:absolute;right:32px;top:112px;width:246px;padding:18px}.journal-title{display:flex;justify-content:space-between;font-weight:500}.journal-title small{font-size:12px;color:var(--gold);font-weight:400}.goal{display:flex;gap:10px;align-items:center;margin-top:17px;font-size:13px;color:#cfdae0}.goal .check{border:1px solid #82969f;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px}.goal.done .check{background:var(--gold);border-color:var(--gold);color:#25313a}.goal.done{color:#8daba5}.journal p{color:#8da1ac;font-size:11px;line-height:1.7;margin:20px 0 0;border-top:1px solid var(--line);padding-top:12px}.destinations{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);padding:12px 18px 14px;max-width:calc(100% - 40px)}.dock-label{text-align:center;font-size:11px;letter-spacing:.15em;color:#94aab6;margin-bottom:10px}#destination-buttons{display:flex;gap:9px}.destination{background:transparent;border:1px solid transparent;border-radius:10px;padding:9px 15px;min-width:73px;display:flex;align-items:center;flex-direction:column;gap:7px;font-size:12px;color:#cddadf;transition:.18s}.destination svg{width:24px;height:24px;stroke-width:1.4;stroke:currentColor;fill:none}.destination:hover,.destination.active{background:#d7b98314;color:var(--gold);border-color:#d7b98340;transform:translateY(-2px)}.help{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;align-items:center;gap:22px;font-size:11px;color:#d2e1e6;text-shadow:0 1px 6px #000}.help kbd{background:#152d3999;padding:2px 5px;border-radius:4px;font:inherit;border:1px solid #9cb3bf40}.help button{background:none;font-size:11px;text-decoration:underline;text-underline-offset:4px}#room-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.room-tag{position:absolute;transform:translate(-50%,-100%);background:rgba(19,35,44,.84);border:1px solid #bfd4df40;border-radius:25px;padding:7px 12px;color:#ebf2f2;font-size:11px;white-space:nowrap;pointer-events:auto;box-shadow:0 4px 12px #0002;transition:background .2s,opacity .2s}.room-tag:hover{background:#ac8d53;color:white}.room-tag::after{content:'';position:absolute;bottom:-4px;left:calc(50% - 3px);width:6px;height:6px;background:inherit;transform:rotate(45deg)}#toast{position:absolute;bottom:197px;left:50%;transform:translateX(-50%);background:#162b36ed;border:1px solid #d7b98360;padding:12px 21px;border-radius:30px;color:#e6d5b2;opacity:0;transition:opacity .3s;pointer-events:none;text-align:center;max-width:90%;font-size:13px}#toast.show{opacity:1}#activity{position:absolute;left:50%;bottom:195px;transform:translateX(-50%);width:300px;padding:15px 18px}#activity>div:first-child{display:flex;align-items:center;gap:9px}#activity-icon{color:var(--gold)}#activity strong{font-weight:500}#cancel-activity{background:none;margin-left:auto;font-size:20px;color:var(--muted)}.activity-track,.load-track{height:4px;background:#ffffff18;border-radius:4px;overflow:hidden;margin:13px 0 8px}.activity-track i,.load-track i{display:block;background:var(--gold);height:100%;width:0}#activity small{font-size:12px;color:var(--muted)}#loading{position:absolute;inset:0;background:#14252f;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;transition:opacity .6s}.loader-mark{font:70px Georgia,serif;color:var(--gold)}#loading h2{font-size:21px;letter-spacing:.18em;font-weight:400}#loading p{color:var(--muted);font-size:13px}.load-track{width:210px}#loading.done{opacity:0;pointer-events:none}#error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:30px;width:min(420px,90vw);z-index:15}#error p{line-height:1.8;color:var(--muted)}#error button{background:var(--gold);color:#172b35;padding:10px 18px;border-radius:8px}#touch-controls{display:none}[hidden]{display:none!important}@media(max-width:1000px){.topbar{left:18px;right:18px;top:18px}.resident{left:18px;width:210px;padding:14px;top:98px}.journal{right:18px;width:205px;padding:14px;top:98px}.destination{padding:7px 10px;min-width:63px}.help{gap:12px}}@media(max-width:700px){.topbar{left:12px;right:12px;top:12px}.brand-mark{width:38px;height:40px;font-size:31px}.brand{gap:8px}.brand h1{font-size:17px}.brand h1 span{display:none}.clock-panel{padding:8px 10px;gap:9px}.clock-panel>span{font-size:19px}.clock-panel b{font-size:18px}.clock-panel small{font-size:10px}.clock-panel button{height:29px;min-width:29px}.resident{top:76px;left:12px;width:164px;padding:12px}.resident-head{margin-bottom:12px;gap:7px}.avatar-icon{display:none}.resident h2{font-size:12px}.resident small{font-size:9px}.resident-head>span{font-size:10px}.need{margin-top:11px}.need-label{font-size:11px}.need-label b{font-size:10px}.location{margin-top:13px;font-size:10px}#saved{display:none}.journal{top:76px;right:12px;width:154px;padding:12px}.journal-title{font-size:12px}.journal-title small{font-size:10px}.goal{font-size:11px;margin-top:13px;gap:7px}.goal .check{flex-shrink:0}.journal p{display:none}.destinations{bottom:21px;padding:8px 8px 10px;max-width:calc(100% - 20px);border-radius:13px}.dock-label{font-size:10px;margin-bottom:5px}#destination-buttons{gap:0}.destination{font-size:10px;padding:6px 9px;min-width:50px;gap:4px}.destination svg{width:21px;height:21px}.help{display:none}.room-tag{font-size:10px;padding:6px 8px}#touch-controls{position:absolute;bottom:129px;left:14px;display:flex;align-items:center;flex-direction:column;gap:3px}#touch-controls div{display:flex;gap:3px}#touch-controls button{width:37px;height:37px;background:#17303fc9;border:1px solid #ffffff20;border-radius:9px;font-size:20px}#activity{bottom:122px;width:255px;left:auto;right:12px;transform:none;padding:12px}#toast{bottom:118px;font-size:12px}.need-track{height:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.topbar,.resident,.journal{z-index:3}.destinations,.help,#touch-controls,#activity,#toast{z-index:4}#room-labels{z-index:1}#camera-follow{position:absolute;right:32px;bottom:70px;z-index:4;padding:10px 16px;color:var(--gold);font-size:12px}#camera-follow:hover{background:#29414b}@media(max-width:700px){#camera-follow{right:12px;bottom:235px;padding:9px 12px;font-size:11px}}

#destination-buttons{overflow-x:auto;max-width:calc(100vw - 80px);padding-bottom:5px}.destination{flex-shrink:0}#conversation{position:absolute;z-index:5;right:28px;top:330px;width:290px;padding:18px}#conversation p{font-size:14px;line-height:1.7;margin-top:0}.topics{display:flex;gap:8px}#conversation button{background:#d7b98322;border:1px solid #d7b98355;border-radius:8px;padding:8px;color:#e8d1a5}#speech-form label{display:block;font-size:11px;color:#adbec5;margin:14px 0 7px}#speech-form>div{display:flex;gap:6px}#speech-input{min-width:0;width:100%;background:#10232c;border:1px solid #647782;border-radius:6px;color:white;padding:9px}#speech-form button{white-space:nowrap}@media(max-width:700px){#conversation{right:12px;top:290px;width:min(290px,calc(100vw - 24px));padding:12px}#destination-buttons{max-width:calc(100vw - 40px)}#camera-follow{bottom:265px}}

#door-button{width:100%;padding:9px 14px;margin-bottom:8px;background:#c9b075;color:#182d32;border-radius:8px;font-size:14px;font-weight:600}#door-label{z-index:2;border-color:#cfb578;color:#efdca7}#street-panel{position:absolute;right:28px;top:325px;padding:18px;width:240px;z-index:3}#street-panel b{font-size:18px}#street-panel p{font-size:14px;color:#c0d2cb}#street-status{display:block;color:#e6d497;font-size:14px}#street-panel small{display:block;margin-top:12px;font-size:12px;color:#9bacb0}#street-places{display:flex;gap:8px;overflow-x:auto;margin-bottom:8px}#street-places button{white-space:nowrap;padding:8px 12px;border:1px solid #718884;border-radius:8px;background:#29453f;color:#eee1c4;font-size:14px}#scene-transition{position:absolute;inset:0;background:#152d31;display:grid;place-items:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .4s;color:#e6d1a2;font-size:22px;letter-spacing:.1em}#scene-transition.show{opacity:1;pointer-events:auto}#activity,#toast{bottom:235px}@media(max-width:700px){#street-panel{right:12px;top:278px;width:172px;padding:12px}#street-panel b{font-size:16px}#street-panel p{font-size:12px}#street-panel small{font-size:11px}.destinations{bottom:15px}#touch-controls{bottom:200px}#activity,#toast{bottom:215px}#conversation{top:285px}#camera-follow{bottom:305px}}

#mall-enter{width:100%;padding:9px 14px;margin-bottom:8px;border:1px solid #d3b774;border-radius:8px;background:#2a5b55;color:#f1dfba;font-size:14px}#mall-label{z-index:2;color:#f5dfb4;border-color:#d3b774}

/* Collapsed by default; the center of the game stays unobstructed. */
#action-toggle{position:absolute;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:6;min-height:44px;padding:10px 19px;color:var(--gold);font-size:14px;border-color:#cbb77e77}
#action-menu{left:auto;right:24px;bottom:130px;transform:none;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 230px);padding:12px;overflow-y:auto;overscroll-behavior:contain;z-index:6;background:rgba(17,32,42,.96)}
.dock-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.dock-heading strong{font-size:14px;font-weight:500;color:#d8e2df}#action-close{width:44px;height:44px;background:none;color:var(--muted);font-size:24px}
#action-menu #destination-buttons,#action-menu #street-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:none;overflow:visible;padding-bottom:0}
#action-menu .destination{min-width:0;min-height:44px;flex-direction:row;gap:8px;padding:8px 9px;font-size:14px;text-align:left}#action-menu .destination svg{width:20px;height:20px;flex-shrink:0}#action-menu .destination:hover{transform:none}
#action-menu #street-places button{white-space:normal;padding:8px;min-height:44px}#action-menu #door-button,#action-menu #mall-enter{min-height:44px}
#camera-follow{right:24px;bottom:78px;min-height:40px}#activity{left:24px;right:auto;bottom:65px;transform:none;width:280px;max-width:calc(100vw - 140px)}#toast{bottom:56px;max-width:calc(100vw - 290px);padding:9px 16px;font-size:12px}.help{bottom:18px;right:145px}.help span{white-space:nowrap}
@media(max-width:700px){#action-toggle{right:12px;bottom:max(16px,env(safe-area-inset-bottom));padding:10px 16px}#action-menu{right:12px;bottom:120px;width:280px;max-height:calc(100dvh - 205px)}#camera-follow{right:12px;bottom:68px;min-height:40px}#touch-controls{bottom:22px}#activity{left:12px;right:auto;bottom:135px;width:250px;max-width:calc(100vw - 24px)}#toast{bottom:140px;max-width:calc(100vw - 32px);font-size:12px}}