*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:system-ui,Arial,sans-serif;background:#101923;color:#f5f7fb}.game-shell{width:min(1100px,96vw);margin:22px auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#1e2c3a;padding:15px 20px;border-radius:14px 14px 0 0}.topbar strong{display:block;letter-spacing:1px;font-size:19px;color:#78e4b0}.topbar span{display:block;font-size:12px;color:#b4c3d0;margin-top:3px}.stats{font-size:14px;white-space:nowrap}.canvas-wrap{position:relative;overflow:hidden;background:#385e45;border:3px solid #30465b;border-top:0;border-radius:0 0 14px 14px}canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.hint{position:absolute;left:12px;bottom:12px;background:#0d1929c9;padding:8px 12px;border-radius:7px;font-size:12px}.help{text-align:center;color:#b9c9d6;font-size:13px}.mobile-controls{display:none;text-align:center;touch-action:none}.mobile-controls button{background:#2b425a;color:white;border:1px solid #66839d;border-radius:12px;min-width:65px;min-height:55px;font-size:23px;margin:3px;touch-action:none;user-select:none}@media(pointer:coarse){.mobile-controls{display:block}}@media(max-width:560px){.topbar{padding:12px}.topbar strong{font-size:14px}.stats{font-size:12px}.hint{font-size:10px;left:6px;bottom:6px;padding:5px}.help{font-size:12px}}
.quest{position:absolute;top:12px;left:12px;max-width:62%;background:#0d1929df;padding:9px 12px;border-radius:9px;font-size:13px;border-left:4px solid #f8d36a}.toast{position:absolute;top:60px;left:12px;max-width:65%;background:#163f34ef;border-radius:9px;padding:10px 12px;font-size:13px;display:none}.toast.show{display:block}.interact{display:none;background:#f0c965;color:#1d2c35;border:0;border-radius:12px;padding:12px 18px;font-weight:800;margin:8px auto;cursor:pointer}.interact:active{transform:scale(.97)}@media(pointer:coarse){.interact{display:block}}@media(max-width:560px){.quest{font-size:10px;max-width:70%;padding:6px}.toast{font-size:11px;top:49px}.stats{white-space:normal;text-align:right}}
/* BƯỚC 4: GIAO DIỆN TÚI ĐỒ / CỬA HÀNG */
.actions{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.actions button,.panel button{background:#263e53;border:1px solid #7491a4;color:#fff;border-radius:9px;padding:9px 12px;font:inherit;cursor:pointer}
.actions button:hover,.panel button:hover{background:#365b75}
.panel[hidden]{display:none}.panel{position:fixed;inset:0;z-index:20;background:#07101cc7;display:grid;place-items:center;padding:16px}
.panel-card{width:min(480px,96vw);max-height:85vh;overflow:auto;background:#172a39;color:#f5f7fb;border:1px solid #6a8798;border-radius:16px;padding:18px;box-shadow:0 20px 60px #0008}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-head h2{margin:0 0 14px}.item-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #41586b;padding:12px 0}.item-row small{display:block;color:#bbcedb;margin-top:4px}.item-row button{flex-shrink:0}.empty{color:#b9cbd7}.actions button{font-size:13px}
@media(max-width:650px){.actions{bottom:6px;right:6px;gap:3px}.actions button{font-size:10px;padding:5px 7px}.hint{display:none}.topbar{flex-wrap:wrap}.stats{white-space:normal}}
/* BƯỚC 5 */
#vehicle-status{font-size:12px;color:#aee9cf}.actions{max-width:78%}@media(max-width:650px){.actions{max-width:95%}}
/* BƯỚC 6: GIAO DIỆN BẤT ĐỘNG SẢN */
.house-tag{color:#f6d889}.panel button:disabled{opacity:.45;cursor:not-allowed}
/* BƯỚC 7 - NỘI THẤT */
.furniture-guide{font-size:13px;color:#cce0ea;line-height:1.6;background:#233b4c;padding:10px;border-radius:9px;margin:9px 0}.furniture-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #41586b;padding:10px 0}.furniture-row small{display:block;color:#bdd0df;margin-top:4px}.furniture-row button{flex-shrink:0}.panel .furniture-row button:disabled{opacity:.5}.furniture-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.furniture-tools button{flex:1}.canvas-wrap.editing{outline:3px solid #e9c76c}.mobile-furniture{display:none}@media(pointer:coarse){.mobile-furniture{display:flex;gap:8px;justify-content:center;margin:8px}.mobile-furniture button{padding:12px;border:1px solid #66839d;border-radius:10px;background:#2b425a;color:white}}
/* BƯỚC 8: đồng hồ và thời tiết */
.environment-status{display:flex;gap:10px;align-items:center;white-space:nowrap;font-size:13px;color:#e9d995}
.environment-status b{font-weight:700}
@media(max-width:650px){.environment-status{font-size:11px;gap:6px}}
/* Bước 9: giữ cạnh pixel sắc nét khi Canvas co giãn */
#game { image-rendering: pixelated; image-rendering: crisp-edges; }
/* BƯỚC 10 - tài khoản và trạng thái đồng bộ */
.auth-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#07111bf2;padding:18px}
.auth-overlay[hidden]{display:none}
.auth-card{width:min(430px,96vw);background:#1b3042;border:1px solid #6e91a6;border-radius:18px;padding:26px;box-shadow:0 20px 80px #0009}
.auth-card h1{font-size:23px;color:#87e6b6;margin:0 0 12px}.auth-card p{color:#d0dfeb;font-size:14px}
.auth-card label{display:block;margin:14px 0;font-size:14px}.auth-card input{display:block;width:100%;margin-top:7px;padding:12px;background:#0c1c2b;border:1px solid #7a96aa;border-radius:9px;color:white;font:inherit}
.auth-actions{display:flex;gap:12px}.auth-actions button,.account-bar button{padding:9px 12px;border:1px solid #739bb2;border-radius:9px;background:#284e64;color:white;cursor:pointer}.auth-actions button{flex:1}
.account-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12px}.account-bar span{font-size:12px}.account-bar button{font-size:11px;padding:5px 7px}
@media(max-width:750px){.topbar{flex-wrap:wrap}.account-bar{width:100%}}
/* BƯỚC 12: Chat và danh sách online */
.social-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;background:#172735;padding:12px;border-top:1px solid #385365}
.chat-widget,.online-widget{min-width:0;background:#10202e;border:1px solid #38546a;border-radius:10px;padding:10px}
.social-title{font-size:13px;font-weight:800;display:flex;justify-content:space-between;color:#b9efdd;margin-bottom:8px}
.social-title span{font-size:12px;color:#c7d9e6}
.chat-log{height:132px;overflow-y:auto;background:#0b1824;border-radius:7px;padding:8px;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.chat-entry{margin-bottom:3px}.chat-entry .chat-name{color:#83dfb4;font-weight:700}.chat-entry .chat-time{color:#8198a9;margin-right:6px;font-size:11px}
.chat-form{display:flex;gap:6px;margin-top:8px}.chat-form input{flex:1;min-width:0;background:#0b1824;color:#fff;border:1px solid #5c8299;border-radius:7px;padding:9px;font:inherit;font-size:13px}.chat-form button{background:#237c69;color:#fff;border:0;border-radius:7px;padding:8px 16px;cursor:pointer}
#chat-feedback{display:block;color:#f4c78a;min-height:16px;margin-top:3px}.online-list{list-style:none;padding:0;margin:0;max-height:180px;overflow:auto;font-size:12px}.online-list li{padding:6px;border-bottom:1px solid #294456;overflow-wrap:anywhere}
@media(max-width:620px){.social-layout{grid-template-columns:1fr}.online-list{max-height:85px}.chat-log{height:105px}}
/* BƯỚC 14 UI GỌN: nút sách nhiệm vụ và nút chat giống bố cục game */
.canvas-wrap{overflow:hidden}
.hud-tools{position:absolute;top:12px;left:12px;z-index:6}
.hud-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid #8bb5c7;border-radius:13px;background:#132a3de8;color:white;font-size:25px;cursor:pointer;box-shadow:0 5px 16px #0007;touch-action:manipulation}
.hud-icon:hover,.hud-icon[aria-expanded="true"]{background:#28566d;border-color:#9ce5d2}
.quest[hidden],.chat-widget[hidden]{display:none!important}
.quest{z-index:7;top:66px;left:12px;max-width:min(390px,calc(100% - 24px));box-shadow:0 10px 24px #0008}
.chat-toggle{position:absolute;bottom:12px;left:12px;z-index:8}
.social-layout{position:absolute;inset:0;display:contents;padding:0;background:transparent;border:0;pointer-events:none}
.chat-widget{position:absolute;bottom:66px;left:12px;z-index:7;width:min(370px,calc(100% - 24px));padding:12px;background:#10202ef5;box-shadow:0 12px 30px #0009;pointer-events:auto}
.chat-log{height:170px}
.online-widget{position:absolute;top:12px;right:12px;z-index:5;width:190px;max-height:160px;overflow:auto;background:#10202edc;padding:8px;pointer-events:auto}
.online-list{max-height:100px}
.hint{left:68px;max-width:calc(100% - 80px)}
@media(max-width:650px){.chat-widget{bottom:65px}.chat-log{height:135px}.online-widget{width:140px;max-height:100px}.online-list{max-height:56px}.quest{font-size:12px;max-width:calc(100% - 24px)}.hud-icon{width:42px;height:42px;font-size:23px}}
/* BẢN CẬP NHẬT: Chat ở trên, Nhiệm vụ ngay dưới, góc trên bên trái. */
.chat-toggle{position:absolute;top:12px;bottom:auto;left:12px;z-index:9}
.hud-tools{position:absolute;top:66px;left:12px;z-index:9}
.quest{top:120px;left:12px;z-index:8}
.chat-widget{top:120px;bottom:auto;left:12px;z-index:8;max-height:calc(100% - 132px);overflow-y:auto}
@media(max-width:650px){
.chat-toggle{top:8px;bottom:auto;left:8px}
.hud-tools{top:58px;left:8px}
.quest{top:108px;left:8px}
.chat-widget{top:108px;bottom:auto;left:8px;max-height:calc(100% - 116px)}
}
/* CẬP NHẬT: khung chat mở ngay bên phải nút chat, không hiện phía dưới. */
.chat-widget{top:12px;left:70px;bottom:auto;width:min(370px,calc(100% - 270px));max-height:calc(100% - 24px);overflow-y:auto;z-index:10}
@media(max-width:700px){.chat-widget{top:8px;left:60px;width:calc(100% - 68px);max-height:calc(100% - 16px)}.chat-log{height:125px}}
/* BẢN CẬP NHẬT: bảng Online nằm dưới minimap, tối đa 7 tên và có thanh cuộn. */
.online-widget{top:145px;right:12px;bottom:auto;width:190px;max-height:none;overflow:visible;z-index:6;}
.online-list{max-height:217px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#719ab0 #142c3a;}
.online-list li{min-height:31px;padding:6px 4px;line-height:18px;}
.online-widget[hidden]{display:none!important;}
@media(max-width:650px){.online-widget{top:118px;right:8px;width:145px;max-height:none;overflow:visible}.online-list{max-height:217px;}}
/* Bước 15 */
/* Nút Nội thất chỉ xuất hiện khi nhân vật đang ở trong nhà */
#furniture-btn[hidden]{display:none!important}
/* Ba lô ngay dưới nút nhiệm vụ, cùng cột với Chat. */
.hud-tools{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.backpack-toggle{font-size:24px}
@media(max-width:650px){.hud-tools{gap:7px}}
/* Biểu tượng ba lô đồng màu với Chat/Nhiệm vụ, không dùng emoji đỏ */
.backpack-toggle{display:inline-flex;align-items:center;justify-content:center;color:#f3f9ff}
.backpack-toggle .backpack-icon{display:block;flex:none}
/* BƯỚC 15: Nút Gara vô lăng đồng màu, dưới Ba lô */
.garage-toggle{display:inline-flex;align-items:center;justify-content:center;color:#f3f9ff}
.garage-toggle svg{display:block;flex:none}
/* Gara thành phố: nhãn xe đã mua, không phải nút có thể nhấp. */
.vehicle-owned-label{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border:1px solid #499a7c;border-radius:9px;background:#1b4b3e;color:#a8f4cf;font-size:13px;font-weight:700}
/* Chọn ngoại hình khi tạo tài khoản */
.register-gender{margin:14px 0;padding:12px;border:1px solid #7596ab;border-radius:12px;background:#14293a}
.register-gender legend{font-size:14px;font-weight:700;color:#e2f1ff;padding:0 6px}
.auth-card .register-gender label{display:flex;align-items:center;gap:9px;padding:8px;margin:5px 0;border-radius:8px;cursor:pointer;background:#284459}
.auth-card .register-gender input{display:inline-block;width:auto;margin:0;accent-color:#8fe7c6}
.register-gender small{color:#c8dce6}
/* BƯỚC 15: lựa chọn skin chỉ sau lần đăng nhập đầu tiên. */
.avatar-options{border:1px solid #638ba3;border-radius:13px;margin:15px 0;padding:11px;background:#132a3c}
.avatar-options legend{color:#cdeee1;font-weight:750}
.avatar-choice{display:flex!important;align-items:center;gap:13px;background:#264457;padding:12px;border-radius:11px;margin:8px 0!important;cursor:pointer}
.auth-card .avatar-choice input{margin:0;width:auto;accent-color:#70dbb3}
.avatar-symbol{font-size:27px}.avatar-choice b{display:block}.avatar-choice small{display:block;color:#bfd3df;font-size:12px;margin-top:2px}
.avatar-confirm{width:100%;background:#207b66;border:1px solid #70c6ad;color:white;font:inherit;font-weight:700;padding:12px;border-radius:11px;cursor:pointer}
.avatar-confirm:disabled{opacity:.5}
/* Nút danh sách bạn bè dưới Gara, cùng màu trắng/xanh như các nút trên */
.friends-toggle{position:relative;display:flex;align-items:center;justify-content:center;color:#f3f9ff}
.friends-toggle svg{display:block}
.friend-count[hidden]{display:none!important}
.friend-count{position:absolute;top:-6px;right:-7px;min-width:19px;height:19px;display:grid;place-items:center;padding:0 4px;border-radius:12px;background:#d15a56;border:1px solid white;font-size:11px;color:white;font-weight:800}
.friend-popover[hidden]{display:none!important}
.friend-popover{position:absolute;z-index:15;min-width:109px;max-width:130px;padding:6px 7px;border:1px solid #99bccb;border-radius:10px;background:#142c3ef5;box-shadow:0 6px 22px #0009;display:flex;flex-direction:column;gap:5px;pointer-events:auto}
.friend-target-name{font-size:9px;font-weight:800;color:#e4f9ee;overflow-wrap:anywhere}
.friend-popover button{padding:6px 7px;background:#237e6c;color:white;border:1px solid #91c7b9;border-radius:7px;cursor:pointer;font-size:9px;font-weight:700}
.friend-popover button:disabled{background:#455969;opacity:.75;cursor:default}
.friend-section-title{font-size:14px;color:#a7ebd1;margin:17px 0 6px}
.friend-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #3b5361;padding:9px 0;flex-wrap:wrap}
.friend-row span{flex:1;min-width:85px;overflow-wrap:anywhere}
.friend-row button{font-size:12px;padding:6px 9px}
.friend-empty{font-size:12px;color:#aec4d0;margin:6px 0 10px}
/* Bước 16: loại bỏ nút Nhà, chỉ dùng E tại cửa */
#house-btn{display:none!important}
/* HUD Bước 16: xếp từ trên xuống: thời tiết, giờ, cấp, máu, tiền.
Đọc từ dưới lên đúng thứ tự: tiền -> máu -> cấp -> giờ -> thời tiết. */
.status-hud{position:absolute;left:12px;bottom:12px;z-index:5;width:218px;max-width:calc(100% - 24px);display:flex;flex-direction:column;gap:5px;pointer-events:none;font-size:12px;font-variant-numeric:tabular-nums;color:#f1f8ff}
.status-hud-row{display:grid;grid-template-columns:21px minmax(0,1fr) auto;align-items:center;column-gap:7px;min-height:34px;padding:6px 10px;background:#142b3eea;border:1px solid #6d93a7a6;border-radius:11px;box-shadow:0 3px 10px #07121b55;backdrop-filter:blur(5px)}
.status-hud-icon{font-size:14px;line-height:1}
.status-hud-row b{font-size:12px;color:#f8fcff;white-space:nowrap}
.status-hud-money b{color:#9cf1b7}
.status-hud-health{grid-template-rows:auto 4px;row-gap:5px}
.status-health-track{grid-column:1/-1;width:100%;height:4px;background:#3d4e60;border-radius:10px;overflow:hidden}
.status-health-fill{display:block;width:100%;height:100%;border-radius:10px;background:linear-gradient(90deg,#e96872,#ffb36d);transition:width .2s}
@media(max-width:800px),(pointer:coarse){
.status-hud{left:10px;bottom:129px;width:155px;gap:3px;font-size:10px;max-width:calc(100% - 20px)}
.status-hud-row{grid-template-columns:17px minmax(0,1fr) auto;column-gap:4px;min-height:25px;padding:4px 6px;border-radius:8px}
.status-hud-icon{font-size:11px}.status-hud-row b{font-size:10px}
.status-hud-health{grid-template-rows:auto 3px;row-gap:3px}.status-health-track{height:3px}
}
@media(max-width:800px) and (orientation:landscape) and (max-height:550px){
.status-hud{left:9px;bottom:117px;width:150px;gap:2px}
.status-hud-row{min-height:22px;padding:3px 5px}
}
/* Nhích bảng Online xuống để không che giờ */
.online-widget{top:172px}
/* HUD thống nhất: 3 chỉ số trong MỘT nền duy nhất. */
.status-hud{
gap:0!important;
padding:5px 9px;
background:#142b3eea;
border:1px solid #6d93a7a6;
border-radius:14px;
box-shadow:0 3px 10px #07121b55;
-webkit-backdrop-filter:blur(5px);
backdrop-filter:blur(5px);
box-sizing:border-box;
}
.status-hud .status-hud-row{
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
padding:7px 3px;
}
.status-hud .status-hud-row + .status-hud-row{border-top:1px solid #ffffff20!important}
@media(max-width:800px),(pointer:coarse){
.status-hud{padding:3px 6px}
.status-hud .status-hud-row{padding:5px 2px}
}
/* Nút đóng Online, tiện thao tác trên điện thoại */
.online-widget .online-title{display:flex;align-items:center;gap:6px;justify-content:space-between;margin-bottom:8px}
.online-title-name{flex:1;min-width:0;white-space:nowrap}
.online-title-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.online-title-actions #online-count{font-size:12px}
#online-close{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;min-width:26px;padding:0;border:1px solid #7e9cad;border-radius:7px;background:#274458;color:#f4fbff;font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}
#online-close:hover,#online-close:focus-visible{background:#365b73;outline:2px solid #c1e5fa;outline-offset:1px}
@media(max-width:650px),(pointer:coarse){#online-close{width:32px;height:32px;min-width:32px;font-size:23px}.online-widget .online-title{gap:3px}.online-title-actions{gap:5px}}
/* Đặt Dùng thức ăn ngay trên HUD cấp/máu/tiền, dùng một cụm neo góc trái. */
.left-status-stack{position:absolute;left:12px;bottom:12px;z-index:8;width:218px;max-width:calc(100% - 24px);display:flex;flex-direction:column;align-items:flex-start;gap:7px;pointer-events:none}
.left-status-stack .status-hud{position:static!important;left:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important;pointer-events:none}
.hud-food-button{pointer-events:auto;background:#263e53;border:1px solid #7491a4;color:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 3px 9px #0005}
.hud-food-button:hover{background:#365b75}
.actions #logout-btn{background:#263e53;border:1px solid #7491a4;color:#fff;border-radius:9px}
@media(max-width:800px),(pointer:coarse){
.left-status-stack{left:10px;bottom:129px;width:155px;gap:5px}
.hud-food-button{font-size:10px;padding:6px 7px;border-radius:8px;min-height:31px}
.actions #logout-btn{font-size:10px;min-height:36px}
}
@media(max-width:800px) and (orientation:landscape) and (max-height:550px){
.left-status-stack{left:9px;bottom:117px;width:150px;gap:4px}
}
/* Ẩn tên tài khoản trên thanh đầu; tên thật hiện phía trên nhân vật Canvas */
#account-name{display:none!important}
/* Bản sửa nhiệm vụ: bảng nằm bên phải nút sách, không bị cột icon đè. */
.canvas-wrap #quest.quest{
position:absolute;
top:66px;
left:70px;
bottom:auto;
right:auto;
z-index:35;
box-sizing:border-box;
width:max-content;
max-width:min(390px,calc(100% - 82px));
max-height:min(240px,calc(100% - 80px));
overflow-y:auto;
overflow-wrap:anywhere;
pointer-events:auto;
border:1px solid #b5c5d0;
border-left:4px solid #f8d36a;
border-radius:12px;
background:#12293df5;
padding:11px 13px;
line-height:1.5;
box-shadow:0 8px 24px #0008;
}
@media(max-width:800px),(pointer:coarse){
.canvas-wrap #quest.quest{
top:60px;
left:60px;
max-width:calc(100% - 72px);
max-height:min(45%,calc(100% - 75px));
padding:9px 11px;
font-size:12px;
}
}
#weather-label[hidden]{display:none!important}
/* Chuột/cảm ứng chỉ áp dụng cho canvas, không khóa thao tác form và cuộn UI. */
#game{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}
#game:focus{outline:none}
#game:focus-visible{outline:2px solid #d7faff;outline-offset:-2px}
/* Thanh thể lực xanh nước biển, cùng khung Máu / Cấp độ / Tiền. */
.status-hud-stamina{grid-template-rows:auto 4px;row-gap:5px}
.stamina-icon{color:#5ac6ff;font-weight:900;font-size:20px!important;line-height:1}
.status-stamina-track{grid-column:1/-1;width:100%;height:4px;background:#18394e;border-radius:10px;overflow:hidden}
.status-stamina-fill{display:block;width:100%;height:100%;border-radius:10px;background:linear-gradient(90deg,#1689ed,#62ceff);transition:width .12s linear}
@media(max-width:800px),(pointer:coarse){
.status-hud-stamina{grid-template-rows:auto 3px;row-gap:3px}
.status-stamina-track{height:3px}
.stamina-icon{font-size:16px!important}
}
/* Ba kênh Chat: thành phố, bạn bè nhắn riêng, gang */
.chat-channels{display:flex;gap:4px;margin-bottom:7px;min-width:0}
.chat-channel{flex:1;min-width:0;padding:7px 3px;border-radius:8px;border:1px solid #43637a;background:#1e364b;color:#d5e7f4;font:600 11px system-ui;cursor:pointer;white-space:nowrap}
.chat-channel.is-active{background:#206b68;border-color:#69d6c7;color:white}
.chat-target-row{display:flex;align-items:center;gap:7px;margin-bottom:6px;color:#d9e8f3;font-size:12px}
.chat-target-row label{white-space:nowrap}
.chat-target-row select{flex:1;min-width:0;background:#0b1824;border:1px solid #5c8299;color:white;border-radius:7px;padding:6px;font-size:12px}
.chat-channel-hint{font-size:11px;color:#e0cc91;margin:4px 0}
.chat-form input:disabled{opacity:.55}
@media(max-width:550px){.chat-channel{font-size:10px;padding:7px 2px}}
/* Cột chức năng: nền đen, viền trắng và góc vuông đồng bộ với thanh tiền.
Chỉ đổi bề mặt nút; giữ nguyên vị trí/kích thước responsive và biểu tượng. */
.canvas-wrap button.hud-icon{
border:1px solid #f4f4f4;
border-radius:0;
background-color:#0b0c0f;
background-image:
repeating-linear-gradient(36deg,transparent 0 7px,#ffffff06 7px 8px,transparent 8px 12px),
linear-gradient(145deg,transparent 0 38%,#ffffff04 38% 57%,transparent 57%);
color:#fff;
box-shadow:0 2px 5px #0006,inset 0 0 0 1px #15161c;
backdrop-filter:none;
-webkit-backdrop-filter:none;
transition:background-color .12s ease,box-shadow .12s ease;
}
@media(hover:hover){
.canvas-wrap button.hud-icon:hover{
background-color:#202125;
border-color:#fff;
box-shadow:0 2px 5px #0006,inset 0 0 0 1px #6a6c72;
}
}
.canvas-wrap button.hud-icon[aria-expanded="true"],
.canvas-wrap button.hud-icon[aria-pressed="true"]{
background-color:#26272b;
border-color:#fff;
box-shadow:0 2px 5px #0006,inset 0 0 0 1px #b7b9be;
}
.canvas-wrap button.hud-icon:active{
background-color:#303136;
border-color:#fff;
box-shadow:inset 0 0 0 1px #fff;
}
.canvas-wrap button.hud-icon:focus-visible{
outline:2px solid #fff;
outline-offset:-4px;
}
@media(prefers-reduced-motion:reduce){
.canvas-wrap button.hud-icon{transition:none}
}
/* Chat đen viền trắng: đồng bộ với HUD và các nút mới; không đổi kích cỡ/vị trí. */
#chat-widget.chat-widget {
background:rgba(9,10,14,.97)!important;
color:#f6f7fa;
border:1px solid #f3f4f6!important;
border-radius:2px!important;
box-shadow:0 8px 24px rgba(0,0,0,.75)!important;
}
#chat-widget .social-title,
#chat-widget .social-title span {color:#fff!important}
#chat-widget .chat-channels {gap:5px}
#chat-widget .chat-channel {
background:#101115!important;
border:1px solid #dedfe5!important;
border-radius:2px!important;
color:#eef0f4!important;
}
#chat-widget .chat-channel.is-active {
background:#343740!important;
border-color:#fff!important;
color:#fff!important;
box-shadow:inset 0 -2px 0 #fff;
}
#chat-widget .chat-channel:hover {background:#282b32!important}
#chat-widget .chat-channel:focus-visible,
#chat-widget .chat-form button:focus-visible,
#chat-widget #chat-friend-target:focus-visible {outline:2px solid white;outline-offset:2px}
#chat-widget .chat-log {
background:#090a0e!important;
border:1px solid #53545a!important;
border-radius:2px!important;
color:#eef0f5!important;
scrollbar-color:#aeb3bc #101115;
}
#chat-widget .chat-target-row {color:#f1f2f4!important}
#chat-widget #chat-friend-target {
background:#0c0d12!important;
color:#fff!important;
border:1px solid #f3f4f6!important;
border-radius:2px!important;
}
#chat-widget .chat-form input {
background:#0c0d11!important;
color:#fff!important;
border:1px solid #e9edf2!important;
border-radius:2px!important;
box-shadow:none!important;
}
#chat-widget .chat-form input::placeholder {color:#b2b8c1!important}
#chat-widget .chat-form input:focus {
border-color:#fff!important;
outline:1px solid #fff!important;
outline-offset:1px;
}
#chat-widget .chat-form button {
background:#181a20!important;
color:#fff!important;
border:1px solid #f3f4f6!important;
border-radius:2px!important;
font-weight:700;
}
#chat-widget .chat-form button:hover {background:#333740!important}
#chat-widget .chat-channel-hint {color:#e9d29b}
/* UI ĐỒNG BỘ: chỉ áp dụng bảng thao tác trong game và menu cạnh nhân vật.
Không đổi đăng nhập, minimap, nhãn Gang, hotbar hay dữ liệu gameplay.
Dùng ID để thắng các bảng trade/gang/hotbar được nạp sau style.css. */
#panel,
#friend-popover {
--ui-panel-bg: #0c0c0f;
--ui-panel-inset: #08080a;
--ui-panel-button: #141417;
--ui-panel-active: #303035;
--ui-panel-border: #f2f2f4;
--ui-panel-muted: #c3c3ca;
color-scheme: dark;
color: #f8f8fa;
}
#panel {
background: rgba(0,0,0,.62) !important;
}
#panel > .panel-card,
#friend-popover {
background: var(--ui-panel-bg) !important;
background-image: none !important;
border: 1px solid var(--ui-panel-border) !important;
border-radius: 2px !important;
color: #f8f8fa !important;
box-shadow: 0 14px 48px #0009 !important;
}
#panel .panel-card,
#panel .gang-member-list {
scrollbar-color: #bfbfc6 #101014;
scrollbar-width: thin;
}
#panel .panel-card::-webkit-scrollbar,
#panel .gang-member-list::-webkit-scrollbar { width: 7px; }
#panel .panel-card::-webkit-scrollbar-track,
#panel .gang-member-list::-webkit-scrollbar-track { background: #101014; }
#panel .panel-card::-webkit-scrollbar-thumb,
#panel .gang-member-list::-webkit-scrollbar-thumb { background: #bfbfc6; border: 2px solid #101014; }
/* Các bảng con: đề nghị giao dịch, tóm tắt Gang, ghi chú Võ sư. */
#panel :is(.trade-column, .trade-receive, .gang-create, .gang-summary,
.gang-invite-card, .furniture-guide, .pvp-shop-intro) {
background: var(--ui-panel-inset) !important;
background-image: none !important;
border: 1px solid var(--ui-panel-border) !important;
border-radius: 2px !important;
color: #eeeeF2 !important;
box-shadow: none !important;
}
#panel :is(.panel-head h2, .trade-column h3, .trade-invite-name,
.trade-step, .friend-section-title, .gang-section-title,
.trade-money-label),
#friend-popover .friend-target-name {
color: #fff !important;
}
#panel :is(.empty, .item-row small, .furniture-row small, .friend-empty,
.gang-intro, .gang-muted, .gang-online, .gang-summary p,
.trade-info,
.trade-muted, .trade-balance, .trade-partner, .trade-draft-note,
.trade-footnote) {
color: var(--ui-panel-muted) !important;
}
#panel :is(.item-row, .furniture-row, .friend-row, .gang-member-row,
.gang-footer, .trade-item-row, .trade-summary-row, .trade-footer) {
border-color: rgba(255,255,255,.24) !important;
}
/* Nút mở chức năng, nút X, nút mua, gán ô, quản lý Gang và giao dịch. */
#panel button,
#friend-popover button {
background: var(--ui-panel-button) !important;
background-image: none !important;
border: 1px solid var(--ui-panel-border) !important;
border-radius: 2px !important;
color: #fff !important;
box-shadow: none !important;
text-shadow: none !important;
}
#panel :is(input, select, textarea),
#panel select option {
background: var(--ui-panel-inset) !important;
background-image: none !important;
border-color: var(--ui-panel-border) !important;
border-radius: 2px !important;
color: #fff !important;
box-shadow: none !important;
accent-color: #fff;
caret-color: #fff;
}
#panel :is(input, textarea)::placeholder { color: #a6a6ae !important; }
#panel :is(button, input, select, textarea):focus-visible,
#friend-popover button:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 2px !important;
}
#panel button[aria-pressed="true"] {
background: var(--ui-panel-active) !important;
box-shadow: inset 0 0 0 1px #fff !important;
}
@media (hover:hover) {
#panel button:not(:disabled):hover,
#friend-popover button:not(:disabled):hover {
background: #2a2a2f !important;
}
}
#panel button:not(:disabled):active,
#friend-popover button:not(:disabled):active {
background: #39393f !important;
}
#panel button:disabled,
#friend-popover button:disabled {
background: #101013 !important;
color: #a6a6ad !important;
border-color: #75757d !important;
opacity: .6 !important;
box-shadow: none !important;
}
#panel :is(input, select, textarea):disabled { opacity: .6; }
/* Nền vẫn đen, viền trắng; giữ màu chữ mang ý nghĩa trạng thái. */
#panel :is(.vehicle-owned-label, .pvp-owned-tag, .trade-badge) {
background: #141417 !important;
border: 1px solid var(--ui-panel-border) !important;
border-radius: 2px !important;
color: var(--ui-panel-muted) !important;
}
#panel :is(.vehicle-owned-label, .pvp-owned-tag, .trade-badge.is-ready) {
color: #aaf2ca !important;
}
#panel .gang-danger:not(:disabled) { color: #ffb9b9 !important; }
#panel .trade-warning,
#panel .trade-error {
background: #141417 !important;
border: 1px solid var(--ui-panel-border) !important;
border-radius: 2px !important;
}
#panel .trade-warning { color: #ffe1a2 !important; }
#panel .trade-error { color: #ffb9b9 !important; }
#panel .trade-footer {
background: var(--ui-panel-bg) !important;
backdrop-filter: none !important;
}
/* .gang-role / .gang-tag vẫn giữ vàng, xanh nước biển, xanh lá theo chức vụ. */
/* v101: image previews in dealership and owned garage. */
.vehicle-shop-preview{display:block;width:112px;height:72px;max-width:100%;margin:0 0 6px;background:#263640;border:1px solid #586873;border-radius:8px;object-fit:contain}