/* Small server-client additions; the original hud-skin/mobile-menu CSS owns layout. */
html.server-hud #dialog { inset:0; pointer-events:auto; align-items:flex-end; padding:8px 8px min(120px,20vh); }
html.server-hud #dialog .npc-dlg { padding-top:28px; }
html.server-hud [data-dialog-close] { position:absolute; top:-10px; right:-10px; width:44px; height:44px; margin:0; border:1px solid #b8913a; border-radius:50%; background:#19170f; color:#fff0cc; font-size:26px; touch-action:manipulation; }
@media (max-width:700px) { html.server-hud #dialog { padding-bottom:8px; } }
#render-fps { display:block; padding:3px 1px; color:#f7e2b5; background:#14110ee8; font:9px/1.3 ui-monospace,monospace; white-space:nowrap; text-align:center; pointer-events:none; }
#minimap .mm-coords { text-align:center; font:10px/1.2 system-ui; color:#e8dcc4; }
#minimap .mm-bar span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#avatar { padding:0; }
#joy[hidden] { display:none!important; }
#joy.disabled { opacity:.4; pointer-events:none; }
#mwheel button:disabled { opacity:.55; }
#minimap canvas { width:132px; height:82px; cursor:default; }
#hotbar { display:flex; max-width:70vw; overflow:auto; }
#mobile-menu-camera:empty { display:none; }
.pop-close { display:none; }
html.server-hud [hidden] { display:none!important; }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) {
  html.server-hud #actions button { min-width:44px; width:44px; min-height:44px; height:44px; padding:0; text-align:center; }
  html.hud-skin.server-hud.mobile-menu-ready #mobile-menu-toggle { top:calc(150px + var(--st)); }
  html.server-hud #chat-in { display:flex; }
  html.server-hud body.chat-min #chat, html.server-hud body.chat-min #chat-in { display:none; }
  html.server-hud body.nav-open header nav, html.server-hud body.dock-open #dock { display:flex; }
  html.server-hud body.nav-open header nav .pop-close, html.server-hud body.dock-open #dock .pop-close { display:block; min-height:44px; }
  html.server-hud #dock .npcsearch { width:100%; }
  html.server-hud #dock #npc-list { position:relative; max-height:40dvh; }
  html.server-hud #side { min-width:0; }
}
@media (pointer:coarse) and (max-width:1400px) and (max-height:500px) and (orientation:landscape), (max-width:760px) and (max-height:500px) and (orientation:landscape) {
  html.hud-skin.server-hud.mobile-menu-ready #mobile-menu-toggle { top:calc(132px + var(--st)); }
}
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) {
  html.server-hud #actions { max-width:96px; }
}
/* Server-backed character and equipment panels. */
html.server-hud #win { z-index:160; }
html.server-hud #win .box.win { min-height:0; max-height:calc(100dvh - 16px); background:linear-gradient(145deg,#252117,#121b1a); color:#f3e7c4; border:1px solid #b89a52; }
html.server-hud #win-body { min-height:0; overscroll-behavior:contain; touch-action:pan-y; }
html.server-hud #win button { min-height:44px; touch-action:manipulation; }
.character-tabs { display:flex; gap:8px; }
.character-tabs [aria-pressed=true] { border-color:#edc875; background:#61502b; }
.character-layout { display:grid; grid-template-columns:minmax(190px,1fr) 2fr; gap:18px; }
.gear-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.gear-card { display:flex; flex-direction:column; gap:6px; padding:10px; border:1px solid #6d5b36; border-radius:6px; background:#191b17; min-width:0; overflow-wrap:anywhere; }
.gear-card small { color:#b8aa8c; }.gear-card p { margin:0; font-size:12px; white-space:pre-line; }
.gear-card.empty { border-style:dashed; }.gear-option { color:#8ed0a1; }.gear-requirement { color:#f1ab8d; }
.gear-buttons { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.attribute-row { display:flex; align-items:center; gap:8px; border-bottom:1px solid #574b32; }.attribute-row span { flex:1; }
.combat-stats { display:grid; grid-template-columns:1fr auto; gap:8px; }.combat-stats dd { margin:0; text-align:right; }
@media(max-width:500px) { .character-layout { grid-template-columns:1fr; } .gear-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Character creation: four body types as a 2-column radio grid inside #entry. */
#entry .ent-look { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px; }
#entry .ent-look label { display:flex; align-items:center; gap:8px; margin:0; padding:10px; border:1px solid #7a6a3c; border-radius:8px; background:rgba(0,0,0,.35); color:#f3e7c4; font-size:14px; text-transform:none; letter-spacing:0; cursor:pointer; }
#entry .ent-look label:has(input:checked) { border-color:#f0c860; box-shadow:0 0 0 2px rgba(240,200,96,.25); }
#entry .ent-look input { width:auto; padding:0; margin:0; accent-color:#d9a441; }

/* GM panel: stacked full-width groups; gold buttons with dark text (readable on the panel). */
#win-body .gm-form { display:flex; flex-direction:column; gap:10px; width:100%; }
#win-body .gm-form > p { margin:0; color:#e8dcc4; }
#win-body .gm-form fieldset { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; width:100%; box-sizing:border-box; margin:0; border:1px solid #6b5734; border-radius:8px; padding:8px 10px; }
#win-body .gm-form legend { color:#d9a441; padding:0 4px; }
#win-body .gm-form label { display:flex; flex-direction:column; gap:2px; font-size:12px; color:#cbbf9f; }
#win-body .gm-form input, #win-body .gm-form select { width:96px; min-height:34px; box-sizing:border-box; background:rgba(0,0,0,.4); border:1px solid #7a6a3c; border-radius:6px; color:#f3e7c4; padding:4px 6px; }
#win-body .gm-form select { width:min(320px, 70vw); }
#win-body .gm-form button { min-height:34px; padding:6px 12px; border:1px solid #e4bd69; border-radius:6px; background:linear-gradient(180deg,#e9c46a,#a8741f); color:#2b1c05; font-weight:700; cursor:pointer; }
#win-body .char-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:8px 10px; border:1px solid #6b5734; border-radius:8px; color:#e8dcc4; }
#win-body .char-row em { color:#9fd3a0; font-style:normal; }
#win-body .char-row button { min-height:32px; padding:4px 12px; border:1px solid #e4bd69; border-radius:6px; background:linear-gradient(180deg,#e9c46a,#a8741f); color:#2b1c05; font-weight:700; cursor:pointer; }
/* Settlement panel: one row per item, action button on the right. */
#win-body .land fieldset { flex-direction:column; align-items:stretch; }
#win-body .land .char-row { justify-content:space-between; }
#win-body .land .char-row button:disabled { opacity:.45; cursor:not-allowed; }

/* Character / bag panels: the shared button rule paints var(--panel2) (light parchment in the
   HUD skin) under inherited light text, and the two columns sit on the same light paper.
   Give the window one readable scheme: dark columns, gold buttons with dark text. */
#win-body .character-layout > * { background:rgba(0,0,0,.28); color:#e8dcc4; border-radius:8px; }
#win-body .character-layout h3, #win-body .character-layout h4 { color:#d9a441; }
#win-body .attribute-row span, #win-body .combat-stats, #win-body .combat-stats * { color:#e8dcc4; }
#win-body button:not(:disabled) { background:linear-gradient(180deg,#e9c46a,#a8741f); color:#2b1c05; border:1px solid #e4bd69; font-weight:700; }
#win-body button:disabled { background:#3a3326; color:#9c927c; border:1px solid #5a4f3a; }
#win-body .character-tabs button[aria-pressed="true"] { background:#61502b; color:#f3e7c4; border-color:#edc875; }



/* ---- Phone held sideways (low, touch screen) ----------------------------------------
   site/style.css turns every .fwin into a full-screen sheet here (inset:0) and the HUD skin
   stretches the chat across the screen. Landscape phones have room for floating windows,
   so keep them compact and anchored to a side, and shrink the chat to a corner. */
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse) {
  html.server-hud .fwin { inset:auto !important; top:calc(6px + var(--st, 0px)) !important; bottom:auto !important; height:auto !important;
    max-height:calc(100dvh - 12px) !important; width:auto !important; border-radius:10px !important; }
  html.server-hud #fchar { left:calc(6px + var(--sl, 0px)) !important; max-width:min(600px, calc(100vw - 12px)) !important; }
  html.server-hud #fbag { right:calc(6px + var(--sr, 0px)) !important; left:auto !important; max-width:min(420px, calc(100vw - 12px)) !important; }
  html.server-hud .fwin .win-head { font-size:14px; padding:3px 8px; }
  html.server-hud .fwin .win-head button { min-height:28px !important; min-width:32px !important; font-size:15px !important; padding:0 !important; }
  html.server-hud .fwin .fbody { padding:6px !important; }

  /* Nhân vật */
  html.server-hud #eq-root { flex-direction:row !important; gap:6px; }
  html.server-hud #fchar .jx-side { width:62px; min-width:62px; gap:4px; }
  html.server-hud #fchar .jx-side button { font-size:11px; padding:5px 2px; min-height:0; }
  html.server-hud #fchar .jx-slot { width:36px !important; height:36px !important; min-width:0; }
  html.server-hud #fchar .jx-slot em { font-size:7px; line-height:1.05; }
  html.server-hud #fchar .jx-col { gap:3px; }
  html.server-hud #fchar .jx-pair { gap:2px; }
  html.server-hud #fchar .jx-stage { gap:4px; padding:4px; }
  html.server-hud #jx-prev { height:min(210px, calc(100dvh - 120px)) !important; width:auto; }
  html.server-hud #fchar .jx-foot, html.server-hud #fchar .jx-lines { font-size:11px; line-height:1.35; }
  html.server-hud #fchar .jx-foot label { gap:3px; }
  html.server-hud #fchar .jx-foot input { width:14px; height:14px; }

  /* Hành trang */
  html.server-hud #fbag .jx-bagtop { gap:5px; flex-wrap:nowrap; }
  html.server-hud #fbag .jx-grid .jx-slot { width:34px !important; height:34px !important; }
  html.server-hud #fbag .jx-bagtabs button { width:30px; height:44px; font-size:12px; padding:0; }
  html.server-hud #fbag .jx-bagtabs span { font-size:12px; }
  html.server-hud #fbag .jx-menu { gap:4px; min-width:0; }
  html.server-hud #fbag .jx-menu button { font-size:11px; padding:5px 6px; min-height:0; height:32px; }
  html.server-hud #fbag .jx-money { font-size:11px; gap:4px; margin-top:4px; }
  html.server-hud #fbag .jx-money > div { padding:3px 6px; font-size:11px; }
  html.server-hud #fbag .jx-info { font-size:11px; padding:5px 7px; margin-top:4px; }
  html.server-hud #fbag .jx-btns button { font-size:11px; padding:3px 8px; min-height:0; }

  /* Chat: small box in the lower-left corner instead of a band across the screen */
  html.hud-skin.server-hud #side { right:auto !important; width:min(260px, 31vw) !important; height:54px !important; }
  html.server-hud #side #chat { font-size:10px; }
  html.server-hud #chat-in { min-height:22px !important; }
  html.server-hud #chat-in select, html.server-hud #chat-in input { font-size:11px !important; min-height:20px !important; padding:0 4px !important; }
  html.server-hud #chat-in select { width:52px; flex:none; }
}

/* Network delay under the minimap, next to the FPS meter */
#net-ping { display:block; font:11px/1.2 ui-monospace, Menlo, monospace; text-align:center; margin-top:1px; }
#net-ping[data-level="good"] { color:#7fe09a; }
#net-ping[data-level="ok"] { color:#f2c94c; }
#net-ping[data-level="bad"] { color:#ff7a66; }
/* Painted button art (site/assets/ui/btn). */
.btn-art { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 1px 2px #000a); transition:transform .12s ease-out, filter .12s; }
#sysdock button.has-art { padding:2px; }
#sysdock button.has-art .btn-art { width:34px; height:34px; }
#sysdock button.has-art:hover .btn-art { transform:scale(1.08); }
html.server-hud #actions button.has-art, html.hud-skin #actions button.has-art { padding:2px; text-align:center; }
#actions button.has-art .btn-art { width:24px; height:24px; }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) { #actions button.has-art .btn-art { width:38px; height:38px; } }
#actions button.has-art:not(.on) .btn-art { filter:drop-shadow(0 1px 2px #000a) saturate(.75) brightness(.85); }
#actions button.has-art.on { box-shadow:0 0 0 2px #ffd23a, 0 0 10px #ffd23a88; }
#actions button.has-art:active .btn-art, #sysdock button.has-art:active .btn-art { transform:scale(.92); }
.mobile-menu-grid .btn-art { flex:none; width:33px; height:33px; }
@media (prefers-reduced-motion:reduce) { .btn-art { transition:none; } }
/* Mobile quick bar (#mdock): landscape = row left of the minimap, portrait = column under the menu toggle. */
#mdock { display:none; }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) {
  html.hud-skin #mdock { display:flex; position:absolute; z-index:9; gap:6px; top:calc(6px + var(--st)); right:calc(156px + var(--sr)); }
  html.hud-skin #mdock button { width:48px; height:48px; padding:3px; border-radius:50%; border:1px solid var(--rim); background:radial-gradient(circle at 50% 35%,#3a2d18e6,#140f09e6); box-shadow:0 2px 6px #0009; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  html.hud-skin #mdock button:active .btn-art { transform:scale(.9); }
  html.hud-skin body.mobile-menu-open #mdock { visibility:hidden; }
}
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) {
  html.hud-skin #mdock { flex-direction:column; top:calc(204px + var(--st)); right:calc(8px + var(--sr)); }
}

/* WebGL Canvas & Terrain Visual Clarity */
#stage .gl {
  image-rendering: auto;
}

/* ---- Nhân vật on phones / small screens (#fchar.pcm): the PC layout, compact. The stats column is
   hidden on "Trang bị" and opens from "Thông tin" (vitals, combat) or "Tiềm năng" (attributes). ---- */
#fchar.pcm { --s:clamp(28px, calc((100dvh - 200px) / 7.6), 46px); background:linear-gradient(180deg,#123f3d,#0b2b2a); border:2px solid #b8913a; color:#d7e7da; }
#fchar.pcm .win-head { background:linear-gradient(180deg,#1f5e5a,#123f3d); border-bottom:1px solid #b8913a; padding:2px 4px 2px 10px; min-height:0; }
#fchar.pcm .win-head b { flex:1; font:700 16px/1.2 Georgia, serif; color:#f3d27a; }
html.server-hud #fchar.pcm .win-head button { width:34px; height:34px; min-width:0 !important; min-height:0 !important; padding:0 !important; margin-left:4px; border:1px solid #9fb9b0;
  border-radius:4px; background:linear-gradient(180deg,#3b6c66,#1d413e); color:#e9f3ec; font:700 16px/1 system-ui !important; }
html.server-hud #fchar.pcm .fbody { padding:6px !important; }
#fchar.pcm .pc-tabs { display:flex; gap:3px; border-bottom:1px solid #3f6a64; margin-bottom:6px; }
#fchar.pcm .pc-tabs button { flex:1; min-height:34px; padding:4px 8px; border:1px solid #3f6a64; border-bottom:0; border-radius:6px 6px 0 0; background:#183f3c; color:#d7e7da;
  font:600 13px Georgia, serif; white-space:nowrap; touch-action:manipulation; }
#fchar.pcm .pc-tabs button.on { background:linear-gradient(180deg,#2b5c57,#183f3c); color:#f3d27a; }
#fchar.pcm .pc-body { display:grid; gap:6px; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"gear row" "foot foot"; }
/* Thông tin / Tiềm năng show only their own panel: no equipment, no attributes mixed in. */
#fchar.pcm .pc-body.tab-info, #fchar.pcm .pc-body.tab-pot { grid-template-columns:minmax(0,1fr); grid-template-areas:"stats"; }
#fchar.pcm .tab-info :is(.pc-gear,.pc-row,.pc-foot), #fchar.pcm .tab-pot :is(.pc-gear,.pc-row,.pc-foot) { display:none !important; }
/* Trang bị: gear only. Thông tin: reserved panel only. Tiềm năng: stats + attribute points together. */
#fchar.pcm .tab-equip .pc-stats, #fchar.pcm .tab-info :is(.info,.pot), #fchar.pcm .tab-pot .misc { display:none !important; }
#fchar.pcm .pc-box.misc { display:block; min-height:calc(var(--s) * 3); color:#88a9a2; font:13px/1.4 Georgia, serif; }
#fchar.pcm .pc-box.misc p { margin:4px 0; }
/* Tiềm năng side by side when the screen is wide enough: stats left, attributes + points right. */
#fchar.pcm .tab-pot .pc-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:auto auto 1fr; align-items:start; gap:5px 8px;
  min-width:calc(var(--s) * 13); }
#fchar.pcm .tab-pot .pc-box.info { display:block; }
#fchar.pcm .tab-pot .vit { grid-column:1; grid-row:1; } #fchar.pcm .tab-pot .cmb { grid-column:1; grid-row:2 / 4; }
#fchar.pcm .tab-pot .attrs { grid-column:2; grid-row:1 / 3; } #fchar.pcm .tab-pot .r.pot { grid-column:2; grid-row:3; }
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse) {
  #fchar.pcm .tab-pot .pc-box.info .r { min-height:19px; font-size:12px; }
}
/* Hold-"+" quick allocation */
#fchar .pt-quick { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; display:flex; flex-direction:column; gap:8px; width:min(260px, calc(100% - 24px));
  padding:12px; border:2px solid #b8913a; border-radius:8px; background:linear-gradient(180deg,#1f5e5a,#0b2b2a); box-shadow:0 8px 24px rgba(0,0,0,.6); color:#e9f3ec; font:14px Georgia, serif; }
#fchar .pt-quick b { color:#f3d27a; } #fchar .pt-quick small { color:#bfe0c9; }
#fchar .pt-quick div { display:flex; gap:6px; }
#fchar .pt-quick input { flex:1; min-width:0; min-height:40px; font-size:18px; text-align:center; border:1px solid #9fb9b0; border-radius:4px; background:#0a2423; color:#fff; }
#fchar .pt-quick button { min-width:40px; min-height:40px; padding:0 10px; border:1px solid #9fb9b0; border-radius:4px; background:linear-gradient(180deg,#3b6c66,#1d413e); color:#e9f3ec; font:700 14px system-ui; }
#fchar .pt-quick button[type="submit"] { flex:1; background:linear-gradient(180deg,#e9c46a,#a8741f); color:#2b1c05; border-color:#e4bd69; }
#fchar .pt-quick div:last-child button[data-q="cancel"] { flex:1; }
#fchar.pcm .pc-stats { grid-area:stats; display:flex; flex-direction:column; gap:5px; min-width:calc(var(--s) * 10.6);
  max-height:calc(var(--s) * 8 + 40px); overflow:auto; overscroll-behavior:contain; }
#fchar.pcm .pc-box { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; }
#fchar.pcm .pc-box { background:rgba(4,22,21,.55); border:1px solid #2f5752; border-radius:4px; padding:3px 7px; }
#fchar.pcm .pc-stats .r { display:flex; align-items:center; gap:5px; min-height:21px; font:13px/1.2 Georgia, serif; }
#fchar.pcm .pc-stats .r span { flex:1; color:#bfe0c9; white-space:nowrap; }
#fchar.pcm .pc-stats .r b { color:#e9f3ec; font-weight:600; white-space:nowrap; }
#fchar.pcm .pc-stats .r b.hp { color:#ff6b5b; } #fchar.pcm .pc-stats .r b.mp { color:#8fb4ff; }
#fchar.pcm .pc-stats .r b i { color:#f3d27a; font-style:normal; }
#fchar.pcm .pc-stats .attrs .r { min-height:36px; }
#fchar.pcm .pc-stats .attrs button { width:32px; height:32px; padding:0; min-height:0; border:1px solid #9fb9b0; border-radius:4px; background:#2b5c57; color:#fff; font:700 16px/1 system-ui; touch-action:manipulation; }
#fchar.pcm .pc-stats .attrs button:disabled { opacity:.35; }
#fchar.pcm .pc-stats .attrs button[aria-label^="Giảm"] { display:none; }
/* attribute rows: "allocated+bonus" values are longer with the native model — let the two
   columns shrink (labels ellipsize) so the + buttons stay inside the window */
#fchar.pcm .pc-box.attrs { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:8px; }
#fchar.pcm .pc-stats .attrs .r { min-width:0; }
#fchar.pcm .pc-stats .attrs .r span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
#fchar.pcm .pc-stats .attrs .r button { flex:none; }
#fchar.pcm .pc-stats .r.pot { padding:2px 7px; } #fchar.pcm .pc-stats .r.pot b { color:#f3d27a; }
#fchar.pcm .pc-gear { grid-area:gear; display:flex; gap:5px; min-width:0; }
#fchar.pcm .pc-col, #fchar.pcm .pc-row { display:flex; flex-direction:column; gap:3px; }
#fchar.pcm .pc-row { grid-area:row; }
html.server-hud #fchar.pcm .jx-slot { width:var(--s) !important; height:var(--s) !important; min-width:0; background:#0f2f2e; border:1px solid #52706a; border-radius:3px; box-shadow:inset 0 0 6px rgba(0,0,0,.6); }
#fchar.pcm .jx-slot.full { border-color:#b8913a; }
#fchar.pcm .jx-slot em { font-size:7px; line-height:1.05; color:#88a9a2; }
#fchar.pcm .pc-model { flex:1; min-width:calc(var(--s) * 3.4); display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%, #1d4a46 0%, #0d2b2a 70%); border:1px solid #2f5752; border-radius:4px; }
html.server-hud #fchar.pcm #jx-prev { height:calc(var(--s) * 7 + 14px) !important; width:auto; max-width:100%; object-fit:contain; }
#fchar.pcm .pc-foot { grid-area:foot; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; padding:4px 8px; background:rgba(4,22,21,.55);
  border:1px solid #2f5752; border-radius:4px; font:12px/1.3 Georgia, serif; }
#fchar.pcm .pc-foot span { color:#f3d27a; } #fchar.pcm .pc-foot b { color:#e9f3ec; font-weight:600; }
#fchar.pcm .pc-foot label { margin-left:auto; display:flex; align-items:center; gap:4px; color:#bfe0c9; }
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse) {
  #fchar.pcm { --s:clamp(28px, calc((100dvh - 150px) / 7.6), 46px); }
}
/* Phone held upright: a card as tall as its content (not a full-screen sheet), stats under the
   equipment in two columns so Trang bị / Thông tin / Tiềm năng all fit without scrolling. */
@media (max-width:760px) and (orientation:portrait) {
  html.server-hud #fchar.pcm { --s:clamp(30px, calc((100vw - 60px) / 7.4), 44px);
    inset:auto !important; top:calc(6px + env(safe-area-inset-top)) !important; left:6px !important; right:6px !important; bottom:auto !important;
    width:auto !important; height:auto !important; max-height:calc(100dvh - 12px - env(safe-area-inset-top)) !important; border-radius:10px !important; overflow:auto; }
  html.server-hud #fchar.pcm .fbody { flex:none; overflow:visible; }
  #fchar.pcm .win-head b { font-size:15px; }
  html.server-hud #fchar.pcm .win-head button { width:30px; height:30px; }
  #fchar.pcm .pc-tabs button { min-height:32px; font-size:13px; padding:3px 4px; }
  #fchar.pcm .pc-body { gap:5px; }
  #fchar.pcm .pc-gear { gap:4px; }
  #fchar.pcm .pc-foot { font-size:11px; padding:3px 7px; gap:0 8px; }
  #fchar.pcm .pc-stats { max-height:none; overflow:visible; gap:6px; min-width:0; }
  #fchar.pcm .tab-pot .pc-stats { display:flex; align-items:stretch; min-width:0; }
  #fchar.pcm .tab-pot .r.pot { justify-content:space-between; }
  #fchar.pcm .tab-pot .pc-box.info { display:grid; }
  #fchar.pcm .pc-box { display:grid; grid-template-columns:1fr 1fr; column-gap:12px; padding:3px 8px; }
  #fchar.pcm .pc-stats .r { font-size:13px; min-height:26px; gap:4px; }
  #fchar.pcm .pc-stats .attrs .r { min-height:34px; }
  #fchar.pcm .pc-stats .attrs button { width:30px; height:30px; }
  #fchar.pcm .pc-stats .r.pot { font-size:13px; }
}

/* ---- Desktop: PC-client style windows (#fchar / #fbag get .pc from jx-windows.js) ---------- */
@media (pointer:fine) and (min-width:1000px) {
  .fwin.pc { background:linear-gradient(180deg,#123f3d 0%,#0b2b2a 100%); border:2px solid #b8913a; border-radius:8px;
    box-shadow:0 0 0 1px #3d2a0f, 0 10px 30px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.45); color:#d7e7da; }
  .fwin.pc .win-head { background:linear-gradient(180deg,#1f5e5a,#123f3d); border-bottom:1px solid #b8913a; padding:4px 6px 4px 14px; cursor:move; }
  .fwin.pc .win-head b { flex:1; text-align:center; font:700 20px/1.2 Georgia, 'Times New Roman', serif; color:#f3d27a; text-shadow:0 1px 0 #3d2a0f, 0 0 6px rgba(0,0,0,.6); letter-spacing:.5px; }
  .fwin.pc .win-head button, .fwin.pc .win-help { width:28px; height:28px; min-width:0; min-height:0; padding:0; margin-left:4px; border:1px solid #9fb9b0;
    border-radius:3px; background:linear-gradient(180deg,#3b6c66,#1d413e); color:#e9f3ec; font:700 16px/1 system-ui; }
  .fwin:not(.pc) .win-help { display:none; }
  .fwin.pc .fbody { padding:8px 10px 10px; }
  /* beats `html.server-hud #fchar { width:min(920px…) }` (mobile/tablet sheet) so the PC window stays compact */
  html.server-hud #fchar.pc, #fchar.pc { left:14px; top:86px; width:640px !important; max-width:none !important; }
  /* whole window scales with the screen (--jx-ui set by jx-windows.js); dragging keeps a top-left origin */
  .fwin.pc { transform:scale(var(--jx-ui, 1)); transform-origin:0 0; }
  #fbag.pc { transform-origin:100% 0; }
  #fbag.pc { right:14px; left:auto; top:120px; width:360px; }
  #fbag-ext.pc { right:385px; left:auto; top:120px; width:360px; }
  .fwin.pc .jx-slot { background:#0f2f2e; border:1px solid #52706a; border-radius:3px; box-shadow:inset 0 0 6px rgba(0,0,0,.6); }
  .fwin.pc .jx-slot.full { border-color:#b8913a; }
  .fwin.pc .jx-slot[data-sel] { outline:2px solid #f3d27a; }

  /* Nhân vật */
  .pc-char .pc-tabs { display:flex; gap:4px; border-bottom:1px solid #3f6a64; margin-bottom:8px; }
  .pc-char .pc-tabs button { padding:6px 22px; border:1px solid #3f6a64; border-bottom:0; border-radius:6px 6px 0 0; background:#183f3c; color:#d7e7da; font:600 16px Georgia, serif; }
  .pc-char .pc-tabs button.on { background:linear-gradient(180deg,#2b5c57,#183f3c); color:#f3d27a; }
  .pc-body { display:grid; grid-template-columns:230px auto 1fr; grid-template-rows:auto auto auto; gap:8px; }
  .pc-stats { grid-row:1 / 4; display:flex; flex-direction:column; gap:6px; }
  .pc-box { background:rgba(4,22,21,.55); border:1px solid #2f5752; border-radius:4px; padding:6px 8px; }
  .pc-stats .r { display:flex; align-items:center; gap:6px; min-height:24px; font:15px Georgia, serif; }
  .pc-stats .r span { color:#bfe0c9; flex:1; }
  .pc-stats .r b { color:#e9f3ec; font-weight:600; }
  .pc-stats .r b.hp { color:#ff6b5b; } .pc-stats .r b.mp { color:#8fb4ff; }
  .pc-stats .r b i { color:#f3d27a; font-style:normal; }
  .pc-stats .attrs button { width:20px; height:20px; padding:0; min-height:0; border:1px solid #9fb9b0; border-radius:2px; background:#2b5c57; color:#fff; font:700 14px/1 system-ui; }
  .pc-stats .attrs button:disabled { opacity:.35; }
  .pc-stats .r.pot { padding:0 8px; } .pc-stats .r.pot b { color:#f3d27a; }
  .pc-gear { grid-column:2 / 4; display:flex; gap:8px; }
  .pc-col { display:flex; flex-direction:column; gap:4px; }
  .pc-char .jx-slot { width:56px; height:56px; }
  .pc-char .jx-slot .ico { width:100%; height:100%; object-fit:contain; }
  .pc-char .jx-slot em { font-size:10px; line-height:1.1; color:#88a9a2; }
  .pc-model { flex:1; display:flex; align-items:center; justify-content:center; min-height:360px;
    background:radial-gradient(ellipse at 50% 60%, #1d4a46 0%, #0d2b2a 70%); border:1px solid #2f5752; border-radius:4px; }
  .pc-model #jx-prev { height:340px; width:auto; max-width:100%; }
  .pc-row { grid-column:2 / 4; display:flex; gap:4px; }
  /* 7 slots (books, horse, ám khí, 3 fashion): shrink to the row instead of spilling out of the window */
  .pc-row .jx-slot { flex:0 1 56px; min-width:0; height:auto; aspect-ratio:1; }
  .pc-foot { grid-column:2 / 4; display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; background:rgba(4,22,21,.55); border:1px solid #2f5752; border-radius:4px;
    padding:8px 12px; font:15px Georgia, serif; }
  .pc-foot span { color:#f3d27a; } .pc-foot b { color:#e9f3ec; font-weight:600; } .pc-foot label { margin-left:auto; color:#bfe0c9; }

  /* Hành trang */
  .pc-bag .pc-bagtop { display:flex; gap:4px; align-items:center; margin-bottom:6px; }
  .pc-bag .pc-bagtop button { width:46px; height:40px; padding:0; min-height:0; border:1px solid #52706a; border-radius:4px; background:#183f3c; color:#e9f3ec; font-size:18px; position:relative; }
  .pc-bag .pc-bagtop button.on { border-color:#f3d27a; background:#2b5c57; }
  .pc-bag .pc-bagtop button small { position:absolute; right:3px; bottom:1px; font:700 11px system-ui; color:#f3d27a; }
  .pc-bag .pc-bagtop .sp { flex:1; }
  .pc-bag .pc-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; padding:4px; background:#0a2423; border:1px solid #2f5752; border-radius:4px; }
  .pc-bag .jx-slot { width:auto; height:auto; aspect-ratio:1; background:#0f2f2e radial-gradient(circle, rgba(82,112,106,.35) 0 18%, transparent 19%) center/60% 60% no-repeat; }
  .pc-bag .jx-slot .cnt { right:3px; bottom:1px; color:#fff; font:700 12px system-ui; text-shadow:0 1px 2px #000; }
  .pc-bag .pc-bagfoot { display:flex; justify-content:space-between; margin-top:6px; padding:6px 10px; background:rgba(4,22,21,.55); border:1px solid #2f5752; border-radius:4px; font:15px Georgia, serif; color:#f3d27a; }
  .pc-bag .pc-sel { display:flex; align-items:center; gap:6px; margin-top:6px; padding:6px 8px; background:rgba(4,22,21,.55); border:1px solid #2f5752; border-radius:4px; }
  .pc-bag .pc-sel b { flex:1; color:#f3d27a; font:600 14px Georgia, serif; }
  .pc-bag .pc-sel button { padding:3px 10px; min-height:0; border:1px solid #b8913a; border-radius:3px; background:linear-gradient(180deg,#e9c46a,#a8741f); color:#2b1c05; font-weight:700; }
}

/* ---- HUD extras: hidden unless the desktop PC look below shows them ---- */
#vitals .bar.ex, #vitals .bar.st, #minimap .mm-date, #hotbar .hb-page, #hotbar .hb-mouse { display:none; }

/* ---- Desktop: PC-client style HUD -------------------------------------------------------- */
@media (pointer:fine) and (min-width:1000px) {
  /* Header: hidden as a fixed banner on PC client; nav acts as a modal dialog */
  html.hud-skin header {
    position: fixed !important;
    inset: 0 0 auto !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    z-index: 30 !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  html.hud-skin header > .brand,
  html.hud-skin header > #hud {
    display: none !important;
  }
  html.hud-skin header nav {
    display: none;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(440px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 60px) !important;
    overflow: auto !important;
    padding: 24px !important;
    border: 1px solid var(--wux-gold-rim, rgba(220, 185, 95, 0.45)) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(14, 28, 32, 0.95) 0%, rgba(7, 17, 20, 0.98) 100%) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    flex-direction: column !important;
    gap: 12px !important;
    pointer-events: auto !important;
    z-index: 200 !important;
  }
  html.hud-skin body.nav-open header nav {
    display: flex !important;
  }

  /* Vitals: level diamond, experience bar on top, HP / MP / stamina bars with centered values */
  html.hud-skin #vitals {
    left: 14px !important;
    top: 10px !important;
    width: 380px !important;
    padding: 8px 12px 10px 8px !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, rgba(14, 28, 32, 0.88) 0%, rgba(8, 18, 22, 0.94) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--wux-gold-rim, rgba(220, 185, 95, 0.45)) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    z-index: 15 !important;
  }
  html.hud-skin #vitals .vtrow { display: flex; align-items: center; gap: 14px; }
  html.hud-skin #vitals #avatar {
    flex: none;
    width: 46px;
    height: 46px;
    margin: 4px 6px 4px 10px;
    padding: 0;
    border: 2px solid #ffd875;
    border-radius: 6px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #2b635c 0%, #10332f 100%);
    box-shadow: 0 0 10px rgba(245, 214, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 80ms var(--apple-spring, cubic-bezier(0.2, 0.8, 0.2, 1));
  }
  html.hud-skin #vitals #avatar:hover {
    border-color: #fff2c4;
    box-shadow: 0 0 14px rgba(255, 230, 160, 0.6);
  }
  html.hud-skin #vitals #avatar:active {
    transform: rotate(45deg) scale(0.92);
  }
  html.hud-skin #vitals #avatar img { display: none; }
  html.hud-skin #vitals #avatar b {
    display: block;
    transform: rotate(-45deg);
    color: #fff;
    font: 700 20px/42px Georgia, serif;
    text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, 0.8);
    position: static;
  }
  html.hud-skin #vitals .vtmain {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "ex ex ex" "hp mp st";
    column-gap: 6px;
    row-gap: 5px;
  }
  html.hud-skin #vitals .who { display: none; }
  html.hud-skin #vitals .bar {
    position: relative;
    height: 18px;
    margin: 0;
    border: 1px solid rgba(80, 130, 120, 0.45);
    border-radius: 3px;
    background: rgba(4, 12, 14, 0.85);
    overflow: hidden;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
  }
  html.hud-skin #vitals .bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 150ms ease-out;
  }
  html.hud-skin #vitals .bar.ex {
    display: block;
    grid-area: ex;
    height: 17px;
  }
  html.hud-skin #vitals .bar.ex i { background: linear-gradient(180deg, #ffd700 0%, #a87f00 100%); }
  html.hud-skin #vitals .bar.ex span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 4px #000;
  }
  html.hud-skin #vitals .bar.hp { grid-area: hp; }
  html.hud-skin #vitals .bar.hp i { background: linear-gradient(180deg, #ff5747 0%, #aa1a15 100%); }
  html.hud-skin #vitals .bar.mp { grid-area: mp; }
  html.hud-skin #vitals .bar.mp i { background: linear-gradient(180deg, #4ea8ff 0%, #154fb8 100%); }
  html.hud-skin #vitals .bar.st { display: block; grid-area: st; }
  html.hud-skin #vitals .bar.st i { background: linear-gradient(180deg, #52e873 0%, #177a28 100%); }
  html.hud-skin #vitals .bar.hp span,
  html.hud-skin #vitals .bar.mp span,
  html.hud-skin #vitals .bar.st span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 11px/1 system-ui, Georgia, serif;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 4px #000;
  }

  /* Minimap: date / time line and map name, teal frame with gold rim */
  html.hud-skin #minimap {
    border: 1px solid var(--wux-gold-rim, rgba(220, 185, 95, 0.45));
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(14, 28, 32, 0.85) 0%, rgba(8, 18, 22, 0.92) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    padding: 6px;
  }
  html.hud-skin #minimap .mm-date {
    display: block;
    text-align: center;
    padding: 2px 4px 4px;
    color: var(--wux-gold, #f5d688);
    font: 600 13px Georgia, serif;
    text-shadow: 0 1px 2px #000;
    border-bottom: 1px solid rgba(75, 128, 118, 0.35);
    margin-bottom: 4px;
  }
  html.hud-skin #minimap .mm-bar {
    background: rgba(16, 40, 38, 0.7);
    border: 1px solid rgba(220, 185, 95, 0.4);
    border-radius: 4px;
    color: var(--wux-gold, #f5d688);
    font: 700 14px Georgia, serif;
  }

  /* Quick bar: page arrows, 8 numbered slots, then the left / right mouse skills */
  html.hud-skin #hotbar {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: none;
    overflow: visible;
    padding: 6px 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(14, 28, 32, 0.85) 0%, rgba(8, 18, 22, 0.92) 100%) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1px solid var(--wux-gold-rim, rgba(220, 185, 95, 0.45)) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }
  html.hud-skin #hotbar .hb-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 4px;
    color: var(--wux-gold, #f5d688);
    font: 700 13px Georgia, serif;
  }
  html.hud-skin #hotbar .hb-page button {
    width: 22px;
    height: 16px;
    padding: 0;
    min-height: 0;
    border: 0;
    background: none;
    color: #52e873;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
  }
  html.hud-skin #hotbar .slot {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(75, 128, 118, 0.45);
    border-radius: 6px;
    background: rgba(10, 24, 26, 0.75);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }
  html.hud-skin #hotbar .slot > span {
    position: absolute;
    left: 4px;
    top: 2px;
    color: #edf6f2;
    font: 700 11px system-ui;
    text-shadow: 0 1px 2px #000;
    z-index: 1;
  }
  html.hud-skin #hotbar .slot img {
    width: 42px;
    height: 42px;
  }
  html.hud-skin #hotbar .slot.empty { opacity: 0.75; }
  html.hud-skin #hotbar .hb-mouse {
    display: flex;
    gap: 5px;
    margin-left: 8px;
  }
  html.hud-skin #hotbar .hb-mouse .slot {
    width: 52px;
    height: 52px;
    border: 2px solid var(--wux-gold, #f5d688);
    box-shadow: 0 0 10px rgba(245, 214, 136, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.5);
  }
  html.hud-skin #hotbar .hb-mouse .slot i {
    position: absolute;
    right: 3px;
    bottom: 2px;
    font: 700 11px system-ui;
    font-style: normal;
    color: var(--wux-gold, #f5d688);
    text-shadow: 0 1px 2px #000;
  }

  /* Layout: map/NPC toolbar right of vitals, quick bar centred along the bottom */
  html.hud-skin #dock {
    left: 410px !important;
    right: auto !important;
    top: 10px !important;
    height: 38px !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(14, 28, 32, 0.84) 0%, rgba(8, 18, 22, 0.92) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid var(--wux-gold-rim, rgba(220, 185, 95, 0.45)) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 15 !important;
  }
  html.hud-skin #hotbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 12px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    z-index: 15 !important;
  }
  html.hud-skin #sysdock {
    flex-wrap: nowrap !important;
    width: auto !important;
    right: 14px !important;
    bottom: 12px !important;
    top: auto !important;
    left: auto !important;
    z-index: 15 !important;
  }
  html.hud-skin #side {
    width: min(360px, calc(50vw - 270px)) !important;
    height: 220px !important;
    right: auto !important;
    left: 14px !important;
    bottom: 12px !important;
    top: auto !important;
    z-index: 14 !important;
  }
}

/* Desktop minimap: round, zoomed in around the player (wheel = zoom); click = whole map, large. */
@media (pointer:fine) and (min-width:1000px) {
  html.hud-skin #minimap.mm-round canvas { width:150px !important; height:150px !important; margin:4px auto 2px; border-radius:50%;
    border:2px solid #b8913a; box-shadow:0 0 0 2px #0b2b2a, 0 0 8px rgba(0,0,0,.7) inset; cursor:zoom-in; }
  html.hud-skin #minimap.mm-big { z-index:12; }
  html.hud-skin #minimap.mm-big canvas { width:min(420px, calc(100vh - 140px)) !important; height:min(420px, calc(100vh - 140px)) !important;
    border-radius:6px; border:2px solid #b8913a; cursor:zoom-out; }
}

/* Minimap: no outer frame, only the round map. Name / coordinates / FPS / ping float as shadowed text. */
html.hud-skin #minimap, html.hud-skin.server-hud #minimap { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important; }
html.hud-skin #minimap .mm-bar { background:none !important; border:0 !important; justify-content:center; text-align:center; color:#f3d27a; text-shadow:0 1px 2px #000, 0 0 4px #000; }
html.hud-skin #minimap .mm-date { border:0 !important; background:none !important; }
html.hud-skin #minimap .mm-coords, html.hud-skin #render-fps, html.hud-skin #net-ping { background:none !important; text-shadow:0 1px 2px #000, 0 0 3px #000; }
html.hud-skin #minimap.mm-round canvas { display:block; margin:2px auto; border-radius:50%; border:2px solid #c9a24a; box-shadow:0 2px 8px rgba(0,0,0,.6); }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) {
  html.hud-skin #minimap.mm-round canvas { width:112px !important; height:112px !important; }
  html.hud-skin #minimap .mm-bar { height:auto !important; min-height:0; padding:0; font-size:11px; }
  html.hud-skin #minimap .mm-coords { font-size:10px; }
}
/* Phones: keep the text under the round minimap compact and move the ⊞ menu button out of its way. */
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) {
  html.hud-skin #render-fps { font-size:8px; max-width:136px; margin:0 auto; overflow:hidden; text-overflow:ellipsis; }
  html.hud-skin #net-ping { font-size:10px; }
}
@media (pointer:coarse) and (max-width:1400px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) {
  html.hud-skin.server-hud.mobile-menu-ready #mobile-menu-toggle { top:calc(62px + var(--st)) !important; right:calc(156px + var(--sr)) !important; }
}
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) {
  html.hud-skin.server-hud.mobile-menu-ready #mobile-menu-toggle { top:calc(172px + var(--st)) !important; }
  html.hud-skin #mdock { top:calc(226px + var(--st)) !important; }
}
@media (pointer:coarse) and (max-height:400px) and (orientation:landscape) {
  html.hud-skin #minimap.mm-round canvas { width:96px !important; height:96px !important; margin:1px auto; }
}

/* No text selection, iOS long-press callout or image dragging anywhere in the game (mouse and touch,
   desktop / tablet / phone). Fields people type in stay selectable. */
html, html *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
img, canvas { -webkit-user-drag:none; user-drag:none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }

/* Võ công: skill book grid (main skills only; follow-ups level with them) */
#win-body .sk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:8px; margin-top:8px; }
#win-body .sk-card { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #3f6a64; border-radius:6px;
  background:linear-gradient(180deg, rgba(31,94,90,.55), rgba(11,43,42,.75)); box-shadow:inset 0 0 8px rgba(0,0,0,.45); }
#win-body .sk-card.sk-new { opacity:.72; }
#win-body .sk-card.sk-right { border-color:#f3d27a; box-shadow:0 0 0 1px #f3d27a, inset 0 0 8px rgba(0,0,0,.45); }
#win-body .sk-ico { width:52px; height:52px; flex:none; border-radius:50%; border:2px solid #b8913a; background:#0b2b2a; box-shadow:0 0 6px rgba(243,210,122,.35); object-fit:cover; }
#win-body .sk-card.sk-new .sk-ico { filter:grayscale(.7); }
#win-body .sk-info { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
#win-body .sk-info b { color:#f3e7c4; font:600 15px/1.15 Georgia, serif; overflow-wrap:anywhere; }
#win-body .sk-lv { color:#f3d27a; font:700 13px system-ui; } #win-body .sk-lv i { color:#bfe0c9; font-style:normal; font-weight:400; }
#win-body .sk-btns { display:flex; gap:4px; }
#win-body .sk-btns button { min-height:0; padding:2px 10px; font-size:12px; border:1px solid #b8913a; border-radius:4px; background:linear-gradient(180deg,#2b5c57,#183f3c); color:#f3e7c4; }
#win-body .sk-btns button:disabled { opacity:.45; }
@media (max-width:760px), (max-height:560px) and (orientation:landscape) {
  #win-body .sk-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:6px; }
  #win-body .sk-ico { width:40px; height:40px; } #win-body .sk-info b { font-size:13px; }
}

/* tụ khí pips (Thiếu Lâm 七宝神照心法) */
#qibar { position:fixed; left:50%; bottom:80px; transform:translateX(-50%); z-index:30; width:min(170px, 44vw); height:12px; pointer-events:none;
  border:1px solid #1f4f1c; border-radius:6px; background:rgba(12,28,10,.72); box-shadow:0 1px 4px rgba(0,0,0,.6); overflow:hidden; }
#qibar[hidden] { display:none !important; }
#qibar i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(#8fe86a, #3fae32 55%, #2a8a22); transition:width .2s; }
#qibar span { position:relative; display:block; text-align:center; font:600 10px/12px system-ui; color:#fff; text-shadow:0 1px 2px #000, 0 0 2px #000; }
/* Minimap zoom buttons (− / +) beside the round map */
#minimap .mm-zoom { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:var(--mmz-gap, 68px); pointer-events:none; z-index:2; }
#minimap .mm-zoom button { pointer-events:auto; width:24px; height:24px; min-height:0; padding:0; border:1px solid #c9a24a; border-radius:50%; background:rgba(11,43,42,.9);
  color:#f3d27a; font:700 15px/1 system-ui; box-shadow:0 1px 4px rgba(0,0,0,.6); touch-action:manipulation; }
#minimap.mm-round .mm-zoom { top:calc(var(--mmz-top, 128px)); }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) { #minimap { --mmz-top:104px; --mmz-gap:70px; } }
@media (pointer:coarse) and (max-height:400px) and (orientation:landscape) { #minimap { --mmz-top:90px; --mmz-gap:58px; } }

/* iPhone portrait: an opaque strip under the status bar / Dynamic Island (the page uses
   black-translucent, so the 3D scene showed blurred behind the clock), and the top HUD (vitals,
   minimap, menu, quick bar) moved a little further down from it. --st is the top inset every
   HUD rule already adds. */
@media (orientation:portrait) and (pointer:coarse) {
  html.hud-skin { --st:calc(env(safe-area-inset-top, 0px) + 12px); }
  html.hud-skin body::before { content:''; position:fixed; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); z-index:2000;
    background:#14110e; pointer-events:none; }
}
/* Tiềm năng tab, landscape / wide: vitals | attributes on top, combat stats across in 3 columns. */
@media (orientation:landscape) {
  #fchar.pcm .tab-pot .pc-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:auto auto auto; max-height:none; overflow:visible; }
  #fchar.pcm .tab-pot .vit { grid-column:1; grid-row:1; } #fchar.pcm .tab-pot .attrs { grid-column:2; grid-row:1 / 3; }
  #fchar.pcm .tab-pot .r.pot { grid-column:1; grid-row:2; align-self:end; }
  #fchar.pcm .tab-pot .pc-box.info.cmb { grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:14px; }
}
/* Item info with action buttons (bag on phones / tablets) must take taps; the legacy style made
   #itemtip pointer-events:none, so Trang bị / Bán / Đặt vào fell through to the slot behind. */
#itemtip:has(.tip-acts) { pointer-events:auto; }
/* Đăng nhập trên form vào game: phần tử ẩn phải ẩn kể cả khi có display riêng (lưới hình thể). */
#entry [hidden] { display:none !important; }
#entry button.ent-mode { margin-top:4px; padding:8px; background:transparent; border:1px solid #7a6a3c; color:#f3e7c4; font-weight:600; font-size:14px; }
#entry button.ent-mode:hover { border-color:#f0c860; }
/* Mục tài khoản trong bảng Nhân vật: lời giải thích chiếm trọn một hàng, ô nhập xuống hàng dưới. */
#account-register p { flex-basis:100%; width:100%; margin:0 0 4px; }

/* ==========================================================================
   LOADING SCREEN & MAP TRANSITIONS (Màn hình chờ tải game & đổi bản đồ)
   ========================================================================== */
.ls-screen {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1e1912 0%, #0c0a08 75%, #050403 100%);
  color: #eeddbb; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; opacity: 1; transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none; -webkit-user-select: none;
}
.ls-screen.ls-fade-out { opacity: 0; pointer-events: none; }
.ls-screen[hidden] { display: none !important; }

.ls-backdrop {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, rgba(12, 10, 8, 0.4) 0%, rgba(12, 10, 8, 0.85) 100%), url('/assets/ui/loading-bg.jpg');
  background-size: cover; background-position: center;
  filter: saturate(1.1); opacity: 0.95; pointer-events: none;
}

.ls-ornament {
  position: absolute; width: 48px; height: 48px; pointer-events: none;
  border: 2px solid rgba(212, 175, 55, 0.4); opacity: 0.7;
}
.ls-ornament.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.ls-ornament.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.ls-ornament.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.ls-ornament.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }

.ls-content {
  position: relative; z-index: 2; width: 92%; max-width: 580px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.ls-logo-badge {
  font-size: 13px; font-weight: 700; letter-spacing: 4px;
  color: #dfb256; text-transform: uppercase; margin-bottom: 8px;
  padding: 4px 14px; border: 1px solid rgba(223, 178, 86, 0.35);
  background: rgba(20, 16, 12, 0.6); border-radius: 20px;
}

.ls-map-title {
  font-size: clamp(22px, 4.5vw, 32px); font-weight: 800; letter-spacing: 3px;
  color: #fff4d4; text-shadow: 0 0 16px rgba(223, 178, 86, 0.65), 0 2px 4px #000;
  margin: 6px 0 4px;
}

.ls-map-sub {
  font-size: 14px; color: #b8aa88; margin: 0 0 24px; min-height: 20px;
}

.ls-progress-box {
  width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}

.ls-bar-track {
  flex: 1; height: 14px; background: rgba(14, 11, 8, 0.85);
  border: 1.5px solid #8e7339; border-radius: 8px;
  position: relative; overflow: hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
}

.ls-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8a651f 0%, #e8bc57 50%, #fff1b8 100%);
  border-radius: 6px; transition: width 0.25s ease-out;
  box-shadow: 0 0 10px rgba(232, 188, 87, 0.8);
}

.ls-bar-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
  transform: translateX(-100%); animation: ls-shimmer 2s infinite; pointer-events: none;
}
@keyframes ls-shimmer { 100% { transform: translateX(100%); } }

.ls-pct {
  font-size: 15px; font-weight: 700; color: #ffd679; min-width: 44px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.ls-tip-card {
  width: 100%; padding: 12px 18px; border-radius: 10px;
  background: rgba(24, 19, 14, 0.75); border: 1px solid rgba(142, 115, 57, 0.35);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; gap: 12px; text-align: left;
}
.ls-tip-icon { font-size: 20px; flex-shrink: 0; }
.ls-tip-text { font-size: 13.5px; line-height: 1.45; color: #ddccaa; }

/* ==========================================================================
   CỔNG ĐĂNG NHẬP & ĐĂNG KÝ KIẾM HIỆP (Auth Portal)
   ========================================================================== */
.auth-portal-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background-image: linear-gradient(180deg, rgba(15, 12, 9, 0.65) 0%, rgba(8, 6, 5, 0.9) 100%), url('/assets/ui/auth-bg.jpg');
  background-size: cover; background-position: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
}
.auth-portal-overlay[hidden] { display: none !important; }

.auth-card {
  position: relative; width: 100%; max-width: 410px;
  background: linear-gradient(180deg, rgba(22, 19, 15, 0.9) 0%, rgba(13, 11, 9, 0.96) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(220, 185, 95, 0.42);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.82), 0 0 24px rgba(184, 140, 50, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #ecdcc1; user-select: none;
  transition: max-width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-sizing: border-box;
}

.auth-ornament {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1.5px solid rgba(223, 178, 86, 0.6); opacity: 0.85;
}
.auth-ornament.top-left { top: 6px; left: 6px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.auth-ornament.top-right { top: 6px; right: 6px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.auth-ornament.bottom-left { bottom: 6px; left: 6px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.auth-ornament.bottom-right { bottom: 6px; right: 6px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

.auth-header { text-align: center; margin-bottom: 14px; }
.auth-brand {
  font-size: 22px; font-weight: 800; letter-spacing: 2px;
  color: #fff1b8; text-shadow: 0 0 12px rgba(223, 178, 86, 0.55);
  margin-bottom: 3px;
}
.auth-sub { font-size: 12px; color: #b8a682; margin: 0; font-weight: 500; }

.auth-tabs {
  display: flex; gap: 4px; background: rgba(0, 0, 0, 0.4);
  padding: 3px; border-radius: 10px; border: 1px solid rgba(142, 115, 57, 0.3);
  margin-bottom: 14px;
}
.auth-tab {
  flex: 1; padding: 7px 0; background: transparent; border: none;
  border-radius: 7px; color: #a99a77; font-size: 12.5px;
  font-weight: 700; letter-spacing: 0.5px; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.auth-tab:hover { color: #fff0cc; }
.auth-tab.active {
  background: linear-gradient(180deg, rgba(223, 178, 86, 0.25) 0%, rgba(164, 122, 36, 0.3) 100%);
  color: #ffd679; border: 1px solid rgba(223, 178, 86, 0.5);
  text-shadow: 0 0 6px rgba(255, 214, 121, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.auth-alert {
  padding: 8px 12px; border-radius: 6px; font-size: 12.5px; margin-bottom: 12px;
  text-align: center; line-height: 1.4;
}
.auth-alert.error {
  background: rgba(120, 25, 25, 0.7); border: 1px solid #c94444; color: #ffdada;
}
.auth-alert.success {
  background: rgba(30, 95, 45, 0.7); border: 1px solid #48b868; color: #ddffea;
}

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.auth-field label { font-size: 12px; font-weight: 600; color: #cfbf9e; }
.input-wrap { position: relative; display: flex; align-items: center; }
.field-icon {
  position: absolute; left: 10px; font-size: 14px; opacity: 0.75; pointer-events: none;
}
.auth-field input {
  width: 100%; height: 38px; padding: 0 10px 0 34px; background: rgba(10, 8, 6, 0.75);
  border: 1px solid rgba(120, 95, 45, 0.55); border-radius: 8px; color: #fff4d4; font-size: 13.5px;
  box-sizing: border-box; transition: all 0.2s;
}
.auth-field input:focus {
  outline: none; border-color: #dfb256; box-shadow: 0 0 10px rgba(223, 178, 86, 0.4);
  background: rgba(16, 12, 8, 0.95);
}

.auth-row-options {
  display: flex; justify-content: space-between; align-items: center; font-size: 12.5px;
}
.checkbox-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer; color: #c4b494;
}
.checkbox-label input { accent-color: #dfb256; cursor: pointer; }

.auth-btn-submit {
  width: 100%; height: 40px; margin-top: 4px; border: none; border-radius: 8px;
  background: linear-gradient(180deg, #dfb256 0%, #a47a24 100%);
  color: #161109; font-size: 14px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.auth-btn-submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #f3cf7e 0%, #b88b2b 100%);
  box-shadow: 0 6px 18px rgba(223, 178, 86, 0.45); transform: translateY(-1px);
}
.auth-btn-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-quick-play { margin-top: 8px; text-align: center; }
.auth-btn-secondary {
  width: 100%; height: 34px; background: rgba(30, 24, 18, 0.7);
  border: 1px solid rgba(115, 91, 46, 0.6); border-radius: 8px; color: #d6c5a0;
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.auth-btn-secondary:hover {
  background: rgba(45, 36, 27, 0.9); border-color: #bfa15c; color: #fff0cc;
}

.auth-footer {
  text-align: center; margin-top: 12px; font-size: 11px; color: #7a6e53;
  border-top: 1px solid rgba(142, 115, 57, 0.2); padding-top: 8px;
}

.auth-look-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 2px;
}
.look-choice-card {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: rgba(14, 11, 8, 0.65); border: 1px solid rgba(87, 70, 36, 0.7); border-radius: 7px;
  cursor: pointer; transition: all 0.2s;
}
.look-choice-card input { display: none; }
.look-choice-card.selected {
  border-color: #e5b95c; background: rgba(45, 34, 18, 0.85);
  box-shadow: 0 0 8px rgba(229, 185, 92, 0.35);
}
.look-choice-card .look-icon { font-size: 16px; flex-shrink: 0; }
.look-choice-card .look-info { display: flex; flex-direction: column; overflow: hidden; }
.look-choice-card .look-title { font-size: 11.5px; font-weight: 700; color: #fff0cc; white-space: nowrap; }
.look-choice-card .look-desc { font-size: 9.5px; color: #a89878; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* Tối ưu Mobile Màn Hình Ngang (Landscape) */
@media (orientation: landscape) and (max-height: 540px) {
  .auth-portal-overlay { padding: 8px 14px; }
  .auth-card {
    width: 100%;
    max-width: min(540px, 86vw);
    max-height: min(350px, 92dvh);
    padding: 8px 16px 8px;
    border-radius: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(223, 178, 86, 0.4) transparent;
  }
  .auth-card[data-mode="login"] {
    max-width: min(380px, 80vw);
  }
  .auth-ornament { width: 10px; height: 10px; }
  .auth-header { margin-bottom: 5px; }
  .auth-brand { font-size: 16px; letter-spacing: 1.5px; margin-bottom: 0; }
  .auth-sub { font-size: 10px; opacity: 0.85; }
  .auth-tabs { margin-bottom: 6px; padding: 2px; border-radius: 8px; }
  .auth-tab { padding: 4px 0; font-size: 11.5px; }
  .auth-alert { padding: 4px 8px; font-size: 11px; margin-bottom: 6px; }

  /* Login mode trên Mobile Landscape: Cột nhỏ xinh xắn ở giữa */
  #form-login {
    max-width: 310px;
    margin: 0 auto;
    gap: 5px;
  }
  #form-login .auth-field { gap: 2px; }
  #form-login .auth-field label { font-size: 11px; }
  #form-login .auth-field input { height: 32px; font-size: 12.5px; padding: 0 8px 0 28px; }
  #form-login .field-icon { font-size: 12px; left: 8px; }
  #form-login .auth-row-options { font-size: 11px; }
  #form-login .auth-btn-submit { height: 32px; font-size: 12px; margin-top: 2px; }
  #form-login .auth-quick-play { margin-top: 4px; }
  #form-login .auth-btn-secondary { height: 28px; font-size: 11px; }

  /* Register mode trên Mobile Landscape: Bố cục 2 cột gọn gàng, không tràn màn hình */
  #form-register {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 4px;
  }
  #form-register .auth-field { gap: 2px; }
  #form-register .auth-field label { font-size: 10.5px; white-space: nowrap; }
  #form-register .auth-field input { height: 30px; font-size: 12px; padding: 0 8px 0 26px; }
  #form-register .field-icon { font-size: 12px; left: 7px; }

  /* Cột 1: 4 ô input */
  #form-register .auth-field:nth-of-type(1) { grid-column: 1; grid-row: 1; }
  #form-register .auth-field:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  #form-register .auth-field:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  #form-register .auth-field:nth-of-type(4) { grid-column: 1; grid-row: 4; }

  /* Cột 2: Lựa chọn hình thể & nút Tạo tài khoản */
  #form-register .auth-field-looks,
  #form-register .auth-field:nth-of-type(5) {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  #form-register .auth-look-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 2px;
  }
  #form-register .look-choice-card {
    padding: 3px 5px;
    gap: 4px;
    border-radius: 6px;
  }
  #form-register .look-choice-card .look-icon { font-size: 14px; }
  #form-register .look-choice-card .look-title { font-size: 10px; }
  #form-register .look-choice-card .look-desc { display: none; }

  #form-register .auth-btn-submit {
    grid-column: 2;
    grid-row: 4;
    height: 30px;
    font-size: 11.5px;
    margin-top: 0;
    align-self: end;
  }

  .auth-footer {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 4px;
    font-size: 9.5px;
  }
  .ls-map-title { font-size: 20px; }
  .ls-tip-card { padding: 8px 12px; }
}

/* Tối ưu Mobile Màn Hình Dọc (Portrait) */
@media (max-width: 500px) and (orientation: portrait) {
  .auth-portal-overlay { padding: 12px; }
  .auth-card {
    max-width: min(340px, 92vw);
    padding: 14px 14px 10px;
    border-radius: 14px;
  }
  .auth-ornament { width: 10px; height: 10px; }
  .auth-header { margin-bottom: 8px; }
  .auth-brand { font-size: 18px; letter-spacing: 1.5px; }
  .auth-sub { font-size: 10.5px; }
  .auth-tabs { margin-bottom: 10px; padding: 2px; }
  .auth-tab { padding: 5px 0; font-size: 11.5px; }
  .auth-form { gap: 7px; }
  .auth-field { gap: 2px; }
  .auth-field label { font-size: 11px; }
  .auth-field input { height: 34px; font-size: 12.5px; padding: 0 8px 0 30px; border-radius: 7px; }
  .auth-look-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 2px;
  }
  .look-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px 2px;
    gap: 2px;
    border-radius: 6px;
  }
  .look-choice-card .look-icon { font-size: 17px; }
  .look-choice-card .look-info { align-items: center; }
  .look-choice-card .look-title { font-size: 9.5px; font-weight: 700; white-space: nowrap; }
  .look-choice-card .look-desc { display: none; }
  .auth-btn-submit { height: 36px; font-size: 13px; margin-top: 3px; }
  .auth-btn-secondary { height: 30px; font-size: 11.5px; }
  .auth-quick-play { margin-top: 5px; }
  .auth-footer { margin-top: 8px; padding-top: 6px; font-size: 10px; }
  .ls-map-title { font-size: 20px; }
  .ls-tip-card { padding: 8px 12px; }
}

/* ==========================================================================
   SẢNH CHỌN & TẠO NHÂN VẬT KIẾM HIỆP (Character Hub)
   ========================================================================== */
.char-hub-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background-image: linear-gradient(180deg, rgba(12, 9, 7, 0.75) 0%, rgba(6, 4, 3, 0.92) 100%), url('/assets/ui/auth-bg.jpg');
  background-size: cover; background-position: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #ecdcc1; user-select: none;
}
.char-hub-overlay[hidden] { display: none !important; }

.char-hub-panel {
  width: 100%; max-width: 960px;
  background: linear-gradient(180deg, rgba(29, 24, 19, 0.95) 0%, rgba(19, 16, 13, 0.98) 100%);
  border: 1.5px solid #8e7339; border-radius: 14px; padding: 28px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(184, 140, 50, 0.2);
  display: flex; flex-direction: column; gap: 20px;
}

.char-hub-header {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1.5px solid rgba(142, 115, 57, 0.35); padding-bottom: 16px;
}
.hub-brand-group { display: flex; flex-direction: column; gap: 3px; }
.hub-title {
  font-size: 26px; font-weight: 800; letter-spacing: 2px; color: #fff1b8;
  text-shadow: 0 0 12px rgba(223, 178, 86, 0.5);
}
.hub-subtitle {
  font-size: 13px; font-weight: 600; color: #bca983; letter-spacing: 1px;
}

.hub-user-bar {
  display: flex; align-items: center; gap: 14px;
}
.hub-user-name {
  font-size: 14px; font-weight: 600; color: #ffd679;
}
.hub-btn-ghost {
  padding: 6px 14px; background: rgba(30, 24, 18, 0.7);
  border: 1px solid #735b2e; border-radius: 6px; color: #cfbf9e;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hub-btn-ghost:hover {
  background: rgba(50, 40, 30, 0.9); border-color: #dfb256; color: #fff0cc;
}

.hub-alert {
  padding: 10px 14px; border-radius: 6px; font-size: 13.5px;
  text-align: center;
}
.hub-alert.error { background: rgba(120, 25, 25, 0.7); border: 1px solid #c94444; color: #ffdada; }
.hub-alert.success { background: rgba(30, 95, 45, 0.7); border: 1px solid #48b868; color: #ddffea; }

/* Slot Container */
.char-slots-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

.char-card {
  position: relative;
  background: linear-gradient(180deg, rgba(38, 31, 23, 0.85) 0%, rgba(22, 18, 14, 0.95) 100%);
  border: 1.5px solid #635028; border-radius: 12px; padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.char-card:hover {
  border-color: #bfa15c; transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 16px rgba(191, 161, 92, 0.3);
}
.char-card.active {
  border-color: #ffd679;
  background: linear-gradient(180deg, rgba(50, 40, 28, 0.9) 0%, rgba(28, 22, 16, 0.98) 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 214, 121, 0.4);
}

.char-card-ornament {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 1.5px solid #dfb256; opacity: 0.6;
}
.char-card-ornament.top-left { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.char-card-ornament.top-right { top: 6px; right: 6px; border-left: none; border-bottom: none; }

.char-card-badge {
  position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700;
  color: #d9a441; letter-spacing: 0.5px;
}
.char-card.active .char-card-badge {
  color: #ffd679; text-shadow: 0 0 6px rgba(255, 214, 121, 0.6);
}

.char-card-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle, rgba(142, 115, 57, 0.35) 0%, rgba(14, 11, 8, 0.8) 70%);
  border: 2px solid #8e7339; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); margin-top: 4px;
}
.char-avatar-icon { font-size: 36px; }

.char-card-info { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.char-card-name {
  font-size: 18px; font-weight: 700; color: #fff1b8; margin: 0;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.char-card-meta { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12.5px; }
.char-badge-level {
  background: rgba(184, 140, 50, 0.25); border: 1px solid #735b2e;
  border-radius: 4px; padding: 2px 8px; color: #ffd679; font-weight: 600;
}
.char-badge-look { color: #bca983; }

.char-card-actions {
  display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto;
}
.char-btn-enter {
  width: 100%; padding: 11px 0; border: none; border-radius: 6px;
  background: linear-gradient(180deg, #dfb256 0%, #a47a24 100%);
  color: #1a140a; font-size: 14px; font-weight: 800; letter-spacing: 1.5px;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px rgba(223, 178, 86, 0.3);
}
.char-btn-enter:hover {
  background: linear-gradient(180deg, #f1c971 0%, #b88b2b 100%);
  box-shadow: 0 4px 16px rgba(223, 178, 86, 0.5); transform: translateY(-1px);
}
.char-btn-delete {
  padding: 6px 0; background: transparent; border: 1px solid rgba(180, 60, 60, 0.4);
  border-radius: 6px; color: #e68585; font-size: 12px; cursor: pointer; transition: all 0.2s;
}
.char-btn-delete:hover {
  background: rgba(180, 60, 60, 0.2); border-color: #e65555; color: #ffb5b5;
}

/* Empty Slot */
.char-card.slot-empty {
  border-style: dashed; border-color: rgba(142, 115, 57, 0.45);
  background: rgba(20, 16, 12, 0.5); justify-content: center;
}
.char-card.slot-empty:hover {
  border-color: #dfb256; background: rgba(30, 24, 18, 0.7);
}
.empty-icon {
  font-size: 40px; color: #8e7339; line-height: 1; transition: transform 0.2s;
}
.char-card.slot-empty:hover .empty-icon {
  color: #ffd679; transform: scale(1.15);
}
.empty-title { font-size: 16px; font-weight: 700; color: #d6c5a0; margin: 0; }
.empty-desc { font-size: 12px; color: #8a7a5c; margin: 0; }
.char-btn-create-slot {
  margin-top: 8px; padding: 8px 18px; border: 1px solid #8e7339; border-radius: 6px;
  background: rgba(40, 32, 22, 0.8); color: #ffd679; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.char-card.slot-empty:hover .char-btn-create-slot {
  background: #a47a24; color: #1a140a; border-color: #dfb256;
}

.char-hub-footer {
  text-align: center; border-top: 1px solid rgba(142, 115, 57, 0.25);
  padding-top: 14px; margin-top: 4px;
}
.hub-quote {
  font-size: 13px; font-style: italic; color: #9c8a66; margin: 0; letter-spacing: 0.5px;
}

/* Create Panel Form */
.create-panel { max-width: 680px; }
.create-char-form { display: flex; flex-direction: column; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.form-field label { font-size: 13.5px; font-weight: 700; color: #cfbf9e; }
.field-hint { font-size: 11.5px; color: #8a7a5c; }
.form-field input[type="text"] {
  width: 100%; padding: 11px 12px 11px 38px; background: rgba(10, 8, 6, 0.75);
  border: 1px solid #635028; border-radius: 6px; color: #fff4d4; font-size: 14px;
  box-sizing: border-box; transition: all 0.2s;
}
.form-field input[type="text"]:focus {
  outline: none; border-color: #dfb256; box-shadow: 0 0 8px rgba(223, 178, 86, 0.4);
  background: rgba(14, 11, 8, 0.95);
}

.look-grid-select {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.look-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 4px; padding: 12px 10px; border: 1.5px solid #574624; border-radius: 8px;
  background: rgba(18, 14, 10, 0.75); cursor: pointer; transition: all 0.2s;
}
.look-card input { display: none; }
.look-card:hover {
  border-color: #bfa15c; background: rgba(30, 24, 18, 0.85);
}
.look-card.selected {
  border-color: #ffd679; background: rgba(50, 40, 26, 0.95);
  box-shadow: 0 0 12px rgba(255, 214, 121, 0.35);
}
.look-card-icon { font-size: 26px; }
.look-card-title { font-size: 14px; font-weight: 700; color: #fff0cc; }
.look-card-desc { font-size: 11px; color: #a89878; line-height: 1.35; }

.create-actions {
  display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
}
.char-btn-secondary {
  width: 100%; padding: 11px 0; border: 1px solid #735b2e; border-radius: 6px;
  background: rgba(30, 24, 18, 0.7); color: #cfbf9e; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.char-btn-secondary:hover {
  background: rgba(50, 40, 30, 0.9); border-color: #dfb256; color: #fff0cc;
}

/* Responsive CharHub */
@media (max-width: 768px) {
  .char-slots-container { grid-template-columns: 1fr; }
  .char-hub-panel { padding: 18px 16px; max-height: 94dvh; overflow-y: auto; }
  .hub-title { font-size: 20px; }
  .hub-subtitle { font-size: 11.5px; }
  .look-grid-select { grid-template-columns: 1fr; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .char-hub-overlay { padding: 8px; }
  .char-hub-panel { padding: 12px 16px; max-height: 96dvh; gap: 10px; overflow-y: auto; }
  .char-hub-header { padding-bottom: 8px; }
  .hub-title { font-size: 18px; }
  .char-slots-container { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .char-card { padding: 12px 10px; gap: 8px; }
  .char-card-avatar { width: 50px; height: 50px; margin-top: 0; }
  .char-avatar-icon { font-size: 24px; }
  .char-card-name { font-size: 15px; }
  .char-btn-enter { padding: 8px 0; font-size: 12.5px; }
  .char-hub-footer { display: none; }
}

/* Cần gạt chiêu thức (client/skill-joystick.js): thước ngắm vẽ trên canvas phủ sân khấu, vùng huỷ ở góc trên phải. */
#stage canvas.skill-aim { position:absolute; inset:0; z-index:8; pointer-events:none; }
#skill-cancel { position:absolute; z-index:12; top:calc(14px + env(safe-area-inset-top, 0px)); left:50%; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#f3e7c4; background:rgba(20,15,9,.85); border:2px solid #7a6a3c; box-shadow:0 2px 10px rgba(0,0,0,.5); pointer-events:none; font-weight:700; }
#skill-cancel span { font-size:20px; line-height:1; } #skill-cancel small { font-size:10px; }
#skill-cancel.hot { color:#fff; background:rgba(200,40,30,.9); border-color:#ff8a76; transform:translateX(-50%) scale(1.12); }
#skill-cancel[hidden] { display:none !important; }
#mwheel.aiming button { opacity:.45; } #mwheel.aiming button.mw-atk { opacity:.6; }
/* Kéo trên bánh xe kỹ năng là ngắm chiêu, không phải cuộn trang: trình duyệt không được lấy cử chỉ này. */
#mwheel, #mwheel button { touch-action:none; }
/* Màn dọc: thanh máu chiếm hết cạnh trên, nút Huỷ nằm ngay dưới nó. */
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) { #skill-cancel { top:calc(150px + env(safe-area-inset-top, 0px)); } }
/* Thẻ khoá mục tiêu (mép phải, giữa) và nút khinh công (trái cụm chiêu). */
#target-lock { position:absolute; z-index:9; right:calc(8px + env(safe-area-inset-right, 0px)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:6px; pointer-events:auto; }
#target-lock[hidden] { display:none !important; }
#target-lock .tl-cycle { width:40px; height:40px; border-radius:50%; border:1px solid #7a6a3c; background:rgba(20,15,9,.8); color:#f3e7c4; font-size:20px; padding:0; }
#target-lock .tl-list { display:flex; flex-direction:column; gap:4px; }
#target-lock .tl-chip { position:relative; min-width:96px; max-width:132px; padding:5px 8px 8px; border-radius:8px; border:1px solid #7a6a3c; background:rgba(20,15,9,.8); color:#f3e7c4; text-align:left; font-size:12px; line-height:1.15; overflow:hidden; }
#target-lock .tl-chip b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
#target-lock .tl-chip small { color:#b8aa8c; font-size:10px; }
#target-lock .tl-chip i { position:absolute; left:0; bottom:0; height:3px; background:#e0453a; }
#target-lock .tl-chip.on { border-color:#f0c860; box-shadow:0 0 0 2px rgba(240,200,96,.35); background:rgba(80,60,20,.85); }
#dash-btn { display:none; position:absolute; z-index:9; left:calc(170px + env(safe-area-inset-left, 0px)); bottom:calc(34px + env(safe-area-inset-bottom, 0px)); width:58px; height:58px; border-radius:50%; border:2px solid #7a6a3c; background:radial-gradient(circle at 50% 35%, #3a2d18e6, #140f09e6); color:#f3e7c4; touch-action:none; padding:0; }
#dash-btn .dash-thumb { display:block; font-size:26px; line-height:54px; transition:transform .05s; }
#dash-btn em { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:14px; color:#ffd060; pointer-events:none; }
#dash-btn.cd { opacity:.6; } #dash-btn.cd .dash-thumb { opacity:.3; }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) { html.hud-skin #dash-btn { display:block; } }
/* Màn ngang: khinh công nằm phải joystick, trên hộp chat; thẻ mục tiêu thành một hàng trong dải trống giữa minimap và cụm chiêu. */
@media (pointer:coarse) and (max-width:1400px) and (orientation:landscape), (max-width:760px) and (orientation:landscape) {
  #dash-btn { left:calc(232px + env(safe-area-inset-left, 0px)); bottom:calc(118px + env(safe-area-inset-bottom, 0px)); }
  #target-lock { top:calc(156px + env(safe-area-inset-top, 0px)); transform:none; flex-direction:row-reverse; align-items:center; }
  #target-lock .tl-list { flex-direction:row; } #target-lock .tl-chip { min-width:88px; max-width:120px; }
}
/* Màn dọc: khinh công cạnh joystick; thẻ mục tiêu ở mép trái, giữa màn hình (mép phải đã có thanh nhanh). */
@media (pointer:coarse) and (max-width:1400px) and (orientation:portrait), (max-width:760px) and (orientation:portrait) {
  #dash-btn { left:calc(124px + env(safe-area-inset-left, 0px)); bottom:calc(30px + env(safe-area-inset-bottom, 0px)); }
  #target-lock { right:auto; left:calc(8px + env(safe-area-inset-left, 0px)); top:48%; align-items:flex-start; }
}
/* getting on the horse (server World.startMounting) */
#mount-bar { position:fixed; left:50%; bottom:calc(18% + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); width:min(220px, 60vw); padding:3px 4px 4px; background:rgba(12,10,6,.78); border:1px solid #b8913f; border-radius:4px; z-index:60; pointer-events:none; text-align:center; }
#mount-bar[hidden] { display:none; }
#mount-bar span { display:block; font-size:12px; line-height:15px; color:#f1dca0; text-shadow:0 1px 1px #000; }
#mount-bar i { display:block; height:7px; width:0; background:linear-gradient(#f6dc8a,#b6842a); border-radius:2px; }
/* a worn stack (tên x1999 in the ám khí slot): the count shrinks with the slot instead of spilling out */
#fchar .jx-slot { container-type:inline-size; }
#fchar .jx-slot .cnt { font-size:clamp(8px, 30cqi, 15px); right:2px; max-width:calc(100% - 4px); overflow:hidden; white-space:nowrap; }
/* ---- Item tooltip, PC client layout (jx-windows.js itemTip): facts table, rules, red sex / body
   mismatch, Loại trang bị in gold, description, attributes in gold (inherent attributes) ---- */
/* width and text follow the screen, like the mobile client's narrow item panel */
html body #itemtip { width:clamp(180px, 19vw, 280px); min-width:0; max-width:calc(100vw - 12px); max-height:calc(100dvh - 12px); overflow:auto;
  padding:6px 8px; font-size:clamp(11px, calc(0.9vw + 4px), 13px); line-height:1.3; }
@media (orientation:portrait) and (max-width:760px) { html body #itemtip { width:min(60vw, 240px); font-size:11.5px; } }
html body #itemtip .th { font-size:1.1em; }
html body #itemtip .tip-acts { gap:4px; margin-top:6px; }
html body #itemtip .tip-acts button { min-height:30px; padding:2px 6px !important; font-size:12px; }
#itemtip .th b { font-weight:700; color:#f6eedb; }
#itemtip .facts { margin-top:2px; color:#e9e2cf; line-height:1.35; }
#itemtip .facts .tr { display:grid; grid-template-columns:auto 1fr; gap:6px; padding:0; }
#itemtip .facts .tr span::after { content:':'; }
#itemtip .facts .tr b { font-weight:600; color:#f6eedb; }
#itemtip .facts .bad, #itemtip .req { color:#ff5a4a; }
#itemtip .kind { color:#e9e2cf; } #itemtip .kind .base { color:#e6c35c; }
#itemtip .ops { margin-top:6px; padding-top:4px; border-top:1px dotted #4b5a4a; }
#itemtip .op { padding:1px 0; color:#e6c35c; }
#itemtip .set b { color:#5fe08a; font-weight:600; }
#itemtip .desc { margin-top:6px; padding-top:4px; border-top:1px dotted #4b5a4a; color:#e9e2cf; white-space:normal; }
/* bag (phones): the rotated ✕ stayed 7 px outside the window and made it scroll sideways */
html.server-hud #fbag.bagm .win-head [data-close] { right:12px !important; }
html.server-hud #fbag.bagm { overflow-x:hidden; }
/* Safari held sideways (≈330 px tall): equipment column, model and footer all fit */
@media (max-height:380px) and (orientation:landscape) and (pointer:coarse) {
  #fchar.pcm { --s:clamp(22px, calc((100dvh - 118px) / 7.8), 46px); }
  #fchar.pcm .pc-tabs button { min-height:28px; padding:2px 6px; font-size:13px; }
  #fchar.pcm .pc-tabs { margin-bottom:4px; }
  html.server-hud #fchar.pcm .fbody { padding:4px 6px !important; }
  #fchar.pcm .pc-foot { font-size:11px; padding:2px 7px; }
}
/* Phones / tablets: the item view docks beside the bag or character window, as tall as it (the
   mobile client's panel): big icon with ✕, name band, details scrolling, actions at the bottom. */
html body #itemtip.dock { display:flex; flex-direction:column; padding:0; overflow:hidden; pointer-events:auto;
  width:clamp(170px, 21vw, 240px); background:linear-gradient(180deg,#173c39,#0c2524) !important; border:2px solid #b8913a !important; }
html body #itemtip.dock[hidden] { display:none; }
@media (orientation:portrait) and (max-width:760px) { html body #itemtip.dock { width:min(58vw, 230px); } }
#itemtip.dock .tip-ico { position:relative; flex:none; display:flex; align-items:center; justify-content:center; margin:8px 8px 0;
  aspect-ratio:1.45; max-height:30%; background:#0f2f2e radial-gradient(circle, rgba(82,112,106,.35), transparent 70%); border:1px solid #52706a; border-radius:4px; }
#itemtip.dock .tip-ico .ico { width:auto; height:72%; max-width:80%; object-fit:contain; image-rendering:auto; }
#itemtip.dock .tip-x { position:absolute; right:4px; top:4px; width:30px; height:30px; padding:0; min-height:0; border-radius:50%;
  border:1px solid #9fb9b0; background:rgba(4,22,21,.85); color:#fff; font:700 15px/1 system-ui; }
#itemtip.dock .tip-body { flex:1; min-height:0; overflow:auto; padding:0 8px 6px; -webkit-overflow-scrolling:touch; }
#itemtip.dock .th { justify-content:center; margin:6px -8px 4px; padding:5px 8px; background:rgba(4,22,21,.6); border-top:1px solid #2f5752;
  border-bottom:1px solid #2f5752 !important; text-align:center; }
#itemtip.dock .tip-acts { flex:none; margin:0; padding:6px 8px 8px; border-top:1px solid #2f5752; }
/* ---- Phone held sideways: the mobile client's compact layout (jx-windows.js adds .land) ----
   Nhân vật = gear and the stats list side by side (no tabs to switch), Hành trang beside it on the
   right; small type so both windows fit the width with the game still visible between them.
   (theme.js styles these with `html body :is(…) !important`, hence the long selectors.) */
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse) {
  html.server-hud body :is(#fchar.pcm.land, #fbag.bagm[class]) .win-head { padding:2px 4px 2px 10px !important; min-height:0 !important; }
  html.server-hud body :is(#fchar.pcm.land, #fbag.bagm[class]) .win-head b { font-size:14px !important; line-height:1.3 !important; }
  html.server-hud body #fchar.pcm.land .win-head button { width:26px !important; height:26px !important; font-size:13px !important; line-height:24px !important; }
  html.server-hud body #fbag.bagm[class] .win-head [data-close] { width:26px !important; height:26px !important; top:3px !important; }
  html.server-hud body #fbag.bagm[class] .win-head [data-close]::after { font-size:14px !important; line-height:22px !important; }
  html.server-hud #fchar.pcm.land { --s:clamp(24px, calc((100dvh - 120px) / 7.7), 40px); max-width:calc(100vw - 12px) !important; }
  html.server-hud #fchar.pcm.land .fbody { padding:4px 6px 6px !important; }
  #fchar.pcm.land .pc-tabs { margin-bottom:4px; }
  html.server-hud body #fchar.pcm.land .pc-tabs button { flex:none !important; min-height:22px !important; padding:1px 12px !important; font-size:12px !important; }
  #fchar.pcm.land .pc-foot { width:0; min-width:100%; box-sizing:border-box; }
  #fchar.pcm.land .pc-body.tab-all { grid-template-columns:auto auto clamp(196px, 26vw, 250px); grid-template-areas:"gear row stats" "foot foot stats"; gap:4px 5px; }
  #fchar.pcm.land .pc-model { flex:1; min-width:calc(var(--s) * 3.3); }
  #fchar.pcm.land .tab-pot .pc-box.attrs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:10px; }
  html.server-hud #fchar.pcm.land #jx-prev { height:calc(var(--s) * 6.6) !important; }
  #fchar.pcm.land .pc-stats { display:flex; flex-direction:column; gap:3px; min-width:0; max-height:calc(100dvh - 82px); overflow:auto; }
  #fchar.pcm.land .pc-box, #fchar.pcm.land .pc-box.attrs { display:block; padding:2px 6px; }
  #fchar.pcm.land .pc-stats .r { min-height:0; font-size:11px; line-height:13px; gap:4px; }
  /* combat stats in two columns so vitals, combat, attributes and points fit without scrolling */
  #fchar.pcm.land .pc-box.cmb { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:8px; }
  #fchar.pcm.land .pc-box.cmb .r { font-size:10.5px; }
  #fchar.pcm.land .pc-box.cmb .r span { overflow:hidden; text-overflow:ellipsis; }
  #fchar.pcm.land .pc-stats .attrs .r { min-height:17px; }
  html.server-hud body #fchar.pcm.land .pc-stats .attrs button { width:17px !important; height:17px !important; font-size:12px !important; line-height:15px !important; }
  #fchar.pcm.land .pc-stats .r.pot { padding:2px 6px; font-size:12px; }
  #fchar.pcm.land .pc-foot { font-size:10.5px; line-height:13px; padding:2px 6px; gap:0 6px; }
  #fchar.pcm.land .pc-foot { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  #fchar.pcm.land .pc-foot > div { grid-column:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #fchar.pcm.land .pc-foot label { grid-column:2; grid-row:1 / 3; font-size:11px; }
  html.server-hud body #fchar.pcm.land .pc-tabs button { flex:1 !important; }
  #fchar.pcm.land .pc-foot label input { width:13px; height:13px; margin:0; }
  html.server-hud body :is(#fchar.pcm.land, #fbag.bagm[class]) { min-height:0 !important; }
  /* Hành trang: smaller cells, a narrow function column; the footer no longer sets the width */
  html.server-hud #fbag.bagm { --b:clamp(24px, min(3.9vw, calc((100dvh - 150px) / 6.3)), 44px); max-width:calc(100vw - 12px) !important; }
  html.server-hud #fbag.bagm .fbody { padding:4px 6px 6px !important; }
  #fbag.bagm .bm { gap:4px; }
  #fbag.bagm .bm-menu { width:clamp(66px, 9.2vw, 96px); gap:3px; }
  #fbag.bagm .bm-menu button { min-height:calc(var(--b) * .72); font-size:11px; padding:1px 3px; }
  #fbag.bagm .bm-pages { gap:4px; } #fbag.bagm .bm-pages button { font-size:13px; } #fbag.bagm .bm-pages i { font-size:15px; }
  #fbag.bagm .bm-foot { width:0; min-width:100%; grid-template-columns:repeat(6, minmax(0,1fr)); gap:3px; }
  #fbag.bagm .bm-foot span { grid-column:span 2; font-size:11px; padding:1px 5px; }
  #fbag.bagm .bm-foot span:nth-child(-n+2) { grid-column:span 3; font-size:11px; padding:1px 5px; }
}
/* ---- Phone held sideways: HUD like the mobile client (round portrait + level badge, EXP bar on
   top "exp(%)/next", HP / MP / stamina bars side by side with the values under them; labelled
   round buttons; numbered skill slots; shortcut pages 1 2 3 4 under the skill wheel) ---- */
#mwheel .mw-pages { display:none; }
@media (max-height:560px) and (orientation:landscape) and (pointer:coarse) {
  html.hud-skin body #vitals { width:min(330px, calc(100vw - 420px)) !important; padding:0 !important; background:none !important; border:0 !important;
    box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-radius:0 !important; }
  html.hud-skin body #vitals .vtrow { display:flex; align-items:flex-start; gap:6px; }
  html.hud-skin body #vitals #avatar { position:relative; flex:none; width:58px !important; height:58px !important; margin:0 !important; padding:0 !important; transform:none !important;
    border-radius:50% !important; border:2px solid #d7ad58 !important; overflow:visible; background:radial-gradient(circle at 50% 35%, #3a5f5a, #10302d) !important; }
  html.hud-skin body #vitals #avatar:active { transform:scale(.94) !important; }
  html.hud-skin body #vitals #avatar img { display:block; position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
  html.hud-skin body #vitals #avatar b { position:absolute; right:-6px; bottom:-4px; width:24px; height:24px; transform:rotate(45deg); border:1px solid #d7ad58; border-radius:4px;
    background:linear-gradient(135deg,#2b635c,#10332f); font:700 10px/22px system-ui; color:#fff; text-align:center; }
  html.hud-skin body #vitals #avatar b::first-line { }
  html.hud-skin body #vitals .vtmain { flex:1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-areas:"ex ex ex" "hp mp st"; gap:3px 4px; padding-top:2px; }
  html.hud-skin body #vitals .who { display:none !important; }
  html.hud-skin body #vitals .bar { position:relative; display:block !important; height:9px !important; margin:0 0 13px !important; overflow:visible; border-radius:5px !important;
    background:rgba(4,12,14,.75) !important; border:1px solid rgba(0,0,0,.6) !important; }
  html.hud-skin body #vitals .bar i { height:100%; border-radius:4px; }
  html.hud-skin body #vitals .bar.ex { grid-area:ex; height:14px !important; margin:0 !important; }
  html.hud-skin body #vitals .bar.ex i { background:linear-gradient(180deg,#9fc4ff,#4b78c8) !important; opacity:.75; }
  html.hud-skin body #vitals .bar.ex span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 10px/1 system-ui; color:#fff; text-shadow:0 1px 2px #000; }
  html.hud-skin body #vitals .bar.hp { grid-area:hp; } html.hud-skin body #vitals .bar.mp { grid-area:mp; } html.hud-skin body #vitals .bar.st { grid-area:st; }
  html.hud-skin body #vitals :is(.bar.hp, .bar.mp, .bar.st) span { position:absolute; left:0; right:0; top:100%; bottom:auto; margin-top:1px; text-align:center;
    font:600 10px/12px system-ui; color:#fff; text-shadow:0 1px 2px #000, 0 0 3px #000; white-space:nowrap; }
  /* labelled round buttons (title follows the state: Chạy / Đi bộ, Ngồi / Đứng…) */
  html.hud-skin body #actions { gap:2px 12px !important; row-gap:16px !important; max-width:none !important; flex-wrap:nowrap !important; }
  html.hud-skin #actions button, html.hud-skin #mdock button { position:relative; overflow:visible !important; }
  html.hud-skin #actions button::after, html.hud-skin #mdock button::after { content:attr(title); position:absolute; left:50%; top:100%; transform:translateX(-50%);
    margin-top:1px; font:600 10px/12px system-ui; color:#fff4d6; text-shadow:0 1px 2px #000, 0 0 3px #000; white-space:nowrap; pointer-events:none; }
  html.hud-skin #actions button .btn-art, html.hud-skin #mdock button .btn-art { border-radius:50%; }
  html.hud-skin #actions button.has-art { overflow:visible !important; }
  /* skill wheel: numbered empty slots, pages 1 2 3 4 underneath */
  html.hud-skin #mwheel { bottom:calc(44px + var(--sb)); }
  #mwheel .mw-s.empty span::before { content:attr(data-n); font:600 18px system-ui; color:rgba(240,240,240,.85); }
  html.hud-skin #mwheel .mw-pg { display:none; }
  html.hud-skin #mwheel .mw-pages { display:flex; position:absolute; right:-6px; bottom:-40px; gap:14px; padding:3px 10px; border-radius:16px; background:rgba(12,10,6,.55); pointer-events:auto; }
  html.hud-skin #mwheel .mw-pages button { position:static; width:28px; height:28px; border:1px solid rgba(215,173,88,.6); background:rgba(30,26,20,.85); color:#f3e7c4; font:700 13px/1 system-ui; }
  html.hud-skin #mwheel .mw-pages button.on { background:radial-gradient(circle at 50% 35%,#4fc28b,#1d6b47); border-color:#bfe0c9; color:#fff; }
}
/* Safari held sideways (≈330 px tall): the raised wheel would reach the minimap text */
@media (max-height:370px) and (orientation:landscape) and (pointer:coarse) {
  html.hud-skin #mwheel { transform:scale(.82); transform-origin:100% 100%; bottom:calc(40px + var(--sb)); }
  html.hud-skin #mwheel .mw-pages { bottom:-46px; }
}
/* =====================================================================================
   Desktop redesign (PC client, 2000s style): jade panels #0d2822 → #1a3d35 at ~94 %, raised
   bronze frames #b89758 / #785e2f, gold titles #ffeb78; HP #ff4d4d, MP #38bdf8, SP #4ade80,
   potential points #fb923c. Phones keep their own layouts (all rules below are desktop only).
   ===================================================================================== */
#chat-tabs, #minimap .mm-npc, #sysdock kbd { display:none; }
@media (pointer:fine) and (min-width:1000px) {
  :root { --jd0:rgba(13,40,34,.95); --jd1:rgba(26,61,53,.94); --brz:#b89758; --brz-d:#785e2f; --brz-l:#e2c88a; --gold-t:#ffeb78;
    --c-hp:#ff4d4d; --c-mp:#38bdf8; --c-sp:#4ade80; --c-pot:#fb923c;
    --frame:inset 0 0 0 1px var(--brz-d), inset 0 2px 0 rgba(255,236,180,.28), inset 0 -2px 0 rgba(0,0,0,.45), 0 0 0 1px #24190a, 0 6px 18px rgba(0,0,0,.6); }
  /* ---- shared frame: jade body, raised bronze border with corner studs ---- */
  html.hud-skin.server-hud body :is(.fwin.pc, #vitals, #minimap, #hotbar, #sysdock, #side, #dock) {
    background:linear-gradient(180deg, var(--jd1), var(--jd0)) !important; border:2px solid var(--brz) !important; border-radius:3px !important;
    box-shadow:var(--frame) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  html.hud-skin.server-hud body :is(.fwin.pc, #minimap, #hotbar, #sysdock)::after { content:''; position:absolute; inset:-2px; pointer-events:none; z-index:3;
    background:radial-gradient(circle, var(--brz-l) 0 2px, var(--brz-d) 3px, transparent 4px) 0 0 / 10px 10px no-repeat,
      radial-gradient(circle, var(--brz-l) 0 2px, var(--brz-d) 3px, transparent 4px) 100% 0 / 10px 10px no-repeat,
      radial-gradient(circle, var(--brz-l) 0 2px, var(--brz-d) 3px, transparent 4px) 0 100% / 10px 10px no-repeat,
      radial-gradient(circle, var(--brz-l) 0 2px, var(--brz-d) 3px, transparent 4px) 100% 100% / 10px 10px no-repeat; }
  html.hud-skin.server-hud body .fwin.pc .win-head { background:linear-gradient(180deg, #2c5a4e, #163a32) !important; border-bottom:2px solid var(--brz-d) !important;
    box-shadow:inset 0 -1px 0 var(--brz), inset 0 1px 0 rgba(255,236,180,.2) !important; }
  html.hud-skin.server-hud body :is(#fchar, #fbag, #fbag-ext).pc .win-head b { color:var(--gold-t) !important; -webkit-text-fill-color:var(--gold-t) !important; background:none !important; filter:none !important; font:700 18px/1.3 Georgia, 'Times New Roman', serif !important; letter-spacing:1px;
    text-shadow:0 1px 0 #3d2a0f, 0 0 6px rgba(0,0,0,.7) !important; }
  html.hud-skin.server-hud body .fwin.pc .win-head :is(button, .win-help) { border-radius:2px !important; border:1px solid var(--brz) !important;
    background:linear-gradient(180deg, #3a6a5d, #173a32) !important; box-shadow:inset 0 1px 0 rgba(255,236,180,.3), 0 1px 2px #000 !important; color:var(--gold-t) !important; }
  html.hud-skin.server-hud body .fwin.pc .win-head [data-close] { background:linear-gradient(180deg, #8a2a20, #4e130e) !important; color:#fff !important; }
  html.hud-skin.server-hud body :is(.fwin.pc .pc-box, .fwin.pc .pc-foot, .pc-bag .pc-grid, .pc-bag .pc-sel) {
    background:rgba(5,20,17,.6) !important; border:1px solid var(--brz-d) !important; border-radius:2px !important; box-shadow:inset 0 0 10px rgba(0,0,0,.55) !important; }
  /* engraved slots */
  html.hud-skin.server-hud body .fwin.pc .jx-slot { border:1px solid var(--brz-d) !important; border-radius:2px !important;
    background:#0b231e radial-gradient(circle, rgba(184,151,88,.10) 0 30%, transparent 31%) center / 70% 70% no-repeat !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.7) !important; }
  html.hud-skin.server-hud body .fwin.pc .jx-slot.full { border-color:var(--brz) !important; }
  html.hud-skin.server-hud body .fwin.pc .jx-slot[data-sel] { outline:2px solid var(--gold-t) !important; outline-offset:-1px; }
  /* tabs */
  html.hud-skin.server-hud body :is(.pc-char .pc-tabs button, .pc-bag .pc-cats button, #chat-tabs button) { border:1px solid var(--brz-d) !important; border-bottom:0 !important;
    border-radius:3px 3px 0 0 !important; background:linear-gradient(180deg, #1e4038, #10291f) !important; color:#cfe3d6 !important; padding:4px 14px !important;
    font:600 13px Georgia, serif !important; box-shadow:inset 0 1px 0 rgba(255,236,180,.15) !important; }
  html.hud-skin.server-hud body :is(.pc-char .pc-tabs button.on, .pc-bag .pc-cats button.on, #chat-tabs button.on) {
    background:linear-gradient(180deg, #d9bd78, #8f6d33) !important; border-color:var(--brz-l) !important; color:#1d1405 !important; }

  /* ---- top-left HUD: level ring, thin EXP bar, HP / MP / SP stacked ---- */
  html.hud-skin.server-hud body #vitals { width:300px !important; padding:6px 10px 8px 6px !important; }
  html.hud-skin.server-hud body #vitals .vtrow { gap:8px; align-items:center; }
  html.hud-skin.server-hud body #vitals #avatar { width:58px !important; height:58px !important; margin:0 !important; transform:none !important; border-radius:50% !important;
    border:3px solid var(--brz) !important; background:radial-gradient(circle at 50% 35%, #2f6355, #0d2822) !important;
    box-shadow:inset 0 0 0 2px var(--brz-d), 0 0 0 1px #24190a, 0 2px 6px rgba(0,0,0,.6) !important; }
  html.hud-skin.server-hud body #vitals #avatar:active { transform:scale(.94) !important; }
  html.hud-skin.server-hud body #vitals #avatar b { transform:none !important; font:700 20px/52px Georgia, serif !important; color:var(--gold-t) !important; }
  html.hud-skin.server-hud body #vitals .vtmain { display:grid !important; grid-template-columns:1fr !important; grid-template-areas:"ex" "hp" "mp" "st" !important; gap:3px !important; }
  html.hud-skin.server-hud body #vitals .bar { height:14px !important; border:1px solid #000 !important; border-radius:2px !important; background:#06110e !important;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.8), 0 0 0 1px var(--brz-d) !important; }
  html.hud-skin.server-hud body #vitals .bar.ex { height:11px !important; }
  html.hud-skin.server-hud body #vitals .bar.ex span { font:600 9px/1 system-ui !important; }
  html.hud-skin.server-hud body #vitals .bar.hp i { background:linear-gradient(180deg, #ff7a7a, var(--c-hp) 45%, #a31c1c) !important; }
  html.hud-skin.server-hud body #vitals .bar.mp i { background:linear-gradient(180deg, #7dd3fc, var(--c-mp) 45%, #0b6c9c) !important; }
  html.hud-skin.server-hud body #vitals .bar.st i { background:linear-gradient(180deg, #86efac, var(--c-sp) 45%, #15803d) !important; }
  html.hud-skin.server-hud body #vitals .bar.ex i { background:linear-gradient(180deg, #fff3b0, #e3b93e 50%, #8a6514) !important; }
  html.hud-skin.server-hud body #vitals :is(.bar.hp, .bar.mp, .bar.st) span { font:700 11px/1 system-ui !important; }
  html.hud-skin.server-hud body #dock { left:330px !important; }

  /* ---- top-right minimap: rectangle, clock above, ± and NPC list ---- */
  html.hud-skin.server-hud body #minimap { width:192px !important; padding:4px 6px 6px !important; }
  html.hud-skin.server-hud body #minimap .mm-date { display:block !important; text-align:center; color:var(--gold-t) !important; font:600 12px Georgia, serif !important;
    padding:1px 0 3px !important; margin:0 0 3px !important; border-bottom:1px solid var(--brz-d) !important; }
  html.hud-skin.server-hud body #minimap .mm-bar { color:var(--gold-t) !important; font:700 14px Georgia, serif !important; }
  html.hud-skin.server-hud body #minimap.mm-rect canvas { display:block; width:180px !important; height:120px !important; margin:2px auto; border-radius:0 !important;
    border:2px solid var(--brz) !important; box-shadow:inset 0 0 0 1px var(--brz-d), 0 2px 6px rgba(0,0,0,.6) !important; }
  html.hud-skin.server-hud body #minimap.mm-rect .mm-zoom { position:static; transform:none; display:flex; justify-content:center; gap:6px; margin-top:4px; pointer-events:auto; }
  html.hud-skin.server-hud body #minimap.mm-rect .mm-zoom button, html.hud-skin.server-hud body #minimap .mm-npc { display:block; width:24px; height:22px; padding:0; min-height:0;
    border:1px solid var(--brz); border-radius:2px; background:linear-gradient(180deg, #3a6a5d, #173a32); color:var(--gold-t); font:700 13px/1 system-ui; }

  /* ---- Nhân vật ---- */
  html.hud-skin.server-hud body #fchar.pc .pc-stats .r span { color:#cfe3d6 !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .r b.hp, html.hud-skin.server-hud body #fchar.pc .pc-stats .vit .r:nth-child(1) span { color:var(--c-hp) !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .r b.mp, html.hud-skin.server-hud body #fchar.pc .pc-stats .vit .r:nth-child(2) span { color:var(--c-mp) !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .r b.st, html.hud-skin.server-hud body #fchar.pc .pc-stats .vit .r:nth-child(3) span { color:var(--c-sp) !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .cmb .r:nth-child(5) b, html.hud-skin.server-hud body #fchar.pc .pc-stats .cmb .r:nth-child(5) span { color:var(--c-sp) !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .r.pot span, html.hud-skin.server-hud body #fchar.pc .pc-stats .r.pot b { color:var(--c-pot) !important; font-weight:700; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .attrs button { width:18px !important; height:18px !important; border-radius:2px !important; border:1px solid var(--brz) !important;
    background:linear-gradient(180deg, #3a6a5d, #173a32) !important; color:var(--gold-t) !important; font:700 13px/1 system-ui !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-stats .attrs button[aria-label^="Giảm"] { display:inline-block !important; }
  html.hud-skin.server-hud body #fchar.pc .pc-model { border:1px solid var(--brz-d) !important; background:radial-gradient(ellipse at 50% 62%, #2a5a4c 0%, #0d2822 72%) !important; }
  /* empty equipment slots show what goes there (drawn icons, bronze on jade) */
  html.hud-skin.server-hud body #fchar.pc .jx-slot:not(.full)::before { content:''; position:absolute; inset:16%; opacity:.42; background:var(--brz-l);
    -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
  html.hud-skin.server-hud body #fchar.pc .jx-slot:not(.full) em { position:relative; z-index:1; }
  #fchar.pc .jx-slot[title="Nón"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2 4c3 1 6 4 6 9v2H4v-2c0-5 3-8 6-9zM3 18h18v3H3z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Áo"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2l4 3 4-3 6 4-3 5-2-1v12H7V10l-2 1-3-5z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Quần"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14l1 20h-6l-2-12-2 12H4z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Vũ khí"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2l2 2-11 11-2-2zM6 14l4 4-2 2-1-1-3 3-2-2 3-3-1-1z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Áo choàng"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6l1 3 5 17-6-3-3 3-3-3-6 3L8 5z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Trang sức"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 1h2v4h-2z'/%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Ngựa"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2l3 3 4 1-1 4-3-1-2 3 1 10h-3l-1-7-4 1v6H5v-8l2-5 4-3z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot:is([title^="Mật tịch"]) { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h7v18H4zM13 3h7v18h-7z'/%3E%3C/svg%3E"); }
  #fchar.pc .jx-slot[title="Ám khí"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/%3E%3C/svg%3E"); }

  /* ---- Hành trang: category tabs, 6 × 8 grid, weight bar, money ---- */
  /* windows scale to the screen (--jx-ui), so they never need an inner scrollbar */
  html.hud-skin.server-hud body :is(#fchar, #fbag, #fbag-ext).pc { max-height:none !important; overflow:visible !important; }
  /* the bag opens left of the minimap so the map stays visible */
  html.hud-skin.server-hud body #fbag.pc { width:384px !important; right:216px !important; top:86px !important; }
  html.hud-skin.server-hud body #fbag-ext.pc { right:616px !important; top:86px !important; }
  .pc-bag .pc-cats { display:flex; gap:3px; border-bottom:1px solid var(--brz-d); margin-bottom:6px; }
  html.hud-skin.server-hud body .pc-bag .pc-cats button { padding:3px 10px !important; font-size:12px !important; }
  html.hud-skin.server-hud body .pc-bag .pc-grid { grid-template-columns:repeat(6, 1fr) !important; gap:2px !important; }
  .pc-bag .pc-weight { display:flex; align-items:center; gap:8px; margin-top:6px; color:#cfe3d6; font:12px Georgia, serif; }
  .pc-bag .pc-wbar { position:relative; flex:1; height:14px; border:1px solid #000; border-radius:2px; background:#06110e; box-shadow:0 0 0 1px var(--brz-d), inset 0 1px 3px #000; }
  .pc-bag .pc-wbar i { position:absolute; inset:0 auto 0 0; background:linear-gradient(180deg, #fff3b0, #d9a93a 50%, #7a5510); }
  .pc-bag .pc-wbar b { position:relative; display:block; text-align:center; font:700 10px/14px system-ui; color:#fff; text-shadow:0 1px 2px #000; }
  .pc-bag .pc-money { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:6px; }
  .pc-bag .pc-coin { display:flex; align-items:center; gap:5px; padding:3px 6px; border:1px solid var(--brz-d); border-radius:2px; background:rgba(5,20,17,.6);
    font:11px Georgia, serif; color:#cfe3d6; white-space:nowrap; overflow:hidden; }
  .pc-bag .pc-coin b { margin-left:auto; color:var(--gold-t); font-weight:600; }
  .pc-bag .pc-coin i { flex:none; width:12px; height:12px; border-radius:50%; box-shadow:inset 0 -2px 2px rgba(0,0,0,.4), 0 0 0 1px #000; }
  .pc-bag .pc-coin.gold i { background:radial-gradient(circle at 35% 30%, #fff1a8, #d9a93a 60%, #7a5510); }
  .pc-bag .pc-coin.kim i { background:radial-gradient(circle at 35% 30%, #ffe08a, #f59e0b 60%, #7c3d0a); }
  .pc-bag .pc-coin.silver i { background:radial-gradient(circle at 35% 30%, #fff, #b8c2cc 60%, #5c6670); }
  .pc-bag .pc-coin.xu i { background:radial-gradient(circle at 35% 30%, #f5c99b, #b06a2c 60%, #5a2e0c); }
  html.hud-skin.server-hud body .pc-bag .pc-bagfoot { display:none !important; }

  /* ---- bottom bar: chat (left, tabs), quick slots 1–8 + mouse skills (centre), taskbar (right) ---- */
  html.hud-skin.server-hud body #side { width:min(340px, calc(50vw - 290px)) !important; height:200px !important; padding:0 !important; display:flex; flex-direction:column; }
  #chat-tabs { display:flex; gap:2px; padding:4px 34px 0 6px; border-bottom:1px solid var(--brz-d); flex:none; }
  html.hud-skin.server-hud body #side #chat-toggle { left:auto !important; right:4px !important; top:3px !important; }
  html.hud-skin.server-hud body #chat-tabs button { padding:2px 8px !important; font-size:11px !important; }
  html.hud-skin.server-hud body #side #chat { flex:1; min-height:0; }
  #chat[data-filter="sys"] > div:not([data-kind="sys"]), #chat[data-filter="guild"] > div:not([data-kind="guild"]),
  #chat[data-filter="faction"] > div:not([data-kind="faction"]) { display:none; }
  html.hud-skin.server-hud body #hotbar { padding:5px 8px !important; gap:4px !important; }
  html.hud-skin.server-hud body #hotbar .slot { width:44px !important; height:44px !important; border:1px solid var(--brz-d) !important; border-radius:2px !important;
    background:#0b231e !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 6px rgba(0,0,0,.7) !important; }
  html.hud-skin.server-hud body #hotbar .slot img { width:40px !important; height:40px !important; }
  html.hud-skin.server-hud body #hotbar .slot > span { color:var(--gold-t) !important; }
  html.hud-skin.server-hud body #hotbar .hb-mouse .slot { width:54px !important; height:54px !important; border:2px solid var(--brz) !important;
    box-shadow:inset 0 0 0 1px var(--brz-d), 0 0 8px rgba(226,200,138,.35) !important; }
  html.hud-skin.server-hud body #hotbar .hb-mouse .slot img { width:48px !important; height:48px !important; }
  html.hud-skin.server-hud body #hotbar .hb-page { color:var(--gold-t) !important; }
  html.hud-skin.server-hud body #sysdock { display:grid !important; grid-template-columns:repeat(6, 40px); gap:2px 3px !important; padding:4px 6px !important; height:auto !important; }
  html.hud-skin.server-hud body #sysdock button { position:relative; width:40px !important; height:46px !important; min-width:0 !important; padding:0 !important; margin:0 !important;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; border:0 !important; background:none !important; box-shadow:none !important; }
  html.hud-skin.server-hud body #sysdock button .btn-art, html.hud-skin.server-hud body #sysdock button > i { width:32px !important; height:32px !important; border:1px solid var(--brz-d);
    border-radius:2px; background:#0b231e; box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); font-style:normal; font-size:18px; line-height:32px; text-align:center; }
  html.hud-skin.server-hud body #sysdock button:hover :is(.btn-art, i) { border-color:var(--brz-l); }
  html.hud-skin.server-hud body #sysdock button span { display:block !important; position:static !important; opacity:1 !important; transform:none !important; background:none !important;
    border:0 !important; padding:0 !important; font:600 9px/12px system-ui !important; color:#e9e2cf !important; white-space:nowrap; letter-spacing:-.2px; }
  html.hud-skin.server-hud body #sysdock kbd { display:block; position:absolute; top:0; right:1px; font:700 8px/10px system-ui; color:var(--gold-t); text-shadow:0 1px 1px #000; }
}
/* ---- PC key system (shortcuts.js createKeymap): two quick-bar rows (1–8, Q W E R A S D Z X C),
   the slot chosen for the right mouse button glows, key settings window #keymap ---- */
#hotbar .hb-rows { display:flex; flex-direction:column; gap:3px; }
#hotbar .hb-row { display:flex; gap:4px; }
#hotbar .slot.rsel { outline:2px solid #ffeb78; outline-offset:-2px; box-shadow:0 0 10px rgba(255,235,120,.65) !important; }
#hotbar .slot.rsel::after { content:'P'; position:absolute; right:2px; bottom:1px; font:700 9px/1 system-ui; color:#ffeb78; text-shadow:0 1px 2px #000; }
@media (pointer:fine) and (min-width:1000px) {
  html.hud-skin.server-hud body #hotbar .hb-row .slot { width:40px !important; height:40px !important; }
  html.hud-skin.server-hud body #hotbar .hb-row .slot img { width:36px !important; height:36px !important; }
  html.hud-skin.server-hud body #side { height:220px !important; }
}
#keymap { position:fixed; z-index:40; left:50%; top:50%; transform:translate(-50%,-50%); width:min(460px, calc(100vw - 24px)); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; }
#keymap[hidden] { display:none !important; }
#keymap .win-head { display:flex; align-items:center; padding:4px 6px 4px 12px; }
#keymap .win-head b { flex:1; text-align:center; }
#keymap .fbody { overflow:auto; padding:8px 10px 10px; font:13px Georgia, serif; color:#e9e2cf; }
#keymap .km-hint { margin:0 0 6px; color:#bfe0c9; font-size:12px; }
#keymap h4 { margin:8px 0 4px; color:#ffeb78; font:700 13px Georgia, serif; }
#keymap .km-list { display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; }
#keymap .km-r { display:flex; align-items:center; gap:6px; min-height:26px; padding:1px 6px; border:1px solid #785e2f; border-radius:2px; background:rgba(5,20,17,.6); }
#keymap .km-r span { flex:1; min-width:0; font-size:12px; }
#keymap .km-r b { color:#ffeb78; font-size:11px; white-space:nowrap; }
#keymap .km-r button { min-width:58px; height:22px; padding:0 6px; border:1px solid #b89758; border-radius:2px; background:linear-gradient(180deg,#3a6a5d,#173a32); color:#ffeb78; font:700 12px system-ui; }
#keymap .km-r button.wait { background:linear-gradient(180deg,#d9bd78,#8f6d33); color:#1d1405; }
#keymap .km-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
#keymap .km-foot button { padding:4px 14px; border:1px solid #b89758; border-radius:2px; background:linear-gradient(180deg,#d9bd78,#8f6d33); color:#1d1405; font:700 13px Georgia, serif; }
@media (max-width:520px) { #keymap .km-list { grid-template-columns:1fr; } }
html.hud-skin #hotbar .hb-page button.hb-keys { width:22px !important; height:18px !important; margin-top:3px; border:1px solid #b89758 !important; border-radius:2px;
  background:linear-gradient(180deg,#3a6a5d,#173a32) !important; color:#ffeb78 !important; font-size:12px !important; }
/* PC mini skill grid (click a mouse-skill icon): right side of the screen, above the taskbar */
#rpick { position:fixed; z-index:30; right:14px; bottom:150px; width:min(324px, calc(100vw - 28px)); padding:0 0 6px; background:linear-gradient(180deg, rgba(26,61,53,.95), rgba(13,40,34,.96));
  border:2px solid #b89758; border-radius:3px; box-shadow:inset 0 0 0 1px #785e2f, 0 6px 18px rgba(0,0,0,.6); }
#rpick[hidden] { display:none; }
#rpick .rp-head { display:flex; align-items:center; padding:3px 4px 3px 10px; border-bottom:1px solid #785e2f; background:linear-gradient(180deg,#2c5a4e,#163a32); }
#rpick .rp-head b { flex:1; text-align:center; color:#ffeb78; font:700 14px Georgia, serif; }
#rpick .rp-head button { width:22px; height:22px; padding:0; border:1px solid #b89758; border-radius:2px; background:linear-gradient(180deg,#8a2a20,#4e130e); color:#fff; font:700 12px system-ui; }
#rpick .rp-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; padding:6px; }
#rpick .rp-grid p { grid-column:1 / -1; margin:4px; color:#cfe3d6; font:12px Georgia, serif; }
#rpick [data-rp] { position:relative; aspect-ratio:1; padding:0; border:1px solid #785e2f; border-radius:2px; background:#0b231e; cursor:pointer; }
#rpick [data-rp] img { width:100%; height:100%; object-fit:cover; display:block; }
#rpick [data-rp]:hover { border-color:#e2c88a; }
#rpick [data-rp] .cdov { position:absolute; inset:0; background:rgba(0,0,0,.62); color:#fff; font:700 13px system-ui; font-style:normal; display:flex; align-items:center; justify-content:center; text-shadow:0 0 3px #000; pointer-events:none; }
#rpick [data-rp].on { outline:2px solid #ffeb78; outline-offset:-2px; }
#rpick [data-rp] i, #hotbar .slot b.kl { position:absolute; right:1px; top:1px; padding:0 3px; border-radius:2px; background:rgba(0,0,0,.65); color:#ffeb78; font:700 10px/13px system-ui; font-style:normal; }
#skill-drag { position:fixed; z-index:200; width:36px; height:36px; pointer-events:none; opacity:.85; border:1px solid #ffeb78; border-radius:3px; }
body.skill-dragging #hotbar [data-hb-i] { box-shadow:0 0 0 1px #ffeb78 inset !important; }
@media (pointer:coarse) and (max-width:1400px), (max-width:760px) { #rpick { bottom:auto; top:50%; transform:translateY(-50%); } }
#rpick [data-rp] small { display:flex; align-items:center; justify-content:center; height:100%; padding:2px; color:#e9e2cf; font:600 9px/1.1 system-ui; text-align:center; overflow:hidden; }
/* Chat box see-through (PC client): no panel behind the lines, a light veil only, text keeps a
   dark outline so it stays readable over the map; the input row stays solid enough to type in. */
html.hud-skin.server-hud body #side { background:linear-gradient(180deg, rgba(8,24,20,0) 0%, rgba(8,24,20,.28) 100%) !important;
  border-color:rgba(184,151,88,.35) !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html.hud-skin.server-hud body #side::after { display:none !important; }
html.hud-skin.server-hud body #side #chat { background:transparent !important; border:0 !important; box-shadow:none !important; scrollbar-width:thin; scrollbar-color:rgba(184,151,88,.5) transparent; }
html.hud-skin.server-hud body #side #chat > div { text-shadow:0 1px 1px #000, 0 0 3px #000, 0 0 2px #000; }
html.hud-skin.server-hud body #chat-tabs { border-bottom-color:rgba(184,151,88,.35) !important; }
html.hud-skin.server-hud body #chat-tabs button:not(.on) { background:rgba(16,41,31,.45) !important; }
html.hud-skin.server-hud body #chat-in { background:transparent !important; }
html.hud-skin.server-hud body #chat-in :is(select, input) { background:rgba(6,18,15,.55) !important; }
@media (pointer:fine) and (min-width:1000px) {
  /* the run / sit / horse / talk buttons sat behind the (now see-through) chat box: put them above it */
  html.hud-skin.server-hud body #actions { left:14px !important; bottom:240px !important; }
}
/* windows move by their title bar (jx-windows.js), with the finger too */
html.server-hud :is(#fchar, #fbag, #fbag-ext) .win-head { cursor:move; touch-action:none; user-select:none; }
html.server-hud :is(#fchar, #fbag, #fbag-ext).dragging { transition:none !important; }
/* "Chọn kỹ năng" level picker (right-click a skill): same jade / bronze frame as the mini grid */
#lvpick { position:fixed; z-index:41; left:50%; top:40%; transform:translate(-50%,-50%); width:min(300px, calc(100vw - 24px)); padding:0 0 6px;
  background:linear-gradient(180deg, rgba(26,61,53,.96), rgba(13,40,34,.97)); border:2px solid #b89758; border-radius:3px; box-shadow:inset 0 0 0 1px #785e2f, 0 6px 18px rgba(0,0,0,.6); }
#lvpick[hidden] { display:none; }
#lvpick .rp-head { display:flex; align-items:center; padding:3px 4px 3px 10px; border-bottom:1px solid #785e2f; background:linear-gradient(180deg,#2c5a4e,#163a32); }
#lvpick .rp-head b { flex:1; text-align:center; color:#ffeb78; font:700 13px Georgia, serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#lvpick .rp-head button { width:22px; height:22px; padding:0; border:1px solid #b89758; border-radius:2px; background:linear-gradient(180deg,#8a2a20,#4e130e); color:#fff; font:700 12px system-ui; }
#lvpick .lv-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:3px; padding:6px; }
#lvpick [data-lv] { position:relative; aspect-ratio:1; padding:0; border:1px solid #785e2f; border-radius:2px; background:#0b231e; cursor:pointer; }
#lvpick [data-lv] img { width:100%; height:100%; object-fit:cover; display:block; }
#lvpick [data-lv] i { position:absolute; right:2px; bottom:1px; color:#fff; font:700 12px/1 system-ui; font-style:normal; text-shadow:0 1px 2px #000, 0 0 3px #000; }
#lvpick [data-lv].on { outline:2px solid #ffeb78; outline-offset:-2px; }
#lvpick .lv-hint { margin:0 8px; color:#cfe3d6; font:11px Georgia, serif; }
/* tu luyện bar (main.js): same look as the mounting bar, a little higher so both can show */
#practice-bar { position:fixed; left:50%; bottom:calc(22% + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); width:min(240px, 60vw); padding:3px 4px 4px;
  background:rgba(12,10,6,.78); border:1px solid #b8913f; border-radius:4px; z-index:60; pointer-events:none; text-align:center; }
#practice-bar[hidden] { display:none; }
#practice-bar span { display:block; font-size:12px; line-height:15px; color:#ffeb78; text-shadow:0 1px 1px #000; }
#practice-bar i { display:block; height:7px; width:0; transition:width 1s linear; background:linear-gradient(#c4b5fd,#7c3aed); border-radius:2px; }
/* PC bag: the item in hand follows the cursor; its cell is dimmed */
#item-held { position:fixed; z-index:210; width:36px; height:36px; pointer-events:none; filter:drop-shadow(0 2px 4px #000); }
div#item-held { border:1px dashed #ffeb78; border-radius:3px; background:rgba(11,35,30,.8); }
.fwin.pc .jx-slot[data-held] > * { opacity:.3; }
body.item-held #fbag .jx-slot, body.item-held #fchar .jx-slot, body.item-held #hotbar .slot { cursor:copy; }
#hotbar .slot b.cnt { position:absolute; right:2px; bottom:1px; color:#fff; font:700 11px/1 system-ui; text-shadow:0 1px 2px #000, 0 0 3px #000; }
/* desktop HUD follows the screen size (--hud-ui from jx-windows.js, minimum 0.85) */
@media (pointer:fine) and (min-width:1000px) {
  html.hud-skin.server-hud body :is(#vitals, #dock, #minimap, #hotbar, #sysdock, #side, #actions, #rpick, #practice-bar, #qibar) { zoom:var(--hud-ui, 1); }
}
/* a quick-bar slot kept at a chosen level ("Chọn kỹ năng") shows it */
#hotbar .slot b.lvb { position:absolute; left:2px; bottom:1px; padding:0 3px; border-radius:2px; background:rgba(124,58,237,.85); color:#fff; font:700 10px/13px system-ui; }
#lvpick [data-lv] { cursor:grab; }
#jxskill .bk-go.bk-gm { margin-left:6px; padding:0 10px; background:linear-gradient(180deg,#d9bd78,#8f6d33); border-color:#ffeb78; color:#1d1405; font-size:13px; }
/* no long-press "save image" sheet / text selection on game art (iOS, Android, desktop drag) */
html.server-hud body img, html.server-hud body canvas { -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
html.server-hud body :is(#hotbar, #sysdock, #mwheel, #actions, #mdock, #vitals, #minimap, .fwin, #rpick, #lvpick, #jxskill) { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
html.hud-skin #hotbar .hb-mouse .slot .cdov { line-height:52px; font-size:15px; z-index:2; }