/* เคอร์เซอร์เมาส์: หัวลูกศรคริสตัลฟ้าขอบทอง แบบนิ่ง แบบเดียวทั้งเกม (ผู้ใช้เลือก 2026-09-28) — src/ui/CursorAnim.js ตั้ง image-set (HiDPI) ทับค่านี้
   !important ทับ cursor ที่ Phaser/Bridge3D ตั้งแบบ inline (มือ/ดาบโจมตีเดิม) — ช่องพิมพ์ข้อความยังเป็นเคอร์เซอร์พิมพ์ */
:root {
  --cur-anim: url('src/assets/ui/cursors/cursor.png') 2 2, auto;
  --cur-arrow: var(--cur-anim);
  --cur-hand: var(--cur-anim);
}
*, *::before, *::after { cursor: var(--cur-anim) !important; }
:is(input:not([type]), input[type="text"], input[type="number"], input[type="search"], input[type="password"], textarea, [contenteditable="true"]):not(:disabled) { cursor: text !important; }
html, body, #game-container canvas { cursor: var(--cur-arrow); }
button:not(:disabled), a[href], select, summary, label:has(input[type="checkbox"]), label:has(input[type="radio"]) { cursor: var(--cur-hand); }
/* ไม่มีกรอบโฟกัสสี่เหลี่ยมบนปุ่ม/แผงของเกม (ผู้ใช้ขอ 2026-09-28) — ช่องพิมพ์ใช้สีขอบของตัวเองแทน */
:is(button, [tabindex], canvas, summary, a):is(:focus, :focus-visible) { outline: none; }
/* A visible press receipt across HUD, menus, dialogs, and dynamically rendered buttons. */
button.button-pressed:not(:disabled) {
  animation: button-press-receipt 0.48s ease-out;
}
@keyframes button-press-receipt {
  0%, 38% { outline: 2px solid #ffe082; outline-offset: 2px; filter: brightness(1.42) drop-shadow(0 0 6px rgba(255, 214, 99, .8)); }
  100% { outline: 2px solid transparent; outline-offset: 2px; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  button.button-pressed:not(:disabled) { animation: none; outline: 2px solid #ffe082; outline-offset: 2px; filter: brightness(1.25); }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #10151a;
  color: #e8e8e8;
  font-family: var(--game-font);
}

:root {
  /* UI (DOM) ใช้ Prompt อ่านง่ายทั้งไทย/อังกฤษ — ข้อความบน canvas ยังใช้ Roboto Condensed (MainScene GAME_FONT) */
  --game-font: "Prompt", "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
}

/* ปุ่ม/ช่องกรอกไม่สืบทอดฟอนต์จาก body โดย default */
button, input, select, textarea {
  font-family: inherit;
}

#game-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* In-game DEV map editor */
body.map-editing #hud, body.map-editing #staff-dock { display: none; }
#map-editor-overlay { position: fixed; inset: 0; z-index: 11; cursor: crosshair; touch-action: none; }
#map-editor-panel { position: fixed; z-index: 12; top: 8px; right: 8px; bottom: 8px; width: min(390px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #b89657; border-radius: 10px; background: rgba(23, 31, 39, .97); box-shadow: 0 8px 30px #0009; color: #f1e9d7; font: 13px var(--game-font); }
#map-editor-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
#map-editor-panel header div { display: flex; gap: 5px; flex-wrap: wrap; }
#map-editor-panel button { border: 1px solid #8e7955; border-radius: 5px; background: #324251; color: #fff1d2; padding: 5px 8px; }
#map-editor-panel button.active { border-color: #ffe082; background: #68532c; }
#map-editor-panel button:disabled { opacity: .45; cursor: default; }
#map-editor-panel .me-save { background: #6c542d; border-color: #d1ad5c; }
#map-editor-panel.collapsed { width: auto; min-width: 78px; bottom: auto; }
#map-editor-panel.collapsed .me-title, #map-editor-panel.collapsed .me-panel-body, #map-editor-panel.collapsed header button:not(.me-hide) { display: none; }
#map-editor-panel .me-panel-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
#map-editor-panel .me-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
#map-editor-panel .me-tabs button { padding: 5px 2px; font-size: 10px; line-height: 1.2; min-height: 34px; }
#map-editor-panel .me-hint { margin: 0; color: #b8c7cf; font-size: 11px; }
#map-editor-panel .me-status { min-height: 18px; color: #ffe082; }
#map-editor-panel .me-options { display: flex; gap: 12px; }
#map-editor-panel .me-options label { display: flex; align-items: center; gap: 3px; }
#map-editor-panel .me-content { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1; overflow: auto; }
#map-editor-panel .me-content p { margin: 0; color: #b8c7cf; }
#map-editor-panel .me-field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#map-editor-panel input[type='number'] { width: 96px; }
#map-editor-panel input[type='number'], #map-editor-panel input[type='search'], #map-editor-panel input[type='password'] { border: 1px solid #71818c; border-radius: 4px; padding: 4px 6px; background: #15212b; color: #fff; }
#map-editor-panel input[type='search'] { width: 100%; }
#map-editor-panel .me-palette { flex: 1; min-height: 80px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 5px; }
#map-editor-panel .me-asset { display: flex; align-items: center; gap: 5px; min-width: 0; text-align: left; font-size: 11px; }
#map-editor-panel .me-asset.active { border-color: #ffe082; background: #68532c; }
#map-editor-panel .me-asset img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; flex: none; }
#map-editor-panel .me-asset span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#map-editor-panel .me-marker-list, #map-editor-panel .me-sheets { display: flex; flex-wrap: wrap; gap: 4px; max-height: 42%; overflow: auto; }
#map-editor-panel .me-marker-list button, #map-editor-panel .me-sheets button { text-align: left; font-size: 11px; }
#map-editor-panel .me-file { display: block; width: 100%; font-size: 11px; }
#map-editor-panel .me-sheet-canvas { display: block; width: min(100%, 320px); height: auto; align-self: center; image-rendering: pixelated; border: 1px solid #a99366; cursor: crosshair; }
#map-editor-panel .me-admin { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid #54616b; }

/* Hide scrollbars throughout game panels while preserving wheel, touch, and drag scrolling. */
* { scrollbar-width: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
body.drag-scrolling, body.drag-scrolling * { user-select: none !important; cursor: grabbing !important; }

/* ---------- HUD overlay ---------- */
#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none; /* คลิกทะลุไปโดน canvas ได้ ยกเว้นตัว panel ที่กำหนด pointer-events เอง */
}
#hud > * { pointer-events: auto; }
.hidden { display: none !important; }

.hud-panel {
  background: rgba(28, 37, 48, 0.88);
  border: 1px solid #33404f;
  border-radius: 10px;
  padding: 8px 10px;
}

/* มุมซ้ายบน: การ์ดตัวละคร */
/* การ์ดตัวละครซ้ายบน (ตาม ref): กรอบน้ำเงินเข้มขอบทอง */
/* ===== การ์ดตัวละครซ้ายบน (ตาม ref ผู้เล่น 2026-09-24: กรมท่า+ขอบทองคู่, มุมดาว, กรอบรูปคริสตัล) ===== */
#hud-char {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 392px;
  padding: 10px 14px 9px 12px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 18% 30%, rgba(70, 110, 200, 0.22), transparent 45%),
    linear-gradient(180deg, rgba(22, 36, 78, 0.97), rgba(10, 17, 40, 0.97));
  border: 2px solid #c9a24a;
  box-shadow: 0 0 0 1px #3a2a0c, inset 0 0 0 2px #0b1430, inset 0 0 0 3px rgba(201, 162, 74, 0.55), 0 5px 16px rgba(0, 0, 0, 0.5);
  color: #fff;
  transform-origin: left top;
}
/* มุมดาวทอง (ภาพ PixelLab src/assets/ui/cc_corner.png) */
.cc-orn {
  position: absolute; width: 24px; height: 24px; z-index: 2; pointer-events: none;
  background: url('src/assets/ui/cc_corner.png') center / contain no-repeat;
  image-rendering: pixelated;
}
.cc-orn-tl { left: -12px; top: -12px; }
.cc-orn-tr { right: -12px; top: -12px; }
.cc-orn-bl { left: -12px; bottom: -12px; }
.cc-orn-br { right: -12px; bottom: -12px; }
.cc-top { display: flex; gap: 10px; }
.cc-portrait-wrap { position: relative; flex-shrink: 0; width: 100px; height: 108px; }
.cc-portrait {
  position: absolute;
  inset: 9px 9px 8px;
  border-radius: 50%; /* วงรีอยู่ในกรอบทอง ไม่โผล่มุม */
  /* ท้องฟ้ากลางคืน + วงเวทใต้เท้า */
  background:
    radial-gradient(ellipse 60% 14% at 50% 86%, rgba(90, 170, 255, 0.75), rgba(40, 90, 200, 0.25) 60%, transparent 72%),
    radial-gradient(circle at 50% 35%, #2f4f9a 0%, #16275a 55%, #0a1330 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cc-portrait .jb-portrait { width: 92px; height: 92px; image-rendering: pixelated; object-fit: contain; }
.cc-portrait .jb-portrait-emoji { font-size: 44px; }
/* กรอบรูปทอง+คริสตัล (ภาพ PixelLab src/assets/ui/cc_portrait_frame.png) วางทับรูป */
.cc-frame {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url('src/assets/ui/cc_portrait_frame.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.cc-jobbadge {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #e2c178;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 0 0 1px #5b4418, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-head {
  position: relative; display: flex; align-items: baseline; gap: 8px; padding: 0 28px 5px 0; margin-bottom: 1px; white-space: nowrap;
  /* เส้นคั่นทองจางสองข้าง + เพชรกลาง */
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.7) 20%, rgba(201, 162, 74, 0.7) 80%, transparent) bottom / 100% 1px no-repeat;
}
.cc-head::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg);
  background: #bfe3ff; box-shadow: 0 0 6px #6fc3ff;
}
.cc-name { font-size: 20px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 #0a1330; }
.cc-level { font-size: 17px; font-weight: 700; color: #f5c451; text-shadow: 0 2px 0 #3a2a0c; }
.cc-sep { width: 1px; height: 16px; background: rgba(143, 183, 255, 0.5); align-self: center; }
.cc-job { font-size: 16px; font-weight: 700; color: #8fb7ff; }
.cc-money { display: flex; gap: 6px; }
.cc-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(5, 10, 25, 0.6);
  border: 1px solid rgba(201, 162, 74, 0.75);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  font-size: 14px;
  white-space: nowrap;
}
.cc-pill-label { color: #cfd8e8; font-size: 12px; }
/* ชี้ช่องน้ำหนัก (การ์ดตัวละคร/กระเป๋า/ร้าน/คลัง) = บอกว่าใช้ไปกี่ % — ข้อความตั้งใน JS (data-weight-tip) */
[data-weight-tip] { position: relative; cursor: help; }
[data-weight-tip]:hover::after {
  content: attr(data-weight-tip);
  position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 60;
  padding: 4px 9px; border-radius: 6px; white-space: pre-line; min-width: max-content; pointer-events: none;
  background: rgba(10, 18, 34, 0.96); border: 1px solid #c9a24a; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  color: #fff4d6; font-size: 12px; font-weight: 600;
}
.cc-zeny { color: #f5c451; }
.cc-ico { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; }
.cc-bar-row { display: flex; align-items: center; gap: 5px; }
.cc-bar-ico { width: 16px; text-align: center; font-size: 13px; flex-shrink: 0; }
.cc-ico-hp { color: #ff4d5e; text-shadow: 0 0 4px rgba(255, 77, 94, 0.6); }
.cc-ico-sp { color: #6fc3ff; text-shadow: 0 0 4px rgba(111, 195, 255, 0.7); }
.cc-ico-exp { font-size: 7px; font-weight: 700; color: #fff; background: radial-gradient(circle at 40% 35%, #3fcf6a, #177a36); border-radius: 50%; width: 16px; height: 16px; line-height: 16px; }
.cc-bar-label { width: 26px; font-size: 13px; font-weight: 700; }
.cc-bar {
  position: relative;
  flex: 1;
  height: 12px;
  border-radius: 7px;
  background: #060b1a;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px rgba(143, 183, 255, 0.18);
  overflow: hidden;
}
.cc-bar .bar-fill { border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
.cc-bar.hp .bar-fill { background: linear-gradient(#ff8a80, #e8323f 55%, #b81f2c); }
.cc-bar.sp .bar-fill { background: linear-gradient(#8ed2ff, #2f86ea 55%, #1d5fc0); }
.cc-bar.exp .bar-fill { background: linear-gradient(#8ef08e, #36b04a 55%, #1f7d31); }
.cc-bar.jobexp .bar-fill { background: linear-gradient(#ffe9a6, #f0b935 55%, #c98a12); }
.cc-bar-text {
  min-width: 80px; padding: 0 6px; border-radius: 5px; background: rgba(5, 10, 25, 0.5);
  text-align: right; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.cc-exp-sub { display: flex; justify-content: space-between; padding-left: 52px; font-size: 11px; color: #a9c4ee; }
.exp-max { color: #ffd23f; font-weight: 700; }
.cc-toggle {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c9a24a;
  background: radial-gradient(circle at 40% 35%, #22386f, #0a1330);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: var(--cur-hand);
}
.cc-toggle:hover { background: #2a3d74; }
.cc-extra {
  margin-top: 9px; padding-top: 7px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.75) 12%, rgba(201, 162, 74, 0.75) 88%, transparent) top / 100% 1px no-repeat;
}
.cc-job-row { display: flex; align-items: center; gap: 8px; }
.cc-job-ico { color: #e8d9b0; font-size: 15px; }
.cc-job-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cc-job-row .cc-bar { height: 13px; }
.cc-job-pct {
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid #c9a24a;
  background: rgba(5, 10, 25, 0.55);
  color: #f5c451;
  font-size: 12px;
  font-weight: 700;
  min-width: 52px;
  text-align: center;
}
.cc-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(5, 10, 25, 0.75) 55%, rgba(30, 55, 120, 0.45));
  border: 1px solid rgba(143, 183, 255, 0.28);
  font-size: 12px;
  color: #cfd8e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-status-ico { font-size: 12px; }
#hud-char.collapsed .cc-extra, #hud-char.collapsed .cc-money, #hud-char.collapsed .cc-exp-sub { display: none; }
#hud-char.collapsed .cc-portrait-wrap { width: 72px; height: 78px; }
#hud-char.collapsed .cc-portrait .jb-portrait { width: 64px; height: 64px; }
/* การ์ดกะทัดรัด (ผู้ใช้: การ์ดใหญ่เกินสัดส่วน) — ช่องบัพ/แถบ info วางตามขอบการ์ดจริงด้วย JS (UIManager.layoutCharCardSide) */
#hud-char { width: 356px; padding: 8px 11px 7px 9px; }
.cc-top { gap: 8px; }
.cc-portrait-wrap { width: 78px; height: 84px; }
.cc-portrait { inset: 7px 7px 6px; }
.cc-portrait .jb-portrait { width: 72px; height: 72px; }
.cc-portrait .jb-portrait-emoji { font-size: 34px; }
.cc-jobbadge { width: 22px; height: 22px; bottom: -6px; font-size: 11px; }
.cc-main { gap: 3px; }
.cc-head { gap: 6px; padding: 0 24px 4px 0; }
.cc-name { font-size: 15px; }
.cc-level { font-size: 13px; }
.cc-sep { height: 12px; }
.cc-job { font-size: 13px; }
.cc-money { gap: 4px; }
.cc-pill { gap: 4px; padding: 1px 6px; font-size: 12px; border-radius: 5px; min-width: 0; overflow: hidden; }
.cc-pill-label { font-size: 10px; }
.cc-ico { width: 13px; height: 13px; }
.cc-bar-row { gap: 4px; }
.cc-bar-ico { width: 13px; font-size: 11px; }
.cc-ico-exp { width: 13px; height: 13px; line-height: 13px; font-size: 6px; }
.cc-bar-label { width: 22px; font-size: 11px; }
.cc-bar { height: 10px; }
.cc-bar-text { min-width: 62px; padding: 0 4px; font-size: 11px; }
.cc-exp-sub { padding-left: 43px; font-size: 10px; }
.cc-toggle { top: 7px; right: 8px; width: 21px; height: 21px; font-size: 12px; }
.cc-extra { margin-top: 6px; padding-top: 5px; }
.cc-job-row { gap: 6px; }
.cc-job-ico { font-size: 12px; }
.cc-job-label { font-size: 12px; }
.cc-job-row .cc-bar { height: 10px; }
.cc-job-pct { font-size: 10px; min-width: 42px; padding: 0 5px; }
.cc-status { margin-top: 4px; padding: 2px 7px; font-size: 11px; }
.cc-status-ico { font-size: 10px; }
.cc-orn { transform: scale(0.8); }
/* บัพใต้แถบ info กว้างเท่าการ์ด (JS ตั้ง top/left/width) เรียงต่อกันแล้วขึ้นแถวใหม่เมื่อเต็ม — บัพกิจกรรม+สกิลอยู่แถวเดียวกัน */
#hud-buffs {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none; /* ช่องว่างระหว่างไอคอนคลิกทะลุไปโลกเกม */
}
#hud > #hud-buffs { pointer-events: none; }
#hud-buffs .event-buff { pointer-events: auto; }
#event-buffs, #skill-buffs { display: contents; }
.skill-buff { padding: 0; border-color: #e6c36c; background: #14264d; }
.skill-buff .skill-ico { width: 100%; height: 100%; }
.skill-buff .event-buff-time { pointer-events: none; }
.skill-buff.status-debuff { border-color: #ef9c51; background: radial-gradient(circle at 35% 25%, #a35a32, #512639 72%); }
.skill-buff.status-debuff.severity-2 { border-color: #fa6468; background: radial-gradient(circle at 35% 25%, #b64053, #4e1739 72%); }
.skill-buff.status-debuff .skill-ico { display: grid; place-items: center; padding-bottom: 8px; font-size: 23px; line-height: 1; background: none; }
.skill-tooltip-icon.status-debuff { border-color: #ef7975; background: radial-gradient(circle at 35% 25%, #a35a48, #501b3a 72%); font-size: 30px; }
.event-buff {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-bottom: 13px; /* เว้นที่ให้แถบเวลาด้านล่าง ไม่ให้บังตัวคูณ */
  border: 2px solid #ccd5c7;
  border-radius: 9px;
  box-shadow: inset 0 0 0 2px rgba(6, 14, 17, 0.72), 0 2px 6px rgba(0, 0, 0, 0.55);
  color: #fff;
  overflow: hidden;
  font-size: 9px;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}
.event-buff-symbol { font-size: 10px; line-height: 11px; }
.event-buff > b { color: #fff59b; font-size: 13px; line-height: 13px; }
.event-exp-icon { background: radial-gradient(circle at 42% 30%, #5dff87 0%, #1b9d49 42%, #095425 100%); }
.event-drop-icon { background: radial-gradient(circle at 42% 30%, #79d9ff 0%, #287acb 45%, #153b80 100%); }
.event-drop-icon .event-buff-symbol { font-size: 13px; line-height: 13px; color: #dff7ff; }
.event-buff-time {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 5px 5px;
  background: rgba(5, 12, 16, 0.88);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
.event-tooltip {
  position: fixed;
  z-index: 100001;
  width: 320px;
  max-width: calc(100vw - 16px);
  padding: 14px 16px;
  border: 2px solid #b99843;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 43, 78, 0.98), rgba(12, 25, 52, 0.98));
  box-shadow: inset 0 0 0 2px rgba(231, 205, 118, 0.15), 0 6px 18px rgba(0, 0, 0, 0.62);
  color: #dce5f7;
  pointer-events: none;
}
.event-tooltip-head { display: flex; align-items: center; gap: 12px; }
.event-tooltip-head > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-tooltip-head strong { color: #fff; font-size: 18px; }
.event-tooltip-source { color: #bdc8dd; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-tooltip-icon { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center; border: 2px solid #94e095; border-radius: 10px; box-shadow: inset 0 0 0 3px rgba(5, 15, 20, 0.62); color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.event-tooltip-icon.event-drop-icon { color: #dff7ff; font-size: 25px; }
.skill-tooltip-icon { background-repeat: no-repeat; image-rendering: pixelated; }
.event-tooltip-rule { height: 1px; margin: 10px 0; background: linear-gradient(90deg, transparent, #7385a6 8%, #7385a6 92%, transparent); }
.event-tooltip-duration { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.event-tooltip-duration b { margin-left: 2px; color: #6eff8e; }
.event-clock { color: #fff; font-size: 20px; }
.event-tooltip p { margin: 0; color: #aebbd2; font-size: 13px; line-height: 1.45; }
.update-notice { position: fixed; z-index: 100002; top: 12px; left: 50%; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); border: 2px solid #c99a43; border-radius: 9px; background: #fff8e8; box-shadow: 0 3px 10px rgba(62, 44, 14, 0.38); color: #55462f; overflow: hidden; }
.update-bar { min-height: 42px; padding: 4px 6px; display: flex; align-items: center; gap: 5px; }
.update-summary { flex: 1; min-width: 0; height: 34px; padding: 0 5px; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: #51442f; cursor: var(--cur-hand); text-align: left; }
.update-summary-badge { color: #e53c7b; font-size: 16px; }
.update-summary strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.update-version { color: #8a7859; font-size: 10px; white-space: nowrap; }
.update-chevron { color: #9a7b42; transition: transform 0.18s; }
.update-summary[aria-expanded="true"] .update-chevron { transform: rotate(180deg); }
.update-details { padding: 0 14px 12px; border-top: 1px solid #e3c98f; }
.update-details ul { margin: 0; padding: 9px 10px 2px 28px; text-align: left; }
.update-details li { margin: 5px 0; line-height: 1.4; font-size: 12px; }
#update-now { padding: 8px 13px; border: 1px solid #536d86; border-radius: 5px; background: #617e98; color: #fff; font-size: 12px; font-weight: 800; cursor: var(--cur-hand); }
#update-now:hover { filter: brightness(1.15); }
#update-now:disabled { cursor: wait; opacity: 0.7; }
#update-dismiss { width: 30px; height: 30px; border: 0; background: transparent; color: #a48b61; font-size: 20px; cursor: var(--cur-hand); }
.char-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.job-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #4a5568;
}
.char-row1-text { display: flex; flex-direction: column; min-width: 0; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.bar-label {
  width: 26px;
  font-size: 10px;
  color: #9aa7b3;
}
.bar {
  flex: 1;
  height: 10px;
  background: #0c1116;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #33404f;
}
.bar-fill {
  height: 100%;
  width: 0%;
  transition: width 0.15s ease-out;
}
.bar.hp .bar-fill { background: #e74c3c; }
.bar.sp .bar-fill { background: #3498db; }
.bar.exp .bar-fill { background: #9b59b6; }
.bar.jobexp .bar-fill { background: #f39c12; }
.bar-text {
  width: 84px;
  font-size: 10px;
  text-align: right;
  color: #cfd8e0;
  white-space: nowrap;
}

/* แถบสถานะเครื่อง ใต้การ์ดตัวละคร (ตาม ref) */
#hud-sysbar {
  position: absolute;
  top: 146px; /* ใต้การ์ดตัวละคร (การ์ดสูงถึง ~138px) */
  left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* ยาวเท่าการ์ด (JS ตั้ง width) แบ่งช่องไฟเท่ากัน */
  gap: 6px;
  box-sizing: border-box;
  padding: 3px 12px;
  border-radius: 6px;
  background: rgba(20, 26, 38, 0.72);
  border: 1px solid rgba(201, 162, 74, 0.35);
  color: #f0f3f7;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
}
#hud-sysbar b { font-weight: 700; }
#hud-sysbar .good { color: #7ee07e; }
#hud-sysbar .mid { color: #f5d76e; }
#hud-sysbar .bad { color: #ff7b6b; }
.sys-battery { display: inline-flex; align-items: center; }
.sys-bat-body { width: 22px; height: 11px; border: 1.5px solid #f0f3f7; border-radius: 2px; padding: 1px; display: inline-flex; }
.sys-bat-fill { height: 100%; background: #f0f3f7; border-radius: 1px; }
.sys-bat-tip { width: 2px; height: 5px; background: #f0f3f7; border-radius: 0 1px 1px 0; margin-left: 1px; }
.sys-battery.low .sys-bat-fill { background: #ff5c4d; }
.sys-battery.charging .sys-bat-fill { background: #7ee07e; }
.sys-net svg { width: 17px; height: 13px; display: block; fill: #f0f3f7; }
.sys-net path { fill: none; stroke: #f0f3f7; stroke-width: 2.4; stroke-linecap: round; }
.sys-net[data-bars="0"] path, .sys-net[data-bars="1"] .w2, .sys-net[data-bars="1"] .w3, .sys-net[data-bars="2"] .w3 { stroke: rgba(240, 243, 247, 0.25); }
.sys-net[data-bars="0"] circle { fill: #ff7b6b; }
.sys-online { color: #ffffff; }
.sys-online b { color: #7cf29a; }

/* กึ่งกลางบน: item pickup notifications */
#item-notices { position: absolute; top: 24px; left: 50%; width: min(360px, calc(100vw - 28px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; transition: top 0.18s; }
body.update-available #item-notices { top: var(--item-notice-top, 78px); }
.item-notice { width: fit-content; min-width: 210px; max-width: 100%; min-height: 38px; padding: 5px 14px 5px 7px; display: flex; align-items: center; gap: 9px; border: 1px solid #cfc8bb; border-radius: 6px; background: linear-gradient(#fffefa, #f2f0e9); box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28); color: #222b35; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(-7px); transition: opacity 0.2s, transform 0.2s; }
.item-notice.show { opacity: 1; transform: translateY(0); }
.item-notice-icon { width: 28px; height: 28px; flex: 0 0 28px; }
/* ประกาศทีมงาน: แบนเนอร์ร่วงจากขอบบนจอ + ข้อความวิ่งขวา→ซ้าย (GMSystem.js) */
#gm-announcements { position: absolute; top: 58px; left: 50%; z-index: 60; width: min(620px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
body.update-available #gm-announcements { top: 108px; }
.gm-banner { position: relative; display: flex; align-items: stretch; height: 46px; overflow: hidden; border: 2px solid #e2b54a; border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 24, 6, 0.96), rgba(14, 20, 40, 0.96) 55%, rgba(8, 12, 26, 0.96));
  box-shadow: 0 0 0 2px rgba(10, 8, 2, 0.85), 0 0 22px rgba(255, 190, 70, 0.45), 0 10px 26px rgba(0, 0, 0, 0.55);
  transform: translateY(calc(-100% - 90px)); opacity: 0; } /* ร่วงลง/เลื่อนขึ้นด้วย Web Animations ใน GMSystem.js */
/* แสงวาบวิ่งผ่านตอนร่วงลงมา */
.gm-banner::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 240, 190, 0.35), transparent); transform: skewX(-18deg); pointer-events: none; }
.gm-banner.show::after { animation: gm-shine 1.1s 0.45s ease-out; }
@keyframes gm-shine { to { left: 130%; } }
.gm-badge { position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 18px 0 12px; background: linear-gradient(180deg, #c7341f, #7d1509); color: #fff3c4; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.5); }
.gm-badge-icon { font-size: 20px; animation: gm-horn 0.9s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.8)); }
@keyframes gm-horn { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(6deg) scale(1.12); } }
.gm-badge strong { font-size: 14px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.gm-marquee { position: relative; flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.gm-marquee-track { display: inline-flex; align-items: baseline; gap: 14px; white-space: nowrap; will-change: transform; transform: translateX(100vw); }
.gm-marquee-track span { color: #fff; font-size: 16px; font-weight: 700; text-shadow: 0 0 8px rgba(255, 200, 90, 0.55), 0 1px 2px #000; }
.gm-marquee-track small { color: #f5d76e; font-size: 13px; font-weight: 700; }
/* ปุ่มเจ้าหน้าที่ (GM Tools / แก้แมพ) ซ้ายของปุ่ม AUTO — ปุ่มเหลี่ยมมนพื้นเข้ม ขอบทอง แถบแดงบนสื่อว่าเป็นเครื่องมือทีมงาน; ไม่มีปุ่มที่แสดง = ซ่อนทั้งแผง */
.staff-dock { position: fixed; z-index: 12; right: 296px; bottom: 29px; display: flex; flex-direction: row-reverse; gap: 8px; pointer-events: none; }
.staff-dock:not(:has(> .staff-btn:not(.hidden))) { display: none; }
.staff-btn { position: relative; width: 50px; height: 44px; padding: 5px 0 4px; display: grid; justify-items: center; align-content: center; gap: 2px; overflow: hidden; pointer-events: auto;
  border: 1px solid rgba(214, 178, 96, .75); border-radius: 11px; background: linear-gradient(#2c313b, #14171d); color: #f3d98f;
  box-shadow: 0 0 0 3px rgba(16, 20, 26, .8), 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 180, .18); cursor: var(--cur-hand, pointer); }
.staff-btn::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #7a1d25, #d8424c, #7a1d25); }
.staff-btn svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px #000); }
.staff-btn span { font: 700 9px/1 'Prompt', sans-serif; letter-spacing: .5px; color: #efe6cf; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.staff-btn:hover { border-color: #ffe39a; color: #fff1c4; box-shadow: 0 0 0 3px rgba(16, 20, 26, .8), 0 0 12px rgba(255, 214, 120, .55), inset 0 1px 0 rgba(255, 236, 180, .25); }
.staff-btn:active { transform: translateY(1px) scale(.96); }
.staff-btn.hidden { display: none; }
body:not(.r3d) .staff-dock { right: 14px; bottom: 350px; flex-direction: column-reverse; } /* โหมด 2D เดิม: ตำแหน่งเดิมเหนือช่องลัด */
.gm-panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80; width: min(580px, 94vw); max-height: 84vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 3px solid #c9a24a; border-radius: 12px; background: linear-gradient(#22346a, #172449); box-shadow: 0 0 0 2px #0b1020, 0 12px 30px rgba(0, 0, 0, 0.6); color: #e9efff; }
.gm-panel .win-header { flex: none; cursor: move; touch-action: none; }
.gm-panel .gm-body { min-height: 0; overflow-y: auto; padding: 12px 16px 14px; }
.gm-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.gm-tabs button { min-height: 36px; padding: 6px 4px; border: 1px solid #5a6b98; border-radius: 6px; background: linear-gradient(#22346a, #111d42); color: #dce7ff; font-size: 13px; font-weight: 700; cursor: var(--cur-hand); }
.gm-tabs button.active { border-color: #ffe59b; background: linear-gradient(#f2ca65, #b87f20); color: #251a07; }
.gm-panel [data-gm-page] { padding: 11px 13px; border: 1px solid rgba(226, 185, 90, .6); border-radius: 7px; background: rgba(10, 18, 48, .72); }
.gm-panel label { display: flex; flex-direction: column; gap: 5px; margin: 7px 0; color: #d7e4ff; font-size: 13px; }
.gm-panel input, .gm-panel textarea, .gm-panel select { width: 100%; padding: 8px 10px; border: 1px solid #6980b2; border-radius: 5px; background: #0b1637; color: #fff; font: inherit; resize: vertical; }
.gm-panel input:focus-visible, .gm-panel textarea:focus-visible, .gm-panel select:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 1px; }
.gm-separator { height: 1px; margin: 10px 0; background: rgba(184, 142, 53, 0.4); }
.gm-action, .gm-teleport-row button { min-height: 34px; padding: 7px 12px; border: 1px solid #cfaa50; border-radius: 6px; background: linear-gradient(#304f83, #172b59); color: #fff; font: inherit; font-weight: 700; cursor: var(--cur-hand); }
.gm-action:hover, .gm-tabs button:hover { filter: brightness(1.15); }
.gm-action { width: 100%; }
.gm-tool-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: end; margin-bottom: 9px; }
.gm-tool-row label { margin: 0; }
.gm-tool-row2 { grid-template-columns: minmax(0, 1fr) 110px 110px; }
.gm-tool-row .gm-action { min-height: 37px; }
.gm-reset-box { margin-top: 13px; padding: 10px 12px; border: 1px solid #bd6860; border-radius: 7px; background: rgba(91, 28, 35, .35); }
.gm-reset-box strong { color: #ffd0aa; font-size: 13px; }
.gm-reset-box p { margin: 5px 0 10px; color: #e3d7d6; font-size: 12px; line-height: 1.5; }
.gm-action-danger { border-color: #e68c75; background: linear-gradient(#a84139, #6b2029); }
.gm-check { flex-direction: row !important; align-items: center; color: #fff !important; }
.gm-check input { width: auto; }
.gm-teleport-row { display: flex; gap: 7px; }
.gm-teleport-row input { flex: 1; min-width: 0; }
#gm-status { min-height: 18px; margin: 10px 0 0; color: #8eeaa2; font-size: 13px; }
@media (max-height: 650px) {
  body:not(.r3d) .staff-dock { bottom: 14px; right: 380px; flex-direction: row-reverse; }
  .gm-panel { max-height: 94vh; }
}
@media (max-width: 540px) {
  .gm-panel .gm-body { padding: 10px; }
  .gm-tabs { gap: 3px; }
  .gm-tabs button { font-size: 11px; }
  .gm-tool-row { grid-template-columns: 1fr; gap: 5px; }
}
/* ===== Daily Login ตาม ref: หัวภาพปราสาท, ตาราง 30 วัน 7 คอลัมน์ + ภาพประกอบขวา, วันที่ 30 รางวัลใหญ่ ===== */
.game-window.daily-window { max-height: 96vh; }
.daily-header.win-header {
  justify-content: flex-start;
  gap: 12px;
  min-height: 70px;
  padding: 8px 56px 8px 14px;
  background: #0d1a3f url('src/assets/ui/daily_header.png') center / cover no-repeat;
  image-rendering: pixelated;
}
.daily-calendar {
  position: relative; flex: none; width: 50px; height: 50px; margin-top: -2px;
  border: 3px solid #2a3552; border-radius: 8px; background: #fbfbfd;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.55); image-rendering: auto;
}
.daily-calendar i { position: absolute; inset: 0 0 auto; height: 14px; border-radius: 4px 4px 0 0; background: linear-gradient(#e0473b, #b3261d); }
.daily-calendar i::before, .daily-calendar i::after { content: ''; position: absolute; top: -8px; width: 5px; height: 12px; border-radius: 3px; background: #2a3552; }
.daily-calendar i::before { left: 10px; } .daily-calendar i::after { right: 10px; }
.daily-calendar b { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; color: #d0281f; font-size: 26px; line-height: 32px; }
.daily-heading { display: flex; flex-direction: column; line-height: 1.1; text-shadow: 0 2px 3px #000; }
.daily-heading strong { color: #fff; font-size: 27px; font-family: Georgia, 'Times New Roman', serif; letter-spacing: 1px; }
.daily-heading span { color: #f3f6ff; font-size: 15px; font-weight: 700; }
.daily-tagline { margin-left: auto; color: #9fb8e6; font-size: 13px; line-height: 1.25; text-align: right; transform: rotate(-6deg); text-shadow: 0 1px 2px #000; }
.game-window .daily-body { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; background: #f6f3ea; }
.daily-topline { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid #d6cfbd; color: #3b2c1a; font-size: 13px; }
.daily-topline b { color: #1f55b4; }
.daily-reward-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.daily-art {
  grid-column: 7; grid-row: 1 / span 4; position: relative; min-height: 300px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px;
  border: 2px solid #b9c3d3; border-radius: 7px;
  background: #cfe3f7 url('src/assets/ui/daily_art.png') center / cover no-repeat; image-rendering: pixelated;
}
.daily-art p { margin: 0; color: #213c73; font-size: 14px; font-weight: 800; font-style: italic; line-height: 1.35; text-shadow: 0 0 4px #fff, 0 0 8px #fff; transform: rotate(-4deg); }
.daily-art small { align-self: flex-end; color: #fff; font-size: 11px; font-style: italic; text-align: right; white-space: pre-line; text-shadow: 0 1px 2px #0b1733; }
.daily-day {
  position: relative; min-height: 88px; padding: 4px 3px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid #c9ced8; border-radius: 6px;
  background: linear-gradient(#ffffff, #eef1f6); box-shadow: 0 1px 2px rgba(60, 50, 30, 0.18);
}
.daily-day > b { color: #22386b; font-size: 13px; }
.daily-parts { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; }
.daily-parts span, .daily-next-parts span { display: flex; flex-direction: column; align-items: center; }
.daily-parts i { width: 32px; height: 32px; }
.daily-parts span:first-child:nth-last-child(n+3), .daily-parts span:first-child:nth-last-child(n+3) ~ span { transform: scale(0.8); margin: 0 -3px; }
.daily-parts small { color: #2c2c34; font-size: 12px; font-weight: 800; line-height: 1; }
.daily-day.milestone { border-color: #e2b654; background: linear-gradient(#fff4d2, #fbe6a8); }
.daily-day.today { border: 2px solid #f0a51f; box-shadow: 0 0 0 2px rgba(240, 165, 31, 0.35), 0 0 12px rgba(240, 165, 31, 0.6); }
.daily-day.claimed { border-color: #6ab35a; background: linear-gradient(#e8f7df, #cfeebe); }
.daily-day.claimed .daily-parts { opacity: 0.45; }
.daily-check {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5fd05a, #23922c); border: 2px solid #fff;
  color: #fff; font-size: 20px; font-weight: 900; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.daily-chip { align-self: stretch; margin: 0 2px; padding: 1px 0; border-radius: 4px; background: #2f9a3a; color: #fff; font-size: 11px; font-weight: 800; text-align: center; }
.daily-chip.today-chip { background: #e08a12; }
.daily-day.grand { grid-column: span 2; border: 2px solid #b8862b; background: linear-gradient(135deg, #fbe39a, #e6b44c 60%, #d99c33); }
.daily-day.grand > b { color: #5a3408; font-size: 14px; }
.daily-day.grand .daily-parts i { width: 42px; height: 42px; }
.daily-day.grand .daily-parts span { transform: none; margin: 0 2px; }
.daily-day.grand .daily-parts small { color: #fff; font-size: 14px; text-shadow: 0 1px 2px #5a3408, 0 0 3px #5a3408; }
.daily-grand-tag { position: absolute; top: -2px; right: -2px; padding: 2px 9px; border-radius: 0 6px 0 8px; background: linear-gradient(#e2372c, #a91d15); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.daily-footer { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid #d6cfbd; border-radius: 7px; background: #fbf9f3; }
.daily-next, .daily-progress { display: flex; align-items: center; gap: 9px; }
.daily-next { flex: 0 1 290px; padding-right: 14px; border-right: 1px solid #d6cfbd; }
.daily-progress { flex: 1; }
.daily-progress > div { flex: 1; }
.daily-gift, .daily-crown { font-size: 32px; line-height: 1; }
.daily-footer small { color: #1f55b4; font-size: 12px; font-weight: 700; }
.daily-next-reward { display: flex; align-items: center; gap: 6px; color: #2c2c34; font-size: 13px; }
.daily-next-parts { display: flex; gap: 2px; }
.daily-next-parts i { width: 24px; height: 24px; }
.daily-next-parts small { display: none; }
.daily-bar { height: 10px; margin-top: 5px; border: 1px solid #9fb1cc; border-radius: 6px; background: #e3e8f0; overflow: hidden; }
.daily-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a74d6, #62a2f5); }
.daily-progress > b { color: #3b2c1a; font-size: 13px; white-space: nowrap; }
.daily-claim { flex: none; min-width: 150px; padding: 12px 22px; border: 2px solid #efc75d; border-radius: 7px; background: linear-gradient(#4a82d3, #2a5aa6); color: #fff; font-size: 15px; font-weight: 800; cursor: var(--cur-hand); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.daily-claim:disabled { border-color: #a9b3c2; background: linear-gradient(#c8cfda, #aab4c3); color: #fff; cursor: var(--cur-arrow); box-shadow: none; }
.daily-status { min-height: 16px; margin: 0; color: #2f7d3a; font-size: 12px; text-align: center; }
@media (max-width: 820px) {
  .daily-reward-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .daily-art, .daily-tagline { display: none; }
  .daily-footer { flex-wrap: wrap; }
  .daily-next { border-right: 0; }
}
@media (max-width: 720px) {
  #gm-announcements { top: 174px; }
}

/* มุมขวาบน: แถวไอคอนเมนู + minimap เรียงติดกัน ชิดขวา */
#hud-topright {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* แถวละไม่เกิน 5 เมนู สูงสุด 2 แถว (รวมปุ่มเพิ่มเติม = 10 ช่อง) ชิดขวาเข้าหามินิแมพ
   เมนูเกินกว่านั้นถูกย้ายเข้าแผง "เพิ่มเติม" อัตโนมัติ (UIManager.layoutTopMenu) */
#hud-topmenu {
  --menu-w: 58px;
  --menu-gap: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4px var(--menu-gap);
  width: calc(var(--menu-w) * 5 + var(--menu-gap) * 4);
}
#hud-topmenu > .icon-btn, #hud-topmenu > .more-wrap > .icon-btn { width: var(--menu-w); }
/* ปุ่มเมนูตาม ref: วงกลมน้ำเงินเข้ม ขอบทองสองชั้น + อัญมณีฟ้า 4 ทิศ (ภาพ SVG ซ้อนทับ ::after) */
:root {
  --ui-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M6 1 11 9 6 17 1 9z' fill='%232f6fe8' stroke='%23f3d27a' stroke-width='1.2'/%3E%3Cpath d='M6 2.5 6 15.5 2.3 9z' fill='%239ad4ff'/%3E%3Cpath d='M6 2.5 9.7 9 6 9z' fill='%23d6f0ff'/%3E%3C/svg%3E");
  --ui-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-15 -15 130 130'%3E%3Ccircle cx='50' cy='50' r='50.5' fill='none' stroke='%23201606' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23f3d27a' stroke-width='5'/%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23a8792a' stroke-width='1.2'/%3E%3Ccircle cx='50' cy='50' r='42.5' fill='none' stroke='%236b4a14' stroke-width='2'/%3E%3Cg stroke='%23f3d27a' stroke-width='1.8'%3E%3Cpath d='M50 -13 58 0 50 13 42 0z' fill='%232f6fe8'/%3E%3Cpath d='M-4 50 3 44 10 50 3 56z' fill='%232f6fe8'/%3E%3Cpath d='M104 50 97 44 90 50 97 56z' fill='%232f6fe8'/%3E%3Cpath d='M50 104 44 97 50 90 56 97z' fill='%232f6fe8'/%3E%3C/g%3E%3Cpath d='M50 -10 50 10 44.5 0z' fill='%239ad4ff'/%3E%3Cpath d='M50 -10 55.5 0 50 0z' fill='%23e4f5ff'/%3E%3C/svg%3E");
  --ui-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0 24 16 40 20 24 24 20 40 16 24 0 20 16 16z' fill='%23f3d27a' stroke='%234a3208' stroke-width='1'/%3E%3Cpath d='M20 6 22.5 17.5 34 20 22.5 22.5 20 34 17.5 22.5 6 20 17.5 17.5z' fill='%23ffeeb0'/%3E%3Cpath d='M20 11 25 20 20 29 15 20z' fill='%232f6fe8' stroke='%23f3d27a' stroke-width='1'/%3E%3Cpath d='M20 12.5 20 27.5 16.5 20z' fill='%239ad4ff'/%3E%3C/svg%3E");
  --ui-castle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V86h14V70h6V52l6-10 6 10v18h10V60h8v-8l5-9 5 9v26h14V88h16V64l7-14 7 14v24h20V76l8-16 8 16v14h12V58l6-12 6 12v30h14V70h10V50l7-14 7 14v38h12V82h16V66l6-10 6 10v24h14V120z' fill='%23070d22' opacity='0.85'/%3E%3C/svg%3E");
  --ui-crystal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 44'%3E%3Cpath d='M2 36 28 30 40 40 52 30 78 36 52 42 40 44 28 42z' fill='%23f3d27a' stroke='%234a3208'/%3E%3Cpath d='M26 32 32 16 36 34z' fill='%233a7bff' stroke='%23f3d27a'/%3E%3Cpath d='M54 32 48 16 44 34z' fill='%233a7bff' stroke='%23f3d27a'/%3E%3Cpath d='M40 0 48 22 40 40 32 22z' fill='%232f6fe8' stroke='%23f3d27a' stroke-width='1.5'/%3E%3Cpath d='M40 3 40 37 34 22z' fill='%239ad4ff'/%3E%3Cpath d='M40 3 46 22 40 22z' fill='%23e4f5ff'/%3E%3C/svg%3E");
}
.icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 58px;
  background: none;
  border: none;
  color: #fff;
  cursor: var(--cur-hand);
  padding: 8px 0 0;
}
/* ไอคอนเมนูตาม ref: ภาพ pixel art ลอยบนฉาก ไม่มีวงกลม/พื้นหลัง (ภาพจาก PixelLab ที่ src/assets/ui/menu/) */
.icon-circle {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-circle img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  /* เงาสองชั้น (ขอบมืดรอบภาพ + เงาตกด้านล่าง) ให้ไอคอนแยกจากพื้นแมพที่สีใกล้กัน */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}
/* ปุ่มเพิ่มเติม: ขีดสามเส้นสีขาว (วาดด้วย CSS) เงาเดียวกับไอคอนอื่น */
.more-bars {
  position: relative;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 -9px 0 #fff, 0 9px 0 #fff;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.75));
}
.icon-btn:hover:not(:disabled) .icon-circle, .icon-btn.open .icon-circle { filter: brightness(1.18) drop-shadow(0 0 4px rgba(255, 230, 150, 0.8)); }
/* แจ้งเตือน: วงแดง "!" มุมขวาบนของไอคอน (UIManager.updateMenuAlerts) — เมนูในแผงเพิ่มเติมมีแจ้งเตือน = ปุ่มเพิ่มเติมขึ้นด้วย */
.has-alert .icon-circle::after {
  content: '!';
  position: absolute;
  top: -4px;
  right: -6px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff6a5a, #d3261a 70%);
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  animation: menu-alert-pop 1.6s ease-in-out infinite;
}
@keyframes menu-alert-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.22); } }
/* ปุ่มกระเป๋า: ป้าย % น้ำหนักบนไอคอน — เขียว <75%, ส้ม 75% ถึง <90.1%, แดงตั้งแต่ 90.1% */
.menu-pct {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 5px;
  border-radius: 8px;
  background: #3a9a45;
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 14px;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.menu-pct.warn { background: #e0862a; }
.menu-pct.over { background: #d03a2c; }
.icon-label {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.2px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 3px #000;
}
.icon-btn:disabled { cursor: not-allowed; }
.icon-btn:disabled .icon-circle { filter: grayscale(0.6) brightness(0.7); }
.icon-btn:disabled .icon-label { color: #c3bcef; }
/* ปุ่มเพิ่มเติม = ขีดสามเส้นสีฟ้า (เปิดแผงแล้วเป็นสีทอง) ไม่มีชื่อใต้ปุ่ม */


/* แผง "เพิ่มเติม" (ตาม ref): พื้นเทาเข้มโปร่งแสงเรียบๆ กริด 3 x 3 ต่อหน้า + ลูกศรเปลี่ยนหน้า (คลิกนอกแผง = ปิด) */
.more-wrap { position: relative; }
/* #hud-topright มี transform (hud-scale) = stacking context ของตัวเอง ต้องยกทั้งมุมขึ้นตอนแผงเปิด ไม่งั้นแชท/หน้าต่างบัง */
#hud-topright:has(.more-menu:not(.hidden)) { z-index: 100000; }
.more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100000; /* อยู่เหนือหน้าต่างเมนูเสมอ (หน้าต่างเพิ่ม z-index ขึ้นเรื่อยๆ ทุกครั้งที่ยกขึ้นบนสุด) */
  width: 222px;
  padding: 8px 6px 6px;
  /* สีขาวโปร่งใส + เบลอฉากหลัง (ชื่อเมนูมีขอบดำ อ่านได้บนพื้นสว่าง) */
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.more-close { display: none; }
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 70px;
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 0 0;
  cursor: var(--cur-hand);
  color: #fff;
}
.more-item.page-off { display: none; }
.more-item .icon-circle { width: 44px; height: 44px; }
.more-item .icon-label { font-size: 13px; }
.more-item:hover:not(:disabled) .icon-circle { filter: brightness(1.18) drop-shadow(0 0 4px rgba(255, 230, 150, 0.8)); }
.more-item:disabled { cursor: not-allowed; }
.more-item:disabled .icon-circle { filter: grayscale(0.6) brightness(0.7); }
.more-item:disabled .icon-label { color: #9aa7b3; }
.more-pager { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; }
.more-pager.hidden { display: none; }
.more-arrow {
  width: 30px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font-size: 15px;
  cursor: var(--cur-hand);
  text-shadow: 0 0 2px #000, 0 1px 3px #000;
}
.more-arrow:hover:not(:disabled) { color: #ffe08a; }
.more-arrow:disabled { opacity: 0.3; cursor: default; }

/* minimap (ตาม ref): กรอบน้ำเงินเข้มขอบทอง ดาวทองมุมซ้ายบน/ซ้ายล่าง อัญมณีมุมขวาล่าง ปุ่มสี่เหลี่ยมขอบทอง */
#hud-minimap {
  position: relative;
  padding: 7px;
  line-height: 0;
  background: #0d1838;
  border: 3px solid #e2b95a;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #3b2708, inset 0 0 0 2px #1d2f62, 0 4px 10px rgba(0, 0, 0, 0.55);
}
#hud-minimap::before {
  content: '';
  position: absolute;
  inset: -16px -10px -14px -16px;
  background:
    var(--ui-star) left top / 38px 38px no-repeat,
    var(--ui-star) left bottom / 30px 30px no-repeat,
    var(--ui-gem) right 0 bottom 0 / 13px 19px no-repeat;
  pointer-events: none;
  z-index: 1;
}
#minimap-canvas {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(226, 185, 90, 0.55);
  cursor: zoom-in;
}
/* ปุ่มขยาย/ซ่อน มุมขวาบนของ minimap */
.mm-tools { position: absolute; top: 11px; right: 11px; z-index: 2; display: flex; gap: 4px; line-height: 1; }
.mm-tool {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid #e2b95a;
  border-radius: 5px;
  background: linear-gradient(#1d2f62, #0b1533);
  color: #ffd66e;
  font-size: 14px;
  font-weight: 900;
  cursor: var(--cur-hand);
  box-shadow: 0 0 0 1px #3b2708, 0 2px 4px rgba(0, 0, 0, 0.5);
}
.mm-tool:hover { filter: brightness(1.3); }
/* ซ่อน minimap แล้วเหลือปุ่มเล็กไว้กดแสดงกลับ */
.mm-show { align-self: flex-end; width: 38px; height: 38px; border: 2px solid #e2b95a; border-radius: 8px; background: linear-gradient(#1d2f62, #0b1533); font-size: 19px; cursor: var(--cur-hand); pointer-events: auto; box-shadow: 0 0 0 1px #3b2708, 0 2px 6px rgba(0, 0, 0, 0.5); }
.mm-show:hover { filter: brightness(1.2); }

/* มุมซ้ายล่าง: จอยสติ๊กเดิน (ตาม ref: วงแหวนน้ำเงินเข้ม ขอบทอง ตัวอักษร WASD 4 ทิศ ลูกบอลฟ้ากลาง) */
#hud-joystick {
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  cursor: grab;
  background: radial-gradient(circle, #1d2b4f 0%, #16213d 55%, #0f1830 100%);
  border: 3px solid #c9a24a;
  box-shadow: 0 0 0 3px #0b1020, 0 0 16px rgba(79, 143, 224, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.6);
}
#hud-joystick.dragging { cursor: grabbing; }
.joy-ring {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 2px solid rgba(201, 162, 74, 0.35);
  pointer-events: none;
}
/* ลูกศรสามเหลี่ยมเล็ก 4 ทิศ รอบลูกบอล — ติดสว่างเมื่อเดินทิศนั้น */
.joy-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.08s;
}
.joy-arrow.on { opacity: 1; filter: drop-shadow(0 0 4px #7fc8ff); }
.joy-arrow-up { left: 75px; top: 20px; border-bottom-color: #cfe6ff; border-top-width: 0; }
.joy-arrow-down { left: 75px; bottom: 20px; border-top-color: #cfe6ff; border-bottom-width: 0; }
.joy-arrow-left { top: 75px; left: 20px; border-right-color: #cfe6ff; border-left-width: 0; }
.joy-arrow-right { top: 75px; right: 20px; border-left-color: #cfe6ff; border-right-width: 0; }
/* ตัวอักษร W A S D ในวงกลมเล็ก ทับขอบวงนอก */
.joy-key {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a1f2b;
  border: 2px solid #c9a24a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  pointer-events: none;
  transition: background 0.08s, box-shadow 0.08s;
}
.joy-key.on { background: #2f6fd0; box-shadow: 0 0 8px #7fc8ff; }
.joy-key-w { left: 68px; top: -14px; }
.joy-key-s { left: 68px; bottom: -14px; }
.joy-key-a { top: 68px; left: -14px; }
.joy-key-d { top: 68px; right: -14px; }
/* ลูกบอลกลาง: เลื่อนด้วย transform ตามทิศที่เดิน */
#joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #6fb8ff 0%, #2f7ae0 40%, #1646a8 75%, #0c2c73 100%);
  border: 3px solid #c9a24a;
  box-shadow: 0 0 0 2px #0b1020, 0 0 14px rgba(111, 184, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.06s linear;
}
.joy-star { color: #eaf6ff; font-size: 30px; text-shadow: 0 0 8px #bfe3ff; }

/* มุมขวาล่าง: แผงปุ่มแอคชัน (ปุ่มโจมตีใหญ่ + AUTO + ช่องยา/สกิล 1-9 เรียงเป็นวง ตาม ref) */
#hud > #hud-actions {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 320px;
  height: 330px;
  pointer-events: none; /* พื้นที่ว่างระหว่างปุ่มคลิกทะลุไปโดน canvas (คลิกเดิน/คลิกมอน) ได้ */
}
/* ซ่อนไว้จนกว่า UIManager จะจัดตำแหน่งปุ่มเสร็จ (ตอนเกมยังโหลด ปุ่มจะกองอยู่มุมบนซ้ายของกล่อง) */
#hud > #hud-actions:not(.ready) { visibility: hidden; }
.act-btn {
  pointer-events: auto;
  position: absolute;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px; /* left/top ที่ตั้งผ่าน style = จุดกึ่งกลางปุ่ม */
  padding: 0;
  border-radius: 50%;
  border: 2px solid #c9a24a;
  box-shadow: 0 0 0 2px #1a1f2b, inset 0 0 0 2px #0b1020, 0 3px 6px rgba(0, 0, 0, 0.45);
  background: radial-gradient(circle at 50% 35%, #2f4a78 0%, #1a2748 60%, #0e1630 100%);
  color: #fff;
  cursor: var(--cur-hand);
  user-select: none;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.act-btn:hover { filter: brightness(1.15); }
.act-btn:active, .act-btn.pressed { transform: scale(0.94); }
.act-icon { font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.act-icon svg { width: 34px; height: 34px; display: block; }
/* เลขปุ่มลัด: วงกลมเล็กทับขอบบน */
.act-key {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #1a1f2b;
  border: 2px solid #c9a24a;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
}
/* ป้ายล่าง: SP ของสกิล / AUTO */
.act-sub {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 6px;
  background: #16223d;
  border: 1px solid #5d7bb5;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
  color: #fff;
}
.act-sub:empty { display: none; }
/* จำนวนยา: ตัวเลขใหญ่ขอบดำมุมขวาล่าง */
.act-count {
  position: absolute;
  right: -8px;
  bottom: -8px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 2px #000;
  pointer-events: none;
}
.act-count:empty { display: none; }
/* คูลดาวน์: เงามืดกวาดเป็นวงตามเวลาที่เหลือ + ตัวเลขวินาที */
.act-cd {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: conic-gradient(rgba(0, 0, 0, 0.65) calc(var(--cd, 0) * 1turn), transparent 0);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.act-slot.cooling .act-cd { display: flex; }
/* ช่องว่าง (ยังไม่ได้ใส่อะไร) */
.act-slot.empty {
  background: radial-gradient(circle, rgba(120, 130, 150, 0.35), rgba(60, 70, 90, 0.35));
  border-color: rgba(201, 162, 74, 0.45);
  cursor: var(--cur-arrow);
}
.act-slot.empty .act-icon::after { content: '✦'; font-size: 18px; color: rgba(255, 255, 255, 0.35); }
.act-slot.unusable .act-icon { filter: grayscale(0.8) brightness(0.7); }
/* ปุ่มโจมตีใหญ่ */
.act-attack {
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 3px solid #4f8fe0;
  box-shadow: 0 0 0 3px #1a1f2b, inset 0 0 0 3px #0b1020, 0 0 14px rgba(79, 143, 224, 0.55), 0 4px 8px rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at 50% 35%, #3b5d99 0%, #1c2c55 60%, #0d1530 100%);
}
.act-attack .act-icon { font-size: 52px; }
.act-attack.has-target { box-shadow: 0 0 0 3px #1a1f2b, inset 0 0 0 3px #0b1020, 0 0 20px rgba(241, 196, 15, 0.8), 0 4px 8px rgba(0, 0, 0, 0.5); border-color: #f1c40f; }
.act-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 10px;
  border-radius: 8px;
  background: #1a1f2b;
  border: 2px solid #c9a24a;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
/* AUTO เปิดอยู่ = เรืองแสงเขียว */
.act-auto.on {
  border-color: #3fe0c5;
  box-shadow: 0 0 0 2px #1a1f2b, inset 0 0 0 2px #0b1020, 0 0 14px rgba(63, 224, 197, 0.85);
}
.act-auto.on .act-sub { background: #0f6b5c; border-color: #3fe0c5; }
/* ช่องลูกธนูข้างปุ่ม AUTO (แสดงเมื่อถือธนู) + รายการเลือกลูกธนู */
.act-ammo { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: #b58b4c; }
.act-ammo .act-icon .skill-ico { width: 40px; height: 40px; }
.act-ammo.empty { background: radial-gradient(circle, rgba(120, 130, 150, 0.35), rgba(60, 70, 90, 0.35)); }
.act-ammo.empty .act-icon::after { content: '🏹'; font-size: 22px; opacity: 0.55; }
.act-ammo .act-count { font-size: 13px; right: -10px; }
.ammo-picker {
  position: absolute;
  pointer-events: auto;
  min-width: 190px;
  max-width: 240px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(14, 20, 38, 0.95);
  border: 1px solid #c9a24a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  color: #eef2ff;
  font-size: 12px;
  z-index: 5;
}
.ammo-head { font-weight: 700; color: #f1d27a; padding: 2px 4px 6px; }
.ammo-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 6px; cursor: var(--cur-hand); }
.ammo-row:hover { background: rgba(79, 143, 224, 0.25); }
.ammo-row.active { background: rgba(241, 196, 15, 0.18); outline: 1px solid #f1c40f; }
.ammo-ico { width: 28px; height: 28px; flex-shrink: 0; }
.ammo-ico .skill-ico { display: block; width: 28px; height: 28px; }
.ammo-name { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ammo-name small { font-size: 10px; font-weight: 700; }
.ammo-n { font-weight: 700; color: #cfd8ff; }
.ammo-empty { padding: 4px; color: #aab4cc; line-height: 1.4; }

/* หน้าต่างเมนู (แยกกันคนละหน้าต่าง, เปิดซ้อนกันได้, ลากที่แถบหัว) */
.game-window {
  position: fixed;
  width: min(var(--win-w, 440px), 94vw);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: rgba(24, 32, 50, 0.97);
  border: 2px solid #c9a24a;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #0b1020, 0 10px 28px rgba(0, 0, 0, 0.6);
  z-index: 30;
}
.win-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(#2a3a62, #1d2a4a);
  border-bottom: 1px solid #3d4c6e;
  border-radius: 10px 10px 0 0;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.win-icon { font-size: 18px; }
.win-title { flex: 1; font-size: 15px; font-weight: 700; color: #f5d76e; text-shadow: 0 1px 2px #000; }
.win-close {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #5d6b86;
  background: #1a2238;
  color: #cfd8e0;
  font-size: 13px;
  cursor: var(--cur-hand);
}
.win-close:hover { background: #c0392b; border-color: #e74c3c; color: #fff; }
.win-body { padding: 12px; overflow-y: auto; }
#bigmap-canvas { display: block; width: 100%; height: auto; border-radius: 8px; image-rendering: pixelated; }

/* กระเป๋า */
.bag-list { display: flex; flex-direction: column; gap: 8px; }
.bag-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: #1f2a44;
  border: 1px solid #33405e;
}
.bag-icon { width: 36px; height: 36px; flex-shrink: 0; }
.bag-icon svg { width: 100%; height: 100%; }
.bag-info { flex: 1; min-width: 0; }
.bag-name { font-weight: 700; color: #f5d76e; font-size: 14px; }
.bag-desc { font-size: 12px; color: #9aa7b3; }
.bag-count { font-size: 16px; font-weight: 700; color: #fff; min-width: 36px; text-align: right; }
.bag-row button {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #3d4c5e;
  background: #263140;
  color: #cfd8e0;
  cursor: var(--cur-hand);
}
.bag-row button:hover:not(:disabled) { background: #f39c12; color: #1c1c1c; }
.bag-row button:disabled { opacity: 0.4; cursor: not-allowed; }
.bag-empty { color: #9aa7b3; font-size: 13px; text-align: center; padding: 12px; }

.panel-title {
  font-weight: bold;
  color: #f5d76e;
  margin-bottom: 8px;
  font-size: 13px;
}

.job-chain {
  font-size: 12px;
  color: #9aa7b3;
  margin-bottom: 8px;
}
.job-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #263140;
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.job-option-reason { color: #e74c3c; font-size: 11px; }
.job-option-reason.ok { color: #2ecc71; font-weight: bold; }
.job-option button, .stat-row button, .skill-row button {
  background: #f39c12;
  color: #1c1c1c;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: bold;
  cursor: var(--cur-hand);
  white-space: nowrap;
}
.job-option button:disabled, .stat-row button:disabled, .skill-row button:disabled {
  background: #4a5568;
  color: #8a94a3;
  cursor: not-allowed;
}
.job-maxed { color: #2ecc71; font-size: 12px; font-weight: bold; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.stat-label { flex: 1; color: #cfd8e0; }
.stat-value { width: 30px; text-align: right; font-weight: bold; color: #f5d76e; }

.skill-list { max-height: 320px; overflow-y: auto; }
.skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #2a3442;
}
.skill-name { font-size: 12px; font-weight: bold; color: #e8e8e8; }
.skill-type { font-size: 10px; color: #7fb3d5; font-weight: normal; }
.skill-lvl { font-size: 10px; color: #9aa7b3; font-weight: normal; }
.skill-desc { font-size: 11px; color: #8a94a3; margin-top: 2px; }

.combat-log {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column-reverse;
  font-size: 11px;
}
.log-line {
  padding: 2px 0;
  border-bottom: 1px solid #232d3a;
  color: #b7c2cd;
}

.target-empty { color: #7f8c9a; font-size: 12px; }

/* บอทช่วยเล่น */
/* checkbox/หัวข้อแบบเดิม (หน้าต่างสัตว์เลี้ยง/ข่าว) */
.bot-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e8e8e8;
  cursor: var(--cur-hand);
  margin-bottom: 8px;
}
.bot-toggle input { accent-color: #f39c12; cursor: var(--cur-hand); }
.bot-section {
  border-top: 1px solid #2a3442;
  padding-top: 10px;
  margin-top: 10px;
}
.bot-section-title { font-size: 12px; font-weight: bold; color: #cfd8e0; margin-bottom: 6px; }
/* ===== หน้าต่าง Auto Play (ตาม ref): หัวน้ำเงินขอบทอง, ตัวครีม, หัวข้อแถบน้ำเงิน ===== */
.ap-window { background: #f4ecda; border-color: #c9a24a; }
.ap-header.win-header { background: linear-gradient(#27407a, #16264f); border-bottom: 2px solid #c9a24a; }
.ap-header .win-title { text-align: center; color: #fff; font-size: 14px; }
.ap-fleur { color: #f5d76e; font-size: 18px; text-shadow: 0 1px 2px #000; }
.ap-header .win-close { border-radius: 5px; background: #b3261d; border-color: #f0c77a; color: #fff; }
.ap-body { padding: 8px 10px 10px; background: #f4ecda; color: #3b2c1a; font-size: 12px; }
.ap-body small { display: block; color: #6b5a44; font-size: 11px; line-height: 1.35; }
.ap-hero {
  display: grid; grid-template-columns: 56px auto 1fr; align-items: center; gap: 4px 10px;
  padding: 8px 10px; border: 2px solid #d4c29a; border-radius: 8px; background: #fbf6ea;
}
.ap-portrait { width: 56px; height: 56px; border: 2px solid #8a7550; border-radius: 50%; overflow: hidden; background: #2a3552; display: grid; place-items: center; }
.ap-portrait .jb-portrait { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ap-hero-state small { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.ap-zz { padding: 0 4px; border: 1px solid #27407a; border-radius: 4px; color: #27407a; font-weight: 700; background: #fff; }
.ap-status {
  padding: 4px 12px; border: 2px solid #c9a24a; border-radius: 6px;
  background: linear-gradient(#6b4a22, #4a3016); color: #fff3cf; font-weight: 700; text-align: center; white-space: nowrap;
}
.ap-status.active { background: linear-gradient(#2e7d43, #1d5a2e); }
.ap-status.resting { background: linear-gradient(#b87a14, #8a5a0c); }
.ap-start {
  justify-self: end; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border: 2px solid #f0c77a; border-radius: 8px; background: linear-gradient(#2e6bd6, #1a449c);
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: var(--cur-hand); box-shadow: 0 2px 0 #0e2a66;
}
.ap-start.running { background: linear-gradient(#d0453a, #9c231a); box-shadow: 0 2px 0 #5c130d; }
.ap-start:hover { filter: brightness(1.12); }
.ap-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; background: #f5c542; color: #6b4a00; font-size: 12px; }
.ap-start.running .ap-play { font-size: 0; }
.ap-start.running .ap-play::before { content: ''; width: 9px; height: 9px; background: #6b4a00; }
.ap-hint, .ap-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: #6b5a44; font-size: 11px; }
.ap-hint i, .ap-note i {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: #3b2c1a; color: #fff; font-style: normal; font-weight: 700; font-size: 11px;
}
.ap-note { padding: 7px 9px; border: 1px solid #d4c29a; border-radius: 6px; background: #fbf6ea; }
.ap-sec { margin-top: 10px; }
.ap-sec-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px; padding: 5px 10px 5px 4px;
  border: 1px solid #c9a24a; border-radius: 5px; background: linear-gradient(#27407a, #16264f);
  color: #fff; font-size: 13px; box-shadow: inset 0 0 0 1px #0b1638;
}
.ap-sec-title i {
  display: grid; place-items: center; width: 26px; height: 26px; margin: -8px 0; border: 2px solid #c9a24a;
  border-radius: 50%; background: #3a2a14; font-style: normal; font-size: 14px;
}
.ap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.ap-opt, .ap-choice, .ap-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid #d4c29a; border-radius: 6px;
  background: #fbf6ea; cursor: var(--cur-hand);
}
.ap-opt b, .ap-choice b { color: #3b2c1a; font-size: 12px; }
.ap-wide { margin-bottom: 6px; }
.ap-off { opacity: 0.6; cursor: default; }
.ap-body input[type='checkbox'], .ap-body input[type='radio'] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #2e6bd6; cursor: inherit; }
.ap-ico { flex: none; width: 30px; height: 30px; image-rendering: pixelated; }
.ap-emoji { display: grid; place-items: center; font-style: normal; font-size: 20px; }
.ap-choice.on { border-color: #2e6bd6; background: #e3ecfb; box-shadow: inset 0 0 0 1px #2e6bd6; }
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ap-chip { padding: 5px 8px; }
.ap-chip small { display: inline; }
.ap-skill .skill-ico { flex: none; width: 24px; height: 24px; }
.ap-empty { width: 100%; margin: 0; color: #6b5a44; font-size: 11px; }
.ap-potion { display: grid; gap: 4px; margin-bottom: 6px; padding: 7px 9px; border: 1px solid #d4c29a; border-radius: 6px; background: #fbf6ea; }
.ap-potion-head { display: flex; align-items: center; gap: 7px; cursor: var(--cur-hand); }
.ap-slider, .ap-row { display: flex; align-items: center; gap: 8px; }
.ap-slider input[type='range'] { flex: 1; min-width: 0; accent-color: #d4a017; }
.ap-slider input[type='number'], .ap-row input[type='number'] {
  width: 58px; padding: 3px 6px; border: 1px solid #b9a67c; border-radius: 4px; background: #fff; color: #3b2c1a; font: inherit; text-align: center;
}
.ap-row { margin: 0 0 5px 28px; }
.ap-row span:first-child { width: 120px; }
.ap-body input:disabled { opacity: 0.5; }
.ap-foot { display: grid; gap: 4px; margin-top: 12px; text-align: center; color: #6b5a44; font-size: 11px; }
.ap-foot b { color: #8a7550; letter-spacing: 1px; font-family: Georgia, 'Times New Roman', serif; }

/* แท็บตั้งค่า: เลือกภาษา */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #2a3542;
}
.settings-label { font-size: 13px; color: #cfd8e0; }
.sound-switch { width: 19px; height: 19px; accent-color: #2e5fb8; cursor: var(--cur-hand); }
.lang-switch { display: flex; gap: 6px; }
.lang-switch button {
  min-width: 78px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #3d4c5e;
  background: #263140;
  color: #cfd8e0;
  font-size: 13px;
  cursor: var(--cur-hand);
}
.lang-switch button:hover { background: #324153; }
.lang-switch button.active { background: #f39c12; border-color: #f39c12; color: #1c1c1c; font-weight: 700; }

/* ===== ธีมหน้าต่างตาม ref: กรอบน้ำเงินเข้มขอบทอง, หัวน้ำเงินชื่อกลาง, เนื้อหาพื้นกระดาษสีครีม ===== */
.game-window {
  background: linear-gradient(#22346a, #172449);
  border: 3px solid #c9a24a;
  box-shadow: 0 0 0 2px #0b1020, inset 0 0 0 2px #0b1020, 0 12px 30px rgba(0, 0, 0, 0.6);
}
.win-header {
  justify-content: center;
  position: relative;
  padding: 10px 44px;
  background: linear-gradient(#2c4584, #1a2a57);
  border-bottom: 2px solid #c9a24a;
}
.win-title { flex: none; font-size: 18px; color: #fff; text-shadow: 0 2px 3px #000; letter-spacing: 0.3px; }
.win-title::before, .win-title::after { content: ' ✦ '; color: #f5d76e; font-size: 13px; }
.win-icon { position: absolute; left: 12px; font-size: 20px; }
.win-close {
  position: absolute;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 2px solid #f5d76e;
  background: linear-gradient(#d8453a, #9e2a22);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 0 1px #3a0d0a;
}
.win-close:hover { filter: brightness(1.15); background: linear-gradient(#e85a4f, #b3322a); border-color: #fff3c4; }
.win-body {
  margin: 8px;
  border-radius: 8px;
  background: #f2e7cc;
  border: 1px solid #d9c49a;
  box-shadow: inset 0 0 18px rgba(160, 120, 60, 0.18);
  color: #3b2c1a;
}
/* ปรับสีเนื้อหาเดิมให้อ่านบนพื้นกระดาษได้ (หน้าต่างอื่นยังไม่ได้ออกแบบใหม่ตาม ref) */
.game-window .panel-title { color: #7a5a22; }
.game-window .job-chain { color: #6b5a42; }
.game-window .job-option { background: #e8dab8; border: 1px solid #d3bd8f; }
.game-window .skill-row { border-bottom-color: #dccaa2; }
.game-window .skill-name { color: #3b2c1a; }
.game-window .skill-type { color: #2e5fb8; }
.game-window .skill-lvl, .game-window .skill-desc { color: #6b5a42; }
.game-window .log-line { color: #4a3b25; border-bottom-color: #dccaa2; }
.game-window .bot-toggle, .game-window .bot-radio, .game-window .bot-threshold-row, .game-window .bot-section-title { color: #3b2c1a; }
.game-window .bot-section { border-top-color: #dccaa2; }
.game-window .bot-status { background: #e8dab8; border-color: #d3bd8f; color: #2e5fb8; }
.game-window .bot-status.active { color: #1e8449; }
.game-window .bot-status.resting { color: #b9770e; }
.game-window .bot-threshold-row input, .game-window #bot-range { background: #fffaf0; border-color: #c9b58a; color: #3b2c1a; }
.game-window .bot-monster-row { color: #3b2c1a; }
.game-window .settings-row { border-bottom-color: #dccaa2; }
.game-window .settings-label { color: #3b2c1a; }
.game-window .lang-switch button { background: #e8dab8; border-color: #c9b58a; color: #3b2c1a; }
.game-window .lang-switch button.active { background: #2e5fb8; border-color: #1d3f82; color: #fff; }
.game-window .bag-row { background: #e8dab8; border-color: #d3bd8f; }
.game-window .bag-name { color: #7a5a22; }
.game-window .bag-desc { color: #6b5a42; }
.game-window .bag-count { color: #3b2c1a; }

/* แผงย่อยในหน้าต่าง (หัวน้ำตาลกลาง ตาม ref) */
.pp-panel {
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  border-radius: 8px;
  padding: 8px;
}
.pp-head {
  margin: -8px -8px 8px;
  padding: 5px 8px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#8a6a3a, #6d5129);
  color: #fff3d6;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 1px #2b1d0a;
}

/* ===== หน้าต่าง Status ===== */
#win-stat .win-body { overflow-x: hidden; }
.st-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.st-base-list { display: flex; flex-direction: column; gap: 5px; }
.st-row {
  display: grid;
  grid-template-columns: 30px 36px 40px 34px auto;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 6px;
  background: #efe2c2;
  border: 1px solid #dccaa2;
}
.st-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--c);
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.st-name { font-weight: 700; font-size: 14px; color: #2b2012; }
.st-val {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  background: #fffaf0;
  border: 1px solid #cdb78a;
  border-radius: 4px;
  padding: 1px 0;
}
.st-bonus { color: #d2691e; font-weight: 700; font-size: 13px; text-align: left; }
.st-plus {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid #5c6b86;
  background: linear-gradient(#8fa0bd, #5e6f8e);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: var(--cur-hand);
}
.st-plus:hover:not(:disabled) { background: linear-gradient(#f5c451, #d69b1c); border-color: #9c6a0a; }
.st-plus:disabled { opacity: 0.45; cursor: not-allowed; }
.st-btns { display: flex; gap: 3px; justify-content: flex-end; }
.st-plus10 { width: 34px; font-size: 12px; }
.st-minus { background: linear-gradient(#b9a17a, #8c7550); border-color: #6d5a3a; }
.st-val.pending { color: #1e8449; background: #eafbe9; border-color: #6fbf73; }
.st-row[data-guide], .st-drow[data-guide] { cursor: help; }
.status-guide-tooltip {
  position: fixed;
  z-index: 1000;
  width: min(320px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 9px 11px;
  border: 1px solid #c9a24a;
  border-radius: 7px;
  background: #172540;
  box-shadow: 0 5px 14px #18243788;
  color: #fff4d7;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
}
.st-actions { display: flex; gap: 6px; }
.st-btn {
  padding: 6px 14px;
  border-radius: 8px;
  border: 2px solid #8a7a5a;
  background: linear-gradient(#d9ccb0, #b8a57f);
  color: #3b2c1a;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.st-btn-primary { border-color: #c9a24a; background: linear-gradient(#3a64c4, #1f3f8f); color: #fff; }
.st-btn:hover:not(:disabled) { filter: brightness(1.1); }
.st-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.st-derived-grid { display: flex; flex-direction: column; gap: 2px; } /* แถวเดียวยาวลงมา (ผู้เล่นไม่อยากให้แบ่ง 2 คอลัมน์) */
.st-drow {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #efe2c2;
  border: 1px solid #dccaa2;
  font-size: 12px;
}
.st-dicon { font-size: 15px; text-align: center; }
.st-dname { font-weight: 700; color: #2e4f99; white-space: nowrap; }
.st-dname small { margin-left: 4px; font-size: 10px; color: #8a7a5a; }
.st-dval { font-weight: 700; color: #2b2012; white-space: nowrap; }
.st-preview {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #6fbf73;
  border-radius: 8px;
  background: #eaf9e9;
  color: #25492c;
}
.st-preview-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.st-preview-changes { display: flex; flex-wrap: wrap; gap: 5px; }
.st-preview-change {
  padding: 4px 7px;
  border: 1px solid #a9d5a5;
  border-radius: 5px;
  background: #fffef8;
  font-size: 12px;
  white-space: nowrap;
}
.st-preview-change em { color: #168044; font-style: normal; font-weight: 700; }
.st-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border-radius: 8px;
  background: #efe2c2;
  border: 1px solid #d3bd8f;
}
.st-footer-label { font-weight: 700; color: #6d5129; }
.st-points {
  margin-left: auto;
  padding: 6px 18px;
  border-radius: 8px;
  background: linear-gradient(#22346a, #172449);
  border: 2px solid #c9a24a;
  color: #fff;
  font-size: 14px;
}
.st-points b { font-size: 20px; color: #fff; margin-right: 4px; }
@media (max-width: 640px) {
  .st-grid { grid-template-columns: 1fr; }
}

/* ===== ธีมหน้าต่างกลางคืนตาม ref (.win-night: Status, Skill Tree — หน้าต่างอื่นยังเป็นพื้นกระดาษ) + หน้าต่าง Status ===== */
.win-night { --st-gold: #e2b95a; --st-line: rgba(120, 150, 220, 0.22); border-color: var(--st-gold); }
.win-night .win-header {
  padding: 20px 44px 7px;
  background: linear-gradient(#1b2d60, #101c40);
  border-bottom: 2px solid var(--st-gold);
}
/* คริสตัลกลางบนหัวหน้าต่าง */
.win-night .win-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 46px;
  height: 26px;
  transform: translateX(-50%);
  background: var(--ui-crystal) center / contain no-repeat;
  pointer-events: none;
}
/* ป้ายชื่อกลาง: แถบน้ำเงินขอบทอง ปลายแหลมสองข้าง */
.win-night .win-title {
  position: relative;
  padding: 2px 28px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(#20356e, #0f1b40);
  border-top: 2px solid var(--st-gold);
  border-bottom: 2px solid var(--st-gold);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}
.win-night .win-title::before, .win-night .win-title::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); color: #8fd0ff; font-size: 11px; text-shadow: 0 0 6px #5fb4ff; }
.win-night .win-title::before { left: 12px; }
.win-night .win-title::after { right: 12px; }
.win-night .win-icon { left: 12px; font-size: 18px; }
.win-night .win-close { right: 10px; width: 28px; height: 28px; font-size: 14px; }
.win-night .win-body {
  margin: 0;
  padding: 8px 10px 8px;
  border: none;
  border-radius: 0 0 4px 4px;
  color: #e8eeff;
  background:
    var(--ui-castle) bottom / 100% 34% no-repeat,
    radial-gradient(ellipse at 50% 20%, #1c2f62 0%, #111d42 55%, #0a1230 100%);
  box-shadow: none;
}
#win-stat .st-grid { grid-template-columns: auto 1fr; gap: 8px; }
#win-stat .pp-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 8px;
  background: rgba(10, 18, 48, 0.72);
  border: 2px solid rgba(226, 185, 90, 0.75);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #0a1230, inset 0 0 14px rgba(0, 0, 0, 0.45);
}
#win-stat .pp-head {
  margin: 0 0 6px;
  padding: 0 0 5px;
  border-radius: 0;
  background: none;
  border-bottom: 1px solid var(--st-line);
  color: #f3d27a;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 2px 3px #000;
}
#win-stat .pp-head::before, #win-stat .pp-head::after { content: ' ✦ '; font-size: 10px; color: #f3d27a; }

/* แถวค่าสถานะพื้นฐาน: ไอคอนสี่เหลี่ยมมนขอบทอง · ชื่อ · ช่องค่า · โบนัสสีทอง · ปุ่ม − + +10 */
#win-stat .st-base-list { flex: 1; gap: 4px; }
#win-stat .st-base-list .st-row { flex: 1; }
#win-stat .st-row {
  grid-template-columns: 26px 34px 40px 30px auto;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(30, 48, 100, 0.55), rgba(16, 28, 66, 0.35));
  border: 1px solid var(--st-line);
}
#win-stat .st-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 14px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 80%, #fff 20%), color-mix(in srgb, var(--c) 70%, #000 30%));
  border: 2px solid var(--st-gold);
  box-shadow: 0 0 0 1px #0a1230, inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#win-stat .st-name { color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#win-stat .st-val {
  padding: 1px 0;
  font-size: 14px;
  color: #fff;
  background: #0b1535;
  border: 1px solid #3c4f82;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
#win-stat .st-val.pending { color: #7dffa8; background: #0d2a2a; border-color: #3fa66b; }
#win-stat .st-bonus { color: #f3c04a; font-size: 13px; }
#win-stat .st-btns { gap: 4px; }
#win-stat .st-plus {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 2px solid var(--st-gold);
  background: linear-gradient(#2f5bd0, #1a3690);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 0 0 1px #0a1230, inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#win-stat .st-plus10 { width: 34px; font-size: 12px; background: linear-gradient(#3a6ce0, #1d3c9c); }
#win-stat .st-minus { background: linear-gradient(#2a3656, #172038); color: #c5cde0; }
#win-stat .st-plus:hover:not(:disabled) { background: linear-gradient(#4b7cf0, #2446b0); filter: brightness(1.1); border-color: #ffe7a0; }
#win-stat .st-minus:hover:not(:disabled) { background: linear-gradient(#3a4870, #1f2a48); }
#win-stat .st-plus:disabled { opacity: 0.4; }

/* ค่าสถานะคำนวณ: รายการยาวลงมา ชื่อสีฟ้าอ่อน ค่าสีขาวชิดขวา เส้นคั่นจางๆ */
#win-stat .st-derived-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
#win-stat .st-drow {
  grid-template-columns: 20px 1fr auto;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--st-line);
  font-size: 13px;
  line-height: 1.2;
}
#win-stat .st-drow:nth-last-child(-n + 2) { border-bottom: none; }
#win-stat .st-drow:hover { background: rgba(80, 120, 220, 0.12); }
#win-stat .st-dicon { font-size: 14px; }
/* ตัวย่อ (ATK) ตัวหนา + ชื่อไทยเล็กบรรทัดล่าง */
#win-stat .st-dname { min-width: 0; color: #9cc3ff; font-weight: 700; font-size: 13px; }
#win-stat .st-dname small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; color: #8a9cc6; font-size: 11px; font-weight: 400; }
#win-stat .st-dval { color: #fff; font-size: 14px; font-weight: 600; }

/* พรีวิวผลที่จะได้ (ตอนจองแต้ม) */
#win-stat .st-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 8px; background: rgba(13, 42, 42, 0.8); border-color: #3fa66b; color: #d6ffe4; }
#win-stat .st-preview-changes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#win-stat .st-preview-title { margin: 0; white-space: nowrap; }
#win-stat .st-preview-change { background: #0b1535; border-color: #2f6f58; color: #e8eeff; }
#win-stat .st-preview-change em { color: #7dffa8; }

/* แถบล่าง: ดาว + "แต้มสถานะ" · กล่องแต้มคงเหลือ · รีเซ็ต · ยืนยัน (ปุ่มทอง) */
#win-stat .st-footer {
  margin-top: 8px;
  padding: 5px 8px 5px 10px;
  gap: 8px;
  background: rgba(10, 18, 48, 0.82);
  border: 2px solid rgba(226, 185, 90, 0.75);
  border-radius: 6px;
}
#win-stat .st-footer-label { color: #f3e3b8; font-size: 14px; font-weight: 700; text-shadow: 0 2px 3px #000; }
#win-stat .st-points {
  margin-left: auto;
  padding: 1px 14px;
  background: #0b1535;
  border: 2px solid var(--st-gold);
  border-radius: 8px;
  color: #9cc3ff;
  font-size: 13px;
}
#win-stat .st-points b { font-size: 20px; color: #f3c04a; text-shadow: 0 2px 3px #000; }
.win-night .st-actions .st-btn { min-width: 80px; padding: 4px 12px; border-radius: 7px; font-size: 14px; font-weight: 700; }
.win-night .st-actions .st-btn:not(.st-btn-primary) { border: 2px solid var(--st-gold); background: linear-gradient(#22346a, #111d42); color: #e8eeff; }
.win-night .st-actions .st-btn:not(.st-btn-primary)::before { content: '↻ '; }
.win-night .st-actions .st-btn-primary { border: 2px solid #fff0b8; background: linear-gradient(#f7d06a, #d9a02a); color: #2a1c06; box-shadow: 0 0 0 1px #6b4a14; }
.win-night .st-actions .st-btn-primary::before { content: '✔ '; }
@media (max-width: 640px) {
  #win-stat .st-grid { grid-template-columns: 1fr; }
  #win-stat .st-footer { flex-wrap: wrap; }
  #win-stat .st-footer-label { font-size: 15px; }
}

/* ===== หน้าต่าง Skill Tree (ตาม ref) ===== */
.skill-ico { display: block; width: 100%; height: 100%; }
.act-slot .act-icon .skill-ico { width: 44px; height: 44px; border-radius: 50%; }
.act-attack .act-icon .skill-ico { width: 74px; height: 74px; }
.sk-sec-head {
  margin: 2px 0 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: linear-gradient(#2c4584, #1a2a57);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid #c9a24a;
}
.sk-sec-tag { color: #f5d76e; letter-spacing: 1px; }
.sk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.sk-empty { grid-column: 1 / -1; color: #6b5a42; font-size: 13px; padding: 8px; text-align: center; }
.sk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  border-radius: 8px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  cursor: var(--cur-hand);
}
.sk-card.selected { border: 2px solid #4aa3ff; box-shadow: 0 0 10px rgba(74, 163, 255, 0.6); background: #fdf8ea; }
.sk-card.unlearned .sk-icon { filter: grayscale(0.85) brightness(0.8); }
.sk-selected-tag {
  position: absolute;
  top: -1px;
  right: -1px;
  padding: 1px 6px;
  border-radius: 0 6px 0 6px;
  background: #2e5fb8;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.sk-name { font-weight: 700; font-size: 13px; color: #2b2012; text-align: center; min-height: 18px; }
.sk-icon {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  border: 2px solid #b39a6b;
  background-color: #fffaf0;
  touch-action: none;
}
.sk-icon[data-drag-kind] { cursor: grab; }
.sk-lv { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.sk-lv span.pending { color: #1e8449; }
.sk-lv button {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #5c6b86;
  background: linear-gradient(#8fa0bd, #5e6f8e);
  color: #fff;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.sk-lv button:hover:not(:disabled) { background: linear-gradient(#f5c451, #d69b1c); border-color: #9c6a0a; }
.sk-lv button:disabled { opacity: 0.4; cursor: not-allowed; }
.sk-state {
  padding: 1px 12px;
  border-radius: 10px;
  font-size: 11px;
  background: #e2d4b2;
  color: #7a6a4e;
  border: 1px solid #cdb78a;
}
.sk-state.on { background: #f3e2b0; color: #6d5129; border-color: #c9a24a; }
.sk-detail {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  min-height: 90px;
}
.sk-detail:empty { display: none; }
.sk-detail-icon { width: 76px; height: 76px; flex-shrink: 0; border-radius: 8px; border: 2px solid #2e5fb8; background-color: #fffaf0; }
.sk-detail-body { flex: 1; min-width: 0; }
.sk-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-detail-name { font-size: 18px; font-weight: 700; color: #1d2a57; }
.sk-detail-pend { color: #1e8449; font-weight: 700; font-size: 12px; }
.sk-use { margin-left: auto; padding: 4px 14px; }
.sk-detail-info { font-size: 12px; font-weight: 700; color: #2e5fb8; margin: 3px 0; }
.sk-detail-desc { font-size: 13px; color: #3b2c1a; }
.sk-detail-hint { font-size: 11px; color: #6b5a42; margin-top: 6px; }
.sk-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(#22346a, #172449);
  border: 2px solid #c9a24a;
  color: #fff;
}
.sk-points { font-weight: 700; font-size: 15px; }
.sk-points b { font-size: 18px; color: #f5d76e; margin-left: 4px; }
.sk-slotbar {
  margin: 10px auto 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(#22346a, #172449);
  border: 2px solid #c9a24a;
  width: max-content;
  max-width: 100%;
}
.sk-slot {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 4px;
  border-radius: 6px;
  border: 2px solid #8a9bc4;
  background: #e9eef8;
  touch-action: none;
}
.sk-slot[data-drag-kind] { cursor: grab; }
.sk-slot.empty { background: rgba(233, 238, 248, 0.25); border-style: dashed; }
.sk-slot svg { width: 100%; height: 100%; }
.sk-slot-num {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.drop-hover { outline: 3px solid #3fe0c5 !important; outline-offset: 2px; }
.sk-drag-ghost {
  position: fixed;
  z-index: 200000;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
.sk-drag-ghost svg { width: 100%; height: 100%; }
[data-drag-kind] { touch-action: none; user-select: none; }
@media (max-width: 700px) {
  .sk-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Skill Tree โฉมใหม่ตาม ref (ธีม .win-night): กรอบหมวด ACTIVE/PASSIVE ขอบทอง, การ์ดน้ำเงินเข้ม, รายละเอียดมีเงาปราสาท, แถบช่อง 1-9,0 ขอบทอง */
#win-skill { max-height: calc(84vh / var(--win-scale, 1)); }
#win-skill .win-body { padding: 8px 14px 6px; }
/* แท็บสายอาชีพ (Novice → อาชีพขั้น 1 → ขั้น 2) แต่ละแท็บแสดงเฉพาะสกิลของอาชีพนั้น */
#win-skill .sk-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #3a4b78; overflow-x: auto; scrollbar-width: none; }
#win-skill .sk-tab {
  position: relative; flex-shrink: 0; padding: 5px 16px 6px; margin-bottom: -1px;
  border: 1px solid #3a4b78; border-radius: 8px 8px 0 0; background: #0f1a3a; color: #9fb3dc;
  font: 700 13px/1.2 inherit; letter-spacing: 0.5px; cursor: var(--cur-hand);
}
#win-skill .sk-tab:hover { color: #e6eeff; }
#win-skill .sk-tab.active { background: #1c2c5c; color: #f3d27a; border-color: #c9a24a #c9a24a #1c2c5c; }
#win-skill .sk-tab-pend { margin-left: 5px; font-style: normal; font-size: 11px; color: #7dff9a; }
#win-skill .sk-state.locked { color: #ffb4a0; border-color: #8a4a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#win-skill .sk-detail-req { margin-top: 3px; font-size: 12px; color: #c5d3f0; }
#win-skill .sk-detail-req span { margin-right: 8px; }
#win-skill .sk-detail-req .ok { color: #7dff9a; }
#win-skill .sk-detail-req .miss { color: #ffb4a0; }
#win-skill .sk-sec {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  column-gap: 8px;
  margin-bottom: 6px;
  padding: 0 8px 8px;
  background: rgba(10, 18, 48, 0.6);
  border: 2px solid rgba(226, 185, 90, 0.75);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #0a1230, inset 0 0 14px rgba(0, 0, 0, 0.45);
}
#win-skill .sk-sec-head {
  margin: 0 -8px 8px;
  padding: 4px 10px;
  border: none;
  border-bottom: 1px solid rgba(226, 185, 90, 0.45);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(40, 62, 120, 0.55), transparent 70%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
#win-skill .sk-sec-tag { color: #f3d27a; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; font-family: Georgia, 'Times New Roman', serif; }
#win-skill .sk-sec-head { grid-column: 1 / -1; }
#win-skill .sk-cards { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; margin-bottom: 0; }
#win-skill .sk-empty { padding: 2px 8px; color: #8fb6f0; font-size: 13px; }
#win-skill .sk-empty::before { content: ''; display: block; width: 22px; height: 22px; margin: 0 auto 2px; background: var(--ui-star) center / contain no-repeat; opacity: 0.8; }
#win-skill .sk-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  column-gap: 6px;
  row-gap: 3px;
  min-height: 82px;
  padding: 5px;
  background: linear-gradient(#17285a, #0d1838);
  border: 2px solid rgba(226, 185, 90, 0.6);
  border-radius: 6px;
}
#win-skill .sk-card:hover { border-color: #f3d27a; }
#win-skill .sk-card.selected { background: linear-gradient(#1a3070, #0e1b42); border: 2px solid #4aa8ff; box-shadow: 0 0 0 1px #0a1230, 0 0 12px rgba(74, 168, 255, 0.75), inset 0 0 12px rgba(74, 168, 255, 0.25); }
#win-skill .sk-selected-tag { display: none; }
#win-skill .sk-name { grid-column: 2; grid-row: 1; min-height: 0; color: #f3e3b8; font-size: 12px; line-height: 1.15; font-weight: 600; text-align: left; text-shadow: 0 1px 2px #000; }
#win-skill .sk-icon { grid-column: 1; grid-row: 1 / 4; width: 38px; height: 38px; border: 2px solid var(--st-gold); border-radius: 6px; background-color: #0b1535; box-shadow: 0 0 0 1px #0a1230, 0 2px 6px rgba(0, 0, 0, 0.5); }
#win-skill .sk-lv { grid-column: 2; grid-row: 2; gap: 2px; color: #fff; font-size: 11px; }
#win-skill .sk-lv span { min-width: 34px; padding: 1px 2px; text-align: center; border-radius: 5px; background: #0b1535; }
#win-skill .sk-lv span.pending { color: #7dffa8; }
#win-skill .sk-lv button {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 5px;
  border: 2px solid var(--st-gold);
  background: linear-gradient(#2f5bd0, #1a3690);
  font-size: 12px;
  box-shadow: 0 0 0 1px #0a1230;
}
#win-skill .sk-lv button:first-child { background: linear-gradient(#2a3656, #172038); color: #c5cde0; }
#win-skill .sk-lv button:hover:not(:disabled) { background: linear-gradient(#4b7cf0, #2446b0); border-color: #ffe7a0; }
#win-skill .sk-state { grid-column: 2; grid-row: 3; justify-self: start; padding: 0 5px; border-radius: 5px; background: #0b1535; border: 1px solid #5a6b98; color: #c5d3f0; font-size: 10px; }
#win-skill .sk-state.on { background: #13305e; border-color: var(--st-gold); color: #f3d27a; }
#win-skill .sk-detail {
  gap: 9px;
  padding: 8px 10px;
  align-items: flex-start;
  background:
    var(--ui-castle) right bottom / 30% auto no-repeat,
    linear-gradient(90deg, #13234f, #0c1636);
  border: 2px solid rgba(226, 185, 90, 0.75);
  border-radius: 6px;
  color: #fff;
}
#win-skill .sk-detail-icon { position: relative; width: 48px; height: 48px; border: 3px solid var(--st-gold); border-radius: 6px; background-color: #0b1535; box-shadow: 0 0 0 1px #0a1230, 0 3px 8px rgba(0, 0, 0, 0.55); }
#win-skill .sk-detail-name { color: #fff; font-size: 17px; font-weight: 700; text-shadow: 0 2px 3px #000; }
#win-skill .sk-detail-lv { color: #f3c04a; font-size: 15px; font-weight: 700; }
#win-skill .sk-detail-pend { color: #7dffa8; }
#win-skill .sk-detail-info { margin: 3px 0 2px; padding-top: 3px; border-top: 1px solid var(--st-line); color: #5fb4ff; font-size: 12px; }
#win-skill .sk-detail-desc { color: #e8eeff; font-size: 13px; line-height: 1.35; }
#win-skill .sk-lv-table { margin-top: 5px; padding: 4px 7px 5px; border: 1px solid var(--st-line); border-radius: 5px; background: rgba(0, 0, 0, 0.22); font-size: 12px; }
#win-skill .sk-lv-head { color: #ffd76a; font-weight: 700; margin-bottom: 2px; }
#win-skill .sk-lv-row { display: flex; align-items: baseline; gap: 6px; line-height: 1.45; color: #c9d3ee; }
#win-skill .sk-lv-row > span { flex: 1; min-width: 0; }
#win-skill .sk-lv-row b { color: #fff; font-weight: 700; white-space: nowrap; }
#win-skill .sk-lv-row .sk-lv-from { color: #9aa6c4; font-weight: 400; }
#win-skill .sk-lv-row em { font-style: normal; font-weight: 700; white-space: nowrap; }
#win-skill .sk-lv-row em.up { color: #6cff8c; }
#win-skill .sk-lv-row em.down { color: #ff8a7a; }
#win-skill .sk-detail-hint { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--st-line); color: #9fb3dc; font-size: 11px; }
#win-skill .sk-footer {
  margin-top: 0;
  padding: 5px 8px 5px 10px;
  background: rgba(10, 18, 48, 0.82);
  border: 2px solid rgba(226, 185, 90, 0.75);
  border-radius: 6px;
}
#win-skill .sk-points { color: #f3e3b8; font-size: 14px; font-weight: 700; text-shadow: 0 2px 3px #000; }
#win-skill .sk-points b { margin-left: 6px; color: #f3c04a; font-size: 20px; }
/* แถบช่องลัด: กรอบทอง ปลายอัญมณี เลขช่องในเพชร */
#win-skill .sk-slotbar {
  position: relative;
  width: auto;
  margin: 10px 0 2px;
  padding: 11px 28px 6px;
  gap: 7px;
  background: linear-gradient(#152657, #0b1535);
  border: 2px solid var(--st-gold);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #3b2708, inset 0 0 0 2px #0a1230;
}
#win-skill .sk-slotbar::before {
  content: '';
  position: absolute;
  inset: 50% -10px auto;
  height: 22px;
  transform: translateY(-50%);
  background: var(--ui-star) left center / 22px 22px no-repeat, var(--ui-star) right center / 22px 22px no-repeat;
  pointer-events: none;
}
#win-skill .sk-slot {
  width: 40px;
  height: 40px;
  border: 2px solid var(--st-gold);
  border-radius: 5px;
  background: linear-gradient(#f4ecd6, #d8ccae);
  box-shadow: 0 0 0 1px #0a1230, 0 2px 5px rgba(0, 0, 0, 0.5);
}
#win-skill .sk-slot.empty { border-style: solid; background: #0d1a40; }
#win-skill .sk-slot.empty::after { content: ''; position: absolute; inset: 0; background: var(--ui-star) center / 24px 24px no-repeat; filter: grayscale(1); opacity: 0.22; }
#win-skill .sk-slot-num {
  top: -10px;
  z-index: 1;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: #0f1d48;
  border: 1.5px solid var(--st-gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (max-width: 700px) {
  #win-skill .sk-slotbar { padding: 16px 12px 10px; gap: 6px; flex-wrap: wrap; }
  #win-skill .sk-slot { width: 42px; height: 42px; }
}

/* ===== ธีมกลางคืน (.win-night) สำหรับ กระเป๋า / อุปกรณ์ / แผนที่โลก / รายละเอียดไอเทม — ตัวอักษร 12–14px ขนาดจริง ===== */
.win-night { --nt-panel: rgba(10, 18, 48, 0.72); --nt-cell: #13224d; --nt-text: #e8eeff; --nt-sub: #9fb3dc; --nt-border: rgba(226, 185, 90, 0.6); }
/* ช่องไอคอนไอเทม: พื้นครีมอ่อนให้ภาพไอเทมเห็นชัดบนธีมมืด */
.win-night .inv-ico, .win-night .eq-ico, .win-night .eq-detail-ico, .win-night .it-ico { border: 2px solid var(--st-gold); background: #efe6cf; }
.win-night .eq-ico.empty, .win-night .eq-detail-ico.empty { border: 2px dashed #5a6b98; background: #0b1535; }

/* ปุ่มรองทั่วไปในธีมมืด (ทิ้งไอเทม/ถอด ฯลฯ) — ปุ่มหลัก/ปุ่มทองคงสีเดิม */
.win-night .st-btn:not(.st-btn-primary):not(.st-btn-gold) { border: 1px solid #5a6b98; background: linear-gradient(#22346a, #111d42); color: #e8eeff; }

/* สีชื่อตามเกรดไอเทม (GRADE_COLORS เป็นโทนเข้มสำหรับพื้นครีม) — โทนสว่างบนพื้นมืด */
.win-night [data-grade="common"] { color: #f1f4ff !important; }
.win-night [data-grade="uncommon"] { color: #7dffa8 !important; }
.win-night [data-grade="rare"] { color: #8fc4ff !important; }
.win-night [data-grade="epic"] { color: #d9a6ff !important; }

/* กระเป๋า */
#win-bag .inv-top { margin-bottom: 6px; gap: 6px; }
#win-bag .inv-pill { padding: 2px 10px; background: #0b1535; border: 1px solid var(--st-gold); color: #fff; font-size: 13px; }
#win-bag .inv-main { grid-template-columns: 112px 1fr; gap: 8px; }
#win-bag .inv-cats { gap: 3px; }
#win-bag .inv-cats button { padding: 5px 7px; border: 1px solid #2c3f6e; background: linear-gradient(#1b2d60, #111d42); color: #d6e0f7; font-size: 13px; font-weight: 600; }
#win-bag .inv-cats button:hover { border-color: var(--nt-border); }
#win-bag .inv-cats button.active { background: linear-gradient(#2f5bd0, #1a3690); border-color: var(--st-gold); color: #fff; }
#win-bag .inv-tools { gap: 5px; margin-bottom: 6px; }
#win-bag .inv-tools input, #win-bag .inv-tools select { padding: 3px 7px; border: 1px solid #3c4f82; background: #0b1535; color: var(--nt-text); font-size: 13px; }
#win-bag .inv-view button { width: 28px; border-color: #3c4f82; background: #13224d; color: #c5d3f0; }
#win-bag .inv-view button.active { background: #2f5bd0; color: #fff; }
#win-bag .inv-grid { grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 5px; background: var(--nt-panel); border: 1px solid var(--nt-border); max-height: 250px; }
#win-bag .inv-cell { padding: 3px; border: 2px solid #a8864a; background: #efe6cf; }
#win-bag .inv-cell.empty { background: rgba(20, 36, 80, 0.7); border: 1px solid #2c3f6e !important; }
#win-bag .inv-list { max-height: 250px; gap: 3px; }
#win-bag .inv-row { grid-template-columns: 30px 1fr auto 40px; gap: 7px; padding: 2px 7px; background: var(--nt-cell); border: 1px solid #2c3f6e; color: var(--nt-text); }
#win-bag .inv-row:hover { border-color: var(--nt-border); }
#win-bag .inv-ico { width: 30px; height: 30px; }
#win-bag .inv-row-name { font-size: 14px; font-weight: 600; }
#win-bag .inv-row-type { font-size: 12px; color: var(--nt-sub); }
#win-bag .inv-empty { color: var(--nt-sub); }
#win-bag .inv-footer { margin-top: 6px; color: var(--nt-sub); font-size: 13px; }

/* อุปกรณ์ */
#win-equip .eq-sub { margin: 0 auto 6px; padding: 1px 14px; background: #0b1535; border: 1px solid var(--st-gold); color: #f3d27a; font-size: 13px; }
#win-equip .eq-grid { grid-template-columns: 1fr 104px 1fr; gap: 6px; }
#win-equip .eq-col { gap: 4px; }
#win-equip .eq-slot { gap: 7px; padding: 3px 5px; background: var(--nt-cell); border: 1px solid #2c3f6e; }
#win-equip .eq-slot:hover { border-color: var(--nt-border); }
#win-equip .eq-slot.selected { border: 1px solid #4aa8ff; box-shadow: 0 0 8px rgba(74, 168, 255, 0.6); }
#win-equip .eq-ico { width: 34px; height: 34px; padding: 2px; }
#win-equip .eq-slot-name { font-size: 11px; color: var(--nt-sub); }
#win-equip .eq-item-name { font-size: 13px; font-weight: 600; color: #fff; }
#win-equip .eq-center { background: radial-gradient(circle, #20356e 0%, #0d1838 75%); border: 1px solid var(--nt-border); }
#win-equip .eq-center .jb-portrait { width: 96px; height: 96px; }
#win-equip .eq-portrait-job { color: #f3d27a; }
#win-equip .eq-detail { margin-top: 6px; gap: 10px; padding: 6px 8px; background: var(--nt-panel); border: 1px solid var(--nt-border); color: var(--nt-text); }
#win-equip .eq-detail-ico { width: 46px; height: 46px; padding: 3px; }
#win-equip .eq-detail-slot { color: var(--nt-sub); }
#win-equip .eq-detail-name { font-size: 16px; color: #fff; }
#win-equip .eq-detail-bonus { font-size: 13px; color: #7dffa8; }
#win-equip .eq-sockets small, #win-equip .eq-sock-label { color: var(--nt-sub); }
#win-equip .eq-detail-btns .st-btn { padding: 3px 12px; font-size: 13px; }

/* แผนที่โลก */
#win-map .world-map { gap: 8px; }
#win-map .wm-board { max-height: 340px; border: 2px solid var(--st-gold); border-radius: 6px; }
#win-map .wm-node { width: 84px; padding: 3px 4px 4px; border: 2px solid var(--st-gold); background: #13224d; color: #fff; }
#win-map .wm-node.selected { border-color: #4aa8ff; box-shadow: 0 0 0 3px rgba(74, 168, 255, 0.4), 0 3px 8px rgba(0, 0, 0, 0.4); }
#win-map .wm-node.current { border-color: #ffd66e; }
#win-map .wm-thumb { height: 40px; }
#win-map .wm-name { font-size: 12px; font-weight: 600; }
#win-map .wm-lv { color: #8fd0ff; font-size: 11px; }
#win-map .wm-links line { stroke: #ffd66e; }
#win-map .wm-detail { padding: 8px 10px; background: var(--nt-panel); border: 1px solid var(--nt-border); }
#win-map .wm-detail-head { color: #fff; font-size: 16px; }
#win-map .wm-tag { background: #2c3f6e; font-size: 12px; }
#win-map .wm-tag.lv { background: #2f5bd0; }
#win-map .wm-desc { margin: 4px 0; color: #d6e0f7; font-size: 13px; }
#win-map .wm-row { color: var(--nt-text); font-size: 13px; }
#win-map .wm-label { color: #f3d27a; }

/* รายละเอียดไอเทม */
#win-item .it-name { color: #fff; font-size: 15px; }
#win-item .it-type { color: var(--nt-sub); font-size: 12px; }
#win-item .it-desc { color: #d6e0f7; font-size: 13px; }
#win-item .it-props { background: var(--nt-panel); border: 1px solid var(--nt-border); }
#win-item .it-props .pp-head { background: linear-gradient(#20356e, #13224d); color: #f3d27a; font-size: 12px; }
#win-item .it-kv { font-size: 12px; }
#win-item .it-kv span { color: var(--nt-sub); }
#win-item .it-kv b { color: #fff; }
#win-item .it-kv-wide { border-top-color: var(--nt-border); font-size: 12px; }
#win-item .it-kv-wide span { color: var(--nt-sub); }
#win-item .it-kv-wide b { color: #fff; }
#win-item .it-job { background: #1c2d5c; border-color: #3c4f82; color: #dfe7ff; }
#win-item .it-compare { background: #13224d; border-color: #3c4f82; color: var(--nt-text); font-size: 12px; }
#win-item .it-compare-title { color: #8fd0ff; }
#win-item .it-compare-item small, #win-item .eq-sock-label { color: var(--nt-sub); }
#win-item .it-warn { color: #ff8a7a; font-size: 12px; }
#win-item .it-btns .st-btn { font-size: 12px; }

/* ===== หน้าต่างเปลี่ยนอาชีพ (ตาม ref Change Class) ===== */
.jb-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
}
.jb-portrait { width: 64px; height: 64px; image-rendering: pixelated; flex-shrink: 0; object-fit: contain; }
.jb-portrait-emoji { display: flex; align-items: center; justify-content: center; font-size: 34px; }
.jb-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  background: #2e5fb8;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.jb-tag-target { background: #c0392b; }
.jb-cur-name { font-size: 22px; font-weight: 700; color: #1d2a57; }
.jb-cur-stats { font-size: 12px; color: #3b2c1a; }
.jb-sec { margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: #6d5129; }
.jb-targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.jb-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas: 'p n' 'p r';
  gap: 2px 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  cursor: var(--cur-hand);
}
.jb-card .jb-portrait { grid-area: p; width: 48px; height: 48px; }
.jb-card .jb-portrait-emoji { font-size: 26px; }
.jb-card.selected { border: 2px solid #4aa3ff; box-shadow: 0 0 10px rgba(74, 163, 255, 0.55); background: #fdf8ea; }
.jb-card.locked .jb-portrait { filter: grayscale(0.7); opacity: 0.8; }
.jb-card-name { grid-area: n; font-weight: 700; color: #1d2a57; font-size: 14px; align-self: end; }
.jb-card-req { grid-area: r; font-size: 11px; color: #c0392b; }
.jb-card-req.ok { color: #1e8449; font-weight: 700; }
.jb-skills:empty { display: none; }
.jb-skills { margin-top: 8px; padding: 8px; border-radius: 8px; background: #fbf5e6; border: 1px solid #d3bd8f; }
.jb-skills-head { font-size: 12px; font-weight: 700; color: #6d5129; margin-bottom: 6px; }
.jb-skill-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.jb-skill { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px; border-radius: 6px; background: #fff; border: 1px solid #e3d3ad; }
.jb-skill-ico { width: 28px; height: 28px; flex-shrink: 0; border-radius: 5px; }
.jb-skill-body { min-width: 0; font-size: 11px; line-height: 1.35; color: #4a3a24; }
.jb-skill-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 5px; }
.jb-skill-head b { font-size: 12px; color: #1d2a57; }
.jb-skill-head i { font-style: normal; font-size: 9px; font-weight: 700; padding: 0 4px; border-radius: 4px; color: #fff; }
.jb-skill-head i.act { background: #c0392b; }
.jb-skill-head i.pas { background: #2e6fb8; }
.jb-skill-head i.buf { background: #1e8449; }
.jb-skill-head small { color: #8a7656; font-size: 10px; }
.jb-skill-desc { color: #5b4a32; }
.jb-skill-req { color: #a0522d; font-size: 10px; }
.jb-action {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(#22346a, #172449);
  border: 2px solid #c9a24a;
  color: #fff;
  min-height: 54px;
}
.jb-action:empty { display: none; }
.jb-target-name { font-size: 18px; font-weight: 700; }
.jb-change { margin-left: auto; font-size: 15px; padding: 8px 20px; }
.jb-confirm { flex: 1; font-weight: 700; color: #f5d76e; }
.jb-hint { color: #cfd8e0; font-size: 13px; }
.jb-note {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #e6ecf8;
  border: 1px solid #b7c5e6;
  color: #2b3a66;
  font-size: 12px;
}
.jb-tree { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jb-col { display: flex; flex-direction: column; gap: 4px; }
.jb-node {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  background: #efe2c2;
  border: 1px solid #cdb78a;
  color: #6b5a42;
  white-space: nowrap;
}
.jb-node.done { background: #d9e6ff; border-color: #8fa9e0; color: #2b3a66; }
.jb-node.cur { background: #2e5fb8; border-color: #1d3f82; color: #fff; }
.jb-arrow { color: #b39a6b; font-weight: 700; }

/* ===== กรอบไอคอนตามเกรดไอเทม ===== */
.grade-common { border-color: #cdb78a !important; }
.grade-uncommon { border-color: #6fbf73 !important; box-shadow: inset 0 0 6px rgba(30, 132, 73, 0.25); }
.grade-rare { border-color: #6f9be0 !important; box-shadow: inset 0 0 6px rgba(46, 95, 184, 0.3); }
.grade-epic { border-color: #b17fd6 !important; box-shadow: inset 0 0 6px rgba(142, 68, 173, 0.35); }
.st-btn-gold { border-color: #9c6a0a; background: linear-gradient(#f5c451, #d69b1c); color: #3b2508; }

/* ===== หน้าต่างกระเป๋า (Inventory ตาม ref) ===== */
.inv-top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; }
.inv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(#22346a, #172449);
  border: 1px solid #c9a24a;
  color: #fff;
  font-size: 13px;
}
.inv-coin { width: 18px; height: 18px; display: inline-block; }
.inv-main { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.inv-cats { display: flex; flex-direction: column; gap: 4px; }
.inv-cats button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #2c3f6e;
  background: linear-gradient(#26396e, #1b2a54);
  color: #dfe7f7;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: var(--cur-hand);
}
.inv-cats button.active { background: linear-gradient(#3a64c4, #2a4d9e); border-color: #c9a24a; color: #fff; }
.inv-cat-ico { width: 18px; text-align: center; }
.inv-right { min-width: 0; }
.inv-tools { display: flex; gap: 6px; margin-bottom: 8px; }
.inv-tools input, .inv-tools select {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #c9b58a;
  background: #fffaf0;
  color: #3b2c1a;
  font-size: 12px;
}
.inv-tools input { flex: 1; min-width: 0; }
.inv-view { display: flex; }
.inv-view button {
  width: 30px;
  border: 1px solid #5c6b86;
  background: #e8edf7;
  color: #2b3a66;
  cursor: var(--cur-hand);
}
.inv-view button:first-child { border-radius: 6px 0 0 6px; }
.inv-view button:last-child { border-radius: 0 6px 6px 0; }
.inv-view button.active { background: #2e5fb8; color: #fff; }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 8px;
  background: #e7ebf3;
  border: 1px solid #b7c5e6;
  max-height: 290px;
  overflow-y: auto;
}
.inv-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 4px;
  border-radius: 6px;
  border: 2px solid #cdb78a;
  background: #f7f9fc;
  cursor: var(--cur-hand);
}
.inv-cell:hover:not(.empty) { filter: brightness(1.06); }
.inv-cell.empty { background: rgba(255, 255, 255, 0.55); border: 1px solid #d4dbea !important; box-shadow: none !important; cursor: var(--cur-arrow); }
.inv-cell.selected, .inv-row.selected { outline: 2px solid #4aa3ff; outline-offset: 1px; }
.inv-n {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.inv-lock { position: absolute; left: 1px; top: -2px; font-size: 10px; }
.inv-list { display: flex; flex-direction: column; gap: 4px; max-height: 290px; overflow-y: auto; }
.inv-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  cursor: var(--cur-hand);
}
.inv-ico { width: 34px; height: 34px; padding: 2px; border-radius: 6px; border: 2px solid #cdb78a; background: #fffaf0; }
.inv-row-name { font-weight: 700; }
.inv-row-type { font-size: 12px; color: #6b5a42; }
.inv-row-n { font-weight: 700; text-align: right; }
.inv-empty { padding: 16px; text-align: center; color: #6b5a42; }
.inv-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 13px; color: #3b2c1a; }

/* ===== หน้าต่างอุปกรณ์ (Equipment ตาม ref) ===== */
.eq-sub {
  margin: -2px auto 8px;
  width: max-content;
  padding: 3px 16px;
  border-radius: 12px;
  background: #f8f0dc;
  border: 1px solid #c9a24a;
  font-weight: 700;
  color: #1d2a57;
}
.eq-grid { display: grid; grid-template-columns: 1fr 120px 1fr; gap: 8px; align-items: stretch; }
.eq-ammo { display: flex; justify-content: center; margin-top: 6px; }
.eq-ammo .eq-slot { width: calc((100% - 136px) / 2); min-width: 160px; }
.eq-slot-ammo .eq-ico { position: relative; }
/* มือซ้ายตอนถืออาวุธสองมือ: เงาขาวดำกลับด้านของอาวุธ + ข้อความจาง */
.eq-slot-2h { opacity: 0.9; }
/* ธีมมืด: ชื่อของเกรดธรรมดา (สีน้ำตาลเข้ม) อ่านไม่ออกบนพื้นกรมท่า */
.win-night .eq-item-name[data-grade="common"], .win-night .eq-detail-name[data-grade="common"] { color: #f4ecd8 !important; }
.eq-ico.eq-ico-ghost { border-style: dashed; background: rgba(11, 21, 53, 0.6); }
.eq-ico-ghost .skill-ico { filter: grayscale(1) brightness(1.15) contrast(0.9); opacity: 0.6; transform: scaleX(-1); }
.eq-slot-2h .eq-item-name { color: #8e99b3 !important; font-weight: 600; font-style: italic; }
.eq-slot-ammo .inv-n { position: absolute; right: 1px; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.eq-col { display: flex; flex-direction: column; gap: 6px; }
.eq-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 6px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
  cursor: var(--cur-hand);
  min-width: 0;
}
.eq-slot.selected { border: 2px solid #4aa3ff; box-shadow: 0 0 8px rgba(74, 163, 255, 0.5); }
.eq-ico { width: 40px; height: 40px; flex-shrink: 0; padding: 3px; border-radius: 6px; border: 2px solid #cdb78a; background: #fffaf0; }
.eq-ico.empty { background: #efe6d0; border-style: dashed; }
.eq-info { display: flex; flex-direction: column; min-width: 0; }
.eq-slot-name { font-size: 11px; color: #6b5a42; }
.eq-item-name { font-size: 13px; font-weight: 700; color: #7a6a4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: radial-gradient(circle, #fff7e3 0%, #efe2c2 70%);
  border: 1px solid #d3bd8f;
}
.eq-center .jb-portrait { width: 112px; height: 112px; }
/* ตัวละคร 3D (CharacterPreview3D) เต็มช่องกลาง เหลือที่ให้ชื่ออาชีพด้านล่าง */
.eq-center .eq-3d { width: 100%; flex: 1; min-height: 180px; }
.eq-center .jb-portrait-emoji { font-size: 60px; }
.eq-portrait-job { font-size: 11px; font-weight: 700; color: #6d5129; letter-spacing: 1px; }
.eq-detail {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
}
.eq-detail-ico { width: 60px; height: 60px; flex-shrink: 0; padding: 4px; border-radius: 8px; border: 2px solid #cdb78a; background: #fffaf0; }
.eq-detail-ico.empty { border-style: dashed; background: #efe6d0; }
.eq-detail-info { flex: 1; min-width: 0; }
.eq-detail-slot { font-size: 11px; color: #6b5a42; }
.eq-detail-name { font-size: 18px; font-weight: 700; color: #7a6a4e; }
.eq-detail-bonus { font-size: 12px; color: #1e8449; font-weight: 700; }
.eq-detail-btns { display: flex; flex-direction: column; gap: 5px; }

/* ===== หน้าต่างรายละเอียดไอเทม (ตาม ref) ===== */
.it-head { display: flex; gap: 8px; }
.it-ico { width: 44px; height: 44px; flex-shrink: 0; padding: 3px; border-radius: 6px; border: 2px solid #cdb78a; background: #fffaf0; }
.it-head-info { flex: 1; min-width: 0; }
.it-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.it-type { font-size: 11px; color: #6b5a42; margin-bottom: 3px; }
.it-bonusbar {
  padding: 2px 6px;
  border-radius: 5px;
  background: linear-gradient(#22346a, #172449);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.it-desc { margin: 6px 0; font-size: 12px; line-height: 1.35; color: #3b2c1a; }
.it-props { background: #f8f0dc; border: 1px solid #d3bd8f; border-radius: 6px; padding: 5px 7px; }
.it-props .pp-head { margin: -5px -7px 4px; padding: 2px 8px; font-size: 11px; border-radius: 6px 6px 0 0; }
/* คุณสมบัติ 2 คู่ต่อแถว (โบนัสแสดงในแถบหัวแล้ว ไม่ซ้ำเป็นคอลัมน์) */
.it-kv { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1px 5px; font-size: 11px; }
.it-kv span { color: #6b5a42; }
.it-kv b { color: #2b2012; min-width: 0; overflow-wrap: break-word; }
.it-kv-wide { margin-top: 4px; padding-top: 4px; border-top: 1px solid #d3bd8f; font-size: 11px; display: grid; gap: 3px; }
.it-kv-wide span { display: block; color: #6b5a42; }
.it-kv-wide b { display: block; color: #2b2012; font-weight: 700; line-height: 1.35; }
.it-kv-wide .it-jobs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.it-job { font-style: normal; font-weight: 600; font-size: 11px; padding: 0 6px; border: 1px solid #d3bd8f; border-radius: 9px; background: #fff7e3; white-space: nowrap; }
.it-compare { margin-top: 6px; padding: 5px 7px; border-radius: 6px; background: #e6ecf8; border: 1px solid #b7c5e6; font-size: 11px; }
.it-compare-title { font-weight: 700; color: #2b3a66; }
.it-compare-item { display: flex; align-items: center; gap: 5px; margin: 2px 0 4px; }
.it-compare-item small { color: #6b5a42; }
.it-mini { width: 22px; height: 22px; display: inline-block; }
.it-warn { margin-top: 6px; color: #c0392b; font-weight: 700; font-size: 11px; }
.it-btns { display: flex; gap: 4px; margin-top: 7px; }
.it-btns .st-btn { flex: 1; padding: 4px 2px; border-radius: 6px; font-size: 11px; white-space: nowrap; }
#win-item .win-body { padding: 8px 10px; }
.it-main {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  border-radius: 7px;
  border: 2px solid #9c6a0a;
  background: linear-gradient(#f9d470, #e0a526);
  color: #3b2508;
  font-size: 14px;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.it-main:hover:not(:disabled) { filter: brightness(1.08); }
.it-main:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== tooltip ตอนชี้ไอเทม (ตาม ref) ===== */
/* tooltip ชี้เมาส์ที่ไอเทม: กล่องลอยพื้นหลังโปร่งเข้ม กรอบดำ ข้อความขาว (ต่างจากหน้าต่างรายละเอียดที่ต้องคลิก) */
.item-tip {
  position: fixed;
  z-index: 300000;
  max-width: 260px;
  padding: 6px 9px;
  border-radius: 4px;
  background: rgba(8, 10, 18, 0.72);
  border: 2px solid #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 4px 12px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  color: #eef2ff;
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.tip-name { font-weight: 700; font-size: 13px; color: #f4ecd8; }
.tip-name[data-grade="uncommon"] { color: #72e08f; }
.tip-name[data-grade="rare"] { color: #7fb2ff; }
.tip-name[data-grade="epic"] { color: #d39cff; }
.tip-sub { color: #aab4cc; font-size: 11px; }
.tip-bonus { margin-top: 3px; font-weight: 700; color: #ffd97a; }
.tip-desc { margin-top: 3px; color: #dfe5f5; }
.tip-diff { margin-top: 2px; font-weight: 700; }
.tip-diff .up { color: #72e08f; }
.tip-diff .down { color: #ff8a7a; }
.tip-hint { margin-top: 4px; color: #8e99b3; font-style: italic; font-size: 11px; }
@media (max-width: 760px) {
  .inv-main { grid-template-columns: 1fr; }
  .inv-cats { flex-direction: row; flex-wrap: wrap; }
  .inv-grid { grid-template-columns: repeat(6, 1fr); }
  .eq-grid { grid-template-columns: 1fr 1fr; }
  .eq-center { display: none; }
}

/* ===== ช่องการ์ด (หน้าต่างอุปกรณ์) ===== */
.eq-sockets { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.eq-sockets small { color: #6b5a42; }
.eq-sock-label { font-size: 11px; color: #6b5a42; margin-right: 2px; }
.eq-socket {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px dashed #b89a5c;
  background: #efe6d0;
  color: #9c7a3a;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.eq-socket.filled { border: 2px solid #6f9be0; background: #fffaf0; padding: 1px; }
.eq-socket.picking { border-color: #4aa3ff; background: #dfeeff; }
.eq-socket:hover { filter: brightness(1.08); }
.eq-card-pick { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; max-height: 120px; overflow-y: auto; }
.eq-card-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid #b7c5e6;
  background: #e6ecf8;
  font: inherit;
  text-align: left;
  cursor: var(--cur-hand);
}
.eq-card-opt .skill-ico { width: 26px; height: 26px; flex-shrink: 0; }
.eq-card-opt span:last-child { display: flex; flex-direction: column; font-size: 12px; }
.eq-card-opt small { color: #1e8449; font-weight: 700; }

/* ===== ระหว่างบูตเกม: ซ่อน HUD/แคนวาสที่ยังโหลดไม่เสร็จ ===== */
body.booting #hud, body.booting #game-container { visibility: hidden; }

/* ===== หน้า Loading (Novice วิ่ง + สไลม์ไล่ตาม) ===== */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 600000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  color: #fff;
  /* wallpaper ELARIVEN หน้า Loading (มีโลโก้ในภาพ) — ไม่มีไฟล์ = เหลือไล่สีเดิม; ภาพวาด ไม่ใช้ pixelated
     ภาพเต็มพอดีจอ (contain) ใน ::after + ขอบที่เหลือเติมด้วยภาพเดียวกันแบบเบลอ (::before) */
  background: radial-gradient(ellipse at 50% 35%, #25407a 0%, #122042 45%, #070d1f 100%);
  overflow: hidden;
  transition: opacity 0.5s;
}
#loading-screen::before,
#loading-screen::after { content: ''; position: absolute; pointer-events: none; }
#loading-screen::before {
  inset: -40px;
  background: url('src/assets/ui/elariven_loading_bg.jpg') center / cover;
  filter: blur(24px) brightness(0.55);
}
#loading-screen::after {
  inset: 0;
  background: linear-gradient(rgba(7, 13, 31, 0), rgba(7, 13, 31, 0.55)), url('src/assets/ui/elariven_loading_bg.jpg') center / contain no-repeat;
}
#loading-screen > * { z-index: 1; }
#loading-screen.leaving { opacity: 0; pointer-events: none; }
.ld-stars {
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 60%, transparent),
    radial-gradient(1px 1px at 70% 20%, #cfe0ff 60%, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff5c8 60%, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff 60%, transparent),
    radial-gradient(1px 1px at 10% 85%, #cfe0ff 60%, transparent),
    radial-gradient(1.5px 1.5px at 55% 45%, #fff 60%, transparent);
  background-size: 260px 260px;
  animation: ld-drift 60s linear infinite, ld-twinkle 3s ease-in-out infinite alternate;
  opacity: 0.7;
}
@keyframes ld-drift { to { transform: translate(260px, 130px); } }
@keyframes ld-twinkle { from { opacity: 0.45; } to { opacity: 0.85; } }
.ld-sub { position: relative; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 2px; text-align: center; text-shadow: 0 1px 3px #000; }
.ld-sub b { color: #9dffb0; }
/* แถบโหลด+เคล็ดลับชิดด้านล่างจอ (ผู้เล่นไม่อยากให้อยู่กลาง) */
.ld-bottom { position: absolute; left: 0; right: 0; bottom: max(24px, 6vh); display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.ld-stage { position: relative; width: min(520px, 90vw); }
.ld-track { position: relative; height: 84px; }
.ld-slime { position: absolute; bottom: -4px; image-rendering: pixelated; pointer-events: none; }
.ld-slime { width: 84px; height: 84px; animation: ld-bounce 0.45s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)); }
@keyframes ld-bounce { 50% { transform: translateY(-10px) scale(1.05, 0.95); } }
.ld-bar {
  position: relative;
  height: 16px;
  border-radius: 10px;
  border: 2px solid #b8913f;
  background: rgba(5, 10, 25, 0.8);
  box-shadow: 0 0 0 1px #0a0f20, 0 4px 14px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.ld-fill { width: 0; height: 100%; background: linear-gradient(90deg, #f5a623, #ffd96a, #9dffb0); box-shadow: 0 0 12px rgba(255, 217, 106, 0.6); }
.ld-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%);
  background-size: 200% 100%;
  animation: ld-shine 1.6s linear infinite;
}
@keyframes ld-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.ld-pct { margin-top: 6px; text-align: right; font-weight: 700; color: #f5d98a; font-size: 14px; }
.ld-tip { position: relative; margin-top: 14px; max-width: min(560px, 92vw); text-align: center; font-size: 14px; color: #cfd8e8; min-height: 40px; }
.ld-tip-label { color: #f5c451; font-weight: 700; }
.ld-tip-text.in { animation: ld-tip-in 0.4s ease-out; }
@keyframes ld-tip-in { from { opacity: 0; transform: translateY(6px); } }

.hud-chat {
  --chat-font: 13px;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 25; /* ใต้หน้าต่างเมนู (เริ่ม 30) */
  width: min(480px, calc(100vw - 16px));
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background: rgba(18, 26, 48, 0.86);
  border: 1px solid #3d4c6e;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: #fff;
  pointer-events: auto;
}
.chat-head { display: flex; align-items: center; gap: 4px; padding: 5px 6px 4px; cursor: move; touch-action: none; }
.chat-grip { border: 0; background: none; color: #9aa7b3; font-size: 13px; cursor: move; padding: 0 2px; }
.chat-tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chat-tabs button {
  flex-shrink: 0;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #cfd8e8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.chat-tabs button.active { border-color: #d9a032; background: linear-gradient(#2e4f99, #213a73); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.3); }
.chat-tools { display: flex; gap: 4px; }
.chat-tool {
  min-width: 30px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #5c6b86;
  background: #24324f;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.chat-tool-sm { min-width: 24px; }
.chat-tool:hover { background: #2e4f99; }
.chat-list {
  height: var(--chat-h, 96px); /* ลากขอบบนกล่องแชทปรับได้ (ChatUI.setupResize) */
  overflow-y: auto;
  padding: 2px 10px 6px;
  font-size: var(--chat-font);
  line-height: 1.4;
  scrollbar-width: thin;
  scrollbar-color: #7f8c9a transparent;
}
.chat-line { word-break: break-word; }
/* สีตามช่อง (ผู้ใช้ขอ 2026-09-28): ทั่วไป ขาว · โลก เหลือง · ปาร์ตี้ ฟ้า · กระซิบ ม่วง · ระบบ เขียวอมฟ้า · EXP เขียวอ่อน */
.ch-local, .ch-local .chat-tag, .ch-local .chat-name { color: #ffffff; }
/* ปุ่ม/ตารางอีโมต (ChatUI.setupEmotes) */
.chat-emote-btn { width: 30px; height: 26px; padding: 0; border-radius: 4px; border: 1px solid rgba(214, 178, 96, .35); background: rgba(0, 0, 0, .35); font-size: 15px; line-height: 1; }
.chat-emote-btn:hover { border-color: #e7bd62; }
.chat-emote-pick { position: absolute; right: 6px; bottom: calc(100% + 6px); display: grid; grid-template-columns: repeat(8, 32px); gap: 4px; padding: 6px;
  background: rgba(14, 18, 26, .96); border: 1px solid rgba(214, 178, 96, .5); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); z-index: 5; }
.chat-emote-pick.hidden { display: none; }
.chat-emote-pick button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: 20px; line-height: 1; }
.chat-emote-pick button:hover { background: rgba(231, 189, 98, .25); transform: scale(1.12); }
.chat-tag { font-weight: 700; }
.chat-name { cursor: var(--cur-hand); }
.ch-world .chat-tag, .ch-world .chat-name { color: #ffd66b; }
.ch-party, .ch-party .chat-tag, .ch-party .chat-name { color: #6cc8ff; }
.ch-whisper, .ch-whisper .chat-tag, .ch-whisper .chat-name { color: #c79bff; }
.ch-system { color: #b8dcd8; }
.ch-system .chat-tag { color: #5fd8c8; }
.ch-exp { color: #c9f0a8; }
.ch-exp .chat-tag { color: #9be15d; }
.chat-notice { color: #ffb27a; }
.chat-notice .chat-tag { color: #ff9a5a; }
.chat-empty { color: #7f8c9a; text-align: center; padding: 20px 0; }
.chat-item { cursor: var(--cur-hand); white-space: nowrap; }
.chat-item-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; margin-right: 2px; }
.chat-input-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.chat-channel {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid #5c6b86;
  background: #24324f;
  font-size: 12px;
  font-weight: 700;
}
#chat-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #3d4c6e;
  background: rgba(8, 12, 24, 0.8);
  color: #fff;
  font: inherit;
  font-size: 13px;
}
#chat-input:focus { outline: none; border-color: #4aa3ff; }
.chat-send {
  flex-shrink: 0;
  width: 38px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #5c6b86;
  background: #2e4f99;
  color: #fff;
  font-size: 15px;
  cursor: var(--cur-hand);
}
.chat-send:hover { background: #3a64c4; }
.hud-chat.collapsed .chat-list, .hud-chat.collapsed .chat-input-row, .hud-chat.collapsed .chat-resize { display: none; }
/* แถบจับขอบบน: ลากขึ้น/ลงเพื่อปรับความสูงกล่องแชท */
.chat-resize { position: absolute; top: -5px; left: 50%; width: 64px; height: 10px; transform: translateX(-50%); cursor: ns-resize; touch-action: none; z-index: 1; }
.chat-resize::after { content: ''; position: absolute; left: 12px; right: 12px; top: 3px; height: 4px; border-radius: 3px; background: rgba(207, 216, 232, 0.35); transition: background 0.15s; }
.chat-resize:hover::after, .hud-chat.resizing .chat-resize::after { background: #d9a032; }

/* ===== แท็บรายชื่อ NPC ในเมือง (ใต้มินิแมพ) ===== */
.map-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.hud-town {
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 44, 86, 0.95), rgba(15, 23, 48, 0.95));
  border: 1px solid #b8913f;
  overflow: hidden;
}
.town-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border: 0;
  background: rgba(184, 145, 63, 0.25);
  color: #f5d98a;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.hud-town.collapsed .town-npcs { display: none; }
.hud-town.collapsed .town-caret { transform: rotate(-90deg); }
.town-npcs { display: flex; flex-direction: column; }
.town-npc {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: var(--cur-hand);
}
.town-npc:hover { background: rgba(74, 163, 255, 0.2); }
.town-npc-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; font-size: 15px; }
.town-npc-ico img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; }
.town-npc-info { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.town-npc-info b { font-size: 12px; color: #9dffb0; }
.town-npc-info small { font-size: 10px; color: #aab6cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.town-npc-dist { font-size: 10px; color: #f5c451; }

/* ===== หน้าต่างร้านค้า ===== */
.shop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.shop-npc { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 28px; }
.shop-npc img { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 8px; background: radial-gradient(circle, #fff7e3, #efe2c2); border: 1px solid #d3bd8f; }
.shop-npc div { display: flex; flex-direction: column; font-size: 13px; }
.shop-npc small { color: #6b5a42; font-size: 11px; }
.shop-tabs { display: flex; }
.shop-tabs button {
  padding: 6px 16px;
  border: 1px solid #2c3f6e;
  background: linear-gradient(#26396e, #1b2a54);
  color: #dfe7f7;
  font: inherit;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.shop-tabs button:first-child { border-radius: 6px 0 0 6px; }
.shop-tabs button:last-child { border-radius: 0 6px 6px 0; }
.shop-tabs button.active { background: linear-gradient(#3a64c4, #2a4d9e); border-color: #c9a24a; color: #fff; }
.shop-pills { display: flex; flex-direction: column; gap: 4px; }
.shop-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; padding: 2px; }
.shop-row {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f8f0dc;
  border: 1px solid #d3bd8f;
}
.shop-row.in-cart { background: #e6f3dd; border-color: #6fbf73; }
.shop-row.locked { opacity: 0.55; }
.shop-ico { width: 38px; height: 38px; border-radius: 6px; border: 2px solid #cdb78a; background-color: #fffaf0; cursor: var(--cur-hand); }
.shop-info { display: flex; flex-direction: column; min-width: 0; cursor: var(--cur-hand); }
.shop-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-info small { color: #6b5a42; font-size: 11px; }
.shop-price { font-weight: 700; color: #9c6a0a; white-space: nowrap; }
.shop-qty { display: flex; align-items: center; gap: 4px; }
.shop-qty b { min-width: 26px; text-align: center; }
.shop-qty-input {
  width: 46px; height: 24px; padding: 0 4px; border-radius: 5px; border: 1px solid #b89a5e; background: #fffaf0;
  color: #2b2012; font: 700 13px/1 inherit; text-align: center; -moz-appearance: textfield;
}
.shop-qty-input::-webkit-outer-spin-button, .shop-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-qty-input:focus { outline: 2px solid #4aa3ff; outline-offset: 0; }
.shop-qty button {
  min-width: 26px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #5c6b86;
  background: #e8edf7;
  color: #2b3a66;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: var(--cur-hand);
}
.shop-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.shop-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#shop-total { flex: 1; font-size: 13px; color: #3b2c1a; }
.shop-cost { color: #c0392b; }
.shop-gain { color: #1e8449; }
#shop-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* จอแคบ: ย่อการ์ดตัวละครและ dpad ลงเล็กน้อย */
@media (max-width: 560px) {
  #hud-char { transform: scale(0.72); }
  .bar-text { width: 64px; }
  #hud-topmenu { --menu-w: 36px; --menu-gap: 2px; }
  .icon-btn { width: 36px; }
  .icon-btn .icon-circle { width: 32px; height: 32px; }
  .icon-btn .icon-label { display: none; }
  #minimap-canvas { width: 96px; height: 96px; }
  #hud-joystick { transform: scale(0.8); transform-origin: left bottom; }
  #hud > #hud-actions { transform: scale(0.8); transform-origin: right bottom; }
}

.travel-dialog { color:#e9f1df; background:#142a23; border:2px solid #b6a26c; border-radius:12px; padding:24px; max-width:420px; } .travel-dialog::backdrop { background:#07110da8; } .travel-dialog > button { display:block; width:100%; margin:10px 0; padding:12px; background:#294a3c; color:#f7edca; border:1px solid #8c9b73; border-radius:6px; cursor:pointer; }
.travel-dialog.death-dialog { width:min(380px,90vw); padding:22px; text-align:center; background:#14213b; border-color:#d9b25a; box-shadow:0 14px 40px #0009; }
.death-dialog h2 { margin:0 0 10px; color:#fff0c6; font-size:22px; }
.death-dialog p { margin:0 0 18px; color:#e0e8fb; line-height:1.5; }
.death-dialog > button { border-radius:9px; font-weight:700; }
.death-dialog > button:first-of-type { background:linear-gradient(#f2c966,#b57d20); border-color:#ffe1a0; color:#2b1b08; }

.inventory-drop-dialog { width:min(360px,90vw); padding:22px; color:#f1e9d6; background:#172640; border:2px solid #d7b76d; border-radius:12px; box-shadow:0 16px 42px #0009; }
.inventory-drop-dialog::backdrop { background:#07111fba; }
.inventory-drop-dialog h2 { margin:0 0 12px; color:#ffdf94; font-size:20px; }
.inventory-drop-dialog .drop-item-name { margin:0 0 4px; font-weight:700; font-size:16px; }
.inventory-drop-dialog .drop-owned { margin:0 0 16px; color:#b9c9e4; font-size:13px; }
.inventory-drop-dialog .drop-label { display:block; margin-bottom:7px; font-weight:700; font-size:13px; }
.inventory-drop-dialog .drop-quantity-row { display:flex; gap:8px; }
.inventory-drop-dialog input { min-width:0; flex:1; padding:9px 10px; color:#fff; background:#0d1930; border:1px solid #8395b3; border-radius:7px; font:inherit; }
.inventory-drop-dialog button { padding:9px 14px; color:#fff; background:#30476a; border:1px solid #7892b5; border-radius:7px; font:inherit; font-weight:700; cursor:pointer; }
.inventory-drop-dialog .drop-max { color:#ffdf94; }
.inventory-drop-dialog .drop-error { margin:9px 0 0; color:#ff9b9b; font-size:12px; }
.inventory-drop-dialog .drop-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.inventory-drop-dialog .drop-confirm { color:#2a1a09; background:linear-gradient(#f5d281,#c69543); border-color:#ffe0a1; }

/* ===== หน้าต่างสัตว์เลี้ยง (PetUI.js) ===== */
.pet-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.pet-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #d3bd8f; border-radius: 8px; background: #e8dab8; }
.pet-card.active { border-color: #4f9a45; background: #dcefc9; box-shadow: 0 0 0 1px rgba(79, 154, 69, 0.35); }
.pet-preview { width: 64px; height: 64px; flex: none; image-rendering: pixelated; border-radius: 6px; background: radial-gradient(circle at 50% 70%, #fff8e6, #e3d2ab); }
.pet-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pet-info b { color: #3b2c1a; font-size: 15px; }
.pet-info small { color: #6b5a42; font-size: 12px; line-height: 1.35; }
.pet-tag { padding: 1px 7px; border-radius: 10px; background: #4f9a45; color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.pet-btn { flex: none; padding: 7px 12px; border: 1px solid #1d3f82; border-radius: 6px; background: linear-gradient(#3d74c9, #2a5aa6); color: #fff; font-weight: 700; cursor: var(--cur-hand); }
.pet-btn.dismiss { border-color: #8b4650; background: linear-gradient(#c05a4c, #963a30); }
.pet-empty { padding: 12px; color: #6b5a42; text-align: center; }
.pet-sub { margin: 10px 0 4px; color: #7a5a22; font-size: 13px; font-weight: 700; }
.pet-types { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.pet-range-row { display: flex; align-items: center; gap: 10px; color: #3b2c1a; }
.pet-range-row input[type="range"] { flex: 1; accent-color: #2e5fb8; }
.pet-range-row input[type="number"] { width: 72px; padding: 4px 6px; border: 1px solid #c9b58a; border-radius: 5px; background: #fffaf0; color: #3b2c1a; font: inherit; }
.pet-hint { margin: 6px 0 0; color: #6b5a42; font-size: 12px; line-height: 1.4; }
.pet-save-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #dccaa2; }
.pet-save-status { color: #1e8449; font-size: 13px; font-weight: 700; }
.pet-save-status.unsaved { color: #b9770e; }
.pet-save { padding: 8px 18px; border: 2px solid #efc75d; border-radius: 7px; background: linear-gradient(#4a82d3, #2a5aa6); color: #fff; font-weight: 800; cursor: var(--cur-hand); }

/* การ์ดตัวละคร: กดรูปเปิดหน้าต่างสถานะ */
.cc-portrait-wrap { cursor: var(--cur-hand); }
.cc-portrait-wrap:hover .cc-portrait { filter: brightness(1.15); box-shadow: 0 0 0 2px #f5d76e; }

/* ===== แผนที่แมพปัจจุบันขนาดใหญ่กลางจอ (กด minimap / ⤢) ===== */
.map-expand { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 18, 0.55); pointer-events: auto; }
.map-expand-box { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 3px solid #c9a24a; border-radius: 12px; background: linear-gradient(#22346a, #172449); box-shadow: 0 0 0 2px #0b1020, 0 14px 40px rgba(0, 0, 0, 0.65); }
.map-expand-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; }
.map-expand-head .win-close { top: 1px; right: 0; }
.map-expand-title { display: flex; align-items: baseline; gap: 10px; color: #fff; text-shadow: 0 2px 3px #000; }
.map-expand-title b { font-size: 18px; }
.map-expand-title small { color: #f5d76e; font-size: 13px; font-weight: 700; }
#map-expand-canvas { width: min(78vh, 86vw, 720px); height: min(78vh, 86vw, 720px); border-radius: 8px; image-rendering: pixelated; }
/* สัญลักษณ์ใต้แผนที่ใหญ่ (ผู้ใช้ขอ 2026-09-28) */
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: min(78vh, 86vw, 720px); font-size: 12px; color: #dfe6f5; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { display: inline-block; width: 12px; height: 12px; }
.map-legend .lg-me { background: #ffe14d; clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%); }
.map-legend .lg-npc { background: #4aa3ff; border: 1.5px solid #fff; width: 9px; height: 9px; }
.map-legend .lg-portal { border: 2px solid #c38bff; background: rgba(195, 139, 255, .35); border-radius: 50%; width: 10px; height: 10px; }
.map-legend .lg-stone { background: #35e0d0; border: 1.5px solid #fff; transform: rotate(45deg) scale(.75); }
.map-legend .lg-party { background: #3fe06a; border: 1.5px solid #fff; border-radius: 50%; width: 10px; height: 10px; }
.map-legend .lg-boss { background: radial-gradient(circle, #ff5a4f 35%, rgba(255, 90, 79, .25) 70%); border-radius: 50%; }
.map-legend .lg-route { width: 22px; height: 0; border-top: 3px dashed #ffd84a; }
.map-legend .lg-hint { color: #f5d76e; font-weight: 700; }
#map-expand-canvas { cursor: var(--cur-hand); }
/* น้ำหนักกระเป๋า: < 90% เขียว, >= 90% แดง (ผู้ใช้ขอ 2026-09-28) */
#win-bag .inv-pill b#inv-weight.weight-ok, #cc-weight.weight-ok { color: #6ee58a; }
#win-bag .inv-pill b#inv-weight.weight-high, #cc-weight.weight-high { color: #ff6a5a; }
.map-expand-legend { display: none; }   /* แทนด้วย .map-legend (UIManager.renderMapLegend: + ปาร์ตี้/บอส/เส้นทาง) */
.map-expand-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.lg-player { color: #ffe14d; font-style: normal; transform: rotate(90deg); text-shadow: 0 0 2px #000; }
.lg-npc { width: 10px; height: 10px; background: #4aa3ff; border: 1px solid #fff; }
.lg-portal { width: 11px; height: 11px; border-radius: 50%; background: rgba(195, 139, 255, 0.35); border: 2px solid #c38bff; }
.lg-waystone { width: 9px; height: 11px; background: #35e0d0; border: 1.5px solid #fff; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 0 1px #2a8f86; }

/* ===== แผนที่โลก (เมนู แผนที่) ===== */
.world-map { display: flex; flex-direction: column; gap: 10px; }
.wm-board { position: relative; max-height: 380px; overflow: auto; display: flex; border: 2px solid #b99a5b; border-radius: 10px;
  background: radial-gradient(ellipse at 30% 40%, rgba(120, 170, 110, 0.55), transparent 60%), radial-gradient(ellipse at 75% 30%, rgba(60, 110, 70, 0.6), transparent 55%),
    radial-gradient(ellipse at 20% 75%, rgba(230, 210, 150, 0.7), transparent 45%), linear-gradient(#9cc7d8, #7fb0c6); }
.wm-grid { position: relative; flex: none; margin: auto; }
.wm-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-links line { stroke: #7a5a22; stroke-width: 0.7; stroke-dasharray: 2 1.4; vector-effect: non-scaling-stroke; stroke-width: 3; }
.wm-node { position: absolute; width: 90px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 5px 6px; border: 2px solid #8a6a2e; border-radius: 9px; background: #f2e7cc; color: #3b2c1a; cursor: var(--cur-hand); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); font: inherit; }
.wm-node:hover { border-color: #ffd24a; }   /* ไม่ขยาย/ไม่ขยับ (ผู้ใช้: กดแมพแล้วเด้ง กดยาก) */
.wm-node.selected { border-color: #2e5fb8; box-shadow: 0 0 0 3px rgba(46, 95, 184, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35); }
.wm-node.current { border-color: #e0a526; }
.wm-thumb { width: 100%; height: 44px; border-radius: 6px; background: #5b7d4a center / cover no-repeat; image-rendering: pixelated; }
.wm-name { font-size: 11px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-lv { color: #2e5fb8; font-size: 10px; font-weight: 700; }
.wm-here { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 10px; background: #e0482f; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); animation: wm-bob 1.2s ease-in-out infinite; }
@keyframes wm-bob { 50% { transform: translate(-50%, -3px); } }
.wm-detail { padding: 10px 12px; border: 1px solid #d3bd8f; border-radius: 8px; background: #e8dab8; }
.wm-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #3b2c1a; font-size: 16px; }
.wm-tags { display: flex; gap: 6px; }
.wm-tag { padding: 2px 8px; border-radius: 10px; background: #7a5a22; color: #fff; font-size: 12px; font-weight: 700; }
.wm-tag.lv { background: #2e5fb8; }
.wm-tag.here { background: #e0482f; }
.wm-desc { margin: 6px 0; color: #6b5a42; font-size: 13px; line-height: 1.45; }
.wm-row { display: flex; gap: 8px; margin-top: 4px; color: #3b2c1a; font-size: 13px; }
.wm-label { flex: none; min-width: 80px; color: #7a5a22; font-weight: 700; }

/* ===== กระดานข่าวสาร (NewsBoard.js) ===== */
.news-win { display: flex; flex-direction: column; gap: 10px; }
.news-layout { display: grid; grid-template-columns: 230px 1fr; gap: 12px; min-height: 340px; }
.news-rows { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.news-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; border: 1px solid #d3bd8f; border-radius: 8px; background: #e8dab8; color: #3b2c1a; text-align: left; font: inherit; }
.news-row:hover { background: #efe3c5; }
.news-row.active { border-color: #2e5fb8; background: #fffaf0; box-shadow: inset 3px 0 0 #2e5fb8; }
.news-row b { font-size: 14px; line-height: 1.3; }
.news-row small { color: #6b5a42; font-size: 11px; }
.news-cat { padding: 1px 8px; border-radius: 9px; background: #7a5a22; color: #fff; font-size: 11px; font-weight: 700; }
.news-cat.cat-event { background: #c0392b; } .news-cat.cat-update { background: #2e5fb8; } .news-cat.cat-maintenance { background: #6b6f78; }
.news-view { max-height: 52vh; overflow-y: auto; padding: 12px 16px; border: 1px solid #d3bd8f; border-radius: 8px; background: #fffaf0; }
.news-view-head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #d3bd8f; }
.news-view-head h3 { margin: 0; color: #3b2c1a; font-size: 19px; }
.news-when { color: #7a5a22; font-size: 12px; }
.news-body { color: #3b2c1a; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.news-empty { padding: 40px 12px; color: #6b5a42; text-align: center; }
.news-foot { display: flex; justify-content: flex-end; }
@media (max-width: 700px) { .news-layout { grid-template-columns: 1fr; } }

/* หินวาร์ป: หน้าต่างแผนที่เลือกจุดวาร์ป (ใช้ WorldMapView โหมด warp) */
.travel-dialog.warp-map { max-width: 760px; width: min(760px, 94vw); max-height: 92vh; overflow: auto; }
.warp-map-view { display: grid; gap: 10px; margin: 8px 0 4px; }
.wm-node.wm-locked { opacity: 0.5; filter: grayscale(0.6); }
.wm-warp-badge { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: #7b3fd0; color: #fff; font-size: 12px; box-shadow: 0 0 8px #c08bff; }
.wm-warps { display: grid; gap: 6px; margin-top: 8px; }
.wm-warp-btn { padding: 9px 12px; border: 1px solid #7b5fb0; border-radius: 6px; background: #3d2a63; color: #f3e9ff; font: inherit;
  text-align: left; cursor: var(--cur-hand); }
.wm-warp-btn:not(:disabled):hover { background: #5a3d92; }
.wm-warp-btn:disabled { opacity: 0.6; cursor: default; }
.wm-warp-none { color: #6d5a3a; font-size: 13px; }

/* คลัง NPC: แถบ Zeny ฝาก/ถอน */
.stor-zeny { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 8px; padding: 8px 10px;
  border: 1px solid #d3bd8f; border-radius: 8px; background: #efe3c4; }
.stor-zeny-col { display: grid; line-height: 1.2; margin-right: 6px; }
.stor-zeny-col small { color: #6d5a3a; font-size: 11px; }
.stor-zeny-col b { display: flex; align-items: center; gap: 4px; color: #3b2c1a; }
#stor-zeny-input { width: 110px; padding: 6px 8px; border: 1px solid #b99a5b; border-radius: 6px; font: inherit; margin-left: auto; }

/* ช่างตีบวก */
.travel-dialog.refine-dialog { max-width: 620px; width: min(620px, 94vw); }
.refine-list { display: grid; gap: 8px; margin: 10px 0; }
.refine-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #5f7458; border-radius: 8px; background: #1d372d; }
.refine-ico { width: 40px; height: 40px; flex: none; border-radius: 6px; background-color: #2c4a3d; }
.refine-info { display: grid; flex: 1; min-width: 0; }
.refine-info small { color: #c9d6b8; font-size: 12px; }
.refine-row button { flex: none; padding: 8px 14px; border: 1px solid #b6a26c; border-radius: 6px; background: #6b5320; color: #fff3cf; cursor: var(--cur-hand); font: inherit; }
.refine-row button.risky { background: #7a2f23; border-color: #d98a6c; }
.refine-row button:disabled { opacity: 0.45; cursor: default; }
.refine-result { min-height: 1.4em; font-weight: bold; }
.refine-result.ok { color: #9ff0a4; }
.refine-result.fail { color: #ff9f8f; }

/* ช่างตีบวก (ตาม ref) */
.refine-body { display: flex; flex-direction: column; gap: 8px; max-height: min(78vh, 760px); overflow: auto; }
.refine-body > * { flex: none; }
.ref-rate { padding: 7px; border: 1px solid #8fb2d8; border-radius: 6px; background: linear-gradient(#f4f8ff, #dde8f6);
  color: #23466f; font-weight: 800; text-align: center; }
.ref-rate.safe { color: #1f7a3a; } .ref-rate.mid { color: #b06a10; } .ref-rate.low { color: #b3261e; }
.ref-pips { display: flex; justify-content: center; gap: 5px; }
.ref-pip { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #b9c4d2;
  background: #eef2f7; color: #8793a3; font-size: 11px; font-weight: 800; }
.ref-pip.risk { border-color: #e2b3a8; }
.ref-pip.done { background: #3d6fb6; border-color: #24508f; color: #fff; }
.ref-pip.next { background: #f5b640; border-color: #b77a12; color: #3b2600; box-shadow: 0 0 0 2px rgba(245, 182, 64, 0.35); }
.ref-stage { position: relative; height: 190px; border-radius: 8px; overflow: hidden;
  background: url('src/assets/ui/refine_anvil.png') center 58% / 250px auto no-repeat, radial-gradient(ellipse at 50% 70%, #2b4f86, #101b33 72%); }
.ref-item-ico { position: absolute; left: 50%; top: 22px; width: 52px; height: 52px; transform: translateX(-50%);
  border: 2px solid #f1f4fb; border-radius: 6px; background-color: #fbfcff; box-shadow: 0 0 14px #7fc1ff; animation: ref-float 1.6s ease-in-out infinite; }
.ref-item-ico.empty { opacity: 0; }
@keyframes ref-float { 50% { transform: translate(-50%, -5px); } }
.ref-item-name { position: absolute; left: 0; right: 0; top: 80px; color: #fff; text-align: center; font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.ref-cost { color: #4a3b24; font-size: 12px; text-align: center; }
.ref-confirm { padding: 10px; border: 2px solid #b6922e; border-radius: 6px; background: linear-gradient(#274f8e, #183566); color: #fff; font: inherit;
  font-weight: 800; cursor: var(--cur-hand); }
.ref-confirm.risky { background: linear-gradient(#8e3a27, #5f2014); }
.ref-back { background: linear-gradient(#5a6478, #363d4d); }
/* เอฟเฟกผลตีบวกบนแท่นทั่ง: สำเร็จ = แสงทอง + SUCCESS เด้ง, แตก = สั่น + แสงแดง + FAIL */
.ref-fx { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ref-fx.hidden { display: none; }
.ref-fx.ok { background: radial-gradient(circle at 50% 38%, rgba(255, 226, 120, 0.75), rgba(255, 196, 60, 0.18) 42%, transparent 70%);
  animation: ref-fx-glow 0.9s ease-out both; }
.ref-fx.fail { background: radial-gradient(circle at 50% 38%, rgba(255, 70, 50, 0.6), rgba(120, 10, 10, 0.3) 45%, transparent 75%);
  animation: ref-fx-shake 0.45s ease-in-out 2; }
.ref-fx-word { margin-top: 70px; font-size: 38px; font-weight: 900; letter-spacing: 3px; font-style: italic; }
.ref-fx.ok .ref-fx-word { color: #fff6c8; text-shadow: 0 0 8px #ffb400, 0 0 18px #ff9a00, 0 2px 0 #7a4a00; animation: ref-fx-pop 0.55s cubic-bezier(.2, 1.6, .4, 1) both; }
.ref-fx.fail .ref-fx-word { color: #ffd9d4; text-shadow: 0 0 8px #ff2a1a, 0 0 16px #b00000, 0 2px 0 #3a0000; animation: ref-fx-drop 0.5s ease-out both; }
@keyframes ref-fx-glow { from { opacity: 0; } 25% { opacity: 1; } }
@keyframes ref-fx-pop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ref-fx-drop { from { transform: translateY(-30px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ref-fx-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ref-stage:has(.ref-fx.fail) .ref-item-ico { opacity: 0; transition: opacity 0.4s; }
.ref-confirm:disabled { opacity: 0.45; cursor: default; }
.ref-result { min-height: 1.2em; margin: 0; font-size: 13px; font-weight: 800; text-align: center; }
.ref-result.ok { color: #1f7a3a; } .ref-result.fail { color: #b3261e; } .ref-result.warn { color: #9a6a12; font-weight: 600; }
.ref-rules { margin: 0; color: #9a3d1e; font-size: 11.5px; line-height: 1.45; }
.ref-list-head { padding: 6px 10px; border-radius: 6px; background: #22457a; color: #fff; font-weight: 800; font-size: 13px; }
.ref-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ref-item { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 6px; border: 1px solid #d3c29a; border-radius: 6px;
  background: #fbf5e6; color: #3b2c1a; font: inherit; font-size: 12px; text-align: left; cursor: var(--cur-hand); }
.ref-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-item em { color: #1f7a3a; font-style: normal; font-weight: 800; }
.ref-item.active { border-color: #2e5fb8; background: #e6eefb; box-shadow: 0 0 0 2px rgba(46, 95, 184, 0.3); }
.ref-item-mini { width: 26px; height: 26px; flex: none; }
@media (max-width: 480px) { .ref-list { grid-template-columns: 1fr; } }

/* Settings: compact parchment panels inspired by the game reference. */
#win-settings { max-height: min(92vh, 820px); border-color: #d3ad5a; }
#win-settings .win-header { min-height: 48px; background: linear-gradient(#224271, #10284d); }
#win-settings .win-title { font-size: 20px; }
#win-settings .win-body { margin: 5px; padding: 7px; overflow-y: auto; }
.settings-body { display: flex; flex-direction: column; gap: 8px; }
.settings-section { flex: none; border: 1px solid #c6a66d; border-radius: 5px; background: #fff9e9; box-shadow: 0 2px 3px #8e744866; overflow: hidden; }
.settings-section h3 { margin: 0; padding: 5px 10px; color: #fff8e5; background: linear-gradient(90deg, #1b3968, #587da7 75%, #f9f3df); font-size: 13px; line-height: 1.3; }
.settings-content { padding: 6px 9px; display: grid; gap: 5px; }
.settings-control { display: grid; grid-template-columns: 85px 21px minmax(0, 1fr) 34px; align-items: center; gap: 6px; min-height: 28px; font-size: 12px; }
.settings-control label { display: flex; align-items: center; gap: 7px; font-weight: 700; cursor: var(--cur-hand); }
.settings-control input[type="checkbox"], .settings-check input { width: 17px; height: 17px; margin: 0; accent-color: #2d60ad; cursor: var(--cur-hand); }
.settings-control output, .settings-range-row output { text-align: right; font-size: 11px; font-weight: 700; color: #284274; }
.settings-speaker { color: #274b84; font-weight: 800; }
#win-settings input[type="range"] { width: 100%; min-width: 0; accent-color: #d1a549; cursor: var(--cur-hand); }
.settings-account { display: flex; align-items: center; gap: 10px; margin: 6px 9px; padding: 7px 9px; border: 1px solid #bacbe1; border-radius: 5px; background: linear-gradient(110deg, #fff, #e6f0fa); }
.settings-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #315889; box-shadow: 0 1px 4px #637b9a66; }
.settings-account strong, .settings-account small { display: block; }
.settings-account strong { color: #185a41; font-size: 12px; }
.settings-account small { color: #476174; font-size: 11px; }
.settings-select-row { display: grid; grid-template-columns: minmax(0, 1fr) 145px; align-items: center; gap: 8px; min-height: 24px; font-size: 11px; font-weight: 700; }
.settings-select-row select { width: 100%; padding: 3px 5px; border: 1px solid #b5c5dc; border-radius: 4px; background: #fff; color: #273e67; font: inherit; }
.settings-static { padding: 4px; color: #687b8b; text-align: right; }
.settings-range-row { display: grid; grid-template-columns: minmax(0, 1fr) 98px 34px auto; align-items: center; gap: 6px; min-height: 25px; font-size: 11px; font-weight: 700; }
.settings-range-row label { min-width: 0; }
.settings-range-row button { border: 1px solid #afc0d7; border-radius: 4px; padding: 3px 5px; background: #f3f6fb; color: #345178; font: inherit; cursor: var(--cur-hand); }
.settings-divider { border-top: 1px dashed #d2c19f; margin: 2px 0; }
.settings-check { display: flex; align-items: center; gap: 9px; min-height: 21px; font-size: 11px; font-weight: 700; cursor: var(--cur-hand); }
.settings-session { display: flex; align-items: center; gap: 8px; padding: 7px 9px; }
.settings-session > button { flex: none; max-width: 145px; white-space: normal; font-size: 11px; }
.settings-session > button[data-action="logout"] { display: grid; gap: 1px; }
.settings-session > button[data-action="logout"][hidden] { display: none; }
.settings-session > button[data-action="logout"] small { font-size: 9px; opacity: .75; }
.settings-session-card { flex: 1; display: grid; gap: 2px; padding: 7px 8px; border: 1px solid #c0cee0; border-radius: 5px; background: #f1f6fc; }
.settings-session-card strong { color: #21814d; font-size: 11px; }
.settings-session-card small { color: #40617c; font-size: 10px; }
.settings-footer { color: #8f7952; font-family: Georgia, serif; letter-spacing: 1.5px; font-size: 9px; text-align: center; }

/* Scale the DOM HUD only. The Phaser canvas keeps its native pointer coordinates. */
/* หน้าต่างเมนูย่อตาม --win-scale (ตั้งค่า "ขนาดหน้าต่าง" แยกจาก HUD) (มุมซ้ายบนคงที่ — ตำแหน่ง left/top และการลากยังตรงกับจอ); ขนาดสูงสุดหารด้วยสเกลเพื่อให้พอดีจอเท่าเดิม */
.game-window {
  transform: scale(var(--win-scale, 1));
  transform-origin: left top;
  width: min(var(--win-w, 440px), calc(94vw / var(--win-scale, 1)));
  max-height: calc(78vh / var(--win-scale, 1));
}
/* หน้าต่างที่ยังไม่ได้ทำ layout กะทัดรัด (ยังไม่ใช่ .win-night) ย่อเพิ่ม 0.82 ไว้ก่อนเหมือน patch .58 */
.game-window:not(.win-night), .game-window.win-legacy {
  --win-fit: calc(var(--win-scale, 1) * 0.82);
  transform: scale(var(--win-fit));
  width: min(var(--win-w, 440px), calc(94vw / var(--win-fit)));
  max-height: calc(78vh / var(--win-fit));
}
/* tooltip วางตำแหน่งจากขนาดจริงบนจอ (getBoundingClientRect) จึงย่อได้เลย; ป้ายประกาศอัปเดตย่อจากกึ่งกลางบน */
.item-tip, .status-guide-tooltip { transform: scale(var(--win-scale, 1)); transform-origin: left top; }
.event-tooltip { transform: scale(var(--hud-scale, 1)); transform-origin: left top; }
.update-notice { transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: center top; }
#hud-char { transform: scale(var(--hud-scale, 1)); }
#hud-sysbar { transform: scale(var(--hud-scale, 1)); transform-origin: left top; }
#hud-buffs { transform: scale(var(--hud-scale, 1)); transform-origin: left top; }
#hud-topright { transform: scale(var(--hud-scale, 1)); transform-origin: right top; }
#hud-joystick { transform: scale(var(--hud-scale, 1)); transform-origin: left bottom; opacity: var(--controls-opacity, 1); }
#hud > #hud-actions { transform: scale(var(--hud-scale, 1)); transform-origin: right bottom; opacity: var(--controls-opacity, 1); }
.hud-chat { transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: center bottom; }
.settings-hide-joystick #hud-joystick, .settings-hide-actions #hud-actions,
.settings-hide-char-card #hud-char, .settings-hide-char-card #hud-sysbar { display: none; }
@media (max-width: 560px) {
  #hud-char { transform: scale(var(--hud-scale-mobile, .72)); }
  #hud-joystick, #hud > #hud-actions { transform: scale(var(--hud-controls-mobile, .8)); }
}
#win-ranking { height: min(88vh, 760px); max-height: none; }
#win-ranking .win-header { min-height: 50px; }
.ranking-body { display: flex; flex: 1; flex-direction: column; gap: 10px; min-height: 0; padding: 16px; overflow: hidden; }
.ranking-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #75551e; }
.ranking-intro strong { font-size: 15px; }
.ranking-intro button, .ranking-pages button {
  border: 1px solid #b18b47; border-radius: 6px; background: linear-gradient(#fff8e9, #e6d3a9);
  color: #5b431e; font: inherit; font-weight: 700; cursor: var(--cur-hand);
}
.ranking-intro button { padding: 6px 10px; white-space: nowrap; }
.ranking-head, .ranking-row { display: grid; grid-template-columns: 70px minmax(130px, 2fr) minmax(110px, 1.2fr) minmax(100px, 1.2fr); align-items: center; gap: 10px; }
.ranking-head { padding: 8px 12px; border-radius: 6px; background: #284675; color: #fff4d0; font-size: 13px; font-weight: 700; }
.ranking-list { display: flex; flex: 1; flex-direction: column; gap: 5px; min-height: 0; overflow-y: auto; scrollbar-color: #ad8b47 #e4d5b6; }
.ranking-row { min-height: 43px; padding: 5px 12px; border: 1px solid #d8c294; border-radius: 6px; background: #fffaf0; color: #423523; }
.ranking-row:nth-child(even) { background: #f5e9ce; }
.ranking-place { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #947851; background: #554d43; color: white; font-weight: 700; }
.ranking-medal-1 .ranking-place { border-color: #fff0a8; background: #c99419; }
.ranking-medal-2 .ranking-place { border-color: #fff; background: #8e9ca7; }
.ranking-medal-3 .ranking-place { border-color: #f2c6a0; background: #aa6642; }
.ranking-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ranking-name small { margin-left: 5px; color: #947b55; font-size: 11px; font-weight: 600; }
.ranking-job, .ranking-guild { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-job { display: inline-flex; align-items: center; gap: 5px; }
.ranking-job-icon { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.ranking-guild { color: #8d7c64; }
.ranking-message { padding: 56px 12px; text-align: center; color: #79694f; }
.ranking-pages { display: flex; align-items: center; justify-content: center; gap: 5px; }
#ranking-page-buttons { display: flex; gap: 4px; max-width: min(430px, 60vw); overflow-x: auto; scrollbar-width: thin; }
.ranking-pages button { min-width: 30px; height: 30px; }
.ranking-pages button[aria-current="page"] { background: #2d4d80; border-color: #1c3153; color: white; }
.ranking-pages button:disabled { opacity: .45; cursor: default; }
.ranking-count { text-align: center; color: #766545; font-size: 12px; }
@media (max-width: 620px) {
  .ranking-body { padding: 10px; }
  .ranking-head, .ranking-row { grid-template-columns: 44px minmax(92px, 2fr) minmax(75px, 1fr) minmax(60px, 1fr); gap: 5px; padding-left: 6px; padding-right: 6px; font-size: 11px; }
  .ranking-place { width: 28px; height: 28px; }
  .ranking-intro strong { font-size: 12px; }
  .ranking-intro button { font-size: 11px; }
}

/* ===== แปลงหน้าต่างพื้นกระดาษที่เหลือเป็นธีมกลางคืน (.win-night.win-legacy — patch .99) =====
   อาชีพ/บันทึก/บอท/ตั้งค่า/Wiki/อันดับ/ร้าน/ตีบวก/คลัง/ข่าว/สัตว์เลี้ยง/รางวัลรายวัน: ใช้หัว+พื้นหน้าต่างกลางคืน
   กล่องที่เคยเป็นสีครีมเปลี่ยนเป็นแผงน้ำเงินเข้มขอบทอง ตัวอักษรสีเข้มเปลี่ยนเป็นสีอ่อน (ขนาดย่อ 0.82 เท่าเดิม) */
.win-legacy .win-body { color: var(--nt-text); }
.win-legacy .win-body.settings-body, .win-legacy .win-body.wiki-win-body, .win-legacy .win-body.ranking-body,
.win-legacy .win-body.news-win, .win-legacy .win-body.pet-body, .win-legacy .win-body.daily-body, #win-bot #tab-bot {
  background: var(--ui-castle) bottom / 100% 34% no-repeat, radial-gradient(ellipse at 50% 20%, #1c2f62 0%, #111d42 55%, #0a1230 100%);
}
.win-legacy :is(#job-current, .jb-card, .jb-note, .jb-node, .ap-hero, .ap-opt, .ap-choice, .ap-chip, .ap-note, .ap-potion,
  .settings-section, .settings-session-card, .wk-list, .wk-row, .wk-detail, .news-row, #news-view, .pet-card, .daily-footer,
  .ranking-row, .ref-cost, .ref-rules, .ref-result, .ref-list .ref-item, .log-line) {
  background: var(--nt-panel); border-color: var(--nt-border); color: var(--nt-text);
}
.win-legacy :is(.jb-card.locked, .ap-opt.ap-off, .ap-potion.ap-off) { background: rgba(8, 12, 30, 0.7); opacity: 0.75; }
.win-legacy :is(.ranking-medal-1) { background: linear-gradient(90deg, rgba(226, 185, 90, 0.4), var(--nt-panel)); }
.win-legacy :is(.ranking-medal-2) { background: linear-gradient(90deg, rgba(190, 200, 220, 0.32), var(--nt-panel)); }
.win-legacy :is(.ranking-medal-3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.35), var(--nt-panel)); }
.win-legacy :is(.jb-cur-name, .jb-sec, .jb-card-name, .ap-zz, .ap-play, .settings-speaker, #settings-account-name, .wk-sec-title,
  .ranking-name, .bot-section-title, #daily-count, .daily-gift, .daily-crown, .news-body, .log-line, .ap-opt b, .ap-choice b,
  .ap-potion b, .ap-chip span, .ref-item span, .jb-node, .settings-section h3, .settings-section h4) { color: var(--nt-text); }
.win-legacy :is(.jb-cur-stats, .jb-card-req, .jb-note, .ap-empty, .ap-opt small, .ap-choice small, .ap-potion small, .ap-note,
  #settings-account-detail, #settings-connection, #settings-ping, .wk-sub, .wk-desc, .wk-rate, .news-when, .pet-hint, .pet-sub,
  .ranking-job, #ranking-count, #daily-next-label, #daily-progress-text, .ref-cost, [id$="-value"]) { color: var(--nt-sub); }
.win-legacy .ref-rules { color: #ffc2a8; }
.win-legacy .ref-result.ok { color: #7dffa8; } .win-legacy .ref-result.fail { color: #ff8f86; } .win-legacy .ref-result.warn { color: #ffd479; }
.win-legacy .wk-link { color: #8fd0ff; }
.win-legacy :is(input[type="number"], input[type="text"], input[type="search"], select, .wk-search, #pet-range-num, #lang-switch,
  #setting-fullscreen, #setting-fps, #setting-damage-font, #setting-hud-reset, #setting-window-reset, .wk-back, .wk-open-web) {
  background: #0b1535; color: var(--nt-text); border: 1px solid #5a6b98;
}
.win-legacy :is(#ranking-refresh, #ranking-prev, #ranking-next, #shop-clear, .pet-btn.dismiss, .settings-account) {
  background: linear-gradient(#22346a, #111d42); color: var(--nt-text); border-color: #5a6b98;
}
.win-legacy :is(.settings-avatar, .daily-bar) { background: #13224d; color: var(--nt-text); }
.win-legacy .pet-preview { background: radial-gradient(ellipse at 50% 60%, #2b4f86, #101b33 72%); }
.win-legacy .wk-ico, .win-legacy .wk-big { background-color: #efe6cf; }
/* สีเกรดไอเทมที่ใส่ inline (เกรดธรรมดา = น้ำตาลเข้ม) อ่านไม่ออกบนพื้นกลางคืน */
.win-legacy [style*="color:#3b2c1a"], .win-legacy [style*="color: #3b2c1a"] { color: #f1f4ff !important; }
.win-legacy .win-body :is(small, th, dt, .wk-detail span) { color: var(--nt-sub); }
.win-legacy [style*="color:#1e8449"] { color: #7dffa8 !important; }
.win-legacy [style*="color:#2e5fb8"] { color: #8fc4ff !important; }
.win-legacy [style*="color:#8e44ad"] { color: #d9a6ff !important; }
/* ร้านค้า/คลัง (ใช้ .shop-* ร่วมกัน) บนพื้นกลางคืน */
.win-legacy .shop-npc img { background: radial-gradient(circle, #2b4f86, #101b33); border-color: var(--nt-border); }
.win-legacy :is(.shop-npc small, .shop-info small) { color: var(--nt-sub); }
.win-legacy .shop-row { background: var(--nt-panel); border-color: rgba(90, 107, 152, 0.7); color: var(--nt-text); }
.win-legacy .shop-row.in-cart { background: rgba(40, 110, 70, 0.55); border-color: #6fbf73; }
.win-legacy .shop-price { color: #ffd479; }
.win-legacy .shop-row input[type="number"] { background: #0b1535; color: var(--nt-text); border-color: #5a6b98; }
.win-legacy :is(#shop-total, #storage-total, .shop-cost) { color: var(--nt-text); }
.win-legacy .stor-zeny { background: var(--nt-panel); border-color: var(--nt-border); color: var(--nt-text); }
.win-legacy :is(#stor-zeny-bag, #stor-zeny-stored) { color: #ffd479; }
.win-legacy .pet-body label, .win-legacy .pet-body label :is(b, span) { color: var(--nt-text); }
.win-legacy .news-win :is(h3, label) { color: var(--nt-text); }
.win-legacy .news-row > span:not([class]) { color: var(--nt-text); }

/* ===== กระเป๋า v2 (ตาม ref ผู้ใช้ 2026-09-25): กรอบน้ำเงินเข้มขอบทอง, เป้สะพายมุมซ้ายบน, คริสตัลกลางหัว, ริบบิ้นชื่อ,
   ปุ่มปิดริบบิ้นแดง, ช่องไอเทมพื้นครีมขอบตามเกรด, ช่องว่างน้ำเงินเข้มลายดาว, ตัวอักษรใหญ่สีตัดชัด ===== */
#win-bag {
  --bag-gold: #d9b25a; --bag-gold-hi: #ffe7a3; --bag-navy: #0f1a3a; --bag-navy-2: #16244d; --bag-text: #f3f6ff; --bag-sub: #b9c6e6;
  border: 3px solid var(--bag-gold);
  border-radius: 14px;
  background: var(--bag-navy);
  box-shadow: 0 0 0 2px #3a2a0c, 0 0 0 5px rgba(217, 178, 90, 0.35), 0 18px 40px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
#win-bag .win-header {
  position: relative;
  height: 92px;
  padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 22%, rgba(255, 240, 180, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 45%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 55%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    var(--ui-castle) bottom / 100% 60% no-repeat,
    linear-gradient(#1b2b5e, #0f1a3a);
  border-radius: 11px 11px 0 0;
}
#win-bag .win-header::before {       /* คริสตัลประดับกลางหัว (PixelLab) */
  content: ''; position: absolute; top: -26px; left: 50%; width: 128px; height: 80px; transform: translateX(-50%);
  background: url('src/assets/ui/bag_crest.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none;
}
#win-bag .win-header::after {        /* เป้สะพายมุมซ้ายบน (PixelLab) */
  content: ''; position: absolute; left: -26px; top: -46px; width: 196px; height: 160px;
  background: url('src/assets/ui/bag_backpack.png') left top / contain no-repeat; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}
#win-bag .win-icon { display: none; }
#win-bag .win-title {
  position: relative; margin-bottom: 8px; padding: 6px 46px;
  font-size: 24px; font-weight: 800; letter-spacing: 0.5px; color: #fff;
  text-shadow: 0 2px 0 #0a1230, 0 0 10px rgba(120, 170, 255, 0.6);
  background: linear-gradient(#2c4fa8, #1a3276);
  border-top: 2px solid var(--bag-gold); border-bottom: 2px solid var(--bag-gold);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
}
#win-bag .win-title::before, #win-bag .win-title::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--bag-gold-hi); font-size: 14px; text-shadow: 0 0 6px #ffd76a; }
#win-bag .win-title::before { left: 20px; } #win-bag .win-title::after { right: 20px; }
#win-bag .win-close {            /* ริบบิ้นแดงห้อยมุมขวา */
  position: absolute; top: -6px; right: 14px; width: 46px; height: 58px; border: 2px solid var(--bag-gold); border-top: none;
  border-radius: 0; font-size: 26px; font-weight: 900; color: #fff; line-height: 44px;
  background: linear-gradient(#e0473a, #a91f1a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.25);
}
#win-bag .win-body {
  padding: 10px 16px 12px; color: var(--bag-text); border-radius: 0 0 11px 11px;
  background: var(--ui-castle) bottom / 100% 22% no-repeat, linear-gradient(#111d42, #0c1532);
}
/* แถวบน: น้ำหนัก / zeny / ปุ่ม Equip */
#win-bag .inv-top { gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
#win-bag .inv-pill {
  padding: 5px 16px; font-size: 17px; color: #fff; background: linear-gradient(#18285a, #0d1736);
  border: 2px solid var(--bag-gold); border-radius: 10px; box-shadow: inset 0 0 0 1px #0a1230;
}
#win-bag .inv-pill b { color: #fff; font-weight: 700; }
#win-bag #inv-open-equip {
  padding: 6px 20px; font-size: 18px; font-weight: 800; color: #3a2400; border: 2px solid #fff0b8; border-radius: 10px;
  background: linear-gradient(#ffd96b, #e9a92a); box-shadow: 0 0 0 1px #6b4a14, 0 3px 0 #8a5b12;
}
/* หมวดด้านซ้าย */
#win-bag .inv-cats { gap: 7px; }
#win-bag .inv-cats button {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px;
  font-size: 16px; font-weight: 700; color: var(--bag-text); text-align: left;
  background: linear-gradient(#1d2d5f, #121e44); border: 2px solid #3d4f82; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#win-bag .inv-cats button:hover { border-color: var(--bag-gold); }
#win-bag .inv-cats button.active {
  color: #fff; background: linear-gradient(#3f7cf0, #2452c4); border-color: #9cc4ff;
  box-shadow: 0 0 0 2px var(--bag-gold), 0 0 12px rgba(80, 150, 255, 0.55);
}
#win-bag .inv-cat-ico { font-size: 20px; width: 24px; text-align: center; }
/* เครื่องมือค้นหา/เรียง */
#win-bag .inv-tools { gap: 8px; margin-bottom: 8px; }
#win-bag #inv-search, #win-bag #inv-sort {
  height: 36px; font-size: 15px; color: var(--bag-text); background: #0a1330; border: 2px solid #3d4f82; border-radius: 8px;
}
#win-bag #inv-search::placeholder { color: #8796bd; }
#win-bag .inv-view button { width: 38px; height: 36px; font-size: 18px; color: #cfe0ff; background: #0a1330; border: 2px solid #3d4f82; }
#win-bag .inv-view button.active { color: #fff; background: linear-gradient(#3f7cf0, #2452c4); border-color: #9cc4ff; }
/* ตารางไอเทม */
#win-bag .inv-grid {
  gap: 7px; padding: 8px; background: rgba(6, 12, 32, 0.6); border: 2px solid var(--bag-gold); border-radius: 10px;
}
#win-bag .inv-cell {
  border: 3px solid #cdb78a; border-radius: 9px;
  background: radial-gradient(circle at 50% 40%, #fffaf0, #f1e4c6); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
#win-bag .inv-cell.grade-uncommon { border-color: #58b86a !important; }
#win-bag .inv-cell.grade-rare { border-color: #5c95f0 !important; }
#win-bag .inv-cell.grade-epic { border-color: #b77bf0 !important; }
#win-bag .inv-cell.empty {
  background: #152450 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 11.5 8.5 17 10 11.5 11.5 10 17 8.5 11.5 3 10 8.5 8.5z' fill='%23233772'/%3E%3C/svg%3E") center / 40% no-repeat;
  border: 2px solid #233772 !important;
}
#win-bag .inv-n {
  font-size: 15px; font-weight: 900; color: #fff;
  text-shadow: -1px -1px 0 #1a1206, 1px -1px 0 #1a1206, -1px 1px 0 #1a1206, 1px 1px 0 #1a1206, 0 2px 0 #1a1206;
}
#win-bag .inv-cell.selected { outline: 3px solid #ffe07a; outline-offset: 1px; box-shadow: 0 0 12px rgba(255, 215, 100, 0.7); }
/* แถบล่าง */
#win-bag .inv-footer { margin-top: 10px; align-items: center; }
#win-bag #inv-summary { font-size: 16px; color: var(--bag-sub); }
#win-bag #inv-summary::before { content: '📦 '; }
#win-bag #inv-discard {
  padding: 7px 20px; font-size: 17px; font-weight: 700; color: #fff; border: 2px solid #e7a08f; border-radius: 10px;
  background: linear-gradient(#b3352c, #7e1d18); box-shadow: 0 3px 0 #4a0f0c;
}
/* มุมมองรายการ */
#win-bag .inv-row { background: #152450; border: 2px solid #2d3f75; color: var(--bag-text); font-size: 15px; }
#win-bag .inv-row-type { color: var(--bag-sub); }
#win-bag { --win-w: 740px !important; }
#win-bag .win-header { height: 80px; }
#win-bag .inv-main { display: grid; grid-template-columns: 172px 1fr; gap: 12px; }
#win-bag .inv-cats button { min-height: 38px; white-space: nowrap; }
#win-bag .inv-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); grid-auto-rows: 58px; max-height: 262px; }
#win-bag .inv-cell { width: auto; height: 58px; }
#win-bag .inv-cell img, #win-bag .inv-cell canvas { transform: scale(1.15); }
#win-bag .inv-cats { gap: 5px; }
#win-bag .inv-cats button { min-height: 34px; padding: 4px 12px; font-size: 15px; }
#win-bag .inv-top { margin-bottom: 8px; }
#win-bag .inv-footer { margin-top: 8px; }
/* กระเป๋า v2 — ย่อให้กะทัดรัด (ผู้ใช้: ใหญ่ไป) */
#win-bag { --win-w: 580px !important; border-width: 2px; border-radius: 12px; }
#win-bag .win-header { height: 60px; }
#win-bag .win-header::before { top: -20px; width: 92px; height: 58px; }
#win-bag .win-header::after { left: -20px; top: -34px; width: 132px; height: 108px; }
#win-bag .win-title { margin-bottom: 6px; padding: 3px 34px; font-size: 18px; }
#win-bag .win-title::before { left: 14px; } #win-bag .win-title::after { right: 14px; }
#win-bag .win-title::before, #win-bag .win-title::after { font-size: 11px; }
#win-bag .win-close { top: -4px; right: 10px; width: 34px; height: 44px; font-size: 19px; line-height: 34px; }
#win-bag .win-body { padding: 8px 10px 9px; }
#win-bag .inv-top { gap: 6px; margin-bottom: 6px; }
#win-bag .inv-pill { padding: 3px 10px; font-size: 13px; border-radius: 8px; }
#win-bag #inv-open-equip { padding: 3px 14px; font-size: 14px; border-radius: 8px; box-shadow: 0 0 0 1px #6b4a14, 0 2px 0 #8a5b12; }
#win-bag .inv-main { grid-template-columns: 128px 1fr; gap: 8px; }
#win-bag .inv-cats { gap: 4px; }
#win-bag .inv-cats button { min-height: 28px; padding: 3px 8px; gap: 6px; font-size: 13px; border-radius: 7px; }
#win-bag .inv-cat-ico { font-size: 15px; width: 18px; }
#win-bag .inv-tools { gap: 5px; margin-bottom: 6px; }
#win-bag #inv-search, #win-bag #inv-sort { height: 28px; font-size: 13px; border-width: 1px; }
#win-bag .inv-view button { width: 30px; height: 28px; font-size: 14px; border-width: 1px; }
#win-bag .inv-grid { gap: 5px; padding: 6px; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 44px; max-height: 196px; border-width: 1px; }
#win-bag .inv-cell { height: 44px; border-width: 2px; border-radius: 7px; }
#win-bag .inv-cell img, #win-bag .inv-cell canvas { transform: none; }
#win-bag .inv-n { font-size: 12px; }
#win-bag .inv-footer { margin-top: 6px; }
#win-bag #inv-summary { font-size: 13px; }
#win-bag #inv-discard { padding: 3px 12px; font-size: 13px; border-radius: 8px; box-shadow: 0 2px 0 #4a0f0c; }

/* ===== กรอบหน้าต่างมาตรฐาน v2 (ตามกระเป๋า v2, ผู้ใช้อนุมัติ 2026-09-25) — ใช้กับทุก .win-night ยกเว้นกระเป๋า/รางวัลรายวัน
   ภาพมุมซ้ายบนต่อหน้าต่าง = --win-art (PixelLab, src/assets/ui/win_*.png) ===== */
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) {
  --v2-gold: #d9b25a;
  border: 2px solid var(--v2-gold);
  border-radius: 12px;
  background: #0f1a3a;
  box-shadow: 0 0 0 2px #3a2a0c, 0 0 0 4px rgba(217, 178, 90, 0.3), 0 16px 34px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) > .win-header {
  position: relative; height: 54px; padding: 0 44px;
  display: flex; align-items: flex-end; justify-content: center;
  border-bottom: none; border-radius: 10px 10px 0 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 22%, rgba(255, 240, 180, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 50%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    var(--ui-castle) bottom / 100% 60% no-repeat,
    linear-gradient(#1b2b5e, #0f1a3a);
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) > .win-header::before {
  content: ''; position: absolute; top: -18px; left: 50%; width: 80px; height: 50px; transform: translateX(-50%);
  background: url('src/assets/ui/bag_crest.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none;
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) > .win-header::after {
  content: ''; position: absolute; left: -16px; top: -30px; width: 104px; height: 88px;
  background: var(--win-art, none) left top / contain no-repeat; image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) .win-title {
  position: relative; margin-bottom: 5px; padding: 3px 32px;
  font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.3px;
  text-shadow: 0 2px 0 #0a1230, 0 0 8px rgba(120, 170, 255, 0.55);
  background: linear-gradient(#2c4fa8, #1a3276);
  border-top: 2px solid var(--v2-gold); border-bottom: 2px solid var(--v2-gold);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) .win-title::before,
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) .win-title::after { color: #ffe7a3; font-size: 11px; text-shadow: 0 0 6px #ffd76a; }
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) .win-icon { display: none; }
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) .win-close {
  position: absolute; top: -4px; right: 10px; width: 34px; height: 44px; padding: 0;
  border: 2px solid var(--v2-gold); border-top: none; border-radius: 0;
  font-size: 19px; font-weight: 900; color: #fff; line-height: 34px;
  background: linear-gradient(#e0473a, #a91f1a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: inset 0 -5px 8px rgba(0, 0, 0, 0.25);
}
.game-window.win-night:not(#win-bag):not(#win-daily):not(.win-h3) > .win-body { border-radius: 0 0 10px 10px; }
#win-stat { --win-art: url('src/assets/ui/win_status.png'); }
#win-skill { --win-art: url('src/assets/ui/win_skill.png'); }
#win-equip { --win-art: url('src/assets/ui/win_equip.png'); }
#win-shop, #win-storage { --win-art: url('src/assets/ui/win_shop.png'); }
/* รางวัลรายวัน: กรอบ v2 (ขอบทอง, คริสตัล, ปุ่มปิดริบบิ้นแดง) แต่คงหัวภาพ DAILY LOGIN เดิม */
#win-daily {
  border: 2px solid #d9b25a; border-radius: 12px; overflow: visible;
  box-shadow: 0 0 0 2px #3a2a0c, 0 0 0 4px rgba(217, 178, 90, 0.3), 0 16px 34px rgba(0, 0, 0, 0.55);
}
#win-daily > .win-header { position: relative; border-radius: 10px 10px 0 0; }
#win-daily > .win-header::before {
  content: ''; position: absolute; top: -18px; left: 50%; width: 80px; height: 50px; transform: translateX(-50%); z-index: 2;
  background: url('src/assets/ui/bag_crest.png') center / contain no-repeat; image-rendering: pixelated; pointer-events: none;
}
#win-daily .daily-heading strong { color: #fff; text-shadow: 0 2px 0 #0a1230, 0 0 10px rgba(120, 170, 255, 0.6); }
#win-daily .win-close {
  position: absolute; top: -4px; right: 10px; width: 34px; height: 44px; padding: 0; z-index: 3;
  border: 2px solid #d9b25a; border-top: none; border-radius: 0;
  font-size: 22px; font-weight: 900; color: #fff; line-height: 34px;
  background: linear-gradient(#e0473a, #a91f1a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
#win-daily > .win-body { border-radius: 0 0 10px 10px; }
/* รางวัลรายวันบนพื้นกลางคืน: ข้อความนอกการ์ดเป็นสีอ่อน (เดิมออกแบบบนพื้นครีม) — การ์ดวันยังพื้นสว่างตัวเข้มเหมือนเดิม */
#win-daily .daily-topline { color: #e8eeff; border-bottom-color: rgba(217, 178, 90, 0.45); font-size: 14px; }
#win-daily .daily-topline b { color: #ffd76a; }
#win-daily :is(.daily-next-reward, .daily-progress > b, #daily-count, #daily-next-label, #daily-progress-text) { color: #e8eeff !important; }
#win-daily .daily-footer small { color: #8fd0ff; }
#win-daily .daily-status { color: #7dffa8; }
#win-daily .daily-footer { background: rgba(10, 18, 48, 0.72); border-color: rgba(217, 178, 90, 0.6); }

/* ===== หน้าต่างตัวละคร (อุปกรณ์ + สถานะ) ธีมมินิแมพ/กล่องเควส (.win-h3 — ผู้ใช้อนุมัติ mockup 2026-09-26 tests/ui-mockup-3d.html)
   พื้นเข้มโปร่ง ขอบทองบาง มุม 8px, ปุ่มเข้มขอบทองจาง / ปุ่มหลักทองไล่สี, แถวคั่นเส้นบาง ===== */
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 {
  --h3p: rgba(16, 20, 26, 0.9); --h3p2: rgba(28, 32, 40, 0.92); --h3line: rgba(214, 178, 96, 0.55);
  --h3gold: #e2bd62; --h3text: #f4ecd8; --h3dim: #b9b2a0; --h3row: rgba(255, 255, 255, 0.06);
  font-family: 'Kanit', system-ui, sans-serif;
  background: var(--h3p); border: 1px solid var(--h3line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(3px);
  color: var(--h3text);
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-header {
  display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; height: auto;
  padding: 8px 40px 6px 12px; background: none; border: none; border-bottom: 1px solid rgba(214, 178, 96, 0.25); border-radius: 8px 8px 0 0;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-header::before, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-header::after { display: none; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-title {
  padding: 0; margin: 0; background: none; border: none; clip-path: none;
  font-size: 15px; font-weight: 600; color: var(--h3gold); text-shadow: none; letter-spacing: 0;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-title::before, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-title::after { content: none; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-icon { display: none; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .h3-win-sub { font-size: 12px; color: var(--h3dim); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-close {
  top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 12px; font-weight: 400;
  color: var(--h3text); background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.35); border-radius: 4px; box-shadow: none; clip-path: none;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-close:hover { filter: brightness(1.25); background: #5a2320; border-color: #d9665a; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body { margin: 0; padding: 8px; background: none; border: none; box-shadow: none; color: var(--h3text); border-radius: 0 0 8px 8px; }

/* ปุ่มทั้งหน้าต่าง = ปุ่ม ใกล้/กลาง/ไกล ของมินิแมพ */
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus {
  background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.35); border-radius: 4px; color: var(--h3text);
  box-shadow: none; font-weight: 400; transition: filter 0.12s, transform 0.08s;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn:hover:not(:disabled), :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus:hover:not(:disabled) { filter: brightness(1.25); background: var(--h3p2); border-color: rgba(214, 178, 96, 0.6); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn:active:not(:disabled), :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus:active:not(:disabled) { transform: translateY(1px); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn-primary, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus:not(.st-minus),
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn-primary:hover:not(:disabled), :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus:not(.st-minus):hover:not(:disabled) {
  background: linear-gradient(#5b4a26, #3b2e14); border-color: var(--h3gold); color: #fff3cf;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-btn:disabled, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-plus:disabled { opacity: 0.35; filter: none; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .st-actions .st-btn::before { content: none; }

/* สองคอลัมน์: อุปกรณ์ | สถานะ — จอแคบซ้อนลงมา */
#win-stat.win-h3 .cs-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; align-items: start; }
@media (max-width: 900px) { #win-stat.win-h3 .cs-cols { grid-template-columns: minmax(0, 1fr); } }
#win-stat.win-h3 .cs-box {
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(214, 178, 96, 0.25); padding: 4px 6px;
}
#win-stat.win-h3 .cs-sec { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--h3dim); margin: 0 2px 4px; }
#win-stat.win-h3 .cs-sec + .cs-box + .cs-sec { margin-top: 8px; }
#win-stat.win-h3 .st-points { margin: 0; padding: 0; background: none; border: none; border-radius: 0; color: var(--h3dim); font-size: 12px; }
#win-stat.win-h3 .st-points b { font-size: 14px; color: #7ed35a; margin: 0 0 0 3px; }
#win-stat.win-h3 .cs-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
#win-stat.win-h3 .cs-foot .st-btn { min-width: 0; padding: 5px 0; font-size: 13px; border-radius: 4px; }

/* ค่าสถานะพื้นฐาน: แถวแบบรายการเควส */
#win-stat.win-h3 .st-base-list { gap: 0; }
#win-stat.win-h3 .st-row {
  grid-template-columns: 22px 34px 34px 1fr auto; gap: 6px; padding: 4px 2px;
  background: none; border: none; border-top: 1px solid var(--h3row); border-radius: 0;
}
#win-stat.win-h3 .st-row:first-child { border-top: 0; }
#win-stat.win-h3 .st-icon { width: 22px; height: 22px; font-size: 12px; border-radius: 50%; border: 1px solid rgba(214, 178, 96, 0.5); box-shadow: none; }
#win-stat.win-h3 .st-name { color: #ffd66b; font-size: 12px; font-weight: 600; text-shadow: none; }
#win-stat.win-h3 .st-val { padding: 0; font-size: 14px; font-weight: 600; background: none; border: none; box-shadow: none; text-align: left; color: var(--h3text); }
#win-stat.win-h3 .st-val.pending { color: #7ed35a; background: none; }
#win-stat.win-h3 .st-bonus { color: #7ed35a; font-size: 11px; }
#win-stat.win-h3 .st-btns { gap: 3px; }
#win-stat.win-h3 .st-plus { width: 22px; height: 20px; font-size: 13px; font-weight: 600; }
#win-stat.win-h3 .st-plus10 { width: 32px; font-size: 11px; }

/* ค่าต่อสู้: 2 คอลัมน์ ชื่อเทา ค่าขาวชิดขวา */
#win-stat.win-h3 .st-derived-grid { column-gap: 12px; }
#win-stat.win-h3 .st-drow { grid-template-columns: 18px 1fr auto; padding: 3px 2px; border-bottom: none; border-top: 1px solid var(--h3row); }
#win-stat.win-h3 .st-drow:nth-child(-n + 2) { border-top: 0; }
#win-stat.win-h3 .st-drow:hover { background: rgba(214, 178, 96, 0.08); }
#win-stat.win-h3 .st-dicon { font-size: 12px; }
#win-stat.win-h3 .st-dname { color: var(--h3dim); font-size: 12px; font-weight: 500; }
#win-stat.win-h3 .st-dname small { color: #8a8474; font-size: 10px; }
#win-stat.win-h3 .st-dval { color: var(--h3text); font-size: 13px; font-weight: 600; }
#win-stat.win-h3 .st-preview { margin-top: 8px; padding: 5px 8px; border: 1px solid rgba(126, 211, 90, 0.45); border-radius: 5px; background: rgba(40, 70, 30, 0.35); color: #d9f5cc; }
#win-stat.win-h3 .st-preview-change { background: rgba(0, 0, 0, 0.3); border-color: rgba(126, 211, 90, 0.35); color: var(--h3text); }
#win-stat.win-h3 .st-preview-change em { color: #7ed35a; }

/* อุปกรณ์ */
#win-stat.win-h3 #win-equip .eq-sub { margin: 0 0 6px; padding: 0 2px; width: auto; background: none; border: none; border-radius: 0; color: var(--h3dim); font-size: 12px; font-weight: 400; }
#win-stat.win-h3 #win-equip .eq-grid { grid-template-columns: 1fr 104px 1fr; gap: 5px; }
#win-stat.win-h3 #win-equip .eq-col { gap: 4px; }
#win-stat.win-h3 #win-equip .eq-slot { padding: 3px 5px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(214, 178, 96, 0.2); border-radius: 5px; box-shadow: none; }
#win-stat.win-h3 #win-equip .eq-slot:hover { border-color: rgba(214, 178, 96, 0.5); }
#win-stat.win-h3 #win-equip .eq-slot.selected { border-color: var(--h3gold); background: linear-gradient(rgba(91, 74, 38, 0.6), rgba(59, 46, 20, 0.6)); box-shadow: none; }
#win-stat.win-h3 .eq-ico, #win-stat.win-h3 .eq-detail-ico { border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 5px; background: #e9e1cc; }
#win-stat.win-h3 .eq-ico.empty, #win-stat.win-h3 .eq-detail-ico.empty { border: 1px dashed rgba(185, 178, 160, 0.45); background: rgba(0, 0, 0, 0.3); }
#win-stat.win-h3 #win-equip .eq-slot-name, #win-stat.win-h3 #win-equip .eq-detail-slot { color: var(--h3dim); }
#win-stat.win-h3 #win-equip .eq-item-name { color: var(--h3text); font-weight: 500; }
#win-stat.win-h3 #win-equip .eq-center { background: radial-gradient(circle at 50% 40%, rgba(214, 178, 96, 0.14), rgba(0, 0, 0, 0.3) 70%); border: 1px solid rgba(214, 178, 96, 0.25); border-radius: 5px; }
#win-stat.win-h3 #win-equip .eq-portrait-job { color: var(--h3gold); font-weight: 500; }
#win-stat.win-h3 #win-equip .eq-detail {
  margin-top: 6px; padding: 6px 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(214, 178, 96, 0.25); color: var(--h3text);
}
#win-stat.win-h3 #win-equip .eq-detail-name { font-size: 15px; font-weight: 600; color: var(--h3text); }
#win-stat.win-h3 #win-equip .eq-detail-bonus { color: #7ed35a; font-weight: 400; }
#win-stat.win-h3 #win-equip .eq-detail-btns .st-btn { padding: 3px 12px; font-size: 12px; }

/* tooltip ในหน้าต่างตัวละคร (.win-h3) — สีเดียวกับแผงมินิแมพ: พื้นเข้มโปร่ง ขอบทองบาง */
.status-guide-tooltip, .item-tip.tip-h3 {
  background: rgba(16, 20, 26, 0.94); border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #f4ecd8; font-family: 'Kanit', system-ui, sans-serif; text-shadow: none;
}
.item-tip.tip-h3 .tip-sub, .item-tip.tip-h3 .tip-hint { color: #b9b2a0; }
.item-tip.tip-h3 .tip-bonus { color: #e2bd62; }
.item-tip.tip-h3 .tip-desc { color: #f4ecd8; }
/* ผลหลังยืนยัน (ย้ายมาใต้รายละเอียดอุปกรณ์) — หัวข้อบรรทัดบน รายการเรียงตัดบรรทัด ไม่เลื่อนแนวนอน */
#win-stat.win-h3 .st-preview { display: block; }
#win-stat.win-h3 .st-preview.hidden { display: none; }
#win-stat.win-h3 .st-preview-title { margin-bottom: 5px; font-size: 12px; font-weight: 500; color: #7ed35a; }
#win-stat.win-h3 .st-preview-changes { flex-wrap: wrap; overflow: visible; gap: 4px; }
#win-stat.win-h3 .st-preview-change { padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* ===== ธีมมินิแมพ (.win-h3) ต่อหน้าต่าง — ทับกรอบ/ของตกแต่งเดิม (ผู้ใช้สั่ง 2026-09-26: ใช้หน้าต่างตัวละครเป็น ref, เอารูปตกแต่งออก) ===== */
/* กระเป๋า */
#win-bag.win-h3 {
  --win-w: 640px !important;
  background: var(--h3p); border: 1px solid var(--h3line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#win-bag.win-h3 .win-header { height: auto; padding: 8px 40px 6px 12px; justify-content: flex-start; align-items: baseline; background: none; border-radius: 8px 8px 0 0; border-bottom: 1px solid rgba(214, 178, 96, 0.25); }
#win-bag.win-h3 .win-header::before, #win-bag.win-h3 .win-header::after { content: none; display: none; }
#win-bag.win-h3 .win-title { margin: 0; padding: 0; font-size: 15px; font-weight: 600; color: var(--h3gold); background: none; border: none; clip-path: none; text-shadow: none; letter-spacing: 0; }
#win-bag.win-h3 .win-title::before, #win-bag.win-h3 .win-title::after { content: none; }
#win-bag.win-h3 .win-close {
  top: 6px; right: 8px; width: 24px; height: 24px; padding: 0; line-height: 1; font-size: 12px; font-weight: 400;
  color: var(--h3text); background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.35); border-radius: 4px; box-shadow: none; clip-path: none;
}
#win-bag.win-h3 .win-body { padding: 8px; background: none; color: var(--h3text); }
#win-bag.win-h3 .inv-top { margin-bottom: 6px; gap: 6px; }
#win-bag.win-h3 .inv-pill { padding: 2px 10px; font-size: 12px; color: var(--h3text); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(214, 178, 96, 0.25); border-radius: 4px; box-shadow: none; }
#win-bag.win-h3 #inv-open-equip, #win-bag.win-h3 .inv-cats button.active, #win-bag.win-h3 .inv-view button.active {
  color: #fff3cf; background: linear-gradient(#5b4a26, #3b2e14); border: 1px solid var(--h3gold); box-shadow: none;
}
#win-bag.win-h3 #inv-open-equip { padding: 2px 14px; font-size: 12px; font-weight: 500; border-radius: 4px; }
#win-bag.win-h3 .inv-main { grid-template-columns: 128px 1fr; gap: 8px; }
#win-bag.win-h3 .inv-cats { gap: 3px; }
#win-bag.win-h3 .inv-cats button {
  min-height: 28px; padding: 3px 8px; gap: 6px; font-size: 12px; font-weight: 400; color: var(--h3text);
  background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.3); border-radius: 4px; box-shadow: none;
}
#win-bag.win-h3 .inv-cats button:hover { filter: brightness(1.2); }
#win-bag.win-h3 .inv-cat-ico { font-size: 13px; width: 16px; }
#win-bag.win-h3 .inv-tools { gap: 4px; margin-bottom: 6px; }
#win-bag.win-h3 #inv-search, #win-bag.win-h3 #inv-sort {
  height: 26px; font-size: 12px; color: var(--h3text); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(214, 178, 96, 0.3); border-radius: 4px;
}
#win-bag.win-h3 #inv-search::placeholder { color: #8a8474; }
#win-bag.win-h3 .inv-view button { width: 26px; height: 26px; font-size: 13px; color: var(--h3text); background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.3); border-radius: 4px; }
#win-bag.win-h3 .inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); grid-auto-rows: 46px; gap: 4px; padding: 6px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 5px; box-shadow: 0 0 0 1px rgba(214, 178, 96, 0.25);
}
#win-bag.win-h3 .inv-cell { height: 46px; border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 5px; background: #e9e1cc; box-shadow: none; }
#win-bag.win-h3 .inv-cell img, #win-bag.win-h3 .inv-cell canvas { transform: none; }
#win-bag.win-h3 .inv-cell.empty { background: rgba(0, 0, 0, 0.3); border: 1px dashed rgba(185, 178, 160, 0.25) !important; }
#win-bag.win-h3 .inv-cell.selected { outline: 2px solid var(--h3gold); outline-offset: 0; box-shadow: none; }
#win-bag.win-h3 .inv-n { font-size: 11px; font-weight: 600; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#win-bag.win-h3 .inv-row { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(214, 178, 96, 0.2); border-radius: 4px; color: var(--h3text); font-size: 13px; }
#win-bag.win-h3 .inv-row-type, #win-bag.win-h3 .inv-empty { color: var(--h3dim); }
#win-bag.win-h3 .inv-footer { margin-top: 6px; }
#win-bag.win-h3 #inv-summary { font-size: 12px; color: var(--h3dim); }
#win-bag.win-h3 #inv-summary::before { content: none; }
#win-bag.win-h3 #inv-discard { padding: 3px 12px; font-size: 12px; font-weight: 400; color: #ffd9d3; background: rgba(90, 35, 32, 0.8); border: 1px solid rgba(217, 102, 90, 0.6); border-radius: 4px; box-shadow: none; }

/* ===== แผง/การ์ดแบบธีมมินิแมพ ใช้ร่วมทุกหน้าต่าง .win-h3 ===== */
.win-h3 { --h3box: rgba(0, 0, 0, 0.25); --h3boxline: rgba(214, 178, 96, 0.22); }
/* อาชีพ */
.win-h3 .jb-current, .win-h3 .jb-card, .win-h3 .jb-skills, .win-h3 .jb-action, .win-h3 .jb-note {
  background: var(--h3box); border: 1px solid var(--h3boxline); border-radius: 5px; box-shadow: none; color: var(--h3text);
}
.win-h3 .jb-current { padding: 8px; }
.win-h3 .jb-tag { background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.4); border-radius: 4px; color: var(--h3gold); font-weight: 500; }
.win-h3 .jb-tag-target { color: #fff3cf; background: linear-gradient(#5b4a26, #3b2e14); }
.win-h3 .jb-cur-name { font-size: 18px; font-weight: 600; color: var(--h3text); }
.win-h3 .jb-cur-stats, .win-h3 .jb-note, .win-h3 .jb-hint { color: var(--h3dim); }
.win-h3 .jb-cur-stats b { color: var(--h3text); }
.win-h3 .jb-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 10px 2px 4px; font-size: 12px; font-weight: 400; color: var(--h3dim); }
.win-h3 .jb-req-all { color: #e8a25a; font-size: 11px; text-align: right; }
.win-h3 .jb-targets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.win-h3 .jb-card { padding: 6px; cursor: var(--cur-hand); }
.win-h3 .jb-card:hover { border-color: rgba(214, 178, 96, 0.5); }
.win-h3 .jb-card.selected { background: linear-gradient(rgba(91, 74, 38, 0.6), rgba(59, 46, 20, 0.6)); border-color: var(--h3gold); box-shadow: none; }
.win-h3 .jb-card.locked { background: var(--h3box); opacity: 1; }
.win-h3 .jb-card-name { color: var(--h3text); font-weight: 600; font-size: 13px; }
.win-h3 .jb-card-req { color: var(--h3dim); font-size: 11px; }
.win-h3 .jb-card-req.ok { color: #7ed35a; font-weight: 500; }
.win-h3 .jb-skills-head { color: var(--h3gold); font-weight: 500; }
.win-h3 .jb-skill { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; }
.win-h3 .jb-skill-body, .win-h3 .jb-skill-desc { color: var(--h3dim); }
.win-h3 .jb-skill-head b { color: #ffd66b; }
.win-h3 .jb-skill-head small { color: #8a8474; }
.win-h3 .jb-action { min-height: 0; padding: 6px 8px; margin-top: 6px; }
.win-h3 .jb-target-name { font-size: 15px; font-weight: 600; color: var(--h3text); }
.win-h3 .jb-confirm { color: var(--h3gold); font-weight: 500; }
.win-h3 .jb-change { padding: 4px 16px; font-size: 13px; }
.win-h3 .jb-note { margin-top: 6px; padding: 4px 8px; font-size: 11px; }
.win-h3 .job-maxed { color: var(--h3dim); }
/* สกิล */
#win-skill.win-h3 .sk-tabs { border-bottom: 1px solid rgba(214, 178, 96, 0.25); gap: 3px; }
#win-skill.win-h3 .sk-tab { background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.3); border-bottom: none; border-radius: 4px 4px 0 0; color: var(--h3dim); }
#win-skill.win-h3 .sk-tab.active { background: linear-gradient(#5b4a26, #3b2e14); border-color: var(--h3gold); color: #fff3cf; }
#win-skill.win-h3 .sk-sec, #win-skill.win-h3 .sk-detail, #win-skill.win-h3 .sk-footer, #win-skill.win-h3 .sk-slotbar {
  background: var(--h3box); border: 1px solid var(--h3boxline); border-radius: 5px; box-shadow: none;
}
#win-skill.win-h3 .sk-sec-head { background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--h3dim); font-weight: 400; font-size: 12px; }
#win-skill.win-h3 .sk-sec-tag { color: var(--h3gold); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; }
#win-skill.win-h3 .sk-card { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(214, 178, 96, 0.2); border-radius: 5px; }
#win-skill.win-h3 .sk-card:hover { border-color: rgba(214, 178, 96, 0.5); }
#win-skill.win-h3 .sk-card.selected { background: linear-gradient(rgba(91, 74, 38, 0.6), rgba(59, 46, 20, 0.6)); border: 1px solid var(--h3gold); box-shadow: none; }
#win-skill.win-h3 .sk-name { color: var(--h3text); font-weight: 500; }
#win-skill.win-h3 .sk-icon, #win-skill.win-h3 .sk-detail-icon { border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 5px; box-shadow: none; }
#win-skill.win-h3 .sk-lv span, #win-skill.win-h3 .sk-state { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.08); }
#win-skill.win-h3 .sk-state.on { background: rgba(91, 74, 38, 0.5); border-color: var(--h3gold); color: #fff3cf; }
#win-skill.win-h3 .sk-lv button { border: 1px solid var(--h3gold); border-radius: 4px; background: linear-gradient(#5b4a26, #3b2e14); color: #fff3cf; box-shadow: none; }
#win-skill.win-h3 .sk-lv button:first-child { background: var(--h3p2); border-color: rgba(214, 178, 96, 0.35); color: var(--h3text); }
#win-skill.win-h3 .sk-lv button:hover:not(:disabled) { background: linear-gradient(#5b4a26, #3b2e14); filter: brightness(1.25); border-color: var(--h3gold); }
#win-skill.win-h3 .sk-empty { color: var(--h3dim); }
#win-skill.win-h3 .sk-empty::before, #win-skill.win-h3 .sk-slotbar::before, #win-skill.win-h3 .sk-slot.empty::after { content: none; }
#win-skill.win-h3 .sk-detail-name { color: var(--h3text); font-size: 15px; font-weight: 600; text-shadow: none; }
#win-skill.win-h3 .sk-detail-lv { color: var(--h3gold); font-size: 13px; }
#win-skill.win-h3 .sk-detail-info { color: #ffd66b; border-top-color: rgba(255, 255, 255, 0.06); }
#win-skill.win-h3 .sk-detail-desc { color: var(--h3text); }
#win-skill.win-h3 .sk-detail-req, #win-skill.win-h3 .sk-lv-row, #win-skill.win-h3 .sk-detail-hint { color: var(--h3dim); }
#win-skill.win-h3 .sk-detail-hint { border-top-color: rgba(255, 255, 255, 0.06); }
#win-skill.win-h3 .sk-lv-table { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.06); }
#win-skill.win-h3 .sk-lv-head { color: var(--h3gold); }
#win-skill.win-h3 .sk-points { color: var(--h3dim); font-size: 12px; font-weight: 400; text-shadow: none; }
#win-skill.win-h3 .sk-points b { color: #7ed35a; font-size: 15px; }
#win-skill.win-h3 .sk-slotbar { padding: 12px 8px 6px; margin-top: 6px; }
#win-skill.win-h3 .sk-slot { border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 5px; background: #e9e1cc; box-shadow: none; }
#win-skill.win-h3 .sk-slot.empty { background: rgba(0, 0, 0, 0.3); border: 1px dashed rgba(185, 178, 160, 0.3); }
#win-skill.win-h3 .sk-slot-num { background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.5); border-radius: 3px; clip-path: none; color: var(--h3text); }

/* ===== แปลงเนื้อหาหน้าต่างเก่า (พื้นครีม) เป็นธีมมินิแมพ — สำเนาชุด .win-legacy เปลี่ยนสีเป็น --h3* ===== */
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body { color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.settings-body, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.wiki-win-body, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.ranking-body,
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.news-win, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.pet-body, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body.daily-body {
  background: none;
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(#job-current, .jb-card, .jb-note, .jb-node, .ap-hero, .ap-opt, .ap-choice, .ap-chip, .ap-note, .ap-potion,
  .settings-section, .settings-session-card, .wk-list, .wk-row, .wk-detail, .news-row, #news-view, .pet-card, .daily-footer,
  .ranking-row, .ref-cost, .ref-rules, .ref-result, .ref-list .ref-item, .log-line) {
  background: var(--h3box); border-color: var(--h3boxline); color: var(--h3text);
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.jb-card.locked, .ap-opt.ap-off, .ap-potion.ap-off) { background: var(--h3box); opacity: 0.75; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.ranking-medal-1) { background: linear-gradient(90deg, rgba(226, 185, 90, 0.4), var(--h3box)); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.ranking-medal-2) { background: linear-gradient(90deg, rgba(190, 200, 220, 0.32), var(--h3box)); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.ranking-medal-3) { background: linear-gradient(90deg, rgba(205, 127, 50, 0.35), var(--h3box)); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.jb-cur-name, .jb-sec, .jb-card-name, .ap-zz, .ap-play, .settings-speaker, #settings-account-name, .wk-sec-title,
  .ranking-name, .bot-section-title, #daily-count, .daily-gift, .daily-crown, .news-body, .log-line, .ap-opt b, .ap-choice b,
  .ap-potion b, .ap-chip span, .ref-item span, .jb-node, .settings-section h3, .settings-section h4) { color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.jb-cur-stats, .jb-card-req, .jb-note, .ap-empty, .ap-opt small, .ap-choice small, .ap-potion small, .ap-note,
  #settings-account-detail, #settings-connection, #settings-ping, .wk-sub, .wk-desc, .wk-rate, .news-when, .pet-hint, .pet-sub,
  .ranking-job, #ranking-count, #daily-next-label, #daily-progress-text, .ref-cost, [id$="-value"]) { color: var(--h3dim); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .ref-rules { color: #ffc2a8; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .ref-result.ok { color: #7dffa8; } :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .ref-result.fail { color: #ff8f86; } :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .ref-result.warn { color: #ffd479; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .wk-link { color: #8fd0ff; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(input[type="number"], input[type="text"], input[type="search"], select, .wk-search, #pet-range-num, #lang-switch,
  #setting-fullscreen, #setting-fps, #setting-damage-font, #setting-hud-reset, #setting-window-reset, .wk-back, .wk-open-web) {
  background: rgba(0, 0, 0, 0.35); color: var(--h3text); border: 1px solid rgba(214, 178, 96, 0.3);
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(#ranking-refresh, #ranking-prev, #ranking-next, #shop-clear, .pet-btn.dismiss, .settings-account) {
  background: var(--h3p2); color: var(--h3text); border-color: rgba(214, 178, 96, 0.3);
}
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.settings-avatar, .daily-bar) { background: var(--h3p2); color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .pet-preview { background: radial-gradient(circle at 50% 45%, rgba(214, 178, 96, 0.14), rgba(0, 0, 0, 0.3) 70%); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .wk-ico, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .wk-big { background-color: #efe6cf; }
/* สีเกรดไอเทมที่ใส่ inline (เกรดธรรมดา = น้ำตาลเข้ม) อ่านไม่ออกบนพื้นกลางคืน */
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 [style*="color:#3b2c1a"], :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 [style*="color: #3b2c1a"] { color: #f1f4ff !important; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .win-body :is(small, th, dt, .wk-detail span) { color: var(--h3dim); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 [style*="color:#1e8449"] { color: #7dffa8 !important; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 [style*="color:#2e5fb8"] { color: #8fc4ff !important; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 [style*="color:#8e44ad"] { color: #d9a6ff !important; }
/* ร้านค้า/คลัง (ใช้ .shop-* ร่วมกัน) บนพื้นกลางคืน */
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .shop-npc img { background: rgba(0, 0, 0, 0.3); border-color: var(--h3boxline); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(.shop-npc small, .shop-info small) { color: var(--h3dim); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .shop-row { background: var(--h3box); border-color: var(--h3boxline); color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .shop-row.in-cart { background: rgba(40, 110, 70, 0.55); border-color: #6fbf73; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .shop-price { color: #ffd479; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .shop-row input[type="number"] { background: rgba(0, 0, 0, 0.35); color: var(--h3text); border-color: rgba(214, 178, 96, 0.3); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(#shop-total, #storage-total, .shop-cost) { color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .stor-zeny { background: var(--h3box); border-color: var(--h3boxline); color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 :is(#stor-zeny-bag, #stor-zeny-stored) { color: #ffd479; }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .pet-body label, :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .pet-body label :is(b, span) { color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .news-win :is(h3, label) { color: var(--h3text); }
:is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3 .news-row > span:not([class]) { color: var(--h3text); }


/* ===== ทับ style เฉพาะหน้าต่าง (selector แบบ #id ชนะ :is(#win-stat, #win-bag, #win-item, #win-job, #win-skill, #win-pet, #win-map, #win-settings).win-h3) ===== */
:is(#win-settings, #win-map, #win-skill, #win-job, #win-pet, #win-item).win-h3 {
  border: 1px solid var(--h3line); border-radius: 8px; background: var(--h3p);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:is(#win-settings, #win-map, #win-skill, #win-job, #win-pet, #win-item).win-h3 .win-header {
  min-height: 0; height: auto; padding: 8px 40px 6px 12px; justify-content: flex-start; align-items: baseline;
  background: none; border-bottom: 1px solid rgba(214, 178, 96, 0.25);
}
:is(#win-settings, #win-map, #win-skill, #win-job, #win-pet, #win-item).win-h3 .win-title { font-size: 15px; }
:is(#win-settings, #win-map, #win-skill, #win-job, #win-pet, #win-item).win-h3 .win-body { margin: 0; padding: 8px; background: none; }
#win-job.win-h3 #job-change-panel .jb-card.selected { background: linear-gradient(rgba(91, 74, 38, 0.6), rgba(59, 46, 20, 0.6)); border-color: var(--h3gold); }

/* ตั้งค่า */
#win-settings.win-h3 .settings-section { background: var(--h3box); border: 1px solid var(--h3boxline); border-radius: 5px; box-shadow: none; }
#win-settings.win-h3 .settings-section h3 { padding: 5px 8px; background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--h3gold); font-weight: 600; font-size: 12px; }
#win-settings.win-h3 :is(.settings-control, .settings-select-row, .settings-range-row, .settings-check, .settings-control label) { color: var(--h3text); font-weight: 400; }
#win-settings.win-h3 :is(.settings-control output, .settings-range-row output, .settings-static) { color: var(--h3dim); }
#win-settings.win-h3 .settings-speaker { color: var(--h3gold); }
#win-settings.win-h3 input[type="range"], #win-settings.win-h3 input[type="checkbox"] { accent-color: #c9a24a; }
#win-settings.win-h3 :is(.settings-select-row select, .settings-range-row button) { background: rgba(0, 0, 0, 0.35); color: var(--h3text); border: 1px solid rgba(214, 178, 96, 0.3); }
#win-settings.win-h3 .settings-account { background: rgba(0, 0, 0, 0.25); border-color: rgba(214, 178, 96, 0.2); }
#win-settings.win-h3 .settings-account strong { color: #ffd66b; }
#win-settings.win-h3 .settings-account small, #win-settings.win-h3 .settings-session-card small { color: var(--h3dim); }
#win-settings.win-h3 .settings-session-card strong { color: #7ed35a; }
#win-settings.win-h3 .settings-divider { border-top-color: rgba(255, 255, 255, 0.08); }
#win-settings.win-h3 .settings-footer { color: #8a8474; font-family: inherit; }

/* สัตว์เลี้ยง */
#win-pet.win-h3 .bot-section { border-top-color: rgba(255, 255, 255, 0.06); }
#win-pet.win-h3 :is(.bot-section-title, .pet-sub) { color: var(--h3gold); font-weight: 500; }
#win-pet.win-h3 :is(.bot-toggle, .bot-radio, .pet-range-row) { color: var(--h3text); }
#win-pet.win-h3 .pet-card { background: var(--h3box); border: 1px solid var(--h3boxline); border-radius: 5px; }
#win-pet.win-h3 .pet-card.active { border-color: rgba(126, 211, 90, 0.5); background: rgba(40, 70, 30, 0.3); box-shadow: none; }
#win-pet.win-h3 .pet-info b { color: var(--h3text); }
#win-pet.win-h3 .pet-info small, #win-pet.win-h3 .pet-hint, #win-pet.win-h3 .pet-empty { color: var(--h3dim); }
#win-pet.win-h3 .pet-tag { background: rgba(126, 211, 90, 0.2); color: #7ed35a; border: 1px solid rgba(126, 211, 90, 0.5); }
#win-pet.win-h3 :is(.pet-btn, .pet-save) { padding: 4px 14px; border: 1px solid var(--h3gold); border-radius: 4px; background: linear-gradient(#5b4a26, #3b2e14); color: #fff3cf; font-weight: 500; box-shadow: none; }
#win-pet.win-h3 .pet-btn.dismiss { border-color: rgba(217, 102, 90, 0.6); background: rgba(90, 35, 32, 0.8); color: #ffd9d3; }
#win-pet.win-h3 .pet-save-row { border-top-color: rgba(255, 255, 255, 0.06); }
#win-pet.win-h3 .pet-save-status { color: #7ed35a; font-weight: 500; }
#win-pet.win-h3 .pet-save-status.unsaved { color: #e8a25a; }
#win-pet.win-h3 input[type="range"] { accent-color: #c9a24a; }
#win-pet.win-h3 input[type="checkbox"], #win-pet.win-h3 input[type="radio"] { accent-color: #c9a24a; }

/* แผนที่โลก */
#win-map.win-h3 .wm-board { border: 1px solid var(--h3boxline); border-radius: 5px; }
#win-map.win-h3 .wm-node { border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 5px; background: var(--h3p2); }
#win-map.win-h3 .wm-node.selected { border-color: var(--h3gold); box-shadow: 0 0 0 2px rgba(214, 178, 96, 0.35); }
#win-map.win-h3 .wm-lv { color: var(--h3dim); }
#win-map.win-h3 .wm-detail { background: var(--h3box); border: 1px solid var(--h3boxline); border-radius: 5px; }
#win-map.win-h3 .wm-detail-head { color: var(--h3text); font-size: 15px; }
#win-map.win-h3 .wm-tag { background: var(--h3p2); border: 1px solid rgba(214, 178, 96, 0.3); color: var(--h3text); }
#win-map.win-h3 .wm-tag.lv { background: linear-gradient(#5b4a26, #3b2e14); color: #fff3cf; }
#win-map.win-h3 :is(.wm-desc, .wm-row) { color: var(--h3dim); }
#win-map.win-h3 .wm-label { color: var(--h3gold); }

/* ===== ประกาศอัปเดต (แถบบนกลางจอ) ธีมมินิแมพ ===== */
.update-notice {
  top: 10px; width: min(440px, calc(100vw - 32px)); border: 1px solid rgba(214, 178, 96, 0.55); border-radius: 8px;
  background: rgba(16, 20, 26, 0.9); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(3px); color: #f4ecd8; font-family: 'Kanit', system-ui, sans-serif;
}
.update-notice .update-bar { min-height: 36px; padding: 3px 4px 3px 6px; }
.update-notice .update-summary { height: 30px; color: #f4ecd8; }
.update-notice .update-summary-badge { color: #e2bd62; font-size: 14px; }
.update-notice .update-summary strong { font-weight: 500; color: #e2bd62; }
.update-notice .update-version { color: #b9b2a0; }
.update-notice .update-chevron { color: #b9b2a0; }
.update-notice .update-details { border-top: 1px solid rgba(214, 178, 96, 0.25); padding: 0 10px 8px; }
.update-notice .update-details li { color: #f4ecd8; }
.update-notice .update-details li::marker { color: #e2bd62; }
.update-notice #update-now { padding: 4px 12px; border: 1px solid #e2bd62; border-radius: 4px; background: linear-gradient(#5b4a26, #3b2e14); color: #fff3cf; font-weight: 500; }
.update-notice #update-now.hidden { display: none; }
.update-notice #update-dismiss { width: 24px; height: 24px; margin-left: 2px; border: 1px solid rgba(214, 178, 96, 0.35); border-radius: 4px; background: rgba(28, 32, 40, 0.92); color: #f4ecd8; font-size: 14px; line-height: 1; }
/* ค่าที่จะเพิ่มหลังยืนยันแต้มสถานะ (แสดงในช่องค่าต่อสู้แทนกล่องพรีวิว) */
.st-dval .st-up { color: #7ed35a; font-weight: 700; }
/* หน้าต่างตัวละคร: สองคอลัมน์สูงเท่ากัน กล่องรายละเอียดอุปกรณ์ยืดถึงขอบล่าง (เท่าแถวปุ่มรีเซ็ต/ยืนยัน)
   — ใส่ไอเทม/แสดงช่องการ์ดแล้วหน้าต่างไม่ขยับ ถ้าเนื้อหายาวเกินกล่องจะเลื่อนในกล่องแทน */
#win-stat.win-h3 .cs-cols { align-items: stretch; }
#win-stat.win-h3 .cs-equip, #win-stat.win-h3 .cs-status { display: flex; flex-direction: column; min-height: 0; }
#win-stat.win-h3 .cs-status .cs-foot { margin-top: auto; padding-top: 8px; }
#win-stat.win-h3 #win-equip .eq-detail { flex: 1 1 0; min-height: 96px; align-items: flex-start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5a30 transparent; }
/* ช่องการ์ด (ธีมมินิแมพ): เครื่องหมาย + วาดด้วย gradient ให้อยู่กึ่งกลางพอดี (ตัวอักษร + ของฟอนต์ไม่ตรงกลาง) */
.win-h3 .eq-socket { width: 28px; height: 28px; border: 1px dashed rgba(214, 178, 96, .6); border-radius: 5px; background-color: rgba(0, 0, 0, .3); }
.win-h3 .eq-socket:not(.filled) {
  color: transparent; font-size: 0;
  background-image: linear-gradient(#e2bd62, #e2bd62), linear-gradient(#e2bd62, #e2bd62);
  background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat;
}
.win-h3 .eq-socket.picking { border-style: solid; border-color: #e2bd62; background-color: rgba(91, 74, 38, .6); }
.win-h3 .eq-socket.filled { border: 1px solid rgba(214, 178, 96, .7); background-color: #e9e1cc; }
.win-h3 .eq-sock-label { font-size: 11px; color: var(--h3dim); }
/* ไม่มีการ์ดที่ฝังได้: ขนาดเท่าป้าย "ช่องการ์ด" + ไอคอนเตือนสีแดง */
.win-h3 .eq-card-pick > small { font-size: 11px; color: var(--h3text); }
.win-h3 .eq-card-pick > small::before { content: '⚠ '; color: #ff6b5b; font-weight: 700; }
/* หน้าต่างตัวละครบนจอแคบ/เตี้ย (แท็บเล็ตแนวตั้ง, มือถือ): คอลัมน์เดียว สลับด้วยแท็บ ไม่ต้องเลื่อนยาว */
#win-stat.win-h3 .cs-tabs { display: none; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
#win-stat.win-h3 .cs-tabs button { padding: 6px 0; font: inherit; font-size: 13px; color: var(--h3text); background: var(--h3p2);
  border: 1px solid rgba(214, 178, 96, .35); border-radius: 4px; cursor: var(--cur-hand); }
#win-stat.win-h3 .cs-tabs button.on { background: linear-gradient(#5b4a26, #3b2e14); border-color: var(--h3gold); color: #fff3cf; }
@media (max-width: 900px), (max-height: 620px) {
  #win-stat.win-h3 { --win-w: 520px !important; }
  #win-stat.win-h3 .cs-tabs { display: grid; }
  #win-stat.win-h3 .cs-cols { grid-template-columns: minmax(0, 1fr); }
  #win-stat.win-h3[data-cs-tab="equip"] .cs-status, #win-stat.win-h3[data-cs-tab="status"] .cs-equip { display: none; }
  #win-stat.win-h3 .win-body { overflow-y: auto; }
}
/* แถบช่องลัด 1-9,0 ในหน้าต่างสกิลเอาออก (ผู้ใช้สั่ง 2026-09-26) — ลากสกิลไปวางที่ช่องลัดขวาล่างของ HUD แทน */
#win-skill #sk-slotbar { display: none; }

/* ===== ตั้งค่า แบบแท็บซ้าย / เนื้อหาขวา (ผู้ใช้ขอ 2026-09-28 ตาม ref) — ธีมแผงเรียบเดียวกับหน้าต่าง .win-h3 ===== */
#win-settings.win-h3 .win-body.settings-body.sx { display: grid; grid-template-columns: 178px minmax(0, 1fr); gap: 0; padding: 0; height: min(520px, 76vh); overflow: hidden; }
#win-settings .sx-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; border-right: 1px solid rgba(214, 178, 96, 0.22); background: rgba(0, 0, 0, 0.22); }
#win-settings .sx-tab { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--h3dim); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: var(--cur-hand); }
#win-settings .sx-tab i { width: 20px; font-style: normal; text-align: center; opacity: 0.85; }
#win-settings .sx-tab:hover { background: var(--h3row); color: var(--h3text); }
#win-settings .sx-tab.on { background: linear-gradient(90deg, rgba(226, 189, 98, 0.22), rgba(226, 189, 98, 0.05)); border-color: rgba(214, 178, 96, 0.45); color: var(--h3gold); }
#win-settings .sx-nav-foot { margin-top: auto; display: grid; gap: 6px; }
#win-settings .sx-nav-foot .settings-account { margin: 0 0 2px; padding: 7px 8px; }
#win-settings .sx-nav-foot .st-btn { width: 100%; padding: 7px 6px; font-size: 11px; white-space: normal; }
#win-settings .sx-nav-foot .st-btn[data-action="logout"] { display: grid; gap: 1px; }
#win-settings .sx-nav-foot .st-btn[data-action="logout"][hidden] { display: none; }
#win-settings .sx-nav-foot .st-btn small { font-size: 9px; opacity: 0.75; }
#win-settings .sx-main { overflow-y: auto; padding: 16px 20px; }
#win-settings .sx-pane { display: none; gap: 12px; }
#win-settings .sx-pane.on { display: grid; align-content: start; }
#win-settings .sx-pane h4 { margin: 0 0 2px; color: var(--h3gold); font-size: 16px; letter-spacing: 0.5px; }
#win-settings .sx-pane h5 { margin: 6px 0 0; color: var(--h3dim); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#win-settings .sx-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
#win-settings .sx-field { display: grid; gap: 5px; font-size: 11px; font-weight: 700; color: var(--h3dim); }
#win-settings .sx-field select { width: 100%; padding: 6px 8px; font-size: 12px; border-radius: 6px; }
#win-settings .sx-quality { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#win-settings .sx-quality button { display: grid; gap: 6px; align-content: start; min-height: 104px; padding: 12px; border: 1px solid rgba(214, 178, 96, 0.22); border-radius: 10px; background: var(--h3box); color: var(--h3text); font: inherit; text-align: left; cursor: var(--cur-hand); transition: border-color .15s, background .15s; }
#win-settings .sx-quality button b { font-size: 15px; }
#win-settings .sx-quality button small { font-size: 11px; line-height: 1.45; color: var(--h3dim); }
#win-settings .sx-quality button:hover { border-color: rgba(214, 178, 96, 0.55); }
#win-settings .sx-quality button.on { border-color: var(--h3gold); background: linear-gradient(160deg, rgba(226, 189, 98, 0.2), rgba(0, 0, 0, 0.25)); box-shadow: 0 0 0 1px rgba(226, 189, 98, 0.35) inset; }
#win-settings .sx-quality button.on b { color: var(--h3gold); }
#win-settings .sx-quality button.on b::after { content: ' ✓'; }
#win-settings .sx-note { margin: 0; font-size: 11px; line-height: 1.5; color: var(--h3dim); }
#win-settings .sx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; }
#win-settings .sx-pane .settings-control, #win-settings .sx-pane .settings-range-row { padding: 6px 10px; border-radius: 8px; background: var(--h3box); font-size: 12px; }
#win-settings .sx-pane .settings-range-row { grid-template-columns: minmax(0, 1fr) minmax(120px, 220px) 40px auto; }
#win-settings .sx-pane .settings-check { font-size: 12px; }
#win-settings .settings-session-card { padding: 10px 12px; }
#win-settings .sx-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
#win-settings .sx-keys > div { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--h3box); font-size: 12px; }
#win-settings .sx-keys .k { display: inline-flex; align-items: center; gap: 4px; min-width: 92px; color: var(--h3dim); }
#win-settings kbd { display: inline-block; min-width: 22px; padding: 2px 6px; border: 1px solid rgba(214, 178, 96, 0.45); border-bottom-width: 2px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); color: var(--h3text); font: 700 11px/1.3 inherit; text-align: center; }
@media (max-width: 640px) {
  #win-settings.win-h3 .win-body.settings-body.sx { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: min(560px, 80vh); }
  #win-settings .sx-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid rgba(214, 178, 96, 0.22); padding: 8px; }
  #win-settings .sx-tab { padding: 6px 9px; font-size: 12px; }
  #win-settings .sx-nav-foot { flex-basis: 100%; grid-template-columns: 1fr 1fr; }
  #win-settings .sx-nav-foot .settings-account { display: none; }
  #win-settings .sx-quality { grid-template-columns: 1fr; }
  #win-settings .sx-quality button { min-height: 0; }
}

/* ===== หน้า Bag เต็มจอ — ออกแบบใหม่ตาม ref (src/ui/BagScreen.js, 2026-09-28) =====
   โทนกรมท่าเข้ม แผงมุมมน ช่องไอเทมกล่องมน ไอคอนสเตตัสวงกลมสี — ทองของเกม (#e2bd62) เป็นสีเน้น */
.bgs { --bg: #171c28; --panel: #20263a; --panel2: #2a3148; --line: rgba(255, 255, 255, .07); --gold: #e2bd62; --dim: #98a1b6; --txt: #f2f4fa;
  position: fixed; inset: 0; z-index: 28; display: flex; flex-direction: column; color: var(--txt); font-size: 13px;
  background: radial-gradient(ellipse at 25% 35%, #252c42 0%, var(--bg) 60%); }
.bgs.hidden { display: none; }
body.bag-screen-open :is(#hud3d, #chat, #item-notices, #hud-sysbar) { visibility: hidden; }   /* #hud มีหน้าต่างป๊อปอัป (รายละเอียดไอเทม) — ไม่ซ่อน */
.bgs button { font: inherit; color: inherit; cursor: var(--cur-hand); }
.bgs-top { flex: none; display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 22px; }
.bgs-back { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font-weight: 700; font-size: 14px; }
.bgs-back-arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel2); font-size: 18px; line-height: 1; }
.bgs-back:hover .bgs-back-arrow { background: var(--gold); color: #1a1a1a; }
.bgs-title { color: var(--dim); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.bgs-money { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 20px; background: var(--panel); font-weight: 700; font-variant-numeric: tabular-nums; }
.bgs-coin { width: 22px; height: 22px; display: inline-block; }
.bgs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 34px; padding: 4px 26px 20px; }
.bgs-char { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; }
.bgs-seg { align-self: center; display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--panel); }
.bgs-seg button { width: 64px; height: 26px; border: 0; border-radius: 8px; background: none; font-size: 14px; opacity: .55; }
.bgs-seg button.on { background: var(--panel2); opacity: 1; }
.bgs-seg button:disabled { cursor: default; opacity: .25; }
.bgs-ring { display: grid; grid-template-columns: 1fr minmax(150px, 190px) 1fr; gap: 6px; margin-top: 12px; }
.bgs-col { display: flex; flex-direction: column; gap: 8px; }
.bgs-slot { display: flex; align-items: center; gap: 10px; min-height: 52px; cursor: var(--cur-hand); }
.bgs-slot.right { flex-direction: row-reverse; text-align: right; }
.bgs-slot-ico { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: border-color .15s, background .15s; }
.bgs-slot:hover .bgs-slot-ico { border-color: rgba(226, 189, 98, .6); background: var(--panel2); }
.bgs-slot.pick .bgs-slot-ico { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(226, 189, 98, .3); }
.bgs-slot-ico .bgs-ico { width: 40px; height: 40px; }
.bgs-col { gap: 6px !important; }
.bgs-slot-empty { color: rgba(255, 255, 255, .12); font-size: 20px; font-weight: 700; }
.bgs-ghost { opacity: .25; filter: grayscale(1); }
.bgs-socks { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); display: flex; gap: 3px; }
.bgs-socks i { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: #3a4260; border: 1px solid #5b6488; }
.bgs-socks i.on { background: var(--gold); border-color: #fff3c4; }
.bgs-slot-name { min-width: 0; font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bgs-plus { color: var(--gold); }
.bgs-muted { color: var(--dim); font-weight: 400; }
.bgs-model { position: relative; display: flex; }
.bgs-model { height: 284px; }   /* 5 ช่อง × 52 + ช่องไฟ — ตัว 3D ไม่ดันความสูงแถว */
.bgs-model-3d { position: relative; flex: 1; min-width: 0; }
.bgs-model-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.bgs-id { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 8px 4px 0; }
.bgs-job { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.bgs-job-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel2); font-size: 15px; }
.bgs-job-txt small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
.bgs-name { font-size: 20px; font-weight: 700; letter-spacing: 4px; }
.bgs-stance { justify-self: end; font-size: 12px; font-weight: 600; }
.bgs-stance small { color: var(--dim); font-weight: 400; }
.bgs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.bgs-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.bgs-stat { display: flex; align-items: center; gap: 10px; }
.bgs-stat-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c); font-size: 17px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.bgs-stat-txt { flex: 1; min-width: 0; line-height: 1.15; }
.bgs-stat-txt small { display: block; color: var(--dim); font-size: 11px; font-weight: 700; }
.bgs-stat-txt b { font-size: 15px; }
.bgs-stat-txt b.up { color: #7dffa8; }
.bgs-stat-txt i { font-style: normal; font-size: 11px; color: #ffb45e; margin-left: 3px; }
.bgs-stat button { flex: none; width: 26px; height: 26px; border: 0; border-radius: 7px; background: var(--panel2); font-size: 16px; font-weight: 700; line-height: 1; }
.bgs-stat button:hover:not(:disabled) { background: var(--gold); color: #1a1a1a; }
.bgs-stat button:disabled { opacity: .3; cursor: default; }
.bgs-stat-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bgs-points { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.bgs-points small { color: var(--dim); font-size: 11px; }
.bgs-points b { font-size: 16px; }
.bgs-reset { width: 38px; height: 34px; border: 0; border-radius: 10px; background: var(--panel2); font-size: 18px; }
.bgs-apply { min-width: 110px; height: 34px; border: 0; border-radius: 10px; background: linear-gradient(#e9c86e, #c99a3a); color: #1d1606 !important; font-weight: 700; }
.bgs-reset:disabled, .bgs-apply:disabled { opacity: .35; cursor: default; filter: grayscale(.4); }
.bgs-derived { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; align-content: start; }
.bgs-d { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.bgs-d span { color: var(--dim); font-weight: 700; }
.bgs-d b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bgs-d b .up { color: #7dffa8; }
.bgs-bag { min-height: 0; display: flex; flex-direction: column; }
.bgs-cats { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); }
.bgs-cats button { flex: 1; height: 36px; border: 0; border-radius: 9px; background: none; font-size: 17px; opacity: .6; }
.bgs-cats button:hover { opacity: 1; }
.bgs-cats button.on { background: var(--panel2); opacity: 1; box-shadow: inset 0 -2px 0 var(--gold); }
.bgs-tools { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; }
.bgs-search { display: flex; align-items: center; gap: 8px; width: min(240px, 50%); padding: 0 12px; height: 32px; border-radius: 9px; background: var(--panel); }
.bgs-search span { opacity: .6; font-size: 12px; }
.bgs-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--txt); font: inherit; }
.bgs-filter { padding: 4px 10px; border-radius: 12px; background: rgba(226, 189, 98, .16); color: var(--gold); font-size: 12px; cursor: var(--cur-hand); }
.bgs-weight { margin-left: auto; color: var(--dim); font-size: 12px; font-weight: 600; }
.bgs-weight b { color: #7ee07e; }
.bgs-weight b.high { color: #ff7b6b; }
.bgs-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); grid-auto-rows: 82px; gap: 8px; align-content: start; scrollbar-width: thin; }
.bgs-item { position: relative; display: flex; flex-direction: column; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; cursor: var(--cur-hand); transition: transform .12s, border-color .12s; }
.bgs-item:hover { transform: translateY(-2px); border-color: rgba(226, 189, 98, .55); }
.bgs-item-name { flex: none; padding: 3px 4px; background: rgba(0, 0, 0, .28); font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; min-height: 26px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgs-item-ico { flex: 1; display: grid; place-items: center; }
.bgs-item-ico .bgs-ico { width: 40px; height: 40px; }
.bgs-item-n { position: absolute; right: 5px; bottom: 3px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.bgs-item-lock { position: absolute; left: 4px; bottom: 2px; font-size: 10px; }
.bgs-item.bgs-g-uncommon, .bgs-slot-ico.bgs-g-uncommon { border-color: rgba(94, 214, 124, .5); }
.bgs-item.bgs-g-rare, .bgs-slot-ico.bgs-g-rare { border-color: rgba(92, 164, 255, .6); }
.bgs-item.bgs-g-epic, .bgs-slot-ico.bgs-g-epic { border-color: rgba(190, 112, 255, .65); }
.bgs-item.bgs-g-legendary, .bgs-slot-ico.bgs-g-legendary { border-color: rgba(255, 176, 60, .75); }
/* สีชื่อตามเกรดบนพื้นเข้ม (สีเกรดเดิมของเกมออกแบบบนพื้นสว่าง) */
.bgs-slot-name .bgs-g-common { color: var(--txt); }
.bgs-slot-name .bgs-g-uncommon { color: #7fe39a; }
.bgs-slot-name .bgs-g-rare { color: #7fb8ff; }
.bgs-slot-name .bgs-g-epic { color: #d49bff; }
.bgs-slot-name .bgs-g-legendary { color: #ffc063; }
.bgs-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--dim); }
.bgs-ico { display: block; background-repeat: no-repeat; }
@media (max-width: 900px) {
  .bgs-body { grid-template-columns: 1fr; overflow-y: auto; gap: 18px; padding: 4px 12px 16px; }
  .bgs-char, .bgs-bag { overflow: visible; }
  .bgs-bag { min-height: 60vh; }
  .bgs-ring { grid-template-columns: 1fr 120px 1fr; }
  .bgs-slot-ico { width: 48px; height: 48px; }
  .bgs-split { grid-template-columns: 1fr; }
}

/* ช่องการ์ดในหน้ารายละเอียดไอเทม (UIManager.itemCardsHTML — การ์ดติดกับไอเทม, 2026-09-28) */
.it-cards { margin-top: 8px; }
.it-socks { display: grid; gap: 5px; padding: 6px; }
.it-sock, .it-card-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 1px dashed rgba(214, 178, 96, .45); border-radius: 8px;
  background: rgba(0, 0, 0, .22); color: inherit; font: inherit; text-align: left; cursor: var(--cur-hand); }
.it-sock.filled { border-style: solid; border-color: rgba(214, 178, 96, .6); background: rgba(214, 178, 96, .1); }
.it-sock.picking { border-color: #e2bd62; box-shadow: 0 0 0 2px rgba(226, 189, 98, .25); }
.it-sock:hover:not(:disabled), .it-card-opt:hover { filter: brightness(1.2); }
.it-sock:disabled { opacity: .5; cursor: default; }
.it-sock-ico { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.it-sock-ico .skill-ico { width: 26px; height: 26px; }
.it-sock-empty { color: #e2bd62; font-size: 18px; font-weight: 700; }
.it-sock-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.it-sock-txt b { font-size: 12px; }
.it-sock-txt small { font-size: 10px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-sock > i { font-style: normal; opacity: .6; }
.it-card-pick { display: grid; gap: 4px; margin: 0 6px 6px; padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); max-height: 180px; overflow-y: auto; }
.it-card-opt { border-style: solid; border-color: rgba(255, 255, 255, .08); }
.it-card-none { padding: 4px; opacity: .7; }
.bgs-item .bgs-socks { left: 6px; bottom: 5px; transform: none; }