.scenic-city{background:#d7dfc3;--glass:#fffbeeeb;--line:#fff9e2d9;--ink:#325344}
/* One-line signboards sit on facades; complete names remain in Điểm đến. */
.scenic-city .city-facade-sign{position:absolute;left:0;top:0;box-sizing:border-box;display:block;pointer-events:none;margin:0;padding:0 10px;border:1px solid #d8b77c;border-radius:3px;background:linear-gradient(180deg,#53634b,#314536);box-shadow:0 2px 3px #172b3560,inset 0 0 0 2px #ffffff0a;color:#fff3cf;font-family:Arial,sans-serif;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px #152c2f;letter-spacing:.15px}
.scenic-city .city-facade-sign:before,.scenic-city .city-facade-sign:after{content:'';position:absolute;top:50%;width:2px;height:2px;border-radius:50%;background:#e7c38c;transform:translateY(-50%)}
.scenic-city .city-facade-sign:before{left:4px}.scenic-city .city-facade-sign:after{right:4px}
.scenic-city .city-facade-landmark{background:linear-gradient(180deg,#78634c,#514230);border-color:#d8bc88}
.scenic-city .city-facade-sign.selected{border-color:#fff0b8;box-shadow:0 0 0 2px #e9c27680,0 2px 4px #203a32a0}
.scenic-city .city-facade-sign[hidden]{display:none}
/* The small map is optional and its handle can be dragged or moved with keys. */
.scenic-city .city3d-minimap{width:180px;padding:7px;border-radius:12px;z-index:24;max-width:calc(100% - 20px);box-shadow:0 8px 28px #203e3838}
.scenic-city .city3d-minimap[hidden]{display:none!important}
.scenic-city .city3d-mini-head{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.scenic-city .city3d-mini-head #city3dMiniDrag{flex:1;text-align:left;cursor:grab;touch-action:none;user-select:none;padding:7px 5px;font:600 10px Arial,sans-serif;letter-spacing:0;color:#375543;background:#e7ebdc;border-radius:6px}
.scenic-city .city3d-mini-head #city3dMiniDrag>span{font-size:16px;margin-right:5px;vertical-align:middle}
.scenic-city .city3d-mini-head #city3dMiniClose{width:30px;height:32px;font-size:23px;padding:0;background:#ede6d5;border-radius:6px;flex-shrink:0}
.scenic-city .city3d-minimap.is-dragging #city3dMiniDrag{cursor:grabbing;background:#d6e3ca}
.scenic-city .city3d-minimap #city3dMiniFit{font:600 10px Arial,sans-serif;padding:9px 0 3px;letter-spacing:0}
.scenic-city #city3dMiniToggle svg{width:18px;height:18px}.scenic-city #city3dMiniToggle.active{background:#315943;color:#fff4d8}
@media(max-width:700px){.scenic-city .city3d-minimap{width:158px}.scenic-city .city3d-minimap #city3dMiniFit{font-size:9px}}
.scenic-city .city3d-vignette{background:linear-gradient(180deg,#faf4df70,transparent 25%,transparent 75%,#36533218);box-shadow:inset 0 0 100px #f6e4bc40}
.scenic-city .city3d-brand{gap:18px}.scenic-city .city3d-brand h2{font-size:24px;letter-spacing:-.4px}.scenic-city .city3d-brand small{color:#687657}
.scenic-city .city3d-chapter{display:none}.scenic-city .city3d-toolbar{top:109px}
.scenic-city .city3d-place-label{padding:6px 11px;background:#fff7e2e8;border:1px solid #fff9e9;box-shadow:0 3px 14px #344c2f18;border-radius:20px}
.scenic-city .city3d-place-label span{font-size:12px;letter-spacing:.5px;color:#4a6048}.scenic-city .city3d-place-label b{font-size:8px;margin-top:2px;color:#6d785e}.scenic-city .city3d-place-label:after{display:none}
.scenic-city .city3d-place-label.selected{background:#355d48}.scenic-city .city3d-place-label.selected span,.scenic-city .city3d-place-label.selected b{color:#fff5d8}
.scenic-city .city3d-instructions{color:#425a3b}.scenic-city .city3d-brake{font-size:17px}
.scenic-city .city3d-trial{top:161px}.scenic-city .city3d-camera #city3dRotate{font-size:16px}
@media(max-width:700px){.scenic-city .city3d-brand h2{font-size:14px;max-width:129px}.scenic-city .city3d-brand{gap:10px}.scenic-city .city3d-toolbar{top:max(86px,calc(env(safe-area-inset-top) + 68px))}.scenic-city .city3d-place-label{padding:5px 8px}.scenic-city .city3d-place-label span{font-size:10px}.scenic-city .city3d-place-label b{font-size:7px}.scenic-city .city3d-trial{top:133px}.scenic-city .city3d-notice{top:172px}}
.scenic-city .city3d-portrait{width:48px;height:48px;border-radius:50%;background:#e3dfc7;border:1px solid #fff5d9;object-fit:cover;margin-left:-8px}.scenic-city.is-driving .city3d-portrait{display:none}.scenic-city .city3d-vehicle{gap:12px}.scenic-city .city3d-speed{min-width:40px;padding-right:12px}
@media(max-width:700px){.scenic-city .city3d-portrait{width:43px;height:43px}.scenic-city .city3d-vehicle{gap:10px}.scenic-city .city3d-speed{min-width:37px;padding-right:10px}}
.city-online-badge{position:absolute;z-index:15;top:166px;left:32px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 64px);padding:10px 14px;border:1px solid #f7f2de;border-radius:18px;background:#fff9e8ed;color:#375543;box-shadow:0 4px 20px #24463516;font-size:11px}.city-online-badge>i{width:7px;height:7px;background:#c39858;border-radius:50%}.city-online-badge.connected>i{background:#3c9e70}.city-online-badge>b{font-size:10px;margin-left:5px}.city-social{position:absolute;z-index:35;right:28px;top:165px;width:360px;max-height:calc(100% - 195px);overflow:auto;overscroll-behavior:contain;border-radius:22px;background:#fffbef;box-shadow:0 16px 70px #183e3b40;padding:20px;color:#315744;border:1px solid #fff}.city-social header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.city-social h3{font-family:Georgia,serif;font-size:23px;margin:5px 0 8px}.city-social header small{font-size:8px;letter-spacing:1px;color:#76836a}.city-social button{border:1px solid #d8deca;border-radius:10px;background:#f1f3e7;color:#315744;cursor:pointer;padding:8px 10px;font:inherit;font-size:11px}.city-social header button{font-size:20px;border:0;background:none}.city-social p{font-size:12px;line-height:1.6;margin:8px 0}.city-social #socialStatus{padding:8px 10px;background:#e7efdf;border-radius:9px;color:#43684a}.city-social form{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:13px 0}.city-social label{font-size:9px;letter-spacing:1px;width:100%;color:#6b795c}.city-social input{width:95px;flex:1;min-width:0;padding:9px;border:1px solid #cdd8c3;border-radius:8px;background:white;color:#315744;font:inherit;font-size:12px}.city-social nav{display:flex;gap:4px;padding-bottom:10px;border-bottom:1px solid #e2e6d6}.city-social nav button{flex:1;border:0;background:transparent}.city-social nav .active,.city-social #socialSend{background:#315f4b;color:white}.city-social #socialCount{margin-left:5px;background:#dbe9d5;color:#335c3a;padding:2px 5px;border-radius:8px}.social-help,.social-note{color:#7a806e}.city-social .social-note{font-size:10px;line-height:1.6}.social-self{background:#e8efde;padding:11px;border-radius:10px;font-size:12px}.social-self small{display:block;margin-top:4px;font-size:10px}.city-social article{display:flex;gap:5px;align-items:center;padding:12px 0;border-bottom:1px solid #eaedde}.city-social article>div{flex:1;min-width:0}.city-social article b{font-size:13px}.city-social article small{display:block;margin-top:4px;font-size:10px;color:#70806b}.city-social article i{display:inline-block;width:6px;height:6px;background:#429569;border-radius:50%;margin-right:5px}.social-empty{color:#7e856e;padding:12px 0}.social-recipient{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:12px}.social-recipient b{font-size:11px}.social-messages{height:160px;overflow:auto;padding:8px 2px;overscroll-behavior:contain}.social-messages>div{max-width:86%;margin:8px 0;background:#eaf0e1;border-radius:10px;padding:8px 10px;overflow-wrap:anywhere}.social-messages>div.mine{margin-left:auto;background:#d8e6d6}.social-messages small{font-size:9px;color:#6e806a}.social-messages p{margin:3px 0;font-size:14px}.city-social details{font-size:11px;border-top:1px solid #e2e6d6;padding-top:9px}.social-phrases{display:grid;gap:5px;max-height:180px;overflow:auto;margin-top:8px}.social-phrases button{text-align:left;background:white}.social-phrases b{display:block;font-size:13px}.social-phrases small{display:block;font-size:10px;line-height:1.5;color:#74806b;margin-top:3px}.city-social textarea{width:100%;resize:vertical;max-height:120px;background:#fff;border:1px solid #cbd8c1;border-radius:9px;padding:10px;font:inherit;color:#2e503f;font-size:14px}.city-social form>div{display:flex;gap:6px;width:100%;justify-content:space-between}.city-social #socialFeedback{font-size:11px;color:#9c682c}.city-social button:disabled{opacity:.5;cursor:wait}.city-social-open .city3d-camera{display:none}.city-player-labels{position:absolute;inset:0;z-index:8;pointer-events:none}.city-player-label{position:absolute;top:0;left:0;pointer-events:auto;background:#2a684deb;color:white;border:1px solid #ddf3d3;border-radius:12px;padding:5px 9px;max-width:140px;box-shadow:0 2px 8px #24412f40;white-space:nowrap}.city-player-label small{display:block;font-size:8px;color:#d7eccf}.city-player-label b{display:block;font-size:11px;margin-top:1px}.city-player-label[hidden]{display:none}.city-speech{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);max-width:200px;min-width:110px;white-space:normal;overflow-wrap:anywhere;background:#fffcf0;color:#315744;font-size:12px;line-height:1.5;padding:9px;border-radius:12px;box-shadow:0 2px 15px #294b3420}.city-map-open #greetNearby{display:none!important}
@media(max-width:700px){.city-online-badge{top:136px;left:14px;padding:8px 10px;max-width:calc(100% - 28px);font-size:10px}.scenic-city .city3d-trial{top:180px}.city-social{top:180px;left:12px;right:12px;width:auto;max-height:calc(100% - 205px);padding:15px;border-radius:18px}.city-social h3{font-size:21px}.city-social-open .city3d-drivepad,.city-social-open .city3d-brake,.city-social-open .city3d-minimap,.city-social-open .city3d-vehicle{visibility:hidden}.city-player-label{max-width:112px;padding:4px 7px}.city-player-label b{font-size:10px}.city-player-label small{font-size:7px}.social-messages{height:135px}}
.scenic-city .city3d-place-label b{max-width:145px;white-space:normal;line-height:1.4}.scenic-city .city3d-brand h2{font-size:22px}@media(max-width:700px){.scenic-city .city3d-brand h2{font-size:13px}.scenic-city .city3d-place-label b{max-width:110px}.scenic-city .city3d-brand small{font-size:5px}}

/* Landmarks read first in Vietnamese, with optional Chinese beneath. */
.scenic-city .city-landmark-label{background:#fff4d9f5;border-color:#d6be86;box-shadow:0 4px 16px #76552c25;display:flex;flex-direction:column-reverse;border-radius:11px}
.scenic-city .city-landmark-label[hidden]{display:none}.scenic-city .city-landmark-label b{font-size:11px;color:#725434;max-width:170px}.scenic-city .city-landmark-label span{font-size:8px;color:#83755d;margin-top:3px}
.landmark-portrait{width:100%;max-width:280px;height:240px;position:relative;overflow:hidden;margin:0 auto 18px}.landmark-portrait img{position:absolute;width:200%;max-width:none;top:0;height:auto}.landmark-description{font-size:14px;line-height:1.8;color:#53644c}
@media(max-width:700px){.scenic-city .city3d-toolbar{gap:5px;max-width:calc(100% - 24px);overflow-x:auto;padding-bottom:5px;white-space:nowrap}.scenic-city .city3d-toolbar button{flex-shrink:0;padding:8px 10px}.scenic-city .city-landmark-label b{font-size:9px}.scenic-city .city-landmark-label span{font-size:7px}.landmark-portrait{height:200px;max-width:235px}}

.scenic-city .city3d-toolbar{scrollbar-width:none}.scenic-city .city3d-toolbar::-webkit-scrollbar{display:none}

/* Northern Lạng Sơn district and spa reception. */
.landmark-art{display:block;width:100%;height:250px;margin:0 auto 10px}.landmark-source{font-size:11px;color:#6b7c64}.landmark-source a{color:#436954}.landmark-location{display:inline-block;padding:5px 9px;background:#e7eddd;border-radius:7px;font-size:10px;letter-spacing:1px;color:#6b765d}.spa-phrases{display:flex;gap:7px;overflow-x:auto;margin:15px 0;padding-bottom:5px}.spa-phrases button{white-space:nowrap;border:1px solid #d9ddcb;background:#faf8ee;border-radius:20px;padding:8px 12px;color:#405e4a}.spa-phrases .active{color:white;background:#365e4a}.spa-reply{margin:14px 0;padding:14px;border-radius:12px;background:#e8efdf;color:#31533d;line-height:1.7}.spa-reply small{display:block}.lac-hien-room{position:fixed;inset:0;z-index:70;background:#253a31;color:#fff6de}.lac-hien-room canvas{width:100%;height:100%;touch-action:none}.lac-hien-room header{position:absolute;top:max(25px,env(safe-area-inset-top));left:30px;right:30px;display:flex;justify-content:space-between;gap:15px;align-items:start;text-shadow:0 2px 15px #243a30}.lac-hien-room header small{font-size:11px;letter-spacing:3px}.lac-hien-room h2{font-family:Georgia,serif;font-weight:400;font-size:32px;margin:9px 0}.lac-hien-room button{border:1px solid #f1e6ca70;background:#fff9e9ed;color:#315440;border-radius:10px;padding:12px 16px;font:inherit;cursor:pointer}.spa-reception{position:absolute;left:30px;bottom:80px;display:grid;gap:7px;padding:20px;max-width:360px;border-radius:18px;background:#fffaebed;color:#365340;box-shadow:0 10px 40px #1c382b25}.spa-reception>span{font-size:9px;letter-spacing:2px;color:#8d805f}.spa-reception>b{font-size:23px}.spa-reception>small{font-size:11px;line-height:1.6}.spa-reception button{background:#365c46;color:#fff8e4;margin-top:6px}.lac-hien-room footer{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;font-size:11px;gap:12px}.spa-room-open #world,.spa-room-open #hud,.spa-room-open #joystick,.spa-room-open .game-controls{visibility:hidden}.spa-room-open #panelBackdrop{z-index:90}.spa-room-open #panel{z-index:91}.scenic-city .city3d-toolbar{max-width:calc(100% - 60px)}
@media(max-width:700px){.lac-hien-room header{left:18px;right:18px;top:max(20px,env(safe-area-inset-top))}.lac-hien-room header small{font-size:8px;letter-spacing:1px}.lac-hien-room h2{font-size:23px;max-width:190px}.lac-hien-room header button{font-size:11px;padding:10px}.spa-reception{left:14px;right:14px;bottom:80px;max-width:none;padding:14px}.spa-reception>b{font-size:19px}.spa-reception>small{font-size:10px}.spa-reception button{font-size:12px;padding:10px}.lac-hien-room footer{left:16px;right:16px;font-size:9px}.lac-hien-room footer button{font-size:10px;padding:10px}.scenic-city .city3d-toolbar{max-width:calc(100% - 28px)}}

@media(max-width:700px){.spa-reception{top:125px;bottom:auto}.scenic-city .city-landmark-label b{max-width:64px;font-size:8px}.scenic-city .city-landmark-label span{max-width:70px;white-space:normal;font-size:6px}.scenic-city .city-landmark-label{padding:5px 6px}}

.spa-reception .spa-job-note{border-top:1px solid #d2d9c4;padding-top:9px;margin-top:5px;color:#6c7256}.spa-reception .spa-casual-talk{background:transparent;color:#365c46;margin-top:0;padding:7px;border:0;font-size:11px}

/* The same directional pad now explicitly controls the camera in sightseeing mode. */
.city3d-browse-hint{display:none;position:absolute;bottom:30px;left:200px;right:225px;max-width:480px;padding:15px 18px;border:1px solid #ffffef;border-radius:16px;background:#fffbeded;box-shadow:0 8px 28px #24463516;color:#365744}
.city3d-browse-hint b{font-size:10px;letter-spacing:1px}.city3d-browse-hint span{display:block;font-size:11px;line-height:1.65;margin:7px 0}.city3d-browse-hint button{padding:7px 0;background:transparent;color:#315c43;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.is-browsing .city3d-browse-hint{display:block}.is-browsing .city3d-vehicle,.is-browsing .city3d-brake,.is-browsing .city3d-instructions{display:none}
.is-browsing .city3d-stage canvas{cursor:grab}.is-panning .city3d-stage canvas{cursor:grabbing}
.is-browsing .city3d-place-label,.is-browsing .city-player-label{pointer-events:none}
.is-browsing .city3d-drivepad>span{font-size:7px;line-height:1.5;text-align:center;font-weight:700;letter-spacing:0}
.scenic-city #city3dBrowse:not(.active){background:#f0e6c9;border-color:#d6c898;color:#3b5944}
@media(max-width:700px){.city3d-browse-hint{left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));padding:11px 14px;max-width:none}.city3d-browse-hint b{font-size:9px}.city3d-browse-hint span{font-size:10px;margin:4px 0}.city3d-browse-hint button{font-size:10px;padding:3px 0}.is-browsing .city3d-drivepad{bottom:133px}.is-browsing .city3d-minimap{bottom:140px}.scenic-city .city3d-toolbar #city3dBrowse{order:-1;min-width:93px}}
@media(max-height:540px) and (min-width:701px){.city3d-browse-hint{bottom:16px;padding:10px 14px}.city3d-browse-hint span{font-size:10px}.is-browsing .city3d-drivepad{height:115px;width:115px}}