/* FULLSCREEN + CITY LOGIN — lớp giao diện riêng, không sửa dữ liệu tài khoản.
   Đổi màu bằng các biến dưới đây. Không cần CDN, font hoặc ảnh bên ngoài. */
:root{--city-ink:#123842;--city-teal:#117e73;--city-mint:#a7f4d9;--city-paper:#f6f5ee;--edge:14px}
html,body{width:100%;height:100%;min-height:0;margin:0;overflow:hidden;background:#102a38}
body{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
button:focus-visible,input:focus-visible{outline:3px solid #49ad9c;outline-offset:3px}
.game-shell{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;height:var(--visual-height);margin:0;padding:0;display:block;min-height:0}
.canvas-wrap{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;border-radius:0;overflow:hidden;isolation:isolate;background:#233f42}
#game{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;touch-action:none}
.game-shell>.help{display:none}
body:not(.in-game) .game-shell{visibility:hidden;pointer-events:none}
/* Thanh trên trong suốt, bản đồ chạy bên dưới thay vì chiếm một hàng riêng. */
.topbar{position:absolute;z-index:17;top:max(14px,env(safe-area-inset-top));left:76px;right:188px;height:40px;min-height:0;display:flex;flex-wrap:nowrap;gap:14px;justify-content:space-between;padding:0;background:none;border:0;border-radius:0;box-shadow:none;pointer-events:none}
.topbar .account-bar{flex:1;min-width:0;line-height:1.3}
.topbar .brand{flex:0 0 auto;padding:7px 18px;text-align:center;border:1px solid #b8dacf38;border-radius:12px;background:#102d3bc9;backdrop-filter:blur(8px);max-width:38%}
.topbar .brand strong{font-size:13px;letter-spacing:2px;color:#b9f9df;white-space:nowrap}
.topbar .brand span{display:none}
#multiplayer-status{display:inline-flex;margin:0;padding:7px 10px;font-size:11px;color:#e9fff7;background:#123142c9;border:1px solid #b8dacf38;border-radius:10px;backdrop-filter:blur(8px);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.topbar #vehicle-status{flex:1;font-size:11px;text-align:right;text-shadow:0 2px 4px #071a24;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f6fffc}
.topbar button{pointer-events:auto}
.chat-toggle{left:var(--edge);top:var(--edge)}
.hud-tools{left:var(--edge);top:64px;max-height:calc(100% - 270px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0 5px 5px 0}
.hud-tools .hud-icon{flex:none}
.hud-icon{box-shadow:0 3px 14px #03131f55;backdrop-filter:blur(6px)}
.left-status-stack{bottom:max(16px,env(safe-area-inset-bottom));left:var(--edge)}
.actions{right:var(--edge);bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center;flex-direction:row;z-index:15;max-width:calc(100% - 270px)}
#fullscreen-btn{padding:0;width:38px;height:36px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #799cad;border-radius:10px;background:#17364bea;color:#fff;cursor:pointer}
#fullscreen-btn svg{width:20px;height:20px}
#toast{max-width:min(460px,calc(100% - 150px))}
.panel{z-index:80;background:#0618269c;backdrop-filter:blur(6px)}
.panel-card{border-radius:20px;background:#163041f7;box-shadow:0 22px 85px #02101c66;border:1px solid #81a6b68a}
.minimap-info{width:var(--mini-width)!important}
.online-widget{top:calc(var(--mini-height) + 49px);right:13px;max-height:calc(100% - var(--mini-height) - 130px)}
/* Màn hình chào: cảnh Canvas tự vẽ, không tạo request ảnh ngoài. */
#city-backdrop{position:fixed;inset:0;background:#183f50;pointer-events:none;overflow:hidden;z-index:90}
#city-scene{display:block;width:100%;height:100%;image-rendering:auto}
.city-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0829365e 0%,#12243c0a 46%,#071f3180 100%),linear-gradient(0deg,#061c29bb 0%,transparent 40%,#11213720 100%)}
.in-game #city-backdrop{display:none}
.city-auth{position:fixed;inset:auto 0 auto 0;top:var(--visual-top);height:var(--visual-height);display:block;background:transparent;backdrop-filter:none;padding:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;isolation:isolate}
.auth-masthead{position:absolute;top:max(26px,env(safe-area-inset-top));left:clamp(24px,5vw,100px);right:clamp(24px,5vw,100px);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3}
.portal-wordmark{display:flex;align-items:center;gap:12px;color:#edfff7;font-size:13px;font-weight:800;letter-spacing:1.8px;text-shadow:0 2px 5px #173646}
.portal-wordmark small{display:block;margin-top:4px;color:#c9dfdf;font-size:8px;font-weight:500;letter-spacing:2.5px}
.portal-mark{width:39px;height:39px;border:1px solid #aeeddf88;background:#0d453fa6;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:20px;letter-spacing:-3px;color:#e5fce9;box-shadow:inset 0 0 15px #90f2dc18}
.portal-mark>span{color:#78e0ca;transform:translateY(3px);font-size:14px;margin-right:3px}
.portal-fullscreen{display:grid;place-items:center;width:42px;height:42px;border:1px solid #d7f5ee7a;border-radius:13px;color:#eafffa;background:#153e4a77;cursor:pointer;backdrop-filter:blur(10px)}
.portal-fullscreen svg{width:22px;height:22px}.portal-fullscreen:hover{background:#14685d}
.auth-layout{width:100%;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);gap:clamp(40px,6vw,125px);align-items:center;padding:110px clamp(34px,7vw,140px) 84px;max-width:1800px;margin:0 auto}
.auth-intro{padding:0 0 30px;min-width:0;color:white;text-shadow:0 4px 24px #142e3a55}
.city-eyebrow{display:flex;gap:9px;align-items:center;font-size:10px;font-weight:750;letter-spacing:2.1px;color:#e0f6f0;margin-bottom:25px}
.city-eyebrow i{width:6px;height:6px;background:#acffe1;border-radius:50%;box-shadow:0 0 14px #9bffed}
.city-logo{font-family:Arial,"Segoe UI",sans-serif;font-size:clamp(56px,6.2vw,105px);letter-spacing:-4px;font-weight:950;line-height:.94;margin:0 0 26px;filter:drop-shadow(0 9px 0 #0d394566) drop-shadow(0 12px 24px #102f4b55);white-space:nowrap}
.city-logo>span{display:block;color:#f7f4e4;letter-spacing:-3px;-webkit-text-stroke:1px #fff8}
.city-logo>strong{display:block;position:relative;color:#a0f0d9;font-weight:950;letter-spacing:-4px;margin-top:8px;-webkit-text-stroke:1px #cdf8e899}
.logo-2d{display:inline-block;font-family:system-ui,sans-serif;font-size:14px;font-weight:800;letter-spacing:1px;line-height:1;margin-left:16px;padding:9px 9px;background:#fff3d4;color:#15584d;border:1px solid #f0d6b3;border-radius:7px;vertical-align:middle;transform:rotate(-5deg);-webkit-text-stroke:0}
.city-rule{width:47px;height:3px;background:#bcf6d9;box-shadow:54px 0 0 #c2ffe045;margin:34px 0 24px}
.city-tagline{font-size:clamp(22px,2.2vw,33px);line-height:1.35;font-weight:400;margin:0 0 17px;color:#edf9f4;letter-spacing:-.4px}.city-tagline strong{font-weight:780}
.city-caption{font-size:14px;line-height:1.8;color:#ddeded;margin:0;max-width:410px}
.city-features{display:flex;align-items:center;gap:15px;margin-top:32px;letter-spacing:2px;font-size:9px;color:#d9f7ed;font-weight:650}
.city-features i{width:3px;height:3px;border-radius:100%;background:#94c8bd}
.auth-card.city-card{position:relative;flex:none;width:100%;min-width:0;max-width:430px;padding:37px 34px 25px;border-radius:24px;border:1px solid #fff9;background:linear-gradient(140deg,#fffdf1f7,#e9f2eaf5);color:var(--city-ink);box-shadow:0 28px 90px #061b3266,0 0 0 7px #f3ffef08,inset 0 1px 0 #fff;margin:0;backdrop-filter:blur(20px);overflow:hidden}
.city-card::before{content:"";position:absolute;top:0;left:34px;width:50px;height:4px;background:#168c78;border-radius:0 0 3px 3px}
.card-kicker{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800;letter-spacing:1.7px;color:#547b71;margin-bottom:14px}
.card-dot{width:5px;height:5px;background:#1d9a7b;border-radius:50%}
.city-card h2{font-size:36px;line-height:1.15;letter-spacing:-1.5px;color:#173e3e;margin:0 0 9px;font-weight:800}.city-card h2>span{color:#1a9d7e}
.city-card p.auth-description{font-size:12px;line-height:1.6;margin:0 0 26px;color:#5a756d}
.city-card label{display:block;font-size:12px;font-weight:750;color:#23473f;line-height:1.5;margin:15px 0 7px}
.city-card .field-wrap{position:relative;display:flex;align-items:center}
.city-card .field-wrap>svg{position:absolute;left:14px;width:18px;height:18px;color:#6c8c81;pointer-events:none}
.city-card .field-wrap input{margin:0;width:100%;height:51px;min-height:51px;padding:12px 42px;border:1px solid #a4bdb1;border-radius:11px;background:#ffffffa6;box-shadow:inset 0 1px 2px #12382605;color:#143a32;font-size:15px;font-weight:500;transition:box-shadow .15s,border-color .15s;min-width:0}
.city-card .field-wrap input::placeholder{color:#829b91;font-size:13px;font-weight:400}
.city-card .field-wrap input:focus{border-color:#1c8c72;box-shadow:0 0 0 3px #459e7322;outline:none;background:#fffffff7}
#password-visibility{position:absolute;right:4px;top:4px;width:43px;height:43px;border:0;border-radius:9px;background:transparent;color:#628778;cursor:pointer;display:grid;place-items:center;padding:10px}
#password-visibility svg{width:20px;height:20px}#password-visibility:hover,#password-visibility[aria-pressed="true"]{color:#09745d;background:#3d996b12}
.city-card .auth-actions{display:flex;flex-direction:column;gap:0;margin-top:23px}
.city-card .auth-actions button{min-height:48px;font-size:14px;font-weight:750;border-radius:11px;flex:none;transition:background .15s,transform .15s}
.city-card .login-submit{display:flex;justify-content:center;align-items:center;gap:24px;background:linear-gradient(110deg,#146655,#20826c);border:1px solid #115942;color:#fffdf0;box-shadow:0 6px 12px #126e5427}
.city-card .login-submit:hover{background:linear-gradient(110deg,#0e5146,#136e60);transform:translateY(-1px)}
.city-card .login-submit span{font-size:21px;line-height:1}
.city-card .register-submit{background:transparent;color:#266450;border:1px solid #7caa98;box-shadow:none}
.city-card .register-submit:hover{background:#dae8df}
.city-card button:disabled{opacity:.6;cursor:wait;transform:none}
.signup-divider{display:flex;align-items:center;gap:12px;margin:17px 0;font-size:11px;color:#7a8f84}.signup-divider:before,.signup-divider:after{content:"";height:1px;flex:1;background:#cbd6c9}
.city-card #auth-message{font-size:11px;color:#566d62;line-height:1.55;margin:15px 0 0;min-height:0;overflow-wrap:anywhere}.city-card #auth-message:empty{display:none}
.auth-save-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:21px;padding-top:17px;border-top:1px solid #cbd7cd;color:#788c80;font-size:10px;letter-spacing:.2px}.auth-save-note svg{width:13px;height:15px}
.portal-footer{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:clamp(24px,5vw,100px);right:clamp(24px,5vw,100px);display:flex;justify-content:space-between;gap:20px;color:#d0e5e4b3;font-size:9px;letter-spacing:1px;pointer-events:none}
.portal-footer span:first-child{font-weight:750;letter-spacing:2px}
/* Ngoại hình lần đầu: giữ hai lựa chọn thật và dùng chính sprite trong game. */
#avatar-overlay{background:#062d3d70;backdrop-filter:blur(7px)}
.avatar-card{background:var(--city-paper);color:#214b45;border:1px solid #effbed;padding:30px;max-width:480px;box-shadow:0 20px 80px #092d4780}
.avatar-card h1{font-size:29px;color:#23453c;letter-spacing:-.8px}.avatar-card h1 span{color:#168c78}
.avatar-card p{font-size:13px;color:#63796f;line-height:1.6}.avatar-card .card-kicker{font-size:9px;margin-bottom:13px}
.avatar-card .avatar-options{border:0;padding:0;background:transparent;margin:22px 0}.avatar-options legend{color:#678276;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:9px}
.avatar-card .avatar-choice{background:#e3eae0;border:1px solid #b7cabe;gap:15px;padding:10px 14px;color:#284f42;position:relative}
.avatar-choice:has(input:checked){border-color:#20876e;box-shadow:0 0 0 2px #26806322;background:#e6f3e6}
.avatar-card .avatar-choice input{position:absolute;right:14px;top:15px;min-height:0;width:18px;height:18px;accent-color:#19785f}
.avatar-choice small{color:#668477}.avatar-preview{width:42px;height:63px;image-rendering:pixelated}
.avatar-card .avatar-confirm{background:#1a765e;border:1px solid #1b604e;color:#fff9e9}
/* Mobile: cùng thế giới, nhưng UI và form xếp gọn; không khóa zoom ở ô nhập. */
@media(max-width:1000px){.auth-layout{gap:30px;grid-template-columns:minmax(0,1fr) minmax(340px,390px);padding:110px 5vw 80px}.city-logo{font-size:65px;letter-spacing:-2px}.city-logo>span,.city-logo>strong{letter-spacing:-2px}.logo-2d{font-size:12px;margin-left:8px}.auth-card.city-card{padding:30px 27px 23px}.city-features{gap:9px;font-size:8px;letter-spacing:1px}.city-caption{font-size:12px}.city-eyebrow{font-size:8px;letter-spacing:1px}}
@media(max-width:800px),(pointer:coarse){
 .topbar{top:14px;left:65px;right:170px;padding:0;flex-wrap:nowrap;height:30px;gap:0;box-shadow:none}
 .topbar .brand{display:none}.topbar .account-bar{flex:1;max-width:100%;line-height:1.2;gap:0}
 .topbar #vehicle-status{display:none!important}#multiplayer-status{font-size:9px;padding:6px 7px;max-width:100%}
 .chat-toggle{top:12px;left:10px}.hud-tools{top:62px;left:10px;gap:8px;max-height:calc(100% - 300px)}
 .left-status-stack{left:10px;bottom:136px;width:155px;gap:5px}
 .actions{right:10px;bottom:148px;max-width:calc(100% - 175px);gap:5px;flex-wrap:wrap;flex-direction:row;justify-content:flex-end}
 .actions #logout-btn{min-height:36px}#fullscreen-btn{width:36px;min-width:36px;height:36px}
 #online-toggle{top:calc(var(--mini-height) + 45px);right:13px;min-height:32px;padding:6px 8px}
 .online-widget{top:calc(var(--mini-height) + 84px);right:13px;max-height:calc(100% - var(--mini-height) - 210px)}
 .minimap-info{width:var(--mini-width)!important;right:13px}
 .panel-card{max-height:calc(var(--visual-height) - 28px)}
}
@media(max-width:700px) and (orientation:portrait){
 .auth-masthead{top:max(19px,env(safe-area-inset-top));left:22px;right:22px}.portal-wordmark{font-size:10px;letter-spacing:1px;gap:8px}.portal-mark{width:32px;height:32px;border-radius:10px;font-size:17px}.portal-wordmark small{font-size:6px;letter-spacing:2px}.portal-fullscreen{width:36px;height:36px;border-radius:10px}
 .auth-layout{display:flex;flex-direction:column;gap:27px;align-items:center;justify-content:center;min-height:100%;padding:94px 22px 48px}
 .auth-intro{width:100%;max-width:430px;padding:0;text-align:center}.city-eyebrow,.city-rule,.city-caption,.city-features{display:none}
 .city-logo{font-size:56px;line-height:.95;letter-spacing:-1px;margin:0 0 13px}.city-logo>span,.city-logo>strong{letter-spacing:-2px}.city-logo>strong{margin-top:4px}.logo-2d{font-size:10px;padding:6px;margin-left:9px;border-radius:5px}
 .city-tagline{font-size:12px;line-height:1.5;margin:0;color:#d7f3ea;letter-spacing:.2px}.city-tagline br{display:none}.city-tagline strong{font-weight:600}
 .auth-card.city-card{padding:26px 24px 21px;width:100%;max-width:430px;border-radius:21px;margin:0}.city-card h2{font-size:29px}.city-card p.auth-description{font-size:11px;margin-bottom:18px}.card-kicker{font-size:8px;letter-spacing:1.3px;margin-bottom:11px}
 .city-card label{margin:12px 0 6px}.city-card .field-wrap input{font-size:16px;height:48px;min-height:48px}.city-card .auth-actions{margin-top:20px}.city-card .auth-actions button{min-height:46px;font-size:13px}.signup-divider{margin:13px 0}
 .city-card #auth-message{font-size:10px;margin-top:13px}.auth-save-note{margin-top:15px;padding-top:13px;font-size:9px}.portal-footer{display:none}
 .city-shade{background:linear-gradient(180deg,#0a2c3944,#061b2b88)}
}
@media(max-width:360px) and (orientation:portrait){.auth-layout{padding:84px 15px 24px;gap:19px}.auth-card.city-card{padding:23px 20px 20px}.city-logo{font-size:48px}.city-card h2{font-size:27px}.auth-masthead{left:17px;right:17px}.city-card .card-kicker{font-size:7px}.auth-save-note{margin-top:12px}}
@media(orientation:landscape) and (max-height:550px){
 .auth-layout{padding:58px max(26px,env(safe-area-inset-right)) 22px;gap:30px;grid-template-columns:minmax(220px,1fr) minmax(300px,350px);align-items:center}
 .auth-masthead{top:10px;left:24px;right:24px}.portal-wordmark{font-size:9px}.portal-wordmark small{display:none}.portal-mark{width:28px;height:28px;border-radius:8px;font-size:15px}.portal-fullscreen{width:30px;height:30px;border-radius:8px}.portal-fullscreen svg{width:18px}
 .auth-intro{padding:0}.city-logo{font-size:clamp(39px,6.6vw,62px);margin-bottom:14px}.city-eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:16px}.city-rule{display:none}.city-tagline{font-size:18px;margin:0}.city-caption,.city-features,.portal-footer{display:none}
 .auth-card.city-card{padding:20px 23px 17px;border-radius:17px}.card-kicker{font-size:7px;margin-bottom:6px}.city-card h2{font-size:25px;margin-bottom:4px}.city-card p.auth-description{font-size:10px;margin:0 0 10px}
 .city-card label{font-size:11px;margin:7px 0 4px}.city-card .field-wrap input{height:40px;min-height:40px;font-size:16px}.city-card .field-wrap>svg{width:16px}.city-card #password-visibility{height:36px;top:2px}
 .city-card .auth-actions{margin-top:12px;display:grid;grid-template-columns:1.1fr 1fr;gap:8px}.signup-divider{display:none}.city-card .auth-actions button{min-height:40px;font-size:11px;padding:8px 6px}.login-submit span{display:none}.auth-save-note{margin-top:10px;padding-top:10px;font-size:8px}.city-card #auth-message{font-size:9px;margin-top:8px}
 .hud-tools{max-height:calc(100% - 237px)}
 .left-status-stack{bottom:12px;left:12px;width:150px}.left-status-stack .hud-food-button{font-size:9px;min-height:27px;padding:4px 7px}.status-hud-row{min-height:22px;padding:3px 6px}.status-hud-row b{font-size:10px}
 .mobile-controls [data-key="arrowup"]{left:224px;bottom:62px}.mobile-controls [data-key="arrowleft"]{left:174px;bottom:12px}.mobile-controls [data-key="arrowdown"]{left:224px;bottom:12px}.mobile-controls [data-key="arrowright"]{left:274px;bottom:12px}
 .actions{right:138px;bottom:12px;max-width:calc(100% - 490px);flex-direction:row;flex-wrap:wrap}
 .online-widget{max-height:calc(100% - var(--mini-height) - 125px)}
 .chat-widget{max-height:calc(100% - 20px)}
}
/* Khi bàn phím ảo mở: cho cuộn form, không che các ô nhập. */
.keyboard-open .auth-layout{justify-content:flex-start;align-items:center;padding-top:20px;min-height:100%}
.keyboard-open .auth-masthead,.keyboard-open .auth-intro,.keyboard-open .portal-footer{display:none}
@media(prefers-reduced-motion:reduce){.city-card .auth-actions button,.city-card .field-wrap input{transition:none}}
@media(max-width:700px) and (orientation:portrait){.city-tagline strong::before{content:" "}}
@media(orientation:landscape) and (max-height:550px){.auth-layout{padding-top:50px;padding-bottom:12px}.auth-save-note{display:none}}
@media(max-width:700px) and (orientation:portrait) and (max-height:700px){.auth-intro{display:none}.auth-layout{padding-top:78px;padding-bottom:22px;gap:0}}
/* social-layout không nhận chạm để chừa bản đồ; nút con phải bật lại. */
#online-toggle{pointer-events:auto;cursor:pointer}

/* Khi mở chat, ẩn huy hiệu Online:N trên thanh trên; đóng chat sẽ tự hiện lại. */

/* Chuyển trạng thái Online sang đúng vị trí Đi bộ (phía phải thanh trên). */
.topbar #multiplayer-status{display:inline-flex;flex:0 0 auto;margin-left:auto;align-items:center;justify-content:center;max-width:min(160px,100%);white-space:nowrap}
.topbar #vehicle-status{display:none!important}
.topbar .account-bar{flex:0 1 auto;min-width:0}
@media(max-width:800px),(pointer:coarse){
 .topbar #multiplayer-status{font-size:10px;padding:6px 8px;max-width:110px}
 .topbar .account-bar{flex:0 1 auto}
}


/* Đồng bộ UI Online / danh sách / nút hệ thống với thanh tiền: đen, viền trắng vuông. */
.topbar #multiplayer-status,#online-toggle,#online-widget,#online-widget .online-title,.actions #fullscreen-btn,.actions #logout-btn,#online-close{
  color:#fff!important;
}
.topbar #multiplayer-status,#online-toggle,#online-widget,.actions #fullscreen-btn,.actions #logout-btn,#online-close{
  background:#101115f2!important;
  border:1px solid #f1f3f6!important;
  border-radius:2px!important;
  box-shadow:0 2px 7px #0008!important;
  backdrop-filter:none!important;
}
#online-widget{background:#0c0e12f5!important}
#online-widget .online-title{background:transparent!important;border:0!important;box-shadow:none!important}
#online-close{background:#191b20!important}
.topbar #multiplayer-status{font-weight:700}
.actions #fullscreen-btn:hover,.actions #logout-btn:hover,#online-toggle:hover,#online-close:hover{background:#292d34!important}
@media(max-width:800px),(pointer:coarse){
 .actions #fullscreen-btn,.actions #logout-btn,#online-close{border-radius:2px!important}
}


/* PC: Chat ở góc trái trên; bốn nút còn lại tự căn giữa theo chiều cao. */
@media (min-width:801px) and (pointer:fine){
  .canvas-wrap .chat-toggle{
    top:var(--edge)!important;
    bottom:auto!important;
    transform:none!important;
  }
  .canvas-wrap .hud-tools{
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    max-height:calc(100% - 180px)!important;
  }
}
/* Trên điện thoại chỉ hạ nhẹ, không đè lên thanh tiền và các nút dưới. */
@media (max-width:800px),(pointer:coarse){
  .canvas-wrap .chat-toggle{top:26px!important;bottom:auto!important}
  .canvas-wrap .hud-tools{top:79px!important;bottom:auto!important}
}
@media (orientation:landscape) and (max-height:440px) and (pointer:coarse){
  .canvas-wrap .chat-toggle{top:12px!important}
  .canvas-wrap .hud-tools{top:62px!important;max-height:calc(100% - 110px)!important}
}

/* Thu nhỏ 30% sáu nút cột trái trên MOBILE. PC giữ nguyên.
   Không dùng transform:scale vì vẫn giữ vùng chạm khớp với nút. */
@media (max-width:800px), (pointer:coarse) {
  .canvas-wrap button.hud-icon,
  .canvas-wrap button.chat-toggle {
    width:29.4px!important;
    height:29.4px!important;
    min-width:29.4px!important;
    min-height:29.4px!important;
    padding:2px!important;
    font-size:16px!important;
    border-width:1px!important;
    border-radius:1px!important;
    box-sizing:border-box!important;
  }
  .canvas-wrap button.hud-icon svg {
    width:17.5px!important;
    height:17.5px!important;
  }
  .canvas-wrap .hud-tools {
    left:10px!important;
    top:62px!important;
    gap:5px!important;
    padding:0 3px 3px 0!important;
    max-height:calc(100% - 200px)!important;
  }
  .canvas-wrap .chat-toggle {
    left:10px!important;
    top:20px!important;
  }
  .canvas-wrap .friend-count {
    font-size:8px!important;
    min-width:12px!important;
    height:12px!important;
    line-height:12px!important;
    right:-2px!important;
    top:-2px!important;
  }
}
@media (orientation:landscape) and (max-height:440px) and (pointer:coarse) {
  .canvas-wrap .chat-toggle {top:10px!important}
  .canvas-wrap .hud-tools {top:49px!important;max-height:calc(100% - 105px)!important}
}


/* Mobile: căn giữa 5 nút còn lại (Chat + 4 nút), thẳng mép trái UI tiền. */
@media (max-width:800px), (pointer:coarse) {
  .canvas-wrap{
    --mobile-left-ui: max(22px, env(safe-area-inset-left));
    --mobile-button-size: 29.4px;
    --mobile-button-gap: 5px;
    --mobile-column-height:calc(var(--mobile-button-size) * 5 + var(--mobile-button-gap) * 4);
  }
  .canvas-wrap button.chat-toggle{
    position:absolute!important;
    left:var(--mobile-left-ui)!important;
    top:calc(50% - var(--mobile-column-height) / 2)!important;
    bottom:auto!important;
    transform:none!important;
  }
  .canvas-wrap .hud-tools{
    position:absolute!important;
    left:var(--mobile-left-ui)!important;
    top:calc(50% - var(--mobile-column-height) / 2 + var(--mobile-button-size) + var(--mobile-button-gap))!important;
    bottom:auto!important;
    transform:none!important;
    display:flex!important;
    flex-direction:column!important;
    gap:var(--mobile-button-gap)!important;
    width:var(--mobile-button-size)!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    padding:0!important;
  }
}
@media (orientation:landscape) and (pointer:coarse){
  .canvas-wrap{--mobile-left-ui:max(24px,env(safe-area-inset-left))}
}


/* Online gộp: nút báo kết nối cũng mở danh sách, không có nút lặp dưới minimap. */
.topbar button#multiplayer-status{
  appearance:none;pointer-events:auto;cursor:pointer;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  font-family:inherit;line-height:1.2;
}
.topbar button#multiplayer-status:hover{background:#292d34!important}
.topbar button#multiplayer-status:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
}
/* Dự phòng nếu trình duyệt còn HTML cũ trong lần tải chuyển tiếp. */
#online-toggle{display:none!important}
@media(max-width:800px),(pointer:coarse){
  /* Bỏ hàng nút Online cũ: danh sách mở ngay dưới đồng hồ/trạng thái lưu. */
  .canvas-wrap #online-widget{
    top:calc(var(--mini-top) + var(--mini-height) + 36px);
  }
}

/* Chat icon mới: đổi chỗ với nút Cài đặt, nằm bên phải nút Cài đặt. */
.canvas-wrap #chat-toggle.chat-toggle{
  position:absolute!important;
  top:var(--edge,14px)!important;
  left:calc(var(--edge,14px) + 53px)!important;
  right:auto!important;
  bottom:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#0b0c10f2!important;
  color:#f1f3f5!important;
  border:1px solid #ffffff!important;
  border-radius:2px!important;
  padding:0!important;
  box-shadow:0 2px 7px #0008!important;
  z-index:20!important;
}
.canvas-wrap #chat-toggle.chat-toggle svg.chat-bubble-icon{
  display:block;
  width:24px;
  height:24px;
  flex:0 0 auto;
}
.canvas-wrap #chat-toggle.chat-toggle[aria-expanded="true"],
.canvas-wrap #chat-toggle.chat-toggle:hover{background:#292d34!important;}

/* Khung chat cách đáy hàng nút Chat/Cài đặt 8px, kể cả khi xoay máy. */
.canvas-wrap #chat-widget.chat-widget{
  --chat-panel-top:calc(var(--edge,14px) + 46px + 8px);
  top:var(--chat-panel-top);
  bottom:auto;
  max-height:calc(100% - var(--chat-panel-top) - max(12px,env(safe-area-inset-bottom)));
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (max-width:800px), (pointer:coarse){
  .canvas-wrap #chat-widget.chat-widget{
    --chat-panel-top:calc(max(12px,env(safe-area-inset-top)) + var(--mobile-button-size,29.4px) + 8px);
  }
}
@media (orientation:landscape) and (pointer:coarse){
  .canvas-wrap #chat-widget.chat-widget{
    --chat-panel-top:calc(max(10px,env(safe-area-inset-top)) + var(--mobile-button-size,29.4px) + 8px);
  }
}

/* Mobile: nút Chat nằm góc trên trái như PC; 4 nút khác vẫn ở giữa màn hình. */
@media (max-width:800px), (pointer:coarse){
  .canvas-wrap #chat-toggle.chat-toggle{
    position:absolute!important;
    top:max(12px,env(safe-area-inset-top))!important;
    left:calc(var(--mobile-left-ui,22px) + 36px)!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
  }
  .canvas-wrap #chat-toggle.chat-toggle svg.chat-bubble-icon{
    width:18px!important;
    height:18px!important;
  }
  .canvas-wrap .hud-tools{
    top:50%!important;
    transform:translateY(-50%)!important;
    bottom:auto!important;
    max-height:none!important;
  }
}
/* Điện thoại xoay ngang: vẫn sát góc trên trái, không bị điều kiện max-height đẩy xuống. */
@media (orientation:landscape) and (pointer:coarse){
  .canvas-wrap #chat-toggle.chat-toggle{
    top:max(10px,env(safe-area-inset-top))!important;
  }
}


/* UI Cài đặt: đổi sang bên trái ngoài cùng, chat nằm bên phải. */
.canvas-wrap #settings-toggle.settings-toggle{
  position:absolute!important;
  z-index:23!important;
  top:var(--edge,14px)!important;
  left:var(--edge,14px)!important;
  right:auto!important;bottom:auto!important;
  width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;
  box-sizing:border-box!important;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:#0b0c10f2;border:1px solid #fff;border-radius:2px;
  box-shadow:0 2px 7px #0008;cursor:pointer;touch-action:manipulation;
}
.canvas-wrap #settings-toggle.settings-toggle svg{width:23px;height:23px;display:block}
.canvas-wrap #settings-toggle.settings-toggle[aria-expanded="true"],
.canvas-wrap #settings-toggle.settings-toggle:hover{background:#292d34!important}
.canvas-wrap #settings-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}

.canvas-wrap #settings-menu.settings-menu{
  position:absolute!important;
  z-index:50!important;
  top:calc(var(--edge,14px) + 51px)!important;
  left:var(--edge,14px)!important;
  right:auto!important;bottom:auto!important;
  box-sizing:border-box!important;
  width:min(310px,calc(100% - 83px))!important;
  max-height:calc(100% - 72px)!important;
  overflow-y:auto!important;overscroll-behavior:contain;
  padding:12px!important;
  display:flex;flex-direction:column;gap:8px;
  color:#fff;background:#0c0d11f7!important;
  border:1px solid #fff!important;border-radius:2px!important;
  box-shadow:0 6px 22px #000a!important;
  pointer-events:auto;touch-action:pan-y;
}
.canvas-wrap #settings-menu[hidden]{display:none!important}
.settings-menu-heading{font-size:14px;font-weight:800;letter-spacing:.2px;padding:0 2px 5px;border-bottom:1px solid #ffffff55}
.settings-menu .settings-menu-action{
  width:100%;min-height:39px;padding:8px 12px;
  display:flex;align-items:center;gap:10px;
  font:inherit;font-size:13px;font-weight:700;
  color:#fff;background:#14151b;border:1px solid #fff;border-radius:2px;
  text-align:left;cursor:pointer;touch-action:manipulation;
}
.settings-menu .settings-menu-action span{font-size:17px;line-height:1}
.settings-menu .settings-menu-action:hover,
.settings-menu .settings-menu-action[aria-expanded="true"]{background:#292d34!important}
.settings-menu .settings-menu-logout{margin-top:2px}
#settings-menu #audio-toggle svg{width:20px;height:20px;flex:none}
#settings-menu #audio-toggle span{font-size:inherit;line-height:inherit}
#audio-toggle .audio-off,#audio-toggle .audio-label-off{display:none}
#audio-toggle[aria-pressed="true"] .audio-waves,#audio-toggle[aria-pressed="true"] .audio-label-on{display:none}
#audio-toggle[aria-pressed="true"] .audio-off,#audio-toggle[aria-pressed="true"] .audio-label-off{display:inline}


@media(max-width:800px),(pointer:coarse){
  .canvas-wrap #settings-toggle.settings-toggle{
    top:max(12px,env(safe-area-inset-top))!important;
    left:var(--mobile-left-ui,22px)!important;
    width:29.4px!important;height:29.4px!important;
    min-width:29.4px!important;min-height:29.4px!important;
  }
  .canvas-wrap #settings-toggle.settings-toggle svg{width:17px!important;height:17px!important}
  .canvas-wrap #settings-menu.settings-menu{
    top:calc(max(12px,env(safe-area-inset-top)) + 38px)!important;
    left:var(--mobile-left-ui,22px)!important;
    width:min(278px,calc(100% - var(--mobile-left-ui,22px) - 12px))!important;
    max-height:calc(100% - 62px)!important;
    padding:10px!important;
  }
  .settings-menu-heading{font-size:13px}
  .settings-menu .settings-menu-action{min-height:40px;font-size:12px}
}
@media (orientation:landscape) and (pointer:coarse){
  .canvas-wrap #settings-toggle.settings-toggle{top:max(10px,env(safe-area-inset-top))!important}
  .canvas-wrap #settings-menu.settings-menu{top:49px!important;max-height:calc(100% - 58px)!important}
}


/* CẢNH BÁO: đưa lên ngay dưới cụm máu / thể lực để không che nhân vật.
   Mobile vẫn dùng bố cục riêng, nhưng thu nhỏ để gọn hơn. */
.canvas-wrap #toast.toast {
  background:rgba(0,0,0,.83)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:5px!important;
  box-shadow:0 7px 25px rgba(0,0,0,.55)!important;
  line-height:1.45;
  text-align:center;
  pointer-events:none;
  overflow-wrap:anywhere;
}
@media (min-width:801px) and (pointer:fine) {
  .canvas-wrap #toast.toast {
    position:absolute!important;
    top:calc(var(--vitals-top) + var(--vitals-width) / 5 + 8px)!important;
    left:50%!important;
    right:auto!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    z-index:35!important;
    width:max-content;
    min-width:240px;
    max-width:min(540px,calc(100% - 48px))!important;
    padding:12px 18px!important;
    font-size:14px!important;
    font-weight:650;
  }
}

/* Cùng kích cỡ Ba lô / Máy chủ trên web mobile và APK, kể cả desktop-site
   hoặc gắn chuột. compact-hud do boot cập nhật, không phụ thuộc hướng màn hình. */
html.compact-hud .canvas-wrap button.hud-icon,
html.compact-hud .canvas-wrap button.chat-toggle{
  width:29.4px!important;height:29.4px!important;
  min-width:29.4px!important;min-height:29.4px!important;
  padding:2px!important;font-size:16px!important;
  border-width:1px!important;border-radius:1px!important;box-sizing:border-box!important;
}
html.compact-hud .canvas-wrap button.hud-icon svg{width:17.5px!important;height:17.5px!important}