html, body { margin: 0; height: 100%; overflow: hidden; background: #0e1420; font-family: system-ui, "Segoe UI", Tahoma, sans-serif; color: #e8eef7; }
#c { display: block; width: 100vw; height: 100vh; }

/* ============ HUD แนว Action/Console ============================================
   หลักการ: กลางจอโล่ง — ของสำคัญกองอยู่มุมล่าง (ซ้าย = ค่าตัวเรา · ขวา = ปุ่มสกิล)
   ไม่มีกล่องกรอบมาบังฉาก ใช้เงา/แถบทึบให้อ่านออกบนพื้นสว่างแทน
   ขนาดทุกอย่างเป็น em ของ #hud (--hud-sz) → จอใหญ่ HUD โตตาม · ห้ามใส่ px ในชั้นนี้
   --hud-accent ถูกเขียนทับตอนรันด้วยสีอาชีพที่เล่นอยู่ (70-hud.js)
   ผังว่าอะไรอยู่โซนไหน = HUD.place ใน src/68-hud-lib.js */
:root {
  --hud-ink: #eaf2ff; --hud-dim: #8ea4c3; --hud-gold: #ffd166; --hud-accent: #4ea8ff;
  --hud-good: #3ddc6a; --hud-warn: #f5c542; --hud-bad: #ef4444;
  --hud-sz: clamp(13px, .82vw, 26px);   /* จอ 1100 = 13px · 1920 = 15.7 · 2560 = 21 · 4K = 26 */
  --hud-face: linear-gradient(158deg, rgba(18,27,45,.80), rgba(7,11,20,.68));
  --hud-edge: rgba(150,195,255,.16); --hud-edge-hi: rgba(190,220,255,.40);
  --hud-shadow: 0 .4em 1.4em rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --hud-drop: drop-shadow(0 .12em .35em rgba(0,0,0,.75));
  --hud-cut: .8em;
}

#hud { position: fixed; inset: 0; padding: 1.1em 1.25em; pointer-events: none; user-select: none;
  font-size: var(--hud-sz); line-height: 1.45;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-rows: auto 1fr auto; gap: .9em;
  font-feature-settings: "tnum" 1; }
.hud-zone { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.z-tl { grid-area: 1/1; align-items: flex-start; justify-self: start; }
.z-tc { grid-area: 1/2; align-items: center; }
.z-tr { grid-area: 1/3; align-items: flex-end; justify-self: end; gap: .55em; }
/* ---------- มุมขวาบน = คอลัมน์เดียว กว้างเท่ากันหมด ไม่ซ้อน ไม่ซ้ำ ----------
   [การ์ดผู้เล่น: ป้ายบัญชี(card-top) + แผงออนไลน์(card-bot)] · [ปุ่ม I K U M] · [สถิติ+fps จางๆ]
   ชื่อผู้เล่นโผล่ที่เดียวบนป้ายบัญชี (ช่องกรอกชื่อในแผงออนไลน์ถูกถอดออกแล้ว) */
.z-tr > .card-top, .z-tr > .card-bot { width: 16em; }   /* 14em เดิมทำคำว่า "ออนไลน์" โดนตัดเป็น "ออนไล…" ตอนมี ping+ปุ่มออก */
.z-tr > .card-top { clip-path: none; border-radius: .7em .7em 0 0; border-bottom: 0; }
.z-tr > .card-bot { clip-path: none; border-radius: 0 0 .7em .7em; margin-top: -.55em; }
.z-tr > .faint { opacity: .62; font-size: .8em; padding: .2em .55em; clip-path: none; border-radius: .5em; }
.z-tr > .faint:hover { opacity: 1; }
.z-ml { grid-area: 2/1; align-items: flex-start; justify-content: center; justify-self: start; }
.z-mc { grid-area: 2/2; align-items: center; justify-content: center; }
.z-mr { grid-area: 2/3; align-items: flex-end; justify-content: center; justify-self: end; }
.z-bl { grid-area: 3/1; align-items: flex-start; justify-content: flex-end; justify-self: start; }
.z-bc { grid-area: 3/2; align-items: center; justify-content: flex-end; }
.z-br { grid-area: 3/3; align-items: flex-end; justify-content: flex-end; justify-self: end; }
.hud-off, .hud-hide { display: none !important; }

/* การ์ด (ใช้เฉพาะของที่ต้องอ่านเป็นก้อน: แผงออนไลน์ / ชิปปุ่ม / debug) */
.panel { position: relative; background: var(--hud-face); border: 1px solid var(--hud-edge);
  clip-path: polygon(var(--hud-cut) 0, 100% 0, 100% calc(100% - var(--hud-cut)), calc(100% - var(--hud-cut)) 100%, 0 100%, 0 var(--hud-cut));
  padding: .5em .8em; font-size: .95em; backdrop-filter: blur(6px); box-shadow: var(--hud-shadow); }

/* ---------- มุมล่างซ้าย = ค่าของตัวเรา (ลอย ไม่มีกรอบ มีแค่ฝ้าดำจางๆ ให้อ่านออกบนพื้นสว่าง) ---------- */
.z-bl { gap: .22em; filter: var(--hud-drop);
  padding: .8em 3.5em .5em .7em; margin: -.8em -3.5em -.5em -.7em;
  background: radial-gradient(ellipse 120% 130% at 0% 100%, rgba(3,7,14,.55), rgba(3,7,14,.28) 45%, transparent 72%); }
.z-bl > *:not(#debug):not(.mono) { background: none !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; clip-path: none !important; padding: 0 !important; }
.z-bl .hud-bar .lb { display: none; }        /* แนวนี้ไม่ต้องมีป้ายกำกับ ดูจากสี+ตัวเลขพอ */

/* แถวเลเวล/อาชีพ (วิดเจ็ตของ 71-rpg-hud) */
.plate-head { display: flex; align-items: center; gap: .45em; margin-bottom: .1em; }
.plate-foot { margin-top: .15em; font-size: .72em; color: var(--hud-dim); }
.plate-foot .spd b { font: 700 1.15em/1 ui-monospace, Consolas, monospace; color: #dbe6f5; margin-right: .15em; }
.row { display: flex; gap: .5em; align-items: center; }
.pill { background: var(--hud-accent); color: #06101e; border-radius: 999px; padding: .02em .6em; font-weight: 800;
  text-transform: uppercase; font-size: .82em; letter-spacing: .1em; min-width: 3.6em; text-align: center; }
.pill.run { background: #f59e0b; }
.pill.jump { background: #10b981; }
.pill.punch { background: #ef4444; color: #fff; }

/* แถบเลือด = แท่งเฉียงหนา ตัวเลขอยู่ในแถบ */
.hud-bar { position: relative; display: flex; align-items: center; gap: .5em; }
.hud-bar .track { position: relative; width: 13em; height: .62em; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.45));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  clip-path: polygon(.34em 0, 100% 0, calc(100% - .34em) 100%, 0 100%); }
.hud-bar .fill, .hud-bar .ghost { position: absolute; left: 0; top: 0; bottom: 0; }
.hud-bar .ghost { background: rgba(255,255,255,.45); }
.hud-bar .fill::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06) 55%, rgba(0,0,0,.32)); }
.hud-bar .num { position: absolute; right: .55em; top: 50%; transform: translateY(-50%);
  font: 700 .62em/1 ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 1px .2em rgba(0,0,0,.95); }
.hud-bar.big .track { width: 16em; height: 1.15em; }
.hud-bar.big .num { right: .6em; font-size: .78em; letter-spacing: .02em; }
.hud-bar.low .num { color: #ffd5d5; }
.hud-bar.low .track { animation: hudLow 1.05s ease-in-out infinite; }
@keyframes hudLow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 0 1px rgba(255,90,90,.55); }
  50%      { box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 .9em rgba(255,60,60,.6), 0 0 0 1px rgba(255,120,120,.95); }
}
/* แถบบาง (XP) = เส้นใต้สุดของก้อน */
.hud-bar.thin { gap: .4em; margin-top: .05em; }
.hud-bar.thin .lb { display: inline; min-width: 0; font: 700 .56em/1 system-ui, sans-serif; letter-spacing: .16em; color: var(--hud-dim); }
.hud-bar.thin .track { width: 14.4em; height: .22em; clip-path: none; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.55); }
.hud-bar.thin .num { position: static; transform: none; color: var(--hud-dim); font-size: .56em; text-shadow: none; white-space: nowrap; }

.rpg-buff, .z-bl .mono { filter: none; }

/* ---------- มุมล่างขวา = ปุ่มสกิลกลม ---------- */
.z-br { flex-direction: row; align-items: flex-end; gap: .55em; }
.slot { position: relative; width: 3.5em; height: 3.5em; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 32%, rgba(38,52,80,.92), rgba(8,12,22,.92));
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 0 .12em rgba(150,195,255,.18), 0 .3em .9em rgba(0,0,0,.55);
  padding: 0; font-size: 1em; }
/* ไอคอนกลางปุ่ม: ปุ่มของเราใช้ <u class="ic"> · ปุ่มสกิลของ 71 ไม่มีที่ใส่ไอคอน → 70-hud ยัดผ่านตัวแปร --ic */
.slot .ic, .slot::before { content: var(--ic, ''); font-style: normal; font-size: 1.45em; line-height: 1; filter: var(--hud-drop); }
.slot b { position: absolute; left: 50%; bottom: .16em; transform: translateX(-50%);
  font: 700 .56em/1.5 ui-monospace, Consolas, monospace; letter-spacing: .04em;
  background: rgba(6,10,18,.85); border-radius: .3em; padding: 0 .45em; color: #dbe6f5; }
/* ชื่อสกิลไม่โชว์บนปุ่ม (ปุ่มกลมเล็ก ตัวหนังสือล้นออกนอกวงจะโดน overflow ตัด) — ไปอยู่ใน title ตอนชี้เมาส์แทน */
.slot span { display: none; }
.slot i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(4,8,16,.72); pointer-events: none; }
.slot.ready { box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 0 .12em var(--hud-accent), 0 0 1.2em rgba(120,180,255,.45), 0 .3em .9em rgba(0,0,0,.55); }
.slot.ready b { background: var(--hud-accent); color: #06101e; }
.slot.locked { opacity: .38; }
.slot.locked .ic { font-size: 1.1em; }

/* ---------- คอมโบ (ขอบขวากลางจอ แบบเกมแอ็กชัน) ---------- */
.z-mr { gap: .3em; }
.combo { display: flex; flex-direction: column; align-items: flex-end; gap: .1em; filter: var(--hud-drop); }
.combo .combo-row { display: flex; align-items: baseline; gap: .35em; }
.combo em { font: 800 .74em/1 system-ui, sans-serif; font-style: italic; letter-spacing: .24em; color: var(--hud-dim); }
.combo u { text-decoration: none; font: 900 2.6em/.85 system-ui, sans-serif; font-style: italic; color: #fff;
  text-shadow: 0 0 .9em rgba(255,209,102,.55), 0 .1em 0 rgba(0,0,0,.5); }
.combo .tag { display: none; font: 900 .95em/1 system-ui, sans-serif; font-style: italic; color: var(--hud-gold); letter-spacing: .1em; }
.combo.crit u { color: var(--hud-gold); text-shadow: 0 0 1.2em rgba(255,140,60,.9), 0 .1em 0 rgba(0,0,0,.5); }
.combo.crit .tag { display: inline; }
.combo.cool { opacity: .4; }
.combo .combo-time { position: relative; width: 6.5em; height: .16em; background: rgba(255,255,255,.16); overflow: hidden; }
.combo .combo-time i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff8a45, var(--hud-gold)); }
.combo.cool .combo-time { opacity: 0; }
.hud-pips { display: flex; gap: .34em; filter: var(--hud-drop); }
.hud-pips i { width: .66em; height: .66em; transform: rotate(45deg); border-radius: .1em;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
.hud-pips i.on { background: linear-gradient(160deg, #fff2c9, var(--hud-gold)); box-shadow: 0 0 .7em rgba(255,209,102,.8); }

/* ---------- ชิปปุ่มควบคุม (ซ้ายบน) — พับได้ ---------- */
.help { pointer-events: auto; max-width: 24em; }
.help .help-h { display: flex; align-items: center; gap: .5em; cursor: pointer; }
.help .help-h b { font-size: .76em; letter-spacing: .2em; color: var(--hud-gold); }
.help .help-h .tip { flex: 1; font-size: .76em; color: var(--hud-dim); }
.help .help-b { margin-top: .4em; display: grid; gap: .12em; font-size: .78em; color: var(--hud-dim); }
.help .help-b .ks { display: inline-block; min-width: 8.2em; }
.help.mini { padding: .28em .7em; }
.help.mini .help-b { display: none; }
.help.mini .help-h b { color: var(--hud-dim); }
kbd { display: inline-block; background: linear-gradient(180deg, #2a3752, #161e2e); border: 1px solid #3d4a60;
  border-bottom-width: 2px; border-radius: .28em; padding: 0 .4em; margin-right: .18em;
  font: 700 .8em/1.6 ui-monospace, Consolas, monospace; color: #dbe6f5; }

/* ---------- สถิติ (ขวาบน) — จางไว้ ไม่แย่งสายตา ---------- */
.stats { display: flex; gap: .8em; align-items: center; padding: .3em .7em; opacity: .9; }
.stats > div { display: flex; align-items: baseline; gap: .28em; }
.stats i { font-style: normal; font-size: .68em; letter-spacing: .08em; color: var(--hud-dim); }
.stats b { font: 700 .95em/1 ui-monospace, Consolas, monospace; color: var(--hud-ink); }
.stats .fps { opacity: .8; }
.stats .fps b { font-size: .85em; color: var(--hud-dim); }
.stats .fps.ok b { color: var(--hud-good); }
.stats .fps.mid b { color: var(--hud-warn); }
.stats .fps.low b { color: var(--hud-bad); }

/* ---------- ทอสต์ (ซ้ายบน ใต้ชิปปุ่ม) / แบนเนอร์ (บนกลาง) ---------- */
.hud-toast { display: flex; align-items: center; gap: .55em; background: var(--hud-face); border: 1px solid var(--hud-edge);
  border-left: .2em solid var(--hud-accent); padding: .38em .85em .38em .7em; font-size: .84em; color: var(--hud-ink);
  max-width: min(46vw, 26em); backdrop-filter: blur(6px); box-shadow: var(--hud-shadow);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .5em), calc(100% - .5em) 100%, 0 100%); }
.hud-toast.good { border-left-color: var(--hud-good); }
.hud-toast.warn { border-left-color: var(--hud-gold); }
.hud-toast.bad { border-left-color: var(--hud-bad); }

.hud-banner { text-align: center; transform-origin: 50% 0; }
.hud-banner b { display: block; font: 900 2.6em/1 system-ui, sans-serif; font-style: italic; letter-spacing: .03em;
  color: #fff; text-shadow: 0 0 1.4em rgba(120,180,255,.45), 0 .12em .4em rgba(0,0,0,.75); }
.hud-banner.crit b { color: #ffe0a3; text-shadow: 0 0 1.6em rgba(255,150,60,.75), 0 .12em .4em rgba(0,0,0,.75); }
.hud-banner .sub { display: block; margin-top: .15em; font: 600 .78em/1 system-ui, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; color: var(--hud-dim); text-shadow: 0 .1em .3em #000; }
.hud-banner::after { content: ''; display: block; width: 10em; height: 1px; margin: .45em auto 0;
  background: linear-gradient(90deg, transparent, var(--hud-edge-hi), transparent); }

/* ---------- ป้ายเกาะพิกัดในโลก 3D ---------- */
.hud-markers { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; font-size: var(--hud-sz); }
.hud-marker { position: absolute; left: 0; top: 0; will-change: transform; }
.hud-marker.target { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.hud-marker.target .ring { position: relative; display: block; width: 1.9em; height: 1.9em; }
.hud-marker.target .ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 .6em rgba(0,0,0,.5); }
.hud-marker.target .ring::after { content: ''; position: absolute; inset: -.18em;
  background:
    linear-gradient(#fff, #fff) left top / .45em 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px .45em no-repeat,
    linear-gradient(#fff, #fff) right top / .45em 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px .45em no-repeat,
    linear-gradient(#fff, #fff) left bottom / .45em 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px .45em no-repeat,
    linear-gradient(#fff, #fff) right bottom / .45em 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px .45em no-repeat;
  filter: drop-shadow(0 1px .2em rgba(0,0,0,.85)); }
.hud-marker.target em { font: 700 .66em/1 ui-monospace, Consolas, monospace; font-style: normal; color: #fff;
  text-shadow: 0 1px .25em #000, 0 0 .5em rgba(0,0,0,.9); }
.hud-marker.target.weak .ring::before { border-color: rgba(255,120,120,.85); }
.hud-marker.target.weak .ring::after { filter: drop-shadow(0 1px .2em rgba(0,0,0,.85)) drop-shadow(0 0 .3em rgba(255,90,90,.9)); }

/* ---------- เอฟเฟกต์เต็มจอ ---------- */
.hud-flash { position: fixed; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; z-index: 3; }
.hud-vignette { position: fixed; inset: 0; opacity: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, var(--vig, #ff2d2d) 122%); }
.hud-hitmark { position: fixed; left: 50%; top: 50%; width: 2em; height: 2em; opacity: 0;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.hud-hitmark i { position: absolute; left: 50%; top: 50%; width: 2px; height: .55em; margin: -.25em 0 0 -1px;
  background: #fff; box-shadow: 0 0 .35em rgba(0,0,0,.9); transform-origin: 50% 50%; }
.hud-hitmark i:nth-child(1) { transform: translate(-.55em, -.55em) rotate(45deg); }
.hud-hitmark i:nth-child(2) { transform: translate(.55em, -.55em) rotate(-45deg); }
.hud-hitmark i:nth-child(3) { transform: translate(-.55em, .55em) rotate(-45deg); }
.hud-hitmark i:nth-child(4) { transform: translate(.55em, .55em) rotate(45deg); }
.hud-hitmark.crit i { background: var(--hud-gold); height: .75em; }

/* ---------- debug / ข้อความลอย / error ---------- */
#debug, .mono { display: none; margin: 0; font: .72em/1.45 ui-monospace, Consolas, monospace; color: #9fe8a3;
  background: rgba(0,0,0,.55); padding: .35em .5em; border-radius: .4em; white-space: pre; }
#debug.show { display: block; }
.mono { display: block; color: #cbd5e1; }
#floaters { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.floater { position: absolute; transform: translate(-50%, -50%); font: 700 20px system-ui, sans-serif; color: #fff; text-shadow: 0 2px 4px #000, 0 0 6px rgba(0,0,0,.6); }
.floater.crit { color: #ffd166; font-size: 26px; }
#err { position: fixed; left: 12px; bottom: 12px; right: 12px; color: #ff8080; font: 12px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; pointer-events: none; z-index: 5; }

/* ---- RPG: ป้ายเลเวล / หน้าต่างอาชีพ-สกิล (src/71-rpg-hud.js) ---- */
.rpg-lvrow { display: flex; gap: .45em; align-items: center; pointer-events: auto; cursor: pointer; }
.rpg-lv { background: var(--hud-accent); color: #06101e; font: 800 .76em/1.65 system-ui, sans-serif; border-radius: .28em;
  padding: 0 .5em; letter-spacing: .04em; }
.rpg-cls { font-weight: 700; font-size: .88em; letter-spacing: .04em; text-shadow: 0 1px .3em rgba(0,0,0,.9); }
/* ขั้น (ยศ) ของเลเวล 1–1800 — สีมาจาก G.LEVEL_TIERS ใน 02-rpg-data (ตั้งจาก JS) */
.rpg-tier { font-size: .74em; font-weight: 800; letter-spacing: .05em; text-shadow: 0 1px .35em rgba(0,0,0,.95); }
.rpg-pts { font-size: .68em; color: var(--hud-dim); }
.rpg-pts.has { color: var(--hud-gold); font-weight: 700; }
/* ดาวจุติ (ครบ 100 เลเวล = 1 ดาว · 03-progress) — ว่างไว้ตอนยังไม่มีดาวและยังจุติไม่ได้ */
.rpg-star { font-size: .72em; font-weight: 800; color: #fff3b0; letter-spacing: .04em; text-shadow: 0 0 .5em rgba(255,220,120,.55); }
.rpg-star:empty { display: none; }
.rpg-star.can { color: #06101e; background: #fde047; border-radius: .28em; padding: 0 .4em; animation: rebpulse 1.6s ease-in-out infinite; }
@keyframes rebpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(253,224,71,.6); } 50% { box-shadow: 0 0 .7em .18em rgba(253,224,71,.55); } }
.rpg-lvrow:hover .rpg-cls { color: #fff; }

.floater.xp { color: #a78bfa; font-size: 18px; }
.floater.hurt { color: #ff6b6b; }
.floater.dead { color: #ff6b6b; font-size: 24px; }
.floater.levelup { color: #ffd166; font-size: 28px; }
.floater.slam { color: #ffb457; font-size: 22px; }
.floater.heal { color: #4ade80; font-size: 20px; }
.rpg-buff { color: #86efac; font-size: .74em; letter-spacing: .2px; text-shadow: 0 1px .3em rgba(0,0,0,.9); }
.floater.orb { color: #c4b5fd; font-size: 22px; text-shadow: 0 0 12px rgba(139,92,246,.9), 0 2px 4px #000; }

/* ---------- แถบสกิลล่างจอ (71-rpg-hud) : 6 ช่อง กดด้วยเลข 1–6 ---------- */
.skillbar { display: flex; gap: .4em; align-items: flex-end; pointer-events: none; }
.skillbar .barslot { width: 3.1em; height: 3.1em; border-radius: .7em; cursor: pointer; }
.skillbar .barslot b { bottom: -.15em; }
.skillbar .barslot.empty { background: rgba(10,16,28,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(150,195,255,.12); }
.skillbar .barslot.empty::before { opacity: .35; font-size: 1.1em; }
.skillbar .barslot:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 0 .12em rgba(190,220,255,.55), 0 .3em .9em rgba(0,0,0,.55); }

/* ป้ายบอกเลเวลที่ต้องถึงบนช่องที่ยังไม่ได้เรียน */
.skillbar .barslot .reqlv { position: absolute; top: .22em; left: 0; right: 0; text-align: center; text-decoration: none;
  font: 700 .52em/1 ui-monospace, Consolas, monospace; color: #ffd166; text-shadow: 0 .1em .25em rgba(0,0,0,.9); }

/* หน้าต่างเลือกสกิลใส่ช่อง */
.pickwrap { position: fixed; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; background: rgba(6,10,18,.55); }
.pickbox { background: #111a2b; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px; width: min(360px, 88vw); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.pickbox { width: min(460px, 92vw); }
/* หน้าสกิล (ปุ่ม J) — ยาวกว่าหน้าต่างเลือกช่อง เลยให้เลื่อนได้ */
.pickbox.skpage { width: min(620px, 94vw); max-height: 88vh; overflow: auto; }
.sksec { font: 700 12px system-ui, sans-serif; color: #93a4bd; letter-spacing: .04em; margin: 14px 0 6px; }
.sknote { font: 500 12px system-ui, sans-serif; color: #7f93b0; margin: 10px 0 2px; }
.pn-row.dimrow { opacity: .62; }
.skslots { display: flex; gap: 4px; margin-top: 6px; }
.skslot { width: 22px; height: 22px; border-radius: 6px; background: #0b1220; color: #8ea4c3;
  border: 1px solid rgba(255,255,255,.12); font: 700 11px ui-monospace, Consolas, monospace; cursor: pointer; }
.skslot.on { background: #a78bfa; color: #14121f; border-color: #a78bfa; }
.skslot.hint { border-color: rgba(167,139,250,.6); color: #cbb6ff; }
.pickhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pickhead b { font-size: 15px; }
.pickhead .gold { color: #ffd166; font-size: 12px; }
.pickhead .dim { color: #93a4bd; font-size: 12px; }
.picklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pickitem { display: flex; align-items: center; gap: 10px; background: #0e1624; border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 9px 10px; color: #e8eef7; font: 500 13px system-ui, sans-serif; text-align: left; }
.pickitem.on { border-color: rgba(167,139,250,.7); box-shadow: inset 0 0 0 1px rgba(167,139,250,.25); }
.pickitem .ic { text-decoration: none; font-size: 20px; width: 30px; text-align: center; }
.pickitem .mid { flex: 1; min-width: 0; }
.pickitem .mid b { display: block; font-size: 13px; }
.pickitem .mid span { display: block; font-size: 12px; color: #93a4bd; }
.pickitem.locked .mid span { color: #c2a35a; }
.pickacts { display: flex; flex-direction: column; gap: 5px; }
.pickacts button { background: #a78bfa; color: #14121f; border: 0; border-radius: 8px; padding: 6px 10px;
  font: 700 12px system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.pickacts button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: #cbd5e1; font-weight: 500; }
.pickacts button:disabled { opacity: .4; cursor: default; }
.pickfoot { display: flex; gap: 8px; justify-content: flex-end; }
.pickfoot button { background: #2a3a55; color: #e8eef7; border: 0; border-radius: 8px; padding: 8px 14px;
  font: 600 13px system-ui, sans-serif; cursor: pointer; }
.pickfoot button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.15); color: #cbd5e1; }
.pickbox .ghost { width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.15); color: #cbd5e1;
  border-radius: 10px; padding: 8px; cursor: pointer; font: 500 13px system-ui, sans-serif; }
.pickbox .dim { color: #93a4bd; font-size: 13px; }
/* ตัวเลขคูลดาวน์กลางปุ่มสกิล (71-rpg-hud) — ทับบนไอคอนตอนสกิลยังไม่พร้อม */
.slot .cdnum { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-60%);
  text-align: center; font: 700 .95em/1 ui-monospace, Consolas, monospace; font-style: normal;
  color: #fff; text-shadow: 0 .1em .25em rgba(0,0,0,.95); pointer-events: none; }

.rpg-modal { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center;
  background: rgba(6,10,18,.78); backdrop-filter: blur(3px); padding: 4vh 3vw; overflow: auto; }
.rpg-modal.show { display: flex; }
.rpg-box { background: #121a28; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  padding: 20px 22px; width: min(560px, 96vw); max-height: 92vh; overflow: auto; }
.rpg-box.wide { width: min(1000px, 96vw); }
.rpg-box h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: .04em; }
.rpg-box h3 { margin: 18px 0 8px; font-size: 15px; color: #ffd166; }
.rpg-box p { margin: 0 0 14px; font-size: 13px; color: #a9b8cd; line-height: 1.6; }
.rpg-box button { font: 600 13px system-ui, sans-serif; color: #08101c; background: #ffd166; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.rpg-box button:hover { filter: brightness(1.08); }
.rpg-box button:disabled { background: #2a3549; color: #8b9ab1; opacity: .6; cursor: default; filter: none; }
.rpg-box button.ghost { background: transparent; color: #c9d6e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

.rpg-classes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.rpg-card { --c: #888; background: #0e1624; border: 1px solid rgba(255,255,255,.08); border-top: 3px solid var(--c);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.rpg-card.on { box-shadow: 0 0 0 2px var(--c) inset; }
.rpg-card b { font-size: 17px; color: var(--c); }
.rpg-card em { font-style: normal; font-size: 12px; color: #93a4bd; }
.rpg-card p { margin: 6px 0 4px; font-size: 12px; min-height: 3.2em; }
.rpg-card button { margin-top: auto; background: var(--c); }
.rpg-cardbars { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.rpg-cardbar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #a9b8cd; }
.rpg-cardbar span { min-width: 62px; }
.rpg-cardbar i { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.rpg-cardbar u { display: block; height: 100%; background: var(--c); }

.rpg-head { --c: #888; border-left: 4px solid var(--c); padding-left: 12px; margin-bottom: 14px; }
.rpg-head b { display: block; font-size: 22px; color: var(--c); }
.rpg-head em { font-style: normal; font-size: 12px; color: #a9b8cd; }
.rpg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 4px 16px; }
.rpg-stat { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.rpg-stat span { color: #a9b8cd; }
.rpg-skills { display: flex; flex-direction: column; gap: 6px; }
.rpg-skill-row { display: flex; align-items: center; gap: 10px; background: #0e1624; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 7px 10px; }
.rpg-skill-row .ic { width: 30px; height: 30px; display: grid; place-items: center; font-size: 17px; background: #1a2436; border-radius: 8px; }
.rpg-skill-row .mid { flex: 1; min-width: 0; }
.rpg-skill-row .mid b { display: block; font-size: 13px; }
.rpg-skill-row .mid span { font-size: 12px; color: #93a4bd; }
.rpg-skill-row.locked { opacity: .45; }
.rpg-skill-row.maxed { box-shadow: inset 0 0 0 1px rgba(61,220,106,.35); }
.rpg-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* กล่องจุติในหน้าตัวละคร (71-rpg-hud drawRebirth) */
.rpg-reb { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 0 4px;
  background: linear-gradient(180deg, rgba(253,224,71,.10), rgba(253,224,71,.02)); border: 1px solid rgba(253,224,71,.30);
  border-radius: 12px; padding: 10px 12px; }
.rpg-reb b { font-size: 15px; color: #fde047; letter-spacing: .03em; }
.rpg-reb .dim { font-size: 12px; color: #a9b8cd; line-height: 1.5; }
.rpg-reb button { margin-top: 6px; }
.rpg-reb button.danger { background: #fde047; color: #1a1400; font-weight: 800; }

/* ---- ระบบออนไลน์ (src/86-88-net*.js) ------------------------------------- */
.hud-marker.ntag { text-align: center; white-space: nowrap; }
.hud-marker.ntag b { display: block; font: 600 .72em system-ui, sans-serif; color: #fff; text-shadow: 0 2px 4px #000, 0 0 6px rgba(0,0,0,.7); }
.hud-marker.ntag .nhp { display: block; width: 3.4em; height: .25em; margin: .2em auto 0; background: rgba(0,0,0,.55); border-radius: .2em; overflow: hidden; }
.hud-marker.ntag .nhp > i { display: block; height: 100%; width: 100%; background: var(--hud-good); }

.panel.netpanel { pointer-events: auto; width: 16em; font-size: .82em; padding: .5em .7em; }
.netpanel .nrow { display: flex; align-items: center; gap: .45em; }
.netpanel .nrow + .nlist:not(:empty) { margin-top: .35em; }
.netpanel .nrow b { font-size: .85em; letter-spacing: .14em; color: var(--hud-gold); }
.netpanel .nstate { flex: 1; color: var(--hud-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netpanel .nstate.live { color: var(--hud-good); }
.netpanel .nstate.retry, .netpanel .nstate.error { color: var(--hud-bad); }
.netpanel .nping { font: .8em ui-monospace, Consolas, monospace; color: #7dd3fc; }
.netpanel .nname { flex: 1; min-width: 0; background: #131a26; border: 1px solid #2b3646; border-radius: .35em; color: #e8eef7; padding: .15em .4em; font: 1em system-ui, sans-serif; }
.netpanel .nbtn { background: var(--hud-accent); border: 0; border-radius: .35em; color: #06101e; padding: .25em .7em; font: 700 1em system-ui, sans-serif; cursor: pointer; }
.netpanel .nbtn:hover { filter: brightness(1.12); }
.netpanel .nrowp { display: flex; align-items: center; gap: .4em; padding: .12em 0; border-top: 1px solid rgba(255,255,255,.06); }
.netpanel .nrowp .nn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netpanel .nrowp.me .nn { color: var(--hud-gold); font-weight: 600; }
.netpanel .nrowp.out { opacity: .45; }
.netpanel .nrowp .nk { font: .85em ui-monospace, Consolas, monospace; color: var(--hud-dim); }
.netpanel .nbar { flex: 0 0 3em; height: .3em; background: rgba(0,0,0,.5); border-radius: .2em; overflow: hidden; }
.netpanel .nbar > i { display: block; height: 100%; width: 100%; background: var(--hud-good); }
.netpanel .nchat { margin-top: .3em; color: #cbd5e1; font-size: .85em; line-height: 1.5; max-height: 5.5em; overflow: hidden; }

/* ---- แถบสถิติเน็ต/แรม (src/84-netstat.js) — กด N เปิดปิด, คลิกหัวแถบ = พับ ---- */
.panel.netstat { pointer-events: auto; width: 16em; font-size: .78em; padding: .4em .6em; line-height: 1.5; }
.netstat .ns-head { display: flex; align-items: center; gap: .4em; cursor: pointer; user-select: none; }
.netstat .ns-head b { font-size: .9em; letter-spacing: .1em; color: var(--hud-gold); flex: 1; }
.netstat .ns-head .ns-fold { font-style: normal; color: var(--hud-dim); transition: transform .18s; }
.netstat.mini .ns-head .ns-fold { transform: rotate(-90deg); }
.netstat.mini .ns-body { display: none; }
.netstat .ns-ping { font: .9em ui-monospace, Consolas, monospace; }
.netstat .ns-ping.ok { color: var(--hud-good); }
.netstat .ns-ping.mid { color: var(--hud-gold); }
.netstat .ns-ping.bad { color: var(--hud-bad); }
.netstat .ns-ping.off { color: var(--hud-dim); }
.netstat .ns-graph { display: block; width: 100%; height: 2.6em; margin: .25em 0; border-radius: .3em; background: rgba(0,0,0,.35); }
.netstat .ns-row { display: flex; align-items: baseline; gap: .4em; font: .95em ui-monospace, Consolas, monospace; }
.netstat .ns-row u { text-decoration: none; font-size: 1.1em; }
.netstat .ns-row.down u { color: #3ddc6a; }
.netstat .ns-row.up u { color: #7dd3fc; }
.netstat .ns-row .ns-rate { flex: 1; color: var(--hud-ink); }
.netstat .ns-row .ns-tot { font-style: normal; color: var(--hud-dim); }
.netstat .ns-ram { margin-top: .2em; color: var(--hud-dim); }
.netstat .ns-ram b { color: var(--hud-ink); font-weight: 700; }
.netstat .ns-line { color: var(--hud-dim); font-size: .92em; line-height: 1.35; }

/* ---- หน้าต่างรวม: กระเป๋า / สกิล / สเตตัส / แผนที่ (src/73-panels.js) ------- */
/* แถวปุ่มเมนูล่างจอ (วิดเจ็ตของ G.HUD โซน bc) */
.pn-menu { display: flex; gap: .4em; pointer-events: auto; }
.pn-menu button { position: relative; width: 2.5em; height: 2.5em; border-radius: .6em; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05em;
  background: var(--hud-face); border: 1px solid var(--hud-edge); box-shadow: var(--hud-shadow); backdrop-filter: blur(6px);
  color: var(--hud-ink); font: 1em system-ui, sans-serif; padding: 0; }
.pn-menu button:hover { border-color: var(--hud-accent); }
.pn-menu u { text-decoration: none; font-size: 1.05em; line-height: 1; filter: var(--hud-drop); }
.pn-menu kbd { margin: 0; padding: 0 .25em; font-size: .5em; line-height: 1.5; border-bottom-width: 1px; }
.pn-menu i { position: absolute; right: .18em; top: .18em; width: .42em; height: .42em; border-radius: 50%; background: transparent; }
.pn-menu i.on { background: var(--hud-gold); box-shadow: 0 0 .5em rgba(255,209,102,.9); }
.pn-menu i.on.bad { background: var(--hud-bad); box-shadow: 0 0 .5em rgba(239,68,68,.9); }

.pn-wrap { position: fixed; inset: 0; z-index: 11; display: none; align-items: center; justify-content: center;
  background: rgba(5,9,16,.72); backdrop-filter: blur(4px); padding: 3vh 3vw;
  font-size: clamp(13px, .78vw, 24px); }
.pn-wrap.show { display: flex; }
.pn-box { display: flex; flex-direction: column; width: min(56em, 96vw); max-height: 92vh; overflow: hidden;
  background: linear-gradient(160deg, #131c2c, #0b111c); border: 1px solid rgba(150,195,255,.18); border-radius: .9em;
  box-shadow: 0 1.5em 4em rgba(0,0,0,.6); }
.pn-tabs { display: flex; gap: .25em; padding: .5em .6em 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.pn-tab { display: flex; align-items: center; gap: .4em; cursor: pointer; color: var(--hud-dim);
  background: transparent; border: 0; border-bottom: 2px solid transparent; padding: .5em .9em; font: 600 .95em system-ui, sans-serif; }
.pn-tab u { text-decoration: none; font-size: 1.1em; }
.pn-tab kbd { font-size: .62em; opacity: .7; }
.pn-tab:hover { color: var(--hud-ink); }
.pn-tab.on { color: #fff; border-bottom-color: var(--hud-accent); background: rgba(120,180,255,.08); }
.pn-x { margin-left: auto; background: transparent; border: 0; color: var(--hud-dim); font-size: 1.1em; cursor: pointer; padding: 0 .5em; }
.pn-x:hover { color: #fff; }
.pn-body { display: flex; gap: 1em; padding: 1em 1.1em 1.2em; overflow: auto; }
.pn-col { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.pn-col.grow { flex: 1; }
.pn-body h3 { margin: 0; font-size: 1em; letter-spacing: .04em; color: var(--hud-ink); }
.pn-head2 { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; }
.pn-body .dim { color: var(--hud-dim); font-size: .8em; }
.pn-body .gold { color: var(--hud-gold); font-size: .8em; font-weight: 700; }
.pn-body .good { color: var(--hud-good); font-size: .85em; }
.pn-body .tip { margin: .3em 0 0; color: #7f93b0; font-size: .74em; line-height: 1.5; }
.pn-body p { margin: .35em 0 0; font-size: .82em; color: #a9b8cd; line-height: 1.55; }
.pn-body button { background: var(--hud-accent); color: #06101e; border: 0; border-radius: .4em; padding: .35em .9em;
  font: 700 .82em system-ui, sans-serif; cursor: pointer; }
.pn-body button:hover { filter: brightness(1.1); }
.pn-body button:disabled { background: #2a3549; color: #8b9ab1; opacity: .55; cursor: default; filter: none; }
.pn-body button.ghost { background: transparent; color: #c9d6e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pn-foot { display: flex; gap: .5em; margin-top: .5em; }

/* ของที่มี "ตัวจริง" (ใบ 0.30): เลเวลของมุมล่างซ้ายของช่อง + ลูกศรเทียบค่ากับของที่ใส่อยู่ */
.pn-slot i.lv { position: absolute; left: .2em; bottom: .12em; font-style: normal; font-size: .62em;
  color: #cbd5e1; opacity: .85; text-shadow: 0 1px 2px #000; }
.pn-statlist .up, .pn-detail .up { color: #4ade80; }
.pn-statlist .down, .pn-detail .down { color: #f87171; }

/* คุยกับชาวเมือง (ใบ 0.50) — กล่องบทพูดล่างจอ + คำใบ้เหนือแถบสกิล */
.npc-talk { position: fixed; left: 50%; bottom: 15vh; transform: translateX(-50%) translateY(12px);
  width: min(680px, 92vw); padding: 14px 16px 12px; border-radius: 14px; z-index: 60;
  background: linear-gradient(180deg, rgba(12,18,30,.96), rgba(8,12,20,.96));
  box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(150,195,255,.22);
  color: #eaf2ff; font: 400 15px/1.55 system-ui, "Segoe UI", sans-serif;
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.npc-talk.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.npc-talk b { display: block; color: #9ad4ff; font-size: 15.5px; margin-bottom: 4px; }
.npc-talk p { margin: 0 0 10px; }
.npc-btns { display: flex; gap: 8px; }
.npc-btns button { background: rgba(120,180,255,.16); color: #eaf2ff; border: 0; border-radius: 9px;
  padding: 7px 14px; font: 600 13.5px system-ui; cursor: pointer; }
.npc-btns button.go { background: linear-gradient(180deg,#9ad4ff,#4ea8ff); color: #08121f; }
.npc-btns button.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.npc-hint { position: fixed; left: 50%; bottom: 26vh; transform: translateX(-50%); z-index: 55;
  padding: 6px 13px; border-radius: 999px; background: rgba(10,16,26,.78); color: #dbe8f8;
  font: 600 13px system-ui; box-shadow: inset 0 0 0 1px rgba(150,195,255,.2);
  opacity: 0; pointer-events: none; transition: opacity .15s; }
.npc-hint.show { opacity: 1; }

/* แถบตัวกรองเก็บอัตโนมัติเหนือกระเป๋า (ใบ 0.34) */
.pn-pick { display: flex; flex-wrap: wrap; gap: .35em; align-items: center; margin: .1em 0 .5em; }
.pn-pick button { font-size: .78em; padding: .25em .6em; }
.pn-pick span.dim { font-size: .78em; margin-left: .3em; }

/* ของสวมใส่ที่ยังใส่ไม่ได้ (ใบ 0.32) — จางลง + กุญแจมุมขวาบน ให้รู้ตั้งแต่ยังไม่กด */
.pn-slot.locked u { opacity: .38; filter: grayscale(1); }
.pn-slot.locked { border-style: dashed; }
.pn-slot i.lock { position: absolute; right: .12em; top: .1em; font-style: normal; font-size: .6em; opacity: .9; }
.pn-body button[disabled] { opacity: .45; cursor: not-allowed; }

/* หน้าต่างยืนยันก่อนลงแต้มสเตตัส (ใบ 0.20 — ลงแล้วคืนไม่ได้ จึงต้องถามทุกครั้ง) */
.pn-ask { position: fixed; inset: 0; z-index: 13; display: none; align-items: center; justify-content: center;
  background: rgba(4,8,14,.62); backdrop-filter: blur(2px); }
.pn-ask.show { display: flex; }
.pn-ask-box { width: min(26em, 90vw); padding: 1.1em 1.2em; border-radius: .8em; text-align: left;
  background: linear-gradient(160deg, #162134, #0c1420); border: 1px solid rgba(150,195,255,.22);
  box-shadow: 0 1.2em 3em rgba(0,0,0,.6); }
.pn-ask-box b { display: block; font-size: 1.05em; color: #eaf2ff; }
.pn-ask-box p { margin: .45em 0 0; font-size: .84em; color: #a9b8cd; line-height: 1.55; }
.pn-ask-box p.warn { color: #ffd166; }
.pn-ask-btns { display: flex; gap: .5em; margin-top: 1em; }
.pn-ask-btns button { background: var(--hud-accent); color: #06101e; border: 0; border-radius: .4em; padding: .45em 1em;
  font: 700 .85em system-ui, sans-serif; cursor: pointer; }
.pn-ask-btns button.ghost { background: transparent; color: #c9d6e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ช่องของ (กระเป๋า + ของที่สวม) */
.pn-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4em; }
.pn-gear { display: flex; gap: .4em; }
.pn-slot { --c: #64748b; position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #0e1624; border: 1px solid rgba(255,255,255,.07); border-radius: .5em; cursor: pointer; }
.pn-slot u { text-decoration: none; font-size: 1.5em; line-height: 1; }
.pn-slot u.ghost { opacity: .3; }
.pn-slot b { position: absolute; right: .2em; bottom: .1em; font: 700 .62em ui-monospace, Consolas, monospace; color: #fff; text-shadow: 0 1px 2px #000; }
.pn-slot.has { border-color: var(--c); box-shadow: inset 0 0 1.4em -.5em var(--c); }
.pn-slot:hover { border-color: var(--hud-accent); }
.pn-slot.on { box-shadow: 0 0 0 2px var(--hud-accent) inset; }
.pn-slot.gear { width: 3.4em; flex-direction: column; }
.pn-slot.gear .lb { position: absolute; left: 0; right: 0; bottom: -1.25em; text-align: center; font-size: .6em; color: var(--hud-dim); }
.pn-gear { margin-bottom: 1.4em; }
.pn-detail { display: flex; flex-direction: column; gap: .15em; width: 15em; min-height: 9em;
  background: #0c1320; border: 1px solid rgba(255,255,255,.07); border-radius: .6em; padding: .7em .8em; }
.pn-detail b { font-size: 1em; }
.pn-detail em { font-style: normal; font-size: .74em; color: var(--hud-dim); }
.pn-statlist { margin-top: .3em; display: grid; gap: .1em; font-size: .8em; color: #86efac; }

/* รายการสกิล / สเตตัส */
.pn-list { display: flex; flex-direction: column; gap: .35em; }
.pn-row { display: flex; align-items: center; gap: .6em; background: #0e1624; border: 1px solid rgba(255,255,255,.07);
  border-radius: .5em; padding: .45em .6em; }
.pn-row .ic { width: 1.9em; height: 1.9em; display: grid; place-items: center; font-size: 1em; background: #1a2436; border-radius: .4em; }
.pn-row .mid { flex: 1; min-width: 0; }
.pn-row .mid b { display: block; font-size: .85em; }
.pn-row .mid span { font-size: .74em; color: #93a4bd; }
.pn-row.locked { opacity: .45; }
.pn-row.maxed { box-shadow: inset 0 0 0 1px rgba(61,220,106,.35); }
.pn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: 0 1em; }
.pn-stat { display: flex; justify-content: space-between; gap: .6em; font-size: .82em; padding: .22em 0;
  border-bottom: 1px dashed rgba(255,255,255,.07); }
.pn-stat span { color: #a9b8cd; }

/* แผนที่ */
.pn-map { display: block; width: 100%; max-width: 100%; min-width: 0; height: min(48vh, 21em);
  border-radius: .6em; border: 1px solid rgba(255,255,255,.08); background: #0d1420; }
.pn-legend { display: flex; gap: 1em; flex-wrap: wrap; font-size: .74em; color: var(--hud-dim); }
.pn-legend i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin-right: .35em; vertical-align: middle; }

.floater.loot { color: #ffd166; font-size: 18px; }

/* ---- แจ้งเตือนอัปเดต (src/76-update.js) — การ์ดเล็กบนกลางจอ ------------------ */
.upd-card { position: fixed; left: 50%; top: 1em; transform: translate(-50%, -160%); z-index: 13;
  display: flex; align-items: center; gap: .6em; font-size: clamp(13px, .78vw, 20px);
  background: linear-gradient(160deg, rgba(18,27,45,.95), rgba(7,11,20,.92)); border: 1px solid rgba(150,195,255,.25);
  border-radius: .6em; padding: .5em .8em; box-shadow: 0 .6em 2em rgba(0,0,0,.55); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s; }
.upd-card.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.upd-card b { color: var(--hud-gold); font-size: .9em; letter-spacing: .04em; }
.upd-card .txt { color: var(--hud-dim); font-size: .82em; }
.upd-card button { background: var(--hud-accent); color: #06101e; border: 0; border-radius: .4em;
  padding: .3em .8em; font: 700 .8em system-ui, sans-serif; cursor: pointer; }
.upd-card button:hover { filter: brightness(1.1); }
.upd-card button.ghost { background: transparent; color: #c9d6e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---- หน้าจอเข้าเกม / บัญชีผู้เล่น (src/74-entry.js + 07-account.js) ---------- */
.acct { display: flex; align-items: center; gap: .4em; pointer-events: auto; cursor: pointer; font-size: .82em; padding: .4em .7em; }
.acct .tag { margin-left: auto; }        /* ดันสถานะไปชิดขวา = อ่านเป็นแถวเดียวกับแผงออนไลน์ข้างล่าง */
.acct u { text-decoration: none; font-size: 1.1em; }
.acct .nm { font-weight: 700; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .tag { font-style: normal; font-size: .8em; color: var(--hud-dim); }
.acct.guest .tag { color: var(--hud-warn); }
.acct.admin .tag { color: var(--hud-gold); font-weight: 700; }
.acct:hover { border-color: var(--hud-accent); }

.ent-wrap { position: fixed; inset: 0; z-index: 12; display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(10,18,32,.86), rgba(4,7,13,.95));
  backdrop-filter: blur(6px); padding: 4vh 4vw; font-size: clamp(13px, .78vw, 24px); }
.ent-wrap.show { display: flex; }
.ent-box { width: min(26em, 94vw); background: linear-gradient(160deg, #141d2e, #0a1019);
  border: 1px solid rgba(150,195,255,.18); border-radius: 1em; padding: 1.6em 1.6em 1.4em;
  box-shadow: 0 1.5em 4em rgba(0,0,0,.65); }
.ent-box.busy { opacity: .6; pointer-events: none; }
.ent-box h1 { margin: 0 0 .2em; font-size: 1.5em; letter-spacing: .06em; }
.ent-box p { margin: 0 0 1.1em; color: var(--hud-dim); font-size: .82em; line-height: 1.6; }
.ent-box p.tip { margin: .9em 0 0; font-size: .74em; color: #7f93b0; }
.ent-f { display: block; margin-bottom: .7em; }
.ent-f span { display: block; font-size: .74em; color: var(--hud-dim); margin-bottom: .25em; letter-spacing: .06em; }
.ent-f input { width: 100%; background: #0d1524; border: 1px solid #2b3646; border-radius: .5em; color: var(--hud-ink);
  padding: .55em .7em; font: 1em system-ui, sans-serif; }
.ent-f input:focus { outline: 2px solid var(--hud-accent); outline-offset: -1px; }
.ent-box button { width: 100%; background: var(--hud-accent); color: #06101e; border: 0; border-radius: .5em;
  padding: .6em 1em; font: 700 .95em system-ui, sans-serif; cursor: pointer; margin-top: .3em; }
.ent-box button:hover { filter: brightness(1.1); }
.ent-box button.ghost { background: transparent; color: #c9d6e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-weight: 600; }
.ent-row { display: flex; gap: .5em; margin-top: .5em; }
.ent-msg { display: none; margin-top: .7em; padding: .5em .7em; border-radius: .5em; font-size: .8em; }
.ent-msg.show { display: block; }
.ent-msg.ok { background: rgba(61,220,106,.12); color: #a7f3c0; }
.ent-msg.bad { background: rgba(239,68,68,.15); color: #ffb4b4; }
.ent-info { display: flex; flex-direction: column; gap: .2em; margin-bottom: 1em; }
.ent-line { display: flex; justify-content: space-between; gap: .8em; font-size: .84em; padding: .25em 0;
  border-bottom: 1px dashed rgba(255,255,255,.08); }
.ent-line span { color: var(--hud-dim); }