*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#172e35;color:#223b42;font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif}body{display:flex;align-items:center;justify-content:center}button{font:inherit;cursor:pointer;border:0}#app{width:min(100vw,177.7778vh);height:min(100vh,56.25vw);min-height:460px;background:#f5f3ec;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 80px #07171b50}header{height:90px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 34px;border-bottom:1px solid #dddcd2}.brand{display:flex;align-items:center;gap:15px}.seal{font-family:Georgia,serif;font-size:21px;color:#a58043;border:1px solid #bda46f;border-radius:50%;width:51px;height:51px;display:grid;place-items:center}.brand small{font-size:9px;letter-spacing:2.2px;color:#858777}h1{font-size:23px;font-weight:600;margin:6px 0 0}h1 span{font-size:16px;font-weight:400;margin-left:18px;color:#758077}.topactions{display:flex;gap:8px}.topactions button,#reset{background:transparent;color:#5c706e;font-size:12px;padding:10px}.topactions button:hover,#reset:hover{background:#e6e7dc;border-radius:6px}#viewport{position:relative;flex:1;min-height:0;background:#eaece5}#scene{width:100%;height:100%;display:block;touch-action:none}#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;background:#fffdf2ed;color:#254b50;border:1px solid #b6c8bf;border-radius:5px;padding:6px 11px;font-size:12px;white-space:nowrap;box-shadow:0 3px 8px #203e3e15}.label:after{content:'';position:absolute;left:50%;top:100%;height:12px;border-left:1px solid #779e95}.viewbadge{position:absolute;top:22px;left:28px;display:flex;gap:10px;align-items:center;font-size:11px;color:#62746e}.viewbadge i{width:6px;height:6px;border-radius:50%;background:#b28d4a}.divider{color:#b8c3b7}#panel{position:absolute;left:28px;top:66px;width:226px;padding:22px;background:#f9f8f0ed;box-shadow:0 8px 25px #254d4310;border:1px solid #fff;border-radius:9px}#panel>small{color:#a18551;font-size:9px;letter-spacing:1.5px}h2{font-size:26px;line-height:1.4;margin:12px 0;font-weight:500}#panel p{font-size:12px;line-height:1.85;color:#6b7b74;margin:0 0 18px}#zoneStats{display:flex;gap:24px;border-top:1px solid #dcded3;padding-top:16px;margin-bottom:20px}#zoneStats span{font-family:Georgia,serif;font-size:22px;color:#54716a}#zoneStats small{display:block;font-family:inherit;font-size:10px;color:#8a9384;margin-top:5px}.primary{background:#285c59;color:#fff;padding:12px 15px;border-radius:5px;width:100%;font-size:12px;text-align:left}.primary span{float:right}#panel p.hint{font-size:10px;line-height:1.7;margin:12px 0 0;color:#8d968b}nav{height:68px;display:flex;padding:0 28px;gap:8px;align-items:center;border-top:1px solid #d8ddd1;background:#f8f7f0;flex-shrink:0}nav button{flex:1;text-align:left;padding:13px 12px;background:transparent;border-radius:6px;font-size:12px;color:#738179;white-space:nowrap}nav b{font-weight:400;font-size:10px;margin-right:9px;color:#a58f67}nav button.selected{background:#285c59;color:#fff}nav button.selected b{color:#bcd2c5}nav button:hover:not(.selected){background:#e9ece2}footer{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;font-size:9px;color:#8b9387;letter-spacing:.6px;flex-shrink:0}footer div{display:flex;align-items:center;gap:20px}footer input{accent-color:#285c59;vertical-align:middle}footer label{cursor:pointer}#reset{font-size:10px;padding:3px}#minimap{position:absolute;right:23px;bottom:24px;background:#f7f6eeeb;border:1px solid #fff;border-radius:7px;padding:8px 10px 5px;box-shadow:0 4px 20px #34544510}#map{display:block;width:190px;height:103px}#minimap span{display:block;font-size:9px;color:#829084;text-align:center;margin-top:3px}.scenefoot{position:absolute;bottom:15px;left:28px;color:#86918a;font-size:9px;letter-spacing:.5px}#walkControls{position:absolute;bottom:30px;left:50%;text-align:center}#walkControls button{background:#f8f7efdb;border:1px solid #bfcbbf;color:#2d605b;width:36px;height:34px;border-radius:5px;margin:2px;touch-action:none}#loading{position:absolute;inset:0;background:#eaece5;display:grid;place-items:center;color:#557367;font-size:16px}dialog{border:0;background:#faf9f1;color:#304c4b;border-radius:12px;max-width:90vw;max-height:90vh;padding:28px;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#132d36aa}#closeModal{position:absolute;right:12px;top:8px;background:#fff9;font-size:27px;color:#54716a;border-radius:50%;width:35px;height:35px}dialog img{max-width:82vw;max-height:77vh;object-fit:contain}dialog p,dialog li{font-size:14px;line-height:1.9}dialog h3{font-size:24px;font-weight:500}a{color:#376c65}@media(max-width:900px){header{height:64px;padding:0 18px}.brand small{display:none}h1{font-size:18px}h1 span{font-size:12px;margin-left:10px}.seal{width:37px;height:37px;font-size:16px}#panel{left:15px;top:50px;width:180px;padding:14px}h2{font-size:21px}#panel p{font-size:10px}#zoneStats{display:none}.viewbadge{top:16px;left:15px}nav{height:52px;padding:0 10px;gap:1px}nav button{font-size:10px;padding:12px 6px}nav b{margin-right:4px}footer{padding:0 15px}.note{display:none}#minimap{right:12px;bottom:20px}#map{width:140px;height:76px}.topactions button{font-size:10px;padding:6px}}@media(orientation:portrait){#app{width:100vw;height:100dvh;min-height:0}h1 span{display:none}.topactions{gap:0}.topactions button{font-size:9px}#panel{top:50px;width:165px}#panel p{display:none}#panel .hint{display:block}h2{font-size:19px}nav{height:90px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}footer{height:45px}footer>span{display:none}footer div{width:100%;justify-content:center;gap:12px}.scenefoot{max-width:170px;left:15px;font-size:8px}#minimap{right:8px;bottom:15px}#walkControls{left:20px;bottom:45px}}
@media(max-height:800px) and (orientation:landscape){#panel{padding:18px;top:61px;width:215px}#panel h2{font-size:23px;margin:8px 0}#panel p{font-size:11px;line-height:1.7;margin-bottom:12px}#zoneStats{padding-top:11px;margin-bottom:12px}#zoneStats span{font-size:20px}#panel .hint{font-size:9px;margin-top:9px}.scenefoot{bottom:8px}}

/* Compact, touch-first navigation. Scene stays primary on every screen. */
#panelToggle{display:flex;width:100%;align-items:center;justify-content:space-between;background:transparent;color:#385c58;font-size:11px;padding:0 0 12px}#panelToggle span{font-size:17px}#panel.collapsed{padding:12px 14px;width:194px;top:56px}#panel.collapsed #panelToggle{padding:0 0 8px}#panel.collapsed>small,#panel.collapsed>h2,#panel.collapsed>p,#panel.collapsed>#zoneStats{display:none}#panel.collapsed .primary{padding:10px 12px;font-size:11px}#panel:not(.collapsed){max-height:calc(100% - 86px);overflow:auto}#joystick{position:absolute;left:24px;bottom:34px;width:106px;height:106px;border:1px solid #fff8;border-radius:50%;background:#f5f5e94d;touch-action:none;user-select:none;box-shadow:0 3px 15px #132d3620}#stick{position:absolute;left:31px;top:31px;width:44px;height:44px;border-radius:50%;background:#285c59dd;border:2px solid #fff9;box-shadow:0 3px 7px #233b3320;pointer-events:none}#joystick small{position:absolute;bottom:7px;text-align:center;width:100%;font-size:9px;color:#254d48;pointer-events:none}#travelHint{position:absolute;left:50%;top:20px;transform:translateX(-50%);background:#f8f7efde;border-radius:30px;padding:8px 15px;color:#48685f;font-size:11px;pointer-events:none;white-space:nowrap}#walkControls{left:50%;bottom:20px;transform:translateX(-50%)}#walkControls button{width:44px;height:42px}#minimap{cursor:pointer}button{touch-action:manipulation}#app:fullscreen{width:100vw;height:100vh}.label{font-size:11px;padding:5px 9px}.scenefoot{pointer-events:none}
@media(pointer:coarse),(max-width:700px),(max-height:500px){#app{width:100vw;height:100dvh;min-height:0}header{height:51px;padding:0 12px}.seal{width:30px;height:30px;font-size:13px}.brand{gap:8px}h1{font-size:16px;margin:0}h1 span,.brand small{display:none}.topactions button{padding:6px;font-size:10px}#panel.collapsed{left:10px;top:41px;width:158px;padding:9px 10px}#panelToggle{font-size:10px}#panel.collapsed #panelToggle{padding-bottom:5px}#panel.collapsed .primary{padding:9px;font-size:10px}#panel:not(.collapsed){left:10px;top:41px;width:230px;padding:15px}#panel:not(.collapsed)>p{display:block}#panel:not(.collapsed)>h2{font-size:21px}.viewbadge{left:12px;top:13px;font-size:9px;gap:7px}#travelHint{top:12px;left:auto;right:10px;transform:none;font-size:9px;padding:6px 9px}nav{height:48px;display:flex;overflow:auto;gap:4px;padding:0 8px;scrollbar-width:none}nav button{flex:0 0 auto;font-size:11px;padding:11px 12px}nav b{font-size:9px}footer{height:30px;padding:0 9px}footer div{justify-content:space-between;gap:8px;width:100%}footer label,#reset{font-size:9px}footer>span{display:none}#minimap{right:10px;bottom:18px;padding:5px}#map{width:112px;height:61px}#minimap span{font-size:7px}#joystick{left:19px;bottom:33px;width:100px;height:100px}#stick{left:28px;top:28px}.scenefoot{left:10px;bottom:6px;font-size:7px;max-width:none}#walkControls{display:none!important}.label{font-size:10px;padding:4px 7px}}
@media(orientation:landscape) and (max-height:500px){header{height:39px}nav{height:40px}footer{height:24px}#panel.collapsed{top:37px;width:155px;padding:6px 9px}#panel.collapsed #panelToggle{padding-bottom:2px}#panel.collapsed .primary{padding:7px}#joystick{width:88px;height:88px;bottom:19px}#stick{left:22px;top:22px}#minimap{bottom:14px}#map{width:100px;height:54px}}

#streetNav{position:absolute;inset:0;pointer-events:none;overflow:hidden}#streetNav button{position:absolute;transform:translate(-50%,-50%) scaleY(.55);width:64px;height:64px;padding:8px;border-radius:50%;border:1px solid #ffffffb0;background:#244e4869;box-shadow:0 3px 16px #0002;pointer-events:auto;touch-action:manipulation;transition:background .15s}#streetNav button:hover,#streetNav button:active{background:#1e6c60c9}#streetNav svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}#streetNav button[data-direction="-1"] svg{transform:rotate(-38deg)}#streetNav button[data-direction="1"] svg{transform:rotate(38deg)}#tapTarget{position:absolute;width:36px;height:36px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 8px #6bbfa77a;transform:translate(-50%,-50%) scaleY(.5);display:none}#walkControls{display:none!important}#joystick[hidden],#streetNav[hidden]{display:none!important}@media(max-width:700px),(max-height:500px){#streetNav button{width:66px;height:66px}footer div{gap:4px}footer label{font-size:8px}}