/* JX3 Web — giao diện tối, phong cách võ hiệp nhẹ (mực tàu + vàng kim + ngọc bích). Tối ưu ≥ 1366×768. */

:root {
  --ink-0: #0c0f13;
  --ink-1: #14181e;
  --ink-2: #1c222a;
  --ink-3: #27303a;
  --line: rgba(224, 184, 98, 0.22);
  --line-strong: rgba(224, 184, 98, 0.55);
  --text: #e9e4d8;
  --text-dim: #a59e8f;
  --gold: #e0b862;
  --gold-deep: #b48a3c;
  --jade: #5fb8a2;
  --cinnabar: #d0573f;
  --sky: #6fb7ff;
  --warn: #e6a23c;
  --glass: rgba(16, 20, 26, 0.72);
  --radius: 10px;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --font: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
  --font-title: "Noto Serif", "Times New Roman", "SimSun", serif;
  --mono: Consolas, "Cascadia Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink-0); color: var(--text); font: var(--fs-md)/1.45 var(--font); overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, #1f2731 0%, var(--ink-0) 70%); }
.stage-canvas { display: block; width: 100%; height: 100%; outline: none; cursor: crosshair; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#hud { pointer-events: none; position: absolute; inset: 0; }
#hud > * { pointer-events: auto; }
#hud > .app-status, #hud > .toasts, #hud > .hud-debug, #hud > .hud-help { pointer-events: none; }

/* ---------- màn đăng nhập / chọn nhân vật (V4 ux §9.6: nút lg 52 px cảm ứng / 40u desktop, ô nhập 48 px cảm ứng, token) ---------- */
.screen {
  position: absolute; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(95, 184, 162, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(12, 15, 19, 0.55), rgba(12, 15, 19, 0.85));
}
.card {
  width: min(400px, calc(100vw - 32px));
  background: var(--sf-panel);
  border: 1px solid var(--ln-1);
  border-radius: var(--r-l);
  box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 26px 28px 22px;
  position: relative; color: var(--tx-1);
}
.card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: 0.7;
}
.roles-card { width: min(560px, calc(100vw - 32px)); }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.brand-mark {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--ac);
  background: radial-gradient(circle at 30% 30%, #2b333d, #161a20); border: 1px solid var(--ln-ac);
}
.brand-mark .k-ico { width: 30px; height: 30px; stroke-width: 1.6; }
.brand h1 { margin: 0; font: 600 var(--fs-2xl)/1.2 var(--font-title); letter-spacing: 0.5px; color: var(--tx-1); }
.brand .sub { margin: 2px 0 0; color: var(--tx-2); font-size: var(--fs-sm); }
h2 { margin: 0 0 14px; font: 600 var(--fs-xl)/1.3 var(--font-title); color: var(--tx-1); }

.login-form { display: grid; gap: 6px; }
.login-form label { color: var(--tx-2); font-size: var(--fs-sm); margin-top: 6px; }
/* "Nhớ tài khoản": cả hàng là vùng chạm (≥ 44 px cảm ứng), checkbox vẽ thành công tắc */
.login-form label.check { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--tx-1); font-size: var(--fs-md); margin-top: 8px; cursor: pointer; }
.login-form label.check .check-t { display: flex; flex-direction: column; line-height: 1.3; }
.login-form label.check small { color: var(--tx-2); font-size: var(--fs-sm); }
input.k-check { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: max(44px, 2.75rem); height: max(24px, 1.5rem); margin: 0; border-radius: var(--r-pill);
  background: var(--sf-sunken); border: 1px solid var(--ln-field); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
input.k-check::after { content: ""; position: absolute; left: 3px; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%;
  background: var(--tx-3); transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
input.k-check:checked { background: var(--ac-2); border-color: var(--ac-2); }
input.k-check:checked::after { transform: translateX(calc(max(44px, 2.75rem) - 1rem - 8px)); background: var(--tx-1); }
html:not([data-ui="desktop"]) input.k-check::before { content: ""; position: absolute; left: -4px; right: -4px; top: calc(50% - 22px); bottom: calc(50% - 22px); }
input.k-check:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
input[type="text"], input[type="password"] {
  width: 100%; min-height: 40px; padding: 9px 11px; border-radius: var(--r-s); border: 1px solid var(--ln-field);
  background: var(--sf-sunken); color: var(--tx-1); outline: none; transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="password"]:focus { border-color: var(--ac); box-shadow: 0 0 0 3px rgba(224, 184, 98, 0.18); }
input:disabled { opacity: 0.6; }
input[type="checkbox"]:not(.k-check) { accent-color: var(--ac); width: 18px; height: 18px; }
details.adv { margin-top: 8px; border-top: 1px dashed var(--ln-1); padding-top: 4px; }
details.adv summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; color: var(--tx-2); font-size: var(--fs-sm); }
details.adv label { display: block; }
.hint { margin: 4px 0 0; color: var(--tx-2); font-size: var(--fs-sm); }

.login-form .btn.primary { margin-top: 12px; }
.btn.small { font-size: var(--fs-sm); }
.row-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.row-actions .btn.primary { margin-top: 0; min-width: 140px; }

.form-msg { min-height: 20px; margin-top: 10px; font-size: var(--fs-md); color: var(--tx-2); white-space: pre-wrap; }
.form-msg:empty { min-height: 0; margin-top: 0; }
.form-msg.error { color: var(--st-danger); }
.form-msg.info { color: var(--ac-2); }
/* mất kết nối: CHỈ 1 thông báo (hộp system) — dòng đỏ trên thẻ ẩn khi hộp đang mở (UX-18) */
html:has(.mb-lost) #login .form-msg.error { visibility: hidden; }

.role-list { list-style: none; margin: 0; padding: 4px; max-height: min(52vh, 420px); overflow: auto; border: 1px solid var(--ln-1); border-radius: var(--r-m); background: var(--sf-sunken); outline: none; }
.role-list:focus-visible { border-color: var(--ac); }
.role { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: var(--r-s); cursor: pointer; border: 1px solid transparent; }
.role + .role { margin-top: 4px; }
.role.sel { background: var(--sf-selected); border-color: var(--ln-ac); box-shadow: inset 3px 0 0 var(--ac); }
.role-name { font: 600 var(--fs-lg)/1.3 var(--font-title); color: var(--tx-1); }
.role-meta { grid-column: 1; color: var(--tx-2); font-size: var(--fs-sm); }
.role-map { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ac-2); font-size: var(--fs-sm); }
.role-map:empty { display: none; }
.role-list .empty { padding: 18px; color: var(--tx-2); }
/* cảm ứng: ô nhập 48 px, hàng nhân vật 52 px, nút lg 52 px (kit) */
html:not([data-ui="desktop"]) input[type="text"], html:not([data-ui="desktop"]) input[type="password"] { min-height: 48px; }
html:not([data-ui="desktop"]) .login-form label.check { min-height: 48px; }
html:not([data-ui="desktop"]) details.adv summary { min-height: 44px; }
html:not([data-ui="desktop"]) .role { min-height: 52px; }
html:not([data-ui="desktop"]) .row-actions .btn { flex: 1; min-height: 52px; }
html:not([data-ui="desktop"]) .row-actions .btn:not(.primary) { flex: 0 1 auto; }
/* ---------- HUD ---------- */
.panel-glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.hud-self { position: absolute; left: 14px; top: 14px; display: flex; gap: 12px; padding: 10px 14px 10px 10px; min-width: 260px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: var(--fs-2xl)/1 var(--font-title); color: var(--gold); border: 2px solid var(--gold-deep); background: radial-gradient(circle at 35% 30%, #303a45, #12161b); }
.self-body { flex: 1; min-width: 0; }
.self-name { font: 600 16px/1.2 var(--font-title); color: #f6efdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.self-meta { font-size: var(--fs-sm); color: var(--text-dim); min-height: 16px; }
.bar { position: relative; height: 12px; margin-top: 5px; border-radius: 6px; background: #2a1414; border: 1px solid rgba(0, 0, 0, 0.6); overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #e2604a, #a3301f); transition: width .25s; }
.bar-fill.low { background: linear-gradient(180deg, #ff7a5c, #c0281a); }     /* [V4 ux] hết nhấp nháy vô hạn (hud.js: 1 nhịp/10 %) */
.bar-text { position: absolute; inset: 0; text-align: center; font: 600 var(--fs-xs)/12px var(--font); color: #fff; text-shadow: 0 1px 1px #000; }
@keyframes pulse { to { filter: brightness(1.35); } }

.hud-info { position: absolute; right: 14px; top: 14px; padding: 10px 14px; min-width: 250px; text-align: right; }
.map-name { font: 600 var(--fs-xl)/1.25 var(--font-title); color: var(--gold); }
.coords { font: var(--fs-sm)/1.4 var(--mono); color: var(--text); white-space: pre; margin-top: 3px; opacity: 0.9; }
.net-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; font-size: var(--fs-sm); color: var(--text-dim); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #666; box-shadow: 0 0 6px currentColor; }
.dot.ok { background: var(--jade); color: var(--jade); }
.dot.wait { background: var(--warn); color: var(--warn); }
.dot.bad { background: var(--cinnabar); color: var(--cinnabar); }
.dot.warn { background: var(--gold); color: var(--gold); }
.dot.off { background: #555; color: transparent; }
.ping { font-family: var(--mono); }
.ping.good { color: var(--jade); } .ping.mid { color: var(--warn); } .ping.bad { color: var(--cinnabar); }

.app-status { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border-radius: 20px; background: var(--glass); border: 1px solid var(--line); font-size: var(--fs-md); color: var(--gold); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.app-status:empty { display: none; }

.toasts { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; width: min(560px, calc(100vw - 32px)); }
.toast { padding: 8px 14px; border-radius: 8px; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); font-size: var(--fs-md); transition: opacity .4s, transform .4s; }
.toast.error { border-color: rgba(208, 87, 63, 0.7); color: #ffb3a3; }
.toast.warn { border-color: rgba(230, 162, 60, 0.6); color: #ffd99a; }
.toast.out { opacity: 0; transform: translateY(-6px); }

.hud-debug { position: absolute; right: 14px; top: 128px; margin: 0; padding: 10px 12px; max-width: min(620px, calc(100vw - 32px)); font: var(--fs-sm)/1.5 var(--mono); color: #cfe9df; background: rgba(8, 11, 14, 0.82); border: 1px solid rgba(95, 184, 162, 0.35); border-radius: 8px; white-space: pre-wrap; }
.hud-help { position: absolute; right: 14px; bottom: 12px; font-size: var(--fs-xs); color: var(--text-dim); background: rgba(12, 15, 19, 0.55); padding: 4px 10px; border-radius: 6px; max-width: calc(100vw - 480px); text-align: right; }

/* ---------- chat ---------- */
.chat { position: absolute; left: 14px; bottom: 12px; width: min(440px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 6px; }
.chat-log { height: 190px; overflow-y: auto; padding: 8px 10px; border-radius: var(--radius); background: rgba(10, 13, 17, 0.45); border: 1px solid transparent; font-size: var(--fs-md); line-height: 1.5; scrollbar-width: thin; transition: background .2s, border-color .2s; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.chat.active .chat-log { background: var(--glass); border-color: var(--line); }
.chat-line { word-break: break-word; }
.chat-line .who { color: var(--gold); }
.chat-line .txt { color: var(--text); }
.chan { display: inline-block; font-size: var(--fs-xs); padding: 0 5px; margin-right: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: var(--text-dim); vertical-align: 1px; }
.chan.near { color: #e9e4d8; } .chan.world { color: #f3c96b; } .chan.team { color: #7fc3ff; } .chan.whisper { color: #e58fd6; }
.chan.sys { color: var(--warn); } .chan.npc { color: #9fdc9a; } .chan.force, .chan.camp, .chan.guild { color: #9fb6ff; } .chan.map { color: #c6b6ff; }
.chat-line.error .txt { color: #ffb3a3; }
.chat-bar { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: rgba(10, 13, 17, 0.5); border: 1px solid transparent; opacity: 0.7; transition: opacity .15s, border-color .15s; }
.chat.active .chat-bar { opacity: 1; border-color: var(--line-strong); background: var(--glass); }
.chat-input { flex: 1; border: none !important; background: transparent !important; box-shadow: none !important; padding: 6px 4px !important; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--gold); }

/* màn hẹp hơn 1366: thu gọn khung */
@media (max-width: 1100px) {
  .hud-help { display: none; }
  .hud-self { min-width: 220px; }
  .hud-info { min-width: 210px; }
  .chat-log { height: 150px; }
}
@media (max-height: 700px) {
  .chat-log { height: 130px; }
}

/* =====================================================================================================================
   V2 (I1 — tích hợp đợt 1). Token §2.1 nằm ở css/tokens.css (nạp SAU file này, ghi đè biến trùng tên).
   ===================================================================================================================== */

/* hover chỉ cho thiết bị có chuột (U7 #6: chạm trên mobile không dính trạng thái hover) */
@media (hover: hover) {
  .btn:hover:not(:disabled) { border-color: var(--line-strong); }
  .btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f2d48c, #c39643); }
  .role:hover { background: var(--ink-2); }
  .chat:hover .chat-log { background: var(--glass); border-color: var(--line); }
}

/* ---------- nền mobile (DESIGN_V2 §5.7) ---------- */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#stage, .stage-canvas { touch-action: none; }
#ui { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
button, .btn, .role, summary, label.check { touch-action: manipulation; }
input, textarea, select { font-size: 16px; user-select: text; -webkit-user-select: text; }   /* iOS không tự phóng to khi focus */
html[data-ui="desktop"] .chat-log { user-select: text; -webkit-user-select: text; }
.screen {
  overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  place-items: safe center; align-items: safe center;
  padding: var(--st, 8px) var(--sr, 12px) var(--sb, 8px) var(--sl, 12px);
}
/* màn thấp (điện thoại ngang 844×390, 740×360): thẻ gọn hơn, vẫn cuộn được nếu mở "Nâng cao" */
@media (max-height: 520px) {
  .card { padding: 14px 20px 12px; }
  .brand { margin-bottom: 8px; gap: 10px; }
  .brand-mark { width: 40px; height: 40px; font-size: 24px; }
  .brand h1 { font-size: var(--fs-xl); }
  .login-form label { margin-top: 2px; }
  .login-form label.check { margin-top: 6px; }
  input[type="text"], input[type="password"] { padding: 7px 10px; }
  .btn.primary { margin-top: 8px; }
  .form-msg { min-height: 16px; margin-top: 6px; }
  h2 { margin-bottom: 8px; }
  .role-list { max-height: min(46vh, 420px); }
}

/* ---------- [V7 home] CỔNG ĐĂNG NHẬP / CHỌN NHÂN VẬT — phần nhìn (luồng home sở hữu khối này; markup do login.js/roles.js dựng).
   Nền = ảnh chụp từ chính game (dùng chung web/home/hero-*.webp với trang chủ ⇒ đã có trong cache khi bấm "Chơi ngay"), lớp phủ
   tối phía thẻ. Máy tính / điện thoại ngang: logo lớn bên trái (::before/::after của .screen — không đổi markup), thẻ bên phải.
   Điện thoại dọc: logo trong thẻ. Thanh trên .portal-bar ("Trang chủ" + trạng thái máy chủ) CHỜ main thêm markup vào index.html
   (docs/impl/V7_home.md "Yêu cầu cho main"). Chỉ animate opacity/transform; tôn trọng giảm chuyển động. */
#login.screen, #roles.screen {
  background:
    linear-gradient(90deg, rgba(8, 11, 14, .30) 0%, rgba(8, 11, 14, .40) 42%, rgba(8, 11, 14, .82) 66%, rgba(8, 11, 14, .92) 100%),
    linear-gradient(180deg, rgba(8, 11, 14, .55) 0%, rgba(8, 11, 14, .05) 26%, rgba(8, 11, 14, .10) 70%, rgba(8, 11, 14, .80) 100%),
    url("../home/hero-1440.webp") 38% 50% / cover no-repeat, #0c0f13;
}
@media (max-width: 900px) and (orientation: landscape) {
  #login.screen, #roles.screen { background-image:
    linear-gradient(90deg, rgba(8, 11, 14, .30) 0%, rgba(8, 11, 14, .45) 40%, rgba(8, 11, 14, .86) 62%, rgba(8, 11, 14, .94) 100%),
    linear-gradient(180deg, rgba(8, 11, 14, .5) 0%, rgba(8, 11, 14, .05) 30%, rgba(8, 11, 14, .1) 70%, rgba(8, 11, 14, .8) 100%),
    url("../home/hero-1080.webp"); }
}
@media (min-width: 1700px) {
  #login.screen, #roles.screen { background-image:
    linear-gradient(90deg, rgba(8, 11, 14, .30) 0%, rgba(8, 11, 14, .40) 42%, rgba(8, 11, 14, .82) 66%, rgba(8, 11, 14, .92) 100%),
    linear-gradient(180deg, rgba(8, 11, 14, .55) 0%, rgba(8, 11, 14, .05) 26%, rgba(8, 11, 14, .10) 70%, rgba(8, 11, 14, .80) 100%),
    url("../home/hero-1920.webp"); }
}
@media (orientation: portrait) {
  #login.screen, #roles.screen { background:
    linear-gradient(180deg, rgba(8, 11, 14, .35) 0%, rgba(8, 11, 14, .55) 40%, rgba(8, 11, 14, .88) 75%, #0c0f13 100%),
    url("../home/hero-p-780.webp") 50% 30% / cover no-repeat, #0c0f13; }
}
/* thẻ: mặt tối trên ảnh, viền vàng nhạt + 4 góc trang trí */
#login .card, #roles .card {
  background: linear-gradient(180deg, rgba(20, 26, 32, .94), rgba(12, 16, 20, .96));
  border: 1px solid rgba(224, 184, 98, .30);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
}
#login .card::after, #roles .card::after {
  content: ""; position: absolute; inset: 7px; border-radius: calc(var(--r-l) - 5px); pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--ac), var(--ac)) top left / 14px 1px no-repeat, linear-gradient(var(--ac), var(--ac)) top left / 1px 14px no-repeat,
    linear-gradient(var(--ac), var(--ac)) top right / 14px 1px no-repeat, linear-gradient(var(--ac), var(--ac)) top right / 1px 14px no-repeat,
    linear-gradient(var(--ac), var(--ac)) bottom left / 14px 1px no-repeat, linear-gradient(var(--ac), var(--ac)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--ac), var(--ac)) bottom right / 14px 1px no-repeat, linear-gradient(var(--ac), var(--ac)) bottom right / 1px 14px no-repeat;
}
#login .login-card { width: min(420px, calc(100vw - 32px)); padding: 30px 32px 24px; }
#roles .roles-card { width: min(560px, calc(100vw - 32px)); padding: 28px 30px 22px; }
#login input[type="text"], #login input[type="password"] { min-height: 46px; padding: 10px 14px; background: rgba(8, 11, 14, .72); }
#login .login-form label { color: var(--tx-2); font-weight: 600; }
#login .btn.primary { min-height: 52px; font-size: var(--fs-lg); letter-spacing: .02em; box-shadow: 0 8px 24px rgba(224, 184, 98, .18); }
#roles .role-list { background: rgba(8, 11, 14, .6); }
#roles .roles-head h2 { font-size: var(--fs-2xl); }

/* máy tính + điện thoại ngang: logo lớn bên trái, thẻ bên phải */
@media (orientation: landscape) and (min-width: 700px) {
  #login.screen, #roles.screen { justify-items: end; padding-right: max(var(--sr, 12px), clamp(20px, 7vw, 140px)); }
  #login.screen::before, #roles.screen::before, #login.screen::after, #roles.screen::after {
    position: absolute; left: max(var(--sl, 12px), clamp(24px, 7vw, 132px)); max-width: calc(100% - min(560px, 50vw) - 16vw); pointer-events: none; }
  #login.screen::before, #roles.screen::before {
    content: "JX3 Web"; top: calc(50% - clamp(70px, 9vw, 120px));
    font: 700 clamp(44px, 6.6vw, 104px)/1 var(--font-title); letter-spacing: .01em; white-space: nowrap;
    background: linear-gradient(180deg, #fbeabd 8%, var(--ac) 52%, #b98a3f 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .65)); }
  #login.screen::after, #roles.screen::after {
    content: "Kiếm Hiệp Tình Duyên III · máy chủ 2018"; top: calc(50% + clamp(4px, 1.4vw, 22px));
    padding-top: 14px; border-top: 1px solid rgba(224, 184, 98, .5); color: var(--tx-1);
    font: 600 clamp(14px, 1.45vw, 22px)/1.35 var(--font); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
  #login .brand { display: none; }
  #login .login-form::before { content: "Đăng nhập"; margin: 0 0 10px; color: var(--tx-1); font: 600 var(--fs-2xl)/1.2 var(--font-title); }
}
/* điện thoại ngang thấp: thẻ gọn, logo nhỏ hơn */
@media (orientation: landscape) and (max-height: 520px) {
  #login .login-card { padding: 16px 22px 12px; }
  #roles .roles-card { padding: 16px 20px 12px; }
  #login .login-form::before { content: none; }              /* màn thấp: logo bên trái đã đủ, nút Đăng nhập không phải cuộn */
  #login .login-form label { margin-top: 0; }
  #login .login-form label.check { margin-top: 2px; min-height: 44px; }
  #login.screen::before, #roles.screen::before { top: calc(50% - 64px); font-size: clamp(40px, 7vw, 60px); }
  #login.screen::after, #roles.screen::after { top: calc(50% + 6px); padding-top: 10px; font-size: 13px; }
  #login input[type="text"], #login input[type="password"] { min-height: 44px; padding: 8px 12px; }
}
/* điện thoại dọc: logo trong thẻ, thẻ ở nửa dưới (nửa trên là ảnh) */
@media (orientation: portrait) {
  #login.screen, #roles.screen { align-items: end; padding-bottom: max(var(--sb, 8px), 24px); }
  #login .brand { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 14px; }
  #login .brand h1 { font-size: var(--fs-3xl); color: var(--ac); }
}
/* thanh trên (markup: index.html — xem Yêu cầu cho main): "‹ Trang chủ" + trạng thái máy chủ, ẩn khi đang chơi */
.portal-bar { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(var(--st, 8px), 12px) max(var(--sr, 12px), 20px) 0 max(var(--sl, 12px), 20px); pointer-events: none; }
#ui > .portal-bar { pointer-events: none; }            /* thắng `#ui > *` (auto) — dải trống không chặn chạm vào thẻ bên dưới */
.portal-bar > * { pointer-events: auto; }
html:not(.v2-out) .portal-bar { display: none; }
.portal-home { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  border: 1px solid rgba(236, 230, 214, .22); background: rgba(8, 11, 14, .55); color: var(--tx-1); font: 600 var(--fs-sm)/1 var(--font); text-decoration: none; }
.portal-home::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); margin-left: 4px; }
.portal-srv { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(8, 11, 14, .55);
  color: var(--tx-2); font-size: var(--fs-sm); }
.portal-srv::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 3px rgba(90, 210, 90, .2); }
.portal-srv[data-srv="offline"]::before { background: var(--st-warn); box-shadow: 0 0 0 3px rgba(230, 162, 60, .2); }
html:not([data-ui="desktop"]) .portal-home { min-height: 44px; }
@media (hover: hover) { .portal-home:hover { border-color: var(--ac); color: var(--ac); } }
@media (prefers-reduced-motion: no-preference) {
  #login:not(.hidden) .card, #roles:not(.hidden) .card { animation: portal-in .5s var(--ease) both; }
}
html.reduce-motion #login .card, html.reduce-motion #roles .card { animation: none; }
@keyframes portal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- lớp HUD V2 (ui/layout.js) chỉ hiện khi đang chơi — màn đăng nhập/chọn nhân vật không bị đè ---------- */
/* main.js gắn html.v2-out ngoài cảnh (trang test chỉ dùng layout.js không bị ảnh hưởng) */
html.v2-out #hud > :is(.l-frames, .l-tracker, .l-controls, .l-hint, .l-sheet) { visibility: hidden; }
/* trợ giúp phím cũ (Q/E xoay camera) đã sai với chế độ "Gốc" — hướng dẫn điều khiển nay in ở khung chat khi vào game */
.hud-help { display: none !important; }

/* ---------- HUD cũ (hud.js/chat.js chế độ cũ) trên giao diện cảm ứng: gọn, không chồng vùng joystick/cụm nút (§3.4) ---------- */
html:not([data-ui="desktop"]) .panel-glass { backdrop-filter: none; background: var(--panel-strong); }
html:not([data-ui="desktop"]) .hud-self { left: var(--sl); top: var(--st); min-width: 0; width: 14.6rem; padding: .3rem .5rem .35rem .35rem; gap: .45rem; }
html:not([data-ui="desktop"]) .hud-self .avatar { width: 2.5rem; height: 2.5rem; font-size: var(--fs-2xl); border-width: 1px; }
html:not([data-ui="desktop"]) .hud-self .self-name { font-size: var(--fs-lg); }
html:not([data-ui="desktop"]) .hud-self .self-meta { font-size: var(--fs-xs); min-height: 0; }
html:not([data-ui="desktop"]) .hud-self .bar { margin-top: 3px; }
html:not([data-ui="desktop"]) .hud-info { right: var(--sr); top: var(--st); min-width: 0; max-width: 8.4rem; padding: .3rem .45rem; }
html:not([data-ui="desktop"]) .hud-info .map-name { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not([data-ui="desktop"]) .hud-info .coords { display: none; }
html:not([data-ui="desktop"]) .hud-info .net-row { gap: .3rem; margin-top: .2rem; font-size: var(--fs-xs); }
html:not([data-ui="desktop"]) .hud-info .net-row > span:nth-child(2) { display: none; }       /* chữ trạng thái: chấm màu đủ */
html:not([data-ui="desktop"]) .hud-info .btn.small { min-height: 2rem; padding: 0 .55rem; }
html:not([data-ui="desktop"]) .toasts { top: calc(var(--st) + 3.6rem); }
html:not([data-ui="desktop"]) .chat {
  left: calc(40vw + 8px); bottom: var(--sb); width: min(16.25rem, calc(58vw - 2rem)); gap: 3px;
}
html:not([data-ui="desktop"]) .chat-log {
  height: 2.75em; padding: 2px 6px; font-size: var(--fs-xs); line-height: 1.25; overflow: hidden; pointer-events: none;
}
html:not([data-ui="desktop"]) .chat.active .chat-log { height: 8em; overflow-y: auto; pointer-events: auto; }
html:not([data-ui="desktop"]) .chat-bar { padding: 0 4px; }
html:not([data-ui="desktop"]) .chat-input { padding: 3px 4px !important; }
/* Ctrl+U (TOGGLE_UI §4.8): ẩn toàn bộ giao diện để ngắm cảnh/chụp ảnh — bấm lại để hiện */
html.ui-hidden #hud, html.ui-hidden #chat { visibility: hidden; }
/* đợt 1: bảng trái cảm ứng "Nhiệm vụ | Tổ đội" (layout.js) chưa có nội dung (B7 tracker / B8 tổ đội nối ở đợt 2) — ẩn để không
   chiếm vùng joystick bằng 1 khung rỗng. main.js gắn html.v2-no-lpanel; I2 gỡ lớp này khi mount tracker/party. */
html.v2-no-lpanel #hud .lpanel.on { display: none !important; }

/* ── [V2 I2] đợt 2 ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* policy bridge (D13): nhóm tính năng thiếu op ⇒ ẩn (không gửi, không bị ngắt kênh) — main.js gắn html.srv-no-<nhóm> */
html.srv-no-skills .z-cluster, html.srv-no-skills .z-actionbar, html.srv-no-skills .z-castbar { display: none !important; }
html.srv-no-talk.srv-no-loot .z-interact { display: none !important; }
/* op285 On_Trial_Screen_Black (P2): màn đen 1 s */
.v2-black { position: fixed; inset: 0; background: #000; z-index: 60; pointer-events: none; animation: v2-black 1s ease forwards; }
@keyframes v2-black { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* thanh kỹ năng desktop (B6) đặt nút đổi trang ▲▼ lệch trái 2,1rem NGOÀI zone actionbar; ở 1366×768 khe chat–thanh chỉ 12 px ⇒ chừa chỗ */
html[data-ui="desktop"] #hud .z-chat > .hud-chat { width: calc(100% - 1.5rem); }