/* Tinh Hà Đạo Lộ Online — bổ sung cho bố cục HUD 2.0 (user_ui.css): 4 chiêu phái + tuyệt kỹ, biển vùng, hộp thoại NPC */
.skillbar [data-skill=s1]{--rx:178.6;--by:68;--d:54}
.skillbar [data-skill=s2]{--rx:159.7;--by:120.65;--d:54}
.skillbar [data-skill=s3]{--rx:117.85;--by:157.1;--d:54}
.skillbar [data-skill=ult]{--rx:62.5;--by:168;--d:58;background:radial-gradient(#5a2a12,#0e0503 68%,transparent 70%)}
.skillbar [data-skill=ult] .art{box-shadow:0 0 calc(10 * var(--u)) #ffb54a88}
.skillbar button.empty{opacity:.45}
.skillbar button.nomp .art{filter:grayscale(.8) brightness(.7)}
#zoneBanner{position:fixed;top:calc(150 * var(--u));left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;text-shadow:0 2px 6px #000;animation:zone 3.2s ease forwards}
#zoneBanner b{display:block;font:700 calc(20 * var(--u)) "Palatino Linotype","Times New Roman",serif;letter-spacing:3px;color:#ffe7a6}
#zoneBanner small{display:block;font-size:calc(8 * var(--u));letter-spacing:2px;color:#d9e6ef}
@keyframes zone{0%{opacity:0;transform:translate(-50%,6px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
#loadingMap{position:fixed;inset:0;background:#050b10e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:30;pointer-events:auto}
#loadingMap b{font:700 26px "Palatino Linotype","Times New Roman",serif;color:#ffe08a;letter-spacing:3px}
#loadingMap span{font-size:12px;color:#b9c7d3}
.npc-talk{padding:22px 26px;display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:start}
.npc-talk canvas{width:150px;height:170px;background:radial-gradient(ellipse at 50% 80%,#c99b4a33,transparent 65%)}
.npc-talk h3{color:#ffd451;font-size:18px;margin-bottom:4px}
.npc-talk small{color:#c7af78;display:block;margin-bottom:12px}
.npc-talk p{line-height:1.8;font-size:14px;color:#efe3c4}
.npc-talk .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.world-list{padding:18px 22px;display:grid;grid-template-columns:1fr 290px;gap:18px}
.world-list canvas{width:100%;border:1px solid #795322;background:#0b1410}
.world-list ul{list-style:none;margin:0;padding:0;max-height:58vh;overflow:auto;font-size:12px}
.world-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid #5f401944}
.world-list li.here{background:#5a3a1455;color:#ffe08a}
.world-list li small{color:#bba77d;white-space:nowrap}
.skill-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.skill-list div{text-align:center;font-size:10px;color:#e6d3a8}
.skill-list img{width:40px;height:40px;border-radius:50%;display:block;margin:0 auto 4px;box-shadow:0 0 0 2px #a9762366}
.slot-text{font-size:9px;color:#d9c69c;line-height:1.1;padding:2px}
#sectDescription{white-space:pre-line}
@media(max-width:850px){.npc-talk{grid-template-columns:1fr}.npc-talk canvas{display:none}.world-list{grid-template-columns:1fr}.skill-list{grid-template-columns:repeat(5,1fr)}}
/* PK, Phường Thị / Đấu Giá Hội, giao dịch, tông môn */
.red-name{color:#ff8a7a!important}
.ch-guild b{color:#8fd8ff!important}.ch-party b{color:#9be59b!important}.ch-map b{color:#c9c2ae!important}
.player-menu{position:fixed;z-index:40;width:190px;padding:10px;display:flex;flex-direction:column;gap:6px;background:#132721f2;border:1px solid #c9b77b88;border-radius:6px;box-shadow:0 8px 30px #0008;pointer-events:auto}
.player-menu b{color:#ffe08a;font-size:14px}.player-menu small{font-size:10px;color:#bba77d}.player-menu button{padding:7px;font-size:12px}
.trade-invite{position:fixed;z-index:40;left:50%;top:calc(120 * var(--u));transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:10px 14px;background:#132721f2;border:1px solid #d8bd7d;border-radius:6px;box-shadow:0 8px 30px #0008;pointer-events:auto;font-size:13px;color:#ffe9b0}
.trade-invite .primary{width:auto;padding:8px 14px}.trade-invite button{padding:8px 12px}
.xh{padding:16px 22px}.xh-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.xh-tabs{display:flex;gap:6px;flex-wrap:wrap}.xh-tabs button{padding:7px 14px;font-size:12px}.xh-tabs .active{background:#5a3a14;border-color:#e1c681;color:#ffe08a}
.xh-money{color:#ffe08a;font-size:13px}.xh-warn{color:#ffb38a;font-size:12px;margin-bottom:10px}.xh-good{color:#9be59b}.xh-lead{color:#e6d3a8;font-size:13px;line-height:1.7;margin-bottom:12px}
.xh-list{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto}
.xh-row{display:grid;grid-template-columns:1fr 130px 270px;gap:10px;align-items:center;padding:8px 10px;background:#0f201a99;border:1px solid #79916833;border-radius:4px}
.xh-row>small{color:#bba77d;font-size:11px}
.xh-info small{display:block;font-size:10px;color:#a9b49b;margin-top:2px}
.xh-item{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.xh-item>img,.xh-item>.xh-icon{grid-row:1/3;width:44px;height:44px}
.xh-item>span{font-size:13px;color:#f0e2bb}.xh-item>small{font-size:10px;color:#a9b49b}
.xh-icon{padding:2px;background:#12211c;border:1px solid #6c815466;border-radius:4px}.xh-icon img{width:38px;height:38px;object-fit:contain}
.xh-item .q1{color:#a9e092}.xh-item .q2{color:#9cc4ff}.xh-item .q3{color:#d6b4ff}.xh-item .q4{color:#ffd77a}
.xh-price b{display:block;color:#ffe08a;font-size:15px}.xh-price small{display:block;font-size:10px;color:#bba77d}
.xh-act{display:flex;gap:6px;align-items:center;justify-content:flex-end}.xh-act input{width:90px;padding:6px}.xh-act button{padding:7px 10px;font-size:12px}.xh-act .primary{width:auto;padding:7px 10px}
.xh-two{display:grid;grid-template-columns:1fr 300px;gap:16px}
.xh-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;align-content:start;max-height:40vh;overflow:auto;padding:4px}
.xh-form{display:flex;flex-direction:column;gap:10px;padding:12px;background:#10211b85;border:1px solid #79916833}.xh-form small{font-size:11px;color:#bba77d}
.xh-trade{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px 22px 6px}
.xh-side{padding:12px;min-height:120px;background:#10211b85;border:1px solid #79916844;border-radius:4px;display:flex;flex-direction:column;gap:6px}
.xh-side.locked{border-color:#d8bd7d;box-shadow:inset 0 0 18px #d8bd7d22}.xh-side h3{font-size:13px;color:#e5d4a8}
.xh-sub{font-size:13px;color:#e5d4a8;margin:12px 22px 6px}.xh .xh-sub{margin:14px 0 8px}
.xh-trade~.xh-pick{margin:0 22px}
.xh-bar{display:flex;gap:8px;align-items:end;flex-wrap:wrap;padding:12px 22px}.xh .xh-bar{padding:0 0 6px}.xh-bar label{flex:0 0 160px}.xh-bar .primary{width:auto;padding:10px 16px}.xh-bar button{padding:10px 14px}
.xh~.tiny,.xh-bar~.tiny{padding:0 22px 14px}
@media(max-width:850px){.xh-row{grid-template-columns:1fr;gap:6px}.xh-act{justify-content:flex-start;flex-wrap:wrap}.xh-two,.xh-trade{grid-template-columns:1fr}}
.tui2-slot .sealed-tag{background:#5a2a1c!important;color:#ffcfb0!important}
/* cổng vào: tạo nhân vật · đăng nhập · quên mật khẩu (tai_khoan.mjs) */
.entry-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0 14px;padding:3px;background:#0c0704b3;border:1px solid #62431d;border-radius:4px}
.entry-tabs button{background:transparent;border:0;color:#c9b48a;font-size:12px;padding:8px 4px;border-radius:3px;cursor:pointer}
.entry-tabs button[aria-selected=true]{background:linear-gradient(#7a5320,#4a300f);color:#fff1c4;box-shadow:inset 0 0 0 1px #c39543}
.entry-form>label+label,.entry-form>label+.form-row{margin-top:12px}
.entry-form .form-row>label{min-width:0}.entry-form .form-row select{width:100%}
.entry-form>.eyebrow:first-child{margin-top:16px}
.entry-form:not([data-mode=create]) .m-create,.entry-form:not([data-mode=recover]) .m-recover{display:none!important}
.entry-form[data-mode=create] h2,.entry-form[data-mode=login] h2,.entry-form[data-mode=recover] h2{margin-bottom:6px}
.entry-note{font-size:11px;margin:10px 0 12px;min-height:16px}
.entry-form:not([data-mode=create]) .entry-note{margin-top:14px}
#code{font-family:Consolas,'Courier New',monospace;letter-spacing:2px;text-transform:uppercase}
.recovery-box output,.account-code output{display:block;margin:16px 0 4px;padding:14px 8px;text-align:center;font:bold 22px/1 Consolas,'Courier New',monospace;letter-spacing:3px;color:#ffe9a8;background:#0c0704;border:1px dashed #c39543;border-radius:4px;user-select:all}
.recovery-box .primary{margin-top:14px}
/* bảng tài khoản trong game */
.account-form{display:flex;flex-direction:column;gap:12px;max-width:380px}
.account-form .primary{margin-top:4px}
.account-status{padding:0!important;margin:0;color:#e9b48a;min-height:16px}
.account-code{max-width:380px;margin-bottom:14px;padding:12px;background:#10211b85;border:1px solid #c39543;border-radius:4px}
.account-code b{color:#ffe08a;font-size:13px}.account-code small{display:block;color:#bba77d;font-size:11px;margin:6px 0}
.account-code button{padding:6px 14px}
.account>.quiet{max-width:380px;margin-top:18px;text-align:left;color:#c9a48a}
#accountButton{margin-top:16px;width:auto;padding:10px 16px}
/* màn thấp (máy xách tay 600–760 px, điện thoại ngang): form gọn lại, vẫn cuộn được nếu thấp hơn nữa */
#entrance{overflow-y:auto;align-items:safe center}
@media(max-height:760px){
  #entrance{padding-top:3vh;padding-bottom:2vh}
  .entry-form{padding:16px 22px 12px}
  .entry-form h2{font-size:22px;margin:4px 0 2px}
  .entry-tabs{margin:4px 0 8px}.entry-tabs button{padding:6px 4px}
  .entry-form label{gap:4px}.entry-form input,.entry-form select{padding:8px 11px}
  .entry-form>label+label,.entry-form>label+.form-row,.entry-form>.form-row{margin-top:8px}
  .entry-form{padding-top:10px}.entry-form>.eyebrow:first-child{margin-top:14px}
  .entry-form .entry-character{height:104px}.entry-form .entry-character canvas{width:128px;height:104px;left:12px}
  .entry-form .entry-character span{left:150px;width:150px;font-size:10px;line-height:1.55}
  .entry-note{margin:6px 0 8px;line-height:1.45}
  .entry-form .primary{padding:12px}
  .recovery-box output{margin:10px 0 2px;font-size:20px}
}